bundle, lint, more cleanup

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index f018e949f5ff0b62700eda2e6ac778fdb433f3f9..b9aa1a9d851d87f956f4778b2e8bf72653092a88 100644 (file)
--- 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 33d4edd789cfd57382beaf702919a28e8dd61b29..58c381abdd0a99e7780ef91ac97c64ae388788ed 100644 (file)
--- 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 b7d5b3f6e61d3529a07941e475d5fe05ca602d2f..c5c1985ad08f8445841dcf1121c38c6a7e485e8f 100644 (file)
--- 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 1b80d76d27a7e4f073b32961606255887fa4630d..a16ae47e570a6da54f840663faf9f903a10f04e2 100644 (file)
--- 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 a18ec1f147145640df4dd572b5749a6649f1dd0d..53b71774f5f6627a7346deff54805116f34ac6f2 100644 (file)
--- 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 52e6c73c72bc36335d9a0fba9f1340d8f3788a55..fe45e14a72f8b3a6aa0e754ed696794a0a21056d 100644 (file)
--- 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 a3429a8fd3dd64500daf9bed68ce08f174c930e7..a3e9a59bdd5026709713338e92a82738c1d701ed 100644 (file)
--- 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 65fb67dd2bfa9cbc5034e517a273cf27a6149122..c3cfec3853b432b799c99c773482424466a44225 100644 (file)
--- 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.