rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Code Issues Actions Packages Releases Activity

WIP, needs to be broken apart

Browse Source 
- button ideas
- rewrite utility mixin
- cleanup some code
- remove hyphen from infix by default
This commit is contained in:
Mark Otto 2025-03-07 09:46:35 -08:00
parent 9c21403281
commit 0d74ed9d56
23 changed files with 1129 additions and 683 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

334
scss/_buttons.scss
View File

@ -8,67 +8,231 @@
@use "mixins/transition" as *; @use "mixins/transition" as *;
@use "mixins/gradients" as *; @use "mixins/gradients" as *;
// Full color palette
// Semantic colors assigned globally, used for components
// Semantic theme helpers—`.bs-theme-{color}`???
// `${component}-variants()` maps for alternate component appearances
// - not to be confused with theme colors
// Bootstrap 6 uses Sass modules, and is still heavily Sass-based, but is now more than ever CSS-first.
// This includes leading with CSS variables whenever possible, including using them within Sass maps, loops, mixins, and variables.
// Button variants // Button variants
// //
// Easily pump out default styles, as well as :hover, :focus, :active, // Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons // and disabled options for all buttons
$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-subtle",
"color": "text"
),
"active": (
"bg": "bg-subtle",
"color": "text"
)
),
"text": (
"base": (
"color": "text",
"bg": "transparent",
"border-color": "transparent"
),
"hover": (
"color": "text",
"bg": "bg-subtle"
),
"active": (
"color": "text",
"bg": "bg-subtle"
)
)
) !default;
// 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
@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;
// #{$property}: transparent;
} @else {
--#{$prefix}btn-#{$property}: var(--#{$prefix}#{$color}-#{$value});
// #{$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;
// #{$property}: transparent;
} @else if $value == "bg-subtle" {
--#{$prefix}btn-hover-#{$property}: var(--#{$prefix}#{$color}-#{$value});
// #{$property}: var(#{$prefix}#{$color}-#{$value});
} @else {
--#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .95) calc(c * 1.1) h);
// #{$property}: oklch(
// from var(#{$prefix}#{$color}-#{$value}) calc(l * .98) calc(c * 1.1) h
// );
}
}
}
// Active state
&:active,
&.active {
@each $property, $value in map-get($variant-styles, "active") {
@if $value == "transparent" {
--#{$prefix}btn-active-#{$property}: transparent;
// #{$property}: transparent;
} @else if $value == "bg-subtle" {
--#{$prefix}btn-active-#{$property}: var(--#{$prefix}#{$color}-#{$value});
// #{$property}: var(#{$prefix}#{$color}-#{$value});
} @else {
--#{$prefix}btn-active-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .9) calc(c * 1.15) h);
// #{$property}: oklch(
// from var(#{$prefix}#{$color}-#{$value}) calc(l * .9) calc(c * 1.15) h
// );
}
}
}
}
}
// Generate all button variants
@each $color, $_ in $theme-colors {
@each $variant, $_ in $button-variants {
.btn-#{$color}-#{$variant} {
@include button-variant($color, $variant);
}
}
}
@layer components { @layer components {
// scss-docs-start btn-variant-mixin // scss-docs-start btn-variant-mixin
@mixin button-variant( // @mixin button-variant(
$background, // $background,
$border, // $border,
$color: color-contrast($background), // $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-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-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), // $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-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-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), // $active-color: color-contrast($active-background),
$disabled-background: $background, // $disabled-background: $background,
$disabled-border: $border, // $disabled-border: $border,
$disabled-color: color-contrast($disabled-background) // $disabled-color: color-contrast($disabled-background)
) { // ) {
--#{$prefix}btn-color: #{$color}; // --#{$prefix}btn-color: #{$color};
--#{$prefix}btn-bg: #{$background}; // --#{$prefix}btn-bg: #{$background};
--#{$prefix}btn-border-color: #{$border}; // --#{$prefix}btn-border-color: #{$border};
--#{$prefix}btn-hover-color: #{$hover-color}; // --#{$prefix}btn-hover-color: #{$hover-color};
--#{$prefix}btn-hover-bg: #{$hover-background}; // --#{$prefix}btn-hover-bg: #{$hover-background};
--#{$prefix}btn-hover-border-color: #{$hover-border}; // --#{$prefix}btn-hover-border-color: #{$hover-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))}; // --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
--#{$prefix}btn-active-color: #{$active-color}; // --#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background}; // --#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border}; // --#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow}; // --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$disabled-color}; // --#{$prefix}btn-disabled-color: #{$disabled-color};
--#{$prefix}btn-disabled-bg: #{$disabled-background}; // --#{$prefix}btn-disabled-bg: #{$disabled-background};
--#{$prefix}btn-disabled-border-color: #{$disabled-border}; // --#{$prefix}btn-disabled-border-color: #{$disabled-border};
} // }
// scss-docs-end btn-variant-mixin // scss-docs-end btn-variant-mixin
// scss-docs-start btn-outline-variant-mixin // scss-docs-start btn-outline-variant-mixin
@mixin button-outline-variant( // @mixin button-outline-variant(
$color, // $color,
$color-hover: color-contrast($color), // $color-hover: color-contrast($color),
$active-background: $color, // $active-background: $color,
$active-border: $color, // $active-border: $color,
$active-color: color-contrast($active-background) // $active-color: color-contrast($active-background)
) { // ) {
--#{$prefix}btn-color: #{$color}; // --#{$prefix}btn-color: #{$color};
--#{$prefix}btn-border-color: #{$color}; // --#{$prefix}btn-border-color: #{$color};
--#{$prefix}btn-hover-color: #{$color-hover}; // --#{$prefix}btn-hover-color: #{$color-hover};
--#{$prefix}btn-hover-bg: #{$active-background}; // --#{$prefix}btn-hover-bg: #{$active-background};
--#{$prefix}btn-hover-border-color: #{$active-border}; // --#{$prefix}btn-hover-border-color: #{$active-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)}; // --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
--#{$prefix}btn-active-color: #{$active-color}; // --#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background}; // --#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border}; // --#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow}; // --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$color}; // --#{$prefix}btn-disabled-color: #{$color};
--#{$prefix}btn-disabled-bg: transparent; // --#{$prefix}btn-disabled-bg: transparent;
--#{$prefix}btn-disabled-border-color: #{$color}; // --#{$prefix}btn-disabled-border-color: #{$color};
--#{$prefix}gradient: none; // --#{$prefix}gradient: none;
} // }
// scss-docs-end btn-outline-variant-mixin // scss-docs-end btn-outline-variant-mixin
// scss-docs-start btn-size-mixin // scss-docs-start btn-size-mixin
@ -98,6 +262,7 @@
--#{$prefix}btn-border-width: #{$btn-border-width}; --#{$prefix}btn-border-width: #{$btn-border-width};
--#{$prefix}btn-border-color: transparent; --#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius}; --#{$prefix}btn-border-radius: #{$btn-border-radius};
--#{$prefix}btn-hover-color: var(--#{$prefix}btn-color);
--#{$prefix}btn-hover-border-color: transparent; --#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-box-shadow: #{$btn-box-shadow}; --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
@ -168,7 +333,7 @@
&.show { &.show {
color: var(--#{$prefix}btn-active-color); color: var(--#{$prefix}btn-active-color);
background-color: var(--#{$prefix}btn-active-bg); background-color: var(--#{$prefix}btn-active-bg);
// Remove CSS gradients if they're enabled // Remove CSS gradients if they"re enabled
background-image: if($enable-gradients, none, null); background-image: if($enable-gradients, none, null);
border-color: var(--#{$prefix}btn-active-border-color); border-color: var(--#{$prefix}btn-active-border-color);
@include box-shadow(var(--#{$prefix}btn-active-shadow)); @include box-shadow(var(--#{$prefix}btn-active-shadow));
@ -211,37 +376,37 @@
// //
// scss-docs-start btn-variant-loops // scss-docs-start btn-variant-loops
@each $color, $value in $theme-colors { // @each $color, $value in $theme-colors {
.btn-#{$color} { // .btn-#{$color} {
@if $color == "light" { // @if $color == "light" {
@include button-variant( // @include button-variant(
$value, // $value,
$value, // $value,
$hover-background: shade-color($value, $btn-hover-bg-shade-amount), // $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
$hover-border: shade-color($value, $btn-hover-border-shade-amount), // $hover-border: shade-color($value, $btn-hover-border-shade-amount),
$active-background: shade-color($value, $btn-active-bg-shade-amount), // $active-background: shade-color($value, $btn-active-bg-shade-amount),
$active-border: shade-color($value, $btn-active-border-shade-amount) // $active-border: shade-color($value, $btn-active-border-shade-amount)
); // );
} @else if $color == "dark" { // } @else if $color == "dark" {
@include button-variant( // @include button-variant(
$value, // $value,
$value, // $value,
$hover-background: tint-color($value, $btn-hover-bg-tint-amount), // $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
$hover-border: tint-color($value, $btn-hover-border-tint-amount), // $hover-border: tint-color($value, $btn-hover-border-tint-amount),
$active-background: tint-color($value, $btn-active-bg-tint-amount), // $active-background: tint-color($value, $btn-active-bg-tint-amount),
$active-border: tint-color($value, $btn-active-border-tint-amount) // $active-border: tint-color($value, $btn-active-border-tint-amount)
); // );
} @else { // } @else {
@include button-variant($value, $value); // @include button-variant($value, $value);
} // }
} // }
} // }
@each $color, $value in $theme-colors { // @each $color, $value in $theme-colors {
.btn-outline-#{$color} { // .btn-outline-#{$color} {
@include button-outline-variant($value); // @include button-outline-variant($value);
} // }
} // }
// scss-docs-end btn-variant-loops // scss-docs-end btn-variant-loops
@ -261,8 +426,9 @@
--#{$prefix}btn-active-border-color: transparent; --#{$prefix}btn-active-border-color: transparent;
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color}; --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
--#{$prefix}btn-disabled-border-color: transparent; --#{$prefix}btn-disabled-border-color: transparent;
--#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows --#{$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}; // mdo-do
// --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
text-decoration: $link-decoration; text-decoration: $link-decoration;
@if $enable-gradients { @if $enable-gradients {

106
scss/_functions.scss
View File

@ -146,77 +146,77 @@
@return $string; @return $string;
} }
// Color contrast // // Color contrast
// See https://github.com/twbs/bootstrap/pull/30168 // // See https://github.com/twbs/bootstrap/pull/30168
// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255) // // A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern // // stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1; // $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) { // @function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
$foregrounds: $color-contrast-light, $color-contrast-dark, #fff, #000; // $foregrounds: $color-contrast-light, $color-contrast-dark, #fff, #000;
$max-ratio: 0; // $max-ratio: 0;
$max-ratio-color: null; // $max-ratio-color: null;
@each $color in $foregrounds { // @each $color in $foregrounds {
$contrast-ratio: contrast-ratio($background, $color); // $contrast-ratio: contrast-ratio($background, $color);
@if $contrast-ratio > $min-contrast-ratio { // @if $contrast-ratio > $min-contrast-ratio {
@return $color; // @return $color;
} @else if $contrast-ratio > $max-ratio { // } @else if $contrast-ratio > $max-ratio {
$max-ratio: $contrast-ratio; // $max-ratio: $contrast-ratio;
$max-ratio-color: $color; // $max-ratio-color: $color;
} // }
} // }
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}..."; // @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
@return $max-ratio-color; // @return $max-ratio-color;
} // }
@function contrast-ratio($background, $foreground: $color-contrast-light) { // @function contrast-ratio($background, $foreground: $color-contrast-light) {
$l1: luminance($background); // $l1: luminance($background);
$l2: luminance(opaque($background, $foreground)); // $l2: luminance(opaque($background, $foreground));
@return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05)); // @return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05));
} // }
// Return WCAG2.2 relative luminance // Return WCAG2.2 relative luminance
// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
@function luminance($color) { // @function luminance($color) {
$rgb: ( // $rgb: (
"r": red($color), // "r": red($color),
"g": green($color), // "g": green($color),
"b": blue($color) // "b": blue($color)
); // );
@each $name, $value in $rgb { // @each $name, $value in $rgb {
$value: if(math.div($value, 255) < .04045, math.div(math.div($value, 255), 12.92), nth($_luminance-list, $value + 1)); // $value: if(math.div($value, 255) < .04045, math.div(math.div($value, 255), 12.92), nth($_luminance-list, $value + 1));
$rgb: map-merge($rgb, ($name: $value)); // $rgb: map-merge($rgb, ($name: $value));
} // }
@return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722); // @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
} // }
// Return opaque color // Return opaque color
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
@function opaque($background, $foreground) { // @function opaque($background, $foreground) {
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%); // @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
} // }
// scss-docs-start color-functions // scss-docs-start color-functions
// Tint a color: mix a color with white // // Tint a color: mix a color with white
@function tint-color($color, $weight) { // @function tint-color($color, $weight) {
@return mix(white, $color, $weight); // @return mix(white, $color, $weight);
} // }
// Shade a color: mix a color with black // // Shade a color: mix a color with black
@function shade-color($color, $weight) { // @function shade-color($color, $weight) {
@return mix(black, $color, $weight); // @return mix(black, $color, $weight);
} // }
// Shade the color if the weight is positive, else tint it // // Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) { // @function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight)); // @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
} // }
// scss-docs-end color-functions // scss-docs-end color-functions

