TODO: ADD breadcrumb option
All patterns in the library make use of the theme token colors by default. There is some theming of patterns, see the pattern you are working with the apply global pattern level changes.
USWDS theme color tokens are divided into five high-level role-based color families: base, primary, secondary, accent-warm, and accent-cool.
Base is a project’s neutral color, typically some tint of gray, and usually used as the text color throughout.
See the USWDS color tokens page to see the default colors
Set the theme palette by setting the values you want in the theme settings file. You can use either a theme token or a hex value.
| color | theme setting | token | value |
| $theme-base-darkest | base-darkest | #1b1b1b | |
| $theme-base-darker | base-darker | #3d4551 | |
| $theme-base-dark | base-dark | #565c65 | |
| $theme-color-base | color-base | #71767a | |
| $theme-base-light | base-light | #a9aeb1 | |
| $theme-base-lighter | base-lighter | #dfe1e2 | |
| $theme-base-lightest | base-lightest | #f0f0f0 | |
| $theme-base-ink | ink | #1b1b1b | |
| $theme-primary-darker | primary-darker | #162e51 | |
| $theme-primary-dark | primary-dark | #1a4480 | |
| $theme-primary-vivid | primary-vivid | #0050d8 | |
| $theme-primary | primary | #005ea2 | |
| $theme-primary-light | primary-light | #73b3e7 | |
| $theme-primary-lighter | primary-lighter | #d9e8f6 | |
| $theme-secondary-darker | secondary-darker | #8b0a03 | |
| $theme-secondary-dark | secondary-dark | #b50909 | |
| $theme-secondary-vivid | secondary-vivid | #e41d3d | |
| $theme-secondary | secondary | #d83933 | |
| $theme-secondary-light | secondary-light | #f2938c | |
| $theme-secondary-lighter | secondary-lighter | #f8dfe2 | |
| $theme-accent-cool-darker | accent-cool-darker | #07648d | |
| $theme-accent-cool-dark | accent-cool-dark | #28a0cb | |
| $theme-accent-cool | accent-cool | #00bde3 | |
| $theme-accent-cool-light | accent-cool-light | #97d4ea | |
| $theme-accent-cool-lighter | accent-cool-lighter | #e1f3f8 | |
| $theme-accent-warm-darker | accent-warm-darker | #775540 | |
| $theme-accent-warm-dark | accent-warm-dark | #c05600 | |
| $theme-accent-warm | accent-warm | #fa9441 | |
| $theme-accent-warm-light | accent-warm-light | #ffbc78 | |
| $theme-accent-warm-lighter | accent-warm-lighter | #f2e4d4 | |
| $theme-emergency-dark | emergency-dark | #332d29 | |
| $theme-emergency | emergency | #9c3d10 |
Along with updating the theme settings file, please use the site.data.colors.yml file to update your colors. This will allow you to use color tokens in the css and also update this spec page with your chosen palatte.
Many patterns allow color application through the theme settings... and of course over all colors should be set that way. Using custom tokens or variables will help fill any gaps.
Tokens
Tokens are set up using this structure: