Support for CSS Level 4 Color Syntax (e.g. oklch(), space-separated hsl(), etc)

Aperta
  • Qualcosa non va?
#12,101 5 commenti 3 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript
Ambito
data-visualization, frontend

Direzione di ricerca

Inizia riproducendo il malfunzionamento dell'animazione con il CodePen collegato, quindi traccia la gestione dei colori di Chart.js per i colori animati. Confronta il comportamento di oklch(), lab(), color() e della sintassi hsl()/rgb() separata da spazi, e considera il lavoro completato quando questi formati funzionano nello scenario di animazione descritto senza compromettere la gestione esistente dei colori pieni.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

type: enhancement
Feature Proposal

Description:

Chart.js currently doesn't have full support for modern CSS Level 4 color formats, like:

oklch(.623 .214 259.815)
color(display-p3 0.27 0.49 0.99)
hsl(216.89 100% 59.61% / 90%) (space-separated notation)

etc.

While these formats are increasingly supported across modern browsers and work fine within Chart.js when used directly as solid colors, they fail in some scenarios - for example, in animations:

animation: {
  numbers: { duration: 0 },
  colors: {
    type: "color",
    duration: 1000,
    from: "transparent",
  }
}

You can see the issue in action here: https://codepen.io/jwvqbbzv-the-looper/pen/RNWWzaG

Feature Request:

Please consider adding support for CSS Level 4 color formats, including oklch(), lab(), color(), and the updated space-separated hsl()/rgb() notation. Native browser support is already quite strong, and support in Chart.js would greatly improve flexibility and modern color handling.

Why it's important:

These formats are increasingly standard and used in modern CSS workflows.

They allow for perceptual color spaces (oklch, lab) and better control for accessibility and color contrast.

Currently, Chart.js users must work around limitations or avoid using animations with modern colors altogether.

Thank you!

Possible Implementation

No response

Lingua principale
JavaScript
Stelle
67.8k
Fork
12k
Merge medio
6h 15m
PR unite (30g)
3

Preparare l'ambiente

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di chartjs/Chart.js

Tutte le issue di chartjs/Chart.js

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.