lint

.bundlewatch.config.json

@@ -2,15 +2,15 @@
   "files": [
     {
       "path": "./dist/css/bootstrap-grid.css",
-      "maxSize": "9.00 kB"
+      "maxSize": "7.75 kB"
     },
     {
       "path": "./dist/css/bootstrap-grid.min.css",
-      "maxSize": "8.25 kB"
+      "maxSize": "6.75 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.css",
-      "maxSize": "5.0 kB"
+      "maxSize": "4.5 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.min.css",
@@ -18,7 +18,7 @@
     },
     {
       "path": "./dist/css/bootstrap-utilities.css",
-      "maxSize": "13.5 kB"
+      "maxSize": "13.0 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "37.5 kB"
+      "maxSize": "36.0 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "33.75 kB"
+      "maxSize": "32.0 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

.github/workflows/docs.yml

@@ -30,6 +30,8 @@ jobs:
           node-version: "${{ env.NODE }}"
           cache: npm
 
+      - run: java -version
+
       - name: Install npm dependencies
         run: npm ci
 
@@ -37,7 +39,7 @@ jobs:
         run: npm run docs-build
 
       - name: Validate HTML
-        run: npm run docs-html-validate
+        run: npm run docs-vnu
 
       - name: Run linkinator
         uses: JustinBeckwith/linkinator-action@3d5ba091319fa7b0ac14703761eebb7d100e6f6d # v1.11.0

build/html-validate.mjs

@@ -1,104 +0,0 @@
-#!/usr/bin/env node
-
-/*!
- * Script to run html-validate for HTML validation.
- *
- * This replaces the Java-based vnu-jar validator with a faster, Node.js-only solution.
- * Benefits:
- * - No Java dependency required
- * - Faster execution (no JVM startup time)
- * - Easy to configure with rule-based system
- * - Better integration with Node.js build tools
- *
- * Copyright 2017-2025 The Bootstrap Authors
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- */
-
-import { HtmlValidate } from 'html-validate'
-import { globby } from 'globby'
-
-const htmlValidate = new HtmlValidate({
-  rules: {
-    // Allow autocomplete on buttons (Bootstrap specific)
-    'attribute-allowed-values': 'off',
-    // Allow aria-disabled on links (Bootstrap specific)
-    'aria-label-misuse': 'off',
-    // Allow modern CSS syntax
-    'valid-id': 'off',
-    // Allow void elements with trailing slashes (Astro)
-    'void-style': 'off',
-    // Allow custom attributes
-    'no-unknown-elements': 'off',
-    'attribute-boolean-style': 'off',
-    'no-inline-style': 'off',
-    // KEEP duplicate ID checking enabled (this is important for HTML validity)
-    'no-dup-id': 'error'
-  },
-  elements: [
-    'html5',
-    {
-      // Allow custom attributes for Astro/framework compatibility
-      '*': {
-        attributes: {
-          'is:raw': { boolean: true },
-          switch: { boolean: true },
-          autocomplete: { enum: ['on', 'off', 'new-password', 'current-password'] }
-        }
-      }
-    }
-  ]
-})
-
-async function validateHTML() {
-  try {
-    console.log('Running html-validate validation...')
-
-    // Find all HTML files
-    const files = await globby([
-      '_site/**/*.html',
-      'js/tests/**/*.html'
-    ], {
-      ignore: ['**/node_modules/**']
-    })
-
-    console.log(`Validating ${files.length} HTML files...`)
-
-    let hasErrors = false
-
-    // Validate all files in parallel to avoid await-in-loop
-    const validationPromises = files.map(file =>
-      htmlValidate.validateFile(file).then(report => ({ file, report }))
-    )
-
-    const validationResults = await Promise.all(validationPromises)
-
-    // Process results and check for errors
-    for (const { file, report } of validationResults) {
-      if (!report.valid) {
-        hasErrors = true
-        console.error(`\nErrors in ${file}:`)
-
-        // Extract error messages with reduced nesting
-        const errorMessages = report.results.flatMap(result =>
-          result.messages.filter(message => message.severity === 2)
-        )
-
-        for (const message of errorMessages) {
-          console.error(`  Line ${message.line}:${message.column} - ${message.message} (${message.ruleId})`)
-        }
-      }
-    }
-
-    if (hasErrors) {
-      console.error('\nHTML validation failed!')
-      process.exit(1)
-    } else {
-      console.log('✓ All HTML files are valid!')
-    }
-  } catch (error) {
-    console.error('HTML validation error:', error)
-    process.exit(1)
-  }
-}
-
-validateHTML()

build/vnu-jar.mjs

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+/*!
+ * Script to run vnu-jar if Java is available.
+ * Copyright 2017-2025 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+import { execFile, spawn } from 'node:child_process'
+import vnu from 'vnu-jar'
+
+execFile('java', ['-version'], (error, stdout, stderr) => {
+  if (error) {
+    console.error('Skipping vnu-jar test; Java is probably missing.')
+    console.error(error)
+    return
+  }
+
+  console.log('Running vnu-jar validation...')
+
+  const is32bitJava = !/64-Bit/.test(stderr)
+
+  // vnu-jar accepts multiple ignores joined with a `|`.
+  // Also note that the ignores are string regular expressions.
+  const ignores = [
+    // "autocomplete" is included in <button> and checkboxes and radio <input>s due to
+    // Firefox's non-standard autocomplete behavior - see https://bugzilla.mozilla.org/show_bug.cgi?id=654072
+    'Attribute “autocomplete” is only allowed when the input type is.*',
+    'Attribute “autocomplete” not allowed on element “button” at this point.',
+    // Per https://www.w3.org/TR/html-aria/#docconformance having "aria-disabled" on a link is
+    // NOT RECOMMENDED, but it's still valid - we explain in the docs that it's not ideal,
+    // and offer more robust alternatives, but also need to show a less-than-ideal example
+    'An “aria-disabled” attribute whose value is “true” should not be specified on an “a” element that has an “href” attribute.',
+    // A `code` element with the `is:raw` attribute coming from remark-prismjs (Astro upstream possible bug)
+    'Attribute “is:raw” is not serializable as XML 1.0.',
+    'Attribute “is:raw” not allowed on element “code” at this point.',
+    // Astro's expecting trailing slashes on HTML tags such as <br />
+    'Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.',
+    // Allow `switch` attribute.
+    'Attribute “switch” not allowed on element “input” at this point.'
+  ].join('|')
+
+  const args = [
+    '-jar',
+    `"${vnu}"`,
+    '--asciiquotes',
+    '--skip-non-html',
+    '--Werror',
+    `--filterpattern "${ignores}"`,
+    '_site/',
+    'js/tests/'
+  ]
+
+  // For the 32-bit Java we need to pass `-Xss512k`
+  if (is32bitJava) {
+    args.splice(0, 0, '-Xss512k')
+  }
+
+  console.log(`command used: java ${args.join(' ')}`)
+
+  return spawn('java', args, {
+    shell: true,
+    stdio: 'inherit'
+  })
+    .on('exit', process.exit)
+})

package.json

@@ -77,8 +77,8 @@
     "docs": "npm-run-all docs-build docs-lint",
     "docs-build": "npm run astro-build",
     "docs-compile": "npm run docs-build",
-    "docs-html-validate": "node build/html-validate.mjs",
-    "docs-lint": "npm-run-all docs-prettier-check docs-html-validate",
+    "docs-vnu": "node build/vnu-jar.mjs",
+    "docs-lint": "npm-run-all docs-prettier-check docs-vnu",
     "docs-prettier-check": "prettier --config site/.prettierrc.json -c --cache site",
     "docs-prettier-format": "prettier --config site/.prettierrc.json --write --cache site",
     "docs-serve": "npm run astro-dev",
@@ -143,7 +143,6 @@
     "github-slugger": "^2.0.0",
     "globby": "^14.1.0",
     "hammer-simulator": "0.0.1",
-    "html-validate": "^8.24.1",
     "htmlparser2": "^10.0.0",
     "image-size": "^2.0.2",
     "ip": "^2.0.1",
@@ -180,6 +179,7 @@
     "stylelint-config-twbs-bootstrap": "^16.1.0",
     "terser": "^5.44.0",
     "unist-util-visit": "^5.0.0",
+    "vnu-jar": "24.10.17",
     "zod": "^4.1.9"
   },
   "files": [

scss/_alert.scss

@@ -1,6 +1,5 @@
 @use "sass:map";
 @use "config" as *;
-@use "theme" as *;
 @use "variables" as *;
 @use "mixins/border-radius" as *;
 
@@ -70,9 +69,9 @@ $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers widt
 
   // scss-docs-start alert-modifiers
   // Generate contextual modifier classes for colorizing the alert
-  @each $state in map.keys($new-theme-colors) {
+  @each $state in map.keys($theme-colors) {
     .alert-#{$state} {
-      --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text);
+      --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
       --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
       --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
       --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);

scss/_colors.scss

@@ -1,61 +1,282 @@
-@use "config" as *;
+$blue: #0d6efd !default;
+$blue-100: #cfe2ff !default;
+$blue-200: #9ec5fe !default;
+$blue-300: #6ea8fe !default;
+$blue-400: #3d8bfd !default;
+$blue-500: $blue !default;
+$blue-600: #0a58ca !default;
+$blue-700: #084298 !default;
+$blue-800: #052c65 !default;
+$blue-900: #031633 !default;
 
-// stylelint-disable hue-degree-notation, @stylistic/number-leading-zero
+$indigo: #6610f2 !default;
+$indigo-100: #e0cffc !default;
+$indigo-200: #c29ffa !default;
+$indigo-300: #a370f7 !default;
+$indigo-400: #8540f5 !default;
+$indigo-500: $indigo !default;
+$indigo-600: #520dc2 !default;
+$indigo-700: #3d0a91 !default;
+$indigo-800: #290661 !default;
+$indigo-900: #140330 !default;
 
-// Easily convert colors to oklch() with https://oklch.com/
-$new-blue: oklch(60% 0.24 258) !default;
-$new-indigo: oklch(56% 0.26 288) !default;
-$new-violet: oklch(56% 0.24 300) !default;
-$new-purple: oklch(56% 0.24 320) !default;
-$new-pink: oklch(60% 0.22 4) !default;
-$new-red: oklch(60% 0.22 20) !default;
-$new-orange: oklch(70% 0.22 52) !default;
-$new-amber: oklch(79% 0.2 78) !default;
-$new-yellow: oklch(88% 0.24 88) !default;
-$new-lime: oklch(65% 0.24 135) !default;
-$new-green: oklch(64% 0.22 160) !default;
-$new-teal: oklch(68% 0.22 190) !default;
-$new-cyan: oklch(69% 0.22 220) !default;
-$new-brown: oklch(60% 0.12 54) !default;
-$new-gray: oklch(60% 0.02 245) !default;
-$new-pewter: oklch(65% 0.01 290) !default;
+$purple: #6f42c1 !default;
+$purple-100: #e2d9f3 !default;
+$purple-200: #c5b3e6 !default;
+$purple-300: #a98eda !default;
+$purple-400: #8c68cd !default;
+$purple-500: $purple !default;
+$purple-600: #59359a !default;
+$purple-700: #432874 !default;
+$purple-800: #2c1a4d !default;
+$purple-900: #160d27 !default;
 
-$hues: (
-  "blue": $new-blue,
-  "indigo": $new-indigo,
-  "violet": $new-violet,
-  "purple": $new-purple,
-  "pink": $new-pink,
-  "red": $new-red,
-  "orange": $new-orange,
-  "amber": $new-amber,
-  "yellow": $new-yellow,
-  "lime": $new-lime,
-  "green": $new-green,
-  "teal": $new-teal,
-  "cyan": $new-cyan,
-  "brown": $new-brown,
-  "gray": $new-gray,
-  "pewter": $new-pewter
-) !default;
+$pink: #d63384 !default;
+$pink-100: #f7d6e6 !default;
+$pink-200: #efadce !default;
+$pink-300: #e685b5 !default;
+$pink-400: #de5c9d !default;
+$pink-500: $pink !default;
+$pink-600: #ab296a !default;
+$pink-700: #801f4f !default;
+$pink-800: #561435 !default;
+$pink-900: #2b0a1a !default;
 
-:root {
-  @each $color, $hue in $hues {
-    --#{$prefix}#{$color}-025: color-mix(in srgb, #fff 94%, #{$hue});
-    --#{$prefix}#{$color}-050: color-mix(in srgb, #fff 90%, #{$hue});
-    --#{$prefix}#{$color}-100: color-mix(in srgb, #fff 80%, #{$hue});
-    --#{$prefix}#{$color}-200: color-mix(in srgb, #fff 60%, #{$hue});
-    --#{$prefix}#{$color}-300: color-mix(in srgb, #fff 40%, #{$hue});
-    --#{$prefix}#{$color}-400: color-mix(in srgb, #fff 20%, #{$hue});
-    --#{$prefix}#{$color}-500: #{$hue};
-    --#{$prefix}#{$color}-600: color-mix(in srgb, #000 16%, #{$hue});
-    --#{$prefix}#{$color}-700: color-mix(in srgb, #000 32%, #{$hue});
-    --#{$prefix}#{$color}-800: color-mix(in srgb, #000 48%, #{$hue});
-    --#{$prefix}#{$color}-900: color-mix(in srgb, #000 64%, #{$hue});
-    --#{$prefix}#{$color}-950: color-mix(in srgb, #000 76%, #{$hue});
-    --#{$prefix}#{$color}-975: color-mix(in srgb, #000 88%, #{$hue});
-  }
-}
+$red: #dc3545 !default;
+$red-100: #f8d7da !default;
+$red-200: #f1aeb5 !default;
+$red-300: #ea868f !default;
+$red-400: #e35d6a !default;
+$red-500: $red !default;
+$red-600: #b02a37 !default;
+$red-700: #842029 !default;
+$red-800: #58151c !default;
+$red-900: #2c0b0e !default;
+
+$orange: #fd7e14 !default;
+$orange-100: #ffe5d0 !default;
+$orange-200: #fecba1 !default;
+$orange-300: #feb272 !default;
+$orange-400: #fd9843 !default;
+$orange-500: $orange !default;
+$orange-600: #ca6510 !default;
+$orange-700: #984c0c !default;
+$orange-800: #653208 !default;
+$orange-900: #331904 !default;
+
+$yellow: #ffc107 !default;
+$yellow-100: #fff3cd !default;
+$yellow-200: #ffe69c !default;
+$yellow-300: #ffda6a !default;
+$yellow-400: #ffcd39 !default;
+$yellow-500: $yellow !default;
+$yellow-600: #cc9a06 !default;
+$yellow-700: #997404 !default;
+$yellow-800: #664d03 !default;
+$yellow-900: #332701 !default;
+
+$green: #198754 !default;
+$green-100: #d1e7dd !default;
+$green-200: #a3cfbb !default;
+$green-300: #75b798 !default;
+$green-400: #479f76 !default;
+$green-500: $green !default;
+$green-600: #146c43 !default;
+$green-700: #0f5132 !default;
+$green-800: #0a3622 !default;
+$green-900: #051b11 !default;
+
+$teal: #20c997 !default;
+$teal-100: #d2f4ea !default;
+$teal-200: #a6e9d5 !default;
+$teal-300: #79dfc1 !default;
+$teal-400: #4dd4ac !default;
+$teal-500: $teal !default;
+$teal-600: #1aa179 !default;
+$teal-700: #13795b !default;
+$teal-800: #0d503c !default;
+$teal-900: #06281e !default;
+
+$cyan: #0dcaf0 !default;
+$cyan-100: #cff4fc !default;
+$cyan-200: #9eeaf9 !default;
+$cyan-300: #6edff6 !default;
+$cyan-400: #3dd5f3 !default;
+$cyan-500: $cyan !default;
+$cyan-600: #0aa2c0 !default;
+$cyan-700: #087990 !default;
+$cyan-800: #055160 !default;
+$cyan-900: #032830 !default;
+
+$gray: #adb5bd !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: $gray !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
 
 $white: #fff !default;
 $black: #000 !default;
+
+$blues: (
+  "blue-100": $blue-100,
+  "blue-200": $blue-200,
+  "blue-300": $blue-300,
+  "blue-400": $blue-400,
+  "blue-500": $blue-500,
+  "blue-600": $blue-600,
+  "blue-700": $blue-700,
+  "blue-800": $blue-800,
+  "blue-900": $blue-900
+) !default;
+
+$indigos: (
+  "indigo-100": $indigo-100,
+  "indigo-200": $indigo-200,
+  "indigo-300": $indigo-300,
+  "indigo-400": $indigo-400,
+  "indigo-500": $indigo-500,
+  "indigo-600": $indigo-600,
+  "indigo-700": $indigo-700,
+  "indigo-800": $indigo-800,
+  "indigo-900": $indigo-900
+) !default;
+
+$purples: (
+  "purple-100": $purple-100,
+  "purple-200": $purple-200,
+  "purple-300": $purple-300,
+  "purple-400": $purple-400,
+  "purple-500": $purple-500,
+  "purple-600": $purple-600,
+  "purple-700": $purple-700,
+  "purple-800": $purple-800,
+  "purple-900": $purple-900
+) !default;
+
+$pinks: (
+  "pink-100": $pink-100,
+  "pink-200": $pink-200,
+  "pink-300": $pink-300,
+  "pink-400": $pink-400,
+  "pink-500": $pink-500,
+  "pink-600": $pink-600,
+  "pink-700": $pink-700,
+  "pink-800": $pink-800,
+  "pink-900": $pink-900
+) !default;
+
+$reds: (
+  "red-100": $red-100,
+  "red-200": $red-200,
+  "red-300": $red-300,
+  "red-400": $red-400,
+  "red-500": $red-500,
+  "red-600": $red-600,
+  "red-700": $red-700,
+  "red-800": $red-800,
+  "red-900": $red-900
+) !default;
+
+$oranges: (
+  "orange-100": $orange-100,
+  "orange-200": $orange-200,
+  "orange-300": $orange-300,
+  "orange-400": $orange-400,
+  "orange-500": $orange-500,
+  "orange-600": $orange-600,
+  "orange-700": $orange-700,
+  "orange-800": $orange-800,
+  "orange-900": $orange-900
+) !default;
+
+$yellows: (
+  "yellow-100": $yellow-100,
+  "yellow-200": $yellow-200,
+  "yellow-300": $yellow-300,
+  "yellow-400": $yellow-400,
+  "yellow-500": $yellow-500,
+  "yellow-600": $yellow-600,
+  "yellow-700": $yellow-700,
+  "yellow-800": $yellow-800,
+  "yellow-900": $yellow-900
+) !default;
+
+$greens: (
+  "green-100": $green-100,
+  "green-200": $green-200,
+  "green-300": $green-300,
+  "green-400": $green-400,
+  "green-500": $green-500,
+  "green-600": $green-600,
+  "green-700": $green-700,
+  "green-800": $green-800,
+  "green-900": $green-900
+) !default;
+
+$teals: (
+  "teal-100": $teal-100,
+  "teal-200": $teal-200,
+  "teal-300": $teal-300,
+  "teal-400": $teal-400,
+  "teal-500": $teal-500,
+  "teal-600": $teal-600,
+  "teal-700": $teal-700,
+  "teal-800": $teal-800,
+  "teal-900": $teal-900
+) !default;
+
+$cyans: (
+  "cyan-100": $cyan-100,
+  "cyan-200": $cyan-200,
+  "cyan-300": $cyan-300,
+  "cyan-400": $cyan-400,
+  "cyan-500": $cyan-500,
+  "cyan-600": $cyan-600,
+  "cyan-700": $cyan-700,
+  "cyan-800": $cyan-800,
+  "cyan-900": $cyan-900
+) !default;
+
+$grays: (
+  "gray-100": $gray-100,
+  "gray-200": $gray-200,
+  "gray-300": $gray-300,
+  "gray-400": $gray-400,
+  "gray-500": $gray-500,
+  "gray-600": $gray-600,
+  "gray-700": $gray-700,
+  "gray-800": $gray-800,
+  "gray-900": $gray-900
+) !default;
+
+$colors: (
+  "blue": $blue,
+  "indigo": $indigo,
+  "purple": $purple,
+  "pink": $pink,
+  "red": $red,
+  "orange": $orange,
+  "yellow": $yellow,
+  "green": $green,
+  "teal": $teal,
+  "cyan": $cyan
+) !default;
+
+$all-colors: (
+  "grays": $grays,
+  "blues": $blues,
+  "indigos": $indigos,
+  "purples": $purples,
+  "pinks": $pinks,
+  "reds": $reds,
+  "oranges": $oranges,
+  "yellows": $yellows,
+  "greens": $greens,
+  "teals": $teals,
+  "cyans": $cyans
+) !default;

scss/_config.scss

@@ -52,9 +52,9 @@ $grid-breakpoints: (
   xs: 0,
   sm: 576px,
   md: 768px,
-  lg: 1024px,
-  xl: 1280px,
-  2xl: 1536px
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
 ) !default;
 // scss-docs-end grid-breakpoints
 
@@ -80,8 +80,8 @@ $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
-  xl: 1200px,
-  2xl: 1440px
+  xl: 1140px,
+  xxl: 1320px
 ) !default;
 // scss-docs-end container-max-widths
 

scss/_dropdown.scss

@@ -38,14 +38,14 @@ $dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color) !default;
 $dropdown-item-padding-y:           $spacer * .25 !default;
 $dropdown-item-padding-x:           $spacer !default;
 
-$dropdown-header-color:             var(--#{$prefix}gray-600) !default;
+$dropdown-header-color:             $gray-600 !default;
 $dropdown-header-padding-x:         $dropdown-item-padding-x !default;
 $dropdown-header-padding-y:         $dropdown-padding-y !default;
 // scss-docs-end dropdown-variables
 
 // scss-docs-start dropdown-dark-variables
-$dropdown-dark-color:               var(--#{$prefix}gray-300) !default;
-$dropdown-dark-bg:                  var(--#{$prefix}gray-800) !default;
+$dropdown-dark-color:               $gray-300 !default;
+$dropdown-dark-bg:                  $gray-800 !default;
 $dropdown-dark-border-color:        $dropdown-border-color !default;
 $dropdown-dark-divider-bg:          $dropdown-divider-bg !default;
 $dropdown-dark-box-shadow:          null !default;
@@ -54,8 +54,8 @@ $dropdown-dark-link-hover-color:    $white !default;
 $dropdown-dark-link-hover-bg:       rgba($white, .15) !default;
 $dropdown-dark-link-active-color:   $dropdown-link-active-color !default;
 $dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;
-$dropdown-dark-link-disabled-color: var(--#{$prefix}gray-500) !default;
-$dropdown-dark-header-color:        var(--#{$prefix}gray-500) !default;
+$dropdown-dark-link-disabled-color: $gray-500 !default;
+$dropdown-dark-header-color:        $gray-500 !default;
 // scss-docs-end dropdown-dark-variables
 
 @layer components {

scss/_functions.scss

@@ -207,7 +207,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 // Return opaque color
 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
 @function opaque($background, $foreground) {
-  @return color-mix(in srgb, rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
+  @return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
 }
 
 // scss-docs-start color-functions

scss/_list-group.scss

@@ -1,6 +1,5 @@
 @use "sass:map";
 @use "colors" as *;
-@use "theme" as *;
 @use "config" as *;
 @use "variables" as *;
 @use "mixins/border-radius" as *;
@@ -213,7 +212,7 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
   // Add modifier classes to change text and background color on individual items.
   // Organizationally, this must come after the `:hover` states.
 
-  @each $state in map.keys($new-theme-colors) {
+  @each $state in map.keys($theme-colors) {
     .list-group-item-#{$state} {
       --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
       --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);

scss/_maps.scss

@@ -0,0 +1,180 @@
+// @use "sass:map";
+// @use "colors" as *;
+// @use "functions" as *;
+// @use "config" as *;
+// @use "variables" as *;
+
+// // Re-assigned maps
+// //
+// // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
+
+// // scss-docs-start theme-colors-rgb
+// $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
+// // scss-docs-end theme-colors-rgb
+
+// // scss-docs-start theme-text-map
+// $theme-colors-text: (
+//   "primary": $primary-text-emphasis,
+//   "secondary": $secondary-text-emphasis,
+//   "success": $success-text-emphasis,
+//   "info": $info-text-emphasis,
+//   "warning": $warning-text-emphasis,
+//   "danger": $danger-text-emphasis,
+//   "light": $light-text-emphasis,
+//   "dark": $dark-text-emphasis,
+// ) !default;
+// // scss-docs-end theme-text-map
+
+// // scss-docs-start theme-bg-subtle-map
+// $theme-colors-bg-subtle: (
+//   "primary": $primary-bg-subtle,
+//   "secondary": $secondary-bg-subtle,
+//   "success": $success-bg-subtle,
+//   "info": $info-bg-subtle,
+//   "warning": $warning-bg-subtle,
+//   "danger": $danger-bg-subtle,
+//   "light": $light-bg-subtle,
+//   "dark": $dark-bg-subtle,
+// ) !default;
+// // scss-docs-end theme-bg-subtle-map
+
+// // scss-docs-start theme-border-subtle-map
+// $theme-colors-border-subtle: (
+//   "primary": $primary-border-subtle,
+//   "secondary": $secondary-border-subtle,
+//   "success": $success-border-subtle,
+//   "info": $info-border-subtle,
+//   "warning": $warning-border-subtle,
+//   "danger": $danger-border-subtle,
+//   "light": $light-border-subtle,
+//   "dark": $dark-border-subtle,
+// ) !default;
+// // scss-docs-end theme-border-subtle-map
+
+// $theme-colors-text-dark: null !default;
+// $theme-colors-bg-subtle-dark: null !default;
+// $theme-colors-border-subtle-dark: null !default;
+
+// @if $enable-dark-mode {
+//   // scss-docs-start theme-text-dark-map
+//   $theme-colors-text-dark: (
+//     "primary": $primary-text-emphasis-dark,
+//     "secondary": $secondary-text-emphasis-dark,
+//     "success": $success-text-emphasis-dark,
+//     "info": $info-text-emphasis-dark,
+//     "warning": $warning-text-emphasis-dark,
+//     "danger": $danger-text-emphasis-dark,
+//     "light": $light-text-emphasis-dark,
+//     "dark": $dark-text-emphasis-dark,
+//   ) !default;
+//   // scss-docs-end theme-text-dark-map
+
+//   // scss-docs-start theme-bg-subtle-dark-map
+//   $theme-colors-bg-subtle-dark: (
+//     "primary": $primary-bg-subtle-dark,
+//     "secondary": $secondary-bg-subtle-dark,
+//     "success": $success-bg-subtle-dark,
+//     "info": $info-bg-subtle-dark,
+//     "warning": $warning-bg-subtle-dark,
+//     "danger": $danger-bg-subtle-dark,
+//     "light": $light-bg-subtle-dark,
+//     "dark": $dark-bg-subtle-dark,
+//   ) !default;
+//   // scss-docs-end theme-bg-subtle-dark-map
+
+//   // scss-docs-start theme-border-subtle-dark-map
+//   $theme-colors-border-subtle-dark: (
+//     "primary": $primary-border-subtle-dark,
+//     "secondary": $secondary-border-subtle-dark,
+//     "success": $success-border-subtle-dark,
+//     "info": $info-border-subtle-dark,
+//     "warning": $warning-border-subtle-dark,
+//     "danger": $danger-border-subtle-dark,
+//     "light": $light-border-subtle-dark,
+//     "dark": $dark-border-subtle-dark,
+//   ) !default;
+//   // scss-docs-end theme-border-subtle-dark-map
+// }
+
+// // Utilities maps
+// //
+// // Extends the default `$theme-colors` maps to help create our utilities.
+
+// // Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+// // scss-docs-start utilities-colors
+// $utilities-colors: $theme-colors-rgb !default;
+// // scss-docs-end utilities-colors
+
+// // scss-docs-start utilities-text-colors
+// $utilities-text: map.merge(
+//   $utilities-colors,
+//   (
+//     "black": to-rgb($black),
+//     "white": to-rgb($white),
+//     "body": to-rgb($body-color)
+//   )
+// ) !default;
+// $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+
+// $utilities-text-emphasis-colors: (
+//   "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
+//   "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
+//   "success-emphasis": var(--#{$prefix}success-text-emphasis),
+//   "info-emphasis": var(--#{$prefix}info-text-emphasis),
+//   "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
+//   "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
+//   "light-emphasis": var(--#{$prefix}light-text-emphasis),
+//   "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
+// ) !default;
+// // scss-docs-end utilities-text-colors
+
+// // scss-docs-start utilities-bg-colors
+// $utilities-bg: map.merge(
+//   $utilities-colors,
+//   (
+//     "black": to-rgb($black),
+//     "white": to-rgb($white),
+//     "body": to-rgb($body-bg)
+//   )
+// ) !default;
+// $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+
+// $utilities-bg-subtle: (
+//   "primary-subtle": var(--#{$prefix}primary-bg-subtle),
+//   "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
+//   "success-subtle": var(--#{$prefix}success-bg-subtle),
+//   "info-subtle": var(--#{$prefix}info-bg-subtle),
+//   "warning-subtle": var(--#{$prefix}warning-bg-subtle),
+//   "danger-subtle": var(--#{$prefix}danger-bg-subtle),
+//   "light-subtle": var(--#{$prefix}light-bg-subtle),
+//   "dark-subtle": var(--#{$prefix}dark-bg-subtle)
+// ) !default;
+// // scss-docs-end utilities-bg-colors
+
+// // scss-docs-start utilities-border-colors
+// $utilities-border: map.merge(
+//   $utilities-colors,
+//   (
+//     "black": to-rgb($black),
+//     "white": to-rgb($white)
+//   )
+// ) !default;
+// $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
+
+// $utilities-border-subtle: (
+//   "primary-subtle": var(--#{$prefix}primary-border-subtle),
+//   "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
+//   "success-subtle": var(--#{$prefix}success-border-subtle),
+//   "info-subtle": var(--#{$prefix}info-border-subtle),
+//   "warning-subtle": var(--#{$prefix}warning-border-subtle),
+//   "danger-subtle": var(--#{$prefix}danger-border-subtle),
+//   "light-subtle": var(--#{$prefix}light-border-subtle),
+//   "dark-subtle": var(--#{$prefix}dark-border-subtle)
+// ) !default;
+// // scss-docs-end utilities-border-colors
+
+// $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
+
+// $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+
+// $gutters: $spacers !default;

scss/_navbar.scss

@@ -280,7 +280,7 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
           }
 
           .navbar-toggler {
-            display: none !important; // stylelint-disable-line declaration-no-important
+            display: none;
           }
 
           .offcanvas {

scss/_progress.scss

@@ -14,7 +14,7 @@ $progress-bg:                       var(--#{$prefix}secondary-bg) !default;
 $progress-border-radius:            var(--#{$prefix}border-radius) !default;
 $progress-box-shadow:               var(--#{$prefix}box-shadow-inset) !default;
 $progress-bar-color:                $white !default;
-$progress-bar-bg:                   var(--#{$prefix}primary-bg) !default;
+$progress-bar-bg:                   $primary !default;
 $progress-bar-animation-timing:     1s linear infinite !default;
 $progress-bar-transition:           width .6s ease !default;
 // scss-docs-end progress-variables

scss/_root.scss

@@ -14,35 +14,66 @@
 :root {
   color-scheme: light dark;
 
-  // scss-docs-start root-theme-variables
-  // Generate semantic theme colors
+  @each $color-group-name, $color-group in $all-colors {
+    @if meta.type-of($color-group) == "map" {
+      @each $color-name, $color-value in $color-group {
+        --#{$prefix}#{$color-name}: #{$color-value};
+      }
+    } @else {
+      --#{$prefix}#{$color-group-name}: #{$color-group};
+    }
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
   @each $color-name, $color-map in $new-theme-colors {
     @each $key, $value in $color-map {
       --#{$prefix}#{$color-name}-#{$key}: #{$value};
     }
   }
 
-  @each $color, $value in $theme-bgs {
-    --#{$prefix}#{$color}: #{$value};
-  }
-
-  @each $color, $value in $theme-fgs {
-    --#{$prefix}#{$color}: #{$value};
-  }
-
-  @each $color, $value in $theme-borders {
-    --#{$prefix}#{$color}: #{$value};
-  }
-
   --#{$prefix}black: #{$black};
   --#{$prefix}white: #{$white};
-  // scss-docs-end root-theme-variables
 }
 
 :root,
 [data-bs-theme="light"] {
   // Note: Custom variable values only support SassScript inside `#{}`.
 
+  // Colors
+  //
+  // Generate palettes for full colors, grays, and theme colors.
+
+  // @each $color, $value in $colors {
+  //   --#{$prefix}#{$color}: #{$value};
+  // }
+
+  // @each $color, $value in $grays {
+  //   --#{$prefix}gray-#{$color}: #{$value};
+  // }
+
+  // @each $color, $value in $theme-colors {
+  //   --#{$prefix}#{$color}: #{$value};
+  // }
+
+  // @each $color, $value in $theme-colors-rgb {
+  //   --#{$prefix}#{$color}-rgb: #{$value};
+  // }
+
+  // @each $color, $value in $theme-colors-text {
+  //   --#{$prefix}#{$color}-text-emphasis: #{$value};
+  // }
+
+  // @each $color, $value in $theme-colors-bg-subtle {
+  //   --#{$prefix}#{$color}-bg-subtle: #{$value};
+  // }
+
+  // @each $color, $value in $theme-colors-border-subtle {
+  //   --#{$prefix}#{$color}-border-subtle: #{$value};
+  // }
+
   --#{$prefix}white-rgb: #{to-rgb($white)};
   --#{$prefix}black-rgb: #{to-rgb($black)};
 
@@ -139,7 +170,7 @@
   --#{$prefix}border-radius-sm: #{$border-radius-sm};
   --#{$prefix}border-radius-lg: #{$border-radius-lg};
   --#{$prefix}border-radius-xl: #{$border-radius-xl};
-  --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
+  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
   --#{$prefix}border-radius-pill: #{$border-radius-pill};
   // scss-docs-end root-border-radius-var
 
@@ -192,12 +223,24 @@
     --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
     --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
 
+    // @each $color, $value in $theme-colors-text-dark {
+    //   --#{$prefix}#{$color}-text-emphasis: #{$value};
+    // }
+
+    // @each $color, $value in $theme-colors-bg-subtle-dark {
+    //   --#{$prefix}#{$color}-bg-subtle: #{$value};
+    // }
+
+    // @each $color, $value in $theme-colors-border-subtle-dark {
+    //   --#{$prefix}#{$color}-border-subtle: #{$value};
+    // }
+
     --#{$prefix}heading-color: #{$headings-color-dark};
 
-    // --#{$prefix}link-color: #{$link-color-dark};
-    // --#{$prefix}link-hover-color: #{$link-hover-color-dark};
-    // --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
-    // --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+    --#{$prefix}link-color: #{$link-color-dark};
+    --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
 
     // --#{$prefix}code-color: #{$code-color-dark}; // removed in v6
     --#{$prefix}highlight-color: #{$mark-color-dark};

scss/_theme.scss

@@ -36,8 +36,9 @@ $new-theme-colors: (
     "bg": light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-500)),
     "bg-subtle": light-dark(var(--#{$prefix}blue-100), var(--#{$prefix}blue-900)),
     "bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}blue-200), var(--#{$prefix}blue-300)), var(--#{$prefix}blue-700)),
     "border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-300)) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}white)
   ),
   "accent": (
@@ -46,8 +47,9 @@ $new-theme-colors: (
     "bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)),
     "bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)),
     "bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-300)), var(--#{$prefix}indigo-700)),
     "border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-300)) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}indigo-500) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}white)
   ),
   "danger": (
@@ -56,8 +58,9 @@ $new-theme-colors: (
     "bg": light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-500)),
     "bg-subtle": light-dark(var(--#{$prefix}red-100), var(--#{$prefix}red-900)),
     "bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}red-200), var(--#{$prefix}red-300)), var(--#{$prefix}red-700)),
     "border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-300)) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}white)
   ),
   "warning": (
@@ -66,8 +69,9 @@ $new-theme-colors: (
     "bg": light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-500)),
     "bg-subtle": light-dark(var(--#{$prefix}yellow-100), var(--#{$prefix}yellow-900)),
     "bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-300)), var(--#{$prefix}yellow-700)),
     "border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-300)) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}gray-900)
   ),
   "success": (
@@ -76,8 +80,9 @@ $new-theme-colors: (
     "bg": light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-500)),
     "bg-subtle": light-dark(var(--#{$prefix}green-100), var(--#{$prefix}green-900)),
     "bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}green-200), var(--#{$prefix}green-300)), var(--#{$prefix}green-700)),
     "border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-300)) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}green-500) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}white)
   ),
   "info": (
@@ -86,28 +91,20 @@ $new-theme-colors: (
     "bg": light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-500)),
     "bg-subtle": light-dark(var(--#{$prefix}cyan-100), var(--#{$prefix}cyan-900)),
     "bg-muted": light-dark(var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-300)), var(--#{$prefix}cyan-700)),
     "border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-300)) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}cyan-500) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}gray-900)
   ),
-  "emphasis": (
-    "base": var(--#{$prefix}gray-900),
-    "text": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
-    "bg": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
-    "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-950)),
-    "bg-muted": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
-    "border": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)) 50%, var(--#{$prefix}bg)),
-    "contrast": light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900))
-  ),
   "secondary": (
     "base": var(--#{$prefix}gray-300),
     "text": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
     "bg": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
     "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
     "bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in oklch, var(--#{$prefix}gray-600), var(--#{$prefix}gray-700))),
     "border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-300)) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, var(--#{$prefix}bg)),
     "contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
   )
 ) !default;
@@ -115,10 +112,10 @@ $new-theme-colors: (
 
 // mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
 $theme-bgs: (
-  null: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-975)),
-  "1": light-dark(var(--#{$prefix}gray-025), var(--#{$prefix}gray-950)),
-  "2": light-dark(var(--#{$prefix}gray-050), var(--#{$prefix}gray-900)),
-  "3": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
+  null: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900)),
+  "1": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-900), var(--#{$prefix}gray-800))),
+  "2": light-dark(color-mix(in srgb, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-700))),
+  "3": light-dark(color-mix(in srgb, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in srgb, var(--#{$prefix}gray-700), var(--#{$prefix}gray-600))),
   "white": var(--#{$prefix}white),
   "black": var(--#{$prefix}black),
   "transparent": transparent,
@@ -126,10 +123,10 @@ $theme-bgs: (
 ) !default;
 
 $theme-fgs: (
-  null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-050)),
-  "1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-100)),
-  "2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-200)),
-  "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-300)),
+  null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
+  "1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
+  "2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
+  "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
   "white": var(--#{$prefix}white),
   "black": var(--#{$prefix}black),
   "inherit": inherit,
@@ -138,7 +135,7 @@ $theme-fgs: (
 $theme-borders: (
   null: light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-700)),
   "muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-800)),
-  "subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)),
+  "subtle": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900))),
   "emphasized": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-600)),
 ) !default;
 

scss/_tooltip.scss

@@ -9,7 +9,7 @@
 $tooltip-font-size:                 $font-size-sm !default;
 $tooltip-max-width:                 200px !default;
 $tooltip-color:                     var(--#{$prefix}body-bg) !default;
-$tooltip-bg:                        var(--#{$prefix}body-color) !default;
+$tooltip-bg:                        var(--#{$prefix}emphasis-color) !default;
 $tooltip-border-radius:             var(--#{$prefix}border-radius) !default;
 $tooltip-opacity:                   .9 !default;
 $tooltip-padding-y:                 $spacer * .25 !default;

scss/_utilities.scss

@@ -96,7 +96,7 @@ $utilities: map.merge(
       property: display,
       class: d,
       important: true,
-      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex contents flow-root none
+      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex flow-root none
     ),
     // scss-docs-end utils-display
     // scss-docs-start utils-shadow
@@ -893,15 +893,8 @@ $utilities: map.merge(
       property: z-index,
       class: z,
       values: $zindex-levels,
-    ),
-    // scss-docs-end utils-zindex
-    // scss-docs-start utils-check-colors
-    "check-color": (
-      property: --#{$prefix}check-checked-bg --#{$prefix}check-checked-border-color --#{$prefix}radio-checked-bg --#{$prefix}radio-checked-border-color --#{$prefix}switch-checked-bg,
-      class: checked,
-      values: theme-color-values("bg")
     )
-    // scss-docs-end utils-check-colors
+    // scss-docs-end utils-zindex
   ),
   $utilities
 );

scss/_variables.scss

@@ -10,29 +10,62 @@
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
 // scss-docs-start theme-color-variables
-// $primary:       $blue-500 !default;
-// $secondary:     var(--#{$prefix}gray-600) !default;
-// $success:       $green-500 !default;
-// $info:          $cyan-500 !default;
-// $warning:       $yellow-500 !default;
-// $danger:        $red-500 !default;
-// $light:         var(--#{$prefix}gray-100) !default;
-// $dark:          var(--#{$prefix}gray-900) !default;
+$primary:       $blue-500 !default;
+$secondary:     $gray-600 !default;
+$success:       $green-500 !default;
+$info:          $cyan-500 !default;
+$warning:       $yellow-500 !default;
+$danger:        $red-500 !default;
+$light:         $gray-100 !default;
+$dark:          $gray-900 !default;
 // scss-docs-end theme-color-variables
 
 // scss-docs-start theme-colors-map
-// $theme-colors: (
-//   "primary":    $primary,
-//   "secondary":  $secondary,
-//   "success":    $success,
-//   "info":       $info,
-//   "warning":    $warning,
-//   "danger":     $danger,
-//   "light":      $light,
-//   "dark":       $dark
-// ) !default;
+$theme-colors: (
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger,
+  "light":      $light,
+  "dark":       $dark
+) !default;
 // scss-docs-end theme-colors-map
 
+// // scss-docs-start theme-text-variables
+// $primary-text-emphasis:   shade-color($primary, 60%) !default;
+// $secondary-text-emphasis: shade-color($secondary, 60%) !default;
+// $success-text-emphasis:   shade-color($success, 60%) !default;
+// $info-text-emphasis:      shade-color($info, 60%) !default;
+// $warning-text-emphasis:   shade-color($warning, 60%) !default;
+// $danger-text-emphasis:    shade-color($danger, 60%) !default;
+// $light-text-emphasis:     $gray-700 !default;
+// $dark-text-emphasis:      $gray-700 !default;
+// // scss-docs-end theme-text-variables
+
+// // scss-docs-start theme-bg-subtle-variables
+// $primary-bg-subtle:       tint-color($primary, 80%) !default;
+// $secondary-bg-subtle:     tint-color($secondary, 80%) !default;
+// $success-bg-subtle:       tint-color($success, 80%) !default;
+// $info-bg-subtle:          tint-color($info, 80%) !default;
+// $warning-bg-subtle:       tint-color($warning, 80%) !default;
+// $danger-bg-subtle:        tint-color($danger, 80%) !default;
+// $light-bg-subtle:         color.mix($gray-100, $white) !default;
+// $dark-bg-subtle:          $gray-400 !default;
+// // scss-docs-end theme-bg-subtle-variables
+
+// // scss-docs-start theme-border-subtle-variables
+// $primary-border-subtle:   tint-color($primary, 60%) !default;
+// $secondary-border-subtle: tint-color($secondary, 60%) !default;
+// $success-border-subtle:   tint-color($success, 60%) !default;
+// $info-border-subtle:      tint-color($info, 60%) !default;
+// $warning-border-subtle:   tint-color($warning, 60%) !default;
+// $danger-border-subtle:    tint-color($danger, 60%) !default;
+// $light-border-subtle:     $gray-200 !default;
+// $dark-border-subtle:      $gray-500 !default;
+// // scss-docs-end theme-border-subtle-variables
+
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (
   ("<", "%3c"),
@@ -117,14 +150,14 @@ $position-values: (
 // Settings for the `<body>` element.
 
 $body-text-align:           null !default;
-$body-color:                var(--#{$prefix}gray-900) !default;
+$body-color:                $gray-900 !default;
 $body-bg:                   $white !default;
 
 $body-secondary-color:      rgba($body-color, .75) !default;
-$body-secondary-bg:         var(--#{$prefix}gray-200) !default;
+$body-secondary-bg:         $gray-200 !default;
 
 $body-tertiary-color:       rgba($body-color, .5) !default;
-$body-tertiary-bg:          var(--#{$prefix}gray-100) !default;
+$body-tertiary-bg:          $gray-100 !default;
 
 $body-emphasis-color:       $black !default;
 
@@ -132,11 +165,11 @@ $body-emphasis-color:       $black !default;
 //
 // Style anchor elements.
 
-// $link-color:                              var !default;
+$link-color:                              $primary !default;
 $link-decoration:                         underline !default;
 $link-underline-offset:                   .2em !default;
 $link-shade-percentage:                   20% !default;
-// $link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
+$link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
 $link-hover-decoration:                   null !default;
 
 $stretched-link-pseudo-element:           after !default;
@@ -172,7 +205,7 @@ $border-widths: (
   5: 5px
 ) !default;
 $border-style:                solid !default;
-$border-color:                var(--#{$prefix}gray-200) !default;
+$border-color:                color.mix($gray-300, $gray-400) !default;
 $border-color-translucent:    rgba($black, .175) !default;
 // scss-docs-end border-variables
 
@@ -181,7 +214,7 @@ $border-radius:               .375rem !default;
 $border-radius-sm:            .25rem !default;
 $border-radius-lg:            .5rem !default;
 $border-radius-xl:            1rem !default;
-$border-radius-2xl:           2rem !default;
+$border-radius-xxl:           2rem !default;
 $border-radius-pill:          50rem !default;
 // scss-docs-end border-radius-variables
 
@@ -192,17 +225,17 @@ $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
 
+$component-active-color:      $white !default;
+$component-active-bg:         $primary !default;
+
 // scss-docs-start focus-ring-variables
 $focus-ring-width:      .25rem !default;
 $focus-ring-opacity:    .25 !default;
-$focus-ring-color:      var(--#{$prefix}primary-focus-ring) !default;
+$focus-ring-color:      rgba($primary, $focus-ring-opacity) !default;
 $focus-ring-blur:       0 !default;
 $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
 // scss-docs-end focus-ring-variables
 
-$component-active-color:      var(--#{$prefix}primary-contrast) !default;
-$component-active-bg:         var(--#{$prefix}primary-bg) !default;
-
 $transition-base:             all .2s ease-in-out !default;
 $transition-fade:             opacity .15s linear !default;
 // scss-docs-start collapse-transition
@@ -309,7 +342,7 @@ $initialism-font-size:        $small-font-size !default;
 
 $blockquote-margin-y:         $spacer !default;
 $blockquote-font-size:        $font-size-base * 1.25 !default;
-$blockquote-footer-color:     var(--#{$prefix}gray-600) !default;
+$blockquote-footer-color:     $gray-600 !default;
 $blockquote-footer-font-size: $small-font-size !default;
 
 $hr-margin-y:                 $spacer !default;
@@ -333,7 +366,7 @@ $list-inline-padding:         .5rem !default;
 
 $mark-padding:                .1875em !default;
 $mark-color:                  $body-color !default;
-$mark-bg:                     var(--#{$prefix}yellow-100) !default;
+$mark-bg:                     $yellow-100 !default;
 // scss-docs-end type-variables
 
 
@@ -348,7 +381,7 @@ $input-btn-font-family:       null !default;
 $input-btn-font-size:         $font-size-base !default;
 $input-btn-line-height:       $line-height-base !default;
 
-$input-btn-focus-width:         .25em !default;
+$input-btn-focus-width:         $focus-ring-width !default;
 $input-btn-focus-color-opacity: $focus-ring-opacity !default;
 $input-btn-focus-color:         $focus-ring-color !default;
 $input-btn-focus-blur:          $focus-ring-blur !default;
@@ -398,9 +431,9 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color:     var(--#{$prefix}gray-600) !default;
-// $btn-link-color-contrast:     color-contrast($link-color) !default;
-// $btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
+$btn-link-disabled-color:     $gray-600 !default;
+$btn-link-color-contrast:     color-contrast($link-color) !default;
+$btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;
@@ -486,7 +519,7 @@ $modal-footer-border-width:         $modal-header-border-width !default;
 $modal-sm:                          300px !default;
 $modal-md:                          500px !default;
 $modal-lg:                          800px !default;
-$modal-xl:                          1200px !default;
+$modal-xl:                          1140px !default;
 
 $modal-fade-transform:              translate(0, -50px) !default;
 $modal-show-transform:              none !default;
@@ -534,18 +567,21 @@ $pre-color:                         null !default;
 //
 
 // scss-docs-start sass-dark-mode-vars
-$body-color-dark:                   var(--#{$prefix}gray-200) !default;
-$body-bg-dark:                      var(--#{$prefix}gray-975) !default;
+$body-color-dark:                   $gray-300 !default;
+$body-bg-dark:                      $gray-900 !default;
 $body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
-$body-secondary-bg-dark:            var(--#{$prefix}gray-800) !default;
+$body-secondary-bg-dark:            $gray-800 !default;
 $body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
-$body-tertiary-bg-dark:             color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900)) !default;
+$body-tertiary-bg-dark:             color.mix($gray-800, $gray-900, 50%) !default;
 $body-emphasis-color-dark:          $white !default;
-$border-color-dark:                 var(--#{$prefix}gray-700) !default;
+$border-color-dark:                 $gray-700 !default;
 $border-color-translucent-dark:     rgba($white, .15) !default;
 $headings-color-dark:               inherit !default;
+$link-color-dark:                   tint-color($primary, 40%) !default;
+$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
+// $code-color-dark:                   tint-color($code-color, 40%) !default;
 $mark-color-dark:                   $body-color-dark !default;
-$mark-bg-dark:                      var(--#{$prefix}yellow-800) !default;
+$mark-bg-dark:                      $yellow-800 !default;
 
 
 //
@@ -553,9 +589,9 @@ $mark-bg-dark:                      var(--#{$prefix}yellow-800) !default;
 //
 
 // scss-docs-start form-validation-colors-dark
-$form-valid-color-dark:             var(--#{$prefix}green-300) !default;
-$form-valid-border-color-dark:      var(--#{$prefix}green-300) !default;
-$form-invalid-color-dark:           var(--#{$prefix}red-300) !default;
-$form-invalid-border-color-dark:    var(--#{$prefix}red-300) !default;
+$form-valid-color-dark:             $green-300 !default;
+$form-valid-border-color-dark:      $green-300 !default;
+$form-invalid-color-dark:           $red-300 !default;
+$form-invalid-border-color-dark:    $red-300 !default;
 // scss-docs-end form-validation-colors-dark
 // scss-docs-end sass-dark-mode-vars

scss/buttons/_button-variables.scss

@@ -33,9 +33,9 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color:     var(--#{$prefix}gray-600) !default;
-// $btn-link-color-contrast:     color-contrast($link-color) !default;
-// $btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
+$btn-link-disabled-color:     $gray-600 !default;
+$btn-link-color-contrast:     color-contrast($link-color) !default;
+$btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;

scss/buttons/_button.scss

@@ -1,12 +1,7 @@
 @use "sass:color";
-@use "sass:list";
-@use "sass:map";
-@use "sass:meta";
 @use "../colors" as *;
 @use "../config" as *;
-@use "../theme" as *;
 @use "../variables" as *;
-@use "../theme" as *;
 @use "../functions" as *;
 @use "../vendor/rfs" as *;
 @use "../mixins/border-radius" as *;
@@ -16,160 +11,67 @@
 @use "../mixins/transition" as *;
 @use "button-variables" as *;
 
-// scss-docs-start btn-variants
-$button-variants: (
-  "solid": (
-    "base": (
-      "bg": "bg",
-      "color": "contrast",
-      "border-color": "bg"
-    ),
-    "hover": (
-      "bg": "bg",
-      "border-color": "bg",
-      "color": "contrast"
-    ),
-    "active": (
-      "bg": "bg",
-      "border-color": "bg",
-      "color": "contrast"
-    )
-  ),
-  "outline": (
-    "base": (
-      "bg": "transparent",
-      "color": "text",
-      "border-color": "border"
-    ),
-    "hover": (
-      "bg": "bg",
-      "color": "contrast",
-      "border-color": "bg"
-    ),
-    "active": (
-      "bg": "bg",
-      "color": "contrast",
-      "border-color": "bg"
-    )
-  ),
-  "subtle": (
-    "base": (
-      "bg": "bg-subtle",
-      "color": "text",
-      "border-color": "transparent"
-    ),
-    "hover": (
-      "bg": ("bg-muted", "bg-subtle"),
-      "color": "text"
-    ),
-    "active": (
-      "bg": "bg-subtle",
-      "color": "text"
-    )
-  ),
-  "text": (
-    "base": (
-      "color": "text",
-      "bg": "transparent",
-      "border-color": "transparent"
-    ),
-    "hover": (
-      "color": "text",
-      "bg": "bg-subtle"
-    ),
-    "active": (
-      "color": "text",
-      "bg": "bg-subtle"
-    )
-  )
-) !default;
-// scss-docs-end btn-variants
+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
 
-
-// Helper function to get nested map values using dot notation
-@function get-nested-value($map, $keys) {
-  $value: $map;
-  @each $key in $keys {
-    @if type-of($value) == "map" {
-      $value: map-get($value, $key);
-    } @else {
-      @return null;
-    }
-  }
-  @return $value;
-}
-
-// Helper function to split dot notation string into list
-@function split-keys($key) {
-  $keys: ();
-  $parts: str-slice($key, 1);
-  @each $part in $parts {
-    $keys: append($keys, $part);
-  }
-  @return $keys;
-}
-
-// Main button style generator mixin
 // scss-docs-start btn-variant-mixin
-@mixin button-variant($color, $variant) {
-  $variant-styles: map.get($button-variants, $variant);
-
-  @if $variant-styles {
-    // Base properties
-    @each $property, $value in map.get($variant-styles, "base") {
-      @if $value == "transparent" {
-        --#{$prefix}btn-#{$property}: transparent;
-      } @else {
-        --#{$prefix}btn-#{$property}: var(--#{$prefix}#{$color}-#{$value});
-      }
-    }
-
-    // Hover state
-    &:hover {
-      @each $property, $value in map.get($variant-styles, "hover") {
-        @if $value == "transparent" {
-          --#{$prefix}btn-hover-#{$property}: transparent;
-        } @else if meta.type-of($value) == "list" {
-          $first-value: list.nth($value, 1);
-          $second-value: list.nth($value, 2);
-          --#{$prefix}btn-hover-#{$property}: color-mix(in oklch, var(--#{$prefix}#{$color}-#{$first-value}) 50%, var(--#{$prefix}#{$color}-#{$second-value}));
-        } @else if $value == "bg-subtle" {
-          --#{$prefix}btn-hover-#{$property}: var(--#{$prefix}#{$color}-#{$value});
-        } @else {
-          --#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .95) calc(c * 1.1) h);
-        }
-      }
-    }
-
-    &:focus-visible {
-      outline-color: var(--#{$prefix}#{$color}-focus-ring);
-    }
-
-    // Active state
-    &:active,
-    &.active {
-      @each $property, $value in map.get($variant-styles, "active") {
-        @if $value == "transparent" {
-          --#{$prefix}btn-active-#{$property}: transparent;
-        } @else if $value == "bg-subtle" {
-          --#{$prefix}btn-active-#{$property}: var(--#{$prefix}#{$color}-#{$value});
-        } @else {
-          --#{$prefix}btn-active-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .9) calc(c * 1.15) h);
-        }
-      }
-    }
-  }
+@mixin button-variant(
+  $background,
+  $border,
+  $color: color-contrast($background),
+  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+  $hover-color: color-contrast($hover-background),
+  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+  $active-color: color-contrast($active-background),
+  $disabled-background: $background,
+  $disabled-border: $border,
+  $disabled-color: color-contrast($disabled-background)
+) {
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: #{$background};
+  --#{$prefix}btn-border-color: #{$border};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  // --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-bg: #{$disabled-background};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
 }
 // scss-docs-end btn-variant-mixin
 
-// Generate all button variants
-@each $color, $_ in $new-theme-colors {
-  @each $variant, $_ in $button-variants {
-    .btn-#{$color}-#{$variant} {
-      @include button-variant($color, $variant);
-    }
-  }
+// scss-docs-start btn-outline-variant-mixin
+@mixin button-outline-variant(
+  $color,
+  $color-hover: color-contrast($color),
+  $active-background: $color,
+  $active-border: $color,
+  $active-color: color-contrast($active-background)
+) {
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-border-color: #{$color};
+  --#{$prefix}btn-hover-color: #{$color-hover};
+  --#{$prefix}btn-hover-bg: #{$active-background};
+  --#{$prefix}btn-hover-border-color: #{$active-border};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$color};
+  --#{$prefix}btn-disabled-bg: transparent;
+  --#{$prefix}btn-disabled-border-color: #{$color};
+  --#{$prefix}gradient: none;
 }
+// scss-docs-end btn-outline-variant-mixin
 
 // scss-docs-start btn-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
@@ -239,11 +141,15 @@ $button-variants: (
     }
 
     &:focus-visible {
+      color: var(--#{$prefix}btn-hover-color);
+      @include gradient-bg(var(--#{$prefix}btn-hover-bg));
+      border-color: var(--#{$prefix}btn-hover-border-color);
       @include focus-ring(true);
       --#{$prefix}focus-ring-offset: 1px;
     }
 
     .btn-check:focus-visible + & {
+      border-color: var(--#{$prefix}btn-hover-border-color);
       @include focus-ring(true);
     }
 
@@ -281,6 +187,46 @@ $button-variants: (
     }
   }
 
+
+  //
+  // Alternate buttons
+  //
+
+  // scss-docs-start btn-variant-loops
+  @each $color, $value in $theme-colors {
+    .btn-#{$color} {
+      @if $color == "light" {
+        @include button-variant(
+          $value,
+          $value,
+          $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+          $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+          $active-background: shade-color($value, $btn-active-bg-shade-amount),
+          $active-border: shade-color($value, $btn-active-border-shade-amount)
+        );
+      } @else if $color == "dark" {
+        @include button-variant(
+          $value,
+          $value,
+          $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
+          $hover-border: tint-color($value, $btn-hover-border-tint-amount),
+          $active-background: tint-color($value, $btn-active-bg-tint-amount),
+          $active-border: tint-color($value, $btn-active-border-tint-amount)
+        );
+      } @else {
+        @include button-variant($value, $value);
+      }
+    }
+  }
+
+  @each $color, $value in $theme-colors {
+    .btn-outline-#{$color} {
+      @include button-outline-variant($value);
+    }
+  }
+  // scss-docs-end btn-variant-loops
+
+
   //
   // Link buttons
   //

scss/content/_tables.scss

@@ -3,7 +3,6 @@
 @use "sass:math";
 @use "../config" as *;
 @use "../colors" as *;
-@use "../theme" as *;
 @use "../variables" as *;
 @use "../functions" as *;
 @use "../layout/breakpoints" as *;
@@ -16,7 +15,7 @@ $table-cell-padding-x-sm:     .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 var(--#{$prefix}body-color) !default;
+$table-color:                 var(--#{$prefix}emphasis-color) !default;
 $table-bg:                    var(--#{$prefix}body-bg) !default;
 $table-accent-bg:             transparent !default;
 
@@ -24,15 +23,15 @@ $table-accent-bg:             transparent !default;
 
 $table-striped-color:         $table-color !default;
 $table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-striped-bg-factor)}, transparent) !default;
+$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
 
 $table-active-color:          $table-color !default;
 $table-active-bg-factor:      .1 !default;
-$table-active-bg:             color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-active-bg-factor)}, transparent) !default;
+$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
 
 $table-hover-color:           $table-color !default;
 $table-hover-bg-factor:       .075 !default;
-$table-hover-bg:              color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-hover-bg-factor)}, transparent) !default;
+$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
 
 $table-border-factor:         .2 !default;
 $table-border-width:          var(--#{$prefix}border-width) !default;
@@ -45,17 +44,26 @@ $table-group-separator-color: currentcolor !default;
 
 // $table-caption-color:         var(--#{$prefix}secondary-color) !default;
 
+$table-bg-scale:              -80% !default;
 // scss-docs-end table-variables
 
 // scss-docs-start table-loop
-$table-variants: $new-theme-colors !default;
+$table-variants: (
+  "primary":    shift-color($primary, $table-bg-scale),
+  "secondary":  shift-color($secondary, $table-bg-scale),
+  "success":    shift-color($success, $table-bg-scale),
+  "info":       shift-color($info, $table-bg-scale),
+  "warning":    shift-color($warning, $table-bg-scale),
+  "danger":     shift-color($danger, $table-bg-scale),
+  "light":      $light,
+  "dark":       $dark,
+) !default;
 // scss-docs-end table-loop
 
 // scss-docs-start table-variant
 @mixin table-variant($state, $background) {
   .table-#{$state} {
-    // $color: color-contrast(opaque($body-bg, $background));
-    $color: var(--#{$prefix}#{$state}-text);
+    $color: color-contrast(opaque($body-bg, $background));
     $hover-bg: color.mix($color, $background, math.percentage($table-hover-bg-factor));
     $striped-bg: color.mix($color, $background, math.percentage($table-striped-bg-factor));
     $active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
@@ -230,24 +238,9 @@ $table-variants: $new-theme-colors !default;
   // Table variants set the table cell backgrounds, border colors
   // and the colors of the striped, hovered & active tables
 
-  // scss-docs-start table-variants-loop
-  @each $color in map.keys($table-variants) {
-    .table-#{$color} {
-      --#{$prefix}table-color: var(--#{$prefix}#{$color}-text);
-      --#{$prefix}table-bg: var(--#{$prefix}#{$color}-bg-subtle);
-      --#{$prefix}table-border-color: var(--#{$prefix}#{$color}-border);
-      --#{$prefix}table-striped-bg: color-mix(in srgb, var(--#{$prefix}#{$color}-bg-subtle), var(--#{$prefix}table-color) #{math.percentage($table-striped-bg-factor)});
-      --#{$prefix}table-striped-color: var(--#{$prefix}table-color);
-      --#{$prefix}table-active-bg: color-mix(in srgb, var(--#{$prefix}#{$color}-bg-subtle), var(--#{$prefix}table-color) #{math.percentage($table-active-bg-factor)});
-      --#{$prefix}table-active-color: var(--#{$prefix}table-color);
-      --#{$prefix}table-hover-bg: color-mix(in srgb, var(--#{$prefix}#{$color}-bg-subtle), var(--#{$prefix}table-color) #{math.percentage($table-hover-bg-factor)});
-      --#{$prefix}table-hover-color: var(--#{$prefix}table-color);
-
-      color: var(--#{$prefix}table-color);
-      border-color: var(--#{$prefix}table-border-color);
-    }
+  @each $color, $value in $table-variants {
+    @include table-variant($color, $value);
   }
-  // scss-docs-end table-variants-loop
 
   // Responsive tables
   //

scss/forms/_check.scss

@@ -16,7 +16,8 @@ $check-checked-bg: var(--#{$prefix}primary-base) !default;
 $check-checked-border-color: $check-checked-bg !default;
 $check-indeterminate-bg: var(--#{$prefix}primary-base) !default;
 $check-indeterminate-border-color: $check-indeterminate-bg !default;
-$check-disabled-bg: var(--#{$prefix}bg-3) !default;
+$check-disabled-bg: var(--#{$prefix}secondary-bg) !default;
+$check-disabled-border-color: $check-disabled-bg !default;
 $check-disabled-opacity: .65 !default;
 // scss-docs-end check-variables
 
@@ -40,6 +41,7 @@ $check-disabled-opacity: .65 !default;
     --#{$prefix}check-indeterminate-bg: #{$check-indeterminate-bg};
     --#{$prefix}check-indeterminate-border-color: #{$check-indeterminate-border-color};
     --#{$prefix}check-disabled-bg: #{$check-disabled-bg};
+    --#{$prefix}check-disabled-border-color: #{$check-disabled-border-color};
     --#{$prefix}check-disabled-opacity: #{$check-disabled-opacity};
     // scss-docs-end check-css-variables
 

scss/forms/_floating-labels.scss

@@ -15,7 +15,7 @@ $form-floating-input-padding-b:         .625rem !default;
 $form-floating-label-height:            1.5em !default;
 $form-floating-label-opacity:           .65 !default;
 $form-floating-label-transform:         scale(.85) translateY(-.5rem) translateX(.15rem) !default;
-$form-floating-label-disabled-color:    var(--#{$prefix}gray-600) !default;
+$form-floating-label-disabled-color:    $gray-600 !default;
 $form-floating-transition:              opacity .1s ease-in-out, transform .1s ease-in-out !default;
 // scss-docs-end form-floating-variables
 

scss/forms/_form-variables.scss

@@ -27,7 +27,7 @@ $control-font-size-lg: $font-size-lg !default;
 $control-line-height-lg: $line-height-lg !default;
 $control-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
 
-$control-select-indicator-color:       var(--#{$prefix}gray-600) !default;
+$control-select-indicator-color:       $gray-600 !default;
 $control-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$control-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
 $control-select-bg-position:           right $control-padding-x center !default;
 $control-select-bg-size:               16px 12px !default;

scss/forms/_radio.scss

@@ -14,7 +14,8 @@
 $radio-border-color: var(--#{$prefix}border-color) !default;
 $radio-checked-bg: var(--#{$prefix}primary-base) !default;
 $radio-checked-border-color: $radio-checked-bg !default;
-$radio-disabled-bg: var(--#{$prefix}bg-3) !default;
+$radio-disabled-bg: var(--#{$prefix}secondary-bg) !default;
+$radio-disabled-border-color: $radio-disabled-bg !default;
 $radio-disabled-opacity: .65 !default;
 // scss-docs-end radio-variables
 
@@ -36,6 +37,7 @@ $radio-disabled-opacity: .65 !default;
     --#{$prefix}radio-checked-bg: #{$radio-checked-bg};
     --#{$prefix}radio-checked-border-color: #{$radio-checked-border-color};
     --#{$prefix}radio-disabled-bg: #{$radio-disabled-bg};
+    --#{$prefix}radio-disabled-border-color: #{$radio-disabled-border-color};
     --#{$prefix}radio-disabled-opacity: #{$radio-disabled-opacity};
     // scss-docs-end radio-css-variables
 

scss/forms/_switch.scss

@@ -21,7 +21,6 @@
     --#{$prefix}switch-border-color: var(--#{$prefix}border-color);
     --#{$prefix}switch-indicator-bg: var(--#{$prefix}white);
     --#{$prefix}switch-checked-bg: var(--#{$prefix}primary-base);
-    --#{$prefix}switch-checked-border-color: var(--#{$prefix}switch-checked-bg);
     --#{$prefix}switch-checked-indicator-bg: var(--#{$prefix}white);
     --#{$prefix}switch-disabled-bg: var(--#{$prefix}secondary-bg);
     --#{$prefix}switch-disabled-indicator-bg: var(--#{$prefix}secondary-text);
@@ -66,8 +65,7 @@
 
     &:has(input:checked) {
       padding-inline-start: calc(var(--#{$prefix}switch-height) / 2 + var(--#{$prefix}switch-padding));
-      background-color: var(--#{$prefix}switch-checked-bg);
-      border-color: var(--#{$prefix}switch-checked-border-color);
+      background-color: var(--#{$prefix}primary-base);
     }
 
     &:has(input:disabled) {

scss/helpers/_color-bg.scss

@@ -1,16 +1,13 @@
+@use "../colors" as *;
 @use "../config" as *;
 @use "../variables" as *;
-@use "../colors" as *;
-@use "../theme" as *;
 
 @layer helpers {
   // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
-  @each $color, $value in $new-theme-colors {
+  @each $color, $value in $theme-colors {
     .text-bg-#{$color} {
-      color: var(--#{$prefix}#{$color}-text);
-      background-color: var(--#{$prefix}#{$color}-bg-subtle);
-      // color: color-contrast($value);
-      // background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1));
+      color: color-contrast($value);
+      background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1));
     }
   }
 }

scss/helpers/_colored-links.scss

@@ -1,22 +1,20 @@
 @use "../config" as *;
 @use "../colors" as *;
-@use "../theme" as *;
 @use "../variables" as *;
 
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @layer helpers {
-  @each $color, $value in $new-theme-colors {
+  @each $color, $value in $theme-colors {
     .link-#{$color} {
-      color: var(--#{$prefix}#{$color}-text);
-      // color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
-      text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}-text), transparent var(--#{$prefix}link-underline-opacity));
+      color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
+      text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-underline-opacity));
 
       @if $link-shade-percentage != 0 {
         &:hover,
         &:focus {
-          // $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
-          // color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
-          text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}-text), transparent var(--#{$prefix}link-underline-opacity));
+          $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+          color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
+          text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
         }
       }
     }

scss/layout/_breakpoints.scss

@@ -6,7 +6,7 @@
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
 //
-//    (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px)
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
 //
 // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
 
@@ -14,9 +14,9 @@
 //
 //    >> breakpoint-next(sm)
 //    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl 2xl))
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
 //    md
 @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
   $n: list.index($breakpoint-names, $name);
@@ -28,7 +28,7 @@
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map.get($breakpoints, $name);
@@ -42,7 +42,7 @@
 // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
 // See https://bugs.webkit.org/show_bug.cgi?id=178261
 //
-//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
+//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    767.98px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $max: map.get($breakpoints, $name);
@@ -52,9 +52,9 @@
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
 // Useful for making responsive utilities.
 //
-//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    "-sm"
 @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
   @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");

scss/layout/_grid.scss

@@ -70,8 +70,4 @@
   .grid-cols-6 {
     --#{$prefix}columns: 6;
   }
-
-  .grid-full {
-    grid-column: 1 / -1;
-  }
 }

scss/mixins/_gradients.scss

@@ -17,18 +17,18 @@
 // Horizontal gradient, from left to right
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-x($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
   background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
 }
 
 // Vertical gradient, from top to bottom
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-y($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $start-percent: null, $end-percent: null) {
+@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
   background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
 }
 
-@mixin gradient-directional($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $deg: 45deg) {
+@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
   background-image: linear-gradient($deg, $start-color, $end-color);
 }
 
@@ -40,7 +40,7 @@
   background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
 }
 
-@mixin gradient-radial($inner-color: var(--#{$prefix}gray-700), $outer-color: var(--#{$prefix}gray-800)) {
+@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
   background-image: radial-gradient(circle, $inner-color, $outer-color);
 }
 

scss/mixins/_utilities.scss

@@ -3,44 +3,22 @@
 @use "sass:meta";
 @use "sass:string";
 @use "../config" as *;
-@use "../vendor/rfs" as *;
-
-// stylelint-disable scss/dollar-variable-pattern
 
 // Utility generator
-
-// - Utilities can three different types of selectors:
-//   - class: .class
-//   - attr-starts: [class^="class"]
-//   - attr-includes: [class*="class"]
-// - Utilities can generate a regular CSS property or a CSS custom property
-// - Utilities can be responsive or not
-// - Utilities can have a state (e.g., :hover, :focus, :active, etc.)
-
+// Used to generate utilities & print utilities
 @mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
-  // Determine if we're generating a class, or an attribute selector
-  $selectorType: if(map.has-key($utility, selector), map.get($utility, selector), "class");
-  // Then get the class name to use in a class (e.g., .class) or in a attribute selector (e.g., [class^="class"])
-  $selectorClass: map.get($utility, class);
-
-  // Get the list or map of values and ensure it's a map
   $values: map.get($utility, values);
-  @if meta.type-of($values) != "map" {
-    @if meta.type-of($values) == "list" {
-      $list: ();
-      @each $value in $values {
-        $list: map.merge($list, ($value: $value));
-      }
-      $values: $list;
+
+  // If the values are a list or string, convert it into a map
+  @if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
+    // A single value is converted to a map with a null key.
+    @if list.length($values) == 1 {
+      $values: (null: list.nth($values, 1));
     } @else {
-      $values: (null: $values);
+      $values: list.zip($values, $values);
     }
   }
 
-  // Calculate infix once, before the loop
-  // Note: $infix already includes the leading dash from breakpoint-infix()
-  // $infix: if($infix == "", "", "-" + $infix);
-
   @each $key, $value in $values {
     $properties: map.get($utility, property);
 
@@ -49,114 +27,83 @@
       $properties: list.append((), $properties);
     }
 
-    // Use custom class if present, otherwise use the first value from the list of properties
-    $customClass: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
-    $customClass: if($customClass == null, "", $customClass);
+    // Use custom class if present
+    $property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
+    $property-class: if($property-class == null, "", $property-class);
 
     // Use custom CSS variable name if present, otherwise default to `class`
-    // mdo-do: restore?
-    // $css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
+    $css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
 
     // State params to generate pseudo-classes
     $state: if(map.has-key($utility, state), map.get($utility, state), ());
 
-    // $infix: if($customClass == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
+    $infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.slice($infix, 2), $infix);
 
     // Don't prefix if value key is null (e.g. with shadow class)
-    $customClassModifier: if($key, if($customClass == "" and $infix == "", "", "-") + $key, "");
+    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
 
-    $selector: "";
-    @if $selectorType == "class" {
-      // Use the fallback of the first property if no `class` key is used
-      @if $customClass != "" {
-        $selector: ".#{$customClass + $infix + $customClassModifier}";
-      } @else {
-        $selector: ".#{$selectorClass + $infix + $customClassModifier}";
+    @if map.get($utility, rfs) {
+      // Inside the media query
+      @if $is-rfs-media-query {
+        $val: rfs-value($value);
+
+        // Do not render anything if fluid and non fluid values are the same
+        $value: if($val == rfs-fluid-value($value), null, $val);
       }
-    } @else if $selectorType == "attr-starts" {
-      $selector: "[class^=\"#{$selectorClass}\"]";
-    } @else if $selectorType == "attr-includes" {
-      $selector: "[class*=\"#{$selectorClass}\"]";
-    }
-
-    // @debug $utility;
-    // @debug $selectorType;
-    // @debug $selector;
-    // @debug $properties;
-    // @debug $values;
-
-    #{$selector} {
-      @if map.get($utility, rfs) {
-        @if map.get($utility, important) {
-          @warn "The `important` option is not compatible with `rfs`. The `important` declaration will be ignored.";
-        }
-        @if $is-rfs-media-query {
-          @each $property in $properties {
-            @include rfs($value, $property);
-          }
-        }
-        @else {
-          @each $property in $properties {
-            @include rfs($value, $property);
-          }
-        }
-      } @else {
-        @each $property in $properties {
-          @if map.get($utility, important) {
-            #{$property}: $value !important; // stylelint-disable-line declaration-no-important
-          } @else {
-            #{$property}: $value;
-          }
-        }
+      @else {
+        $value: rfs-fluid-value($value);
       }
     }
 
-    // @if $value != null {
-    //   #{$selector} {
-    //     @each $property in $properties {
-    //       #{$property}: $value;
-    //     }
-    //   }
-
-    //   @if $is-css-var {
-    //     #{$selector} {
-    //       --#{$prefix}#{$css-variable-name}: #{$value};
-    //     }
-
-    //     @each $pseudo in $state {
-    //       #{$selector}-#{$pseudo}:#{$pseudo} {
-    //         --#{$prefix}#{$css-variable-name}: #{$value};
-    //       }
-    //     }
-    //   } @else {
-    //     #{$selector} {
-    //       @each $property in $properties {
-    //         // @if $is-local-vars {
-    //         //   @each $local-var, $variable in $is-local-vars {
-    //         //     --#{$prefix}#{$local-var}: #{$variable};
-    //         //   }
-    //         // }
-    //         #{$property}: $value;
-    //       }
-    //     }
-
-    //   //   @each $pseudo in $state {
-    //   //     #{$selector}-#{$pseudo}:#{$pseudo} {
-    //   //       @each $property in $properties {
-    //   //         @if $is-local-vars {
-    //   //           @each $local-var, $variable in $is-local-vars {
-    //   //             --#{$prefix}#{$local-var}: #{$variable};
-    //   //           }
-    //   //         }
-    //   //         #{$property}: $value;
-    //   //       }
-    //   //     }
-    //   //   }
-    //   }
-    // }
-
     $is-css-var: map.get($utility, css-var);
     $is-local-vars: map.get($utility, local-vars);
-    // $is-rtl: map.get($utility, rtl);
+    $is-rtl: map.get($utility, rtl);
+    $is-important: map.get($utility, important);
+
+    @if $value != null {
+      @if $is-rtl == false {
+        /* rtl:begin:remove */
+      }
+
+      @if $is-css-var {
+        .#{$property-class + $infix + $property-class-modifier} {
+          --#{$prefix}#{$css-variable-name}: #{$value};
+        }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            --#{$prefix}#{$css-variable-name}: #{$value};
+          }
+        }
+      } @else {
+        .#{$property-class + $infix + $property-class-modifier} {
+          @each $property in $properties {
+            @if $is-local-vars {
+              @each $local-var, $variable in $is-local-vars {
+                --#{$prefix}#{$local-var}: #{$variable};
+              }
+            }
+            #{$property}: $value if($is-important, !important, null);
+          }
+        }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            @each $property in $properties {
+              @if $is-local-vars {
+                @each $local-var, $variable in $is-local-vars {
+                  --#{$prefix}#{$local-var}: #{$variable};
+                }
+              }
+              #{$property}: $value if($is-important, !important, null);
+            }
+          }
+        }
+      }
+
+      @if $is-rtl == false {
+        /* rtl:end:remove */
+      }
+    }
   }
 }

