Combine original z-index content with approach content

Co-authored-by: mdo <98681+mdo@users.noreply.github.com>

.bundlewatch.config.json

@@ -2,15 +2,15 @@
   "files": [
     {
       "path": "./dist/css/bootstrap-grid.css",
-      "maxSize": "7.75 kB"
+      "maxSize": "10.0 kB"
     },
     {
       "path": "./dist/css/bootstrap-grid.min.css",
-      "maxSize": "6.75 kB"
+      "maxSize": "9.0 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.css",
-      "maxSize": "4.5 kB"
+      "maxSize": "5.5 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.min.css",
@@ -18,19 +18,19 @@
     },
     {
       "path": "./dist/css/bootstrap-utilities.css",
-      "maxSize": "13.0 kB"
+      "maxSize": "15.25 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
-      "maxSize": "12.0 kB"
+      "maxSize": "13.5 kB"
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "36.0 kB"
+      "maxSize": "37.5 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "32.0 kB"
+      "maxSize": "33.75 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

.cspell.json

@@ -48,6 +48,7 @@
     "favicons",
     "fieldsets",
     "flexbox",
+    "frontmatter",
     "fullscreen",
     "getbootstrap",
     "Grayscale",

.github/workflows/browserstack.yml

@@ -27,7 +27,7 @@ jobs:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: "${{ env.NODE }}"
           cache: npm

.github/workflows/bundlewatch.yml

@@ -25,7 +25,7 @@ jobs:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: "${{ env.NODE }}"
           cache: npm

.github/workflows/codeql.yml

@@ -29,16 +29,16 @@ jobs:
           persist-credentials: false
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/init@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
         with:
           config-file: ./.github/codeql/codeql-config.yml
           languages: "javascript"
           queries: +security-and-quality
 
       - name: Autobuild
-        uses: github/codeql-action/autobuild@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/autobuild@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/analyze@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
         with:
           category: "/language:javascript"

.github/workflows/cspell.yml

@@ -28,7 +28,7 @@ jobs:
           persist-credentials: false
 
       - name: Run cspell
-        uses: streetsidesoftware/cspell-action@dcd03dc3e8a59ec2e360d0c62db517baa0b4bb6d # v7.2.0
+        uses: streetsidesoftware/cspell-action@3294df585d3d639e30f3bc019cb11940b9866e95 # v8.0.0
         with:
           config: ".cspell.json"
           files: "**/*.{md,mdx}"

.github/workflows/css.yml

@@ -25,7 +25,7 @@ jobs:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: "${{ env.NODE }}"
           cache: npm

.github/workflows/docs.yml

@@ -25,13 +25,11 @@ jobs:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: "${{ env.NODE }}"
           cache: npm
 
-      - run: java -version
-
       - name: Install npm dependencies
         run: npm ci
 
@@ -39,10 +37,10 @@ jobs:
         run: npm run docs-build
 
       - name: Validate HTML
-        run: npm run docs-vnu
+        run: npm run docs-html-validate
 
       - name: Run linkinator
-        uses: JustinBeckwith/linkinator-action@3d5ba091319fa7b0ac14703761eebb7d100e6f6d # v1.11.0
+        uses: JustinBeckwith/linkinator-action@af984b9f30f63e796ae2ea5be5e07cb587f1bbd9 # v2.3
         with:
           paths: _site
           recurse: true

.github/workflows/issue-close-require.yml

@@ -17,7 +17,7 @@ jobs:
     if: github.repository == 'twbs/bootstrap'
     steps:
       - name: awaiting reply
-        uses: actions-cool/issues-helper@45d75b6cf72bf4f254be6230cb887ad002702491 # v3.6.3
+        uses: actions-cool/issues-helper@9861779a695cf1898bd984c727f685f351cfc372 # v3.7.2
         with:
           actions: "close-issues"
           labels: "awaiting-reply"

.github/workflows/issue-labeled.yml

@@ -18,7 +18,7 @@ jobs:
     steps:
       - name: awaiting reply
         if: github.event.label.name == 'needs-example'
-        uses: actions-cool/issues-helper@45d75b6cf72bf4f254be6230cb887ad002702491 # v3.6.3
+        uses: actions-cool/issues-helper@9861779a695cf1898bd984c727f685f351cfc372 # v3.7.2
         with:
           actions: "create-comment"
           token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/js.yml

@@ -30,7 +30,7 @@ jobs:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: ${{ env.NODE }}
           cache: npm

.github/workflows/lint.yml

@@ -25,7 +25,7 @@ jobs:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: "${{ env.NODE }}"
           cache: npm

.github/workflows/scorecard.yml

@@ -39,7 +39,7 @@ jobs:
           persist-credentials: false
 
       - name: "Run analysis"
-        uses: ossf/scorecard-action@05b42c624433fc40578a4040d5cf5e36ddca8cde # v2.4.2
+        uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
         with:
           results_file: results.sarif
           results_format: sarif
@@ -64,7 +64,7 @@ jobs:
       # Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF
       # format to the repository Actions tab.
       - name: "Upload artifact"
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
         with:
           name: SARIF file
           path: results.sarif
@@ -73,6 +73,6 @@ jobs:
       # Upload the results to GitHub's code scanning dashboard (optional).
       # Commenting out will disable upload of results to your repo's Code Scanning dashboard
       - name: "Upload to code-scanning"
-        uses: github/codeql-action/upload-sarif@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/upload-sarif@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
         with:
           sarif_file: results.sarif

.gitignore

@@ -18,6 +18,7 @@
 .cache
 .DS_Store
 .idea
+.nvmrc
 .project
 .settings
 .tmproj

README.md

@@ -87,34 +87,18 @@ Within the download you’ll find the following directories and files, logically
   │   ├── bootstrap-grid.css.map
   │   ├── bootstrap-grid.min.css
   │   ├── bootstrap-grid.min.css.map
-  │   ├── bootstrap-grid.rtl.css
-  │   ├── bootstrap-grid.rtl.css.map
-  │   ├── bootstrap-grid.rtl.min.css
-  │   ├── bootstrap-grid.rtl.min.css.map
   │   ├── bootstrap-reboot.css
   │   ├── bootstrap-reboot.css.map
   │   ├── bootstrap-reboot.min.css
   │   ├── bootstrap-reboot.min.css.map
-  │   ├── bootstrap-reboot.rtl.css
-  │   ├── bootstrap-reboot.rtl.css.map
-  │   ├── bootstrap-reboot.rtl.min.css
-  │   ├── bootstrap-reboot.rtl.min.css.map
   │   ├── bootstrap-utilities.css
   │   ├── bootstrap-utilities.css.map
   │   ├── bootstrap-utilities.min.css
   │   ├── bootstrap-utilities.min.css.map
-  │   ├── bootstrap-utilities.rtl.css
-  │   ├── bootstrap-utilities.rtl.css.map
-  │   ├── bootstrap-utilities.rtl.min.css
-  │   ├── bootstrap-utilities.rtl.min.css.map
   │   ├── bootstrap.css
   │   ├── bootstrap.css.map
   │   ├── bootstrap.min.css
-  │   ├── bootstrap.min.css.map
-  │   ├── bootstrap.rtl.css
-  │   ├── bootstrap.rtl.css.map
-  │   ├── bootstrap.rtl.min.css
-  │   └── bootstrap.rtl.min.css.map
+  │   └── bootstrap.min.css.map
   └── js/
       ├── bootstrap.bundle.js
       ├── bootstrap.bundle.js.map
@@ -131,7 +115,7 @@ Within the download you’ll find the following directories and files, logically
   ```
 </details>
 
-We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers’ developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/docs/v2/).
+We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/docs/v2/). All CSS files work for both LTR and RTL layouts thanks to logical properties—simply set `dir="rtl"` on your HTML element.
 
 
 ## Bugs and feature requests

build/generate-sri.mjs

@@ -29,10 +29,6 @@ const files = [
     file: 'dist/css/bootstrap.min.css',
     configPropertyName: 'css_hash'
   },
-  {
-    file: 'dist/css/bootstrap.rtl.min.css',
-    configPropertyName: 'css_rtl_hash'
-  },
   {
     file: 'dist/js/bootstrap.min.js',
     configPropertyName: 'js_hash'

build/generate-utilities-json.mjs

@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+
+/**
+ * Generate utilities metadata JSON from Sass
+ * This script compiles a special Sass file that outputs utility information as CSS comments,
+ * then extracts and saves it as JSON for documentation use.
+ */
+
+import { readFileSync, writeFileSync, unlinkSync } from 'node:fs'
+import { execSync } from 'node:child_process'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.join(__dirname, '..')
+
+// Compile the metadata generator SCSS file
+console.log('Compiling utilities metadata...')
+
+try {
+  execSync(
+    'sass --style expanded --no-source-map build/generate-utilities-metadata.scss:dist/css/utilities-metadata.tmp.css',
+    { cwd: rootDir, stdio: 'inherit' }
+  )
+} catch {
+  console.error('Failed to compile metadata SCSS')
+  process.exit(1)
+}
+
+// Read the compiled CSS
+const cssPath = path.join(rootDir, 'dist/css/utilities-metadata.tmp.css')
+const cssContent = readFileSync(cssPath, 'utf8')
+
+// Extract JSON from the CSS comment
+const startMarker = 'BOOTSTRAP-UTILITIES-METADATA-START'
+const endMarker = 'BOOTSTRAP-UTILITIES-METADATA-END'
+
+const startIndex = cssContent.indexOf(startMarker)
+const endIndex = cssContent.indexOf(endMarker)
+
+if (startIndex === -1 || endIndex === -1) {
+  console.error('Could not find metadata markers in compiled CSS')
+  process.exit(1)
+}
+
+// Extract JSON content between markers
+const jsonContent = cssContent
+  .slice(startIndex + startMarker.length, endIndex)
+  .trim()
+
+// Validate JSON
+try {
+  const parsed = JSON.parse(jsonContent)
+  console.log(`✓ Extracted metadata for ${Object.keys(parsed.utilities).length} utilities`)
+
+  // Write to JSON file
+  const outputPath = path.join(rootDir, 'dist/css/bootstrap-utilities.metadata.json')
+  writeFileSync(outputPath, JSON.stringify(parsed, null, 2))
+  console.log(`✓ Wrote metadata to ${outputPath}`)
+
+  // Clean up temporary CSS files
+  try {
+    unlinkSync(cssPath)
+  } catch {
+    // File may not exist
+  }
+
+  // Also clean up any other temporary variants that may have been created
+  const tempFiles = [
+    'dist/css/utilities-metadata.tmp.min.css',
+    'dist/css/utilities-metadata.tmp.min.css.map'
+  ]
+
+  for (const file of tempFiles) {
+    try {
+      unlinkSync(path.join(rootDir, file))
+    } catch {
+      // File may not exist, ignore
+    }
+  }
+
+  console.log('✓ Cleaned up temporary files')
+} catch (error) {
+  console.error('Failed to parse extracted JSON:', error.message)
+  console.error('Extracted content:', jsonContent.slice(0, 500))
+  process.exit(1)
+}

build/generate-utilities-metadata.scss

@@ -0,0 +1,112 @@
+// Generate utilities metadata JSON for documentation
+// This file is compiled to extract utility information without generating CSS
+
+@use "sass:map";
+@use "sass:list";
+@use "sass:string";
+@use "sass:meta";
+@use "../scss/config" as *;
+@use "../scss/colors" as *;
+@use "../scss/variables" as *;
+@use "../scss/functions" as *;
+@use "../scss/theme" as *;
+@use "../scss/utilities" as *;
+
+// Access the utilities map
+$utilities-map: $utilities !default;
+
+// Start JSON output
+$json: '{"utilities":{' !default;
+
+$utility-count: 0 !default;
+$total-utilities: list.length(map.keys($utilities-map)) !default;
+
+@each $key, $utility in $utilities-map {
+  $utility-count: $utility-count + 1;
+
+  // Skip if utility is null or false (disabled)
+  @if $utility {
+    // Extract class prefix
+    $class: if(map.has-key($utility, "class"), map.get($utility, "class"), $key);
+
+    // Extract property
+    $property: if(map.has-key($utility, "property"), map.get($utility, "property"), null);
+
+    // Extract values
+    $values: if(map.has-key($utility, "values"), map.get($utility, "values"), null);
+
+    // Generate class list
+    $classes: "";
+    @if $values {
+      @if meta.type-of($values) == "map" {
+        $value-keys: map.keys($values);
+        $first: true;
+        @each $value-key in $value-keys {
+          @if not $first {
+            $classes: $classes + ", ";
+          }
+          $class-name: if($value-key == "null" or $value-key == null, $class, "#{$class}-#{$value-key}");
+          $classes: $classes + '"' + $class-name + '"';
+          $first: false;
+        }
+      } @else if meta.type-of($values) == "list" {
+        $first: true;
+        @each $value in $values {
+          @if not $first {
+            $classes: $classes + ", ";
+          }
+          $class-name: "#{$class}-#{$value}";
+          $classes: $classes + '"' + $class-name + '"';
+          $first: false;
+        }
+      }
+    }
+
+    // Build JSON entry
+    $json: $json + '"' + $key + '":{"class":"' + $class + '"';
+
+    @if $property {
+      @if meta.type-of($property) == "string" {
+        $json: $json + ',"property":"' + $property + '"';
+      } @else if meta.type-of($property) == "list" {
+        $property-str: "";
+        $first: true;
+        @each $prop in $property {
+          @if not $first {
+            $property-str: $property-str + " ";
+          }
+          $property-str: $property-str + $prop;
+          $first: false;
+        }
+        $json: $json + ',"property":"' + $property-str + '"';
+      }
+      // Skip map properties as they're complex and don't translate to JSON well
+    }
+
+    @if $classes != "" {
+      $json: $json + ',"classes":[' + $classes + "]";
+    } @else {
+      $json: $json + ',"classes":[]';
+    }
+
+    $json: $json + "}";
+
+    @if $utility-count < $total-utilities {
+      $json: $json + ",";
+    }
+  }
+}
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$json: $json + "}}";
+
+// Output as CSS comment so it appears in compiled file
+
+/*! BOOTSTRAP-UTILITIES-METADATA-START
+#{$json}
+BOOTSTRAP-UTILITIES-METADATA-END */
+
+// Prevent any actual CSS output
+.bootstrap-utilities-metadata-generator {
+  content: "This file should not generate CSS, only metadata comments";
+}

build/html-validate.mjs

@@ -0,0 +1,104 @@
+#!/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/postcss.config.mjs

@@ -10,8 +10,7 @@ export default context => {
     plugins: {
       autoprefixer: {
         cascade: false
-      },
-      rtlcss: context.env === 'RTL'
+      }
     }
   }
 }

build/vnu-jar.mjs

@@ -1,66 +0,0 @@
-#!/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)
-})

config.yml

@@ -36,8 +36,6 @@ cdn:
   # See https://www.srihash.org for info on how to generate the hashes
   css:                  "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
   css_hash:             "sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
-  css_rtl:              "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css"
-  css_rtl_hash:         "sha384-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW"
   js:                   "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"
   js_hash:              "sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y"
   js_bundle:            "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"

package.json

@@ -41,19 +41,17 @@
   "scripts": {
     "start": "npm-run-all --parallel watch docs-serve",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
-    "css": "npm-run-all css-compile css-prefix css-rtl css-minify",
+    "css": "npm-run-all css-compile css-prefix css-minify css-docs",
     "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/bootstrap.scss:dist/css/bootstrap.css scss/bootstrap-grid.scss:dist/css/bootstrap-grid.css scss/bootstrap-reboot.scss:dist/css/bootstrap-reboot.css scss/bootstrap-utilities.scss:dist/css/bootstrap-utilities.css",
-    "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
+    "css-docs": "node build/generate-utilities-json.mjs",
     "css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
     "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
     "css-lint-vars": "fusv scss/ site/src/scss/",
     "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
-    "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
-    "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
+    "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.tmp.css\"",
     "css-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*",
-    "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
+    "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.tmp.css\"",
     "css-prefix-examples": "postcss --config build/postcss.config.mjs --replace \"site/src/assets/examples/**/*.css\"",
-    "css-prefix-examples-rtl": "cross-env-shell NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"site/src/assets/examples/\" --ext \".rtl.css\" --base \"site/src/assets/examples/\" \"site/src/assets/examples/{blog,carousel,dashboard,cheatsheet}/*.css\" \"!site/src/assets/examples/{blog,carousel,dashboard,cheatsheet}/*.rtl.css\"",
     "css-test": "jasmine --config=scss/tests/jasmine.js",
     "js": "npm-run-all js-compile js-minify",
     "js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
@@ -77,8 +75,8 @@
     "docs": "npm-run-all docs-build docs-lint",
     "docs-build": "npm run astro-build",
     "docs-compile": "npm run docs-build",
-    "docs-vnu": "node build/vnu-jar.mjs",
-    "docs-lint": "npm-run-all docs-prettier-check docs-vnu",
+    "docs-html-validate": "node build/html-validate.mjs",
+    "docs-lint": "npm-run-all docs-prettier-check docs-html-validate",
     "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",
@@ -95,7 +93,6 @@
     "netlify": "npm-run-all dist release-sri astro-build",
     "watch": "npm-run-all --parallel watch-*",
     "watch-css-main": "nodemon --watch scss/ --ext scss --exec \"npm-run-all css-lint css-compile css-prefix\"",
-    "watch-css-dist": "nodemon --watch dist/css/ --ext css --ignore \"dist/css/*.rtl.*\" --exec \"npm run css-rtl\"",
     "watch-css-docs": "nodemon --watch site/src/scss/ --ext scss --exec \"npm run css-lint\"",
     "watch-css-test": "nodemon --watch scss/ --ext scss,js --exec \"npm run css-test\"",
     "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",
@@ -108,31 +105,31 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.4",
-    "@astrojs/markdown-remark": "^6.3.6",
-    "@astrojs/mdx": "^4.3.5",
+    "@astrojs/check": "^0.9.5",
+    "@astrojs/markdown-remark": "^6.3.8",
+    "@astrojs/mdx": "^4.3.10",
     "@astrojs/prism": "^3.3.0",
     "@astrojs/sitemap": "^3.6.0",
     "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
     "@docsearch/js": "^3.9.0",
     "@popperjs/core": "^2.11.8",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-replace": "^6.0.3",
     "@stackblitz/sdk": "^1.11.0",
     "@types/js-yaml": "^4.0.9",
     "@types/mime": "^4.0.0",
     "@types/prismjs": "^1.26.5",
-    "astro": "^5.13.9",
-    "astro-auto-import": "^0.4.4",
-    "autoprefixer": "^10.4.21",
+    "astro": "^5.15.6",
+    "astro-auto-import": "^0.4.5",
+    "autoprefixer": "^10.4.22",
     "bundlewatch": "^0.4.1",
     "clean-css-cli": "^5.6.3",
     "clipboard": "^2.0.11",
-    "cross-env": "^10.0.0",
+    "cross-env": "^10.1.0",
     "eslint": "8.57.1",
     "eslint-config-xo": "0.45.0",
     "eslint-plugin-html": "^8.1.3",
@@ -141,13 +138,14 @@
     "eslint-plugin-unicorn": "56.0.1",
     "find-unused-sass-variables": "^6.1.0",
     "github-slugger": "^2.0.0",
-    "globby": "^14.1.0",
+    "globby": "^15.0.0",
     "hammer-simulator": "0.0.1",
+    "html-validate": "^8.24.1",
     "htmlparser2": "^10.0.0",
     "image-size": "^2.0.2",
     "ip": "^2.0.1",
-    "jasmine": "^5.10.0",
-    "js-yaml": "^4.1.0",
+    "jasmine": "^5.12.0",
+    "js-yaml": "^4.1.1",
     "karma": "^6.4.4",
     "karma-browserstack-launcher": "1.4.0",
     "karma-chrome-launcher": "^3.2.0",
@@ -160,7 +158,7 @@
     "lockfile-lint": "^4.14.1",
     "markdownlint-cli": "^0.45.0",
     "mime": "^4.1.0",
-    "nodemon": "^3.1.10",
+    "nodemon": "^3.1.11",
     "npm-run-all2": "^8.0.4",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
@@ -169,18 +167,16 @@
     "rehype-autolink-headings": "^7.1.0",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",
-    "rollup": "^4.52.0",
+    "rollup": "^4.53.2",
     "rollup-plugin-istanbul": "^5.0.0",
-    "rtlcss": "^4.3.0",
     "sass": "^1.90.0",
     "sass-true": "^9.0.0",
     "shelljs": "^0.10.0",
-    "stylelint": "^16.24.0",
+    "stylelint": "^16.25.0",
     "stylelint-config-twbs-bootstrap": "^16.1.0",
-    "terser": "^5.44.0",
+    "terser": "^5.44.1",
     "unist-util-visit": "^5.0.0",
-    "vnu-jar": "24.10.17",
-    "zod": "^4.1.9"
+    "zod": "^4.1.12"
   },
   "files": [
     "dist/{css,js}/*.{css,js,map}",
@@ -206,5 +202,8 @@
     "peerDependencies": {
       "@popperjs/core": "^2.11.8"
     }
+  },
+  "overrides": {
+    "volar-service-emmet": "0.0.63"
   }
 }

scss/_accordion.scss

@@ -10,8 +10,8 @@
 // scss-docs-start accordion-variables
 $accordion-padding-y:                     1rem !default;
 $accordion-padding-x:                     1.25rem !default;
-$accordion-color:                         var(--#{$prefix}body-color) !default;
-$accordion-bg:                            var(--#{$prefix}body-bg) !default;
+$accordion-color:                         var(--#{$prefix}color-body) !default;
+$accordion-bg:                            var(--#{$prefix}bg-body) !default;
 $accordion-border-width:                  var(--#{$prefix}border-width) !default;
 $accordion-border-color:                  var(--#{$prefix}border-color) !default;
 $accordion-border-radius:                 var(--#{$prefix}border-radius-lg) !default;
@@ -70,7 +70,7 @@ $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w
     padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
     @include font-size($font-size-base);
     color: var(--#{$prefix}accordion-btn-color);
-    text-align: left; // Reset button style
+    text-align: start; // Reset button style
     background-color: var(--#{$prefix}accordion-btn-bg);
     border: 0;
     @include border-radius(0);
@@ -93,7 +93,7 @@ $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w
       flex-shrink: 0;
       width: var(--#{$prefix}accordion-btn-icon-width);
       height: var(--#{$prefix}accordion-btn-icon-width);
-      margin-left: auto;
+      margin-inline-start: auto;
       content: "";
       background-color: var(--#{$prefix}accordion-btn-color);
       mask: var(--#{$prefix}accordion-btn-icon) no-repeat center 100%;
@@ -129,7 +129,7 @@ $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w
     }
 
     &:not(:first-of-type) {
-      border-top: 0;
+      border-block-start: 0;
     }
 
     // Only set a border-radius on the last item if the accordion is collapsed
@@ -159,12 +159,11 @@ $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w
 
   .accordion-flush {
     > .accordion-item {
-      border-right: 0;
-      border-left: 0;
+      border-inline: 0;
       @include border-radius(0);
 
-      &:first-child { border-top: 0; }
-      &:last-child { border-bottom: 0; }
+      &:first-child { border-block-start: 0; }
+      &:last-child { border-block-end: 0; }
 
       // stylelint-disable selector-max-class
       > .accordion-collapse,

scss/_alert.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "config" as *;
+@use "theme" as *;
 @use "variables" as *;
 @use "mixins/border-radius" as *;
 
@@ -16,20 +17,20 @@ $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers widt
 @layer components {
   .alert {
     // scss-docs-start alert-css-vars
-    --#{$prefix}alert-bg: transparent;
+    --#{$prefix}alert-bg: var(--#{$prefix}theme-bg-subtle, transparent);
     --#{$prefix}alert-padding-x: #{$alert-padding-x};
     --#{$prefix}alert-padding-y: #{$alert-padding-y};
     --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
-    --#{$prefix}alert-color: inherit;
+    --#{$prefix}alert-color: var(--#{$prefix}theme-text, inherit);
     --#{$prefix}alert-border-color: transparent;
-    --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
+    --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}theme-border, var(--#{$prefix}alert-border-color));
     --#{$prefix}alert-border-radius: #{$alert-border-radius};
     --#{$prefix}alert-link-color: inherit;
     // scss-docs-end alert-css-vars
 
     position: relative;
     padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
-    margin-bottom: var(--#{$prefix}alert-margin-bottom);
+    // margin-bottom: var(--#{$prefix}alert-margin-bottom);
     color: var(--#{$prefix}alert-color);
     background-color: var(--#{$prefix}alert-bg);
     border: var(--#{$prefix}alert-border);
@@ -54,7 +55,7 @@ $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers widt
   // Expand the right padding and account for the close button's positioning.
 
   .alert-dismissible {
-    padding-right: $alert-dismissible-padding-r;
+    padding-inline-end: $alert-dismissible-padding-r;
 
     // Adjust close link position
     .btn-close {
@@ -65,17 +66,4 @@ $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers widt
       padding: $alert-padding-y * 1.25 $alert-padding-x;
     }
   }
-
-
-  // scss-docs-start alert-modifiers
-  // Generate contextual modifier classes for colorizing the alert
-  @each $state in map.keys($theme-colors) {
-    .alert-#{$state} {
-      --#{$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-docs-end alert-modifiers
 }

scss/_badge.scss

@@ -1,6 +1,7 @@
 @use "config" as *;
 @use "colors" as *;
 @use "variables" as *;
+@use "theme" as *;
 @use "mixins/border-radius" as *;
 @use "mixins/gradients" as *;
 @use "vendor/rfs" as *;
@@ -8,9 +9,9 @@
 // scss-docs-start badge-variables
 $badge-font-size:                   .75em !default;
 $badge-font-weight:                 $font-weight-bold !default;
-$badge-color:                       $white !default;
+$badge-color:                       inherit !default;
 $badge-padding-y:                   .35em !default;
-$badge-padding-x:                   .65em !default;
+$badge-padding-x:                   .5em !default;
 $badge-border-radius:               var(--#{$prefix}border-radius) !default;
 // scss-docs-end badge-variables
 
@@ -21,7 +22,8 @@ $badge-border-radius:               var(--#{$prefix}border-radius) !default;
     --#{$prefix}badge-padding-y: #{$badge-padding-y};
     @include rfs($badge-font-size, --#{$prefix}badge-font-size);
     --#{$prefix}badge-font-weight: #{$badge-font-weight};
-    --#{$prefix}badge-color: #{$badge-color};
+    --#{$prefix}badge-color: var(--#{$prefix}theme-contrast, #{$badge-color});
+    --#{$prefix}badge-bg: var(--#{$prefix}theme-bg, var(--#{$prefix}bg-2));
     --#{$prefix}badge-border-radius: #{$badge-border-radius};
     // scss-docs-end badge-css-vars
 
@@ -34,6 +36,7 @@ $badge-border-radius:               var(--#{$prefix}border-radius) !default;
     text-align: center;
     white-space: nowrap;
     vertical-align: baseline;
+    background-color: var(--#{$prefix}badge-bg);
     @include border-radius(var(--#{$prefix}badge-border-radius));
     @include gradient-bg();
 
@@ -48,4 +51,9 @@ $badge-border-radius:               var(--#{$prefix}border-radius) !default;
     position: relative;
     top: -1px;
   }
+
+  .badge-subtle {
+    --#{$prefix}badge-color: var(--#{$prefix}theme-text);
+    --#{$prefix}badge-bg: var(--#{$prefix}theme-bg-subtle);
+  }
 }

scss/_breadcrumb.scss

@@ -46,16 +46,20 @@ $breadcrumb-border-radius:          null !default;
   .breadcrumb-item {
     // The separator between breadcrumbs (by default, a forward-slash: "/")
     + .breadcrumb-item {
-      padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
+      padding-inline-start: var(--#{$prefix}breadcrumb-item-padding-x);
 
       &::before {
-        float: left; // Suppress inline spacings and underlining of the separator
-        padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
+        float: inline-start; // Suppress inline spacings and underlining of the separator
+        padding-inline-end: var(--#{$prefix}breadcrumb-item-padding-x);
         color: var(--#{$prefix}breadcrumb-divider-color);
-        content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+        content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider));
       }
     }
 
+    [dir="rtl"] &:not(:first-child)::before {
+      content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped));
+    }
+
     &.active {
       color: var(--#{$prefix}breadcrumb-item-active-color);
     }

scss/_card.scss

@@ -21,7 +21,7 @@ $card-cap-bg:                       rgba(var(--#{$prefix}body-color-rgb), .03) !
 $card-cap-color:                    null !default;
 $card-height:                       null !default;
 $card-color:                        null !default;
-$card-bg:                           var(--#{$prefix}body-bg) !default;
+$card-bg:                           var(--#{$prefix}bg-body) !default;
 $card-img-overlay-padding:          $spacer !default;
 $card-group-margin:                 $grid-gutter-width * .5 !default;
 // scss-docs-end card-variables
@@ -55,7 +55,7 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     flex-direction: column;
     min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
     height: var(--#{$prefix}card-height);
-    color: var(--#{$prefix}body-color);
+    color: var(--#{$prefix}color-body);
     word-wrap: break-word;
     background-color: var(--#{$prefix}card-bg);
     background-clip: border-box;
@@ -64,21 +64,19 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     @include box-shadow(var(--#{$prefix}card-box-shadow));
 
     > hr {
-      margin-right: 0;
-      margin-left: 0;
+      margin-inline: 0;
     }
 
     > .list-group {
-      border-top: inherit;
-      border-bottom: inherit;
+      border-block: inherit;
 
       &:first-child {
-        border-top-width: 0;
+        border-block-start-width: 0;
         @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
       }
 
       &:last-child  {
-        border-bottom-width: 0;
+        border-block-end-width: 0;
         @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
       }
     }
@@ -87,7 +85,7 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     // use a child selector here to prevent double borders.
     > .card-header + .list-group,
     > .list-group + .card-footer {
-      border-top: 0;
+      border-block-start: 0;
     }
   }
 
@@ -116,11 +114,11 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 
   .card-link {
     &:hover {
-      text-decoration: if($link-hover-decoration == underline, none, null);
+      text-decoration: none;
     }
 
     + .card-link {
-      margin-left: var(--#{$prefix}card-spacer-x);
+      margin-inline-start: var(--#{$prefix}card-spacer-x);
     }
   }
 
@@ -133,7 +131,7 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     margin-bottom: 0; // Removes the default margin-bottom of <hN>
     color: var(--#{$prefix}card-cap-color);
     background-color: var(--#{$prefix}card-cap-bg);
-    border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+    border-block-end: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
 
     &:first-child {
       @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
@@ -144,7 +142,7 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
     color: var(--#{$prefix}card-cap-color);
     background-color: var(--#{$prefix}card-cap-bg);
-    border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+    border-block-start: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
 
     &:last-child {
       @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
@@ -157,29 +155,24 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
   //
 
   .card-header-tabs {
-    margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+    margin-inline: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
     margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y));
-    margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
-    border-bottom: 0;
+    border-block-end: 0;
 
     .nav-link.active {
       background-color: var(--#{$prefix}card-bg);
-      border-bottom-color: var(--#{$prefix}card-bg);
+      border-block-end-color: var(--#{$prefix}card-bg);
     }
   }
 
   .card-header-pills {
-    margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
-    margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+    margin-inline: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
   }
 
   // Card image
   .card-img-overlay {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     padding: var(--#{$prefix}card-img-overlay-padding);
     @include border-radius(var(--#{$prefix}card-inner-border-radius));
   }
@@ -222,8 +215,8 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
         margin-bottom: 0;
 
         + .card {
-          margin-left: 0;
-          border-left: 0;
+          margin-inline-start: 0;
+          border-inline-start: 0;
         }
 
         // Handle rounded corners
@@ -233,13 +226,11 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 
             > .card-img-top,
             > .card-header {
-              // stylelint-disable-next-line property-disallowed-list
-              border-top-right-radius: 0;
+              border-start-end-radius: 0;
             }
             > .card-img-bottom,
             > .card-footer {
-              // stylelint-disable-next-line property-disallowed-list
-              border-bottom-right-radius: 0;
+              border-end-end-radius: 0;
             }
           }
 
@@ -248,13 +239,11 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 
             > .card-img-top,
             > .card-header {
-              // stylelint-disable-next-line property-disallowed-list
-              border-top-left-radius: 0;
+              border-start-start-radius: 0;
             }
             > .card-img-bottom,
             > .card-footer {
-              // stylelint-disable-next-line property-disallowed-list
-              border-bottom-left-radius: 0;
+              border-end-start-radius: 0;
             }
           }
         }

scss/_carousel.scss

@@ -75,9 +75,9 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
   .carousel-item {
     position: relative;
     display: none;
-    float: left;
+    float: inline-start;
     width: 100%;
-    margin-right: -100%;
+    margin-inline-end: -100%;
     backface-visibility: hidden;
     @include transition($carousel-transition);
   }
@@ -133,8 +133,7 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
   .carousel-control-prev,
   .carousel-control-next {
     position: absolute;
-    top: 0;
-    bottom: 0;
+    inset-block: 0;
     z-index: 1;
     // Use flex for alignment (1-3)
     display: flex; // 1. allow flex styles
@@ -160,11 +159,11 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
     }
   }
   .carousel-control-prev {
-    left: 0;
+    inset-inline-start: 0;
     background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
   }
   .carousel-control-next {
-    right: 0;
+    inset-inline-end: 0;
     background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
   }
 
@@ -180,10 +179,19 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
   }
 
   .carousel-control-prev-icon {
-    background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
+    background-image: escape-svg($carousel-control-prev-icon-bg);
   }
+
+  [dir="rtl"] .carousel-control-prev-icon {
+    background-image: escape-svg($carousel-control-next-icon-bg);
+  }
+
   .carousel-control-next-icon {
-    background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
+    background-image: escape-svg($carousel-control-next-icon-bg);
+  }
+
+  [dir="rtl"] .carousel-control-next-icon {
+    background-image: escape-svg($carousel-control-prev-icon-bg);
   }
 
   // Optional indicator pips/controls
@@ -193,17 +201,14 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
 
   .carousel-indicators {
     position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: auto 0 0;
     z-index: 2;
     display: flex;
     justify-content: center;
     padding: 0;
     // Use the .carousel-control's width as margin so we don't overlay those
-    margin-right: $carousel-control-width;
+    margin-inline: $carousel-control-width;
     margin-bottom: 1rem;
-    margin-left: $carousel-control-width;
 
     [data-bs-target] {
       box-sizing: content-box;
@@ -211,16 +216,14 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
       width: $carousel-indicator-width;
       height: $carousel-indicator-height;
       padding: 0;
-      margin-right: $carousel-indicator-spacer;
-      margin-left: $carousel-indicator-spacer;
+      margin-inline: $carousel-indicator-spacer;
       text-indent: -999px;
       cursor: pointer;
       background-color: var(--#{$prefix}carousel-indicator-active-bg);
       background-clip: padding-box;
       border: 0;
       // Use transparent borders to increase the hit area by 10px on top and bottom.
-      border-top: $carousel-indicator-hit-area-height solid transparent;
-      border-bottom: $carousel-indicator-hit-area-height solid transparent;
+      border-block: $carousel-indicator-hit-area-height solid transparent;
       opacity: $carousel-indicator-opacity;
       @include transition($carousel-indicator-transition);
     }

scss/_colors.scss

@@ -1,282 +1,61 @@
-$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;
+@use "config" as *;
 
-$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;
+// stylelint-disable hue-degree-notation, @stylistic/number-leading-zero
 
-$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;
+// 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;
 
-$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;
+$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;
 
-$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;
+:root {
+  @each $color, $hue in $hues {
+    --#{$prefix}#{$color}-025: color-mix(in lab, #fff 94%, #{$hue});
+    --#{$prefix}#{$color}-050: color-mix(in lab, #fff 90%, #{$hue});
+    --#{$prefix}#{$color}-100: color-mix(in lab, #fff 80%, #{$hue});
+    --#{$prefix}#{$color}-200: color-mix(in lab, #fff 60%, #{$hue});
+    --#{$prefix}#{$color}-300: color-mix(in lab, #fff 40%, #{$hue});
+    --#{$prefix}#{$color}-400: color-mix(in lab, #fff 20%, #{$hue});
+    --#{$prefix}#{$color}-500: #{$hue};
+    --#{$prefix}#{$color}-600: color-mix(in lab, #000 16%, #{$hue});
+    --#{$prefix}#{$color}-700: color-mix(in lab, #000 32%, #{$hue});
+    --#{$prefix}#{$color}-800: color-mix(in lab, #000 48%, #{$hue});
+    --#{$prefix}#{$color}-900: color-mix(in lab, #000 64%, #{$hue});
+    --#{$prefix}#{$color}-950: color-mix(in lab, #000 76%, #{$hue});
+    --#{$prefix}#{$color}-975: color-mix(in lab, #000 88%, #{$hue});
+  }
+}
 
 $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

@@ -42,6 +42,21 @@ $spacers: (
 ) !default;
 // scss-docs-end spacer-variables-maps
 
+$sizes: (
+  1: $spacer,
+  2: calc($spacer * 2),
+  3: calc($spacer * 3),
+  4: calc($spacer * 4),
+  5: calc($spacer * 5),
+  6: calc($spacer * 6),
+  7: calc($spacer * 7),
+  8: calc($spacer * 8),
+  9: calc($spacer * 9),
+  10: calc($spacer * 10),
+  11: calc($spacer * 11),
+  12: calc($spacer * 12),
+) !default;
+
 // Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,
@@ -52,9 +67,9 @@ $grid-breakpoints: (
   xs: 0,
   sm: 576px,
   md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px
+  lg: 1024px,
+  xl: 1280px,
+  2xl: 1536px
 ) !default;
 // scss-docs-end grid-breakpoints
 
@@ -80,8 +95,8 @@ $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
-  xl: 1140px,
-  xxl: 1320px
+  xl: 1200px,
+  2xl: 1440px
 ) !default;
 // scss-docs-end container-max-widths
 

scss/_dropdown.scss

@@ -16,8 +16,8 @@ $dropdown-padding-x:                0 !default;
 $dropdown-padding-y:                .5rem !default;
 $dropdown-spacer:                   .125rem !default;
 $dropdown-font-size:                $font-size-base !default;
-$dropdown-color:                    var(--#{$prefix}body-color) !default;
-$dropdown-bg:                       var(--#{$prefix}body-bg) !default;
+$dropdown-color:                    var(--#{$prefix}color-body) !default;
+$dropdown-bg:                       var(--#{$prefix}bg-body) !default;
 $dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
 $dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
 $dropdown-border-width:             var(--#{$prefix}border-width) !default;
@@ -26,7 +26,7 @@ $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
 $dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
 
-$dropdown-link-color:               var(--#{$prefix}body-color) !default;
+$dropdown-link-color:               var(--#{$prefix}color-body) !default;
 $dropdown-link-hover-color:         $dropdown-link-color !default;
 $dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg) !default;
 
@@ -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:             $gray-600 !default;
+$dropdown-header-color:             var(--#{$prefix}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:               $gray-300 !default;
-$dropdown-dark-bg:                  $gray-800 !default;
+$dropdown-dark-color:               var(--#{$prefix}gray-300) !default;
+$dropdown-dark-bg:                  var(--#{$prefix}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: $gray-500 !default;
-$dropdown-dark-header-color:        $gray-500 !default;
+$dropdown-dark-link-disabled-color: var(--#{$prefix}gray-500) !default;
+$dropdown-dark-header-color:        var(--#{$prefix}gray-500) !default;
 // scss-docs-end dropdown-dark-variables
 
 @layer components {
@@ -115,7 +115,7 @@ $dropdown-dark-header-color:        $gray-500 !default;
     margin: 0; // Override default margin of ul
     @include font-size(var(--#{$prefix}dropdown-font-size));
     color: var(--#{$prefix}dropdown-color);
-    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+    text-align: start; // Ensures proper alignment if parent has it changed (e.g., modal footer)
     list-style: none;
     background-color: var(--#{$prefix}dropdown-bg);
     background-clip: padding-box;
@@ -191,8 +191,8 @@ $dropdown-dark-header-color:        $gray-500 !default;
       top: 0;
       right: auto;
       left: 100%;
+      margin-inline-start: var(--#{$prefix}dropdown-spacer);
       margin-top: 0;
-      margin-left: var(--#{$prefix}dropdown-spacer);
     }
 
     .dropdown-toggle {
@@ -208,8 +208,8 @@ $dropdown-dark-header-color:        $gray-500 !default;
       top: 0;
       right: 100%;
       left: auto;
+      margin-inline-end: var(--#{$prefix}dropdown-spacer);
       margin-top: 0;
-      margin-right: var(--#{$prefix}dropdown-spacer);
     }
 
     .dropdown-toggle {
@@ -226,7 +226,7 @@ $dropdown-dark-header-color:        $gray-500 !default;
     height: 0;
     margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
     overflow: hidden;
-    border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
+    border-block-start: 1px solid var(--#{$prefix}dropdown-divider-bg);
     opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
   }
 
@@ -241,7 +241,7 @@ $dropdown-dark-header-color:        $gray-500 !default;
     font-weight: $font-weight-normal;
     color: var(--#{$prefix}dropdown-link-color);
     text-align: inherit; // For `<button>`s
-    text-decoration: if($link-decoration == none, null, none);
+    text-decoration: none;
     white-space: nowrap; // prevent links from randomly breaking onto new lines
     background-color: transparent; // For `<button>`s
     border: 0; // For `<button>`s
@@ -250,14 +250,12 @@ $dropdown-dark-header-color:        $gray-500 !default;
     &:hover,
     &:focus {
       color: var(--#{$prefix}dropdown-link-hover-color);
-      text-decoration: if($link-hover-decoration == underline, none, null);
       @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
     }
 
     &.active,
     &:active {
       color: var(--#{$prefix}dropdown-link-active-color);
-      text-decoration: none;
       @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
     }
 

scss/_functions.scss

@@ -105,6 +105,23 @@
   @return $result;
 }
 
+// Extract a specific nested property from all items in a map
+// Useful for extracting a single property from nested map structures
+// Example: map-get-nested($font-sizes, "font-size")
+// Returns: ("xs": clamp(...), "sm": clamp(...), ...)
+@function map-get-nested($map, $nested-key) {
+  $result: ();
+  @each $key, $value in $map {
+    @if meta.type-of($value) == "map" {
+      $nested-value: map.get($value, $nested-key);
+      @if $nested-value != null {
+        $result: map.merge($result, ($key: $nested-value));
+      }
+    }
+  }
+  @return $result;
+}
+
 // Merge multiple maps
 @function map-merge-multiple($maps...) {
   $merged-maps: ();
@@ -207,7 +224,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(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
+  @return color-mix(in srgb, rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
 }
 
 // scss-docs-start color-functions

scss/_list-group.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "colors" as *;
+@use "theme" as *;
 @use "config" as *;
 @use "variables" as *;
 @use "mixins/border-radius" as *;
@@ -7,8 +8,8 @@
 @use "layout/breakpoints" as *;
 
 // scss-docs-start list-group-variables
-$list-group-color:                  var(--#{$prefix}body-color) !default;
-$list-group-bg:                     var(--#{$prefix}body-bg) !default;
+$list-group-color:                  var(--#{$prefix}color-body) !default;
+$list-group-bg:                     var(--#{$prefix}bg-body) !default;
 $list-group-border-color:           var(--#{$prefix}border-color) !default;
 $list-group-border-width:           var(--#{$prefix}border-width) !default;
 $list-group-border-radius:          var(--#{$prefix}border-radius) !default;
@@ -27,7 +28,7 @@ $list-group-disabled-bg:            $list-group-bg !default;
 $list-group-action-color:           var(--#{$prefix}secondary-color) !default;
 $list-group-action-hover-color:     var(--#{$prefix}emphasis-color) !default;
 
-$list-group-action-active-color:    var(--#{$prefix}body-color) !default;
+$list-group-action-active-color:    var(--#{$prefix}color-body) !default;
 $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
 // scss-docs-end list-group-variables
 
@@ -57,7 +58,7 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
     flex-direction: column;
 
     // No need to set list-style: none; since .list-group-item is block level
-    padding-left: 0; // reset padding because ul and ol
+    padding-inline-start: 0; // reset padding because ul and ol
     margin-bottom: 0;
     @include border-radius(var(--#{$prefix}list-group-border-radius));
   }
@@ -81,10 +82,10 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
     position: relative;
     display: block;
     padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
-    color: var(--#{$prefix}list-group-color);
+    color: var(--#{$prefix}theme-text, var(--#{$prefix}list-group-color));
     text-decoration: if($link-decoration == none, null, none);
-    background-color: var(--#{$prefix}list-group-bg);
-    border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
+    background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}list-group-bg));
+    border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}theme-border, var(--#{$prefix}list-group-border-color));
 
     &:first-child {
       @include border-top-radius(inherit);
@@ -111,11 +112,11 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
 
     // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
     & + .list-group-item {
-      border-top-width: 0;
+      border-block-start-width: 0;
 
       &.active {
         margin-top: calc(-1 * var(--#{$prefix}list-group-border-width));
-        border-top-width: var(--#{$prefix}list-group-border-width);
+        border-block-start-width: var(--#{$prefix}list-group-border-width);
       }
     }
   }
@@ -127,7 +128,7 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
 
   .list-group-item-action {
     width: 100%; // For `<button>`s (anchors become 100% by default though)
-    color: var(--#{$prefix}list-group-action-color);
+    color: var(--#{$prefix}theme-text, var(--#{$prefix}list-group-action-color));
     text-align: inherit; // For `<button>`s (anchors inherit)
 
     &:not(.active) {
@@ -135,14 +136,14 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
       &:hover,
       &:focus {
         z-index: 1; // Place hover/focus items above their siblings for proper border styling
-        color: var(--#{$prefix}list-group-action-hover-color);
+        color: var(--#{$prefix}theme-text-emphasis, var(--#{$prefix}list-group-action-hover-color));
         text-decoration: none;
-        background-color: var(--#{$prefix}list-group-action-hover-bg);
+        background-color: var(--#{$prefix}theme-bg-muted, var(--#{$prefix}list-group-action-hover-bg));
       }
 
       &:active {
-        color: var(--#{$prefix}list-group-action-active-color);
-        background-color: var(--#{$prefix}list-group-action-active-bg);
+        color: var(--#{$prefix}theme-text-emphasis, var(--#{$prefix}list-group-action-active-color));
+        background-color: var(--#{$prefix}theme-bg-muted, var(--#{$prefix}list-group-action-active-bg));
       }
     }
   }
@@ -174,12 +175,12 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
           }
 
           + .list-group-item {
-            border-top-width: var(--#{$prefix}list-group-border-width);
-            border-left-width: 0;
+            border-block-start-width: var(--#{$prefix}list-group-border-width);
+            border-inline-start-width: 0;
 
             &.active {
-              margin-left: calc(-1 * var(--#{$prefix}list-group-border-width));
-              border-left-width: var(--#{$prefix}list-group-border-width);
+              margin-inline-start: calc(-1 * var(--#{$prefix}list-group-border-width));
+              border-inline-start-width: var(--#{$prefix}list-group-border-width);
             }
           }
         }
@@ -200,31 +201,8 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
       border-width: 0 0 var(--#{$prefix}list-group-border-width);
 
       &:last-child {
-        border-bottom-width: 0;
+        border-block-end-width: 0;
       }
     }
   }
-
-
-  // scss-docs-start list-group-modifiers
-  // List group contextual variants
-  //
-  // 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($theme-colors) {
-    .list-group-item-#{$state} {
-      --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
-      --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
-      --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
-      --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
-      --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
-      --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
-      --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
-      --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
-      --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
-      --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
-    }
-  }
-  // scss-docs-end list-group-modifiers
 }

scss/_maps.scss

@@ -1,180 +0,0 @@
-// @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/_modal.scss

@@ -42,8 +42,7 @@
     // scss-docs-end modal-css-vars
 
     position: fixed;
-    top: 0;
-    left: 0;
+    inset: 0 auto auto 0;
     z-index: var(--#{$prefix}modal-zindex);
     display: none;
     width: 100%;
@@ -136,16 +135,16 @@
     flex-shrink: 0;
     align-items: center;
     padding: var(--#{$prefix}modal-header-padding);
-    border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
+    border-block-end: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
     @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
 
     .btn-close {
       padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
       // Split properties to avoid invalid calc() function if value is 0
+      margin-inline-start: auto;
+      margin-inline-end: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
       margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
-      margin-right: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
       margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
-      margin-left: auto;
     }
   }
 
@@ -174,7 +173,7 @@
     justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
     padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
     background-color: var(--#{$prefix}modal-footer-bg);
-    border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
+    border-block-start: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
     @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
 
     // Place margin between footer elements
@@ -195,8 +194,7 @@
     // Automatically set modal's width for larger viewports
     .modal-dialog {
       max-width: var(--#{$prefix}modal-width);
-      margin-right: auto;
-      margin-left: auto;
+      margin-inline: auto;
     }
 
     .modal-sm {

scss/_nav.scss

@@ -21,7 +21,7 @@ $nav-tabs-border-width:             var(--#{$prefix}border-width) !default;
 $nav-tabs-border-radius:            var(--#{$prefix}border-radius) !default;
 $nav-tabs-link-hover-border-color:  var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
 $nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color) !default;
-$nav-tabs-link-active-bg:           var(--#{$prefix}body-bg) !default;
+$nav-tabs-link-active-bg:           var(--#{$prefix}bg-body) !default;
 $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
 
 $nav-pills-border-radius:           var(--#{$prefix}border-radius) !default;
@@ -52,7 +52,7 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
 
     display: flex;
     flex-wrap: wrap;
-    padding-left: 0;
+    padding-inline-start: 0;
     margin-bottom: 0;
     list-style: none;
   }
@@ -63,7 +63,7 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
     @include font-size(var(--#{$prefix}nav-link-font-size));
     font-weight: var(--#{$prefix}nav-link-font-weight);
     color: var(--#{$prefix}nav-link-color);
-    text-decoration: if($link-decoration == none, null, none);
+    text-decoration: none;
     background: none;
     border: 0;
     @include transition($nav-link-transition);
@@ -71,7 +71,6 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
     &:hover,
     &:focus {
       color: var(--#{$prefix}nav-link-hover-color);
-      text-decoration: if($link-hover-decoration == underline, none, null);
     }
 
     &:focus-visible {
@@ -103,7 +102,7 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
     --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
     // scss-docs-end nav-tabs-css-vars
 
-    border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
+    border-block-end: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
 
     .nav-link {
       margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
@@ -171,13 +170,12 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
     gap: var(--#{$prefix}nav-underline-gap);
 
     .nav-link {
-      padding-right: 0;
-      padding-left: 0;
-      border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
+      padding-inline: 0;
+      border-block-end: var(--#{$prefix}nav-underline-border-width) solid transparent;
 
       &:hover,
       &:focus {
-        border-bottom-color: currentcolor;
+        border-block-end-color: currentcolor;
       }
     }
 
@@ -185,7 +183,7 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
     .show > .nav-link {
       font-weight: $font-weight-bold;
       color: var(--#{$prefix}nav-underline-link-active-color);
-      border-bottom-color: currentcolor;
+      border-block-end-color: currentcolor;
     }
   }
 

scss/_navbar.scss

@@ -120,16 +120,15 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
   .navbar-brand {
     padding-top: var(--#{$prefix}navbar-brand-padding-y);
     padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
-    margin-right: var(--#{$prefix}navbar-brand-margin-end);
+    margin-inline-end: var(--#{$prefix}navbar-brand-margin-end);
     @include font-size(var(--#{$prefix}navbar-brand-font-size));
     color: var(--#{$prefix}navbar-brand-color);
-    text-decoration: if($link-decoration == none, null, none);
+    text-decoration: none;
     white-space: nowrap;
 
     &:hover,
     &:focus {
       color: var(--#{$prefix}navbar-brand-hover-color);
-      text-decoration: if($link-hover-decoration == underline, none, null);
     }
   }
 
@@ -152,7 +151,7 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
 
     display: flex;
     flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
-    padding-left: 0;
+    padding-inline-start: 0;
     margin-bottom: 0;
     list-style: none;
 
@@ -265,8 +264,7 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
             }
 
             .nav-link {
-              padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
-              padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
+              padding-inline: var(--#{$prefix}navbar-nav-link-padding-x);
             }
           }
 
@@ -280,7 +278,7 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
           }
 
           .navbar-toggler {
-            display: none;
+            display: none !important; // stylelint-disable-line declaration-no-important
           }
 
           .offcanvas {

scss/_offcanvas.scss

@@ -57,7 +57,7 @@
           top: 0;
           left: 0;
           width: var(--#{$prefix}offcanvas-width);
-          border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-inline-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
           transform: translateX(-100%);
         }
 
@@ -65,7 +65,7 @@
           top: 0;
           right: 0;
           width: var(--#{$prefix}offcanvas-width);
-          border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-inline-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
           transform: translateX(100%);
         }
 
@@ -75,7 +75,7 @@
           left: 0;
           height: var(--#{$prefix}offcanvas-height);
           max-height: 100%;
-          border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-block-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
           transform: translateY(-100%);
         }
 
@@ -84,7 +84,7 @@
           left: 0;
           height: var(--#{$prefix}offcanvas-height);
           max-height: 100%;
-          border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-block-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
           transform: translateY(100%);
         }
 
@@ -135,10 +135,10 @@
     .btn-close {
       padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
       // Split properties to avoid invalid calc() function if value is 0
+      margin-inline-start: auto;
+      margin-inline-end: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
       margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
-      margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
       margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
-      margin-left: auto;
     }
   }
 

scss/_pagination.scss

@@ -17,7 +17,7 @@ $pagination-padding-x-lg:           1.5rem !default;
 $pagination-font-size:              $font-size-base !default;
 
 $pagination-color:                  var(--#{$prefix}link-color) !default;
-$pagination-bg:                     var(--#{$prefix}body-bg) !default;
+$pagination-bg:                     var(--#{$prefix}bg-body) !default;
 $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
 $pagination-border-width:           var(--#{$prefix}border-width) !default;
 $pagination-margin-start:           calc(-1 * #{$pagination-border-width}) !default;
@@ -91,7 +91,7 @@ $pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
     padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
     @include font-size(var(--#{$prefix}pagination-font-size));
     color: var(--#{$prefix}pagination-color);
-    text-decoration: if($link-decoration == none, null, none);
+    text-decoration: none;
     background-color: var(--#{$prefix}pagination-bg);
     border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
     @include transition($pagination-transition);
@@ -99,7 +99,6 @@ $pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
     &:hover {
       z-index: 2;
       color: var(--#{$prefix}pagination-hover-color);
-      text-decoration: if($link-hover-decoration == underline, none, null);
       background-color: var(--#{$prefix}pagination-hover-bg);
       border-color: var(--#{$prefix}pagination-hover-border-color);
     }
@@ -131,7 +130,7 @@ $pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
 
   .page-item {
     &:not(:first-child) .page-link {
-      margin-left: $pagination-margin-start;
+      margin-inline-start: $pagination-margin-start;
     }
 
     @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {

scss/_popover.scss

@@ -7,7 +7,7 @@
 
 // scss-docs-start popover-variables
 $popover-font-size:                 $font-size-sm !default;
-$popover-bg:                        var(--#{$prefix}body-bg) !default;
+$popover-bg:                        var(--#{$prefix}bg-body) !default;
 $popover-max-width:                 276px !default;
 $popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
@@ -21,7 +21,7 @@ $popover-header-color:              $headings-color !default;
 $popover-header-padding-y:          .5rem !default;
 $popover-header-padding-x:          $spacer !default;
 
-$popover-body-color:                var(--#{$prefix}body-color) !default;
+$popover-body-color:                var(--#{$prefix}color-body) !default;
 $popover-body-padding-y:            $spacer !default;
 $popover-body-padding-x:            $spacer !default;
 
@@ -97,17 +97,16 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         bottom: 0;
-        border-top-color: var(--#{$prefix}popover-arrow-border);
+        border-block-start-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         bottom: var(--#{$prefix}popover-border-width);
-        border-top-color: var(--#{$prefix}popover-bg);
+        border-block-start-color: var(--#{$prefix}popover-bg);
       }
     }
   }
 
-  /* rtl:begin:ignore */
   .bs-popover-end {
     > .popover-arrow {
       left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
@@ -121,18 +120,16 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         left: 0;
-        border-right-color: var(--#{$prefix}popover-arrow-border);
+        border-inline-end-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         left: var(--#{$prefix}popover-border-width);
-        border-right-color: var(--#{$prefix}popover-bg);
+        border-inline-end-color: var(--#{$prefix}popover-bg);
       }
     }
   }
 
-  /* rtl:end:ignore */
-
   .bs-popover-bottom {
     > .popover-arrow {
       top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
@@ -144,12 +141,12 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         top: 0;
-        border-bottom-color: var(--#{$prefix}popover-arrow-border);
+        border-block-end-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         top: var(--#{$prefix}popover-border-width);
-        border-bottom-color: var(--#{$prefix}popover-bg);
+        border-block-end-color: var(--#{$prefix}popover-bg);
       }
     }
 
@@ -160,13 +157,12 @@ $popover-arrow-height:              .5rem !default;
       left: 50%;
       display: block;
       width: var(--#{$prefix}popover-arrow-width);
-      margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width));
+      margin-inline-start: calc(-.5 * var(--#{$prefix}popover-arrow-width));
       content: "";
-      border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
+      border-block-end: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
     }
   }
 
-  /* rtl:begin:ignore */
   .bs-popover-start {
     > .popover-arrow {
       right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
@@ -180,18 +176,16 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         right: 0;
-        border-left-color: var(--#{$prefix}popover-arrow-border);
+        border-inline-start-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         right: var(--#{$prefix}popover-border-width);
-        border-left-color: var(--#{$prefix}popover-bg);
+        border-inline-start-color: var(--#{$prefix}popover-bg);
       }
     }
   }
 
-  /* rtl:end:ignore */
-
   .bs-popover-auto {
     &[data-popper-placement^="top"] {
       @extend .bs-popover-top;
@@ -214,7 +208,7 @@ $popover-arrow-height:              .5rem !default;
     @include font-size(var(--#{$prefix}popover-header-font-size));
     color: var(--#{$prefix}popover-header-color);
     background-color: var(--#{$prefix}popover-header-bg);
-    border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+    border-block-end: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
     @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
 
     &:empty {

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:                   $primary !default;
+$progress-bar-bg:                   var(--#{$prefix}primary-bg) !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,66 +14,37 @@
 :root {
   color-scheme: light dark;
 
-  @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};
-  }
-
+  // scss-docs-start root-theme-variables
+  // Generate semantic theme colors
   @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}bg-#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-fgs {
+    --#{$prefix}color-#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-borders {
+    --#{$prefix}border-#{$color}: #{$value};
+  }
+
   --#{$prefix}black: #{$black};
   --#{$prefix}white: #{$white};
+  // scss-docs-end root-theme-variables
 }
 
 :root,
 [data-bs-theme="light"] {
+  color-scheme: 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)};
 
@@ -92,9 +63,33 @@
   }
   --#{$prefix}body-font-family: #{meta.inspect($font-family-base)};
 
+  // scss-docs-start root-font-size-variables
   --#{$prefix}font-size-base: #{$font-size-base}; // 14px
-  --#{$prefix}font-size-sm: calc(#{$font-size-base} * .9285);
-  --#{$prefix}font-size-lg: calc(#{$font-size-base} * 1.285);
+  // --#{$prefix}font-size-sm: calc(#{$font-size-base} * .9285);
+  // --#{$prefix}font-size-lg: calc(#{$font-size-base} * 1.285);
+
+  --#{$prefix}font-size-xs: clamp(.75rem, .7rem + .25vw, .875rem);
+  --#{$prefix}font-size-sm: clamp(.875rem, .8rem + .375vw, 1rem);
+  --#{$prefix}font-size-md: clamp(1rem, .9rem + .5vw, 1.125rem);
+  --#{$prefix}font-size-lg: clamp(1.25rem, 1rem + .625vw, 1.5rem);
+  --#{$prefix}font-size-xl: clamp(1.5rem, 1.1rem + .75vw, 1.75rem);
+  --#{$prefix}font-size-2xl: clamp(1.75rem, 1.3rem + 1vw, 2.25rem);
+  --#{$prefix}font-size-3xl: clamp(2rem, 1.5rem + 1.875vw, 2.5rem);
+  --#{$prefix}font-size-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
+  --#{$prefix}font-size-5xl: clamp(3rem, 2rem + 5vw, 4rem);
+  --#{$prefix}font-size-6xl: clamp(3.75rem, 2.5rem + 6.25vw, 5rem);
+
+  --#{$prefix}line-height-xs: 1.5;
+  --#{$prefix}line-height-sm: 1.5;
+  --#{$prefix}line-height-md: 1.5;
+  --#{$prefix}line-height-lg: 1.5;
+  --#{$prefix}line-height-xl: calc(2.5 / 1.75);
+  --#{$prefix}line-height-2xl: calc(3 / 2.25);
+  --#{$prefix}line-height-3xl: 1.2;
+  --#{$prefix}line-height-4xl: 1.1;
+  --#{$prefix}line-height-5xl: 1.1;
+  --#{$prefix}line-height-6xl: 1;
+  // scss-docs-end root-font-size-variables
 
   @include rfs($font-size-base, --#{$prefix}body-font-size);
   --#{$prefix}body-font-weight: #{$font-weight-base};
@@ -118,9 +113,9 @@
     --#{$prefix}border#{$key}: #{$value};
   }
 
-  --#{$prefix}body-color: #{$body-color};
+  // --#{$prefix}body-color: #{$body-color};
   --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
-  --#{$prefix}body-bg: #{$body-bg};
+  // --#{$prefix}body-bg: #{$body-bg};
   --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
 
   // --#{$prefix}emphasis-color: #{$body-emphasis-color};
@@ -150,10 +145,6 @@
   --#{$prefix}link-decoration: #{$link-decoration};
   --#{$prefix}link-hover-color: color-mix(in oklch, var(--#{$prefix}link-color) 90%, #000);
 
-  @if $link-hover-decoration != null {
-    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
-  }
-
   --#{$prefix}code-color: #{$code-color};
   --#{$prefix}highlight-color: #{$mark-color};
   --#{$prefix}highlight-bg: #{$mark-bg};
@@ -170,7 +161,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-xxl: #{$border-radius-xxl};
+  --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
   --#{$prefix}border-radius-pill: #{$border-radius-pill};
   // scss-docs-end root-border-radius-var
 
@@ -205,46 +196,34 @@
     color-scheme: dark;
 
     // scss-docs-start root-dark-mode-vars
-    --#{$prefix}body-color: #{$body-color-dark};
-    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
-    --#{$prefix}body-bg: #{$body-bg-dark};
-    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+    // --#{$prefix}body-color: #{$body-color-dark};
+    // --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+    // --#{$prefix}body-bg: #{$body-bg-dark};
+    // --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
 
     --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
     --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
 
-    --#{$prefix}secondary-color: #{$body-secondary-color-dark};
-    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
-    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
-    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+    // --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+    // --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+    // --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+    // --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
 
-    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
-    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
-    --#{$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}tertiary-color: #{$body-tertiary-color-dark};
+    // --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+    // --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+    // --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
 
     --#{$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};
-    --#{$prefix}highlight-bg: #{$mark-bg-dark};
+    // --#{$prefix}highlight-color: #{$mark-color-dark};
+    // --#{$prefix}highlight-bg: #{$mark-bg-dark};
 
     --#{$prefix}border-color: #{$border-color-dark};
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};

scss/_spinners.scss

@@ -32,7 +32,7 @@ $spinner-border-width-sm: .2em !default;
 
   // scss-docs-start spinner-border-keyframes
   @keyframes spinner-border {
-    to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
+    to { transform: rotate(360deg); }
   }
   // scss-docs-end spinner-border-keyframes
 
@@ -47,7 +47,7 @@ $spinner-border-width-sm: .2em !default;
     // scss-docs-end spinner-border-css-vars
 
     border: var(--#{$prefix}spinner-border-width) solid currentcolor;
-    border-right-color: transparent;
+    border-inline-end-color: transparent;
   }
 
   .spinner-border-sm {

scss/_theme.scss

@@ -15,6 +15,35 @@
   @return $result;
 }
 
+// Generate opacity values using color-mix()
+@function theme-opacity-values($color-var, $opacities: $util-opacity) {
+  $result: ();
+
+  @each $key, $value in $opacities {
+    @if $key == 100 {
+      // For 100%, use direct variable reference (more efficient)
+      $result: map.merge($result, ($key: var($color-var)));
+    } @else {
+      // For other values, use color-mix()
+      $percentage: $key * 1%;
+      $result: map.merge($result, ($key: color-mix(in oklch, var($color-var) $percentage, transparent)));
+    }
+  }
+
+  @return $result;
+}
+
+// Generate theme classes dynamically based on the keys in each theme color map
+@mixin generate-theme-classes() {
+  @each $color-name, $color-map in $new-theme-colors {
+    .theme-#{$color-name} {
+      @each $key, $value in $color-map {
+        --#{$prefix}theme-#{$key}: var(--#{$prefix}#{$color-name}-#{$key});
+      }
+    }
+  }
+}
+
 // Recursive mixin to handle nested maps
 @mixin create-css-vars($map, $parent-key: "") {
   @each $key, $value in $map {
@@ -32,90 +61,104 @@
 $new-theme-colors: (
   "primary": (
     "base": var(--#{$prefix}blue-500),
-    "text": light-dark(var(--#{$prefix}blue-600), var(--#{$prefix}blue-300)),
-    "bg": light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-500)),
+    "text": light-dark(var(--#{$prefix}blue-600), var(--#{$prefix}blue-400)),
+    "text-emphasis": light-dark(var(--#{$prefix}blue-800), var(--#{$prefix}blue-200)),
+    "bg": 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, var(--#{$prefix}blue-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-400)) 50%, var(--#{$prefix}bg-body)),
     "contrast": var(--#{$prefix}white)
   ),
   "accent": (
     "base": var(--#{$prefix}indigo-500),
-    "text": light-dark(var(--#{$prefix}indigo-600), var(--#{$prefix}indigo-300)),
-    "bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)),
+    "text": light-dark(var(--#{$prefix}indigo-600), color-mix(in oklch, var(--#{$prefix}indigo-400), var(--#{$prefix}indigo-300))),
+    "text-emphasis": light-dark(var(--#{$prefix}indigo-800), var(--#{$prefix}indigo-300)),
+    "bg": 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, var(--#{$prefix}indigo-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-400)) 50%, var(--#{$prefix}bg-body)),
+    "contrast": var(--#{$prefix}white)
+  ),
+  "success": (
+    "base": var(--#{$prefix}green-500),
+    "text": light-dark(var(--#{$prefix}green-600), var(--#{$prefix}green-400)),
+    "text-emphasis": light-dark(var(--#{$prefix}green-800), var(--#{$prefix}green-300)),
+    "bg": 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)),
+    "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-400)) 50%, var(--#{$prefix}bg-body)),
     "contrast": var(--#{$prefix}white)
   ),
   "danger": (
     "base": var(--#{$prefix}red-500),
-    "text": light-dark(var(--#{$prefix}red-600), var(--#{$prefix}red-300)),
-    "bg": light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-500)),
+    "text": light-dark(var(--#{$prefix}red-600), var(--#{$prefix}red-400)),
+    "text-emphasis": light-dark(var(--#{$prefix}red-800), var(--#{$prefix}red-300)),
+    "bg": 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, var(--#{$prefix}red-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-400)) 50%, var(--#{$prefix}bg-body)),
     "contrast": var(--#{$prefix}white)
   ),
   "warning": (
     "base": var(--#{$prefix}yellow-500),
-    "text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-300)),
-    "bg": light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-500)),
+    "text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-400)),
+    "text-emphasis": light-dark(var(--#{$prefix}yellow-800), var(--#{$prefix}yellow-300)),
+    "bg": 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, var(--#{$prefix}yellow-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-400)) 50%, var(--#{$prefix}bg-body)),
     "contrast": var(--#{$prefix}gray-900)
   ),
-  "success": (
-    "base": var(--#{$prefix}green-500),
-    "text": light-dark(var(--#{$prefix}green-600), var(--#{$prefix}green-300)),
-    "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, var(--#{$prefix}green-500) 50%, var(--#{$prefix}bg)),
-    "contrast": var(--#{$prefix}white)
-  ),
   "info": (
     "base": var(--#{$prefix}cyan-500),
-    "text": light-dark(var(--#{$prefix}cyan-600), var(--#{$prefix}cyan-300)),
-    "bg": light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-500)),
+    "text": light-dark(var(--#{$prefix}cyan-600), var(--#{$prefix}cyan-400)),
+    "text-emphasis": light-dark(var(--#{$prefix}cyan-800), var(--#{$prefix}cyan-300)),
+    "bg": 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, var(--#{$prefix}cyan-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-400)) 50%, var(--#{$prefix}bg-body)),
     "contrast": var(--#{$prefix}gray-900)
   ),
+  "inverse": (
+    "base": var(--#{$prefix}gray-900),
+    "text": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-200)),
+    "text-emphasis": light-dark(var(--#{$prefix}gray-975), var(--#{$prefix}white)),
+    "bg": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-025)),
+    "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)),
+    "bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)),
+    "border": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-100)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)) 50%, var(--#{$prefix}bg-body)),
+    "contrast": light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900))
+  ),
   "secondary": (
-    "base": var(--#{$prefix}gray-300),
+    "base": var(--#{$prefix}gray-200),
     "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))),
+    "text-emphasis": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
+    "bg": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-600)),
+    "bg-subtle": light-dark(var(--#{$prefix}gray-050), var(--#{$prefix}gray-800)),
+    "bg-muted": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-700)),
     "border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
-    "focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-300)) 50%, var(--#{$prefix}bg-body)),
     "contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
   )
 ) !default;
 // scss-docs-end theme-colors
 
+// Generate theme modifier classes (e.g., .theme-primary, .theme-accent, etc.)
+@include generate-theme-classes();
+
 // mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
 $theme-bgs: (
-  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))),
+  "body": 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)),
   "white": var(--#{$prefix}white),
   "black": var(--#{$prefix}black),
   "transparent": transparent,
@@ -123,31 +166,34 @@ $theme-bgs: (
 ) !default;
 
 $theme-fgs: (
-  null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
+  "body": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-050)),
   "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)),
+  "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-500)),
   "white": var(--#{$prefix}white),
   "black": var(--#{$prefix}black),
   "inherit": inherit,
 ) !default;
 
 $theme-borders: (
-  null: light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-700)),
+  "bg": var(--#{$prefix}bg-body),
+  "body": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-800)),
   "muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-800)),
-  "subtle": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900))),
+  "subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)),
   "emphasized": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-600)),
+  "white": var(--#{$prefix}white),
+  "black": var(--#{$prefix}black),
 ) !default;
 
-// $util-opacity: (
-//   "10": .1,
-//   "20": .2,
-//   "30": .3,
-//   "40": .4,
-//   "50": .5,
-//   "60": .6,
-//   "70": .7,
-//   "80": .8,
-//   "90": .9,
-//   "100": 1
-// ) !default;
+$util-opacity: (
+  10: .1,
+  20: .2,
+  30: .3,
+  40: .4,
+  50: .5,
+  60: .6,
+  70: .7,
+  80: .8,
+  90: .9,
+  100: 1
+) !default;

scss/_toasts.scss

@@ -82,12 +82,12 @@ $toast-header-border-color:         $toast-border-color !default;
     color: var(--#{$prefix}toast-header-color);
     background-color: var(--#{$prefix}toast-header-bg);
     background-clip: padding-box;
-    border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
+    border-block-end: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
     @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
 
     .btn-close {
-      margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x));
-      margin-left: var(--#{$prefix}toast-padding-x);
+      margin-inline-start: var(--#{$prefix}toast-padding-x);
+      margin-inline-end: calc(-.5 * var(--#{$prefix}toast-padding-x));
     }
   }
 

scss/_tooltip.scss

@@ -8,8 +8,8 @@
 // scss-docs-start tooltip-variables
 $tooltip-font-size:                 $font-size-sm !default;
 $tooltip-max-width:                 200px !default;
-$tooltip-color:                     var(--#{$prefix}body-bg) !default;
-$tooltip-bg:                        var(--#{$prefix}emphasis-color) !default;
+$tooltip-color:                     var(--#{$prefix}bg-body) !default;
+$tooltip-bg:                        var(--#{$prefix}color-body) !default;
 $tooltip-border-radius:             var(--#{$prefix}border-radius) !default;
 $tooltip-opacity:                   .9 !default;
 $tooltip-padding-y:                 $spacer * .25 !default;
@@ -82,11 +82,10 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
     &::before {
       top: -1px;
       border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
-      border-top-color: var(--#{$prefix}tooltip-bg);
+      border-block-start-color: var(--#{$prefix}tooltip-bg);
     }
   }
 
-  /* rtl:begin:ignore */
   .bs-tooltip-end .tooltip-arrow {
     left: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
     width: var(--#{$prefix}tooltip-arrow-height);
@@ -95,23 +94,20 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
     &::before {
       right: -1px;
       border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
-      border-right-color: var(--#{$prefix}tooltip-bg);
+      border-inline-end-color: var(--#{$prefix}tooltip-bg);
     }
   }
 
-  /* rtl:end:ignore */
-
   .bs-tooltip-bottom .tooltip-arrow {
     top: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
 
     &::before {
       bottom: -1px;
       border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
-      border-bottom-color: var(--#{$prefix}tooltip-bg);
+      border-block-end-color: var(--#{$prefix}tooltip-bg);
     }
   }
 
-  /* rtl:begin:ignore */
   .bs-tooltip-start .tooltip-arrow {
     right: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
     width: var(--#{$prefix}tooltip-arrow-height);
@@ -120,12 +116,10 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
     &::before {
       left: -1px;
       border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
-      border-left-color: var(--#{$prefix}tooltip-bg);
+      border-inline-start-color: var(--#{$prefix}tooltip-bg);
     }
   }
 
-  /* rtl:end:ignore */
-
   .bs-tooltip-auto {
     &[data-popper-placement^="top"] {
       @extend .bs-tooltip-top;

scss/_utilities.scss

@@ -6,7 +6,6 @@
 @use "theme" as *;
 
 // add:
-// - placeItems
 // - double check css grid helpers
 //
 // update:
@@ -92,11 +91,9 @@ $utilities: map.merge(
     // scss-docs-start utils-display
     "display": (
       responsive: true,
-      print: true,
       property: display,
       class: d,
-      important: true,
-      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex flow-root none
+      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex contents flow-root none
     ),
     // scss-docs-end utils-display
     // scss-docs-start utils-shadow
@@ -122,7 +119,6 @@ $utilities: map.merge(
     // scss-docs-start utils-position
     "position": (
       property: position,
-      important: true,
       values: static relative absolute fixed sticky
     ),
     "top": (
@@ -207,42 +203,52 @@ $utilities: map.merge(
         0: 0,
       )
     ),
+    // scss-docs-end utils-borders
+    // scss-docs-start utils-border-color
     "border-color": (
-      property: border-color,
+      property: (
+        "--#{$prefix}border-color": null,
+        "border-color": var(--#{$prefix}border-color)
+      ),
       class: border,
-      values: theme-color-values("border")
+      values: map.merge(theme-color-values("bg"), $theme-borders),
+    ),
+    "border-color-subtle": (
+      property: (
+        "--#{$prefix}border-color": null,
+        "border-color": var(--#{$prefix}border-color)
+      ),
+      class: border-subtle,
+      values: theme-color-values("border"),
     ),
     "border-width": (
       property: border-width,
       class: border,
       values: $border-widths
     ),
-    // "border-opacity": (
-    //   css-var: true,
-    //   class: border-opacity,
-    //   values: (
-    //     10: .1,
-    //     25: .25,
-    //     50: .5,
-    //     75: .75,
-    //     100: 1
-    //   )
-    // ),
-    // scss-docs-end utils-borders
+    "border-opacity": (
+      class: border,
+      property: border-color,
+      values: theme-opacity-values(--#{$prefix}border-color)
+    ),
+    // scss-docs-end utils-border-color
     // Sizing utilities
-    // scss-docs-start utils-sizing
+    // scss-docs-start utils-width
     "width": (
       property: width,
       class: w,
-      values: (
-        25: 25%,
-        50: 50%,
-        75: 75%,
-        100: 100%,
-        auto: auto,
-        min: min-content,
-        max: max-content,
-        fit: fit-content,
+      values: map.merge(
+        $sizes,
+        (
+          25: 25%,
+          50: 50%,
+          75: 75%,
+          100: 100%,
+          auto: auto,
+          min: min-content,
+          max: max-content,
+          fit: fit-content,
+        )
       )
     ),
     "max-width": (
@@ -268,6 +274,8 @@ $utilities: map.merge(
       class: min-vw,
       values: (100: 100vw)
     ),
+    // scss-docs-end utils-width
+    // scss-docs-start utils-height
     "height": (
       property: height,
       class: h,
@@ -305,7 +313,7 @@ $utilities: map.merge(
       class: min-vh,
       values: (100: 100vh)
     ),
-    // scss-docs-end utils-sizing
+    // scss-docs-end utils-height
     // Flex utilities
     // scss-docs-start utils-flex
     "flex": (
@@ -419,6 +427,30 @@ $utilities: map.merge(
         stretch: stretch,
       )
     ),
+    "grid-column-counts": (
+      responsive: true,
+      property: --#{$prefix}columns,
+      class: grid-cols,
+      values: (
+        3,
+        4,
+        6
+      )
+    ),
+    "grid-columns": (
+      responsive: true,
+      property: grid-column,
+      class: grid-cols,
+      values: (
+        fill: #{"1 / -1"},
+      )
+    ),
+    "grid-auto-flow": (
+      responsive: true,
+      property: grid-auto-flow,
+      class: grid-auto-flow,
+      values: row column dense
+    ),
     "order": (
       responsive: true,
       property: order,
@@ -444,37 +476,37 @@ $utilities: map.merge(
     ),
     "margin-x": (
       responsive: true,
-      property: margin-right margin-left,
+      property: margin-inline,
       class: mx,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-y": (
       responsive: true,
-      property: margin-top margin-bottom,
+      property: margin-block,
       class: my,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-top": (
       responsive: true,
-      property: margin-top,
+      property: margin-block-start,
       class: mt,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-end": (
       responsive: true,
-      property: margin-right,
+      property: margin-inline-end,
       class: me,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-bottom": (
       responsive: true,
-      property: margin-bottom,
+      property: margin-block-end,
       class: mb,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-start": (
       responsive: true,
-      property: margin-left,
+      property: margin-inline-start,
       class: ms,
       values: map.merge($spacers, (auto: auto))
     ),
@@ -487,37 +519,37 @@ $utilities: map.merge(
     // ),
     // "negative-margin-x": (
     //   responsive: true,
-    //   property: margin-right margin-left,
+    //   property: margin-inline,
     //   class: mx,
     //   values: $negative-spacers
     // ),
     // "negative-margin-y": (
     //   responsive: true,
-    //   property: margin-top margin-bottom,
+    //   property: margin-block,
     //   class: my,
     //   values: $negative-spacers
     // ),
     // "negative-margin-top": (
     //   responsive: true,
-    //   property: margin-top,
+    //   property: margin-block-start,
     //   class: mt,
     //   values: $negative-spacers
     // ),
     // "negative-margin-end": (
     //   responsive: true,
-    //   property: margin-right,
+    //   property: margin-inline-end,
     //   class: me,
     //   values: $negative-spacers
     // ),
     // "negative-margin-bottom": (
     //   responsive: true,
-    //   property: margin-bottom,
+    //   property: margin-block-end,
     //   class: mb,
     //   values: $negative-spacers
     // ),
     // "negative-margin-start": (
     //   responsive: true,
-    //   property: margin-left,
+    //   property: margin-inline-start,
     //   class: ms,
     //   values: $negative-spacers
     // ),
@@ -530,37 +562,37 @@ $utilities: map.merge(
     ),
     "padding-x": (
       responsive: true,
-      property: padding-right padding-left,
+      property: padding-inline,
       class: px,
       values: $spacers
     ),
     "padding-y": (
       responsive: true,
-      property: padding-top padding-bottom,
+      property: padding-block,
       class: py,
       values: $spacers
     ),
     "padding-top": (
       responsive: true,
-      property: padding-top,
+      property: padding-block-start,
       class: pt,
       values: $spacers
     ),
     "padding-end": (
       responsive: true,
-      property: padding-right,
+      property: padding-inline-end,
       class: pe,
       values: $spacers
     ),
     "padding-bottom": (
       responsive: true,
-      property: padding-bottom,
+      property: padding-block-end,
       class: pb,
       values: $spacers
     ),
     "padding-start": (
       responsive: true,
-      property: padding-left,
+      property: padding-inline-start,
       class: ps,
       values: $spacers
     ),
@@ -585,18 +617,31 @@ $utilities: map.merge(
     ),
     // scss-docs-end utils-spacing
     // Text
-    // scss-docs-start utils-text
+    // scss-docs-start utils-font-family
     "font-family": (
       property: font-family,
       class: font,
-      values: (monospace: var(--#{$prefix}font-monospace))
+      values: (
+        "monospace": var(--#{$prefix}font-monospace),
+        "body": var(--#{$prefix}font-sans-serif),
+      )
     ),
+    // scss-docs-end utils-font-family
+    // scss-docs-start utils-font-size
     "font-size": (
-      rfs: true,
       property: font-size,
       class: fs,
+      values: map-get-nested($font-sizes, "font-size")
+    ),
+    "text-size": (
+      property: (
+        "font-size": 1rem,
+        "line-height": 1.5
+      ),
+      class: text,
       values: $font-sizes
     ),
+    // scss-docs-end utils-font-size
     "font-style": (
       property: font-style,
       class: fst,
@@ -639,77 +684,85 @@ $utilities: map.merge(
       property: text-decoration,
       values: none underline line-through
     ),
+    // scss-docs-start utils-text-transform
     "text-transform": (
       property: text-transform,
       class: text,
       values: lowercase uppercase capitalize
     ),
-    "white-space": (
+    // scss-docs-end utils-text-transform
+    // "white-space": (
+    //   property: white-space,
+    //   class: text,
+    //   values: (
+    //     wrap: normal,
+    //     nowrap: nowrap,
+    //   )
+    // ),
+    "text-wrap": (
       property: white-space,
       class: text,
-      values: (
-        wrap: normal,
-        nowrap: nowrap,
-      )
+      values: wrap nowrap balance pretty,
     ),
+    // scss-docs-start utils-text-break
     "word-wrap": (
       property: word-wrap word-break,
       class: text,
       values: (break: break-word),
       rtl: false
     ),
+    // scss-docs-end utils-text-break
     // scss-docs-end utils-text
     // scss-docs-start utils-color
-    "color-attr": (
-      selector: "attr-includes",
-      class: "color-",
-      property: color,
-      values: var(--#{$prefix}color),
-    ),
-    "color": (
-      property: --#{$prefix}color,
-      class: color,
+    // "color-attr": (
+    //   selector: "attr-includes",
+    //   class: "fg-",
+    //   property: color,
+    //   values: var(--#{$prefix}fg),
+    // ),
+    "fg": (
+      property: (
+        "--#{$prefix}fg": null,
+        "color": var(--#{$prefix}fg)
+      ),
+      class: fg,
       values: map.merge(theme-color-values("text"), $theme-fgs),
     ),
-    "color-opacity": (
-      class: color,
-      property: color,
-      values: (
-        10: color-mix(in oklch, var(--#{$prefix}color) 10%, transparent),
-        20: color-mix(in oklch, var(--#{$prefix}color) 20%, transparent),
-        30: color-mix(in oklch, var(--#{$prefix}color) 30%, transparent),
-        40: color-mix(in oklch, var(--#{$prefix}color) 40%, transparent),
-        50: color-mix(in oklch, var(--#{$prefix}color) 50%, transparent),
-        60: color-mix(in oklch, var(--#{$prefix}color) 60%, transparent),
-        70: color-mix(in oklch, var(--#{$prefix}color) 70%, transparent),
-        80: color-mix(in oklch, var(--#{$prefix}color) 80%, transparent),
-        90: color-mix(in oklch, var(--#{$prefix}color) 90%, transparent),
-        100: var(--#{$prefix}color),
-      )
+    "fg-emphasis": (
+      property: (
+        "--#{$prefix}fg": null,
+        "color": var(--#{$prefix}fg)
+      ),
+      class: fg-emphasis,
+      values: theme-color-values("text-emphasis"),
     ),
-    "contrast-color": (
-      property: --#{$prefix}color,
-      class: color-on,
+    "fg-opacity": (
+      class: fg,
+      property: color,
+      values: theme-opacity-values(--#{$prefix}fg)
+    ),
+    "fg-contrast": (
+      property: (
+        "--#{$prefix}fg": null,
+        "color": var(--#{$prefix}fg)
+      ),
+      class: fg-contrast,
       values: theme-color-values("contrast"),
     ),
     // scss-docs-end utils-color
     // scss-docs-start utils-links
     "link-opacity": (
-      property: --#{$prefix}link-opacity,
+      property: color,
       // css-var: true,
-      class: link-opacity,
+      class: link,
       state: hover,
-      values: (
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
-      )
+      values: theme-opacity-values(--#{$prefix}link-color)
     ),
-    "link-offset": (
+    // scss-docs-end utils-links
+    // scss-docs-start utils-underline
+    "underline-offset": (
       property: text-underline-offset,
-      class: link-offset,
+      class: underline-offset,
       state: hover,
       values: (
         1: .125em,
@@ -717,71 +770,59 @@ $utilities: map.merge(
         3: .375em,
       )
     ),
-    "link-underline": (
+    "underline-color": (
       property: text-decoration-color,
-      class: link-underline,
-      local-vars: (
-        "link-underline-opacity": 1
-      ),
-      // values: map.merge(
-      //   $utilities-links-underline,
-      //   (
-      //     // null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
-      //   )
-      // )
+      class: underline,
+      values: theme-color-values("text"),
     ),
-    "link-underline-opacity": (
-      // css-var: true,
-      property: --#{$prefix}link-underline-opacity,
-      class: link-underline-opacity,
+    "underline-opacity": (
+      property: text-decoration-color,
+      class: underline,
+      state: hover,
+      values: theme-opacity-values(--#{$prefix}link-color)
+    ),
+    "underline-thickness": (
+      property: text-decoration-thickness,
+      class: underline-thickness,
       state: hover,
       values: (
-        0: 0,
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
-      ),
+        1: 1px,
+        2: 2px,
+        3: 3px,
+        4: 4px,
+        5: 5px,
+      )
     ),
-    // scss-docs-end utils-links
+    // scss-docs-end utils-underline
     // scss-docs-start utils-bg-color
-    "bg-attr": (
-      selector: "attr-includes",
-      class: "bg-",
-      property: background-color,
-      values: var(--#{$prefix}bg),
-    ),
     "bg-color": (
-      property: --#{$prefix}bg,
+      property: (
+        "--#{$prefix}bg": null,
+        "background-color": var(--#{$prefix}bg)
+      ),
       class: bg,
       values: map.merge(theme-color-values("bg"), $theme-bgs),
     ),
     "bg-color-subtle": (
-      property: --#{$prefix}bg,
+      property: (
+        "--#{$prefix}bg": null,
+        "background-color": var(--#{$prefix}bg)
+      ),
       class: bg-subtle,
       values: theme-color-values("bg-subtle"),
     ),
     "bg-color-muted": (
-      property: --#{$prefix}bg,
+      property: (
+        "--#{$prefix}bg": null,
+        "background-color": var(--#{$prefix}bg)
+      ),
       class: bg-muted,
       values: theme-color-values("bg-muted"),
     ),
     "bg-opacity": (
       class: bg,
       property: background-color,
-      values: (
-        10: color-mix(in oklch, var(--#{$prefix}bg) 10%, transparent),
-        20: color-mix(in oklch, var(--#{$prefix}bg) 20%, transparent),
-        30: color-mix(in oklch, var(--#{$prefix}bg) 30%, transparent),
-        40: color-mix(in oklch, var(--#{$prefix}bg) 40%, transparent),
-        50: color-mix(in oklch, var(--#{$prefix}bg) 50%, transparent),
-        60: color-mix(in oklch, var(--#{$prefix}bg) 60%, transparent),
-        70: color-mix(in oklch, var(--#{$prefix}bg) 70%, transparent),
-        80: color-mix(in oklch, var(--#{$prefix}bg) 80%, transparent),
-        90: color-mix(in oklch, var(--#{$prefix}bg) 90%, transparent),
-        100: var(--#{$prefix}bg),
-      )
+      values: theme-opacity-values(--#{$prefix}bg)
     ),
     // scss-docs-end utils-bg-color
     "gradient": (
@@ -817,7 +858,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-top": (
-      property: border-top-left-radius border-top-right-radius,
+      property: border-start-start-radius border-start-end-radius,
       class: rounded-top,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -832,7 +873,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-end": (
-      property: border-top-right-radius border-bottom-right-radius,
+      property: border-end-end-radius border-end-start-radius,
       class: rounded-end,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -847,7 +888,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-bottom": (
-      property: border-bottom-right-radius border-bottom-left-radius,
+      property: border-end-end-radius border-end-start-radius,
       class: rounded-bottom,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -862,7 +903,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-start": (
-      property: border-bottom-left-radius border-top-left-radius,
+      property: border-start-start-radius border-start-end-radius,
       class: rounded-start,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -881,7 +922,6 @@ $utilities: map.merge(
     "visibility": (
       property: visibility,
       class: null,
-      important: true,
       values: (
         visible: visible,
         invisible: hidden,
@@ -893,7 +933,7 @@ $utilities: map.merge(
       property: z-index,
       class: z,
       values: $zindex-levels,
-    )
+    ),
     // scss-docs-end utils-zindex
   ),
   $utilities

scss/_variables.scss

@@ -10,62 +10,29 @@
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
 // scss-docs-start theme-color-variables
-$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;
+// $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;
 // 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"),
@@ -150,14 +117,14 @@ $position-values: (
 // Settings for the `<body>` element.
 
 $body-text-align:           null !default;
-$body-color:                $gray-900 !default;
-$body-bg:                   $white !default;
+$body-color:                var(--#{$prefix}color-body) !default;
+$body-bg:                   var(--#{$prefix}bg-body) !default;
 
-$body-secondary-color:      rgba($body-color, .75) !default;
-$body-secondary-bg:         $gray-200 !default;
+$body-secondary-color:      var(--#{$prefix}color-secondary) !default;
+$body-secondary-bg:         var(--#{$prefix}bg-secondary) !default;
 
-$body-tertiary-color:       rgba($body-color, .5) !default;
-$body-tertiary-bg:          $gray-100 !default;
+$body-tertiary-color:       var(--#{$prefix}color-muted) !default;
+$body-tertiary-bg:          var(--#{$prefix}bg-muted) !default;
 
 $body-emphasis-color:       $black !default;
 
@@ -165,12 +132,12 @@ $body-emphasis-color:       $black !default;
 //
 // Style anchor elements.
 
-$link-color:                              $primary !default;
+// $link-color:                              var !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-decoration:                   null !default;
+// $link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
+// $link-hover-decoration:                   $link-decoration !default;
 
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
@@ -205,7 +172,7 @@ $border-widths: (
   5: 5px
 ) !default;
 $border-style:                solid !default;
-$border-color:                color.mix($gray-300, $gray-400) !default;
+$border-color:                color-mix(in oklch, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)) !default;
 $border-color-translucent:    rgba($black, .175) !default;
 // scss-docs-end border-variables
 
@@ -214,7 +181,7 @@ $border-radius:               .375rem !default;
 $border-radius-sm:            .25rem !default;
 $border-radius-lg:            .5rem !default;
 $border-radius-xl:            1rem !default;
-$border-radius-xxl:           2rem !default;
+$border-radius-2xl:           2rem !default;
 $border-radius-pill:          50rem !default;
 // scss-docs-end border-radius-variables
 
@@ -225,17 +192,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:      rgba($primary, $focus-ring-opacity) !default;
+$focus-ring-color:      var(--#{$prefix}primary-focus-ring) !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
@@ -286,24 +253,57 @@ $line-height-base:            1.5 !default;
 $line-height-sm:              1.25 !default;
 $line-height-lg:              2 !default;
 
-$h1-font-size:                $font-size-base * 2.5 !default;
-$h2-font-size:                $font-size-base * 2 !default;
-$h3-font-size:                $font-size-base * 1.75 !default;
-$h4-font-size:                $font-size-base * 1.5 !default;
-$h5-font-size:                $font-size-base * 1.25 !default;
-$h6-font-size:                $font-size-base !default;
+$h1-font-size: var(--#{$prefix}font-size-3xl) !default;
+$h2-font-size: var(--#{$prefix}font-size-2xl) !default;
+$h3-font-size: var(--#{$prefix}font-size-xl) !default;
+$h4-font-size: var(--#{$prefix}font-size-lg) !default;
+$h5-font-size: var(--#{$prefix}font-size-md) !default;
+$h6-font-size: var(--#{$prefix}font-size-sm) !default;
 // scss-docs-end font-variables
 
-// scss-docs-start font-sizes
+// Font sizes with line-height for utilities
 $font-sizes: (
-  1: $h1-font-size,
-  2: $h2-font-size,
-  3: $h3-font-size,
-  4: $h4-font-size,
-  5: $h5-font-size,
-  6: $h6-font-size
+  "xs": (
+    "font-size": var(--#{$prefix}font-size-xs),
+    "line-height": var(--#{$prefix}line-height-xs)
+  ),
+  "sm": (
+    "font-size": var(--#{$prefix}font-size-sm),
+    "line-height": var(--#{$prefix}line-height-sm)
+  ),
+  "md": (
+    "font-size": var(--#{$prefix}font-size-md),
+    "line-height": var(--#{$prefix}line-height-md)
+  ),
+  "lg": (
+    "font-size": var(--#{$prefix}font-size-lg),
+    "line-height": var(--#{$prefix}line-height-lg)
+  ),
+  "xl": (
+    "font-size": var(--#{$prefix}font-size-xl),
+    "line-height": var(--#{$prefix}line-height-xl)
+  ),
+  "2xl": (
+    "font-size": var(--#{$prefix}font-size-2xl),
+    "line-height": var(--#{$prefix}line-height-2xl)
+  ),
+  "3xl": (
+    "font-size": var(--#{$prefix}font-size-3xl),
+    "line-height": var(--#{$prefix}line-height-3xl)
+  ),
+  "4xl": (
+    "font-size": var(--#{$prefix}font-size-4xl),
+    "line-height": var(--#{$prefix}line-height-4xl)
+  ),
+  "5xl": (
+    "font-size": var(--#{$prefix}font-size-5xl),
+    "line-height": var(--#{$prefix}line-height-5xl)
+  ),
+  "6xl": (
+    "font-size": var(--#{$prefix}font-size-6xl),
+    "line-height": var(--#{$prefix}line-height-6xl)
+  ),
 ) !default;
-// scss-docs-end font-sizes
 
 // scss-docs-start headings-variables
 $headings-margin-bottom:      $spacer * .5 !default;
@@ -314,26 +314,7 @@ $headings-line-height:        1.2 !default;
 $headings-color:              inherit !default;
 // scss-docs-end headings-variables
 
-// scss-docs-start display-headings
-$display-font-sizes: (
-  1: 5rem,
-  2: 4.5rem,
-  3: 4rem,
-  4: 3.5rem,
-  5: 3rem,
-  6: 2.5rem
-) !default;
-
-$display-font-family: null !default;
-$display-font-style:  null !default;
-$display-font-weight: 300 !default;
-$display-line-height: $headings-line-height !default;
-// scss-docs-end display-headings
-
 // scss-docs-start type-variables
-$lead-font-size:              $font-size-base * 1.25 !default;
-$lead-font-weight:            300 !default;
-
 $small-font-size:             .875em !default;
 
 $sub-sup-font-size:           .75em !default;
@@ -342,7 +323,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:     $gray-600 !default;
+$blockquote-footer-color:     var(--#{$prefix}gray-600) !default;
 $blockquote-footer-font-size: $small-font-size !default;
 
 $hr-margin-y:                 $spacer !default;
@@ -366,7 +347,7 @@ $list-inline-padding:         .5rem !default;
 
 $mark-padding:                .1875em !default;
 $mark-color:                  $body-color !default;
-$mark-bg:                     $yellow-100 !default;
+$mark-bg:                     var(--#{$prefix}yellow-100) !default;
 // scss-docs-end type-variables
 
 
@@ -381,7 +362,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:         $focus-ring-width !default;
+$input-btn-focus-width:         .25em !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;
@@ -404,7 +385,7 @@ $input-btn-border-width:      var(--#{$prefix}border-width) !default;
 // For each of Bootstrap's buttons, define text, background, and border color.
 
 // scss-docs-start btn-variables
-$btn-color:                   var(--#{$prefix}body-color) !default;
+$btn-color:                   var(--#{$prefix}color-body) !default;
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;
@@ -431,9 +412,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:     $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:     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;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;
@@ -494,8 +475,8 @@ $modal-dialog-margin-y-sm-up:       1.75rem !default;
 
 $modal-title-line-height:           $line-height-base !default;
 
-$modal-content-color:               var(--#{$prefix}body-color) !default;
-$modal-content-bg:                  var(--#{$prefix}body-bg) !default;
+$modal-content-color:               var(--#{$prefix}color-body) !default;
+$modal-content-bg:                  var(--#{$prefix}bg-body) !default;
 $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
 $modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
@@ -519,7 +500,7 @@ $modal-footer-border-width:         $modal-header-border-width !default;
 $modal-sm:                          300px !default;
 $modal-md:                          500px !default;
 $modal-lg:                          800px !default;
-$modal-xl:                          1140px !default;
+$modal-xl:                          1200px !default;
 
 $modal-fade-transform:              translate(0, -50px) !default;
 $modal-show-transform:              none !default;
@@ -538,8 +519,8 @@ $offcanvas-transition-duration:     .3s !default;
 $offcanvas-border-color:            $modal-content-border-color !default;
 $offcanvas-border-width:            $modal-content-border-width !default;
 $offcanvas-title-line-height:       $modal-title-line-height !default;
-$offcanvas-bg-color:                var(--#{$prefix}body-bg) !default;
-$offcanvas-color:                   var(--#{$prefix}body-color) !default;
+$offcanvas-bg-color:                var(--#{$prefix}bg-body) !default;
+$offcanvas-color:                   var(--#{$prefix}color-body) !default;
 $offcanvas-box-shadow:              $modal-content-box-shadow-xs !default;
 $offcanvas-backdrop-bg:             $modal-backdrop-bg !default;
 $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
@@ -553,8 +534,8 @@ $code-color:                        var(--#{$prefix}secondary-text) !default;
 $kbd-padding-y:                     .1875rem !default;
 $kbd-padding-x:                     .375rem !default;
 $kbd-font-size:                     $code-font-size !default;
-$kbd-color:                         var(--#{$prefix}body-bg) !default;
-$kbd-bg:                            var(--#{$prefix}body-color) !default;
+$kbd-color:                         var(--#{$prefix}bg-body) !default;
+$kbd-bg:                            var(--#{$prefix}color-body) !default;
 
 $pre-color:                         null !default;
 
@@ -567,21 +548,18 @@ $pre-color:                         null !default;
 //
 
 // scss-docs-start sass-dark-mode-vars
-$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:            $gray-800 !default;
-$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
-$body-tertiary-bg-dark:             color.mix($gray-800, $gray-900, 50%) !default;
+// $body-color-dark:                   var(--#{$prefix}gray-200) !default;
+// $body-bg-dark:                      var(--#{$prefix}gray-975) !default;
+// $body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
+// $body-secondary-bg-dark:            var(--#{$prefix}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-emphasis-color-dark:          $white !default;
-$border-color-dark:                 $gray-700 !default;
+$border-color-dark:                 var(--#{$prefix}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:                      $yellow-800 !default;
+// $mark-color-dark:                   $body-color-dark !default;
+$mark-bg-dark:                      var(--#{$prefix}yellow-800) !default;
 
 
 //
@@ -589,9 +567,9 @@ $mark-bg-dark:                      $yellow-800 !default;
 //
 
 // scss-docs-start form-validation-colors-dark
-$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;
+$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;
 // scss-docs-end form-validation-colors-dark
 // scss-docs-end sass-dark-mode-vars

scss/buttons/_button-group.scss

@@ -46,7 +46,7 @@
     // Prevent double borders when buttons are next to each other
     > :not(.btn-check:first-child) + .btn,
     > .btn-group:not(:first-child) {
-      margin-left: calc(-1 * #{$btn-border-width});
+      margin-inline-start: calc(-1 * #{$btn-border-width});
     }
 
     // Reset rounded corners
@@ -80,28 +80,25 @@
   //
 
   .dropdown-toggle-split {
-    padding-right: $btn-padding-x * .75;
-    padding-left: $btn-padding-x * .75;
+    padding-inline: $btn-padding-x * .75;
 
     &::after,
     .dropup &::after,
     .dropend &::after {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
 
     .dropstart &::before {
-      margin-right: 0;
+      margin-inline-end: 0;
     }
   }
 
   .btn-sm + .dropdown-toggle-split {
-    padding-right: $btn-padding-x-sm * .75;
-    padding-left: $btn-padding-x-sm * .75;
+    padding-inline: $btn-padding-x-sm * .75;
   }
 
   .btn-lg + .dropdown-toggle-split {
-    padding-right: $btn-padding-x-lg * .75;
-    padding-left: $btn-padding-x-lg * .75;
+    padding-inline: $btn-padding-x-lg * .75;
   }
 
 

scss/buttons/_button-variables.scss

@@ -6,7 +6,7 @@
 @use "../forms/form-variables" as *;
 
 // scss-docs-start btn-variables
-$btn-color:                   var(--#{$prefix}body-color) !default;
+$btn-color:                   var(--#{$prefix}color-body) !default;
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;
@@ -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:     $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:     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;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;

scss/buttons/_button.scss

@@ -1,6 +1,10 @@
 @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 "../functions" as *;
 @use "../vendor/rfs" as *;
@@ -11,68 +15,125 @@
 @use "../mixins/transition" as *;
 @use "button-variables" as *;
 
-// Button variants
-//
-// Easily pump out default styles, as well as :hover, :focus, :active,
-// and disabled options for all buttons
+// 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-emphasis"
+    ),
+    "active": (
+      "bg": "bg-subtle",
+      "color": "text-emphasis"
+    )
+  ),
+  "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
 
+// // Main button style generator mixin
+
+// Generate button variant classes (e.g., .btn-solid, .btn-outline, etc.)
 // scss-docs-start btn-variant-mixin
-@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};
+@each $variant, $_ in $button-variants {
+  .btn-#{$variant} {
+    @each $property, $value in map.get($button-variants, $variant, "base") {
+      @if $value == "transparent" {
+        --#{$prefix}btn-#{$property}: transparent;
+      } @else {
+        --#{$prefix}btn-#{$property}: var(--#{$prefix}theme-#{$value});
+      }
+    }
+
+    &:hover {
+      @each $property, $value in map.get($button-variants, $variant, "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}theme-#{$first-value}) 50%, var(--#{$prefix}theme-#{$second-value}));
+        } @else if $value == "bg-subtle" {
+          --#{$prefix}btn-hover-#{$property}: var(--#{$prefix}theme-#{$value});
+        } @else {
+          --#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}theme-#{$value}) calc(l * .95) calc(c * 1.1) h);
+        }
+      }
+    }
+
+    &:focus-visible {
+      outline-color: var(--#{$prefix}theme-focus-ring);
+    }
+
+    &:active,
+    &.active {
+      @each $property, $value in map.get($button-variants, $variant, "active") {
+        @if $value == "transparent" {
+          --#{$prefix}btn-active-#{$property}: transparent;
+        } @else if $value == "bg-subtle" {
+          --#{$prefix}btn-active-#{$property}: var(--#{$prefix}theme-#{$value});
+        } @else {
+          --#{$prefix}btn-active-#{$property}: oklch(from var(--#{$prefix}theme-#{$value}) calc(l * .9) calc(c * 1.15) h);
+        }
+      }
+    }
+  }
 }
 // scss-docs-end btn-variant-mixin
 
-// 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) {
   --#{$prefix}btn-padding-y: #{$padding-y};
@@ -82,13 +143,13 @@
 }
 // scss-docs-end btn-size-mixin
 
-
 //
 // Base styles
 //
 
 @layer components {
-  .btn {
+  .btn,
+  [class*="btn-"] {
     // scss-docs-start btn-css-vars
     --#{$prefix}btn-padding-x: #{$btn-padding-x};
     --#{$prefix}btn-padding-y: #{$btn-padding-y};
@@ -115,7 +176,7 @@
     line-height: var(--#{$prefix}btn-line-height);
     color: var(--#{$prefix}btn-color);
     text-align: center;
-    text-decoration: if($link-decoration == none, null, none);
+    text-decoration: none;
     white-space: $btn-white-space;
     vertical-align: middle;
     cursor: if($enable-button-pointers, pointer, null);
@@ -128,7 +189,6 @@
 
     &:hover {
       color: var(--#{$prefix}btn-hover-color);
-      text-decoration: if($link-hover-decoration == underline, none, null);
       background-color: var(--#{$prefix}btn-hover-bg);
       border-color: var(--#{$prefix}btn-hover-border-color);
     }
@@ -141,15 +201,11 @@
     }
 
     &: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);
     }
 
@@ -187,46 +243,6 @@
     }
   }
 
-
-  //
-  // 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
   //
@@ -246,16 +262,12 @@
     --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
     // --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
 
-    text-decoration: $link-decoration;
+    text-decoration: var(--#{$prefix}link-decoration);
+
     @if $enable-gradients {
       background-image: none;
     }
 
-    &:hover,
-    &:focus-visible {
-      text-decoration: $link-hover-decoration;
-    }
-
     &:focus-visible {
       color: var(--#{$prefix}btn-color);
     }

scss/content/_images.scss

@@ -7,7 +7,7 @@
 
 // scss-docs-start thumbnail-variables
 $thumbnail-padding:                 .25rem !default;
-$thumbnail-bg:                      var(--#{$prefix}body-bg) !default;
+$thumbnail-bg:                      var(--#{$prefix}bg-body) !default;
 $thumbnail-border-width:            var(--#{$prefix}border-width) !default;
 $thumbnail-border-color:            var(--#{$prefix}border-color) !default;
 $thumbnail-border-radius:           var(--#{$prefix}border-radius) !default;

scss/content/_prose.scss

@@ -0,0 +1,137 @@
+@use "../config" as *;
+@use "../mixins/transition" as *;
+
+@layer content {
+  .prose {
+    --#{$prefix}content-font-size: 16px;
+    --#{$prefix}content-gap: 24px;
+    --#{$prefix}heading-color: light-dark(var(--bs-gray-900), var(--bs-white));
+
+    position: relative;
+    max-width: 1000px;
+    margin-inline: auto;
+    font-size: var(--#{$prefix}content-font-size);
+    line-height: var(--#{$prefix}content-gap);
+
+    p,
+    ul,
+    ol,
+    dl,
+    pre,
+    table,
+    blockquote {
+      margin-bottom: var(--#{$prefix}content-gap);
+    }
+
+    li:not(:last-child) {
+      margin-bottom: calc(var(--#{$prefix}content-gap) / 4);
+    }
+
+    li ul,
+    li ol {
+      margin-top: calc(var(--#{$prefix}content-gap) / 4);
+    }
+
+    hr {
+      margin: calc(var(--#{$prefix}content-gap) * 1.5) 0;
+      border: 0;
+      border-block-start: 1px solid var(--#{$prefix}border-color);
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      --bs-heading-color: var(--bs-emphasis-color);
+
+      margin-top: 0;
+      margin-bottom: calc(var(--#{$prefix}content-gap) / 2);
+      font-weight: 500;
+      line-height: 1.25;
+    }
+
+    h1,
+    h2 {
+      &:not(:first-child) {
+        margin-top: calc(var(--#{$prefix}content-gap) * 1.5);
+      }
+    }
+
+    h3,
+    h4,
+    h5,
+    h6 {
+      &:not(:first-child) {
+        margin-top: calc(var(--#{$prefix}content-gap) * 1.25);
+      }
+    }
+
+    h1 {
+      font-size: 2.25em;
+      line-height: 1.1;
+    }
+    h2 {
+      font-size: 1.75em;
+    }
+    h3 {
+      margin-bottom: calc(var(--#{$prefix}content-gap) / 4);
+      font-size: 1.5em;
+    }
+    h4 {
+      font-size: 1.25em;
+    }
+    h5 {
+      font-size: 1.125em;
+    }
+    h6 {
+      font-size: 1em;
+    }
+
+    a:not([class]) {
+      color: var(--#{$prefix}link-color);
+      text-decoration: underline;
+      text-decoration-color: color-mix(in srgb, var(--#{$prefix}link-color) 25%, transparent);
+      text-underline-offset: 4px;
+      @include transition(.1s text-decoration-color ease-in-out);
+    }
+
+    a:not([class]):hover {
+      text-decoration-color: var(--#{$prefix}link-hover-color);
+    }
+
+    img {
+      max-width: 100%;
+    }
+
+    blockquote {
+      padding-inline-start: calc(var(--#{$prefix}content-gap) / 2);
+      margin: 0;
+      border-inline-start: 4px solid var(--#{$prefix}border-color);
+    }
+
+    table {
+      width: 100%;
+      border-spacing: 0;
+      border-collapse: collapse;
+    }
+
+    td,
+    th {
+      padding: 6px 12px;
+      text-align: inherit;
+      border: 1px solid var(--#{$prefix}border-color);
+    }
+
+
+    dt {
+      font-weight: 500;
+    }
+
+    video,
+    img {
+      max-width: 100%;
+    }
+  }
+}

scss/content/_reboot.scss

@@ -59,9 +59,9 @@
     @include font-size(var(--#{$prefix}body-font-size));
     font-weight: var(--#{$prefix}body-font-weight);
     line-height: var(--#{$prefix}body-line-height);
-    color: var(--#{$prefix}body-color);
+    color: var(--#{$prefix}color-body);
     text-align: var(--#{$prefix}body-text-align);
-    background-color: var(--#{$prefix}body-bg); // 2
+    background-color: var(--#{$prefix}bg-body); // 2
     -webkit-text-size-adjust: 100%; // 3
     -webkit-tap-highlight-color: rgba($black, 0); // 4
   }
@@ -76,7 +76,7 @@
     margin: $hr-margin-y 0;
     color: $hr-color; // 1
     border: 0;
-    border-top: $hr-border-width solid $hr-border-color;
+    border-block-start: $hr-border-width solid $hr-border-color;
     opacity: $hr-opacity;
   }
 
@@ -171,7 +171,7 @@
 
   ol,
   ul {
-    padding-left: 2rem;
+    padding-inline-start: 2rem;
   }
 
   ol,
@@ -195,8 +195,8 @@
   // 1. Undo browser default
 
   dd {
+    margin-inline-start: 0; // 1
     margin-bottom: .5rem;
-    margin-left: 0; // 1
   }
 
 
@@ -262,8 +262,10 @@
     text-underline-offset: $link-underline-offset;
 
     &:hover {
+      // --#{$prefix}link-color: var(--#{$prefix}link-hover-color);
+      // --#{$prefix}link-decoration: var(--#{$prefix}link-hover-decoration, var(--#{$prefix}link-decoration));
       color: var(--#{$prefix}link-hover-color);
-      text-decoration: var(--#{$prefix}link-hover-decoration);
+      text-decoration: var(--#{$prefix}link-hover-decoration, var(--#{$prefix}link-decoration));
     }
   }
 
@@ -369,7 +371,7 @@
     // color: $table-caption-color;
     padding-block: .5rem;
     color: var(--#{$prefix}secondary-color);
-    text-align: left;
+    text-align: start;
   }
 
   // 1. Removes font-weight bold by inheriting
@@ -507,13 +509,13 @@
     border: 0; // 2
   }
 
-  // 1. By using `float: left`, the legend will behave like a block element.
+  // 1. By using `float: inline-start`, the legend will behave like a block element.
   //    This way the border of a fieldset wraps around the legend if present.
   // 2. Fix wrapping bug.
   //    See https://github.com/twbs/bootstrap/issues/29712
 
   legend {
-    float: left; // 1
+    float: inline-start; // 1
     width: 100%;
     padding: 0;
     margin-bottom: $legend-margin-bottom;
@@ -522,7 +524,7 @@
     @include font-size($legend-font-size);
 
     + * {
-      clear: left; // 2
+      clear: inline-start; // 2
     }
   }
 
@@ -560,19 +562,15 @@
     }
   }
 
-  // 1. A few input types should stay LTR
+  // A few input types should stay LTR regardless of document direction
   // See https://rtlstyling.com/posts/rtl-styling#form-inputs
-  // 2. RTL only output
-  // See https://rtlcss.com/learn/usage-guide/control-directives/#raw
 
-  /* rtl:raw:
   [type="tel"],
   [type="url"],
   [type="email"],
   [type="number"] {
     direction: ltr;
   }
-  */
 
   // Remove the inner padding in Chrome and Safari on macOS.
 

scss/content/_tables.scss

@@ -3,6 +3,7 @@
 @use "sass:math";
 @use "../config" as *;
 @use "../colors" as *;
+@use "../theme" as *;
 @use "../variables" as *;
 @use "../functions" as *;
 @use "../layout/breakpoints" as *;
@@ -15,25 +16,24 @@ $table-cell-padding-x-sm:     .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 var(--#{$prefix}emphasis-color) !default;
-$table-bg:                    var(--#{$prefix}body-bg) !default;
+$table-color:                 var(--#{$prefix}color-body) !default;
+$table-bg:                    var(--#{$prefix}bg-body) !default;
 $table-accent-bg:             transparent !default;
 
 // $table-th-font-weight:        null !default;
 
 $table-striped-color:         $table-color !default;
 $table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
+$table-striped-bg:            color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-striped-bg-factor)}, transparent) !default;
 
 $table-active-color:          $table-color !default;
 $table-active-bg-factor:      .1 !default;
-$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
+$table-active-bg:             color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-active-bg-factor)}, transparent) !default;
 
 $table-hover-color:           $table-color !default;
 $table-hover-bg-factor:       .075 !default;
-$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
+$table-hover-bg:              color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-hover-bg-factor)}, transparent) !default;
 
-$table-border-factor:         .2 !default;
 $table-border-width:          var(--#{$prefix}border-width) !default;
 $table-border-color:          var(--#{$prefix}border-color) !default;
 
@@ -44,46 +44,8 @@ $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: (
-  "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));
-    $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));
-    $table-border-color: color.mix($color, $background, math.percentage($table-border-factor));
-
-    --#{$prefix}table-color: #{$color};
-    --#{$prefix}table-bg: #{$background};
-    --#{$prefix}table-border-color: #{$table-border-color};
-    --#{$prefix}table-striped-bg: #{$striped-bg};
-    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
-    --#{$prefix}table-active-bg: #{$active-bg};
-    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
-    --#{$prefix}table-hover-bg: #{$hover-bg};
-    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
-
-    color: var(--#{$prefix}table-color);
-    border-color: var(--#{$prefix}table-border-color);
-  }
-}
-// scss-docs-end table-variant
 
 //
 // Basic Bootstrap table
@@ -97,6 +59,8 @@ $table-variants: (
     --#{$prefix}table-color-state: initial;
     --#{$prefix}table-bg-state: initial;
     // End of reset
+
+    // scss-docs-start table-css-variables
     --#{$prefix}table-color: #{$table-color};
     --#{$prefix}table-bg: #{$table-bg};
     --#{$prefix}table-border-color: #{$table-border-color};
@@ -107,11 +71,12 @@ $table-variants: (
     --#{$prefix}table-active-bg: #{$table-active-bg};
     --#{$prefix}table-hover-color: #{$table-hover-color};
     --#{$prefix}table-hover-bg: #{$table-hover-bg};
+    // scss-docs-end table-css-variables
 
     width: 100%;
     margin-bottom: $spacer;
     vertical-align: $table-cell-vertical-align;
-    border-color: var(--#{$prefix}table-border-color);
+    border-color: var(--#{$prefix}theme-border, var(--#{$prefix}table-border-color));
 
     // Target th & td
     // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
@@ -121,10 +86,10 @@ $table-variants: (
     > :not(caption) > * > * {
       padding: $table-cell-padding-y $table-cell-padding-x;
       // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
-      color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
-      background-color: var(--#{$prefix}table-bg);
-      border-bottom-width: $table-border-width;
-      box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
+      color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}theme-text, var(--#{$prefix}table-color))));
+      background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-bg));
+      border-block-end-width: $table-border-width;
+      box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-accent-bg))));
     }
 
     > tbody {
@@ -137,7 +102,7 @@ $table-variants: (
   }
 
   .table-group-divider {
-    border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
+    border-block-start: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
   }
 
   //
@@ -184,11 +149,11 @@ $table-variants: (
   .table-borderless {
     // stylelint-disable-next-line selector-max-universal
     > :not(caption) > * > * {
-      border-bottom-width: 0;
+      border-block-end-width: 0;
     }
 
     > :not(:first-child) {
-      border-top-width: 0;
+      border-block-start-width: 0;
     }
   }
 
@@ -199,16 +164,16 @@ $table-variants: (
   // For rows
   .table-striped {
     > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
-      --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
-      --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
+      --#{$prefix}table-color-type: var(--#{$prefix}theme-text, var(--#{$prefix}table-striped-color));
+      --#{$prefix}table-bg-type: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-striped-bg-factor)}, transparent);
     }
   }
 
   // For columns
   .table-striped-columns {
     > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
-      --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
-      --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
+      --#{$prefix}table-color-type: var(--#{$prefix}theme-text, var(--#{$prefix}table-striped-color));
+      --#{$prefix}table-bg-type: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-striped-bg-factor)}, transparent);
     }
   }
 
@@ -217,8 +182,8 @@ $table-variants: (
   // The `.table-active` class can be added to highlight rows or cells
 
   .table-active {
-    --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
-    --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
+    --#{$prefix}table-color-state: var(--#{$prefix}theme-text, var(--#{$prefix}table-active-color));
+    --#{$prefix}table-bg-state: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-active-bg-factor)}, transparent);
   }
 
   // Hover effect
@@ -227,21 +192,11 @@ $table-variants: (
 
   .table-hover {
     > tbody > tr:hover > * {
-      --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
-      --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
+      --#{$prefix}table-color-state: var(--#{$prefix}theme-text, var(--#{$prefix}table-hover-color));
+      --#{$prefix}table-bg-state: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-hover-bg-factor)}, transparent);
     }
   }
 
-
-  // Table variants
-  //
-  // Table variants set the table cell backgrounds, border colors
-  // and the colors of the striped, hovered & active tables
-
-  @each $color, $value in $table-variants {
-    @include table-variant($color, $value);
-  }
-
   // Responsive tables
   //
   // Generate series of `.table-responsive-*` classes for configuring the screen

scss/content/_type.scss

@@ -4,22 +4,6 @@
 @use "../vendor/rfs" as *;
 
 @layer content {
-  .lead {
-    @include font-size($lead-font-size);
-    font-weight: $lead-font-weight;
-  }
-
-  // Type display classes
-  @each $display, $font-size in $display-font-sizes {
-    .display-#{$display} {
-      font-family: $display-font-family;
-      font-style: $display-font-style;
-      font-weight: $display-font-weight;
-      line-height: $display-line-height;
-      @include font-size($font-size);
-    }
-  }
-
   //
   // Lists
   //
@@ -36,7 +20,7 @@
     display: inline-block;
 
     &:not(:last-child) {
-      margin-right: $list-inline-padding;
+      margin-inline-end: $list-inline-padding;
     }
   }
 

scss/content/index.scss

@@ -2,3 +2,4 @@
 @forward "type";
 @forward "tables";
 @forward "images";
+@forward "prose";

scss/forms/_check.scss

@@ -16,8 +16,7 @@ $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}secondary-bg) !default;
-$check-disabled-border-color: $check-disabled-bg !default;
+$check-disabled-bg: var(--#{$prefix}bg-3) !default;
 $check-disabled-opacity: .65 !default;
 // scss-docs-end check-variables
 
@@ -41,7 +40,6 @@ $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
 
@@ -60,15 +58,15 @@ $check-disabled-opacity: .65 !default;
     :where(input) {
       appearance: none;
       // later: maybe set a tertiary bg color?
-      background-color: var(--#{$prefix}check-bg);
-      border: 1px solid var(--#{$prefix}check-border-color);
+      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-bg));
+      border: 1px solid var(--#{$prefix}theme-bg, var(--#{$prefix}check-border-color));
       // stylelint-disable-next-line property-disallowed-list
       border-radius: .25em;
     }
 
     :where(input:checked, input:indeterminate) {
-      background-color: var(--#{$prefix}check-checked-bg);
-      border-color: var(--#{$prefix}check-checked-border-color);
+      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-checked-bg));
+      border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-checked-border-color));
     }
 
     &:has(input:checked) .checked,

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:    $gray-600 !default;
+$form-floating-label-disabled-color:    var(--#{$prefix}gray-600) !default;
 $form-floating-transition:              opacity .1s ease-in-out, transform .1s ease-in-out !default;
 // scss-docs-end form-floating-variables
 
@@ -71,9 +71,9 @@ $form-floating-transition:              opacity .1s ease-in-out, transform .1s e
     }
 
     > .form-select {
+      padding-inline-start: $form-floating-padding-x;
       padding-top: $form-floating-input-padding-t;
       padding-bottom: $form-floating-input-padding-b;
-      padding-left: $form-floating-padding-x;
     }
 
     > .form-control:focus,

scss/forms/_form-control.scss

@@ -150,14 +150,13 @@
 
     &.form-control-sm,
     &.form-control-lg {
-      padding-right: 0;
-      padding-left: 0;
+      padding-inline: 0;
     }
   }
 
   // stylelint-disable selector-no-qualifying-type
   select.form-control {
-    padding-right: calc(var(--#{$prefix}control-padding-x) * 3);
+    padding-inline-end: calc(var(--#{$prefix}control-padding-x) * 3);
     background-image: var(--#{$prefix}control-select-bg);
     background-repeat: no-repeat;
     background-position: var(--#{$prefix}control-select-bg-position);
@@ -165,7 +164,7 @@
 
     &[multiple],
     &[size]:not([size="1"]) {
-      padding-right: var(--#{$prefix}control-padding-x);
+      padding-inline-end: var(--#{$prefix}control-padding-x);
       background-image: none;
     }
 

scss/forms/_form-variables.scss

@@ -9,8 +9,8 @@ $control-padding-y: .375rem !default;
 $control-padding-x: .75rem !default;
 $control-font-size: $font-size-base !default;
 $control-line-height: $line-height-base !default;
-$control-color: var(--#{$prefix}body-color) !default;
-$control-bg: var(--#{$prefix}body-bg) !default;
+$control-color: var(--#{$prefix}color-body) !default;
+$control-bg: var(--#{$prefix}bg-body) !default;
 $control-border-width: var(--#{$prefix}border-width) !default;
 $control-border-color: var(--#{$prefix}border-color) !default;
 $control-border-radius: var(--#{$prefix}border-radius) !default;
@@ -27,12 +27,12 @@ $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:       $gray-600 !default;
+$control-select-indicator-color:       var(--#{$prefix}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;
 
-$control-select-indicator-color-dark:  $body-color-dark !default;
+$control-select-indicator-color-dark:  #fff !default;
 $control-select-indicator-dark:        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-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
 
 
@@ -76,12 +76,12 @@ $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
 $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
 $input-font-size-lg:                    $input-btn-font-size-lg !default;
 
-$input-bg:                              var(--#{$prefix}body-bg) !default;
+$input-bg:                              var(--#{$prefix}bg-body) !default;
 $input-disabled-color:                  null !default;
 $input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color:           null !default;
 
-$input-color:                           var(--#{$prefix}body-color) !default;
+$input-color:                           var(--#{$prefix}color-body) !default;
 $input-border-color:                    var(--#{$prefix}border-color) !default;
 $input-border-width:                    var(--#{$prefix}border-width) !default;
 $input-box-shadow:                      var(--#{$prefix}box-shadow-inset) !default;
@@ -97,7 +97,7 @@ $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
 
 $input-placeholder-color:               var(--#{$prefix}secondary-color) !default;
-$input-plaintext-color:                 var(--#{$prefix}body-color) !default;
+$input-plaintext-color:                 var(--#{$prefix}color-body) !default;
 
 $input-height-border:                   calc(#{$input-border-width} * 2) !default;
 

scss/forms/_input-group.scss

@@ -137,7 +137,7 @@ $input-group-addon-border-color:        $input-border-color !default;
     }
 
     > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-      margin-left: calc(-1 * #{$input-border-width});
+      margin-inline-start: calc(-1 * #{$input-border-width});
       @include border-start-radius(0);
     }
 

scss/forms/_radio.scss

@@ -14,8 +14,7 @@
 $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}secondary-bg) !default;
-$radio-disabled-border-color: $radio-disabled-bg !default;
+$radio-disabled-bg: var(--#{$prefix}bg-3) !default;
 $radio-disabled-opacity: .65 !default;
 // scss-docs-end radio-variables
 
@@ -37,7 +36,6 @@ $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
 
@@ -47,15 +45,15 @@ $radio-disabled-opacity: .65 !default;
     height: 1rem;
     margin-block: .125rem;
     appearance: none;
-    background-color: var(--#{$prefix}radio-bg);
-    border: 1px solid var(--#{$prefix}radio-border-color);
+    background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-bg));
+    border: 1px solid var(--#{$prefix}theme-bg, var(--#{$prefix}radio-border-color));
     // stylelint-disable-next-line property-disallowed-list
     border-radius: 50%;
 
     &:checked {
-      color: var(--#{$prefix}primary-contrast);
-      background-color: var(--#{$prefix}radio-checked-bg);
-      border-color: var(--#{$prefix}radio-checked-border-color);
+      color: var(--#{$prefix}theme-contrast, var(--#{$prefix}primary-contrast));
+      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-bg));
+      border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-border-color));
 
       &::before {
         position: absolute;

scss/forms/_switch.scss

@@ -21,6 +21,7 @@
     --#{$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);
@@ -65,7 +66,8 @@
 
     &:has(input:checked) {
       padding-inline-start: calc(var(--#{$prefix}switch-height) / 2 + var(--#{$prefix}switch-padding));
-      background-color: var(--#{$prefix}primary-base);
+      background-color: var(--#{$prefix}switch-checked-bg);
+      border-color: var(--#{$prefix}switch-checked-border-color);
     }
 
     &:has(input:disabled) {

scss/forms/_validation.scss

@@ -76,7 +76,7 @@
       border-color: $border-color;
 
       @if $enable-validation-icons {
-        padding-right: $input-height-inner;
+        padding-inline-end: $input-height-inner;
         background-image: escape-svg($icon);
         background-repeat: no-repeat;
         background-position: right $input-height-inner-quarter center;
@@ -99,7 +99,7 @@
   textarea.form-control {
     @include form-validation-state-selector($state) {
       @if $enable-validation-icons {
-        padding-right: $input-height-inner;
+        padding-inline-end: $input-height-inner;
         background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
       }
     }
@@ -158,7 +158,7 @@
   }
   .form-check-inline .form-check-input {
     ~ .#{$state}-feedback {
-      margin-left: .5em;
+      margin-inline-start: .5em;
     }
   }
 

scss/helpers/_color-bg.scss

@@ -1,13 +1,16 @@
-@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 $theme-colors {
+  @each $color, $value in $new-theme-colors {
     .text-bg-#{$color} {
-      color: color-contrast($value);
-      background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1));
+      color: var(--#{$prefix}#{$color}-text);
+      --#{$prefix}bg: var(--#{$prefix}#{$color}-bg-subtle);
+      // color: color-contrast($value);
+      // background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1));
     }
   }
 }

scss/helpers/_colored-links.scss

@@ -1,20 +1,22 @@
 @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 $theme-colors {
+  @each $color, $value in $new-theme-colors {
     .link-#{$color} {
-      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));
+      --#{$prefix}link-color: var(--#{$prefix}#{$color}-text);
+      // text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}-text), 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, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
+          --#{$prefix}link-color: var(--#{$prefix}#{$color}-text-emphasis);
+          --#{$prefix}link-hover-color: var(--#{$prefix}#{$color}-text-emphasis);
+          // $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));
         }
       }
     }

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: 992px, xl: 1200px, xxl: 1400px)
+//    (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px)
 //
 // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
 
@@ -14,47 +14,48 @@
 //
 //    >> breakpoint-next(sm)
 //    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
 //    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl 2xl))
 //    md
 @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
   $n: list.index($breakpoint-names, $name);
   @if not $n {
-    @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+    @error "breakpoint `#{$name}` not found in `#{$breakpoint-names}`";
   }
   @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map.get($breakpoints, $name);
   @return if($min != 0, $min, null);
 }
 
