Документация v2.4

Техническое руководство

Все необходимое для интеграции HueKit в ваш CI/CD пайплайн. От установки CLI до настройки сложных правил генерации тем.

Шаг 1: Установка

Быстрый старт

HueKit работает как модуль Node.js. Добавьте его в dev-зависимости вашего проекта, чтобы получить доступ к CLI-инструментам и API.

bash
$ npm install --save-dev @huekit/cli
$ npx huekit init

После инициализации в корне проекта появится файл huekit.config.js с базовыми настройками палитры.

Перейти к настройке

Терминал с процессом установки HueKit через npm

API Reference

Программный доступ к движку генерации цветов. Используйте JS API для создания динамических тем в рантайме или при сборке.

huekit.generate()

Генерация палитры

Основной метод. Принимает объект конфигурации (базовый цвет, контрастность) и возвращает JSON-токены.

Возвращает: Promise<PaletteObject>

huekit.audit()

Проверка контраста

Анализирует пару цветов (фон и текст) и возвращает отчет о соответствии стандартам WCAG AA и AAA.

Возвращает: AuditReport

huekit.export()

Экспорт форматов

Конвертирует токены в CSS-variables, SCSS map, Tailwind config или React Native styles.

Поддерживает: 5+ форматов

Полная документация API

Конфигурация

Настройка проекта

Файл huekit.config.js позволяет тонко настроить логику генерации. Вы можете задать приоритет доступности, указать бренд-цвета и настроить постпроцессинг.

01.
Base Hue: Базовый оттенок (HSL) для всей системы. По умолчанию используется --color-primary.
02.
Scale: Количество шагов в каждой палитре (от 5 до 20). Влияет на детализацию теней и состояний.
03.
Output: Пути к директориям для генерации CSS/JS файлов.

// huekit.config.js

          export default {
            
              brand: {
            
                base: '#5C8A76',
            
                mode: 'accessible'
            
              },
            
              output: {
            
                css: './src/styles/themes.css',
            
                tokens: './tokens.json'
            
              },
            
              plugins: ['contrast-checker']
            
          }

FAQ по интеграции

Как работает Hot Reload в разработке?

HueKit CLI следит за изменениями в huekit.config.js и файлах Figma-синхронизации. При изменении параметров он автоматически перегенерирует CSS-файлы и перезапускает ваш dev-сервер (если настроен watcher).

Можно ли использовать без Node.js?

Да. Мы предоставляем статическую утилиту для генерации готовых CSS-файлов, которые можно подключить в любом проекте (PHP, Python, Go, чистый HTML). Для динамической смены тем в рантайме нужен JS-модуль.

Поддержка CSS-in-JS библиотек?

Нативная поддержка Styled Components, Emotion и Panda CSS. Конфигурация позволяет задать префиксы для переменных, чтобы они корректно работали внутри shadow DOM или инкапсулированных стилей.

Что делать, если цвета не применяются?

Проверьте специфичность селекторов. HueKit генерирует переменные на уровне :root. Если ваши компоненты переопределяют цвета явно, используйте класс .hue-kit-theme как обертку для применения контекста.

Нужна помощь с кодом?

Наша команда поддержки разработчиков отвечает в течение 2 часов в рабочие дни.

✓ Помощь с настройкой CI/CD
✓ Аудит существующих стилей
✓ Настройка кастомных плагинов

Написать в поддержку