cleanup, prevent lightningcss color-mix() to lab() conversion, remove more

Author: mdo

.bundlewatch.config.json

@@ -2,39 +2,39 @@
   "files": [
     {
       "path": "./dist/css/bootstrap-grid.css",
-      "maxSize": "9.25 kB"
+      "maxSize": "8.75 kB"
     },
     {
       "path": "./dist/css/bootstrap-grid.min.css",
-      "maxSize": "10.0 kB"
+      "maxSize": "8.0 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.css",
       "maxSize": "5.25 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.min.css",
-      "maxSize": "6.5 kB"
+      "maxSize": "5.0 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.css",
-      "maxSize": "14.5 kB"
+      "maxSize": "15.75 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
-      "maxSize": "15.25 kB"
+      "maxSize": "15.0 kB"
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "41.25 kB"
+      "maxSize": "42.5 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "39.75 kB"
+      "maxSize": "39.25 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",
-      "maxSize": "70.5 kB"
+      "maxSize": "70.0 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.min.js",

scss/_colors.scss

@@ -57,8 +57,8 @@ $colors: defaults(
 
 // scss-docs-start color-mix-options
 $color-mix-space: lab !default;
-$tint-color: $white !default;
-$shade-color: $black !default;
+$tint-color: var(--white) !default;
+$shade-color: var(--black) !default;
 
 $color-tints: (
   "025": 94%,

scss/_functions.scss

@@ -41,53 +41,6 @@
   }
 }
 
-// Colors
-@function to-rgb($value) {
-  @return color.channel($value, "red"), color.channel($value, "green"), color.channel($value, "blue");
-}
-
-// stylelint-disable scss/dollar-variable-pattern
-@function rgba-css-var($identifier, $target) {
-  @if $identifier == "body" and $target == "bg" {
-    @return rgba(var(--#{$identifier}-bg-rgb), var(--#{$target}-opacity));
-  } @if $identifier == "body" and $target == "text" {
-    @return rgba(var(--#{$identifier}-color-rgb), var(--#{$target}-opacity));
-  } @else {
-    @return rgba(var(--#{$identifier}-rgb), var(--#{$target}-opacity));
-  }
-}
-
-@function map-loop($map, $func, $args...) {
-  $_map: ();
-
-  @each $key, $value in $map {
-    // allow to pass the $key and $value of the map as an function argument
-    $_args: ();
-    @each $arg in $args {
-      $resolved-arg: $arg;
-      @if $arg == "$key" {
-        $resolved-arg: $key;
-      } @else if $arg == "$value" {
-        $resolved-arg: $value;
-      }
-      $_args: list.append($_args, $resolved-arg);
-    }
-
-    $_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));
-  }
-
-  @return $_map;
-}
-// stylelint-enable scss/dollar-variable-pattern
-
-@function varify($list) {
-  $result: null;
-  @each $entry in $list {
-    $result: list.append($result, var(--#{$entry}), space);
-  }
-  @return $result;
-}
-
 // Internal Bootstrap function to turn maps into its negative variant.
 // It prefixes the keys with `n` and makes the value negative.
 @function negativify-map($map) {
@@ -253,20 +206,3 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 @function opaque($background, $foreground) {
   @return color-mix(in srgb, rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
 }
-
-// scss-docs-start color-functions
-// // Tint a color: mix a color with white
-@function tint-color($color, $weight) {
-  @return color.mix(white, $color, $weight);
-}
-
-// // Shade a color: mix a color with black
-@function shade-color($color, $weight) {
-  @return color.mix(black, $color, $weight);
-}
-
-// // Shade the color if the weight is positive, else tint it
-@function shift-color($color, $weight) {
-  @return if(sass($weight > 0): shade-color($color, $weight); else: tint-color($color, -$weight));
-}
-// scss-docs-end color-functions

scss/_variables.scss

@@ -1,4 +1,3 @@
-@use "colors" as *;
 @use "config" as *;
 @use "functions" as *;
 
@@ -21,7 +20,7 @@ $escaped-characters: (
 // The gradient which is added to components if `$enable-gradients` is `true`
 // This gradient is also added to elements with `.bg-gradient`
 // scss-docs-start variable-gradient
-$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
+$gradient: linear-gradient(180deg, color-mix(var(--white) 15%, transparent), color-mix(var(--white) 0%, transparent)) !default;
 // scss-docs-end variable-gradient
 
 // Spacing
@@ -67,9 +66,6 @@ $position-values: (
 // $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:                   $link-decoration !default;
 
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;

scss/content/_reboot.scss

@@ -238,7 +238,7 @@ $reboot-mark-tokens: defaults(
 
   small,
   .small {
-    font-size: var(--small-font-size, var(--font-size-sm));
+    font-size: var(--small-font-size, 87.5%);
   }
 
   // Mark

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

@@ -372,7 +372,6 @@ To make a navbar dark, add `data-bs-theme="dark"` to the `.navbar` element.
     </div>
   </nav>`} />
 
-
 ## Color schemes
 
 Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.

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

@@ -16,7 +16,7 @@ export const additionalColors = [
 
 There are 13 shades of 16 colors in Bootstrap's new color system, meaning we have 208 colors to work with when using Bootstrap.
 
-All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
+All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette]([[docsref:/customize/theme]]).
 
 Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.
 

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

@@ -386,10 +386,6 @@ Base colors are defined as `oklch()` values and expanded into full scales via `c
 
 You can reference any color scale step as a CSS custom property: `var(--blue-500)`, `var(--red-200)`, `var(--gray-900)`, etc.
 
-Bootstrap also includes `tint-color()`, `shade-color()`, and `shift-color()` Sass functions for mixing colors with white or black:
-
-<ScssDocs name="color-functions" file="scss/_functions.scss" />
-
 ### Color contrast
 
 In order to meet the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG/) contrast requirements, authors **must** provide a minimum [text color contrast of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and a minimum [non-text color contrast of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast), with very few exceptions.

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

@@ -79,7 +79,7 @@ And within each semantic theme color, you'll find the following keys, most of wh
 
 Every token is available as a CSS variable, and most are then consumed by our utilities and components. So for the `primary` color, you have the following colors:
 
-<div class="grid gap-0" style={{gridTemplateColumns: 'repeat(9, 1fr)', gap: '8px', minWidth: '0'}}>
+<div class="grid bd-theme-colors-grid small">
   {getData('theme-colors').map((color) => {
     return (
       <div class="d-contents grid-cols-fill">

site/src/scss/_component-examples.scss

@@ -399,12 +399,18 @@
     gap: 4px;
     min-width: 0;
 
-    @include media-breakpoint-up(md) {
-      // grid-template-columns: repeat(13, 1fr);
+    @include media-breakpoint-up(xl) {
+      grid-template-columns: repeat(13, 1fr);
     }
+  }
+
+  .bd-theme-colors-grid {
+    grid-template-columns: repeat(5, 1fr);
+    gap: 8px;
+    min-width: 0;
 
     @include media-breakpoint-up(xl) {
-      grid-template-columns: repeat(13, 1fr);
+      grid-template-columns: repeat(9, 1fr);
     }
   }
 }