v6: Restore 16px base font-size (#42119)

* Restore 16px base font-size

* More

* Update docs CSS to account for font-size change

* Redo several components and tokens for font-size change

- Checks, radios, switches get new sizing to better match 16px base font-size. These are now way more consistent with one another.
- Updates other components to use new sizing as appropriate.
- Pagination now sized to match inputs/buttons.
- Clean up some other font tokens

* Fix

* fix code example

diff --git a/scss/_card.scss b/scss/_card.scss
index d88d6ec33b6535a4ac5d3fff3518a938a45e5f69..b2e51ccf3b2c6027f4335ce63b6d2e97c22acb15 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -95,6 +95,12 @@ $card-tokens: defaults(
     }
   }
 
+  .card-title,
+  .card-subtitle,
+  .card-text {
+    align-self: stretch;
+  }
+
   .card-subtitle {
     margin-top: calc(var(--card-body-gap) * -.5);
   }

diff --git a/scss/_chip.scss b/scss/_chip.scss
index e6f2f8a3e2ac9f56a8f48f90ce2e556910e63ffa..013262d9230660061dc151ca39167576b36d233e 100644 (file)
--- a/scss/_chip.scss
+++ b/scss/_chip.scss
@@ -44,9 +44,9 @@ $chip-tokens: defaults(
     align-items: center;
     height: var(--chip-height);
     padding-inline: var(--chip-padding-x);
-    // font-size: var(--chip-font-size);
-    // font-weight: var(--chip-font-weight);
-    // line-height: 1.25;
+    font-size: var(--chip-font-size, var(--font-size-sm));
+    font-weight: var(--chip-font-weight, var(--font-weight-base));
+    line-height: var(--chip-line-height, 1.25rem);
     color: var(--chip-color);
     text-decoration: none;
     white-space: nowrap;

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 17dca9245cd69d8f9aec4c127abd0aa7f7ca5d06..4f7794720144f26a8500db63ccd2e8c7aa733c48 100644 (file)
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -21,7 +21,7 @@ $dropdown-tokens: defaults(
     --dropdown-padding-x: .25rem,
     --dropdown-padding-y: .25rem,
     --dropdown-spacer: .125rem,
-    --dropdown-font-size: #{$font-size-base},
+    --dropdown-font-size: var(--font-size-sm),
     --dropdown-color: var(--fg-body),
     --dropdown-bg: var(--bg-body),
     --dropdown-border-color: var(--border-color-translucent),
@@ -134,7 +134,7 @@ $dropdown-tokens: defaults(
     display: block;
     padding: var(--dropdown-header-padding-y) var(--dropdown-header-padding-x);
     margin-bottom: 0; // for use with heading elements
-    font-size: $font-size-sm;
+    font-size: var(--font-size-sm);
     color: var(--dropdown-header-color);
     white-space: nowrap; // as with > li > a
   }

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 1d0d57ecb3b47109f209f6192c6cafd092a870b7..55a677c892111a53daaa986b33439b01cab1ce6a 100644 (file)
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -18,14 +18,14 @@ $pagination-tokens: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $pagination-tokens: defaults(
   (
-    --pagination-padding-x: .75rem,
-    --pagination-padding-y: .375rem,
-    --pagination-font-size: var(--font-size-base),
+    --pagination-padding-x: var(--btn-input-padding-x),
+    --pagination-padding-y: var(--btn-input-padding-y),
+    --pagination-font-size: var(--btn-input-font-size),
     --pagination-color: var(--link-color),
     --pagination-bg: var(--bg-body),
     --pagination-border-width: var(--border-width),
     --pagination-border-color: var(--border-color),
-    --pagination-border-radius: var(--border-radius),
+    --pagination-border-radius: var(--btn-input-border-radius),
     --pagination-hover-color: var(--link-hover-color),
     --pagination-hover-bg: var(--bg-1),
     --pagination-hover-border-color: var(--border-color),
@@ -41,16 +41,16 @@ $pagination-tokens: defaults(
   $pagination-tokens
 );
 // scss-docs-end pagination-tokens
-// stylelint-enable custom-property-no-missing-var-function
 
-// scss-docs-start pagination-mixin
-@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
-  --pagination-padding-x: #{$padding-x};
-  --pagination-padding-y: #{$padding-y};
-  --pagination-font-size: #{$font-size};
-  --pagination-border-radius: #{$border-radius};
-}
-// scss-docs-end pagination-mixin
+// scss-docs-start pagination-sizes
+$pagination-sizes: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$pagination-sizes: defaults(
+  ("sm", "lg"),
+  $pagination-sizes
+);
+// scss-docs-end pagination-sizes
+// stylelint-enable custom-property-no-missing-var-function
 
 @layer components {
   .pagination {
@@ -125,11 +125,14 @@ $pagination-tokens: defaults(
   // Sizing
   //
 
-  .pagination-lg {
-    @include pagination-size(.75rem, 1.5rem, $font-size-lg, var(--border-radius-lg));
-  }
-
-  .pagination-sm {
-    @include pagination-size(.25rem, .5rem, $font-size-sm, var(--border-radius-sm));
+  // scss-docs-start pagination-sizes-loop
+  @each $size, $_ in $pagination-sizes {
+    .pagination-#{$size} {
+      --pagination-padding-y: var(--btn-input-#{$size}-padding-y);
+      --pagination-padding-x: var(--btn-input-#{$size}-padding-x);
+      --pagination-font-size: var(--btn-input-#{$size}-font-size);
+      --pagination-border-radius: var(--btn-input-#{$size}-border-radius);
+    }
   }
+  // scss-docs-end pagination-sizes-loop
 }

diff --git a/scss/_popover.scss b/scss/_popover.scss
index 8dcc584bcc0b546ad6ee0f1472a7bf8bd3cc179c..1653b5945a6902e54eb69a0967e0b7c032ae4fbf 100644 (file)
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -24,7 +24,7 @@ $popover-tokens: defaults(
     --popover-box-shadow: var(--box-shadow),
     --popover-header-padding-x: #{$spacer},
     --popover-header-padding-y: #{$spacer * .75},
-    --popover-header-font-size: #{$font-size-base},
+    --popover-header-font-size: var(--font-size-sm),
     --popover-header-color: #{$headings-color},
     --popover-header-bg: var(--bg-1),
     --popover-body-padding-x: #{$spacer},

diff --git a/scss/_root.scss b/scss/_root.scss
index f8748bf69272414aca7cc2bfbcc561218916d185..cfc32d9e2b656db4fe25e3c05d6f29a77058147f 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -22,16 +22,11 @@ $root-tokens: defaults(
   (
     --black: #{$black},
     --white: #{$white},
-    // Fonts
-    // Note: Use `inspect` for lists so that quoted items keep the quotes.
-    // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
-    --font-sans-serif: #{meta.inspect($font-family-sans-serif)},
-    --font-monospace: #{meta.inspect($font-family-monospace)},
+
     --gradient: #{$gradient},
-    --body-font-family: #{meta.inspect($font-family-base)},
 
     // scss-docs-start root-font-size-variables
-    --font-size-base: #{$font-size-base},
+    --font-size-base: 1rem,
     --font-size-xs: .75rem,
     --font-size-sm: .875rem,
     --font-size-md: 1rem,
@@ -55,7 +50,8 @@ $root-tokens: defaults(
     --line-height-6xl: 1,
     // scss-docs-end root-font-size-variables
 
-    --body-font-size: #{$font-size-base},
+    --body-font-family: system-ui,
+    --body-font-size: var(--font-size-base),
     --body-font-weight: #{$font-weight-base},
     --body-line-height: #{$line-height-base},
 
@@ -67,6 +63,7 @@ $root-tokens: defaults(
     --link-decoration: #{$link-decoration},
     --link-hover-color: color-mix(in oklch, var(--link-color) 90%, #000),
 
+    --font-mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
     --code-font-size: 95%,
     --code-color: var(--fg-2),
 
@@ -80,17 +77,19 @@ $root-tokens: defaults(
     // scss-docs-start root-border-radius-var
     --border-radius: .5rem,
     --border-radius-xs: .375rem,
-    --border-radius-sm: .375rem,
+    --border-radius-sm: .5rem,
     --border-radius-lg: .75rem,
     --border-radius-xl: 1rem,
     --border-radius-2xl: 2rem,
     --border-radius-pill: 50rem,
     // scss-docs-end root-border-radius-var
 
-    --box-shadow: #{$box-shadow},
-    --box-shadow-sm: #{$box-shadow-sm},
-    --box-shadow-lg: #{$box-shadow-lg},
-    --box-shadow-inset: #{$box-shadow-inset},
+    // scss-docs-start root-box-shadow-variables
+    --box-shadow: 0 .5rem 1rem rgb(0 0 0 / 15%),
+    --box-shadow-sm: 0 .125rem .25rem rgb(0 0 0 / 7.5%),
+    --box-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 17.5%),
+    --box-shadow-inset: inset 0 1px 2px rgb(0 0 0 / 7.5%),
+    // scss-docs-end root-box-shadow-variables
 
     --spacer: 1rem,
 
@@ -111,7 +110,7 @@ $root-tokens: defaults(
     --control-disabled-bg: var(--bg-3),
     --control-disabled-opacity: .65,
 
-    --btn-input-min-height: 2.375rem,
+    --btn-input-min-height: 2.5rem,
     --btn-input-padding-y: .375rem,
     --btn-input-padding-x: .75rem,
     --btn-input-font-size: var(--font-size-base),
@@ -120,19 +119,19 @@ $root-tokens: defaults(
 
     --btn-input-xs-min-height: 1.5rem,
     --btn-input-xs-padding-y: .125rem,
-    --btn-input-xs-padding-x: .375rem,
+    --btn-input-xs-padding-x: .5rem,
     --btn-input-xs-font-size: var(--font-size-xs),
     --btn-input-xs-line-height: 1.125,
     --btn-input-xs-border-radius: var(--border-radius-xs),
 
-    --btn-input-sm-min-height: 2rem,
+    --btn-input-sm-min-height: 2.25rem,
     --btn-input-sm-padding-y: .25rem,
-    --btn-input-sm-padding-x: .5rem,
-    --btn-input-sm-font-size: var(--font-size-xs),
-    --btn-input-sm-line-height: var(--line-height-xs),
+    --btn-input-sm-padding-x: .625rem,
+    --btn-input-sm-font-size: var(--font-size-sm),
+    --btn-input-sm-line-height: var(--line-height-sm),
     --btn-input-sm-border-radius: var(--border-radius-sm),
 
-    --btn-input-lg-min-height: 2.75rem,
+    --btn-input-lg-min-height: 3rem,
     --btn-input-lg-padding-y: .5rem,
     --btn-input-lg-padding-x: 1rem,
     --btn-input-lg-font-size: var(--font-size-md),
@@ -181,14 +180,3 @@ $root-tokens: defaults(
 
   color-scheme: light dark;
 }
-
-:root,
-[data-bs-theme="light"] {
-  // Root and body
-  @if $font-size-root != null {
-    --root-font-size: #{$font-size-root};
-  }
-  @if $body-text-align != null {
-    --body-text-align: #{$body-text-align};
-  }
-}

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index a1c1aad7852c52a147577849ad0b801162715d99..99a3eb15dcd6c37447ba86b7c98a548168b8d1a4 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -622,8 +622,8 @@ $utilities: map.merge(
       property: font-family,
       class: font,
       values: (
-        "monospace": var(--font-monospace),
-        "body": var(--font-sans-serif),
+        "monospace": var(--font-mono),
+        "body": var(--body-font-family),
       )
     ),
     // scss-docs-end utils-font-family

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 89954eb34395c4d59ac8e89bfef31c15667d835e..82eda4a4113db7c63ae7105b6fe4cd76e20c3bce 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -61,7 +61,7 @@ $position-values: (
 //
 // Settings for the `<body>` element.
 
-$body-text-align:           null !default;
+// $body-text-align:           null !default;
 
 // Links
 //
@@ -110,13 +110,6 @@ $border-style:                solid !default;
 $border-color:                color-mix(in oklch, var(--gray-100), var(--gray-200)) !default;
 // scss-docs-end border-variables
 
-// scss-docs-start box-shadow-variables
-$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
-$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
-$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
-$box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
-// scss-docs-end box-shadow-variables
-
 $transition-base:             all .2s ease-in-out !default;
 $transition-fade:             opacity .15s linear !default;
 
@@ -140,19 +133,10 @@ $aspect-ratios: (
 // Font, line-height, and color for body text, headings, and more.
 
 // scss-docs-start font-variables
-// stylelint-disable value-keyword-case
-$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-// stylelint-enable value-keyword-case
-$font-family-base:            var(--font-sans-serif) !default;
-$font-family-code:            var(--font-monospace) !default;
-
-// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
-// $font-size-base affects the font size of the body text
-$font-size-root:              16px !default;
-$font-size-base:              14px !default; // Assumes the browser default, typically `16px`
-$font-size-sm:                $font-size-base * .875 !default;
-$font-size-lg:                $font-size-base * 1.25 !default;
+// $font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+// $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+// $font-family-base:            var(--font-sans-serif) !default;
+// $font-family-code:            var(--font-monospace) !default;
 
 $font-weight-lighter:         lighter !default;
 $font-weight-light:           300 !default;

diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss
index db29fec421abd4c482f64871f14e62c33eba70ff..43a8dc296135e9c88e41c719563a5ec1c6af4cf5 100644 (file)
--- a/scss/content/_reboot.scss
+++ b/scss/content/_reboot.scss
@@ -65,18 +65,14 @@ $reboot-mark-tokens: defaults(
   // null by default, thus nothing is generated.
 
   :root {
-    @if $font-size-root != null {
-      font-size: var(--root-font-size);
-      // @include font-size(var(--root-font-size));
-    }
+    // Assume browser default font-size of 16px, or a user's preference
+    accent-color: var(--primary-base);
 
     @if $enable-smooth-scroll {
       @media (prefers-reduced-motion: no-preference) {
         scroll-behavior: smooth;
       }
     }
-
-    accent-color: var(--primary-base);
   }
 
 
@@ -321,7 +317,7 @@ $reboot-mark-tokens: defaults(
   code,
   kbd,
   samp {
-    font-family: $font-family-code;
+    font-family: var(--font-mono);
     font-size: 1em; // Correct the odd `em` font sizing in all browsers.
   }
 

diff --git a/scss/forms/_check.scss b/scss/forms/_check.scss
index 0614af4aff1d978aca6201a52818a979b7ef9d81..92a0e04d7b01eade0824e834358ce507833afce1 100644 (file)
--- a/scss/forms/_check.scss
+++ b/scss/forms/_check.scss
@@ -17,9 +17,11 @@ $check-tokens: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $check-tokens: defaults(
   (
-    --check-size: 1rem,
+    --check-size: 1.25rem,
+    --check-margin-block: .125rem,
     --check-bg: transparent,
     --check-border-color: var(--border-color),
+    --check-border-radius: .375rem,
     --check-checked-bg: var(--control-checked-bg),
     --check-checked-border-color: var(--control-checked-border-color),
     --check-indeterminate-bg: var(--control-checked-bg),
@@ -50,7 +52,7 @@ $check-tokens: defaults(
 
     display: grid;
     grid-template-columns: repeat(1, minmax(0, 1fr));
-    margin-block: .125rem;
+    margin-block: var(--check-margin-block);
 
     :where(svg, input) {
       flex-shrink: 0;
@@ -105,4 +107,12 @@ $check-tokens: defaults(
       display: none;
     }
   }
+
+  .check-sm {
+    --check-size: 1rem;
+  }
+  .check-lg {
+    --check-size: 1.5rem;
+    --check-margin-block: 0;
+  }
 }

diff --git a/scss/forms/_radio.scss b/scss/forms/_radio.scss
index 403f5e462cb5d990b459c937ceb4e58869ea38c5..5c5b26058fe50cdcebe55e12c07ab44b51150b50 100644 (file)
--- a/scss/forms/_radio.scss
+++ b/scss/forms/_radio.scss
@@ -17,7 +17,8 @@ $radio-tokens: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $radio-tokens: defaults(
   (
-    --radio-size: 1rem,
+    --radio-size: 1.25rem,
+    --radio-margin-block: .125rem,
     --radio-bg: transparent,
     --radio-border-color: var(--border-color),
     --radio-checked-bg: var(--control-checked-bg),
@@ -48,7 +49,7 @@ $radio-tokens: defaults(
     flex-shrink: 0;
     width: var(--radio-size);
     height: var(--radio-size);
-    margin-block: .125rem;
+    margin-block: var(--radio-margin-block);
     appearance: none;
     background-color: var(--theme-bg, var(--radio-bg));
     border: 1px solid var(--theme-bg, var(--radio-border-color));
@@ -82,6 +83,13 @@ $radio-tokens: defaults(
     &:focus-visible {
       @include focus-ring(true);
     }
+  }
 
+  .radio-sm {
+    --radio-size: 1rem;
+  }
+  .radio-lg {
+    --radio-size: 1.5rem;
+    --radio-margin-block: 0;
   }
 }

diff --git a/scss/forms/_switch.scss b/scss/forms/_switch.scss
index cfd306d63eb7f643e6f88bdf44e225f91380b684..59bbe89fb85bca99f05fcd95450171aa415c9023 100644 (file)
--- a/scss/forms/_switch.scss
+++ b/scss/forms/_switch.scss
@@ -21,6 +21,7 @@ $switch-tokens: defaults(
     --switch-height: 1.25rem,
     --switch-width: calc(var(--switch-height) * 1.5),
     --switch-padding: .0625rem,
+    --switch-margin-block: .125rem,
     --switch-bg: var(--bg-3),
     --switch-border-width: var(--border-width),
     --switch-border-color: var(--border-color),
@@ -48,6 +49,7 @@ $switch-tokens: defaults(
     width: var(--switch-width);
     height: var(--switch-height);
     padding: var(--switch-padding);
+    margin-block: var(--switch-margin-block);
     background-color: var(--switch-bg);
     border: var(--switch-border-width) solid var(--switch-border-color);
     // stylelint-disable-next-line property-disallowed-list
@@ -99,9 +101,10 @@ $switch-tokens: defaults(
     }
   }
   .switch-sm {
-    --switch-height: 1em;
+    --switch-height: 1rem;
   }
   .switch-lg {
-    --switch-height: 2em;
+    --switch-height: 1.5rem;
+    --switch-margin-block: 0;
   }
 }

diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss
index 769368a17255910856dc9272fbe39faacad989cf..e3f5c0e6cd5eda1a08d94ed754061b9d34523888 100644 (file)
--- a/scss/mixins/_reset-text.scss
+++ b/scss/mixins/_reset-text.scss
@@ -1,11 +1,11 @@
 @use "../variables" as *;
 
 @mixin reset-text {
-  font-family: $font-family-base;
+  font-family: var(--body-font-family);
   // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
   font-style: normal;
-  font-weight: $font-weight-normal;
-  line-height: $line-height-base;
+  font-weight: var(--body-font-weight);
+  line-height: var(--body-line-height);
   text-align: start;
   text-decoration: none;
   text-shadow: none;

diff --git a/site/src/components/shortcodes/Code.astro b/site/src/components/shortcodes/Code.astro
index 7f8b3c77f3f4ae5ade7f3bf95e735e023b2b3748..fa5f99d2b12a7d5a2f6038db6bc641d957571aba 100644 (file)
--- a/site/src/components/shortcodes/Code.astro
+++ b/site/src/components/shortcodes/Code.astro
@@ -112,13 +112,13 @@ let codeToDisplay = filePath
     : code
 
 if (filePath && fileMatch && codeToDisplay) {
-  const match = codeToDisplay.match(new RegExp(fileMatch))
+  const matches = [...codeToDisplay.matchAll(new RegExp(fileMatch, 'g'))]
 
-  if (!match || !match[0]) {
-    throw new Error(`The file at ${filePath} does not contains a match for the regex '${fileMatch}'.`)
+  if (matches.length === 0) {
+    throw new Error(`The file at ${filePath} does not contain a match for the regex '${fileMatch}'.`)
   }
 
-  codeToDisplay = match[0]
+  codeToDisplay = matches.map(m => m[0]).join('\n\n')
 }
 
 // Add line wrapper for shell languages to support shell prompts

diff --git a/site/src/content/docs/components/pagination.mdx b/site/src/content/docs/components/pagination.mdx
index 0ab622369334af44f9d9f408b615eae61e6b4449..d735c5841a1dc9d59cc4c716fe11975da81b7f73 100644 (file)
--- a/site/src/content/docs/components/pagination.mdx
+++ b/site/src/content/docs/components/pagination.mdx
@@ -160,6 +160,8 @@ Or with `.justify-content-end`:
 
 <ScssDocs name="pagination-tokens" file="scss/_pagination.scss" />
 
-### Sass mixins
+### Sass sizes
 
-<ScssDocs name="pagination-mixin" file="scss/_pagination.scss" />
+<ScssDocs name="pagination-sizes" file="scss/_pagination.scss" />
+
+<ScssDocs name="pagination-sizes-loop" file="scss/_pagination.scss" />

diff --git a/site/src/content/docs/content/reboot.mdx b/site/src/content/docs/content/reboot.mdx
index 9a061e0a94c46d325862c17bc36cd6687c033051..9502e619358af2b4eae92851d3d01a87256b3cfd 100644 (file)
--- a/site/src/content/docs/content/reboot.mdx
+++ b/site/src/content/docs/content/reboot.mdx
@@ -74,7 +74,7 @@ $font-family-sans-serif:
 
 Note that because the font stack includes emoji fonts, many common symbol/dingbat Unicode characters will be rendered as multicolored pictographs. Their appearance will vary, depending on the style used in the browser/platform’s native emoji font, and they won’t be affected by any CSS `color` styles.
 
-This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
+This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `--body-font-family`.
 
 ## Headings
 

diff --git a/site/src/content/docs/content/typography.mdx b/site/src/content/docs/content/typography.mdx
index 6640a5770c9db27614da1d742a6f36fd6bb027b3..6471286a89b9aa60456171ddf2bf98ecbe0811c1 100644 (file)
--- a/site/src/content/docs/content/typography.mdx
+++ b/site/src/content/docs/content/typography.mdx
@@ -10,11 +10,11 @@ Bootstrap sets basic global display, typography, and link styles. When more cont
 
 - Use a [native font stack]([[docsref:/content/reboot#native-font-stack]]) that selects the best `font-family` for each OS and device.
 - For a more inclusive and accessible type scale, we use the browser’s default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed.
-- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `<body>`.
+- Use the `--body-font-family`, `--body-font-size`, and `--body-line-height` attributes as our typographic base applied to the `<body>`.
 - 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 `_variables.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 `_variables.scss`. Make sure to set `--font-size-base` in `rem`.
 
 ## Headings
 

diff --git a/site/src/content/docs/customize/css-variables.mdx b/site/src/content/docs/customize/css-variables.mdx
index 115cd9375b7b0b01ce01c8c31ff8cdf8a39a73e6..613cd727fc4a2b7fbc35a7d70f3fd0e144f15046 100644 (file)
--- a/site/src/content/docs/customize/css-variables.mdx
+++ b/site/src/content/docs/customize/css-variables.mdx
@@ -16,7 +16,7 @@ Here are the variables we include (note that the `:root` is required) that can b
 
 These CSS variables are available everywhere, regardless of color mode.
 
-<Code lang="css" filePath="dist/css/bootstrap.css" fileMatch=":(root,\n\[data-bs-theme=light\] {[^}]*})" />
+<Code lang="css" filePath="dist/css/bootstrap.css" fileMatch=":(root {[^}]*})" />
 
 ### Dark mode
 

diff --git a/site/src/content/docs/forms/checkbox.mdx b/site/src/content/docs/forms/checkbox.mdx
index 1fc561acfbf778ab6f25e4676da5ac25edf68ecc..467fc5e95ccc3ab72a43594bbfe5ed17f41f1613 100644 (file)
--- a/site/src/content/docs/forms/checkbox.mdx
+++ b/site/src/content/docs/forms/checkbox.mdx
@@ -20,9 +20,9 @@ Checkbox layout and labels are handled with additional HTML and CSS.
 
 <Example code={`<div class="check">
     <input type="checkbox" id="check" checked />
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
-      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
-      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
     </svg>
   </div>`} />
 
@@ -32,9 +32,9 @@ Checkboxes can utilize the indeterminate pseudo class when manually set via Java
 
 <Example addStackblitzJs class="bd-example-indeterminate" code={`<div class="check">
     <input type="checkbox" id="checkIndeterminate" />
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
-      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
-      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
     </svg>
   </div>`} />
 
@@ -116,6 +116,32 @@ Applies to checked states, too.
     <label for="checkDisabledChecked">Example new checkbox</label>
   </div>`} />
 
+## Sizes
+
+Add `.check-sm` or `.check-lg` to make your checkbox appear smaller or larger.
+
+<Example class="d-flex flex-column gap-3" code={`<div class="check check-sm">
+    <input type="checkbox" id="checkSizeSm" checked />
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+    </svg>
+  </div>
+  <div class="check">
+    <input type="checkbox" id="checkSizeMd" checked />
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+    </svg>
+  </div>
+  <div class="check check-lg">
+    <input type="checkbox" id="checkSizeLg" checked />
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+    </svg>
+  </div>`} />
+
 ## CSS
 
 ### Variables

diff --git a/site/src/content/docs/forms/switch.mdx b/site/src/content/docs/forms/switch.mdx
index b25000601a63d671b24740dc1d893ab3f3a3deaf..ccb417cadf6756f3ed255887905abcbeb7480cd4 100644 (file)
--- a/site/src/content/docs/forms/switch.mdx
+++ b/site/src/content/docs/forms/switch.mdx
@@ -25,13 +25,6 @@ Wrap the `.switch` in a `.checkgroup` layout wrapper and add your label. This se
 Consider margin utilities for additional spacing, and flex utilities for alignment, especially when using small or large switches.
 
 <Example class="d-flex flex-column gap-3" code={`<div class="checkgroup">
-    <div class="switch switch-sm mt-1">
-      <input type="checkbox" value="" id="switchSmLabel" role="switch" switch>
-    </div>
-    <label for="switchSmLabel">Small switch</label>
-  </div>
-
-  <div class="checkgroup">
     <div class="switch">
       <input type="checkbox" value="" id="switchMdLabel" role="switch" switch>
     </div>
@@ -43,7 +36,7 @@ Consider margin utilities for additional spacing, and flex utilities for alignme
 Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.switch` element. This will set the checked background and border color to the theme color.
 
 <Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => ` <div class="checkgroup">
-    <div class="switch switch-sm mt-1 theme-${themeColor.name}">
+    <div class="switch theme-${themeColor.name}">
       <input type="checkbox" value="" id="switch${themeColor.name}" role="switch" switch checked>
     </div>
     <label for="switch${themeColor.name}">Example ${themeColor.name} switch</label>
@@ -64,14 +57,23 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
 
 Add a size modifier class to make your switch appear smaller or larger.
 
-<Example class="d-flex flex-column gap-3" code={`<div class="switch switch-sm">
+<Example class="d-flex flex-column gap-3" code={`<div class="checkgroup">
+    <div class="switch switch-sm">
     <input type="checkbox" value="" id="switchSizeSm" role="switch" switch>
+    </div>
+    <label for="switchSizeSm">Small switch</label>
   </div>
-  <div class="switch">
-    <input type="checkbox" value="" id="switchSizeMd" role="switch" switch>
+  <div class="checkgroup">
+    <div class="switch">
+      <input type="checkbox" value="" id="switchSizeMd" role="switch" switch>
+    </div>
+    <label for="switchSizeMd">Default switch</label>
   </div>
-  <div class="switch switch-lg">
-    <input type="checkbox" value="" id="switchSizeLg" role="switch" switch>
+  <div class="checkgroup">
+    <div class="switch switch-lg">
+      <input type="checkbox" value="" id="switchSizeLg" role="switch" switch>
+    </div>
+    <label for="switchSizeLg">Large switch</label>
   </div>`} />
 
 ## CSS

diff --git a/site/src/content/docs/utilities/shadows.mdx b/site/src/content/docs/utilities/shadows.mdx
index 9b9b3b4c9b5cbeacac71ba6ccef9afec93200df1..e2f064ee3e9dd2b26208d9b87131e95745421415 100644 (file)
--- a/site/src/content/docs/utilities/shadows.mdx
+++ b/site/src/content/docs/utilities/shadows.mdx
@@ -19,7 +19,7 @@ While shadows on components are disabled by default in Bootstrap and can be enab
 
 ### Sass variables
 
-<ScssDocs name="box-shadow-variables" file="scss/_variables.scss" />
+<ScssDocs name="root-box-shadow-variables" file="scss/_root.scss" />
 
 ### Sass utilities API
 

diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index a59c9996aff3e1ddb62e8b1da1cf4ee0f331d7e7..15c3d09844b9ce70c7108c1afad75df2144fe429 100644 (file)
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -15,7 +15,6 @@
     --bd-example-inner-radius: calc(var(--bs-border-radius) - 1px);
 
     margin: 0 ($bd-gutter-x * -.5);
-    font-size: var(--font-size-sm);
     background-color: var(--bd-pre-bg);
     border: solid var(--bs-border-color);
     border-width: 1px 0;

diff --git a/site/src/scss/_sidebar.scss b/site/src/scss/_sidebar.scss
index 6366d8924dc3b2c6759ea4d87a4947a7314313db..1d17decfc2b9eb4a23e12414c788a545c8b7f508 100644 (file)
--- a/site/src/scss/_sidebar.scss
+++ b/site/src/scss/_sidebar.scss
@@ -5,6 +5,8 @@
 
 @layer custom {
   .bd-sidebar {
+    font-size: var(--font-size-sm);
+
     @include media-breakpoint-up(lg) {
       position: sticky;
       top: 5rem;
@@ -30,7 +32,7 @@
     .nav {
       --bs-nav-gap: 2px;
       --bs-nav-link-justify: flex-start;
-      --bs-nav-link-font-size: #{$font-size-sm};
+      --bs-nav-link-font-size: var(--font-size-sm);
       --bs-nav-link-padding-x: .75rem;
       --bs-nav-link-padding-y: .25rem;
       margin-top: .25rem;

diff --git a/site/src/scss/_syntax.scss b/site/src/scss/_syntax.scss
index 93b7a94d7110d11a97447fdb041db9734f02efd6..d2cbb16e8bf883c7ba6c5d5af5fb6debb6c86df8 100644 (file)
--- a/site/src/scss/_syntax.scss
+++ b/site/src/scss/_syntax.scss
@@ -19,6 +19,7 @@
   display: flex;
   padding: var(--bd-example-padding);
   margin-bottom: 0;
+  font-size: 13px;
   line-height: 20px;
   background-color: var(--bd-pre-bg) !important; // stylelint-disable-line declaration-no-important
   @include border-radius(calc(var(--bs-border-radius) - 1px));
@@ -35,7 +36,7 @@
   width: calc(100% + 2.5rem);
   padding-inline: 1.25rem;
   margin-inline: -1.25rem;
-  background-color: var(--bs-primary-bg-subtle);
+  background-color: color-mix(in oklch, var(--primary-bg) 10%, transparent);
 }
 
 // Dark mode theming for Shiki

diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss
index 760f6407013c2e4afd231fb043a496e77eee004b..82b1255209adcb3902c7fb5cc79825c062e3e0d7 100644 (file)
--- a/site/src/scss/_toc.scss
+++ b/site/src/scss/_toc.scss
@@ -4,6 +4,7 @@
 @layer custom {
   .bd-toc {
     container-type: inline-size;
+    font-size: var(--font-size-sm);
 
     @include media-breakpoint-up(lg) {
       position: sticky;