300
scss/_maps.scss
View File

@ -9,172 +9,172 @@
// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more. // 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 // scss-docs-start theme-colors-rgb
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default; // $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
// scss-docs-end theme-colors-rgb // scss-docs-end theme-colors-rgb
// scss-docs-start theme-text-map // // scss-docs-start theme-text-map
$theme-colors-text: ( // $theme-colors-text: (
"primary": $primary-text-emphasis, // "primary": $primary-text-emphasis,
"secondary": $secondary-text-emphasis, // "secondary": $secondary-text-emphasis,
"success": $success-text-emphasis, // "success": $success-text-emphasis,
"info": $info-text-emphasis, // "info": $info-text-emphasis,
"warning": $warning-text-emphasis, // "warning": $warning-text-emphasis,
"danger": $danger-text-emphasis, // "danger": $danger-text-emphasis,
"light": $light-text-emphasis, // "light": $light-text-emphasis,
"dark": $dark-text-emphasis, // "dark": $dark-text-emphasis,
) !default; // ) !default;
// scss-docs-end theme-text-map // // scss-docs-end theme-text-map
// scss-docs-start theme-bg-subtle-map // // scss-docs-start theme-bg-subtle-map
$theme-colors-bg-subtle: ( // $theme-colors-bg-subtle: (
"primary": $primary-bg-subtle, // "primary": $primary-bg-subtle,
"secondary": $secondary-bg-subtle, // "secondary": $secondary-bg-subtle,
"success": $success-bg-subtle, // "success": $success-bg-subtle,
"info": $info-bg-subtle, // "info": $info-bg-subtle,
"warning": $warning-bg-subtle, // "warning": $warning-bg-subtle,
"danger": $danger-bg-subtle, // "danger": $danger-bg-subtle,
"light": $light-bg-subtle, // "light": $light-bg-subtle,
"dark": $dark-bg-subtle, // "dark": $dark-bg-subtle,
) !default; // ) !default;
// scss-docs-end theme-bg-subtle-map // // scss-docs-end theme-bg-subtle-map
// scss-docs-start theme-border-subtle-map // // scss-docs-start theme-border-subtle-map
$theme-colors-border-subtle: ( // $theme-colors-border-subtle: (
"primary": $primary-border-subtle, // "primary": $primary-border-subtle,
"secondary": $secondary-border-subtle, // "secondary": $secondary-border-subtle,
"success": $success-border-subtle, // "success": $success-border-subtle,
"info": $info-border-subtle, // "info": $info-border-subtle,
"warning": $warning-border-subtle, // "warning": $warning-border-subtle,
"danger": $danger-border-subtle, // "danger": $danger-border-subtle,
"light": $light-border-subtle, // "light": $light-border-subtle,
"dark": $dark-border-subtle, // "dark": $dark-border-subtle,
) !default; // ) !default;
// scss-docs-end theme-border-subtle-map // // scss-docs-end theme-border-subtle-map
$theme-colors-text-dark: null !default; // $theme-colors-text-dark: null !default;
$theme-colors-bg-subtle-dark: null !default; // $theme-colors-bg-subtle-dark: null !default;
$theme-colors-border-subtle-dark: null !default; // $theme-colors-border-subtle-dark: null !default;
@if $enable-dark-mode { // @if $enable-dark-mode {
// scss-docs-start theme-text-dark-map // // scss-docs-start theme-text-dark-map
$theme-colors-text-dark: ( // $theme-colors-text-dark: (
"primary": $primary-text-emphasis-dark, // "primary": $primary-text-emphasis-dark,
"secondary": $secondary-text-emphasis-dark, // "secondary": $secondary-text-emphasis-dark,
"success": $success-text-emphasis-dark, // "success": $success-text-emphasis-dark,
"info": $info-text-emphasis-dark, // "info": $info-text-emphasis-dark,
"warning": $warning-text-emphasis-dark, // "warning": $warning-text-emphasis-dark,
"danger": $danger-text-emphasis-dark, // "danger": $danger-text-emphasis-dark,
"light": $light-text-emphasis-dark, // "light": $light-text-emphasis-dark,
"dark": $dark-text-emphasis-dark, // "dark": $dark-text-emphasis-dark,
) !default; // ) !default;
// scss-docs-end theme-text-dark-map // // scss-docs-end theme-text-dark-map
// scss-docs-start theme-bg-subtle-dark-map // // scss-docs-start theme-bg-subtle-dark-map
$theme-colors-bg-subtle-dark: ( // $theme-colors-bg-subtle-dark: (
"primary": $primary-bg-subtle-dark, // "primary": $primary-bg-subtle-dark,
"secondary": $secondary-bg-subtle-dark, // "secondary": $secondary-bg-subtle-dark,
"success": $success-bg-subtle-dark, // "success": $success-bg-subtle-dark,
"info": $info-bg-subtle-dark, // "info": $info-bg-subtle-dark,
"warning": $warning-bg-subtle-dark, // "warning": $warning-bg-subtle-dark,
"danger": $danger-bg-subtle-dark, // "danger": $danger-bg-subtle-dark,
"light": $light-bg-subtle-dark, // "light": $light-bg-subtle-dark,
"dark": $dark-bg-subtle-dark, // "dark": $dark-bg-subtle-dark,
) !default; // ) !default;
// scss-docs-end theme-bg-subtle-dark-map // // scss-docs-end theme-bg-subtle-dark-map
// scss-docs-start theme-border-subtle-dark-map // // scss-docs-start theme-border-subtle-dark-map
$theme-colors-border-subtle-dark: ( // $theme-colors-border-subtle-dark: (
"primary": $primary-border-subtle-dark, // "primary": $primary-border-subtle-dark,
"secondary": $secondary-border-subtle-dark, // "secondary": $secondary-border-subtle-dark,
"success": $success-border-subtle-dark, // "success": $success-border-subtle-dark,
"info": $info-border-subtle-dark, // "info": $info-border-subtle-dark,
"warning": $warning-border-subtle-dark, // "warning": $warning-border-subtle-dark,
"danger": $danger-border-subtle-dark, // "danger": $danger-border-subtle-dark,
"light": $light-border-subtle-dark, // "light": $light-border-subtle-dark,
"dark": $dark-border-subtle-dark, // "dark": $dark-border-subtle-dark,
) !default; // ) !default;
// scss-docs-end theme-border-subtle-dark-map // // scss-docs-end theme-border-subtle-dark-map
} // }
// Utilities maps // // Utilities maps
// // //
// Extends the default `$theme-colors` maps to help create our utilities. // // 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. // // Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
// scss-docs-start utilities-colors // // scss-docs-start utilities-colors
$utilities-colors: $theme-colors-rgb !default; // $utilities-colors: $theme-colors-rgb !default;
// scss-docs-end utilities-colors // // scss-docs-end utilities-colors
// scss-docs-start utilities-text-colors // // scss-docs-start utilities-text-colors
$utilities-text: map.merge( // $utilities-text: map.merge(
$utilities-colors, // $utilities-colors,
( // (
"black": to-rgb($black), // "black": to-rgb($black),
"white": to-rgb($white), // "white": to-rgb($white),
"body": to-rgb($body-color) // "body": to-rgb($body-color)
) // )
) !default; // ) !default;
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default; // $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
$utilities-text-emphasis-colors: ( // $utilities-text-emphasis-colors: (
"primary-emphasis": var(--#{$prefix}primary-text-emphasis), // "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
"secondary-emphasis": var(--#{$prefix}secondary-text-emphasis), // "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
"success-emphasis": var(--#{$prefix}success-text-emphasis), // "success-emphasis": var(--#{$prefix}success-text-emphasis),
"info-emphasis": var(--#{$prefix}info-text-emphasis), // "info-emphasis": var(--#{$prefix}info-text-emphasis),
"warning-emphasis": var(--#{$prefix}warning-text-emphasis), // "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
"danger-emphasis": var(--#{$prefix}danger-text-emphasis), // "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
"light-emphasis": var(--#{$prefix}light-text-emphasis), // "light-emphasis": var(--#{$prefix}light-text-emphasis),
"dark-emphasis": var(--#{$prefix}dark-text-emphasis) // "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
) !default; // ) !default;
// scss-docs-end utilities-text-colors // // scss-docs-end utilities-text-colors
// scss-docs-start utilities-bg-colors // // scss-docs-start utilities-bg-colors
$utilities-bg: map.merge( // $utilities-bg: map.merge(
$utilities-colors, // $utilities-colors,
( // (
"black": to-rgb($black), // "black": to-rgb($black),
"white": to-rgb($white), // "white": to-rgb($white),
"body": to-rgb($body-bg) // "body": to-rgb($body-bg)
) // )
) !default; // ) !default;
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default; // $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
$utilities-bg-subtle: ( // $utilities-bg-subtle: (
"primary-subtle": var(--#{$prefix}primary-bg-subtle), // "primary-subtle": var(--#{$prefix}primary-bg-subtle),
"secondary-subtle": var(--#{$prefix}secondary-bg-subtle), // "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
"success-subtle": var(--#{$prefix}success-bg-subtle), // "success-subtle": var(--#{$prefix}success-bg-subtle),
"info-subtle": var(--#{$prefix}info-bg-subtle), // "info-subtle": var(--#{$prefix}info-bg-subtle),
"warning-subtle": var(--#{$prefix}warning-bg-subtle), // "warning-subtle": var(--#{$prefix}warning-bg-subtle),
"danger-subtle": var(--#{$prefix}danger-bg-subtle), // "danger-subtle": var(--#{$prefix}danger-bg-subtle),
"light-subtle": var(--#{$prefix}light-bg-subtle), // "light-subtle": var(--#{$prefix}light-bg-subtle),
"dark-subtle": var(--#{$prefix}dark-bg-subtle) // "dark-subtle": var(--#{$prefix}dark-bg-subtle)
) !default; // ) !default;
// scss-docs-end utilities-bg-colors // // scss-docs-end utilities-bg-colors
// scss-docs-start utilities-border-colors // // scss-docs-start utilities-border-colors
$utilities-border: map.merge( // $utilities-border: map.merge(
$utilities-colors, // $utilities-colors,
( // (
"black": to-rgb($black), // "black": to-rgb($black),
"white": to-rgb($white) // "white": to-rgb($white)
) // )
) !default; // ) !default;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default; // $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
$utilities-border-subtle: ( // $utilities-border-subtle: (
"primary-subtle": var(--#{$prefix}primary-border-subtle), // "primary-subtle": var(--#{$prefix}primary-border-subtle),
"secondary-subtle": var(--#{$prefix}secondary-border-subtle), // "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
"success-subtle": var(--#{$prefix}success-border-subtle), // "success-subtle": var(--#{$prefix}success-border-subtle),
"info-subtle": var(--#{$prefix}info-border-subtle), // "info-subtle": var(--#{$prefix}info-border-subtle),
"warning-subtle": var(--#{$prefix}warning-border-subtle), // "warning-subtle": var(--#{$prefix}warning-border-subtle),
"danger-subtle": var(--#{$prefix}danger-border-subtle), // "danger-subtle": var(--#{$prefix}danger-border-subtle),
"light-subtle": var(--#{$prefix}light-border-subtle), // "light-subtle": var(--#{$prefix}light-border-subtle),
"dark-subtle": var(--#{$prefix}dark-border-subtle) // "dark-subtle": var(--#{$prefix}dark-border-subtle)
) !default; // ) !default;
// scss-docs-end utilities-border-colors // // scss-docs-end utilities-border-colors
$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default; // $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; // $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
$gutters: $spacers !default; // $gutters: $spacers !default;

4
scss/_navbar.scss
View File

@ -64,7 +64,7 @@
} }
@each $breakpoint, $container-max-width in $container-max-widths { @each $breakpoint, $container-max-width in $container-max-widths {
> .container#{breakpoint-infix($breakpoint, $container-max-widths)} { > .container-#{breakpoint-infix($breakpoint, $container-max-widths)} {
@extend %container-flex-properties; @extend %container-flex-properties;
} }
} }
@ -208,7 +208,7 @@
$infix: breakpoint-infix($next, $breakpoints); $infix: breakpoint-infix($next, $breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name // stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} { &-#{$infix} {
@include media-breakpoint-up($next) { @include media-breakpoint-up($next) {
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;

4
scss/_offcanvas.scss
View File

@ -28,7 +28,7 @@
$next: breakpoint-next($breakpoint, $breakpoints); $next: breakpoint-next($breakpoint, $breakpoints);
$infix: breakpoint-infix($next, $breakpoints); $infix: breakpoint-infix($next, $breakpoints);
.offcanvas#{$infix} { .offcanvas-#{$infix} {
@extend %offcanvas-css-vars; @extend %offcanvas-css-vars;
} }
} }
@ -37,7 +37,7 @@
$next: breakpoint-next($breakpoint, $breakpoints); $next: breakpoint-next($breakpoint, $breakpoints);
$infix: breakpoint-infix($next, $breakpoints); $infix: breakpoint-infix($next, $breakpoints);
.offcanvas#{$infix} { .offcanvas-#{$infix} {
@include media-breakpoint-down($next) { @include media-breakpoint-down($next) {
position: fixed; position: fixed;
bottom: 0; bottom: 0;

135
scss/_root.scss
View File

@ -1,7 +1,8 @@
@use "config" as *; @use "config" as *;
@use "colors" as *; @use "colors" as *;
@use "theme" as *;
@use "variables" as *; @use "variables" as *;
@use "maps" as *; // @use "maps" as *;
@use "vendor/rfs" as *; @use "vendor/rfs" as *;
@use "mixins/color-mode" as *; @use "mixins/color-mode" as *;
@ -9,8 +10,9 @@
@layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities; @layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities;
@layer colors { @layer colors {
:root, :root {
[data-bs-theme="light"] { color-scheme: light dark;
@each $color-group-name, $color-group in $all-colors { @each $color-group-name, $color-group in $all-colors {
@if type-of($color-group) == "map" { @if type-of($color-group) == "map" {
@each $color-name, $color-value in $color-group { @each $color-name, $color-value in $color-group {
@ -24,11 +26,16 @@
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
--#{$prefix}#{$color}: #{$value}; --#{$prefix}#{$color}: #{$value};
} }
@each $color-name, $color-map in $new-theme-colors {
@each $key, $value in $color-map {
--#{$prefix}#{$color-name}-#{$key}: #{$value};
}
}
} }
} }
:root, :root {
[data-bs-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`. // Note: Custom variable values only support SassScript inside `#{}`.
// Colors // Colors
@ -53,24 +60,24 @@
// --#{$prefix}#{$color}: #{$value}; // --#{$prefix}#{$color}: #{$value};
// } // }
@each $color, $value in $theme-colors-rgb { // @each $color, $value in $theme-colors-rgb {
--#{$prefix}#{$color}-rgb: #{$value}; // --#{$prefix}#{$color}-rgb: #{$value};
} // }
@each $color, $value in $theme-colors-text { // @each $color, $value in $theme-colors-text {
--#{$prefix}#{$color}-text-emphasis: #{$value}; // --#{$prefix}#{$color}-text-emphasis: #{$value};
} // }
@each $color, $value in $theme-colors-bg-subtle { // @each $color, $value in $theme-colors-bg-subtle {
--#{$prefix}#{$color}-bg-subtle: #{$value}; // --#{$prefix}#{$color}-bg-subtle: #{$value};
} // }
@each $color, $value in $theme-colors-border-subtle { // @each $color, $value in $theme-colors-border-subtle {
--#{$prefix}#{$color}-border-subtle: #{$value}; // --#{$prefix}#{$color}-border-subtle: #{$value};
} // }
--#{$prefix}white-rgb: #{to-rgb($white)}; // --#{$prefix}white-rgb: #{to-rgb($white)};
--#{$prefix}black-rgb: #{to-rgb($black)}; // --#{$prefix}black-rgb: #{to-rgb($black)};
// Fonts // Fonts
@ -94,32 +101,32 @@
} }
--#{$prefix}body-color: #{$body-color}; --#{$prefix}body-color: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($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}body-bg-rgb: #{to-rgb($body-bg)};
--#{$prefix}emphasis-color: #{$body-emphasis-color}; --#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)}; // --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
--#{$prefix}secondary-color: #{$body-secondary-color}; --#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)}; // --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg}; --#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)}; // --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
--#{$prefix}tertiary-color: #{$body-tertiary-color}; --#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)}; // --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg}; --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)}; // --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
// scss-docs-end root-body-variables // scss-docs-end root-body-variables
--#{$prefix}heading-color: #{$headings-color}; --#{$prefix}heading-color: #{$headings-color};
--#{$prefix}link-color: #{$link-color}; --#{$prefix}link-color: #{$link-color};
--#{$prefix}link-color-rgb: #{to-rgb($link-color)}; // --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
--#{$prefix}link-decoration: #{$link-decoration}; --#{$prefix}link-decoration: #{$link-decoration};
--#{$prefix}link-hover-color: #{$link-hover-color}; --#{$prefix}link-hover-color: #{$link-hover-color};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)}; // --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
@if $link-hover-decoration != null { @if $link-hover-decoration != null {
--#{$prefix}link-hover-decoration: #{$link-hover-decoration}; --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
@ -168,54 +175,54 @@
color-scheme: dark; color-scheme: dark;
// scss-docs-start root-dark-mode-vars // scss-docs-start root-dark-mode-vars
--#{$prefix}body-color: #{$body-color-dark}; // --#{$prefix}body-color: #{$body-color-dark};
--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)}; // --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
--#{$prefix}body-bg: #{$body-bg-dark}; // --#{$prefix}body-bg: #{$body-bg-dark};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)}; // --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
--#{$prefix}emphasis-color: #{$body-emphasis-color-dark}; // --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)}; // --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
--#{$prefix}secondary-color: #{$body-secondary-color-dark}; // --#{$prefix}secondary-color: #{$body-secondary-color-dark};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)}; // --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
--#{$prefix}secondary-bg: #{$body-secondary-bg-dark}; // --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)}; // --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
--#{$prefix}tertiary-color: #{$body-tertiary-color-dark}; // --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)}; // --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark}; // --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)}; // --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
@each $color, $value in $theme-colors-text-dark { // @each $color, $value in $theme-colors-text-dark {
--#{$prefix}#{$color}-text-emphasis: #{$value}; // --#{$prefix}#{$color}-text-emphasis: #{$value};
} // }
@each $color, $value in $theme-colors-bg-subtle-dark { // @each $color, $value in $theme-colors-bg-subtle-dark {
--#{$prefix}#{$color}-bg-subtle: #{$value}; // --#{$prefix}#{$color}-bg-subtle: #{$value};
} // }
@each $color, $value in $theme-colors-border-subtle-dark { // @each $color, $value in $theme-colors-border-subtle-dark {
--#{$prefix}#{$color}-border-subtle: #{$value}; // --#{$prefix}#{$color}-border-subtle: #{$value};
} // }
--#{$prefix}heading-color: #{$headings-color-dark}; --#{$prefix}heading-color: #{$headings-color-dark};
--#{$prefix}link-color: #{$link-color-dark}; // --#{$prefix}link-color: #{$link-color-dark};
--#{$prefix}link-hover-color: #{$link-hover-color-dark}; // --#{$prefix}link-hover-color: #{$link-hover-color-dark};
--#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)}; // --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)}; // --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
--#{$prefix}code-color: #{$code-color-dark}; // --#{$prefix}code-color: #{$code-color-dark};
--#{$prefix}highlight-color: #{$mark-color-dark}; // --#{$prefix}highlight-color: #{$mark-color-dark};
--#{$prefix}highlight-bg: #{$mark-bg-dark}; // --#{$prefix}highlight-bg: #{$mark-bg-dark};
--#{$prefix}border-color: #{$border-color-dark}; // --#{$prefix}border-color: #{$border-color-dark};
--#{$prefix}border-color-translucent: #{$border-color-translucent-dark}; // --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
--#{$prefix}form-valid-color: #{$form-valid-color-dark}; // --#{$prefix}form-valid-color: #{$form-valid-color-dark};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark}; // --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
--#{$prefix}form-invalid-color: #{$form-invalid-color-dark}; // --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark}; // --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
// scss-docs-end root-dark-mode-vars // scss-docs-end root-dark-mode-vars
} }
} }

190
scss/_theme.scss Normal file
View File

@ -0,0 +1,190 @@
@use "config" as *;
@use "colors" as *;
@function theme-color-values($key) {
$result: ();
@each $color-name, $color-map in $new-theme-colors {
@if map-has-key($color-map, $key) {
$result: map-merge($result, ($color-name: map-get($color-map, $key)));
}
}
@return $result;
}
// Recursive mixin to handle nested maps
@mixin create-css-vars($map, $parent-key: "") {
@each $key, $value in $map {
$current-key: if($parent-key == "", $key, "#{$parent-key}-#{$key}");
@if type-of($value) == "map" {
@include create-css-vars($value, $current-key);
} @else {
--#{$prefix}#{$current-key}: #{$value};
}
}
}
$new-theme-colors: (
"primary": (
"base": var(--#{$prefix}blue-500),
"text": light-dark(var(--#{$prefix}blue-700), var(--#{$prefix}blue-300)),
"bg": light-dark(var(--#{$prefix}blue-500), 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)),
"border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, transparent),
"contrast": var(--#{$prefix}white)
),
// "indigo": (
// "base": var(--#{$prefix}indigo-500),
// "text": light-dark(var(--#{$prefix}indigo-700), var(--#{$prefix}indigo-300)),
// "bg": light-dark(var(--#{$prefix}indigo-500), 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)),
// "border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
// "contrast": var(--#{$prefix}white)
// ),
// "purple": (
// "base": var(--#{$prefix}purple-500),
// "text": light-dark(var(--#{$prefix}purple-700), var(--#{$prefix}purple-300)),
// "bg": light-dark(var(--#{$prefix}purple-500), var(--#{$prefix}purple-500)),
// "bg-subtle": light-dark(var(--#{$prefix}purple-100), var(--#{$prefix}purple-900)),
// "bg-muted": light-dark(var(--#{$prefix}purple-200), var(--#{$prefix}purple-800)),
// "border": light-dark(var(--#{$prefix}purple-300), var(--#{$prefix}purple-600)),
// "contrast": var(--#{$prefix}white)
// ),
// "pink": (
// "base": var(--#{$prefix}pink-500),
// "text": light-dark(var(--#{$prefix}pink-700), var(--#{$prefix}pink-300)),
// "bg": light-dark(var(--#{$prefix}pink-500), var(--#{$prefix}pink-500)),
// "bg-subtle": light-dark(var(--#{$prefix}pink-100), var(--#{$prefix}pink-900)),
// "bg-muted": light-dark(var(--#{$prefix}pink-200), var(--#{$prefix}pink-800)),
// "border": light-dark(var(--#{$prefix}pink-300), var(--#{$prefix}pink-600)),
// "contrast": var(--#{$prefix}white)
// ),
"danger": (
"base": var(--#{$prefix}red-500),
"text": light-dark(var(--#{$prefix}red-700), var(--#{$prefix}red-300)),
"bg": light-dark(var(--#{$prefix}red-500), 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)),
"border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, transparent),
"contrast": var(--#{$prefix}white)
),
// "orange": (
// "base": var(--#{$prefix}orange-500),
// "text": light-dark(var(--#{$prefix}orange-700), var(--#{$prefix}orange-300)),
// "bg": light-dark(var(--#{$prefix}orange-500), var(--#{$prefix}orange-500)),
// "bg-subtle": light-dark(var(--#{$prefix}orange-100), var(--#{$prefix}orange-900)),
// "bg-muted": light-dark(var(--#{$prefix}orange-200), var(--#{$prefix}orange-800)),
// "border": light-dark(var(--#{$prefix}orange-300), var(--#{$prefix}orange-600)),
// "contrast": var(--#{$prefix}gray-900)
// ),
"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)),
"bg-subtle": light-dark(var(--#{$prefix}yellow-100), var(--#{$prefix}yellow-900)),
"bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)),
"border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, transparent),
"contrast": var(--#{$prefix}gray-900)
),
"success": (
"base": var(--#{$prefix}green-500),
"text": light-dark(var(--#{$prefix}green-700), 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)),
"border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}green-500) 50%, transparent),
"contrast": var(--#{$prefix}white)
),
// "teal": (
// "base": var(--#{$prefix}teal-500),
// "text": light-dark(var(--#{$prefix}teal-700), var(--#{$prefix}teal-300)),
// "bg": light-dark(var(--#{$prefix}teal-500), var(--#{$prefix}teal-500)),
// "bg-subtle": light-dark(var(--#{$prefix}teal-100), var(--#{$prefix}teal-900)),
// "bg-muted": light-dark(var(--#{$prefix}teal-200), var(--#{$prefix}teal-800)),
// "border": light-dark(var(--#{$prefix}teal-300), var(--#{$prefix}teal-600)),
// "contrast": var(--#{$prefix}gray-900)
// ),
"info": (
"base": var(--#{$prefix}cyan-500),
"text": light-dark(var(--#{$prefix}cyan-700), var(--#{$prefix}cyan-300)),
"bg": light-dark(var(--#{$prefix}cyan-500), 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)),
"border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}cyan-500) 50%, transparent),
"contrast": var(--#{$prefix}gray-900)
),
"secondary": (
"base": var(--#{$prefix}gray-500),
"text": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
"bg": light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-500)),
"bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
"bg-muted": light-dark(var(--#{$prefix}gray-200), 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%, transparent),
"contrast": var(--#{$prefix}gray-900)
)
) !default;
// [class^=".bg-"]: background-color: var(--bs-bg-color);
// .bg-primary: --bs-bg-color: var(--#{$prefix}primary-bg);
// .bg-10: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 10%, transparent);
// .bg-20: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 20%, transparent);
// .bg-30: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 30%, transparent);
// .bg-40: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 40%, transparent);
// .bg-50: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 50%, transparent);
// .bg-60: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 60%, transparent);
// .bg-70: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 70%, transparent);
// .bg-80: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 80%, transparent);
// .bg-90: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 90%, transparent);
// .bg-100: background-color: var(--#{$prefix}bg-color);
// [class^=".text-"]: color: var(--bs-text-color);
// .text-primary: --bs-text-color: var(--#{$prefix}primary-text);
// .text-10: color: color-mix(in oklch, var(--#{$prefix}text-color) 10%, transparent);
// .text-20: color: color-mix(in oklch, var(--#{$prefix}text-color) 20%, transparent);
// .text-30: color: color-mix(in oklch, var(--#{$prefix}text-color) 30%, transparent);
// .text-40: color: color-mix(in oklch, var(--#{$prefix}text-color) 40%, transparent);
// .text-50: color: color-mix(in oklch, var(--#{$prefix}text-color) 50%, transparent);
// .text-60: color: color-mix(in oklch, var(--#{$prefix}text-color) 60%, transparent);
// .text-70: color: color-mix(in oklch, var(--#{$prefix}text-color) 70%, transparent);
// .text-80: color: color-mix(in oklch, var(--#{$prefix}text-color) 80%, transparent);
// .text-90: color: color-mix(in oklch, var(--#{$prefix}text-color) 90%, transparent);
// .text-100: color: var(--#{$prefix}text-color);
$color-bg: (
"body": var(--#{$prefix}body-bg),
"secondary": var(--#{$prefix}body-secondary-bg),
"tertiary": var(--#{$prefix}body-tertiary-bg),
) !default;
$color-text: (
"body": var(--#{$prefix}body-color),
"secondary": var(--#{$prefix}body-secondary-color),
"tertiary": var(--#{$prefix}body-tertiary-color),
) !default;
$color-border: (
//...
) !default;
$util-opacity: (
"10": 0.1,
"20": 0.2,
"30": 0.3,
"40": 0.4,
"50": 0.5,
"60": 0.6,
"70": 0.7,
"80": 0.8,
"90": 0.9,
"100": 1
) !default;

253
scss/_utilities.scss
View File

@ -3,7 +3,7 @@
@use "colors" as *; @use "colors" as *;
@use "variables" as *; @use "variables" as *;
@use "functions" as *; @use "functions" as *;
@use "maps" as *; @use "theme" as *;
$utilities: () !default; $utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default // stylelint-disable-next-line scss/dollar-variable-default
@ -15,7 +15,7 @@ $utilities: map.merge(
class: align, class: align,
values: baseline top middle bottom text-bottom text-top values: baseline top middle bottom text-bottom text-top
), ),
// scss-docs-end utils-vertical-align // // scss-docs-end utils-vertical-align
// scss-docs-start utils-aspect-ratio // scss-docs-start utils-aspect-ratio
"aspect-ratio": ( "aspect-ratio": (
property: aspect-ratio, property: aspect-ratio,
@ -25,8 +25,8 @@ $utilities: map.merge(
// scss-docs-end utils-aspect-ratio // scss-docs-end utils-aspect-ratio
// scss-docs-start utils-float // scss-docs-start utils-float
"float": ( "float": (
responsive: true,
property: float, property: float,
responsive: true,
values: ( values: (
start: left, start: left,
end: right, end: right,
@ -47,7 +47,7 @@ $utilities: map.merge(
none: none, none: none,
) )
), ),
// scss-docs-end utils-object-fit scss-docs-end utils-object-fit
// Opacity utilities // Opacity utilities
// scss-docs-start utils-opacity // scss-docs-start utils-opacity
"opacity": ( "opacity": (
@ -98,10 +98,10 @@ $utilities: map.merge(
// scss-docs-end utils-shadow // scss-docs-end utils-shadow
// scss-docs-start utils-focus-ring // scss-docs-start utils-focus-ring
"focus-ring": ( "focus-ring": (
css-var: true, // css-var: true,
css-variable-name: focus-ring-color, property: --#{$prefix}focus-ring-color,
class: focus-ring, class: focus-ring,
values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring") values: theme-color-values("focus-ring"),
), ),
// scss-docs-end utils-focus-ring // scss-docs-end utils-focus-ring
// scss-docs-start utils-position // scss-docs-start utils-position
@ -146,14 +146,14 @@ $utilities: map.merge(
) )
), ),
"border-top": ( "border-top": (
property: border-top, property: border-block-start,
values: ( values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0, 0: 0,
) )
), ),
"border-end": ( "border-end": (
property: border-right, property: border-inline-end,
class: border-end, class: border-end,
values: ( values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
@ -161,14 +161,14 @@ $utilities: map.merge(
) )
), ),
"border-bottom": ( "border-bottom": (
property: border-bottom, property: border-block-end,
values: ( values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0, 0: 0,
) )
), ),
"border-start": ( "border-start": (
property: border-left, property: border-inline-start,
class: border-start, class: border-start,
values: ( values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
@ -181,29 +181,29 @@ $utilities: map.merge(
local-vars: ( local-vars: (
"border-opacity": 1 "border-opacity": 1
), ),
values: $utilities-border-colors // values: $utilities-border-colors
),
"subtle-border-color": (
property: border-color,
class: border,
values: $utilities-border-subtle
), ),
// "subtle-border-color": (
// property: border-color,
// class: border,
// // values: $utilities-border-subtle
// ),
"border-width": ( "border-width": (
property: border-width, property: border-width,
class: border, class: border,
values: $border-widths values: $border-widths
), ),
"border-opacity": ( // "border-opacity": (
css-var: true, // css-var: true,
class: border-opacity, // class: border-opacity,
values: ( // values: (
10: .1, // 10: .1,
25: .25, // 25: .25,
50: .5, // 50: .5,
75: .75, // 75: .75,
100: 1 // 100: 1
) // )
), // ),
// scss-docs-end utils-borders // scss-docs-end utils-borders
// Sizing utilities // Sizing utilities
// scss-docs-start utils-sizing // scss-docs-start utils-sizing
@ -404,48 +404,48 @@ $utilities: map.merge(
values: map.merge($spacers, (auto: auto)) values: map.merge($spacers, (auto: auto))
), ),
// Negative margin utilities // Negative margin utilities
"negative-margin": ( // "negative-margin": (
responsive: true, // responsive: true,
property: margin, // property: margin,
class: m, // class: m,
values: $negative-spacers // values: $negative-spacers
), // ),
"negative-margin-x": ( // "negative-margin-x": (
responsive: true, // responsive: true,
property: margin-right margin-left, // property: margin-right margin-left,
class: mx, // class: mx,
values: $negative-spacers // values: $negative-spacers
), // ),
"negative-margin-y": ( // "negative-margin-y": (
responsive: true, // responsive: true,
property: margin-top margin-bottom, // property: margin-top margin-bottom,
class: my, // class: my,
values: $negative-spacers // values: $negative-spacers
), // ),
"negative-margin-top": ( // "negative-margin-top": (
responsive: true, // responsive: true,
property: margin-top, // property: margin-top,
class: mt, // class: mt,
values: $negative-spacers // values: $negative-spacers
), // ),
"negative-margin-end": ( // "negative-margin-end": (
responsive: true, // responsive: true,
property: margin-right, // property: margin-right,
class: me, // class: me,
values: $negative-spacers // values: $negative-spacers
), // ),
"negative-margin-bottom": ( // "negative-margin-bottom": (
responsive: true, // responsive: true,
property: margin-bottom, // property: margin-bottom,
class: mb, // class: mb,
values: $negative-spacers // values: $negative-spacers
), // ),
"negative-margin-start": ( // "negative-margin-start": (
responsive: true, // responsive: true,
property: margin-left, // property: margin-left,
class: ms, // class: ms,
values: $negative-spacers // values: $negative-spacers
), // ),
// Padding utilities // Padding utilities
"padding": ( "padding": (
responsive: true, responsive: true,
@ -591,21 +591,22 @@ $utilities: map.merge(
local-vars: ( local-vars: (
"text-opacity": 1 "text-opacity": 1
), ),
values: map.merge( values: (
$utilities-text-colors, // $utilities-text-colors,
( // (
"muted": var(--#{$prefix}secondary-color), // deprecated "muted": var(--#{$prefix}secondary-color), // deprecated
"black-50": rgba($black, .5), // deprecated "black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated "white-50": rgba($white, .5), // deprecated
"body-secondary": var(--#{$prefix}secondary-color), "body-secondary": var(--#{$prefix}secondary-color),
"body-tertiary": var(--#{$prefix}tertiary-color), "body-tertiary": var(--#{$prefix}tertiary-color),
"body-emphasis": var(--#{$prefix}emphasis-color), "body-emphasis": var(--#{$prefix}emphasis-color),
"reset": inherit, "reset": inherit,
) // )
) )
), ),
"text-opacity": ( "text-opacity": (
css-var: true, // css-var: true,
property: --#{$prefix}text-opacity,
class: text-opacity, class: text-opacity,
values: ( values: (
25: .25, 25: .25,
@ -617,12 +618,14 @@ $utilities: map.merge(
"text-color": ( "text-color": (
property: color, property: color,
class: text, class: text,
values: $utilities-text-emphasis-colors values: theme-color-values("text"),
// values: $utilities-text-emphasis-colors
), ),
// scss-docs-end utils-color // scss-docs-end utils-color
// scss-docs-start utils-links // scss-docs-start utils-links
"link-opacity": ( "link-opacity": (
css-var: true, property: --#{$prefix}link-opacity,
// css-var: true,
class: link-opacity, class: link-opacity,
state: hover, state: hover,
values: ( values: (
@ -649,15 +652,16 @@ $utilities: map.merge(
local-vars: ( local-vars: (
"link-underline-opacity": 1 "link-underline-opacity": 1
), ),
values: map.merge( // values: map.merge(
$utilities-links-underline, // $utilities-links-underline,
( // (
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)), // // null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
) // )
) // )
), ),
"link-underline-opacity": ( "link-underline-opacity": (
css-var: true, // css-var: true,
property: --#{$prefix}link-underline-opacity,
class: link-underline-opacity, class: link-underline-opacity,
state: hover, state: hover,
values: ( values: (
@ -671,37 +675,54 @@ $utilities: map.merge(
), ),
// scss-docs-end utils-links // scss-docs-end utils-links
// scss-docs-start utils-bg-color // scss-docs-start utils-bg-color
"background-color": ( "bg-attr": (
selector: "attr-starts",
class: "bg-",
property: background-color, property: background-color,
class: bg, values: var(--#{$prefix}bg),
local-vars: (
"bg-opacity": 1
),
values: map.merge(
$utilities-bg-colors,
(
"transparent": transparent,
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
)
)
), ),
"bg-color": (
// css-var: true,
property: --#{$prefix}bg,
class: bg,
// local-vars: (
// "bg-opacity": 1
// ),
values: theme-color-values("bg"),
),
"bg-color-subtle": (
property: --#{$prefix}bg,
class: bg-subtle,
values: theme-color-values("bg-subtle"),
),
"bg-color-muted": (
property: --#{$prefix}bg,
class: bg-muted,
values: theme-color-values("bg-muted"),
),
"bg-opacity": ( "bg-opacity": (
css-var: true, class: bg,
class: bg-opacity, property: background-color,
values: ( values: (
10: .1, 10: color-mix(in oklch, var(--#{$prefix}bg) 10%, transparent),
25: .25, 20: color-mix(in oklch, var(--#{$prefix}bg) 20%, transparent),
50: .5, 30: color-mix(in oklch, var(--#{$prefix}bg) 30%, transparent),
75: .75, 40: color-mix(in oklch, var(--#{$prefix}bg) 40%, transparent),
100: 1 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),
) )
), ),
"subtle-background-color": ( // "subtle-background-color": (
property: background-color, // property: background-color,
class: bg, // class: bg,
values: $utilities-bg-subtle // // values: $utilities-bg-subtle
), // ),
// scss-docs-end utils-bg-color // scss-docs-end utils-bg-color
"gradient": ( "gradient": (
property: background-image, property: background-image,

98
scss/_variables-dark.scss
View File

@ -7,64 +7,65 @@
// //
// scss-docs-start sass-dark-mode-vars // scss-docs-start sass-dark-mode-vars
// scss-docs-start theme-text-dark-variables // // scss-docs-start theme-text-dark-variables
$primary-text-emphasis-dark: tint-color($primary, 40%) !default; // $primary-text-emphasis-dark: tint-color($primary, 40%) !default;
$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default; // $secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
$success-text-emphasis-dark: tint-color($success, 40%) !default; // $success-text-emphasis-dark: tint-color($success, 40%) !default;
$info-text-emphasis-dark: tint-color($info, 40%) !default; // $info-text-emphasis-dark: tint-color($info, 40%) !default;
$warning-text-emphasis-dark: tint-color($warning, 40%) !default; // $warning-text-emphasis-dark: tint-color($warning, 40%) !default;
$danger-text-emphasis-dark: tint-color($danger, 40%) !default; // $danger-text-emphasis-dark: tint-color($danger, 40%) !default;
$light-text-emphasis-dark: $gray-100 !default; // $light-text-emphasis-dark: $gray-100 !default;
$dark-text-emphasis-dark: $gray-300 !default; // $dark-text-emphasis-dark: $gray-300 !default;
// scss-docs-end theme-text-dark-variables // // scss-docs-end theme-text-dark-variables
// scss-docs-start theme-bg-subtle-dark-variables // // scss-docs-start theme-bg-subtle-dark-variables
$primary-bg-subtle-dark: shade-color($primary, 80%) !default; // $primary-bg-subtle-dark: shade-color($primary, 80%) !default;
$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default; // $secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
$success-bg-subtle-dark: shade-color($success, 80%) !default; // $success-bg-subtle-dark: shade-color($success, 80%) !default;
$info-bg-subtle-dark: shade-color($info, 80%) !default; // $info-bg-subtle-dark: shade-color($info, 80%) !default;
$warning-bg-subtle-dark: shade-color($warning, 80%) !default; // $warning-bg-subtle-dark: shade-color($warning, 80%) !default;
$danger-bg-subtle-dark: shade-color($danger, 80%) !default; // $danger-bg-subtle-dark: shade-color($danger, 80%) !default;
$light-bg-subtle-dark: $gray-800 !default; // $light-bg-subtle-dark: $gray-800 !default;
$dark-bg-subtle-dark: mix($gray-800, $black) !default; // $dark-bg-subtle-dark: mix($gray-800, $black) !default;
// scss-docs-end theme-bg-subtle-dark-variables // // scss-docs-end theme-bg-subtle-dark-variables
// scss-docs-start theme-border-subtle-dark-variables // // scss-docs-start theme-border-subtle-dark-variables
$primary-border-subtle-dark: shade-color($primary, 40%) !default; // $primary-border-subtle-dark: shade-color($primary, 40%) !default;
$secondary-border-subtle-dark: shade-color($secondary, 40%) !default; // $secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
$success-border-subtle-dark: shade-color($success, 40%) !default; // $success-border-subtle-dark: shade-color($success, 40%) !default;
$info-border-subtle-dark: shade-color($info, 40%) !default; // $info-border-subtle-dark: shade-color($info, 40%) !default;
$warning-border-subtle-dark: shade-color($warning, 40%) !default; // $warning-border-subtle-dark: shade-color($warning, 40%) !default;
$danger-border-subtle-dark: shade-color($danger, 40%) !default; // $danger-border-subtle-dark: shade-color($danger, 40%) !default;
$light-border-subtle-dark: $gray-700 !default; // $light-border-subtle-dark: $gray-700 !default;
$dark-border-subtle-dark: $gray-800 !default; // $dark-border-subtle-dark: $gray-800 !default;
// scss-docs-end theme-border-subtle-dark-variables // // scss-docs-end theme-border-subtle-dark-variables
$body-color-dark: $gray-300 !default; // $body-color-dark: $gray-300 !default;
$body-bg-dark: $gray-900 !default; // $body-bg-dark: $gray-900 !default;
$body-secondary-color-dark: rgba($body-color-dark, .75) !default; // $body-secondary-color-dark: rgb(var(--#{$prefix}body-color-dark) / .75) !default;
$body-secondary-bg-dark: $gray-800 !default; // $body-secondary-bg-dark: $gray-800 !default;
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default; // $body-tertiary-color-dark: rgb(var(--#{$prefix}body-color-dark) / .5) !default;
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default; // $body-tertiary-bg-dark: color-mix(in srgb, #{$gray-800}, #{$gray-900}, 50%) !default;
$body-emphasis-color-dark: $white !default; // $body-emphasis-color-dark: $white !default;
$border-color-dark: $gray-700 !default; // $border-color-dark: $gray-700 !default;
$border-color-translucent-dark: rgba($white, .15) !default; $border-color-translucent-dark: rgba(var(--#{$prefix}white), .15) !default;
$headings-color-dark: inherit !default; $headings-color-dark: inherit !default;
$link-color-dark: tint-color($primary, 40%) !default; // $link-color-dark: tint-color($primary, 40%) !default;
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default; // $link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
$code-color-dark: tint-color($code-color, 40%) !default; // $code-color-dark: tint-color($code-color, 40%) !default;
$mark-color-dark: $body-color-dark !default; // $mark-color-dark: $body-color !default;
$mark-bg-dark: $yellow-800 !default; // $mark-bg-dark: $yellow-800 !default;
// //
// Forms // Forms
// //
$form-select-indicator-color-dark: $body-color-dark !default; // mdo-do: this was body-color-dark???
$form-select-indicator-color-dark: $body-color !default;
$form-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='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default; $form-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='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
$form-switch-color-dark: rgba($white, .25) !default; $form-switch-color-dark: rgb(var(--#{$prefix}white), .25) !default;
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default; $form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
// scss-docs-start form-validation-colors-dark // scss-docs-start form-validation-colors-dark
@ -79,9 +80,10 @@ $form-invalid-border-color-dark: $red-300 !default;
// Accordion // Accordion
// //
$accordion-icon-color-dark: $primary-text-emphasis-dark !default; $accordion-icon-color-dark: var(--#{$prefix}primary-text) !default;
$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default; $accordion-icon-active-color-dark: var(--#{$prefix}primary-text) !default;
// mdo-do: above css var values break the svg fills here
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default; $accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default; $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
// scss-docs-end sass-dark-mode-vars // scss-docs-end sass-dark-mode-vars

92
scss/_variables.scss
View File

@ -31,38 +31,38 @@ $theme-colors: (
) !default; ) !default;
// scss-docs-end theme-colors-map // scss-docs-end theme-colors-map
// scss-docs-start theme-text-variables // // scss-docs-start theme-text-variables
$primary-text-emphasis: shade-color($primary, 60%) !default; // $primary-text-emphasis: shade-color($primary, 60%) !default;
$secondary-text-emphasis: shade-color($secondary, 60%) !default; // $secondary-text-emphasis: shade-color($secondary, 60%) !default;
$success-text-emphasis: shade-color($success, 60%) !default; // $success-text-emphasis: shade-color($success, 60%) !default;
$info-text-emphasis: shade-color($info, 60%) !default; // $info-text-emphasis: shade-color($info, 60%) !default;
$warning-text-emphasis: shade-color($warning, 60%) !default; // $warning-text-emphasis: shade-color($warning, 60%) !default;
$danger-text-emphasis: shade-color($danger, 60%) !default; // $danger-text-emphasis: shade-color($danger, 60%) !default;
$light-text-emphasis: $gray-700 !default; // $light-text-emphasis: $gray-700 !default;
$dark-text-emphasis: $gray-700 !default; // $dark-text-emphasis: $gray-700 !default;
// scss-docs-end theme-text-variables // // scss-docs-end theme-text-variables
// scss-docs-start theme-bg-subtle-variables // // scss-docs-start theme-bg-subtle-variables
$primary-bg-subtle: tint-color($primary, 80%) !default; // $primary-bg-subtle: tint-color($primary, 80%) !default;
$secondary-bg-subtle: tint-color($secondary, 80%) !default; // $secondary-bg-subtle: tint-color($secondary, 80%) !default;
$success-bg-subtle: tint-color($success, 80%) !default; // $success-bg-subtle: tint-color($success, 80%) !default;
$info-bg-subtle: tint-color($info, 80%) !default; // $info-bg-subtle: tint-color($info, 80%) !default;
$warning-bg-subtle: tint-color($warning, 80%) !default; // $warning-bg-subtle: tint-color($warning, 80%) !default;
$danger-bg-subtle: tint-color($danger, 80%) !default; // $danger-bg-subtle: tint-color($danger, 80%) !default;
$light-bg-subtle: mix($gray-100, $white) !default; // $light-bg-subtle: mix($gray-100, $white) !default;
$dark-bg-subtle: $gray-400 !default; // $dark-bg-subtle: $gray-400 !default;
// scss-docs-end theme-bg-subtle-variables // // scss-docs-end theme-bg-subtle-variables
// scss-docs-start theme-border-subtle-variables // // scss-docs-start theme-border-subtle-variables
$primary-border-subtle: tint-color($primary, 60%) !default; // $primary-border-subtle: tint-color($primary, 60%) !default;
$secondary-border-subtle: tint-color($secondary, 60%) !default; // $secondary-border-subtle: tint-color($secondary, 60%) !default;
$success-border-subtle: tint-color($success, 60%) !default; // $success-border-subtle: tint-color($success, 60%) !default;
$info-border-subtle: tint-color($info, 60%) !default; // $info-border-subtle: tint-color($info, 60%) !default;
$warning-border-subtle: tint-color($warning, 60%) !default; // $warning-border-subtle: tint-color($warning, 60%) !default;
$danger-border-subtle: tint-color($danger, 60%) !default; // $danger-border-subtle: tint-color($danger, 60%) !default;
$light-border-subtle: $gray-200 !default; // $light-border-subtle: $gray-200 !default;
$dark-border-subtle: $gray-500 !default; // $dark-border-subtle: $gray-500 !default;
// scss-docs-end theme-border-subtle-variables // // scss-docs-end theme-border-subtle-variables
// Characters which are escaped by the escape-svg function // Characters which are escaped by the escape-svg function
$escaped-characters: ( $escaped-characters: (
@ -145,25 +145,25 @@ $position-values: (
// Settings for the `<body>` element. // Settings for the `<body>` element.
$body-text-align: null !default; $body-text-align: null !default;
$body-color: $gray-900 !default; $body-color: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-300)) !default;
$body-bg: $white !default; $body-bg: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900)) !default;
$body-secondary-color: rgba($body-color, .75) !default; $body-secondary-color: rgb(var(--#{$prefix}body-color) / .75) !default;
$body-secondary-bg: $gray-200 !default; $body-secondary-bg: light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-800)) !default;
$body-tertiary-color: rgba($body-color, .5) !default; $body-tertiary-color: rgb(var(--#{$prefix}body-color) / .5) !default;
$body-tertiary-bg: $gray-100 !default; $body-tertiary-bg: light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)) !default;
$body-emphasis-color: $black !default; $body-emphasis-color: light-dark($black, $white) !default;
// Links // Links
// //
// Style anchor elements. // Style anchor elements.
$link-color: $primary !default; $link-color: var(--#{$prefix}primary-text) !default;
$link-decoration: underline !default; $link-decoration: underline !default;
$link-shade-percentage: 20% !default; $link-shade-percentage: 20% !default;
$link-hover-color: shift-color($link-color, $link-shade-percentage) !default; $link-hover-color: color-mix(in srgb, #{$link-color}, $black #{$link-shade-percentage}) !default;
$link-hover-decoration: null !default; $link-hover-decoration: null !default;
$stretched-link-pseudo-element: after !default; $stretched-link-pseudo-element: after !default;
@ -249,7 +249,7 @@ $border-widths: (
5: 5px 5: 5px
) !default; ) !default;
$border-style: solid !default; $border-style: solid !default;
$border-color: $gray-300 !default; $border-color: light-dark($gray-300, $gray-700) !default;
$border-color-translucent: rgba($black, .175) !default; $border-color-translucent: rgba($black, .175) !default;
// scss-docs-end border-variables // scss-docs-end border-variables
@ -428,7 +428,7 @@ $list-inline-padding: .5rem !default;
$mark-padding: .1875em !default; $mark-padding: .1875em !default;
$mark-color: $body-color !default; $mark-color: $body-color !default;
$mark-bg: $yellow-100 !default; $mark-bg: light-dark($yellow-100, $yellow-900) !default;
// scss-docs-end type-variables // scss-docs-end type-variables
@ -552,7 +552,7 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
$btn-link-color: var(--#{$prefix}link-color) !default; $btn-link-color: var(--#{$prefix}link-color) !default;
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default; $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
$btn-link-disabled-color: $gray-600 !default; $btn-link-disabled-color: $gray-600 !default;
$btn-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default; // $btn-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
// Allows for customizing button radius independently from global border radius // Allows for customizing button radius independently from global border radius
$btn-border-radius: var(--#{$prefix}border-radius) !default; $btn-border-radius: var(--#{$prefix}border-radius) !default;
@ -919,7 +919,7 @@ $navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .6
$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default; $navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default; $navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default; $navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
$navbar-light-icon-color: rgba($body-color, .75) !default; $navbar-light-icon-color: rgb(var(--#{$prefix}body-color), .75) !default;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default; $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default; $navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
$navbar-light-brand-color: $navbar-light-active-color !default; $navbar-light-brand-color: $navbar-light-active-color !default;
@ -1090,7 +1090,7 @@ $accordion-button-color: var(--#{$prefix}body-color) !default;
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default; $accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
$accordion-transition: $btn-transition, border-radius .15s ease !default; $accordion-transition: $btn-transition, border-radius .15s ease !default;
$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default; $accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default; $accordion-button-active-color: var(--#{$prefix}primary-text) !default;
// fusv-disable // fusv-disable
$accordion-button-focus-border-color: $input-focus-border-color !default; // Deprecated in v5.3.3 $accordion-button-focus-border-color: $input-focus-border-color !default; // Deprecated in v5.3.3
@ -1098,8 +1098,8 @@ $accordion-button-focus-border-color: $input-focus-border-color !default; //
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default; $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default; $accordion-icon-width: 1.25rem !default;
$accordion-icon-color: $body-color !default; $accordion-icon-color: var(--#{$prefix}body-color) !default;
$accordion-icon-active-color: $primary-text-emphasis !default; $accordion-icon-active-color: var(--#{$prefix}primary-text-emphasis) !default;
$accordion-icon-transition: transform .2s ease-in-out !default; $accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default; $accordion-icon-transform: rotate(-180deg) !default;

26
scss/content/_reboot.scss
View File

@ -96,32 +96,38 @@
color: var(--#{$prefix}heading-color); color: var(--#{$prefix}heading-color);
} }
h1 { h1,
.h1 {
@extend %heading; @extend %heading;
@include font-size($h1-font-size); @include font-size($h1-font-size);
} }
h2 { h2,
.h2 {
@extend %heading; @extend %heading;
@include font-size($h2-font-size); @include font-size($h2-font-size);
} }
h3 { h3,
.h3 {
@extend %heading; @extend %heading;
@include font-size($h3-font-size); @include font-size($h3-font-size);
} }
h4 { h4,
.h4 {
@extend %heading; @extend %heading;
@include font-size($h4-font-size); @include font-size($h4-font-size);
} }
h5 { h5,
.h5 {
@extend %heading; @extend %heading;
@include font-size($h5-font-size); @include font-size($h5-font-size);
} }
h6 { h6,
.h6 {
@extend %heading; @extend %heading;
@include font-size($h6-font-size); @include font-size($h6-font-size);
} }
@ -214,14 +220,14 @@
// //
// Add the correct font size in all browsers // Add the correct font size in all browsers
small { small, .small {
@include font-size($small-font-size); @include font-size($small-font-size);
} }
// Mark // Mark
mark { mark, .mark {
padding: $mark-padding; padding: $mark-padding;
color: var(--#{$prefix}highlight-color); color: var(--#{$prefix}highlight-color);
background-color: var(--#{$prefix}highlight-bg); background-color: var(--#{$prefix}highlight-bg);
@ -248,11 +254,11 @@
// Links // Links
a { a {
color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1)); color: var(--#{$prefix}link-color);
text-decoration: $link-decoration; text-decoration: $link-decoration;
&:hover { &:hover {
--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb); --#{$prefix}link-color: var(--#{$prefix}link-hover-color);
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
} }
} }

11
scss/content/_tables.scss
View File

@ -9,11 +9,12 @@
// scss-docs-start table-variant // scss-docs-start table-variant
@mixin table-variant($state, $background) { @mixin table-variant($state, $background) {
.table-#{$state} { .table-#{$state} {
$color: color-contrast(opaque($body-bg, $background)); // mdo-do
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); $color: $body-color;
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); $hover-bg: color-mix(in srgb, #{$color}, #{$background percentage($table-hover-bg-factor)});
$active-bg: mix($color, $background, percentage($table-active-bg-factor)); $striped-bg: color-mix(in srgb, #{$color}, #{$background percentage($table-striped-bg-factor)});
$table-border-color: mix($color, $background, percentage($table-border-factor)); $active-bg: color-mix(in srgb, #{$color}, #{$background percentage($table-active-bg-factor)});
$table-border-color: color-mix(in srgb, #{$color}, #{$background percentage($table-border-factor)});
--#{$prefix}table-color: #{$color}; --#{$prefix}table-color: #{$color};
--#{$prefix}table-bg: #{$background}; --#{$prefix}table-bg: #{$background};

12
scss/content/_type.scss
View File

@ -52,13 +52,13 @@
// //
// Emphasis // Emphasis
// //
.small { // .small {
// @extend small; // @extend small;
} // }
.mark { // .mark {
// @extend mark; // @extend mark;
} // }
// //
// Lists // Lists

16
scss/helpers/_colored-links.scss
View File

@ -6,15 +6,15 @@
@layer helpers { @layer helpers {
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
.link-#{$color} { .link-#{$color} {
color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-underline-opacity));
@if $link-shade-percentage != 0 { @if $link-shade-percentage != 0 {
&:hover, &:hover,
&:focus { &:focus {
$hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
} }
} }
} }
@ -22,14 +22,14 @@
// One-off special link helper as a bridge until v6 // One-off special link helper as a bridge until v6
.link-body-emphasis { .link-body-emphasis {
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity));
text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity));
@if $link-shade-percentage != 0 { @if $link-shade-percentage != 0 {
&:hover, &:hover,
&:focus { &:focus {
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null); color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity, .75));
text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null); text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity, .75));
} }
} }
} }

2
scss/helpers/_icon-link.scss
View File

@ -7,7 +7,7 @@
display: inline-flex; display: inline-flex;
gap: $icon-link-gap; gap: $icon-link-gap;
align-items: center; align-items: center;
text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5)); text-decoration-color: color-mix(var(--#{$prefix}link-color), transparent var(--#{$prefix}link-opacity));
text-underline-offset: $icon-link-underline-offset; text-underline-offset: $icon-link-underline-offset;
backface-visibility: hidden; backface-visibility: hidden;

2
scss/layout/_breakpoints.scss
View File

@ -51,7 +51,7 @@
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px)) // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px))
// "-sm" // "-sm"
@function breakpoint-infix($name, $breakpoints: $breakpoints) { @function breakpoint-infix($name, $breakpoints: $breakpoints) {
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); @return if(breakpoint-min($name, $breakpoints) == null, "", "#{$name}");
} }
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint. // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.

2
scss/layout/_containers.scss
View File

@ -41,7 +41,7 @@
@each $name, $width in $breakpoints { @each $name, $width in $breakpoints {
@if ($extend-breakpoint) { @if ($extend-breakpoint) {
.container#{breakpoint-infix($name, $breakpoints)} { .container-#{breakpoint-infix($name, $breakpoints)} {
@extend %responsive-container-#{$breakpoint}; @extend %responsive-container-#{$breakpoint};
} }

154
scss/mixins/_utilities.scss
View File

@ -2,15 +2,38 @@
@use "../config" as *; @use "../config" as *;
// Utility generator // 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 // - Utilities can three different types of selectors:
@if type-of($values) == "string" or type-of(nth($values, 1)) != "list" { // - class: .class
$values: zip($values, $values); // - attr-starts: [class^="class"]
// - attr-includes: [class*="class"]
// - Utilities can generate a regular CSS property or a CSS custom property
// - Utilities can be responsive or not
// - Utilities can have a state (e.g., :hover, :focus, :active, etc.)
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
// 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 type-of($values) != "map" {
@if 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
$infix: if($infix == "", "", "-" + $infix);
@each $key, $value in $values { @each $key, $value in $values {
$properties: map.get($utility, property); $properties: map.get($utility, property);
@ -19,20 +42,21 @@
$properties: append((), $properties); $properties: append((), $properties);
} }
// Use custom class if present // Use custom class if present, otherwise use the first value from the list of properties
$property-class: if(map.has-key($utility, class), map.get($utility, class), nth($properties, 1)); $customClass: if(map.has-key($utility, class), map.get($utility, class), nth($properties, 1));
$property-class: if($property-class == null, "", $property-class); $customClass: if($customClass == null, "", $customClass);
// Use custom CSS variable name if present, otherwise default to `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)); // 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 pseudo-classes // State params to generate pseudo-classes
$state: if(map.has-key($utility, state), map.get($utility, state), ()); $state: if(map.has-key($utility, state), map.get($utility, state), ());
$infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix); // $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) // Don't prefix if value key is null (e.g. with shadow class)
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, ""); $customClassModifier: if($key, if($customClass == "" and $infix == "", "", "-") + $key, "");
@if map.get($utility, rfs) { @if map.get($utility, rfs) {
// Inside the media query // Inside the media query
@ -49,52 +73,76 @@
$is-css-var: map.get($utility, css-var); $is-css-var: map.get($utility, css-var);
$is-local-vars: map.get($utility, local-vars); $is-local-vars: map.get($utility, local-vars);
$is-rtl: map.get($utility, rtl); // $is-rtl: map.get($utility, rtl);
@if $value != null { $selector: "";
@if $is-rtl == false { @if $selectorType == "class" {
/* rtl:begin:remove */ // Use the fallback of the first property if no `class` key is used
} @if $customClass != "" {
$selector: ".#{$customClass + $infix + $customClassModifier}";
@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};
}
}
} @else { } @else {
.#{$property-class + $infix + $property-class-modifier} { $selector: ".#{$selectorClass + $infix + $customClassModifier}";
@each $property in $properties {
@if $is-local-vars {
@each $local-var, $variable in $is-local-vars {
--#{$prefix}#{$local-var}: #{$variable};
}
}
#{$property}: $value;
}
}
@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;
}
}
}
} }
} @else if $selectorType == "attr-starts" {
$selector: "[class^=\"#{$selectorClass}\"]";
} @else if $selectorType == "attr-includes" {
$selector: "[class*=\"#{$selectorClass}\"]";
}
@if $is-rtl == false { // @debug $utility;
/* rtl:end:remove */ // @debug $selectorType;
// @debug $selector;
// @debug $properties;
// @debug $values;
#{$selector} {
@each $property in $properties {
#{$property}: $value;
} }
} }
// @if $value != null {
// #{$selector} {
// @each $property in $properties {
// #{$property}: $value;
// }
// }
// @if $is-css-var {
// #{$selector} {
// --#{$prefix}#{$css-variable-name}: #{$value};
// }
// @each $pseudo in $state {
// #{$selector}-#{$pseudo}:#{$pseudo} {
// --#{$prefix}#{$css-variable-name}: #{$value};
// }
// }
// } @else {
// #{$selector} {
// @each $property in $properties {
// // @if $is-local-vars {
// // @each $local-var, $variable in $is-local-vars {
// // --#{$prefix}#{$local-var}: #{$variable};
// // }
// // }
// #{$property}: $value;
// }
// }
// // @each $pseudo in $state {
// // #{$selector}-#{$pseudo}:#{$pseudo} {
// // @each $property in $properties {
// // @if $is-local-vars {
// // @each $local-var, $variable in $is-local-vars {
// // --#{$prefix}#{$local-var}: #{$variable};
// // }
// // }
// // #{$property}: $value;
// // }
// // }
// // }
// }
// }
} }
} }

7
site/src/components/shortcodes/Example.astro
View File

@ -17,6 +17,10 @@ interface Props {
* The CSS class(es) to be added to the preview wrapping `div` element. * The CSS class(es) to be added to the preview wrapping `div` element.
*/ */
class?: string class?: string
/**
* The CSS style(s) to be added to the preview wrapping `div` element.
*/
style?: string
/** /**
* The preview wrapping `div` element ID. * The preview wrapping `div` element ID.
*/ */
@ -42,6 +46,7 @@ const {
addStackblitzJs = false, addStackblitzJs = false,
code, code,
class: className, class: className,
style,
id, id,
lang = 'html', lang = 'html',
showMarkup = true, showMarkup = true,
@ -67,7 +72,7 @@ const simplifiedMarkup = markup
<Code code={simplifiedMarkup} containerClass="bd-example-snippet" lang={lang}> <Code code={simplifiedMarkup} containerClass="bd-example-snippet" lang={lang}>
{showPreview && ( {showPreview && (
<Fragment slot="pre"> <Fragment slot="pre">
<div id={id} class:list={['bd-example', className]}> <div id={id} class:list={['bd-example', className]} style={style}>
<Fragment set:html={markup} /> <Fragment set:html={markup} />
</div> </div>
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">

8
site/src/content/docs/components/buttons.mdx
View File

@ -22,7 +22,7 @@ If you are using the `.btn` class on its own, remember to at least define some e
Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control. Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.
<Example code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn btn-${themeColor.name}">${themeColor.title}</button>`), ` <Example class="grid gap-2" style="--bs-columns: 4;" code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn btn-${themeColor.name}-solid">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-outline">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-subtle">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-text">${themeColor.title}</button>`), `
<button type="button" class="btn btn-link">Link</button>`]} /> <button type="button" class="btn btn-link">Link</button>`]} />
<Callout name="warning-color-assistive-technologies" /> <Callout name="warning-color-assistive-technologies" />
@ -214,11 +214,11 @@ Here's an example of building a custom `.btn-*` modifier class as we do for the
There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin. There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin.
<ScssDocs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" /> {/* <ScssDocs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" /> */}
<ScssDocs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" /> {/* <ScssDocs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" /> */}
<ScssDocs name="btn-size-mixin" file="scss/mixins/_buttons.scss" /> {/* <ScssDocs name="btn-size-mixin" file="scss/mixins/_buttons.scss" /> */}
### Sass loops ### Sass loops

4
site/src/content/docs/customize/color.mdx
View File

@ -381,7 +381,7 @@ We use a subset of all colors to create a smaller color palette for generating c
All these colors are available as a Sass map, `$theme-colors`. All these colors are available as a Sass map, `$theme-colors`.
<ScssDocs name="theme-colors-map" file="scss/_variables.scss" /> {/* <ScssDocs name="theme-colors-map" file="scss/_variables.scss" /> */}
Check out [our Sass maps and loops docs]([[docsref:/customize/sass#maps-and-loops]]) for how to modify these colors. Check out [our Sass maps and loops docs]([[docsref:/customize/sass#maps-and-loops]]) for how to modify these colors.
@ -450,7 +450,7 @@ Bootstrap's source Sass files include three maps to help you quickly and easily
Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map: Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map:
<ScssDocs name="colors-map" file="scss/_variables.scss" /> {/* <ScssDocs name="colors-map" file="scss/_variables.scss" /> */}
Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map. Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.

28
site/src/content/docs/utilities/background.mdx
View File

@ -82,45 +82,45 @@ In addition to the following Sass functionality, consider reading about our incl
Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables. Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
<ScssDocs name="color-variables" file="scss/_variables.scss" /> {/* <ScssDocs name="color-variables" file="scss/_variables.scss" /> */}
<ScssDocs name="theme-color-variables" file="scss/_variables.scss" /> {/* <ScssDocs name="theme-color-variables" file="scss/_variables.scss" /> */}
<ScssDocs name="variable-gradient" file="scss/_variables.scss" /> {/* <ScssDocs name="variable-gradient" file="scss/_variables.scss" /> */}
Grayscale colors are also available, but only a subset are used to generate any utilities. Grayscale colors are also available, but only a subset are used to generate any utilities.
<ScssDocs name="gray-color-variables" file="scss/_variables.scss" /> {/* <ScssDocs name="gray-color-variables" file="scss/_variables.scss" /> */}
Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode: Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode:
<ScssDocs name="theme-bg-subtle-variables" file="scss/_variables.scss" /> {/* <ScssDocs name="theme-bg-subtle-variables" file="scss/_variables.scss" /> */}
<ScssDocs name="theme-bg-subtle-dark-variables" file="scss/_variables-dark.scss" /> {/* <ScssDocs name="theme-bg-subtle-dark-variables" file="scss/_variables-dark.scss" /> */}
### Sass maps ### Sass maps
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more. Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
<ScssDocs name="theme-colors-map" file="scss/_variables.scss" /> {/* <ScssDocs name="theme-colors-map" file="scss/_variables.scss" /> */}
Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**
<ScssDocs name="gray-colors-map" file="scss/_variables.scss" /> {/* <ScssDocs name="gray-colors-map" file="scss/_variables.scss" /> */}
RGB colors are generated from a separate Sass map: RGB colors are generated from a separate Sass map:
<ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" /> {/* <ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" /> */}
Background color opacities build on that with their own map that's consumed by the utilities API: Background color opacities build on that with their own map that's consumed by the utilities API:
<ScssDocs name="utilities-bg-colors" file="scss/_maps.scss" /> {/* <ScssDocs name="utilities-bg-colors" file="scss/_maps.scss" /> */}
Color mode background colors are also available as a Sass map: Color mode background colors are also available as a Sass map:
<ScssDocs name="theme-bg-subtle-map" file="scss/_maps.scss" /> {/* <ScssDocs name="theme-bg-subtle-map" file="scss/_maps.scss" /> */}
<ScssDocs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" /> {/* <ScssDocs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" /> */}
### Sass mixins ### Sass mixins
@ -128,10 +128,10 @@ Color mode background colors are also available as a Sass map:
<ScssDocs name="gradient-bg-mixin" file="scss/mixins/_gradients.scss" /> <ScssDocs name="gradient-bg-mixin" file="scss/mixins/_gradients.scss" />
<ScssDocs name="gradient-mixins" file="scss/mixins/_gradients.scss" /> {/* <ScssDocs name="gradient-mixins" file="scss/mixins/_gradients.scss" /> */}
### Sass utilities API ### Sass utilities API
Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]]) Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
<ScssDocs name="utils-bg-color" file="scss/_utilities.scss" /> {/* <ScssDocs name="utils-bg-color" file="scss/_utilities.scss" /> */}

24
site/src/content/docs/utilities/colors.mdx
View File

@ -84,45 +84,45 @@ In addition to the following Sass functionality, consider reading about our incl
Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables. Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
<ScssDocs name="color-variables" file="scss/_variables.scss" /> {/* <ScssDocs name="color-variables" file="scss/_variables.scss" /> */}
<ScssDocs name="theme-color-variables" file="scss/_variables.scss" /> {/* <ScssDocs name="theme-color-variables" file="scss/_variables.scss" /> */}
Grayscale colors are also available, but only a subset are used to generate any utilities. Grayscale colors are also available, but only a subset are used to generate any utilities.
<ScssDocs name="gray-color-variables" file="scss/_variables.scss" /> {/* <ScssDocs name="gray-color-variables" file="scss/_variables.scss" /> */}
<ScssDocs name="theme-text-map" file="scss/_maps.scss" /> {/* <ScssDocs name="theme-text-map" file="scss/_maps.scss" /> */}
Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode: Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode:
<ScssDocs name="theme-text-variables" file="scss/_variables.scss" /> {/* <ScssDocs name="theme-text-variables" file="scss/_variables.scss" /> */}
<ScssDocs name="theme-text-dark-variables" file="scss/_variables-dark.scss" /> {/* <ScssDocs name="theme-text-dark-variables" file="scss/_variables-dark.scss" /> */}
### Sass maps ### Sass maps
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more. Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
<ScssDocs name="theme-colors-map" file="scss/_variables.scss" /> {/* <ScssDocs name="theme-colors-map" file="scss/_variables.scss" /> */}
Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**
<ScssDocs name="gray-colors-map" file="scss/_variables.scss" /> {/* <ScssDocs name="gray-colors-map" file="scss/_variables.scss" /> */}
RGB colors are generated from a separate Sass map: RGB colors are generated from a separate Sass map:
<ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" /> {/* <ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" /> */}
Color opacities build on that with their own map that's consumed by the utilities API: Color opacities build on that with their own map that's consumed by the utilities API:
<ScssDocs name="utilities-text-colors" file="scss/_maps.scss" /> {/* <ScssDocs name="utilities-text-colors" file="scss/_maps.scss" /> */}
Color mode adaptive text colors are also available as a Sass map: Color mode adaptive text colors are also available as a Sass map:
<ScssDocs name="theme-text-map" file="scss/_maps.scss" /> {/* <ScssDocs name="theme-text-map" file="scss/_maps.scss" /> */}
<ScssDocs name="theme-text-dark-map" file="scss/_maps.scss" /> {/* <ScssDocs name="theme-text-dark-map" file="scss/_maps.scss" /> */}
### Sass utilities API ### Sass utilities API