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

Abierto
  • ¿Algo no está bien?
#12,101 5 comentarios 3 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript
Área
data-visualization, frontend

Línea de trabajo

Empieza reproduciendo el fallo de animación con el CodePen enlazado y, después, sigue el tratamiento del color de Chart.js para colores animados. Compara el comportamiento de oklch(), lab(), color() y la sintaxis de hsl()/rgb() separada por espacios, y define como terminado que esos formatos funcionen en el escenario de animación descrito sin romper el tratamiento existente de colores sólidos.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
JavaScript
Estrellas
67.8k
Forks
12k
Merge medio
7 h 27 min
PR fusionados (30 d)
4

Preparar el entorno

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de chartjs/Chart.js

Todos los issues de chartjs/Chart.js

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.