Remove --font-size-base in favor of --body-font-size

mdo · mdo · commit 018711271c55 · 2026-07-17T08:10:13.000-07:00
The token was only referenced by a handful of components as an indirect fallback and had no corresponding entry in _root.scss, making it effectively dead and impossible to override. Point those fallbacks at --body-font-size instead and document the removal in the migration guide. Fixes #42624
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
@@ -44,7 +44,7 @@ $accordion-tokens: defaults(
     align-items: center;
     width: 100%;
     padding: var(--accordion-btn-padding-y, var(--accordion-padding-y)) var(--accordion-btn-padding-x, var(--accordion-padding-x));
-    font-size: var(--accordion-font-size, var(--font-size-base));
+    font-size: var(--accordion-font-size, var(--body-font-size));
     color: var(--accordion-btn-color);
     text-align: start;
     list-style: none; // Remove default marker
@@ -147,7 +147,7 @@ $accordion-tokens: defaults(
 
   .accordion-body {
     padding: var(--accordion-body-padding-y, var(--accordion-padding-y)) var(--accordion-body-padding-x, var(--accordion-padding-x));
-    font-size: var(--accordion-font-size, var(--font-size-base));
+    font-size: var(--accordion-font-size, var(--body-font-size));
   }
 
 
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -21,7 +21,7 @@ $root-tokens: defaults(
 
     // scss-docs-start root-body-variables
     --body-font-family: system-ui,
-    --body-font-size: var(--font-size-base),
+    --body-font-size: 1rem,
     --body-font-weight: var(--font-weight-normal),
     --body-line-height: var(--line-height-base),
 
@@ -76,7 +76,7 @@ $root-tokens: defaults(
     --btn-input-min-height: 2.375rem,
     --btn-input-padding-y: .375rem,
     --btn-input-padding-x: .75rem,
-    --btn-input-font-size: var(--font-size-base),
+    --btn-input-font-size: var(--body-font-size),
     --btn-input-line-height: var(--line-height-base),
     --btn-input-border-radius: var(--radius-5),
 
diff --git a/site/src/content/docs/content/typography.mdx b/site/src/content/docs/content/typography.mdx
@@ -15,7 +15,7 @@ Bootstrap sets basic global display, typography, and link styles. When more cont
 - Set the global link color via `--bs-link-color`.
 - Use `--bs-body-bg` to set a `background-color` on the `<body>` (`#fff` by default).
 
-These styles can be found within `_reboot.scss`, and the global variables are defined in `_config.scss`. Make sure to set `--font-size-base` in `rem`.
+These styles can be found within `_reboot.scss`, and the global variables are defined in `_config.scss`. Make sure to set `--body-font-size` in `rem`.
 
 ## Headings
 
diff --git a/site/src/content/docs/guides/migration.mdx b/site/src/content/docs/guides/migration.mdx
@@ -302,6 +302,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`, `$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]]).
+- **Removed `$font-size-base` and `--font-size-base`.** The base body font size is now set directly via `--body-font-size` (default `1rem`) in `_root.scss`. Any component tokens that previously fell back to `var(--font-size-base)` (like the accordion) now fall back to `var(--body-font-size)` instead. Update custom Sass or CSS that referenced either variable to use `--body-font-size`.
 - 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.
diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
@@ -54,7 +54,7 @@
     position: relative;
     display: flow-root;
     padding: var(--bd-example-padding);
-    font-size: var(--font-size-base);
+    font-size: var(--body-font-size);
     line-height: var(--body-line-height);
     background-color: var(--bs-bg-body);
 
