_properties.scss

/*
----------------------------------------
USWDS Properties
----------------------------------------
*/

$standard-colors: map-collect(
  $tokens-color-theme,
  $tokens-color-state,
  $tokens-color-required
);

$extended-colors: map-collect($system-colors, $tokens-color-basic);

$partial-values: (
  zero-zero: (
    0: 0,
  ),
  none: (
    "none": none,
  ),
  auto: (
    "auto": auto,
  ),
  full-percent: (
    "full": 100%,
  ),
  full-viewport-height: (
    "viewport": 100vh,
  ),
  full-viewport-width: (
    "viewport": 100vw,
  ),
);

$system-properties: (
  align-items: (
    standard: (
      "align-start": flex-start,
      "align-end": flex-end,
      "align-center": center,
      "align-stretch": stretch,
      "align-baseline": baseline,
    ),
    extended: (),
  ),
  align-self: (
    standard: (
      "align-self-start": flex-start,
      "align-self-end": flex-end,
      "align-self-center": center,
      "align-self-stretch": stretch,
      "align-self-baseline": baseline,
    ),
    extended: (),
  ),
  background-color: (
    standard: $standard-colors,
    extended: $extended-colors,
  ),
  border: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small"),
        map-get($partial-values, "zero-zero"),
        (
          "noValue": 1px,
        )
      ),
    extended: (),
  ),
  border-color: (
    standard: $standard-colors,
    extended: $extended-colors,
  ),
  border-radius: (
    standard: $project-border-radius,
    extended:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small")
      ),
  ),
  border-style: (
    standard: (
      "dashed": dashed,
      "dotted": dotted,
      "solid": solid,
    ),
    extended: (),
  ),
  border-width: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small"),
        map-get($partial-values, "zero-zero")
      ),
    extended: (),
  ),
  bottom: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small"),
        map-get($system-spacing, "smaller-negative"),
        map-get($system-spacing, "small-negative"),
        map-get($partial-values, "zero-zero"),
        map-get($partial-values, "auto"),
        map-get($partial-values, "full-percent")
      ),
    extended: (),
  ),
  box-shadow: (
    standard: (
      "none": none,
      1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),
      2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),
      3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),
      4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),
      5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1),
    ),
    extended: (),
  ),
  breakpoints: (
    standard:
      map-collect(
        map-get($system-spacing, "large"),
        map-get($system-spacing, "larger"),
        map-get($system-spacing, "largest")
      ),
    extended: (),
  ),
  circle: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small"),
        map-get($system-spacing, "medium"),
        map-get($system-spacing, "large")
      ),
    extended: (),
  ),
  color: (
    standard: $standard-colors,
    extended: $extended-colors,
  ),
  cursor: (
    standard: (
      "auto": auto,
      "default": default,
      "pointer": pointer,
      "wait": wait,
      "move": move,
      "not-allowed": not-allowed,
    ),
    extended: (),
  ),
  display: (
    standard: (
      "block": block,
      "flex": flex,
      "none": none,
      "inline": inline,
      "inline-block": inline-block,
      "inline-flex": inline-flex,
      "table": table,
      "table-cell": table-cell,
      "table-row": table-row,
    ),
    extended: (),
  ),
  flex: (
    standard: (
      1: 1 1 0%,
      2: 2 1 0%,
      3: 3 1 0%,
      4: 4 1 0%,
      5: 5 1 0%,
      6: 6 1 0%,
      7: 7 1 0%,
      8: 8 1 0%,
      9: 9 1 0%,
      10: 10 1 0%,
      11: 11 1 0%,
      12: 12 1 0%,
      "fill": 1 1 0%,
      "auto": 0 1 auto,
    ),
    extended: (),
  ),
  flex-direction: (
    standard: (
      "row": row,
      "column": column,
    ),
    extended: (),
  ),
  flex-wrap: (
    standard: (
      "wrap": wrap,
      "no-wrap": nowrap,
    ),
    extended: (),
  ),
  float: (
    standard: (
      "left": left,
      "none": none,
      "right": right,
    ),
    extended: (),
  ),
  font-family: (
    standard: $project-font-stacks,
    extended: (),
  ),
  font-feature-settings: (
    standard: (
      "tabular": unquote('"tnum" 1, "kern" 1'),
      "no-tabular": unquote('"kern" 1'),
    ),
    extended: (),
  ),
  font-style: (
    standard: (
      "italic": italic,
      "no-italic": normal,
    ),
    extended: (),
  ),
  font-weight: (
    standard: (
      "thin": $theme-font-weight-thin,
      "light": $theme-font-weight-light,
      "normal": normal,
      "medium": $theme-font-weight-medium,
      "semibold": $theme-font-weight-semibold,
      "bold": $theme-font-weight-bold,
      "heavy": $theme-font-weight-heavy,
    ),
    extended: (
      100: 100,
      200: 200,
      300: 300,
      400: 400,
      500: 500,
      600: 600,
      700: 700,
      800: 800,
      900: 900,
    ),
  ),
  gap: (
    standard:
      map-collect(
        $system-column-gaps,
        (
          "sm": $theme-column-gap-sm,
          "md": $theme-column-gap-md,
          "lg": $theme-column-gap-lg,
        )
      ),
    extended: (),
  ),
  height: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small"),
        map-get($system-spacing, "medium"),
        map-get($system-spacing, "large"),
        map-get($partial-values, "zero-zero"),
        map-get($partial-values, "auto"),
        map-get($partial-values, "full-percent"),
        map-get($partial-values, "full-viewport-height")
      ),
    extended: (),
  ),
  justify-content: (
    standard: (
      "justify-center": center,
      "justify-start": flex-start,
      "justify-end": flex-end,
      "justify": space-between,
    ),
    extended: (),
  ),
  left: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small"),
        map-get($system-spacing, "smaller-negative"),
        map-get($system-spacing, "small-negative"),
        map-get($partial-values, "zero-zero"),
        map-get($partial-values, "auto")
      ),
    extended: (),
  ),
  letter-spacing: (
    standard: (
      "ls-auto": initial,
      "ls-neg-3": -0.03em,
      "ls-neg-2": -0.02em,
      "ls-neg-1": -0.01em,
      "ls-1": 0.025em,
      "ls-2": 0.1em,
      "ls-3": 0.15em,
    ),
    extended: (),
    function: (
      "auto": initial,
      -3: -0.03em,
      -2: -0.02em,
      -1: -0.01em,
      1: 0.025em,
      2: 0.1em,
      3: 0.15em,
    ),
  ),
  line-height: (
    standard: (
      "sans-1": lh("sans", 1),
      "sans-2": lh("sans", 2),
      "sans-3": lh("sans", 3),
      "sans-4": lh("sans", 4),
      "sans-5": lh("sans", 5),
      "sans-6": lh("sans", 6),
      "serif-1": lh("serif", 1),
      "serif-2": lh("serif", 2),
      "serif-3": lh("serif", 3),
      "serif-4": lh("serif", 4),
      "serif-5": lh("serif", 5),
      "serif-6": lh("serif", 6),
      "mono-1": lh("mono", 1),
      "mono-2": lh("mono", 2),
      "mono-3": lh("mono", 3),
      "mono-4": lh("mono", 4),
      "mono-5": lh("mono", 5),
      "mono-6": lh("mono", 6),
      "cond-1": lh("cond", 1),
      "cond-2": lh("cond", 2),
      "cond-3": lh("cond", 3),
      "cond-4": lh("cond", 4),
      "cond-5": lh("cond", 5),
      "cond-6": lh("cond", 6),
      "heading-1": lh("heading", 1),
      "heading-2": lh("heading", 2),
      "heading-3": lh("heading", 3),
      "heading-4": lh("heading", 4),
      "heading-5": lh("heading", 5),
      "heading-6": lh("heading", 6),
      "ui-1": lh("ui", 1),
      "ui-2": lh("ui", 2),
      "ui-3": lh("ui", 3),
      "ui-4": lh("ui", 4),
      "ui-5": lh("ui", 5),
      "ui-6": lh("ui", 6),
      "body-1": lh("body", 1),
      "body-2": lh("body", 2),
      "body-3": lh("body", 3),
      "body-4": lh("body", 4),
      "body-5": lh("body", 5),
      "body-6": lh("body", 6),
      "code-1": lh("code", 1),
      "code-2": lh("code", 2),
      "code-3": lh("code", 3),
      "code-4": lh("code", 4),
      "code-5": lh("code", 5),
      "code-6": lh("code", 6),
      "alt-1": lh("alt", 1),
      "alt-2": lh("alt", 2),
      "alt-3": lh("alt", 3),
      "alt-4": lh("alt", 4),
      "alt-5": lh("alt", 5),
      "alt-6": lh("alt", 6),
    ),
    extended: (
      1: 1,
      2: 1.1,
      3: 1.35,
      4: 1.5,
      5: 1.62,
      6: 1.75,
    ),
  ),
  margin: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller-negative"),
        map-get($system-spacing, "small-negative"),
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small"),
        map-get($system-spacing, "medium-negative"),      
        map-get($system-spacing, "medium"),
        map-get($system-spacing-em, "small"),
        map-get($partial-values, "zero-zero")
      ),
    extended: (),
  ),
  margin-horizontal: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small"),
        map-get($system-spacing, "smaller-negative"),
        map-get($system-spacing, "small-negative"),
        map-get($system-spacing, "medium-negative"),
        map-get($system-spacing, "medium"),
        map-get($system-spacing, "large"),
        map-get($system-spacing-em, "small"),
        map-get($partial-values, "zero-zero"),
        map-get($partial-values, "auto")
      ),
    extended: (),
  ),
  margin-vertical: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small"),
        map-get($system-spacing, "smaller-negative"),
        map-get($system-spacing, "small-negative"),
        map-get($system-spacing, "medium-negative"),
        map-get($system-spacing, "medium"),
        map-get($system-spacing-em, "small"),
        map-get($partial-values, "zero-zero"),
        map-get($partial-values, "auto")
      ),
    extended: (),
  ),
  max-height: (
    standard:
      map-collect(
        map-get($system-spacing, "small"),
        map-get($system-spacing, "medium"),
        map-get($system-spacing, "large"),
        map-get($system-spacing, "larger"),
        map-get($partial-values, "none"),
        map-get($partial-values, "full-viewport-height")
      ),
    extended: (),
  ),
  max-width: (
    standard:
      map-collect(
        map-get($system-spacing, "small"),
        map-get($system-spacing, "medium"),
        map-get($system-spacing, "large"),
        map-get($system-spacing, "larger"),
        map-get($system-spacing, "largest"),
        map-get($partial-values, "none"),
        map-get($partial-values, "full-percent")
      ),
    extended: (),
  ),
  measure: (
    standard: (
      1: $system-measure-smaller,
      2: $system-measure-small,
      3: $system-measure-base,
      4: $system-measure-large,
      5: $system-measure-larger,
      6: $system-measure-largest,
      "none": none,
    ),
    extended: (),
  ),
  min-height: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small"),
        map-get($system-spacing, "medium"),
        map-get($system-spacing, "large"),
        map-get($system-spacing, "larger"),
        map-get($partial-values, "zero-zero"),
        map-get($partial-values, "full-percent"),
        map-get($partial-values, "full-viewport-height")
      ),
    extended: (),
  ),
  min-width: (
    standard:
      map-collect(
        map-get($system-spacing, "small"),
        map-get($system-spacing, "medium"),
        map-get($partial-values, "zero-zero")
      ),
    extended: (),
  ),
  opacity: (
    standard: (
      0: 0,
      10: 0.1,
      20: 0.2,
      30: 0.3,
      40: 0.4,
      50: 0.5,
      60: 0.6,
      70: 0.7,
      80: 0.8,
      90: 0.9,
      100: 1,
    ),
    extended: (),
  ),
  order: (
    standard: (
      "first": -1,
      "last": 999,
      "initial": initial,
      0: 0,
      1: 1,
      2: 2,
      3: 3,
      4: 4,
      5: 5,
      6: 6,
      7: 7,
      8: 8,
      9: 9,
      10: 10,
      11: 11,
    ),
    extended: (),
  ),
  outline: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($partial-values, "zero-zero"),
        (
          "05": spacing-multiple(0.5),
        )
      ),
    extended: (),
  ),
  outline-color: (
    standard: map-collect($tokens-color-required),
    extended: $extended-colors,
  ),
  overflow: (
    standard: (
      "hidden": hidden,
      "scroll": scroll,
      "auto": auto,
      "visible": visible,
    ),
    extended: (),
  ),
  padding: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small"),
        map-get($system-spacing, "medium"),
        map-get($partial-values, "zero-zero")
      ),
    extended: (),
  ),
  position: (
    standard: (
      "absolute": absolute,
      "fixed": fixed,
      "relative": relative,
      "static": static,
      "sticky": sticky,
    ),
    extended: (),
  ),
  right: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small"),
        map-get($system-spacing, "smaller-negative"),
        map-get($system-spacing, "small-negative"),
        map-get($partial-values, "zero-zero"),
        map-get($partial-values, "auto")
      ),
    extended: (),
  ),
  square: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small"),
        map-get($system-spacing, "medium"),
        map-get($system-spacing, "large")
      ),
    extended: (),
  ),
  text-align: (
    standard: (
      "center": center,
      "left": left,
      "justify": justify,
      "right": right,
    ),
    extended: (),
  ),
  text-decoration: (
    standard: (
      "strike": line-through,
      "underline": underline,
      "no-underline": none,
      "no-strike": none,
    ),
    extended: (),
  ),
  text-decoration-color: (
    standard: map-collect($standard-colors, map-get($partial-values, "auto")),
    extended: $extended-colors,
  ),
  text-indent: (
    standard:
      map-collect(
        map-get($partial-values, "zero-zero"),
        map-get($system-spacing, "small"),
        map-get($system-spacing, "small-negative"),
        map-get($system-spacing, "medium"),
        map-get($system-spacing, "medium-negative")
      ),
    extended: (),
  ),
  text-transform: (
    standard: (
      "uppercase": uppercase,
      "no-uppercase": none,
      "lowercase": lowercase,
      "no-lowercase": none,
    ),
    extended: (),
  ),
  top: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small"),
        map-get($system-spacing, "smaller-negative"),
        map-get($system-spacing, "small-negative"),
        map-get($partial-values, "zero-zero"),
        map-get($partial-values, "auto")
      ),
    extended: (),
  ),
  vertical-align: (
    standard: (
      "baseline": baseline,
      "bottom": bottom,
      "middle": middle,
      "sub": sub,
      "super": super,
      "tbottom": text-bottom,
      "ttop": text-top,
      "top": top,
    ),
    extended: (),
  ),
  white-space: (
    standard: (
      "pre": pre,
      "pre-line": pre-line,
      "pre-wrap": pre-wrap,
      "wrap": normal,
      "no-wrap": nowrap,
    ),
    extended: (),
  ),
  width: (
    standard:
      map-collect(
        map-get($system-spacing, "smaller"),
        map-get($system-spacing, "small"),
        map-get($system-spacing, "medium"),
        map-get($system-spacing, "large"),
        map-get($system-spacing, "larger"),
        map-get($system-spacing, "largest"),
        map-get($partial-values, "zero-zero"),
        map-get($partial-values, "full-percent"),
        map-get($partial-values, "auto")
      ),
    extended: (),
  ),
  z-index: (
    standard: (
      "auto": auto,
      "bottom": -100,
      "top": 99999,
      0: 0,
      100: 100,
      200: 200,
      300: 300,
      400: 400,
      500: 500,
    ),
    extended: (),
  ),
);