CSS-переменные Carbon

Carbon Components Svelte использует систему CSS-переменных, позволяющую централизованно управлять стилями компонентов. Это обеспечивает гибкость в настройке внешнего вида и упрощает поддержку темизации. Переменные оформляются в виде --cds-<имя-переменной> и определяются в глобальном CSS или в контексте компонента через :root или отдельные классы.

:root {
  --cds-ui-background: #f4f4f4;
  --cds-ui-01: #ffffff;
  --cds-ui-02: #e0e0e0;
  --cds-text-01: #161616;
  --cds-text-02: #525252;
}

Здесь --cds-ui-background отвечает за основной фон, а --cds-text-01 — за цвет основного текста. Использование таких переменных позволяет менять визуальную палитру приложения без правки стилей отдельных компонентов.

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

В Svelte-компонентах Carbon переменные применяются напрямую в стилях компонентов или через модификаторы. Например:

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

<style>
  .custom-button {
    background-color: var(--cds-ui-02);
    color: var(--cds-text-01);
    border-radius: 4px;
    padding: 0.5rem 1rem;
  }
</style>

<Button class="custom-button">Нажми меня</Button>

Ключевой момент: использование var(--имя-переменной) гарантирует, что изменение переменной глобально повлияет на все компоненты, которые её используют.

Темизация через CSS-переменные

Carbon поддерживает светлую и тёмную темы, управляемые с помощью CSS-переменных. Для переключения темы достаточно определить разные значения переменных для соответствующих классов:

.theme-light {
  --cds-ui-background: #f4f4f4;
  --cds-text-01: #161616;
}

.theme-dark {
  --cds-ui-background: #161616;
  --cds-text-01: #f4f4f4;
}

Переключение темы в приложении можно реализовать динамически, меняя класс корневого элемента:

<script>
  let darkMode = false;
</script>

<div class={darkMode ? 'theme-dark' : 'theme-light'}>
  <Button>Пример кнопки</Button>
</div>

Все компоненты автоматически подхватят новые значения переменных.

Кастомизация отдельных компонентов

Некоторые компоненты Carbon имеют специфические CSS-переменные для отдельных состояний. Например, Input поддерживает переменные для цвета фокуса и текста плейсхолдера:

:root {
  --cds-text-input-01-border-color: #8a3ffc;
  --cds-text-input-01-placeholder-color: #9e9e9e;
}

В Svelte это влияет на все компоненты TextInput без необходимости переопределять стили вручную.

Организация переменных

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

  • UI-палитра: фон, поверхности, границы.
  • Текстовые цвета: основной текст, второстепенный, подсказки.
  • Интерактивные элементы: кнопки, ссылки, фокус.
  • Состояния: ошибка, предупреждение, успех.

Пример структуры в CSS-файле:

:root {
  /* UI-палитра */
  --cds-ui-background: #f4f4f4;
  --cds-ui-01: #ffffff;
  
  /* Текст */
  --cds-text-01: #161616;
  --cds-text-02: #525252;

  /* Состояния */
  --cds-state-error: #da1e28;
  --cds-state-warning: #f1c21b;
}

Такой подход упрощает масштабирование проекта и совместимость с корпоративной дизайн-системой.

Взаимодействие с Svelte-стилями

Svelte поддерживает локальные стили компонентов, но при использовании CSS-переменных Carbon можно сохранять глобальные настройки. Применение:

<style>
  :global(.cds-button) {
    background-color: var(--cds-ui-01);
    color: var(--cds-text-01);
  }
</style>

:global позволяет переопределять стандартные переменные Carbon, сохраняя возможность обновления темы и единообразие интерфейса.

Динамическая смена значений

CSS-переменные могут изменяться через JavaScript в runtime. Пример:

<script>
  function setPrimaryColor(color) {
    document.documentElement.style.setProperty('--cds-ui-01', color);
  }
</script>

<input type="color" on:input={(e) => setPrimaryColor(e.target.value)} />
<Button>Тест цвета</Button>

Все компоненты автоматически подхватят новый цвет без перезагрузки страницы.

Важные рекомендации

  • Использовать только официальные переменные Carbon, чтобы не нарушать совместимость с будущими обновлениями.
  • Для сложных приложений применять слои переменных: глобальные → тема → компонент.
  • Избегать дублирования значений; если необходимо изменить цвет в одном компоненте, лучше создать локальную переменную, ссылающуюся на глобальную.
  • Проверять контрастность при изменении переменных цветов для соответствия WCAG.

Эта система CSS-переменных делает Carbon Components Svelte гибким инструментом для масштабируемых интерфейсов, позволяя централизованно управлять стилями и адаптировать их под разные темы и брендовые требования.

Оглавление