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>