diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md index 006e9071..9b55c7df 100644 --- a/DESIGN_SYSTEM.md +++ b/DESIGN_SYSTEM.md @@ -1,6 +1,6 @@ # CRM Design System — Style Guide -> Version 1.0 | Last Updated: December 2024 +> Version 1.2 | Last Updated: December 2024 A comprehensive design system reference for building consistent, accessible, and modern CRM interfaces. @@ -10,14 +10,18 @@ A comprehensive design system reference for building consistent, accessible, and 1. [Design Principles](#design-principles) 2. [Color System](#color-system) -3. [Typography](#typography) -4. [Spacing & Layout](#spacing--layout) -5. [Border Radius](#border-radius) -6. [Elevation & Shadows](#elevation--shadows) -7. [Components](#components) -8. [Icons](#icons) -9. [Grid & Breakpoints](#grid--breakpoints) -10. [CSS Variables Reference](#css-variables-reference) +3. [CRM-Specific Colors](#crm-specific-colors) +4. [Data Visualization](#data-visualization) +5. [Kanban Board Specs](#kanban-board-specs) +6. [Activity Timeline](#activity-timeline) +7. [Typography](#typography) +8. [Spacing & Layout](#spacing--layout) +9. [Border Radius](#border-radius) +10. [Elevation & Shadows](#elevation--shadows) +11. [Components](#components) +12. [Icons](#icons) +13. [Grid & Breakpoints](#grid--breakpoints) +14. [CSS Variables Reference](#css-variables-reference) --- @@ -43,75 +47,238 @@ Base Layer (Primitives) → Semantic Layer (Purpose) → Component Layer (Usage) ### Brand Colors -| Token | Hex | RGB | Usage | -|-------|-----|-----|-------| -| `--color-brand-primary` | `#08A742` | 8, 167, 66 | Primary actions, CTAs, positive indicators | -| `--color-brand-dark` | `#404346` | 64, 67, 70 | Primary text, dark UI elements | -| `--color-brand-white` | `#FFFFFF` | 255, 255, 255 | Backgrounds, cards, surfaces | +| Token | Hex | RGB | Usage | +| --------------------- | ------- | ------------- | ----------------------------------- | +| --color-brand-primary | #EA580C | 234, 88, 12 | Primary actions, CTAs, brand accent | +| --color-brand-dark | #404346 | 64, 67, 70 | Primary text, dark UI elements | +| --color-brand-white | #FFFFFF | 255, 255, 255 | Backgrounds, cards, surfaces | ### Neutral Palette -| Token | Hex | Usage | -|-------|-----|-------| -| `--color-grey-50` | `#FAFAFA` | Subtle backgrounds | -| `--color-grey-100` | `#F5F5F5` | Hover states, zebra stripes | -| `--color-grey-200` | `#EEEEEE` | Borders, dividers | -| `--color-grey-300` | `#E0E0E0` | Disabled borders | -| `--color-grey-400` | `#BDBDBD` | Placeholder text | -| `--color-grey-500` | `#9E9E9E` | Secondary icons | -| `--color-grey-600` | `#757575` | Secondary text | -| `--color-grey-700` | `#616161` | Body text | -| `--color-grey-800` | `#424242` | Headings | -| `--color-grey-900` | `#212121` | Primary text | +| Token | Hex | Usage | +| ---------------- | ------- | ---------------------------------- | +| --color-grey-50 | #FAFAFA | Subtle backgrounds | +| --color-grey-100 | #F5F5F5 | Hover states, zebra stripes | +| --color-grey-200 | #EEEEEE | Subtle dividers, table rows | +| --color-grey-300 | #E0E0E0 | Default borders (--border-default) | +| --color-grey-400 | #BDBDBD | Placeholder text | +| --color-grey-500 | #9E9E9E | Secondary icons | +| --color-grey-600 | #757575 | Secondary text | +| --color-grey-700 | #616161 | Body text | +| --color-grey-800 | #424242 | Headings | +| --color-grey-900 | #212121 | Primary text | ### Semantic Colors -| Category | Token | Hex | Usage | -|----------|-------|-----|-------| -| **Primary** | `--color-primary-default` | `#08A742` | Primary buttons, links | -| | `--color-primary-hover` | `#079239` | Primary hover state | -| | `--color-primary-active` | `#068030` | Primary active/pressed | -| | `--color-primary-light` | `#E8F5EC` | Primary backgrounds | -| **Negative/Error** | `--color-negative-default` | `#DC3545` | Error states, destructive actions | -| | `--color-negative-hover` | `#C82333` | Error hover | -| | `--color-negative-light` | `#FDEAEA` | Error backgrounds | -| **Warning** | `--color-warning-default` | `#FFC107` | Warning states | -| | `--color-warning-dark` | `#E0A800` | Warning text on light bg | -| | `--color-warning-light` | `#FFF8E1` | Warning backgrounds | -| **Success** | `--color-success-default` | `#28A745` | Success states | -| | `--color-success-light` | `#E8F5E9` | Success backgrounds | -| **Info** | `--color-info-default` | `#17A2B8` | Informational states | -| | `--color-info-light` | `#E3F2FD` | Info backgrounds | +| Category | Token | Hex | Usage | +| ------------------ | ------------------------ | ------- | --------------------------------- | +| **Primary** | --color-primary-default | #EA580C | Primary buttons, links | +| | --color-primary-hover | #C2410C | Primary hover state | +| | --color-primary-active | #9A3412 | Primary active/pressed | +| | --color-primary-light | #FFF7ED | Primary backgrounds | +| **Negative/Error** | --color-negative-default | #DC3545 | Error states, destructive actions | +| | --color-negative-hover | #C82333 | Error hover | +| | --color-negative-light | #FDEAEA | Error backgrounds | +| **Warning** | --color-warning-default | #FFC107 | Warning states | +| | --color-warning-dark | #E0A800 | Warning text on light bg | +| | --color-warning-light | #FFF8E1 | Warning backgrounds | +| **Success** | --color-success-default | #28A745 | Success states | +| | --color-success-light | #E8F5E9 | Success backgrounds | +| **Info** | --color-info-default | #17A2B8 | Informational states | +| | --color-info-light | #E3F2FD | Info backgrounds | ### Surface Colors -| Token | Light Mode | Dark Mode | Usage | -|-------|------------|-----------|-------| -| `--surface-default` | `#FFFFFF` | `#1E1E1E` | Main background | -| `--surface-raised` | `#FFFFFF` | `#252525` | Cards, elevated elements | -| `--surface-sunken` | `#F5F5F5` | `#141414` | Inset areas, sidebars | -| `--surface-overlay` | `#FFFFFF` | `#2D2D2D` | Modals, dropdowns | +| Token | Light Mode | Dark Mode | Usage | +| ----------------- | ---------- | --------- | ------------------------ | +| --surface-default | #FFFFFF | #1E1E1E | Main background | +| --surface-raised | #FFFFFF | #252525 | Cards, elevated elements | +| --surface-sunken | #F5F5F5 | #141414 | Inset areas, sidebars | +| --surface-overlay | #FFFFFF | #2D2D2D | Modals, dropdowns | ### Text Colors -| Token | Light Mode | Dark Mode | Usage | -|-------|------------|-----------|-------| -| `--text-primary` | `#212121` | `#FFFFFF` | Headings, primary content | -| `--text-secondary` | `#616161` | `#B0B0B0` | Descriptions, metadata | -| `--text-tertiary` | `#9E9E9E` | `#757575` | Placeholders, hints | -| `--text-disabled` | `#BDBDBD` | `#525252` | Disabled states | -| `--text-inverse` | `#FFFFFF` | `#212121` | Text on colored backgrounds | -| `--text-link` | `#08A742` | `#4ADE80` | Links | -| `--text-error` | `#DC3545` | `#F87171` | Error messages | +| Token | Light Mode | Dark Mode | Usage | +| ---------------- | ---------- | --------- | --------------------------- | +| --text-primary | #212121 | #FFFFFF | Headings, primary content | +| --text-secondary | #616161 | #B0B0B0 | Descriptions, metadata | +| --text-tertiary | #9E9E9E | #757575 | Placeholders, hints | +| --text-disabled | #BDBDBD | #525252 | Disabled states | +| --text-inverse | #FFFFFF | #212121 | Text on colored backgrounds | +| --text-link | #EA580C | #FB923C | Links | +| --text-error | #DC3545 | #F87171 | Error messages | ### Border Colors -| Token | Light Mode | Dark Mode | Usage | -|-------|------------|-----------|-------| -| `--border-default` | `#E0E0E0` | `#3D3D3D` | Default borders | -| `--border-strong` | `#BDBDBD` | `#525252` | Emphasized borders | -| `--border-focus` | `#08A742` | `#4ADE80` | Focus rings | -| `--border-error` | `#DC3545` | `#F87171` | Error state borders | +| Token | Light Mode | Dark Mode | Usage | +| ---------------- | ---------- | --------- | ------------------- | +| --border-default | #E0E0E0 | #3D3D3D | Default borders | +| --border-strong | #BDBDBD | #525252 | Emphasized borders | +| --border-focus | #EA580C | #FB923C | Focus rings | +| --border-error | #DC3545 | #F87171 | Error state borders | + +--- + +## CRM-Specific Colors + +### Pipeline Stage Colors + +| Token | Hex | Usage | +| ------------------- | ------- | -------------------- | +| --stage-new | #EA580C | New/Incoming leads | +| --stage-contacted | #F97316 | Initial contact made | +| --stage-qualified | #3B82F6 | Lead qualified | +| --stage-proposal | #8B5CF6 | Proposal sent | +| --stage-negotiation | #F59E0B | In negotiation | +| --stage-won | #22C55E | Deal closed won | +| --stage-lost | #EF4444 | Deal closed lost | + +### Pipeline Stage Backgrounds (Kanban columns) + +| Token | Hex | Usage | +| ---------------------- | ------- | ------------------ | +| --stage-new-bg | #FFF7ED | New column | +| --stage-contacted-bg | #FFEDD5 | Contacted column | +| --stage-qualified-bg | #EFF6FF | Qualified column | +| --stage-proposal-bg | #F5F3FF | Proposal column | +| --stage-negotiation-bg | #FFFBEB | Negotiation column | +| --stage-won-bg | #F0FDF4 | Won column | +| --stage-lost-bg | #FEF2F2 | Lost column | + +### Activity Type Colors + +| Token | Hex | Icon | Usage | +| ------------------- | ------- | -------- | ------------ | +| --activity-call | #22C55E | Phone | Phone calls | +| --activity-email | #3B82F6 | Mail | Emails | +| --activity-meeting | #8B5CF6 | Calendar | Meetings | +| --activity-task | #F59E0B | Check | Tasks/To-dos | +| --activity-note | #6B7280 | FileText | Notes | +| --activity-deadline | #EF4444 | Clock | Deadlines | + +### Lead Temperature + +| Token | Hex | Usage | +| ----------- | ------- | ------------------------ | +| --lead-hot | #EF4444 | Hot lead (high intent) | +| --lead-warm | #F59E0B | Warm lead (engaged) | +| --lead-cold | #6B7280 | Cold lead (low activity) | + +### Lead Temperature Backgrounds + +| Token | Hex | Usage | +| -------------- | ------- | ------------------ | +| --lead-hot-bg | #FEF2F2 | Hot lead badge/tag | +| --lead-warm-bg | #FFFBEB | Warm lead badge | +| --lead-cold-bg | #F3F4F6 | Cold lead badge | + +### Priority Levels + +| Token | Hex | Usage | +| ----------------- | ------- | --------------- | +| --priority-urgent | #DC2626 | Urgent priority | +| --priority-high | #F97316 | High priority | +| --priority-medium | #FBBF24 | Medium priority | +| --priority-low | #22C55E | Low priority | +| --priority-none | #9CA3AF | No priority set | + +### Deal Health / Probability + +| Token | Hex | Usage | +| ------------------ | ------- | ------------------------- | +| --probability-high | #22C55E | 70-100% close probability | +| --probability-mid | #F59E0B | 40-69% probability | +| --probability-low | #EF4444 | 0-39% probability | + +### Task Status + +| Token | Hex | Usage | +| ---------------- | ------- | ------------- | +| --task-overdue | #EF4444 | Past due date | +| --task-due-today | #F59E0B | Due today | +| --task-upcoming | #3B82F6 | Due in future | +| --task-completed | #22C55E | Completed | +| --task-cancelled | #9CA3AF | Cancelled | + +### Task Status Backgrounds + +| Token | Hex | Usage | +| ------------------- | ------- | -------------------- | +| --task-overdue-bg | #FEF2F2 | Overdue task badge | +| --task-due-today-bg | #FFFBEB | Due today badge | +| --task-upcoming-bg | #EFF6FF | Upcoming task badge | +| --task-completed-bg | #F0FDF4 | Completed task badge | +| --task-cancelled-bg | #F3F4F6 | Cancelled task badge | + +--- + +## Data Visualization + +### Chart Color Palette (Sequential) + +For single-metric charts and gradients: + +| Token | Hex | Usage | +| --------- | ------- | -------------- | +| --chart-1 | #EA580C | Primary series | +| --chart-2 | #F97316 | Secondary | +| --chart-3 | #FB923C | Tertiary | +| --chart-4 | #FDBA74 | Fourth | +| --chart-5 | #FED7AA | Fifth | + +### Chart Color Palette (Categorical) + +For multi-metric/comparison charts: + +| Token | Hex | Usage | +| ------- | ------- | ------------------- | +| --cat-1 | #EA580C | Category 1 (Orange) | +| --cat-2 | #3B82F6 | Category 2 (Blue) | +| --cat-3 | #22C55E | Category 3 (Green) | +| --cat-4 | #8B5CF6 | Category 4 (Purple) | +| --cat-5 | #EC4899 | Category 5 (Pink) | +| --cat-6 | #14B8A6 | Category 6 (Teal) | + +### Progress Bar Colors + +| Token | Hex | Usage | +| ------------------ | ------- | ----------------- | +| --progress-default | #EA580C | Standard progress | +| --progress-success | #22C55E | Goal achieved | +| --progress-warning | #F59E0B | Behind target | +| --progress-danger | #EF4444 | Critical/at risk | +| --progress-bg | #E5E7EB | Progress track | + +--- + +## Kanban Board Specs + +| Property | Value | +| -------------------- | ------------------------- | +| Column Width | 280px - 320px | +| Column Gap | 12px | +| Card Gap | 8px | +| Column Header Height | 48px | +| Card Min Height | 80px | +| Card Padding | 12px | +| Card Border Radius | --radius-lg (8px) | +| Column Border Radius | --radius-lg (8px) | +| Drop Zone Highlight | 2px dashed --border-focus | +| Drag Shadow | --shadow-lg | + +--- + +## Activity Timeline + +| Property | Value | +| ------------------- | -------------------------- | +| Timeline Line Width | 2px | +| Timeline Line Color | --border-default | +| Node Size | 32px | +| Node Border | 2px solid (activity color) | +| Node Background | --surface-default | +| Entry Gap | 16px | +| Content Offset | 48px from timeline | --- @@ -119,37 +286,39 @@ Base Layer (Primitives) → Semantic Layer (Purpose) → Component Layer (Usage) ### Font Stack +Geist font from google fonts + ```css ---font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - 'Helvetica Neue', Arial, sans-serif; ---font-family-mono: 'SF Mono', 'Fira Code', 'Fira Mono', Consolas, monospace; +--font-family-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + sans-serif; +--font-family-mono: "Geist Mono", "SF Mono", "Fira Code", Consolas, monospace; ``` ### Type Scale -| Token | Size | Weight | Line Height | Letter Spacing | Usage | -|-------|------|--------|-------------|----------------|-------| -| `--text-display` | 40px | 700 | 1.2 | -0.02em | Hero sections | -| `--text-h1` | 32px | 600 | 1.25 | -0.01em | Page titles | -| `--text-h2` | 24px | 600 | 1.3 | -0.01em | Section headers | -| `--text-h3` | 20px | 600 | 1.35 | 0 | Subsection headers | -| `--text-h4` | 16px | 600 | 1.4 | 0 | Card titles | -| `--text-h5` | 14px | 600 | 1.4 | 0 | Small headers | -| `--text-body-lg` | 16px | 400 | 1.5 | 0 | Primary body text | -| `--text-body` | 14px | 400 | 1.5 | 0 | Default body text | -| `--text-body-sm` | 13px | 400 | 1.45 | 0 | Secondary body text | -| `--text-caption` | 12px | 400 | 1.4 | 0.01em | Captions, metadata | -| `--text-label` | 12px | 500 | 1.3 | 0.02em | Form labels, badges | -| `--text-overline` | 11px | 600 | 1.4 | 0.08em | Overlines (uppercase) | +| Token | Size | Weight | Line Height | Letter Spacing | Usage | +| --------------- | ---- | ------ | ----------- | -------------- | --------------------- | +| --text-display | 40px | 700 | 1.2 | -0.02em | Hero sections | +| --text-h1 | 32px | 600 | 1.25 | -0.01em | Page titles | +| --text-h2 | 24px | 600 | 1.3 | -0.01em | Section headers | +| --text-h3 | 20px | 600 | 1.35 | 0 | Subsection headers | +| --text-h4 | 16px | 600 | 1.4 | 0 | Card titles | +| --text-h5 | 14px | 600 | 1.4 | 0 | Small headers | +| --text-body-lg | 16px | 400 | 1.5 | 0 | Primary body text | +| --text-body | 14px | 400 | 1.5 | 0 | Default body text | +| --text-body-sm | 13px | 400 | 1.45 | 0 | Secondary body text | +| --text-caption | 12px | 400 | 1.4 | 0.01em | Captions, metadata | +| --text-label | 12px | 500 | 1.3 | 0.02em | Form labels, badges | +| --text-overline | 11px | 600 | 1.4 | 0.08em | Overlines (uppercase) | ### Font Weights -| Token | Value | Usage | -|-------|-------|-------| -| `--font-weight-regular` | 400 | Body text, descriptions | -| `--font-weight-medium` | 500 | Labels, emphasis | -| `--font-weight-semibold` | 600 | Headings, buttons | -| `--font-weight-bold` | 700 | Strong emphasis | +| Token | Value | Usage | +| ---------------------- | ----- | ----------------------- | +| --font-weight-regular | 400 | Body text, descriptions | +| --font-weight-medium | 500 | Labels, emphasis | +| --font-weight-semibold | 600 | Headings, buttons | +| --font-weight-bold | 700 | Strong emphasis | ### Usage Guidelines @@ -168,61 +337,63 @@ All spacing is based on an **8px grid system**. ### Spacing Scale -| Token | Value | Usage | -|-------|-------|-------| -| `--space-0` | 0px | No spacing | -| `--space-25` | 2px | Micro adjustments, borders | -| `--space-50` | 4px | Tight spacing, icon gaps | -| `--space-100` | 8px | Base unit, compact layouts | -| `--space-150` | 12px | Default internal padding | -| `--space-200` | 16px | Component padding, gaps | -| `--space-250` | 20px | Medium spacing | -| `--space-300` | 24px | Section padding | -| `--space-400` | 32px | Section margins | -| `--space-500` | 40px | Large component spacing | -| `--space-600` | 48px | Page sections | -| `--space-800` | 64px | Major section breaks | -| `--space-1000` | 80px | Page-level spacing | +| Token | Value | Usage | +| ------------ | ----- | -------------------------- | +| --space-0 | 0px | No spacing | +| --space-25 | 2px | Micro adjustments, borders | +| --space-50 | 4px | Tight spacing, icon gaps | +| --space-100 | 8px | Base unit, compact layouts | +| --space-150 | 12px | Default internal padding | +| --space-200 | 16px | Component padding, gaps | +| --space-250 | 20px | Medium spacing | +| --space-300 | 24px | Section padding | +| --space-400 | 32px | Section margins | +| --space-500 | 40px | Large component spacing | +| --space-600 | 48px | Page sections | +| --space-700 | 56px | Large section gaps | +| --space-800 | 64px | Major section breaks | +| --space-900 | 72px | Extra-large spacing | +| --space-1000 | 80px | Page-level spacing | ### Spacing Usage Guide -| Context | Recommended Tokens | -|---------|-------------------| -| Icon to text gap | `--space-50` to `--space-100` (4-8px) | -| Button padding (horizontal) | `--space-200` to `--space-300` (16-24px) | -| Button padding (vertical) | `--space-100` to `--space-150` (8-12px) | -| Card internal padding | `--space-200` to `--space-300` (16-24px) | -| Form field gap | `--space-200` (16px) | -| Section gap | `--space-400` to `--space-600` (32-48px) | -| Page margins | `--space-300` to `--space-400` (24-32px) | +| Context | Recommended Tokens | +| --------------------------- | ------------------------------------ | +| Icon to text gap | --space-50 to --space-100 (4-8px) | +| Button padding (horizontal) | --space-200 to --space-300 (16-24px) | +| Button padding (vertical) | --space-100 to --space-150 (8-12px) | +| Card internal padding | --space-200 to --space-300 (16-24px) | +| Form field gap | --space-200 (16px) | +| Section gap | --space-400 to --space-600 (32-48px) | +| Page margins | --space-300 to --space-400 (24-32px) | --- ## Border Radius -| Token | Value | Usage | -|-------|-------|-------| -| `--radius-none` | 0px | Sharp corners | -| `--radius-xs` | 2px | Subtle rounding | -| `--radius-sm` | 4px | Inputs, small buttons | -| `--radius-md` | 6px | Buttons, dropdowns | -| `--radius-lg` | 8px | Cards, containers | -| `--radius-xl` | 12px | Modals, large cards | -| `--radius-2xl` | 16px | Large containers | -| `--radius-full` | 9999px | Pills, avatars, tags | +| Token | Value | Usage | +| ------------- | ------ | --------------------- | +| --radius-none | 0px | Sharp corners | +| --radius-xs | 2px | Subtle rounding | +| --radius-sm | 4px | Inputs, small buttons | +| --radius-md | 6px | Buttons, dropdowns | +| --radius-lg | 8px | Cards, containers | +| --radius-xl | 12px | Modals, large cards | +| --radius-2xl | 16px | Large containers | +| --radius-full | 9999px | Pills, avatars, tags | ### Usage by Component -| Component | Radius Token | -|-----------|--------------| -| Buttons | `--radius-md` (6px) | -| Input fields | `--radius-sm` (4px) | -| Cards | `--radius-lg` (8px) | -| Modals | `--radius-xl` (12px) | -| Avatars | `--radius-full` | -| Tags/Badges | `--radius-full` | -| Tooltips | `--radius-sm` (4px) | -| Dropdowns | `--radius-md` (6px) | +| Component | Radius Token | +| ------------ | ------------------ | +| Buttons | --radius-md (6px) | +| Input fields | --radius-sm (4px) | +| Cards | --radius-lg (8px) | +| Modals | --radius-xl (12px) | +| Avatars | --radius-full | +| Tags/Badges | --radius-full | +| Tooltips | --radius-sm (4px) | +| Dropdowns | --radius-md (6px) | --- @@ -230,26 +401,26 @@ All spacing is based on an **8px grid system**. ### Shadow Scale -| Token | Value | Usage | -|-------|-------|-------| -| `--shadow-none` | none | Flat elements | -| `--shadow-xs` | `0 1px 2px rgba(0,0,0,0.04)` | Subtle lift | -| `--shadow-sm` | `0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)` | Cards (resting) | -| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05)` | Cards (hover), dropdowns | -| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)` | Modals, popovers | -| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04)` | Full overlays | +| Token | Value | Usage | +| ------------- | ---------------------------------------------------------- | ------------------------ | +| --shadow-none | none | Flat elements | +| --shadow-xs | 0 1px 2px rgba(0,0,0,0.04) | Subtle lift | +| --shadow-sm | 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) | Cards (resting) | +| --shadow-md | 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05) | Cards (hover), dropdowns | +| --shadow-lg | 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05) | Modals, popovers | +| --shadow-xl | 0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04) | Full overlays | ### Elevation Levels -| Level | Shadow Token | Z-Index | Usage | -|-------|--------------|---------|-------| -| Base | `--shadow-none` | 0 | Page background | -| Raised | `--shadow-sm` | 10 | Cards, sections | -| Dropdown | `--shadow-md` | 100 | Dropdowns, tooltips | -| Sticky | `--shadow-md` | 200 | Sticky headers | -| Modal | `--shadow-lg` | 300 | Modals, dialogs | -| Overlay | `--shadow-xl` | 400 | Full overlays | -| Toast | `--shadow-lg` | 500 | Notifications | +| Level | Shadow Token | Z-Index | Usage | +| -------- | ------------- | ------- | ------------------- | +| Base | --shadow-none | 0 | Page background | +| Raised | --shadow-sm | 10 | Cards, sections | +| Dropdown | --shadow-md | 100 | Dropdowns, tooltips | +| Sticky | --shadow-md | 200 | Sticky headers | +| Modal | --shadow-lg | 300 | Modals, dialogs | +| Overlay | --shadow-xl | 400 | Full overlays | +| Toast | --shadow-lg | 500 | Notifications | ### Focus Ring @@ -265,33 +436,33 @@ All spacing is based on an **8px grid system**. #### Variants -| Variant | Background | Text | Border | Usage | -|---------|------------|------|--------|-------| -| **Primary** | `--color-primary-default` | `--text-inverse` | none | Main actions | -| **Secondary** | `transparent` | `--color-primary-default` | `--color-primary-default` | Alternative actions | -| **Tertiary** | `transparent` | `--text-secondary` | none | Low emphasis | -| **Destructive** | `--color-negative-default` | `--text-inverse` | none | Dangerous actions | -| **Ghost** | `transparent` | `--text-primary` | none | Minimal UI | +| Variant | Background | Text | Border | Usage | +| --------------- | ------------------------ | ----------------------- | ----------------------- | ------------------- | +| **Primary** | --color-primary-default | --text-inverse | none | Main actions | +| **Secondary** | transparent | --color-primary-default | --color-primary-default | Alternative actions | +| **Tertiary** | transparent | --text-secondary | none | Low emphasis | +| **Destructive** | --color-negative-default | --text-inverse | none | Dangerous actions | +| **Ghost** | transparent | --text-primary | none | Minimal UI | #### Sizes -| Size | Height | Padding (H) | Font Size | Icon Size | -|------|--------|-------------|-----------|-----------| -| **XS** | 24px | 8px | 11px | 14px | -| **SM** | 28px | 12px | 12px | 16px | -| **MD** | 36px | 16px | 14px | 18px | -| **LG** | 44px | 20px | 16px | 20px | -| **XL** | 52px | 24px | 18px | 24px | +| Size | Height | Padding (H) | Font Size | Icon Size | +| ------ | ------ | ----------- | --------- | --------- | +| **XS** | 24px | 8px | 11px | 14px | +| **SM** | 28px | 12px | 12px | 16px | +| **MD** | 36px | 16px | 14px | 18px | +| **LG** | 44px | 20px | 16px | 20px | +| **XL** | 52px | 24px | 18px | 24px | #### States -| State | Opacity/Change | -|-------|----------------| -| Default | 100% | -| Hover | Darken 8% or overlay | -| Active | Darken 12% | +| State | Opacity/Change | +| -------- | ----------------------- | +| Default | 100% | +| Hover | Darken 8% or overlay | +| Active | Darken 12% | | Disabled | 50% opacity, no pointer | -| Loading | Show spinner, disable | +| Loading | Show spinner, disable | #### Button Specs @@ -326,26 +497,26 @@ All spacing is based on an **8px grid system**. #### Specifications -| Property | Value | -|----------|-------| -| Height | 40px (default), 36px (compact), 48px (large) | -| Padding | 12px horizontal, centered vertical | -| Border | 1px solid `--border-default` | -| Border Radius | `--radius-sm` (4px) | -| Font Size | 14px | -| Label Font Size | 12px | -| Helper Font Size | 12px | +| Property | Value | +| ---------------- | -------------------------------------------- | +| Height | 40px (default), 36px (compact), 48px (large) | +| Padding | 12px horizontal, centered vertical | +| Border | 1px solid --border-default | +| Border Radius | --radius-sm (4px) | +| Font Size | 14px | +| Label Font Size | 12px | +| Helper Font Size | 12px | #### States -| State | Border Color | Background | -|-------|--------------|------------| -| Default | `--border-default` | `--surface-default` | -| Hover | `--border-strong` | `--surface-default` | -| Focus | `--border-focus` (2px) | `--surface-default` | -| Error | `--border-error` | `--color-negative-light` | -| Disabled | `--border-default` | `--surface-sunken` | -| Read-only | `--border-default` | `--surface-sunken` | +| State | Border Color | Background | +| --------- | -------------------- | ---------------------- | +| Default | --border-default | --surface-default | +| Hover | --border-strong | --surface-default | +| Focus | --border-focus (2px) | --surface-default | +| Error | --border-error | --color-negative-light | +| Disabled | --border-default | --surface-sunken | +| Read-only | --border-default | --surface-sunken | --- @@ -353,22 +524,22 @@ All spacing is based on an **8px grid system**. #### Specifications -| Property | Value | -|----------|-------| -| Background | `--surface-raised` | -| Border | 1px solid `--border-default` (optional) | -| Border Radius | `--radius-lg` (8px) | -| Padding | `--space-200` to `--space-300` (16-24px) | -| Shadow (resting) | `--shadow-sm` | -| Shadow (hover) | `--shadow-md` | +| Property | Value | +| ---------------- | ------------------------------------- | +| Background | --surface-raised | +| Border | 1px solid --border-default (optional) | +| Border Radius | --radius-lg (8px) | +| Padding | --space-200 to --space-300 (16-24px) | +| Shadow (resting) | --shadow-sm | +| Shadow (hover) | --shadow-md | #### Card Types -| Type | Description | Shadow | -|------|-------------|--------| -| **Flat** | Border only, no shadow | `--shadow-none` | -| **Elevated** | Subtle lift | `--shadow-sm` | -| **Interactive** | Hover lift | `--shadow-sm` → `--shadow-md` | +| Type | Description | Shadow | +| --------------- | ---------------------- | ------------------------- | +| **Flat** | Border only, no shadow | --shadow-none | +| **Elevated** | Subtle lift | --shadow-sm | +| **Interactive** | Hover lift | --shadow-sm → --shadow-md | --- @@ -376,24 +547,24 @@ All spacing is based on an **8px grid system**. #### Size Presets -| Size | Width | Max Height | Usage | -|------|-------|------------|-------| -| **SM** | 400px | 80vh | Confirmations, alerts | -| **MD** | 560px | 80vh | Forms, standard content | -| **LG** | 720px | 85vh | Complex forms | -| **XL** | 900px | 90vh | Data-heavy content | -| **Full** | 100% - 48px | 100% - 48px | Wizards, editors | +| Size | Width | Max Height | Usage | +| -------- | ----------- | ----------- | ----------------------- | +| **SM** | 400px | 80vh | Confirmations, alerts | +| **MD** | 560px | 80vh | Forms, standard content | +| **LG** | 720px | 85vh | Complex forms | +| **XL** | 900px | 90vh | Data-heavy content | +| **Full** | 100% - 48px | 100% - 48px | Wizards, editors | #### Specifications -| Property | Value | -|----------|-------| -| Border Radius | `--radius-xl` (12px) | -| Padding (Header) | `--space-200` to `--space-300` | -| Padding (Body) | `--space-300` | -| Padding (Footer) | `--space-200` to `--space-300` | -| Shadow | `--shadow-lg` | -| Overlay Background | `rgba(0, 0, 0, 0.5)` | +| Property | Value | +| ------------------ | -------------------------- | +| Border Radius | --radius-xl (12px) | +| Padding (Header) | --space-200 to --space-300 | +| Padding (Body) | --space-300 | +| Padding (Footer) | --space-200 to --space-300 | +| Shadow | --shadow-lg | +| Overlay Background | rgba(0, 0, 0, 0.5) | #### Structure @@ -415,16 +586,16 @@ All spacing is based on an **8px grid system**. #### Specifications -| Property | Value | -|----------|-------| -| Trigger Height | 40px (matches input) | -| Trigger Padding | 12px horizontal | -| Trigger Border Radius | `--radius-sm` (4px) | -| Dropdown Border Radius | `--radius-md` (6px) | -| Dropdown Shadow | `--shadow-md` | -| Item Height | 36px | -| Item Padding | 12px horizontal | -| Max Dropdown Height | 320px (scrollable) | +| Property | Value | +| ---------------------- | -------------------- | +| Trigger Height | 40px (matches input) | +| Trigger Padding | 12px horizontal | +| Trigger Border Radius | --radius-sm (4px) | +| Dropdown Border Radius | --radius-md (6px) | +| Dropdown Shadow | --shadow-md | +| Item Height | 36px | +| Item Padding | 12px horizontal | +| Max Dropdown Height | 320px (scrollable) | --- @@ -432,28 +603,28 @@ All spacing is based on an **8px grid system**. #### Specifications -| Property | Value | -|----------|-------| -| Header Height | 44px | -| Row Height | 52px (default), 40px (compact), 64px (comfortable) | -| Cell Padding | 16px horizontal, centered vertical | -| Border | 1px solid `--border-default` | -| Header Background | `--surface-sunken` | -| Row Background | `--surface-default` | -| Zebra Stripe | Alternating `--surface-default` / `--surface-sunken` | -| Hover Row | `--color-grey-100` | -| Selected Row | `--color-primary-light` | +| Property | Value | +| ----------------- | -------------------------------------------------- | +| Header Height | 44px | +| Row Height | 52px (default), 40px (compact), 64px (comfortable) | +| Cell Padding | 16px horizontal, centered vertical | +| Border | 1px solid --border-default | +| Header Background | --surface-sunken | +| Row Background | --surface-default | +| Zebra Stripe | Alternating --surface-default / --surface-sunken | +| Hover Row | --color-grey-100 | +| Selected Row | --color-primary-light | #### Column Widths | Content Type | Min Width | Recommended | -|--------------|-----------|-------------| -| Checkbox | 48px | 48px | -| Avatar | 56px | 56px | -| Short text | 100px | 150px | -| Medium text | 150px | 200px | -| Long text | 200px | 300px | -| Actions | 80px | 120px | +| ------------ | --------- | ----------- | +| Checkbox | 48px | 48px | +| Avatar | 56px | 56px | +| Short text | 100px | 150px | +| Medium text | 150px | 200px | +| Long text | 200px | 300px | +| Actions | 80px | 120px | --- @@ -461,22 +632,22 @@ All spacing is based on an **8px grid system**. #### Sizes -| Size | Height | Padding (H) | Font Size | Border Radius | -|------|--------|-------------|-----------|---------------| -| **SM** | 20px | 6px | 11px | `--radius-full` | -| **MD** | 24px | 8px | 12px | `--radius-full` | -| **LG** | 28px | 10px | 13px | `--radius-full` | +| Size | Height | Padding (H) | Font Size | Border Radius | +| ------ | ------ | ----------- | --------- | ------------- | +| **SM** | 20px | 6px | 11px | --radius-full | +| **MD** | 24px | 8px | 12px | --radius-full | +| **LG** | 28px | 10px | 13px | --radius-full | #### Variants -| Variant | Background | Text | -|---------|------------|------| -| **Default** | `--color-grey-200` | `--text-primary` | -| **Primary** | `--color-primary-light` | `--color-primary-default` | -| **Success** | `--color-success-light` | `--color-success-default` | -| **Warning** | `--color-warning-light` | `--color-warning-dark` | -| **Error** | `--color-negative-light` | `--color-negative-default` | -| **Info** | `--color-info-light` | `--color-info-default` | +| Variant | Background | Text | +| ----------- | ---------------------- | ------------------------ | +| **Default** | --color-grey-200 | --text-primary | +| **Primary** | --color-primary-light | --color-primary-default | +| **Success** | --color-success-light | --color-success-default | +| **Warning** | --color-warning-light | --color-warning-dark | +| **Error** | --color-negative-light | --color-negative-default | +| **Info** | --color-info-light | --color-info-default | --- @@ -484,23 +655,23 @@ All spacing is based on an **8px grid system**. #### Sizes -| Size | Dimensions | Font Size | Usage | -|------|------------|-----------|-------| -| **XS** | 24px | 10px | Inline mentions | -| **SM** | 32px | 12px | Lists, compact UI | -| **MD** | 40px | 14px | Default, cards | -| **LG** | 56px | 20px | Profile headers | -| **XL** | 80px | 28px | Profile pages | -| **2XL** | 120px | 40px | Account settings | +| Size | Dimensions | Font Size | Usage | +| ------- | ---------- | --------- | ----------------- | +| **XS** | 24px | 10px | Inline mentions | +| **SM** | 32px | 12px | Lists, compact UI | +| **MD** | 40px | 14px | Default, cards | +| **LG** | 56px | 20px | Profile headers | +| **XL** | 80px | 28px | Profile pages | +| **2XL** | 120px | 40px | Account settings | #### Specifications -| Property | Value | -|----------|-------| -| Border Radius | `--radius-full` (circle) | -| Background (fallback) | `--color-grey-300` | -| Text Color (initials) | `--text-primary` | -| Border (optional) | 2px solid `--surface-default` | +| Property | Value | +| --------------------- | --------------------------- | +| Border Radius | --radius-full (circle) | +| Background (fallback) | --color-grey-300 | +| Text Color (initials) | --text-primary | +| Border (optional) | 2px solid --surface-default | --- @@ -508,24 +679,24 @@ All spacing is based on an **8px grid system**. #### Specifications -| Property | Value | -|----------|-------| -| Min Width | 300px | -| Max Width | 500px | -| Padding | 12px 16px | -| Border Radius | `--radius-md` (6px) | -| Shadow | `--shadow-lg` | -| Position | Bottom-left, 24px from edges | -| Duration | 4000ms (default), 8000ms (with action) | +| Property | Value | +| ------------- | -------------------------------------- | +| Min Width | 300px | +| Max Width | 500px | +| Padding | 12px 16px | +| Border Radius | --radius-md (6px) | +| Shadow | --shadow-lg | +| Position | Bottom-left, 24px from edges | +| Duration | 4000ms (default), 8000ms (with action) | #### Variants -| Variant | Icon | Left Border | -|---------|------|-------------| -| **Default** | Info | None | -| **Success** | Check | `--color-success-default` | -| **Warning** | Warning | `--color-warning-default` | -| **Error** | Error | `--color-negative-default` | +| Variant | Icon | Left Border | +| ----------- | ------- | ------------------------ | +| **Default** | Info | None | +| **Success** | Check | --color-success-default | +| **Warning** | Warning | --color-warning-default | +| **Error** | Error | --color-negative-default | --- @@ -533,16 +704,16 @@ All spacing is based on an **8px grid system**. #### Specifications -| Property | Value | -|----------|-------| -| Max Width | 240px | -| Padding | 8px 12px | -| Border Radius | `--radius-sm` (4px) | -| Background | `--color-grey-900` | -| Text Color | `--text-inverse` | -| Font Size | 12px | -| Shadow | `--shadow-md` | -| Arrow Size | 6px | +| Property | Value | +| ------------- | ----------------- | +| Max Width | 240px | +| Padding | 8px 12px | +| Border Radius | --radius-sm (4px) | +| Background | --color-grey-900 | +| Text Color | --text-inverse | +| Font Size | 12px | +| Shadow | --shadow-md | +| Arrow Size | 6px | --- @@ -557,26 +728,26 @@ All spacing is based on an **8px grid system**. ### Sizes -| Token | Size | Usage | -|-------|------|-------| -| `--icon-xs` | 12px | Inline with small text | -| `--icon-sm` | 16px | Buttons, form fields | -| `--icon-md` | 20px | Navigation, default | -| `--icon-lg` | 24px | Headers, emphasis | -| `--icon-xl` | 32px | Empty states | -| `--icon-2xl` | 48px | Illustrations | +| Token | Size | Usage | +| ---------- | ---- | ---------------------- | +| --icon-xs | 12px | Inline with small text | +| --icon-sm | 16px | Buttons, form fields | +| --icon-md | 20px | Navigation, default | +| --icon-lg | 24px | Headers, emphasis | +| --icon-xl | 32px | Empty states | +| --icon-2xl | 48px | Illustrations | ### Icon Colors -| Context | Color Token | -|---------|-------------| -| Default | `--text-secondary` | -| Interactive | `--text-primary` | -| Primary action | `--color-primary-default` | -| Success | `--color-success-default` | -| Warning | `--color-warning-default` | -| Error | `--color-negative-default` | -| Disabled | `--text-disabled` | +| Context | Color Token | +| -------------- | ------------------------ | +| Default | --text-secondary | +| Interactive | --text-primary | +| Primary action | --color-primary-default | +| Success | --color-success-default | +| Warning | --color-warning-default | +| Error | --color-negative-default | +| Disabled | --text-disabled | --- @@ -584,24 +755,24 @@ All spacing is based on an **8px grid system**. ### Breakpoints -| Token | Width | Columns | Margin | Gutter | -|-------|-------|---------|--------|--------| -| `--breakpoint-xs` | 0-479px | 4 | 16px | 16px | -| `--breakpoint-sm` | 480-767px | 8 | 16px | 16px | -| `--breakpoint-md` | 768-1023px | 12 | 24px | 24px | -| `--breakpoint-lg` | 1024-1279px | 12 | 32px | 24px | -| `--breakpoint-xl` | 1280-1439px | 12 | 40px | 24px | -| `--breakpoint-2xl` | 1440px+ | 12 | auto | 24px | +| Token | Width | Columns | Margin | Gutter | +| ---------------- | ----------- | ------- | ------ | ------ | +| --breakpoint-xs | 0-479px | 4 | 16px | 16px | +| --breakpoint-sm | 480-767px | 8 | 16px | 16px | +| --breakpoint-md | 768-1023px | 12 | 24px | 24px | +| --breakpoint-lg | 1024-1279px | 12 | 32px | 24px | +| --breakpoint-xl | 1280-1439px | 12 | 40px | 24px | +| --breakpoint-2xl | 1440px+ | 12 | auto | 24px | ### Container Widths -| Token | Max Width | Usage | -|-------|-----------|-------| -| `--container-sm` | 640px | Narrow content | -| `--container-md` | 768px | Forms, articles | -| `--container-lg` | 1024px | Standard content | -| `--container-xl` | 1280px | Wide content | -| `--container-full` | 100% | Full width | +| Token | Max Width | Usage | +| ---------------- | --------- | ---------------- | +| --container-sm | 640px | Narrow content | +| --container-md | 768px | Forms, articles | +| --container-lg | 1024px | Standard content | +| --container-xl | 1280px | Wide content | +| --container-full | 100% | Full width | ### Layout Patterns @@ -616,12 +787,12 @@ All spacing is based on an **8px grid system**. └────────────┴────────────────────────────┘ ``` -| Element | Width | -|---------|-------| -| Sidebar (collapsed) | 64px | -| Sidebar (expanded) | 240px | -| Secondary panel | 320px - 400px | -| Main content | Remaining space | +| Element | Width | +| ------------------- | --------------- | +| Sidebar (collapsed) | 64px | +| Sidebar (expanded) | 240px | +| Secondary panel | 320px - 400px | +| Main content | Remaining space | --- @@ -632,71 +803,156 @@ All spacing is based on an **8px grid system**. ```css :root { /* Colors - Brand */ - --color-brand-primary: #08A742; + --color-brand-primary: #ea580c; --color-brand-dark: #404346; - --color-brand-white: #FFFFFF; + --color-brand-white: #ffffff; /* Colors - Primary */ - --color-primary-default: #08A742; - --color-primary-hover: #079239; - --color-primary-active: #068030; - --color-primary-light: #E8F5EC; + --color-primary-default: #ea580c; + --color-primary-hover: #c2410c; + --color-primary-active: #9a3412; + --color-primary-light: #fff7ed; /* Colors - Negative */ - --color-negative-default: #DC3545; - --color-negative-hover: #C82333; - --color-negative-light: #FDEAEA; + --color-negative-default: #dc3545; + --color-negative-hover: #c82333; + --color-negative-light: #fdeaea; /* Colors - Warning */ - --color-warning-default: #FFC107; - --color-warning-dark: #E0A800; - --color-warning-light: #FFF8E1; + --color-warning-default: #ffc107; + --color-warning-dark: #e0a800; + --color-warning-light: #fff8e1; /* Colors - Success */ - --color-success-default: #28A745; - --color-success-light: #E8F5E9; + --color-success-default: #28a745; + --color-success-light: #e8f5e9; /* Colors - Info */ - --color-info-default: #17A2B8; - --color-info-light: #E3F2FD; + --color-info-default: #17a2b8; + --color-info-light: #e3f2fd; /* Colors - Grey Scale */ - --color-grey-50: #FAFAFA; - --color-grey-100: #F5F5F5; - --color-grey-200: #EEEEEE; - --color-grey-300: #E0E0E0; - --color-grey-400: #BDBDBD; - --color-grey-500: #9E9E9E; + --color-grey-50: #fafafa; + --color-grey-100: #f5f5f5; + --color-grey-200: #eeeeee; + --color-grey-300: #e0e0e0; + --color-grey-400: #bdbdbd; + --color-grey-500: #9e9e9e; --color-grey-600: #757575; --color-grey-700: #616161; --color-grey-800: #424242; --color-grey-900: #212121; /* Surface */ - --surface-default: #FFFFFF; - --surface-raised: #FFFFFF; - --surface-sunken: #F5F5F5; - --surface-overlay: #FFFFFF; + --surface-default: #ffffff; + --surface-raised: #ffffff; + --surface-sunken: #f5f5f5; + --surface-overlay: #ffffff; /* Text */ --text-primary: #212121; --text-secondary: #616161; - --text-tertiary: #9E9E9E; - --text-disabled: #BDBDBD; - --text-inverse: #FFFFFF; - --text-link: #08A742; - --text-error: #DC3545; + --text-tertiary: #9e9e9e; + --text-disabled: #bdbdbd; + --text-inverse: #ffffff; + --text-link: #ea580c; + --text-error: #dc3545; /* Border */ - --border-default: #E0E0E0; - --border-strong: #BDBDBD; - --border-focus: #08A742; - --border-error: #DC3545; + --border-default: #e0e0e0; + --border-strong: #bdbdbd; + --border-focus: #ea580c; + --border-error: #dc3545; + + /* Pipeline Stages */ + --stage-new: #ea580c; + --stage-contacted: #f97316; + --stage-qualified: #3b82f6; + --stage-proposal: #8b5cf6; + --stage-negotiation: #f59e0b; + --stage-won: #22c55e; + --stage-lost: #ef4444; + + /* Pipeline Stage Backgrounds */ + --stage-new-bg: #fff7ed; + --stage-contacted-bg: #ffedd5; + --stage-qualified-bg: #eff6ff; + --stage-proposal-bg: #f5f3ff; + --stage-negotiation-bg: #fffbeb; + --stage-won-bg: #f0fdf4; + --stage-lost-bg: #fef2f2; + + /* Activity Types */ + --activity-call: #22c55e; + --activity-email: #3b82f6; + --activity-meeting: #8b5cf6; + --activity-task: #f59e0b; + --activity-note: #6b7280; + --activity-deadline: #ef4444; + + /* Lead Temperature */ + --lead-hot: #ef4444; + --lead-warm: #f59e0b; + --lead-cold: #6b7280; + + /* Lead Temperature Backgrounds */ + --lead-hot-bg: #fef2f2; + --lead-warm-bg: #fffbeb; + --lead-cold-bg: #f3f4f6; + + /* Priority */ + --priority-urgent: #dc2626; + --priority-high: #f97316; + --priority-medium: #fbbf24; + --priority-low: #22c55e; + --priority-none: #9ca3af; + + /* Deal Probability */ + --probability-high: #22c55e; + --probability-mid: #f59e0b; + --probability-low: #ef4444; + + /* Task Status */ + --task-overdue: #ef4444; + --task-due-today: #f59e0b; + --task-upcoming: #3b82f6; + --task-completed: #22c55e; + --task-cancelled: #9ca3af; + + /* Task Status Backgrounds */ + --task-overdue-bg: #fef2f2; + --task-due-today-bg: #fffbeb; + --task-upcoming-bg: #eff6ff; + --task-completed-bg: #f0fdf4; + --task-cancelled-bg: #f3f4f6; + + /* Charts - Sequential */ + --chart-1: #ea580c; + --chart-2: #f97316; + --chart-3: #fb923c; + --chart-4: #fdba74; + --chart-5: #fed7aa; + + /* Charts - Categorical */ + --cat-1: #ea580c; + --cat-2: #3b82f6; + --cat-3: #22c55e; + --cat-4: #8b5cf6; + --cat-5: #ec4899; + --cat-6: #14b8a6; + + /* Progress */ + --progress-default: #ea580c; + --progress-success: #22c55e; + --progress-warning: #f59e0b; + --progress-danger: #ef4444; + --progress-bg: #e5e7eb; /* Typography */ - --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; - --font-family-mono: 'SF Mono', 'Fira Code', Consolas, monospace; - + --font-family-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + sans-serif; + --font-family-mono: "Geist Mono", "SF Mono", "Fira Code", Consolas, monospace; + --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; @@ -714,7 +970,9 @@ All spacing is based on an **8px grid system**. --space-400: 32px; --space-500: 40px; --space-600: 48px; + --space-700: 56px; --space-800: 64px; + --space-900: 72px; --space-1000: 80px; /* Border Radius */ @@ -729,11 +987,11 @@ All spacing is based on an **8px grid system**. /* Shadows */ --shadow-none: none; - --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); - --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); - --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05); - --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05); - --shadow-xl: 0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04); + --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05); + --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05); + --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); /* Focus Ring */ --focus-ring: 0 0 0 2px var(--surface-default), 0 0 0 4px var(--color-primary-default); @@ -777,28 +1035,28 @@ All spacing is based on an **8px grid system**. /* Dark Mode Override */ [data-theme="dark"] { - --surface-default: #1E1E1E; + --surface-default: #1e1e1e; --surface-raised: #252525; --surface-sunken: #141414; - --surface-overlay: #2D2D2D; + --surface-overlay: #2d2d2d; - --text-primary: #FFFFFF; - --text-secondary: #B0B0B0; + --text-primary: #ffffff; + --text-secondary: #b0b0b0; --text-tertiary: #757575; --text-disabled: #525252; --text-inverse: #212121; - --text-link: #4ADE80; - --text-error: #F87171; + --text-link: #fb923c; + --text-error: #f87171; - --border-default: #3D3D3D; + --border-default: #3d3d3d; --border-strong: #525252; - --border-focus: #4ADE80; - --border-error: #F87171; + --border-focus: #fb923c; + --border-error: #f87171; - --color-primary-default: #4ADE80; - --color-primary-hover: #22C55E; - --color-primary-active: #16A34A; - --color-primary-light: #14532D; + --color-primary-default: #fb923c; + --color-primary-hover: #fdba74; + --color-primary-active: #f97316; + --color-primary-light: #431407; } ``` @@ -806,10 +1064,12 @@ All spacing is based on an **8px grid system**. ## Changelog -| Version | Date | Changes | -|---------|------|---------| -| 1.0 | Dec 2024 | Initial release | +| Version | Date | Changes | +| ------- | -------- | ---------------------------------------------------------------------- | +| 1.2 | Dec 2024 | Fixed font import, added spacing tokens, fixed dark mode hover states | +| 1.1 | Dec 2024 | Orange primary color, CRM-specific tokens (pipeline, activities, etc.) | +| 1.0 | Dec 2024 | Initial release | --- -**Questions?** Contact the Design System team. \ No newline at end of file +**Questions?** Contact the Design System team. diff --git a/frontend/src/app.css b/frontend/src/app.css index fa924a6b..b36d96be 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -5,8 +5,9 @@ @custom-variant dark (&:is(.dark *)); /* ═══════════════════════════════════════════════════════════════════════════ - OBSIDIAN LUXE - Premium Dark-First CRM Design System - A sophisticated aesthetic with vivid accents and glass-morphism effects + BOTTLECRM DESIGN SYSTEM - Orange Primary + A modern CRM design system with warm orange accents and professional styling + Based on DESIGN_SYSTEM.md v1.2 ═══════════════════════════════════════════════════════════════════════════ */ :root { @@ -14,121 +15,249 @@ --radius: 0.625rem; /* ───────────────────────────────────────────────────────────────────────── - LIGHT MODE - Clean, airy with subtle warmth + BRAND COLORS + ───────────────────────────────────────────────────────────────────────── */ + --color-brand-primary: #EA580C; + --color-brand-dark: #404346; + --color-brand-white: #FFFFFF; + + /* ───────────────────────────────────────────────────────────────────────── + LIGHT MODE - Clean, professional with warm orange accents ───────────────────────────────────────────────────────────────────────── */ /* Core surfaces */ - --background: oklch(0.985 0.002 250); + --background: oklch(0.985 0.002 60); --foreground: oklch(0.15 0.02 260); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0.02 260); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0.02 260); - /* Primary - Deep teal */ - --primary: oklch(0.55 0.15 195); + /* Primary - Orange */ + --primary: oklch(0.58 0.2 30); --primary-foreground: oklch(0.98 0 0); /* Secondary */ - --secondary: oklch(0.96 0.01 250); + --secondary: oklch(0.96 0.01 60); --secondary-foreground: oklch(0.25 0.02 260); /* Muted */ - --muted: oklch(0.96 0.005 250); + --muted: oklch(0.96 0.005 60); --muted-foreground: oklch(0.45 0.02 260); - /* Accent - Warm amber */ - --accent: oklch(0.96 0.02 80); - --accent-foreground: oklch(0.25 0.05 80); + /* Accent - Light orange tint */ + --accent: oklch(0.98 0.02 60); + --accent-foreground: oklch(0.25 0.05 30); /* Destructive */ --destructive: oklch(0.55 0.22 25); /* Borders & inputs */ - --border: oklch(0.91 0.005 250); - --input: oklch(0.91 0.005 250); - --ring: oklch(0.55 0.15 195); + --border: oklch(0.91 0.005 60); + --input: oklch(0.91 0.005 60); + --ring: oklch(0.58 0.2 30); - /* Chart colors - Vibrant palette */ - --chart-1: oklch(0.65 0.18 195); - --chart-2: oklch(0.7 0.16 145); - --chart-3: oklch(0.75 0.15 80); - --chart-4: oklch(0.6 0.2 280); - --chart-5: oklch(0.65 0.2 350); + /* Chart colors - Sequential (Orange-based) */ + --chart-1: #EA580C; + --chart-2: #F97316; + --chart-3: #FB923C; + --chart-4: #FDBA74; + --chart-5: #FED7AA; - /* Sidebar - HubSpot Style Light */ + /* Sidebar */ --sidebar: oklch(0.995 0 0); - --sidebar-foreground: oklch(0.25 0.02 250); - --sidebar-primary: oklch(0.62 0.2 25); + --sidebar-foreground: oklch(0.25 0.02 60); + --sidebar-primary: #EA580C; --sidebar-primary-foreground: oklch(0.995 0 0); - --sidebar-accent: oklch(0.97 0.005 250); - --sidebar-accent-foreground: oklch(0.2 0.02 250); - --sidebar-border: oklch(0.94 0.005 250); - --sidebar-ring: oklch(0.62 0.2 25); - - /* HubSpot Brand Colors */ - --hubspot-orange: #ff7a59; - --hubspot-orange-hover: #ff5c35; - --hubspot-orange-light: #fff1ee; - --hubspot-navy: #2d3e50; - --hubspot-navy-light: #516f90; - --hubspot-teal: #00bda5; - --hubspot-teal-light: #e5f8f6; + --sidebar-accent: oklch(0.97 0.01 60); + --sidebar-accent-foreground: oklch(0.2 0.02 60); + --sidebar-border: oklch(0.94 0.005 60); + --sidebar-ring: #EA580C; /* ───────────────────────────────────────────────────────────────────────── - SEMANTIC LAYERS + PRIMARY COLOR SCALE ───────────────────────────────────────────────────────────────────────── */ - - /* Background Layers */ - --bg-base: #fafbfc; - --bg-subtle: #f4f6f8; - --bg-muted: #eef1f4; - --bg-emphasis: #e4e8ec; - - /* Border Colors */ - --border-default: #e2e6eb; - --border-strong: #c9d0d8; - --border-subtle: #f0f2f5; - - /* Text Colors */ - --text-primary: #0f172a; - --text-secondary: #475569; - --text-tertiary: #94a3b8; - --text-inverse: #ffffff; - - /* Accent Colors - Teal/Cyan primary */ - --accent-primary: #0891b2; - --accent-primary-hover: #0e7490; - --accent-primary-subtle: #ecfeff; - - /* Secondary Accent - Warm Amber */ - --accent-secondary: #f59e0b; - --accent-secondary-hover: #d97706; - --accent-secondary-subtle: #fffbeb; - - /* Status Colors */ - --status-success: #059669; - --status-success-bg: #ecfdf5; - --status-warning: #d97706; - --status-warning-bg: #fffbeb; - --status-danger: #dc2626; - --status-danger-bg: #fef2f2; - --status-info: #0891b2; - --status-info-bg: #ecfeff; - - /* Stage Colors (Pipeline) - Refined palette */ - --stage-prospecting: #64748b; - --stage-qualified: #0891b2; - --stage-proposal: #8b5cf6; - --stage-negotiation: #f59e0b; - --stage-won: #059669; - --stage-lost: #dc2626; + --color-primary-default: #EA580C; + --color-primary-hover: #C2410C; + --color-primary-active: #9A3412; + --color-primary-light: #FFF7ED; /* ───────────────────────────────────────────────────────────────────────── - SPACING & LAYOUT + SEMANTIC COLORS ───────────────────────────────────────────────────────────────────────── */ + /* Negative/Error */ + --color-negative-default: #DC3545; + --color-negative-hover: #C82333; + --color-negative-light: #FDEAEA; + + /* Warning */ + --color-warning-default: #FFC107; + --color-warning-dark: #E0A800; + --color-warning-light: #FFF8E1; + + /* Success */ + --color-success-default: #28A745; + --color-success-light: #E8F5E9; + + /* Info */ + --color-info-default: #17A2B8; + --color-info-light: #E3F2FD; + + /* ───────────────────────────────────────────────────────────────────────── + GREY SCALE + ───────────────────────────────────────────────────────────────────────── */ + --color-grey-50: #FAFAFA; + --color-grey-100: #F5F5F5; + --color-grey-200: #EEEEEE; + --color-grey-300: #E0E0E0; + --color-grey-400: #BDBDBD; + --color-grey-500: #9E9E9E; + --color-grey-600: #757575; + --color-grey-700: #616161; + --color-grey-800: #424242; + --color-grey-900: #212121; + + /* ───────────────────────────────────────────────────────────────────────── + SURFACE COLORS + ───────────────────────────────────────────────────────────────────────── */ + --surface-default: #FFFFFF; + --surface-raised: #FFFFFF; + --surface-sunken: #F5F5F5; + --surface-overlay: #FFFFFF; + + /* ───────────────────────────────────────────────────────────────────────── + TEXT COLORS + ───────────────────────────────────────────────────────────────────────── */ + --text-primary: #212121; + --text-secondary: #616161; + --text-tertiary: #9E9E9E; + --text-disabled: #BDBDBD; + --text-inverse: #FFFFFF; + --text-link: #EA580C; + --text-error: #DC3545; + + /* ───────────────────────────────────────────────────────────────────────── + BORDER COLORS + ───────────────────────────────────────────────────────────────────────── */ + --border-default: #E0E0E0; + --border-strong: #BDBDBD; + --border-focus: #EA580C; + --border-error: #DC3545; + + /* ───────────────────────────────────────────────────────────────────────── + PIPELINE STAGE COLORS + ───────────────────────────────────────────────────────────────────────── */ + --stage-new: #EA580C; + --stage-contacted: #F97316; + --stage-qualified: #3B82F6; + --stage-proposal: #8B5CF6; + --stage-negotiation: #F59E0B; + --stage-won: #22C55E; + --stage-lost: #EF4444; + + /* Pipeline Stage Backgrounds */ + --stage-new-bg: #FFF7ED; + --stage-contacted-bg: #FFEDD5; + --stage-qualified-bg: #EFF6FF; + --stage-proposal-bg: #F5F3FF; + --stage-negotiation-bg: #FFFBEB; + --stage-won-bg: #F0FDF4; + --stage-lost-bg: #FEF2F2; + + /* ───────────────────────────────────────────────────────────────────────── + ACTIVITY TYPE COLORS + ───────────────────────────────────────────────────────────────────────── */ + --activity-call: #22C55E; + --activity-email: #3B82F6; + --activity-meeting: #8B5CF6; + --activity-task: #F59E0B; + --activity-note: #6B7280; + --activity-deadline: #EF4444; + + /* ───────────────────────────────────────────────────────────────────────── + LEAD TEMPERATURE + ───────────────────────────────────────────────────────────────────────── */ + --lead-hot: #EF4444; + --lead-warm: #F59E0B; + --lead-cold: #6B7280; + + /* Lead Temperature Backgrounds */ + --lead-hot-bg: #FEF2F2; + --lead-warm-bg: #FFFBEB; + --lead-cold-bg: #F3F4F6; + + /* ───────────────────────────────────────────────────────────────────────── + PRIORITY LEVELS + ───────────────────────────────────────────────────────────────────────── */ + --priority-urgent: #DC2626; + --priority-high: #F97316; + --priority-medium: #FBBF24; + --priority-low: #22C55E; + --priority-none: #9CA3AF; + + /* ───────────────────────────────────────────────────────────────────────── + DEAL PROBABILITY + ───────────────────────────────────────────────────────────────────────── */ + --probability-high: #22C55E; + --probability-mid: #F59E0B; + --probability-low: #EF4444; + + /* ───────────────────────────────────────────────────────────────────────── + TASK STATUS + ───────────────────────────────────────────────────────────────────────── */ + --task-overdue: #EF4444; + --task-due-today: #F59E0B; + --task-upcoming: #3B82F6; + --task-completed: #22C55E; + --task-cancelled: #9CA3AF; + + /* Task Status Backgrounds */ + --task-overdue-bg: #FEF2F2; + --task-due-today-bg: #FFFBEB; + --task-upcoming-bg: #EFF6FF; + --task-completed-bg: #F0FDF4; + --task-cancelled-bg: #F3F4F6; + + /* ───────────────────────────────────────────────────────────────────────── + CHARTS - CATEGORICAL + ───────────────────────────────────────────────────────────────────────── */ + --cat-1: #EA580C; + --cat-2: #3B82F6; + --cat-3: #22C55E; + --cat-4: #8B5CF6; + --cat-5: #EC4899; + --cat-6: #14B8A6; + + /* ───────────────────────────────────────────────────────────────────────── + PROGRESS BAR + ───────────────────────────────────────────────────────────────────────── */ + --progress-default: #EA580C; + --progress-success: #22C55E; + --progress-warning: #F59E0B; + --progress-danger: #EF4444; + --progress-bg: #E5E7EB; + + /* ───────────────────────────────────────────────────────────────────────── + SPACING (8px Grid System) + ───────────────────────────────────────────────────────────────────────── */ --space-0: 0px; + --space-25: 2px; + --space-50: 4px; + --space-100: 8px; + --space-150: 12px; + --space-200: 16px; + --space-250: 20px; + --space-300: 24px; + --space-400: 32px; + --space-500: 40px; + --space-600: 48px; + --space-700: 56px; + --space-800: 64px; + --space-900: 72px; + --space-1000: 80px; + + /* Legacy spacing aliases */ --space-1: 4px; --space-2: 8px; --space-3: 12px; @@ -139,39 +268,80 @@ --space-10: 40px; --space-12: 48px; - /* Border Radius - Slightly larger for premium feel */ - --radius-sm: 6px; - --radius-md: 8px; - --radius-lg: 12px; - --radius-xl: 16px; - --radius-2xl: 20px; + /* ───────────────────────────────────────────────────────────────────────── + BORDER RADIUS + ───────────────────────────────────────────────────────────────────────── */ + --radius-none: 0px; + --radius-xs: 2px; + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 8px; + --radius-xl: 12px; + --radius-2xl: 16px; --radius-full: 9999px; - /* Z-Index Layers */ + /* ───────────────────────────────────────────────────────────────────────── + SHADOWS + ───────────────────────────────────────────────────────────────────────── */ + --shadow-none: none; + --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05); + --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05); + --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04); + + /* Focus Ring */ + --focus-ring: 0 0 0 2px var(--surface-default), 0 0 0 4px var(--color-primary-default); + + /* ───────────────────────────────────────────────────────────────────────── + ICON SIZES + ───────────────────────────────────────────────────────────────────────── */ + --icon-xs: 12px; + --icon-sm: 16px; + --icon-md: 20px; + --icon-lg: 24px; + --icon-xl: 32px; + --icon-2xl: 48px; + + /* ───────────────────────────────────────────────────────────────────────── + Z-INDEX LAYERS + ───────────────────────────────────────────────────────────────────────── */ --z-base: 0; + --z-raised: 10; + --z-dropdown: 100; + --z-sticky: 200; + --z-modal: 300; + --z-overlay: 400; + --z-toast: 500; --z-sidebar: 10; --z-drawer-backdrop: 40; --z-drawer: 50; - --z-dropdown: 60; - --z-modal: 70; - --z-toast: 80; --z-tooltip: 90; - /* Animation Timing - Refined easing */ + /* ───────────────────────────────────────────────────────────────────────── + TRANSITIONS + ───────────────────────────────────────────────────────────────────────── */ + --transition-fast: 100ms ease; + --transition-normal: 150ms ease; + --transition-slow: 300ms ease; + + /* Animation timing functions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6); - /* Animation Durations */ + /* Animation durations */ --duration-instant: 0ms; --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 350ms; --duration-slower: 500ms; - /* Layout Dimensions */ + /* ───────────────────────────────────────────────────────────────────────── + LAYOUT DIMENSIONS + ───────────────────────────────────────────────────────────────────────── */ --sidebar-width: 260px; --sidebar-width-collapsed: 72px; --drawer-width: 520px; @@ -179,116 +349,213 @@ --content-padding: 28px; --content-max-width: 1400px; - /* Typography */ - --font-sans: 'Plus Jakarta Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - --font-body: 'DM Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - --font-mono: 'JetBrains Mono', 'Fira Code', monospace; + /* Container Widths */ + --container-sm: 640px; + --container-md: 768px; + --container-lg: 1024px; + --container-xl: 1280px; + + /* Breakpoints */ + --breakpoint-xs: 0px; + --breakpoint-sm: 480px; + --breakpoint-md: 768px; + --breakpoint-lg: 1024px; + --breakpoint-xl: 1280px; + --breakpoint-2xl: 1440px; + + /* ───────────────────────────────────────────────────────────────────────── + TYPOGRAPHY + ───────────────────────────────────────────────────────────────────────── */ + --font-family-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + --font-family-mono: "Geist Mono", "SF Mono", "Fira Code", Consolas, monospace; + --font-sans: var(--font-family-sans); + --font-body: var(--font-family-sans); + --font-mono: var(--font-family-mono); + + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; /* Glass morphism properties */ --glass-bg: rgba(255, 255, 255, 0.8); --glass-border: rgba(255, 255, 255, 0.3); --glass-blur: 12px; + + /* Legacy semantic aliases */ + --bg-base: #FAFAFA; + --bg-subtle: #F5F5F5; + --bg-muted: #EEEEEE; + --bg-emphasis: #E0E0E0; + --accent-primary: #EA580C; + --accent-primary-hover: #C2410C; + --accent-primary-subtle: #FFF7ED; + --accent-secondary: #F59E0B; + --accent-secondary-hover: #D97706; + --accent-secondary-subtle: #FFFBEB; + --status-success: #28A745; + --status-success-bg: #E8F5E9; + --status-warning: #FFC107; + --status-warning-bg: #FFF8E1; + --status-danger: #DC3545; + --status-danger-bg: #FDEAEA; + --status-info: #17A2B8; + --status-info-bg: #E3F2FD; } /* ═══════════════════════════════════════════════════════════════════════════ - DARK MODE - Obsidian Luxe - Deep, rich darks with vivid accent colors and subtle glow effects + DARK MODE + Deep, rich darks with vivid orange accent and subtle glow effects ═══════════════════════════════════════════════════════════════════════════ */ .dark { - /* Core surfaces - Deep obsidian with subtle blue undertone */ - --background: oklch(0.12 0.015 260); - --foreground: oklch(0.95 0.005 250); - --card: oklch(0.16 0.015 260); - --card-foreground: oklch(0.95 0.005 250); - --popover: oklch(0.18 0.018 260); - --popover-foreground: oklch(0.95 0.005 250); + /* Core surfaces - Deep with subtle warmth */ + --background: oklch(0.12 0.01 30); + --foreground: oklch(0.95 0.005 60); + --card: oklch(0.16 0.01 30); + --card-foreground: oklch(0.95 0.005 60); + --popover: oklch(0.18 0.012 30); + --popover-foreground: oklch(0.95 0.005 60); - /* Primary - Vivid cyan */ - --primary: oklch(0.75 0.16 195); - --primary-foreground: oklch(0.12 0.015 260); + /* Primary - Vivid orange */ + --primary: oklch(0.72 0.18 35); + --primary-foreground: oklch(0.12 0.01 30); /* Secondary */ - --secondary: oklch(0.22 0.015 260); - --secondary-foreground: oklch(0.92 0.005 250); + --secondary: oklch(0.22 0.01 30); + --secondary-foreground: oklch(0.92 0.005 60); /* Muted */ - --muted: oklch(0.22 0.012 260); - --muted-foreground: oklch(0.65 0.01 260); + --muted: oklch(0.22 0.008 30); + --muted-foreground: oklch(0.65 0.01 60); - /* Accent - Amber glow */ - --accent: oklch(0.25 0.04 80); - --accent-foreground: oklch(0.85 0.12 80); + /* Accent - Warm orange glow */ + --accent: oklch(0.25 0.04 35); + --accent-foreground: oklch(0.85 0.12 35); /* Destructive */ --destructive: oklch(0.65 0.2 25); - /* Borders & inputs - Subtle with glow potential */ - --border: oklch(0.28 0.015 260); - --input: oklch(0.24 0.015 260); - --ring: oklch(0.7 0.14 195); + /* Borders & inputs */ + --border: oklch(0.28 0.01 30); + --input: oklch(0.24 0.01 30); + --ring: oklch(0.7 0.16 35); - /* Chart colors - Vibrant neon-ish */ - --chart-1: oklch(0.75 0.18 195); - --chart-2: oklch(0.72 0.18 155); - --chart-3: oklch(0.78 0.15 85); - --chart-4: oklch(0.7 0.2 290); - --chart-5: oklch(0.72 0.2 10); + /* Chart colors - Vibrant */ + --chart-1: #FB923C; + --chart-2: #FDBA74; + --chart-3: #FED7AA; + --chart-4: #FFEDD5; + --chart-5: #FFF7ED; - /* Sidebar - HubSpot Style Dark */ - --sidebar: oklch(0.16 0.015 250); - --sidebar-foreground: oklch(0.92 0.005 250); - --sidebar-primary: oklch(0.7 0.18 25); - --sidebar-primary-foreground: oklch(0.12 0.015 260); - --sidebar-accent: oklch(0.22 0.02 250); - --sidebar-accent-foreground: oklch(0.92 0.005 250); - --sidebar-border: oklch(0.28 0.015 250); - --sidebar-ring: oklch(0.7 0.18 25); + /* Sidebar */ + --sidebar: oklch(0.16 0.01 30); + --sidebar-foreground: oklch(0.92 0.005 60); + --sidebar-primary: #FB923C; + --sidebar-primary-foreground: oklch(0.12 0.01 30); + --sidebar-accent: oklch(0.22 0.015 30); + --sidebar-accent-foreground: oklch(0.92 0.005 60); + --sidebar-border: oklch(0.28 0.01 30); + --sidebar-ring: #FB923C; - /* Background Layers - Obsidian depth */ + /* Primary color scale - Dark mode */ + --color-primary-default: #FB923C; + --color-primary-hover: #FDBA74; + --color-primary-active: #F97316; + --color-primary-light: #431407; + + /* Surface Colors - Dark mode */ + --surface-default: #1E1E1E; + --surface-raised: #252525; + --surface-sunken: #141414; + --surface-overlay: #2D2D2D; + + /* Text Colors - Dark mode */ + --text-primary: #FFFFFF; + --text-secondary: #B0B0B0; + --text-tertiary: #757575; + --text-disabled: #525252; + --text-inverse: #212121; + --text-link: #FB923C; + --text-error: #F87171; + + /* Border Colors - Dark mode */ + --border-default: #3D3D3D; + --border-strong: #525252; + --border-focus: #FB923C; + --border-error: #F87171; + + /* Background Layers - Dark */ --bg-base: #0c0d12; --bg-subtle: #121318; --bg-muted: #181a21; --bg-emphasis: #1f222b; - /* Border Colors */ - --border-default: #262a36; - --border-strong: #363b4a; - --border-subtle: #1c1f28; - - /* Text Colors */ - --text-primary: #f1f5f9; - --text-secondary: #94a3b8; - --text-tertiary: #64748b; - --text-inverse: #0c0d12; - - /* Accent Colors - Cyan glow */ - --accent-primary: #22d3ee; - --accent-primary-hover: #06b6d4; - --accent-primary-subtle: rgba(34, 211, 238, 0.1); - - /* Secondary Accent - Warm Amber */ - --accent-secondary: #fbbf24; - --accent-secondary-hover: #f59e0b; + /* Accent Colors - Orange glow */ + --accent-primary: #FB923C; + --accent-primary-hover: #FDBA74; + --accent-primary-subtle: rgba(251, 146, 60, 0.1); + --accent-secondary: #FBBF24; + --accent-secondary-hover: #F59E0B; --accent-secondary-subtle: rgba(251, 191, 36, 0.1); /* Status Colors - Vivid in dark */ - --status-success: #34d399; + --status-success: #34D399; --status-success-bg: rgba(52, 211, 153, 0.12); - --status-warning: #fbbf24; + --status-warning: #FBBF24; --status-warning-bg: rgba(251, 191, 36, 0.12); - --status-danger: #f87171; + --status-danger: #F87171; --status-danger-bg: rgba(248, 113, 113, 0.12); - --status-info: #22d3ee; - --status-info-bg: rgba(34, 211, 238, 0.12); + --status-info: #38BDF8; + --status-info-bg: rgba(56, 189, 248, 0.12); - /* Stage Colors - Neon variants */ - --stage-prospecting: #94a3b8; - --stage-qualified: #22d3ee; - --stage-proposal: #a78bfa; - --stage-negotiation: #fbbf24; - --stage-won: #34d399; - --stage-lost: #f87171; + /* Semantic colors dark mode */ + --color-negative-default: #F87171; + --color-negative-hover: #FCA5A5; + --color-negative-light: rgba(248, 113, 113, 0.15); + --color-warning-default: #FBBF24; + --color-warning-dark: #FCD34D; + --color-warning-light: rgba(251, 191, 36, 0.15); + --color-success-default: #34D399; + --color-success-light: rgba(52, 211, 153, 0.15); + --color-info-default: #38BDF8; + --color-info-light: rgba(56, 189, 248, 0.15); + + /* Grey Scale - Dark mode */ + --color-grey-50: #18181B; + --color-grey-100: #27272A; + --color-grey-200: #3F3F46; + --color-grey-300: #52525B; + --color-grey-400: #71717A; + --color-grey-500: #A1A1AA; + --color-grey-600: #D4D4D8; + --color-grey-700: #E4E4E7; + --color-grey-800: #F4F4F5; + --color-grey-900: #FAFAFA; + + /* Stage Colors - Lighter variants for dark mode */ + --stage-new-bg: rgba(234, 88, 12, 0.15); + --stage-contacted-bg: rgba(249, 115, 22, 0.15); + --stage-qualified-bg: rgba(59, 130, 246, 0.15); + --stage-proposal-bg: rgba(139, 92, 246, 0.15); + --stage-negotiation-bg: rgba(245, 158, 11, 0.15); + --stage-won-bg: rgba(34, 197, 94, 0.15); + --stage-lost-bg: rgba(239, 68, 68, 0.15); + + /* Lead Temperature Backgrounds - Dark mode */ + --lead-hot-bg: rgba(239, 68, 68, 0.15); + --lead-warm-bg: rgba(245, 158, 11, 0.15); + --lead-cold-bg: rgba(107, 114, 128, 0.15); + + /* Task Status Backgrounds - Dark mode */ + --task-overdue-bg: rgba(239, 68, 68, 0.15); + --task-due-today-bg: rgba(245, 158, 11, 0.15); + --task-upcoming-bg: rgba(59, 130, 246, 0.15); + --task-completed-bg: rgba(34, 197, 94, 0.15); + --task-cancelled-bg: rgba(156, 163, 175, 0.15); + + /* Progress - Dark mode */ + --progress-bg: #3F3F46; /* Glass morphism - Dark variant */ --glass-bg: rgba(18, 19, 24, 0.8); @@ -301,10 +568,10 @@ ═══════════════════════════════════════════════════════════════════════════ */ @theme inline { - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); + --radius-sm: var(--radius-sm); + --radius-md: var(--radius-md); + --radius-lg: var(--radius-lg); + --radius-xl: var(--radius-xl); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); @@ -382,7 +649,7 @@ background-clip: content-box; } - /* Selection styling */ + /* Selection styling - Orange */ ::selection { background: var(--accent-primary); color: var(--text-inverse); @@ -402,7 +669,7 @@ border: 1px solid var(--glass-border); } - /* Glow effects */ + /* Glow effects - Orange accent */ .glow-sm { box-shadow: 0 0 15px -3px var(--accent-primary); } @@ -442,7 +709,7 @@ opacity: 0.04; } - /* Gradient mesh background */ + /* Gradient mesh background - Orange themed */ .gradient-mesh { background: radial-gradient(at 40% 20%, var(--accent-primary-subtle) 0px, transparent 50%), @@ -555,6 +822,41 @@ border-color: var(--accent-primary); box-shadow: 0 0 30px -10px var(--accent-primary); } + + /* Pipeline stage badge utilities */ + .badge-stage-new { background: var(--stage-new-bg); color: var(--stage-new); } + .badge-stage-contacted { background: var(--stage-contacted-bg); color: var(--stage-contacted); } + .badge-stage-qualified { background: var(--stage-qualified-bg); color: var(--stage-qualified); } + .badge-stage-proposal { background: var(--stage-proposal-bg); color: var(--stage-proposal); } + .badge-stage-negotiation { background: var(--stage-negotiation-bg); color: var(--stage-negotiation); } + .badge-stage-won { background: var(--stage-won-bg); color: var(--stage-won); } + .badge-stage-lost { background: var(--stage-lost-bg); color: var(--stage-lost); } + + /* Lead temperature badge utilities */ + .badge-lead-hot { background: var(--lead-hot-bg); color: var(--lead-hot); } + .badge-lead-warm { background: var(--lead-warm-bg); color: var(--lead-warm); } + .badge-lead-cold { background: var(--lead-cold-bg); color: var(--lead-cold); } + + /* Priority badge utilities */ + .badge-priority-urgent { background: rgba(220, 38, 38, 0.1); color: var(--priority-urgent); } + .badge-priority-high { background: rgba(249, 115, 22, 0.1); color: var(--priority-high); } + .badge-priority-medium { background: rgba(251, 191, 36, 0.1); color: var(--priority-medium); } + .badge-priority-low { background: rgba(34, 197, 94, 0.1); color: var(--priority-low); } + + /* Task status badge utilities */ + .badge-task-overdue { background: var(--task-overdue-bg); color: var(--task-overdue); } + .badge-task-due-today { background: var(--task-due-today-bg); color: var(--task-due-today); } + .badge-task-upcoming { background: var(--task-upcoming-bg); color: var(--task-upcoming); } + .badge-task-completed { background: var(--task-completed-bg); color: var(--task-completed); } + .badge-task-cancelled { background: var(--task-cancelled-bg); color: var(--task-cancelled); } + + /* Activity type badge utilities */ + .badge-activity-call { background: rgba(34, 197, 94, 0.1); color: var(--activity-call); } + .badge-activity-email { background: rgba(59, 130, 246, 0.1); color: var(--activity-email); } + .badge-activity-meeting { background: rgba(139, 92, 246, 0.1); color: var(--activity-meeting); } + .badge-activity-task { background: rgba(245, 158, 11, 0.1); color: var(--activity-task); } + .badge-activity-note { background: rgba(107, 114, 128, 0.1); color: var(--activity-note); } + .badge-activity-deadline { background: rgba(239, 68, 68, 0.1); color: var(--activity-deadline); } } /* ═══════════════════════════════════════════════════════════════════════════ @@ -585,7 +887,7 @@ input, textarea, select { } /* ═══════════════════════════════════════════════════════════════════════════ - HUBSPOT-STYLE SIDEBAR ENHANCEMENTS + SIDEBAR ENHANCEMENTS ═══════════════════════════════════════════════════════════════════════════ */ /* Sidebar base styling */ @@ -593,12 +895,12 @@ input, textarea, select { transition: width 0.2s ease, transform 0.2s ease; } -/* HubSpot-style menu button refinements */ +/* Menu button refinements */ [data-slot="sidebar-menu-button"] { letter-spacing: -0.01em; } -/* HubSpot-style active state with left accent bar */ +/* Active state with left accent bar */ [data-slot="sidebar-menu-button"][data-active="true"] { position: relative; } @@ -612,7 +914,7 @@ input, textarea, select { transform: none; } -/* Group label styling - HubSpot uppercase sections */ +/* Group label styling - uppercase sections */ [data-slot="sidebar-group-label"] { font-size: 10px; font-weight: 700; @@ -629,9 +931,9 @@ input, textarea, select { margin-top: 4px; } -/* Rail hover effect */ +/* Rail hover effect - Orange accent */ [data-slot="sidebar-rail"]:hover { - background: linear-gradient(90deg, transparent, rgba(255, 122, 89, 0.1)); + background: linear-gradient(90deg, transparent, rgba(234, 88, 12, 0.1)); } /* Collapsed state icon centering */ @@ -643,3 +945,35 @@ input, textarea, select { [data-slot="sidebar-footer"] { background: linear-gradient(180deg, transparent, var(--sidebar) 8px); } + +/* ═══════════════════════════════════════════════════════════════════════════ + KANBAN BOARD STYLES + ═══════════════════════════════════════════════════════════════════════════ */ + +/* Kanban column styles using pipeline colors */ +.kanban-column-new { border-top: 3px solid var(--stage-new); background: var(--stage-new-bg); } +.kanban-column-contacted { border-top: 3px solid var(--stage-contacted); background: var(--stage-contacted-bg); } +.kanban-column-qualified { border-top: 3px solid var(--stage-qualified); background: var(--stage-qualified-bg); } +.kanban-column-proposal { border-top: 3px solid var(--stage-proposal); background: var(--stage-proposal-bg); } +.kanban-column-negotiation { border-top: 3px solid var(--stage-negotiation); background: var(--stage-negotiation-bg); } +.kanban-column-won { border-top: 3px solid var(--stage-won); background: var(--stage-won-bg); } +.kanban-column-lost { border-top: 3px solid var(--stage-lost); background: var(--stage-lost-bg); } + +/* ═══════════════════════════════════════════════════════════════════════════ + DATA TABLE STYLES + ═══════════════════════════════════════════════════════════════════════════ */ + +/* Table row hover - subtle orange tint */ +.data-table-row:hover { + background: var(--color-primary-light); +} + +.dark .data-table-row:hover { + background: rgba(251, 146, 60, 0.05); +} + +/* Selected row */ +.data-table-row-selected { + background: var(--color-primary-light); + border-left: 3px solid var(--color-primary-default); +} diff --git a/frontend/src/app.html b/frontend/src/app.html index 487ac05d..232f23ee 100644 --- a/frontend/src/app.html +++ b/frontend/src/app.html @@ -1,11 +1,11 @@ - + diff --git a/frontend/src/lib/components/dashboard/ActivityFeed.svelte b/frontend/src/lib/components/dashboard/ActivityFeed.svelte index bd966959..6c3f4d70 100644 --- a/frontend/src/lib/components/dashboard/ActivityFeed.svelte +++ b/frontend/src/lib/components/dashboard/ActivityFeed.svelte @@ -35,43 +35,44 @@ let showAll = $state(false); + // Using design system activity tokens const actionConfig = /** @type {Record} */ ({ CREATE: { icon: Plus, - bg: 'bg-emerald-500/10 dark:bg-emerald-500/20', - text: 'text-emerald-600 dark:text-emerald-400' + bg: 'bg-[var(--color-success-light)] dark:bg-[var(--color-success-default)]/15', + text: 'text-[var(--color-success-default)]' }, UPDATE: { icon: Pencil, - bg: 'bg-cyan-500/10 dark:bg-cyan-500/20', - text: 'text-cyan-600 dark:text-cyan-400' + bg: 'bg-[var(--color-primary-light)] dark:bg-[var(--color-primary-default)]/15', + text: 'text-[var(--color-primary-default)]' }, DELETE: { icon: Trash2, - bg: 'bg-rose-500/10 dark:bg-rose-500/20', - text: 'text-rose-600 dark:text-rose-400' + bg: 'bg-[var(--color-negative-light)] dark:bg-[var(--color-negative-default)]/15', + text: 'text-[var(--color-negative-default)]' }, VIEW: { icon: Eye, - bg: 'bg-slate-500/10 dark:bg-slate-500/20', - text: 'text-slate-600 dark:text-slate-400' + bg: 'bg-[var(--surface-sunken)]', + text: 'text-[var(--text-secondary)]' }, COMMENT: { icon: MessageSquare, - bg: 'bg-violet-500/10 dark:bg-violet-500/20', - text: 'text-violet-600 dark:text-violet-400' + bg: 'bg-[var(--activity-note)]/10 dark:bg-[var(--activity-note)]/15', + text: 'text-[var(--activity-note)]' }, ASSIGN: { icon: UserPlus, - bg: 'bg-amber-500/10 dark:bg-amber-500/20', - text: 'text-amber-600 dark:text-amber-400' + bg: 'bg-[var(--activity-meeting)]/10 dark:bg-[var(--activity-meeting)]/15', + text: 'text-[var(--activity-meeting)]' } }); const defaultConfig = { icon: Activity, - bg: 'bg-muted', - text: 'text-muted-foreground' + bg: 'bg-[var(--surface-sunken)]', + text: 'text-[var(--text-tertiary)]' }; /** @@ -130,14 +131,14 @@ const groupedActivities = $derived(groupByDate(displayedActivities)); -
- -
+
+ +
-
- +
+
-

