Fix: active settings segment button loses its accent background in dark mode

Abierto Apto para principiantes
  • ¿Algo no está bien?
#374 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
65/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, typescript
Área
frontend

Línea de trabajo

Lee las reglas en conflicto en TaskFlow.Web/src/index.css y las pruebas de contrato de código fuente en index.css.test.ts. Comprueba las convenciones existentes de las pruebas y, luego, verifica que la regla activa del modo oscuro prevalezca sobre la regla predeterminada del modo oscuro, mientras que la apariencia del modo claro no cambie. La tarea está completa cuando la prueba comprueba el fondo de acento activo y el fondo translúcido inactivo; coordina la integración con #373 o después, tal como se indica.

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

Descripción

bug

Found while grooming #326 (contrast audit); confirmed by reading TaskFlow.Web/src/index.css on main at 5405774. Not yet reproduced in a browser.

Problem

In dark mode the active settings segment button never gets its accent background. Two rules compete:

html.is-dark .settings-seg-btn {          /* index.css:697, specificity 0-2-1 */
  background: rgba(255, 255, 255, .07);
}
.settings-seg-btn.is-active {             /* index.css:700, specificity 0-2-0 */
  background: var(--accent);
  color: #fff;
}

The dark-mode rule has higher specificity (0-2-1 against 0-2-0), so .is-active loses the cascade and the active segment keeps the faint translucent background, with only the white label (color: #fff still applies) to mark it.

Suggested fix

Raise the active rule above the dark-mode rule, for example html.is-dark .settings-seg-btn.is-active (0-3-1) alongside the existing .settings-seg-btn.is-active, or scope the dark default so it does not match .is-active. Keep the light-mode appearance unchanged.

Acceptance Criteria

  1. Given dark mode, when the settings panel renders a segment control, then the active segment has the accent background (var(--accent)) and the inactive segments keep the translucent background.
  2. Given light mode, then the appearance is unchanged.
  3. Given the CSS source, then a source-contract test in index.css.test.ts asserts the dark-mode active rule exists and outranks the dark-mode default.
  4. Given the label colour on the active segment, then its contrast is handled by #373 (white on accent fails in dark mode for most themes). This issue only restores the background.

Edge Cases

  • Fixing this makes white-on-accent text visible where it is currently hidden by the missing background, so land it together with or after #373 (and #326's --on-accent token) to avoid showing a low-contrast label.
  • Check every page that renders the settings segment control, in every theme.

Out of Scope

  • Contrast of the active label (#373).
  • Redesigning the segment control.
Lenguaje dominante
C#
Estrellas
1
Forks
0
Merge medio
2 h 2 min
PR fusionados (30 d)
98

Preparar el entorno

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 nevridge/TaskFlow

Todos los issues de nevridge/TaskFlow

Issues similares

Más issues de C#

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.