Refactor CSS variables and design tokens (#41922)

- Rename --bs-color-* to --bs-fg-* for foreground colors
- Simplify font-size variables (remove clamp for xs/sm/md)
- Remove deprecated secondary/tertiary color variables
- Clean up commented-out legacy variable declarations

diff --git a/scss/_config.scss b/scss/_config.scss
index f1c83d83d42794bb49403881c41303a80c88c054..aac8f808f12d38d6be6d4121c0086807a0cbaece 100644 (file)
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -6,7 +6,7 @@ $prefix: bs- !default;
 
 $enable-caret:                true !default;
 $enable-rounded:              true !default;
-$enable-shadows:              false !default;
+$enable-shadows:              true !default;
 $enable-gradients:            false !default;
 $enable-transitions:          true !default;
 $enable-reduced-motion:       true !default;

diff --git a/scss/_root.scss b/scss/_root.scss
index 3ff64b2e6093e1a9c53dae9ba94e02ceb3985b07..eedd0772e32be9b0adb89541639ef39a06e84749 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -27,7 +27,7 @@
   }
 
   @each $color, $value in $theme-fgs {
-    --#{$prefix}color-#{$color}: #{$value};
+    --#{$prefix}fg-#{$color}: #{$value};
   }
 
   @each $color, $value in $theme-borders {
@@ -65,15 +65,13 @@
 
   // scss-docs-start root-font-size-variables
   --#{$prefix}font-size-base: #{$font-size-base}; // 14px
-  // --#{$prefix}font-size-sm: calc(#{$font-size-base} * .9285);
-  // --#{$prefix}font-size-lg: calc(#{$font-size-base} * 1.285);
 
-  --#{$prefix}font-size-xs: clamp(.75rem, .7rem + .25vw, .875rem);
-  --#{$prefix}font-size-sm: clamp(.875rem, .8rem + .375vw, 1rem);
-  --#{$prefix}font-size-md: clamp(1rem, .9rem + .5vw, 1.125rem);
+  --#{$prefix}font-size-xs: .75rem;
+  --#{$prefix}font-size-sm: .875rem;
+  --#{$prefix}font-size-md: 1rem;
   --#{$prefix}font-size-lg: clamp(1.25rem, 1rem + .625vw, 1.5rem);
   --#{$prefix}font-size-xl: clamp(1.5rem, 1.1rem + .75vw, 1.75rem);
-  --#{$prefix}font-size-2xl: clamp(1.75rem, 1.3rem + 1vw, 2.25rem);
+  --#{$prefix}font-size-2xl: clamp(1.75rem, 1.3rem + 1vw, 2rem);
   --#{$prefix}font-size-3xl: clamp(2rem, 1.5rem + 1.875vw, 2.5rem);
   --#{$prefix}font-size-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
   --#{$prefix}font-size-5xl: clamp(3rem, 2rem + 5vw, 4rem);
@@ -98,49 +96,12 @@
     --#{$prefix}body-text-align: #{$body-text-align};
   }
 
-  @each $key, $value in $theme-bgs {
-    $key: if($key == null, "", "-" + $key);
-    --#{$prefix}bg#{$key}: #{$value};
-  }
-
-  @each $key, $value in $theme-fgs {
-    $key: if($key == null, "", "-" + $key);
-    --#{$prefix}fg#{$key}: #{$value};
-  }
-
-  @each $key, $value in $theme-borders {
-    $key: if($key == null, "", "-" + $key);
-    --#{$prefix}border#{$key}: #{$value};
-  }
-
-  // --#{$prefix}body-color: #{$body-color};
   --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
-  // --#{$prefix}body-bg: #{$body-bg};
   --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
-
-  // --#{$prefix}emphasis-color: #{$body-emphasis-color};
-  // --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
-
-  // --#{$prefix}secondary-color: #{$body-secondary-color};
-  // --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
-  // --#{$prefix}secondary-bg: #{$body-secondary-bg};
-  // --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
-
-  // --#{$prefix}tertiary-color: #{$body-tertiary-color};
-  // --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
-  // --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
-  // --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
   // scss-docs-end root-body-variables
 
   --#{$prefix}heading-color: #{$headings-color};
 
-  // --#{$prefix}link-color: #{$link-color};
-  // --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
-  // --#{$prefix}link-decoration: #{$link-decoration};
-
-  // --#{$prefix}link-hover-color: #{$link-hover-color};
-  // --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
-
   --#{$prefix}link-color: light-dark(var(--#{$prefix}primary-base), var(--#{$prefix}primary-text));
   --#{$prefix}link-decoration: #{$link-decoration};
   --#{$prefix}link-hover-color: color-mix(in oklch, var(--#{$prefix}link-color) 90%, #000);
@@ -172,15 +133,10 @@
 
   // Focus styles
   // scss-docs-start root-focus-variables
