style: update design system to clean, minimal aesthetic
- Light mode: pure white backgrounds (#FFFFFF) with high contrast near-black text (#0A0A0A) for better readability - Dark mode: clean neutral blacks (#0A0A0A base) instead of warm browns - Borders use neutral grays instead of warm-tinted grays - Status colors (success, warning, error, info) more saturated and vibrant - Maintains copper accent color (#A6592D) as brand element - Overall cleaner, more minimal feel with stronger contrast
This commit is contained in:
Ajax Davis
parent
209fd275f3
commit
bfd45341bb
1 changed files with 89 additions and 89 deletions
|
|
@ -3,32 +3,32 @@
|
|||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
/* Light mode (default) - Warm earthy palette with copper accent */
|
||||
/* Light mode (default) - Clean, minimal, high contrast */
|
||||
:root {
|
||||
/* ===========================================
|
||||
COMPREHENSIVE COLOR PALETTE
|
||||
Warm, earthy tones with copper accent
|
||||
Clean, minimal white with high contrast
|
||||
=========================================== */
|
||||
|
||||
/* Backgrounds - Layered surface system */
|
||||
--background: 30 15% 95%; /* #F5F3F0 - Warm off-white base */
|
||||
/* Backgrounds - Clean white layered system */
|
||||
--background: 0 0% 100%; /* #FFFFFF - Pure white base */
|
||||
--surface: 0 0% 100%; /* #FFFFFF - Cards, panels */
|
||||
--surface-2: 30 20% 97%; /* #FAF8F6 - Elevated surfaces */
|
||||
--surface-3: 25 12% 93%; /* #F0EDEA - Highest elevation */
|
||||
--surface-secondary: 30 10% 95%; /* Legacy alias */
|
||||
--surface-elevated: 30 20% 97%; /* Legacy alias */
|
||||
--surface-2: 0 0% 98%; /* #FAFAFA - Elevated surfaces */
|
||||
--surface-3: 0 0% 96%; /* #F5F5F5 - Highest elevation */
|
||||
--surface-secondary: 0 0% 98%; /* Legacy alias */
|
||||
--surface-elevated: 0 0% 99%; /* Legacy alias */
|
||||
--surface-overlay: 0 0% 100%; /* Overlays, modals */
|
||||
|
||||
/* Text - Clear hierarchy */
|
||||
--foreground: 25 15% 10%; /* #1A1715 - Primary text */
|
||||
--foreground-secondary: 25 8% 35%; /* #5C564F - Secondary text */
|
||||
--foreground-tertiary: 25 6% 50%; /* #817B74 - Tertiary text */
|
||||
--foreground-muted: 25 5% 60%; /* #9A958F - Muted/hints */
|
||||
/* Text - High contrast hierarchy */
|
||||
--foreground: 0 0% 4%; /* #0A0A0A - Primary text, near black */
|
||||
--foreground-secondary: 0 0% 25%; /* #404040 - Secondary text */
|
||||
--foreground-tertiary: 0 0% 45%; /* #737373 - Tertiary text */
|
||||
--foreground-muted: 0 0% 55%; /* #8C8C8C - Muted/hints */
|
||||
|
||||
/* Borders - Warm grays */
|
||||
--border: 30 8% 80%; /* #CEC9C3 - Default borders */
|
||||
--border-strong: 25 8% 50%; /* #857F77 - Emphasized borders */
|
||||
--border-subtle: 30 6% 88%; /* #E3E0DC - Subtle borders */
|
||||
/* Borders - Clean, minimal */
|
||||
--border: 0 0% 88%; /* #E0E0E0 - Default borders */
|
||||
--border-strong: 0 0% 70%; /* #B3B3B3 - Emphasized borders */
|
||||
--border-subtle: 0 0% 93%; /* #EDEDED - Subtle borders */
|
||||
|
||||
/* Primary - Copper accent #A6592D */
|
||||
--primary: 22 57% 41%; /* #A6592D - Brand copper */
|
||||
|
|
@ -39,52 +39,52 @@
|
|||
/* Accent - Copper variations */
|
||||
--accent: 22 57% 41%; /* #A6592D - Same as primary */
|
||||
--accent-strong: 22 60% 35%; /* #8F4722 - Darker/hover */
|
||||
--accent-muted: 22 30% 90%; /* #EDE5DF - Soft copper tint */
|
||||
--accent-muted: 22 15% 95%; /* #F7F3F1 - Very soft copper tint */
|
||||
--accent-foreground: 0 0% 100%; /* White text */
|
||||
|
||||
/* Secondary - Warm neutrals */
|
||||
--secondary: 30 10% 92%; /* #EDEBE8 - Soft warm bg */
|
||||
--secondary-hover: 30 10% 88%; /* #E3E0DC - Hover */
|
||||
--secondary-foreground: 25 15% 10%; /* Dark text */
|
||||
/* Secondary - Clean neutrals */
|
||||
--secondary: 0 0% 96%; /* #F5F5F5 - Clean light bg */
|
||||
--secondary-hover: 0 0% 92%; /* #EBEBEB - Hover */
|
||||
--secondary-foreground: 0 0% 4%; /* Near black text */
|
||||
|
||||
/* Muted - Subtle backgrounds */
|
||||
--muted: 30 8% 94%; /* #F2F0ED - Muted background */
|
||||
--muted-foreground: 25 8% 40%; /* #6B655E - Muted text */
|
||||
--muted: 0 0% 97%; /* #F7F7F7 - Muted background */
|
||||
--muted-foreground: 0 0% 40%; /* #666666 - Muted text */
|
||||
|
||||
/* Status Colors - Earthy, warm variants */
|
||||
--success: 145 45% 36%; /* #327D52 - Forest green */
|
||||
--success-light: 145 35% 92%; /* #E5F3EC - Light bg */
|
||||
/* Status Colors - Clean, saturated */
|
||||
--success: 142 72% 29%; /* #147D3C - Strong green */
|
||||
--success-light: 142 40% 96%; /* #F0FAF4 - Light bg */
|
||||
--success-foreground: 0 0% 100%;
|
||||
|
||||
--warning: 38 75% 50%; /* #D9A020 - Warm amber */
|
||||
--warning-light: 38 60% 92%; /* #F8F2E0 - Light bg */
|
||||
--warning-foreground: 25 15% 10%;
|
||||
--warning: 38 92% 50%; /* #F5A623 - Bright amber */
|
||||
--warning-light: 38 80% 96%; /* #FEF9F0 - Light bg */
|
||||
--warning-foreground: 0 0% 4%;
|
||||
|
||||
--error: 0 55% 50%; /* #C44545 - Warm red */
|
||||
--error-light: 0 50% 95%; /* #F9EDED - Light bg */
|
||||
--error: 0 72% 51%; /* #DC2626 - Strong red */
|
||||
--error-light: 0 60% 97%; /* #FEF2F2 - Light bg */
|
||||
--error-foreground: 0 0% 100%;
|
||||
|
||||
--info: 210 60% 50%; /* #3380CC - Cool blue */
|
||||
--info-light: 210 50% 95%; /* #EDF4FB - Light bg */
|
||||
--info: 210 92% 45%; /* #0969DA - Strong blue */
|
||||
--info-light: 210 80% 97%; /* #F0F7FF - Light bg */
|
||||
--info-foreground: 0 0% 100%;
|
||||
|
||||
/* Destructive (alias for error) */
|
||||
--destructive: 0 55% 50%;
|
||||
--destructive: 0 72% 51%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
|
||||
/* Form Elements */
|
||||
--input: 30 8% 80%; /* Input borders */
|
||||
--input: 0 0% 85%; /* Input borders */
|
||||
--input-focus: 22 57% 41%; /* Copper focus */
|
||||
--ring: 22 57% 41%; /* Focus ring - copper */
|
||||
--ring-offset: 0 0% 100%;
|
||||
|
||||
/* Grid/Blueprint Pattern */
|
||||
--grid-color: 25 8% 88%;
|
||||
--grid-color: 0 0% 92%;
|
||||
--grid-size: 24px;
|
||||
|
||||
/* Card */
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 25 15% 10%;
|
||||
--card-foreground: 0 0% 4%;
|
||||
|
||||
/* Border Radii - SHARP CORNERS (0) */
|
||||
--radius-sm: 0;
|
||||
|
|
@ -287,90 +287,90 @@
|
|||
--z-notification: 850;
|
||||
}
|
||||
|
||||
/* Dark mode (opt-in) - Warm dark with copper accent */
|
||||
/* Dark mode (opt-in) - Clean, minimal dark */
|
||||
.dark {
|
||||
/* ===========================================
|
||||
DARK MODE - Warm charcoal with copper
|
||||
DARK MODE - Clean neutral dark
|
||||
=========================================== */
|
||||
|
||||
/* Backgrounds - Layered dark surfaces */
|
||||
--background: 25 10% 6%; /* #0F0E0D - Warm dark base */
|
||||
--surface: 25 10% 9%; /* #171514 - Cards, panels */
|
||||
--surface-2: 25 10% 12%; /* #1F1D1B - Elevated */
|
||||
--surface-3: 25 10% 16%; /* #2A2725 - Highest elevation */
|
||||
--surface-secondary: 25 10% 10%;
|
||||
--surface-elevated: 25 10% 12%;
|
||||
--surface-overlay: 25 10% 16%;
|
||||
/* Backgrounds - Layered dark surfaces (neutral) */
|
||||
--background: 0 0% 4%; /* #0A0A0A - Near black base */
|
||||
--surface: 0 0% 7%; /* #121212 - Cards, panels */
|
||||
--surface-2: 0 0% 10%; /* #1A1A1A - Elevated */
|
||||
--surface-3: 0 0% 14%; /* #242424 - Highest elevation */
|
||||
--surface-secondary: 0 0% 8%;
|
||||
--surface-elevated: 0 0% 10%;
|
||||
--surface-overlay: 0 0% 14%;
|
||||
|
||||
/* Text - Clear hierarchy in dark */
|
||||
--foreground: 30 10% 90%; /* #E8E5E2 - Primary text */
|
||||
--foreground-secondary: 25 6% 60%; /* #9A9592 - Secondary */
|
||||
--foreground-tertiary: 25 5% 45%; /* #757270 - Tertiary */
|
||||
--foreground-muted: 25 4% 35%; /* #5A5856 - Muted */
|
||||
/* Text - High contrast hierarchy */
|
||||
--foreground: 0 0% 93%; /* #EDEDED - Primary text */
|
||||
--foreground-secondary: 0 0% 65%; /* #A6A6A6 - Secondary */
|
||||
--foreground-tertiary: 0 0% 50%; /* #808080 - Tertiary */
|
||||
--foreground-muted: 0 0% 40%; /* #666666 - Muted */
|
||||
|
||||
/* Borders - Subtle in dark */
|
||||
--border: 25 8% 20%; /* #363230 - Default */
|
||||
--border-strong: 25 8% 35%; /* #5C5854 - Emphasized */
|
||||
--border-subtle: 25 6% 14%; /* #252321 - Subtle */
|
||||
/* Borders - Clean in dark */
|
||||
--border: 0 0% 18%; /* #2E2E2E - Default */
|
||||
--border-strong: 0 0% 30%; /* #4D4D4D - Emphasized */
|
||||
--border-subtle: 0 0% 12%; /* #1F1F1F - Subtle */
|
||||
|
||||
/* Primary - Copper, brighter for dark mode */
|
||||
--primary: 22 57% 50%; /* #C96A38 - Brighter copper */
|
||||
--primary-hover: 22 57% 55%; /* #D47942 - Hover */
|
||||
--primary-active: 22 57% 45%; /* #B55E2E - Active */
|
||||
--primary: 22 60% 55%; /* Brighter copper for dark */
|
||||
--primary-hover: 22 60% 60%;
|
||||
--primary-active: 22 60% 50%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
|
||||
/* Accent - Copper variations */
|
||||
--accent: 22 57% 50%;
|
||||
--accent-strong: 22 60% 55%;
|
||||
--accent-muted: 22 20% 15%;
|
||||
--accent: 22 60% 55%;
|
||||
--accent-strong: 22 65% 60%;
|
||||
--accent-muted: 22 30% 12%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
|
||||
/* Secondary - Warm dark */
|
||||
--secondary: 25 10% 15%;
|
||||
--secondary-hover: 25 10% 20%;
|
||||
--secondary-foreground: 30 10% 90%;
|
||||
/* Secondary - Clean neutral */
|
||||
--secondary: 0 0% 14%;
|
||||
--secondary-hover: 0 0% 18%;
|
||||
--secondary-foreground: 0 0% 93%;
|
||||
|
||||
/* Muted - Subtle dark */
|
||||
--muted: 25 8% 12%;
|
||||
--muted-foreground: 25 6% 55%;
|
||||
--muted: 0 0% 10%;
|
||||
--muted-foreground: 0 0% 55%;
|
||||
|
||||
/* Status Colors - Brighter for dark mode */
|
||||
--success: 145 50% 45%; /* Brighter green */
|
||||
--success-light: 145 30% 15%;
|
||||
/* Status Colors - Vibrant for dark mode */
|
||||
--success: 142 60% 45%;
|
||||
--success-light: 142 40% 12%;
|
||||
--success-foreground: 0 0% 100%;
|
||||
|
||||
--warning: 38 80% 55%; /* Brighter amber */
|
||||
--warning-light: 38 40% 15%;
|
||||
--warning-foreground: 25 15% 10%;
|
||||
--warning: 38 90% 55%;
|
||||
--warning-light: 38 50% 12%;
|
||||
--warning-foreground: 0 0% 4%;
|
||||
|
||||
--error: 0 60% 55%; /* Brighter red */
|
||||
--error-light: 0 40% 15%;
|
||||
--error: 0 70% 55%;
|
||||
--error-light: 0 50% 12%;
|
||||
--error-foreground: 0 0% 100%;
|
||||
|
||||
--info: 210 70% 55%; /* Brighter blue */
|
||||
--info-light: 210 40% 15%;
|
||||
--info: 210 80% 55%;
|
||||
--info-light: 210 50% 12%;
|
||||
--info-foreground: 0 0% 100%;
|
||||
|
||||
/* Destructive */
|
||||
--destructive: 0 60% 55%;
|
||||
--destructive: 0 70% 55%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
|
||||
/* Form Elements */
|
||||
--input: 25 8% 20%;
|
||||
--input-focus: 22 57% 50%;
|
||||
--ring: 22 57% 50%;
|
||||
--ring-offset: 25 10% 6%;
|
||||
--input: 0 0% 18%;
|
||||
--input-focus: 22 60% 55%;
|
||||
--ring: 22 60% 55%;
|
||||
--ring-offset: 0 0% 4%;
|
||||
|
||||
/* Grid */
|
||||
--grid-color: 25 8% 15%;
|
||||
--grid-color: 0 0% 12%;
|
||||
|
||||
/* Card */
|
||||
--card: 25 10% 9%;
|
||||
--card-foreground: 30 10% 90%;
|
||||
--card: 0 0% 7%;
|
||||
--card-foreground: 0 0% 93%;
|
||||
|
||||
/* Brutalist Accents */
|
||||
--brutalist-accent: 22 57% 50%;
|
||||
--brutalist-accent-hover: 22 57% 55%;
|
||||
--brutalist-accent: 22 60% 55%;
|
||||
--brutalist-accent-hover: 22 60% 60%;
|
||||
|
||||
/* Border Radii - SHARP CORNERS (0) */
|
||||
--radius-sm: 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue