From: Mark Otto <markdotto@gmail.com>
Date: Fri, 10 Oct 2025 22:57:40 +0000 (-0700)
Subject: bundle, lint, more cleanup
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=3a8b331f42e1b2ef01fa52861c1a6d3c344607cb;p=thirdparty%2Fbootstrap.git

bundle, lint, more cleanup
---

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index f018e949f5..b9aa1a9d85 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -2,15 +2,15 @@
   "files": [
     {
       "path": "./dist/css/bootstrap-grid.css",
-      "maxSize": "9.00 kB"
+      "maxSize": "9.5 kB"
     },
     {
       "path": "./dist/css/bootstrap-grid.min.css",
-      "maxSize": "8.25 kB"
+      "maxSize": "8.5 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.css",
-      "maxSize": "5.0 kB"
+      "maxSize": "5.25 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.min.css",
@@ -18,11 +18,11 @@
     },
     {
       "path": "./dist/css/bootstrap-utilities.css",
-      "maxSize": "13.5 kB"
+      "maxSize": "14.0 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
-      "maxSize": "12.0 kB"
+      "maxSize": "12.25 kB"
     },
     {
       "path": "./dist/css/bootstrap.css",
diff --git a/scss/_alert.scss b/scss/_alert.scss
index 33d4edd789..58c381abdd 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -66,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($new-theme-colors) {
-  //   .alert-#{$state} {
-  //     --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text);
-  //     --#{$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
 }
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index b7d5b3f6e6..c5c1985ad0 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -205,28 +205,4 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
       }
     }
   }
-
-
-  // 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($new-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
 }
diff --git a/scss/buttons/_button.scss b/scss/buttons/_button.scss
index 1b80d76d27..a16ae47e57 100644
--- a/scss/buttons/_button.scss
+++ b/scss/buttons/_button.scss
@@ -84,87 +84,12 @@ $button-variants: (
 ) !default;
 // scss-docs-end btn-variants
 
-
-// // Helper function to get nested map values using dot notation
-// @function get-nested-value($map, $keys) {
-//   $value: $map;
-//   @each $key in $keys {
-//     @if type-of($value) == "map" {
-//       $value: map-get($value, $key);
-//     } @else {
-//       @return null;
-//     }
-//   }
-//   @return $value;
-// }
-
-// // Helper function to split dot notation string into list
-// @function split-keys($key) {
-//   $keys: ();
-//   $parts: str-slice($key, 1);
-//   @each $part in $parts {
-//     $keys: append($keys, $part);
-//   }
-//   @return $keys;
-// }
-
 // // Main button style generator mixin
-// // scss-docs-start btn-variant-mixin
-// @mixin button-variant($color, $variant) {
-//   $variant-styles: map.get($button-variants, $variant);
-
-//   @if $variant-styles {
-//     // Base properties
-//     @each $property, $value in map.get($variant-styles, "base") {
-//       @if $value == "transparent" {
-//         --#{$prefix}btn-#{$property}: transparent;
-//       } @else {
-//         --#{$prefix}btn-#{$property}: var(--#{$prefix}#{$color}-#{$value});
-//       }
-//     }
-
-//     // Hover state
-//     &:hover {
-//       @each $property, $value in map.get($variant-styles, "hover") {
-//         @if $value == "transparent" {
-//           --#{$prefix}btn-hover-#{$property}: transparent;
-//         } @else if meta.type-of($value) == "list" {
-//           $first-value: list.nth($value, 1);
-//           $second-value: list.nth($value, 2);
-//           --#{$prefix}btn-hover-#{$property}: color-mix(in oklch, var(--#{$prefix}#{$color}-#{$first-value}) 50%, var(--#{$prefix}#{$color}-#{$second-value}));
-//         } @else if $value == "bg-subtle" {
-//           --#{$prefix}btn-hover-#{$property}: var(--#{$prefix}#{$color}-#{$value});
-//         } @else {
-//           --#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .95) calc(c * 1.1) h);
-//         }
-//       }
-//     }
-
-//     &:focus-visible {
-//       outline-color: var(--#{$prefix}#{$color}-focus-ring);
-//     }
-
-//     // Active state
-//     &:active,
-//     &.active {
-//       @each $property, $value in map.get($variant-styles, "active") {
-//         @if $value == "transparent" {
-//           --#{$prefix}btn-active-#{$property}: transparent;
-//         } @else if $value == "bg-subtle" {
-//           --#{$prefix}btn-active-#{$property}: var(--#{$prefix}#{$color}-#{$value});
-//         } @else {
-//           --#{$prefix}btn-active-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .9) calc(c * 1.15) h);
-//         }
-//       }
-//     }
-//   }
-// }
-// // scss-docs-end btn-variant-mixin
 
 // Generate button variant classes (e.g., .btn-solid, .btn-outline, etc.)
