mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 16:44:17 +02:00
Code Issues Releases Wiki Activity

Utilities, some helpers, and theme colors

Browse Source
This commit is contained in:
Mark Otto
2025-06-22 09:13:07 -07:00
parent f741a927e5
commit 08e16d03dd
7 changed files with 546 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

320
scss/_maps.scss
View File

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

139
scss/_root.scss
View File

@@ -2,10 +2,38 @@
@use "colors" as *; @use "colors" as *;
@use "config" as *; @use "config" as *;
@use "variables" as *; @use "variables" as *;
@use "maps" as *; @use "theme" as *;
// @use "maps" as *;
@use "vendor/rfs" as *; @use "vendor/rfs" as *;
@use "mixins/color-mode" 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, :root,
[data-bs-theme="light"] { [data-bs-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`. // Note: Custom variable values only support SassScript inside `#{}`.
@@ -14,33 +42,33 @@
// //
// Generate palettes for full colors, grays, and theme colors. // Generate palettes for full colors, grays, and theme colors.
@each $color, $value in $colors { // @each $color, $value in $colors {
--#{$prefix}#{$color}: #{$value}; // --#{$prefix}#{$color}: #{$value};
} // }
@each $color, $value in $grays { // @each $color, $value in $grays {
--#{$prefix}gray-#{$color}: #{$value}; // --#{$prefix}gray-#{$color}: #{$value};
} // }
@each $color, $value in $theme-colors { // @each $color, $value in $theme-colors {
--#{$prefix}#{$color}: #{$value}; // --#{$prefix}#{$color}: #{$value};
} // }
@each $color, $value in $theme-colors-rgb { // @each $color, $value in $theme-colors-rgb {
--#{$prefix}#{$color}-rgb: #{$value}; // --#{$prefix}#{$color}-rgb: #{$value};
} // }
@each $color, $value in $theme-colors-text { // @each $color, $value in $theme-colors-text {
--#{$prefix}#{$color}-text-emphasis: #{$value}; // --#{$prefix}#{$color}-text-emphasis: #{$value};
} // }
@each $color, $value in $theme-colors-bg-subtle { // @each $color, $value in $theme-colors-bg-subtle {
--#{$prefix}#{$color}-bg-subtle: #{$value}; // --#{$prefix}#{$color}-bg-subtle: #{$value};
} // }
@each $color, $value in $theme-colors-border-subtle { // @each $color, $value in $theme-colors-border-subtle {
--#{$prefix}#{$color}-border-subtle: #{$value}; // --#{$prefix}#{$color}-border-subtle: #{$value};
} // }
--#{$prefix}white-rgb: #{to-rgb($white)}; --#{$prefix}white-rgb: #{to-rgb($white)};
--#{$prefix}black-rgb: #{to-rgb($black)}; --#{$prefix}black-rgb: #{to-rgb($black)};
@@ -66,33 +94,52 @@
--#{$prefix}body-text-align: #{$body-text-align}; --#{$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: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)}; --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg: #{$body-bg}; --#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)}; --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
--#{$prefix}emphasis-color: #{$body-emphasis-color}; // --#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)}; // --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
--#{$prefix}secondary-color: #{$body-secondary-color}; // --#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)}; // --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg}; // --#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)}; // --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
--#{$prefix}tertiary-color: #{$body-tertiary-color}; // --#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)}; // --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg}; // --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)}; // --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
// scss-docs-end root-body-variables // scss-docs-end root-body-variables
--#{$prefix}heading-color: #{$headings-color}; --#{$prefix}heading-color: #{$headings-color};
--#{$prefix}link-color: #{$link-color}; // --#{$prefix}link-color: #{$link-color};
--#{$prefix}link-color-rgb: #{to-rgb($link-color)}; // --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
--#{$prefix}link-decoration: #{$link-decoration}; // --#{$prefix}link-decoration: #{$link-decoration};
--#{$prefix}link-hover-color: #{$link-hover-color}; // --#{$prefix}link-hover-color: #{$link-hover-color};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)}; // --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
--#{$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 { @if $link-hover-decoration != null {
--#{$prefix}link-hover-decoration: #{$link-hover-decoration}; --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
@@ -160,17 +207,17 @@
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark}; --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)}; --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
@each $color, $value in $theme-colors-text-dark { // @each $color, $value in $theme-colors-text-dark {
--#{$prefix}#{$color}-text-emphasis: #{$value}; // --#{$prefix}#{$color}-text-emphasis: #{$value};
} // }
@each $color, $value in $theme-colors-bg-subtle-dark { // @each $color, $value in $theme-colors-bg-subtle-dark {
--#{$prefix}#{$color}-bg-subtle: #{$value}; // --#{$prefix}#{$color}-bg-subtle: #{$value};
} // }
@each $color, $value in $theme-colors-border-subtle-dark { // @each $color, $value in $theme-colors-border-subtle-dark {
--#{$prefix}#{$color}-border-subtle: #{$value}; // --#{$prefix}#{$color}-border-subtle: #{$value};
} // }
--#{$prefix}heading-color: #{$headings-color-dark}; --#{$prefix}heading-color: #{$headings-color-dark};

