From: Christian Oliff <christian_oliff@trimble.com>
Date: Tue, 30 Jun 2026 23:12:35 +0000 (+0900)
Subject: v6 docs: various fixes (#42600)
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=7be9b680b3c0379779052df01a9c90fdbdf75aef;p=thirdparty%2Fbootstrap.git

v6 docs: various fixes (#42600)
---

diff --git a/site/src/content/docs/components/carousel.mdx b/site/src/content/docs/components/carousel.mdx
index 83216a72a9..91f008811b 100644
--- a/site/src/content/docs/components/carousel.mdx
+++ b/site/src/content/docs/components/carousel.mdx
@@ -127,21 +127,21 @@ You can put any markup you like inside each `.carousel-item`. Add content, then
       <div class="carousel-item active">
         <div class="d-flex flex-column justify-content-center bg-subtle-primary p-9 bg-1 rounded-5" style="min-height: 320px;">
           <h3>Build anything</h3>
-          <p class="text-secondary-emphasis mb-3">Compose slides from your own markup—text, buttons, cards, or media.</p>
+          <p class="fg-emphasis-secondary mb-3">Compose slides from your own markup—text, buttons, cards, or media.</p>
           <div><a class="btn-solid theme-primary" href="#">Get started</a></div>
         </div>
       </div>
       <div class="carousel-item">
         <div class="d-flex flex-column justify-content-center text-center bg-subtle-success p-9 bg-2 rounded-5" style="min-height: 320px;">
           <h3>Style it your way</h3>
-          <p class="text-secondary-emphasis mb-3">Use utilities or custom CSS to size and theme each slide however you need.</p>
+          <p class="fg-emphasis-secondary mb-3">Use utilities or custom CSS to size and theme each slide however you need.</p>
           <div><a class="btn-solid theme-success" href="#">Learn more</a></div>
         </div>
       </div>
       <div class="carousel-item">
         <div class="d-flex flex-column justify-content-center text-end bg-subtle-warning p-9 bg-3 rounded-5" style="min-height: 320px;">
           <h3>Mix and match</h3>
-          <p class="text-secondary-emphasis mb-3">Combine custom content with controls, indicators, and the overlay layout.</p>
+          <p class="fg-emphasis-secondary mb-3">Combine custom content with controls, indicators, and the overlay layout.</p>
           <div><a class="btn-solid theme-inverse" href="#">Browse examples</a></div>
         </div>
       </div>
diff --git a/site/src/content/docs/customize/color-modes.mdx b/site/src/content/docs/customize/color-modes.mdx
index 084ec6eeb5..b5ee71d5f1 100644
--- a/site/src/content/docs/customize/color-modes.mdx
+++ b/site/src/content/docs/customize/color-modes.mdx
@@ -61,7 +61,7 @@ For example, to change the color mode of a menu, add `data-bs-theme="light"` or
   }
   ```
 
-- We use a custom `_variables-dark.scss` to power those shared global CSS variable overrides for dark mode. This file isn’t required for your own custom color modes, but it’s required for our dark mode for two reasons. First, it’s better to have a single place to reset global colors. Second, some Sass variables had to be overridden for background images embedded in our CSS for accordions, form components, and more.
+- Dark mode overrides live in `_root.scss` (via the `color-mode()` mixin) and `_theme.scss`, which adjust global and theme color tokens. You don’t need these files for your own custom color modes, but they give Bootstrap a single place to reset colors for built-in dark mode.
 
 ## Usage
 
@@ -141,7 +141,7 @@ Outputs to:
 
 ## Custom color modes
 
-While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own `data-bs-theme` selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. We opted to create a separate `_variables-dark.scss` stylesheet to house Bootstrap’s dark mode specific Sass variables, but that’s not required for you.
+While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own `data-bs-theme` selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. Bootstrap’s built-in dark mode uses `_root.scss` and `_theme.scss`, but you can follow the same pattern in your own stylesheet.
 
 For example, you can create a “blue theme” with the selector `data-bs-theme="blue"`. In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you’re using Sass, you can also use Sass’s functions within your CSS variable overrides.
 
@@ -192,7 +192,7 @@ Dozens of root level CSS variables are repeated as overrides for dark mode. Thes
 
 ### Sass variables
 
-CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in `_variables-dark.scss`. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.
+CSS variables for our dark color mode are generated from Sass in `_root.scss` and `_theme.scss`, including overrides for components that embed SVG data URIs in CSS—primarily via `mask-image` (carousel controls, close buttons, and similar icons), with select dropdown arrows as a remaining `background-image` case.
 
 {/* <ScssDocs name="sass-dark-mode-vars" file="scss/_config.scss" /> */}
 
diff --git a/site/src/content/docs/customize/sass.mdx b/site/src/content/docs/customize/sass.mdx
index a9da65baef..2b4d2f9687 100644
--- a/site/src/content/docs/customize/sass.mdx
+++ b/site/src/content/docs/customize/sass.mdx
@@ -395,9 +395,9 @@ We use the `escape-svg` function to escape the `<`, `>` and `#` characters for S
 $icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#00000080' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
 
 // After escape-svg(), the <, >, and # characters are percent-encoded
-// so the data URI works reliably as a CSS background-image
+// so the data URI works reliably in CSS (e.g. as a mask-image or background-image)
 .element {
-  background-image: escape-svg($icon);
+  mask-image: escape-svg($icon);
 }
 ```
 
diff --git a/site/src/content/docs/guides/webpack.mdx b/site/src/content/docs/guides/webpack.mdx
index c92b8f8e4b..e55c7526db 100644
--- a/site/src/content/docs/guides/webpack.mdx
+++ b/site/src/content/docs/guides/webpack.mdx
@@ -316,7 +316,7 @@ After running `npm run build` again, there will be a new file `dist/main.css`, w
 
 ### Extracting SVG files
 
-Bootstrap’s CSS includes multiple references to SVG files via inline `data:` URIs. If you define a Content Security Policy for your project that blocks `data:` URIs for images, then these SVG files will not load. You can get around this problem by extracting the inline SVG files using Webpack’s asset modules feature.
+Bootstrap’s CSS includes multiple references to SVG files via inline `data:` URIs—mostly as `mask-image` icons (close buttons, carousel controls, and more), with a few remaining `background-image` cases such as select carets. If you define a Content Security Policy for your project that blocks `data:` URIs for images, then these SVG files will not load. You can get around this problem by extracting the inline SVG files using Webpack’s asset modules feature.
 
 Configure Webpack to extract inline SVG files like this:
 
diff --git a/site/src/pages/404.astro b/site/src/pages/404.astro
index 021ac28383..ad26c6173c 100644
--- a/site/src/pages/404.astro
+++ b/site/src/pages/404.astro
@@ -11,7 +11,7 @@ import BaseLayout from '@layouts/BaseLayout.astro'
   title="404 - File not found"
 >
   <div class="text-center py-5">
-    <h1 class="display-1">404</h1>
+    <h1 class="fs-6xl">404</h1>
     <h2>File not found</h2>
   </div>
 </BaseLayout>