search

tailwindlabs / tailwindcss-intellisense

Intelligent Tailwind CSS tooling for Visual Studio Code
2.82k stars 194 forks source link

OKLCH colors are not displayed correctly #896

Closed tunnckoCore closed 9 months ago

tunnckoCore commented 9 months ago

What version of VS Code are you using?

latest

What version of Tailwind CSS IntelliSense are you using? latest

What version of Tailwind CSS are you using?

latest

What package manager are you using?

deno / npm

What operating system are you using?

Linux

Tailwind config

see the repro, nothing special, just a single custom color

VS Code settings

no specifics

Reproduction URL

https://play.tailwindcss.com/UnEyn06BFX

Describe your issue

Problem is, that when you have a custom color, or overriding default ones, there are not visually shown when you use them on the classes like it happens with the bare bone defaults.

This happens no matter what format you use - hsl, rgb, oklch. It also happens on local VSCode, as well in the playground.

image

In the screenshot bg-reddy-5 is just a custom HSL color in this case.

I tried both theme.colors and theme.extend.colors, non of them works. I've not seen any issues or stackoverflows about that, and can't believe it cuz I bet many people are actually using custom themes for their businesses.. and what, they don't see the color in the place they are using it?! hell no :D

The whole problem also exists when you just plug the DaisyUI plugin which also does some coloring stuff. Thus, i don't see the colors of things like text-primary and bg-secondary.

Am I missing something or what?

tunnckoCore commented 9 months ago

Seems like the problem is bigger than that.. VSCode just don't support showing OKLCH yet... and i don't see any extensions for that either.

saadeghi commented 9 months ago

The whole problem also exists when you just plug the DaisyUI plugin which also does some coloring stuff. Thus, i don't see the colors of things like text-primary and bg-secondary.

I think that's another challenge. daisyUI color names don't have static values. They are CSS variables, and their values are based on the active theme. The active theme is defined at runtime (based on OS color preference or based on data-theme attribute)
So the code editor can not know what is the color value of primary because the code editor doesn't know which theme is active at runtime.

thecrypticace commented 9 months ago

@tunnckoCore You're right on target about LCH. VSCode's language server support has a color type that's only RGB. I have it on my list to parse out lch, oklch, xyz-d50, xyz-d65, etc˙ and display the closest RGB color. But until VSCode gets proper support for wider gamut color spaces we'd only ever be able to show approximations of certain colors.

The part about DaisyUI using variables is accurate too. There's no way for us to display a color of a CSS variable that can change at runtime.

I'mma leave this open for now as a reminder for me to tackle the issue with colors.

thecrypticace commented 9 months ago

Looks like we actually have an older issue open for this already: #887

Gonna close this one in favor of that one.