mirror of
https://github.com/openclaw/openclaw.git
synced 2026-08-24 19:35:28 -06:00
Peter Steinberger
8e6c34fba3
* feat(ui): user-selectable accent color for the Control UI Adds an Accent color section to Settings -> Appearance: curated preset swatches plus a native custom color input. The choice persists as the gateway-synced ui.prefs.accent (#rrggbb) and takes precedence over the operator-level ui.seamColor, falling back to the active theme's accent when cleared. The shared apply path now also derives readable --accent-foreground/--primary-foreground ink from accent luminance, so light accents keep dark text on primary controls. Bundled accent-invariant cleanup: the embedded terminal resolves its background/cursor/foreground from live computed tokens instead of a hand-copied claw palette (fixes desync on knot/dash/custom themes), a baked rgba(255,92,92) gradient now uses color-mix over --accent, and duplicated diff-tint literals collapse into --danger-subtle/--ok-subtle. Environment branding moved behind a lazy runtime module (-2.5KB gzip startup JS). * fix(ui): derive status glows and tints from semantic tokens Status-dot glows, callout gradients, compaction-indicator borders, chip borders, and dreams pulse animations baked literal green/blue/amber/red rgba values -- several stale copies of old --danger/--info hexes -- so they ignored theme families and light mode's deeper status hues. All 22 sites now color-mix over --ok/--warn/--warn-strong/--danger/--info. * fix(ui): scope default accent swatch chip vars to a swatch class Reusing .settings-theme-card--<theme> on the accent swatch made theme-card Playwright locators resolve to two elements (strict-mode violation in the prefs-reconnect e2e suite). The default swatch now uses .settings-accent-theme--<theme>, added alongside the theme-card selectors in the theme-invariant chip var blocks. * fix(ui): carry --primary-hover through the accent override The accent apply path set --primary but not --primary-hover, so dark Claw/Knot primary buttons reverted to the theme hover color while an accent was active (ClawSweeper P2). Derive it from --primary like the accent hover, clear it on reset, and prove the resolved hover color via a painted probe in the appearance e2e.
OpenClaw Design System
OpenClaw's visual language is a dark-first, glass-surface system built around a deep charcoal base (#0e1015), a punchy signature red accent (#ff5c5c), and layered frosted-glass surfaces that create depth without solid panels. Motion is crisp and purposeful — fast micro-interactions (100ms) with spring-loaded expansions. All interactive elements meet WCAG 2.1 AA contrast requirements on dark backgrounds.
Contents
| File | What it covers |
|---|---|
| glass-surfaces.md | Two glass tiers, exact CSS values, no-solid-panels rule, @supports fallback |
| color-tokens.md | All design tokens with values, usage, contrast ratios, and anti-patterns |
| motion.md | Duration scale, easing functions, prefers-reduced-motion pattern, animation inventory |
| accessibility.md | WCAG checklist: contrast, focus, tap targets, ARIA, skip link, focus trap |
| settings-design.md | Settings page anatomy: sections, groups, rows, controls, status dots, migration rules |
Guiding Principles
- Glass, not solid — Surfaces use
backdrop-filterblur + semi-transparent backgrounds. No flat opaque panels in the main chrome. - Depth through layering — The background scale (
--bg,--bg-accent,--bg-elevated,--bg-hover,--bg-muted) communicates hierarchy without heavy borders. - Accent with restraint — Signature red (
--accent: #ff5c5c) for primary actions only; teal (--accent-2) for secondary/status. - Motion serves meaning — Animations telegraph state changes; they never play for decoration alone.
- Accessible by default — Every component ships with focus-visible styles, correct ARIA roles, and ≥4.5:1 contrast on text.