Создание дизайн-системы

Chakra UI предоставляет мощный инструмент для построения гибких и переиспользуемых компонентов, что делает его идеальной библиотекой для создания дизайн-систем. Дизайн-система включает в себя стандартизированные элементы интерфейса, правила типографики, цвета, отступы и взаимодействия. В Chakra UI ключевыми элементами такой системы являются тема (theme) и компоненты (components), которые можно настраивать и расширять.

Настройка темы

В Chakra UI тема определяется объектом extendTheme, который позволяет изменять стандартные значения библиотечных компонентов. Основные разделы темы:

  • Colors — палитра проекта. Позволяет задавать базовые цвета, оттенки, градиенты.

    import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  colors: {
    brand: {
      50: "#e3f2ff",
      100: "#b3daff",
      500: "#0073e6",
      900: "#003f99",
    },
  },
});

  • Typography — шрифты, размеры текста, веса. Определяется через fonts, fontSizes, fontWeights.

    const theme = extendTheme({
  fonts: {
    heading: "'Inter', sans-serif",
    body: "'Roboto', sans-serif",
  },
  fontSizes: {
    sm: "0.875rem",
    md: "1rem",
    lg: "1.25rem",
    xl: "1.5rem",
  },
});

  • Space — стандартные отступы и размеры. Используются для margin, padding и размеров компонентов.

    const theme = extendTheme({
  space: {
    1: "4px",
    2: "8px",
    4: "16px",
    8: "32px",
  },
});

  • Breakpoints — определяют адаптивные точки для медиа-запросов. Позволяют строить отзывчивую систему.

    const theme = extendTheme({
  breakpoints: {
    sm: "30em",
    md: "48em",
    lg: "62em",
    xl: "80em",
  },
});

Объединяя эти параметры, создается единая основа для компонентов, которая обеспечивает консистентность дизайна во всем приложении.

Создание кастомных компонентов

Chakra UI позволяет расширять существующие компоненты или создавать полностью новые с помощью components в теме. Основные возможности:

  • Варианты (variants) — разные стили компонента под различные сценарии.
  • Размеры (sizes) — заранее определенные размеры, чтобы сохранять пропорции.
  • Базовые стили (baseStyle) — общие стили для компонента, которые применяются всегда.

Пример кастомного компонента кнопки:

const theme = extendTheme({
  components: {
    Button: {
      baseStyle: {
        fontWeight: "bold",
        borderRadius: "md",
      },
      sizes: {
        sm: { fontSize: "sm", px: 4, py: 2 },
        lg: { fontSize: "lg", px: 6, py: 3 },
      },
      variants: {
        solid: { bg: "brand.500", color: "white" },
        outline: { border: "2px solid", borderColor: "brand.500" },
      },
      defaultProps: {
        size: "md",
        variant: "solid",
      },
    },
  },
});

Такой подход обеспечивает повторное использование компонентов без дублирования стилей и гарантирует, что изменения темы автоматически применяются ко всем экземплярам.

Работа с системными стилями

Chakra UI использует концепцию style props, которые позволяют управлять отступами, размерами, цветами и позиционированием через пропсы компонентов. Это делает компоненты адаптивными и декларативными. Примеры:

<Box 
  bg="brand.50" 
  p={4} 
  borderRadius="md" 
  color="brand.900"
>
  Контент блока
</Box>

<Flex justify="space-between" align="center" gap={4}>
  <Button size="sm">Маленькая кнопка</Button>
  <Button size="lg">Большая кнопка</Button>
</Flex>

Использование системных стилей позволяет создавать консистентные интерфейсы, которые легко масштабировать и поддерживать.

Токены дизайн-системы

В контексте Chakra UI токены — это стандартизированные значения цветов, отступов, шрифтов и теней. Их использование гарантирует единство визуального языка:

  • Цвета: brand.500, gray.100
  • Отступы: space[4], p={4}
  • Типографика: fontSizes.md, fontWeights.bold
  • Тени: shadows.md, shadows.lg

Токены могут быть динамическими и изменяться в зависимости от темы (например, светлой и темной). Это позволяет создавать темы с поддержкой dark mode без переписывания компонентов.

Организация темы и компонентов

Для больших проектов рекомендуется разделять тему на модули:

theme/
├─ colors.js
├─ typography.js
├─ components/
│  ├─ Button.js
│  └─ Card.js
├─ index.js

index.js объединяет все части через extendTheme, создавая единый источник правды для всех компонентов:

import { extendTheme } from "@chakra-ui/react";
import colors from "./colors";
import typography from "./typography";
import Button from "./components/Button";

const theme = extendTheme({
  colors,
  ...typography,
  components: {
    Button,
  },
});

export default theme;

Такой подход позволяет легко расширять дизайн-систему, внедрять новые компоненты и поддерживать единый стиль в масштабных приложениях.

Поддержка адаптивности и пользовательских состояний

Chakra UI поддерживает адаптивные пропсы и состояния взаимодействия:

<Button
  size={{ base: "sm", md: "md" }}
  bg="brand.500"
  _hover={{ bg: "brand.600" }}
  _active={{ bg: "brand.700" }}
>
  Кнопка
</Button>
  • size={{ base: "sm", md: "md" }} — адаптация под разные размеры экрана.
  • _hover, _active, _focus — состояния взаимодействия без написания отдельного CSS.

Это упрощает создание интерактивных компонентов, которые остаются консистентными в рамках дизайн-системы.

Интеграция с темами Dark/Light

Chakra UI обеспечивает автоматическую поддержку переключения тем через useColorMode:

import { useColorMode, Box, Button } from "@chakra-ui/react";

function ColorModeToggle() {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <Box p={4} bg={colorMode === "light" ? "gray.100" : "gray.800"}>
      <Button onCl ick={toggleColorMode}>
        Переключить тему
      </Button>
    </Box>
  );
}

Тема автоматически меняет все компоненты, использующие токены цвета, что делает реализацию dark mode простой и безопасной с точки зрения визуальной консистентности.

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

Chakra UI предоставляет множество хуков и утилит, упрощающих создание дизайн-систем:

  • useTheme — доступ к текущей теме.
  • useColorModeValue(light, dark) — выбор значения в зависимости от темы.
  • createBreakpoints — кастомизация адаптивных точек.
  • chakra() — генерация стилизованных компонентов на базе HTML-тегов.

Пример использования:

import { chakra, useColorModeValue } from "@chakra-ui/react";

const CustomHeading = chakra("h1", {
  baseStyle: {
    fontWeight: "bold",
    color: useColorModeValue("brand.500", "brand.200"),
  },
});

Это позволяет создавать гибкие, переиспользуемые компоненты, полностью интегрированные с темой и адаптивными настройками.

Chakra UI предоставляет структурированный и масштабируемый подход к созданию дизайн-систем, обеспечивая единообразие, адаптивность и удобство поддержки компонентов через токены, тему и системные стили.

Оглавление