| @use "sass:map"; |
| @use "config" as *; |
| @use "colors" as *; |
| @use "variables" as *; |
| @use "functions" as *; |
| @use "theme" as *; |
| |
| // add: |
| // - double check css grid helpers |
| // |
| // update: |
| // - focus-ring if needed |
| |
| $utilities: () !default; |
| // stylelint-disable-next-line scss/dollar-variable-default |
| $utilities: map.merge( |
| ( |
| // scss-docs-start utils-vertical-align |
| "align": ( |
| property: vertical-align, |
| class: align, |
| values: baseline top middle bottom text-bottom text-top |
| ), |
| // scss-docs-end utils-vertical-align |
| // scss-docs-start utils-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": ( |
| property: float, |
| responsive: true, |
| values: ( |
| start: left, |
| end: right, |
| none: none, |
| ) |
| ), |
| // 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": ( |
| property: opacity, |
| values: ( |
| 0: 0, |
| 25: .25, |
| 50: .5, |
| 75: .75, |
| 100: 1, |
| ) |
| ), |
| // scss-docs-end utils-opacity |
| // scss-docs-start utils-overflow |
| "overflow": ( |
| 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": ( |
| responsive: true, |
| property: display, |
| class: d, |
| values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex contents flow-root none |
| ), |
| // scss-docs-end utils-display |
| // scss-docs-start utils-shadow |
| "shadow": ( |
| property: box-shadow, |
| class: shadow, |
| values: ( |
| 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, |
| property: --#{$prefix}focus-ring-color, |
| class: focus-ring, |
| values: theme-color-values("focus-ring"), |
| ), |
| // scss-docs-end utils-focus-ring |
| // scss-docs-start utils-position |
| "position": ( |
| property: position, |
| values: static relative absolute fixed sticky |
| ), |
| "top": ( |
| property: top, |
| values: $position-values |
| ), |
| "bottom": ( |
| property: bottom, |
| values: $position-values |
| ), |
| "start": ( |
| property: left, |
| class: start, |
| values: $position-values |
| ), |
| "end": ( |
| property: right, |
| class: end, |
| values: $position-values |
| ), |
| "translate-middle": ( |
| property: transform, |
| class: translate-middle, |
| values: ( |
| null: translate(-50%, -50%), |
| x: translateX(-50%), |
| y: translateY(-50%), |
| ) |
| ), |
| // scss-docs-end utils-position |
| // scss-docs-start utils-borders |
| "border": ( |
| property: border, |
| values: ( |
| null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), |
| 0: 0, |
| ) |
| ), |
| "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-inline-end, |
| class: border-end, |
| values: ( |
| null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), |
| 0: 0, |
| ) |
| ), |
| "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-inline-start, |
| class: border-start, |
| values: ( |
| null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), |
| 0: 0, |
| ) |
| ), |
| "border-y": ( |
| property: border-block, |
| values: ( |
| null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), |
| 0: 0, |
| ) |
| ), |
| "border-x": ( |
| property: border-inline, |
| values: ( |
| null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), |
| 0: 0, |
| ) |
| ), |
| // scss-docs-end utils-borders |
| // scss-docs-start utils-border-color |
| "border-color": ( |
| property: ( |
| "--#{$prefix}border-color": null, |
| "border-color": var(--#{$prefix}border-color) |
| ), |
| class: border, |
| values: map.merge(theme-color-values("bg"), $theme-borders), |
| ), |
| "border-color-subtle": ( |
| property: ( |
| "--#{$prefix}border-color": null, |
| "border-color": var(--#{$prefix}border-color) |
| ), |
| class: border-subtle, |
| values: theme-color-values("border"), |
| ), |
| "border-width": ( |
| property: border-width, |
| class: border, |
| values: $border-widths |
| ), |
| "border-opacity": ( |
| class: border, |
| property: border-color, |
| values: theme-opacity-values(--#{$prefix}border-color) |
| ), |
| // scss-docs-end utils-border-color |
| // Sizing utilities |
| // scss-docs-start utils-width |
| "width": ( |
| property: width, |
| class: w, |
| values: map.merge( |
| $sizes, |
| ( |
| 25: 25%, |
| 50: 50%, |
| 75: 75%, |
| 100: 100%, |
| auto: auto, |
| min: min-content, |
| max: max-content, |
| fit: fit-content, |
| ) |
| ) |
| ), |
| "max-width": ( |
| property: max-width, |
| 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, |
| values: (100: 100vw) |
| ), |
| "min-viewport-width": ( |
| property: min-width, |
| class: min-vw, |
| values: (100: 100vw) |
| ), |
| // scss-docs-end utils-width |
| // scss-docs-start utils-height |
| "height": ( |
| property: height, |
| class: h, |
| values: ( |
| 25: 25%, |
| 50: 50%, |
| 75: 75%, |
| 100: 100%, |
| auto: auto, |
| min: min-content, |
| max: max-content, |
| fit: fit-content, |
| ) |
| ), |
| "max-height": ( |
| property: max-height, |
| 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, |
| values: (100: 100vh) |
| ), |
| "min-viewport-height": ( |
| property: min-height, |
| class: min-vh, |
| values: (100: 100vh) |
| ), |
| // scss-docs-end utils-height |
| // Flex utilities |
| // scss-docs-start utils-flex |
| "flex": ( |
| responsive: true, |
| property: flex, |
| values: (fill: 1 1 auto) |
| ), |
| "flex-direction": ( |
| responsive: true, |
| property: flex-direction, |
| class: flex, |
| values: row column row-reverse column-reverse |
| ), |
| "flex-grow": ( |
| responsive: true, |
| property: flex-grow, |
| class: flex, |
| values: ( |
| grow-0: 0, |
| grow-1: 1, |
| ) |
| ), |
| "flex-shrink": ( |
| responsive: true, |
| property: flex-shrink, |
| class: flex, |
| values: ( |
| shrink-0: 0, |
| shrink-1: 1, |
| ) |
| ), |
| "flex-wrap": ( |
| responsive: true, |
| property: flex-wrap, |
| class: flex, |
| values: wrap nowrap wrap-reverse |
| ), |
| "justify-content": ( |
| responsive: true, |
| property: justify-content, |
| values: ( |
| start: flex-start, |
| end: flex-end, |
| center: center, |
| between: space-between, |
| around: space-around, |
| evenly: space-evenly, |
| ) |
| ), |
| "justify-items": ( |
| responsive: true, |
| property: justify-items, |
| values: ( |
| start: start, |
| end: end, |
| center: center, |
| stretch: stretch, |
| ) |
| ), |
| "justify-self": ( |
| responsive: true, |
| property: justify-self, |
| values: ( |
| start: flex-start, |
| end: flex-end, |
| center: center, |
| ) |
| ), |
| "align-items": ( |
| responsive: true, |
| property: align-items, |
| values: ( |
| start: flex-start, |
| end: flex-end, |
| center: center, |
| baseline: baseline, |
| stretch: stretch, |
| ) |
| ), |
| "align-content": ( |
| responsive: true, |
| property: align-content, |
| values: ( |
| start: flex-start, |
| end: flex-end, |
| center: center, |
| between: space-between, |
| around: space-around, |
| stretch: stretch, |
| ) |
| ), |
| "align-self": ( |
| responsive: true, |
| property: align-self, |
| values: ( |
| auto: auto, |
| start: flex-start, |
| end: flex-end, |
| center: center, |
| baseline: baseline, |
| stretch: stretch, |
| ) |
| ), |
| "place-items": ( |
| responsive: true, |
| property: place-items, |
| values: ( |
| start: start, |
| end: end, |
| center: center, |
| stretch: stretch, |
| ) |
| ), |
| "grid-column-counts": ( |
| responsive: true, |
| property: --#{$prefix}columns, |
| class: grid-cols, |
| values: ( |
| 3, |
| 4, |
| 6 |
| ) |
| ), |
| "grid-columns": ( |
| responsive: true, |
| property: grid-column, |
| class: grid-cols, |
| values: ( |
| fill: #{"1 / -1"}, |
| ) |
| ), |
| "grid-auto-flow": ( |
| responsive: true, |
| property: grid-auto-flow, |
| class: grid-auto-flow, |
| values: row column dense |
| ), |
| "order": ( |
| responsive: true, |
| property: order, |
| values: ( |
| first: -1, |
| 0: 0, |
| 1: 1, |
| 2: 2, |
| 3: 3, |
| 4: 4, |
| 5: 5, |
| last: 6, |
| ), |
| ), |
| // scss-docs-end utils-flex |
| // Margin utilities |
| // scss-docs-start utils-spacing |
| "margin": ( |
| responsive: true, |
| property: margin, |
| class: m, |
| values: map.merge($spacers, (auto: auto)) |
| ), |
| "margin-x": ( |
| responsive: true, |
| property: margin-inline, |
| class: mx, |
| values: map.merge($spacers, (auto: auto)) |
| ), |
| "margin-y": ( |
| responsive: true, |
| property: margin-block, |
| class: my, |
| values: map.merge($spacers, (auto: auto)) |
| ), |
| "margin-top": ( |
| responsive: true, |
| property: margin-block-start, |
| class: mt, |
| values: map.merge($spacers, (auto: auto)) |
| ), |
| "margin-end": ( |
| responsive: true, |
| property: margin-inline-end, |
| class: me, |
| values: map.merge($spacers, (auto: auto)) |
| ), |
| "margin-bottom": ( |
| responsive: true, |
| property: margin-block-end, |
| class: mb, |
| values: map.merge($spacers, (auto: auto)) |
| ), |
| "margin-start": ( |
| responsive: true, |
| property: margin-inline-start, |
| class: ms, |
| 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-inline, |
| // class: mx, |
| // values: $negative-spacers |
| // ), |
| // "negative-margin-y": ( |
| // responsive: true, |
| // property: margin-block, |
| // class: my, |
| // values: $negative-spacers |
| // ), |
| // "negative-margin-top": ( |
| // responsive: true, |
| // property: margin-block-start, |
| // class: mt, |
| // values: $negative-spacers |
| // ), |
| // "negative-margin-end": ( |
| // responsive: true, |
| // property: margin-inline-end, |
| // class: me, |
| // values: $negative-spacers |
| // ), |
| // "negative-margin-bottom": ( |
| // responsive: true, |
| // property: margin-block-end, |
| // class: mb, |
| // values: $negative-spacers |
| // ), |
| // "negative-margin-start": ( |
| // responsive: true, |
| // property: margin-inline-start, |
| // class: ms, |
| // values: $negative-spacers |
| // ), |
| // Padding utilities |
| "padding": ( |
| responsive: true, |
| property: padding, |
| class: p, |
| values: $spacers |
| ), |
| "padding-x": ( |
| responsive: true, |
| property: padding-inline, |
| class: px, |
| values: $spacers |
| ), |
| "padding-y": ( |
| responsive: true, |
| property: padding-block, |
| class: py, |
| values: $spacers |
| ), |
| "padding-top": ( |
| responsive: true, |
| property: padding-block-start, |
| class: pt, |
| values: $spacers |
| ), |
| "padding-end": ( |
| responsive: true, |
| property: padding-inline-end, |
| class: pe, |
| values: $spacers |
| ), |
| "padding-bottom": ( |
| responsive: true, |
| property: padding-block-end, |
| class: pb, |
| values: $spacers |
| ), |
| "padding-start": ( |
| responsive: true, |
| property: padding-inline-start, |
| 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-font-family |
| "font-family": ( |
| property: font-family, |
| class: font, |
| values: ( |
| "monospace": var(--#{$prefix}font-monospace), |
| "body": var(--#{$prefix}font-sans-serif), |
| ) |
| ), |
| // scss-docs-end utils-font-family |
| // scss-docs-start utils-font-size |
| "font-size": ( |
| property: font-size, |
| class: fs, |
| values: map-get-nested($font-sizes, "font-size") |
| ), |
| "text-size": ( |
| property: ( |
| "font-size": 1rem, |
| "line-height": 1.5 |
| ), |
| class: text, |
| values: $font-sizes |
| ), |
| // scss-docs-end utils-font-size |
| "font-style": ( |
| property: font-style, |
| class: fst, |
| values: italic normal |
| ), |
| "font-weight": ( |
| property: font-weight, |
| class: fw, |
| values: ( |
| 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 |
| ) |
| ), |
| "line-height": ( |
| property: line-height, |
| class: lh, |
| values: ( |
| 1: 1, |
| sm: $line-height-sm, |
| base: $line-height-base, |
| lg: $line-height-lg, |
| ) |
| ), |
| "text-align": ( |
| responsive: true, |
| property: text-align, |
| class: text, |
| values: ( |
| start: left, |
| end: right, |
| center: center, |
| ) |
| ), |
| "text-decoration": ( |
| property: text-decoration, |
| values: none underline line-through |
| ), |
| // scss-docs-start utils-text-transform |
| "text-transform": ( |
| property: text-transform, |
| class: text, |
| values: lowercase uppercase capitalize |
| ), |
| // scss-docs-end utils-text-transform |
| // "white-space": ( |
| // property: white-space, |
| // class: text, |
| // values: ( |
| // wrap: normal, |
| // nowrap: nowrap, |
| // ) |
| // ), |
| "text-wrap": ( |
| property: white-space, |
| class: text, |
| values: wrap nowrap balance pretty, |
| ), |
| // scss-docs-start utils-text-break |
| "word-wrap": ( |
| property: word-wrap word-break, |
| class: text, |
| values: (break: break-word), |
| rtl: false |
| ), |
| // scss-docs-end utils-text-break |
| // scss-docs-end utils-text |
| // scss-docs-start utils-color |
| // "color-attr": ( |
| // selector: "attr-includes", |
| // class: "fg-", |
| // property: color, |
| // values: var(--#{$prefix}fg), |
| // ), |
| "fg": ( |
| property: ( |
| "--#{$prefix}fg": null, |
| "color": var(--#{$prefix}fg) |
| ), |
| class: fg, |
| values: map.merge(theme-color-values("text"), $theme-fgs), |
| ), |
| "fg-emphasis": ( |
| property: ( |
| "--#{$prefix}fg": null, |
| "color": var(--#{$prefix}fg) |
| ), |
| class: fg-emphasis, |
| values: theme-color-values("text-emphasis"), |
| ), |
| "fg-opacity": ( |
| class: fg, |
| property: color, |
| values: theme-opacity-values(--#{$prefix}fg) |
| ), |
| "fg-contrast": ( |
| property: ( |
| "--#{$prefix}fg": null, |
| "color": var(--#{$prefix}fg) |
| ), |
| class: fg-contrast, |
| values: theme-color-values("contrast"), |
| ), |
| // scss-docs-end utils-color |
| // scss-docs-start utils-links |
| "link-opacity": ( |
| property: color, |
| // css-var: true, |
| class: link, |
| state: hover, |
| values: theme-opacity-values(--#{$prefix}link-color) |
| ), |
| // scss-docs-end utils-links |
| // scss-docs-start utils-underline |
| "underline-offset": ( |
| property: text-underline-offset, |
| class: underline-offset, |
| state: hover, |
| values: ( |
| 1: .125em, |
| 2: .25em, |
| 3: .375em, |
| ) |
| ), |
| "underline-color": ( |
| property: text-decoration-color, |
| class: underline, |
| values: theme-color-values("text"), |
| ), |
| "underline-opacity": ( |
| property: text-decoration-color, |
| class: underline, |
| state: hover, |
| values: theme-opacity-values(--#{$prefix}link-color) |
| ), |
| "underline-thickness": ( |
| property: text-decoration-thickness, |
| class: underline-thickness, |
| state: hover, |
| values: ( |
| 1: 1px, |
| 2: 2px, |
| 3: 3px, |
| 4: 4px, |
| 5: 5px, |
| ) |
| ), |
| // scss-docs-end utils-underline |
| // scss-docs-start utils-bg-color |
| "bg-color": ( |
| property: ( |
| "--#{$prefix}bg": null, |
| "background-color": var(--#{$prefix}bg) |
| ), |
| class: bg, |
| values: map.merge(theme-color-values("bg"), $theme-bgs), |
| ), |
| "bg-color-subtle": ( |
| property: ( |
| "--#{$prefix}bg": null, |
| "background-color": var(--#{$prefix}bg) |
| ), |
| class: bg-subtle, |
| values: theme-color-values("bg-subtle"), |
| ), |
| "bg-color-muted": ( |
| property: ( |
| "--#{$prefix}bg": null, |
| "background-color": var(--#{$prefix}bg) |
| ), |
| class: bg-muted, |
| values: theme-color-values("bg-muted"), |
| ), |
| "bg-opacity": ( |
| class: bg, |
| property: background-color, |
| values: theme-opacity-values(--#{$prefix}bg) |
| ), |
| // scss-docs-end utils-bg-color |
| "gradient": ( |
| property: background-image, |
| class: bg, |
| values: (gradient: var(--#{$prefix}gradient)) |
| ), |
| // scss-docs-start utils-interaction |
| "user-select": ( |
| property: user-select, |
| values: all auto none |
| ), |
| "pointer-events": ( |
| property: pointer-events, |
| class: pe, |
| values: none auto, |
| ), |
| // scss-docs-end utils-interaction |
| // scss-docs-start utils-border-radius |
| "border-radius": ( |
| property: border-radius, |
| class: rounded, |
| 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-2xl), |
| circle: 50%, |
| pill: var(--#{$prefix}border-radius-pill) |
| ) |
| ), |
| "rounded-top": ( |
| property: border-start-start-radius border-start-end-radius, |
| class: rounded-top, |
| 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-2xl), |
| circle: 50%, |
| pill: var(--#{$prefix}border-radius-pill) |
| ) |
| ), |
| "rounded-end": ( |
| property: border-end-end-radius border-end-start-radius, |
| class: rounded-end, |
| 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-2xl), |
| circle: 50%, |
| pill: var(--#{$prefix}border-radius-pill) |
| ) |
| ), |
| "rounded-bottom": ( |
| property: border-end-end-radius border-end-start-radius, |
| class: rounded-bottom, |
| 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-2xl), |
| circle: 50%, |
| pill: var(--#{$prefix}border-radius-pill) |
| ) |
| ), |
| "rounded-start": ( |
| property: border-start-start-radius border-start-end-radius, |
| class: rounded-start, |
| 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-2xl), |
| circle: 50%, |
| pill: var(--#{$prefix}border-radius-pill) |
| ) |
| ), |
| // scss-docs-end utils-border-radius |
| // scss-docs-start utils-visibility |
| "visibility": ( |
| property: visibility, |
| class: null, |
| values: ( |
| 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 |
| ); |