-  // --#{$prefix}focus-ring-width: #{$focus-ring-width};
-  // --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
-  // --#{$prefix}focus-ring-color: #{$focus-ring-color};
-
   --#{$prefix}focus-ring-width: 3px;
   --#{$prefix}focus-ring-offset: -1px;
   --#{$prefix}focus-ring-color: var(--#{$prefix}primary-focus-ring);
   --#{$prefix}focus-ring: var(--#{$prefix}focus-ring-width) solid var(--#{$prefix}focus-ring-color);
-
   // scss-docs-end root-focus-variables
 
   // scss-docs-start root-form-validation-variables
@@ -196,35 +152,10 @@
     color-scheme: dark;
 
     // scss-docs-start root-dark-mode-vars
-    // --#{$prefix}body-color: #{$body-color-dark};
-    // --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
-    // --#{$prefix}body-bg: #{$body-bg-dark};
-    // --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
-
     --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
     --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
-
-    // --#{$prefix}secondary-color: #{$body-secondary-color-dark};
-    // --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
-    // --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
-    // --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
-
-    // --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
-    // --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
-    // --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
-    // --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
-
     --#{$prefix}heading-color: #{$headings-color-dark};
 
-    // --#{$prefix}link-color: #{$link-color-dark};
-    // --#{$prefix}link-hover-color: #{$link-hover-color-dark};
-    // --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
-    // --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
-
-    // --#{$prefix}code-color: #{$code-color-dark}; // removed in v6
-    // --#{$prefix}highlight-color: #{$mark-color-dark};
-    // --#{$prefix}highlight-bg: #{$mark-bg-dark};
-
     --#{$prefix}border-color: #{$border-color-dark};
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
 

diff --git a/scss/_theme.scss b/scss/_theme.scss
index 48f9621a5aaa150fa08a61e860596c9d76e806a6..33e81f3992ef088958d12c3c1777b0f1c81d92fa 100644 (file)
--- a/scss/_theme.scss
+++ b/scss/_theme.scss
@@ -159,6 +159,7 @@ $theme-bgs: (
   "1": light-dark(var(--#{$prefix}gray-025), var(--#{$prefix}gray-950)),
   "2": light-dark(var(--#{$prefix}gray-050), var(--#{$prefix}gray-900)),
   "3": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
+  "4": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
   "white": var(--#{$prefix}white),
   "black": var(--#{$prefix}black),
   "transparent": transparent,
@@ -170,6 +171,7 @@ $theme-fgs: (
   "1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
   "2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
   "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-500)),
+  "4": light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-600)),
   "white": var(--#{$prefix}white),
   "black": var(--#{$prefix}black),
   "inherit": inherit,

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 4783819f1c2f360dcab6b80bef163529f7de297c..a3abd350f14bf748f247ed8a456c127e1650dbe0 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -120,14 +120,6 @@ $body-text-align:           null !default;
 $body-color:                var(--#{$prefix}color-body) !default;
 $body-bg:                   var(--#{$prefix}bg-body) !default;
 
-$body-secondary-color:      var(--#{$prefix}color-secondary) !default;
-$body-secondary-bg:         var(--#{$prefix}bg-secondary) !default;
-
-$body-tertiary-color:       var(--#{$prefix}color-muted) !default;
-$body-tertiary-bg:          var(--#{$prefix}bg-muted) !default;
-
-$body-emphasis-color:       $black !default;
-
 // Links
 //
 // Style anchor elements.
@@ -177,9 +169,9 @@ $border-color-translucent:    rgba($black, .175) !default;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables
-$border-radius:               .375rem !default;
-$border-radius-sm:            .25rem !default;
-$border-radius-lg:            .5rem !default;
+$border-radius:               .5rem !default;
+$border-radius-sm:            .375rem !default;
+$border-radius-lg:            .75rem !default;
 $border-radius-xl:            1rem !default;
 $border-radius-2xl:           2rem !default;
 $border-radius-pill:          50rem !default;
@@ -553,13 +545,13 @@ $pre-color:                         null !default;
 // $body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
 // $body-secondary-bg-dark:            var(--#{$prefix}gray-800) !default;
 // $body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
-$body-tertiary-bg-dark:             color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900)) !default;
+// $body-tertiary-bg-dark:             color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900)) !default;
 $body-emphasis-color-dark:          $white !default;
 $border-color-dark:                 var(--#{$prefix}gray-700) !default;
 $border-color-translucent-dark:     rgba($white, .15) !default;
 $headings-color-dark:               inherit !default;
 // $mark-color-dark:                   $body-color-dark !default;
-$mark-bg-dark:                      var(--#{$prefix}yellow-800) !default;
+// $mark-bg-dark:                      var(--#{$prefix}yellow-800) !default;
 
 
 //