Microsoft/vscode

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

Open

#139.840 geöffnet am 28. Dez. 2021

Auf GitHub ansehen
 (7 Kommentare) (28 Reaktionen) (1 zugewiesene Person)TypeScript (10.221 Forks)batch import
editor-color-pickerfeature-requesthelp wanted

Repository-Metriken

Stars
 (74.848 Stars)
PR-Merge-Metriken
 (Durchschn. Merge 11h 43m) (1.000 gemergte PRs in 30 T)

Beschreibung

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-Richtung
Finde den Quellcode des Farbwählers, lokalisiere die Farbkonvertierungsfunktionen und aktualisiere sie, um die CSS Farbebene 4 Syntax auszugeben (z.B. `hsl(200deg 50% 30% / 80%)` anstelle von `rgba(0,0,0,0.8)`). Verwende Prozent für Alpha und füge das `deg` Suffix für den Farbtonwinkel hinzu. Beziehe dich auf das Format der Chrome DevTools zur Konsistenz.
Tech Stack
typescript
Domain
frontend
Issue Type
Funktion
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
GitTypeScript
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
75