Color gradient doesn't work with 'color' property about rewindui HOT 5 CLOSED

Please take a look at this file: https://github.com/rewindui/rewindui/blob/main/packages/core/src/theme/styles/Button.styles.ts

This is the cva file of the Button component. If you scroll down a bit you will notice that for the combination of color blue and tone solid I am indeed using bg-blue-500.

All style files on Rewind-UI are using the cva library, which you can check out here: https://cva.style/docs/getting-started/variants

Now you can use the ThemeProvider and completely adjust the styles of any component. You can read more about it here: https://rewind-ui.dev/theming

It is really easy, give it a try and let me know what you think and if you managed to adjust it the way you want! 😃

from rewindui.

Hello Jo,

Could you post your code as well please?

from rewindui.

Tailwind usage :

<Button type="submit" className={`bg-blue-500`}>
     S' inscrire
 </Button>

It work great !

With rewind color property :

<Button type="submit" color="blue-500">
     S' inscrire
 </Button>

Not work !

Simple color property :

<Button type="submit" color="blue">
     S' inscrire
 </Button>

work great !

from rewindui.

Looks like you are trying to pass an invalid color value.

The available color values are: white, blue, red, green, yellow, purple, gray, dark and black.

You can read about it on the docs at the Tones & Color section here: https://rewind-ui.dev/components/button

Not sure why you are trying to pass the blue-500 value though and not just use the color="blue" value!

from rewindui.

Yep, in tailwind you can defined gradient of your color and sometimes you want to use the gradient of the principal color for colorise your UI.

So I can use bg-blue-500 bg-blue-800 for different gradient of my custom blue

It's a frequent use case, so rewind ui should consider it for further customization

Otherwise the solution of using tailwind's classes suits me very well, if indeed it is not possible for rewind.ui considered the color gradients in the "color" property

from rewindui.