Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Add accessible colour set to use in line plots

Abierto
  • ¿Algo no está bien?
#357 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 7 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
25/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
typescript
Área
accessibility, design, frontend

Línea de trabajo

The issue gives Davidia's current eight-colour set as a reference, but the payload does not name the theme file or the plotting code, so first locate where the theme is defined in this TypeScript repo. The work is choosing a palette of 8-10 colours with good contrast, plus matching lighter or darker variants for dark mode, and exporting it from the theme. Done means a palette that a maintainer agrees on, checked for colour-blind distinguishability and contrast, and a note that line plots should also vary dash or weight.

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

Descripción

accepted

Propose to add a colour set that can be imported with the theme to use in line plots.

  • Should be around 8-10 colours
  • Colours clearly distinguishable from one another (although in line plots, colour should not be the only way to distinguish between lines, e.g. use dots/dashes with differing weight)
  • Good contrast for visual impairments (low vision, colour blindness)
  • Work for light and dark mode (same hue with brightness/lightness adjusted)

As an example, Davidia's current colour set is
'rgb(0, 0, 0)', // #000000, black
'rgb(0, 158, 115)', // #009e73, teal
'rgb(230, 157, 0)', // #e69d00, orange
'rgb(86, 179, 233)', // #56b3e9, light blue
'rgb(240, 228, 66)', // #f0e442, yellow
'rgb(0, 114, 178)', // #0072b2, blue
'rgb(213, 94, 0)', // #d55e00, dark orange
'rgb(204, 121, 167)', // #cc79a7, pink

Image

A useful tool for colour set accessibility.

Lenguaje dominante
TypeScript
Estrellas
9
Forks
4
Merge medio
7 d 17 h
PR fusionados (30 d)
29

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

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 DiamondLightSource/sci-react-ui

Todos los issues de DiamondLightSource/sci-react-ui

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.