Update prototype with new USWDS color tokens from Figma

[beepdotgov]

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

• The prototype has been updated with tokens that match those defined in Figma.
• If there are any implementation-related updates to the token / token structure, those changes should also be made in Figma’s tokens. (Design task)

[beepdotgov]

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