search

cloud-gov / cg-ui

for the 2024 18F-supported cloud.gov product UI formerly known as the Stratos Dashboard
Other
3 stars 0 forks source link

Define USWDS theme color variables in Figma #446

Closed beepdotgov closed 1 week ago

beepdotgov commented 3 weeks ago

Since our prototype is using the USWDS theme color tokens — base, base-light, primary, primary-light, and so on — it’d be helpful if that structure was mirrored in Figma’s color variables, to make implementation easier.

Can this task be done in one increment?

Yes. Should be 1–2 days of work.

Ensure this issue has a clear Definition of Done in the Acceptance Criteria list below:

Acceptance Criteria

beepdotgov commented 1 week ago

While working on #441, I set up a token structure in Figma, and mapped color values to USWDS’s theme token structure. Those tokens are accessible in our Figma boards, and then opening “Local variables” from the sidebar:

The top section of the Figma sidebar, with “local variables” highlighted. A selection of color tokens in Figma’s variables palette

I’ve confirmed that all of our art’s been switched over to use these new token references. (Older/discarded prototypes may not have been updated.)

Since this issue was focused on getting these color values into Figma, I’ll open a separate ticket to figure out the best way for getting these tokens implemented in the prototype.

beepdotgov commented 1 week ago

https://github.com/cloud-gov/cg-ui/issues/475