mirror of https://github.com/twbs/bootstrap.git
Utilities, some helpers, and theme colors
BrowserStack / browserstack (push) Has been cancelled
Details
BrowserStack / browserstack (push) Has been cancelled
Details
This commit is contained in:
Mark Otto
parent
dc65ef49a9
commit
a66964b16e
320
scss/_maps.scss
320
scss/_maps.scss
|
|
@ -1,180 +1,180 @@
|
|||
@use "sass:map";
|
||||
@use "colors" as *;
|
||||
@use "functions" as *;
|
||||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
// @use "sass:map";
|
||||
// @use "colors" as *;
|
||||
// @use "functions" as *;
|
||||
// @use "config" as *;
|
||||
// @use "variables" as *;
|
||||
|
||||
// Re-assigned maps
|
||||
//
|
||||
// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
|
||||
// // Re-assigned maps
|
||||
// //
|
||||
// // 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;
|
||||
// scss-docs-end theme-colors-rgb
|
||||
// // scss-docs-start theme-colors-rgb
|
||||
// $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;
|
||||
|
|
|
|||
139
scss/_root.scss
139
scss/_root.scss
|
|
@ -2,10 +2,38 @@
|
|||
@use "colors" as *;
|
||||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
@use "maps" as *;
|
||||
@use "theme" as *;
|
||||
// @use "maps" as *;
|
||||
@use "vendor/rfs" as *;
|
||||
@use "mixins/color-mode" as *;
|
||||
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@each $color-group-name, $color-group in $all-colors {
|
||||
@if meta.type-of($color-group) == "map" {
|
||||
@each $color-name, $color-value in $color-group {
|
||||
--#{$prefix}#{$color-name}: #{$color-value};
|
||||
}
|
||||
} @else {
|
||||
--#{$prefix}#{$color-group-name}: #{$color-group};
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
--#{$prefix}#{$color}: #{$value};
|
||||
}
|
||||
|
||||
@each $color-name, $color-map in $new-theme-colors {
|
||||
@each $key, $value in $color-map {
|
||||
--#{$prefix}#{$color-name}-#{$key}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
--#{$prefix}black: #{$black};
|
||||
--#{$prefix}white: #{$white};
|
||||
}
|
||||
|
||||
:root,
|
||||
[data-bs-theme="light"] {
|
||||
// Note: Custom variable values only support SassScript inside `#{}`.
|
||||
|
|
@ -14,33 +42,33 @@
|
|||
//
|
||||
// Generate palettes for full colors, grays, and theme colors.
|
||||
|
||||
@each $color, $value in $colors {
|
||||
--#{$prefix}#{$color}: #{$value};
|
||||
}
|
||||
// @each $color, $value in $colors {
|
||||
// --#{$prefix}#{$color}: #{$value};
|
||||
// }
|
||||
|
||||
@each $color, $value in $grays {
|
||||
--#{$prefix}gray-#{$color}: #{$value};
|
||||
}
|
||||
// @each $color, $value in $grays {
|
||||
// --#{$prefix}gray-#{$color}: #{$value};
|
||||
// }
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
--#{$prefix}#{$color}: #{$value};
|
||||
}
|
||||
// @each $color, $value in $theme-colors {
|
||||
// --#{$prefix}#{$color}: #{$value};
|
||||
// }
|
||||
|
||||
@each $color, $value in $theme-colors-rgb {
|
||||
--#{$prefix}#{$color}-rgb: #{$value};
|
||||
}
|
||||
// @each $color, $value in $theme-colors-rgb {
|
||||
// --#{$prefix}#{$color}-rgb: #{$value};
|
||||
// }
|
||||
|
||||
@each $color, $value in $theme-colors-text {
|
||||
--#{$prefix}#{$color}-text-emphasis: #{$value};
|
||||
}
|
||||
// @each $color, $value in $theme-colors-text {
|
||||
// --#{$prefix}#{$color}-text-emphasis: #{$value};
|
||||
// }
|
||||
|
||||
@each $color, $value in $theme-colors-bg-subtle {
|
||||
--#{$prefix}#{$color}-bg-subtle: #{$value};
|
||||
}
|
||||
// @each $color, $value in $theme-colors-bg-subtle {
|
||||
// --#{$prefix}#{$color}-bg-subtle: #{$value};
|
||||
// }
|
||||
|
||||
@each $color, $value in $theme-colors-border-subtle {
|
||||
--#{$prefix}#{$color}-border-subtle: #{$value};
|
||||
}
|
||||
// @each $color, $value in $theme-colors-border-subtle {
|
||||
// --#{$prefix}#{$color}-border-subtle: #{$value};
|
||||
// }
|
||||
|
||||
--#{$prefix}white-rgb: #{to-rgb($white)};
|
||||
--#{$prefix}black-rgb: #{to-rgb($black)};
|
||||
|
|
@ -66,33 +94,52 @@
|
|||
--#{$prefix}body-text-align: #{$body-text-align};
|
||||
}
|
||||
|
||||
@each $key, $value in $theme-bgs {
|
||||
$key: if($key == null, "", "-" + $key);
|
||||
--#{$prefix}bg#{$key}: #{$value};
|
||||
}
|
||||
|
||||
@each $key, $value in $theme-fgs {
|
||||
$key: if($key == null, "", "-" + $key);
|
||||
--#{$prefix}fg#{$key}: #{$value};
|
||||
}
|
||||
|
||||
@each $key, $value in $theme-borders {
|
||||
$key: if($key == null, "", "-" + $key);
|
||||
--#{$prefix}border#{$key}: #{$value};
|
||||
}
|
||||
|
||||
--#{$prefix}body-color: #{$body-color};
|
||||
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
|
||||
--#{$prefix}body-bg: #{$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: #{$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-bg: #{$body-secondary-bg};
|
||||
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
|
||||
// --#{$prefix}secondary-color: #{$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}tertiary-color: #{$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-color: #{$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)};
|
||||
// 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-decoration: #{$link-decoration};
|
||||
// --#{$prefix}link-color: #{$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: #{$link-hover-color};
|
||||
// --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
|
||||
|
||||
--#{$prefix}link-color: light-dark(var(--#{$prefix}primary-base), var(--#{$prefix}primary-text));
|
||||
--#{$prefix}link-decoration: #{$link-decoration};
|
||||
--#{$prefix}link-hover-color: color-mix(in oklch, var(--#{$prefix}link-color) 90%, #000);
|
||||
|
||||
@if $link-hover-decoration != null {
|
||||
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
|
||||
|
|
@ -160,17 +207,17 @@
|
|||
--#{$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};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
@use "sass:map";
|
||||
@use "colors" as *;
|
||||
@use "config" as *;
|
||||
@use "colors" as *;
|
||||
@use "variables" as *;
|
||||
@use "functions" as *;
|
||||
@use "maps" as *;
|
||||
|
||||
// Utilities
|
||||
@use "theme" as *;
|
||||
|
||||
$utilities: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
|
|
@ -19,16 +17,23 @@ $utilities: map.merge(
|
|||
),
|
||||
// scss-docs-end utils-vertical-align
|
||||
// scss-docs-start utils-aspect-ratio
|
||||
"aspect-ratio": (
|
||||
"aspect-ratio-attr": (
|
||||
selector: "attr-includes",
|
||||
class: "ratio-",
|
||||
property: aspect-ratio,
|
||||
values: var(--#{$prefix}ratio),
|
||||
),
|
||||
"aspect-ratio": (
|
||||
// property: aspect-ratio,
|
||||
property: --#{$prefix}ratio,
|
||||
class: ratio,
|
||||
values: $aspect-ratios
|
||||
),
|
||||
// scss-docs-end utils-aspect-ratio
|
||||
// scss-docs-start utils-float
|
||||
"float": (
|
||||
responsive: true,
|
||||
property: float,
|
||||
responsive: true,
|
||||
values: (
|
||||
start: left,
|
||||
end: right,
|
||||
|
|
@ -83,7 +88,7 @@ $utilities: map.merge(
|
|||
print: true,
|
||||
property: display,
|
||||
class: d,
|
||||
values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
|
||||
values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex flow-root none
|
||||
),
|
||||
// scss-docs-end utils-display
|
||||
// scss-docs-start utils-shadow
|
||||
|
|
@ -100,10 +105,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
|
||||
|
|
@ -148,14 +153,15 @@ $utilities: map.merge(
|
|||
)
|
||||
),
|
||||
"border-top": (
|
||||
property: border-top,
|
||||
class: 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),
|
||||
|
|
@ -163,49 +169,56 @@ $utilities: map.merge(
|
|||
)
|
||||
),
|
||||
"border-bottom": (
|
||||
property: border-bottom,
|
||||
property: border-block-end,
|
||||
class: border-bottom,
|
||||
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),
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-y": (
|
||||
property: border-block,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-x": (
|
||||
property: border-inline,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-color": (
|
||||
property: border-color,
|
||||
class: border,
|
||||
local-vars: (
|
||||
"border-opacity": 1
|
||||
),
|
||||
values: $utilities-border-colors
|
||||
),
|
||||
"subtle-border-color": (
|
||||
property: border-color,
|
||||
class: border,
|
||||
values: $utilities-border-subtle
|
||||
values: theme-color-values("border")
|
||||
),
|
||||
"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
|
||||
|
|
@ -217,14 +230,25 @@ $utilities: map.merge(
|
|||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%,
|
||||
auto: auto
|
||||
auto: auto,
|
||||
min: min-content,
|
||||
max: max-content,
|
||||
fit: fit-content,
|
||||
)
|
||||
),
|
||||
"max-width": (
|
||||
property: max-width,
|
||||
class: mw,
|
||||
class: max-w,
|
||||
values: (100: 100%)
|
||||
),
|
||||
"min-width": (
|
||||
property: min-width,
|
||||
class: min-w,
|
||||
values: (
|
||||
0: 0,
|
||||
100: 100%
|
||||
)
|
||||
),
|
||||
"viewport-width": (
|
||||
property: width,
|
||||
class: vw,
|
||||
|
|
@ -243,14 +267,25 @@ $utilities: map.merge(
|
|||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%,
|
||||
auto: auto
|
||||
auto: auto,
|
||||
min: min-content,
|
||||
max: max-content,
|
||||
fit: fit-content,
|
||||
)
|
||||
),
|
||||
"max-height": (
|
||||
property: max-height,
|
||||
class: mh,
|
||||
class: max-h,
|
||||
values: (100: 100%)
|
||||
),
|
||||
"min-height": (
|
||||
property: min-height,
|
||||
class: min-h,
|
||||
values: (
|
||||
0: 0,
|
||||
100: 100%,
|
||||
),
|
||||
),
|
||||
"viewport-height": (
|
||||
property: height,
|
||||
class: vh,
|
||||
|
|
@ -311,6 +346,15 @@ $utilities: map.merge(
|
|||
evenly: space-evenly,
|
||||
)
|
||||
),
|
||||
"justify-self": (
|
||||
responsive: true,
|
||||
property: justify-self,
|
||||
values: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
)
|
||||
),
|
||||
"align-items": (
|
||||
responsive: true,
|
||||
property: align-items,
|
||||
|
|
@ -406,48 +450,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,
|
||||
|
|
@ -587,44 +631,43 @@ $utilities: map.merge(
|
|||
),
|
||||
// scss-docs-end utils-text
|
||||
// scss-docs-start utils-color
|
||||
"color-attr": (
|
||||
selector: "attr-includes",
|
||||
class: "color-",
|
||||
property: color,
|
||||
values: var(--#{$prefix}color),
|
||||
),
|
||||
"color": (
|
||||
property: color,
|
||||
class: text,
|
||||
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,
|
||||
)
|
||||
)
|
||||
property: --#{$prefix}color,
|
||||
class: color,
|
||||
values: map.merge(theme-color-values("text"), $theme-fgs),
|
||||
),
|
||||
"text-opacity": (
|
||||
css-var: true,
|
||||
class: text-opacity,
|
||||
"color-opacity": (
|
||||
class: color,
|
||||
property: color,
|
||||
values: (
|
||||
25: .25,
|
||||
50: .5,
|
||||
75: .75,
|
||||
100: 1
|
||||
10: color-mix(in oklch, var(--#{$prefix}color) 10%, transparent),
|
||||
20: color-mix(in oklch, var(--#{$prefix}color) 20%, transparent),
|
||||
30: color-mix(in oklch, var(--#{$prefix}color) 30%, transparent),
|
||||
40: color-mix(in oklch, var(--#{$prefix}color) 40%, transparent),
|
||||
50: color-mix(in oklch, var(--#{$prefix}color) 50%, transparent),
|
||||
60: color-mix(in oklch, var(--#{$prefix}color) 60%, transparent),
|
||||
70: color-mix(in oklch, var(--#{$prefix}color) 70%, transparent),
|
||||
80: color-mix(in oklch, var(--#{$prefix}color) 80%, transparent),
|
||||
90: color-mix(in oklch, var(--#{$prefix}color) 90%, transparent),
|
||||
100: var(--#{$prefix}color),
|
||||
)
|
||||
),
|
||||
"text-color": (
|
||||
property: color,
|
||||
class: text,
|
||||
values: $utilities-text-emphasis-colors
|
||||
"contrast-color": (
|
||||
property: --#{$prefix}color,
|
||||
class: color-on,
|
||||
values: theme-color-values("contrast"),
|
||||
),
|
||||
// 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: (
|
||||
|
|
@ -651,15 +694,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: (
|
||||
|
|
@ -673,36 +717,42 @@ $utilities: map.merge(
|
|||
),
|
||||
// scss-docs-end utils-links
|
||||
// scss-docs-start utils-bg-color
|
||||
"background-color": (
|
||||
"bg-attr": (
|
||||
selector: "attr-includes",
|
||||
class: "bg-",
|
||||
property: background-color,
|
||||
values: var(--#{$prefix}bg),
|
||||
),
|
||||
"bg-color": (
|
||||
property: --#{$prefix}bg,
|
||||
class: bg,
|
||||
local-vars: (
|
||||
"bg-opacity": 1
|
||||
),
|
||||
values: map.merge(
|
||||
$utilities-bg-colors,
|
||||
(
|
||||
"transparent": transparent,
|
||||
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
|
||||
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
|
||||
)
|
||||
)
|
||||
values: map.merge(theme-color-values("bg"), $theme-bgs),
|
||||
),
|
||||
"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,
|
||||
values: (
|
||||
10: .1,
|
||||
25: .25,
|
||||
50: .5,
|
||||
75: .75,
|
||||
100: 1
|
||||
)
|
||||
),
|
||||
"subtle-background-color": (
|
||||
property: background-color,
|
||||
class: bg,
|
||||
values: $utilities-bg-subtle
|
||||
property: background-color,
|
||||
values: (
|
||||
10: color-mix(in oklch, var(--#{$prefix}bg) 10%, transparent),
|
||||
20: color-mix(in oklch, var(--#{$prefix}bg) 20%, transparent),
|
||||
30: color-mix(in oklch, var(--#{$prefix}bg) 30%, transparent),
|
||||
40: color-mix(in oklch, var(--#{$prefix}bg) 40%, transparent),
|
||||
50: color-mix(in oklch, var(--#{$prefix}bg) 50%, transparent),
|
||||
60: color-mix(in oklch, var(--#{$prefix}bg) 60%, transparent),
|
||||
70: color-mix(in oklch, var(--#{$prefix}bg) 70%, transparent),
|
||||
80: color-mix(in oklch, var(--#{$prefix}bg) 80%, transparent),
|
||||
90: color-mix(in oklch, var(--#{$prefix}bg) 90%, transparent),
|
||||
100: var(--#{$prefix}bg),
|
||||
)
|
||||
),
|
||||
// scss-docs-end utils-bg-color
|
||||
"gradient": (
|
||||
|
|
@ -722,7 +772,7 @@ $utilities: map.merge(
|
|||
),
|
||||
// scss-docs-end utils-interaction
|
||||
// scss-docs-start utils-border-radius
|
||||
"rounded": (
|
||||
"border-radius": (
|
||||
property: border-radius,
|
||||
class: rounded,
|
||||
values: (
|
||||
|
|
@ -732,7 +782,7 @@ $utilities: map.merge(
|
|||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
5: var(--#{$prefix}border-radius-2xl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
|
|
@ -747,7 +797,7 @@ $utilities: map.merge(
|
|||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
5: var(--#{$prefix}border-radius-2xl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
|
|
@ -762,7 +812,7 @@ $utilities: map.merge(
|
|||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
5: var(--#{$prefix}border-radius-2xl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
|
|
@ -777,7 +827,7 @@ $utilities: map.merge(
|
|||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
5: var(--#{$prefix}border-radius-2xl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
|
|
@ -792,7 +842,7 @@ $utilities: map.merge(
|
|||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
5: var(--#{$prefix}border-radius-2xl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -33,38 +33,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: color.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: color.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: (
|
||||
|
|
@ -922,10 +922,10 @@ $navbar-toggler-border-radius: $btn-border-radius !default;
|
|||
$navbar-toggler-focus-width: $btn-focus-width !default;
|
||||
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
|
||||
|
||||
$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
|
||||
$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
|
||||
$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
|
||||
$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
|
||||
$navbar-light-color: color-mix(in srgb, var(--#{$prefix}fg-black) 65%, transparent) !default;
|
||||
$navbar-light-hover-color: color-mix(in srgb, var(--#{$prefix}fg-black) 80%, transparent) !default;
|
||||
$navbar-light-active-color: color-mix(in srgb, var(--#{$prefix}fg-black) 100%, transparent) !default;
|
||||
$navbar-light-disabled-color: color-mix(in srgb, var(--#{$prefix}fg-black) 30%, transparent) !default;
|
||||
$navbar-light-icon-color: rgba($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;
|
||||
|
|
@ -1105,8 +1105,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;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
@use "functions" as *;
|
||||
@use "maps" as *;
|
||||
// @use "maps" as *;
|
||||
|
||||
@forward "utilities"; // Make utilities available downstream
|
||||
@use "utilities" as *; // Bring utilities into the current namespace
|
||||
|
|
|
|||
|
|
@ -1,34 +1,36 @@
|
|||
@use "../colors" as *;
|
||||
@use "../config" as *;
|
||||
@use "../colors" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
|
||||
@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);
|
||||
@layer helpers {
|
||||
@each $color, $value in $theme-colors {
|
||||
.link-#{$color} {
|
||||
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: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
|
||||
text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// One-off special link helper as a bridge until v6
|
||||
.link-body-emphasis {
|
||||
color: 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 {
|
||||
$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, 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));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,56 +1,58 @@
|
|||
@use "sass:map";
|
||||
@use "sass:meta";
|
||||
@use "../variables" as *;
|
||||
@use "../config" as *;
|
||||
@use "../variables" as *;
|
||||
@use "../vendor/rfs" as *;
|
||||
@use "../layout/breakpoints" as *;
|
||||
@use "../mixins/utilities" as *;
|
||||
@use "../utilities" as *;
|
||||
|
||||
// Loop over each breakpoint
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
|
||||
// Generate media query if needed
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
// Loop over each utility property
|
||||
@each $key, $utility in $utilities {
|
||||
// The utility can be disabled with `false`, thus check if the utility is a map first
|
||||
// Only proceed if responsive media queries are enabled or if it's the base media query
|
||||
@if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
|
||||
@include generate-utility($utility, $infix);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// RFS rescaling
|
||||
@media (min-width: $rfs-mq-value) {
|
||||
@layer utilities {
|
||||
// Loop over each breakpoint
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
|
||||
// Generate media query if needed
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
// Loop over each utility property
|
||||
@each $key, $utility in $utilities {
|
||||
// The utility can be disabled with `false`, thus check if the utility is a map first
|
||||
// Only proceed if responsive media queries are enabled or if it's the base media query
|
||||
@if meta.type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
|
||||
@include generate-utility($utility, $infix, true);
|
||||
@if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
|
||||
@include generate-utility($utility, $infix);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// RFS rescaling
|
||||
@media (min-width: $rfs-mq-value) {
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
|
||||
// Loop over each utility property
|
||||
@each $key, $utility in $utilities {
|
||||
// The utility can be disabled with `false`, thus check if the utility is a map first
|
||||
// Only proceed if responsive media queries are enabled or if it's the base media query
|
||||
@if meta.type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
|
||||
@include generate-utility($utility, $infix, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Print utilities
|
||||
@media print {
|
||||
@each $key, $utility in $utilities {
|
||||
// The utility can be disabled with `false`, thus check if the utility is a map first
|
||||
// Then check if the utility needs print styles
|
||||
@if meta.type-of($utility) == "map" and map.get($utility, print) == true {
|
||||
@include generate-utility($utility, "-print");
|
||||
// Print utilities
|
||||
@media print {
|
||||
@each $key, $utility in $utilities {
|
||||
// The utility can be disabled with `false`, thus check if the utility is a map first
|
||||
// Then check if the utility needs print styles
|
||||
@if meta.type-of($utility) == "map" and map.get($utility, print) == true {
|
||||
@include generate-utility($utility, "-print");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue