mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-15 15:29:22 +01:00
WIP, needs to be broken apart
- button ideas - rewrite utility mixin - cleanup some code - remove hyphen from infix by default
This commit is contained in:
Mark Otto
parent
9c21403281
commit
0d74ed9d56
@ -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 {
|
||||
|
||||
@ -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
|
||||
|
||||
300
scss/_maps.scss
300
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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
135
scss/_root.scss
135
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
|
||||
}
|
||||
}
|
||||
|
||||
190
scss/_theme.scss
Normal file
190
scss/_theme.scss
Normal file
@ -0,0 +1,190 @@
|
||||
@use "config" as *;
|
||||
@use "colors" as *;
|
||||
|
||||
@function theme-color-values($key) {
|
||||
$result: ();
|
||||
|
||||
@each $color-name, $color-map in $new-theme-colors {
|
||||
@if map-has-key($color-map, $key) {
|
||||
$result: map-merge($result, ($color-name: map-get($color-map, $key)));
|
||||
}
|
||||
}
|
||||
|
||||
@return $result;
|
||||
}
|
||||
|
||||
// Recursive mixin to handle nested maps
|
||||
@mixin create-css-vars($map, $parent-key: "") {
|
||||
@each $key, $value in $map {
|
||||
$current-key: if($parent-key == "", $key, "#{$parent-key}-#{$key}");
|
||||
|
||||
@if type-of($value) == "map" {
|
||||
@include create-css-vars($value, $current-key);
|
||||
} @else {
|
||||
--#{$prefix}#{$current-key}: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
$new-theme-colors: (
|
||||
"primary": (
|
||||
"base": var(--#{$prefix}blue-500),
|
||||
"text": light-dark(var(--#{$prefix}blue-700), var(--#{$prefix}blue-300)),
|
||||
"bg": light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-500)),
|
||||
"bg-subtle": light-dark(var(--#{$prefix}blue-100), var(--#{$prefix}blue-900)),
|
||||
"bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
|
||||
"border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
|
||||
"focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, transparent),
|
||||
"contrast": var(--#{$prefix}white)
|
||||
),
|
||||
// "indigo": (
|
||||
// "base": var(--#{$prefix}indigo-500),
|
||||
// "text": light-dark(var(--#{$prefix}indigo-700), var(--#{$prefix}indigo-300)),
|
||||
// "bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)),
|
||||
// "bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)),
|
||||
// "bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
|
||||
// "border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
|
||||
// "contrast": var(--#{$prefix}white)
|
||||
// ),
|
||||
// "purple": (
|
||||
// "base": var(--#{$prefix}purple-500),
|
||||
// "text": light-dark(var(--#{$prefix}purple-700), var(--#{$prefix}purple-300)),
|
||||
// "bg": light-dark(var(--#{$prefix}purple-500), var(--#{$prefix}purple-500)),
|
||||
// "bg-subtle": light-dark(var(--#{$prefix}purple-100), var(--#{$prefix}purple-900)),
|
||||
// "bg-muted": light-dark(var(--#{$prefix}purple-200), var(--#{$prefix}purple-800)),
|
||||
// "border": light-dark(var(--#{$prefix}purple-300), var(--#{$prefix}purple-600)),
|
||||
// "contrast": var(--#{$prefix}white)
|
||||
// ),
|
||||
// "pink": (
|
||||
// "base": var(--#{$prefix}pink-500),
|
||||
// "text": light-dark(var(--#{$prefix}pink-700), var(--#{$prefix}pink-300)),
|
||||
// "bg": light-dark(var(--#{$prefix}pink-500), var(--#{$prefix}pink-500)),
|
||||
// "bg-subtle": light-dark(var(--#{$prefix}pink-100), var(--#{$prefix}pink-900)),
|
||||
// "bg-muted": light-dark(var(--#{$prefix}pink-200), var(--#{$prefix}pink-800)),
|
||||
// "border": light-dark(var(--#{$prefix}pink-300), var(--#{$prefix}pink-600)),
|
||||
// "contrast": var(--#{$prefix}white)
|
||||
// ),
|
||||
"danger": (
|
||||
"base": var(--#{$prefix}red-500),
|
||||
"text": light-dark(var(--#{$prefix}red-700), var(--#{$prefix}red-300)),
|
||||
"bg": light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-500)),
|
||||
"bg-subtle": light-dark(var(--#{$prefix}red-100), var(--#{$prefix}red-900)),
|
||||
"bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)),
|
||||
"border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
|
||||
"focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, transparent),
|
||||
"contrast": var(--#{$prefix}white)
|
||||
),
|
||||
// "orange": (
|
||||
// "base": var(--#{$prefix}orange-500),
|
||||
// "text": light-dark(var(--#{$prefix}orange-700), var(--#{$prefix}orange-300)),
|
||||
// "bg": light-dark(var(--#{$prefix}orange-500), var(--#{$prefix}orange-500)),
|
||||
// "bg-subtle": light-dark(var(--#{$prefix}orange-100), var(--#{$prefix}orange-900)),
|
||||
// "bg-muted": light-dark(var(--#{$prefix}orange-200), var(--#{$prefix}orange-800)),
|
||||
// "border": light-dark(var(--#{$prefix}orange-300), var(--#{$prefix}orange-600)),
|
||||
// "contrast": var(--#{$prefix}gray-900)
|
||||
// ),
|
||||
"warning": (
|
||||
"base": var(--#{$prefix}yellow-500),
|
||||
"text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-300)),
|
||||
"bg": light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-500)),
|
||||
"bg-subtle": light-dark(var(--#{$prefix}yellow-100), var(--#{$prefix}yellow-900)),
|
||||
"bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)),
|
||||
"border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
|
||||
"focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, transparent),
|
||||
"contrast": var(--#{$prefix}gray-900)
|
||||
),
|
||||
"success": (
|
||||
"base": var(--#{$prefix}green-500),
|
||||
"text": light-dark(var(--#{$prefix}green-700), var(--#{$prefix}green-300)),
|
||||
"bg": light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-500)),
|
||||
"bg-subtle": light-dark(var(--#{$prefix}green-100), var(--#{$prefix}green-900)),
|
||||
"bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)),
|
||||
"border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
|
||||
"focus-ring": color-mix(in oklch, var(--#{$prefix}green-500) 50%, transparent),
|
||||
"contrast": var(--#{$prefix}white)
|
||||
),
|
||||
// "teal": (
|
||||
// "base": var(--#{$prefix}teal-500),
|
||||
// "text": light-dark(var(--#{$prefix}teal-700), var(--#{$prefix}teal-300)),
|
||||
// "bg": light-dark(var(--#{$prefix}teal-500), var(--#{$prefix}teal-500)),
|
||||
// "bg-subtle": light-dark(var(--#{$prefix}teal-100), var(--#{$prefix}teal-900)),
|
||||
// "bg-muted": light-dark(var(--#{$prefix}teal-200), var(--#{$prefix}teal-800)),
|
||||
// "border": light-dark(var(--#{$prefix}teal-300), var(--#{$prefix}teal-600)),
|
||||
// "contrast": var(--#{$prefix}gray-900)
|
||||
// ),
|
||||
"info": (
|
||||
"base": var(--#{$prefix}cyan-500),
|
||||
"text": light-dark(var(--#{$prefix}cyan-700), var(--#{$prefix}cyan-300)),
|
||||
"bg": light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-500)),
|
||||
"bg-subtle": light-dark(var(--#{$prefix}cyan-100), var(--#{$prefix}cyan-900)),
|
||||
"bg-muted": light-dark(var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-800)),
|
||||
"border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)),
|
||||
"focus-ring": color-mix(in oklch, var(--#{$prefix}cyan-500) 50%, transparent),
|
||||
"contrast": var(--#{$prefix}gray-900)
|
||||
),
|
||||
"secondary": (
|
||||
"base": var(--#{$prefix}gray-500),
|
||||
"text": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
|
||||
"bg": light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-500)),
|
||||
"bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
|
||||
"bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
|
||||
"border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
|
||||
"focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, transparent),
|
||||
"contrast": var(--#{$prefix}gray-900)
|
||||
)
|
||||
) !default;
|
||||
|
||||
|
||||
// [class^=".bg-"]: background-color: var(--bs-bg-color);
|
||||
// .bg-primary: --bs-bg-color: var(--#{$prefix}primary-bg);
|
||||
// .bg-10: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 10%, transparent);
|
||||
// .bg-20: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 20%, transparent);
|
||||
// .bg-30: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 30%, transparent);
|
||||
// .bg-40: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 40%, transparent);
|
||||
// .bg-50: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 50%, transparent);
|
||||
// .bg-60: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 60%, transparent);
|
||||
// .bg-70: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 70%, transparent);
|
||||
// .bg-80: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 80%, transparent);
|
||||
// .bg-90: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 90%, transparent);
|
||||
// .bg-100: background-color: var(--#{$prefix}bg-color);
|
||||
|
||||
// [class^=".text-"]: color: var(--bs-text-color);
|
||||
// .text-primary: --bs-text-color: var(--#{$prefix}primary-text);
|
||||
// .text-10: color: color-mix(in oklch, var(--#{$prefix}text-color) 10%, transparent);
|
||||
// .text-20: color: color-mix(in oklch, var(--#{$prefix}text-color) 20%, transparent);
|
||||
// .text-30: color: color-mix(in oklch, var(--#{$prefix}text-color) 30%, transparent);
|
||||
// .text-40: color: color-mix(in oklch, var(--#{$prefix}text-color) 40%, transparent);
|
||||
// .text-50: color: color-mix(in oklch, var(--#{$prefix}text-color) 50%, transparent);
|
||||
// .text-60: color: color-mix(in oklch, var(--#{$prefix}text-color) 60%, transparent);
|
||||
// .text-70: color: color-mix(in oklch, var(--#{$prefix}text-color) 70%, transparent);
|
||||
// .text-80: color: color-mix(in oklch, var(--#{$prefix}text-color) 80%, transparent);
|
||||
// .text-90: color: color-mix(in oklch, var(--#{$prefix}text-color) 90%, transparent);
|
||||
// .text-100: color: var(--#{$prefix}text-color);
|
||||
|
||||
$color-bg: (
|
||||
"body": var(--#{$prefix}body-bg),
|
||||
"secondary": var(--#{$prefix}body-secondary-bg),
|
||||
"tertiary": var(--#{$prefix}body-tertiary-bg),
|
||||
) !default;
|
||||
|
||||
$color-text: (
|
||||
"body": var(--#{$prefix}body-color),
|
||||
"secondary": var(--#{$prefix}body-secondary-color),
|
||||
"tertiary": var(--#{$prefix}body-tertiary-color),
|
||||
) !default;
|
||||
|
||||
$color-border: (
|
||||
//...
|
||||
) !default;
|
||||
|
||||
$util-opacity: (
|
||||
"10": 0.1,
|
||||
"20": 0.2,
|
||||
"30": 0.3,
|
||||
"40": 0.4,
|
||||
"50": 0.5,
|
||||
"60": 0.6,
|
||||
"70": 0.7,
|
||||
"80": 0.8,
|
||||
"90": 0.9,
|
||||
"100": 1
|
||||
) !default;
|
||||
@ -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,
|
||||
|
||||
@ -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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
|
||||
|
||||
$form-switch-color-dark: rgba($white, .25) !default;
|
||||
$form-switch-color-dark: rgb(var(--#{$prefix}white), .25) !default;
|
||||
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
|
||||
|
||||
// scss-docs-start form-validation-colors-dark
|
||||
@ -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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
|
||||
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
|
||||
// scss-docs-end sass-dark-mode-vars
|
||||
|
||||
@ -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 `<body>` element.
|
||||
|
||||
$body-text-align: null !default;
|
||||
$body-color: $gray-900 !default;
|
||||
$body-bg: $white !default;
|
||||
$body-color: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-300)) !default;
|
||||
$body-bg: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900)) !default;
|
||||
|
||||
$body-secondary-color: rgba($body-color, .75) !default;
|
||||
$body-secondary-bg: $gray-200 !default;
|
||||
$body-secondary-color: rgb(var(--#{$prefix}body-color) / .75) !default;
|
||||
$body-secondary-bg: light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-800)) !default;
|
||||
|
||||
$body-tertiary-color: rgba($body-color, .5) !default;
|
||||
$body-tertiary-bg: $gray-100 !default;
|
||||
$body-tertiary-color: rgb(var(--#{$prefix}body-color) / .5) !default;
|
||||
$body-tertiary-bg: light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)) !default;
|
||||
|
||||
$body-emphasis-color: $black !default;
|
||||
$body-emphasis-color: light-dark($black, $white) !default;
|
||||
|
||||
// Links
|
||||
//
|
||||
// Style anchor elements.
|
||||
|
||||
$link-color: $primary !default;
|
||||
$link-color: var(--#{$prefix}primary-text) !default;
|
||||
$link-decoration: underline !default;
|
||||
$link-shade-percentage: 20% !default;
|
||||
$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
|
||||
$link-hover-color: color-mix(in srgb, #{$link-color}, $black #{$link-shade-percentage}) !default;
|
||||
$link-hover-decoration: null !default;
|
||||
|
||||
$stretched-link-pseudo-element: after !default;
|
||||
@ -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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
||||
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
|
||||
$navbar-light-brand-color: $navbar-light-active-color !default;
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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};
|
||||
|
||||
@ -52,13 +52,13 @@
|
||||
//
|
||||
// Emphasis
|
||||
//
|
||||
.small {
|
||||
// @extend small;
|
||||
}
|
||||
// .small {
|
||||
// @extend small;
|
||||
// }
|
||||
|
||||
.mark {
|
||||
// @extend mark;
|
||||
}
|
||||
// .mark {
|
||||
// @extend mark;
|
||||
// }
|
||||
|
||||
//
|
||||
// Lists
|
||||
|
||||
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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};
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
// // }
|
||||
// // }
|
||||
// // }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
<Code code={simplifiedMarkup} containerClass="bd-example-snippet" lang={lang}>
|
||||
{showPreview && (
|
||||
<Fragment slot="pre">
|
||||
<div id={id} class:list={['bd-example', className]}>
|
||||
<div id={id} class:list={['bd-example', className]} style={style}>
|
||||
<Fragment set:html={markup} />
|
||||
</div>
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
|
||||
|
||||
@ -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.
|
||||
|
||||
<Example code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn btn-${themeColor.name}">${themeColor.title}</button>`), `
|
||||
<Example class="grid gap-2" style="--bs-columns: 4;" code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn btn-${themeColor.name}-solid">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-outline">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-subtle">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-text">${themeColor.title}</button>`), `
|
||||
<button type="button" class="btn btn-link">Link</button>`]} />
|
||||
|
||||
<Callout name="warning-color-assistive-technologies" />
|
||||
@ -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.
|
||||
|
||||
<ScssDocs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" />
|
||||
{/* <ScssDocs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" /> */}
|
||||
|
||||
<ScssDocs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" />
|
||||
{/* <ScssDocs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" /> */}
|
||||
|
||||
<ScssDocs name="btn-size-mixin" file="scss/mixins/_buttons.scss" />
|
||||
{/* <ScssDocs name="btn-size-mixin" file="scss/mixins/_buttons.scss" /> */}
|
||||
|
||||
### Sass loops
|
||||
|
||||
|
||||
@ -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`.
|
||||
|
||||
<ScssDocs name="theme-colors-map" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="theme-colors-map" file="scss/_variables.scss" /> */}
|
||||
|
||||
Check out [our Sass maps and loops docs]([[docsref:/customize/sass#maps-and-loops]]) for how to modify these colors.
|
||||
|
||||
@ -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:
|
||||
|
||||
<ScssDocs name="colors-map" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="colors-map" file="scss/_variables.scss" /> */}
|
||||
|
||||
Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
<ScssDocs name="color-variables" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="color-variables" file="scss/_variables.scss" /> */}
|
||||
|
||||
<ScssDocs name="theme-color-variables" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="theme-color-variables" file="scss/_variables.scss" /> */}
|
||||
|
||||
<ScssDocs name="variable-gradient" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="variable-gradient" file="scss/_variables.scss" /> */}
|
||||
|
||||
Grayscale colors are also available, but only a subset are used to generate any utilities.
|
||||
|
||||
<ScssDocs name="gray-color-variables" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="gray-color-variables" file="scss/_variables.scss" /> */}
|
||||
|
||||
Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode:
|
||||
|
||||
<ScssDocs name="theme-bg-subtle-variables" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="theme-bg-subtle-variables" file="scss/_variables.scss" /> */}
|
||||
|
||||
<ScssDocs name="theme-bg-subtle-dark-variables" file="scss/_variables-dark.scss" />
|
||||
{/* <ScssDocs name="theme-bg-subtle-dark-variables" file="scss/_variables-dark.scss" /> */}
|
||||
|
||||
### Sass maps
|
||||
|
||||
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
|
||||
|
||||
<ScssDocs name="theme-colors-map" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="theme-colors-map" file="scss/_variables.scss" /> */}
|
||||
|
||||
Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**
|
||||
|
||||
<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="gray-colors-map" file="scss/_variables.scss" /> */}
|
||||
|
||||
RGB colors are generated from a separate Sass map:
|
||||
|
||||
<ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" />
|
||||
{/* <ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" /> */}
|
||||
|
||||
Background color opacities build on that with their own map that's consumed by the utilities API:
|
||||
|
||||
<ScssDocs name="utilities-bg-colors" file="scss/_maps.scss" />
|
||||
{/* <ScssDocs name="utilities-bg-colors" file="scss/_maps.scss" /> */}
|
||||
|
||||
Color mode background colors are also available as a Sass map:
|
||||
|
||||
<ScssDocs name="theme-bg-subtle-map" file="scss/_maps.scss" />
|
||||
{/* <ScssDocs name="theme-bg-subtle-map" file="scss/_maps.scss" /> */}
|
||||
|
||||
<ScssDocs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" />
|
||||
{/* <ScssDocs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" /> */}
|
||||
|
||||
### Sass mixins
|
||||
|
||||
@ -128,10 +128,10 @@ Color mode background colors are also available as a Sass map:
|
||||
|
||||
<ScssDocs name="gradient-bg-mixin" file="scss/mixins/_gradients.scss" />
|
||||
|
||||
<ScssDocs name="gradient-mixins" file="scss/mixins/_gradients.scss" />
|
||||
{/* <ScssDocs name="gradient-mixins" file="scss/mixins/_gradients.scss" /> */}
|
||||
|
||||
### Sass utilities API
|
||||
|
||||
Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
|
||||
|
||||
<ScssDocs name="utils-bg-color" file="scss/_utilities.scss" />
|
||||
{/* <ScssDocs name="utils-bg-color" file="scss/_utilities.scss" /> */}
|
||||
|
||||
@ -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.
|
||||
|
||||
<ScssDocs name="color-variables" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="color-variables" file="scss/_variables.scss" /> */}
|
||||
|
||||
<ScssDocs name="theme-color-variables" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="theme-color-variables" file="scss/_variables.scss" /> */}
|
||||
|
||||
Grayscale colors are also available, but only a subset are used to generate any utilities.
|
||||
|
||||
<ScssDocs name="gray-color-variables" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="gray-color-variables" file="scss/_variables.scss" /> */}
|
||||
|
||||
<ScssDocs name="theme-text-map" file="scss/_maps.scss" />
|
||||
{/* <ScssDocs name="theme-text-map" file="scss/_maps.scss" /> */}
|
||||
|
||||
Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode:
|
||||
|
||||
<ScssDocs name="theme-text-variables" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="theme-text-variables" file="scss/_variables.scss" /> */}
|
||||
|
||||
<ScssDocs name="theme-text-dark-variables" file="scss/_variables-dark.scss" />
|
||||
{/* <ScssDocs name="theme-text-dark-variables" file="scss/_variables-dark.scss" /> */}
|
||||
|
||||
### Sass maps
|
||||
|
||||
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
|
||||
|
||||
<ScssDocs name="theme-colors-map" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="theme-colors-map" file="scss/_variables.scss" /> */}
|
||||
|
||||
Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**
|
||||
|
||||
<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="gray-colors-map" file="scss/_variables.scss" /> */}
|
||||
|
||||
RGB colors are generated from a separate Sass map:
|
||||
|
||||
<ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" />
|
||||
{/* <ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" /> */}
|
||||
|
||||
Color opacities build on that with their own map that's consumed by the utilities API:
|
||||
|
||||
<ScssDocs name="utilities-text-colors" file="scss/_maps.scss" />
|
||||
{/* <ScssDocs name="utilities-text-colors" file="scss/_maps.scss" /> */}
|
||||
|
||||
Color mode adaptive text colors are also available as a Sass map:
|
||||
|
||||
<ScssDocs name="theme-text-map" file="scss/_maps.scss" />
|
||||
{/* <ScssDocs name="theme-text-map" file="scss/_maps.scss" /> */}
|
||||
|
||||
<ScssDocs name="theme-text-dark-map" file="scss/_maps.scss" />
|
||||
{/* <ScssDocs name="theme-text-dark-map" file="scss/_maps.scss" /> */}
|
||||
|
||||
### Sass utilities API
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user