Настройка темы

Все дизайнерские токены @lh-ui/react берутся из @lh-ui/share/theme; сама библиотека не хранит копий токенов. Настройка темы — это переопределение этих кастомных CSS-свойств.

Иерархия токенов

Приоритет стилей, от низшего к высшему:

1. theme.css — базовые токены, публикуемые @lh-ui/share (--lh-primary-color и др.)
2. theme-dark.css — тёмные переменные (взаимоисключающи с theme.css; выбирается одно из двух)
3. themeVars у LhConfigProvider — каскадные переменные на оборачивающем элементе
4. prop themeVars компонента — навешиваются на корневой элемент компонента, перекрывают всех предков

Настройка через ConfigProvider

Рекомендуемый способ: передайте themeVars в корне приложения. Ключи записываются без префикса --lh- (он добавляется автоматически):

import { LhConfigProvider } from '@lh-ui/react'

export default function App() {
  return (
    <LhConfigProvider
      themeVars={{
        'primary-color': '#722ed1',
        'bg-color': '#faf9f7',
        'border-radius-base': '6px',
      }}
    >
      <YourApp />
    </LhConfigProvider>
  )
}

Переменные отрендерятся как style="--lh-primary-color: #722ed1; ..." на оборачивающем элементе и каскадно применятся вниз.

Доступные токены

Ключ	Описание
primary-color	Основной цвет
success-color / warning-color / danger-color / info-color	Семантические цвета
gold-color / vermilion-color / jade-color	Цвета в китайском стиле (золотой / киноварь / нефрит)
bg-color / text-color / border-color	Нейтральные цвета
bg-pattern	URL фонового узора (например var(--lh-pattern-willow))
bg-pattern-opacity / bg-pattern-color	Прозрачность и цвет узора
decoration-color	Декоративный цвет

Настройка отдельного компонента

Любой компонент, поддерживающий темы, принимает themeVars напрямую и влияет только на себя:

<LhButton themeVars={{ 'primary-color': '#13c2c2' }}>Бирюзовая кнопка</LhButton>

Также можно настроить компоненты пакетно по имени через componentTheme (ключи общие с остальными библиотеками семейства):

<LhConfigProvider
  componentTheme={{
    button: { 'primary-color': '#722ed1' },
    input: { 'border-color': '#d9d9d9' },
  }}
>
  <YourApp />
</LhConfigProvider>

Приоритет: собственные props компонента > componentTheme[имя_компонента] > глобальный themeVars.

Фоновый узор

Фоновый узор в китайском стиле по умолчанию отключён. Он включается через белый список patternComponents — узор применяется только к компонентам из списка:

<LhConfigProvider
  themeVars={{ 'bg-pattern': 'var(--lh-pattern-willow)' }}
  patternComponents={['dialog', 'card']}
>
  <YourApp />
</LhConfigProvider>

Узор, переданный через собственный prop bgPattern компонента, ограничениям белого списка не подлежит.

Сокращённая запись макета sx

Ряд компонентов поддерживает prop sx, записывающий часто используемые стили макета в виде объекта (семантика как у sx в emotion / MUI):

<LhButton sx={{ marginTop: 2, width: '100%' }} block>
  Кнопка во всю ширину
</LhButton>

Переключение во время выполнения

Смена темы — это, по сути, изменение CSS-переменных, поэтому она может быть полностью динамической:

import { useState } from 'react'
import { LhConfigProvider } from '@lh-ui/react'

function App() {
  const [primary, setPrimary] = useState('#1677ff')
  return (
    <LhConfigProvider themeVars={{ 'primary-color': primary }}>
      <input type="color" onChange={(e) => setPrimary(e.target.value)} />
      <YourApp />
    </LhConfigProvider>
  )
}

Утверждение типа для CSS-переменных

В исходном коде style="{ { '--lh-primary-color': x } }" вызовет ошибку TypeScript (CSSProperties не содержит ключей кастомных свойств). Библиотека использует утилиту cssVarsStyle(), единообразно обрабатывающую преобразование ключей и утверждения типов; внутри компонентов всё уже обёрнуто, пользователям заботиться об этом не нужно.