-// Maximum breakpoint width.
-// The maximum value is reduced by 0.02px to work around the limitations of
-// `min-` and `max-` prefixes and viewports with fractional widths.
-// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
-// 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
+// Maximum breakpoint width for range media queries.
+// Returns the breakpoint value to use as an upper bound in range queries.
 //
-//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
-//    767.98px
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
+//    576px
+//    >> breakpoint-max(xxl, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
+//    null
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  @if $name == null {
+    @return null;
+  }
   $max: map.get($breakpoints, $name);
-  @return if($max and $max > 0, $max - .02, null);
+  @return if($max and $max > 0, $max, null);
 }
 
 // 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: 992px, xl: 1200px, xxl: 1400px))
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
 //    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
 //    "-sm"
 @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
   @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
@@ -65,7 +66,7 @@
 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
   @if $min {
-    @media (min-width: $min) {
+    @media (width >= $min) {
       @content;
     }
   } @else {
@@ -78,7 +79,7 @@
 @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
   $max: breakpoint-max($name, $breakpoints);
   @if $max {
-    @media (max-width: $max) {
+    @media (width < $max) {
       @content;
     }
   } @else {
@@ -93,7 +94,7 @@
   $max: breakpoint-max($upper, $breakpoints);
 
   @if $min != null and $max != null {
-    @media (min-width: $min) and (max-width: $max) {
+    @media (width >= $min) and (width < $max) {
       @content;
     }
   } @else if $max == null {
@@ -116,7 +117,7 @@
   $max:  breakpoint-max($next, $breakpoints);
 
   @if $min != null and $max != null {
-    @media (min-width: $min) and (max-width: $max) {
+    @media (width >= $min) and (width < $max) {
       @content;
     }
   } @else if $max == null {

scss/layout/_containers.scss

@@ -10,10 +10,8 @@
   --#{$prefix}gutter-x: #{$gutter};
   --#{$prefix}gutter-y: 0;
   width: 100%;
-  padding-right: calc(var(--#{$prefix}gutter-x) * .5);
-  padding-left: calc(var(--#{$prefix}gutter-x) * .5);
-  margin-right: auto;
-  margin-left: auto;
+  padding-inline: calc(var(--#{$prefix}gutter-x) * .5);
+  margin-inline: auto;
 }
 
 @layer layout {

scss/layout/_grid.scss

@@ -55,19 +55,22 @@
     gap: var(--#{$prefix}gap);
   }
 
-  // mdo-do: add to utilities?
-  .g-col-auto {
-    grid-column: auto/auto;
-  }
+  // .g-col-auto {
+  //   grid-column: auto;
+  // }
 
   // mdo-do: add to utilities?
-  .grid-cols-3 {
-    --#{$prefix}columns: 3;
-  }
-  .grid-cols-4 {
-    --#{$prefix}columns: 4;
-  }
-  .grid-cols-6 {
-    --#{$prefix}columns: 6;
-  }
+  // .grid-cols-3 {
+  //   --#{$prefix}columns: 3;
+  // }
+  // .grid-cols-4 {
+  //   --#{$prefix}columns: 4;
+  // }
+  // .grid-cols-6 {
+  //   --#{$prefix}columns: 6;
+  // }
+
+  // .grid-full {
+  //   grid-column: 1 / -1;
+  // }
 }

scss/mixins/_border-radius.scss

@@ -32,53 +32,53 @@
 
 @mixin border-top-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
-    border-top-right-radius: valid-radius($radius);
+    border-start-start-radius: valid-radius($radius);
+    border-start-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-right-radius: valid-radius($radius);
-    border-bottom-right-radius: valid-radius($radius);
+    border-start-end-radius: valid-radius($radius);
+    border-end-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-bottom-right-radius: valid-radius($radius);
-    border-bottom-left-radius: valid-radius($radius);
+    border-end-start-radius: valid-radius($radius);
+    border-end-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
-    border-bottom-left-radius: valid-radius($radius);
+    border-start-start-radius: valid-radius($radius);
+    border-end-start-radius: valid-radius($radius);
   }
 }
 
 @mixin border-top-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
+    border-start-start-radius: valid-radius($radius);
   }
 }
 
 @mixin border-top-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-right-radius: valid-radius($radius);
+    border-start-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-bottom-right-radius: valid-radius($radius);
+    border-end-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-bottom-left-radius: valid-radius($radius);
+    border-end-start-radius: valid-radius($radius);
   }
 }
 // scss-docs-end border-radius-mixins

scss/mixins/_caret.scss

@@ -9,30 +9,30 @@ $caret-spacing:               $caret-width * .85 !default;
 
 // scss-docs-start caret-mixins
 @mixin caret-down($width: $caret-width) {
-  border-top: $width solid;
-  border-right: $width solid transparent;
-  border-bottom: 0;
-  border-left: $width solid transparent;
+  border-block-start: $width solid;
+  border-block-end: 0;
+  border-inline-start: $width solid transparent;
+  border-inline-end: $width solid transparent;
 }
 
 @mixin caret-up($width: $caret-width) {
-  border-top: 0;
-  border-right: $width solid transparent;
-  border-bottom: $width solid;
-  border-left: $width solid transparent;
+  border-block-start: 0;
+  border-block-end: $width solid;
+  border-inline-start: $width solid transparent;
+  border-inline-end: $width solid transparent;
 }
 
 @mixin caret-end($width: $caret-width) {
-  border-top: $width solid transparent;
-  border-right: 0;
-  border-bottom: $width solid transparent;
-  border-left: $width solid;
+  border-block-start: $width solid transparent;
+  border-block-end: $width solid transparent;
+  border-inline-start: $width solid;
+  border-inline-end: 0;
 }
 
 @mixin caret-start($width: $caret-width) {
-  border-top: $width solid transparent;
-  border-right: $width solid;
-  border-bottom: $width solid transparent;
+  border-block-start: $width solid transparent;
+  border-block-end: $width solid transparent;
+  border-inline-end: $width solid;
 }
 
 @mixin caret(
@@ -44,7 +44,7 @@ $caret-spacing:               $caret-width * .85 !default;
   @if $enable-caret {
     &::after {
       display: inline-block;
-      margin-left: $spacing;
+      margin-inline-start: $spacing;
       vertical-align: $vertical-align;
       content: "";
       @if $direction == down {
@@ -63,7 +63,7 @@ $caret-spacing:               $caret-width * .85 !default;
 
       &::before {
         display: inline-block;
-        margin-right: $spacing;
+        margin-inline-end: $spacing;
         vertical-align: $vertical-align;
         content: "";
         @include caret-start($width);
@@ -71,7 +71,7 @@ $caret-spacing:               $caret-width * .85 !default;
     }
 
     &:empty::after {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
   }
 }

scss/mixins/_forms.scss

@@ -60,7 +60,7 @@
       border-color: $border-color;
 
       @if $enable-validation-icons {
-        padding-right: $input-height-inner;
+        padding-inline-end: $input-height-inner;
         background-image: escape-svg($icon);
         background-repeat: no-repeat;
         background-position: right $input-height-inner-quarter center;
@@ -83,7 +83,7 @@
   textarea.form-control {
     @include form-validation-state-selector($state) {
       @if $enable-validation-icons {
-        padding-right: $input-height-inner;
+        padding-inline-end: $input-height-inner;
         background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
       }
     }
@@ -97,7 +97,7 @@
         &:not([multiple]):not([size]),
         &:not([multiple])[size="1"] {
           --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
-          padding-right: $form-select-feedback-icon-padding-end;
+          padding-inline-end: $form-select-feedback-icon-padding-end;
           background-position: $form-select-bg-position, $form-select-feedback-icon-position;
           background-size: $form-select-bg-size, $form-select-feedback-icon-size;
         }
@@ -142,7 +142,7 @@
   }
   .form-check-inline .form-check-input {
     ~ .#{$state}-feedback {
-      margin-left: .5em;
+      margin-inline-start: .5em;
     }
   }
 

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: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-x($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}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: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
+@mixin gradient-y($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}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: $gray-700, $end-color: $gray-800, $deg: 45deg) {
+@mixin gradient-directional($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}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: $gray-700, $outer-color: $gray-800) {
+@mixin gradient-radial($inner-color: var(--#{$prefix}gray-700), $outer-color: var(--#{$prefix}gray-800)) {
   background-image: radial-gradient(circle, $inner-color, $outer-color);
 }
 

scss/mixins/_grid.scss

@@ -14,9 +14,8 @@
   display: flex;
   flex-wrap: wrap;
   // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
+  margin-inline: calc(-.5 * var(--#{$prefix}gutter-x));
   margin-top: calc(-1 * var(--#{$prefix}gutter-y));
-  margin-right: calc(-.5 * var(--#{$prefix}gutter-x));
-  margin-left: calc(-.5 * var(--#{$prefix}gutter-x));
 }
 
 @mixin make-col-ready() {
@@ -28,8 +27,7 @@
   flex-shrink: 0;
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--#{$prefix}gutter-x) * .5);
-  padding-left: calc(var(--#{$prefix}gutter-x) * .5);
+  padding-inline: calc(var(--#{$prefix}gutter-x) * .5);
   margin-top: var(--#{$prefix}gutter-y);
 }
 
@@ -51,7 +49,7 @@
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: math.div($size, $columns);
-  margin-left: if($num == 0, 0, math.percentage($num));
+  margin-inline-start: if($num == 0, 0, math.percentage($num));
 }
 
 // Row columns

scss/mixins/_lists.scss

@@ -2,6 +2,6 @@
 
 // Unstyled keeps list items block level, just removes default browser padding and list-style
 @mixin list-unstyled {
-  padding-left: 0;
+  padding-inline-start: 0;
   list-style: none;
 }

scss/mixins/_utilities.scss

@@ -3,106 +3,205 @@
 @use "sass:meta";
 @use "sass:string";
 @use "../config" as *;
+@use "../vendor/rfs" as *;
+
+// stylelint-disable scss/dollar-variable-pattern
 
 // Utility generator
-// Used to generate utilities & print utilities
-@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
-  $values: map.get($utility, values);
 
-  // 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: list.zip($values, $values);
-    }
-  }
+// - Utilities can use three different types of selectors:
+//   - class: .class
+//   - attr-starts: [class^="class"]
+//   - attr-includes: [class*="class"]
+// - Utilities can generate regular CSS properties and CSS custom properties
+// - Utilities can be responsive or not
+// - Utilities can have state variants (e.g., hover, focus, active)
+// - Utilities can define local CSS variables
+//
+// CSS custom properties can be generated in two ways:
+//
+// 1. Property map with null values (CSS var receives the utility value):
+// "bg-color": (
+//   property: (
+//     "--#{$prefix}bg": null,
+//     "background-color": var(--#{$prefix}bg)
+//   ),
+//   class: bg,
+//   values: (
+//     primary: var(--#{$prefix}blue-500),
+//   )
+// )
+// Generates:
+// .bg-primary {
+//   --bs-bg: var(--bs-blue-500);
+//   background-color: var(--bs-bg);
+// }
+//
+// 2. Variables map (static CSS custom properties on every class):
+// "link-underline": (
+//   property: text-decoration-color,
+//   class: link-underline,
+//   variables: (
+//     "link-underline-opacity": 1
+//   ),
+//   values: (...)
+// )
+// Generates:
+// .link-underline {
+//   --bs-link-underline-opacity: 1;
+//   text-decoration-color: ...;
+// }
 
-  @each $key, $value in $values {
-    $properties: map.get($utility, property);
-
-    // Multiple properties are possible, for example with vertical or horizontal margins or paddings
-    @if meta.type-of($properties) == "string" {
-      $properties: list.append((), $properties);
-    }
-
-    // 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`
-    $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($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)
-    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
-
-    @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);
+// Helper mixin to generate CSS properties for both legacy and property map approaches
+@mixin generate-properties($utility, $propertyMap, $properties, $value) {
+  @if $propertyMap != null {
+    // New Property-Value Mapping approach
+    @each $property, $defaultValue in $propertyMap {
+      // If value is a map, check if it has a key for this property
+      // Otherwise, use defaultValue (or $value if defaultValue is null)
+      $actualValue: $defaultValue;
+      @if meta.type-of($value) == "map" and map.has-key($value, $property) {
+        $actualValue: map.get($value, $property);
+      } @else if $defaultValue == null {
+        $actualValue: $value;
       }
-      @else {
-        $value: rfs-fluid-value($value);
-      }
-    }
-
-    $is-css-var: map.get($utility, css-var);
-    $is-local-vars: map.get($utility, local-vars);
-    $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};
-          }
-        }
+      @if map.get($utility, important) {
+        #{$property}: $actualValue !important; // stylelint-disable-line declaration-no-important
       } @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);
-            }
-          }
-        }
+        #{$property}: $actualValue;
       }
-
-      @if $is-rtl == false {
-        /* rtl:end:remove */
+    }
+  } @else {
+    // Legacy approach
+    @each $property in $properties {
+      @if map.get($utility, important) {
+        #{$property}: $value !important; // stylelint-disable-line declaration-no-important
+      } @else {
+        #{$property}: $value;
+      }
+    }
+  }
+}
+
+@mixin generate-utility($utility, $infix: "") {
+  // 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;
+    } @else {
+      $values: (null: $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);
+    $propertyMap: null;
+    $customClass: "";
+
+    // Check if property is a map (new Property-Value Mapping approach)
+    // @debug "Properties type: #{meta.type-of($properties)}";
+    // @debug "Properties: #{$properties}";
+    @if meta.type-of($properties) == "map" {
+      $propertyMap: $properties;
+      // For property maps, we need to determine the class from the utility definition
+      $customClass: if(map.has-key($utility, class), map.get($utility, class), "");
+    } @else {
+      // Legacy approach: Multiple properties are possible, for example with vertical or horizontal margins or paddings
+      @if meta.type-of($properties) == "string" {
+        $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 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));
+
+    // State params to generate state variants
+    $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);
+
+    // Don't prefix if value key is null (e.g. with shadow class)
+    $customClassModifier: if($key, if($customClass == "" 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}";
+      }
+    } @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} {
+      // Generate CSS custom properties (variables) if provided
+      // Variables receive the current utility value, then properties reference them
+      @if map.has-key($utility, variables) {
+        $variables: map.get($utility, variables);
+        @if meta.type-of($variables) == "list" {
+          // If variables is a list, each variable gets the utility value
+          @each $var-name in $variables {
+            --#{$prefix}#{$var-name}: #{$value};
+          }
+        } @else if meta.type-of($variables) == "map" {
+          // If variables is a map, use the provided values (for static variables)
+          @each $var-key, $var-value in $variables {
+            --#{$prefix}#{$var-key}: #{$var-value};
+          }
+        }
+      }
+      @include generate-properties($utility, $propertyMap, $properties, $value);
+    }
+
+    // Generate state variants
+    @if $state != () {
+      @each $state-variant in $state {
+        #{$selector}-#{$state-variant}:#{$state-variant} {
+          // Generate CSS custom properties (variables) if provided
+          @if map.has-key($utility, variables) {
+            $variables: map.get($utility, variables);
+            @if meta.type-of($variables) == "list" {
+              // If variables is a list, each variable gets the utility value
+              @each $var-name in $variables {
+                --#{$prefix}#{$var-name}: #{$value};
+              }
+            } @else if meta.type-of($variables) == "map" {
+              // If variables is a map, use the provided values (for static variables)
+              @each $var-key, $var-value in $variables {
+                --#{$prefix}#{$var-key}: #{$var-value};
+              }
+            }
+          }
+          @include generate-properties($utility, $propertyMap, $properties, $value);
+        }
       }
     }
   }

scss/tests/mixins/_breakpoints.test.scss

@@ -0,0 +1,95 @@
+@import "true";
+@import "../../mixins/breakpoints";
+
+// Test breakpoint functions and mixins for range media query syntax
+
+@include test-module("Breakpoint Functions") {
+  $test-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 1024px,
+    xl: 1280px,
+    xxl: 1536px
+  );
+
+  @include test("breakpoint-max with range syntax") {
+    @include assert-equal(breakpoint-max(xs, $test-breakpoints), null);
+    @include assert-equal(breakpoint-max(sm, $test-breakpoints), 576px);
+    @include assert-equal(breakpoint-max(md, $test-breakpoints), 768px);
+    @include assert-equal(breakpoint-max(lg, $test-breakpoints), 1024px);
+    @include assert-equal(breakpoint-max(xl, $test-breakpoints), 1280px);
+    @include assert-equal(breakpoint-max(xxl, $test-breakpoints), 1536px);
+  }
+}
+
+@include test-module("Media Query Mixins - Range Syntax") {
+  $test-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 1024px,
+    xl: 1280px,
+    xxl: 1536px
+  );
+
+  @include test("media-breakpoint-up generates range syntax") {
+    @include assert() {
+      @include output() {
+        @include media-breakpoint-up(sm, $test-breakpoints) {
+          .test { color: #f00; }
+        }
+      }
+      @include expect() {
+        @media (width >= 576px) {
+          .test { color: #f00; }
+        }
+      }
+    }
+  }
+
+  @include test("media-breakpoint-down generates range syntax") {
+    @include assert() {
+      @include output() {
+        @include media-breakpoint-down(md, $test-breakpoints) {
+          .test { color: #00f; }
+        }
+      }
+      @include expect() {
+        @media (width < 768px) {
+          .test { color: #00f; }
+        }
+      }
+    }
+  }
+
+  @include test("media-breakpoint-between generates range syntax") {
+    @include assert() {
+      @include output() {
+        @include media-breakpoint-between(sm, lg, $test-breakpoints) {
+          .test { color: #0f0; }
+        }
+      }
+      @include expect() {
+        @media (width >= 576px) and (width < 1024px) {
+          .test { color: #0f0; }
+        }
+      }
+    }
+  }
+
+  @include test("media-breakpoint-only generates range syntax") {
+    @include assert() {
+      @include output() {
+        @include media-breakpoint-only(md, $test-breakpoints) {
+          .test { color: #ff0; }
+        }
+      }
+      @include expect() {
+        @media (width >= 768px) and (width < 1024px) {
+          .test { color: #ff0; }
+        }
+      }
+    }
+  }
+}

scss/tests/utilities/_api.test.scss

@@ -53,13 +53,13 @@ $utilities: ();
           font-size: 1.25rem !important;
         }
 
-        @media (min-width: 333px) {
+        @media (width >= 333px) {
           .padding-sm-1rem {
             padding: 1rem !important;
           }
         }
 
-        @media (min-width: 666px) {
+        @media (width >= 666px) {
           .padding-md-1rem {
             padding: 1rem !important;
           }

site/data/breakpoints.yml

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

site/data/colors.yml

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

site/data/grays.yml

@@ -1,18 +0,0 @@
-- 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

@@ -10,12 +10,17 @@
     - title: Contents
     - title: Browsers & devices
     - title: JavaScript
-    - title: Webpack
-    - title: Parcel
-    - title: Vite
     - title: Accessibility
     - title: RFS
     - title: RTL
+
+- title: Guides
+  icon: map
+  icon_color: green
+  pages:
+    - title: Webpack
+    - title: Parcel
+    - title: Vite
     - title: Contribute
 
 - title: Customize
@@ -26,6 +31,7 @@
     - title: Sass
     - title: Options
     - title: Color
+    - title: Theme
     - title: Color modes
     - title: Components
     - title: CSS variables
@@ -53,6 +59,7 @@
     - title: Images
     - title: Tables
     - title: Figures
+    - title: Prose
 
 - title: Forms
   icon: ui-radios
@@ -118,10 +125,10 @@
   icon_color: red
   pages:
     - title: API
-    - title: Background
-    - title: Border
-    - title: Border radius
-    - title: Colors
+    - group: Color
+      pages:
+        - title: Colors
+        - title: Background
     - group: Layout
       pages:
         - title: Aspect ratio
@@ -138,6 +145,8 @@
         - title: Align items
         - title: Align self
         - title: Flex
+        - title: Gap
+        - title: Grid
         - title: Justify content
         - title: Justify items
         - title: Place items
@@ -151,11 +160,23 @@
         - title: Padding
     - group: Type
       pages:
+        - title: Font family
+        - title: Font size
         - title: Font style
+        - title: Font weight
+        - title: Line height
+        - title: Link
         - title: Text alignment
         - title: Text decoration
+        - title: Text transform
         - title: Text wrapping
         - title: Vertical align
+        - title: Word break
+    - group: Borders
+      pages:
+        - title: Border
+        - title: Border color
+        - title: Border radius
     - group: Interactions
       pages:
         - title: Pointer events
@@ -165,13 +186,6 @@
         - title: Opacity
         - title: Shadows
 
-- title: Extend
-  icon: tools
-  icon_color: blue
-  pages:
-    - title: Approach
-    - title: Icons
-
 - title: About
   icon: globe2
   icon_color: indigo

site/data/theme-colors.yml

@@ -1,20 +1,8 @@
 - name: primary
-  hex: '#0d6efd'
-- name: secondary
-  hex: '#6c757d'
+- name: accent
 - 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
+- name: inverse
+- name: secondary

site/src/assets/examples/blog-rtl/index.astro

@@ -1,7 +1,7 @@
 ---
 export const title = 'قالب المدونة'
 export const direction = 'rtl'
-export const extra_css = ['https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap', '../blog/blog.rtl.css']
+export const extra_css = ['https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap', '../blog/blog.css']
 import Placeholder from "@shortcodes/Placeholder.astro"
 ---
 

site/src/assets/examples/blog/blog.css

@@ -1,16 +1,29 @@
 /* stylelint-disable @stylistic/selector-list-comma-newline-after */
 
 .blog-header-logo {
-  font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
+  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
   font-size: 2.25rem;
 }
 
+[dir="rtl"] .blog-header-logo {
+  font-family: Amiri, Georgia, "Times New Roman", serif;
+}
+
 .blog-header-logo:hover {
   text-decoration: none;
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
+  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
+}
+
+[dir="rtl"] h1,
+[dir="rtl"] h2,
+[dir="rtl"] h3,
+[dir="rtl"] h4,
+[dir="rtl"] h5,
+[dir="rtl"] h6 {
+  font-family: Amiri, Georgia, "Times New Roman", serif;
 }
 
 .flex-auto {

site/src/assets/examples/blog/blog.rtl.css

@@ -1,39 +0,0 @@
-/* stylelint-disable @stylistic/selector-list-comma-newline-after */
-
-.blog-header-logo {
-  font-family: Amiri, Georgia, "Times New Roman", serif;
-  font-size: 2.25rem;
-}
-
-.blog-header-logo:hover {
-  text-decoration: none;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: Amiri, Georgia, "Times New Roman", serif;
-}
-
-.flex-auto {
-  flex: 0 0 auto;
-}
-
-.h-250 { height: 250px; }
-@media (min-width: 768px) {
-  .h-md-250 { height: 250px; }
-}
-
-/* Pagination */
-.blog-pagination {
-  margin-bottom: 4rem;
-}
-
-/*
- * Blog posts
- */
-.blog-post {
-  margin-bottom: 4rem;
-}
-.blog-post-meta {
-  margin-bottom: 1.25rem;
-  color: #727272;
-}

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-xxl-4 my-5 mx-auto">
+<div class="col-lg-6 col-2xl-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/carousel-rtl/index.astro

@@ -1,7 +1,7 @@
 ---
 export const title = 'قالب  شرائح العرض'
 export const direction = 'rtl'
-export const extra_css = ['../carousel/carousel.rtl.css']
+export const extra_css = ['../carousel/carousel.css']
 import Placeholder from "@shortcodes/Placeholder.astro"
 ---
 

site/src/assets/examples/carousel/carousel.rtl.css

@@ -1,74 +0,0 @@
-/* GLOBAL STYLES
--------------------------------------------------- */
-/* Padding below the footer and lighter body text */
-
-body {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-  color: rgb(var(--bs-tertiary-color-rgb));
-}
-
-
-/* CUSTOMIZE THE CAROUSEL
--------------------------------------------------- */
-
-/* Carousel base class */
-.carousel {
-  margin-bottom: 4rem;
-}
-/* Since positioning the image, we need to help out the caption */
-.carousel-caption {
-  bottom: 3rem;
-  z-index: 10;
-}
-
-/* Declare heights because of positioning of img element */
-.carousel-item {
-  height: 32rem;
-}
-
-
-/* MARKETING CONTENT
--------------------------------------------------- */
-
-/* Center align the text within the three columns below the carousel */
-.marketing .col-lg-4 {
-  margin-bottom: 1.5rem;
-  text-align: center;
-}
-.marketing .col-lg-4 p {
-  margin-right: .75rem;
-  margin-left: .75rem;
-}
-
-
-/* Featurettes
-------------------------- */
-
-.featurette-divider {
-  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
-}
-
-/* Thin out the marketing headings */
-
-/* RESPONSIVE CSS
--------------------------------------------------- */
-
-@media (min-width: 40em) {
-  /* Bump up size of carousel content */
-  .carousel-caption p {
-    margin-bottom: 1.25rem;
-    font-size: 1.25rem;
-    line-height: 1.4;
-  }
-
-  .featurette-heading {
-    font-size: 50px;
-  }
-}
-
-@media (min-width: 62em) {
-  .featurette-heading {
-    margin-top: 7rem;
-  }
-}

site/src/assets/examples/cheatsheet-rtl/index.astro

@@ -4,7 +4,7 @@ import { getVersionedDocsPath } from '@libs/path'
 import Example from '@shortcodes/Example.astro'
 
 export const title = 'ورقة الغش'
-export const extra_css = ['../cheatsheet/cheatsheet.rtl.css']
+export const extra_css = ['../cheatsheet/cheatsheet.css']
 export const extra_js = [{src: '../cheatsheet/cheatsheet.js'}]
 export const body_class = 'bg-body-tertiary'
 export const direction = 'rtl'

site/src/assets/examples/cheatsheet/cheatsheet.rtl.css

@@ -1,156 +0,0 @@
-body {
-  scroll-behavior: smooth;
-}
-
-/**
- * Bootstrap "Journal code" icon
- * @link https://icons.getbootstrap.com/icons/journal-code/
- */
-.bd-heading a::before {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  margin-left: .25rem;
-  content: "";
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
-  background-size: 1em;
-}
-
-/* stylelint-disable-next-line selector-max-universal */
-.bd-heading + div > * + * {
-  margin-top: 3rem;
-}
-
-/* Table of contents */
-.bd-aside a {
-  padding: .1875rem .5rem;
-  margin-top: .125rem;
-  margin-right: .3125rem;
-  color: var(--bs-body-color);
-}
-
-.bd-aside a:hover,
-.bd-aside a:focus {
-  color: var(--bs-body-color);
-  background-color: rgba(121, 82, 179, .1);
-}
-
-.bd-aside .active {
-  font-weight: 600;
-  color: var(--bs-body-color);
-}
-
-.bd-aside .btn {
-  padding: .25rem .5rem;
-  font-weight: 600;
-  color: var(--bs-body-color);
-}
-
-.bd-aside .btn:hover,
-.bd-aside .btn:focus {
-  color: var(--bs-body-color);
-  background-color: rgba(121, 82, 179, .1);
-}
-
-.bd-aside .btn:focus {
-  box-shadow: 0 0 0 1px rgba(121, 82, 179, .7);
-}
-
-.bd-aside .btn::before {
-  width: 1.25em;
-  line-height: 0;
-  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
-  transition: transform .35s ease;
-  transform: rotate(180deg) translateX(-2px);
-  transform-origin: .5em 50%;
-}
-
-.bd-aside .btn[aria-expanded="true"]::before {
-  transform: rotate(90deg);
-}
-
-
-/* Examples */
-.scrollspy-example {
-  height: 200px;
-}
-
-[id="modal"] .bd-example .btn,
-[id="buttons"] .bd-example .btn,
-[id="tooltips"] .bd-example .btn,
-[id="popovers"] .bd-example .btn,
-[id="dropdowns"] .bd-example .btn-group,
-[id="dropdowns"] .bd-example .dropdown,
-[id="dropdowns"] .bd-example .dropup,
-[id="dropdowns"] .bd-example .dropend,
-[id="dropdowns"] .bd-example .dropstart {
-  margin: 0 0 1rem 1rem;
-}
-
-/* Layout */
-@media (min-width: 1200px) {
-  body {
-    display: grid;
-    grid-template-rows: auto;
-    grid-template-columns: 1fr 4fr 1fr;
-    gap: 1rem;
-  }
-
-  .bd-header {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 1030;
-    grid-column: 1 / span 3;
-  }
-
-  .bd-aside,
-  .bd-cheatsheet {
-    padding-top: 4rem;
-  }
-
-  /**
-   * 1. Too bad only Firefox supports subgrids ATM
-   */
-  .bd-cheatsheet,
-  .bd-cheatsheet section,
-  .bd-cheatsheet article {
-    display: inherit; /* 1 */
-    grid-template-rows: auto;
-    grid-template-columns: 1fr 4fr;
-    grid-column: 1 / span 2;
-    gap: inherit; /* 1 */
-  }
-
-  .bd-aside {
-    grid-area: 1 / 3;
-    scroll-margin-top: 4rem;
-  }
-
-  .bd-cheatsheet section,
-  .bd-cheatsheet section > h2 {
-    top: 2rem;
-    scroll-margin-top: 2rem;
-  }
-
-  .bd-cheatsheet section > h2::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: -2rem;
-    left: 0;
-    z-index: -1;
-    content: "";
-  }
-
-  .bd-cheatsheet article,
-  .bd-cheatsheet .bd-heading {
-    top: 8rem;
-    scroll-margin-top: 8rem;
-  }
-
-  .bd-cheatsheet .bd-heading {
-    z-index: 1;
-  }
-}

site/src/assets/examples/dashboard-rtl/index.astro

@@ -1,7 +1,7 @@
 ---
 export const title = 'قالب لوحة القيادة'
 export const direction = 'rtl'
-export const extra_css = ['../dashboard/dashboard.rtl.css']
+export const extra_css = ['../dashboard/dashboard.css']
 export const extra_js = [
   { src: 'https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js', integrity: 'sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp'},
   { src: 'dashboard.js'}

site/src/assets/examples/dashboard/dashboard.rtl.css

@@ -1,48 +0,0 @@
-.bi {
-  display: inline-block;
-  width: 1rem;
-  height: 1rem;
-}
-
-/*
- * Sidebar
- */
-
-@media (min-width: 768px) {
-  .sidebar .offcanvas-lg {
-    position: -webkit-sticky;
-    position: sticky;
-    top: 48px;
-  }
-  .navbar-search {
-    display: block;
-  }
-}
-
-.sidebar .nav-link {
-  font-size: .875rem;
-  font-weight: 500;
-}
-
-.sidebar .nav-link.active {
-  color: #2470dc;
-}
-
-.sidebar-heading {
-  font-size: .75rem;
-}
-
-/*
- * Navbar
- */
-
-.navbar-brand {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  background-color: rgba(0, 0, 0, .25);
-  box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25);
-}
-
-.navbar .form-control {
-  padding: .75rem 1rem;
-}

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-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 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>
 
     <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 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>
+    <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>
     <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>xxl</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>2xl</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-xxl themed-container text-center">.container-xxl</div>
+  <div class="container-2xl themed-container text-center">.container-2xl</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-xxl-8 px-4 py-5">
+  <div class="container col-2xl-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-xxl-8 px-4 py-5">
+  <div class="container col-xl-10 col-2xl-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-xxl navbar-dark bg-dark" aria-label="Seventh navbar example">
+  <nav class="navbar navbar-expand-2xl navbar-dark bg-dark" aria-label="Seventh navbar example">
     <div class="container-fluid">
-      <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">
+      <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">
         <span class="navbar-toggler-icon"></span>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarsExampleXxl">
+      <div class="collapse navbar-collapse" id="navbarsExample2xl">
         <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>