/** * Design Tokens - Wheelie Frontend * * This file contains CSS custom properties (variables) that align with the iOS app * design system defined in: * - wheelie-app/Wheelie/Wheelie/Utils/Constants/Theme.swift * - wheelie-app/Wheelie/Wheelie/Utils/Extensions/Color+Theme.swift * * All design decisions should reference these tokens for consistency across platforms. */ :root { /* ======================================== STONE PALETTE (Static) Based on Tailwind CSS stone colors ======================================== */ --stone-50: #FAFAF9; --stone-100: #F5F5F4; --stone-200: #E7E5E4; --stone-300: #D6D3D1; --stone-400: #A8A29E; --stone-500: #78716C; --stone-600: #57534E; --stone-700: #44403C; --stone-800: #292524; --stone-900: #1C1917; /* ======================================== EMERALD PALETTE (Brand Green) ======================================== */ --emerald-400: #34D399; --emerald-500: #10B981; --emerald-600: #059669; /* ======================================== RED PALETTE (Loss) ======================================== */ --red-400: #F87171; --red-600: #DC2626; /* ======================================== AMBER PALETTE (Warning) ======================================== */ --amber-400: #FBBF24; --amber-600: #D97706; /* ======================================== BLUE PALETTE (Info) ======================================== */ --blue-400: #60A5FA; --blue-600: #2563EB; /* ======================================== PURPLE PALETTE (Assignment) ======================================== */ --purple-400: #C084FC; --purple-600: #9333EA; /* ======================================== ADAPTIVE THEME COLORS (Light Mode Default) Override in [data-theme="dark"] below ======================================== */ /* Backgrounds - Notion-inspired */ --background-primary: var(--stone-50); --background-secondary: var(--stone-100); --card-background: #FFFFFF; /* Text */ --text-primary: var(--stone-800); --text-secondary: var(--stone-500); /* Borders */ --border-color: var(--stone-200); /* Table */ --table-header-bg: var(--stone-100); --table-row-hover: var(--stone-100); /* Semantic Colors (Adaptive) */ --color-profit: var(--emerald-600); --color-loss: var(--red-600); --color-warning: var(--amber-600); --color-info: var(--blue-600); --color-assignment: var(--purple-600); /* Brand Color */ --color-primary-green: var(--emerald-600); /* Action Item Border Colors */ --action-profit-target: #10B981; /* green */ --action-at-risk: #F97316; /* orange */ --action-expiring-soon: #3B82F6; /* blue */ --action-assignment: #A855F7; /* purple */ /* ======================================== SHADOWS (Elevation System) ======================================== */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15); /* ======================================== SIDEBAR (Adaptive) ======================================== */ --sidebar-bg: var(--stone-100); --sidebar-text: var(--stone-600); --sidebar-text-muted: var(--stone-400); --sidebar-active-bg: color-mix(in srgb, var(--color-primary-green) 12%, transparent); --sidebar-active-text: var(--color-primary-green); --sidebar-hover-bg: var(--stone-200); --sidebar-border: var(--stone-200); } /* ======================================== DARK MODE OVERRIDES Automatically applied when data-theme="dark" is set on or ======================================== */ [data-theme="dark"] { /* Backgrounds */ --background-primary: var(--stone-900); --background-secondary: var(--stone-800); --card-background: var(--stone-800); /* Text */ --text-primary: var(--stone-100); --text-secondary: var(--stone-500); /* Borders */ --border-color: var(--stone-700); /* Table */ --table-header-bg: var(--stone-700); --table-row-hover: var(--stone-700); /* Semantic Colors (Adaptive) */ --color-profit: var(--emerald-400); --color-loss: var(--red-400); --color-warning: var(--amber-400); --color-info: var(--blue-400); --color-assignment: var(--purple-400); /* Brand Color */ --color-primary-green: var(--emerald-500); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.35); /* Sidebar */ --sidebar-bg: var(--stone-900); --sidebar-text: var(--stone-400); --sidebar-text-muted: var(--stone-600); --sidebar-active-bg: color-mix(in srgb, var(--color-primary-green) 15%, transparent); --sidebar-active-text: var(--color-primary-green); --sidebar-hover-bg: var(--stone-800); --sidebar-border: var(--stone-700); } /* ======================================== MEDIA QUERY: Prefer Dark Color Scheme Automatically detect system preference ======================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Backgrounds */ --background-primary: var(--stone-900); --background-secondary: var(--stone-800); --card-background: var(--stone-800); /* Text */ --text-primary: var(--stone-100); --text-secondary: var(--stone-500); /* Borders */ --border-color: var(--stone-700); /* Table */ --table-header-bg: var(--stone-700); --table-row-hover: var(--stone-700); /* Semantic Colors (Adaptive) */ --color-profit: var(--emerald-400); --color-loss: var(--red-400); --color-warning: var(--amber-400); --color-info: var(--blue-400); --color-assignment: var(--purple-400); /* Brand Color */ --color-primary-green: var(--emerald-500); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.35); /* Sidebar */ --sidebar-bg: var(--stone-900); --sidebar-text: var(--stone-400); --sidebar-text-muted: var(--stone-600); --sidebar-active-bg: color-mix(in srgb, var(--color-primary-green) 15%, transparent); --sidebar-active-text: var(--color-primary-green); --sidebar-hover-bg: var(--stone-800); --sidebar-border: var(--stone-700); } } /* ======================================== USAGE EXAMPLES ======================================== */ /* Background colors: background-color: var(--background-primary); background-color: var(--card-background); Text colors: color: var(--text-primary); color: var(--text-secondary); Borders: border: 1px solid var(--border-color); Semantic colors: color: var(--color-profit); color: var(--color-loss); background-color: var(--color-primary-green); Direct palette access (use sparingly): color: var(--stone-600); background-color: var(--emerald-500); */