Does not work with windy-radix-palette
silveltman opened this issue ยท 6 comments
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
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 :)
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! :)
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
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.
Awesome, thanks the help and keep on the great work! ๐
Thanks I appreciate it :)