CSS Variables Support

[aVileBroker]

User story

As a Foundry UI developer, I want to access color (and other theme-related CSS) variables via CSS Variables. This will make writing frontend styles more efficient and concise.

AC

• Integrate css variables into the current system, such that the user can still pass a colors object to the context provider
• CSS variables should automatically be populated without additional developer intervention
• The CSS variables should be scoped to the children of the context provider
• Ideally, we should try to avoid wrapping the children of the context provider with another element like a div, as it carries its own styles and changing the DOM hierarchy could make this change not backwards-compatible

Context

Currently, the colorscheme/theme is passed through the context provider to all children. While this works well, we have been spoiled by using the context hook inside our styled subcomponents. Not only does this not work on react-native, but I was also told by a styled-component developer that using hooks inside of a styled component shouldn't be done at all.

For many cases, accessing the colors and other static css styles (measurements, border radii, etc) doesn't need to be passed through TypeScript. Cases where it does need to pass through TS are when we want to measure and alter colors dynamically, like using polished to maintain high-contrast colors, and modify colors by darkening/lightening/transparentizing/etc.

Dev hints

Check out this article by Josh W Comeau for details on implementing CSS variables in styled-components.