search

JavierM42 / tailwind-material-colors

TailwindCSS Plugin to use the Material 3 Color System with Tailwind, including Dynamic Color support.
57 stars 11 forks source link

disabled state of interactive-primary is not viewable #5

Closed ay13 closed 11 months ago

ay13 commented 11 months ago

I edited the main example page at https://tailwind-material-colors-docs.vercel.app/ to generate the screenshots.

bg-primary b0416c646562fa5999533d25bc8e2116

disabled 78755c745cae03f04f5d073d68e74812

JavierM42 commented 11 months ago

That's because the Material guidelines define the disabled state of the button as its on-color with 12% opacity for the background and 38% opacity for the text.

If you scroll to filled button or filled tonal button and click on the disabled specs on this page:

Screenshot 2023-11-08 at 10 48 39

Since the on color for primary is white, it's barely noticeable over a light background, but I don't think I should fix it, that's on Google 😅. Here's how it looks over a dark background:

Screenshot 2023-11-08 at 10 46 09
ay13 commented 11 months ago

The Filled (https://m3.material.io/components/buttons/specs#cbfd91a6-d688-4be7-9a69-672549de3ea9) and Tonal (https://m3.material.io/components/buttons/specs#6ce8b926-87c4-4600-9bec-5deb4aaa65d8) list on-surface as the disabled color.

Screenshot 2023-11-08 at 9 38 49 AM

JavierM42 commented 11 months ago

Oops, you're definitely right. Thanks for the heads up.

I'll try to fix it it, but it could take some time, I maintain this project on my free time and that's on short supply at the moment.

beautyfree commented 11 months ago

faced the same problem and hope to see fix soon

JavierM42 commented 11 months ago

I gave it a look and the fix was simple enough. Should be solved if you update to the lastest version (1.1.3).

Thanks for the feedback! Don't hesitate to open another issue if this doesn't fully work or you find anything else ✨