site/data/breakpoints.yml

@@ -19,17 +19,17 @@
 - breakpoint: lg
   abbr: -lg
   name: Large
-  min-width: 1024px
+  min-width: 992px
   container: 960px
 
 - breakpoint: xl
   abbr: -xl
   name: X-Large
-  min-width: 1280px
-  container: 1200px
+  min-width: 1200px
+  container: 1140px
 
-- breakpoint: 2xl
-  abbr: -2xl
-  name: 2X-Large
-  min-width: 1536px
-  container: 1440px
+- breakpoint: xxl
+  abbr: -xxl
+  name: XX-Large
+  min-width: 1400px
+  container: 1320px

site/data/colors.yml

@@ -1,16 +1,26 @@
 - name: blue
+  hex: '#0d6efd'
 - name: indigo
-- name: violet
+  hex: '#6610f2'
 - name: purple
+  hex: '#6f42c1'
 - name: pink
+  hex: '#d63384'
 - name: red
+  hex: '#dc3545'
 - name: orange
-- name: amber
+  hex: '#fd7e14'
 - name: yellow
-- name: lime
+  hex: '#ffc107'
 - name: green
+  hex: '#198754'
 - name: teal
+  hex: '#20c997'
 - name: cyan
-- name: brown
+  hex: '#0dcaf0'
+- name: white
+  hex: '#fff'
 - name: gray
