Add theme maps specific to dark mode (#37843)

* Add theme maps specific to dark mode

* Fix CSS building

* Fix other failing test

Co-authored-by: Mark Otto <markdotto@gmail.com>

diff --git a/scss/_maps.scss b/scss/_maps.scss
index 035f2896fbf1f087facad9ed8ad00395a7e077d3..46952baa11101a2e129b30d3c89092cdc306dd6a 100644 (file)
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -39,6 +39,45 @@ $theme-colors-border-subtle: (
   "dark": $dark-border-subtle,
 ) !default;
 
+$theme-colors-text-dark: null !default;
+$theme-colors-bg-subtle-dark: null !default;
+$theme-colors-border-subtle-dark: null !default;
+
+@if $enable-dark-mode {
+  $theme-colors-text-dark: (
+    "primary": $primary-text-dark,
+    "secondary": $secondary-text-dark,
+    "success": $success-text-dark,
+    "info": $info-text-dark,
+    "warning": $warning-text-dark,
+    "danger": $danger-text-dark,
+    "light": $light-text-dark,
+    "dark": $dark-text-dark,
+  ) !default;
+
+  $theme-colors-bg-subtle-dark: (
+    "primary": $primary-bg-subtle-dark,
+    "secondary": $secondary-bg-subtle-dark,
+    "success": $success-bg-subtle-dark,
+    "info": $info-bg-subtle-dark,
+    "warning": $warning-bg-subtle-dark,
+    "danger": $danger-bg-subtle-dark,
+    "light": $light-bg-subtle-dark,
+    "dark": $dark-bg-subtle-dark,
+  ) !default;
+
+  $theme-colors-border-subtle-dark: (
+    "primary": $primary-border-subtle-dark,
+    "secondary": $secondary-border-subtle-dark,
+    "success": $success-border-subtle-dark,
+    "info": $info-border-subtle-dark,
+    "warning": $warning-border-subtle-dark,
+    "danger": $danger-border-subtle-dark,
+    "light": $light-border-subtle-dark,
+    "dark": $dark-border-subtle-dark,
+  ) !default;
+}
+
 // Utilities maps
 //
 // Extends the default `$theme-colors` maps to help create our utilities.

diff --git a/scss/_root.scss b/scss/_root.scss
index a0efc0e65631b074d6936289a2694dd66ab4739a..f9de30195aabd53f0828df345582b2fb6faf9ffc 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -153,32 +153,17 @@
     --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
     --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
 
-    --#{$prefix}primary-text: #{$primary-text-dark};
-    --#{$prefix}secondary-text: #{$secondary-text-dark};
-    --#{$prefix}success-text: #{$success-text-dark};
-    --#{$prefix}info-text: #{$info-text-dark};
-    --#{$prefix}warning-text: #{$warning-text-dark};
-    --#{$prefix}danger-text: #{$danger-text-dark};
-    --#{$prefix}light-text: #{$light-text-dark};
-    --#{$prefix}dark-text: #{$dark-text-dark};
-
-    --#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark};
-    --#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark};
-    --#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark};
-    --#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark};
-    --#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark};
-    --#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark};
-    --#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark};
-    --#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark};
-
-    --#{$prefix}primary-border-subtle: #{$primary-border-subtle-dark};
-    --#{$prefix}secondary-border-subtle: #{$secondary-border-subtle-dark};
-    --#{$prefix}success-border-subtle: #{$success-border-subtle-dark};
-    --#{$prefix}info-border-subtle: #{$info-border-subtle-dark};
-    --#{$prefix}warning-border-subtle: #{$warning-border-subtle-dark};
-    --#{$prefix}danger-border-subtle: #{$danger-border-subtle-dark};
-    --#{$prefix}light-border-subtle: #{$light-border-subtle-dark};
-    --#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark};
+    @each $color, $value in $theme-colors-text-dark {
+      --#{$prefix}#{$color}-text: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-bg-subtle-dark {
+      --#{$prefix}#{$color}-bg-subtle: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-border-subtle-dark {
+      --#{$prefix}#{$color}-border-subtle: #{$value};
+    }
 
     @if $headings-color-dark != null {
       --#{$prefix}heading-color: #{$headings-color-dark};

diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index 62acc2400775e85bd11623b40f80ec7af73e2c6f..0ea62372e2ca9e795c35753b4a6a38916a773a75 100644 (file)
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -5,6 +5,7 @@ $include-column-box-sizing: true !default;
 
 @import "functions";
 @import "variables";
+@import "variables-dark";
 @import "maps";
 
 @import "mixins/lists";

diff --git a/scss/tests/utilities/_api.test.scss b/scss/tests/utilities/_api.test.scss
index 9e84441d2c82d6428c9bf4433c5ef1dd47a26b74..b764cba5cbe026aa30982ddf811c6f311de63b8a 100644 (file)
--- a/scss/tests/utilities/_api.test.scss
+++ b/scss/tests/utilities/_api.test.scss
@@ -1,5 +1,6 @@
 @import "../../functions";
 @import "../../variables";
+@import "../../variables-dark";
 @import "../../maps";
 @import "../../mixins";