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

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

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.