+// scss-docs-start btn-variant-mixin
 @each $variant, $_ in $button-variants {
   .btn-#{$variant} {
-    // Base properties
     @each $property, $value in map.get($button-variants, $variant, "base") {
       @if $value == "transparent" {
         --#{$prefix}btn-#{$property}: transparent;
@@ -173,7 +98,6 @@ $button-variants: (
       }
     }
 
-    // Hover state
     &:hover {
       @each $property, $value in map.get($button-variants, $variant, "hover") {
         @if $value == "transparent" {
@@ -194,7 +118,6 @@ $button-variants: (
       outline-color: var(--#{$prefix}theme-focus-ring);
     }
 
-    // Active state
     &:active,
     &.active {
       @each $property, $value in map.get($button-variants, $variant, "active") {
@@ -209,6 +132,7 @@ $button-variants: (
     }
   }
 }
+// scss-docs-end btn-variant-mixin
 
 // scss-docs-start btn-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
diff --git a/site/src/content/docs/components/alerts.mdx b/site/src/content/docs/components/alerts.mdx
index a18ec1f147..53b71774f5 100644
--- a/site/src/content/docs/components/alerts.mdx
+++ b/site/src/content/docs/components/alerts.mdx
@@ -134,8 +134,6 @@ When an alert is dismissed, the element is completely removed from the page stru
 
 Loop that generates the modifier classes with an overriding of CSS variables.
 
-<ScssDocs name="alert-modifiers" file="scss/_alert.scss" removeIndentation={false} />
-
 ## JavaScript behavior
 
 ### Initialize
diff --git a/site/src/content/docs/components/list-group.mdx b/site/src/content/docs/components/list-group.mdx
index 52e6c73c72..fe45e14a72 100644
--- a/site/src/content/docs/components/list-group.mdx
+++ b/site/src/content/docs/components/list-group.mdx
@@ -261,12 +261,6 @@ You can use `.stretched-link` on `<label>`s to make the whole list group item cl
 
 <ScssDocs name="list-group-variables" file="scss/_list-group.scss" />
 
-### Sass loops
-
-Loop that generates the modifier classes with an overriding of CSS variables.
-
-<ScssDocs name="list-group-modifiers" file="scss/_list-group.scss" />
-
 ## JavaScript behavior
 
 Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our list group to create tabbable panes of local content.
diff --git a/site/src/content/docs/customize/components.mdx b/site/src/content/docs/customize/components.mdx
index a3429a8fd3..a3e9a59bdd 100644
--- a/site/src/content/docs/customize/components.mdx
+++ b/site/src/content/docs/customize/components.mdx
@@ -12,15 +12,11 @@ To build our modifier classes, we use Sass’s `@each` loops to iterate over a S
 
 Check out [our Sass maps and loops docs]([[docsref:/customize/sass#maps-and-loops]]) for how to customize these loops and extend Bootstrap’s base-modifier approach to your own code.
 
-## Modifiers
+## Theme variants
 
-Many of Bootstrap’s components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., `.btn`) while style variations are confined to modifier classes (e.g., `.btn-danger`). These modifier classes are built from the `$theme-colors` map to make customizing the number and name of our modifier classes.
-
-Here are two examples of how we loop over the `$theme-colors` map to generate modifiers to the `.alert` and `.list-group` components.
-
-<ScssDocs name="alert-modifiers" file="scss/_alert.scss" />
-
-<ScssDocs name="list-group-modifiers" file="scss/_list-group.scss" />
+<Callout type="info">
+@mdo-do: Add more info about theme variants here.
+</Callout>
 
 ## Responsive
 
diff --git a/site/src/content/docs/customize/theme.mdx b/site/src/content/docs/customize/theme.mdx
index 65fb67dd2b..c3cfec3853 100644
--- a/site/src/content/docs/customize/theme.mdx
+++ b/site/src/content/docs/customize/theme.mdx
@@ -244,7 +244,6 @@ This also means you can override a container's theme color with another theme co
     </div>
   </div>`} />
 
-
 ## Theme Sass map
 
 We use a large, nested Sass map to generate our theme color values.