Как писал цвета в проекте?

Как писал цвета в проекте

Организация цветов в проекте — это вопрос о maintenance, consistency и масштабируемости. Качество системы цветов критично влияет на скорость разработки и возможность rebrand'а.

Архитектурные подходы

1. CSS переменные (современный стандарт)

/* globals.css */
:root {
  /* Основные цвета бренда */
  --color-primary: #3b82f6;      /* синий */
  --color-secondary: #10b981;    /* зелёный */
  --color-danger: #ef4444;       /* красный */
  --color-warning: #f59e0b;      /* жёлтый */
  --color-success: #22c55e;      /* зелёный успех */
  
  /* Нейтральная палитра */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-500: #6b7280;
  --color-gray-900: #111827;
  
  /* Светлые и тёмные режимы */
  --color-bg-light: #ffffff;
  --color-bg-dark: #1f2937;
  --color-text-light: #111827;
  --color-text-dark: #f9fafb;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-light: #1f2937;
    --color-bg-dark: #111827;
    --color-text-light: #f9fafb;
    --color-text-dark: #111827;
  }
}

/* Использование */
.button {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 8px;
  padding: 10px 20px;
}

.button:hover {
  background-color: #2563eb; /* более темный оттенок primary */
}

2. Tailwind CSS (с вендором)

Если проект использует Tailwind, расширяем тему:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      white: '#ffffff',
      black: '#000000',
      primary: {
        50: '#eff6ff',
        500: '#3b82f6',
        600: '#2563eb',
        900: '#1e3a8a',
      },
      secondary: {
        50: '#f0fdf4',
        500: '#10b981',
        600: '#059669',
      },
      surface: {
        light: '#ffffff',
        dark: '#1f2937',
      },
    },
    extend: {},
  },
};

<!-- Использование в компонентах -->
<button class="bg-primary-500 text-white hover:bg-primary-600">
  Нажми меня
</button>

<div class="bg-surface-light dark:bg-surface-dark">
  Адаптивный контент
</div>

3. Design System через JSON

Для более крупных проектов используют design tokens:

{
  "colors": {
    "brand": {
      "primary": "#3b82f6",
      "primary-dark": "#2563eb",
      "primary-light": "#60a5fa"
    },
    "semantic": {
      "success": "#22c55e",
      "warning": "#f59e0b",
      "error": "#ef4444",
      "info": "#0ea5e9"
    },
    "neutral": {
      "0": "#ffffff",
      "50": "#f9fafb",
      "900": "#111827"
    }
  }
}

Затем генерируют CSS, SCSS, JS переменные из этого файла.

Мой подход в реальном проекте

// types/colors.ts
export type ColorVariant = 'primary' | 'secondary' | 'danger' | 'success';

export const COLORS = {
  primary: {
    light: '#60a5fa',
    base: '#3b82f6',
    dark: '#1e40af',
  },
  secondary: {
    light: '#6ee7b7',
    base: '#10b981',
    dark: '#047857',
  },
  neutral: {
    white: '#ffffff',
    gray: '#6b7280',
    black: '#000000',
  },
} as const;

// lib/colors.ts
export function getColorValue(variant: ColorVariant, shade: 'light' | 'base' | 'dark'): string {
  return COLORS[variant]?.[shade] || COLORS.primary.base;
}

// React компонент
interface ButtonProps {
  variant?: ColorVariant;
  children: React.ReactNode;
}

export function Button({ variant = 'primary', children }: ButtonProps) {
  const bgColor = getColorValue(variant, 'base');
  
  return (
    <button
      style={{
        backgroundColor: bgColor,
        color: '#ffffff',
        padding: '10px 20px',
        borderRadius: '8px',
        border: 'none',
        cursor: 'pointer',
      }}
    >
      {children}
    </button>
  );
}

Лучшие практики

1. Семантические имена

/* ✅ Хорошо - понятно назначение */
.text-error: #ef4444;
.bg-success: #22c55e;

/* ❌ Плохо - не ясно где применять */
.text-red: #ef4444;
.bg-green: #22c55e;

2. Контраст и доступность

// Проверяй контрастность WCAG AA (4.5:1 для текста)
const contrast = calculateContrast('#ffffff', '#3b82f6'); // >= 4.5

// Не полагайся только на цвет
<div className="flex gap-2 items-center">
  <span className="w-3 h-3 bg-error"></span>
  <span>Ошибка</span>
</div>

3. Палитра должна быть ограниченной

// Правильно: небольшой набор цветов
const colors = {
  primary: '#3b82f6',
  secondary: '#10b981',
  danger: '#ef4444',
  // ... может быть 5-10 основных цветов
};

// Неправильно: цвет на каждый случай
const colors = {
  buttonRed: '#ef4444',
  linkRed: '#dc2626',
  errorRed: '#991b1b',
  // много дублей
};

Инструменты

• Figma — для дизайна цветовой палитры
• Contrast Ratio Tool — проверка WCAG
• Tailwind CSS — встроенная система цветов
• Color Hunt — поиск гармоничных палитр
• Design Token Generator — автоматизация генерации

Ответ на интервью

«В моих проектах я использую CSS переменные и Tailwind CSS для организации цветов. Создаю семантическую систему: primary, secondary, success, error, warning. Все цвета определяю в одном месте, что облегчает поддержку и rebrand. Также уделяю внимание контрастности для WCAG доступности. Если это дизайн-система, использую design tokens с JSON, из которого генерируются переменные для разных платформ.»