-- name: pewter
+  hex: '#6c757d'
+- name: gray-dark
+  hex: '#343a40'

site/data/grays.yml

@@ -0,0 +1,18 @@
+- name: 100
+  hex: '#f8f9fa'
+- name: 200
+  hex: '#e9ecef'
+- name: 300
+  hex: '#dee2e6'
+- name: 400
+  hex: '#ced4da'
+- name: 500
+  hex: '#adb5bd'
+- name: 600
+  hex: '#868e96'
+- name: 700
+  hex: '#495057'
+- name: 800
+  hex: '#343a40'
+- name: 900
+  hex: '#212529'

site/data/sidebar.yml

@@ -26,7 +26,6 @@
     - title: Sass
     - title: Options
     - title: Color
-    - title: Theme
     - title: Color modes
     - title: Components
     - title: CSS variables

site/data/theme-colors.yml

@@ -1,8 +1,20 @@
 - name: primary
-- name: accent
-- name: success
-- name: danger
-- name: warning
-- name: info
-- name: emphasis
+  hex: '#0d6efd'
 - name: secondary
+  hex: '#6c757d'
+- name: success
+  hex: '#28a745'
+- name: danger
+  hex: '#dc3545'
+- name: warning
+  hex: '#ffc107'
+  contrast_color: dark
+- name: info
+  hex: '#17a2b8'
+  contrast_color: dark
+- name: light
+  hex: '#f8f9fa'
+  contrast_color: dark
+- name: dark
+  hex: '#343a40'
+  contrast_color: white

