_variables.scss

/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS 2.0 Variables
Use for computed variables or any
not meant to be set by system users
directly.
----------------------------------------
*/

/*
----------------------------------------
Touch target size
----------------------------------------
*/

$size-touch-target: 6; // 48px to meet WCAG minimum of 44px

/*
----------------------------------------
Namespace
----------------------------------------
*/

$ns-utility: ns("utility");
$ns-grid: ns("grid");

/*
----------------------------------------
Spacing
----------------------------------------
All spacing values that can be called
by units()
----------------------------------------
*/

$project-spacing-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),
  map-get($system-spacing, medium-negative),
  map-get($system-spacing, large),
  map-get($system-spacing, larger),
  map-get($system-spacing, largest),
  map-get($system-spacing, special)
);

$project-spacing-named: map-collect(
  map-get($system-spacing, large),
  map-get($system-spacing, larger),
  map-get($system-spacing, largest)
);

$spacing-to-token: (
  "0": 0,
  "1": "1px",
  "2": "2px",
  "4": "05",
  "8": 1,
  "12": "105",
  "16": 2,
  "20": "205",
  "24": 3,
  "32": 4,
  "40": 5,
  "48": 6,
  "56": 7,
  "64": 8,
  "72": 9
);

$spacing-to-value: (
  0: 0,
  "2px": 2,
  "05": 4,
  1: 8,
  "105": 12,
  2: 16,
  3: 24,
  4: 32,
  5: 40,
  6: 48,
  7: 56,
  8: 64,
  9: 72
);

$number-to-value: (
  "1px": "1px",
  "2px": "2px",
  "0": 0,
  "1": 1,
  "2": 2,
  "3": 3,
  "4": 4,
  "5": 5,
  "6": 6,
  "7": 7,
  "8": 8,
  "9": 9,
  "10": 10,
  "15": 15,
  "0.5": "05",
  ".5": "05",
  "1.5": "105",
  "2.5": "205",
  "-1px": "neg-1px",
  "-2px": "neg-2px",
  "-0.5": "neg-05",
  "-.5": "neg-05",
  "-1": "neg-1",
  "-1.5": "neg-105",
  "-2": "neg-2",
  "-2.5": "neg-205",
  "-3": "neg-3",
  "-4": "neg-4",
  "-5": "neg-5",
  "-6": "neg-6",
  "-7": "neg-7",
  "-8": "neg-8",
  "-9": "neg-9"
);

/*
----------------------------------------
Project fonts
----------------------------------------
Collects font settings in a map for
looping.
----------------------------------------
*/

$project-font-type-tokens: (
  "cond": (
    "typeface-token": $theme-font-type-cond,
    "custom-stack": $theme-font-cond-custom-stack,
    "src": $theme-font-cond-custom-src
  ),
  "icon": (
    "typeface-token": $theme-font-type-icon,
    "custom-stack": $theme-font-icon-custom-stack,
    "src": $theme-font-icon-custom-src
  ),
  "lang": (
    "typeface-token": $theme-font-type-lang,
    "custom-stack": $theme-font-lang-custom-stack,
    "src": $theme-font-lang-custom-src
  ),
  "mono": (
    "typeface-token": $theme-font-type-mono,
    "custom-stack": $theme-font-mono-custom-stack,
    "src": $theme-font-mono-custom-src
  ),
  "sans": (
    "typeface-token": $theme-font-type-sans,
    "custom-stack": $theme-font-sans-custom-stack,
    "src": $theme-font-sans-custom-src
  ),
  "serif": (
    "typeface-token": $theme-font-type-serif,
    "custom-stack": $theme-font-serif-custom-stack,
    "src": $theme-font-serif-custom-src
  )
);

$project-font-role-tokens: (
  "ui": $theme-font-role-ui,
  "heading": $theme-font-role-heading,
  "body": $theme-font-role-body,
  "code": $theme-font-role-code,
  "alt": $theme-font-role-alt
);

/*
----------------------------------------
Font stack
----------------------------------------
Compute the project font stack based on
the project fonts and the font
definition values set in
core/_font-definitions
----------------------------------------
*/

