jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): bump accent chroma, push sensory zones apart, richer status tokens

Browse Source 
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.
This commit is contained in:
Jake
2026-05-07 10:46:35 +01:00
parent ec09f8ffdb
commit d2f64a231d
9 changed files with 110 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/app.css
View File

@@ -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 === */

58
src/design-system/colors_and_type.css
View File

@@ -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

2
src/lib/components/HotkeyRecorder.svelte
View File

@@ -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'}

4
src/lib/components/ModelDownloader.svelte
View File

@@ -82,7 +82,7 @@
<div class="mb-4">
<div class="h-[6px] bg-bg-elevated rounded-full overflow-hidden mb-2">
<div
class="h-full bg-accent rounded-full transition-all duration-300 shadow-[0_0_8px_rgba(201,133,85,0.4)]"
class="h-full bg-accent rounded-full transition-all duration-300 shadow-[0_0_8px_rgba(214,132,80,0.4)]"
style="width: {progress}%"
></div>
</div>
@@ -93,7 +93,7 @@
{:else}
<button
class="px-6 py-2.5 rounded-xl text-[14px] font-medium text-white bg-accent hover:bg-accent-hover
shadow-[0_4px_16px_rgba(201,133,85,0.3)] transition-all duration-150"
shadow-[0_4px_16px_rgba(214,132,80,0.3)] transition-all duration-150"
onclick={startDownload}
>
Download Model

2
src/lib/components/SegmentedButton.svelte
View File

@@ -8,7 +8,7 @@
class="rounded-lg font-medium
{size === 'small' ? 'px-2.5 py-1 text-[11px]' : 'px-3.5 py-[6px] text-[12px]'}
{value === option
? 'bg-accent text-bg shadow-[0_1px_4px_rgba(201,133,85,0.3)]'
? 'bg-accent text-bg shadow-[0_1px_4px_rgba(214,132,80,0.3)]'
: 'text-text-secondary hover:text-text hover:bg-hover'}"
style="transition-duration: var(--duration-ui)"
onclick={() => value = option}

2
src/lib/components/Toggle.svelte
View File

@@ -59,7 +59,7 @@
<div class="flex items-start gap-3 py-2.5">
<button
class="relative mt-0.5 w-[38px] min-w-[38px] h-[22px] rounded-full flex-shrink-0
{checked ? 'bg-accent shadow-[0_0_8px_rgba(201,133,85,0.25)]' : 'bg-bg-elevated'}
{checked ? 'bg-accent shadow-[0_0_8px_rgba(214,132,80,0.25)]' : 'bg-bg-elevated'}
{disabled && !busy ? 'opacity-50 cursor-not-allowed' : ''}
{busy ? 'cursor-wait' : ''}"
onclick={handleClick}

2
src/lib/pages/DictationPage.svelte
View File

@@ -817,7 +817,7 @@
? 'bg-warning opacity-60 cursor-wait'
: !tauriRuntimeAvailable
? 'bg-bg-elevated text-text-tertiary cursor-not-allowed'
: 'bg-accent hover:bg-accent-hover shadow-[0_4px_20px_rgba(201,133,85,0.3)]'}"
: 'bg-accent hover:bg-accent-hover shadow-[0_4px_20px_rgba(214,132,80,0.3)]'}"
onclick={toggleRecording}
disabled={modelLoading || !tauriRuntimeAvailable}
aria-label={page.recording ? "Stop recording" : "Start recording"}

4
src/lib/pages/FilesPage.svelte
View File

@@ -187,7 +187,7 @@
<div class="flex items-center gap-2 px-7 pb-3">
<button
class="btn-lg rounded-lg font-medium text-white bg-accent hover:bg-accent-hover
shadow-[0_2px_8px_rgba(201,133,85,0.2)]"
shadow-[0_2px_8px_rgba(214,132,80,0.2)]"
onclick={handleBrowse}
disabled={transcribing}
>
@@ -213,7 +213,7 @@
<div class="px-7 pb-3 animate-fade-in">
<div class="h-[3px] bg-bg-elevated rounded-full overflow-hidden">
<div
class="h-full bg-accent rounded-full shadow-[0_0_8px_rgba(201,133,85,0.4)]"
class="h-full bg-accent rounded-full shadow-[0_0_8px_rgba(214,132,80,0.4)]"
style="width: {progress}%; transition-duration: var(--duration-ui)"
></div>
</div>

