Настройка цветовой палитры

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

1. Использование переменных CSS для цветовой палитры

В основе системы лежат CSS-переменные, определённые в :root. Каждая переменная отвечает за конкретный элемент интерфейса:

:root {
  --cds-ui-01: #ffffff; /* фон интерфейса */
  --cds-ui-02: #f4f4f4; /* вторичный фон */
  --cds-text-01: #161616; /* основной текст */
  --cds-text-02: #525252; /* второстепенный текст */
  --cds-support-error: #da1e28; /* цвет ошибок */
  --cds-support-warning: #f1c21b; /* цвет предупреждений */
}

Принцип работы: компоненты Svelte автоматически подхватывают эти переменные при рендеринге. Изменение значения переменной в :root мгновенно отражается во всём приложении.

2. Глобальная настройка палитры

Для глобальной настройки создаётся отдельный CSS-файл или модуль Svelte, где переопределяются базовые переменные. Например:

/* custom-theme.css */
:root {
  --cds-ui-01: #0f0f0f;
  --cds-ui-02: #1a1a1a;
  --cds-text-01: #ffffff;
  --cds-text-02: #cccccc;
  --cds-support-error: #ff4d4f;
}

Подключение в Svelte:

<script>
  import './custom-theme.css';
</script>

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

3. Локальная настройка компонентов

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

<style>
  .custom-button {
    --cds-ui-01: #ff5722; /* фон кнопки */
    --cds-text-01: #ffffff; /* цвет текста */
  }
</style>

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

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

4. Работа с темной и светлой темой

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

:root {
  --cds-ui-01: #ffffff;
  --cds-text-01: #161616;
}

[data-theme='dark'] {
  --cds-ui-01: #161616;
  --cds-text-01: #ffffff;
}

В Svelte переключение темы выполняется динамически:

<script>
  let theme = 'light';

  function toggleTheme() {
    theme = theme === 'light' ? 'dark' : 'light';
    document.documentElement.setAttribute('data-theme', theme);
  }
</script>

<button on:click={toggleTheme}>Переключить тему</button>

Компоненты автоматически подхватывают новые значения переменных, обеспечивая консистентность интерфейса.

5. Создание пользовательских палитр

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

const palette = {
  primary: '#0f62fe',
  secondary: '#393939',
  error: '#da1e28',
  warning: '#f1c21b'
};

Object.entries(palette).forEach(([key, value]) => {
  document.documentElement.style.setProperty(`--cds-${key}`, value);
});

Такой метод удобен для интеграции с системами управления темами или конфигурациями продукта.

6. Цветовая доступность и контраст

Carbon Components Svelte учитывает принципы WCAG. Основные моменты:

  • Цвет текста и фона должны иметь коэффициент контраста ≥ 4.5:1.
  • Цвета поддержки (ошибки, предупреждения) должны быть различимы для людей с дальтонизмом.
  • Для кнопок и интерактивных элементов рекомендуется использовать комбинации цветов, соответствующие цветовым токам платформы.

Для проверки контрастности можно использовать встроенные инструменты браузера или библиотеки вроде color-contrast-checker.

7. Интеграция с CSS-предпроцессорами

При использовании SCSS или PostCSS переменные Carbon можно импортировать и использовать напрямую:

@import 'carbon-components-svelte/css/variables.scss';

$custom-ui-01: #fafafa;

:root {
  --cds-ui-01: #{$custom-ui-01};
}

Это позволяет создавать сложные динамические темы с миксинами и функциями цветов.

8. Анимация изменения цветов

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

:root {
  transition: --cds-ui-01 0.3s ease, --cds-text-01 0.3s ease;
}

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

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

Оглавление