Color System Documentation

This document outlines the color system used in the project.

Overview

The color system is built on CSS custom properties (variables) that provide a flexible and maintainable way to manage colors across the application. This system allows for:

• Consistent theming across components
• Easy dark mode implementation
• Centralized color management
• Simple customization and updates

Defining Custom Color Variables with Real-time Examples

1. Linear Gradient Customization

:root {
  --linear-gradient: linear-gradient(to right, #5a81ea, #d56676);
}

/* Usage in components */
.gradient-text {
  background: var(--linear-gradient);
}

.gradient-background {
  background: var(--linear-gradient);
}

Color Variables

The project uses CSS custom properties (variables) for consistent theming and color management.

Base Colors

:root {
  --background: #f5f5f5;
  --foreground: #0b0809;
  --card: #ffffff;
  --card-foreground: #0b0809;
  --popover: #ffffff;
  --popover-foreground: #0b0809;
}

Theme Colors

:root {
  --primary: #6180e4;
  --primary-foreground: #e8e8e8;
  --secondary: #616a72;
  --secondary-foreground: #f5f6f6;
  --muted: #f5f4f4;
  --muted-foreground: #71717b;
  --accent: #f5f4f4;
  --accent-foreground: #1b1718;
  --destructive: #e7000b;
}

UI Element Colors

:root {
  --border: #e7e3e4;
  --input: #e7e3e4;
  --ring: #9f9fa9;
}

Sidebar Colors

:root {
  --sidebar: #f5f5f5;
  --sidebar-foreground: #0b0809;
  --sidebar-primary: #6180e4;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #f5f4f4;
  --sidebar-accent-foreground: #1b1718;
  --sidebar-border: #e7e3e4;
  --sidebar-ring: #71717b;
  --sidebar-menu-icon: #ededed;
}

Chart Colors

:root {
  --chart-1: #2563eb;
  --chart-2: #60a8fb;
  --chart-3: #3b86f7;
  --chart-4: #90c7fe;
  --chart-5: #bedcfe;
}

Dark Mode Colors

.dark {
  --background: #0b0809;
  --foreground: #fafafa;
  --card: #232323;
  --card-foreground: #e8e8e8;
  --border: #ffffff1a;
  --input: #ffffff26;
  --ring: #71717b;
}

Usage Guidelines

1. Color Application

• Use semantic color variables for consistent theming
• Apply colors through CSS custom properties
• Maintain color hierarchy in components

2. Dark Mode Support

• All colors have dark mode variants
• Use system color variables for automatic dark mode switching
• Test components in both light and dark modes

3. Accessibility

• Ensure sufficient color contrast
• Use semantic color variables for interactive elements
• Test with color blindness simulators

4. Customization

• Modify color variables in src/index.css
• Update both light and dark mode variants
• Maintain color relationships when customizing