58 lines
3.8 KiB
Markdown
58 lines
3.8 KiB
Markdown
# Темы и цвет приложения
|
||
|
||
## Основное правило
|
||
|
||
NODE.DC-приложения отличаются цветовой схемой, а не набором заново нарисованных компонентов. Тема задаёт значения CSS custom properties. Компоненты сохраняют геометрию, состояния и поведение.
|
||
|
||
## Что меняет тема
|
||
|
||
- canvas/background;
|
||
- основной и вторичный текст;
|
||
- accent и автоматически вычисляемый on-accent;
|
||
- цвет непрозрачных application surfaces;
|
||
- field/control surfaces;
|
||
- overlay;
|
||
- тени controls и modal material;
|
||
- 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-поверхности: `#ececec` canvas, белые панели и поля, тёмный текст, чёрные primary actions и мягкую тень у белых secondary controls;
|
||
- конкретный продукт может поверх preset задать свой accent и surface variables.
|
||
|
||
## Accent
|
||
|
||
Accent задаётся RGB tuple. On-accent вычисляется по luminance и не должен вручную прописываться белым или чёрным в отдельном компоненте.
|
||
|
||
Default accent текущего NODE.DC shell — `#ff2f92`. `ColorField` открывает единый portal-picker с saturation/value plane, hue slider, HEX и быстрыми цветами — системный `input[type=color]` не является runtime UI. Изменение accent сразу меняет Environment Settings, active actions, range fill, media file action и theme-aware window states без создания новой темы или fork компонентов. Blur, gloss и material rim не наследуются application panels: это материал только для floating modal и portal-dropdown/select.
|
||
|
||
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.
|