bootstrap/scss/_utilities.scss

@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(--ratio),
    ),
    "aspect-ratio": (
      // property: aspect-ratio,
      property: --ratio,
      class: ratio,
      values: $aspect-ratios
    ),
    // scss-docs-end utils-aspect-ratio
    // scss-docs-start utils-float
    "float": (
      property: float,
      responsive: true,
      values: (
        start: inline-start,
        end: inline-end,
        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(--box-shadow),
        sm: var(--box-shadow-sm),
        lg: var(--box-shadow-lg),
        none: none,
      )
    ),
    // scss-docs-end utils-shadow
    // scss-docs-start utils-focus-ring
    "focus-ring": (
      // css-var: true,
      property: --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(--border-width) var(--border-style) var(--border-color),
        0: 0,
      )
    ),
    "border-top": (
      class: border-top,
      property: border-block-start,
      values: (
        null: var(--border-width) var(--border-style) var(--border-color),
        0: 0,
      )
    ),
    "border-end": (
      property: border-inline-end,
      class: border-end,
      values: (
        null: var(--border-width) var(--border-style) var(--border-color),
        0: 0,
      )
    ),
    "border-bottom": (
      property: border-block-end,
      class: border-bottom,
      values: (
        null: var(--border-width) var(--border-style) var(--border-color),
        0: 0,
      )
    ),
    "border-start": (
      property: border-inline-start,
      class: border-start,
      values: (
        null: var(--border-width) var(--border-style) var(--border-color),
        0: 0,
      )
    ),
    "border-y": (
      property: border-block,
      values: (
        null: var(--border-width) var(--border-style) var(--border-color),
        0: 0,
      )
    ),
    "border-x": (
      property: border-inline,
      values: (
        null: var(--border-width) var(--border-style) var(--border-color),
        0: 0,
      )
    ),
    // scss-docs-end utils-borders
    // scss-docs-start utils-border-color
    "border-color": (
      property: (
        "--border-color": null,
        "border-color": var(--border-color)
      ),
      class: border,
      values: map.merge(theme-color-values("bg"), $theme-borders),
    ),
    "border-color-subtle": (
      property: (
        "--border-color": null,
        "border-color": var(--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(--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: --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(--font-monospace),
        "body": var(--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: start,
        end: end,
        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),
    ),
    // 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(--fg),
    // ),
    "fg": (
      property: (
        "--fg": null,
        "color": var(--fg)
      ),
      class: fg,
      values: map.merge(theme-color-values("text"), $theme-fgs),
    ),
    "fg-emphasis": (
      property: (
        "--fg": null,
        "color": var(--fg)
      ),
      class: fg-emphasis,
      values: theme-color-values("text-emphasis"),
    ),
    "fg-contrast": (
      property: (
        "--fg": null,
        "color": var(--fg)
      ),
      class: fg-contrast,
      values: theme-color-values("contrast"),
    ),
    "fg-opacity": (
      class: fg,
      property: color,
      values: theme-opacity-values(--fg)
    ),
    // 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(--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(--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: (
        "--bg": null,
        "background-color": var(--bg)
      ),
      class: bg,
      values: map.merge(theme-color-values("bg"), $theme-bgs),
    ),
    "bg-color-subtle": (
      property: (
        "--bg": null,
        "background-color": var(--bg)
      ),
      class: bg-subtle,
      values: theme-color-values("bg-subtle"),
    ),
    "bg-color-muted": (
      property: (
        "--bg": null,
        "background-color": var(--bg)
      ),
      class: bg-muted,
      values: theme-color-values("bg-muted"),
    ),
    "bg-opacity": (
      class: bg,
      property: background-color,
      values: theme-opacity-values(--bg)
    ),
    // scss-docs-end utils-bg-color
    // scss-docs-start utils-theme
    // Theme style utilities - pair with .theme-{color} to apply coordinated bg + text colors
    "theme-contrast": (
      property: (
        "background-color": var(--theme-bg),
        "color": var(--theme-contrast)
      ),
      class: theme-contrast,
      values: (null: null)
    ),
    "theme-subtle": (
      property: (
        "background-color": var(--theme-bg-subtle),
        "color": var(--theme-text)
      ),
      class: theme-subtle,
      values: (null: null)
    ),
    "theme-muted": (
      property: (
        "background-color": var(--theme-bg-muted),
        "color": var(--theme-text-emphasis)
      ),
      class: theme-muted,
      values: (null: null)
    ),
    "theme-border": (
      property: border,
      class: theme-border,
      values: (null: var(--border-width) solid var(--theme-border))
    ),
    // scss-docs-end utils-theme
    "gradient": (
      property: background-image,
      class: bg,
      values: (gradient: var(--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(--border-radius),
        0: 0,
        1: var(--border-radius-sm),
        2: var(--border-radius),
        3: var(--border-radius-lg),
        4: var(--border-radius-xl),
        5: var(--border-radius-2xl),
        circle: 50%,
        pill: var(--border-radius-pill)
      )
    ),
    "rounded-top": (
      property: border-start-start-radius border-start-end-radius,
      class: rounded-top,
      values: (
        null: var(--border-radius),
        0: 0,
        1: var(--border-radius-sm),
        2: var(--border-radius),
        3: var(--border-radius-lg),
        4: var(--border-radius-xl),
        5: var(--border-radius-2xl),
        circle: 50%,
        pill: var(--border-radius-pill)
      )
    ),
    "rounded-end": (
      property: border-end-end-radius border-end-start-radius,
      class: rounded-end,
      values: (
        null: var(--border-radius),
        0: 0,
        1: var(--border-radius-sm),
        2: var(--border-radius),
        3: var(--border-radius-lg),
        4: var(--border-radius-xl),
        5: var(--border-radius-2xl),
        circle: 50%,
        pill: var(--border-radius-pill)
      )
    ),
    "rounded-bottom": (
      property: border-end-end-radius border-end-start-radius,
      class: rounded-bottom,
      values: (
        null: var(--border-radius),
        0: 0,
        1: var(--border-radius-sm),
        2: var(--border-radius),
        3: var(--border-radius-lg),
        4: var(--border-radius-xl),
        5: var(--border-radius-2xl),
        circle: 50%,
        pill: var(--border-radius-pill)
      )
    ),
    "rounded-start": (
      property: border-start-start-radius border-start-end-radius,
      class: rounded-start,
      values: (
        null: var(--border-radius),
        0: 0,
        1: var(--border-radius-sm),
        2: var(--border-radius),
        3: var(--border-radius-lg),
        4: var(--border-radius-xl),
        5: var(--border-radius-2xl),
        circle: 50%,
        pill: var(--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
);