You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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)
Using css variables
The text was updated successfully, but these errors were encountered:
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.
Environment
@mantine/core
: 7.14.0tailwind-preset-mantine
: 1.3.0tailwindcss
: 3.4.14Description
After upgrading to version 1.3.0,
tailwind-preset-mantine
brings new features, which is support alpha-value. So we can use syntax liketext-gray-700/50
to get the color with a alpha value. The principle of this feature is to wrap css color variables througth syntaxrgb(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
![image](https://private-user-images.githubusercontent.com/26267243/385642833-1f46410c-5e31-4d0b-9e24-2c4b5de0508d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkyNDUyODksIm5iZiI6MTczOTI0NDk4OSwicGF0aCI6Ii8yNjI2NzI0My8zODU2NDI4MzMtMWY0NjQxMGMtNWUzMS00ZDBiLTllMjQtMmM0YjVkZTA1MDhkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjExVDAzMzYyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWZhN2Q0ZTI4MmJkMTllNjU1MTAyMjIzZWQ1NTNhZDNmZGRmZTljYzBhMjE0YzUxZWRjMjdkY2U2NjQxMTcyZmUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.-ZxrGz91_7ZaAeiFTzTJZTkslquFLRc_cJHzlvvEDGo)
rgb(from <color> R G B / A)
syntax. The color calculation result iscolor(srgb 0.133333 0.545098 0.901961)
Using css variables
![image](https://private-user-images.githubusercontent.com/26267243/385644032-0db26db9-9919-4575-b10f-7aa4ab8eb28b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkyNDUyODksIm5iZiI6MTczOTI0NDk4OSwicGF0aCI6Ii8yNjI2NzI0My8zODU2NDQwMzItMGRiMjZkYjktOTkxOS00NTc1LWIxMGYtN2FhNGFiOGViMjhiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjExVDAzMzYyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM4OGEzZmE0NGYwNWI5YjFiYWRlZmIxM2ZkNmZmMmIzY2YzODZlYzNiN2FhNmRkOTlkMWUxMzVhN2Q5MTY2ODcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.7W1TJR03MpI1qgpXI--uX5WNls6rMpLGxYrw1yKIY4E)
The text was updated successfully, but these errors were encountered: