Use CSS variables for theme system

[mateusfg7]

Describe new feat

Replace theme system with css variables, something like:

global.css

@layer base {
  :root {
    --primary: #345678;
    --primary-foreground: #652345;
  }
  .train-rain {
    --primary: #236587;
    --primary-foreground: #235687;
  }
  .waterfall {
    --primary: #236587;
    --primary-foreground: #235687;
  }
}

tailwind.config.js

// code ...
extend: {
  colors: {
    primary: {
      DEFAULT: "var(--primary)",
      foreground: "var(--primary-foreground)"
    }
  }
}

some-component.tsx

<span class="text-primary-foreground">Some Text</span>

And remove all the bunch of tailwind variants for each component. Use a centralized class and variables theme system.

Referencies

No response