feat(css): improve <mark> rendering for a11y (#1506)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Sep 13, 2022 · a1d25dc · a1d25dc
1 parent 4f06c8c
commit a1d25dc
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -309,6 +309,7 @@ small {
 
 mark {
   padding: $mark-padding;
+  color: var(--#{$prefix}highlight-color); // Boosted mod
   background-color: var(--#{$prefix}highlight-bg);
 }
 

diff --git a/scss/_root.scss b/scss/_root.scss
@@ -75,6 +75,7 @@
 
   --#{$prefix}code-color: #{$code-color};
 
+  --#{$prefix}highlight-color: #{$mark-color}; // Boosted mod
   --#{$prefix}highlight-bg: #{$mark-bg};
 }
 
@@ -85,6 +86,8 @@
   --#{$prefix}link-hover-color: #{$link-hover-color-dark};
   --#{$boosted-prefix}caption-color: #{$table-caption-color-dark};
   --#{$prefix}code-color: #{$code-color-dark};
+  --#{$prefix}highlight-color: #{$mark-color-dark};
+  --#{$prefix}highlight-bg: #{$mark-bg-dark};
   --#{$boosted-prefix}kbd-color: #{$kbd-color-dark};
   --#{$boosted-prefix}kbd-bg: #{$kbd-bg-dark};
   --#{$boosted-prefix}pre-color: #{$pre-color-dark};
@@ -95,6 +98,8 @@
     --#{$prefix}link-hover-color: #{$link-hover-color};
     --#{$boosted-prefix}caption-color: #{$table-caption-color};
     --#{$prefix}code-color: #{$code-color};
+    --#{$prefix}highlight-color: #{$mark-color};
+    --#{$prefix}highlight-bg: #{$mark-bg};
     --#{$boosted-prefix}kbd-color: #{$kbd-color};
     --#{$boosted-prefix}kbd-bg: #{$kbd-bg};
     --#{$boosted-prefix}pre-color: #{$pre-color};

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -773,7 +773,11 @@ $dt-font-weight:              $font-weight-bold !default;
 $list-inline-padding:         $spacer * .25 !default;
 
 $mark-padding:                0 .1875em !default; // Boosted mod
-$mark-bg:                     $primary !default;
+$mark-color:                  $white !default; // Boosted mod
+$mark-bg:                     $black !default; // Boosted mod
+
+$mark-color-dark:             $black !default; // Boosted mod
+$mark-bg-dark:                $white !default; // Boosted mod
 // scss-docs-end type-variables
 // End mod
 

diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
@@ -115,7 +115,6 @@
   }
 
   mark {
-    font-weight: $font-weight-bold;
     color: var(--#{$prefix}white);
     background: var(--#{$prefix}black);
   }