Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

UI review (main 05f89591): cross-cutting consistency, focus and dark-mode defects

Aperta
  • Qualcosa non va?
#433 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à
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
20/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
css, python
Ambito
accessibility, design, frontend

Direzione di ricerca

Start with the token values in ui/tokens.css and the overlay and avatar rules in ui/ui.css, then the dark-mode rules in live/live.css. The contrast figures come from scripts/check_contrast.py. Several items need a design decision (the --t3 token, the dark token change already in progress), so this is not a single fix. Done means each numbered item is fixed, split into its own issue, or explicitly declined by the design owner.

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

Descrizione

bug

Cross-cutting UI review of main at 05f89591 against the final design "Prostota" (docs/design/final/README.md §2, tokens "Soft volume"). Refs #336.

Method and limits. This pass is a static audit of the shared stylesheets (app/apps/web/src/ui/tokens.css, ui/ui.css) and a scan of area CSS for literals, plus computed WCAG contrast for every text-token / surface-token pair. The planned running-app pass (Playwright in Docker against the preview) did not run: the review container could not install the Playwright Python package in time. Keyboard walk, CLS, console/network errors, 200 % zoom and 320 px overflow are therefore unverified in this issue.

Severity: H = visible to most people or an accessibility failure; M = visible defect on some screens; L = consistency / maintainability.

Contrast (computed from the token values)
  1. M — light --t3 on outer and fill surfaces is below AA. --t3 #6b6b6b gives 4.48:1 on --side #ebebed, 4.47:1 on --sub #ebebec and 4.16:1 on --hov #e3e3e5 (AA needs 4.5:1 for 12–14 px meta). The design only guarantees 4.5:1 on --bg and --el. Affects meta text in the sidebar (on --side), in chips/segmented tracks (--sub) and on hovered rows (--hov). Source: ui/tokens.css:31. Expected: meta on --side/--sub uses --t2, or the design owner adjusts the token.
  2. M — dark --t3 on --hov 4.15:1 and on --sub 4.62:1; dark --t2 on --hov 6.15:1. Being handled separately (dark --t2/--t3 token change in ui/tokens.css and scripts/check_contrast.py); listed for completeness.
  3. H — dark mode: live-session "screen" toggle is white on near-white. .lv-dev--screen.is-on { background: var(--t1); color: #fff; } — in dark --t1 is #f0f0f0, so the text is ~1.1:1. Source: live/live.css:96. Expected: background: var(--inv); color: var(--oninv).
  4. H — dark mode: live-session count badge white on --t2. background: var(--t2); color: #fff → ~2.2:1 in dark (#acacac), and 10 px / 700 hard-coded. Source: live/live.css:100. Expected: --inv/--oninv, size from --fs-xs.
Hard-coded values outside the token set
  1. M — avatar initials use fixed px sizes (9 / 11 / 12 px). .ui-avatar--sm|md|lg (ui/ui.css:308-310). 9 px is below the 12 px meta floor and none of them follow the system text size (README §2 Typography: "The phone follows the system text size"). Expected: rem values tied to the avatar size, e.g. --fs-avatar-* tokens.
  2. M — phone bottom bar labels are 11 px and 10.5 px. .ui-bottomnav__item (ui/ui.css:156, :168). README §4 Phone: "Meta text is at least 12.5 px". Expected --fs-xs (12.5 px on the phone). (The phone shell work in #341 / PR #414 may replace this bar; if it stays, it needs the token.)
  3. L — agent colours are literal hex, repeated three times. .kreska--clay … --rose light values and two copies of the dark values (ui/ui.css:260-270). Expected: --agent-clay … --agent-rose tokens in ui/tokens.css, switched with the theme like every other token, so the two dark copies cannot drift.
  4. L — radii outside the scale. border-radius: 3px (.ui-link, ui/ui.css:96; sheet grabber :194), 2px/1px indicator ends (:129, :141). Token scale: --r-sm 10, --r 14, --r-card 18, --r-lg 20, --r-pill. Indicator/grabber ends should be --r-pill; the link focus shape a named small radius token.
  5. L — --fs-xs and --fs-sm are the same value (.75rem / .78125rem on the phone, ui/tokens.css:53-54, :149). Two names for one size invite drift; keep one or document the difference.
  6. L — white literals in theme-aware controls. Switch knobs background: #fff (app/settings.css:49, live/live.css:151), theme previews #F4F4F5 / #0B0B0B (app/settings.css:71-73, intentional as pictures of the themes), live viewer backdrop #0e0f11 (live/live.css:190). Expected --el / --oninv for knobs; previews may stay literal but should reference the token values in a comment.
Focus
  1. M — overlay surfaces suppress the focus ring. .ui-overlay__surface { outline: none } (ui/ui.css:181). When a dialog or sheet moves initial focus to its surface (tabindex -1), a keyboard person sees no indication of where focus is. Expected: a visible inset ring (:focus-visible → outline-offset: -2px) like [tabindex="-1"]:focus-visible at ui/ui.css:31. Runtime confirmation pending.
Not verified (to repeat on the running app)
  • Keyboard-only walk, focus trap and Escape in ⌘K / Create task / detail panel.
  • CLS, font-swap flash (Geist uses font-display: swap), reduced motion.
  • Console errors and failed requests per screen.
  • 200 % text zoom and 320 × 640 overflow, WebKit phone spot check.
Lingua principale
TypeScript
Stelle
3
Fork
0
Merge medio
14h 40m
PR unite (30g)
242

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 ColdPhase/flux

Tutte le issue di ColdPhase/flux

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.