semantic-theming

Enforce semantic tokens by defining CSS variables for your design system and using ESLint rules like no-raw-colors to prevent raw color literals. Replace hardcoded colors with semantic class names such as bg-surface, text-primary, and border-primary across your Tailwind utilities.

Identify raw color utilities in your codebase, map them to semantic tokens defined in your project's theming documentation, then refactor className compositions using cn, clsx, or cva helpers. The ESLint theming rule flags violations to guide migration.

Yes. Semantic theming integrates with your Tailwind configuration and ESLint setup. Define semantic tokens via CSS variables, configure the no-raw-colors ESLint rule, and reference your docs/THEMING.md during refactoring for consistency.

Run your ESLint theming rule across React components and UI code to detect non-semantic utility classes and raw color literals. The rule identifies violations and suggests replacements aligned with your project's semantic token definitions.

Semantic tokens maintain consistent theming across your UI and reduce design drift. They centralize color decisions, make theme changes easier, and ensure all components follow your design system conventions rather than using arbitrary hardcoded values.

Define semantic tokens as CSS variables, configure Tailwind to recognize them, and set up ESLint with the no-raw-colors theming rule. Document your token names and mappings in docs/THEMING.md for reference during refactoring.