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:
@@ -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
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user