v6: Restore 16px base font-size

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);
   }

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;

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
   }

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
 }

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},

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};
-  }
-}

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

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;

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.
   }
 

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;
+  }
 }

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;
   }
 }