site/src/assets/examples/buttons/index.astro

@@ -26,7 +26,7 @@ export const title = 'Buttons'
 
 <div class="b-example-divider"></div>
 
-<div class="col-lg-6 col-2xl-4 my-5 mx-auto">
+<div class="col-lg-6 col-xxl-4 my-5 mx-auto">
   <div class="d-grid gap-2">
     <button class="btn btn-outline-secondary" type="button">Secondary action</button>
     <button class="btn btn-primary" type="button">Primary action</button>

site/src/assets/examples/grid/index.astro

@@ -45,9 +45,9 @@ export const body_class = 'py-4'
     </div>
 
     <div class="row mb-3 text-center">
-      <div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
-      <div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
-      <div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
+      <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+      <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+      <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
     </div>
 
     <h2 class="mt-4">Three equal columns</h2>
@@ -107,8 +107,8 @@ export const body_class = 'py-4'
     <hr class="my-4">
 
     <h2 class="mt-4">Mixed: mobile and desktop</h2>
-    <p>The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and 2xl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
-    <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and 2xl, you only need to specify md.</p>
+    <p>The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
+    <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.</p>
     <div class="row mb-3 text-center">
       <div class="col-md-8 themed-grid-col">.col-md-8</div>
       <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
@@ -172,7 +172,7 @@ export const body_class = 'py-4'
     <hr class="my-4">
 
     <h2 class="mt-4">Containers</h2>
-    <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>2xl</code> breakpoint.</p>
+    <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
   </div>
 
   <div class="container themed-container text-center">.container</div>
@@ -180,6 +180,6 @@ export const body_class = 'py-4'
   <div class="container-md themed-container text-center">.container-md</div>
   <div class="container-lg themed-container text-center">.container-lg</div>
   <div class="container-xl themed-container text-center">.container-xl</div>
-  <div class="container-2xl themed-container text-center">.container-2xl</div>
+  <div class="container-xxl themed-container text-center">.container-xxl</div>
   <div class="container-fluid themed-container text-center">.container-fluid</div>
 </main>

site/src/assets/examples/heroes/index.astro

@@ -40,7 +40,7 @@ export const extra_css = ['heroes.css']
 
   <div class="b-example-divider"></div>
 
-  <div class="container col-2xl-8 px-4 py-5">
+  <div class="container col-xxl-8 px-4 py-5">
     <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
       <div class="col-10 col-sm-8 col-lg-6">
         <img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
@@ -58,7 +58,7 @@ export const extra_css = ['heroes.css']
 
   <div class="b-example-divider"></div>
 
-  <div class="container col-xl-10 col-2xl-8 px-4 py-5">
+  <div class="container col-xl-10 col-xxl-8 px-4 py-5">
     <div class="row align-items-center g-lg-5 py-5">
       <div class="col-lg-7 text-center text-lg-start">
         <h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">Vertically centered hero sign-up form</h1>

site/src/assets/examples/navbars/index.astro

@@ -199,14 +199,14 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand-2xl navbar-dark bg-dark" aria-label="Seventh navbar example">
+  <nav class="navbar navbar-expand-xxl navbar-dark bg-dark" aria-label="Seventh navbar example">
     <div class="container-fluid">
-      <a class="navbar-brand" href="#">Expand at 2xl</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample2xl" aria-controls="navbarsExample2xl" aria-expanded="false" aria-label="Toggle navigation">
+      <a class="navbar-brand" href="#">Expand at xxl</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarsExample2xl">
+      <div class="collapse navbar-collapse" id="navbarsExampleXxl">
         <ul class="navbar-nav me-auto mb-2 mb-xl-0">
           <li class="nav-item">
             <a class="nav-link active" aria-current="page" href="#">Home</a>

site/src/components/header/Navigation.astro

@@ -22,7 +22,7 @@ const { addedIn, layout, title } = Astro.props
 ---
 
 <header class="navbar navbar-expand-lg bd-navbar sticky-top">
