refactor(frontend): modernize and align the design system - #1518
Merged
Conversation
hmans
marked this pull request as ready for review
July 14, 2026 08:06
hmans
changed the title
hmans
added a commit
that referenced
this pull request
Jul 15, 2026
…e-mapping * origin/main: (35 commits) feat(frontend): add inline message timestamps (#1558) docs(architecture): improve inventory readability (#1555) perf(connect): reuse DEKs across request hydration (#1554) docs(architecture): split runtime inventory by category (#1552) fix(core): decrypt projected user PII on demand (#1551) fix(frontend): avoid blank line when enabling rich mode (#1548) feat(rooms): add joinable room previews (#1546) feat(core): bound projection snapshot cleanup (#1538) fix(frontend): restore subtle design colors (#1545) fix(core): preserve cleared RBAC defaults (#1543) fix(pwa): use server name for installed app (#1542) fix(frontend): show pending permission updates (#1540) fix(frontend): collapse invisible markdown spacing (#1539) feat(frontend): expand lazy-loaded locale support (#1537) refactor(frontend): modernize and align the design system (#1518) feat(core): add encrypted projection snapshot canary (#1488) fix(frontend): allow app-wide mobile sidebar swipes (#1534) ci: add remote server compatibility smoke test (#1531) feat(frontend): add regional English locales (#1532) fix(frontend): support remote-only sessions (#1530) ... # Conflicts: # cli/internal/core/external_identities.go # docs/ARCHITECTURE.md # docs/adr/INDEX.md # docs/fdr/FDR-001-roles-and-permissions.md
tha23rd
added a commit
to tha23rd/chatto
that referenced
this pull request
Jul 16, 2026
Upstream's design-system realignment (chattocorp#1518) shifted the dark ladder one step darker, anchoring `--color-background` at `neutral-950` (#0a0a0a). That reads as pure black and is what people have been complaining about. Anchor the dark theme at Discord's chat plane (#313338) instead and retint the surface ladder, text, input and accent tones to Discord's palette. The surface ladder still rises from `background`, which is deliberately not Discord's arrangement (Discord's sidebar is darker than its chat plane). Inverting it would push Chatto's ~105 `surface` consumers — panels, dialogs, menus — below the page and make them read as holes instead of raised cards. Raising the background costs every foreground ~2-3 stops of contrast, so several tokens had to move to hold WCAG AA: - `muted` -> Discord's --interactive-normal (#b5bac1). It renders on `surface-emphasized` too, where Discord's own --text-muted manages only 3.55:1. - `action` -> the light end of the blurple family (#a5b4fc). The token both fills buttons and paints accent text/icons at 24 sites; Discord's exact #5865f2 is a dark accent that carries white as a fill but reaches only 2.74:1 as text. Splitting fill and text roles the way Discord does is left as follow-up. - `server` -> violet-300. indigo-400 drops to 4.24:1, and indigo-300 is now exactly `action`, which would collapse the server pill into the action accent. - `presence-offline` -> Discord's offline grey, the only presence tone needing a dark override; gray-500 fails even the 3:1 non-text bar here. - Syntax `comment`/`keyword` -> GitHub's dark *high-contrast* variants, since code blocks render on far lighter surfaces than before. Also fix two hardcoded colours that upstream left behind when chattocorp#1518 moved the token: the pre-hydration background hint in app.html still painted #171717 and the dark `theme-color` meta still declared #262626, so first load flashed from the old colour to the new one. Both now track `--color-background`. Add dark-theme accessibility scans. The existing route scans run under Chromium's default light colour scheme, so they cannot see a dark-only contrast regression — the `muted` and `action` failures above were invisible to every other check in the suite and only surfaced once dark was scanned directly. Light theme is untouched. Co-authored-by: tha23rd <zgbluhm@gmail.com> Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
Chatto's frontend design system had accumulated overlapping token names,
numbered surfaces, decorative control gradients, and several one-off versions
of controls that already existed as shared primitives. That made ordinary UI
heavier than necessary and left agents with multiple plausible implementation
paths.
This PR simplifies that surface while keeping Chatto's IBM Plex typography,
cool-neutral palette, sky action color, indigo server identity, and restrained
conversation-first tone.
Closes #1517.
What changed
tokens; removed historical aliases and numbered surfaces; and restored a
clearer framed light-mode hierarchy with WCAG-aware solid-fill text.
spacing, consistent panels/tables/dialogs, and broader use of Button,
Combobox, Checkbox, and the new accessible RangeField primitives.
permission-matrix presentation, and added coordinated row/column hover states.
card, replaced the fragile room label with a call-UI action, and made both
sidebar resize separators symmetric, hoverable, accessible, and non-blocking.
aria-current, semantic E2Elocators, and explicit foreground tokens for badges and status indicators.
Storybook catalog, component/E2E coverage, and Darwin/Linux visual baselines.
Compatibility and rollout
deployment, or migration changes.
internal component reuse, interaction polish, and accessibility semantics.
Test plan
mise lint-frontend— passed (design guardrails, Paraglide, Svelte check,ESLint; 0 diagnostics)
mise test-frontend— passed (250 files, 2,104 tests)regressions — passed (4 tests)
media E2E, and all four standard E2E shards
The in-app browser connection was unavailable in this workspace. Visual review
used the browser-rendered committed baseline suite and user-provided screenshots;
live-state behavior used Playwright E2E coverage.