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>
twbs · Jan 12, 2023 · 60714e3 · 60714e3
1 parent f23e203
commit 60714e3
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,5 +1,6 @@
 @import "../../functions";
 @import "../../variables";
+@import "../../variables-dark";
 @import "../../maps";
 @import "../../mixins";