-  <nav class="container-2xl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
+  <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
     {
       layout === 'docs' && (
         <div class="bd-navbar-toggle">

site/src/components/home/MastHead.astro

@@ -7,7 +7,7 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
 ---
 
 <div class="bd-masthead mb-3" id="content">
-  <div class="container-2xl bd-gutter">
+  <div class="container-xxl bd-gutter">
     <div class="col-md-8 mx-auto text-center">
       <a
         class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none"

site/src/components/shortcodes/Example.astro

@@ -13,11 +13,6 @@ interface Props {
    * If an array is passed, elements will be joined with a new line.
    */
   code: string | string[]
-  /**
-   * Custom markup to display in the source code section, different from the preview code.
-   * If provided, this will be used instead of the `code` prop for the source display.
-   */
-  customMarkup?: string | string[]
   /**
    * The CSS class(es) to be added to the preview wrapping `div` element.
    */
@@ -46,7 +41,6 @@ interface Props {
 const {
   addStackblitzJs = false,
   code,
-  customMarkup,
   class: className,
   id,
   lang = 'html',
@@ -57,12 +51,7 @@ const {
 let markup = Array.isArray(code) ? code.join('\n') : code
 markup = replacePlaceholdersInHtml(markup)
 
-// Use customMarkup for source code display if provided, otherwise use the processed markup
-let sourceMarkup = customMarkup
-  ? (Array.isArray(customMarkup) ? customMarkup.join('\n') : customMarkup)
-  : markup
-
-const simplifiedMarkup = sourceMarkup
+const simplifiedMarkup = markup
   .replace(
     /<svg.*class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>/g,
     (match, classes) => `<img src="..."${classes ? ` class="${classes}"` : ''} alt="...">`

site/src/components/shortcodes/JsDocs.astro

@@ -55,10 +55,8 @@ try {
 <Code containerClass="bd-example-snippet bd-code-snippet bd-file-ref" code={content} lang="js">
   <div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
     <a
-      class="text-decoration-none color-body"
+      class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
       href={`${getConfig().repo}/blob/v${getConfig().current_version}/${file}`.replaceAll('\\', '/')}
-      target="_blank"
-      rel="noopener noreferrer"
     >
       {file}
     </a>

site/src/components/shortcodes/ScssDocs.astro

@@ -57,10 +57,8 @@ try {
 <Code containerClass="bd-example-snippet bd-file-ref" code={content} lang="scss">
   <div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
     <a
-      class="text-decoration-none color-body"
+      class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
       href={`${getConfig().repo}/blob/v${getConfig().current_version}/${file}`.replaceAll('\\', '/')}
-      target="_blank"
-      rel="noopener noreferrer"
     >
       {file}
     </a>

site/src/components/shortcodes/Swatch.astro

@@ -1,203 +0,0 @@
----
-export interface Props {
-  bg: string
-  fg?: string
-  size?: 'inline' | 'medium' | 'large'
-  contrast?: string
-  contrastDark?: string
-  cssVar?: string
-  showVar?: boolean
-}
-
-const { bg, fg, size = 'inline', contrast, contrastDark, cssVar, showVar = true } = Astro.props
-
-// Styles for different sizes
-const baseStyles = {
-  display: 'inline-flex',
-  color: `var(--bs-${fg})`,
-  backgroundColor: `var(--bs-${bg})`,
-  boxShadow: 'inset 0 0 0 1px light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .1))'
-}
-
-const sizeStyles = {
-  inline: {
-    verticalAlign: 'text-bottom',
-    width: '1rem',
-    height: '1rem',
-    borderRadius: 'var(--bs-border-radius-sm)'
-  },
-  medium: {
-    width: '100%',
-    paddingBlock: '1.5rem',
-    borderRadius: 'var(--bs-border-radius)'
-  },
-  large: {
-    width: '100%',
-    paddingBlock: '.5rem',
-    paddingInline: '1rem',
-    borderRadius: 'var(--bs-border-radius-lg)'
-  }
-}
-
-// Parse contrast ratios and determine if they're below 4.5
-const contrastRatio = contrast ? parseFloat(contrast) : null
-const contrastDarkRatio = contrastDark ? parseFloat(contrastDark) : null
-const isLowContrast = contrastRatio !== null && contrastRatio < 4.5
-const isLowContrastDark = contrastDarkRatio !== null && contrastDarkRatio < 4.5
-
-const contrastStyles = {
-  marginLeft: 'auto',
-  opacity: .5,
-  fontSize: '.75rem',
-  fontFamily: 'var(--bs-font-monospace)',
-  color: isLowContrast ? 'red' : 'inherit'
-}
-
-const combinedStyles = { ...baseStyles, ...sizeStyles[size] }
-
-// Determine which CSS variable to display
-const displayCssVar = cssVar || bg
----
-
-<style>
-  /* Show light contrast by default and in light mode */
-  .contrast-light {
-    display: inline;
-  }
-
-  .contrast-dark {
-    display: none;
-  }
-
-  /* Show dark contrast in dark mode */
-  :global([data-bs-theme="dark"]) .contrast-light {
-    display: none;
-  }
-
-  :global([data-bs-theme="dark"]) .contrast-dark {
-    display: inline;
-  }
-
-  /* CSS variable display styles */
-  .css-var {
-    margin-left: 0.25rem;
-    font-family: var(--bs-font-monospace);
-    font-size: 0.875rem;
-    color: var(--bs-color-3);
-  }
-
-  .css-var-light {
-    display: inline;
-  }
-
-  .css-var-dark {
-    display: none;
-  }
-
-  /* Show dark value in dark mode */
-  :global([data-bs-theme="dark"]) .css-var-light {
-    display: none;
-  }
-
-  :global([data-bs-theme="dark"]) .css-var-dark {
-    display: inline;
-  }
-</style>
-
-{size === 'inline' ? (
-  <>
-    <span style={combinedStyles}>
-      <slot />
-      {contrast && <span style={contrastStyles} class="contrast-light">{contrast}</span>}
-      {contrastDark && <span style={{...contrastStyles, color: isLowContrastDark ? 'red' : 'inherit'}} class="contrast-dark">{contrastDark}</span>}
-    </span>
-    {showVar && displayCssVar && (
-      <span class="css-var" data-css-var={`--bs-${displayCssVar}`}>
-        <span class="css-var-light">Loading...</span>
-        <span class="css-var-dark">Loading...</span>
-      </span>
-    )}
-  </>
-) : size === 'large' ? (
-  <span style={combinedStyles}>
-    <slot />
-    {contrast && <span style={contrastStyles} class="contrast-light">{contrast}</span>}
-    {contrastDark && <span style={{...contrastStyles, color: isLowContrastDark ? 'red' : 'inherit'}} class="contrast-dark">{contrastDark}</span>}
-  </span>
-) : (
-  <div style={combinedStyles}>
-    <slot />
-    {contrast && <span style={contrastStyles} class="contrast-light">{contrast}</span>}
-    {contrastDark && <span style={{...contrastStyles, color: isLowContrastDark ? 'red' : 'inherit'}} class="contrast-dark">{contrastDark}</span>}
-  </div>
-)}
-
-<script>
-  // Handle dynamic CSS variable display with light-dark() function support
-  document.addEventListener('DOMContentLoaded', () => {
-    const cssVarElements = document.querySelectorAll('.css-var[data-css-var]')
-
-    cssVarElements.forEach(element => {
-      const cssVarName = element.getAttribute('data-css-var')
-
-      if (cssVarName) {
-        // Try to get the raw CSS variable definition from stylesheets
-        let rawValue = null
-        for (const stylesheet of document.styleSheets) {
-          try {
-            for (const rule of stylesheet.cssRules) {
-              if (rule.type === CSSRule.STYLE_RULE) {
-                const styleRule = rule as CSSStyleRule
-                for (const prop of styleRule.style) {
-                  if (prop === cssVarName) {
-                    rawValue = styleRule.style.getPropertyValue(cssVarName)
-                    break
-                  }
-                }
-              }
-            }
-          } catch (e) {
-            // Skip stylesheets we can't access (CORS)
-            continue
-          }
-        }
-
-        // If we couldn't get the raw value, fall back to computed value
-        if (!rawValue) {
-          rawValue = getComputedStyle(document.documentElement).getPropertyValue(cssVarName)
-        }
-
-        if (rawValue) {
-          // Check if the value contains light-dark function
-          if (rawValue.includes('light-dark(')) {
-            // Parse the light-dark function to extract light and dark values
-            const lightDarkMatch = rawValue.match(/light-dark\(([^,]+),\s*(.+)\)$/)
-            if (lightDarkMatch) {
-              const lightValue = lightDarkMatch[1].trim()
-              const darkValue = lightDarkMatch[2].trim()
-
-              // Update the spans with the parsed values
-              const lightSpan = element.querySelector('.css-var-light')
-              const darkSpan = element.querySelector('.css-var-dark')
-
-              if (lightSpan) lightSpan.textContent = lightValue
-              if (darkSpan) darkSpan.textContent = darkValue
-            } else {
-              // Fallback: show the full value
-              element.innerHTML = `<span class="css-var-light">${rawValue}</span>`
-            }
-          } else if (rawValue.includes('color-mix(')) {
-            // Handle color-mix functions - show the full function
-            element.innerHTML = `<span class="css-var-light">${rawValue}</span>`
-          } else {
-            // Single value - show it in both light and dark spans
-            element.innerHTML = `<span class="css-var-light">${rawValue}</span>`
-          }
-        } else {
-          // Fallback: show the variable name
-          element.innerHTML = `<span class="css-var-light">${cssVarName}</span>`
-        }
-      }
-    })
-  })
-</script>

site/src/components/shortcodes/Table.astro

@@ -14,26 +14,19 @@ interface Props {
    * @default true
    */
   simplified?: boolean
-  /**
-   * Optional theme for the table.
-   */
-  theme?: 'light' | 'dark'
 }
 
-const { class: className, simplified = true, theme } = Astro.props
+const { class: className, simplified = true } = Astro.props
 
-// Build the attributes
-const classAttr = className ? ` class="${className}"` : ''
-const themeAttr = theme ? ` data-bs-theme="${theme}"` : ''
-const allAttrs = `${classAttr}${themeAttr}`
-
-const tableCode = `<table${allAttrs}>
+const tableCode = `<table${className ? ` class="${className}"` : ''}>
 ${simplified ? '  ...' : await tableContent.compiledContent()}
 </table>`
 
-const exampleCode = `<table${allAttrs}>
+const exampleCode = `<table${className ? ` class="${className}"` : ''}>
 ${await tableContent.compiledContent()}
 </table>`
 ---
 
-<Example code={exampleCode} customMarkup={tableCode} />
+<Example showMarkup={false} code={exampleCode} />
+
+<Code code={tableCode} lang="html" />

site/src/content/docs/components/buttons.mdx

@@ -22,7 +22,7 @@ When using `.btn` without a modifier, be sure to add some explicit `:focus-visib
 
 Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.
 
-<Example class="bd-example-buttons" code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn btn-${themeColor.name}-solid justify-self-start">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-outline justify-self-start">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-subtle justify-self-start">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-text justify-self-start">${themeColor.title}</button>`), `
+<Example code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn btn-${themeColor.name}">${themeColor.title}</button>`), `
 <button type="button" class="btn btn-link">Link</button>`]} />
 
 <Callout name="warning-color-assistive-technologies" />
@@ -276,23 +276,15 @@ Here’s an example of building a custom `.btn-*` modifier class as we do for th
 
 ### Sass variables
 
-<ScssDocs name="btn-variables" file="scss/buttons/_button-variables.scss" />
-
-### Sass map
-
-Button variants—including all their states—are defined in the `$button-variants` Sass map. This map identifies which theme color tokens to use for each variant's state.
-
-For example, a solid button uses the same `bg` token for its background and border colors because we want it to have a seamless look.
-
-<ScssDocs name="btn-variants" file="scss/buttons/_button.scss" />
+<ScssDocs name="btn-variables" file="scss/_variables.scss" />
 
 ### Sass mixins
 
 There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin.
 
-<ScssDocs name="btn-variant-mixin" file="scss/buttons/_button.scss" />
+{/*<ScssDocs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" />
 
-{/*<ScssDocs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" />
+<ScssDocs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" />
 
 <ScssDocs name="btn-size-mixin" file="scss/mixins/_buttons.scss" />*/}
 
@@ -300,4 +292,4 @@ There are three mixins for buttons: button and button outline variant mixins (bo
 
 Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`.
 
-{/* <ScssDocs name="btn-variant-loops" file="scss/buttons/_button.scss" /> */}
+<ScssDocs name="btn-variant-loops" file="scss/buttons/_button.scss" />

site/src/content/docs/components/card.mdx

@@ -397,7 +397,7 @@ Use [border utilities]([[docsref:/utilities/border]]) to change just the `border
 
 <Example code={getData('theme-colors').map((themeColor) => `<div class="card border-${themeColor.name} mb-3" style="max-width: 18rem;">
     <div class="card-header">Header</div>
-    <div class="card-body text-${themeColor.name}">
+    <div class="card-body${themeColor.contrast_color ? '' : ` text-${themeColor.name}`}">
       <h5 class="card-title">${themeColor.title} card title</h5>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
     </div>

site/src/content/docs/components/dropdowns.mdx

@@ -645,7 +645,7 @@ Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu.
 
 If you want to use responsive alignment, disable dynamic positioning by adding the `data-bs-display="static"` attribute and use the responsive variation classes.
 
-To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-2xl}-end`.
+To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end`.
 
 <Example code={`<div class="btn-group">
     <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
@@ -658,7 +658,7 @@ To align **right** the dropdown menu with the given breakpoint or larger, add `.
     </ul>
   </div>`} />
 
-To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-2xl}-start`.
+To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start`.
 
 <Example code={`<div class="btn-group">
     <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">

site/src/content/docs/components/list-group.mdx

@@ -112,7 +112,7 @@ These work great with custom content as well.
 
 ## Horizontal
 
-Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|2xl}` to make a list group horizontal starting at that breakpoint’s `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
+Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint’s `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
 
 **ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.
 

site/src/content/docs/components/modal.mdx

@@ -533,7 +533,7 @@ Modals have three optional sizes, available via modifier classes to be placed on
 | Small | `.modal-sm` | `300px` |
 | Default | <span class="text-body-secondary">None</span> | `500px` |
 | Large | `.modal-lg` | `800px` |
-| Extra large | `.modal-xl` | `1200px` |
+| Extra large | `.modal-xl` | `1140px` |
 </BsTable>
 
 Our default modal without modifier class constitutes the “medium” size modal.
@@ -600,9 +600,9 @@ Another override is the option to pop up a modal that covers the user viewport,
 | `.modal-fullscreen` | Always |
 | `.modal-fullscreen-sm-down` | `576px` |
 | `.modal-fullscreen-md-down` | `768px` |
-| `.modal-fullscreen-lg-down` | `1024px` |
-| `.modal-fullscreen-xl-down` | `1280px` |
-| `.modal-fullscreen-2xl-down` | `1536px` |
+| `.modal-fullscreen-lg-down` | `992px` |
+| `.modal-fullscreen-xl-down` | `1200px` |
+| `.modal-fullscreen-xxl-down` | `1400px` |
 </BsTable>
 
 <Example showMarkup={false} code={`<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full screen</button>
@@ -610,7 +610,7 @@ Another override is the option to pop up a modal that covers the user viewport,
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenMd">Full screen below md</button>
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenLg">Full screen below lg</button>
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXl">Full screen below xl</button>
-  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen2xl">Full screen below 2xl</button>`} />
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXxl">Full screen below xxl</button>`} />
 
 ```html
 <!-- Full screen modal -->
@@ -704,11 +704,11 @@ Another override is the option to pop up a modal that covers the user viewport,
   </div>
 </div>
 
-<div class="modal fade" id="exampleModalFullscreen2xl" tabindex="-1" aria-labelledby="exampleModalFullscreen2xlLabel" aria-hidden="true">
-  <div class="modal-dialog modal-fullscreen-2xl-down">
+<div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1" aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen-xxl-down">
     <div class="modal-content">
       <div class="modal-header">
-        <h1 class="modal-title fs-4" id="exampleModalFullscreen2xlLabel">Full screen below 2xl</h1>
+        <h1 class="modal-title fs-4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">

site/src/content/docs/components/navbar.mdx

@@ -10,7 +10,7 @@ import { getConfig } from '@libs/config'
 
 Here’s what you need to know before getting started with the navbar:
 
-- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-2xl}` for responsive collapsing and [color scheme](#color-schemes) classes.
+- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes.
 - Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.
 - Use our [spacing]([[docsref:/utilities/spacing]]) and [flex]([[docsref:/utilities/flex]]) utility classes for controlling spacing and alignment within navbars.
 - Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
@@ -499,7 +499,7 @@ Here’s an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-h
 
 ## Responsive behaviors
 
-Navbars can use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-2xl}` classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
+Navbars can use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
 
 For navbars that never collapse, add the `.navbar-expand` class on the navbar. For navbars that always collapse, don’t add any `.navbar-expand` class.
 

site/src/content/docs/components/offcanvas.mdx

@@ -146,7 +146,7 @@ Responsive offcanvas classes hide content outside the viewport from a specified
 - `.offcanvas-md`
 - `.offcanvas-lg`
 - `.offcanvas-xl`
-- `.offcanvas-2xl`
+- `.offcanvas-xxl`
 
 To make a responsive offcanvas, replace the `.offcanvas` base class with a responsive variant and ensure your close button has an explicit `data-bs-target`.
 

site/src/content/docs/content/tables.mdx

@@ -16,7 +16,11 @@ Using the most basic table markup, here’s how `.table`-based tables look in Bo
 
 ## Variants
 
-Use theme-specific color classes to style tables, table rows, or individual cells. These adapt to color modes as well.
+Use contextual classes to color tables, table rows or individual cells.
+
+<Callout>
+**Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won’t see color mode adaptive styling until v6.
+</Callout>
 
 <div class="bd-example">
   <table class="table">
@@ -77,9 +81,9 @@ Use `.table-striped-columns` to add zebra-striping to any table column.
 
 These classes can also be added to table variants:
 
-<Table class="table table-striped" theme="dark" />
+<Table class="table table-dark table-striped" />
 
-<Table class="table table-striped-columns" theme="dark" />
+<Table class="table table-dark table-striped-columns" />
 
 <Table class="table table-success table-striped" />
 
@@ -101,7 +105,7 @@ These hoverable rows can also be combined with the striped rows variant:
 
 Highlight a table row or cell by adding a `.table-active` class.
 
-<Example code={`
+<Example showMarkup={false} code={`
 <table class="table">
   <thead>
     <tr>
@@ -132,29 +136,31 @@ Highlight a table row or cell by adding a `.table-active` class.
     </tr>
   </tbody>
 </table>
-`} customMarkup={`
-<table class="table">
-  <thead>
-    ...
-  </thead>
-  <tbody>
-    <tr class="table-active">
-      ...
-    </tr>
-    <tr>
-      ...
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td>John</td>
-      <td>Doe</td>
-      <td class="table-active">@social</td>
-    </tr>
-  </tbody>
-</table>
 `} />
 
-<Example code={`
+```html
+<table class="table">
+  <thead>
+    ...
+  </thead>
+  <tbody>
+    <tr class="table-active">
+      ...
+    </tr>
+    <tr>
+      ...
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td>John</td>
+      <td>Doe</td>
+      <td class="table-active">@social</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+<Example showMarkup={false} code={`
 <table class="table table-dark">
   <thead>
     <tr>
@@ -185,7 +191,9 @@ Highlight a table row or cell by adding a `.table-active` class.
     </tr>
   </tbody>
 </table>
-`} customMarkup={`
+`} />
+
+```html
 <table class="table table-dark">
   <thead>
     ...
@@ -205,25 +213,21 @@ Highlight a table row or cell by adding a `.table-active` class.
     </tr>
   </tbody>
 </table>
-`} />
+```
 
 ## How do the variants and accented tables work?
 
 For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
 
 - We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don’t get into trouble if semi-transparent colors are used as table backgrounds.
-
 - Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));` to layer on top of any specified `background-color`. It uses custom cascade to override the `box-shadow`, regardless the CSS specificity. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is set to `transparent` by default, we don’t have a default box shadow.
-
 - When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, either `--bs-table-bg-type` or `--bs-table-bg-state` (by default set to `initial`) are set to a semitransparent color (`--bs-table-striped-bg`, `--bs-table-active-bg` or `--bs-table-hover-bg`) to colorize the background and override default `--bs-table-accent-bg`.
-
 - For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
-
 - Text and border colors are generated the same way, and their colors are inherited by default.
 
 Behind the scenes it looks like this:
 
-<ScssDocs name="table-variants-loop" file="scss/content/_tables.scss" />
+<ScssDocs name="table-variant" file="scss/content/_tables.scss" />
 
 ## Table borders
 
@@ -292,7 +296,7 @@ Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<
 
 Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]([[docsref:/utilities/vertical-align]]) classes to re-align where needed.
 
-<Example code={`
+<Example showMarkup={false} code={`
 <div class="table-responsive">
   <table class="table align-middle">
     <thead>
@@ -325,7 +329,9 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
     </tbody>
   </table>
 </div>
-`} customMarkup={`
+`} />
+
+```html
 <div class="table-responsive">
   <table class="table align-middle">
     <thead>
@@ -349,13 +355,13 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
     </tbody>
   </table>
 </div>
-`} />
+```
 
 ## Nesting
 
 Border styles, active styles, and table variants are not inherited by nested tables.
 
-<Example code={`
+<Example showMarkup={false} code={`
 <table class="table table-striped table-bordered">
   <thead>
     <tr>
@@ -410,7 +416,9 @@ Border styles, active styles, and table variants are not inherited by nested tab
     </tr>
   </tbody>
 </table>
-`} customMarkup={`
+`} />
+
+```html
 <table class="table table-striped table-bordered">
   <thead>
     ...
@@ -427,7 +435,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
     ...
   </tbody>
 </table>
-`} />
+```
 
 ## How nesting works
 
@@ -435,7 +443,101 @@ To prevent *any* styles from leaking to nested tables, we use the child combinat
 
 Note that if you add `<tr>`s as direct children of a table, those `<tr>` will be wrapped in a `<tbody>` by default, thus making our selectors work as intended.
 
-## Footer
+## Anatomy
+
+### Table head
+
+Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make `<thead>`s appear light or dark gray.
+
+<Example showMarkup={false} code={`
+<table class="table">
+  <thead class="table-light">
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">First</th>
+      <th scope="col">Last</th>
+      <th scope="col">Handle</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td>John</td>
+      <td>Doe</td>
+      <td>@social</td>
+    </tr>
+  </tbody>
+</table>
+`} />
+
+```html
+<table class="table">
+  <thead class="table-light">
+    ...
+  </thead>
+  <tbody>
+    ...
+  </tbody>
+</table>
+```
+
+<Example showMarkup={false} code={`
+<table class="table">
+  <thead class="table-dark">
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">First</th>
+      <th scope="col">Last</th>
+      <th scope="col">Handle</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td>John</td>
+      <td>Doe</td>
+      <td>@social</td>
+    </tr>
+  </tbody>
+</table>
+`} />
+
+```html
+<table class="table">
+  <thead class="table-dark">
+    ...
+  </thead>
+  <tbody>
+    ...
+  </tbody>
+</table>
+```
+
+### Table foot
 
 <Example showMarkup={false} code={`
 <table class="table">
@@ -492,7 +594,7 @@ Note that if you add `<tr>`s as direct children of a table, those `<tr>` will be
 </table>
 ```
 
-## Caption
+### Captions
 
 A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
 
@@ -551,7 +653,7 @@ You can also put the `<caption>` on the top of the table with `.caption-top`.
 
 ## Responsive tables
 
-Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-2xl}`.
+Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`.
 
 <Callout type="warning">
 ##### Vertical clipping/truncation
@@ -563,7 +665,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
 
 Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
 
-<Example code={`
+<Example showMarkup={false} code={`
 <div class="table-responsive">
   <table class="table">
     <thead>
@@ -620,17 +722,19 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
     </tbody>
   </table>
 </div>
-`} customMarkup={`
+`} />
+
+```html
 <div class="table-responsive">
   <table class="table">
     ...
   </table>
 </div>
-`} />
+```
 
 ### Breakpoint specific
 
-Use `.table-responsive{-sm|-md|-lg|-xl|-2xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
+Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
 
 **These tables may appear broken until their responsive styles apply at specific viewport widths.**
 

site/src/content/docs/customize/color.mdx

@@ -1,60 +1,360 @@
 ---
 title: Color
-description: Bootstrap is supported by an extensive color system that powers our revamped theme, components, and color modes. This enables more comprehensive customization and extension for any project.
+description: Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
 toc: true
 ---
 
 import { getData } from '@libs/data'
 import { getSequence } from '@libs/utils'
 
-export const additionalColors = [
-  'white',
-  'black',
-]
-
 ## Colors
 
-There are 13 shades of 16 colors in Bootstrap's new color system, meaning we have 208 colors to work with when using Bootstrap.
+Bootstrap’s color palette has continued to expand and become more nuanced in v5.3.0. We’ve added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
 
-All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
+Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
 
-Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.
-
-<div class="grid gap-0" style={{gridTemplateColumns: 'repeat(13, 1fr)', gap: '4px', minWidth: '0'}}>
-  {getData('colors').map((color) => {
-     return (
-       <div class="d-contents grid-full">
-         <h5 class="d-block text-capitalize grid-full">{color.name.replace('-', ' ')}</h5>
-
-         {["025", "050", ...getSequence(100, 900, 100), 950, 975].map((value) => {
-           return (
-             <div class="mb-3 font-monospace small">
-               <Swatch bg={`${color.name}-${value}`} size="medium" />
-               <div class="text-center color-3">{value}</div>
-             </div>
-           )
-         })}
-       </div>
-     )
-   })}
-
-   <div class="d-contents grid-full">
-    <h5 class="d-block text-capitalize grid-full">Additional</h5>
-    {additionalColors.map((color) => {
-      return (
-        <div class="mb-3 font-monospace small">
-          <Swatch bg={`${color}`} size="medium" />
-          <div class="text-center color-3">{color}</div>
-        </div>
-      )
-    })}
-   </div>
-</div>
-
-<Callout>
-  @mdo-do: Move this content to Theme page most likely. Replace with how to modify color variables.
+<Callout type="warning">
+**Heads up!** There’s some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
 </Callout>
 
+<div class="table-responsive">
+  <table class="table table-swatches">
+    <thead>
+      <tr>
+        <th style="width: 340px;">Description</th>
+        <th style="width: 200px;" class="ps-0">Swatch</th>
+        <th>Variables</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="2">
+          **Body —** Default foreground (color) and background, including components.
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2" style="background-color: var(--bs-body-color);">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-body-color`<br/>`--bs-body-color-rgb`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-body-bg`<br/>`--bs-body-bg-rgb`
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="2">
+          **Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-secondary-color`<br/>`--bs-secondary-color-rgb`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-secondary-bg`<br/>`--bs-secondary-bg-rgb`
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="2">
+          **Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-tertiary-color`<br/>`--bs-tertiary-color-rgb`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-tertiary-bg`<br/>`--bs-tertiary-bg-rgb`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          **Emphasis —** For higher contrast text. Not applicable for backgrounds.
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-emphasis-color`<br/>`--bs-emphasis-color-rgb`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          **Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-border-color`<br/>`--bs-border-color-rgb`
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="4">
+          **Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2 bg-primary">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-primary`<br/>`--bs-primary-rgb`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-primary-bg-subtle`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-primary-border-subtle`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
+        </td>
+        <td>
+          `--bs-primary-text-emphasis`
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="4">
+          **Success —** Theme color used for positive or successful actions and information.
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2 bg-success">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-success`<br/>`--bs-success-rgb`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-success-bg-subtle`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-success-border-subtle`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div>
+        </td>
+        <td>
+          `--bs-success-text-emphasis`
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="4">
+          **Danger —** Theme color used for errors and dangerous actions.
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2 bg-danger">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-danger`<br/>`--bs-danger-rgb`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-danger-bg-subtle`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-danger-border-subtle`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div>
+        </td>
+        <td>
+          `--bs-danger-text-emphasis`
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="4">
+          **Warning —** Theme color used for non-destructive warning messages.
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2 bg-warning">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-warning`<br/>`--bs-warning-rgb`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-warning-bg-subtle`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-warning-border-subtle`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div>
+        </td>
+        <td>
+          `--bs-warning-text-emphasis`
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="4">
+          **Info —** Theme color used for neutral and informative content.
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2 bg-info">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-info`<br/>`--bs-info-rgb`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-info-bg-subtle`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-info-border-subtle`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div>
+        </td>
+        <td>
+          `--bs-info-text-emphasis`
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="4">
+          **Light —** Additional theme option for less contrasting colors.
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2 bg-light">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-light`<br/>`--bs-light-rgb`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-light-bg-subtle`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-light-border-subtle`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div>
+        </td>
+        <td>
+          `--bs-light-text-emphasis`
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="4">
+          **Dark —** Additional theme option for higher contrasting colors.
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2 bg-dark">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-dark`<br/>`--bs-dark-rgb`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-dark-bg-subtle`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid">&nbsp;</div>
+        </td>
+        <td>
+          `--bs-dark-border-subtle`
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div>
+        </td>
+        <td>
+          `--bs-dark-text-emphasis`
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
 ### Using the new colors
 
 These new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color’s associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.
@@ -83,6 +383,53 @@ All these colors are available as a Sass map, `$theme-colors`.
 
 Check out [our Sass maps and loops docs]([[docsref:/customize/sass#maps-and-loops]]) for how to modify these colors.
 
+### All colors
+
+All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
+
+Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.
+
+<div class="row font-monospace">
+  {getData('colors').map((color) => {
+    if ((color.name !== "white") && (color.name !== "gray") && (color.name !== "gray-dark")) {
+      return (
+        <div class="col-md-4 mb-3">
+          <div class={`p-3 mb-2 position-relative swatch-${color.name}`}>
+            <strong class="d-block">${color.name}</strong>
+            {color.hex}
+          </div>
+
+          {getSequence(100, 900, 100).map((value) => {
+            return (
+              <div class={`p-3 bd-${color.name}-${value}`}>${color.name}-{value}</div>
+            )
+          })}
+        </div>
+      )
+    }
+  })}
+
+  <div class="col-md-4 mb-3">
+    <div class="p-3 mb-2 position-relative swatch-gray-500"><strong class="d-block">$gray-500</strong>#adb5bd</div>
+    {getData('grays').map((gray) => {
+      return (
+        <div class={`p-3 bd-gray-${gray.name}`}>$gray-{gray.name}</div>
+      )
+    })}
+  </div>
+
+  <div class="col-md-4 mb-3">
+    <div class="p-3 mb-2 bd-black text-white">
+      <strong class="d-block">$black</strong>
+      #000
+    </div>
+    <div class="p-3 mb-2 bd-white border">
+      <strong class="d-block">$white</strong>
+      #fff
+    </div>
+  </div>
+</div>
+
 ### Notes on Sass
 
 Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass’s `mix()` color function.
@@ -97,6 +444,7 @@ Bootstrap’s source Sass files include three maps to help you quickly and easil
 
 - `$colors` lists all our available base (`500`) colors
 - `$theme-colors` lists all semantically named theme colors (shown below)
+- `$grays` lists all tints and shades of gray
 
 Within `scss/_variables.scss`, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the `$colors` Sass map:
 

site/src/content/docs/customize/overview.mdx

@@ -1,6 +1,6 @@
 ---
 title: Customize
-description: Learn how Bootstrap's colors power our design system theme. Customize and extend Bootstrap with Sass, a boatload of global options, and plenty of global and component-specific CSS variables.
+description: Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.
 toc: false
 aliases: "/docs/[[config:docs_version]]/customize/"
 sections:
@@ -9,11 +9,9 @@ sections:
   - title: Options
     description: Customize Bootstrap with built-in variables to easily toggle global CSS preferences.
   - title: Color
-    description: Bootstrap includes 11 shades of 14 colors in our color system that can be used to power our theme.
-  - title: Theme
-    description: Semantic colors, typography, settings, and more that can be customized to fit your brand.
+    description: Learn about and customize the color systems that support the entire toolkit.
   - title: Color modes
-    description: Build in light mode, dark mode, or both.
+    description: Explore our default light mode and the new dark mode, or create custom color modes yourself.
   - title: Components
     description: Learn how we build nearly all our components responsively and with base and modifier classes.
   - title: CSS variables
@@ -37,18 +35,6 @@ For those who want to use the distribution files, review the [getting started pa
 
 As you familiarize yourself with Bootstrap, continue exploring this section for more details on how to utilize our global options, making use of and changing our color system, how we build our components, how to use our growing list of CSS custom properties, and how to optimize your code when building with Bootstrap.
 
-## Sass vs CSS
-
-When Bootstrap 5 first introduced CSS variables, the Sass vs CSS variables setup was a little confusing and somewhat limited. As such, the relationship between Sass and CSS variables was very unclear. In Bootstrap 6, we've clarified that—here's how the two interact.
-
-- At a high level, Sass is a way to manage [global configuration options]([[docsref:/customize/options]]) and generate CSS for our utilities, components, typography, custom properties (aka CSS variables) and more.
-- We consider CSS variables to be the **first-class customization layer** for our users.
-- Sass variables are available for nearly every component—like the new `$check-*` variables for checkboxes. These Sass variables are then consumed by CSS variables on the relevant selector (e.g., `.check` with `--bs-check-bg: #{$check-bg}`) and applied through various properties.
-- CSS variables get their values from Sass variables, or CSS variables, depending on the context.
-- Sass helps us generate CSS variables, too. Think theme and config values, but across components, Sass is consuming CSS variables. This gives you two, clearer avenues for customization.
-
-With that in mind, you can customize Bootstrap 6 via CSS or Sass, both of which are easier than ever thanks to a revamped color system and theme configuration.
-
 ## CSPs and embedded SVGs
 
 Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. **For organizations with more strict <abbr title="Content Security Policy">CSP</abbr> configurations**, we’ve documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options.

site/src/content/docs/customize/theme.mdx

@@ -1,209 +0,0 @@
----
-title: Theme
-description: The Bootstrap theme is a set of semantically named colors that are used to style our components, utilities, and more. The theme is configurable, responds to color modes, and can be consumed via Sass or CSS.
-toc: true
----
-
-import { getData } from '@libs/data'
-
-export const themeTokens = [
-  'base',
-  'text',
-  'bg',
-  'bg-subtle',
-  'bg-muted',
-  'border',
-  'focus-ring',
-  'contrast'
-]
-
-export const themeBgs = [
-  'null',
-  '1',
-  '2',
-  '3',
-  'white',
-  'black',
-  'transparent',
-  'inherit',
-]
-
-export const themeFgs = [
-  'null',
-  '1',
-  '2',
-  '3',
-  'white',
-  'black',
-  'transparent',
-  'inherit',
-]
-
-## How it works
-
-Theme colors are defined in the `$new-theme-colors` Sass map. This map is used to generate our theme color values. You'll find these values in the `_theme.scss` file. These are where we define our design tokens for Bootstrap, across both light and dark color modes.
-
-Theme colors include the following semantic colors:
-
-<BsTable>
-| Theme color | Default value | Description |
-| --- | --- | --- |
-| `primary` | <Swatch size="inline" bg="blue-500" /> `var(--bs-blue-500)`| Main brand color for primary actions |
-| `accent` | <Swatch size="inline" bg="indigo-500" /> `var(--bs-indigo-500)` | Secondary brand color (new in v6) |
-| `success` | <Swatch size="inline" bg="green-500" /> `var(--bs-green-500)` | Positive actions and successful states |
-| `danger` | <Swatch size="inline" bg="red-500" /> `var(--bs-red-500)` | Destructive actions and error states |
-| `warning` | <Swatch size="inline" bg="yellow-500" /> `var(--bs-yellow-500)` | Cautionary messages and warning states |
-| `info` | <Swatch size="inline" bg="cyan-500" /> `var(--bs-cyan-500)` | Informational messages and neutral states |
-| `emphasis` | <Swatch size="inline" bg="gray-900" /> `var(--bs-gray-900)` | High contrast text on a dark background |
-| `secondary` | <Swatch size="inline" bg="gray-300" /> `var(--bs-gray-300)` | Less prominent secondary actions |
-</BsTable>
-
-And within each semantic theme color, you'll find the following keys, most of which are color-mode adaptive:
-
-<BsTable>
-| Theme token | Description |
-| --- | --- |
-| `base` | The default color value for the semantic color |
-| `text` | Accessible text color (against body, plus `subtle` and `muted` color tokens) |
-| `bg` | For solid colored backgrounds with high contrast |
-| `bg-subtle` | Lowest contrast backgrounds, usually paired with `text` key for text color |
-| `bg-muted` | Lower contrast backgrounds, often used for disabled states |
-| `border` | Borders and dividers |
-| `focus-ring` | For visible focus indicators and outline styles |
-| `contrast` | Text color that needs to be readable on the `base` and `bg` colors |
-</BsTable>
-
-## Theme colors
-
-Every token is available as a CSS variable, and most are then consumed by our utilities and components. So for the `primary` color, you have the following colors:
-
-<div class="grid gap-0" style={{gridTemplateColumns: 'repeat(8, 1fr)', gap: '8px', minWidth: '0'}}>
-  {getData('theme-colors').map((color) => {
-    return (
-      <div class="d-contents grid-full">
-        <h6 class="d-block text-capitalize grid-full">{color.title}</h6>
-        {themeTokens.map((token) => (
-          <div class="mb-3 font-monospace">
-            <Swatch bg={`${color.name}-${token}`} size="medium" />
-            <div class="text-center small color-3">{token}</div>
-          </div>
-        ))}
-      </div>
-    )
-  })}
-</div>
-
-## `fg`, `bg`, and `border`
-
-While several text, background, and border colors are configured in the base `$new-theme-colors` Sass map, there are several additional options available for more nuanced theming with regards to foreground, background, and border colors.
-
-Tokens for these three themes are defined in their respective `$theme-fgs`, `$theme-bgs`, and `$theme-borders` Sass maps. These maps are used to generate color mode adaptive `color`, `background-color`, and `border-color` values that are then consumed by our utilities and components. You'll find these values in the `_theme.scss` file.
-
-Theme backgrounds include several practical and semantic color options.
-
-<BsTable>
-| Background | Default value | Description |
-| --- | --- | --- |
-| `null` | <Swatch bg="bg" size="inline" cssVar="bg" /> | Default background color |
-| `1` | <Swatch bg="bg-1" size="inline" cssVar="bg-1" /> | Lowest contrast background color |
-| `2` | <Swatch bg="bg-2" size="inline" cssVar="bg-2" /> | Lower contrast background color |
-| `3` | <Swatch bg="bg-3" size="inline" cssVar="bg-3" /> | Medium contrast background color, typically used for disabled states |
-| `white` | <Swatch bg="bg-white" size="inline" cssVar="bg-white" /> | Pure white background color |
-| `black` | <Swatch bg="bg-black" size="inline" cssVar="bg-black" /> | Pure black background color |
-| `transparent` | <Swatch bg="bg-transparent" size="inline" cssVar="bg-transparent" /> | Transparent background color |
-| `inherit` |`inherit` | Inherited background color |
-</BsTable>
-
-Almost all those options are also available for foreground text colors.
-
-<BsTable>
-| Foreground | Default value | Description |
-| --- | --- | --- |
-| `null` | <Swatch bg="fg" size="inline" cssVar="fg" /> | Default foreground color |
-| `1` | <Swatch bg="fg-1" size="inline" cssVar="fg-1" /> | Lowest contrast foreground color |
-| `2` | <Swatch bg="fg-2" size="inline" cssVar="fg-2" /> | Lower contrast foreground color |
-| `3` | <Swatch bg="fg-3" size="inline" cssVar="fg-3" /> | Medium contrast foreground color |
-| `white` | <Swatch bg="fg-white" size="inline" cssVar="fg-white" /> | Pure white foreground color |
-| `black` | <Swatch bg="fg-black" size="inline" cssVar="fg-black" /> | Pure black foreground color |
-| `inherit` | `inherit` | Inherited foreground color |
-</BsTable>
-
-Border colors have similar levels, but different naming.
-
-<BsTable>
-| Border | Default value | Description |
-| --- | --- | --- |
-| `null` | <Swatch bg="border" size="inline" cssVar="border" /> | Default border color |
-| `muted` | <Swatch bg="border-muted" size="inline" cssVar="border-muted" /> | Muted border color |
-| `subtle` | <Swatch bg="border-subtle" size="inline" cssVar="border-subtle" /> | Subtle border color |
-| `emphasized` | <Swatch bg="border-emphasized" size="inline" cssVar="border-emphasized" /> | Emphasized border color |
-</BsTable>
-
-### Suggested pairings
-
-Not all foreground colors are appropriate for all background colors. To maintain color contrast for accessibility, here are some recommended pairings.
-
-<div class="d-flex gap-3 w-100">
-  <div class="d-flex flex-column gap-2 w-100">
-    <Swatch bg="bg" fg="fg" size="large" contrast="15.71" contrastDark="14.59">fg on bg</Swatch>
-    <Swatch bg="bg" fg="fg-1" size="large" contrast="12.50" contrastDark="10.77">fg-1 on bg</Swatch>
-    <Swatch bg="bg" fg="fg-2" size="large" contrast="9.54" contrastDark="7.76">fg-2 on bg</Swatch>
-    <Swatch bg="bg" fg="fg-3" size="large" contrast="7.01" contrastDark="6.32">fg-3 on bg</Swatch>
-  </div>
-  <div class="d-flex flex-column gap-2 w-100">
-    <Swatch bg="bg-1" fg="fg" size="large">fg on bg-1</Swatch>
-    <Swatch bg="bg-1" fg="fg-1" size="large">fg-1 on bg-1</Swatch>
-    <Swatch bg="bg-1" fg="fg-2" size="large">fg-2 on bg-1</Swatch>
-    <Swatch bg="bg-1" fg="fg-3" size="large">fg-3 on bg-1</Swatch>
-  </div>
-  <div class="d-flex flex-column gap-2 w-100">
-    <Swatch bg="bg-2" fg="fg" size="large">fg on bg-2</Swatch>
-    <Swatch bg="bg-2" fg="fg-1" size="large">fg-1 on bg-2</Swatch>
-    <Swatch bg="bg-2" fg="fg-2" size="large">fg-2 on bg-2</Swatch>
-    <Swatch bg="bg-2" fg="fg-3" size="large">fg-3 on bg-2</Swatch>
-  </div>
-  <div class="d-flex flex-column gap-2 w-100">
-    <Swatch bg="bg-3" fg="fg" size="large">fg on bg-3</Swatch>
-    <Swatch bg="bg-3" fg="fg-1" size="large">fg-1 on bg-3</Swatch>
-    <Swatch bg="bg-3" fg="fg-2" size="large">fg-2 on bg-3</Swatch>
-    <Swatch bg="bg-3" fg="fg-3" size="large">fg-3 on bg-3</Swatch>
-  </div>
-</div>
-
-## Theme foregrounds
-
-Theme foregrounds are defined in the `$theme-fgs` Sass map. This map is used to generate our theme foreground values. You'll find these values in the `_theme.scss` file. These are where we define our design tokens for Bootstrap, across both light and dark color modes.
-
-Theme foregrounds include the following semantic colors:
-
-<BsTable>
-| Foreground | Default value | Description |
-| --- | --- | --- |
-| `null` | `var(--bs-gray-900)` | Default foreground color |
-| `1` | `var(--bs-gray-800)` | Lowest contrast foreground color |
-| `2` | `var(--bs-gray-700)` | Lower contrast foreground color |
-| `3` | `var(--bs-gray-600)` | Medium contrast foreground color |
-</BsTable>
-
-<div class="grid gap-0" style={{gridTemplateColumns: 'repeat(8, 1fr)', gap: '8px', minWidth: '0'}}>
-  {themeFgs.map((color) => {
-    return (
-      <div>
-        <Swatch color={`fg-${color}`} size="large" />
-        <div class="text-center color-3">{color}</div>
-      </div>
-    )
-  })}
-</div>
-
-## Theme Sass map
-
-We use a large, nested Sass map to generate our theme color values.
-
-<ScssDocs name="theme-colors" file="scss/_theme.scss" />
-
-## CSS variables
-
-CSS variables are generated from the `$new-theme-colors` Sass map at the `:root` level inside `_root.scss` using a Sass loop.
-
-<ScssDocs name="root-theme-variables" file="scss/_root.scss" />

site/src/content/docs/forms/checkbox.mdx

@@ -4,8 +4,6 @@ description: Highly customizable, native checkbox `<input>` elements for present
 toc: true
 ---
 
-import { getData } from '@libs/data'
-
 **Trialing new components with the following rules:**
 
 - New components are purely components, they don't assume layout of any kind.
@@ -62,21 +60,6 @@ Consider margin utilities for additional spacing, and flex utilities for alignme
     <label for="checkLabel">Example new checkbox</label>
   </b-checkgroup>`} />
 
-## Theme colors
-
-Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.check` 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) => `<b-checkgroup>
-    <div class="check checked-${themeColor.name}">
-      <input type="checkbox" id="check${themeColor.name}" 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='3' d='m6 10 3 3 6-6'/>
-        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
-      </svg>
-    </div>
-    <label for="check${themeColor.name}">Example ${themeColor.name} checkbox</label>
-  </b-checkgroup>`)} />
-
 ## Description
 
 With this layout approach, you can easily add a description or other content after the label. Here we use another custom element, `<b-vstack>`, to stack the label and description.

site/src/content/docs/forms/radio.mdx

@@ -4,8 +4,6 @@ description: Highly customizable, native radio `<input>` elements for choosing o
 toc: true
 ---
 
-import { getData } from '@libs/data'
-
 ## Basic radio
 
 Similar to checkboxes, radios are styled with the `.radio` class. However, there's no custom SVG as we use a Unicode character for the checked state.
@@ -19,16 +17,8 @@ Wrap the `.radio` in a `<b-radiogroup>` layout component and add your label. We
 <Example code={`<b-radiogroup>
     <input type="radio" id="radioLabel" class="radio" />
     <label for="radioLabel">Example new radio</label>
-  </b-radiogroup>`} />
-
-## Theme colors
-
-Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.radio` 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) => `<b-radiogroup>
-    <input type="radio" id="radio${themeColor.name}" class="radio checked-${themeColor.name}" checked />
-    <label for="radio${themeColor.name}">Example ${themeColor.name} radio</label>
-  </b-radiogroup>`)} />
+  </b-radiogroup>
+  `} />
 
 ## Description
 

site/src/content/docs/forms/switch.mdx

@@ -4,8 +4,6 @@ description: Custom toggle component built on top of native `<input>` checkbox e
 toc: true
 ---
 
-import { getData } from '@libs/data'
-
 ## Basic switch
 
 Switches are built with checkboxes under the hood, so their HTML closely mirrors that of checkboxes, including optional layout components.
@@ -38,17 +36,6 @@ Consider margin utilities for additional spacing, and flex utilities for alignme
     <label for="switchMdLabel">Default switch</label>
   </b-checkgroup>`} />
 
-## Theme colors
-
-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) => ` <b-checkgroup>
-    <div class="switch switch-sm mt-1 checked-${themeColor.name}">
-      <input type="checkbox" value="" id="switch${themeColor.name}" switch checked>
-    </div>
-    <label for="switch${themeColor.name}">Example ${themeColor.name} switch</label>
-  </b-checkgroup>`)} />
-
 ## Disabled
 
 Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.

site/src/content/docs/getting-started/rfs.mdx

@@ -29,7 +29,7 @@ The `rfs()` mixin has shorthands for `font-size`, `margin`, `margin-top`, `margi
   font-size: calc(1.525rem + 3.3vw);
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 1200px) {
   .title {
     font-size: 4rem;
   }

site/src/content/docs/helpers/position.mdx

@@ -46,7 +46,7 @@ Responsive variations also exist for `.sticky-top` utility.
 <div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
 <div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
 <div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
-<div class="sticky-2xl-top">Stick to the top on viewports sized 2XL (extra-extra-large) or wider</div>
+<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>
 ```
 
 ## Sticky bottom
@@ -66,5 +66,5 @@ Responsive variations also exist for `.sticky-bottom` utility.
 <div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
 <div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
 <div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
-<div class="sticky-2xl-bottom">Stick to the bottom on viewports sized 2XL (extra-extra-large) or wider</div>
+<div class="sticky-xxl-bottom">Stick to the bottom on viewports sized XXL (extra-extra-large) or wider</div>
 ```

site/src/content/docs/layout/breakpoints.mdx

@@ -23,9 +23,9 @@ Bootstrap includes six default breakpoints, sometimes referred to as _grid tiers
 | Extra small | <em>None</em> |&lt;576px |
 | Small | `sm` | &ge;576px |
 | Medium | `md` | &ge;768px |
-| Large | `lg` | &ge;1024px |
-| Extra large | `xl` | &ge;1280px |
-| Extra extra large | `2xl` | &ge;1536px |
+| Large | `lg` | &ge;992px |
+| Extra large | `xl` | &ge;1200px |
+| Extra extra large | `xxl` | &ge;1400px |
 </BsTable>
 
 Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don’t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.
@@ -52,7 +52,7 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in
 @include media-breakpoint-up(md) { ... }
 @include media-breakpoint-up(lg) { ... }
 @include media-breakpoint-up(xl) { ... }
-@include media-breakpoint-up(2xl) { ... }
+@include media-breakpoint-up(xxl) { ... }
 
 // Usage
 
@@ -79,14 +79,14 @@ These Sass mixins translate in our compiled CSS using the values declared in our
 // Medium devices (tablets, 768px and up)
 @media (min-width: 768px) { ... }
 
-// Large devices (desktops, 1024px and up)
-@media (min-width: 1024px) { ... }
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) { ... }
 
-// X-Large devices (large desktops, 1280px and up)
-@media (min-width: 1280px) { ... }
+// X-Large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) { ... }
 
-// XX-Large devices (larger desktops, 1536px and up)
-@media (min-width: 1536px) { ... }
+// XX-Large devices (larger desktops, 1400px and up)
+@media (min-width: 1400px) { ... }
 ```
 
 ### Max-width
@@ -99,7 +99,7 @@ We occasionally use media queries that go in the other direction (the given scre
 @include media-breakpoint-down(md) { ... }
 @include media-breakpoint-down(lg) { ... }
 @include media-breakpoint-down(xl) { ... }
-@include media-breakpoint-down(2xl) { ... }
+@include media-breakpoint-down(xxl) { ... }
 
 // Example: Style from medium breakpoint and down
 @include media-breakpoint-down(md) {
@@ -127,8 +127,8 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us
 // `xl` applies to large devices (desktops, less than 1200px)
 @media (max-width: 1199.98px) { ... }
 
-// `2xl` applies to x-large devices (large desktops, less than 1600px)
-@media (max-width: 1599.98px) { ... }
+// `xxl` applies to x-large devices (large desktops, less than 1400px)
+@media (max-width: 1399.98px) { ... }
 ```
 
 <Callout name="info-mediaqueries-breakpoints" type="warning" />
@@ -143,7 +143,7 @@ There are also media queries and mixins for targeting a single segment of screen
 @include media-breakpoint-only(md) { ... }
 @include media-breakpoint-only(lg) { ... }
 @include media-breakpoint-only(xl) { ... }
-@include media-breakpoint-only(2xl) { ... }
+@include media-breakpoint-only(xxl) { ... }
 ```
 
 For example the `@include media-breakpoint-only(md) { ... }` will result in :

site/src/content/docs/layout/containers.mdx

@@ -19,14 +19,14 @@ The table below illustrates how each container’s `max-width` compares to the o
 See them in action and compare them in our [Grid example]([[docsref:/examples/grid/#containers]]).
 
 <BsTable>
-|  | Extra small<div class="fw-normal">&lt;576px</div> | Small<div class="fw-normal">&ge;576px</div> | Medium<div class="fw-normal">&ge;768px</div> | Large<div class="fw-normal">&ge;1024px</div> | X-Large<div class="fw-normal">&ge;1280px</div> | 2X-Large<div class="fw-normal">&ge;1536px</div> |
+|  | Extra small<div class="fw-normal">&lt;576px</div> | Small<div class="fw-normal">&ge;576px</div> | Medium<div class="fw-normal">&ge;768px</div> | Large<div class="fw-normal">&ge;992px</div> | X-Large<div class="fw-normal">&ge;1200px</div> | XX-Large<div class="fw-normal">&ge;1400px</div> |
 | --- | --- | --- | --- | --- | --- | --- |
-| `.container` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
-| `.container-sm` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
-| `.container-md` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1440px |
-| `.container-lg` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 960px | 1140px | 1440px |
-| `.container-xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1140px | 1440px |
-| `.container-2xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1440px |
+| `.container` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
+| `.container-sm` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
+| `.container-md` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1320px |
+| `.container-lg` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 960px | 1140px | 1320px |
+| `.container-xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1140px | 1320px |
+| `.container-xxl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1320px |
 | `.container-fluid` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> |
 </BsTable>
 
@@ -42,14 +42,14 @@ Our default `.container` class is a responsive, fixed-width container, meaning i
 
 ## Responsive containers
 
-Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `2xl`.
+Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`.
 
 ```html
 <div class="container-sm">100% wide until small breakpoint</div>
 <div class="container-md">100% wide until medium breakpoint</div>
 <div class="container-lg">100% wide until large breakpoint</div>
 <div class="container-xl">100% wide until extra large breakpoint</div>
-<div class="container-2xl">100% wide until extra extra large breakpoint</div>
+<div class="container-xxl">100% wide until extra extra large breakpoint</div>
 ```
 
 ## Fluid containers

site/src/content/docs/layout/grid.mdx

@@ -35,7 +35,7 @@ The above example creates three equal-width columns across all devices and viewp
 
 Breaking it down, here’s how the grid system comes together:
 
-- **Our grid supports [six responsive breakpoints]([[docsref:/layout/breakpoints]]).**  Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, and `2xl`). This means you can control container and column sizing and behavior by each breakpoint.
+- **Our grid supports [six responsive breakpoints]([[docsref:/layout/breakpoints]]).**  Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, and `xxl`). This means you can control container and column sizing and behavior by each breakpoint.
 
 - **Containers center and horizontally pad your content.** Use `.container` for a responsive pixel width, `.container-fluid` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `.container-md`) for a combination of fluid and pixel widths.
 
@@ -58,7 +58,7 @@ Bootstrap’s grid system can adapt across all six default breakpoints, and any
 - Medium (md)
 - Large (lg)
 - Extra large (xl)
-- Extra extra large (2xl)
+- Extra extra large (xxl)
 
 As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here’s how the grid changes across these breakpoints:
 
@@ -70,9 +70,9 @@ As noted above, each of these breakpoints have their own container, unique class
         <th scope="col">xs<br/><span class="fw-normal">&lt;576px</span></th>
         <th scope="col">sm<br/><span class="fw-normal">&ge;576px</span></th>
         <th scope="col">md<br/><span class="fw-normal">&ge;768px</span></th>
-        <th scope="col">lg<br/><span class="fw-normal">&ge;1024px</span></th>
-        <th scope="col">xl<br/><span class="fw-normal">&ge;1280px</span></th>
-        <th scope="col">2xl<br/><span class="fw-normal">&ge;1536px</span></th>
+        <th scope="col">lg<br/><span class="fw-normal">&ge;992px</span></th>
+        <th scope="col">xl<br/><span class="fw-normal">&ge;1200px</span></th>
+        <th scope="col">xxl<br/><span class="fw-normal">&ge;1400px</span></th>
       </tr>
     </thead>
     <tbody>
@@ -83,7 +83,7 @@ As noted above, each of these breakpoints have their own container, unique class
         <td>720px</td>
         <td>960px</td>
         <td>1140px</td>
-        <td>1440px</td>
+        <td>1320px</td>
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Class prefix</th>
@@ -92,7 +92,7 @@ As noted above, each of these breakpoints have their own container, unique class
         <td><code>.col-md-</code></td>
         <td><code>.col-lg-</code></td>
         <td><code>.col-xl-</code></td>
-        <td><code>.col-2xl-</code></td>
+        <td><code>.col-xxl-</code></td>
       </tr>
       <tr>
         <th class="text-nowrap" scope="row"># of columns</th>
@@ -124,7 +124,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
 
 ### Equal-width
 
-For example, here are two grid layouts that apply to every device and viewport, from `xs` to `2xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
+For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
 
 <Example class="bd-example-row" code={`<div class="container text-center">
     <div class="row">

site/src/content/docs/migration.mdx

@@ -57,11 +57,6 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
   - Removed `_variables-dark.scss`
   - Added `_colors.scss`, splitting them out from `_variables.scss`,
   - Added `_theme.scss` where we setup all our global theming for how colors are applied
-- **Updated lg, xl, and 2xl breakpoints and containers.**
-  - Increased the `lg` breakpoint from 992px to 1024px; it's container remains the same at 960px.
-  - Increased the `xl` breakpoint from 1200px to 1280px, and it's container from 1140px to 1200px.
-  - Renamed `2xl` to `2xl` for better scaling with additional custom breakpoints
-  - Increased the `2xl` breakpoint from 1400px to 1536px, and it's container from 1320px to 1440px.
 
 ### Sass
 
@@ -74,7 +69,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
   - Removed `muted`, `black-50`, and `white-50` from text colors utilities map
   - Consolidated carousel dark variables, removing `$carousel-dark-indicator-active-bg`, `$carousel-dark-caption-color`, and `$carousel-dark-control-icon-filter` for their reassigned counterparts.
   - Removed `$btn-close-white-filter` for `$btn-close-filter-dark`.
-  - Removed `$border-radius-2xl`, use `$border-radius-2xl`.
+  - Removed `$border-radius-2xl`, use `$border-radius-xxl`.
   - Removed `$text-muted` for secondary color.
   - Removed `$hr-bg-color` for `$hr-border-color` and `$hr-height` for `$hr-border-width`.
   - Removed unused `$dropdown-header-padding` for the `-x`/`-y` split variables.

site/src/content/docs/utilities/api.mdx

@@ -14,7 +14,6 @@ The `$utilities` map contains all our utilities and is later merged with your cu
 | --- | --- | --- | --- |
 | [`property`](#property) | **Required** | – | Name of the property, this can be a string or an array of strings (e.g., horizontal paddings or margins). |
 | [`values`](#values) | **Required** | – | List of values, or a map if you don't want the class name to be the same as the value. If `null` is used as map key, `class` is not prepended to the class name. |
-| [`selector`](#selector) | Optional | `class` | Type of CSS selector in the generated CSS ruleset. Can be `class`, `attr-starts`, or `attr-includes`. |
 | [`class`](#class) | Optional | null | Name of the generated class. If not provided and `property` is an array of strings, `class` will default to the first element of the `property` array. If not provided and `property` is a string, the `values` keys are used for the `class` names. |
 | [`css-var`](#css-variable-utilities) | Optional | `false` | Boolean to generate CSS variables instead of CSS rules. |
 | [`css-variable-name`](#css-variable-utilities) | Optional | null | Custom un-prefixed name for the CSS variable inside the ruleset. |
@@ -29,7 +28,7 @@ The `$utilities` map contains all our utilities and is later merged with your cu
 
 ## API explained
 
-All utility variables are added to the `$utilities` variable within our `_utilities.scss` stylesheet, which is a giant, nested Sass map. Each group of utility classes are generated from a block that looks something like this:
+All utility variables are added to the `$utilities` variable within our `_utilities.scss` stylesheet. Each group of utilities looks something like this:
 
 ```scss
 $utilities: (
@@ -56,11 +55,9 @@ Which outputs the following:
 .opacity-100 { opacity: 1; }
 ```
 
-### `property`
+### Property
 
-<div class="badge fs-6 bg-accent mb-3">Required</div>
-
-The `property` key must be set for any utility, and it must contain a valid CSS property. This property is used in the generated utility’s ruleset. When the `class` key is omitted, it also serves as the default class name. Consider the `text-decoration` utility:
+The required `property` key must be set for any utility, and it must contain a valid CSS property. This property is used in the generated utility’s ruleset. When the `class` key is omitted, it also serves as the default class name. Consider the `text-decoration` utility:
 
 ```scss
 $utilities: (
@@ -79,9 +76,7 @@ Output:
 .text-decoration-line-through { text-decoration: line-through; }
 ```
 
-### `values`
-
-<div class="badge fs-6 bg-accent mb-3">Required</div>
+### Values
 
 Use the `values` key to specify which values for the specified `property` should be used in the generated class names and rules. Can be a list or map (set in the utilities or in a Sass variable).
 
@@ -109,53 +104,7 @@ As a Sass variable that sets the list or map, as in our [`position` utilities]([
 values: $position-values
 ```
 
-### `selector`
-
-<BsTable>
-| Option | Description |
-| --- | --- |
-| No selector | Defaults to `"class"` |
-| `"class"` | Matches elements with a class that matches the specified value |
-| `"attr-starts"` | Matches elements with a class that starts with a string |
-| `"attr-includes"` | Matches elements with a class that includes a string |
-</BsTable>
-
-Use the `selector` option to change the CSS selector used in the generated CSS ruleset. The default option is to generate a class selector. When using an attribute selector—either `attr-starts` or `attr-includes`—**the `class` option is required**. We use these internally to simplify the construction of other utilities.
-
-For attribute selectors, you'll most likely want the `attr-includes` as the starting attribute selector in CSS applies to the entire string of classes in an attribute's value. For example, `[class^="name"]` would not match `class="example name"`.
-
-As an example, to change from `.ratio-*` to `[class*="ratio-"]`:
-
-```scss
-$utilities: (
-  // Create an attribute selector utility
-  "aspect-ratio-attr": (
-    selector: "attr-includes",
-    class: "ratio-",
-    property: aspect-ratio,
-    values: var(--#{$prefix}ratio),
-  ),
-  // Create a CSS variable utility that matches the attribute selector utility
-  "aspect-ratio": (
-    property: --#{$prefix}ratio,
-    class: ratio,
-    values: $aspect-ratios
-  ),
-);
-```
-
-Which outputs the following:
-
-```css
-[class*="ratio-"] { aspect-ratio: var(--bs-ratio); }
-.ratio-auto { --bs-ratio: auto; }
-.ratio-1x1 { --bs-ratio: 1 / 1; }
-.ratio-4x3 { --bs-ratio: 4 / 3; }
-.ratio-16x9 { --bs-ratio: 16 / 9; }
-.ratio-21x9 { --bs-ratio: 21 / 9; }
-```
-
-### `class`
+### Class
 
 Use the `class` option to change the class prefix used in the compiled CSS. For example, to change from `.opacity-*` to `.o-*`:
 
@@ -347,7 +296,7 @@ Output:
   .opacity-md-100 { opacity: 1; }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 992px) {
   .opacity-lg-0 { opacity: 0; }
   .opacity-lg-25 { opacity: .25; }
   .opacity-lg-50 { opacity: .5; }
@@ -355,7 +304,7 @@ Output:
   .opacity-lg-100 { opacity: 1; }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 1200px) {
   .opacity-xl-0 { opacity: 0; }
   .opacity-xl-25 { opacity: .25; }
   .opacity-xl-50 { opacity: .5; }
@@ -363,12 +312,12 @@ Output:
   .opacity-xl-100 { opacity: 1; }
 }
 
-@media (min-width: 1536px) {
-  .opacity-2xl-0 { opacity: 0; }
-  .opacity-2xl-25 { opacity: .25; }
-  .opacity-2xl-50 { opacity: .5; }
-  .opacity-2xl-75 { opacity: .75; }
-  .opacity-2xl-100 { opacity: 1; }
+@media (min-width: 1400px) {
+  .opacity-xxl-0 { opacity: 0; }
+  .opacity-xxl-25 { opacity: .25; }
+  .opacity-xxl-50 { opacity: .5; }
+  .opacity-xxl-75 { opacity: .75; }
+  .opacity-xxl-100 { opacity: 1; }
 }
 ```
 
@@ -558,19 +507,19 @@ This will now generate responsive variations of `.border` and `.border-0` for ea
   .border-md-0 { ... }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 992px) {
   .border-lg { ... }
   .border-lg-0 { ... }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 1200px) {
   .border-xl { ... }
   .border-xl-0 { ... }
 }
 
-@media (min-width: 1536px) {
-  .border-2xl { ... }
-  .border-2xl-0 { ... }
+@media (min-width: 1400px) {
+  .border-xxl { ... }
+  .border-xxl-0 { ... }
 }
 ```
 

site/src/content/docs/utilities/background.mdx

@@ -18,7 +18,7 @@ Background utilities like `.bg-*` that generated from our original `$theme-color
 </Callout>
 
 <Example code={[
-  ...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} text-white">.bg-${themeColor.name}</div>
+  ...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} ${themeColor.contrast_color ? `text-${themeColor.contrast_color}` : `text-white`}">.bg-${themeColor.name}</div>
 <div class="p-3 mb-2 bg-${themeColor.name}-subtle text-${themeColor.name}-emphasis">.bg-${themeColor.name}-subtle</div>`),
   `<div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div>
 <div class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div>
@@ -36,7 +36,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 
 {getData('theme-colors').map((themeColor) => {
   return (
-    <div class={`p-3 mb-2 bg-${themeColor.name} bg-gradient text-white`}>.bg-{themeColor.name}.bg-gradient</div>
+    <div class={`p-3 mb-2 bg-${themeColor.name} bg-gradient${themeColor.contrast_color ? (' text-' + themeColor.contrast_color) : ' text-white'}`}>.bg-{themeColor.name}.bg-gradient</div>
   )
 })}
 <div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>
@@ -107,6 +107,20 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen
 
 {/*<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />*/}
 
+RGB colors are generated from a separate Sass map:
+
+<ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" />
+
+Background color opacities build on that with their own map that’s consumed by the utilities API:
+
+<ScssDocs name="utilities-bg-colors" file="scss/_maps.scss" />
+
+Color mode background colors are also available as a Sass map:
+
+<ScssDocs name="theme-bg-subtle-map" file="scss/_maps.scss" />
+
+<ScssDocs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" />
+
 ### Sass mixins
 
 **No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you’d like to create your own gradients.

site/src/content/docs/utilities/border.mdx

@@ -220,6 +220,14 @@ Variables for setting `border-color` in `.border-*-subtle` utilities in light an
 
 {/* <ScssDocs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" /> */}
 
+### Sass maps
+
+Color mode adaptive border colors are also available as a Sass map:
+
+<ScssDocs name="theme-border-subtle-map" file="scss/_maps.scss" />
+
+<ScssDocs name="theme-border-subtle-dark-map" file="scss/_maps.scss" />
+
 ### Sass mixins
 
 <ScssDocs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" />

site/src/content/docs/utilities/colors.mdx

@@ -17,7 +17,7 @@ Color utilities like `.text-*` that generated from our original `$theme-colors`
 </Callout>
 
 <Example code={[
-  ...getData('theme-colors').map((themeColor) => `<p class="text-${themeColor.name}">.text-${themeColor.name}</p>
+  ...getData('theme-colors').map((themeColor) => `<p class="text-${themeColor.name}${themeColor.contrast_color ? ` bg-${themeColor.contrast_color}` : ``}">.text-${themeColor.name}</p>
 <p class="text-${themeColor.name}-emphasis">.text-${themeColor.name}-emphasis</p>`),
   `
 <p class="text-body">.text-body</p>
@@ -72,10 +72,22 @@ In addition to the following Sass functionality, consider reading about our incl
 
 Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
 
+{/*<ScssDocs name="color-variables" file="scss/_variables.scss" />*/}
+
 <ScssDocs name="theme-color-variables" file="scss/_variables.scss" />
 
 Grayscale colors are also available, but only a subset are used to generate any utilities.
 
+{/*<ScssDocs name="gray-color-variables" file="scss/_variables.scss" />*/}
+
+<ScssDocs name="theme-text-map" file="scss/_maps.scss" />
+
+Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode:
+
+{/* <ScssDocs name="theme-text-variables" file="scss/_variables.scss" /> */}
+
+{/* <ScssDocs name="theme-text-dark-variables" file="scss/_variables-dark.scss" /> */}
+
 ### Sass maps
 
 Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
@@ -86,6 +98,20 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen
 
 {/*<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />*/}
 
+RGB colors are generated from a separate Sass map:
+
+<ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" />
+
+Color opacities build on that with their own map that’s consumed by the utilities API:
+
+<ScssDocs name="utilities-text-colors" file="scss/_maps.scss" />
+
+Color mode adaptive text colors are also available as a Sass map:
+
+<ScssDocs name="theme-text-map" file="scss/_maps.scss" />
+
+<ScssDocs name="theme-text-dark-map" file="scss/_maps.scss" />
+
 ### Sass utilities API
 
 Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])

site/src/content/docs/utilities/display.mdx

@@ -47,12 +47,12 @@ Change the value of the [`display` property](https://developer.mozilla.org/en-US
 
 ## Notation
 
-Display utility classes that apply to all [breakpoints]([[docsref:/layout/breakpoints]]), from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+Display utility classes that apply to all [breakpoints]([[docsref:/layout/breakpoints]]), from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
 As such, the classes are named using the format:
 
 - `.d-{value}` for `xs`
-- `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
+- `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
 
 Where *value* is one of:
 
@@ -70,7 +70,7 @@ Where *value* is one of:
 
 The display values can be altered by changing the `display` values defined in `$utilities` and recompiling the SCSS.
 
-The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, and `2xl` screens.
+The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, and `xxl` screens.
 
 ## Clearfix
 
@@ -92,7 +92,7 @@ There's no more clearfix helper in v6 as it's an outdated technique. Instead, us
 
 For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.
 
-To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,2xl}-none` classes for any responsive screen variation.
+To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation.
 
 To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
 
@@ -104,15 +104,15 @@ To show an element only on a given interval of screen sizes you can combine one
 | Hidden only on sm | `.d-sm-none .d-md-block` |
 | Hidden only on md | `.d-md-none .d-lg-block` |
 | Hidden only on lg | `.d-lg-none .d-xl-block` |
-| Hidden only on xl | `.d-xl-none .d-2xl-block` |
-| Hidden only on 2xl | `.d-2xl-none` |
+| Hidden only on xl | `.d-xl-none .d-xxl-block` |
+| Hidden only on xxl | `.d-xxl-none` |
 | Visible on all | `.d-block` |
 | Visible only on xs | `.d-block .d-sm-none` |
 | Visible only on sm | `.d-none .d-sm-block .d-md-none` |
 | Visible only on md | `.d-none .d-md-block .d-lg-none` |
 | Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
-| Visible only on xl | `.d-none .d-xl-block .d-2xl-none` |
-| Visible only on 2xl | `.d-none .d-2xl-block` |
+| Visible only on xl | `.d-none .d-xl-block .d-xxl-none` |
+| Visible only on xxl | `.d-none .d-xxl-block` |
 </BsTable>
 
 <Example code={`<div class="d-lg-none">hide on lg and wider screens</div>

site/src/content/docs/utilities/float.mdx

@@ -34,7 +34,7 @@ Responsive variations also exist for each `float` value.
 <div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
 <div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
 <div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
-<div class="float-2xl-end">Float end on viewports sized 2XL (extra extra large) or wider</div><br>`} />
+<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>`} />
 
 Here are all the support classes:
 

site/src/content/docs/utilities/margin.mdx

@@ -59,9 +59,9 @@ Use margin utilities to control the outer space around elements. Margin utilitie
 
 ## Notation
 
-Margin utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+Margin utilities that apply to all breakpoints, from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
-The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
+The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
 
 Where *property* is:
 

site/src/content/docs/utilities/object-fit.mdx

@@ -44,13 +44,13 @@ Add the `object-fit-{value}` class to the [replaced element](https://developer.m
 
 ## Responsive
 
-Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `2xl`. Classes can be combined for various effects as you need.
+Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need.
 
 <Example class="d-flex overflow-auto" code={`<Placeholder width="140" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" />
 <Placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" />
 <Placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" />
 <Placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" />
-<Placeholder width="140" height="80" class="object-fit-2xl-contain border rounded" text="Contain on 2xl" markup="img" />`} />
+<Placeholder width="140" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" />`} />
 
 ## Video
 

site/src/content/docs/utilities/padding.mdx

@@ -52,9 +52,9 @@ Use padding utilities to control the inner space within elements. Padding utilit
 
 ## Notation
 
-Padding utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+Padding utilities that apply to all breakpoints, from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
-The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
+The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
 
 Where *property* is:
 

site/src/content/docs/utilities/spacing.mdx

@@ -112,9 +112,9 @@ Assign responsive-friendly `margin` or `padding` values to an element or a subse
 
 ### Notation
 
-Spacing utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+Spacing utilities that apply to all breakpoints, from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
-The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
+The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
 
 Where *property* is one of:
 

site/src/content/docs/utilities/text-alignment.mdx

@@ -31,7 +31,7 @@ Easily realign text to components with text alignment classes. For start, end, a
 <p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
 <p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
 <p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p>
-<p class="text-2xl-end">End aligned text on viewports sized 2xl (extra extra large) or wider.</p>`} />
+<p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>`} />
 
 <Callout>
 Note that we don't provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.

site/src/content/docs/utilities/text.mdx

@@ -114,7 +114,7 @@ Easily realign text to components with text alignment classes. For start, end, a
 <p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
 <p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
 <p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p>
-<p class="text-2xl-end">End aligned text on viewports sized 2XL (extra extra large) or wider.</p>`} />
+<p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>`} />
 
 <Callout>
 Note that we don’t provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.
@@ -226,6 +226,8 @@ Font-size utilities are generated from this map, in combination with our utiliti
 
 <ScssDocs name="font-sizes" file="scss/_variables.scss" />
 
+<ScssDocs name="theme-text-map" file="scss/_maps.scss" />
+
 ### Sass utilities API
 
 Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])

site/src/layouts/DocsLayout.astro

@@ -72,7 +72,7 @@ if (currentPageIndex < allPages.length - 1) {
 ---
 
 <BaseLayout {...Astro.props} layout="docs" overrides={{ body: bodyProps }}>
-  <div slot="main" class="container-2xl bd-gutter mt-3 my-md-4 bd-layout">
+  <div slot="main" class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
     <aside class="bd-sidebar">
       <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
         <div class="offcanvas-header border-bottom">
@@ -180,17 +180,19 @@ if (currentPageIndex < allPages.length - 1) {
       <div class="bd-content ps-lg-2">
         {
           frontmatter.sections && (
-            <div class="grid grid-cols-3 mb-5">
+            <div class="grid mb-5">
               {frontmatter.sections.map((section) => (
-                <a
-                  class="d-block text-decoration-none"
-                  href={getVersionedDocsPath(
-                    `${parentDirectory ? parentDirectory + '/' : ''}${getSlug(section.title)}/`
-                  )}
-                >
-                  <strong class="d-block h5 mb-0">{section.title}</strong>
-                  <span class="text-secondary">{section.description}</span>
-                </a>
+                <div class="col-md-6">
+                  <a
+                    class="d-block text-decoration-none"
+                    href={getVersionedDocsPath(
+                      `${parentDirectory ? parentDirectory + '/' : ''}${getSlug(section.title)}/`
+                    )}
+                  >
+                    <strong class="d-block h5 mb-0">{section.title}</strong>
+                    <span class="text-secondary">{section.description}</span>
+                  </a>
+                </div>
               ))}
             </div>
           )

site/src/layouts/SingleLayout.astro

@@ -13,7 +13,7 @@ const { description, title } = Astro.props
 <BaseLayout {...Astro.props} layout="single">
   <Fragment slot="main">
     <header class="py-5 border-bottom">
-      <div class="container-2xl bd-gutter pt-md-1 pb-md-4">
+      <div class="container-xxl bd-gutter pt-md-1 pb-md-4">
         <div class="row">
           <div class="col-xl-8">
             <h1 class="bd-title mt-0">{title}</h1>
@@ -28,7 +28,7 @@ const { description, title } = Astro.props
     </header>
 
     <main class="bd-content order-1 py-5" id="content">
-      <div class="container-2xl bd-gutter">
+      <div class="container-xxl bd-gutter">
         <slot />
         <slot name="main-content" />
       </div>

site/src/libs/data.ts

@@ -1,7 +1,14 @@
 import fs from 'node:fs'
 import yaml from 'js-yaml'
 import { z } from 'zod'
-import { zLanguageCode, zPxSizeOrEmpty, zVersionMajorMinor, zVersionSemver } from './validation'
+import {
+  zHexColor,
+  zLanguageCode,
+  zNamedHexColors,
+  zPxSizeOrEmpty,
+  zVersionMajorMinor,
+  zVersionSemver
+} from './validation'
 import { capitalizeFirstLetter } from './utils'
 
 // An object containing all the data types and their associated schema. The key should match the name of the data file
@@ -16,11 +23,7 @@ const dataDefinitions = {
       container: zPxSizeOrEmpty
     })
     .array(),
-  colors: z
-    .object({
-      name: z.string()
-    })
-    .array(),
+  colors: zNamedHexColors(13),
   'core-team': z
     .object({
       name: z.string(),
@@ -50,6 +53,7 @@ const dataDefinitions = {
         .array()
     })
     .array(),
+  grays: zNamedHexColors(9),
   icons: z.object({
     preferred: z
       .object({
@@ -93,7 +97,9 @@ const dataDefinitions = {
     .array(),
   'theme-colors': z
     .object({
-      name: z.string()
+      name: z.string(),
+      hex: zHexColor,
+      contrast_color: z.union([z.literal('dark'), z.literal('white')]).optional()
     })
     .array()
     .transform((val) => {

site/src/libs/placeholder.ts

@@ -125,8 +125,8 @@ function getOptionsWithDefaults(options: Partial<PlaceholderOptions>) {
   const optionsWithDefaults = Object.assign(
     {},
     {
-      background: '#adb5bd',
-      color: '#e9ecef',
+      background: getData('grays')[5].hex,
+      color: getData('grays')[2].hex,
       height: '180',
       markup: 'svg',
       title: 'Placeholder',

site/src/pages/index.astro

@@ -11,7 +11,7 @@ import Icons from '@components/home/Icons.astro'
 
 <BaseLayout>
   <MastHead />
-  <div class="container-2xl bd-gutter masthead-followup">
+  <div class="container-xxl bd-gutter masthead-followup">
     <GetStarted />
     <Customize />
     <CSSVariables />

site/src/scss/_ads.scss

@@ -8,61 +8,59 @@
 // Carbon ads
 //
 
-@layer custom {
+#carbonads {
+  position: static;
+  max-width: 400px;
+  padding: 15px 15px 15px 160px;
+  margin: 1rem 0;
+  overflow: hidden;
+  @include font-size(.8125rem);
+  line-height: 1.4;
+  text-align: left;
+  background-color: var(--bs-bg-1);
+
+  a {
+    color: var(--bs-body-color);
+    text-decoration: none;
+  }
+
+  @include media-breakpoint-up(sm) {
+    @include border-radius(.5rem);
+  }
+}
+
+.carbon-img {
+  float: left;
+  margin-left: -145px;
+}
+
+@container (max-width: 240px) {
   #carbonads {
-    position: static;
-    max-width: 400px;
-    padding: 15px 15px 15px 160px;
-    margin: 1rem 0;
-    overflow: hidden;
-    @include font-size(.8125rem);
-    line-height: 1.4;
-    text-align: left;
-    background-color: var(--bs-bg-1);
-
-    a {
-      color: var(--bs-body-color);
-      text-decoration: none;
-    }
-
-    @include media-breakpoint-up(sm) {
-      @include border-radius(.5rem);
-    }
+    padding-left: 15px;
   }
 
   .carbon-img {
-    float: left;
-    margin-left: -145px;
-  }
-
-  @container (max-width: 240px) {
-    #carbonads {
-      padding-left: 15px;
-    }
-
-    .carbon-img {
-      display: block;
-      float: none;
-      margin-left: 0;
-    }
-
-    .carbon-wrap {
-      display: flex;
-      flex-direction: column;
-      gap: .5rem;
-    }
-
-    .carbon-img > img {
-      width: 100%;
-      max-width: 100% !important;
-      height: auto;
-      @include border-radius(var(--bs-border-radius-sm));
-    }
-  }
-
-  .carbon-poweredby {
     display: block;
-    margin-top: .75rem;
-    color: var(--bs-fg-3) !important;
+    float: none;
+    margin-left: 0;
+  }
+
+  .carbon-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+  }
+
+  .carbon-img > img {
+    width: 100%;
+    max-width: 100% !important;
+    height: auto;
+    @include border-radius(var(--bs-border-radius-sm));
   }
 }
+
+.carbon-poweredby {
+  display: block;
+  margin-top: .75rem;
+  color: var(--bs-fg-3) !important;
+}

site/src/scss/_anchor.scss

@@ -1,41 +1,24 @@
-@use "../../../scss/config" as *;
 @use "../../../scss/variables" as *;
 @use "../../../scss/mixins/transition" as *;
 
-@layer custom {
-  .anchor-link {
-    padding: 0 .175rem;
-    font-weight: 400;
-    color: color-mix(in srgb, var(--#{$prefix}link-color), transparent .5);
+.anchor-link {
+  padding: 0 .175rem;
+  font-weight: 400;
+  color: rgba($link-color, .5);
+  text-decoration: none;
+  opacity: 0;
+  @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
+
+  &::after {
+    content: "#";
+  }
+
+  &:focus,
+  &:hover,
+  :hover > &,
+  :target > & {
+    color: $link-color;
     text-decoration: none;
-    opacity: 0;
-    @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
-
-    &::after {
-      content: "#";
-    }
-
-    &:focus,
-    &:hover,
-    :hover > &,
-    :target > & {
-      color: var(--#{$prefix}link-color);
-      text-decoration: none;
-      opacity: 0;
-      @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
-
-      &::after {
-        content: "#";
-      }
-
-      &:focus,
-      &:hover,
-      :hover > &,
-      :target > & {
-        color: var(--#{$prefix}link-color);
-        text-decoration: none;
-        opacity: 1;
-      }
-    }
+    opacity: 1;
   }
 }

site/src/scss/_brand.scss

@@ -7,61 +7,59 @@
 // Brand guidelines
 //
 
-@layer custom {
-  // Logo series wrapper
-  .bd-brand-logos {
-    color: $bd-violet;
+// Logo series wrapper
+.bd-brand-logos {
+  color: $bd-violet;
 
-    .inverse {
-      color: $white;
-      background-color: $bd-violet;
-    }
+  .inverse {
+    color: $white;
+    background-color: $bd-violet;
+  }
+}
+
+// Individual items
+.bd-brand-item {
+  + .bd-brand-item {
+    border-top: 1px solid var(--bs-border-color);
   }
 
-  // Individual items
-  .bd-brand-item {
+  @include media-breakpoint-up(md) {
     + .bd-brand-item {
-      border-top: 1px solid var(--bs-border-color);
-    }
-
-    @include media-breakpoint-up(md) {
-      + .bd-brand-item {
-        border-top: 0;
-        border-left: 1px solid var(--bs-border-color);
-      }
-    }
-  }
-
-
-  //
-  // Color swatches
-  //
-
-  .color-swatches {
-    margin: 0 -5px;
-
-    // Docs colors
-    .bd-purple {
-      background-color: $bd-purple;
-    }
-    .bd-purple-light {
-      background-color: $bd-purple-light;
-    }
-    .bd-purple-lighter {
-      background-color: #e5e1ea;
-    }
-    .bd-gray {
-      background-color: #f9f9f9;
-    }
-  }
-
-  .color-swatch {
-    width: 4rem;
-    height: 4rem;
-
-    @include media-breakpoint-up(md) {
-      width: 6rem;
-      height: 6rem;
+      border-top: 0;
+      border-left: 1px solid var(--bs-border-color);
     }
   }
 }
+
+
+//
+// Color swatches
+//
+
+.color-swatches {
+  margin: 0 -5px;
+
+  // Docs colors
+  .bd-purple {
+    background-color: $bd-purple;
+  }
+  .bd-purple-light {
+    background-color: $bd-purple-light;
+  }
+  .bd-purple-lighter {
+    background-color: #e5e1ea;
+  }
+  .bd-gray {
+    background-color: #f9f9f9;
+  }
+}
+
+.color-swatch {
+  width: 4rem;
+  height: 4rem;
+
+  @include media-breakpoint-up(md) {
+    width: 6rem;
+    height: 6rem;
+  }
+}

site/src/scss/_buttons.scss

@@ -3,53 +3,55 @@
 @use "../../../scss/colors" as *;
 @use "variables" as *;
 
-@layer custom {
-  // scss-docs-start btn-css-vars-example
-  .btn-bd-primary {
-    --bs-btn-font-weight: 600;
-    --bs-btn-color: var(--bs-white);
-    --bs-btn-bg: var(--bd-violet-bg);
-    --bs-btn-border-color: var(--bd-violet-bg);
-    --bs-btn-hover-color: var(--bs-white);
-    --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
-    --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
-    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
-    --bs-btn-active-color: var(--bs-btn-hover-color);
-    --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
-    --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
-  }
-  // scss-docs-end btn-css-vars-example
+// Buttons
+//
+// Custom buttons for the docs.
 
-  .btn-bd-accent {
-    --bs-btn-font-weight: 600;
-    --bs-btn-color: var(--bd-accent);
-    --bs-btn-border-color: var(--bd-accent);
-    --bs-btn-hover-color: var(--bd-dark);
-    --bs-btn-hover-bg: var(--bd-accent);
-    --bs-btn-hover-border-color: var(--bd-accent);
-    --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
-    --bs-btn-active-color: var(--bs-btn-hover-color);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
-    --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
-  }
-
-  .btn-bd-light {
-    --btn-custom-color: #{color.mix($bd-violet, $white, 75%)};
-
-    --bs-btn-color: var(--bs-gray-600);
-    --bs-btn-border-color: var(--bs-border-color);
-    --bs-btn-hover-color: var(--btn-custom-color);
-    --bs-btn-hover-border-color: var(--btn-custom-color);
-    --bs-btn-active-color: var(--btn-custom-color);
-    --bs-btn-active-bg: var(--bs-white);
-    --bs-btn-active-border-color: var(--btn-custom-color);
-    --bs-btn-focus-border-color: var(--btn-custom-color);
-    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
-  }
-
-  .bd-btn-lg {
-    --bs-btn-border-radius: .5rem;
-
-    padding: .8125rem 2rem;
-  }
+// scss-docs-start btn-css-vars-example
+.btn-bd-primary {
+  --bs-btn-font-weight: 600;
+  --bs-btn-color: var(--bs-white);
+  --bs-btn-bg: var(--bd-violet-bg);
+  --bs-btn-border-color: var(--bd-violet-bg);
+  --bs-btn-hover-color: var(--bs-white);
+  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
+  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
+  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
+}
+// scss-docs-end btn-css-vars-example
+
+.btn-bd-accent {
+  --bs-btn-font-weight: 600;
+  --bs-btn-color: var(--bd-accent);
+  --bs-btn-border-color: var(--bd-accent);
+  --bs-btn-hover-color: var(--bd-dark);
+  --bs-btn-hover-bg: var(--bd-accent);
+  --bs-btn-hover-border-color: var(--bd-accent);
+  --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: var(--bs-btn-hover-bg);
+  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
+}
+
+.btn-bd-light {
+  --btn-custom-color: #{color.mix($bd-violet, $white, 75%)};
+
+  --bs-btn-color: var(--bs-gray-600);
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-hover-color: var(--btn-custom-color);
+  --bs-btn-hover-border-color: var(--btn-custom-color);
+  --bs-btn-active-color: var(--btn-custom-color);
+  --bs-btn-active-bg: var(--bs-white);
+  --bs-btn-active-border-color: var(--btn-custom-color);
+  --bs-btn-focus-border-color: var(--btn-custom-color);
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+}
+
+.bd-btn-lg {
+  --bs-btn-border-radius: .5rem;
+
+  padding: .8125rem 2rem;
 }

site/src/scss/_callouts.scss

@@ -7,49 +7,47 @@
 // Callouts
 //
 
-@layer custom {
-  .bd-callout {
-    --#{$prefix}link-color: var(--bd-callout-color);
-    --#{$prefix}link-hover-color: var(--bd-callout-color);
-    --#{$prefix}code-color: var(--bd-callout-code-color);
+.bd-callout {
+  --#{$prefix}link-color: var(--bd-callout-color);
+  --#{$prefix}link-hover-color: var(--bd-callout-color);
+  --#{$prefix}code-color: var(--bd-callout-code-color);
 
-    padding: 1.25rem;
-    margin-top: 1.25rem;
-    margin-bottom: 1.25rem;
-    font-size: .875rem;
-    line-height: 1.5;
-    // color: var(--bd-callout-color, inherit);
-    background-color: var(--bd-callout-bg, var(--bs-gray-100));
-    border: 1px solid var(--bd-callout-border, var(--bs-border-color));
-    border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
-    @include border-radius(var(--bs-border-radius));
-    // box-shadow: inset .25rem 0 0 var(--bd-callout-border, var(--bs-gray-300));
+  padding: 1.25rem;
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+  font-size: .875rem;
+  line-height: 1.5;
+  // color: var(--bd-callout-color, inherit);
+  background-color: var(--bd-callout-bg, var(--bs-gray-100));
+  border: 1px solid var(--bd-callout-border, var(--bs-border-color));
+  border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
+  @include border-radius(var(--bs-border-radius));
+  // box-shadow: inset .25rem 0 0 var(--bd-callout-border, var(--bs-gray-300));
 
-    h4 {
-      margin-bottom: .25rem;
-    }
-
-    a { font-weight: 500; }
-
-    > :last-child {
-      margin-bottom: 0;
-    }
-
-    + .bd-callout {
-      margin-top: -.25rem;
-    }
-
-    .highlight {
-      background-color: rgba($black, .05);
-    }
+  h4 {
+    margin-bottom: .25rem;
   }
 
-  // Variations
-  @each $variant in $bd-callout-variants {
-    .bd-callout-#{$variant} {
-      // --bd-callout-color: var(--bs-#{$variant}-text);
-      --bd-callout-bg: color-mix(in srgb, var(--bs-#{$variant}-bg-subtle), transparent 50%);
-      --bd-callout-border: var(--bs-#{$variant}-border);
-    }
+  a { font-weight: 500; }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  + .bd-callout {
+    margin-top: -.25rem;
+  }
+
+  .highlight {
+    background-color: rgba($black, .05);
+  }
+}
+
+// Variations
+@each $variant in $bd-callout-variants {
+  .bd-callout-#{$variant} {
+    // --bd-callout-color: var(--bs-#{$variant}-text);
+    --bd-callout-bg: color-mix(in srgb, var(--bs-#{$variant}-bg-subtle), transparent 50%);
+    --bd-callout-border: var(--bs-#{$variant}-border);
   }
 }

site/src/scss/_clipboard-js.scss

@@ -5,45 +5,43 @@
 //
 // JS-based `Copy` buttons for code snippets.
 
-@layer custom {
-  .bd-clipboard,
-  .bd-edit {
-    position: relative;
-    display: none;
-    float: right;
+.bd-clipboard,
+.bd-edit {
+  position: relative;
+  display: none;
+  float: right;
 
-    + .highlight {
-      margin-top: 0;
-    }
-
-    @include media-breakpoint-up(md) {
-      display: block;
-    }
+  + .highlight {
+    margin-top: 0;
   }
 
-  .btn-clipboard,
-  .btn-edit {
+  @include media-breakpoint-up(md) {
     display: block;
-    padding: .5em;
-    line-height: 1;
-    color: var(--bs-body-color);
-    background-color: var(--bd-pre-bg);
-    border: 0;
-    @include border-radius(.25rem);
-
-    &:hover {
-      color: var(--bs-link-hover-color);
-    }
-
-    &:focus {
-      z-index: 3;
-    }
-  }
-
-  .btn-clipboard {
-    position: relative;
-    z-index: 2;
-    margin-top: .5rem;
-    margin-right: .5rem;
   }
 }
+
+.btn-clipboard,
+.btn-edit {
+  display: block;
+  padding: .5em;
+  line-height: 1;
+  color: var(--bs-body-color);
+  background-color: var(--bd-pre-bg);
+  border: 0;
+  @include border-radius(.25rem);
+
+  &:hover {
+    color: var(--bs-link-hover-color);
+  }
+
+  &:focus {
+    z-index: 3;
+  }
+}
+
+.btn-clipboard {
+  position: relative;
+  z-index: 2;
+  margin-top: 1.25rem;
+  margin-right: .75rem;
+}

site/src/scss/_colors.scss

@@ -9,133 +9,171 @@
 // Docs color palette classes
 //
 
-// // stylelint-disable declaration-block-single-line-max-declarations
-// .bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
-// .bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
-// .bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
-// .bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
-// .bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
-// .bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
-// .bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
-// .bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
-// .bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }
+@each $color, $value in map.merge($colors, ("gray-500": $gray-500)) {
+  .swatch-#{$color} {
+    color: color-contrast($value);
+    background-color: #{$value};
 
-// .bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
-// .bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
-// .bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
-// .bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
-// .bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
-// .bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
-// .bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
-// .bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
-// .bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }
+    &::after {
+      $contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
+      $against-white: "#{contrast-ratio($value, $white)}";
+      $against-black: "#{contrast-ratio($value, $black)}";
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      padding-left: 1rem;
+      font-size: .75rem;
+      line-height: 1.35;
+      white-space: pre;
+      content:
+        string.slice($contrast-ratio, 1, 4) "\A"
+        string.slice($against-white, 1, 4) "\A"
+        string.slice($against-black, 1, 4);
+      background-color: $value;
+      background-image:
+        linear-gradient(
+          to bottom,
+          transparent .25rem,
+          color-contrast($value) .25rem .75rem,
+          transparent .75rem 1.25rem,
+          $white 1.25rem 1.75rem,
+          transparent 1.75rem 2.25rem,
+          $black 2.25rem 2.75rem,
+          transparent 2.75rem
+        );
+      background-repeat: no-repeat;
+      background-size: .5rem 100%;
+    }
+  }
+}
 
-// .bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
-// .bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
-// .bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
-// .bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
-// .bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
-// .bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
-// .bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
-// .bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
-// .bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }
+// stylelint-disable declaration-block-single-line-max-declarations
+.bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
+.bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
+.bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
+.bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
+.bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
+.bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
+.bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
+.bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
+.bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }
 
-// .bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; }
-// .bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; }
-// .bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; }
-// .bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; }
-// .bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; }
-// .bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; }
-// .bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; }
-// .bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; }
-// .bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; }
+.bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
+.bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
+.bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
+.bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
+.bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
+.bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
+.bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
+.bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
+.bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }
 
-// .bd-red-100 { color: color-contrast($red-100); background-color: $red-100; }
-// .bd-red-200 { color: color-contrast($red-200); background-color: $red-200; }
-// .bd-red-300 { color: color-contrast($red-300); background-color: $red-300; }
-// .bd-red-400 { color: color-contrast($red-400); background-color: $red-400; }
-// .bd-red-500 { color: color-contrast($red-500); background-color: $red-500; }
-// .bd-red-600 { color: color-contrast($red-600); background-color: $red-600; }
-// .bd-red-700 { color: color-contrast($red-700); background-color: $red-700; }
-// .bd-red-800 { color: color-contrast($red-800); background-color: $red-800; }
-// .bd-red-900 { color: color-contrast($red-900); background-color: $red-900; }
+.bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
+.bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
+.bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
+.bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
+.bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
+.bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
+.bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
+.bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
+.bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }
 
-// .bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; }
-// .bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; }
-// .bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; }
-// .bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; }
-// .bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; }
-// .bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; }
-// .bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; }
-// .bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; }
-// .bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; }
+.bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; }
+.bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; }
+.bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; }
+.bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; }
+.bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; }
+.bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; }
+.bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; }
+.bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; }
+.bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; }
 
-// .bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; }
-// .bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; }
-// .bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; }
-// .bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; }
-// .bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; }
-// .bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; }
-// .bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; }
-// .bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; }
-// .bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; }
+.bd-red-100 { color: color-contrast($red-100); background-color: $red-100; }
+.bd-red-200 { color: color-contrast($red-200); background-color: $red-200; }
+.bd-red-300 { color: color-contrast($red-300); background-color: $red-300; }
+.bd-red-400 { color: color-contrast($red-400); background-color: $red-400; }
+.bd-red-500 { color: color-contrast($red-500); background-color: $red-500; }
+.bd-red-600 { color: color-contrast($red-600); background-color: $red-600; }
+.bd-red-700 { color: color-contrast($red-700); background-color: $red-700; }
+.bd-red-800 { color: color-contrast($red-800); background-color: $red-800; }
+.bd-red-900 { color: color-contrast($red-900); background-color: $red-900; }
 
-// .bd-green-100 { color: color-contrast($green-100); background-color: $green-100; }
-// .bd-green-200 { color: color-contrast($green-200); background-color: $green-200; }
-// .bd-green-300 { color: color-contrast($green-300); background-color: $green-300; }
-// .bd-green-400 { color: color-contrast($green-400); background-color: $green-400; }
-// .bd-green-500 { color: color-contrast($green-500); background-color: $green-500; }
-// .bd-green-600 { color: color-contrast($green-600); background-color: $green-600; }
-// .bd-green-700 { color: color-contrast($green-700); background-color: $green-700; }
-// .bd-green-800 { color: color-contrast($green-800); background-color: $green-800; }
-// .bd-green-900 { color: color-contrast($green-900); background-color: $green-900; }
+.bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; }
+.bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; }
+.bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; }
+.bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; }
+.bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; }
+.bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; }
+.bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; }
+.bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; }
+.bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; }
 
-// .bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; }
-// .bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; }
-// .bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; }
-// .bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; }
-// .bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; }
-// .bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; }
-// .bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; }
-// .bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; }
-// .bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; }
+.bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; }
+.bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; }
+.bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; }
+.bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; }
+.bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; }
+.bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; }
+.bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; }
+.bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; }
+.bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; }
 
-// .bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; }
-// .bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; }
-// .bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; }
-// .bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; }
-// .bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; }
-// .bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; }
-// .bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
-// .bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
-// .bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
+.bd-green-100 { color: color-contrast($green-100); background-color: $green-100; }
+.bd-green-200 { color: color-contrast($green-200); background-color: $green-200; }
+.bd-green-300 { color: color-contrast($green-300); background-color: $green-300; }
+.bd-green-400 { color: color-contrast($green-400); background-color: $green-400; }
+.bd-green-500 { color: color-contrast($green-500); background-color: $green-500; }
+.bd-green-600 { color: color-contrast($green-600); background-color: $green-600; }
+.bd-green-700 { color: color-contrast($green-700); background-color: $green-700; }
+.bd-green-800 { color: color-contrast($green-800); background-color: $green-800; }
+.bd-green-900 { color: color-contrast($green-900); background-color: $green-900; }
 
-// .bd-gray-100 { color: color-contrast(var(--#{$prefix}gray-100)); background-color: var(--#{$prefix}gray-100); }
-// .bd-gray-200 { color: color-contrast(var(--#{$prefix}gray-200)); background-color: var(--#{$prefix}gray-200); }
-// .bd-gray-300 { color: color-contrast(var(--#{$prefix}gray-300)); background-color: var(--#{$prefix}gray-300); }
-// .bd-gray-400 { color: color-contrast(var(--#{$prefix}gray-400)); background-color: var(--#{$prefix}gray-400); }
-// .bd-gray-500 { color: color-contrast(var(--#{$prefix}gray-500)); background-color: var(--#{$prefix}gray-500); }
-// .bd-gray-600 { color: color-contrast(var(--#{$prefix}gray-600)); background-color: var(--#{$prefix}gray-600); }
-// .bd-gray-700 { color: color-contrast(var(--#{$prefix}gray-700)); background-color: var(--#{$prefix}gray-700); }
-// .bd-gray-800 { color: color-contrast(var(--#{$prefix}gray-800)); background-color: var(--#{$prefix}gray-800); }
-// .bd-gray-900 { color: color-contrast(var(--#{$prefix}gray-900)); background-color: var(--#{$prefix}gray-900); }
+.bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; }
+.bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; }
+.bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; }
+.bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; }
+.bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; }
+.bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; }
+.bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; }
+.bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; }
+.bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; }
 
-// .bd-white {
-//   color: color-contrast($white);
-//   background-color: $white;
+.bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; }
+.bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; }
+.bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; }
+.bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; }
+.bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; }
+.bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; }
+.bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
+.bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
+.bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
 
