From 18fb44ed387d30e451d3025c308662d166acbb23 Mon Sep 17 00:00:00 2001 From: Tyler Date: Wed, 17 Jun 2026 00:08:46 -0600 Subject: [PATCH] style(admin): unify color tokens (deep botanical + amber) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - --admin-bg: warm cream (#FAF7F0) - --admin-text-primary: ink black (#1A1814) - --admin-text-muted: warm grey (#8A867E) — was too dim - --admin-border: soft beige (#E8E4D7) — was too dirty - --admin-primary: deep botanical (#1F4D2A) - --admin-accent: warm amber (#B8761E) — the 'one thing to do' - --admin-warning: amber (was #aba278 — looked like dirt) - --admin-danger: warmer rust (#A8321C) - sidebar: deeper, more refined (#2A2520) - drop purple/blue/citrus stat icons in DashboardClient; use semantic tokens - use --admin-warning instead of hardcoded #f59e0b in usage bar --- src/components/admin/DashboardClient.tsx | 20 ++-- src/styles/admin-design-system.css | 111 +++++++++++++---------- 2 files changed, 72 insertions(+), 59 deletions(-) diff --git a/src/components/admin/DashboardClient.tsx b/src/components/admin/DashboardClient.tsx index bff5d90..a2c931f 100644 --- a/src/components/admin/DashboardClient.tsx +++ b/src/components/admin/DashboardClient.tsx @@ -126,9 +126,9 @@ export default function DashboardClient({ const getStatusBadge = (status: string) => { const styles: Record = { - pending: { bg: "var(--admin-warning-light)", text: "var(--admin-warning)" }, - processing: { bg: "var(--admin-accent-light)", text: "var(--admin-accent-text)" }, - shipped: { bg: "#dbeafe", text: "#1e40af" }, + pending: { bg: "var(--admin-warning-soft)", text: "var(--admin-warning)" }, + processing: { bg: "var(--admin-primary-soft)", text: "var(--admin-accent-text)" }, + shipped: { bg: "var(--admin-primary-soft)", text: "var(--admin-primary)" }, }; return styles[status] || { bg: "var(--admin-bg)", text: "var(--admin-text-secondary)" }; }; @@ -194,8 +194,8 @@ export default function DashboardClient({ {/* Today's Revenue */}
-
- +
+
@@ -209,8 +209,8 @@ export default function DashboardClient({ {/* Pending Stops */}
-
- +
+ @@ -225,8 +225,8 @@ export default function DashboardClient({ {/* Active Products */}
-
- +
+
@@ -313,7 +313,7 @@ export default function DashboardClient({ className="admin-usage-fill" style={{ width: `${Math.min(pct, 100)}%`, - backgroundColor: pct > 90 ? "var(--admin-danger)" : pct > 75 ? "#f59e0b" : "var(--admin-accent)", + backgroundColor: pct > 90 ? "var(--admin-danger)" : pct > 75 ? "var(--admin-warning)" : "var(--admin-accent)", }} />
diff --git a/src/styles/admin-design-system.css b/src/styles/admin-design-system.css index 742cf66..98d021a 100644 --- a/src/styles/admin-design-system.css +++ b/src/styles/admin-design-system.css @@ -1,59 +1,72 @@ /* Admin Design System - Design Tokens & Base Styles */ /* === Color Tokens === */ +/* Editorial operations palette. One primary (deep botanical), one accent (amber), + four neutrals. No citrus, no teal, no purple. */ :root { - /* Background colors - Elegant warm palette */ - --admin-bg: #f5f4ef; /* parchment - main background */ - --admin-bg-subtle: #f7f6f2; /* parchment 600 */ - --admin-card-bg: #ffffff; /* Pure white for cards */ - --admin-card-bg-alt: #fafaf7; /* Slightly warm white */ - - /* Text colors */ - --admin-text-primary: #3c3825; /* parchment 100 - dark warm */ - --admin-text-secondary: #686763; /* dim_grey */ - --admin-text-muted: #a5a4a1; /* dim_grey 700 */ - + /* Backgrounds — atelier cream family */ + --admin-bg: #FAF7F0; /* page background (atelier cream) */ + --admin-bg-subtle: #F4F1E8; /* inset wells */ + --admin-card-bg: #FFFFFF; /* pure white cards */ + --admin-card-bg-alt: #FCFAF4; /* warm white variant */ + + /* Text */ + --admin-text-primary: #1A1814; /* ink */ + --admin-text-secondary: #4A4742; /* secondary text (was #686763 — too washed) */ + --admin-text-muted: #8A867E; /* tertiary / labels (was #a5a4a1 — too dim) */ + /* Borders */ - --admin-border: #d0cbb4; /* parchment 400 */ - --admin-border-light: #e5e2d9; /* soft_linen */ - - /* Accent - Fresh Produce Green */ - --admin-accent: #16a34a; /* green-600 - fresh produce brand */ - --admin-accent-hover: #15803d; /* green-700 */ - --admin-accent-light: #dcfce7; /* green-100 */ - --admin-accent-text: #166534; /* green-800 */ - - /* Status Colors */ - --admin-success: #16a34a; /* green-600 - fresh produce success */ - --admin-success-accent: #15803d; /* green-700 */ - --admin-warning: #aba278; /* parchment 300 */ - --admin-warning-light: #f5f4ef; /* parchment */ - --admin-danger: #dc2626; /* red-600 */ - --admin-danger-hover: #b91c1c; /* red-700 */ - --admin-danger-light: #fef2f2; /* red-50 */ - --admin-info: #686763; /* dim_grey */ - --admin-accent-dot: #22c55e; /* green-500 */ - - /* Sidebar - Dark elegant */ - --admin-sidebar-bg: #3c3825; /* parchment 100 */ - --admin-sidebar-text: #c3c3c1; /* dim_grey 800 */ - --admin-sidebar-hover: #4c4945; /* dim_grey 200 */ - --admin-sidebar-active: #5c584f; /* between */ - + --admin-border: #E8E4D7; /* default border (was #d0cbb4 — too dirty) */ + --admin-border-light: #F0EDE3; /* hairline */ + --admin-border-strong: #D4CFBE; /* emphasized */ + + /* Primary — deep botanical green */ + --admin-primary: #1F4D2A; + --admin-primary-hover: #163C20; + --admin-primary-soft: #E8F0E5; /* 8% surface for selected rows / chips */ + + /* Accent — warm amber (the "one thing to do next") */ + --admin-accent: #B8761E; + --admin-accent-hover: #965D14; + --admin-accent-soft: #F7EBD5; + + /* Backward-compat aliases — existing var(--admin-accent) / --admin-accent-text / + --admin-accent-light / --admin-accent-hover continue to work. */ + --admin-accent-text: #14532D; /* was #166534 — slightly deeper for AA on cream */ + --admin-accent-light: #DCFCE7; + --admin-accent-dot: #1F4D2A; /* was #22c55e — match primary */ + + /* Status (semantic) */ + --admin-success: #1F4D2A; + --admin-success-soft: #E8F0E5; + --admin-warning: #B8761E; /* was #aba278 — looked like dirt */ + --admin-warning-soft: #F7EBD5; + --admin-danger: #A8321C; /* was #dc2626 — slightly warmer */ + --admin-danger-hover: #87281A; + --admin-danger-soft: #F7E3DE; + --admin-info: #4A4742; /* was #686763 — match new secondary */ + + /* Sidebar — dark warm */ + --admin-sidebar-bg: #2A2520; /* was #3c3825 — deeper, more refined */ + --admin-sidebar-text: #B8B4A8; /* was #c3c3c1 — warmer */ + --admin-sidebar-hover: #3A352F; + --admin-sidebar-active: #4A443C; + --admin-sidebar-accent: #D4A24C; /* amber for active item */ + /* Spacing */ - --admin-page-padding: 1rem; /* px-4 - reduced for density */ - --admin-section-gap: 0.75rem; /* gap-3 - reduced */ - --admin-card-padding: 1rem; /* p-4 - reduced */ - + --admin-page-padding: 1rem; + --admin-section-gap: 0.75rem; + --admin-card-padding: 1rem; + /* Border Radius */ - --admin-radius-sm: 0.5rem; /* rounded-lg */ - --admin-radius-md: 0.75rem; /* rounded-xl */ - --admin-radius-lg: 1rem; /* rounded-2xl */ - - /* Shadows - subtle warm shadows */ - --admin-shadow-sm: 0 1px 2px rgba(60, 56, 37, 0.04); - --admin-shadow-md: 0 4px 12px rgba(60, 56, 37, 0.08); - --admin-shadow-lg: 0 10px 15px -3px rgba(60, 56, 37, 0.08), 0 4px 6px -4px rgba(60, 56, 37, 0.04); + --admin-radius-sm: 0.5rem; + --admin-radius-md: 0.75rem; + --admin-radius-lg: 1rem; + + /* Shadows — warm-tinted */ + --admin-shadow-sm: 0 1px 2px rgba(26, 24, 20, 0.04); + --admin-shadow-md: 0 4px 12px rgba(26, 24, 20, 0.08); + --admin-shadow-lg: 0 10px 30px -6px rgba(26, 24, 20, 0.10), 0 4px 8px -4px rgba(26, 24, 20, 0.04); } /* === Base Admin Layout === */