From: Mark Otto Date: Sun, 22 Jun 2025 16:13:07 +0000 (-0700) Subject: Utilities, some helpers, and theme colors X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=3b2dc9a2e326f746bc6e4c1875a6797325e17c91;p=thirdparty%2Fbootstrap.git Utilities, some helpers, and theme colors --- diff --git a/scss/_maps.scss b/scss/_maps.scss index 02a7bf7c90..ca537bbc9b 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -1,180 +1,180 @@ -@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. - -// 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-bg-subtle-map -$theme-colors-bg-subtle: ( - "primary": $primary-bg-subtle, - "secondary": $secondary-bg-subtle, - "success": $success-bg-subtle, - "info": $info-bg-subtle, - "warning": $warning-bg-subtle, - "danger": $danger-bg-subtle, - "light": $light-bg-subtle, - "dark": $dark-bg-subtle, -) !default; -// scss-docs-end theme-bg-subtle-map - -// scss-docs-start theme-border-subtle-map -$theme-colors-border-subtle: ( - "primary": $primary-border-subtle, - "secondary": $secondary-border-subtle, - "success": $success-border-subtle, - "info": $info-border-subtle, - "warning": $warning-border-subtle, - "danger": $danger-border-subtle, - "light": $light-border-subtle, - "dark": $dark-border-subtle, -) !default; -// scss-docs-end theme-border-subtle-map - -$theme-colors-text-dark: null !default; -$theme-colors-bg-subtle-dark: null !default; -$theme-colors-border-subtle-dark: null !default; - -@if $enable-dark-mode { - // scss-docs-start theme-text-dark-map - $theme-colors-text-dark: ( - "primary": $primary-text-emphasis-dark, - "secondary": $secondary-text-emphasis-dark, - "success": $success-text-emphasis-dark, - "info": $info-text-emphasis-dark, - "warning": $warning-text-emphasis-dark, - "danger": $danger-text-emphasis-dark, - "light": $light-text-emphasis-dark, - "dark": $dark-text-emphasis-dark, - ) !default; - // scss-docs-end theme-text-dark-map - - // scss-docs-start theme-bg-subtle-dark-map - $theme-colors-bg-subtle-dark: ( - "primary": $primary-bg-subtle-dark, - "secondary": $secondary-bg-subtle-dark, - "success": $success-bg-subtle-dark, - "info": $info-bg-subtle-dark, - "warning": $warning-bg-subtle-dark, - "danger": $danger-bg-subtle-dark, - "light": $light-bg-subtle-dark, - "dark": $dark-bg-subtle-dark, - ) !default; - // scss-docs-end theme-bg-subtle-dark-map - - // scss-docs-start theme-border-subtle-dark-map - $theme-colors-border-subtle-dark: ( - "primary": $primary-border-subtle-dark, - "secondary": $secondary-border-subtle-dark, - "success": $success-border-subtle-dark, - "info": $info-border-subtle-dark, - "warning": $warning-border-subtle-dark, - "danger": $danger-border-subtle-dark, - "light": $light-border-subtle-dark, - "dark": $dark-border-subtle-dark, - ) !default; - // scss-docs-end theme-border-subtle-dark-map -} - -// Utilities maps -// -// Extends the default `$theme-colors` maps to help create our utilities. - -// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign. -// scss-docs-start utilities-colors -$utilities-colors: $theme-colors-rgb !default; -// scss-docs-end utilities-colors - -// scss-docs-start utilities-text-colors -$utilities-text: map.merge( - $utilities-colors, - ( - "black": to-rgb($black), - "white": to-rgb($white), - "body": to-rgb($body-color) - ) -) !default; -$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default; - -$utilities-text-emphasis-colors: ( - "primary-emphasis": var(--#{$prefix}primary-text-emphasis), - "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis), - "success-emphasis": var(--#{$prefix}success-text-emphasis), - "info-emphasis": var(--#{$prefix}info-text-emphasis), - "warning-emphasis": var(--#{$prefix}warning-text-emphasis), - "danger-emphasis": var(--#{$prefix}danger-text-emphasis), - "light-emphasis": var(--#{$prefix}light-text-emphasis), - "dark-emphasis": var(--#{$prefix}dark-text-emphasis) -) !default; -// scss-docs-end utilities-text-colors - -// scss-docs-start utilities-bg-colors -$utilities-bg: map.merge( - $utilities-colors, - ( - "black": to-rgb($black), - "white": to-rgb($white), - "body": to-rgb($body-bg) - ) -) !default; -$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default; - -$utilities-bg-subtle: ( - "primary-subtle": var(--#{$prefix}primary-bg-subtle), - "secondary-subtle": var(--#{$prefix}secondary-bg-subtle), - "success-subtle": var(--#{$prefix}success-bg-subtle), - "info-subtle": var(--#{$prefix}info-bg-subtle), - "warning-subtle": var(--#{$prefix}warning-bg-subtle), - "danger-subtle": var(--#{$prefix}danger-bg-subtle), - "light-subtle": var(--#{$prefix}light-bg-subtle), - "dark-subtle": var(--#{$prefix}dark-bg-subtle) -) !default; -// scss-docs-end utilities-bg-colors - -// scss-docs-start utilities-border-colors -$utilities-border: map.merge( - $utilities-colors, - ( - "black": to-rgb($black), - "white": to-rgb($white) - ) -) !default; -$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default; - -$utilities-border-subtle: ( - "primary-subtle": var(--#{$prefix}primary-border-subtle), - "secondary-subtle": var(--#{$prefix}secondary-border-subtle), - "success-subtle": var(--#{$prefix}success-border-subtle), - "info-subtle": var(--#{$prefix}info-border-subtle), - "warning-subtle": var(--#{$prefix}warning-border-subtle), - "danger-subtle": var(--#{$prefix}danger-border-subtle), - "light-subtle": var(--#{$prefix}light-border-subtle), - "dark-subtle": var(--#{$prefix}dark-border-subtle) -) !default; -// scss-docs-end utilities-border-colors - -$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default; - -$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; - -$gutters: $spacers !default; +// @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. + +// // 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-bg-subtle-map +// $theme-colors-bg-subtle: ( +// "primary": $primary-bg-subtle, +// "secondary": $secondary-bg-subtle, +// "success": $success-bg-subtle, +// "info": $info-bg-subtle, +// "warning": $warning-bg-subtle, +// "danger": $danger-bg-subtle, +// "light": $light-bg-subtle, +// "dark": $dark-bg-subtle, +// ) !default; +// // scss-docs-end theme-bg-subtle-map + +// // scss-docs-start theme-border-subtle-map +// $theme-colors-border-subtle: ( +// "primary": $primary-border-subtle, +// "secondary": $secondary-border-subtle, +// "success": $success-border-subtle, +// "info": $info-border-subtle, +// "warning": $warning-border-subtle, +// "danger": $danger-border-subtle, +// "light": $light-border-subtle, +// "dark": $dark-border-subtle, +// ) !default; +// // scss-docs-end theme-border-subtle-map + +// $theme-colors-text-dark: null !default; +// $theme-colors-bg-subtle-dark: null !default; +// $theme-colors-border-subtle-dark: null !default; + +// @if $enable-dark-mode { +// // scss-docs-start theme-text-dark-map +// $theme-colors-text-dark: ( +// "primary": $primary-text-emphasis-dark, +// "secondary": $secondary-text-emphasis-dark, +// "success": $success-text-emphasis-dark, +// "info": $info-text-emphasis-dark, +// "warning": $warning-text-emphasis-dark, +// "danger": $danger-text-emphasis-dark, +// "light": $light-text-emphasis-dark, +// "dark": $dark-text-emphasis-dark, +// ) !default; +// // scss-docs-end theme-text-dark-map + +// // scss-docs-start theme-bg-subtle-dark-map +// $theme-colors-bg-subtle-dark: ( +// "primary": $primary-bg-subtle-dark, +// "secondary": $secondary-bg-subtle-dark, +// "success": $success-bg-subtle-dark, +// "info": $info-bg-subtle-dark, +// "warning": $warning-bg-subtle-dark, +// "danger": $danger-bg-subtle-dark, +// "light": $light-bg-subtle-dark, +// "dark": $dark-bg-subtle-dark, +// ) !default; +// // scss-docs-end theme-bg-subtle-dark-map + +// // scss-docs-start theme-border-subtle-dark-map +// $theme-colors-border-subtle-dark: ( +// "primary": $primary-border-subtle-dark, +// "secondary": $secondary-border-subtle-dark, +// "success": $success-border-subtle-dark, +// "info": $info-border-subtle-dark, +// "warning": $warning-border-subtle-dark, +// "danger": $danger-border-subtle-dark, +// "light": $light-border-subtle-dark, +// "dark": $dark-border-subtle-dark, +// ) !default; +// // scss-docs-end theme-border-subtle-dark-map +// } + +// // Utilities maps +// // +// // Extends the default `$theme-colors` maps to help create our utilities. + +// // Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign. +// // scss-docs-start utilities-colors +// $utilities-colors: $theme-colors-rgb !default; +// // scss-docs-end utilities-colors + +// // scss-docs-start utilities-text-colors +// $utilities-text: map.merge( +// $utilities-colors, +// ( +// "black": to-rgb($black), +// "white": to-rgb($white), +// "body": to-rgb($body-color) +// ) +// ) !default; +// $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default; + +// $utilities-text-emphasis-colors: ( +// "primary-emphasis": var(--#{$prefix}primary-text-emphasis), +// "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis), +// "success-emphasis": var(--#{$prefix}success-text-emphasis), +// "info-emphasis": var(--#{$prefix}info-text-emphasis), +// "warning-emphasis": var(--#{$prefix}warning-text-emphasis), +// "danger-emphasis": var(--#{$prefix}danger-text-emphasis), +// "light-emphasis": var(--#{$prefix}light-text-emphasis), +// "dark-emphasis": var(--#{$prefix}dark-text-emphasis) +// ) !default; +// // scss-docs-end utilities-text-colors + +// // scss-docs-start utilities-bg-colors +// $utilities-bg: map.merge( +// $utilities-colors, +// ( +// "black": to-rgb($black), +// "white": to-rgb($white), +// "body": to-rgb($body-bg) +// ) +// ) !default; +// $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default; + +// $utilities-bg-subtle: ( +// "primary-subtle": var(--#{$prefix}primary-bg-subtle), +// "secondary-subtle": var(--#{$prefix}secondary-bg-subtle), +// "success-subtle": var(--#{$prefix}success-bg-subtle), +// "info-subtle": var(--#{$prefix}info-bg-subtle), +// "warning-subtle": var(--#{$prefix}warning-bg-subtle), +// "danger-subtle": var(--#{$prefix}danger-bg-subtle), +// "light-subtle": var(--#{$prefix}light-bg-subtle), +// "dark-subtle": var(--#{$prefix}dark-bg-subtle) +// ) !default; +// // scss-docs-end utilities-bg-colors + +// // scss-docs-start utilities-border-colors +// $utilities-border: map.merge( +// $utilities-colors, +// ( +// "black": to-rgb($black), +// "white": to-rgb($white) +// ) +// ) !default; +// $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default; + +// $utilities-border-subtle: ( +// "primary-subtle": var(--#{$prefix}primary-border-subtle), +// "secondary-subtle": var(--#{$prefix}secondary-border-subtle), +// "success-subtle": var(--#{$prefix}success-border-subtle), +// "info-subtle": var(--#{$prefix}info-border-subtle), +// "warning-subtle": var(--#{$prefix}warning-border-subtle), +// "danger-subtle": var(--#{$prefix}danger-border-subtle), +// "light-subtle": var(--#{$prefix}light-border-subtle), +// "dark-subtle": var(--#{$prefix}dark-border-subtle) +// ) !default; +// // scss-docs-end utilities-border-colors + +// $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default; + +// $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; + +// $gutters: $spacers !default; diff --git a/scss/_root.scss b/scss/_root.scss index 6b3073803d..55cd05e8cc 100644 --- a/scss/_root.scss +++ b/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}; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 46020e40a0..eb84b39096 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -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-color": ( - property: border-color, - class: border, - local-vars: ( - "border-opacity": 1 - ), - values: $utilities-border-colors + "border-y": ( + property: border-block, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + 0: 0, + ) ), - "subtle-border-color": ( + "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, - 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: --#{$prefix}color, + class: color, + values: map.merge(theme-color-values("text"), $theme-fgs), + ), + "color-opacity": ( + class: 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: ( - 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,37 +717,43 @@ $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, + class: bg, + property: background-color, values: ( - 10: .1, - 25: .25, - 50: .5, - 75: .75, - 100: 1 + 10: color-mix(in oklch, var(--#{$prefix}bg) 10%, transparent), + 20: color-mix(in oklch, var(--#{$prefix}bg) 20%, transparent), + 30: color-mix(in oklch, var(--#{$prefix}bg) 30%, transparent), + 40: color-mix(in oklch, var(--#{$prefix}bg) 40%, transparent), + 50: color-mix(in oklch, var(--#{$prefix}bg) 50%, transparent), + 60: color-mix(in oklch, var(--#{$prefix}bg) 60%, transparent), + 70: color-mix(in oklch, var(--#{$prefix}bg) 70%, transparent), + 80: color-mix(in oklch, var(--#{$prefix}bg) 80%, transparent), + 90: color-mix(in oklch, var(--#{$prefix}bg) 90%, transparent), + 100: var(--#{$prefix}bg), ) ), - "subtle-background-color": ( - property: background-color, - class: bg, - values: $utilities-bg-subtle - ), // scss-docs-end utils-bg-color "gradient": ( property: background-image, @@ -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) ) diff --git a/scss/_variables.scss b/scss/_variables.scss index 65e8374f72..3b8ad6c53a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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-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-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-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,") !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; diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index b41f4fa565..a65a895ca9 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -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 diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss index 472f5bf436..f9a6739986 100644 --- a/scss/helpers/_colored-links.scss +++ b/scss/helpers/_colored-links.scss @@ -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: 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); + @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: 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); + // 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 { - 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); + @if $link-shade-percentage != 0 { + &:hover, + &:focus { + color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity, .75)); + text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity, .75)); + } } } } diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss index 7043218c59..4c38c24b3e 100644 --- a/scss/utilities/_api.scss +++ b/scss/utilities/_api.scss @@ -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) { +@layer utilities { + // 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); + // 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); + // 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) { - @each $breakpoint in map.keys($grid-breakpoints) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + // 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); + @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"); + } } } }