[DEV-13061] Properly style highlighted text in story title & subtitle

prezly · Jul 8, 2024 · 6db7259 · 6db7259
1 parent a70f072
commit 6db7259
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -1,6 +1,7 @@
 @import "accessibility";
 @import "border-radius";
 @import "container";
+@import "highlighted-text";
 @import "images";
 @import "line-clamp";
 @import "responsive";