Yes, the TAC methodology actually requires these theme elements (aka design tokens) to be implemented as CSS variables (aka CSS Custom Properties). There's a section on that here jordanbrennan.hashnode.dev/tac-a-new-css-methodol…
In practice, these design tokens are shared by every bit of the UI, which ensures the overall theme you're referring to:
- Components like Badge and Alert use them
- Utility classes use them
- Your app would also use them for any additional custom styling
Every design token is likely to have a utility class or more. Color design tokens for example would not only be used internally by the components, but also for utility classes like text color, background color, border color, etc. Same goes for typography tokens, spacing tokens, and others.
Would definitely do less complex utility classes and use more of them to style something. The methodology states that utility classes should be single-purpose like .flex is just display: flex. Very much the same pattern as Tailwind.