[style](trx-frontend-http): refine web UI design system and a11y #1

2026-07-17T20:59:44+02:00

sjg commented

2026-07-17 20:59:44 +02:00

Introduce a shared design-token layer and apply it to the web
frontend for a more consistent, readable, and accessible feel.
Pure CSS plus one HTML block; no app.js behaviour changes, and the
existing multi-theme (style x light/dark) system is preserved.

Add spacing, type, radius and motion tokens to :root.
Fix undefined --surface consumed by .controls-tray, which dropped
the panel background entirely; it now resolves per theme.
Set body line-height and font smoothing; collapse near-duplicate
font sizes onto canonical scale steps.
Rebuild the auth gate with classes and replace hardcoded colours
(#ff6b6b, #9aa4b5) with theme variables so it renders correctly in
every theme.
Add an opacity fade on tab switches, gated by prefers-reduced-motion.
Extend focus-visible rings to the spectrum canvas, tabindex controls
and links.
Add a self-theming --accent-text token to lift accent-coloured text
(links, active tab) to WCAG AA without altering brand fills.

Signed-off-by: Stan Grams sjg@haxx.space

Introduce a shared design-token layer and apply it to the web frontend for a more consistent, readable, and accessible feel. Pure CSS plus one HTML block; no app.js behaviour changes, and the existing multi-theme (style x light/dark) system is preserved. - Add spacing, type, radius and motion tokens to :root. - Fix undefined --surface consumed by .controls-tray, which dropped the panel background entirely; it now resolves per theme. - Set body line-height and font smoothing; collapse near-duplicate font sizes onto canonical scale steps. - Rebuild the auth gate with classes and replace hardcoded colours (#ff6b6b, #9aa4b5) with theme variables so it renders correctly in every theme. - Add an opacity fade on tab switches, gated by prefers-reduced-motion. - Extend focus-visible rings to the spectrum canvas, tabindex controls and links. - Add a self-theming --accent-text token to lift accent-coloured text (links, active tab) to WCAG AA without altering brand fills. Signed-off-by: Stan Grams <sjg@haxx.space>

sjg added 1 commit 2026-07-17 20:59:45 +02:00

[style](trx-frontend-http): refine web UI design system and a11y 2121817c04

Introduce a shared design-token layer and apply it to the web
frontend for a more consistent, readable, and accessible feel.
Pure CSS plus one HTML block; no app.js behaviour changes, and the
existing multi-theme (style x light/dark) system is preserved.

- Add spacing, type, radius and motion tokens to :root.
- Fix undefined --surface consumed by .controls-tray, which dropped
  the panel background entirely; it now resolves per theme.
- Set body line-height and font smoothing; collapse near-duplicate
  font sizes onto canonical scale steps.
- Rebuild the auth gate with classes and replace hardcoded colours
  (#ff6b6b, #9aa4b5) with theme variables so it renders correctly in
  every theme.
- Add an opacity fade on tab switches, gated by prefers-reduced-motion.
- Extend focus-visible rings to the spectrum canvas, tabindex controls
  and links.
- Add a self-theming --accent-text token to lift accent-coloured text
  (links, active tab) to WCAG AA without altering brand fills.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NFpGtGTWUEYXLwZeZs2RAV
Signed-off-by: Stan Grams <sjg@haxx.space>

sjg merged commit 2121817c04 into main

2026-07-17 21:00:02 +02:00

sjg deleted branch style/web-ui-polish

2026-07-17 21:00:02 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: sjg/trx-rs#1