344
scss/_utilities.scss
View File

@@ -1,11 +1,9 @@
@use "sass:map"; @use "sass:map";
@use "colors" as *;
@use "config" as *; @use "config" as *;
@use "colors" as *;
@use "variables" as *; @use "variables" as *;
@use "functions" as *; @use "functions" as *;
@use "maps" as *; @use "theme" as *;
// Utilities
$utilities: () !default; $utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default // stylelint-disable-next-line scss/dollar-variable-default
@@ -19,16 +17,23 @@ $utilities: map.merge(
), ),
// scss-docs-end utils-vertical-align // scss-docs-end utils-vertical-align
// scss-docs-start utils-aspect-ratio // scss-docs-start utils-aspect-ratio
"aspect-ratio": ( "aspect-ratio-attr": (
selector: "attr-includes",
class: "ratio-",
property: aspect-ratio, property: aspect-ratio,
values: var(--#{$prefix}ratio),
),
"aspect-ratio": (
// property: aspect-ratio,
property: --#{$prefix}ratio,
class: ratio, class: ratio,
values: $aspect-ratios values: $aspect-ratios
), ),
// scss-docs-end utils-aspect-ratio // scss-docs-end utils-aspect-ratio
// scss-docs-start utils-float // scss-docs-start utils-float
"float": ( "float": (
responsive: true,
property: float, property: float,
responsive: true,
values: ( values: (
start: left, start: left,
end: right, end: right,
@@ -83,7 +88,7 @@ $utilities: map.merge(
print: true, print: true,
property: display, property: display,
class: d, 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-end utils-display
// scss-docs-start utils-shadow // scss-docs-start utils-shadow
@@ -100,10 +105,10 @@ $utilities: map.merge(
// scss-docs-end utils-shadow // scss-docs-end utils-shadow
// scss-docs-start utils-focus-ring // scss-docs-start utils-focus-ring
"focus-ring": ( "focus-ring": (
css-var: true, // css-var: true,
css-variable-name: focus-ring-color, property: --#{$prefix}focus-ring-color,
class: focus-ring, class: focus-ring,
values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring") values: theme-color-values("focus-ring"),
), ),
// scss-docs-end utils-focus-ring // scss-docs-end utils-focus-ring
// scss-docs-start utils-position // scss-docs-start utils-position
@@ -148,14 +153,15 @@ $utilities: map.merge(
) )
), ),
"border-top": ( "border-top": (
property: border-top, class: border-top,
property: border-block-start,
values: ( values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0, 0: 0,
) )
), ),
"border-end": ( "border-end": (
property: border-right, property: border-inline-end,
class: border-end, class: border-end,
values: ( values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
@@ -163,49 +169,56 @@ $utilities: map.merge(
) )
), ),
"border-bottom": ( "border-bottom": (
property: border-bottom, property: border-block-end,
class: border-bottom,
values: ( values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0, 0: 0,
) )
), ),
"border-start": ( "border-start": (
property: border-left, property: border-inline-start,
class: border-start, class: border-start,
values: ( values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0, 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": ( "border-color": (
property: border-color, property: border-color,
class: border, class: border,
local-vars: ( values: theme-color-values("border")
"border-opacity": 1
),
values: $utilities-border-colors
),
"subtle-border-color": (
property: border-color,
class: border,
values: $utilities-border-subtle
), ),
"border-width": ( "border-width": (
property: border-width, property: border-width,
class: border, class: border,
values: $border-widths values: $border-widths
), ),
"border-opacity": ( // "border-opacity": (
css-var: true, // css-var: true,
class: border-opacity, // class: border-opacity,
values: ( // values: (
10: .1, // 10: .1,
25: .25, // 25: .25,
50: .5, // 50: .5,
75: .75, // 75: .75,
100: 1 // 100: 1
) // )
), // ),
// scss-docs-end utils-borders // scss-docs-end utils-borders
// Sizing utilities // Sizing utilities
// scss-docs-start utils-sizing // scss-docs-start utils-sizing
@@ -217,14 +230,25 @@ $utilities: map.merge(
50: 50%, 50: 50%,
75: 75%, 75: 75%,
100: 100%, 100: 100%,
auto: auto auto: auto,
min: min-content,
max: max-content,
fit: fit-content,
) )
), ),
"max-width": ( "max-width": (
property: max-width, property: max-width,
class: mw, class: max-w,
values: (100: 100%) values: (100: 100%)
), ),
"min-width": (
property: min-width,
class: min-w,
values: (
0: 0,
100: 100%
)
),
"viewport-width": ( "viewport-width": (
property: width, property: width,
class: vw, class: vw,
@@ -243,14 +267,25 @@ $utilities: map.merge(
50: 50%, 50: 50%,
75: 75%, 75: 75%,
100: 100%, 100: 100%,
auto: auto auto: auto,
min: min-content,
max: max-content,
fit: fit-content,
) )
), ),
"max-height": ( "max-height": (
property: max-height, property: max-height,
class: mh, class: max-h,
values: (100: 100%) values: (100: 100%)
), ),
"min-height": (
property: min-height,
class: min-h,
values: (
0: 0,
100: 100%,
),
),
"viewport-height": ( "viewport-height": (
property: height, property: height,
class: vh, class: vh,
@@ -311,6 +346,15 @@ $utilities: map.merge(
evenly: space-evenly, evenly: space-evenly,
) )
), ),
"justify-self": (
responsive: true,
property: justify-self,
values: (
start: flex-start,
end: flex-end,
center: center,
)
),
"align-items": ( "align-items": (
responsive: true, responsive: true,
property: align-items, property: align-items,
@@ -406,48 +450,48 @@ $utilities: map.merge(
values: map.merge($spacers, (auto: auto)) values: map.merge($spacers, (auto: auto))
), ),
// Negative margin utilities // Negative margin utilities
"negative-margin": ( // "negative-margin": (
responsive: true, // responsive: true,
property: margin, // property: margin,
class: m, // class: m,
values: $negative-spacers // values: $negative-spacers
), // ),
"negative-margin-x": ( // "negative-margin-x": (
responsive: true, // responsive: true,
property: margin-right margin-left, // property: margin-right margin-left,
class: mx, // class: mx,
values: $negative-spacers // values: $negative-spacers
), // ),
"negative-margin-y": ( // "negative-margin-y": (
responsive: true, // responsive: true,
property: margin-top margin-bottom, // property: margin-top margin-bottom,
class: my, // class: my,
values: $negative-spacers // values: $negative-spacers
), // ),
"negative-margin-top": ( // "negative-margin-top": (
responsive: true, // responsive: true,
property: margin-top, // property: margin-top,
class: mt, // class: mt,
values: $negative-spacers // values: $negative-spacers
), // ),
"negative-margin-end": ( // "negative-margin-end": (
responsive: true, // responsive: true,
property: margin-right, // property: margin-right,
class: me, // class: me,
values: $negative-spacers // values: $negative-spacers
), // ),
"negative-margin-bottom": ( // "negative-margin-bottom": (
responsive: true, // responsive: true,
property: margin-bottom, // property: margin-bottom,
class: mb, // class: mb,
values: $negative-spacers // values: $negative-spacers
), // ),
"negative-margin-start": ( // "negative-margin-start": (
responsive: true, // responsive: true,
property: margin-left, // property: margin-left,
class: ms, // class: ms,
values: $negative-spacers // values: $negative-spacers
), // ),
// Padding utilities // Padding utilities
"padding": ( "padding": (
responsive: true, responsive: true,
@@ -587,44 +631,43 @@ $utilities: map.merge(
), ),
// scss-docs-end utils-text // scss-docs-end utils-text
// scss-docs-start utils-color // scss-docs-start utils-color
"color-attr": (
selector: "attr-includes",
class: "color-",
property: color,
values: var(--#{$prefix}color),
),
"color": ( "color": (
property: --#{$prefix}color,
class: color,
values: map.merge(theme-color-values("text"), $theme-fgs),
),
"color-opacity": (
class: color,
property: 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,
)
)
),
"text-opacity": (
css-var: true,
class: text-opacity,
values: ( values: (
25: .25, 10: color-mix(in oklch, var(--#{$prefix}color) 10%, transparent),
50: .5, 20: color-mix(in oklch, var(--#{$prefix}color) 20%, transparent),
75: .75, 30: color-mix(in oklch, var(--#{$prefix}color) 30%, transparent),
100: 1 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": ( "contrast-color": (
property: color, property: --#{$prefix}color,
class: text, class: color-on,
values: $utilities-text-emphasis-colors values: theme-color-values("contrast"),
), ),
// scss-docs-end utils-color // scss-docs-end utils-color
// scss-docs-start utils-links // scss-docs-start utils-links
"link-opacity": ( "link-opacity": (
css-var: true, property: --#{$prefix}link-opacity,
// css-var: true,
class: link-opacity, class: link-opacity,
state: hover, state: hover,
values: ( values: (
@@ -651,15 +694,16 @@ $utilities: map.merge(
local-vars: ( local-vars: (
"link-underline-opacity": 1 "link-underline-opacity": 1
), ),
values: map.merge( // values: map.merge(
$utilities-links-underline, // $utilities-links-underline,
( // (
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)), // // null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
) // )
) // )
), ),
"link-underline-opacity": ( "link-underline-opacity": (
css-var: true, // css-var: true,
property: --#{$prefix}link-underline-opacity,
class: link-underline-opacity, class: link-underline-opacity,
state: hover, state: hover,
values: ( values: (
@@ -673,36 +717,42 @@ $utilities: map.merge(
), ),
// scss-docs-end utils-links // scss-docs-end utils-links
// scss-docs-start utils-bg-color // scss-docs-start utils-bg-color
"background-color": ( "bg-attr": (
selector: "attr-includes",
class: "bg-",
property: background-color, property: background-color,
class: bg, values: var(--#{$prefix}bg),
local-vars: (
"bg-opacity": 1
), ),
values: map.merge( "bg-color": (
$utilities-bg-colors, property: --#{$prefix}bg,
( class: bg,
"transparent": transparent, values: map.merge(theme-color-values("bg"), $theme-bgs),
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)), ),
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)), "bg-color-subtle": (
) property: --#{$prefix}bg,
) class: bg-subtle,
values: theme-color-values("bg-subtle"),
),
"bg-color-muted": (
property: --#{$prefix}bg,
class: bg-muted,
values: theme-color-values("bg-muted"),
), ),
"bg-opacity": ( "bg-opacity": (
css-var: true,
class: bg-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
"subtle-background-color": (
property: background-color,
class: bg, 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 // scss-docs-end utils-bg-color
"gradient": ( "gradient": (
@@ -722,7 +772,7 @@ $utilities: map.merge(
), ),
// scss-docs-end utils-interaction // scss-docs-end utils-interaction
// scss-docs-start utils-border-radius // scss-docs-start utils-border-radius
"rounded": ( "border-radius": (
property: border-radius, property: border-radius,
class: rounded, class: rounded,
values: ( values: (
@@ -732,7 +782,7 @@ $utilities: map.merge(
2: var(--#{$prefix}border-radius), 2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg), 3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl), 4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl), 5: var(--#{$prefix}border-radius-2xl),
circle: 50%, circle: 50%,
pill: var(--#{$prefix}border-radius-pill) pill: var(--#{$prefix}border-radius-pill)
) )
@@ -747,7 +797,7 @@ $utilities: map.merge(
2: var(--#{$prefix}border-radius), 2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg), 3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl), 4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl), 5: var(--#{$prefix}border-radius-2xl),
circle: 50%, circle: 50%,
pill: var(--#{$prefix}border-radius-pill) pill: var(--#{$prefix}border-radius-pill)
) )
@@ -762,7 +812,7 @@ $utilities: map.merge(
2: var(--#{$prefix}border-radius), 2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg), 3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl), 4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl), 5: var(--#{$prefix}border-radius-2xl),
circle: 50%, circle: 50%,
pill: var(--#{$prefix}border-radius-pill) pill: var(--#{$prefix}border-radius-pill)
) )
@@ -777,7 +827,7 @@ $utilities: map.merge(
2: var(--#{$prefix}border-radius), 2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg), 3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl), 4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl), 5: var(--#{$prefix}border-radius-2xl),
circle: 50%, circle: 50%,
pill: var(--#{$prefix}border-radius-pill) pill: var(--#{$prefix}border-radius-pill)
) )
@@ -792,7 +842,7 @@ $utilities: map.merge(
2: var(--#{$prefix}border-radius), 2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg), 3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl), 4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl), 5: var(--#{$prefix}border-radius-2xl),
circle: 50%, circle: 50%,
pill: var(--#{$prefix}border-radius-pill) pill: var(--#{$prefix}border-radius-pill)
) )

72
scss/_variables.scss
View File

@@ -33,38 +33,38 @@ $theme-colors: (
) !default; ) !default;
// scss-docs-end theme-colors-map // scss-docs-end theme-colors-map
// scss-docs-start theme-text-variables // // scss-docs-start theme-text-variables
$primary-text-emphasis: shade-color($primary, 60%) !default; // $primary-text-emphasis: shade-color($primary, 60%) !default;
$secondary-text-emphasis: shade-color($secondary, 60%) !default; // $secondary-text-emphasis: shade-color($secondary, 60%) !default;
$success-text-emphasis: shade-color($success, 60%) !default; // $success-text-emphasis: shade-color($success, 60%) !default;
$info-text-emphasis: shade-color($info, 60%) !default; // $info-text-emphasis: shade-color($info, 60%) !default;
$warning-text-emphasis: shade-color($warning, 60%) !default; // $warning-text-emphasis: shade-color($warning, 60%) !default;
$danger-text-emphasis: shade-color($danger, 60%) !default; // $danger-text-emphasis: shade-color($danger, 60%) !default;
$light-text-emphasis: $gray-700 !default; // $light-text-emphasis: $gray-700 !default;
$dark-text-emphasis: $gray-700 !default; // $dark-text-emphasis: $gray-700 !default;
// scss-docs-end theme-text-variables // // scss-docs-end theme-text-variables
// scss-docs-start theme-bg-subtle-variables // // scss-docs-start theme-bg-subtle-variables
$primary-bg-subtle: tint-color($primary, 80%) !default; // $primary-bg-subtle: tint-color($primary, 80%) !default;
$secondary-bg-subtle: tint-color($secondary, 80%) !default; // $secondary-bg-subtle: tint-color($secondary, 80%) !default;
$success-bg-subtle: tint-color($success, 80%) !default; // $success-bg-subtle: tint-color($success, 80%) !default;
$info-bg-subtle: tint-color($info, 80%) !default; // $info-bg-subtle: tint-color($info, 80%) !default;
$warning-bg-subtle: tint-color($warning, 80%) !default; // $warning-bg-subtle: tint-color($warning, 80%) !default;
$danger-bg-subtle: tint-color($danger, 80%) !default; // $danger-bg-subtle: tint-color($danger, 80%) !default;
$light-bg-subtle: color.mix($gray-100, $white) !default; // $light-bg-subtle: color.mix($gray-100, $white) !default;
$dark-bg-subtle: $gray-400 !default; // $dark-bg-subtle: $gray-400 !default;
// scss-docs-end theme-bg-subtle-variables // // scss-docs-end theme-bg-subtle-variables
// scss-docs-start theme-border-subtle-variables // // scss-docs-start theme-border-subtle-variables
$primary-border-subtle: tint-color($primary, 60%) !default; // $primary-border-subtle: tint-color($primary, 60%) !default;
$secondary-border-subtle: tint-color($secondary, 60%) !default; // $secondary-border-subtle: tint-color($secondary, 60%) !default;
$success-border-subtle: tint-color($success, 60%) !default; // $success-border-subtle: tint-color($success, 60%) !default;
$info-border-subtle: tint-color($info, 60%) !default; // $info-border-subtle: tint-color($info, 60%) !default;
$warning-border-subtle: tint-color($warning, 60%) !default; // $warning-border-subtle: tint-color($warning, 60%) !default;
$danger-border-subtle: tint-color($danger, 60%) !default; // $danger-border-subtle: tint-color($danger, 60%) !default;
$light-border-subtle: $gray-200 !default; // $light-border-subtle: $gray-200 !default;
$dark-border-subtle: $gray-500 !default; // $dark-border-subtle: $gray-500 !default;
// scss-docs-end theme-border-subtle-variables // // scss-docs-end theme-border-subtle-variables
// Characters which are escaped by the escape-svg function // Characters which are escaped by the escape-svg function
$escaped-characters: ( $escaped-characters: (
@@ -922,10 +922,10 @@ $navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-toggler-focus-width: $btn-focus-width !default; $navbar-toggler-focus-width: $btn-focus-width !default;
$navbar-toggler-transition: box-shadow .15s ease-in-out !default; $navbar-toggler-transition: box-shadow .15s ease-in-out !default;
$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default; $navbar-light-color: color-mix(in srgb, var(--#{$prefix}fg-black) 65%, transparent) !default;
$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default; $navbar-light-hover-color: color-mix(in srgb, var(--#{$prefix}fg-black) 80%, transparent) !default;
$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default; $navbar-light-active-color: color-mix(in srgb, var(--#{$prefix}fg-black) 100%, transparent) !default;
$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !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-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-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default; $navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
@@ -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-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default; $accordion-icon-width: 1.25rem !default;
$accordion-icon-color: $body-color !default; $accordion-icon-color: var(--#{$prefix}body-color) !default;
$accordion-icon-active-color: $primary-text-emphasis !default; $accordion-icon-active-color: var(--#{$prefix}primary-text-emphasis) !default;
$accordion-icon-transition: transform .2s ease-in-out !default; $accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default; $accordion-icon-transform: rotate(-180deg) !default;

2
scss/bootstrap-grid.scss vendored
View File

@@ -7,7 +7,7 @@
@use "config" as *; @use "config" as *;
@use "variables" as *; @use "variables" as *;
@use "functions" as *; @use "functions" as *;
@use "maps" as *; // @use "maps" as *;
@forward "utilities"; // Make utilities available downstream @forward "utilities"; // Make utilities available downstream
@use "utilities" as *; // Bring utilities into the current namespace @use "utilities" as *; // Bring utilities into the current namespace

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

@@ -1,34 +1,36 @@
@use "../colors" as *;
@use "../config" as *; @use "../config" as *;
@use "../colors" as *;
@use "../variables" as *; @use "../variables" as *;
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors { @layer helpers {
@each $color, $value in $theme-colors {
.link-#{$color} { .link-#{$color} {
color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-underline-opacity));
@if $link-shade-percentage != 0 { @if $link-shade-percentage != 0 {
&:hover, &:hover,
&:focus { &:focus {
$hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
}
} }
} }
} }
}
// One-off special link helper as a bridge until v6 // One-off special link helper as a bridge until v6
.link-body-emphasis { .link-body-emphasis {
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity));
text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity));
@if $link-shade-percentage != 0 { @if $link-shade-percentage != 0 {
&:hover, &:hover,
&:focus { &:focus {
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null); color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity, .75));
text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null); text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity, .75));
}
} }
} }
} }

20
scss/utilities/_api.scss
View File

@@ -1,14 +1,15 @@
@use "sass:map"; @use "sass:map";
@use "sass:meta"; @use "sass:meta";
@use "../variables" as *;
@use "../config" as *; @use "../config" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *; @use "../vendor/rfs" as *;
@use "../layout/breakpoints" as *; @use "../layout/breakpoints" as *;
@use "../mixins/utilities" as *; @use "../mixins/utilities" as *;
@use "../utilities" as *; @use "../utilities" as *;
// Loop over each breakpoint @layer utilities {
@each $breakpoint in map.keys($grid-breakpoints) { // Loop over each breakpoint
@each $breakpoint in map.keys($grid-breakpoints) {
// Generate media query if needed // Generate media query if needed
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
@@ -23,10 +24,10 @@
} }
} }
} }
} }
// RFS rescaling // RFS rescaling
@media (min-width: $rfs-mq-value) { @media (min-width: $rfs-mq-value) {
@each $breakpoint in map.keys($grid-breakpoints) { @each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@@ -41,11 +42,11 @@
} }
} }
} }
} }
// Print utilities // Print utilities
@media print { @media print {
@each $key, $utility in $utilities { @each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first // The utility can be disabled with `false`, thus check if the utility is a map first
// Then check if the utility needs print styles // Then check if the utility needs print styles
@@ -53,4 +54,5 @@
@include generate-utility($utility, "-print"); @include generate-utility($utility, "-print");
} }
} }
}
} }