`transparent` displaying as black (`0, 0, 0`)
troymcginnis opened this issue · comments
Describe the bug
When setting a color token with a value of transparent, the CSS variable is set to 0, 0, 0 with a default of --tw-bg-opacity: 1. This causes the output color to be black.
My assumption is that this has something to do with the way that Themer removes alpha channels from colors to support the opacity modifier syntax, though I'm not sure how to overcome this without using an arbitrary value such as bg-[transparent]. This may work in some cases but my preference would be to stick with the default TW setup of bg-transparent.
Your minimal, reproducible example
https://codesandbox.io/p/sandbox/magical-swartz-t09moi?file=%2Fpackage.json%3A16%2C29-17%2C35
Steps to reproduce
- Hover over the first two buttons (note black background)
- Hover over last button (note transparent background using
hover:bg-[transparent]
Expected behavior
The expected behaviour is that the top two buttons will have transparent backgrounds since using the transparent color keyword.
How often does this bug happen?
Every time
Screenshots or Videos
Platform
- macOS Ventura 13.0 (22A380)
- Google Chrome
- Version 113.0.5672.126
tailwindcss-themer version
v3.1.0
Additional context
No response
This issue has been automatically marked stale because it it received no activity for 60 days. If you wish to keep this open, please leave a comment. Thanks.
Bump
Thanks for opening this! I'll be sure to take a look at it soon
Thanks for opening this! I'll be sure to take a look at it soon
Thanks!
This is similar to #74 in that users of tailwindcss-themer want to use colors with alpha values. I do think good use cases are presented, but tailwind wants to manage opacity itself.
In the interest of supporting the community use cases I'll consolidate this into #95 where this can be further discussed. I'd love to get your thoughts @troymcginnis :)
I'll close this for now as this is expected behavior.
🎉 This issue has been resolved in version 4.0.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
I just released this feature in v4. @troymcginnis let me know if this addresses your issue.
@RyanClementsHax Upgraded and looks to be working as expected! Thanks so much for implementing the change 🙏🏼
No problem! Happy to help.