18F/web-design-standards

View on GitHub
packages/uswds-utilities/src/styles/palettes/_spacing-palettes.scss

Summary

Maintainability
Test Coverage
/*
========================================
MISC PLUGINS
----------------------------------------
These plugins collect packaged
spacing-related values for inclusion
in utilities
----------------------------------------
*/

@use "sass:map";
@use "uswds-core/src/styles/tokens/units" as *;
@use "uswds-core/src/styles/functions/general/map-collect" as *;

$tokens-units-ch-positive: (
  "05ch": ".5ch",
  "1ch": "1ch",
  "105ch": "1.5ch",
  "2ch": "2ch",
  "3ch": "3ch",
  "4ch": "4ch",
  "5ch": "5ch",
);

$tokens-units-ch-negative: (
  "#{$neg-prefix}-05ch": "-.5ch",
  "#{$neg-prefix}-1ch": "-1ch",
  "#{$neg-prefix}-105ch": "-1.5ch",
  "#{$neg-prefix}-2ch": "-2ch",
  "#{$neg-prefix}-3ch": "-3ch",
  "#{$neg-prefix}-4ch": "-4ch",
  "#{$neg-prefix}-5ch": "-5ch",
);

$tokens-units-em: (
  "05em": ".5em",
  "1em": "1em",
  "105em": "1.5em",
  "2em": "2em",
  "3em": "3em",
  "4em": "4em",
  "5em": "5em",
  "6em": "6em",
  "7em": "7em",
  "8em": "8em",
  "9em": "9em",
  "10em": "10em",
);

$tokens-units-percentage: (
  "10ct": 10%,
  "20ct": 20%,
  "25ct": 25%,
  "30ct": 30%,
  "33ct": 33.33333333%,
  "40ct": 40%,
  "50ct": 50%,
  "60ct": 60%,
  "66ct": 66.66666666%,
  "70ct": 70%,
  "75ct": 75%,
  "80ct": 80%,
  "90ct": 90%,
  "100ct": 100%,
);

$tokens-units-zero: (
  "0": 0,
);

$palettes-units: (
  "palette-units-system":
    map-collect(
      map.get($system-spacing, small-negative),
      map.get($system-spacing, smaller-negative),
      map.get($system-spacing, smaller),
      map.get($system-spacing, medium-negative),
      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)
    ),
  "palette-units-system-positive":
    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)
    ),
  "palette-units-system-positive-smaller": map.get($system-spacing, smaller),
  "palette-units-system-positive-small": map.get($system-spacing, small),
  "palette-units-system-positive-medium": map.get($system-spacing, medium),
  "palette-units-system-positive-large": map.get($system-spacing, large),
  "palette-units-system-positive-larger": map.get($system-spacing, larger),
  "palette-units-system-positive-largest": map.get($system-spacing, largest),
  "palette-units-system-negative":
    map-collect(
      map.get($system-spacing, smaller-negative),
      map.get($system-spacing, small-negative)
    ),
  "palette-units-system-negative-smaller":
    map.get($system-spacing, smaller-negative),
  "palette-units-system-negative-small":
    map.get($system-spacing, small-negative),
  "palette-units-system-negative-medium":
    map.get($system-spacing, medium-negative),
  "palette-units-system-breakpoints":
    map-collect(
      map.get($system-spacing, large),
      map.get($system-spacing, larger),
      map.get($system-spacing, largest)
    ),
);

$palettes-units-misc: (
  "palette-units-ch-positive": $tokens-units-ch-positive,
  "palette-units-ch-negative": $tokens-units-ch-negative,
  "palette-units-ch":
    map-collect($tokens-units-ch-positive, $tokens-units-ch-negative),
  "palette-units-em": $tokens-units-em,
  "palette-units-percentage": $tokens-units-percentage,
  "palette-units-zero": $tokens-units-zero,
  "palette-units":
    map-collect(
      map.get($system-spacing, small-negative),
      map.get($system-spacing, smaller-negative),
      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),
      $tokens-units-ch-positive,
      $tokens-units-ch-negative,
      $tokens-units-em,
      $tokens-units-percentage,
      $tokens-units-zero
    ),
);