Remove var implementation

[k11q]

Hi, first of all, thank you for making this plugin as it saves me a ton of time.

However, I find that when you use css-var, you can't see the colors when browsing. Since the colors are constant anyway, would you consider removing the var and just implement without? I wouldn't mind to contribute. If not I guess I would just fork it. See comparison below

[adiled]

radix-ui/colors is var based, that's also why it has implicit dark mode.

[brattonross]

Hey @khairulhaaziq, when I was first hacking on the first version of this package, the implementation registered the colors like you've suggested, using the hsl values. However, I decided against this implementation in a later version, as I felt that there were benefits to using css variables.

When we register colors with literal values, we must rely on tailwind's dark: prefix to switch the color in dark mode:

// tailwind.config.js
colors: {
  tomato: {
    // light mode tomato colors here...
  },
  tomatoDark: {
    // dark mode tomato colors here...
  }
}

<button class="bg-tomato-9 dark:bg-tomatoDark-9">...</button>

As you can imagine, it becomes repetitive to have to type this out each time you use a color. My thinking was that the majority of the time, we probably want to use the same step in the scale for both light and dark mode, so it would be nice if this was the case when using a single class e.g. bg-tomato-9. This is the main reason for using css variables.

I hope you understand my reasoning for wanting to stick with with css variables.