diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 5a4db9f638..885a6287fc 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -8,67 +8,231 @@ @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 @@ -98,6 +262,7 @@ --#{$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}; @@ -168,7 +333,7 @@ &.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)); @@ -211,37 +376,37 @@ // // 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-#{$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-outline-#{$color} { + // @include button-outline-variant($value); + // } + // } // scss-docs-end btn-variant-loops @@ -261,8 +426,9 @@ --#{$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 { diff --git a/scss/_functions.scss b/scss/_functions.scss index dc3d6a19b4..369654eae0 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -146,77 +146,77 @@ @return $string; } -// Color contrast -// See https://github.com/twbs/bootstrap/pull/30168 +// // 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; +// // 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; +// @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; - } - } +// @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; +// } +// } - @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}..."; +// @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}..."; - @return $max-ratio-color; -} +// @return $max-ratio-color; +// } -@function contrast-ratio($background, $foreground: $color-contrast-light) { - $l1: luminance($background); - $l2: luminance(opaque($background, $foreground)); +// @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 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) - ); +// @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)); - } +// @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 (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); -} +// // 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 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)); -} +// // 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 diff --git a/scss/_maps.scss b/scss/_maps.scss index 0580b66241..d23e550520 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -9,172 +9,172 @@ // 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-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-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 +// // 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; +// $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 +// @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-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 -} +// // 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. +// // 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 +// // 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; +// // 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 +// $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; +// // 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 +// $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; +// // 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-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; +// $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default; -$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; +// $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; -$gutters: $spacers !default; +// $gutters: $spacers !default; diff --git a/scss/_navbar.scss b/scss/_navbar.scss index ece3fc8ca5..8b3bbcbe35 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -64,7 +64,7 @@ } @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; } } @@ -208,7 +208,7 @@ $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; diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index fc3a23a625..80b4767ec9 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -28,7 +28,7 @@ $next: breakpoint-next($breakpoint, $breakpoints); $infix: breakpoint-infix($next, $breakpoints); - .offcanvas#{$infix} { + .offcanvas-#{$infix} { @extend %offcanvas-css-vars; } } @@ -37,7 +37,7 @@ $next: breakpoint-next($breakpoint, $breakpoints); $infix: breakpoint-infix($next, $breakpoints); - .offcanvas#{$infix} { + .offcanvas-#{$infix} { @include media-breakpoint-down($next) { position: fixed; bottom: 0; diff --git a/scss/_root.scss b/scss/_root.scss index 82f2e18639..5161ef9ad9 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -1,7 +1,8 @@ @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 *; @@ -9,8 +10,9 @@ @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 { @@ -24,11 +26,16 @@ @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 @@ -53,24 +60,24 @@ // --#{$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 @@ -94,32 +101,32 @@ } --#{$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}; @@ -168,54 +175,54 @@ 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}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}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}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)}; + // --#{$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-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-bg-subtle-dark { + // --#{$prefix}#{$color}-bg-subtle: #{$value}; + // } - @each $color, $value in $theme-colors-border-subtle-dark { - --#{$prefix}#{$color}-border-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 } } diff --git a/scss/_theme.scss b/scss/_theme.scss new file mode 100644 index 0000000000..7f78a90f27 --- /dev/null +++ b/scss/_theme.scss @@ -0,0 +1,190 @@ +@use "config" as *; +@use "colors" as *; + +@function theme-color-values($key) { + $result: (); + + @each $color-name, $color-map in $new-theme-colors { + @if map-has-key($color-map, $key) { + $result: map-merge($result, ($color-name: map-get($color-map, $key))); + } + } + + @return $result; +} + +// Recursive mixin to handle nested maps +@mixin create-css-vars($map, $parent-key: "") { + @each $key, $value in $map { + $current-key: if($parent-key == "", $key, "#{$parent-key}-#{$key}"); + + @if type-of($value) == "map" { + @include create-css-vars($value, $current-key); + } @else { + --#{$prefix}#{$current-key}: #{$value}; + } + } +} +$new-theme-colors: ( + "primary": ( + "base": var(--#{$prefix}blue-500), + "text": light-dark(var(--#{$prefix}blue-700), var(--#{$prefix}blue-300)), + "bg": light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-500)), + "bg-subtle": light-dark(var(--#{$prefix}blue-100), var(--#{$prefix}blue-900)), + "bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)), + "border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)), + "focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, transparent), + "contrast": var(--#{$prefix}white) + ), + // "indigo": ( + // "base": var(--#{$prefix}indigo-500), + // "text": light-dark(var(--#{$prefix}indigo-700), var(--#{$prefix}indigo-300)), + // "bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)), + // "bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)), + // "bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)), + // "border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)), + // "contrast": var(--#{$prefix}white) + // ), + // "purple": ( + // "base": var(--#{$prefix}purple-500), + // "text": light-dark(var(--#{$prefix}purple-700), var(--#{$prefix}purple-300)), + // "bg": light-dark(var(--#{$prefix}purple-500), var(--#{$prefix}purple-500)), + // "bg-subtle": light-dark(var(--#{$prefix}purple-100), var(--#{$prefix}purple-900)), + // "bg-muted": light-dark(var(--#{$prefix}purple-200), var(--#{$prefix}purple-800)), + // "border": light-dark(var(--#{$prefix}purple-300), var(--#{$prefix}purple-600)), + // "contrast": var(--#{$prefix}white) + // ), + // "pink": ( + // "base": var(--#{$prefix}pink-500), + // "text": light-dark(var(--#{$prefix}pink-700), var(--#{$prefix}pink-300)), + // "bg": light-dark(var(--#{$prefix}pink-500), var(--#{$prefix}pink-500)), + // "bg-subtle": light-dark(var(--#{$prefix}pink-100), var(--#{$prefix}pink-900)), + // "bg-muted": light-dark(var(--#{$prefix}pink-200), var(--#{$prefix}pink-800)), + // "border": light-dark(var(--#{$prefix}pink-300), var(--#{$prefix}pink-600)), + // "contrast": var(--#{$prefix}white) + // ), + "danger": ( + "base": var(--#{$prefix}red-500), + "text": light-dark(var(--#{$prefix}red-700), var(--#{$prefix}red-300)), + "bg": light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-500)), + "bg-subtle": light-dark(var(--#{$prefix}red-100), var(--#{$prefix}red-900)), + "bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)), + "border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)), + "focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, transparent), + "contrast": var(--#{$prefix}white) + ), + // "orange": ( + // "base": var(--#{$prefix}orange-500), + // "text": light-dark(var(--#{$prefix}orange-700), var(--#{$prefix}orange-300)), + // "bg": light-dark(var(--#{$prefix}orange-500), var(--#{$prefix}orange-500)), + // "bg-subtle": light-dark(var(--#{$prefix}orange-100), var(--#{$prefix}orange-900)), + // "bg-muted": light-dark(var(--#{$prefix}orange-200), var(--#{$prefix}orange-800)), + // "border": light-dark(var(--#{$prefix}orange-300), var(--#{$prefix}orange-600)), + // "contrast": var(--#{$prefix}gray-900) + // ), + "warning": ( + "base": var(--#{$prefix}yellow-500), + "text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-300)), + "bg": light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-500)), + "bg-subtle": light-dark(var(--#{$prefix}yellow-100), var(--#{$prefix}yellow-900)), + "bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)), + "border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)), + "focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, transparent), + "contrast": var(--#{$prefix}gray-900) + ), + "success": ( + "base": var(--#{$prefix}green-500), + "text": light-dark(var(--#{$prefix}green-700), var(--#{$prefix}green-300)), + "bg": light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-500)), + "bg-subtle": light-dark(var(--#{$prefix}green-100), var(--#{$prefix}green-900)), + "bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)), + "border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)), + "focus-ring": color-mix(in oklch, var(--#{$prefix}green-500) 50%, transparent), + "contrast": var(--#{$prefix}white) + ), + // "teal": ( + // "base": var(--#{$prefix}teal-500), + // "text": light-dark(var(--#{$prefix}teal-700), var(--#{$prefix}teal-300)), + // "bg": light-dark(var(--#{$prefix}teal-500), var(--#{$prefix}teal-500)), + // "bg-subtle": light-dark(var(--#{$prefix}teal-100), var(--#{$prefix}teal-900)), + // "bg-muted": light-dark(var(--#{$prefix}teal-200), var(--#{$prefix}teal-800)), + // "border": light-dark(var(--#{$prefix}teal-300), var(--#{$prefix}teal-600)), + // "contrast": var(--#{$prefix}gray-900) + // ), + "info": ( + "base": var(--#{$prefix}cyan-500), + "text": light-dark(var(--#{$prefix}cyan-700), var(--#{$prefix}cyan-300)), + "bg": light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-500)), + "bg-subtle": light-dark(var(--#{$prefix}cyan-100), var(--#{$prefix}cyan-900)), + "bg-muted": light-dark(var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-800)), + "border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)), + "focus-ring": color-mix(in oklch, var(--#{$prefix}cyan-500) 50%, transparent), + "contrast": var(--#{$prefix}gray-900) + ), + "secondary": ( + "base": var(--#{$prefix}gray-500), + "text": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)), + "bg": light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-500)), + "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)), + "bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)), + "border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)), + "focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, transparent), + "contrast": var(--#{$prefix}gray-900) + ) +) !default; + + +// [class^=".bg-"]: background-color: var(--bs-bg-color); +// .bg-primary: --bs-bg-color: var(--#{$prefix}primary-bg); +// .bg-10: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 10%, transparent); +// .bg-20: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 20%, transparent); +// .bg-30: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 30%, transparent); +// .bg-40: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 40%, transparent); +// .bg-50: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 50%, transparent); +// .bg-60: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 60%, transparent); +// .bg-70: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 70%, transparent); +// .bg-80: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 80%, transparent); +// .bg-90: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 90%, transparent); +// .bg-100: background-color: var(--#{$prefix}bg-color); + +// [class^=".text-"]: color: var(--bs-text-color); +// .text-primary: --bs-text-color: var(--#{$prefix}primary-text); +// .text-10: color: color-mix(in oklch, var(--#{$prefix}text-color) 10%, transparent); +// .text-20: color: color-mix(in oklch, var(--#{$prefix}text-color) 20%, transparent); +// .text-30: color: color-mix(in oklch, var(--#{$prefix}text-color) 30%, transparent); +// .text-40: color: color-mix(in oklch, var(--#{$prefix}text-color) 40%, transparent); +// .text-50: color: color-mix(in oklch, var(--#{$prefix}text-color) 50%, transparent); +// .text-60: color: color-mix(in oklch, var(--#{$prefix}text-color) 60%, transparent); +// .text-70: color: color-mix(in oklch, var(--#{$prefix}text-color) 70%, transparent); +// .text-80: color: color-mix(in oklch, var(--#{$prefix}text-color) 80%, transparent); +// .text-90: color: color-mix(in oklch, var(--#{$prefix}text-color) 90%, transparent); +// .text-100: color: var(--#{$prefix}text-color); + +$color-bg: ( + "body": var(--#{$prefix}body-bg), + "secondary": var(--#{$prefix}body-secondary-bg), + "tertiary": var(--#{$prefix}body-tertiary-bg), +) !default; + +$color-text: ( + "body": var(--#{$prefix}body-color), + "secondary": var(--#{$prefix}body-secondary-color), + "tertiary": var(--#{$prefix}body-tertiary-color), +) !default; + +$color-border: ( + //... +) !default; + +$util-opacity: ( + "10": 0.1, + "20": 0.2, + "30": 0.3, + "40": 0.4, + "50": 0.5, + "60": 0.6, + "70": 0.7, + "80": 0.8, + "90": 0.9, + "100": 1 +) !default; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 85cd7010c8..a54e512f25 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -3,7 +3,7 @@ @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 @@ -15,7 +15,7 @@ $utilities: map.merge( 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, @@ -25,8 +25,8 @@ $utilities: map.merge( // scss-docs-end utils-aspect-ratio // scss-docs-start utils-float "float": ( - responsive: true, property: float, + responsive: true, values: ( start: left, end: right, @@ -47,7 +47,7 @@ $utilities: map.merge( none: none, ) ), - // scss-docs-end utils-object-fit + scss-docs-end utils-object-fit // Opacity utilities // scss-docs-start utils-opacity "opacity": ( @@ -98,10 +98,10 @@ $utilities: map.merge( // 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 @@ -146,14 +146,14 @@ $utilities: map.merge( ) ), "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), @@ -161,14 +161,14 @@ $utilities: map.merge( ) ), "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), @@ -181,29 +181,29 @@ $utilities: map.merge( 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 @@ -404,48 +404,48 @@ $utilities: map.merge( 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, @@ -591,21 +591,22 @@ $utilities: map.merge( 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, @@ -617,12 +618,14 @@ $utilities: map.merge( "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: ( @@ -649,15 +652,16 @@ $utilities: map.merge( 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: ( @@ -671,37 +675,54 @@ $utilities: map.merge( ), // scss-docs-end utils-links // scss-docs-start utils-bg-color - "background-color": ( + "bg-attr": ( + selector: "attr-starts", + class: "bg-", property: background-color, - 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)), - ) - ) + values: var(--#{$prefix}bg), ), + "bg-color": ( + // css-var: true, + property: --#{$prefix}bg, + class: bg, + // local-vars: ( + // "bg-opacity": 1 + // ), + values: theme-color-values("bg"), + ), + "bg-color-subtle": ( + property: --#{$prefix}bg, + class: bg-subtle, + values: theme-color-values("bg-subtle"), + ), + "bg-color-muted": ( + property: --#{$prefix}bg, + class: bg-muted, + values: theme-color-values("bg-muted"), + ), + + "bg-opacity": ( - css-var: true, - class: bg-opacity, + class: bg, + property: background-color, values: ( - 10: .1, - 25: .25, - 50: .5, - 75: .75, - 100: 1 + 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 - ), + // "subtle-background-color": ( + // property: background-color, + // class: bg, + // // values: $utilities-bg-subtle + // ), // scss-docs-end utils-bg-color "gradient": ( property: background-image, diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index 260f6dcc1d..1dcc45e227 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -7,64 +7,65 @@ // // 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-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-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 +// // 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; +// $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,") !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,") !default; // scss-docs-start form-validation-colors-dark @@ -79,9 +80,10 @@ $form-invalid-border-color-dark: $red-300 !default; // 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,") !default; $accordion-button-active-icon-dark: url("data:image/svg+xml,") !default; // scss-docs-end sass-dark-mode-vars diff --git a/scss/_variables.scss b/scss/_variables.scss index d35382628c..87701e8b00 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -31,38 +31,38 @@ $theme-colors: ( ) !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-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-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-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: ( @@ -145,25 +145,25 @@ $position-values: ( // Settings for the `` 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; @@ -249,7 +249,7 @@ $border-widths: ( 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 @@ -428,7 +428,7 @@ $list-inline-padding: .5rem !default; $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 @@ -552,7 +552,7 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default; $btn-link-color: var(--#{$prefix}link-color) !default; $btn-link-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; @@ -919,7 +919,7 @@ $navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .6 $navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default; $navbar-light-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,") !default; $navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default; $navbar-light-brand-color: $navbar-light-active-color !default; @@ -1090,7 +1090,7 @@ $accordion-button-color: var(--#{$prefix}body-color) !default; $accordion-button-bg: var(--#{$prefix}accordion-bg) !default; $accordion-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 @@ -1098,8 +1098,8 @@ $accordion-button-focus-border-color: $input-focus-border-color !default; // $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default; $accordion-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; diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss index 22212e3055..ba7f30ce6b 100644 --- a/scss/content/_reboot.scss +++ b/scss/content/_reboot.scss @@ -96,32 +96,38 @@ 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); } @@ -214,14 +220,14 @@ // // 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); @@ -248,11 +254,11 @@ // 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; } } diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss index f1134904b8..469a03b4eb 100644 --- a/scss/content/_tables.scss +++ b/scss/content/_tables.scss @@ -9,11 +9,12 @@ // 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}; diff --git a/scss/content/_type.scss b/scss/content/_type.scss index 87bffbf5e1..1aa8be73bb 100644 --- a/scss/content/_type.scss +++ b/scss/content/_type.scss @@ -52,13 +52,13 @@ // // Emphasis // - .small { - // @extend small; - } + // .small { + // @extend small; + // } - .mark { - // @extend mark; - } + // .mark { + // @extend mark; + // } // // Lists diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss index f419608381..f9a6739986 100644 --- a/scss/helpers/_colored-links.scss +++ b/scss/helpers/_colored-links.scss @@ -6,15 +6,15 @@ @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)); } } } @@ -22,14 +22,14 @@ // 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)); } } } diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss index b1014e79ae..f604a183a3 100644 --- a/scss/helpers/_icon-link.scss +++ b/scss/helpers/_icon-link.scss @@ -7,7 +7,7 @@ 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; diff --git a/scss/layout/_breakpoints.scss b/scss/layout/_breakpoints.scss index 04de580b32..fe6ca6a532 100644 --- a/scss/layout/_breakpoints.scss +++ b/scss/layout/_breakpoints.scss @@ -51,7 +51,7 @@ // >> 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. diff --git a/scss/layout/_containers.scss b/scss/layout/_containers.scss index 60bda18456..ff0ffd9087 100644 --- a/scss/layout/_containers.scss +++ b/scss/layout/_containers.scss @@ -41,7 +41,7 @@ @each $name, $width in $breakpoints { @if ($extend-breakpoint) { - .container#{breakpoint-infix($name, $breakpoints)} { + .container-#{breakpoint-infix($name, $breakpoints)} { @extend %responsive-container-#{$breakpoint}; } diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index 6a0ebdcfd6..307c4e789b 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -2,15 +2,38 @@ @use "../config" as *; // Utility generator -// Used to generate utilities & print utilities -@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) { - $values: map.get($utility, values); - // If the values are a list or string, convert it into a map - @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" { - $values: zip($values, $values); +// - 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) { + // Determine if we're generating a class, or an attribute selector + $selectorType: if(map.has-key($utility, selector), map.get($utility, selector), "class"); + // Then get the class name to use in a class (e.g., .class) or in a attribute selector (e.g., [class^="class"]) + $selectorClass: map.get($utility, class); + + // Get the list or map of values and ensure it's a map + $values: map.get($utility, values); + @if type-of($values) != "map" { + @if type-of($values) == "list" { + $list: (); + @each $value in $values { + $list: map.merge($list, ($value: $value)); + } + $values: $list; + } @else { + $values: (null: $values); + } } + // Calculate infix once, before the loop + $infix: if($infix == "", "", "-" + $infix); + @each $key, $value in $values { $properties: map.get($utility, property); @@ -19,20 +42,21 @@ $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 @@ -49,52 +73,76 @@ $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}\"]"; + } - @if $is-rtl == false { - /* rtl:end:remove */ + // @debug $utility; + // @debug $selectorType; + // @debug $selector; + // @debug $properties; + // @debug $values; + + #{$selector} { + @each $property in $properties { + #{$property}: $value; } } + + // @if $value != null { + // #{$selector} { + // @each $property in $properties { + // #{$property}: $value; + // } + // } + + // @if $is-css-var { + // #{$selector} { + // --#{$prefix}#{$css-variable-name}: #{$value}; + // } + + // @each $pseudo in $state { + // #{$selector}-#{$pseudo}:#{$pseudo} { + // --#{$prefix}#{$css-variable-name}: #{$value}; + // } + // } + // } @else { + // #{$selector} { + // @each $property in $properties { + // // @if $is-local-vars { + // // @each $local-var, $variable in $is-local-vars { + // // --#{$prefix}#{$local-var}: #{$variable}; + // // } + // // } + // #{$property}: $value; + // } + // } + + // // @each $pseudo in $state { + // // #{$selector}-#{$pseudo}:#{$pseudo} { + // // @each $property in $properties { + // // @if $is-local-vars { + // // @each $local-var, $variable in $is-local-vars { + // // --#{$prefix}#{$local-var}: #{$variable}; + // // } + // // } + // // #{$property}: $value; + // // } + // // } + // // } + // } + // } } } diff --git a/site/src/components/shortcodes/Example.astro b/site/src/components/shortcodes/Example.astro index 4fc26b60b1..34f67faa24 100644 --- a/site/src/components/shortcodes/Example.astro +++ b/site/src/components/shortcodes/Example.astro @@ -17,6 +17,10 @@ interface Props { * 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. */ @@ -42,6 +46,7 @@ const { addStackblitzJs = false, code, class: className, + style, id, lang = 'html', showMarkup = true, @@ -67,7 +72,7 @@ const simplifiedMarkup = markup {showPreview && ( -
+
diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx index 6378de3d2f..6e7611a616 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -22,7 +22,7 @@ If you are using the `.btn` class on its own, remember to at least define some e Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control. - ``), ` + ` `), ` `]} /> @@ -214,11 +214,11 @@ Here's an example of building a custom `.btn-*` modifier class as we do for the There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin. - +{/* */} - +{/* */} - +{/* */} ### Sass loops diff --git a/site/src/content/docs/customize/color.mdx b/site/src/content/docs/customize/color.mdx index ef0aab26c9..27e91c0b01 100644 --- a/site/src/content/docs/customize/color.mdx +++ b/site/src/content/docs/customize/color.mdx @@ -381,7 +381,7 @@ We use a subset of all colors to create a smaller color palette for generating c All these colors are available as a Sass map, `$theme-colors`. - +{/* */} Check out [our Sass maps and loops docs]([[docsref:/customize/sass#maps-and-loops]]) for how to modify these colors. @@ -450,7 +450,7 @@ Bootstrap's source Sass files include three maps to help you quickly and easily Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map: - +{/* */} 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. diff --git a/site/src/content/docs/utilities/background.mdx b/site/src/content/docs/utilities/background.mdx index 4cc6db4e29..2eb23218c1 100644 --- a/site/src/content/docs/utilities/background.mdx +++ b/site/src/content/docs/utilities/background.mdx @@ -82,45 +82,45 @@ In addition to the following Sass functionality, consider reading about our incl Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables. - +{/* */} - +{/* */} - +{/* */} Grayscale colors are also available, but only a subset are used to generate any utilities. - +{/* */} Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode: - +{/* */} - +{/* */} ### 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. - +{/* */} Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** - +{/* */} RGB colors are generated from a separate Sass map: - +{/* */} Background color opacities build on that with their own map that's consumed by the utilities API: - +{/* */} Color mode background colors are also available as a Sass map: - +{/* */} - +{/* */} ### Sass mixins @@ -128,10 +128,10 @@ Color mode background colors are also available as a Sass map: - +{/* */} ### 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]]) - +{/* */} diff --git a/site/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx index cb0affcc8b..15f454b5db 100644 --- a/site/src/content/docs/utilities/colors.mdx +++ b/site/src/content/docs/utilities/colors.mdx @@ -84,45 +84,45 @@ In addition to the following Sass functionality, consider reading about our incl Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables. - +{/* */} - +{/* */} Grayscale colors are also available, but only a subset are used to generate any utilities. - +{/* */} - +{/* */} Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode: - +{/* */} - +{/* */} ### 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. - +{/* */} Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** - +{/* */} RGB colors are generated from a separate Sass map: - +{/* */} Color opacities build on that with their own map that's consumed by the utilities API: - +{/* */} Color mode adaptive text colors are also available as a Sass map: - +{/* */} - +{/* */} ### Sass utilities API