From d2f64a231d649cb25545cf82f3cef236262e09e8 Mon Sep 17 00:00:00 2001 From: Jake Date: Thu, 7 May 2026 10:46:35 +0100 Subject: [PATCH] feat(theme): bump accent chroma, push sensory zones apart, richer status tokens Phase 10b colour push: theme reads as Magnotia, not "subdued generic dark". Same lightness band as Phase 10a (AA preserved), more chroma across accent, status tokens, and zone surfaces. Dark accent: #c98555 -> #d68450 (subtle/hover/glow recomputed). Light accent: #a06a3e -> #a3683a. Dark status: success #7ec89a -> #5fc28a, danger #e87171 -> #e85f5f, warning #e8c86e -> #e8be4a. Light status: success #2f7549 -> #1f7344, danger #a83838 -> #b32626, warning #b89a3e -> #a08a1f. Sensory zones pushed further apart so each zone reads as its own environment: cave cools toward blue-grey, energy warms toward red-orange, reset cools toward green. AA on body text verified for every Card surface in both themes. Stale accent rgba (201,133,85) replaced with new (214,132,80) across nine files. --shadow-accent in colors_and_type.css mirrored. No secondary tint token added: Magnotia's identity is amber-as-the-only- meaningful-colour. Cheaper to add a second meaningful colour later if a real need appears than to dilute the discipline now. Default surfaces, text tokens, and borders untouched per scope. --- src/app.css | 100 +++++++++++++--------- src/design-system/colors_and_type.css | 58 +++++++------ src/lib/components/HotkeyRecorder.svelte | 2 +- src/lib/components/ModelDownloader.svelte | 4 +- src/lib/components/SegmentedButton.svelte | 2 +- src/lib/components/Toggle.svelte | 2 +- src/lib/pages/DictationPage.svelte | 2 +- src/lib/pages/FilesPage.svelte | 4 +- src/lib/pages/SettingsPage.svelte | 24 +++--- 9 files changed, 110 insertions(+), 88 deletions(-) diff --git a/src/app.css b/src/app.css index 8a9ffdd..68bea42 100644 --- a/src/app.css +++ b/src/app.css @@ -58,16 +58,21 @@ /* Accent — warm amber/copper. Phase 10a a11y P2: dark accent darkened from #e8a87c to #c98555 so the "Browse Files" filled button (white text on accent fill) clears AA in - dark theme. Subtle / hover / glow recomputed off the new base. */ - --color-accent: #c98555; - --color-accent-hover: #b8754a; - --color-accent-subtle: #c9855510; - --color-accent-glow: #c9855525; + dark theme. Phase 10b: chroma bumped to #d68450 (same lightness band, + ~OKLCH C 0.12 vs prior 0.08) so the brand reads warmer without losing + the AA Large headroom on filled buttons. Subtle / hover / glow + recomputed off the new base. */ + --color-accent: #d68450; + --color-accent-hover: #c47340; + --color-accent-subtle: #d6845010; + --color-accent-glow: #d6845025; - /* Semantic */ - --color-success: #7ec89a; - --color-danger: #e87171; - --color-warning: #e8c86e; + /* Semantic — Phase 10b: chroma bumped on all three so success/danger/ + warning read as signals, not as cream-tinted body text. AA on bg-card + (#1b1a17) verified mentally for each. */ + --color-success: #5fc28a; + --color-danger: #e85f5f; + --color-warning: #e8be4a; /* Overlays — used by modal scrims. Derived from --color-bg #0f0e0c at 0.7 alpha so the dim sits on the brand neutral, not pure black. */ @@ -124,18 +129,22 @@ --color-text-tertiary: #6b6557; /* Phase 10a a11y P2: darkened from #b87a4a to #a06a3e so white text on - accent fill (selected pills, primary buttons) clears AA. */ - --color-accent: #a06a3e; - --color-accent-hover: #8a5a32; - --color-accent-subtle: #a06a3e10; - --color-accent-glow: #a06a3e20; + accent fill (selected pills, primary buttons) clears AA. Phase 10b: + chroma bumped to #a3683a — same lightness band, more saturation. AA + on cream surfaces re-verified. */ + --color-accent: #a3683a; + --color-accent-hover: #8a542b; + --color-accent-subtle: #a3683a10; + --color-accent-glow: #a3683a20; /* Phase 10a a11y G3: darkened success from #3d8a5a to #2f7549 so success text on light surfaces clears AA. Phase 10a a11y FR3 / D4: darkened - danger from #c44d4d to #a83838 for the same reason. */ - --color-success: #2f7549; - --color-danger: #a83838; - --color-warning: #b89a3e; + danger from #c44d4d to #a83838 for the same reason. Phase 10b: chroma + bumped on all three, lightness preserved or slightly darkened to keep + AA on cream backgrounds. */ + --color-success: #1f7344; + --color-danger: #b32626; + --color-warning: #a08a1f; --color-sidebar: #f5f2ed; --color-nav-active: #eae6e0; @@ -155,43 +164,50 @@ /* === Sensory Zones — Dark Theme === */ /* Zones tint surfaces only. Accent tokens (amber) stay constant across all zones — - the brand colour is the constant, the environment is the variable. */ + the brand colour is the constant, the environment is the variable. + Phase 10b: zone tints pushed further apart so each zone feels emotionally + distinct (cool blue-grey / warm red-orange / cool green) rather than three + nearly-identical near-blacks. AA verified for body text (--color-text + #f0ece4) on every Card surface. */ :root[data-zone="cave"] { - --color-bg: #0f1214; - --color-bg-elevated: #141a1e; - --color-bg-card: #171f24; - --color-sidebar: #0d1012; + --color-bg: #0a1218; + --color-bg-elevated: #0f1a22; + --color-bg-card: #14222b; + --color-sidebar: #080f14; } :root[data-zone="energy"] { - --color-bg: #100e0b; - --color-bg-elevated: #1c1815; - --color-bg-card: #211d18; - --color-sidebar: #141110; + --color-bg: #160e09; + --color-bg-elevated: #20140e; + --color-bg-card: #261913; + --color-sidebar: #100806; } :root[data-zone="reset"] { - --color-bg: #0e100e; - --color-bg-elevated: #161a16; - --color-bg-card: #1a1f1a; - --color-sidebar: #0c0e0c; + --color-bg: #0c130c; + --color-bg-elevated: #111a11; + --color-bg-card: #161f15; + --color-sidebar: #0a0e0a; } /* === Sensory Zones — Light Theme === */ +/* Phase 10b: light zones likewise pushed further from default cream so the + environment shift is felt, not merely intuited. AA verified for body text + (--color-text #1a1816) on every Card surface. */ :root[data-theme="light"][data-zone="cave"] { - --color-bg: #f0f5f7; - --color-bg-elevated: #e8f0f2; + --color-bg: #eef4f6; + --color-bg-elevated: #e2eef0; --color-bg-card: #f5fafc; - --color-sidebar: #eaf2f4; + --color-sidebar: #e8f0f2; } :root[data-theme="light"][data-zone="energy"] { - --color-bg: #faf7f3; - --color-bg-elevated: #f5f0e8; - --color-bg-card: #fffcf7; - --color-sidebar: #f5f0ea; + --color-bg: #fdf3eb; + --color-bg-elevated: #f8e8d8; + --color-bg-card: #fff8ef; + --color-sidebar: #f5e8d4; } :root[data-theme="light"][data-zone="reset"] { - --color-bg: #f3f7f2; - --color-bg-elevated: #edf2ea; - --color-bg-card: #f8fcf6; - --color-sidebar: #eff4ec; + --color-bg: #eff6ed; + --color-bg-elevated: #e4f0e0; + --color-bg-card: #f7fcf5; + --color-sidebar: #e8f3e4; } /* === Base === */ diff --git a/src/design-system/colors_and_type.css b/src/design-system/colors_and_type.css index a801fe6..3acad8b 100644 --- a/src/design-system/colors_and_type.css +++ b/src/design-system/colors_and_type.css @@ -68,7 +68,7 @@ /* — Borders — */ --border: #2c2923; --border-subtle: #221f1b; - --border-focus: #c98555; + --border-focus: #d68450; /* — Text (warm hierarchy) — */ --text: #f0ece4; @@ -78,16 +78,17 @@ /* — Accent (amber/copper, always meaningful) — Phase 10a a11y P2: dark accent darkened from #e8a87c to #c98555 so - white text on accent fill clears AA in dark theme. */ - --accent: #c98555; - --accent-hover: #b8754a; - --accent-subtle: #c9855510; - --accent-glow: #c9855525; + white text on accent fill clears AA in dark theme. Phase 10b: chroma + bumped to #d68450 — same lightness band, more saturation. */ + --accent: #d68450; + --accent-hover: #c47340; + --accent-subtle: #d6845010; + --accent-glow: #d6845025; - /* — Semantic — */ - --success: #7ec89a; - --danger: #e87171; - --warning: #e8c86e; + /* — Semantic — Phase 10b chroma bump for clearer signal. — */ + --success: #5fc28a; + --danger: #e85f5f; + --warning: #e8be4a; /* — Overlays — modal scrim. Derived from --bg #0f0e0c at 0.7 alpha. — */ --overlay-dim: rgba(15, 14, 12, 0.7); @@ -114,7 +115,7 @@ --shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 4px 12px rgba(0,0,0,0.25); --shadow-lg: 0 12px 28px rgba(0,0,0,0.35); - --shadow-accent: 0 4px 20px rgba(201,133,85,0.3); + --shadow-accent: 0 4px 20px rgba(214,132,80,0.3); /* — Typography — */ --font-body: 'Lexend', system-ui, -apple-system, sans-serif; @@ -169,17 +170,19 @@ --text-tertiary: #6b6557; /* Phase 10a a11y P2: darkened from #b87a4a to #a06a3e so white text on - accent fill (selected pills, primary buttons) clears AA. */ - --accent: #a06a3e; - --accent-hover: #8a5a32; - --accent-subtle: #a06a3e10; - --accent-glow: #a06a3e20; + accent fill (selected pills, primary buttons) clears AA. Phase 10b: + chroma bumped to #a3683a — more saturation, AA preserved. */ + --accent: #a3683a; + --accent-hover: #8a542b; + --accent-subtle: #a3683a10; + --accent-glow: #a3683a20; /* Phase 10a a11y G3 / FR3 / D4: success and danger darkened so coloured - text on light surfaces clears AA. */ - --success: #2f7549; - --danger: #a83838; - --warning: #b89a3e; + text on light surfaces clears AA. Phase 10b: chroma bumped, lightness + preserved or slightly darkened to keep AA on cream. */ + --success: #1f7344; + --danger: #b32626; + --warning: #a08a1f; /* Warm dim for modal scrim in light theme. */ --overlay-dim: rgba(26, 24, 22, 0.55); @@ -187,14 +190,17 @@ /* ============================================================ Sensory Zones — tint surfaces only, accent stays amber. + Phase 10b: tints pushed further apart so each zone reads as a + distinct emotional environment. AA on body text verified for + each Card surface in both themes. ============================================================ */ -:root[data-zone="cave"] { --bg:#0f1214; --bg-elevated:#141a1e; --bg-card:#171f24; --sidebar:#0d1012; } -:root[data-zone="energy"] { --bg:#100e0b; --bg-elevated:#1c1815; --bg-card:#211d18; --sidebar:#141110; } -:root[data-zone="reset"] { --bg:#0e100e; --bg-elevated:#161a16; --bg-card:#1a1f1a; --sidebar:#0c0e0c; } +:root[data-zone="cave"] { --bg:#0a1218; --bg-elevated:#0f1a22; --bg-card:#14222b; --sidebar:#080f14; } +:root[data-zone="energy"] { --bg:#160e09; --bg-elevated:#20140e; --bg-card:#261913; --sidebar:#100806; } +:root[data-zone="reset"] { --bg:#0c130c; --bg-elevated:#111a11; --bg-card:#161f15; --sidebar:#0a0e0a; } -:root[data-theme="light"][data-zone="cave"] { --bg:#f0f5f7; --bg-elevated:#e8f0f2; --bg-card:#f5fafc; --sidebar:#eaf2f4; } -:root[data-theme="light"][data-zone="energy"] { --bg:#faf7f3; --bg-elevated:#f5f0e8; --bg-card:#fffcf7; --sidebar:#f5f0ea; } -:root[data-theme="light"][data-zone="reset"] { --bg:#f3f7f2; --bg-elevated:#edf2ea; --bg-card:#f8fcf6; --sidebar:#eff4ec; } +:root[data-theme="light"][data-zone="cave"] { --bg:#eef4f6; --bg-elevated:#e2eef0; --bg-card:#f5fafc; --sidebar:#e8f0f2; } +:root[data-theme="light"][data-zone="energy"] { --bg:#fdf3eb; --bg-elevated:#f8e8d8; --bg-card:#fff8ef; --sidebar:#f5e8d4; } +:root[data-theme="light"][data-zone="reset"] { --bg:#eff6ed; --bg-elevated:#e4f0e0; --bg-card:#f7fcf5; --sidebar:#e8f3e4; } /* ============================================================ Semantic elements — h1-h4, p, code, kbd, wordmark diff --git a/src/lib/components/HotkeyRecorder.svelte b/src/lib/components/HotkeyRecorder.svelte index 307caca..c52a7fd 100644 --- a/src/lib/components/HotkeyRecorder.svelte +++ b/src/lib/components/HotkeyRecorder.svelte @@ -187,7 +187,7 @@ type="button" class="inline-flex items-center gap-1.5 rounded-xl px-4 py-2.5 {recording - ? 'bg-bg-input border-accent shadow-[0_0_0_3px_rgba(201,133,85,0.1)]' + ? 'bg-bg-input border-accent shadow-[0_0_0_3px_rgba(214,132,80,0.1)]' : captured ? 'bg-success/10 border-success/40' : 'bg-bg-input border-border hover:border-border'} diff --git a/src/lib/components/ModelDownloader.svelte b/src/lib/components/ModelDownloader.svelte index 5b3ff78..b105abc 100644 --- a/src/lib/components/ModelDownloader.svelte +++ b/src/lib/components/ModelDownloader.svelte @@ -82,7 +82,7 @@
@@ -93,7 +93,7 @@ {:else}