diff --git a/scss/_alert.scss b/scss/_alert.scss index 10077c8b98aa..7305ec36793a 100644 --- a/scss/_alert.scss +++ b/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; } diff --git a/scss/_config.scss b/scss/_config.scss index 7625e71e33af..73e5fe327409 100644 --- a/scss/_config.scss +++ b/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 diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 6860abd7d543..92aaa19dab9c 100644 --- a/scss/_list-group.scss +++ b/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)); diff --git a/scss/_menu.scss b/scss/_menu.scss index 31c7853d328e..7dba484b6bf2 100644 --- a/scss/_menu.scss +++ b/scss/_menu.scss @@ -180,7 +180,7 @@ $menu-tokens: defaults( } &.selected { - font-weight: $font-weight-semibold; + font-weight: var(--font-weight-semibold); } &.disabled, diff --git a/scss/_nav.scss b/scss/_nav.scss index 90ac39d021b8..257576ab115f 100644 --- a/scss/_nav.scss +++ b/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; } diff --git a/scss/_popover.scss b/scss/_popover.scss index 0060ff3ce4df..cb18beeae9b9 100644 --- a/scss/_popover.scss +++ b/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), diff --git a/scss/_root.scss b/scss/_root.scss index fb0bc40c00e5..b73ba86db8f5 100644 --- a/scss/_root.scss +++ b/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 { diff --git a/scss/_transitions.scss b/scss/_transitions.scss index 3a7f936bc706..ad6779ecb0e6 100644 --- a/scss/_transitions.scss +++ b/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 diff --git a/scss/_utilities.scss b/scss/_utilities.scss index c35881132e59..57240f7ecf90 100644 --- a/scss/_utilities.scss +++ b/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": ( diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss index a37eacab4cc2..89243c8a77a8 100644 --- a/scss/content/_reboot.scss +++ b/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)); } diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss index c9f2ca413791..dfcd9eb6b5b7 100644 --- a/scss/mixins/_transition.scss +++ b/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 { diff --git a/site/src/content/docs/components/collapse.mdx b/site/src/content/docs/components/collapse.mdx index 09c4db836411..90e2cf60570a 100644 --- a/site/src/content/docs/components/collapse.mdx +++ b/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 - + ### Classes diff --git a/site/src/content/docs/content/typography.mdx b/site/src/content/docs/content/typography.mdx index e137197a4d18..593eb652696a 100644 --- a/site/src/content/docs/content/typography.mdx +++ b/site/src/content/docs/content/typography.mdx @@ -267,12 +267,6 @@ Headings, paragraphs, description lists, and `` elements—covered here -### Sass variables - -Headings also have a dedicated Sass variable for their `color`. - - - ### 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. diff --git a/site/src/content/docs/guides/migration.mdx b/site/src/content/docs/guides/migration.mdx index e2fc39f79333..908153ddbd94 100644 --- a/site/src/content/docs/guides/migration.mdx +++ b/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 `` 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 `` 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 `
` 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)` | +- **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: diff --git a/site/src/content/docs/utilities/font-weight.mdx b/site/src/content/docs/utilities/font-weight.mdx index 84c1397fe55a..ea899e148c4e 100644 --- a/site/src/content/docs/utilities/font-weight.mdx +++ b/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. + + + ### 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 - ) -), -``` + diff --git a/site/src/content/docs/utilities/line-height.mdx b/site/src/content/docs/utilities/line-height.mdx index db75b04b9ffc..efd16ca94e57 100644 --- a/site/src/content/docs/utilities/line-height.mdx +++ b/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), ) ), ```