Does not work with windy-radix-palette

[Sil Veltman]

Describe the bug

Tailkwindcss-themer does not work when using with windy-radix-palette.

My config:

const radixColors = require("@radix-ui/colors");
const { toRadixVars } = require("windy-radix-palette/vars");

	theme: {
		extend: {
			colors: {
				test1: toRadixVars('blue')
			}
		}
	},
	plugins: [
		require('windy-radix-palette')({
			colors: {
				blue: radixColors.blue,
				red: radixColors.red,
			},
		}),
		require('tailwindcss-themer')({
			defaultTheme: {
				extend: {
					colors: {
						test2: toRadixVars('red')
					}
				}
			},
		}),
	],

bg-test1-6 gives the following css:

.bg-test1-6 {
    --tw-bg-opacity: 1;
    background-color: hsl(var(--blue6) / var(--tw-bg-opacity));
}

bg-test2-6 gives the following css:

.bg-test2-6 {
    background-color: var(--colors-test2-6);
}

So, the opacity is not applied. On the frontend it leads to the following, which does not work:
--colors-test2-6: hsl(var(--red6) / <alpha-value>);

Your minimal, reproducible example

https://play.tailwindcss.com/3nYqbqFC5u

Steps to reproduce

Open tailwindplay and look at what I explained

Expected behavior

I expect the same behaviour when applying the same configuration in tailwindcssthemer's extend, as in the regular extend

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Mac, svelte

tailwindcss-themer version

3.0.1

Additional context

No response

[Ryan Clements]

Hiya! Thanks for opening the issue! I see that you're using toRadixVars. Do you need to use that? It works if you use radixColors directly. Here is an example config file.

/** @type {import('tailwindcss').Config} */

const radixColors = require('@radix-ui/colors')
const { toRadixVars } = require('windy-radix-palette/vars')

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        test1: toRadixVars('blue')
      }
    }
  },
  plugins: [
    require('windy-radix-palette')({
      colors: {
        blue: radixColors.blue,
        red: radixColors.red
      }
    }),
    require('tailwindcss-themer')({
      defaultTheme: {
        extend: {
          colors: {
            test2: radixColors.red // 👈🏼 this is the change (you'll also need to change the applied class from bg-test2-6 to bg-test2-red6)
          }
        }
      }
    })
  ]
}

toRadixVars tries to generate its own css var abstraction which tailwindcss-themer is designed to handle causing the problem. I could bolt this feature into this plugin, but it seems simpler to let tailwindcss-themer handle the css var generation. I believe your css will also be smaller because you will only have one layer of indirection instead of two.

Let me know if this helps, but if it doesn't I'll reopen the issue :)

[Sil Veltman]

Thanks for your quick reply @RyanClementsHax !

It's cool that it works this way, especially since this would actually remove the need for windy-radix-palette (right?).

However, the classes begin generated as bg-test2-red6 instead of bg-test-6 is a problem for me, since this removes the whole theme-switching functionality, how I see it at least.

In this tailwindplay I laid out my how I would like it to behave: https://play.tailwindcss.com/7wRGMDY31W

The important thing here would be consistent classes, so that a background has a default class of bg-base-2 for example, and the color can be switched with tailwindcss-themer.

Would love to hear if you see any way of making this work! :)

[Sil Veltman]

Created a little helper function to remove the extra word in the classname, but if there's a better way to do it please let me know.

Also, manually added the light and darkthemes.

You can have a look here: https://play.tailwindcss.com/N2iK2VFtsV?file=config

Again, if there is a better way kindly let me know

[Ryan Clements]

Yup! That's what I'd recommend doing and it better fits in with the "philosophy" of this plugin.

You give it the values and it gives you css vars based on the way you named them.

[Sil Veltman]

Awesome, thanks the help and keep on the great work! 🙏

[Ryan Clements]

Thanks I appreciate it :)