Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rgb(from <color> R G B / A) syntax seems losing original alpha channel #7

Open
gene9831 opened this issue Nov 13, 2024 · 3 comments
Open
Labels
bug Something isn't working

Comments

@gene9831
Copy link

Environment

  • @mantine/core: 7.14.0
  • tailwind-preset-mantine: 1.3.0
  • tailwindcss: 3.4.14

Description

After upgrading to version 1.3.0, tailwind-preset-mantine brings new features, which is support alpha-value. So we can use syntax like text-gray-700/50 to get the color with a alpha value. The principle of this feature is to wrap css color variables througth syntax rgb(from <color> R G B / A). This change seems to have caused a bug where the alpha channel in original css variable color was lost.

You can see the comparison between the two pictures below

Using rgb(from <color> R G B / A) syntax. The color calculation result is color(srgb 0.133333 0.545098 0.901961)
image

Using css variables
image

@songkeys
Copy link
Owner

Thank you for this issue! Nice catch. But I don't think there is good way to fix this?

I think we should probably:

a. revert this change?
b. hard calculate the color from rgba into rgb (but it will losing the original alpha channel)?

What do you think?

Related: tailwindlabs/tailwindcss#9143 (comment)

@songkeys songkeys added the bug Something isn't working label Nov 15, 2024
@gene9831
Copy link
Author

Maybe just revert those codes where the colors are in rgba format. I checked Mantine Default CSS variables list
, found that only the following color variables are in rgba format.

  • --mantine-color-*-light
  • --mantine-color-*-light-hover
  • --mantine-color-*-outline-hover

Of course this solution still cannot prevent users from defining custom color variables in rgba format.

@songkeys
Copy link
Owner

songkeys commented Nov 19, 2024

This has been temporarily fixed in #9 and released in v1.3.1. I'll keep this issue open, though, until we find a better approach.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants