USWDS-Elements: Test Tokens repo as CSS Props [DEMO]

[mahoneycm]

Solution

This demo shows a proof of concept using USWDS tokens as CSS props for USWDS web components.

Custom Props were output from tokens package to src/core/tokens/custom-props/color.css

Testing and review

1. Visit Banner component page
2. Inspect styles
3. Confirm background and links colors use CSS props defined in color.css
4. Update theme colors using CSS props found in /tokens/custom-props/colors.css
5. Confirm colors are updated on the page

[mejiaj]

@mahoneycm thanks for creating this demo. Is there a cloud pages preview link for this?

[mahoneycm]

@mejiaj Unfortunately I haven't been able to get it to work. I think the CircleCI dependency install task is failing because of the link to the GH branch. Because of this, I don't think the federalist preview ever builds.

https://federalist-ab6c0bdb-eccd-4b26-bb5f-b0154661e999.sites.pages.cloud.gov/preview/uswds/web-components/cm-demo-token-props/?path=/docs/readme--docs

[mejiaj]

@mahoneycm in the future, please flag internally if you see this issue so we can address.

In the meantime, I've emailed cloud.gov pages support and CC'd Matt.