Finish moving Sass variables to CSS custom property tokens

scss/_alert.scss

@@ -43,7 +43,7 @@ $alert-tokens: defaults(
   }
 
   .alert-heading {
-    // Specified to prevent conflicts of changing $headings-color
+    // Specified to prevent conflicts of changing --heading-color
     color: inherit;
   }
 

scss/_config.scss

@@ -36,7 +36,6 @@ $enable-grid-classes:         true !default;
 $enable-container-classes:    true !default;
 $enable-cssgrid:              true !default;
 $enable-button-pointers:      true !default;
-// $enable-negative-margins:     false !default;
 $enable-deprecation-messages: true !default;
 
 $color-mode-type:          "media-query" !default;
@@ -171,12 +170,6 @@ $position-values: (
 ) !default;
 // scss-docs-end position-map
 
-// Links
-//
-// Style anchor elements.
-
-$link-decoration:                         underline !default;
-$link-underline-offset:                   .2em !default;
 
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
@@ -243,14 +236,6 @@ $shadows: (
 ) !default;
 // scss-docs-end box-shadow-variables
 
-$transition-base:             all .2s ease-in-out !default;
-$transition-fade:             opacity .15s linear !default;
-
-// scss-docs-start collapse-transition
-$transition-collapse:         height .35s ease !default;
-$transition-collapse-width:   width .35s ease !default;
-// scss-docs-end collapse-transition
-
 // scss-docs-start aspect-ratios
 $aspect-ratios: (
   "auto": auto,
@@ -261,25 +246,17 @@ $aspect-ratios: (
 ) !default;
 // scss-docs-end aspect-ratios
 
-// Typography
-//
-// Font, line-height, and color for body text, headings, and more.
-
-// scss-docs-start font-variables
-$font-weight-lighter:         lighter !default;
-$font-weight-light:           300 !default;
-$font-weight-normal:          400 !default;
-$font-weight-medium:          500 !default;
-$font-weight-semibold:        600 !default;
-$font-weight-bold:            700 !default;
-$font-weight-bolder:          bolder !default;
-
-$font-weight-base:            $font-weight-normal !default;
-
-$line-height-base:            1.5 !default;
-$line-height-sm:              1.25 !default;
-$line-height-lg:              2 !default;
-// scss-docs-end font-variables
+// scss-docs-start font-weights
+$font-weights: (
+  lighter: lighter,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  bolder: bolder
+) !default;
+// scss-docs-end font-weights
 
 // scss-docs-start font-sizes
 $font-sizes: () !default;
@@ -331,10 +308,6 @@ $font-sizes: defaults(
 );
 // scss-docs-end font-sizes
 
-// scss-docs-start headings-variables
-$headings-color:              inherit !default;
-// scss-docs-end headings-variables
-
 // Z-index master list
 //
 // Warning: Avoid customizing these values. They're used for a bird's eye view

scss/_list-group.scss

@@ -65,8 +65,7 @@ $list-group-tokens: defaults(
     display: block;
     padding: var(--list-group-item-padding-y) var(--list-group-item-padding-x);
     color: var(--theme-fg, var(--list-group-color));
-    // stylelint-disable-next-line scss/at-function-named-arguments
-    text-decoration: if(sass($link-decoration == none): null);
+    text-decoration: none;
     background-color: var(--theme-bg-subtle, var(--list-group-bg));
     border: var(--list-group-border-width) solid var(--theme-border, var(--list-group-border-color));
 

scss/_menu.scss

@@ -180,7 +180,7 @@ $menu-tokens: defaults(
     }
 
     &.selected {
-      font-weight: $font-weight-semibold;
+      font-weight: var(--font-weight-semibold);
     }
 
     &.disabled,

scss/_nav.scss

@@ -240,7 +240,7 @@ $nav-underline-tokens: defaults(
 
     .nav-link.active,
     .show > .nav-link {
-      font-weight: $font-weight-bold;
+      font-weight: var(--font-weight-bold);
       color: var(--nav-underline-link-active-color);
       border-block-end-color: currentcolor;
     }

scss/_popover.scss

@@ -23,7 +23,7 @@ $popover-tokens: defaults(
     --popover-header-padding-x: var(--spacer),
     --popover-header-padding-y: var(--spacer-3),
     --popover-header-font-size: var(--font-size-sm),
-    --popover-header-color: #{$headings-color},
+    --popover-header-color: inherit,
     --popover-header-bg: var(--bg-1),
     --popover-body-padding-x: var(--spacer),
     --popover-body-padding-y: var(--spacer-3),

scss/_root.scss

@@ -19,29 +19,19 @@ $root-tokens: defaults(
 
     --gradient: #{$gradient},
 
-    // scss-docs-start root-font-weight-variables
-    --font-weight-lighter: lighter,
-    --font-weight-light: 300,
-    --font-weight-normal: 400,
-    --font-weight-medium: 500,
-    --font-weight-semibold: 600,
-    --font-weight-bold: 700,
-    --font-weight-bolder: bolder,
-    // scss-docs-end root-font-weight-variables
-
     // scss-docs-start root-body-variables
     --body-font-family: system-ui,
     --body-font-size: var(--font-size-base),
-    --body-font-weight: #{$font-weight-base},
-    --body-line-height: #{$line-height-base},
+    --body-font-weight: var(--font-weight-normal),
+    --body-line-height: var(--line-height-base),
 
-    --heading-color: #{$headings-color},
+    --heading-color: inherit,
 
     --hr-border-color: var(--border-color),
 
     --link-color: light-dark(var(--primary-base), var(--primary-fg)),
-    --link-decoration: #{$link-decoration},
-    --link-underline-offset: #{$link-underline-offset},
+    --link-decoration: underline,
+    --link-underline-offset: .2em,
     --link-hover-color: color-mix(in oklch, var(--link-color) 90%, #000),
 
     --font-mono: "ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;",
@@ -125,6 +115,13 @@ $root-tokens: defaults(
 }
 // scss-docs-end root-font-size-loop
 
+// scss-docs-start root-font-weight-loop
+// Generate font-weight tokens
+@each $name, $value in $font-weights {
+  $root-tokens: map.set($root-tokens, --font-weight-#{$name}, $value);
+}
+// scss-docs-end root-font-weight-loop
+
 // scss-docs-start root-theme-tokens
 // Generate semantic theme colors
 @each $color-name, $color-map in $theme-colors {

scss/_transitions.scss

@@ -1,8 +1,31 @@
-@use "config" as *;
+@use "functions" as *;
+@use "mixins/tokens" as *;
 @use "mixins/transition" as *;
 
+$fade-tokens: () !default;
+$collapse-tokens: () !default;
+
+// stylelint-disable scss/dollar-variable-default
+$fade-tokens: defaults(
+  (
+    --transition-fade: opacity .15s linear,
+  ),
+  $fade-tokens
+);
+
+// scss-docs-start collapse-transition
+$collapse-tokens: defaults(
+  (
+    --transition-collapse: height .35s ease,
+    --transition-collapse-width: width .35s ease,
+  ),
+  $collapse-tokens
+);
+// scss-docs-end collapse-transition
+
 .fade {
-  @include transition($transition-fade);
+  @include tokens($fade-tokens);
+  @include transition(var(--transition-fade));
 
   &:not(.show) {
     opacity: 0;
@@ -17,14 +40,15 @@
 }
 
 .collapsing {
+  @include tokens($collapse-tokens);
   height: 0;
   overflow: hidden;
-  @include transition($transition-collapse);
+  @include transition(var(--transition-collapse));
 
   &.collapse-horizontal {
     width: 0;
     height: auto;
-    @include transition($transition-collapse-width);
+    @include transition(var(--transition-collapse-width));
   }
 }
 // scss-docs-end collapse-classes

scss/_utilities.scss

@@ -689,27 +689,21 @@ $utilities: map.merge(
       class: fst,
       values: italic normal
     ),
+    // scss-docs-start utils-font-weight
     "font-weight": (
       property: font-weight,
       class: fw,
-      values: (
-        lighter: $font-weight-lighter,
-        light: $font-weight-light,
-        normal: $font-weight-normal,
-        medium: $font-weight-medium,
-        semibold: $font-weight-semibold,
-        bold: $font-weight-bold,
-        bolder: $font-weight-bolder
-      )
+      values: $font-weights
     ),
+    // scss-docs-end utils-font-weight
     "line-height": (
       property: line-height,
       class: lh,
       values: (
         1: 1,
-        sm: $line-height-sm,
-        base: $line-height-base,
-        lg: $line-height-lg,
+        sm: var(--line-height-sm),
+        base: var(--line-height-base),
+        lg: var(--line-height-lg),
       )
     ),
     "text-align": (

scss/content/_reboot.scss

@@ -311,8 +311,6 @@ $reboot-mark-tokens: defaults(
     text-underline-offset: var(--link-underline-offset);
 
     &:hover {
-      // --link-color: var(--link-hover-color);
-      // --link-decoration: var(--link-hover-decoration, var(--link-decoration));
       color: var(--theme-fg-emphasis, var(--link-hover-color));
       text-decoration: var(--link-hover-decoration, var(--link-decoration));
     }

scss/mixins/_transition.scss

@@ -1,6 +1,8 @@
 @use "sass:list";
 @use "../config" as *;
 
+$transition-base: all .2s ease-in-out !default;
+
 // stylelint-disable property-disallowed-list
 @mixin transition($transition...) {
   @if list.length($transition) == 0 {

site/src/content/docs/components/collapse.mdx

@@ -96,7 +96,7 @@ Note that Bootstrap’s current implementation does not cover the various *optio
 
 ### Sass variables
 
-<ScssDocs name="collapse-transition" file="scss/_config.scss" />
+<ScssDocs name="collapse-transition" file="scss/_transitions.scss" />
 
 ### Classes
 

site/src/content/docs/content/typography.mdx

@@ -267,12 +267,6 @@ Headings, paragraphs, description lists, and `<legend>` elements—covered here
 
 <ScssDocs name="type-tokens" file="scss/content/_reboot.scss" />
 
-### Sass variables
-
-Headings also have a dedicated Sass variable for their `color`.
-
-<ScssDocs name="headings-variables" file="scss/_config.scss" />
-
 ### Sass maps
 
 The `$font-sizes` map in `_config.scss` defines Bootstrap’s type scale. Each key (e.g., `xs`, `md`, `3xl`) holds a nested map with `font-size` and `line-height` values. Larger sizes use `clamp()` for responsive scaling.

site/src/content/docs/guides/migration.mdx

@@ -300,7 +300,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
 
 - Relocated heading classes (like `.h1`) and some type classes (`.mark`, `.small`, and `.initialism`) to Reboot from `_type.scss`. This avoids a dependency in Sass modules and we like to avoid extending selectors in general.
 - **Split the remaining `_type.scss` into `_lists.scss` and `_blockquote.scss`.** Update any individual `@use "bootstrap/scss/content/type"` imports to `content/lists` and/or `content/blockquote` instead.
-- **Headings, paragraphs, description lists, and `<legend>` now use CSS variables instead of Sass variables.** Removed `$headings-margin-bottom`, `$headings-font-family`, `$headings-font-style`, `$headings-font-weight`, `$headings-line-height`, `$paragraph-margin-bottom`, `$legend-margin-bottom`, `$legend-font-size`, `$legend-font-weight`, and `$dt-font-weight`. Customize the equivalent `--heading-*`, `--paragraph-margin-bottom`, and `--legend-*` CSS variables at runtime instead—see [Typography]([[docsref:/content/typography]]). `$headings-color` is the only Sass variable that remains.
+- **Headings, paragraphs, description lists, and `<legend>` now use CSS variables instead of Sass variables.** Removed `$headings-margin-bottom`, `$headings-font-family`, `$headings-font-style`, `$headings-font-weight`, `$headings-line-height`, `$headings-color`, `$paragraph-margin-bottom`, `$legend-margin-bottom`, `$legend-font-size`, `$legend-font-weight`, and `$dt-font-weight`. Customize the equivalent `--heading-*`, `--paragraph-margin-bottom`, and `--legend-*` CSS variables at runtime instead—see [Typography]([[docsref:/content/typography]]).
 - Heading and `<dt>` font-weight now fall back to shared weight tokens (`font-weight: var(--heading-font-weight, var(--font-weight-medium))`, `var(--dt-font-weight, var(--font-weight-bold))`) instead of a hardcoded value, so you can override either the component-specific token or the shared one.
 - Added `--link-underline-offset` to `$root-tokens` (mirroring `$link-underline-offset`) for runtime customization of the link underline offset.
 - Reboot and content spacing—`address`, lists, `dd`, `blockquote`, `pre`, `figure`, `caption`, `kbd` padding, and `ol`/`ul` `padding-inline-start` (now driven by a new `--list-padding-x` token)—now derive from the `--spacer-*` scale instead of hardcoded `rem` values. Visual output is unchanged.
@@ -413,6 +413,8 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
 | — | — | `.fs-6xl` | `clamp(3.75rem, …, 5rem)` |
 </BsTable>
 
+- **Font weights consolidated into a `$font-weights` Sass map.** Removed the individual `$font-weight-lighter`, `$font-weight-light`, `$font-weight-normal`, `$font-weight-medium`, `$font-weight-semibold`, `$font-weight-bold`, and `$font-weight-bolder` variables in favor of a single `$font-weights` map (keys: `lighter`, `light`, `normal`, `medium`, `semibold`, `bold`, `bolder`)—see [Font weight]([[docsref:/utilities/font-weight]]). `--font-weight-*` CSS custom properties are generated from this map instead of being hardcoded in `$root-tokens`. `$font-weight-base` was replaced by `--bs-font-weight-normal`.
+
 - **Removed `.display-1`–`.display-6` heading utilities.** The display heading classes no longer exist and have no single-class replacement. Recreate them by pairing a large font-size utility with a weight utility. v5's display headings used `font-weight: 300`, so `.fw-light` reproduces the original look; use a heavier weight (`.fw-semibold`, `.fw-bold`) if you prefer:
 
 <BsTable>

site/src/content/docs/utilities/font-weight.mdx

@@ -22,22 +22,14 @@ Quickly change the `font-weight` of text with these utilities. `font-weight` uti
 
 ## CSS
 
+### Sass map
+
+Font weights are defined in the `$font-weights` map in `scss/_config.scss`. CSS custom properties (`--font-weight-*`) are generated from this map in `scss/_root.scss`, and the same map powers the Sass utilities API below.
+
+<ScssDocs name="font-weights" file="scss/_config.scss" />
+
 ### Sass utilities API
 
 Font weight utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
 
-```scss
-"font-weight": (
-  property: font-weight,
-  class: fw,
-  values: (
-    lighter: $font-weight-lighter,
-    light: $font-weight-light,
-    normal: $font-weight-normal,
-    medium: $font-weight-medium,
-    semibold: $font-weight-semibold,
-    bold: $font-weight-bold,
-    bolder: $font-weight-bolder
-  )
-),
-```
+<ScssDocs name="utils-font-weight" file="scss/_utilities.scss" />

site/src/content/docs/utilities/line-height.mdx

@@ -29,9 +29,9 @@ Line height utilities are declared in our utilities API in `scss/_utilities.scss
   class: lh,
   values: (
     1: 1,
-    sm: $line-height-sm,
-    base: $line-height-base,
-    lg: $line-height-lg,
+    sm: var(--line-height-sm),
+    base: var(--line-height-base),
+    lg: var(--line-height-lg),
   )
 ),
 ```