Обзор IBM Carbon Design System

IBM Carbon Design System — это полноценный набор компонентов, стилей и утилит для построения интерфейсов, ориентированных на корпоративные приложения. Он включает UI-компоненты, сетки, типографику, цвета, иконки и шаблоны взаимодействия, обеспечивая единый язык дизайна и предсказуемое поведение элементов.

Основные цели Carbon:

  • Согласованность интерфейсов: одинаковое поведение кнопок, форм, модальных окон и таблиц во всех приложениях.
  • Адаптивность: поддержка мобильных и десктопных устройств с минимальной доработкой.
  • Расширяемость: возможность создания кастомных компонентов поверх стандартных, без нарушения базовых принципов дизайна.

Архитектура и структура библиотеки

Carbon разделён на несколько ключевых модулей:

  1. Carbon Components Содержит готовые React- или Web-компоненты, которые можно интегрировать напрямую в проект. Компоненты включают:

    • Button — различные типы кнопок (primary, secondary, tertiary) с поддержкой состояний (hover, active, disabled).
    • TextInput и Select — поля ввода с встроенной валидацией и поддержкой форматов.
    • DataTable — таблицы с сортировкой, пагинацией и фильтрацией.
    • Modal и SidePanel — диалоговые окна и боковые панели для отображения контекстной информации.

  2. Carbon Styles Содержит SCSS-переменные, миксины и токены для настройки визуального вида компонентов. Основные категории:

    • Цвета: палитра IBM Design, включая основной, нейтральный и акцентный цвета.
    • Типографика: системные шрифты, размеры и интервалы для заголовков и текстовых блоков.
    • Иконки: набор SVG-иконок и утилиты для их масштабирования и стилизации.

  3. Carbon Utilities Набор вспомогательных функций для работы с сеткой, отступами, позиционированием и адаптивными точками. Например:

    • spacing() — генерация классов и переменных отступов.
    • breakpoints() — автоматическое управление стилями для разных размеров экранов.

  4. Carbon Motion Паттерны анимации и переходов для компонентов, включая эффекты появления, закрытия и переключения состояний.

Использование Carbon с SvelteKit

SvelteKit не имеет официальной версии Carbon, но интеграция возможна через Web Components или адаптированные пакеты. Основные подходы:

1. Подключение через npm

npm install @carbon/web-components

Импорт необходимых компонентов в Svelte:

<script>
  import '@carbon/web-components/es/components/button/button.js';
</script>

<bx-btn kind="primary">Primary Button</bx-btn>

2. Использование стилей

Для корректного отображения подключаются SCSS-файлы или CSS из пакета:

@import '@carbon/web-components/es/styles.css';

Поддерживаются темы (white, g100, g90) через атрибут theme.

3. Настройка адаптивности

Web Components Carbon имеют встроенные свойства для адаптивной верстки:

  • bx-grid — контейнер сетки с колонками и отступами.
  • bx-row и bx-col — определяют распределение контента в строках и колонках.

Пример адаптивной сетки:

<bx-grid>
  <bx-row>
    <bx-col cols="4">Контент 1</bx-col>
    <bx-col cols="8">Контент 2</bx-col>
  </bx-row>
</bx-grid>

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

Carbon Web Components поддерживают кастомные события для взаимодействия:

<bx-btn id="myBtn" kind="primary">Click Me</bx-btn>

<script>
  const button = document.getElementById('myBtn');
  button.addEventListener('click', () => {
    console.log('Кнопка нажата');
  });
</script>

Состояния компонентов можно управлять через атрибуты:

  • disabled — блокирует элемент.
  • open — для модальных окон и раскрывающихся панелей.
  • selected — для элементов списка или табов.

Темизация и кастомизация

Carbon поддерживает кастомизацию через CSS-переменные и SCSS-миксины:

  • Основные переменные для цветов:
$cds-gray-100: #f4f4f4;
$cds-blue-60: #0f62fe;
  • Переопределение темы:
:root {
  --cds-interactive-01: #ff7f50;
}
  • Настройка размеров компонентов и шрифтов через SCSS:
@use '@carbon/styles' with (
  $body-font-size: 16px,
  $heading-font-weight: 600
);

Интеграция с формами и таблицами

Carbon включает расширенные компоненты для управления данными:

  • DataTable с сортировкой и фильтрацией:
<bx-data-table>
  <bx-table-header>
    <bx-table-header-row>
      <bx-table-header-cell>Имя</bx-table-header-cell>
      <bx-table-header-cell>Возраст</bx-table-header-cell>
    </bx-table-header-row>
  </bx-table-header>
  <bx-table-body>
    <bx-table-row>
      <bx-table-cell>Иван</bx-table-cell>
      <bx-table-cell>28</bx-table-cell>
    </bx-table-row>
  </bx-table-body>
</bx-data-table>
  • Формы с валидацией:
<bx-text-input label-text="Email" type="email" required pattern=".+@.+\..+"></bx-text-input>

Принципы построения интерфейсов

  1. Consistency (Согласованность) — одинаковые элементы и паттерны по всему приложению.
  2. Clarity (Ясность) — понятные и предсказуемые действия пользователя.
  3. Efficiency (Эффективность) — минимизация кликов и действий для достижения цели.
  4. Responsiveness (Адаптивность) — корректное отображение на любых устройствах.

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

Итоговая структура проекта с Carbon в SvelteKit

src/
├─ routes/
│  └─ index.svelte
├─ lib/
│  ├─ components/
│  │  └─ CustomButton.svelte
│  └─ styles/
│     └─ carbon.scss
└─ app.html
  • lib/components — собственные Svelte-компоненты на основе Carbon.
  • lib/styles/carbon.scss — SCSS-файлы с настройкой темы и переопределением переменных.
  • routes/index.svelte — страница с использованием компонентов Carbon.

Такой подход обеспечивает чистую архитектуру, упрощает поддержку и расширение интерфейсов.

Оглавление