mirror of
https://github.com/openclaw/openclaw.git
synced 2026-07-14 07:36:06 +00:00
2ac723282c
* feat(ui): add settings design-language foundation (tokens, settings.css, helpers) * refactor(ui): move settings workspace shell styles into settings.css * refactor(ui): migrate all settings surfaces to the unified settings design language Every settings surface (General quick+advanced schema form, Appearance, Communications, Automation, MCP, Infrastructure, AI Agents, Channels, Connection, About, Profile, Model Providers, Plugins, Skills, Skill Workshop chrome, Devices, Worktrees, Debug, Logs, Activity, Automations, Sessions, Usage chrome) now renders through the settings-ui helpers and settings.css: sections as plain uppercase headings outside one flat group surface, hairline-divided rows, a single toggle/segmented/status vocabulary, status dots instead of pills, and no cards-in-cards or enter animations. Deletes the qs-*/cfg-*/config-section-card/account-card/ plugins-row/cron-editor-card/session-badge/agent-pill families and orphaned shared rules. * style(ui-docs): format design-system docs * fix(ui): make activity statusKind lookup exhaustive for consistent-return lint * fix(ui): address settings design-language review findings Label-wrapped toggle rows with required accessible names, named selects and cron form controls, busy-disabled segmented controls with restored theme-transition anchors, collapsible skill groups, semantic plugin headings, gateway connected status, paired-devices empty state, logs subtitle, cron prompt help, and keyboard-accessible session goal objectives. * fix(ui): harden settings primitives per review round two Wrap row action clusters, fully-inset nav focus ring, restore number steppers in the schema form, cap node capability lines, keep the named Activity region landmark, and associate cron help text via the row label. * fix(ui): skip empty section headings and fix the toggle doc example * docs(ui): import renderSettingsToggleRow in the settings example * fix(ui): rename number stepper delta to avoid shadowing
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.