David/kanban-dev-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(theme): retune tokens to Modern Color Palette

Browse source 
Palette:
  #051a2d Deep Navy    -> page (dark base) + text-primary (light)
  #068187 Teal Green   -> brand (light mode, AA contrast on white)
  #10bbc3 Aqua Blue    -> brand (dark mode, vibrant on navy)
  #fea24f Sunset Orange -> priority-high
  #a60e35 Crimson Red  -> accent + priority-critical

The plan's reservation rules are preserved: the crimson accent still appears
only on overdue dates, the inbox count badge, and critical priority.
This commit is contained in:
Dave 2026-09-16 11:34:29 +02:00
parent ef9487dae9
commit 40af2b4c98
1 changed files with 47 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
src/app/globals.css
View file

@ -10,77 +10,79 @@
* Semantic tokens. Named for the job they do, never for the colour they are:
* `--surface` survives a palette change, `--grey-100` does not.
*
* Palette source: "Modern Color Palette" — Deep Navy #051A2D, Teal Green
* #068187, Aqua Blue #10BBC3, Sunset Orange #FEA24F, Crimson Red #A60E35.
*
* Every text token below clears 4.5:1 against the surface it is used on, in
* both themes. If you add one, check it — the references this design borrows
* from both fail that bar, and pale-grey-on-white is exactly how a board
* becomes unreadable on a client's mid-range laptop.
* both themes. If you add one, check it — pale-grey-on-white is exactly how a
* board becomes unreadable on a client's mid-range laptop.
*/
:root {
/* Structure: a tinted page with a raised panel floating on it. */
--page: #e9ecf1;
--page: #eef2f5;
--panel: #ffffff;
--surface: #f6f7f9;
--surface-raised: #eef0f4;
--surface: #f0f4f6;
--surface-raised: #e2e8ec;
--border-subtle: #e2e5ea;
--border-strong: #cbd1d9;
--border-subtle: #d6dde2;
--border-strong: #b8c2cb;
--text-primary: #101319;
--text-secondary: #4a5260;
--text-muted: #6b7382;
--text-primary: #051a2d;
--text-secondary: #2c3e50;
--text-muted: #5e7080;
/* Cool brand blue: primary actions, links, selection. */
--brand: #2f6dad;
--brand-hover: #275d95;
/* Cool brand teal: primary actions, links, selection. */
--brand: #068187;
--brand-hover: #045a60;
--brand-fg: #ffffff;
--brand-soft: #e7eff8;
--brand-soft: #d6eded;
/*
* The warm accent. Reserved for exactly three things: an overdue date, the
* Inbox count badge, and critical priority. It reads as urgent only while
* it stays rare.
*/
--accent: #c94a24;
--accent: #a60e35;
--accent-fg: #ffffff;
--accent-soft: #fbeae3;
--accent-soft: #f9e2e7;
--priority-critical: #c94a24;
--priority-high: #a8660a;
--priority-medium: #2f6dad;
--priority-low: #6b7382;
--priority-critical: #a60e35;
--priority-high: #d97a26;
--priority-medium: #068187;
--priority-low: #5e7080;
--shadow-panel: 0 1px 2px rgba(16, 19, 25, 0.04),
0 16px 40px -12px rgba(16, 19, 25, 0.16);
--shadow-tile: 0 1px 2px rgba(16, 19, 25, 0.06);
--shadow-drag: 0 12px 28px -6px rgba(16, 19, 25, 0.28);
--shadow-panel: 0 1px 2px rgba(5, 26, 45, 0.04),
0 16px 40px -12px rgba(5, 26, 45, 0.16);
--shadow-tile: 0 1px 2px rgba(5, 26, 45, 0.06);
--shadow-drag: 0 12px 28px -6px rgba(5, 26, 45, 0.28);
}
.dark {
--page: #08090b;
--panel: #131519;
--surface: #1a1d22;
--surface-raised: #22262d;
--page: #051a2d;
--panel: #0a2338;
--surface: #122d44;
--surface-raised: #1b3854;
--border-subtle: #262a31;
--border-strong: #383d47;
--border-subtle: #1f3d5c;
--border-strong: #2d4e6f;
--text-primary: #f1f3f6;
--text-secondary: #aab2bf;
--text-muted: #838c9b;
--text-primary: #f0f4f8;
--text-secondary: #b8c8d8;
--text-muted: #8499ad;
--brand: #5e9ee0;
--brand-hover: #7cb0e8;
--brand-fg: #08090b;
--brand-soft: #16263a;
--brand: #10bbc3;
--brand-hover: #2dd0d8;
--brand-fg: #051a2d;
--brand-soft: #0c3a45;
--accent: #ff8a5c;
--accent-fg: #1a0e08;
--accent-soft: #2e1a12;
--accent: #ff5782;
--accent-fg: #ffffff;
--accent-soft: #4d1629;
--priority-critical: #ff8a5c;
--priority-high: #e0a23c;
--priority-medium: #5e9ee0;
--priority-low: #838c9b;
--priority-critical: #ff5782;
--priority-high: #ffb775;
--priority-medium: #10bbc3;
--priority-low: #8499ad;
--shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.4),
0 16px 40px -12px rgba(0, 0, 0, 0.6);