From fbd62fda301a48d03848a24443ffb280fd308723 Mon Sep 17 00:00:00 2001 From: Gregory Salaun Date: Fri, 14 Aug 2026 00:07:50 +0200 Subject: [PATCH] fix(appearance): make Sahara actually differ from Warm light MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The sampled colours were Warm light's own (#faf6ea / #e8dfc9 / #ddd2b8) — the annotated screenshot was that theme, and the request written on it was "just a little darker". Keep the cream on panels and the entry strip, take the page, tab bar, toolbars and table headers a shade deeper, and move the accent from burnt orange to ochre so the two are told apart in the picker. --- frontend/src/components/SettingsModal.tsx | 2 +- frontend/src/style.css | 41 ++++++++++++----------- 2 files changed, 23 insertions(+), 20 deletions(-) diff --git a/frontend/src/components/SettingsModal.tsx b/frontend/src/components/SettingsModal.tsx index ff73a53..af47f85 100644 --- a/frontend/src/components/SettingsModal.tsx +++ b/frontend/src/components/SettingsModal.tsx @@ -412,7 +412,7 @@ const THEME_SWATCH: Record, { bg: string; card: str 'light-warm': { bg: '#e8dfc9', card: '#faf6ea', accent: '#b8410c' }, 'light-cool': { bg: '#f4f6f8', card: '#ffffff', accent: '#2563eb' }, 'light-sage': { bg: '#eef1ec', card: '#f8faf6', accent: '#2f855a' }, - 'sahara': { bg: '#e8dfca', card: '#faf6eb', accent: '#b45309' }, + 'sahara': { bg: '#dcceab', card: '#faf6eb', accent: '#a55f14' }, 'light-nordic': { bg: '#eef1f7', card: '#ffffff', accent: '#4f46e5' }, 'dim-slate': { bg: '#343b47', card: '#3d4552', accent: '#fb923c' }, 'dark-warm': { bg: '#221d18', card: '#2e2820', accent: '#e07a2e' }, diff --git a/frontend/src/style.css b/frontend/src/style.css index 6afaff6..753f5c8 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -775,34 +775,37 @@ color-scheme: light; } -/* ---- Theme 1e: Sahara — warm sand, from an operator's own palette --------- - Three sands, lightest to darkest: panels sit on #faf6eb, the page behind them - on #e8dfca, and toolbars, table headers and rows on #ddd2ba. The order is the - point — a panel must read as lifted OFF the page, and the log grid as settled - INTO it, which is what makes rows scannable without lines everywhere. - Ink is a deep warm brown rather than black: pure black on sand glares. ---- */ +/* ---- Theme 1e: Sahara — Warm light, taken a step deeper -------------------- + Warm light's cream is kept for panels and the entry strip (#faf6eb, the one + surface an operator stares at while typing a call), but the page behind them + and every toolbar, tab bar and table header go one shade further into the + sand. That was the whole request: same family, just a little darker, so the + cream panels lift clearly instead of blending into the page. + Ink is a deep warm brown rather than black: pure black on sand glares. + The accent moves from Warm light's burnt orange to ochre to keep the two + themes apart at a glance in the theme picker. ---------------------------- */ [data-theme="sahara"] { - --background: #e8dfca; /* sand — the page */ + --background: #dcceab; /* deep sand — the page */ --foreground: #2b2318; /* deep warm brown-ink */ - --card: #faf6eb; /* lifted panel / entry strip */ + --card: #faf6eb; /* lifted panel / entry strip — kept cream */ --card-foreground: #2b2318; --popover: #faf6eb; --popover-foreground: #2b2318; - --primary: #b45309; /* burnt sienna */ + --primary: #a55f14; /* ochre */ --primary-foreground: #fffbf2; - --secondary: #ddd2ba; + --secondary: #cdbb92; --secondary-foreground: #2b2318; - --muted: #ddd2ba; /* toolbars / table headers — the darkest sand */ - --muted-foreground: #5c503c; /* readable on both sands */ - --accent: #ecd9b8; /* warm highlight */ + --muted: #cdbb92; /* toolbars / tab bar / table headers */ + --muted-foreground: #544731; /* readable on both sands */ + --accent: #e9d3a6; /* warm highlight */ --accent-foreground: #6b3a06; --destructive: #b91c1c; --destructive-foreground: #ffffff; --destructive-muted: #fdecec; --destructive-muted-foreground: #b91c1c; - --border: #c9bc9e; /* sand a step down again, so edges read */ - --input: #c9bc9e; - --ring: #d97706; /* amber focus ring */ + --border: #b6a179; /* sand a step down again, so edges read */ + --input: #b6a179; + --ring: #c2760c; /* amber focus ring */ --success: #15803d; --success-foreground: #ffffff; @@ -840,10 +843,10 @@ --mx-call-work: #7fd6a4; --mx-dx-conf: #3730a3; --mx-dx-work: #a5b4fc; - --mx-none: #ddd2ba; + --mx-none: #cdbb92; - --scrollbar-thumb: #c0b193; - --scrollbar-thumb-hover: #a89676; + --scrollbar-thumb: #ac9868; + --scrollbar-thumb-hover: #927d4e; --card-shadow: 0 1px 2px rgba(43, 35, 24, 0.07), 0 0 0 1px rgba(43, 35, 24, 0.03); color-scheme: light; }