$project-font-stacks: (
  "cond": get-font-stack("cond"),
  "icon": get-font-stack("icon"),
  "lang": get-font-stack("lang"),
  "mono": get-font-stack("mono"),
  "sans": get-font-stack("sans"),
  "serif": get-font-stack("serif"),
  "ui": get-font-stack("ui"),
  "heading": get-font-stack("heading"),
  "body": get-font-stack("body"),
  "code": get-font-stack("code"),
  "alt": get-font-stack("alt")
);

$project-font-stack-cond: get-font-stack("cond");
$project-font-stack-icon: get-font-stack("icon");
$project-font-stack-lang: get-font-stack("lang");
$project-font-stack-mono: get-font-stack("mono");
$project-font-stack-sans: get-font-stack("sans");
$project-font-stack-serif: get-font-stack("serif");
$project-font-stack-ui: get-font-stack("ui");
$project-font-stack-heading: get-font-stack("heading");
$project-font-stack-body: get-font-stack("body");
$project-font-stack-code: get-font-stack("code");
$project-font-stack-alt: get-font-stack("alt");

$project-font-cond: get-typeface-token("cond");
$project-font-icon: get-typeface-token("icon");
$project-font-lang: get-typeface-token("lang");
$project-font-mono: get-typeface-token("mono");
$project-font-sans: get-typeface-token("sans");
$project-font-serif: get-typeface-token("serif");
$project-font-ui: get-typeface-token("ui");
$project-font-heading: get-typeface-token("heading");
$project-font-body: get-typeface-token("body");
$project-font-code: get-typeface-token("code");
$project-font-alt: get-typeface-token("alt");

/*
----------------------------------------
Cap heights
----------------------------------------
Collect project cap heights
----------------------------------------
*/

$project-cap-heights: (
  "base": $system-base-cap-height,
  "cond": cap-height($project-font-cond),
  "icon": cap-height($project-font-icon),
  "lang": cap-height($project-font-lang),
  "mono": cap-height($project-font-mono),
  "sans": cap-height($project-font-sans),
  "serif": cap-height($project-font-serif),
  "ui": cap-height($project-font-ui),
  "heading": cap-height($project-font-heading),
  "body": cap-height($project-font-body),
  "code": cap-height($project-font-code),
  "alt": cap-height($project-font-alt)
);

$project-font-weights: (
  "thin": $theme-font-weight-thin,
  "light": $theme-font-weight-light,
  "normal": $theme-font-weight-normal,
  "medium": $theme-font-weight-medium,
  "semibold": $theme-font-weight-semibold,
  "bold": $theme-font-weight-bold,
  "heavy": $theme-font-weight-heavy
);

/*
----------------------------------------
Theme color map
----------------------------------------
*/

$project-colors: (
  "base": (
    "lightest": color($theme-color-base-lightest, set-theme),
    "lighter": color($theme-color-base-lighter, set-theme),
    "light": color($theme-color-base-light, set-theme),
    "default": color($theme-color-base, set-theme),
    "dark": color($theme-color-base-dark, set-theme),
    "darker": color($theme-color-base-darker, set-theme),
    "darkest": color($theme-color-base-darkest, set-theme)
  ),
  "primary": (
    "lightest": color($theme-color-primary-lightest, set-theme),
    "lighter": color($theme-color-primary-lighter, set-theme),
    "light": color($theme-color-primary-light, set-theme),
    "default": color($theme-color-primary, set-theme),
    "vivid": color($theme-color-primary-vivid, set-theme),
    "dark": color($theme-color-primary-dark, set-theme),
    "darker": color($theme-color-primary-darker, set-theme),
    "darkest": color($theme-color-primary-darkest, set-theme)
  ),
  "secondary": (
    "lightest": color($theme-color-secondary-lightest, set-theme),
    "lighter": color($theme-color-secondary-lighter, set-theme),
    "light": color($theme-color-secondary-light, set-theme),
    "default": color($theme-color-secondary, set-theme),
    "vivid": color($theme-color-secondary-vivid, set-theme),
    "dark": color($theme-color-secondary-dark, set-theme),
    "darker": color($theme-color-secondary-darker, set-theme),
    "darkest": color($theme-color-secondary-darkest, set-theme)
  ),
  "accent-warm": (
    "lightest": color($theme-color-accent-warm-lightest, set-theme),
    "lighter": color($theme-color-accent-warm-lighter, set-theme),
    "light": color($theme-color-accent-warm-light, set-theme),
    "default": color($theme-color-accent-warm, set-theme),
    "dark": color($theme-color-accent-warm-dark, set-theme),
    "darker": color($theme-color-accent-warm-darker, set-theme),
    "darkest": color($theme-color-accent-warm-darkest, set-theme)
  ),
  "accent-cool": (
    "lightest": color($theme-color-accent-cool-lightest, set-theme),
    "lighter": color($theme-color-accent-cool-lighter, set-theme),
    "light": color($theme-color-accent-cool-light, set-theme),
    "default": color($theme-color-accent-cool, set-theme),
    "dark": color($theme-color-accent-cool-dark, set-theme),
    "darker": color($theme-color-accent-cool-darker, set-theme),
    "darkest": color($theme-color-accent-cool-darkest, set-theme)
  )
);

