From 298ad54b5c55a3d7ec14f69984dd28c763215601 Mon Sep 17 00:00:00 2001 From: Brandon Zhang Date: Fri, 27 Mar 2026 13:55:36 +0800 Subject: [PATCH] fix(ui/theme): replace light theme with clean material design palette The previous light theme used warm/organic off-whites and muted tones that felt muddy. Replaced with a crisp material-inspired palette: Surfaces - bg-void #f0f2f5 (cool-grey base) - bg-base #f5f7fa (very light cool background) - bg-raised #ffffff (pure white cards) - bg-hover #e3e8f0 (clear interactive hover) Typography - text-primary #1a202c (near-black, high contrast) - text-secondary #4a5568 (balanced mid-grey) - text-muted #8896a7 (clear but soft) Accents (Material Design colour values) - cyan #0277bd Blue 700 (replaces washed-out #007fa8) - green #388e3c Green 700 - amber #e65100 Deep Orange 900 (warmer, more material) - red #d32f2f Red 700 Shadows Dual-layer transparent shadows for better depth perception on light backgrounds. Also adds @keyframes fade-in-up used by the shortcuts add form. --- static/css/base.css | 67 ++++++++++++++++++++++++++------------------- 1 file changed, 39 insertions(+), 28 deletions(-) diff --git a/static/css/base.css b/static/css/base.css index d936fa5..777d8c8 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -108,43 +108,49 @@ /* ── Light theme overrides ───────────────────────────────────────────────── */ /* Applied when is set by theme.js */ [data-theme="light"] { - --bg-void: #e8e8e3; - --bg-base: #f2f2ed; + /* Clean white/grey Material surfaces */ + --bg-void: #f0f2f5; + --bg-base: #f5f7fa; --bg-raised: #ffffff; - --bg-overlay: #ebebe6; - --bg-hover: #e2e2dc; - --bg-active: #d8d8d2; + --bg-overlay: #eef1f5; + --bg-hover: #e3e8f0; + --bg-active: #d6dde8; - --border-subtle: #d0d0ca; - --border-muted: #c0c0b8; - --border-strong: #a8a8a0; + /* Crisp Material borders */ + --border-subtle: #dde3ec; + --border-muted: #c5cdd9; + --border-strong: #a8b4c5; - --text-primary: #1a1f2e; + /* High-contrast Material text */ + --text-primary: #1a202c; --text-secondary:#4a5568; - --text-muted: #718096; - --text-disabled: #a0aec0; + --text-muted: #8896a7; + --text-disabled: #b2bfcc; - /* Slightly desaturated accents so they work on a light surface */ - --cyan: #007fa8; - --cyan-dim: #005c7a; - --cyan-glow: rgba(0, 127, 168, 0.14); + /* Material Blue 700 / 800 for accent */ + --cyan: #0277bd; + --cyan-dim: #01579b; + --cyan-glow: rgba(2, 119, 189, 0.12); - --green: #166534; - --green-dim: #14532d; - --green-glow: rgba(22, 101, 52, 0.12); + /* Material Green 700 */ + --green: #388e3c; + --green-dim: #2e7d32; + --green-glow: rgba(56, 142, 60, 0.12); - --amber: #92400e; - --amber-dim: #78350f; - --amber-glow: rgba(146, 64, 14, 0.1); + /* Material Amber 900 */ + --amber: #e65100; + --amber-dim: #bf360c; + --amber-glow: rgba(230, 81, 0, 0.1); - --red: #b91c1c; - --red-dim: #7f1d1d; - --red-glow: rgba(185, 28, 28, 0.1); + /* Material Red 700 */ + --red: #d32f2f; + --red-dim: #b71c1c; + --red-glow: rgba(211, 47, 47, 0.1); - --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); - --shadow-md: 0 4px 16px rgba(0,0,0,0.1); - --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); - --shadow-cyan: 0 0 20px rgba(0,127,168,0.1); + --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05); + --shadow-md: 0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.06); + --shadow-lg: 0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08); + --shadow-cyan: 0 0 16px rgba(2,119,189,0.1); } /* ── Reset ──────────────────────────────────────────────────────────────── */ @@ -190,3 +196,8 @@ body { .muted { color: var(--text-muted); } .subtle { color: var(--text-secondary); } +/* ── Utility animations ─────────────────────────────────────────────────── */ +@keyframes fade-in-up { + from { opacity: 0; transform: translateY(6px); } + to { opacity: 1; transform: translateY(0); } +}