Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open
  • Is something wrong?
#433 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
20/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
css, python
Domain
accessibility, design, frontend

Research direction

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.

Written by the indexing model from the issue text.

Description

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.
Dominant language
TypeScript
Stars
3
Forks
0
Avg merge
14h 40m
Merged PRs (30d)
242

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ColdPhase/flux

All issues in ColdPhase/flux

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.