$project-state-colors: (
  "error": (
    "lighter": color($theme-color-error-lighter),
    "light": color($theme-color-error-light),
    "default": color($theme-color-error),
    "dark": color($theme-color-error-dark),
    "darker": color($theme-color-error-darker)
  ),
  "warning": (
    "lighter": color($theme-color-warning-lighter),
    "light": color($theme-color-warning-light),
    "default": color($theme-color-warning),
    "dark": color($theme-color-warning-dark),
    "darker": color($theme-color-warning-darker)
  ),
  "success": (
    "lighter": color($theme-color-success-lighter),
    "light": color($theme-color-success-light),
    "default": color($theme-color-success),
    "dark": color($theme-color-success-dark),
    "darker": color($theme-color-success-darker)
  ),
  "info": (
    "lighter": color($theme-color-info-lighter),
    "light": color($theme-color-info-light),
    "default": color($theme-color-info),
    "dark": color($theme-color-info-dark),
    "darker": color($theme-color-info-darker)
  ),
  "disabled": (
    "light": color($theme-color-disabled-light),
    "default": color($theme-color-disabled),
    "dark": color($theme-color-disabled-dark)
  )
);

$all-project-colors: map-collect($project-colors, $project-state-colors);

$palette-colors: map-collect(
  $all-project-colors,
  $tokens-color-required,
  $system-colors
);

/*
----------------------------------------
Theme color shortcodes
----------------------------------------
*/

$tokens-color-theme: (
  "base-lightest": color($theme-color-base-lightest, set-theme, no-warn),
  "base-lighter": color($theme-color-base-lighter, set-theme, no-warn),
  "base-light": color($theme-color-base-light, set-theme, no-warn),
  "base": color($theme-color-base, set-theme, no-warn),
  "base-dark": color($theme-color-base-dark, set-theme, no-warn),
  "base-darker": color($theme-color-base-darker, set-theme, no-warn),
  "base-darkest": color($theme-color-base-darkest, set-theme, no-warn),
  "ink": color($theme-color-base-ink, set-theme, no-warn),
  "primary-lightest": color($theme-color-primary-lightest, set-theme, no-warn),
  "primary-lighter": color($theme-color-primary-lighter, set-theme, no-warn),
  "primary-light": color($theme-color-primary-light, set-theme, no-warn),
  "primary": color($theme-color-primary, set-theme, no-warn),
  "primary-vivid": color($theme-color-primary-vivid, set-theme, no-warn),
  "primary-dark": color($theme-color-primary-dark, set-theme, no-warn),
  "primary-darker": color($theme-color-primary-darker, set-theme, no-warn),
  "primary-darkest": color($theme-color-primary-darkest, set-theme, no-warn),
  "secondary-lightest":
    color($theme-color-secondary-lightest, set-theme, no-warn),
  "secondary-lighter": color($theme-color-secondary-lighter, set-theme, no-warn),
  "secondary-light": color($theme-color-secondary-light, set-theme, no-warn),
  "secondary": color($theme-color-secondary, set-theme, no-warn),
  "secondary-vivid": color($theme-color-secondary-vivid, set-theme, no-warn),
  "secondary-dark": color($theme-color-secondary-dark, set-theme, no-warn),
  "secondary-darker": color($theme-color-secondary-darker, set-theme, no-warn),
  "secondary-darkest": color($theme-color-secondary-darkest, set-theme, no-warn),
  "accent-warm-darkest":
    color($theme-color-accent-warm-darkest, set-theme, no-warn),
  "accent-warm-darker":
    color($theme-color-accent-warm-darker, set-theme, no-warn),
  "accent-warm-dark": color($theme-color-accent-warm-dark, set-theme, no-warn),
  "accent-warm": color($theme-color-accent-warm, set-theme, no-warn),
  "accent-warm-light": color($theme-color-accent-warm-light, set-theme, no-warn),
  "accent-warm-lighter":
    color($theme-color-accent-warm-lighter, set-theme, no-warn),
  "accent-warm-lightest":
    color($theme-color-accent-warm-lightest, set-theme, no-warn),
  "accent-cool-darkest":
    color($theme-color-accent-cool-darkest, set-theme, no-warn),
  "accent-cool-darker":
    color($theme-color-accent-cool-darker, set-theme, no-warn),
  "accent-cool-dark": color($theme-color-accent-cool-dark, set-theme, no-warn),
  "accent-cool": color($theme-color-accent-cool, set-theme, no-warn),
  "accent-cool-light": color($theme-color-accent-cool-light, set-theme, no-warn),
  "accent-cool-lighter":
    color($theme-color-accent-cool-lighter, set-theme, no-warn),
  "accent-cool-lightest":
    color($theme-color-accent-cool-lightest, set-theme, no-warn)
);

