@use "mixins/transition" 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
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// 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 {
// scss-docs-start btn-variant-mixin
- @mixin button-variant(
- $background,
- $border,
- $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-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),
- $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-color: color-contrast($active-background),
- $disabled-background: $background,
- $disabled-border: $border,
- $disabled-color: color-contrast($disabled-background)
- ) {
- --#{$prefix}btn-color: #{$color};
- --#{$prefix}btn-bg: #{$background};
- --#{$prefix}btn-border-color: #{$border};
- --#{$prefix}btn-hover-color: #{$hover-color};
- --#{$prefix}btn-hover-bg: #{$hover-background};
- --#{$prefix}btn-hover-border-color: #{$hover-border};
- --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
- --#{$prefix}btn-active-color: #{$active-color};
- --#{$prefix}btn-active-bg: #{$active-background};
- --#{$prefix}btn-active-border-color: #{$active-border};
- --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
- --#{$prefix}btn-disabled-color: #{$disabled-color};
- --#{$prefix}btn-disabled-bg: #{$disabled-background};
- --#{$prefix}btn-disabled-border-color: #{$disabled-border};
- }
+ // @mixin button-variant(
+ // $background,
+ // $border,
+ // $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-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),
+ // $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-color: color-contrast($active-background),
+ // $disabled-background: $background,
+ // $disabled-border: $border,
+ // $disabled-color: color-contrast($disabled-background)
+ // ) {
+ // --#{$prefix}btn-color: #{$color};
+ // --#{$prefix}btn-bg: #{$background};
+ // --#{$prefix}btn-border-color: #{$border};
+ // --#{$prefix}btn-hover-color: #{$hover-color};
+ // --#{$prefix}btn-hover-bg: #{$hover-background};
+ // --#{$prefix}btn-hover-border-color: #{$hover-border};
+ // --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+ // --#{$prefix}btn-active-color: #{$active-color};
+ // --#{$prefix}btn-active-bg: #{$active-background};
+ // --#{$prefix}btn-active-border-color: #{$active-border};
+ // --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+ // --#{$prefix}btn-disabled-color: #{$disabled-color};
+ // --#{$prefix}btn-disabled-bg: #{$disabled-background};
+ // --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+ // }
// scss-docs-end btn-variant-mixin
// scss-docs-start btn-outline-variant-mixin
- @mixin button-outline-variant(
- $color,
- $color-hover: color-contrast($color),
- $active-background: $color,
- $active-border: $color,
- $active-color: color-contrast($active-background)
- ) {
- --#{$prefix}btn-color: #{$color};
- --#{$prefix}btn-border-color: #{$color};
- --#{$prefix}btn-hover-color: #{$color-hover};
- --#{$prefix}btn-hover-bg: #{$active-background};
- --#{$prefix}btn-hover-border-color: #{$active-border};
- --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
- --#{$prefix}btn-active-color: #{$active-color};
- --#{$prefix}btn-active-bg: #{$active-background};
- --#{$prefix}btn-active-border-color: #{$active-border};
- --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
- --#{$prefix}btn-disabled-color: #{$color};
- --#{$prefix}btn-disabled-bg: transparent;
- --#{$prefix}btn-disabled-border-color: #{$color};
- --#{$prefix}gradient: none;
- }
+ // @mixin button-outline-variant(
+ // $color,
+ // $color-hover: color-contrast($color),
+ // $active-background: $color,
+ // $active-border: $color,
+ // $active-color: color-contrast($active-background)
+ // ) {
+ // --#{$prefix}btn-color: #{$color};
+ // --#{$prefix}btn-border-color: #{$color};
+ // --#{$prefix}btn-hover-color: #{$color-hover};
+ // --#{$prefix}btn-hover-bg: #{$active-background};
+ // --#{$prefix}btn-hover-border-color: #{$active-border};
+ // --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+ // --#{$prefix}btn-active-color: #{$active-color};
+ // --#{$prefix}btn-active-bg: #{$active-background};
+ // --#{$prefix}btn-active-border-color: #{$active-border};
+ // --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+ // --#{$prefix}btn-disabled-color: #{$color};
+ // --#{$prefix}btn-disabled-bg: transparent;
+ // --#{$prefix}btn-disabled-border-color: #{$color};
+ // --#{$prefix}gradient: none;
+ // }
// scss-docs-end btn-outline-variant-mixin
// scss-docs-start btn-size-mixin
--#{$prefix}btn-border-width: #{$btn-border-width};
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius};
+ --#{$prefix}btn-hover-color: var(--#{$prefix}btn-color);
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
&.show {
color: var(--#{$prefix}btn-active-color);
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);
border-color: var(--#{$prefix}btn-active-border-color);
@include box-shadow(var(--#{$prefix}btn-active-shadow));
//
// scss-docs-start btn-variant-loops
- @each $color, $value in $theme-colors {
- .btn-#{$color} {
- @if $color == "light" {
- @include button-variant(
- $value,
- $value,
- $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
- $hover-border: shade-color($value, $btn-hover-border-shade-amount),
- $active-background: shade-color($value, $btn-active-bg-shade-amount),
- $active-border: shade-color($value, $btn-active-border-shade-amount)
- );
- } @else if $color == "dark" {
- @include button-variant(
- $value,
- $value,
- $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
- $hover-border: tint-color($value, $btn-hover-border-tint-amount),
- $active-background: tint-color($value, $btn-active-bg-tint-amount),
- $active-border: tint-color($value, $btn-active-border-tint-amount)
- );
- } @else {
- @include button-variant($value, $value);
- }
- }
- }
-
- @each $color, $value in $theme-colors {
- .btn-outline-#{$color} {
- @include button-outline-variant($value);
- }
- }
+ // @each $color, $value in $theme-colors {
+ // .btn-#{$color} {
+ // @if $color == "light" {
+ // @include button-variant(
+ // $value,
+ // $value,
+ // $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+ // $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+ // $active-background: shade-color($value, $btn-active-bg-shade-amount),
+ // $active-border: shade-color($value, $btn-active-border-shade-amount)
+ // );
+ // } @else if $color == "dark" {
+ // @include button-variant(
+ // $value,
+ // $value,
+ // $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
+ // $hover-border: tint-color($value, $btn-hover-border-tint-amount),
+ // $active-background: tint-color($value, $btn-active-bg-tint-amount),
+ // $active-border: tint-color($value, $btn-active-border-tint-amount)
+ // );
+ // } @else {
+ // @include button-variant($value, $value);
+ // }
+ // }
+ // }
+
+ // @each $color, $value in $theme-colors {
+ // .btn-outline-#{$color} {
+ // @include button-outline-variant($value);
+ // }
+ // }
// scss-docs-end btn-variant-loops
--#{$prefix}btn-active-border-color: transparent;
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
--#{$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-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
+ --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can"t use `none` as keyword negates all values when used with multiple shadows
+ // mdo-do
+ // --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
text-decoration: $link-decoration;
@if $enable-gradients {
@return $string;
}
-// Color contrast
-// 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)
-// 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;
-
-@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;
- $max-ratio: 0;
- $max-ratio-color: null;
-
- @each $color in $foregrounds {
- $contrast-ratio: contrast-ratio($background, $color);
- @if $contrast-ratio > $min-contrast-ratio {
- @return $color;
- } @else if $contrast-ratio > $max-ratio {
- $max-ratio: $contrast-ratio;
- $max-ratio-color: $color;
- }
- }
+// // Color contrast
+// // See https://github.com/twbs/bootstrap/pull/30168
- @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+// // 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
+// $_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;
- @return $max-ratio-color;
-}
+// @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;
+// $max-ratio: 0;
+// $max-ratio-color: null;
-@function contrast-ratio($background, $foreground: $color-contrast-light) {
- $l1: luminance($background);
- $l2: luminance(opaque($background, $foreground));
+// @each $color in $foregrounds {
+// $contrast-ratio: contrast-ratio($background, $color);
+// @if $contrast-ratio > $min-contrast-ratio {
+// @return $color;
+// } @else if $contrast-ratio > $max-ratio {
+// $max-ratio: $contrast-ratio;
+// $max-ratio-color: $color;
+// }
+// }
- @return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05));
-}
+// @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+
+// @return $max-ratio-color;
+// }
+
+// @function contrast-ratio($background, $foreground: $color-contrast-light) {
+// $l1: luminance($background);
+// $l2: luminance(opaque($background, $foreground));
+
+// @return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05));
+// }
// Return WCAG2.2 relative luminance
// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
-@function luminance($color) {
- $rgb: (
- "r": red($color),
- "g": green($color),
- "b": blue($color)
- );
-
- @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));
- $rgb: map-merge($rgb, ($name: $value));
- }
+// @function luminance($color) {
+// $rgb: (
+// "r": red($color),
+// "g": green($color),
+// "b": blue($color)
+// );
- @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
-}
+// @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));
+// $rgb: map-merge($rgb, ($name: $value));
+// }
+
+// @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+// }
// Return opaque color
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
-@function opaque($background, $foreground) {
- @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
-}
+// @function opaque($background, $foreground) {
+// @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+// }
// scss-docs-start color-functions
-// Tint a color: mix a color with white
-@function tint-color($color, $weight) {
- @return mix(white, $color, $weight);
-}
-
-// Shade a color: mix a color with black
-@function shade-color($color, $weight) {
- @return mix(black, $color, $weight);
-}
-
-// Shade the color if the weight is positive, else tint it
-@function shift-color($color, $weight) {
- @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
-}
+// // Tint a color: mix a color with white
+// @function tint-color($color, $weight) {
+// @return mix(white, $color, $weight);
+// }
+
+// // Shade a color: mix a color with black
+// @function shade-color($color, $weight) {
+// @return mix(black, $color, $weight);
+// }
+
+// // Shade the color if the weight is positive, else tint it
+// @function shift-color($color, $weight) {
+// @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+// }
// scss-docs-end color-functions
// 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
-$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-start theme-text-map
-$theme-colors-text: (
- "primary": $primary-text-emphasis,
- "secondary": $secondary-text-emphasis,
- "success": $success-text-emphasis,
- "info": $info-text-emphasis,
- "warning": $warning-text-emphasis,
- "danger": $danger-text-emphasis,
- "light": $light-text-emphasis,
- "dark": $dark-text-emphasis,
-) !default;
-// scss-docs-end theme-text-map
-
-// scss-docs-start theme-bg-subtle-map
-$theme-colors-bg-subtle: (
- "primary": $primary-bg-subtle,
- "secondary": $secondary-bg-subtle,
- "success": $success-bg-subtle,
- "info": $info-bg-subtle,
- "warning": $warning-bg-subtle,
- "danger": $danger-bg-subtle,
- "light": $light-bg-subtle,
- "dark": $dark-bg-subtle,
-) !default;
-// scss-docs-end theme-bg-subtle-map
-
-// scss-docs-start theme-border-subtle-map
-$theme-colors-border-subtle: (
- "primary": $primary-border-subtle,
- "secondary": $secondary-border-subtle,
- "success": $success-border-subtle,
- "info": $info-border-subtle,
- "warning": $warning-border-subtle,
- "danger": $danger-border-subtle,
- "light": $light-border-subtle,
- "dark": $dark-border-subtle,
-) !default;
-// scss-docs-end theme-border-subtle-map
-
-$theme-colors-text-dark: null !default;
-$theme-colors-bg-subtle-dark: null !default;
-$theme-colors-border-subtle-dark: null !default;
-
-@if $enable-dark-mode {
- // scss-docs-start theme-text-dark-map
- $theme-colors-text-dark: (
- "primary": $primary-text-emphasis-dark,
- "secondary": $secondary-text-emphasis-dark,
- "success": $success-text-emphasis-dark,
- "info": $info-text-emphasis-dark,
- "warning": $warning-text-emphasis-dark,
- "danger": $danger-text-emphasis-dark,
- "light": $light-text-emphasis-dark,
- "dark": $dark-text-emphasis-dark,
- ) !default;
- // scss-docs-end theme-text-dark-map
-
- // scss-docs-start theme-bg-subtle-dark-map
- $theme-colors-bg-subtle-dark: (
- "primary": $primary-bg-subtle-dark,
- "secondary": $secondary-bg-subtle-dark,
- "success": $success-bg-subtle-dark,
- "info": $info-bg-subtle-dark,
- "warning": $warning-bg-subtle-dark,
- "danger": $danger-bg-subtle-dark,
- "light": $light-bg-subtle-dark,
- "dark": $dark-bg-subtle-dark,
- ) !default;
- // scss-docs-end theme-bg-subtle-dark-map
-
- // scss-docs-start theme-border-subtle-dark-map
- $theme-colors-border-subtle-dark: (
- "primary": $primary-border-subtle-dark,
- "secondary": $secondary-border-subtle-dark,
- "success": $success-border-subtle-dark,
- "info": $info-border-subtle-dark,
- "warning": $warning-border-subtle-dark,
- "danger": $danger-border-subtle-dark,
- "light": $light-border-subtle-dark,
- "dark": $dark-border-subtle-dark,
- ) !default;
- // scss-docs-end theme-border-subtle-dark-map
-}
-
-// Utilities maps
-//
-// 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.
-// scss-docs-start utilities-colors
-$utilities-colors: $theme-colors-rgb !default;
-// scss-docs-end utilities-colors
-
-// scss-docs-start utilities-text-colors
-$utilities-text: map.merge(
- $utilities-colors,
- (
- "black": to-rgb($black),
- "white": to-rgb($white),
- "body": to-rgb($body-color)
- )
-) !default;
-$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
-
-$utilities-text-emphasis-colors: (
- "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
- "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
- "success-emphasis": var(--#{$prefix}success-text-emphasis),
- "info-emphasis": var(--#{$prefix}info-text-emphasis),
- "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
- "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
- "light-emphasis": var(--#{$prefix}light-text-emphasis),
- "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
-) !default;
-// scss-docs-end utilities-text-colors
-
-// scss-docs-start utilities-bg-colors
-$utilities-bg: map.merge(
- $utilities-colors,
- (
- "black": to-rgb($black),
- "white": to-rgb($white),
- "body": to-rgb($body-bg)
- )
-) !default;
-$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
-
-$utilities-bg-subtle: (
- "primary-subtle": var(--#{$prefix}primary-bg-subtle),
- "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
- "success-subtle": var(--#{$prefix}success-bg-subtle),
- "info-subtle": var(--#{$prefix}info-bg-subtle),
- "warning-subtle": var(--#{$prefix}warning-bg-subtle),
- "danger-subtle": var(--#{$prefix}danger-bg-subtle),
- "light-subtle": var(--#{$prefix}light-bg-subtle),
- "dark-subtle": var(--#{$prefix}dark-bg-subtle)
-) !default;
-// scss-docs-end utilities-bg-colors
-
-// scss-docs-start utilities-border-colors
-$utilities-border: map.merge(
- $utilities-colors,
- (
- "black": to-rgb($black),
- "white": to-rgb($white)
- )
-) !default;
-$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
-
-$utilities-border-subtle: (
- "primary-subtle": var(--#{$prefix}primary-border-subtle),
- "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
- "success-subtle": var(--#{$prefix}success-border-subtle),
- "info-subtle": var(--#{$prefix}info-border-subtle),
- "warning-subtle": var(--#{$prefix}warning-border-subtle),
- "danger-subtle": var(--#{$prefix}danger-border-subtle),
- "light-subtle": var(--#{$prefix}light-border-subtle),
- "dark-subtle": var(--#{$prefix}dark-border-subtle)
-) !default;
-// scss-docs-end utilities-border-colors
-
-$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;
-
-$gutters: $spacers !default;
+// // scss-docs-start theme-text-map
+// $theme-colors-text: (
+// "primary": $primary-text-emphasis,
+// "secondary": $secondary-text-emphasis,
+// "success": $success-text-emphasis,
+// "info": $info-text-emphasis,
+// "warning": $warning-text-emphasis,
+// "danger": $danger-text-emphasis,
+// "light": $light-text-emphasis,
+// "dark": $dark-text-emphasis,
+// ) !default;
+// // scss-docs-end theme-text-map
+
+// // scss-docs-start theme-bg-subtle-map
+// $theme-colors-bg-subtle: (
+// "primary": $primary-bg-subtle,
+// "secondary": $secondary-bg-subtle,
+// "success": $success-bg-subtle,
+// "info": $info-bg-subtle,
+// "warning": $warning-bg-subtle,
+// "danger": $danger-bg-subtle,
+// "light": $light-bg-subtle,
+// "dark": $dark-bg-subtle,
+// ) !default;
+// // scss-docs-end theme-bg-subtle-map
+
+// // scss-docs-start theme-border-subtle-map
+// $theme-colors-border-subtle: (
+// "primary": $primary-border-subtle,
+// "secondary": $secondary-border-subtle,
+// "success": $success-border-subtle,
+// "info": $info-border-subtle,
+// "warning": $warning-border-subtle,
+// "danger": $danger-border-subtle,
+// "light": $light-border-subtle,
+// "dark": $dark-border-subtle,
+// ) !default;
+// // scss-docs-end theme-border-subtle-map
+
+// $theme-colors-text-dark: null !default;
+// $theme-colors-bg-subtle-dark: null !default;
+// $theme-colors-border-subtle-dark: null !default;
+
+// @if $enable-dark-mode {
+// // scss-docs-start theme-text-dark-map
+// $theme-colors-text-dark: (
+// "primary": $primary-text-emphasis-dark,
+// "secondary": $secondary-text-emphasis-dark,
+// "success": $success-text-emphasis-dark,
+// "info": $info-text-emphasis-dark,
+// "warning": $warning-text-emphasis-dark,
+// "danger": $danger-text-emphasis-dark,
+// "light": $light-text-emphasis-dark,
+// "dark": $dark-text-emphasis-dark,
+// ) !default;
+// // scss-docs-end theme-text-dark-map
+
+// // scss-docs-start theme-bg-subtle-dark-map
+// $theme-colors-bg-subtle-dark: (
+// "primary": $primary-bg-subtle-dark,
+// "secondary": $secondary-bg-subtle-dark,
+// "success": $success-bg-subtle-dark,
+// "info": $info-bg-subtle-dark,
+// "warning": $warning-bg-subtle-dark,
+// "danger": $danger-bg-subtle-dark,
+// "light": $light-bg-subtle-dark,
+// "dark": $dark-bg-subtle-dark,
+// ) !default;
+// // scss-docs-end theme-bg-subtle-dark-map
+
+// // scss-docs-start theme-border-subtle-dark-map
+// $theme-colors-border-subtle-dark: (
+// "primary": $primary-border-subtle-dark,
+// "secondary": $secondary-border-subtle-dark,
+// "success": $success-border-subtle-dark,
+// "info": $info-border-subtle-dark,
+// "warning": $warning-border-subtle-dark,
+// "danger": $danger-border-subtle-dark,
+// "light": $light-border-subtle-dark,
+// "dark": $dark-border-subtle-dark,
+// ) !default;
+// // scss-docs-end theme-border-subtle-dark-map
+// }
+
+// // Utilities maps
+// //
+// // 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.
+// // scss-docs-start utilities-colors
+// $utilities-colors: $theme-colors-rgb !default;
+// // scss-docs-end utilities-colors
+
+// // scss-docs-start utilities-text-colors
+// $utilities-text: map.merge(
+// $utilities-colors,
+// (
+// "black": to-rgb($black),
+// "white": to-rgb($white),
+// "body": to-rgb($body-color)
+// )
+// ) !default;
+// $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+
+// $utilities-text-emphasis-colors: (
+// "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
+// "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
+// "success-emphasis": var(--#{$prefix}success-text-emphasis),
+// "info-emphasis": var(--#{$prefix}info-text-emphasis),
+// "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
+// "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
+// "light-emphasis": var(--#{$prefix}light-text-emphasis),
+// "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
+// ) !default;
+// // scss-docs-end utilities-text-colors
+
+// // scss-docs-start utilities-bg-colors
+// $utilities-bg: map.merge(
+// $utilities-colors,
+// (
+// "black": to-rgb($black),
+// "white": to-rgb($white),
+// "body": to-rgb($body-bg)
+// )
+// ) !default;
+// $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+
+// $utilities-bg-subtle: (
+// "primary-subtle": var(--#{$prefix}primary-bg-subtle),
+// "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
+// "success-subtle": var(--#{$prefix}success-bg-subtle),
+// "info-subtle": var(--#{$prefix}info-bg-subtle),
+// "warning-subtle": var(--#{$prefix}warning-bg-subtle),
+// "danger-subtle": var(--#{$prefix}danger-bg-subtle),
+// "light-subtle": var(--#{$prefix}light-bg-subtle),
+// "dark-subtle": var(--#{$prefix}dark-bg-subtle)
+// ) !default;
+// // scss-docs-end utilities-bg-colors
+
+// // scss-docs-start utilities-border-colors
+// $utilities-border: map.merge(
+// $utilities-colors,
+// (
+// "black": to-rgb($black),
+// "white": to-rgb($white)
+// )
+// ) !default;
+// $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
+
+// $utilities-border-subtle: (
+// "primary-subtle": var(--#{$prefix}primary-border-subtle),
+// "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
+// "success-subtle": var(--#{$prefix}success-border-subtle),
+// "info-subtle": var(--#{$prefix}info-border-subtle),
+// "warning-subtle": var(--#{$prefix}warning-border-subtle),
+// "danger-subtle": var(--#{$prefix}danger-border-subtle),
+// "light-subtle": var(--#{$prefix}light-border-subtle),
+// "dark-subtle": var(--#{$prefix}dark-border-subtle)
+// ) !default;
+// // scss-docs-end utilities-border-colors
+
+// $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;
+
+// $gutters: $spacers !default;
}
@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;
}
}
$infix: breakpoint-infix($next, $breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name
- &#{$infix} {
+ &-#{$infix} {
@include media-breakpoint-up($next) {
flex-wrap: nowrap;
justify-content: flex-start;
$next: breakpoint-next($breakpoint, $breakpoints);
$infix: breakpoint-infix($next, $breakpoints);
- .offcanvas#{$infix} {
+ .offcanvas-#{$infix} {
@extend %offcanvas-css-vars;
}
}
$next: breakpoint-next($breakpoint, $breakpoints);
$infix: breakpoint-infix($next, $breakpoints);
- .offcanvas#{$infix} {
+ .offcanvas-#{$infix} {
@include media-breakpoint-down($next) {
position: fixed;
bottom: 0;
@use "config" as *;
@use "colors" as *;
+@use "theme" as *;
@use "variables" as *;
-@use "maps" as *;
+// @use "maps" as *;
@use "vendor/rfs" as *;
@use "mixins/color-mode" as *;
@layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities;
@layer colors {
- :root,
- [data-bs-theme="light"] {
+ :root {
+ color-scheme: light dark;
+
@each $color-group-name, $color-group in $all-colors {
@if type-of($color-group) == "map" {
@each $color-name, $color-value in $color-group {
@each $color, $value in $theme-colors {
--#{$prefix}#{$color}: #{$value};
}
+
+ @each $color-name, $color-map in $new-theme-colors {
+ @each $key, $value in $color-map {
+ --#{$prefix}#{$color-name}-#{$key}: #{$value};
+ }
+ }
}
}
-:root,
-[data-bs-theme="light"] {
+:root {
// Note: Custom variable values only support SassScript inside `#{}`.
// Colors
// --#{$prefix}#{$color}: #{$value};
// }
- @each $color, $value in $theme-colors-rgb {
- --#{$prefix}#{$color}-rgb: #{$value};
- }
+ // @each $color, $value in $theme-colors-rgb {
+ // --#{$prefix}#{$color}-rgb: #{$value};
+ // }
- @each $color, $value in $theme-colors-text {
- --#{$prefix}#{$color}-text-emphasis: #{$value};
- }
+ // @each $color, $value in $theme-colors-text {
+ // --#{$prefix}#{$color}-text-emphasis: #{$value};
+ // }
- @each $color, $value in $theme-colors-bg-subtle {
- --#{$prefix}#{$color}-bg-subtle: #{$value};
- }
+ // @each $color, $value in $theme-colors-bg-subtle {
+ // --#{$prefix}#{$color}-bg-subtle: #{$value};
+ // }
- @each $color, $value in $theme-colors-border-subtle {
- --#{$prefix}#{$color}-border-subtle: #{$value};
- }
+ // @each $color, $value in $theme-colors-border-subtle {
+ // --#{$prefix}#{$color}-border-subtle: #{$value};
+ // }
- --#{$prefix}white-rgb: #{to-rgb($white)};
- --#{$prefix}black-rgb: #{to-rgb($black)};
+ // --#{$prefix}white-rgb: #{to-rgb($white)};
+ // --#{$prefix}black-rgb: #{to-rgb($black)};
// Fonts
}
--#{$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-rgb: #{to-rgb($body-bg)};
+ // --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
--#{$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-rgb: #{to-rgb($body-secondary-color)};
+ // --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$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-rgb: #{to-rgb($body-tertiary-color)};
+ // --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$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
--#{$prefix}heading-color: #{$headings-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-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 {
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
color-scheme: dark;
// scss-docs-start root-dark-mode-vars
- --#{$prefix}body-color: #{$body-color-dark};
- --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
- --#{$prefix}body-bg: #{$body-bg-dark};
- --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
-
- --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
- --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
-
- --#{$prefix}secondary-color: #{$body-secondary-color-dark};
- --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
- --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
- --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
-
- --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
- --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
- --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
- --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
-
- @each $color, $value in $theme-colors-text-dark {
- --#{$prefix}#{$color}-text-emphasis: #{$value};
- }
+ // --#{$prefix}body-color: #{$body-color-dark};
+ // --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+ // --#{$prefix}body-bg: #{$body-bg-dark};
+ // --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
- @each $color, $value in $theme-colors-bg-subtle-dark {
- --#{$prefix}#{$color}-bg-subtle: #{$value};
- }
+ // --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+ // --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
- @each $color, $value in $theme-colors-border-subtle-dark {
- --#{$prefix}#{$color}-border-subtle: #{$value};
- }
+ // --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+ // --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+ // --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+ // --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+ // --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+ // --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+ // --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+ // --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+ // @each $color, $value in $theme-colors-text-dark {
+ // --#{$prefix}#{$color}-text-emphasis: #{$value};
+ // }
+
+ // @each $color, $value in $theme-colors-bg-subtle-dark {
+ // --#{$prefix}#{$color}-bg-subtle: #{$value};
+ // }
+
+ // @each $color, $value in $theme-colors-border-subtle-dark {
+ // --#{$prefix}#{$color}-border-subtle: #{$value};
+ // }
--#{$prefix}heading-color: #{$headings-color-dark};
- --#{$prefix}link-color: #{$link-color-dark};
- --#{$prefix}link-hover-color: #{$link-hover-color-dark};
- --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
- --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+ // --#{$prefix}link-color: #{$link-color-dark};
+ // --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+ // --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+ // --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
- --#{$prefix}code-color: #{$code-color-dark};
- --#{$prefix}highlight-color: #{$mark-color-dark};
- --#{$prefix}highlight-bg: #{$mark-bg-dark};
+ // --#{$prefix}code-color: #{$code-color-dark};
+ // --#{$prefix}highlight-color: #{$mark-color-dark};
+ // --#{$prefix}highlight-bg: #{$mark-bg-dark};
- --#{$prefix}border-color: #{$border-color-dark};
- --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+ // --#{$prefix}border-color: #{$border-color-dark};
+ // --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
- --#{$prefix}form-valid-color: #{$form-valid-color-dark};
- --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
- --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
- --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
+ // --#{$prefix}form-valid-color: #{$form-valid-color-dark};
+ // --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
+ // --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
+ // --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
// scss-docs-end root-dark-mode-vars
}
}
--- /dev/null
+@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;
@use "colors" as *;
@use "variables" as *;
@use "functions" as *;
-@use "maps" as *;
+@use "theme" as *;
$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
class: align,
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
"aspect-ratio": (
property: aspect-ratio,
// scss-docs-end utils-aspect-ratio
// scss-docs-start utils-float
"float": (
- responsive: true,
property: float,
+ responsive: true,
values: (
start: left,
end: right,
none: none,
)
),
- // scss-docs-end utils-object-fit
+ scss-docs-end utils-object-fit
// Opacity utilities
// scss-docs-start utils-opacity
"opacity": (
// scss-docs-end utils-shadow
// scss-docs-start utils-focus-ring
"focus-ring": (
- css-var: true,
- css-variable-name: focus-ring-color,
+ // css-var: true,
+ property: --#{$prefix}focus-ring-color,
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-start utils-position
)
),
"border-top": (
- property: border-top,
+ property: border-block-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-end": (
- property: border-right,
+ property: border-inline-end,
class: border-end,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
)
),
"border-bottom": (
- property: border-bottom,
+ property: border-block-end,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-start": (
- property: border-left,
+ property: border-inline-start,
class: border-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
local-vars: (
"border-opacity": 1
),
- values: $utilities-border-colors
- ),
- "subtle-border-color": (
- property: border-color,
- class: border,
- values: $utilities-border-subtle
+ // values: $utilities-border-colors
),
+ // "subtle-border-color": (
+ // property: border-color,
+ // class: border,
+ // // values: $utilities-border-subtle
+ // ),
"border-width": (
property: border-width,
class: border,
values: $border-widths
),
- "border-opacity": (
- css-var: true,
- class: border-opacity,
- values: (
- 10: .1,
- 25: .25,
- 50: .5,
- 75: .75,
- 100: 1
- )
- ),
+ // "border-opacity": (
+ // css-var: true,
+ // class: border-opacity,
+ // values: (
+ // 10: .1,
+ // 25: .25,
+ // 50: .5,
+ // 75: .75,
+ // 100: 1
+ // )
+ // ),
// scss-docs-end utils-borders
// Sizing utilities
// scss-docs-start utils-sizing
values: map.merge($spacers, (auto: auto))
),
// Negative margin utilities
- "negative-margin": (
- responsive: true,
- property: margin,
- class: m,
- values: $negative-spacers
- ),
- "negative-margin-x": (
- responsive: true,
- property: margin-right margin-left,
- class: mx,
- values: $negative-spacers
- ),
- "negative-margin-y": (
- responsive: true,
- property: margin-top margin-bottom,
- class: my,
- values: $negative-spacers
- ),
- "negative-margin-top": (
- responsive: true,
- property: margin-top,
- class: mt,
- values: $negative-spacers
- ),
- "negative-margin-end": (
- responsive: true,
- property: margin-right,
- class: me,
- values: $negative-spacers
- ),
- "negative-margin-bottom": (
- responsive: true,
- property: margin-bottom,
- class: mb,
- values: $negative-spacers
- ),
- "negative-margin-start": (
- responsive: true,
- property: margin-left,
- class: ms,
- values: $negative-spacers
- ),
+ // "negative-margin": (
+ // responsive: true,
+ // property: margin,
+ // class: m,
+ // values: $negative-spacers
+ // ),
+ // "negative-margin-x": (
+ // responsive: true,
+ // property: margin-right margin-left,
+ // class: mx,
+ // values: $negative-spacers
+ // ),
+ // "negative-margin-y": (
+ // responsive: true,
+ // property: margin-top margin-bottom,
+ // class: my,
+ // values: $negative-spacers
+ // ),
+ // "negative-margin-top": (
+ // responsive: true,
+ // property: margin-top,
+ // class: mt,
+ // values: $negative-spacers
+ // ),
+ // "negative-margin-end": (
+ // responsive: true,
+ // property: margin-right,
+ // class: me,
+ // values: $negative-spacers
+ // ),
+ // "negative-margin-bottom": (
+ // responsive: true,
+ // property: margin-bottom,
+ // class: mb,
+ // values: $negative-spacers
+ // ),
+ // "negative-margin-start": (
+ // responsive: true,
+ // property: margin-left,
+ // class: ms,
+ // values: $negative-spacers
+ // ),
// Padding utilities
"padding": (
responsive: true,
local-vars: (
"text-opacity": 1
),
- values: map.merge(
- $utilities-text-colors,
- (
- "muted": var(--#{$prefix}secondary-color), // deprecated
- "black-50": rgba($black, .5), // deprecated
- "white-50": rgba($white, .5), // deprecated
- "body-secondary": var(--#{$prefix}secondary-color),
- "body-tertiary": var(--#{$prefix}tertiary-color),
- "body-emphasis": var(--#{$prefix}emphasis-color),
- "reset": inherit,
- )
+ values: (
+ // $utilities-text-colors,
+ // (
+ "muted": var(--#{$prefix}secondary-color), // deprecated
+ "black-50": rgba($black, .5), // deprecated
+ "white-50": rgba($white, .5), // deprecated
+ "body-secondary": var(--#{$prefix}secondary-color),
+ "body-tertiary": var(--#{$prefix}tertiary-color),
+ "body-emphasis": var(--#{$prefix}emphasis-color),
+ "reset": inherit,
+ // )
)
),
"text-opacity": (
- css-var: true,
+ // css-var: true,
+ property: --#{$prefix}text-opacity,
class: text-opacity,
values: (
25: .25,
"text-color": (
property: color,
class: text,
- values: $utilities-text-emphasis-colors
+ values: theme-color-values("text"),
+ // values: $utilities-text-emphasis-colors
),
// scss-docs-end utils-color
// scss-docs-start utils-links
"link-opacity": (
- css-var: true,
+ property: --#{$prefix}link-opacity,
+ // css-var: true,
class: link-opacity,
state: hover,
values: (
local-vars: (
"link-underline-opacity": 1
),
- values: map.merge(
- $utilities-links-underline,
- (
- null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
- )
- )
+ // values: map.merge(
+ // $utilities-links-underline,
+ // (
+ // // null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
+ // )
+ // )
),
"link-underline-opacity": (
- css-var: true,
+ // css-var: true,
+ property: --#{$prefix}link-underline-opacity,
class: link-underline-opacity,
state: hover,
values: (
),
// scss-docs-end utils-links
// scss-docs-start utils-bg-color
- "background-color": (
+ "bg-attr": (
+ selector: "attr-starts",
+ class: "bg-",
property: background-color,
+ values: var(--#{$prefix}bg),
+ ),
+ "bg-color": (
+ // css-var: true,
+ property: --#{$prefix}bg,
class: 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)),
- )
- )
+ // local-vars: (
+ // "bg-opacity": 1
+ // ),
+ values: theme-color-values("bg"),
),
- "bg-opacity": (
- css-var: true,
- class: bg-opacity,
- values: (
- 10: .1,
- 25: .25,
- 50: .5,
- 75: .75,
- 100: 1
- )
+ "bg-color-subtle": (
+ property: --#{$prefix}bg,
+ class: bg-subtle,
+ values: theme-color-values("bg-subtle"),
),
- "subtle-background-color": (
- property: background-color,
- class: bg,
- values: $utilities-bg-subtle
+ "bg-color-muted": (
+ property: --#{$prefix}bg,
+ class: bg-muted,
+ values: theme-color-values("bg-muted"),
),
+
+
+ "bg-opacity": (
+ class: bg,
+ property: background-color,
+ values: (
+ 10: color-mix(in oklch, var(--#{$prefix}bg) 10%, transparent),
+ 20: color-mix(in oklch, var(--#{$prefix}bg) 20%, transparent),
+ 30: color-mix(in oklch, var(--#{$prefix}bg) 30%, transparent),
+ 40: color-mix(in oklch, var(--#{$prefix}bg) 40%, transparent),
+ 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": (
+ // property: background-color,
+ // class: bg,
+ // // values: $utilities-bg-subtle
+ // ),
// scss-docs-end utils-bg-color
"gradient": (
property: background-image,
//
// scss-docs-start sass-dark-mode-vars
-// scss-docs-start theme-text-dark-variables
-$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
-$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
-$success-text-emphasis-dark: tint-color($success, 40%) !default;
-$info-text-emphasis-dark: tint-color($info, 40%) !default;
-$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
-$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
-$light-text-emphasis-dark: $gray-100 !default;
-$dark-text-emphasis-dark: $gray-300 !default;
-// scss-docs-end theme-text-dark-variables
-
-// scss-docs-start theme-bg-subtle-dark-variables
-$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
-$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
-$success-bg-subtle-dark: shade-color($success, 80%) !default;
-$info-bg-subtle-dark: shade-color($info, 80%) !default;
-$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
-$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
-$light-bg-subtle-dark: $gray-800 !default;
-$dark-bg-subtle-dark: mix($gray-800, $black) !default;
-// scss-docs-end theme-bg-subtle-dark-variables
-
-// scss-docs-start theme-border-subtle-dark-variables
-$primary-border-subtle-dark: shade-color($primary, 40%) !default;
-$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
-$success-border-subtle-dark: shade-color($success, 40%) !default;
-$info-border-subtle-dark: shade-color($info, 40%) !default;
-$warning-border-subtle-dark: shade-color($warning, 40%) !default;
-$danger-border-subtle-dark: shade-color($danger, 40%) !default;
-$light-border-subtle-dark: $gray-700 !default;
-$dark-border-subtle-dark: $gray-800 !default;
-// scss-docs-end theme-border-subtle-dark-variables
-
-$body-color-dark: $gray-300 !default;
-$body-bg-dark: $gray-900 !default;
-$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
-$body-secondary-bg-dark: $gray-800 !default;
-$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
-$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
-$body-emphasis-color-dark: $white !default;
-$border-color-dark: $gray-700 !default;
-$border-color-translucent-dark: rgba($white, .15) !default;
+// // scss-docs-start theme-text-dark-variables
+// $primary-text-emphasis-dark: tint-color($primary, 40%) !default;
+// $secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
+// $success-text-emphasis-dark: tint-color($success, 40%) !default;
+// $info-text-emphasis-dark: tint-color($info, 40%) !default;
+// $warning-text-emphasis-dark: tint-color($warning, 40%) !default;
+// $danger-text-emphasis-dark: tint-color($danger, 40%) !default;
+// $light-text-emphasis-dark: $gray-100 !default;
+// $dark-text-emphasis-dark: $gray-300 !default;
+// // scss-docs-end theme-text-dark-variables
+
+// // scss-docs-start theme-bg-subtle-dark-variables
+// $primary-bg-subtle-dark: shade-color($primary, 80%) !default;
+// $secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
+// $success-bg-subtle-dark: shade-color($success, 80%) !default;
+// $info-bg-subtle-dark: shade-color($info, 80%) !default;
+// $warning-bg-subtle-dark: shade-color($warning, 80%) !default;
+// $danger-bg-subtle-dark: shade-color($danger, 80%) !default;
+// $light-bg-subtle-dark: $gray-800 !default;
+// $dark-bg-subtle-dark: mix($gray-800, $black) !default;
+// // scss-docs-end theme-bg-subtle-dark-variables
+
+// // scss-docs-start theme-border-subtle-dark-variables
+// $primary-border-subtle-dark: shade-color($primary, 40%) !default;
+// $secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
+// $success-border-subtle-dark: shade-color($success, 40%) !default;
+// $info-border-subtle-dark: shade-color($info, 40%) !default;
+// $warning-border-subtle-dark: shade-color($warning, 40%) !default;
+// $danger-border-subtle-dark: shade-color($danger, 40%) !default;
+// $light-border-subtle-dark: $gray-700 !default;
+// $dark-border-subtle-dark: $gray-800 !default;
+// // scss-docs-end theme-border-subtle-dark-variables
+
+// $body-color-dark: $gray-300 !default;
+// $body-bg-dark: $gray-900 !default;
+// $body-secondary-color-dark: rgb(var(--#{$prefix}body-color-dark) / .75) !default;
+// $body-secondary-bg-dark: $gray-800 !default;
+// $body-tertiary-color-dark: rgb(var(--#{$prefix}body-color-dark) / .5) !default;
+// $body-tertiary-bg-dark: color-mix(in srgb, #{$gray-800}, #{$gray-900}, 50%) !default;
+// $body-emphasis-color-dark: $white !default;
+// $border-color-dark: $gray-700 !default;
+$border-color-translucent-dark: rgba(var(--#{$prefix}white), .15) !default;
$headings-color-dark: inherit !default;
-$link-color-dark: tint-color($primary, 40%) !default;
-$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
-$code-color-dark: tint-color($code-color, 40%) !default;
-$mark-color-dark: $body-color-dark !default;
-$mark-bg-dark: $yellow-800 !default;
+// $link-color-dark: tint-color($primary, 40%) !default;
+// $link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
+// $code-color-dark: tint-color($code-color, 40%) !default;
+// $mark-color-dark: $body-color !default;
+// $mark-bg-dark: $yellow-800 !default;
//
// 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-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;
// scss-docs-start form-validation-colors-dark
// Accordion
//
-$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
-$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
+$accordion-icon-color-dark: var(--#{$prefix}primary-text) !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-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
) !default;
// scss-docs-end theme-colors-map
-// scss-docs-start theme-text-variables
-$primary-text-emphasis: shade-color($primary, 60%) !default;
-$secondary-text-emphasis: shade-color($secondary, 60%) !default;
-$success-text-emphasis: shade-color($success, 60%) !default;
-$info-text-emphasis: shade-color($info, 60%) !default;
-$warning-text-emphasis: shade-color($warning, 60%) !default;
-$danger-text-emphasis: shade-color($danger, 60%) !default;
-$light-text-emphasis: $gray-700 !default;
-$dark-text-emphasis: $gray-700 !default;
-// scss-docs-end theme-text-variables
-
-// scss-docs-start theme-bg-subtle-variables
-$primary-bg-subtle: tint-color($primary, 80%) !default;
-$secondary-bg-subtle: tint-color($secondary, 80%) !default;
-$success-bg-subtle: tint-color($success, 80%) !default;
-$info-bg-subtle: tint-color($info, 80%) !default;
-$warning-bg-subtle: tint-color($warning, 80%) !default;
-$danger-bg-subtle: tint-color($danger, 80%) !default;
-$light-bg-subtle: mix($gray-100, $white) !default;
-$dark-bg-subtle: $gray-400 !default;
-// scss-docs-end theme-bg-subtle-variables
-
-// scss-docs-start theme-border-subtle-variables
-$primary-border-subtle: tint-color($primary, 60%) !default;
-$secondary-border-subtle: tint-color($secondary, 60%) !default;
-$success-border-subtle: tint-color($success, 60%) !default;
-$info-border-subtle: tint-color($info, 60%) !default;
-$warning-border-subtle: tint-color($warning, 60%) !default;
-$danger-border-subtle: tint-color($danger, 60%) !default;
-$light-border-subtle: $gray-200 !default;
-$dark-border-subtle: $gray-500 !default;
-// scss-docs-end theme-border-subtle-variables
+// // scss-docs-start theme-text-variables
+// $primary-text-emphasis: shade-color($primary, 60%) !default;
+// $secondary-text-emphasis: shade-color($secondary, 60%) !default;
+// $success-text-emphasis: shade-color($success, 60%) !default;
+// $info-text-emphasis: shade-color($info, 60%) !default;
+// $warning-text-emphasis: shade-color($warning, 60%) !default;
+// $danger-text-emphasis: shade-color($danger, 60%) !default;
+// $light-text-emphasis: $gray-700 !default;
+// $dark-text-emphasis: $gray-700 !default;
+// // scss-docs-end theme-text-variables
+
+// // scss-docs-start theme-bg-subtle-variables
+// $primary-bg-subtle: tint-color($primary, 80%) !default;
+// $secondary-bg-subtle: tint-color($secondary, 80%) !default;
+// $success-bg-subtle: tint-color($success, 80%) !default;
+// $info-bg-subtle: tint-color($info, 80%) !default;
+// $warning-bg-subtle: tint-color($warning, 80%) !default;
+// $danger-bg-subtle: tint-color($danger, 80%) !default;
+// $light-bg-subtle: mix($gray-100, $white) !default;
+// $dark-bg-subtle: $gray-400 !default;
+// // scss-docs-end theme-bg-subtle-variables
+
+// // scss-docs-start theme-border-subtle-variables
+// $primary-border-subtle: tint-color($primary, 60%) !default;
+// $secondary-border-subtle: tint-color($secondary, 60%) !default;
+// $success-border-subtle: tint-color($success, 60%) !default;
+// $info-border-subtle: tint-color($info, 60%) !default;
+// $warning-border-subtle: tint-color($warning, 60%) !default;
+// $danger-border-subtle: tint-color($danger, 60%) !default;
+// $light-border-subtle: $gray-200 !default;
+// $dark-border-subtle: $gray-500 !default;
+// // scss-docs-end theme-border-subtle-variables
// Characters which are escaped by the escape-svg function
$escaped-characters: (
// Settings for the `<body>` element.
$body-text-align: null !default;
-$body-color: $gray-900 !default;
-$body-bg: $white !default;
+$body-color: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-300)) !default;
+$body-bg: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900)) !default;
-$body-secondary-color: rgba($body-color, .75) !default;
-$body-secondary-bg: $gray-200 !default;
+$body-secondary-color: rgb(var(--#{$prefix}body-color) / .75) !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-bg: $gray-100 !default;
+$body-tertiary-color: rgb(var(--#{$prefix}body-color) / .5) !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
//
// Style anchor elements.
-$link-color: $primary !default;
+$link-color: var(--#{$prefix}primary-text) !default;
$link-decoration: underline !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;
$stretched-link-pseudo-element: after !default;
5: 5px
) !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;
// scss-docs-end border-variables
$mark-padding: .1875em !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
$btn-link-color: var(--#{$prefix}link-color) !default;
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !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
$btn-border-radius: var(--#{$prefix}border-radius) !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-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-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
$navbar-light-brand-color: $navbar-light-active-color !default;
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
$accordion-transition: $btn-transition, border-radius .15s ease !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
$accordion-button-focus-border-color: $input-focus-border-color !default; // Deprecated in v5.3.3
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
-$accordion-icon-color: $body-color !default;
-$accordion-icon-active-color: $primary-text-emphasis !default;
+$accordion-icon-color: var(--#{$prefix}body-color) !default;
+$accordion-icon-active-color: var(--#{$prefix}primary-text-emphasis) !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default;
color: var(--#{$prefix}heading-color);
}
- h1 {
+ h1,
+ .h1 {
@extend %heading;
@include font-size($h1-font-size);
}
- h2 {
+ h2,
+ .h2 {
@extend %heading;
@include font-size($h2-font-size);
}
- h3 {
+ h3,
+ .h3 {
@extend %heading;
@include font-size($h3-font-size);
}
- h4 {
+ h4,
+ .h4 {
@extend %heading;
@include font-size($h4-font-size);
}
- h5 {
+ h5,
+ .h5 {
@extend %heading;
@include font-size($h5-font-size);
}
- h6 {
+ h6,
+ .h6 {
@extend %heading;
@include font-size($h6-font-size);
}
//
// Add the correct font size in all browsers
- small {
+ small, .small {
@include font-size($small-font-size);
}
// Mark
- mark {
+ mark, .mark {
padding: $mark-padding;
color: var(--#{$prefix}highlight-color);
background-color: var(--#{$prefix}highlight-bg);
// Links
a {
- color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
+ color: var(--#{$prefix}link-color);
text-decoration: $link-decoration;
&:hover {
- --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
+ --#{$prefix}link-color: var(--#{$prefix}link-hover-color);
text-decoration: $link-hover-decoration;
}
}
// scss-docs-start table-variant
@mixin table-variant($state, $background) {
.table-#{$state} {
- $color: color-contrast(opaque($body-bg, $background));
- $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
- $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
- $active-bg: mix($color, $background, percentage($table-active-bg-factor));
- $table-border-color: mix($color, $background, percentage($table-border-factor));
+ // mdo-do
+ $color: $body-color;
+ $hover-bg: color-mix(in srgb, #{$color}, #{$background percentage($table-hover-bg-factor)});
+ $striped-bg: color-mix(in srgb, #{$color}, #{$background percentage($table-striped-bg-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-bg: #{$background};
//
// Emphasis
//
- .small {
- // @extend small;
- }
+ // .small {
+ // @extend small;
+ // }
- .mark {
- // @extend mark;
- }
+ // .mark {
+ // @extend mark;
+ // }
//
// Lists
@layer helpers {
@each $color, $value in $theme-colors {
.link-#{$color} {
- color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
- text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+ color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
+ text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-underline-opacity));
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
$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);
- text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+ color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
+ text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
}
}
}
// One-off special link helper as a bridge until v6
.link-body-emphasis {
- color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
- text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-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: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity));
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
- color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
- text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-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: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity, .75));
}
}
}
display: inline-flex;
gap: $icon-link-gap;
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;
backface-visibility: hidden;
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px))
// "-sm"
@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.
@each $name, $width in $breakpoints {
@if ($extend-breakpoint) {
- .container#{breakpoint-infix($name, $breakpoints)} {
+ .container-#{breakpoint-infix($name, $breakpoints)} {
@extend %responsive-container-#{$breakpoint};
}
@use "../config" as *;
// Utility generator
-// Used to generate utilities & print utilities
+
+// - Utilities can three different types of selectors:
+// - class: .class
+// - 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) {
- $values: map.get($utility, values);
+ // 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);
- // If the values are a list or string, convert it into a map
- @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
- $values: zip($values, $values);
+ // 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 {
$properties: map.get($utility, property);
$properties: append((), $properties);
}
- // Use custom class if present
- $property-class: if(map.has-key($utility, class), map.get($utility, class), nth($properties, 1));
- $property-class: if($property-class == null, "", $property-class);
+ // Use custom class if present, otherwise use the first value from the list of properties
+ $customClass: if(map.has-key($utility, class), map.get($utility, class), nth($properties, 1));
+ $customClass: if($customClass == null, "", $customClass);
// 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: 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)
- $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
+ $customClassModifier: if($key, if($customClass == "" and $infix == "", "", "-") + $key, "");
@if map.get($utility, rfs) {
// Inside the media query
$is-css-var: map.get($utility, css-var);
$is-local-vars: map.get($utility, local-vars);
- $is-rtl: map.get($utility, rtl);
+ // $is-rtl: map.get($utility, rtl);
- @if $value != null {
- @if $is-rtl == false {
- /* rtl:begin:remove */
- }
-
- @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};
- }
- }
+ $selector: "";
+ @if $selectorType == "class" {
+ // Use the fallback of the first property if no `class` key is used
+ @if $customClass != "" {
+ $selector: ".#{$customClass + $infix + $customClassModifier}";
} @else {
- .#{$property-class + $infix + $property-class-modifier} {
- @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;
- }
- }
- }
+ $selector: ".#{$selectorClass + $infix + $customClassModifier}";
}
+ } @else if $selectorType == "attr-starts" {
+ $selector: "[class^=\"#{$selectorClass}\"]";
+ } @else if $selectorType == "attr-includes" {
+ $selector: "[class*=\"#{$selectorClass}\"]";
+ }
+
+ // @debug $utility;
+ // @debug $selectorType;
+ // @debug $selector;
+ // @debug $properties;
+ // @debug $values;
- @if $is-rtl == false {
- /* rtl:end:remove */
+ #{$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;
+ // // }
+ // // }
+ // // }
+ // }
+ // }
}
}
* The CSS class(es) to be added to the preview wrapping `div` element.
*/
class?: string
+ /**
+ * The CSS style(s) to be added to the preview wrapping `div` element.
+ */
+ style?: string
/**
* The preview wrapping `div` element ID.
*/
addStackblitzJs = false,
code,
class: className,
+ style,
id,
lang = 'html',
showMarkup = true,
<div class="bd-example-snippet bd-code-snippet">
{
showPreview && (
- <div id={id} class:list={['bd-example m-0 border-0', className]}>
+ <div id={id} class:list={['bd-example m-0 border-0', className]} style={style}>
<Fragment set:html={markup} />
</div>
)
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>`]} />
<Callout name="warning-color-assistive-technologies" />
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
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.
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.
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.
-<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:
-<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
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.**
-<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:
-<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:
-<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:
-<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
<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
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" /> */}
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.
-<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:
-<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
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.**
-<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:
-<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:
-<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:
-<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
projects / thirdparty / bootstrap.git / commitdiff
