3.0 KiB

Raw Blame History

Темы и цвет приложения

Основное правило

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.

3.0 KiB Raw Blame History Unescape Escape