/*


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 families and grades


*/

$uswds-color-families: (

"primary",
"secondary",
"accent",
"base",
"warning",
"error",
"success",
"info"

);

$uswds-color-theme-grades: (

"lightest",
"lighter",
"light",
"default",
"dark",
"darker",
"darkest"

);

/*


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, set-theme),
  "light": color($theme-color-error-light, set-theme),
  "default": color($theme-color-error, set-theme),
  "dark": color($theme-color-error-dark, set-theme),
  "darker": color($theme-color-error-darker, set-theme),
),
"warning": (
  "lighter": color($theme-color-warning-lighter, set-theme),
  "light": color($theme-color-warning-light, set-theme),
  "default": color($theme-color-warning, set-theme),
  "dark": color($theme-color-warning-dark, set-theme),
  "darker": color($theme-color-warning-darker, set-theme),
),
"success": (
  "lighter": color($theme-color-success-lighter, set-theme),
  "light": color($theme-color-success-light, set-theme),
  "default": color($theme-color-success, set-theme),
  "dark": color($theme-color-success-dark, set-theme),
  "darker": color($theme-color-success-darker, set-theme),
),
"info": (
  "lighter": color($theme-color-info-lighter, set-theme),
  "light": color($theme-color-info-light, set-theme),
  "default": color($theme-color-info, set-theme),
  "dark": color($theme-color-info-dark, set-theme),
  "darker": color($theme-color-info-darker, set-theme),
),
"disabled": (
  "light": color($theme-color-disabled-light, set-theme),
  "default": color($theme-color-disabled, set-theme),
  "dark": color($theme-color-disabled-dark, set-theme),
),
"emergency": (
  "default": color($theme-color-emergency, set-theme),
  "dark": color($theme-color-emergency-dark, set-theme),
),

);

$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


*/

$assignments-theme-color: (

"base-lightest": $theme-color-base-lightest,
"base-lighter": $theme-color-base-lighter,
"base-light": $theme-color-base-light,
"base": $theme-color-base,
"base-dark": $theme-color-base-dark,
"base-darker": $theme-color-base-darker,
"base-darkest": $theme-color-base-darkest,
"ink": $theme-color-base-ink,
"primary-lightest": $theme-color-primary-lightest,
"primary-lighter": $theme-color-primary-lighter,
"primary-light": $theme-color-primary-light,
"primary": $theme-color-primary,
"primary-vivid": $theme-color-primary-vivid,
"primary-dark": $theme-color-primary-dark,
"primary-darker": $theme-color-primary-darker,
"primary-darkest": $theme-color-primary-darkest,
"secondary-lightest": $theme-color-secondary-lightest,
"secondary-lighter": $theme-color-secondary-lighter,
"secondary-light": $theme-color-secondary-light,
"secondary": $theme-color-secondary,
"secondary-vivid": $theme-color-secondary-vivid,
"secondary-dark": $theme-color-secondary-dark,
"secondary-darker": $theme-color-secondary-darker,
"secondary-darkest": $theme-color-secondary-darkest,
"accent-warm-darkest": $theme-color-accent-warm-darkest,
"accent-warm-darker": $theme-color-accent-warm-darker,
"accent-warm-dark": $theme-color-accent-warm-dark,
"accent-warm": $theme-color-accent-warm,
"accent-warm-light": $theme-color-accent-warm-light,
"accent-warm-lighter": $theme-color-accent-warm-lighter,
"accent-warm-lightest": $theme-color-accent-warm-lightest,
"accent-cool-darkest": $theme-color-accent-cool-darkest,
"accent-cool-darker": $theme-color-accent-cool-darker,
"accent-cool-dark": $theme-color-accent-cool-dark,
"accent-cool": $theme-color-accent-cool,
"accent-cool-light": $theme-color-accent-cool-light,
"accent-cool-lighter": $theme-color-accent-cool-lighter,
"accent-cool-lightest": $theme-color-accent-cool-lightest,
"error-lighter": $theme-color-error-lighter,
"error-light": $theme-color-error-light,
"error": $theme-color-error,
"error-dark": $theme-color-error-dark,
"error-darker": $theme-color-error-darker,
"warning-lighter": $theme-color-warning-lighter,
"warning-light": $theme-color-warning-light,
"warning": $theme-color-warning,
"warning-dark": $theme-color-warning-dark,
"warning-darker": $theme-color-warning-darker,
"success-lighter": $theme-color-success-lighter,
"success-light": $theme-color-success-light,
"success": $theme-color-success,
"success-dark": $theme-color-success-dark,
"success-darker": $theme-color-success-darker,
"info-lighter": $theme-color-info-lighter,
"info-light": $theme-color-info-light,
"info": $theme-color-info,
"info-dark": $theme-color-info-dark,
"info-darker": $theme-color-info-darker,
"disabled-light": $theme-color-disabled-light,
"disabled": $theme-color-disabled,
"disabled-dark": $theme-color-disabled-dark,
"emergency": $theme-color-emergency,
"emergency-dark": $theme-color-emergency-dark,

);

$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, set-theme, no-warn),
"error-light": color($theme-color-error-light, set-theme, no-warn),
"error": color($theme-color-error, set-theme, no-warn),
"error-dark": color($theme-color-error-dark, set-theme, no-warn),
"error-darker": color($theme-color-error-darker, set-theme, no-warn),
"warning-lighter": color($theme-color-warning-lighter, set-theme, no-warn),
"warning-light": color($theme-color-warning-light, set-theme, no-warn),
"warning": color($theme-color-warning, set-theme, no-warn),
"warning-dark": color($theme-color-warning-dark, set-theme, no-warn),
"warning-darker": color($theme-color-warning-darker, set-theme, no-warn),
"success-lighter": color($theme-color-success-lighter, set-theme, no-warn),
"success-light": color($theme-color-success-light, set-theme, no-warn),
"success": color($theme-color-success, set-theme, no-warn),
"success-dark": color($theme-color-success-dark, set-theme, no-warn),
"success-darker": color($theme-color-success-darker, set-theme, no-warn),
"info-lighter": color($theme-color-info-lighter, set-theme, no-warn),
"info-light": color($theme-color-info-light, set-theme, no-warn),
"info": color($theme-color-info, set-theme, no-warn),
"info-dark": color($theme-color-info-dark, set-theme, no-warn),
"info-darker": color($theme-color-info-darker, set-theme, no-warn),
"disabled-light": color($theme-color-disabled-light, set-theme, no-warn),
"disabled": color($theme-color-disabled, set-theme, no-warn),
"disabled-dark": color($theme-color-disabled-dark, set-theme, no-warn),
"emergency": color($theme-color-emergency, set-theme, no-warn),
"emergency-dark": color($theme-color-emergency-dark, set-theme, no-warn),

);

$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;

/*


System magic numbers for color contrast


*/

$system-wcag-magic-numbers: (

"AA": 50,
"AAA": 70,
"AA-large": 40,

);

/*


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,
"none": 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";

}

/*


Aspect Ratios


*/

$project-aspect-ratios: (

"9x16": 177.77778%,
"16x9": 56.25%,
"1x1": 100%,
"4x3": 75%,
"2x1": 50%,

);

@if $test-system-color-tokens {

$color-test: test-colors($system-color-shortcodes);

}

/*


Easing


*/ $project-easing: 0.2s ease-in-out;

/*


Project defaults


*/

$project-defaults: (

"bg-color": $theme-body-background-color,
"preferred-text-token": $theme-text-reverse-color,
"fallback-text-token": $theme-text-color,
"preferred-link-token": $theme-link-reverse-color,
"fallback-link-token": $theme-link-color,

);