Scoping theme variables to utilities

[scottbedard]

I'm working with a design system that has many tokens, and we're trying to integrate them with a Tailwind theme. Is there a way to scope variables to specific utilities?

For example, our design system has colors that should only be used as backgrounds, and others that should only be used for text. How can we constrain our classes to make sure these colors aren't used incorrectly?

We're trying to modernize a very large codebase, and want the guardrails for our design system to be as strict as possible.

[wongjn]

There are undocumented property-specifc namespaces that you can use, i.e:

Property	namespace
background-color	--background-color-[name]
color	--text-color-[name]
border-color	--border-color-[name]

Search through the source code for others.

[scottbedard]

Very cool, thanks for the info! Do we know how safe it is to rely on this undocumented behavior? Is there any chance it will become a formal part of the API?

[wongjn]

I don't know how safe it is to rely on this undocumented behavior. I've not seen any comment from the maintainers regarding the stability of these namespaces.

[scottbedard]

Understandable. I guess this question is more like a feature request now. If the behavior already exists, I expect it would just be a matter of adding tests and a few entries to the namespace documentation.

I'll open a new thread here, thanks for your help.