Цвета и стилизация

Основы управления цветом

В библиотеке Carbon Components Svelte визуальная консистентность достигается через строгое использование системы токенов цвета. Каждый компонент поддерживает набор стандартных цветовых палитр, которые соответствуют рекомендациям IBM Carbon Design System. Основные типы токенов:

  • interactive — цвет интерактивных элементов (кнопки, ссылки, чекбоксы);
  • ui-background — фоновый цвет интерфейса;
  • text-primary — основной цвет текста;
  • text-secondary — второстепенный текст;
  • supportive — цвета для статусов (успех, ошибка, предупреждение).

Токены определяются в файлах SCSS и автоматически подключаются через системные переменные в Svelte-компонентах. Пример использования через inline-стили:

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

<Button style="background-color: var(--cds-interactive); color: var(--cds-text-primary)">
  Нажми меня
</Button>

Использование CSS-переменных Carbon обеспечивает легкую кастомизацию и адаптивность цветовой схемы при переключении тем.

Темизация компонентов

Carbon Components Svelte поддерживает две базовые темы: светлую (white) и темную (g10). Переключение темы осуществляется через установку класса на корневой элемент:

<div class="bx--theme--g10">
  <Button>Темная тема</Button>
</div>

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

  • Цветовые токены автоматически подстраиваются под тему, не требуя ручного изменения стилей.
  • Для кастомных компонентов можно использовать theme пропс или CSS-переменные напрямую.
  • При разработке приложений с динамическим переключением тем необходимо использовать реактивные переменные Svelte для обновления класса темы.

Работа с оттенками и градиентами

В Carbon Design System предусмотрены оттенки базовых цветов, позволяющие создавать иерархию визуальной информации:

  • gray-10 – основной фон;
  • gray-50 – выделение блоков;
  • blue-60 – акцентные элементы;
  • green-40 – индикатор успеха.

Для градиентов используется комбинация токенов и CSS-функции linear-gradient:

<div style="background: linear-gradient(to right, var(--cds-blue-60), var(--cds-blue-40)); height: 100px;">
</div>

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

Типографика и цвет текста

Текстовые компоненты в Carbon Svelte используют системные токены цвета и масштаб шрифтов:

  • bx--type-body-short-01 — стандартный текст;
  • bx--type-heading-03 — заголовки среднего уровня;
  • bx--type-caption-01 — подписи и мелкий текст.

Для управления цветом текста применяются переменные:

<p class="bx--type-body-short-01" style="color: var(--cds-text-secondary)">
  Второстепенный текст
</p>

Важно: сочетание контраста текста и фона строго контролируется для соответствия WCAG 2.1, особенно для темной темы.

Стилизация интерактивных компонентов

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

  • primary — главный акцент кнопки;
  • secondary — альтернативная кнопка;
  • danger — действие с негативным эффектом;
  • ghost — прозрачная кнопка без фона.

Пример применения стиля через пропс kind:

<Button kind="danger">Удалить</Button>

Каждый вид кнопки использует комбинацию токенов для фона, рамки и текста. Для динамической стилизации допустимо использовать inline-стили или переопределять CSS-переменные.

Кастомизация через CSS-переменные

Для тонкой настройки компонентов Carbon Svelte применяются CSS-переменные, доступные через :root или локальные селекторы:

:root {
  --cds-interactive: #0f62fe;
  --cds-text-primary: #161616;
  --cds-ui-background: #f4f4f4;
}

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

  • Для глобальной темы использовать :root;
  • Для отдельных компонентов — локальные селекторы;
  • Для временных состояний — inline-стили.

Использование утилит для цветов

Carbon Components Svelte предоставляет утилиты для управления цветом, например:

  • color-adjust — для изменения яркости или насыщенности;
  • transparentize — для добавления прозрачности;
  • contrast-color — автоматический выбор контрастного текста.

Пример:

<div style="background-color: color-adjust(var(--cds-blue-60) lightness(20%));">
  Светлый синий блок
</div>

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

Рекомендации по стилизации

  • Использовать только токены Carbon, избегая произвольных hex-значений.
  • Поддерживать контраст текста и фона для доступности.
  • Применять темы последовательно для всех компонентов.
  • Градиенты и яркие акценты использовать умеренно.
  • Кастомизация через CSS-переменные должна быть централизованной для упрощения поддержки.

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

Оглавление