tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

style(admin): unify color tokens (deep botanical + amber)

Browse Source 
- --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
This commit is contained in:
Tyler
2026-06-17 00:08:46 -06:00
parent bd2dadd9ee
commit 18fb44ed38
2 changed files with 72 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/admin/DashboardClient.tsx
+10 -10
View File
@@ -126,9 +126,9 @@ export default function DashboardClient({
const getStatusBadge = (status: string) => {
const styles: Record<string, { bg: string; text: string }> = {
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 */}
<div className="admin-stat-card">
<div className="admin-stat-card-inner">
<div className="admin-stat-icon" style={{ backgroundColor: "#fef3c7" }}>
<svg className="w-4 h-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<div className="admin-stat-icon" style={{ backgroundColor: "var(--admin-accent-soft)" }}>
<svg className="w-4 h-4" style={{ color: "var(--admin-accent)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
@@ -209,8 +209,8 @@ export default function DashboardClient({
{/* Pending Stops */}
<div className="admin-stat-card">
<div className="admin-stat-card-inner">
<div className="admin-stat-icon" style={{ backgroundColor: "#dbeafe" }}>
<svg className="w-4 h-4 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<div className="admin-stat-icon" style={{ backgroundColor: "var(--admin-bg-subtle)" }}>
<svg className="w-4 h-4" style={{ color: "var(--admin-text-secondary)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
</svg>
@@ -225,8 +225,8 @@ export default function DashboardClient({
{/* Active Products */}
<div className="admin-stat-card">
<div className="admin-stat-card-inner">
<div className="admin-stat-icon" style={{ backgroundColor: "#f3e8ff" }}>
<svg className="w-4 h-4 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<div className="admin-stat-icon" style={{ backgroundColor: "var(--admin-primary-soft)" }}>
<svg className="w-4 h-4" style={{ color: "var(--admin-primary)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
</svg>
</div>
@@ -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)",
}}
/>
</div>
src/styles/admin-design-system.css
+62 -49
View File
@@ -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 === */