beepdotgov
commented
1 month ago Here’s the current list of color tokens, which should map to the structure expected by USWDS theme color tokens. (Of course, feedback is welcome! Let me know if I should revisit/revise any of this.)
Quick note: I started by creating a non-USWDS set of “Brand” color tokens, which map to values in the Dashboard UI’s core palette. Some of the theme variables map back to those brand colors, but! In case that mapping layer’s unhelpful to us, I’ve used parentheses to note which USWDS color tokens those brand colors link back to.
Brand palette:
brand-palette-white: #FFF brand-palette-beige: gray-warm-4 brand-palette-blue: blue-60 brand-palette-mint: mint-40 brand-palette-cyan: cyan-10 brand-palette-black: gray-warm-80 brand-palette-red: red-40-v brand-palette-gray: gray-cool-20
Role:
role-ink: brand-palette-black (gray-warm-80) role-background: brand-palette-beige (gray-warm-4) role-background-alt: gray-warm-1 role-background-high: brand-palette-white role-border: brand-palette-gray (gray-cool-20)
Base:
base-lightest: gray-5 base-lighter: gray-cool-10 base-light: gray-cool-30 base: brand-palette-black (gray-warm-80) base-dark: gray-50 base-darker: gray-warm-70 base-darkest: gray-warm-90
Primary:
primary-lighter: blue-10 primary-light: blue-30 primary: brand-palette-blue (blue-60) primary-vivid: blue-30-v primary-darker: blue-warm-70-v primary-darkest: blue-warm-80-v
Secondary:
secondary-lighter: mint-5 secondary-light: mint-20 secondary: brand-palette-mint (mint-40) secondary-vivid: mint-30-v secondary-darker: mint-60 secondary-darkest: mint-70-v
Accent cool:
accent-cool-lighter: blue-cool-5-v accent-cool-light: blue-cool-20-v accent-cool: blue-cool-30-v accent-cool-dark: blue-cool-60-v accent-cool-darker: blue-cool-70-v
Info:
info-lighter: cyan-5 info-light: cyan-20 info: cyan-30 info-dark: cyan-50 info-darker: cyan-60
Error:
error-lighter: red-cool-10-v error-light: red-30-v error: brand-palette-red (red-40-v) error-dark: red-cool-50 error-darker: red-70
Success:
success-lighter: green-cool-5-v success-light: green-cool-20 success: green-cool-50 success-dark: green-cool-60 success-darker: green-cool-70
Now that our color palette’s stabilized a bit — and we’ve got some proper color tokens defined in Figma (#446) — it’d be great to ensure the prototype’s tokens matches the ones we’ve defined in Figma.
Those tokens are accessible in our Figma boards, and then opening “Local variables” from the sidebar. I’ve also included a list of the updated tokens in a comment below.
Can this task be done in one increment?
(I believe so, but marking this as research.)
Ensure this issue has a clear Definition of Done in the Acceptance Criteria list below:
Acceptance Criteria