ewilliams28/openclaw
1
0
Fork 0
mirror of https://github.com/openclaw/openclaw.git synced 2026-08-12 21:53:00 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): dark-mode body text renders brighter than the dark-reading comfort band (#121409)

Browse Source 
* fix(ui): soften default dark-mode body text to ~12:1 contrast

Drop --text/--chat-text from #d4d4d8 (12.87:1 on --bg) to #cdcdd1
(12.01:1 on --bg, 11.10:1 on --card) so dark body text sits inside
the 10-12 comfort band instead of above it; brighter body text
halates on dark backgrounds. Light mode, openknot, dash, --text-strong,
and --muted are unchanged.

* fix(ui): dim dark body text a further step to ~11.4:1

#cdcdd1 -> #c8c8cc (11.41:1 on --bg, 10.54:1 on --card), mid-band
instead of top-of-band.

* fix(ui): settle dark body text at ~10:1 on --bg

#c8c8cc -> #bcbcc0 (10.05:1 on --bg, 9.29:1 on --card) per visual
preview pick; low end of the dark comfort band on the page, slightly
under it on cards, still well above AAA.

* docs(ui): sync design-system guides with new dark --text token

ClawSweeper P3: color-tokens.md and accessibility.md still published
#d4d4d8 (~12.9:1); both now name #bcbcc0 (~10.1:1).
This commit is contained in:
Peter Steinberger
2026-08-09 22:30:50 -07:00
committed by GitHub
parent d5457ad62d
commit 4b6a9785c9
3 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/docs/design-system/accessibility.md
+1 -1
View File
@@ -8,7 +8,7 @@ OpenClaw targets **WCAG 2.1 AA**. This checklist applies to every UI component
| Context | Minimum Ratio | Notes |
| ----------------------------------------- | ---------------- | -------------------------------------------------- |
| Normal body text (< 18px / < 14px bold) | **4.5:1** | Use `--text` (#d4d4d8) or stronger on `--bg` |
| Normal body text (< 18px / < 14px bold) | **4.5:1** | Use `--text` (#bcbcc0) or stronger on `--bg` |
| Large text (≥ 18px regular / ≥ 14px bold) | **3:1** | Headings in chat thread |
| UI component boundaries (inputs, buttons) | **3:1** | Border colours against adjacent background |
| Focus indicators | **3:1** (AA) | `--focus-ring` / `--focus-glow` already compliant |
ui/docs/design-system/color-tokens.md
+1 -1
View File
@@ -32,7 +32,7 @@ Light mode uses a warm paper palette: ivory backgrounds, warm gray borders (`#e8
| Token | Dark Value | Contrast on `--bg` | Use |
| ---------------- | ---------- | ------------------ | -------------------------------------------------- |
| `--text` | `#d4d4d8` | ~12.9:1 ✅ | Body copy, labels |
| `--text` | `#bcbcc0` | ~10.1:1 ✅ | Body copy, labels |
| `--text-strong` | `#f4f4f5` | ~17.3:1 ✅ | Headings, emphasis |
| `--muted` | `#8b8b94` | ~5.6:1 ✅ | Placeholder, metadata |
| `--muted-strong` | `#898990` | ~5.5:1 ✅ | Secondary text, captions; prefer `--text` for body |
ui/src/styles/base.css
+5 -3
View File
@@ -21,11 +21,13 @@
--chrome-strong: rgba(14, 16, 21, 0.98);
/* Text - Clean contrast
* Keep --muted AA on dark surfaces; do not dim muted body text with opacity. */
* Keep --muted AA on dark surfaces; do not dim muted body text with opacity.
* --text targets ~10:1 on --bg #0e1015 (10.1; 9.3 on --card) — the dark
* comfort band is ~10-12 and brighter body text halates on dark. */
--text: #d4d4d8;
--text: #bcbcc0;
--text-strong: #f4f4f5;
--chat-text: #d4d4d8;
--chat-text: #bcbcc0;
--muted: #8b8b94;
--muted-strong: #898990;
--muted-foreground: #8b8b94;