Что такое Carbon Design System

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

Carbon Design System включает три ключевых уровня:

  1. Токены дизайна Токены представляют собой базовые переменные, такие как цвета, типографика, размеры и отступы. Они позволяют поддерживать визуальную консистентность интерфейсов и быстро адаптировать дизайн под разные платформы.

  2. Компоненты Компоненты — это готовые элементы интерфейса, такие как кнопки, формы, модальные окна, таблицы и навигационные элементы. Каждый компонент строго следует принципам системы: доступность, адаптивность и повторяемость.

  3. Паттерны интерфейса Паттерны описывают лучшие практики использования компонентов в сочетаниях. Они помогают проектировать сложные взаимодействия и сохранять единый пользовательский опыт.

Carbon Components Svelte

Carbon Components Svelte — это реализация Carbon Design System на базе фреймворка Svelte. Она позволяет интегрировать компоненты Carbon непосредственно в Svelte-приложения, используя декларативный синтаксис и реактивность Svelte.

Установка и подключение

Для использования библиотеки устанавливается пакет через npm или yarn:

npm install carbon-components-svelte

После установки необходимо импортировать стили Carbon:

import 'carbon-components-svelte/css/g10.css'; // темная или светлая тема

Выбор темы осуществляется подключением соответствующего CSS-файла: g10.css, g90.css, g100.css.

Работа с компонентами

Компоненты Carbon Svelte созданы с учётом простоты использования и реактивности. Пример базовой кнопки:

<script>
  import { Button } from 'carbon-components-svelte';
</script>

<Button kind="primary" on:click={() => console.log('Clicked!')}>
  Нажми меня
</Button>

Ключевые моменты работы с компонентами:

  • Свойства (props): позволяют изменять внешний вид и поведение компонента. Например, kind для кнопок (primary, secondary, tertiary), size для размеров (sm, md, lg), disabled для блокировки.
  • События: большинство компонентов поддерживают стандартные DOM-события (click, change) и специфические события Carbon (on:input-change, on:select).
  • Слотинг: компоненты могут содержать вложенные элементы через слоты, что позволяет настраивать внутреннее содержимое без изменения логики компонента.

Управление состоянием

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

<script>
  import { TextInput } from 'carbon-components-svelte';
  let username = '';
</script>

<TextInput bind:value={username} label="Имя пользователя" placeholder="Введите имя" />
<p>Вы ввели: {username}</p>

Связывание bind:value позволяет мгновенно обновлять состояние при вводе данных.

Адаптивность и доступность

Все компоненты Carbon разработаны с акцентом на доступность (a11y):

  • Поддержка клавиатурной навигации
  • Совместимость с экранными читалками
  • Контрастные цвета для различных тем

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

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

Carbon Components Svelte допускает настройку внешнего вида через CSS-переменные и SCSS-токены:

:root {
  --cds-button-primary-background: #0f62fe;
  --cds-button-primary-hover-background: #0353e9;
}

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

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

Рекомендуется придерживаться следующих практик при использовании Carbon Svelte:

  • Модульность: каждый компонент и его стили должны быть инкапсулированы.
  • Повторное использование: компоненты и паттерны должны использоваться как строительные блоки интерфейса.
  • Тестирование: интеграционные и юнит-тесты обеспечивают стабильность компонентов при обновлениях библиотеки.

Интеграция с SvelteKit

Carbon Components Svelte полностью совместим с SvelteKit:

  • Можно использовать серверный рендеринг
  • Поддержка маршрутизации и динамических страниц
  • Компоненты остаются реактивными и адаптивными

Заключение по возможностям

Система Carbon Design System в сочетании с Svelte предоставляет мощный инструментарий для построения современных интерфейсов. Основное преимущество — согласованность, доступность и модульность, что делает разработку крупномасштабных приложений более предсказуемой и управляемой.

Комплексное использование токенов, компонентов и паттернов Carbon Svelte позволяет не только ускорить разработку, но и поддерживать единый пользовательский опыт на всех уровнях приложения.

Оглавление