gnosis-css/css/scss/bootstrap/_utilities.scss

$utilities: map-merge(
  $utilities,
  (
    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid inline-grid table table-row
        table-cell contents flex inline-flex none,
    ),
    "color":
      map-merge(
        map-get($utilities, "color"),
        (
          values:
            map-merge(
              map-get(map-get($utilities, "color"), "values"),
              ($all-colors)
            ),
        )
      ),
    "text-wrap": (
      property: "text-wrap",
      values: wrap nowrap pretty stable balance,
      class: "text-wrap",
    ),
    "font-family": (
      property: "font-family",
      values: (
        "sans": $headings-font-family,
        "serif": $font-family-base,
        "serif-alt": $display-font-family,
        "mono": $font-family-code,
      ),
      class: "font-family",
    ),
    "font-weight": (
      property: font-weight,
      class: fw,
      values: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        bold: $font-weight-bold,
        bolder: $font-weight-bolder,
        black: $font-weight-black,
      ),
    ),
    "width": (
      property: width,
      responsive: true,
      class: w,
      values: (
        0: 0,
        1: $spacer * 0.25,
        2: $spacer * 0.5,
        3: $spacer,
        4: $spacer * 1.5,
        5: $spacer * 3,
        6: $spacer * 6,
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto,
      ),
    ),
    "height": (
      property: height,
      responsive: true,
      class: h,
      values: (
        0: 0,
        1: $spacer * 0.25,
        2: $spacer * 0.5,
        3: $spacer,
        4: $spacer * 1.5,
        5: $spacer * 3,
        6: $spacer * 6,
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto,
      ),
    ),
    "inset": (
      property: inset,
      class: inset,
      values: (
        0: 0,
        1: $spacer * 0.25,
        2: $spacer * 0.5,
        3: $spacer,
        4: $spacer * 1.5,
        5: $spacer * 3,
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto,
      ),
    ),
    "rounded-tl": (
      property: border-top-left-radius,
      responsive: true,
      class: rounded-tl,
      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-bl": (
      property: border-bottom-left-radius,
      responsive: true,
      class: rounded-bl,
      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-tr": (
      property: border-top-right-radius,
      responsive: true,
      class: rounded-tr,
      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-br": (
      property: border-bottom-right-radius,
      responsive: true,
      class: rounded-br,
      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),
      ),
    ),
    "overflow": (
      class: overflow,
      property: overflow,
      responsive: true,
      values: hidden visible clip scroll auto,
    ),
    "overflow-x": (
      class: overflow-x,
      property: overflow-x,
      responsive: true,
      values: hidden visible clip scroll auto,
    ),
    "overflow-y": (
      class: overflow-y,
      property: overflow-y,
      responsive: true,
      values: hidden visible clip scroll auto,
    ),
    "position": (
      property: position,
      responsive: true,
      values: static relative absolute fixed sticky,
    ),
    "border": (
      property: border,
      responsive: true,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
          var(--#{$prefix}border-color),
        0: 0,
      ),
    ),
    "border-top": (
      property: border-top,
      responsive: true,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
          var(--#{$prefix}border-color),
        0: 0,
      ),
    ),
    "border-end": (
      property: border-right,
      responsive: true,
      class: border-end,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
          var(--#{$prefix}border-color),
        0: 0,
      ),
    ),
    "border-bottom": (
      property: border-bottom,
      responsive: true,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
          var(--#{$prefix}border-color),
        0: 0,
      ),
    ),
    "border-start": (
      property: border-left,
      responsive: true,
      class: border-start,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
          var(--#{$prefix}border-color),
        0: 0,
      ),
    ),
    "ratio": (
      property: aspect-ratio,
      responsive: true,
      class: ratio,
      values: (
        null: unset,
        3x2: math.div(3, 2),
        2x3: math.div(2, 3),
        4x3: math.div(4, 3),
        3x4: math.div(3, 4),
        16x9: math.div(16, 9),
        6x16: math.div(9, 16),
        21x9: math.div(21, 9),
        9x21: math.div(9, 21),
      ),
    ),
  )
);