aboutsummaryrefslogtreecommitdiff
path: root/scss/_utilities.scss
diff options
context:
space:
mode:
Diffstat (limited to 'scss/_utilities.scss')
-rw-r--r--scss/_utilities.scss242
1 files changed, 209 insertions, 33 deletions
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 960d6f1ad..696f906ec 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -1,5 +1,3 @@
-// stylelint-disable indentation
-
// Utilities
$utilities: () !default;
@@ -24,6 +22,20 @@ $utilities: map-merge(
)
),
// scss-docs-end utils-float
+ // Object Fit utilities
+ // scss-docs-start utils-object-fit
+ "object-fit": (
+ responsive: true,
+ property: object-fit,
+ values: (
+ contain: contain,
+ cover: cover,
+ fill: fill,
+ scale: scale-down,
+ none: none,
+ )
+ ),
+ // scss-docs-end utils-object-fit
// Opacity utilities
// scss-docs-start utils-opacity
"opacity": (
@@ -42,6 +54,14 @@ $utilities: map-merge(
property: overflow,
values: auto hidden visible scroll,
),
+ "overflow-x": (
+ property: overflow-x,
+ values: auto hidden visible scroll,
+ ),
+ "overflow-y": (
+ property: overflow-y,
+ values: auto hidden visible scroll,
+ ),
// scss-docs-end utils-overflow
// scss-docs-start utils-display
"display": (
@@ -49,7 +69,7 @@ $utilities: map-merge(
print: true,
property: display,
class: d,
- values: inline inline-block block 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 none
),
// scss-docs-end utils-display
// scss-docs-start utils-shadow
@@ -57,13 +77,21 @@ $utilities: map-merge(
property: box-shadow,
class: shadow,
values: (
- null: $box-shadow,
- sm: $box-shadow-sm,
- lg: $box-shadow-lg,
+ null: var(--#{$prefix}box-shadow),
+ sm: var(--#{$prefix}box-shadow-sm),
+ lg: var(--#{$prefix}box-shadow-lg),
none: none,
)
),
// scss-docs-end utils-shadow
+ // scss-docs-start utils-focus-ring
+ "focus-ring": (
+ css-var: true,
+ css-variable-name: focus-ring-color,
+ class: focus-ring,
+ values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
+ ),
+ // scss-docs-end utils-focus-ring
// scss-docs-start utils-position
"position": (
property: position,
@@ -101,14 +129,14 @@ $utilities: map-merge(
"border": (
property: border,
values: (
- null: $border-width solid $border-color,
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-top": (
property: border-top,
values: (
- null: $border-width solid $border-color,
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
@@ -116,14 +144,14 @@ $utilities: map-merge(
property: border-right,
class: border-end,
values: (
- null: $border-width solid $border-color,
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-bottom": (
property: border-bottom,
values: (
- null: $border-width solid $border-color,
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
@@ -131,20 +159,39 @@ $utilities: map-merge(
property: border-left,
class: border-start,
values: (
- null: $border-width solid $border-color,
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-color": (
property: border-color,
class: border,
- values: map-merge($theme-colors, ("white": $white))
+ local-vars: (
+ "border-opacity": 1
+ ),
+ values: $utilities-border-colors
+ ),
+ "subtle-border-color": (
+ property: border-color,
+ class: border,
+ values: $utilities-border-subtle
),
"border-width": (
property: border-width,
class: border,
values: $border-widths
),
+ "border-opacity": (
+ css-var: true,
+ class: border-opacity,
+ values: (
+ 10: .1,
+ 25: .25,
+ 50: .5,
+ 75: .75,
+ 100: 1
+ )
+ ),
// scss-docs-end utils-borders
// Sizing utilities
// scss-docs-start utils-sizing
@@ -238,12 +285,6 @@ $utilities: map-merge(
class: flex,
values: wrap nowrap wrap-reverse
),
- "gap": (
- responsive: true,
- property: gap,
- class: gap,
- values: $spacers
- ),
"justify-content": (
responsive: true,
property: justify-content,
@@ -436,13 +477,32 @@ $utilities: map-merge(
class: ps,
values: $spacers
),
+ // Gap utility
+ "gap": (
+ responsive: true,
+ property: gap,
+ class: gap,
+ values: $spacers
+ ),
+ "row-gap": (
+ responsive: true,
+ property: row-gap,
+ class: row-gap,
+ values: $spacers
+ ),
+ "column-gap": (
+ responsive: true,
+ property: column-gap,
+ class: column-gap,
+ values: $spacers
+ ),
// scss-docs-end utils-spacing
// Text
// scss-docs-start utils-text
"font-family": (
property: font-family,
class: font,
- values: (monospace: var(--#{$variable-prefix}font-monospace))
+ values: (monospace: var(--#{$prefix}font-monospace))
),
"font-size": (
rfs: true,
@@ -459,9 +519,11 @@ $utilities: map-merge(
property: font-weight,
class: fw,
values: (
- light: $font-weight-light,
lighter: $font-weight-lighter,
+ light: $font-weight-light,
normal: $font-weight-normal,
+ medium: $font-weight-medium,
+ semibold: $font-weight-semibold,
bold: $font-weight-bold,
bolder: $font-weight-bolder
)
@@ -520,9 +582,12 @@ $utilities: map-merge(
values: map-merge(
$utilities-text-colors,
(
- "muted": $text-muted,
+ "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,
)
)
@@ -537,7 +602,62 @@ $utilities: map-merge(
100: 1
)
),
+ "text-color": (
+ property: color,
+ class: text,
+ values: $utilities-text-emphasis-colors
+ ),
// scss-docs-end utils-color
+ // scss-docs-start utils-links
+ "link-opacity": (
+ css-var: true,
+ class: link-opacity,
+ state: hover,
+ values: (
+ 10: .1,
+ 25: .25,
+ 50: .5,
+ 75: .75,
+ 100: 1
+ )
+ ),
+ "link-offset": (
+ property: text-underline-offset,
+ class: link-offset,
+ state: hover,
+ values: (
+ 1: .125em,
+ 2: .25em,
+ 3: .375em,
+ )
+ ),
+ "link-underline": (
+ property: text-decoration-color,
+ class: link-underline,
+ 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)),
+ )
+ )
+ ),
+ "link-underline-opacity": (
+ css-var: true,
+ class: link-underline-opacity,
+ state: hover,
+ values: (
+ 0: 0,
+ 10: .1,
+ 25: .25,
+ 50: .5,
+ 75: .75,
+ 100: 1
+ ),
+ ),
+ // scss-docs-end utils-links
// scss-docs-start utils-bg-color
"background-color": (
property: background-color,
@@ -548,7 +668,9 @@ $utilities: map-merge(
values: map-merge(
$utilities-bg-colors,
(
- "transparent": transparent
+ "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)),
)
)
),
@@ -563,11 +685,16 @@ $utilities: map-merge(
100: 1
)
),
+ "subtle-background-color": (
+ property: background-color,
+ class: bg,
+ values: $utilities-bg-subtle
+ ),
// scss-docs-end utils-bg-color
"gradient": (
property: background-image,
class: bg,
- values: (gradient: var(--#{$variable-prefix}gradient))
+ values: (gradient: var(--#{$prefix}gradient))
),
// scss-docs-start utils-interaction
"user-select": (
@@ -585,34 +712,76 @@ $utilities: map-merge(
property: border-radius,
class: rounded,
values: (
- null: $border-radius,
+ null: var(--#{$prefix}border-radius),
0: 0,
- 1: $border-radius-sm,
- 2: $border-radius,
- 3: $border-radius-lg,
+ 1: var(--#{$prefix}border-radius-sm),
+ 2: var(--#{$prefix}border-radius),
+ 3: var(--#{$prefix}border-radius-lg),
+ 4: var(--#{$prefix}border-radius-xl),
+ 5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
- pill: $border-radius-pill
+ pill: var(--#{$prefix}border-radius-pill)
)
),
"rounded-top": (
property: border-top-left-radius border-top-right-radius,
class: rounded-top,
- values: (null: $border-radius)
+ values: (
+ null: var(--#{$prefix}border-radius),
+ 0: 0,
+ 1: var(--#{$prefix}border-radius-sm),
+ 2: var(--#{$prefix}border-radius),
+ 3: var(--#{$prefix}border-radius-lg),
+ 4: var(--#{$prefix}border-radius-xl),
+ 5: var(--#{$prefix}border-radius-xxl),
+ circle: 50%,
+ pill: var(--#{$prefix}border-radius-pill)
+ )
),
"rounded-end": (
property: border-top-right-radius border-bottom-right-radius,
class: rounded-end,
- values: (null: $border-radius)
+ values: (
+ null: var(--#{$prefix}border-radius),
+ 0: 0,
+ 1: var(--#{$prefix}border-radius-sm),
+ 2: var(--#{$prefix}border-radius),
+ 3: var(--#{$prefix}border-radius-lg),
+ 4: var(--#{$prefix}border-radius-xl),
+ 5: var(--#{$prefix}border-radius-xxl),
+ circle: 50%,
+ pill: var(--#{$prefix}border-radius-pill)
+ )
),
"rounded-bottom": (
property: border-bottom-right-radius border-bottom-left-radius,
class: rounded-bottom,
- values: (null: $border-radius)
+ values: (
+ null: var(--#{$prefix}border-radius),
+ 0: 0,
+ 1: var(--#{$prefix}border-radius-sm),
+ 2: var(--#{$prefix}border-radius),
+ 3: var(--#{$prefix}border-radius-lg),
+ 4: var(--#{$prefix}border-radius-xl),
+ 5: var(--#{$prefix}border-radius-xxl),
+ circle: 50%,
+ pill: var(--#{$prefix}border-radius-pill)
+ )
),
"rounded-start": (
property: border-bottom-left-radius border-top-left-radius,
class: rounded-start,
- values: (null: $border-radius)
+ values: (
+ null: var(--#{$prefix}border-radius),
+ 0: 0,
+ 1: var(--#{$prefix}border-radius-sm),
+ 2: var(--#{$prefix}border-radius),
+ 3: var(--#{$prefix}border-radius-lg),
+ 4: var(--#{$prefix}border-radius-xl),
+ 5: var(--#{$prefix}border-radius-xxl),
+ circle: 50%,
+ pill: var(--#{$prefix}border-radius-pill)
+ )
),
// scss-docs-end utils-border-radius
// scss-docs-start utils-visibility
@@ -623,8 +792,15 @@ $utilities: map-merge(
visible: visible,
invisible: hidden,
)
- )
+ ),
// scss-docs-end utils-visibility
+ // scss-docs-start utils-zindex
+ "z-index": (
+ property: z-index,
+ class: z,
+ values: $zindex-levels,
+ )
+ // scss-docs-end utils-zindex
),
$utilities
);
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-05 23:40:10 +0000