fix(appearance): make Sahara actually differ from Warm light

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.
This commit is contained in:
2026-08-14 00:07:50 +02:00
parent ab0db0ef3a
commit fbd62fda30
2 changed files with 23 additions and 20 deletions
+1 -1
View File
@@ -412,7 +412,7 @@ const THEME_SWATCH: Record<Exclude<ThemeChoice, 'auto'>, { bg: string; card: str
'light-warm': { bg: '#e8dfc9', card: '#faf6ea', accent: '#b8410c' }, 'light-warm': { bg: '#e8dfc9', card: '#faf6ea', accent: '#b8410c' },
'light-cool': { bg: '#f4f6f8', card: '#ffffff', accent: '#2563eb' }, 'light-cool': { bg: '#f4f6f8', card: '#ffffff', accent: '#2563eb' },
'light-sage': { bg: '#eef1ec', card: '#f8faf6', accent: '#2f855a' }, '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' }, 'light-nordic': { bg: '#eef1f7', card: '#ffffff', accent: '#4f46e5' },
'dim-slate': { bg: '#343b47', card: '#3d4552', accent: '#fb923c' }, 'dim-slate': { bg: '#343b47', card: '#3d4552', accent: '#fb923c' },
'dark-warm': { bg: '#221d18', card: '#2e2820', accent: '#e07a2e' }, 'dark-warm': { bg: '#221d18', card: '#2e2820', accent: '#e07a2e' },
+22 -19
View File
@@ -775,34 +775,37 @@
color-scheme: light; color-scheme: light;
} }
/* ---- Theme 1e: Sahara — warm sand, from an operator's own palette --------- /* ---- Theme 1e: Sahara — Warm light, taken a step deeper --------------------
Three sands, lightest to darkest: panels sit on #faf6eb, the page behind them Warm light's cream is kept for panels and the entry strip (#faf6eb, the one
on #e8dfca, and toolbars, table headers and rows on #ddd2ba. The order is the surface an operator stares at while typing a call), but the page behind them
point — a panel must read as lifted OFF the page, and the log grid as settled and every toolbar, tab bar and table header go one shade further into the
INTO it, which is what makes rows scannable without lines everywhere. sand. That was the whole request: same family, just a little darker, so the
Ink is a deep warm brown rather than black: pure black on sand glares. ---- */ 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"] { [data-theme="sahara"] {
--background: #e8dfca; /* sand — the page */ --background: #dcceab; /* deep sand — the page */
--foreground: #2b2318; /* deep warm brown-ink */ --foreground: #2b2318; /* deep warm brown-ink */
--card: #faf6eb; /* lifted panel / entry strip */ --card: #faf6eb; /* lifted panel / entry strip — kept cream */
--card-foreground: #2b2318; --card-foreground: #2b2318;
--popover: #faf6eb; --popover: #faf6eb;
--popover-foreground: #2b2318; --popover-foreground: #2b2318;
--primary: #b45309; /* burnt sienna */ --primary: #a55f14; /* ochre */
--primary-foreground: #fffbf2; --primary-foreground: #fffbf2;
--secondary: #ddd2ba; --secondary: #cdbb92;
--secondary-foreground: #2b2318; --secondary-foreground: #2b2318;
--muted: #ddd2ba; /* toolbars / table headers — the darkest sand */ --muted: #cdbb92; /* toolbars / tab bar / table headers */
--muted-foreground: #5c503c; /* readable on both sands */ --muted-foreground: #544731; /* readable on both sands */
--accent: #ecd9b8; /* warm highlight */ --accent: #e9d3a6; /* warm highlight */
--accent-foreground: #6b3a06; --accent-foreground: #6b3a06;
--destructive: #b91c1c; --destructive: #b91c1c;
--destructive-foreground: #ffffff; --destructive-foreground: #ffffff;
--destructive-muted: #fdecec; --destructive-muted: #fdecec;
--destructive-muted-foreground: #b91c1c; --destructive-muted-foreground: #b91c1c;
--border: #c9bc9e; /* sand a step down again, so edges read */ --border: #b6a179; /* sand a step down again, so edges read */
--input: #c9bc9e; --input: #b6a179;
--ring: #d97706; /* amber focus ring */ --ring: #c2760c; /* amber focus ring */
--success: #15803d; --success: #15803d;
--success-foreground: #ffffff; --success-foreground: #ffffff;
@@ -840,10 +843,10 @@
--mx-call-work: #7fd6a4; --mx-call-work: #7fd6a4;
--mx-dx-conf: #3730a3; --mx-dx-conf: #3730a3;
--mx-dx-work: #a5b4fc; --mx-dx-work: #a5b4fc;
--mx-none: #ddd2ba; --mx-none: #cdbb92;
--scrollbar-thumb: #c0b193; --scrollbar-thumb: #ac9868;
--scrollbar-thumb-hover: #a89676; --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); --card-shadow: 0 1px 2px rgba(43, 35, 24, 0.07), 0 0 0 1px rgba(43, 35, 24, 0.03);
color-scheme: light; color-scheme: light;
} }