[feat] Update/fix exported SASS tokens in package to utilize CSS custom props, rather hard values

[markcaron]

Our exported SASS in the package (/@rhds/tokens/scss/_variables.scss) has its tokens being assigned hard values (e.g., hex codes, etc.) rather than the design system's CSS custom properties. As a result, DX consumers using our SASS can't participate in RHDS's light/dark color schemes.

[bennypowers]

Before releasing this change we need to speak with stakeholders and confirm that it doesn't break their builds

[zhawkins]

This will break our builds.

I would recommend adding additional Sass variables that contain CSS variables with fallbacks. That way consumers can pick depending on their need.

Currently we have @rhds/tokens/scss/variables, we could also add @rhds/tokens/scss/css-variables.

[bennypowers]

Thanks @zhawkins. Can you give me some more information on how this would break your builds?
We should clarify that the current @rhds/tokens/scss/variables modules should not be used since they run contrary to design system guidelines, for the reasons mentioned above. With some more information about your use case, we might be able to help you find an easy solution.

[zhawkins]

We're currently using Sass tokens in multiple repos / projects. To swap these for RHDS css variables would involve some pretty broad testing. I don't think that's something we can prioritize in the short term.

Using design tokens via sass variables solves a very specific problem for us. It's a very straightforward approach to consuming token values and maintaining updates on a per project basis.

By that I mean...

Design says the color of this text needs to be rh-color-black.

Sweet, we add that to the Sass. rh-color-black. Done.

Given the current version of RHDS Tokens the project is on we can guarantee that the color for that text does not change out from under us. We can also guarantee that if someone accidentally overrides some CSS variables at the root, that text does not change color.

When it's time to update the token values we bump the RHDS Tokens dependency and test that specific project.

Right now this is where we're at. I foresee a world where Design would say, ok we need this pattern with both a light and a dark color scheme. Then we'll reach for css variables to control those (along with light-dark).