$tokens-color-state: (
  "error-lighter": color($theme-color-error-lighter),
  "error-light": color($theme-color-error-light),
  "error": color($theme-color-error),
  "error-dark": color($theme-color-error-dark),
  "error-darker": color($theme-color-error-darker),
  "warning-lighter": color($theme-color-warning-lighter),
  "warning-light": color($theme-color-warning-light),
  "warning": color($theme-color-warning),
  "warning-dark": color($theme-color-warning-dark),
  "warning-darker": color($theme-color-warning-darker),
  "success-lighter": color($theme-color-success-lighter),
  "success-light": color($theme-color-success-light),
  "success": color($theme-color-success),
  "success-dark": color($theme-color-success-dark),
  "success-darker": color($theme-color-success-darker),
  "info-lighter": color($theme-color-info-lighter),
  "info-light": color($theme-color-info-light),
  "info": color($theme-color-info),
  "info-dark": color($theme-color-info-dark),
  "info-darker": color($theme-color-info-darker),
  "disabled-light": color($theme-color-disabled-light),
  "disabled": color($theme-color-disabled),
  "disabled-dark": color($theme-color-disabled-dark)
);

$project-color-shortcodes: map-collect(
  $tokens-color-theme,
  $tokens-color-state
);

$all-color-shortcodes: map-collect(
  $tokens-color-required,
  $system-color-shortcodes,
  $project-color-shortcodes
);

$color-palette-grayscale: $system-color-gray;

/*
----------------------------------------
Build the project type scale map
----------------------------------------
*/

$project-type-scale: (
  "3xs": system-type-scale($theme-type-scale-3xs),
  "2xs": system-type-scale($theme-type-scale-2xs),
  "xs": system-type-scale($theme-type-scale-xs),
  "sm": system-type-scale($theme-type-scale-sm),
  "md": system-type-scale($theme-type-scale-md),
  "lg": system-type-scale($theme-type-scale-lg),
  "xl": system-type-scale($theme-type-scale-xl),
  "2xl": system-type-scale($theme-type-scale-2xl),
  "3xl": system-type-scale($theme-type-scale-3xl)
);

$all-type-scale: map-collect($system-type-scale, $project-type-scale);

/*
----------------------------------------
Border-radius
----------------------------------------
*/

$project-border-radius: (
  0: 0,
  "sm": units($theme-border-radius-sm),
  "md": units($theme-border-radius-md),
  "lg": units($theme-border-radius-lg),
  "pill": 99rem
);

$all-border-radius: map-collect(
  $project-border-radius,
  map-get($system-spacing, smaller),
  map-get($system-spacing, small)
);

/*
----------------------------------------
Column gaps
----------------------------------------
*/

$project-column-gaps: (
  "sm": $theme-column-gap-sm,
  "md": $theme-column-gap-md,
  "lg": $theme-column-gap-lg
);

/*
----------------------------------------
Grid
----------------------------------------
*/

$grid-global: "";

@if $theme-layout-grid-use-important {
  $grid-global: "!important";
}