Add component and spacing tokens to variables.css

[ryguyk]

This is less a "bug" and more of a feature request, but there is some expected behavior that I did not see.

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

In trying to use the tokens in variables.css (unpkg link), I did not find tokens for web components or web spacing.

https://dsva.slack.com/archives/CBU0KDSB1/p1734455105370889?thread_ts=1733170194.602409&cid=CBU0KDSB1

What I expected to happen

I expected to see all the tokens I would need in order to match VADS components and overall layout.

Reproducing

N/A

• Formation version:
• Device: (e.g. iPhone 8, Macbook)
• Browser: (e.g. Firefox, IE 11)

Steps to reproduce:
N/A
1.
2.
3.
4.

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

We can implement these "by hand", but it'd be nice to stay coupled with the design system so this is less fragile later.

Details

[humancompanion-usds]

Foundation tokens

We need to add some missing design tokens from our Foundational set to variables that we export to other systems:

• Spacing units
• Elevation
• Shape
• Size

Spacing units is the priority for this issue. Engineers should be able to add this to our list of variables quickly.

Component tokens

Then we should move onto components. Form Engine team has prioritized these components for us:

• Accordion
• Alert
• Button
• Radio button
• Search

We had started on defining component-level tokens for va-button. We need to complete that token list and repeat that for the other components. Designers should start on this as soon as possible (and I can assist as needed).