microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
163.23k stars 28.87k forks source link

Use modern (CSS color level 4) syntax for colors in the color picker #139840

Open glen-84 opened 2 years ago

glen-84 commented 2 years ago

When converting colors using the color picker, the old comma-based syntax is used:

image (it should also show hsl here, at the top of the picker, not rgba)

Please update the picker to use the modern (CSS color level 4) syntax for colors.

With regard to the exact syntax, I agree with these suggestions from @mathiasbynens:

  • consider being opinionated w.r.t. how to represent alpha values. IMHO using percentage notation is most readable, as it clarifies the range: e.g. 70% vs 0.7
  • consider being opinionated about using the deg suffix where applicable, e.g. in the first parameter for hsl() and the last non-alpha parameter for lch(). Again, because this clarifies that the range lies between 0-360.

i.e. Use percentages for alpha, and always include the deg suffix.

This also matches the syntax displayed in Chrome developer tools.

glen-84 commented 2 years ago

@rebornix Please mention the issue that this duplicates. I searched before opening this, and again now, but I can't find one.

rebornix commented 2 years ago

I thought there is an easier one but I couldn't find it anymore. Let's use this issue to track CSS color level 4 syntax support.