Использование CSS-переменных в Next.js

Отлично, мы перевели дизайн-токены из Figma в CSS-переменные. Теперь оживим их в коде! Интегрируем токены в Next.js, чтобы разработчики могли их использовать. Это ускорит работу и обеспечит единообразие.

Где хранить CSS-переменные в Next.js?

В Next.js есть несколько способов хранить глобальные стили, в том числе CSS-переменные. Вот самые распространённые:

1. Глобальный CSS-файл. Создайте файл, например, styles/globals.css, и импортируйте его в pages/_app.js. Это идеальное место для глобальных CSS-переменных — они будут доступны во всём приложении.
2. CSS-модули. Если нужен модульный подход, можно определить переменные в CSS-модулях. Но тогда они будут работать только внутри этого модуля. Для глобальных токенов лучше использовать первый вариант.
3. CSS-in-JS библиотеки. Если вы используете styled-components или Emotion, токены можно определить в их синтаксисе. Но для простоты и универсальности мы сфокусируемся на нативных CSS-переменных.

Совет: Для быстрой дизайн-системы начните с глобального CSS-файла. Это самый простой и эффективный способ сделать токены доступными везде.

Интегрируем CSS-переменные в globals.css

Откройте или создайте файл styles/globals.css. Добавьте туда CSS-переменные, которые мы экспортировали из Figma:

/* styles/globals.css */

:root {
  /* Цвета */
  --color-primary-500: #0070f3;
  --color-primary-600: #005bb5;
  --color-text-default: #333333;
  --color-text-secondary: #666666;
  --color-background-default: #ffffff;
  --color-background-hover: #f0f0f0;

  /* Типографика */
  --font-family-base: 'Inter', sans-serif;
  --font-size-base: 16px;
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --line-height-base: 1.5;

  /* Отступы */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;

  /* Радиусы */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;

  /* Тени */
  --shadow-default: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Дополнительные глобальные стили, если нужны */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text-default);
  line-height: var(--line-height-base);
  background-color: var(--color-background-default);
}

Не забудьте импортировать этот файл в pages/_app.js:

// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Готово! Теперь все эти переменные доступны в любом компоненте вашего Next.js приложения.

Используем CSS-переменные в компонентах

После определения переменных, вы можете использовать их в компонентах. Вспомним кнопку, которую мы создавали в Figma.

Предположим, у вас есть файл components/Button/Button.module.css для стилизации кнопки:

/* components/Button/Button.module.css */

.button {
  padding: var(--spacing-md) var(--spacing-lg); /* Отступы */
  border-radius: var(--border-radius-md); /* Радиусы */
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.primary {
  background-color: var(--color-primary-500); /* Основной цвет */
  color: var(--color-background-default); /* Цвет текста */
  border: none;
}

.primary:hover {
  background-color: var(--color-primary-600); /* Цвет при наведении */
}

.secondary {
  background-color: var(--color-background-default);
  color: var(--color-primary-500);
  border: 1px solid var(--color-primary-500);
}

.secondary:hover {
  background-color: var(--color-background-hover);
}

И соответствующий React-компонент Button.js:

// components/Button/Button.js
import styles from './Button.module.css';

function Button({ children, variant = 'primary', ...props }) {
  return (
    <button
      className={`${styles.button} ${styles[variant]}`}
      {...props}
    >
      {children}
    </button>
  );
}

export default Button;

Как видите, мы просто используем var() для доступа к переменным. Код становится чище, понятнее и, главное, легко изменяемым. Если дизайнер решит поменять основной цвет, вы обновите всего одно значение в globals.css (или в вашем файле с переменными). Изменение автоматически применится ко всем элементам, использующим --color-primary-500. Красота! ✨

Зачем использовать CSS-переменные в Next.js?

• Единообразие. Все элементы используют одни и те же значения из дизайн-системы.
• Скорость. Разработчикам не нужно гадать, какой цвет или отступ использовать — они просто берут нужный токен.
• Простота поддержки. Изменения в дизайне внедряются легко: обновил значения переменных в одном месте — и готово.
• Гибкость. CSS-переменные идеальны для светлых/тёмных тем или адаптивных стилей, так как их значения можно менять динамически.

Теперь, когда вы умеете интегрировать дизайн-токены в Next.js, перейдём к следующему шагу: оптимизации рабочего процесса с помощью полезных плагинов Figma. Это поможет вам работать с дизайн-системой ещё быстрее и эффективнее.