3.7 KiB

Raw Blame History

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

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

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: это материал только для modal Window.

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.7 KiB Raw Blame History Unescape Escape