From 6db72592c6b2cfcd386621ba895afbc3355f9b1d Mon Sep 17 00:00:00 2001
From: Ivan Voskoboinyk <ivan@voskoboinyk.com>
Date: Mon, 8 Jul 2024 12:53:14 +0200
Subject: [PATCH] [DEV-13061] Properly style highlighted text in story title &
 subtitle

---
 components/ContentRenderer/ContentRenderer.module.scss  | 2 +-
 modules/Story/HeaderRenderer/HeaderRenderer.module.scss | 4 ++++
 styles/mixins/_highlighted-text.scss                    | 3 +++
 styles/mixins/index.scss                                | 1 +
 4 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 styles/mixins/_highlighted-text.scss

diff --git a/components/ContentRenderer/ContentRenderer.module.scss b/components/ContentRenderer/ContentRenderer.module.scss
index 41e7ab87..69cb7079 100644
--- a/components/ContentRenderer/ContentRenderer.module.scss
+++ b/components/ContentRenderer/ContentRenderer.module.scss
@@ -108,7 +108,7 @@
         }
 
         mark {
-            background-color: color-mix(in srgb, var(--prezly-accent-color) 24%, transparent);
+            @include highlighted-text;
         }
 
         .prezly-slate-button-block {
diff --git a/modules/Story/HeaderRenderer/HeaderRenderer.module.scss b/modules/Story/HeaderRenderer/HeaderRenderer.module.scss
index 69caaffd..26813c6c 100644
--- a/modules/Story/HeaderRenderer/HeaderRenderer.module.scss
+++ b/modules/Story/HeaderRenderer/HeaderRenderer.module.scss
@@ -8,5 +8,9 @@
             color: $color-base-700;
         }
         /* stylelint-enable selector-class-pattern */
+
+        mark {
+            @include highlighted-text;
+        }
     }
 }
diff --git a/styles/mixins/_highlighted-text.scss b/styles/mixins/_highlighted-text.scss
new file mode 100644
index 00000000..3dee5469
--- /dev/null
+++ b/styles/mixins/_highlighted-text.scss
@@ -0,0 +1,3 @@
+@mixin highlighted-text {
+    background-color: color-mix(in srgb, var(--prezly-accent-color) 24%, transparent);
+}
diff --git a/styles/mixins/index.scss b/styles/mixins/index.scss
index b7dd3374..6416f787 100644
--- a/styles/mixins/index.scss
+++ b/styles/mixins/index.scss
@@ -1,6 +1,7 @@
 @import "accessibility";
 @import "border-radius";
 @import "container";
+@import "highlighted-text";
 @import "images";
 @import "line-clamp";
 @import "responsive";