Skip to content

web: accessible light/dark color palette + dark-mode legibility fixes #1678

Description

@cliffhall

Replace the theme colors with a more accessible, more pleasing light/dark palette and fix dark-mode legibility problems. Follows AGENTS.md color rules (colors only as Mantine tuples in theme.ts / --inspector-* tokens in App.css; no raw hex in components; domain badge semantics in element components).

Scope (from the design-system handoff):

  1. theme.ts — full accessible tuples (inspector/gray/dark/green/red/yellow/blue/teal/violet), WCAG-AA at the primary shades.
  2. theme/ActionIcon.ts — neutral grey chrome icons (default color: "gray") instead of inheriting the blue primary.
  3. App.css — fix light surfaces (surface-bodygray-0, surface-cardwhite); add direction/method badge tokens; lift semantic status/log/task/history colors 1–2 steps in the dark scheme for legibility on charcoal.
  4. Dark-mode badges — token-driven MessageDirectionBadge + new MethodBadge element (+ stories/test); swap <Badge color="dark">{method}</Badge> in ProtocolEntry/NetworkEntry.

Supersedes the reverted #1677 (that patch had wrong values).

Metadata

Metadata

Assignees

Labels

v2Issues and PRs for v2

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions