Generate new CSS vars from new maps

2 files changed, 45 insertions, 27 deletions

diff --git a/scss/_maps.scss b/scss/_maps.scss
index f23efd68bb..6418a3f6c0 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -6,6 +6,39 @@
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
 // scss-docs-end theme-colors-rgb
 
+$theme-colors-text: (
+  "primary": $primary-text,
+  "secondary": $secondary-text,
+  "success": $success-text,
+  "info": $info-text,
+  "warning": $warning-text,
+  "danger": $danger-text,
+  "light": $light-text,
+  "dark": $dark-text,
+) !default;
+
+$theme-colors-bg-subtle: (
+  "primary": $primary-bg-subtle,
+  "secondary": $secondary-bg-subtle,
+  "success": $success-bg-subtle,
+  "info": $info-bg-subtle,
+  "warning": $warning-bg-subtle,
+  "danger": $danger-bg-subtle,
+  "light": $light-bg-subtle,
+  "dark": $dark-bg-subtle,
+) !default;
+
+$theme-colors-border-subtle: (
+  "primary": $primary-border-subtle,
+  "secondary": $secondary-border-subtle,
+  "success": $success-border-subtle,
+  "info": $info-border-subtle,
+  "warning": $warning-border-subtle,
+  "danger": $danger-border-subtle,
+  "light": $light-border-subtle,
+  "dark": $dark-border-subtle,
+) !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 a22f83f5d9..0d05c1de5c 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -22,38 +22,23 @@
     --#{$prefix}#{$color}-rgb: #{$value};
   }
 
+  @each $color, $value in $theme-colors-text {
+    --#{$prefix}#{$color}-text: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-bg-subtle {
+    --#{$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-border-subtle {
+    --#{$prefix}#{$color}-border-subtle: #{$value};
+  }
+
   --#{$prefix}white-rgb: #{to-rgb($white)};
   --#{$prefix}black-rgb: #{to-rgb($black)};
   --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
   --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
 
-  --#{$prefix}primary-text: #{$primary-text};
-  --#{$prefix}secondary-text: #{$secondary-text};
-  --#{$prefix}success-text: #{$success-text};
-  --#{$prefix}info-text: #{$info-text};
-  --#{$prefix}warning-text: #{$warning-text};
-  --#{$prefix}danger-text: #{$danger-text};
-  --#{$prefix}light-text: #{$light-text};
-  --#{$prefix}dark-text: #{$dark-text};
-
-  --#{$prefix}primary-bg-subtle: #{$primary-bg-subtle};
-  --#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle};
-  --#{$prefix}success-bg-subtle: #{$success-bg-subtle};
-  --#{$prefix}info-bg-subtle: #{$info-bg-subtle};
-  --#{$prefix}warning-bg-subtle: #{$warning-bg-subtle};
-  --#{$prefix}danger-bg-subtle: #{$danger-bg-subtle};
-  --#{$prefix}light-bg-subtle: #{$light-bg-subtle};
-  --#{$prefix}dark-bg-subtle: #{$dark-bg-subtle};
-
-  --#{$prefix}primary-border-subtle: #{$primary-border-subtle};
-  --#{$prefix}secondary-border-subtle: #{$secondary-border-subtle};
-  --#{$prefix}success-border-subtle: #{$success-border-subtle};
-  --#{$prefix}info-border-subtle: #{$info-border-subtle};
-  --#{$prefix}warning-border-subtle: #{$warning-border-subtle};
-  --#{$prefix}danger-border-subtle: #{$danger-border-subtle};
-  --#{$prefix}light-border-subtle: #{$light-border-subtle};
-  --#{$prefix}dark-border-subtle: #{$dark-border-subtle};
-
   // Fonts
 
   // Note: Use `inspect` for lists so that quoted items keep the quotes.