Skip to content

Instantly share code, notes, and snippets.

@kevinmpowell

kevinmpowell/tokens.scss

Created December 8, 2017 15:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kevinmpowell/296345444f83211167d06067a145dc2d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kevinmpowell/296345444f83211167d06067a145dc2d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tokens.scss
$esds-tokens: (
'color': (
'white': $esds-color-white,
'black': $esds-color-black,
'orange': (
'82': $esds-color-orange-82,
'91': $esds-color-orange-91,
'93': $esds-color-orange-93
),
'neutral': (
'5': $esds-color-neutral-5,
'15': $esds-color-neutral-15,
'25': $esds-color-neutral-25,
'42': $esds-color-neutral-42,
'70': $esds-color-neutral-70,
'80': $esds-color-neutral-80,
'90': $esds-color-neutral-90,
'95': $esds-color-neutral-95
),
'teal': (
'55': $esds-color-teal-55,
'58': $esds-color-teal-58,
'71': $esds-color-teal-71
)
),
'text-color': (
'brand': $esds-text-color-brand,
'primary': (
'on-white': $esds-text-color-primary-on-white,
'on-white-opacity-85': $esds-text-color-primary-on-white-opacity-85,
'on-light': $esds-text-color-primary-on-light,
'on-brand': $esds-text-color-primary-on-brand,
'on-dark': $esds-text-color-primary-on-dark,
'on-black': $esds-text-color-primary-on-black
),
'secondary': (
'on-white': $esds-text-color-secondary-on-white,
'on-white-opacity-85': $esds-text-color-secondary-on-white-opacity-85,
'on-light': $esds-text-color-secondary-on-light,
'on-brand': $esds-text-color-secondary-on-brand,
'on-dark': $esds-text-color-secondary-on-dark,
'on-black': $esds-text-color-secondary-on-black
),
'link': (
'on-white': $esds-text-color-link-on-white,
'on-white-opacity-85': $esds-text-color-link-on-white-opacity-85,
'on-light': $esds-text-color-link-on-light,
'on-brand': $esds-text-color-link-on-brand,
'on-dark': $esds-text-color-link-on-dark,
'on-black': $esds-text-color-link-on-black
)
),
'background-color': (
'white': $esds-background-color-white,
'light': $esds-background-color-light,
'dark': $esds-background-color-dark,
'black': $esds-background-color-black,
'brand': $esds-background-color-brand,
'white-opacity-85': $esds-background-color-white-opacity-85
),
'font': (
'family': (
'sans-serif': $esds-font-family-sans-serif
),
'line-height': (
'normal': $esds-font-line-height-normal,
'headings': $esds-font-line-height-headings
),
'size': (
'heading-level-1': (
'default': $esds-font-size-heading-level-1-default,
'at-480': $esds-font-size-heading-level-1-at-480,
'at-768': $esds-font-size-heading-level-1-at-768,
'at-1000': $esds-font-size-heading-level-1-at-1000
),
'heading-level-2': (
'default': $esds-font-size-heading-level-2-default,
'at-480': $esds-font-size-heading-level-2-at-480,
'at-768': $esds-font-size-heading-level-2-at-768,
'at-1000': $esds-font-size-heading-level-2-at-1000
),
'heading-level-3': (
'default': $esds-font-size-heading-level-3-default,
'at-480': $esds-font-size-heading-level-3-at-480,
'at-768': $esds-font-size-heading-level-3-at-768,
'at-1000': $esds-font-size-heading-level-3-at-1000
),
'heading-level-4': (
'default': $esds-font-size-heading-level-4-default,
'at-480': $esds-font-size-heading-level-4-at-480,
'at-768': $esds-font-size-heading-level-4-at-768,
'at-1000': $esds-font-size-heading-level-4-at-1000
),
'heading-eyebrow': (
'default': $esds-font-size-heading-eyebrow-default,
'at-480': $esds-font-size-heading-eyebrow-at-480,
'at-768': $esds-font-size-heading-eyebrow-at-768,
'at-1000': $esds-font-size-heading-eyebrow-at-1000
),
'body-l': (
'default': $esds-font-size-body-l-default,
'at-480': $esds-font-size-body-l-at-480,
'at-768': $esds-font-size-body-l-at-768,
'at-1000': $esds-font-size-body-l-at-1000
),
'body-m': (
'default': $esds-font-size-body-m-default,
'at-480': $esds-font-size-body-m-at-480,
'at-768': $esds-font-size-body-m-at-768,
'at-1000': $esds-font-size-body-m-at-1000
),
'body-s': (
'default': $esds-font-size-body-s-default,
'at-480': $esds-font-size-body-s-at-480,
'at-768': $esds-font-size-body-s-at-768,
'at-1000': $esds-font-size-body-s-at-1000
)
),
'weight': (
'bold': $esds-font-weight-bold,
'light': $esds-font-weight-light,
'regular': $esds-font-weight-regular
)
),
'border': (
'selected': (
'width': $esds-border-selected-width,
'on-white': $esds-border-selected-on-white,
'on-light': $esds-border-selected-on-light,
'on-dark': $esds-border-selected-on-dark,
'on-black': $esds-border-selected-on-black
),
'control': (
'on-white': $esds-border-control-on-white
),
'default': $esds-border-default,
'radius': (
'default': $esds-border-radius-default
)
),
'space': (
'generic': (
'4-x': $esds-space-generic-4-x,
'2-x': $esds-space-generic-2-x,
'1-and-half-x': $esds-space-generic-1-and-half-x,
'1-x': $esds-space-generic-1-x,
'half-x': $esds-space-generic-half-x,
'quarter-x': $esds-space-generic-quarter-x,
'eighth-x': $esds-space-generic-eighth-x
),
'inset': (
'4-x': $esds-space-inset-4-x,
'2-x': $esds-space-inset-2-x,
'1-and-half-x': $esds-space-inset-1-and-half-x,
'1-x': $esds-space-inset-1-x,
'half-x': $esds-space-inset-half-x,
'quarter-x': $esds-space-inset-quarter-x,
'eighth-x': $esds-space-inset-eighth-x
),
'inset-squish': (
'4-x': $esds-space-inset-squish-4-x,
'2-x': $esds-space-inset-squish-2-x,
'1-and-half-x': $esds-space-inset-squish-1-and-half-x,
'1-x': $esds-space-inset-squish-1-x,
'half-x': $esds-space-inset-squish-half-x,
'quarter-x': $esds-space-inset-squish-quarter-x
),
'stack': (
'4-x': $esds-space-stack-4-x,
'2-x': $esds-space-stack-2-x,
'1-and-half-x': $esds-space-stack-1-and-half-x,
'1-x': $esds-space-stack-1-x,
'half-x': $esds-space-stack-half-x,
'quarter-x': $esds-space-stack-quarter-x
)
),
'namespace': $esds-namespace
);
@function esds-token($keys...) {
$map: $esds-tokens;
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment