@willykit-ui/theme

Пакет темы для дизайн-системы Willykit UI.

Установка

pnpm add @willykit-ui/theme

Использование

Подключение CSS

Важно: Токены темы работают через CSS Custom Properties, сгенерированные Vanilla Extract. Необходимо подключить CSS-файл темы в точке входа приложения:

// main.tsx / _app.tsx
import '@willykit-ui/theme/styles';

Без этого импорта токены темы не будут доступны.

ThemeProvider

import { ThemeProvider } from '@willykit-ui/theme';

function App() {
  return (
    <ThemeProvider appearance="light">
      <YourComponent />
    </ThemeProvider>
  );
}

Переключение тем

<ThemeProvider appearance="dark">
  <YourComponent />
</ThemeProvider>

Кастомизация токенов в рантайме

<ThemeProvider
  appearance="light"
  theme={{ color: { blue: { 700: '#004D9A' } } }}
>
  <YourComponent />
</ThemeProvider>

Обратная совместимость (старый API)

import { createTheme, ThemeProvider } from '@willykit-ui/theme';

const theme = createTheme({ mode: 'dark' });

<ThemeProvider theme={theme}>
  <YourComponent />
</ThemeProvider>

API

| Экспорт | Описание | | ------------------- | ---------------------------------------------- | | ThemeProvider | Компонент-провайдер темы | | ThemeProviderProps| Типы пропсов ThemeProvider | | createTheme | Фабрика создания темы (Emotion-совместимость) | | createTheme | Фабрика создания темы | | useTheme | Хук для доступа к теме | | GlobalStyles | Компонент глобальных стилей (Emotion) | | defaultTokens | Значения токенов по умолчанию | | defaultTheme | Тема по умолчанию (light) | | Theme | Тип темы | | ThemeTokens | Тип токенов | | ThemeMode | Тип цветовой схемы: 'light' \| 'dark' | | styled | Emotion styled (для обратной совместимости) | | css | Emotion css (для обратной совместимости) | | keyframes | Emotion keyframes (для обратной совместимости) |

Разработка

# Сборка
pnpm build

# Разработка с вотчером
pnpm dev

# Проверка типов
pnpm lint

Структура

src/
├── vars.css.ts          # Контракт темы (createThemeContract)
├── light.css.ts         # Светлая тема
├── dark.css.ts          # Тёмная тема
├── theme-provider.tsx   # Провайдер темы
├── theme.ts             # Фабрика темы и хук
├── tokens.ts            # Токены дизайн-системы
└── ...

Миграция с Emotion на CSS Custom Properties

Тема переведена на Vanilla Extract. CSS Custom Properties генерируются на этапе сборки и применяются через классы темы. Emotion остаётся для обратной совместимости — будет удалён после полной миграции всех компонентов (Этап 5).