-//   // Astro HTML parser adds extra <p> tags to the content
-//   p {
-//     margin: 0;
-//   }
-// }
+.bd-gray-100 { color: color-contrast($gray-100); background-color: $gray-100; }
+.bd-gray-200 { color: color-contrast($gray-200); background-color: $gray-200; }
+.bd-gray-300 { color: color-contrast($gray-300); background-color: $gray-300; }
+.bd-gray-400 { color: color-contrast($gray-400); background-color: $gray-400; }
+.bd-gray-500 { color: color-contrast($gray-500); background-color: $gray-500; }
+.bd-gray-600 { color: color-contrast($gray-600); background-color: $gray-600; }
+.bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; }
+.bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
+.bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
 
-// .bd-black {
-//   color: color-contrast($black);
-//   background-color: $black;
+.bd-white {
+  color: color-contrast($white);
+  background-color: $white;
 
-//   // Astro HTML parser adds extra <p> tags to the content
-//   p {
-//     margin: 0;
-//   }
-// }
+  // Astro HTML parser adds extra <p> tags to the content
+  p {
+    margin: 0;
+  }
+}
+
+.bd-black {
+  color: color-contrast($black);
+  background-color: $black;
+
+  // Astro HTML parser adds extra <p> tags to the content
+  p {
+    margin: 0;
+  }
+}

