📍Convert design tokens to JSON and CSS variables

[brunerae]

Convert all USWDS tokens to JSON.

Why

1. Make USWDS more extensible.
2. Create a single source of truth across repos.
3. Simpler value lookup.
4. Create potential for better search in docs.

2 months

• USWDS - JSON tokens: Confirm that token YML data on uswds-site is accurate uswds#5439
• USWDS - JSON tokens: Assess if style dictionary is the tool we want to use uswds#5437
• USWDS - JSON tokens: Demo color tokens in style dictionary uswds#5506
• USWDS - JSON tokens: Determine which tokens to convert to JSON uswds#5507
• Prototype semantic token
• Prototype component token

4 months

• 📍Convert design tokens to JSON and CSS variables #307
• Convert JSON tokens to SCSS
• Create token library proof of concept

6 months

• Export tokens in package.json
• Convert theme and state tokens to JSON
• Build out token library

8 months

• Site uses token JSON data
• Prototype CSS variables from tokens

[mpaiva]

@brunerae - any updates on this ticket. We are doing similar effort in our project, extending the USWDS to JSON tokens and CSS custom properties. Our hope is to contribute with a PR once the work is done, but if you are working on this, any chance we could arrange a call to compare notes and collaborate?

@mzebley - adding you for context.

[amyleadem]

@mpaiva Thanks for reaching out! We would love to have a conversation with you about this. Can you reach out via uswds@gsa.gov to set up a time to chat?

[brunerae]

Archiving in favor of uswds/uswds#5462