24
src/lib/pages/SettingsPage.svelte
View File

@@ -1043,7 +1043,7 @@
placeholder="Search settings"
bind:value={settingsSearch}
class="w-full bg-bg-input border border-border rounded-lg pl-9 pr-9 py-2 text-[13px] text-text placeholder:text-text-tertiary
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]"
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(214,132,80,0.1)]"
aria-label="Search settings"
/>
{#if searchActive}
@@ -1083,7 +1083,7 @@
<div class="flex items-center gap-3">
<select
class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(214,132,80,0.1)]
appearance-none cursor-pointer min-w-[280px] max-w-full"
bind:value={settings.microphoneDevice}
onfocus={refreshAudioDevices}
@@ -1142,7 +1142,7 @@
<div class="flex items-center gap-2 flex-wrap">
<select
class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(214,132,80,0.1)]
appearance-none cursor-pointer min-w-[220px]"
value={profilesStore.activeProfileId}
onchange={onActiveProfileChange}
@@ -1212,7 +1212,7 @@
onblur={renameActiveProfile}
onkeydown={(e) => { if (e.key === 'Enter') e.target.blur(); }}
class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text min-w-[280px]
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]"
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(214,132,80,0.1)]"
/>
</div>
@@ -1228,7 +1228,7 @@
onblur={saveInitialPrompt}
placeholder="e.g. Meeting between Jake and Wren about CORBEL's Furnished World architecture."
class="w-full h-[96px] bg-bg-input border border-border rounded-lg px-3 py-2 text-[12px] text-text resize-none
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]"
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(214,132,80,0.1)]"
></textarea>
<div class="flex items-center gap-3 mt-1">
{#if initialPromptDirty}
@@ -1254,7 +1254,7 @@
bind:value={newVocabTerm}
onkeydown={(e) => { if (e.key === 'Enter') addVocabTerm(); }}
class="flex-1 bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]"
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(214,132,80,0.1)]"
/>
<input
type="text"
@@ -1262,7 +1262,7 @@
bind:value={newVocabNote}
onkeydown={(e) => { if (e.key === 'Enter') addVocabTerm(); }}
class="flex-1 bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]"
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(214,132,80,0.1)]"
/>
<button
type="button"
@@ -1288,7 +1288,7 @@
rows="4"
disabled={bulkVocabBusy}
class="w-full bg-bg border border-border rounded-lg px-3 py-2 text-[13px] text-text font-mono
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(214,132,80,0.1)]
disabled:opacity-50 resize-y"
></textarea>
<div class="flex items-center gap-2 mt-2">
@@ -1583,7 +1583,7 @@
{#if hasGpuAcceleration()}
<select
class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(214,132,80,0.1)]
appearance-none cursor-pointer w-[220px]"
bind:value={settings.device}
>
@@ -1614,7 +1614,7 @@
{#if currentModelIsEnglishOnly()}
<select
class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(214,132,80,0.1)]
appearance-none cursor-not-allowed w-[220px]"
bind:value={settings.language}
disabled
@@ -1624,7 +1624,7 @@
{:else}
<select
class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(214,132,80,0.1)]
appearance-none cursor-pointer w-[140px]"
bind:value={settings.language}
>
@@ -2317,7 +2317,7 @@
<button
class="rounded-lg font-medium px-3.5 py-[6px] text-[12px]
{$currentLocale === option.code
? 'bg-accent text-bg shadow-[0_1px_4px_rgba(201,133,85,0.3)]'
? 'bg-accent text-bg shadow-[0_1px_4px_rgba(214,132,80,0.3)]'
: 'text-text-secondary hover:text-text hover:bg-hover'}"
style="transition-duration: var(--duration-ui)"
onclick={() => setLocale(option.code)}