site/src/scss/_component-examples.scss

@@ -145,13 +145,6 @@
     border: 1px solid color-mix(in srgb, var(--bd-violet) 30%, transparent);
   }
 
-  .bd-example-buttons {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: .5rem;
-    justify-content: start;
-  }
-
   // // Grid mixins
   // .example-container {
   //   width: 800px;
@@ -356,7 +349,7 @@
     background-color: var(--bd-pre-bg);
 
     @include media-breakpoint-up(md) {
-      padding: 1rem;
+      padding: .75rem 1.25rem;
       @include border-radius(calc(var(--bs-border-radius) - 1px));
     }
 
@@ -367,8 +360,8 @@
     }
 
     pre {
-      // padding: .25rem 0 .875rem;
-      // margin-top: .8125rem;
+      padding: .25rem 0 .875rem;
+      margin-top: .8125rem;
       margin-bottom: 0;
       overflow: overlay;
       white-space: pre;

site/src/scss/_content.scss

@@ -8,189 +8,187 @@
 // Bootstrap docs content theming
 //
 
-@layer custom {
-  .bd-content {
-    > h2,
-    > h3,
-    > h4 {
-      --bs-heading-color: var(--bs-fg);
+.bd-content {
+  > h2,
+  > h3,
+  > h4 {
+    --bs-heading-color: var(--bs-emphasis-color);
+  }
+
+  // Offset content from fixed navbar when jumping to headings
+  > h2:not(:first-child) {
+    margin-top: 3rem;
+  }
+
+  > h3 {
+    margin-top: 2rem;
+  }
+
+  > ul li,
+  > ol li {
+    margin-bottom: .25rem;
+
+    // stylelint-disable selector-max-type, selector-max-compound-selectors
+    > p ~ ul {
+      margin-top: -.5rem;
+      margin-bottom: 1rem;
+    }
+    // stylelint-enable selector-max-type, selector-max-compound-selectors
+  }
+
+  .bd-reference-table {
+    max-height: 420px;
+    overflow-y: auto;
+    font-size: .75rem;
+
+    thead th {
+      border-bottom-color: currentcolor;
     }
 
-    // Offset content from fixed navbar when jumping to headings
-    > h2:not(:first-child) {
-      margin-top: 3rem;
+    th,
+    td {
+      padding-inline: 0;
     }
 
-    > h3 {
-      margin-top: 2rem;
+    td {
+      font-family: var(--bs-font-monospace);
 
-      code {
-        font-weight: 600;
-        color: inherit;
-      }
-    }
-
-    > ul li,
-    > ol li {
-      margin-bottom: .25rem;
-
-      // stylelint-disable selector-max-type, selector-max-compound-selectors
-      > p ~ ul {
-        margin-top: -.5rem;
-        margin-bottom: 1rem;
-      }
-      // stylelint-enable selector-max-type, selector-max-compound-selectors
-    }
-
-    .bd-reference-table {
-      max-height: 420px;
-      overflow-y: auto;
-      font-size: .75rem;
-
-      thead th {
-        border-bottom-color: currentcolor;
-      }
-
-      th,
-      td {
-        padding-inline: 0;
-      }
-
-      td {
-        font-family: var(--bs-font-monospace);
-
-        &:first-child {
-          padding-inline-end: 1.5rem;
-          white-space: nowrap;
-        }
-
-        &:last-child {
-          color: light-dark(var(--bs-indigo-500), var(--bs-indigo-300));
-        }
-      }
-
-    }
-
-    // Override Bootstrap defaults
-    > .table,
-    > .table-responsive .table {
-      --bs-table-border-color: var(--bs-border-color);
-
-      max-width: 100%;
-      margin-bottom: 1.5rem;
-      @include font-size(.875rem);
-
-      @include media-breakpoint-down(lg) {
-        &.table-bordered {
-          border: 0;
-        }
-      }
-
-      th,
-      td {
-        &:first-child {
-          padding-left: 0;
-        }
-
-        &:not(:last-child) {
-          padding-right: 1.5rem;
-        }
-      }
-
-      th {
-        color: var(--bs-emphasis-color);
-        border-bottom-color: currentcolor;
-      }
-
-      &:not(.bd-callout) > strong { // Keep callout correct color when used within tables
-        color: var(--bs-emphasis-color);
-      }
-
-      // Prevent breaking of code
-      th,
-      td:first-child > code { // stylelint-disable-line selector-max-compound-selectors
+      &:first-child {
+        padding-inline-end: 1.5rem;
         white-space: nowrap;
       }
+
+      &:last-child {
+        color: light-dark(var(--bs-indigo-500), var(--bs-indigo-300));
+      }
     }
+
   }
 
-  .table-options {
-    td:nth-child(2) {
-      min-width: 160px;
+  // Override Bootstrap defaults
+  > .table,
+  > .table-responsive .table {
+    --bs-table-border-color: var(--bs-border-color);
+
+    max-width: 100%;
+    margin-bottom: 1.5rem;
+    @include font-size(.875rem);
+
+    @include media-breakpoint-down(lg) {
+      &.table-bordered {
+        border: 0;
+      }
+    }
+
+    th,
+    td {
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &:not(:last-child) {
+        padding-right: 1.5rem;
+      }
+    }
+
+    th {
+      color: var(--bs-emphasis-color);
+    }
+
+    &:not(.bd-callout) > strong { // Keep callout correct color when used within tables
+      color: var(--bs-emphasis-color);
+    }
+
+    // Prevent breaking of code
+    th,
+    td:first-child > code { // stylelint-disable-line selector-max-compound-selectors
+      white-space: nowrap;
     }
   }
+}
 
-  .table-utilities td:first-child {
+.table-options {
+  td:nth-child(2) {
+    min-width: 160px;
+  }
+}
+
+.table-options td:last-child,
+.table-utilities td:last-child {
+  min-width: 280px;
+}
+
+.table-swatches {
+  th {
+    color: var(--bs-emphasis-color);
+  }
+
+  td code {
     white-space: nowrap;
   }
 
-  .table-options td:last-child,
-  .table-utilities td:last-child {
-    min-width: 280px;
-  }
-
   // Astro HTML parser adds extra <p> tags to the content
   td p {
     margin: 0;
   }
-
-  .bd-title {
-    --bs-heading-color: var(--bs-fg);
-    @include font-size(3rem);
-  }
-
-  .bd-subtitle {
-    font-weight: 300;
-    @include font-size(1.5rem);
-  }
-
-  .bi {
-    width: 1em;
-    height: 1em;
-    vertical-align: -.125em;
-    fill: currentcolor;
-  }
-
-  .border-lg-start {
-    @include media-breakpoint-up(lg) {
-      border-left: var(--bs-border-width) solid var(--bs-border-color);
-    }
-  }
-
-  // stylelint-disable selector-no-qualifying-type
-  .bd-summary-link {
-    color: var(--bs-link-color);
-
-    &:hover,
-    details[open] > & {
-      color: var(--bs-link-hover-color);
-    }
-  }
-  // stylelint-enable selector-no-qualifying-type
-
-  // scss-docs-start custom-color-mode
-  // [data-bs-theme="blue"] {
-  //   --bs-body-color: var(--bs-white);
-  //   --bs-body-color-rgb: #{to-rgb($white)};
-  //   --bs-body-bg: var(--bs-blue);
-  //   --bs-body-bg-rgb: #{to-rgb($blue)};
-  //   --bs-tertiary-bg: #{$blue-600};
-
-  //   .dropdown-menu {
-  //     --bs-dropdown-bg: #{color.mix($blue-500, $blue-600)};
-  //     --bs-dropdown-link-active-bg: #{$blue-700};
-  //   }
-
-  //   .btn-secondary {
-  //     --bs-btn-bg: #{color.mix($gray-600, $blue-400)};
-  //     --bs-btn-border-color: #{rgba($white, .25)};
-  //     --bs-btn-hover-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -5%)}; // stylelint-disable-line scss/at-function-named-arguments
-  //     --bs-btn-hover-border-color: #{rgba($white, .25)};
-  //     --bs-btn-active-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -10%)}; // stylelint-disable-line scss/at-function-named-arguments
-  //     --bs-btn-active-border-color: #{rgba($white, .5)};
-  //     --bs-btn-focus-border-color: #{rgba($white, .5)};
-  //     --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
-  //   }
-  // }
-  // scss-docs-end custom-color-mode
 }
+
+.bd-title {
+  --bs-heading-color: var(--bs-emphasis-color);
+  @include font-size(3rem);
+}
+
+.bd-subtitle {
+  font-weight: 300;
+  @include font-size(1.5rem);
+}
+
+.bi {
+  width: 1em;
+  height: 1em;
+  vertical-align: -.125em;
+  fill: currentcolor;
+}
+
+.border-lg-start {
+  @include media-breakpoint-up(lg) {
+    border-left: var(--bs-border-width) solid var(--bs-border-color);
+  }
+}
+
+// stylelint-disable selector-no-qualifying-type
+.bd-summary-link {
+  color: var(--bs-link-color);
+
+  &:hover,
+  details[open] > & {
+    color: var(--bs-link-hover-color);
+  }
+}
+// stylelint-enable selector-no-qualifying-type
+
+// scss-docs-start custom-color-mode
+[data-bs-theme="blue"] {
+  --bs-body-color: var(--bs-white);
+  --bs-body-color-rgb: #{to-rgb($white)};
+  --bs-body-bg: var(--bs-blue);
+  --bs-body-bg-rgb: #{to-rgb($blue)};
+  --bs-tertiary-bg: #{$blue-600};
+
+  .dropdown-menu {
+    --bs-dropdown-bg: #{color.mix($blue-500, $blue-600)};
+    --bs-dropdown-link-active-bg: #{$blue-700};
+  }
+
+  .btn-secondary {
+    --bs-btn-bg: #{color.mix($gray-600, $blue-400)};
+    --bs-btn-border-color: #{rgba($white, .25)};
+    --bs-btn-hover-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -5%)}; // stylelint-disable-line scss/at-function-named-arguments
+    --bs-btn-hover-border-color: #{rgba($white, .25)};
+    --bs-btn-active-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -10%)}; // stylelint-disable-line scss/at-function-named-arguments
+    --bs-btn-active-border-color: #{rgba($white, .5)};
+    --bs-btn-focus-border-color: #{rgba($white, .5)};
+    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
+  }
+}
+// scss-docs-end custom-color-mode

site/src/scss/_footer.scss

@@ -2,17 +2,15 @@
 // Footer
 //
 
-@layer custom {
-  .bd-footer {
-    a {
-      color: var(--bs-body-color);
-      text-decoration: none;
+.bd-footer {
+  a {
+    color: var(--bs-body-color);
+    text-decoration: none;
 
-      &:hover,
-      &:focus {
-        color: var(--bs-link-hover-color);
-        text-decoration: underline;
-      }
+    &:hover,
+    &:focus {
+      color: var(--bs-link-hover-color);
+      text-decoration: underline;
     }
   }
 }

site/src/scss/_layout.scss

@@ -2,66 +2,60 @@
 @use "../../../scss/layout/breakpoints" as *;
 @use "variables" as *;
 
-@layer custom {
-  .bd-gutter {
-    --bs-gutter-x: #{$bd-gutter-x};
-  }
+.bd-gutter {
+  --bs-gutter-x: #{$bd-gutter-x};
+}
 
-  .bd-layout {
+.bd-layout {
 
-    @include media-breakpoint-up(lg) {
-      display: grid;
-      grid-template-areas: "sidebar main";
-      grid-template-columns: 1fr 5fr;
-      gap: $grid-gutter-width;
-    }
-
-    @include media-breakpoint-up(xl) {
-      gap: 2rem;
-    }
-  }
-
-  .bd-sidebar {
-    grid-area: sidebar;
-  }
-
-  .bd-main {
-    grid-area: main;
-
-    @include media-breakpoint-down(lg) {
-      max-width: 760px;
-      margin-inline: auto;
-    }
-
-    @include media-breakpoint-up(md) {
-      display: grid;
-      grid-template-areas:
-        "intro"
-        "toc"
-        "content";
-      grid-template-rows: auto auto 1fr;
-      gap: inherit;
-    }
-
-    @include media-breakpoint-up(lg) {
-      grid-template-areas:
-        "intro   toc"
-        "content toc";
-      grid-template-rows: auto 1fr;
-      grid-template-columns: 4fr 1fr;
-    }
-  }
-
-  .bd-intro {
-    grid-area: intro;
-  }
-
-  .bd-toc {
-    grid-area: toc;
-  }
-
-  .bd-content {
-    grid-area: content;
-    min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
+  @include media-breakpoint-up(lg) {
+    display: grid;
+    grid-template-areas: "sidebar main";
+    grid-template-columns: 1fr 5fr;
+    gap: $grid-gutter-width;
   }
 }
+
+.bd-sidebar {
+  grid-area: sidebar;
+}
+
+.bd-main {
+  grid-area: main;
+
+  @include media-breakpoint-down(lg) {
+    max-width: 760px;
+    margin-inline: auto;
+  }
+
+  @include media-breakpoint-up(md) {
+    display: grid;
+    grid-template-areas:
+      "intro"
+      "toc"
+      "content";
+    grid-template-rows: auto auto 1fr;
+    gap: inherit;
+  }
+
+  @include media-breakpoint-up(lg) {
+    grid-template-areas:
+      "intro   toc"
+      "content toc";
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 4fr 1fr;
+  }
+}
+
+.bd-intro {
+  grid-area: intro;
+}
+
+.bd-toc {
+  grid-area: toc;
+}
+
+.bd-content {
+  grid-area: content;
+  min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
+}

site/src/scss/_masthead.scss

@@ -7,129 +7,128 @@
 @use "../../../scss/mixins/transition" as *;
 @use "../../../scss/mixins/color-mode" as *;
 
-@layer custom {
-  .bd-masthead {
-    padding: 3rem 0;
-    // stylelint-disable
-    background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), var(--bs-body-bg) 85%),
-                      radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-blue-500) 50%, transparent), transparent 50%),
-                      radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent) 50%, transparent), transparent 50%),
-                      radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet) 50%, transparent), transparent 50%),
-                      radial-gradient(ellipse at center left, color-mix(in srgb, var(--bs-pink-500) 50%, transparent), transparent 50%);
-    // stylelint-enable
+.bd-masthead {
+  --bd-pink-rgb: #{to-rgb($pink)};
+  padding: 3rem 0;
+  // stylelint-disable
+  background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), var(--bs-body-bg) 85%),
+                    radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-blue-500) 50%, transparent), transparent 50%),
+                    radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent) 50%, transparent), transparent 50%),
+                    radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet) 50%, transparent), transparent 50%),
+                    radial-gradient(ellipse at center left, color-mix(in srgb, var(--bs-pink-500) 50%, transparent), transparent 50%);
+  // stylelint-enable
 
