First try to dark texts

Signed-off-by: louismaximepiton <[email protected]>
Orange-OpenSource · Jan 17, 2022 · 9f13c7e · 9f13c7e
1 parent 0adb52f
commit 9f13c7e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -1,4 +1,4 @@
-// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix, selector-max-type
 
 
 // Reboot
@@ -232,7 +232,6 @@ ul {
 
 // Future-proof markers' color
 // See https://developer.mozilla.org/fr/docs/Web/CSS/::marker
-// stylelint-disable selector-max-type
 li::marker {
   color: $accessible-orange;
   vertical-align: middle;
@@ -253,7 +252,6 @@ li::before {
 li li::before { color: $gray-600; }
 
 li li li::before { color: $gray-500; }
-// stylelint-enable selector-max-type
 // End mod
 
 dt {
@@ -727,3 +725,39 @@ progress {
 [hidden] {
   display: none !important;
 }
+
+// Boosted mod
+[class*="-dark"] {
+  li::marker { color: $brand-orange; }
+  li li::marker { color: $gray-600; }
+  li li li::marker { color: $gray-700; }
+
+  li::before { color: $brand-orange; }
+  li li::before { color: $gray-600; }
+  li li li::before { color: $gray-700; }
+
+  caption { color: $white; }
+  // No <mark> because of accessibility
+  var,
+  code,
+  figcaption { color: $code-color-dark; }
+
+  pre { color: $pre-color-dark; }
+
+  a > * { color: inherit; }
+
+  a:not(.btn) {
+    color: $link-color-dark;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active { color: $link-hover-color-dark; }
+  }
+
+  kbd {
+    color: $kbd-color-dark;
+    background-color: $kbd-bg-dark;
+  }
+}
+// End mod
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -460,11 +460,12 @@ $link-shade-percentage:                   20% !default;
 $link-hover-color:                        $accessible-orange !default;
 $link-hover-decoration:                   null !default;
 
+$link-color-dark:                         $white !default;
+$link-hover-color-dark:                   $brand-orange !default;
 
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
 
-
 // Boosted mod
 $linked-chevron-icon-width:   subtract(.5rem, 1px) !default;
 $linked-chevron-icon-height:  $spacer * .5 !default;
@@ -1793,14 +1794,18 @@ $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
 
 $code-font-size:                    .875em !default;
 $code-color:                        $gray-700 !default;
+$code-color-dark:                   $gray-600 !default;
 
 $kbd-padding-y:                     $spacer * .05 !default;
 $kbd-padding-x:                     $spacer * .05 !default;
 $kbd-font-size:                     $code-font-size !default;
 $kbd-color:                         $black !default;
 $kbd-bg:                            $gray-300 !default;
+$kbd-color-dark:                    $white !default;
+$kbd-bg-dark:                       $gray-900 !default;
 
 $pre-color:                         $gray-900 !default;
+$pre-color-dark:                    $gray-300 !default;
 $pre-line-height:                   1.25 !default; // Boosted mod
 
 //