From 60714e32c76c23c407c291e9bdebcdf211d45222 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Julien=20D=C3=A9ramond?= Date: Thu, 12 Jan 2023 06:06:18 +0100 Subject: [PATCH] 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 --- scss/_maps.scss | 39 +++++++++++++++++++++++++++++ scss/_root.scss | 37 ++++++++------------------- scss/bootstrap-grid.scss | 1 + scss/tests/utilities/_api.test.scss | 1 + 4 files changed, 52 insertions(+), 26 deletions(-) diff --git a/scss/_maps.scss b/scss/_maps.scss index 035f2896fb..46952baa11 100644 --- 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 a0efc0e656..f9de30195a 100644 --- 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 62acc24007..0ea62372e2 100644 --- 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 9e84441d2c..b764cba5cb 100644 --- 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"; -- 2.47.2