Microsoft/vscode

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

Open

#139,840 opened on Dec 28, 2021

View on GitHub
 (7 comments) (28 reactions) (1 assignee)TypeScript (10,221 forks)batch import
editor-color-pickerfeature-requesthelp wanted

Repository metrics

Stars
 (74,848 stars)
PR merge metrics
 (Avg merge 11h 43m) (1,000 merged PRs in 30d)

Description

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.

Contributor guide

Research direction
Find the color picker source code, locate color conversion functions, and update them to output CSS Color Level 4 syntax (e.g., `hsl(200deg 50% 30% / 80%)` instead of `rgba(0,0,0,0.8)`). Use percentage for alpha and include `deg` suffix for hue angles. Refer to Chrome DevTools format for consistency.
Tech stack
typescript
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
GitTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75