Узоры в китайском стиле

Китайский стиль — это не украшательство lh-ui, а одно из его дизайнерских утверждений. styles/theme/common/patterns.scss предоставляет шесть традиционных узоров, которые инъектируются как необязательный фоновый слой.

Шесть узоров

Узор	CSS-переменная	Описание
柳叶纹	`--lh-pattern-willow`	Удлинённые листья ивы, редкие и густые, колышущиеся на ветру
云纹	`--lh-pattern-cloud`	Раскинувшиеся благоприятные облака, плавно извивающиеся
水波纹	`--lh-pattern-water`	Лёгкая рябь, наслаивающаяся кольцами
雪花纹	`--lh-pattern-snow`	Шестиконечные снежинки с тонкими разветвлениями
梅花纹	`--lh-pattern-plum`	Пять свободно раскинувшихся лепестков с отчётливой сердцевиной
竹叶纹	`--lh-pattern-bamboo`	Ланцетовидные листья бамбука с чёткой средней жилкой, расположенные вразнобой

Все они встроены как data:image/svg+xml inline (без внешних ресурсов, без сетевых зависимостей, без проблем с CORS) и объявлены с !default, поэтому пользователь может их переопределить. Дополнительно есть --lh-pattern-none: none (явно без узора).

Включение узоров

Узоры по умолчанию не включены (--lh-bg-pattern: none). Три способа включения:

1. Напрямую в компоненте / странице

.my-card {
  --lh-bg-pattern: var(--lh-pattern-plum);
}

2. Через themeVars у ConfigProvider

<lh-config-provider :theme-vars="{ 'bg-pattern': 'var(--lh-pattern-plum)' }">
  <App />
</lh-config-provider>

Сокращение 'bg-pattern' автоматически дополняется до --lh-bg-pattern.

3. Prop pattern + белый список

<lh-config-provider
  pattern="plum"
  :pattern-components="['card', 'dialog', 'drawer']"
>
  <App />
</lh-config-provider>

Узор влияет на фон, а это подходит далеко не всем компонентам (цветы сливы на фоне таблицы выглядят неаккуратно). Белый список patternComponents управляет тем, каким компонентам добавлять узор. Подробнее см. Настройка в runtime.

Управляющие токены

:root {
  --lh-bg-pattern: none;                                     // По умолчанию выключено
  --lh-bg-pattern-repeat: repeat;                            // Способ замощения
  --lh-bg-pattern-size: 40px;                                // Размер ячейки (40px по умолчанию подобран под высоту кнопки, чтобы узор не обрезался)
  --lh-bg-pattern-opacity: 0.15;                             // Непрозрачность
  --lh-bg-pattern-color: var(--lh-decoration-color, rgba(184, 134, 11, 0.12));  // Цвет
  --lh-bg-pattern-blend: soft-light;                         // Режим наложения
}

Все объявлены с !default и переопределяемы. Две самые используемые ручки:

--lh-bg-pattern-size: 40px — размер, при котором «в высоте кнопки помещается один полный узор»; для фона крупных блоков можно увеличить до 80px+, чтобы узор раскинулся свободнее.
--lh-bg-pattern-opacity: 0.15 — значение по умолчанию «присутствует, но не бросается в глаза»; для более отчётливой атмосферы китайского стиля можно поднять до 0.25.

apply-pattern mixin

@mixin apply-pattern {
  background-image: var(--lh-bg-pattern);              // /* no-fallback */
  background-repeat: var(--lh-bg-pattern-repeat);      // /* no-fallback */
  background-size: var(--lh-bg-pattern-size);          // /* no-fallback */
  background-blend-mode: var(--lh-bg-pattern-blend, normal);  // С fallback
  @content;
}

Компонент, подключающий узор через @include, получает фон с узором:

@use 'theme/common/patterns' as *;

.lh-card--patterned {
  @include apply-pattern;
}

Почему у первых трёх нет fallback: узоры по умолчанию выключены, и эти три токена передаются пользователем / ConfigProvider; при отсутствии значения узора просто нет (возврат background-image: none обеспечивается собственным значением токена по умолчанию), а жёстко прописанный fallback сделал бы «узор не настроен» неотличимым от «узор явно выключен».

Узоры и тёмная тема

Узоры по умолчанию ссылаются на --lh-bg-pattern-color (декоративный цвет), который имеет тёмное переопределение в var-dark.scss — поэтому цвет узора автоматически следует за тёмной темой.

Если вы перенастраиваете цвет узора, не забудьте поправить его и для тёмной темы:

[data-theme='dark'],
.dark {
  --lh-bg-pattern-color: rgba(255, 255, 255, 0.08);
}

Примечания

Выключено по умолчанию это осознанно: узор — это атмосфера, а не информация; включённый по умолчанию узор загрязнил бы интерфейс всех пользователей. Глобальный узор желающим бизнес включает через ConfigProvider.
Объём inline-SVG: все шесть узоров — облегчённые контуры, по нескольку сотен байт каждый; встраивание в CSS не порождает дополнительных запросов.
Переопределение !default: чтобы подставить собственный узор, переопределите в проекте --lh-pattern-plum: url('data:image/svg+xml,...') или задайте --lh-bg-pattern напрямую.
Печать: при печати узоры могут не отображаться (то, как браузеры обрабатывают background-image при печати) — содержательный слой не должен полагаться на узор для передачи информации.