Skip to content

Split _type.scss into separate partials, add CSS tokens to more type styles #42700

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mdo merged 2 commits into from
Jul 17, 2026
Merged

Split _type.scss into separate partials, add CSS tokens to more type styles #42700

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d369959
Port typography Sass variables to CSS custom properties
mdo Jul 17, 2026
eded301
bump bw
mdo Jul 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .bundlewatch.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
{
"path": "./dist/css/bootstrap-reboot.css",
"maxSize": "5.25 kB"
"maxSize": "5.5 kB"
},
{
"path": "./dist/css/bootstrap-reboot.min.css",
Expand Down
21 changes: 0 additions & 21 deletions scss/_config.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,12 +190,6 @@ $icon-link-icon-transition: .2s ease-in-out transform !default;
$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
// scss-docs-end icon-link-variables

// Paragraphs
//
// Style p element.

$paragraph-margin-bottom: 1rem !default;

// Components
//
// Define common padding and border radius sizes and more.
Expand Down Expand Up @@ -302,24 +296,9 @@ $font-sizes: defaults(
// scss-docs-end font-sizes

// scss-docs-start headings-variables
$headings-margin-bottom: var(--spacer-2) !default;
$headings-font-family: null !default;
$headings-font-style: null !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$headings-color: inherit !default;
// scss-docs-end headings-variables

// scss-docs-start type-variables

$legend-margin-bottom: .5rem !default;
$legend-font-size: 1.5rem !default;
$legend-font-weight: null !default;

$dt-font-weight: $font-weight-bold !default;

// scss-docs-end type-variables

// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
Expand Down
1 change: 1 addition & 0 deletions scss/_root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ $root-tokens: defaults(

--link-color: light-dark(var(--primary-base), var(--primary-fg)),
--link-decoration: #{$link-decoration},
--link-underline-offset: #{$link-underline-offset},
--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;",
Expand Down
34 changes: 1 addition & 33 deletions scss/content/_type.scss → scss/content/_blockquote.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@use "../functions" as *;
@use "../mixins/lists" as *;
@use "../mixins/tokens" as *;

$blockquote-tokens: () !default;
Expand All @@ -10,7 +9,7 @@ $blockquote-tokens: defaults(
(
--blockquote-gap: calc(var(--spacer) / 2),
--blockquote-padding-x: var(--spacer),
--blockquote-margin-y: 1rem,
--blockquote-margin-y: var(--spacer),
--blockquote-font-size: var(--font-size-md),
--blockquote-border-width: .25rem,
--blockquote-border-color: var(--border-color),
Expand All @@ -22,37 +21,6 @@ $blockquote-tokens: defaults(
// scss-docs-end blockquote-tokens

@layer content {
//
// Lists
//

.list-unstyled {
@include list-unstyled();
}

// Inline turns list items into inline-block
.list-inline {
@include list-unstyled();
}
.list-inline-item {
display: inline-block;

&:not(:last-child) {
margin-inline-end: var(--list-inline-padding, var(--spacer) / 2);
}
}

//
// Misc
//

// Builds on `abbr`
.initialism {
font-size: var(--initialism-font-size, var(--font-size-xs));
text-transform: uppercase;
}

// Blockquotes
.blockquote {
@include tokens($blockquote-tokens);
display: flex;
Expand Down
23 changes: 23 additions & 0 deletions scss/content/_lists.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
@use "../mixins/lists" as *;

@layer content {
//
// Lists
//

.list-unstyled {
@include list-unstyled();
}

// Inline turns list items into inline-block
.list-inline {
@include list-unstyled();
}
.list-inline-item {
display: inline-block;

&:not(:last-child) {
margin-inline-end: var(--list-inline-padding, var(--spacer) / 2);
}
}
}
84 changes: 54 additions & 30 deletions scss/content/_reboot.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,38 @@

// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix

$type-tokens: () !default;
$reboot-kbd-tokens: () !default;
$reboot-mark-tokens: () !default;

// scss-docs-start type-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$type-tokens: defaults(
(
--heading-margin-bottom: var(--spacer-2),
--heading-font-family: null,
--heading-font-style: null,
--heading-line-height: 1.2,
--paragraph-margin-bottom: var(--spacer),
--legend-margin-bottom: var(--spacer-2),
--legend-font-size: 1.5rem,
--legend-font-weight: null,
--list-padding-x: var(--spacer-7),
),
$type-tokens
);
// scss-docs-end type-tokens

:root {
@include tokens($type-tokens);
}

// scss-docs-start reboot-kbd-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$reboot-kbd-tokens: defaults(
(
--kbd-padding-y: .125rem,
--kbd-padding-x: .25rem,
--kbd-padding-x: var(--spacer-1),
--kbd-font-size: var(--font-size-xs),
--kbd-color: var(--bg-body),
--kbd-bg: var(--fg-2),
Expand Down Expand Up @@ -115,11 +138,11 @@ $reboot-mark-tokens: defaults(

%heading {
margin-top: 0; // 1
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-style: $headings-font-style;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
margin-bottom: var(--heading-margin-bottom);
font-family: var(--heading-font-family);
font-style: var(--heading-font-style);
font-weight: var(--heading-font-weight, var(--font-weight-medium));
line-height: var(--heading-line-height);
color: var(--heading-color);
}

Expand Down Expand Up @@ -166,7 +189,7 @@ $reboot-mark-tokens: defaults(

p {
margin-top: 0;
margin-bottom: $paragraph-margin-bottom;
margin-bottom: var(--paragraph-margin-bottom);
}

// Abbreviations
Expand All @@ -181,10 +204,16 @@ $reboot-mark-tokens: defaults(
text-decoration-skip-ink: none; // 3
}

// Builds on `abbr`
.initialism {
font-size: var(--initialism-font-size, var(--font-size-xs));
text-transform: uppercase;
}

// Address

address {
margin-bottom: 1rem;
margin-bottom: var(--spacer);
font-style: normal;
line-height: inherit;
}
Expand All @@ -193,14 +222,14 @@ $reboot-mark-tokens: defaults(

ol,
ul {
padding-inline-start: 2rem;
padding-inline-start: var(--list-padding-x);
}

ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
margin-bottom: var(--spacer);
}

ol ol,
Expand All @@ -211,20 +240,20 @@ $reboot-mark-tokens: defaults(
}

dt {
font-weight: $dt-font-weight;
font-weight: var(--dt-font-weight, var(--font-weight-bold));
}

// 1. Undo browser default

dd {
margin-inline-start: 0; // 1
margin-bottom: .5rem;
margin-bottom: var(--spacer-2);
}

// Blockquote

blockquote {
margin: 0 0 1rem;
margin: 0 0 var(--spacer);
> * {
margin-block: 0;
}
Expand All @@ -236,7 +265,7 @@ $reboot-mark-tokens: defaults(

b,
strong {
font-weight: $font-weight-bolder;
font-weight: var(--font-weight-bolder);
}

// Small
Expand Down Expand Up @@ -279,7 +308,7 @@ $reboot-mark-tokens: defaults(
a {
color: var(--theme-fg, var(--link-color));
text-decoration: var(--link-decoration);
text-underline-offset: $link-underline-offset;
text-underline-offset: var(--link-underline-offset);

&:hover {
// --link-color: var(--link-hover-color);
Expand Down Expand Up @@ -319,7 +348,7 @@ $reboot-mark-tokens: defaults(
pre {
display: block;
margin-top: 0; // 1
margin-bottom: 1rem; // 2
margin-bottom: var(--spacer); // 2
overflow: auto; // 3
font-size: var(--code-font-size);
color: var(--code-color, inherit);
Expand Down Expand Up @@ -363,7 +392,7 @@ $reboot-mark-tokens: defaults(
// Apply a consistent margin strategy (matches our type styles).

figure {
margin: 0 0 1rem;
margin: 0 0 var(--spacer);
}

// Images and content
Expand All @@ -383,22 +412,17 @@ $reboot-mark-tokens: defaults(
}

caption {
// padding-top: $table-cell-padding-y;
// padding-bottom: $table-cell-padding-y;
// color: $table-caption-color;
padding-block: .5rem;
padding-block: var(--spacer-2);
color: var(--fg-3);
text-align: start;
}

// 1. Removes font-weight bold by inheriting
// 2. Matches default `<td>` alignment by inheriting `text-align`.
// 3. Fix alignment for Safari
// 1. Matches default `<td>` alignment by inheriting `text-align`.
// 2. Fix alignment for Safari

th {
// font-weight: $table-th-font-weight; // 1 // TODO: null by default — decide whether to remove
text-align: inherit; // 2
text-align: -webkit-match-parent; // 3
text-align: inherit; // 1
text-align: -webkit-match-parent; // 2
}

thead,
Expand Down Expand Up @@ -522,9 +546,9 @@ $reboot-mark-tokens: defaults(
float: inline-start; // 1
width: 100%;
padding: 0;
margin-bottom: $legend-margin-bottom;
font-size: $legend-font-size;
font-weight: $legend-font-weight;
margin-bottom: var(--legend-margin-bottom);
font-size: var(--legend-font-size);
font-weight: var(--legend-font-weight);
line-height: inherit;

+ * {
Expand Down
3 changes: 2 additions & 1 deletion scss/content/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@forward "reboot";
@forward "type";
@forward "lists";
@forward "blockquote";
@forward "tables";
@forward "images";
@forward "prose";
10 changes: 5 additions & 5 deletions site/src/content/docs/content/typography.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,15 +263,15 @@ All `--font-size-*` and `--line-height-*` CSS custom properties are defined in `
}
```

### Sass variables
Headings, paragraphs, description lists, and `<legend>` elements—covered here and in [Reboot]([[docsref:/content/reboot]])—use dedicated CSS variables for real-time customization, defined in `_reboot.scss`.

Headings have some dedicated variables for sizing and spacing.
<ScssDocs name="type-tokens" file="scss/content/_reboot.scss" />

<ScssDocs name="headings-variables" file="scss/_config.scss" />
### Sass variables

Miscellaneous typography elements covered here and in [Reboot]([[docsref:/content/reboot]]) also have dedicated variables.
Headings also have a dedicated Sass variable for their `color`.

<ScssDocs name="type-variables" file="scss/_config.scss" />
<ScssDocs name="headings-variables" file="scss/_config.scss" />

### Sass maps

Expand Down
7 changes: 6 additions & 1 deletion site/src/content/docs/guides/migration.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,12 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb

### Reboot

- Relocated heading classes (like `.h1`) and some type classes (`.mark` and `.small`) to Reboot from `_type.scss`. This avoids a dependency in Sass modules and we like to avoid extending selectors in general.
- 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.
- 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.
- Removed the `::-moz-focus-inner` styles, as the pseudo selector is deprecated in Firefox.
- Removed `text-transform: none` from `button` and `select` elements, as Firefox no longer incorrectly inherits text-transform.
- Added `accent-color: var(--primary-base)` on `:root`, which applies the primary theme color to native form controls (checkboxes, radios, range inputs, progress bars) globally.
Expand Down