57 lines
3.0 KiB
Markdown
57 lines
3.0 KiB
Markdown
# Темы и цвет приложения
|
||
|
||
## Основное правило
|
||
|
||
NODE.DC-приложения отличаются цветовой схемой, а не набором заново нарисованных компонентов. Тема задаёт значения CSS custom properties. Компоненты сохраняют геометрию, состояния и поведение.
|
||
|
||
## Что меняет тема
|
||
|
||
- canvas/background;
|
||
- основной и вторичный текст;
|
||
- accent и автоматически вычисляемый on-accent;
|
||
- плотность/цвет glass surfaces;
|
||
- field/control surfaces;
|
||
- overlay;
|
||
- shadows и material rim;
|
||
- semantic success/warning/danger tones при необходимости.
|
||
|
||
## Что тема не меняет
|
||
|
||
- высоту контролов;
|
||
- радиусы по классам компонентов;
|
||
- положение логотипа;
|
||
- механику окна и dropdown;
|
||
- DOM anatomy;
|
||
- keyboard behavior;
|
||
- расположение footer actions;
|
||
- API React/DOM компонентов.
|
||
|
||
## Presets
|
||
|
||
В baseline включены `dark` и `light`. Это не два отдельных продукта, а примеры одного контракта:
|
||
|
||
- dark соответствует текущей основной семье Launcher/Hub/CMS;
|
||
- light фиксирует возможность светлой схемы, наблюдаемой в SEO;
|
||
- конкретный продукт может поверх preset задать свой accent и surface variables.
|
||
|
||
## Accent
|
||
|
||
Accent задаётся RGB tuple. On-accent вычисляется по luminance и не должен вручную прописываться белым или чёрным в отдельном компоненте.
|
||
|
||
Semantic status не обязан совпадать с accent. Например, ошибка остаётся danger, даже если приложение использует красный брендовый accent.
|
||
|
||
## Область применения
|
||
|
||
Тема может быть установлена:
|
||
|
||
- на корневом `html/body` для всего приложения;
|
||
- на контейнере embedded-модуля;
|
||
- на catalog preview для сравнения схем.
|
||
|
||
Portal-компоненты рендерятся в `document.body`, поэтому приложение должно либо задавать тему на `document.documentElement`, либо передавать согласованные переменные на body. Локальная тема глубоко внутри React subtree не сможет автоматически охватить portal без отдельного theme portal root.
|
||
|
||
## Совместимость
|
||
|
||
Существующие `--nodedc-*` имена сохранены намеренно. Это уменьшает стоимость будущего подключения Launcher, Engine, Task Manager и BIM Viewer.
|
||
|