Recent Activity

+

Recent Activity

-
+
{#each filterButtons as btn} -
- - + CRM @@ -299,29 +294,30 @@ {#snippet child({ props })} - - {#if currentPath === item.href} -
- {/if} -
+
- {item.label} + {item.label} {/snippet} @@ -333,7 +329,9 @@ - + Sales @@ -354,40 +352,48 @@ {...props} isActive={hasActiveChild(item.children ?? [])} tooltipContent={item.label} - class="hubspot-menu-item group/item h-9 rounded-lg px-3 transition-all duration-150 + class="nav-item group/item h-9 rounded-lg px-2.5 transition-all duration-200 {hasActiveChild(item.children ?? []) - ? 'text-[#ff5c35] dark:text-[#ff7a59]' - : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-foreground'}" + ? 'text-[var(--color-primary-default)]' + : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/60 hover:text-sidebar-foreground'}" > -
-
- +
+
+
- {item.label} + {item.label}
{/snippet} - + {#each item.children as navChild} {#snippet child({ props })} - -
- -
- {navChild.label} + + + {navChild.label} {/snippet} @@ -405,7 +411,9 @@ - + Support @@ -415,28 +423,30 @@ {#snippet child({ props })} - {#if currentPath === item.href} -
- {/if} -
+
- {item.label} + {item.label} {/snippet} @@ -447,14 +457,14 @@ - + sidebar.toggle()} tooltipContent="Collapse sidebar" - class="h-8 rounded-lg px-3 text-sidebar-foreground/60 transition-all duration-150 hover:bg-sidebar-accent hover:text-sidebar-foreground" + class="text-sidebar-foreground/60 hover:bg-sidebar-accent hover:text-sidebar-foreground h-8 rounded-lg px-3 transition-all duration-150" > {#snippet child({ props })} + + + + navigateTo('/logout')} > @@ -626,46 +624,17 @@ diff --git a/frontend/src/lib/utils/table-helpers.js b/frontend/src/lib/utils/table-helpers.js index 9df89ab7..475886ba 100644 --- a/frontend/src/lib/utils/table-helpers.js +++ b/frontend/src/lib/utils/table-helpers.js @@ -18,7 +18,7 @@ */ export function getOptionStyle(value, options) { const option = options.find((o) => o.value === value); - return option?.color ?? 'bg-gray-100 text-gray-600'; + return option?.color ?? 'bg-[var(--surface-sunken)] text-[var(--text-secondary)]'; } /** @@ -119,231 +119,239 @@ export function getVisibleColumnCount(columns) { }; } -// Common status options for CRM entities +// Common status options for CRM entities - Using design system tokens // Must match Django LEAD_STATUS: assigned, in process, converted, recycled, closed export const leadStatusOptions = [ { value: 'ASSIGNED', label: 'Assigned', - color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' + color: 'bg-[var(--stage-new-bg)] text-[var(--stage-new)] dark:bg-[var(--stage-new)]/15' }, { value: 'IN_PROCESS', label: 'In Process', - color: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' + color: 'bg-[var(--stage-contacted-bg)] text-[var(--stage-contacted)] dark:bg-[var(--stage-contacted)]/15' }, { value: 'CONVERTED', label: 'Converted', - color: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400' + color: 'bg-[var(--stage-won-bg)] text-[var(--stage-won)] dark:bg-[var(--stage-won)]/15' }, { value: 'RECYCLED', label: 'Recycled', - color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400' + color: 'bg-[var(--color-primary-light)] text-[var(--color-primary-default)] dark:bg-[var(--color-primary-default)]/15' }, { value: 'CLOSED', label: 'Closed', - color: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400' + color: 'bg-[var(--surface-sunken)] text-[var(--text-secondary)]' } ]; +// Lead temperature ratings - using design system tokens export const leadRatingOptions = [ { value: 'HOT', label: 'Hot', - color: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' + color: 'bg-[var(--lead-hot-bg)] text-[var(--lead-hot)] dark:bg-[var(--lead-hot)]/15' }, { value: 'WARM', label: 'Warm', - color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400' + color: 'bg-[var(--lead-warm-bg)] text-[var(--lead-warm)] dark:bg-[var(--lead-warm)]/15' }, { value: 'COLD', label: 'Cold', - color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' + color: 'bg-[var(--lead-cold-bg)] text-[var(--lead-cold)] dark:bg-[var(--lead-cold)]/15' } ]; +// Priority options - using design system tokens export const priorityOptions = [ { value: 'URGENT', label: 'Urgent', - color: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' + color: 'bg-[var(--priority-urgent-bg)] text-[var(--priority-urgent)] dark:bg-[var(--priority-urgent)]/15' }, { value: 'HIGH', label: 'High', - color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400' + color: 'bg-[var(--priority-high-bg)] text-[var(--priority-high)] dark:bg-[var(--priority-high)]/15' }, { value: 'NORMAL', label: 'Normal', - color: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' + color: 'bg-[var(--priority-medium-bg)] text-[var(--priority-medium)] dark:bg-[var(--priority-medium)]/15' }, { value: 'MEDIUM', label: 'Medium', - color: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' + color: 'bg-[var(--priority-medium-bg)] text-[var(--priority-medium)] dark:bg-[var(--priority-medium)]/15' }, { value: 'LOW', label: 'Low', - color: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' + color: 'bg-[var(--priority-low-bg)] text-[var(--priority-low)] dark:bg-[var(--priority-low)]/15' } ]; +// Task status options - using design system tokens export const taskStatusOptions = [ { value: 'NOT STARTED', label: 'Not Started', - color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' + color: 'bg-[var(--task-upcoming-bg)] text-[var(--task-upcoming)] dark:bg-[var(--task-upcoming)]/15' }, { value: 'IN PROGRESS', label: 'In Progress', - color: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' + color: 'bg-[var(--task-due-today-bg)] text-[var(--task-due-today)] dark:bg-[var(--task-due-today)]/15' }, { value: 'PENDING', label: 'Pending', - color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400' + color: 'bg-[var(--color-primary-light)] text-[var(--color-primary-default)] dark:bg-[var(--color-primary-default)]/15' }, { value: 'COMPLETED', label: 'Completed', - color: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' + color: 'bg-[var(--task-completed-bg)] text-[var(--task-completed)] dark:bg-[var(--task-completed)]/15' }, { value: 'DEFERRED', label: 'Deferred', - color: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400' + color: 'bg-[var(--surface-sunken)] text-[var(--text-secondary)]' } ]; +// Case status options - using design system tokens export const caseStatusOptions = [ { value: 'New', label: 'New', - color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' + color: 'bg-[var(--stage-new-bg)] text-[var(--stage-new)] dark:bg-[var(--stage-new)]/15' }, { value: 'Assigned', label: 'Assigned', - color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' + color: 'bg-[var(--stage-qualified-bg)] text-[var(--stage-qualified)] dark:bg-[var(--stage-qualified)]/15' }, { value: 'Pending', label: 'Pending', - color: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' + color: 'bg-[var(--stage-negotiation-bg)] text-[var(--stage-negotiation)] dark:bg-[var(--stage-negotiation)]/15' }, { value: 'Closed', label: 'Closed', - color: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400' + color: 'bg-[var(--surface-sunken)] text-[var(--text-secondary)]' }, { value: 'Rejected', label: 'Rejected', - color: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' + color: 'bg-[var(--stage-lost-bg)] text-[var(--stage-lost)] dark:bg-[var(--stage-lost)]/15' }, { value: 'Duplicate', label: 'Duplicate', - color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400' + color: 'bg-[var(--color-primary-light)] text-[var(--color-primary-default)] dark:bg-[var(--color-primary-default)]/15' } ]; +// Case type options - using design system tokens export const caseTypeOptions = [ { value: 'Question', label: 'Question', - color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' + color: 'bg-[var(--stage-qualified-bg)] text-[var(--stage-qualified)] dark:bg-[var(--stage-qualified)]/15' }, { value: 'Incident', label: 'Incident', - color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400' + color: 'bg-[var(--color-primary-light)] text-[var(--color-primary-default)] dark:bg-[var(--color-primary-default)]/15' }, { value: 'Problem', label: 'Problem', - color: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' + color: 'bg-[var(--stage-lost-bg)] text-[var(--stage-lost)] dark:bg-[var(--stage-lost)]/15' } ]; +// Case priority options - using design system tokens export const casePriorityOptions = [ { value: 'Low', label: 'Low', - color: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' + color: 'bg-[var(--priority-low-bg)] text-[var(--priority-low)] dark:bg-[var(--priority-low)]/15' }, { value: 'Normal', label: 'Normal', - color: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' + color: 'bg-[var(--priority-medium-bg)] text-[var(--priority-medium)] dark:bg-[var(--priority-medium)]/15' }, { value: 'High', label: 'High', - color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400' + color: 'bg-[var(--priority-high-bg)] text-[var(--priority-high)] dark:bg-[var(--priority-high)]/15' }, { value: 'Urgent', label: 'Urgent', - color: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' + color: 'bg-[var(--priority-urgent-bg)] text-[var(--priority-urgent)] dark:bg-[var(--priority-urgent)]/15' } ]; +// Account status options - using design system tokens export const accountStatusOptions = [ { value: 'ACTIVE', label: 'Active', - color: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' + color: 'bg-[var(--color-success-light)] text-[var(--color-success-default)] dark:bg-[var(--color-success-default)]/15' }, { value: 'INACTIVE', label: 'Inactive', - color: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400' + color: 'bg-[var(--surface-sunken)] text-[var(--text-secondary)]' }, { value: 'PENDING', label: 'Pending', - color: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' + color: 'bg-[var(--stage-negotiation-bg)] text-[var(--stage-negotiation)] dark:bg-[var(--stage-negotiation)]/15' } ]; +// Opportunity stage options - using design system tokens export const opportunityStageOptions = [ { value: 'PROSPECTING', label: 'Prospecting', - color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' + color: 'bg-[var(--stage-new-bg)] text-[var(--stage-new)] dark:bg-[var(--stage-new)]/15' }, { value: 'QUALIFICATION', label: 'Qualification', - color: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400' + color: 'bg-[var(--stage-qualified-bg)] text-[var(--stage-qualified)] dark:bg-[var(--stage-qualified)]/15' }, { value: 'PROPOSAL', label: 'Proposal', - color: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' + color: 'bg-[var(--stage-proposal-bg)] text-[var(--stage-proposal)] dark:bg-[var(--stage-proposal)]/15' }, { value: 'NEGOTIATION', label: 'Negotiation', - color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400' + color: 'bg-[var(--stage-negotiation-bg)] text-[var(--stage-negotiation)] dark:bg-[var(--stage-negotiation)]/15' }, { value: 'CLOSED_WON', label: 'Closed Won', - color: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' + color: 'bg-[var(--stage-won-bg)] text-[var(--stage-won)] dark:bg-[var(--stage-won)]/15' }, { value: 'CLOSED_LOST', label: 'Closed Lost', - color: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' + color: 'bg-[var(--stage-lost-bg)] text-[var(--stage-lost)] dark:bg-[var(--stage-lost)]/15' } ]; diff --git a/frontend/src/routes/(app)/+page.svelte b/frontend/src/routes/(app)/+page.svelte index a242c913..a887be8f 100644 --- a/frontend/src/routes/(app)/+page.svelte +++ b/frontend/src/routes/(app)/+page.svelte @@ -1,5 +1,5 @@ @@ -74,15 +75,15 @@
-
+
-

Total Invoiced

-

+

Total Invoiced

+

{formatCurrency(Number(dashboard.summary?.total_invoiced || 0), 'USD')}

-
+
@@ -105,15 +106,15 @@
-
+
-

Total Collected

-

+

Total Collected

+

{formatCurrency(Number(dashboard.summary?.total_paid || 0), 'USD')}

-
+
@@ -134,15 +135,15 @@
-
+
-

Outstanding

-

+

Outstanding

+

{formatCurrency(Number(dashboard.summary?.total_due || 0), 'USD')}

-
+
@@ -163,15 +164,15 @@
-
+
-

Overdue ({dashboard.overdue?.count || 0})

-

+

Overdue ({dashboard.overdue?.count || 0})

+

{formatCurrency(Number(dashboard.overdue?.amount || 0), 'USD')}

-
+
-
-

Last 30 Days

+
+

Last 30 Days

- Revenue Collected - + Revenue Collected + {formatCurrency(Number(dashboard.recent_activity?.revenue_30d || 0), 'USD')}
- Invoices Created - {dashboard.recent_activity?.invoices_created_30d || 0} + Invoices Created + {dashboard.recent_activity?.invoices_created_30d || 0}
- Invoices Paid - {dashboard.recent_activity?.invoices_paid_30d || 0} + Invoices Paid + {dashboard.recent_activity?.invoices_paid_30d || 0}
- Total Invoiced - + Total Invoiced + {formatCurrency(Number(dashboard.recent_activity?.invoiced_30d || 0), 'USD')}
@@ -225,14 +226,14 @@
-
-

Invoice Status

+
+

Invoice Status

{#each Object.entries(dashboard.status_counts || {}) as [status, count]}
- {status.replace('_', ' ')} - {count} + {status.replace('_', ' ')} + {count}
{/each}
@@ -240,9 +241,9 @@
-
+
-

Revenue Over Time

+

Revenue Over Time

-
+
- + Mark Won {/if} @@ -1545,10 +1550,10 @@ {/snippet} diff --git a/frontend/src/routes/(app)/profile/+page.svelte b/frontend/src/routes/(app)/profile/+page.svelte index 91936749..9f38fe89 100644 --- a/frontend/src/routes/(app)/profile/+page.svelte +++ b/frontend/src/routes/(app)/profile/+page.svelte @@ -103,14 +103,14 @@
{#if form?.success} - +
- +
-

+

{form.message}

@@ -118,14 +118,14 @@ {/if} {#if form?.error} - +
- +
-

+

{form.error}

@@ -146,7 +146,7 @@ class="" /> {/if} - + {getInitials(data.user.name)} @@ -315,7 +315,7 @@
diff --git a/frontend/src/routes/(app)/settings/tags/+page.svelte b/frontend/src/routes/(app)/settings/tags/+page.svelte index 7783715e..9eba731d 100644 --- a/frontend/src/routes/(app)/settings/tags/+page.svelte +++ b/frontend/src/routes/(app)/settings/tags/+page.svelte @@ -157,7 +157,7 @@ Create and manage tags to organize contacts, companies, deals, and tickets.

- @@ -217,7 +217,7 @@

Tags help you organize and filter your CRM records. Create your first tag to get started.

- @@ -457,7 +457,7 @@ @@ -540,7 +540,7 @@ diff --git a/frontend/src/routes/(app)/tasks/+page.svelte b/frontend/src/routes/(app)/tasks/+page.svelte index cdaec100..2e266f95 100644 --- a/frontend/src/routes/(app)/tasks/+page.svelte +++ b/frontend/src/routes/(app)/tasks/+page.svelte @@ -56,22 +56,22 @@ let accountNameFromUrl = $state(''); let accountIdFromUrl = $state(''); - // Status and priority options with colors + // Status and priority options with colors - using design system tokens const statusOptions = [ { value: 'New', label: 'New', - color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' + color: 'bg-[var(--task-upcoming-bg)] text-[var(--task-upcoming)] dark:bg-[var(--task-upcoming)]/15' }, { value: 'In Progress', label: 'In Progress', - color: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400' + color: 'bg-[var(--task-due-today-bg)] text-[var(--task-due-today)] dark:bg-[var(--task-due-today)]/15' }, { value: 'Completed', label: 'Completed', - color: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400' + color: 'bg-[var(--task-completed-bg)] text-[var(--task-completed)] dark:bg-[var(--task-completed)]/15' } ]; @@ -79,17 +79,17 @@ { value: 'High', label: 'High', - color: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' + color: 'bg-[var(--priority-high-bg)] text-[var(--priority-high)] dark:bg-[var(--priority-high)]/15' }, { value: 'Medium', label: 'Medium', - color: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' + color: 'bg-[var(--priority-medium-bg)] text-[var(--priority-medium)] dark:bg-[var(--priority-medium)]/15' }, { value: 'Low', label: 'Low', - color: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400' + color: 'bg-[var(--priority-low-bg)] text-[var(--priority-low)] dark:bg-[var(--priority-low)]/15' } ]; @@ -550,7 +550,7 @@ */ function getOptionStyle(value, options) { const option = options.find((o) => o.value === value); - return option?.color ?? 'bg-gray-100 text-gray-600'; + return option?.color ?? 'bg-[var(--surface-sunken)] text-[var(--text-secondary)]'; } /** @@ -1088,14 +1088,14 @@ onclick={() => (statusChipFilter = 'ALL')} class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors {statusChipFilter === 'ALL' - ? 'bg-gray-900 text-white dark:bg-white dark:text-gray-900' - : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}" + ? 'bg-[var(--color-primary-default)] text-white' + : 'bg-[var(--surface-sunken)] text-[var(--text-secondary)] hover:bg-[var(--surface-raised)]'}" > All {tasks.length} @@ -1105,14 +1105,14 @@ onclick={() => (statusChipFilter = 'active')} class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors {statusChipFilter === 'active' - ? 'bg-blue-600 text-white dark:bg-blue-500' - : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}" + ? 'bg-[var(--task-due-today)] text-white' + : 'bg-[var(--surface-sunken)] text-[var(--text-secondary)] hover:bg-[var(--surface-raised)]'}" > Active {activeTaskCount} @@ -1122,14 +1122,14 @@ onclick={() => (statusChipFilter = 'completed')} class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors {statusChipFilter === 'completed' - ? 'bg-emerald-600 text-white dark:bg-emerald-500' - : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}" + ? 'bg-[var(--task-completed)] text-white' + : 'bg-[var(--surface-sunken)] text-[var(--text-secondary)] hover:bg-[var(--surface-raised)]'}" > Completed {completedCount} @@ -1180,7 +1180,7 @@ Filters {#if activeFiltersCount > 0} {activeFiltersCount} @@ -1196,7 +1196,7 @@ Columns {#if columnCounts.visible < columnCounts.total} {columnCounts.visible}/{columnCounts.total} @@ -1272,8 +1272,11 @@ > {#snippet emptyState()}
- -

No tasks found

+
+ +
+

No tasks found

+

Try adjusting your filters or create a new task

{/snippet} @@ -1516,23 +1519,23 @@ {#if selectedTask && !isCreateMode}
-
Details
+
Details
{#if selectedTask.createdBy} -
- +
+ Created by {selectedTask.createdBy.name}
{/if} {#if selectedTask.createdAt} -
- +
+ Created {formatRelativeDate(selectedTask.createdAt)}
{/if}
-
+
- +
Add New Member @@ -312,9 +312,9 @@
- +
Team Members @@ -345,7 +345,7 @@ {/if} {getInitials(user.name)} @@ -432,7 +432,7 @@