Referencing Theme Colors with CSS Custom Properties

Is your feature request related to a problem? Please describe.

I’ve been running into many challenges regarding the usage of theme colors. It works great when using the properties that are already linked to the colors theme key, but this isn’t always flexible enough.

For example, the variant of a complex component can get messy really quickly if the background-color need’s to be in a pseudo-element or something like that.

Also, the theme custom properties can’t actually be used like var(--theme-ui-colors-primary), which doesn’t help.

Describe the solution you’d like

I’m thinking about linking theme keys to custom properties by checking if that property contains a color related key. Example: –color-random-name || –bg-of-something || –fill-of-something || …

'--color-base': "primary",
'--color-hover': "text",

This pattern could be implemented with many other properties too

This would allow for cleaner and more flexible variants.

Describe alternatives you’ve considered I initially wanted to just use the custom properties from the theme, but because of their shape, they can’t be used outside of Theme UI.

Changing the shape of those variables would allow using the theme defined colors, by simply referencing the var().

Should change from: --theme-ui-colors-primary: var(--theme-ui-colors-primary,#0759F9); to: --theme-ui-colors-primary: #0759F9;

Additional context Another use case that would benefit from this would be theming SVG’s. By running SVG’s through SVGO I can replace set color codes with custom properties. Then I would create color sets for those, but can’t access them on the SVG.

[atanasster]

guys, I think we can close this issue and consolidate all conversation to #1234 or directly to the babel plugin repo

[atanasster]

@fcisio - thanks a lot, I created a new thread #1234 where we can discuss the specs and work together on those transformations.