-    h1 {
-      --bs-heading-color: var(--bs-emphasis-color);
-      @include font-size(4rem);
+  h1 {
+    --bs-heading-color: var(--bs-emphasis-color);
+    @include font-size(4rem);
+  }
+
+  .lead {
+    @include font-size(1rem);
+    font-weight: 400;
+    color: var(--bs-secondary-color);
+  }
+
+  .bd-code-snippet {
+    margin: 0;
+    border-color: var(--bs-border-color-translucent);
+    border-width: 1px;
+    @include border-radius(.5rem);
+  }
+
+  .highlight {
+    width: 100%;
+    padding: .5rem 1rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background-color: rgba(var(--bs-body-color-rgb), .075);
+    @include border-radius(calc(.5rem - 1px));
+
+    @include media-breakpoint-up(lg) {
+      padding-right: 4rem;
     }
 
-    .lead {
-      @include font-size(1rem);
-      font-weight: 400;
-      color: var(--bs-secondary-color);
-    }
-
-    .bd-code-snippet {
-      margin: 0;
-      border-color: var(--bs-border-color-translucent);
-      border-width: 1px;
-      @include border-radius(.5rem);
-    }
-
-    .highlight {
-      width: 100%;
-      padding: .5rem 1rem;
+    pre {
+      padding: 0;
+      margin: .625rem 0;
       overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      background-color: rgba(var(--bs-body-color-rgb), .075);
-      @include border-radius(calc(.5rem - 1px));
-
-      @include media-breakpoint-up(lg) {
-        padding-right: 4rem;
-      }
-
-      pre {
-        padding: 0;
-        margin: .625rem 0;
-        overflow: hidden;
-      }
-    }
-    .btn-clipboard {
-      position: absolute;
-      top: -.625rem;
-      right: 0;
-      background-color: transparent;
-    }
-
-    #carbonads { // stylelint-disable-line selector-max-id
-      max-width: 400px;
-      margin-block: 2rem;
-      margin-inline: auto;
-    }
-
-    @include media-breakpoint-up(md) {
-      .lead {
-        @include font-size(1.5rem);
-      }
     }
   }
+  .btn-clipboard {
+    position: absolute;
+    top: -.625rem;
+    right: 0;
+    background-color: transparent;
+  }
 
-  .masthead-followup {
-    h2,
-    h3,
-    h4 {
-      --bs-heading-color: var(--bs-emphasis-color);
-    }
+  #carbonads { // stylelint-disable-line selector-max-id
+    max-width: 400px;
+    margin-block: 2rem;
+    margin-inline: auto;
+  }
 
+  @include media-breakpoint-up(md) {
     .lead {
-      @include font-size(1rem);
-    }
-
-    @include media-breakpoint-up(md) {
-      .lead {
-        @include font-size(1.25rem);
-      }
+      @include font-size(1.5rem);
     }
   }
-
-  .masthead-followup-icon {
-    padding: 1rem;
-    color: rgba(var(--bg-rgb), 1);
-    background-color: rgba(var(--bg-rgb), .1);
-    background-blend-mode: multiply;
-    @include border-radius(1rem);
-    mix-blend-mode: darken;
-
-    svg {
-      filter: drop-shadow(0 1px 1px var(--bs-body-bg));
-    }
-  }
-
-  .masthead-notice {
-    background-color: var(--bd-accent);
-    box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75);
-  }
-
-  .animate-img {
-    > img {
-      @include transition(transform .2s ease-in-out);
-    }
-
-    &:hover > img {
-      transform: scale(1.1);
-    }
-
-    &:active > img {
-      transform: scale(1);
-    }
-  }
-
-  // @if $enable-dark-mode {
-  //   [data-bs-theme="dark"] {
-  //     .masthead-followup-icon {
-  //       mix-blend-mode: lighten;
-  //     }
-  //   }
-  // }
 }
+
+.masthead-followup {
+  h2,
+  h3,
+  h4 {
+    --bs-heading-color: var(--bs-emphasis-color);
+  }
+
+  .lead {
+    @include font-size(1rem);
+  }
+
+  @include media-breakpoint-up(md) {
+    .lead {
+      @include font-size(1.25rem);
+    }
+  }
+}
+
+.masthead-followup-icon {
+  padding: 1rem;
+  color: rgba(var(--bg-rgb), 1);
+  background-color: rgba(var(--bg-rgb), .1);
+  background-blend-mode: multiply;
+  @include border-radius(1rem);
+  mix-blend-mode: darken;
+
+  svg {
+    filter: drop-shadow(0 1px 1px var(--bs-body-bg));
+  }
+}
+
+.masthead-notice {
+  background-color: var(--bd-accent);
+  box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75);
+}
+
+.animate-img {
+  > img {
+    @include transition(transform .2s ease-in-out);
+  }
+
+  &:hover > img {
+    transform: scale(1.1);
+  }
+
+  &:active > img {
+    transform: scale(1);
+  }
+}
+
+// @if $enable-dark-mode {
+//   [data-bs-theme="dark"] {
+//     .masthead-followup-icon {
+//       mix-blend-mode: lighten;
+//     }
+//   }
+// }

site/src/scss/_navbar.scss

@@ -6,139 +6,137 @@
 @use "../../../scss/layout/breakpoints" as *;
 @use "../../../scss/vendor/rfs" as *;
 
-@layer custom {
-  .bd-navbar {
-    padding: .75rem 0;
-    background-color: transparent;
-    box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+.bd-navbar {
+  padding: .75rem 0;
+  background-color: transparent;
+  box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
 
-    @media (forced-colors) {
-      background-color: Canvas;
+  @media (forced-colors) {
+    background-color: Canvas;
+  }
+
+  &::after {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    display: block;
+    content: "";
+    background-image: linear-gradient(var(--bd-violet), color-mix(in srgb, var(--bd-violet), transparent 5%));
+    // background-image: linear-gradient(color-mix(in srgb, var(--bs-gray-900), $black 10%), color-mix(in srgb, var(--bs-gray-900), $black 15%));
+  }
+
+  .bd-navbar-toggle {
+    @include media-breakpoint-down(lg) {
+      width: 4.25rem;
+    }
+  }
+
+  .navbar-toggler {
+    padding: 0;
+    margin-right: -.5rem;
+    border: 0;
+
+    &:first-child {
+      margin-left: -.5rem;
     }
 
-    &::after {
-      position: absolute;
-      inset: 0;
-      z-index: -1;
-      display: block;
-      content: "";
-      background-image: linear-gradient(var(--bd-violet), color-mix(in srgb, var(--bd-violet), transparent 5%));
-      // background-image: linear-gradient(color-mix(in srgb, var(--bs-gray-900), $black 10%), color-mix(in srgb, var(--bs-gray-900), $black 15%));
+    .bi {
+      width: 1.5rem;
+      height: 1.5rem;
     }
 
-    .bd-navbar-toggle {
-      @include media-breakpoint-down(lg) {
-        width: 4.25rem;
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .navbar-brand {
+    color: $white;
+    @include transition(transform .2s ease-in-out);
+
+    &:hover {
+      transform: rotate(-5deg) scale(1.1);
+    }
+  }
+
+  .navbar-toggler,
+  .nav-link {
+    padding-right: $spacer * .25;
+    padding-left: $spacer * .25;
+    color: rgba($white, .85);
+
+    &:hover,
+    &:focus {
+      color: $white;
+    }
+
+    &.active {
+      font-weight: 600;
+      color: $white;
+    }
+  }
+
+  .navbar-nav-svg {
+    display: inline-block;
+    vertical-align: -.125rem;
+  }
+
+  .offcanvas-lg {
+    background-color: var(--bd-violet-bg);
+    border-left: 0;
+
+    @include media-breakpoint-down(lg) {
+      box-shadow: var(--#{$prefix}box-shadow-lg);
+    }
+  }
+
+  .dropdown-toggle {
+    &:focus:not(:focus-visible) {
+      outline: 0;
+    }
+  }
+
+  .dropdown-menu {
+    --bs-dropdown-min-width: 12rem;
+    --bs-dropdown-padding-x: .25rem;
+    --bs-dropdown-padding-y: .25rem;
+    --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
+    --bs-dropdown-link-active-bg: var(--bd-violet);
+    @include rfs(.875rem, --bs-dropdown-font-size);
+    @include font-size(.875rem);
+    @include border-radius(.5rem);
+    box-shadow: var(--#{$prefix}dropdown-box-shadow);
+
+    li + li {
+      margin-top: .125rem;
+    }
+
+    .dropdown-item {
+      @include border-radius(.25rem);
+
+      &:active {
+        .bi {
+          color: inherit !important; // stylelint-disable-line declaration-no-important
+        }
       }
     }
 
-    .navbar-toggler {
-      padding: 0;
-      margin-right: -.5rem;
-      border: 0;
-
-      &:first-child {
-        margin-left: -.5rem;
-      }
+    .active {
+      font-weight: 600;
 
       .bi {
-        width: 1.5rem;
-        height: 1.5rem;
+        display: block !important; // stylelint-disable-line declaration-no-important
       }
-
-      &:focus {
-        box-shadow: none;
-      }
-    }
-
-    .navbar-brand {
-      color: $white;
-      @include transition(transform .2s ease-in-out);
-
-      &:hover {
-        transform: rotate(-5deg) scale(1.1);
-      }
-    }
-
-    .navbar-toggler,
-    .nav-link {
-      padding-right: $spacer * .25;
-      padding-left: $spacer * .25;
-      color: rgba($white, .85);
-
-      &:hover,
-      &:focus {
-        color: $white;
-      }
-
-      &.active {
-        font-weight: 600;
-        color: $white;
-      }
-    }
-
-    .navbar-nav-svg {
-      display: inline-block;
-      vertical-align: -.125rem;
-    }
-
-    .offcanvas-lg {
-      background-color: var(--bd-violet-bg);
-      border-left: 0;
-
-      @include media-breakpoint-down(lg) {
-        box-shadow: var(--#{$prefix}box-shadow-lg);
-      }
-    }
-
-    .dropdown-toggle {
-      &:focus:not(:focus-visible) {
-        outline: 0;
-      }
-    }
-
-    .dropdown-menu {
-      --bs-dropdown-min-width: 12rem;
-      --bs-dropdown-padding-x: .25rem;
-      --bs-dropdown-padding-y: .25rem;
-      --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
-      --bs-dropdown-link-active-bg: var(--bd-violet);
-      @include rfs(.875rem, --bs-dropdown-font-size);
-      @include font-size(.875rem);
-      @include border-radius(.5rem);
-      box-shadow: var(--#{$prefix}dropdown-box-shadow);
-
-      li + li {
-        margin-top: .125rem;
-      }
-
-      .dropdown-item {
-        @include border-radius(.25rem);
-
-        &:active {
-          .bi {
-            color: inherit !important; // stylelint-disable-line declaration-no-important
-          }
-        }
-      }
-
-      .active {
-        font-weight: 600;
-
-        .bi {
-          display: block !important; // stylelint-disable-line declaration-no-important
-        }
-      }
-    }
-
-    .dropdown-menu-end {
-      --bs-dropdown-min-width: 8rem;
     }
   }
 
-  @include color-mode(dark) {
-    .bd-navbar {
-      box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
-    }
+  .dropdown-menu-end {
+    --bs-dropdown-min-width: 8rem;
+  }
+}
+
+@include color-mode(dark) {
+  .bd-navbar {
+    box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
   }
 }