CSS-Library: add missing tokens after audit of formation

[it-harrison]

Chromatic

https://2294-add-tokens-to-css-library--65a6e2ed2314f7b8f98609d8.chromatic.com

---

Description

This PR adds USWDS color tokens that exist in Formation to css-library. It also adds the DSVA semantic tokens as requested by @humancompanion-usds. Adding the semantic tokens means that there are now duplicate tokens (different name, same color value), for example hub.careers and vads-color-hub-careers. In addition, there still exist primitive color tokens which optimally would not be included.

The issue with removing the primitive color tokens and duplicates in this PR is that they are in use in vets-website right now. So we can leave them in css-library to make the switch-over easier or remove the duplicates now but realize that before deprecating Formation we would need to update those variables when referenced in vets-website.

Closes 2294

QA Checklist

• Component maintains 1:1 parity with design mocks
• Text is consistent with what's been provided in the mocks
• Component behaves as expected across breakpoints
• Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
• Designer has signed off on changes (if applicable. If not applicable provide reason why)
• Tab order and focus state work as expected
• Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
• New components are covered by e2e tests; updates to existing components are covered by existing test suite
• Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Acceptance criteria

• QA checklist has been completed
• Screenshots have been attached that cover desktop and mobile screens

Definition of done

• Documentation has been updated, if applicable
• A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

[jamigibbs]

The issue with removing the primitive color tokens and duplicates in this PR is that they are in use in vets-website right now. So we can leave them in css-library to make the switch-over easier or remove the duplicates now but realize that before deprecating Formation we would need to update those variables when referenced in vets-website.

eek. Is it worth making a follow-up ticket for this clean-up work now to have in our backlog? I'm not sure the timeline for when we could do that though. What do you think @micahchiang?

EDIT: Follow-up ticket here:

• Update vets-website scss color variables to use those in css-library not formation vets-design-system-documentation#2586