mirror of
https://github.com/openclaw/openclaw.git
synced 2026-08-27 21:07:01 -06:00
Peter Steinberger
fa19150155
* chore(ui): ship self-hosted webfont assets for theme families Latin and latin-ext woff2 subsets of Instrument Sans, Geist, DM Sans, Fraunces, and IBM Plex Sans, fetched unmodified from Google Fonts, with their SIL OFL 1.1 license texts beside the files. * feat(ui): give every theme family its own typeface and refine palettes Claw ships Instrument Sans (the declared-but-never-shipped Inter token is gone), Knot ships Geist, Dash pairs DM Sans with Fraunces chat prose, and Tide ships IBM Plex Sans; Absolutely, Beacon, and Phosphor keep their existing faces. Every built-in family now derives fonts/<theme>.css, so the per-theme map is gone; imported custom themes stay on the system stack. Palette repairs: Knot's invisible maroon second accent becomes steel silver (2.0 -> 10.6:1) with slightly structural borders; Dash's muddy brown accent becomes toasted caramel (5.0 -> 6.55:1) with a gold-cream second voice; Knot and Tide dark body text move from 15.2/14.2:1 into the ~10-12:1 dark comfort band (11.8/12.0:1). Light variants mirror the changes; theme-picker chips and docs follow.
153 lines
4.8 KiB
CSS
153 lines
4.8 KiB
CSS
/* Dash palette; selected by index.html and app/theme.ts. */
|
|
|
|
:root[data-theme="dash"] {
|
|
/*
|
|
* Accent — toasted caramel on deep cocoa
|
|
*
|
|
* WCAG 2.1 AA audit (bg = #1a1210, relative luminance ≈ 0.0069):
|
|
* --accent #cf8b4d contrast ≈ 6.55:1 AA text ✓ (on --card #221a16: 6.07:1 ✓)
|
|
* --accent-hover #dd9c60 contrast ≈ 7.9:1 ✓
|
|
* --primary-foreground #1a1210 on #cf8b4d button: 6.55:1 AA ✓
|
|
* --primary-foreground #1a1210 on #dd9c60 hover: 7.9:1 AA ✓
|
|
* --destructive-foreground #fafafa on #d32f2f button: 4.77:1 AA ✓
|
|
* --destructive-foreground #fafafa on #bc2a2a hover: 5.74:1 AA ✓
|
|
* focus-ring at 80% opacity: ≈ 4.1:1 against bg ✓ (non-text 3:1 required)
|
|
*/
|
|
--ring: #cf8b4d;
|
|
--accent: #cf8b4d;
|
|
--accent-hover: #dd9c60;
|
|
--accent-muted: #cf8b4d;
|
|
--accent-subtle: rgba(207, 139, 77, 0.14);
|
|
--accent-glow: rgba(207, 139, 77, 0.22);
|
|
--primary: #cf8b4d;
|
|
--primary-foreground: #1a1210;
|
|
|
|
/* Deepen only the text-bearing destructive fill; keep danger accents vivid. */
|
|
--destructive: #d32f2f;
|
|
--destructive-hover: #bc2a2a;
|
|
|
|
/* Focus — match caramel accent, slightly higher ring opacity for dark bg visibility */
|
|
--focus: rgba(207, 139, 77, 0.2);
|
|
|
|
/* Surfaces — deep cocoa tones */
|
|
--bg: #1a1210;
|
|
--bg-accent: #201816;
|
|
--bg-elevated: #28201c;
|
|
--bg-hover: #302822;
|
|
--bg-muted: #302822;
|
|
|
|
--card: #221a16;
|
|
--card-foreground: #ece0d8;
|
|
--card-highlight: rgba(255, 240, 225, 0.04);
|
|
--popover: #28201c;
|
|
--popover-foreground: #ece0d8;
|
|
|
|
--panel: #1a1210;
|
|
--panel-strong: #28201c;
|
|
--panel-hover: #302822;
|
|
--chrome: rgba(26, 18, 16, 0.96);
|
|
--chrome-strong: rgba(26, 18, 16, 0.98);
|
|
|
|
--text: #d8c8b8;
|
|
--text-strong: #f0e4da;
|
|
--chat-text: #d8c8b8;
|
|
--muted: #a18f80;
|
|
--muted-strong: #a08f7f;
|
|
--muted-foreground: #a18f80;
|
|
|
|
--border: #362a1c;
|
|
--border-strong: #4c3e2c;
|
|
--border-hover: #62513c;
|
|
--input: #362a1c;
|
|
|
|
--secondary: #221a16;
|
|
--secondary-foreground: #ece0d8;
|
|
/* Gold cream, a clear step off the caramel accent (9.8:1 on bg) so the two
|
|
voices no longer blur into one brown. */
|
|
--accent-2: #dcb878;
|
|
--accent-2-muted: rgba(220, 184, 120, 0.7);
|
|
--accent-2-subtle: rgba(220, 184, 120, 0.12);
|
|
|
|
--shadow-sm: 0 1px 2px rgba(10, 6, 4, 0.35);
|
|
--shadow-md: 0 4px 16px rgba(10, 6, 4, 0.45);
|
|
--shadow-lg: 0 12px 32px rgba(10, 6, 4, 0.55);
|
|
--overlay-shadow: var(--shadow-md);
|
|
|
|
--grid-line: rgba(255, 240, 225, 0.03);
|
|
/* Typography — DM Sans chrome, Fraunces chat prose (fonts/dash.css): the
|
|
Absolutely recipe tuned warm. Fallbacks keep text painting on failure. */
|
|
--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--font-chat: "Fraunces", Georgia, "Times New Roman", serif;
|
|
}
|
|
|
|
:root[data-theme="dash-light"] {
|
|
/*
|
|
* Accent — toasted sienna on warm parchment
|
|
*
|
|
* WCAG 2.1 AA audit (bg = #f7f2ec, relative luminance ≈ 0.893):
|
|
* --accent #8a512c contrast ≈ 5.7:1 AA text ✓
|
|
* --accent-hover #74421f contrast ≈ 7.4:1 AAA ✓
|
|
* --primary-foreground #ffffff on #8a512c button: 6.4:1 AA ✓
|
|
* focus-ring at 70% opacity: ≈ 3.3:1 against parchment bg ✓
|
|
*/
|
|
--ring: #8a512c;
|
|
--accent: #8a512c;
|
|
--accent-hover: #74421f;
|
|
--accent-muted: #8a512c;
|
|
--accent-subtle: rgba(138, 81, 44, 0.12);
|
|
--accent-glow: rgba(138, 81, 44, 0.16);
|
|
--primary: #8a512c;
|
|
|
|
/* Surfaces — warm parchment tones */
|
|
--bg: #f7f2ec;
|
|
--bg-accent: #f0e8e0;
|
|
--bg-hover: #e8ddd2;
|
|
--bg-muted: #e8ddd2;
|
|
--bg-content: #f0e8e0;
|
|
|
|
--card-foreground: #2c2118;
|
|
--card-highlight: rgba(80, 50, 20, 0.02);
|
|
--popover-foreground: #2c2118;
|
|
--session-hovercard-progress-surface: color-mix(
|
|
in srgb,
|
|
var(--card) 48%,
|
|
var(--panel-strong) 52%
|
|
);
|
|
|
|
--panel: #f7f2ec;
|
|
--panel-strong: #f0e8e0;
|
|
--panel-hover: #e0d4c8;
|
|
--chrome: rgba(247, 242, 236, 0.96);
|
|
--chrome-strong: rgba(247, 242, 236, 0.98);
|
|
|
|
--text: #4a3828;
|
|
--text-strong: #2c2118;
|
|
--chat-text: #4a3828;
|
|
--muted: #725d4d;
|
|
--muted-strong: #604838;
|
|
--muted-foreground: #725d4d;
|
|
|
|
--border: #ddd0c2;
|
|
--border-strong: #c8b8a6;
|
|
--border-hover: #b0a090;
|
|
--input: #ddd0c2;
|
|
|
|
--secondary: #f0e8e0;
|
|
--secondary-foreground: #4a3828;
|
|
/* Antique gold mirrors the dark variant's second voice (5.3:1 on bg). */
|
|
--accent-2: #7d6027;
|
|
--accent-2-muted: rgba(125, 96, 39, 0.75);
|
|
--accent-2-subtle: rgba(125, 96, 39, 0.1);
|
|
|
|
--shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.06);
|
|
--shadow-md: 0 4px 12px rgba(60, 40, 20, 0.08);
|
|
--shadow-lg: 0 12px 28px rgba(60, 40, 20, 0.1);
|
|
--overlay-shadow: var(--shadow-md);
|
|
|
|
--grid-line: rgba(80, 50, 20, 0.04);
|
|
/* Typography — DM Sans chrome, Fraunces chat prose (fonts/dash.css); see the
|
|
dark block. */
|
|
--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--font-chat: "Fraunces", Georgia, "Times New Roman", serif;
|
|
}
|