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

Aperta Adatta ai principianti
  • Qualcosa non va?
#374 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
65/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
css, typescript
Ambito
frontend

Direzione di ricerca

Leggi le regole in conflitto in TaskFlow.Web/src/index.css e i test del contratto sorgente in index.css.test.ts. Controlla le convenzioni esistenti dei test, quindi verifica che la regola attiva della modalità scura prevalga su quella predefinita della modalità scura, mentre l’aspetto della modalità chiara rimane invariato. Il lavoro è completo quando il test verifica lo sfondo di accento attivo e lo sfondo traslucido inattivo; coordina l’integrazione con #373 o successivamente, come indicato.

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

Descrizione

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.
Lingua principale
C#
Stelle
1
Fork
0
Merge medio
2h 2m
PR unite (30g)
98

Preparare l'ambiente

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

Tutte le issue di nevridge/TaskFlow

Issue simili

Altre issue su C#

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.