modus-color-usage-react

Modus Color Usage in React + Vite

🎨 Design System Color Architecture

CRITICAL: This React + Vite application uses a 9-color design system that maps Figma variables to Modus's color system, available as Tailwind classes.

Color System: 9 Modus colors mapped to design system variables in src/index.css

❌ FORBIDDEN: Raw Modus CSS Variables

❌ Never Use Raw Modus Variables

// ❌ WRONG: Raw Modus CSS variables
style={{ backgroundColor: "var(--modus-wc-color-base-page)" }}
style={{ color: "var(--modus-wc-color-base-content)" }}
style={{ borderColor: "var(--modus-wc-color-base-200)" }}

// ❌ WRONG: Direct Modus variable usage
className="bg-[var(--modus-wc-color-base-page)]"
className="text-[var(--modus-wc-color-base-content)]"

❌ Never Use Hardcoded Colors

// ❌ WRONG: Hardcoded hex/RGB values
style={{ backgroundColor: "#ffffff" }}
style={{ color: "#000000" }}
style={{ borderColor: "#e5e5e5" }}

// ❌ WRONG: Hardcoded colors in Tailwind
className="bg-[#ffffff]"
className="text-[#000000]"

❌ Never Use Generic Tailwind Colors

// ❌ WRONG: Generic Tailwind color classes
className = "bg-blue-500";
className = "text-red-400";
className = "border-green-300";
className = "bg-gray-100";

✅ CORRECT: Design System Colors

✅ Use Design System Tailwind Classes

// ✅ CORRECT: Design system colors
className = "bg-background text-foreground";
className = "bg-card text-card-foreground";
className = "bg-primary text-primary-foreground";
className = "bg-secondary text-secondary-foreground";
className = "bg-muted text-muted-foreground";
className = "bg-accent text-accent-foreground";
className = "bg-destructive text-destructive-foreground";
className = "bg-warning text-warning-foreground";
className = "bg-success text-success-foreground";

✅ Available Design System Colors

// ✅ CORRECT: All available design system colors
const colorClasses = {
  // Background colors
  background: "bg-background",
  card: "bg-card",
  popover: "bg-popover",
  sidebar: "bg-sidebar",

  // Text colors
  foreground: "text-foreground",
  "card-foreground": "text-card-foreground",
  "popover-foreground": "text-popover-foreground",
  "sidebar-foreground": "text-sidebar-foreground",

  // Primary colors
  primary: "bg-primary",
  "primary-foreground": "text-primary-foreground",

  // Secondary colors
  secondary: "bg-secondary",
  "secondary-foreground": "text-secondary-foreground",

  // Muted colors
  muted: "bg-muted",
  "muted-foreground": "text-muted-foreground",

  // Accent colors
  accent: "bg-accent",
  "accent-foreground": "text-accent-foreground",

  // Status colors
  destructive: "bg-destructive",
  "destructive-foreground": "text-destructive-foreground",
  warning: "bg-warning",
  "warning-foreground": "text-warning-foreground",
  success: "bg-success",
  "success-foreground": "text-success-foreground",

  // Border colors
  border: "border-border",
  input: "border-input",
  "sidebar-border": "border-sidebar-border",

  // Ring colors
  ring: "ring-ring",
  "sidebar-ring": "ring-sidebar-ring",
};