feat(theme): add semantic tokens, focus ring, and reduced-motion support

Browse Source

Adds the layer feature code has been missing: tokens that name a role — page
surface, subtle border, danger — instead of a colour. Every one resolves to a
Mantine variable rather than a literal, so they follow the colour scheme for
free and cannot drift from the theme. A parallel palette of raw hexes would
have recreated exactly the problem this exists to fix.

Also closes three accessibility gaps that had no implementation anywhere in the
codebase: no :focus-visible rule, no screen-reader-only utility, and no global
prefers-reduced-motion handling.

The focus work found a real bug, and nearly introduced a worse one. Mantine
already rings its own controls, so the first attempt deferred to it with
`outline: none` on .mantine-focus-auto. That suppressed Mantine's ring without
replacing it, leaving portal buttons with no focus indicator at all — and it
only showed up in one app, because which rule won depended on stylesheet order.
The rules use identical values, so overlapping them is invisible and safe;
opting out is not. The focus test now asserts computed outline width and style,
not just pixels, since a screenshot alone would not have caught this.

`status-tone.ts` establishes the six-tone vocabulary that the 48 scattered
status→colour maps will eventually collapse onto. Nothing consumes it yet.

No visual change: the 8 existing baselines pass unmodified.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

...

This commit is contained in:

fitse-yotor

2026-08-21 12:11:20 +03:00

parent 3d0183f12c

commit b63e07305a

8 changed files with 277 additions and 0 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

BIN

apps/e2e/visual/theme.spec.ts-snapshots/backoffice-focus-ring-chromium-win32.png Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 1.4 KiB