SILVER/NODEDC_DESIGN_GUIDELINE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Align application surfaces with Launcher and SEO

Browse Source
This commit is contained in:
DCCONSTRUCTIONS
2026-07-10 21:35:06 +03:00
parent 0e030136bb
commit 41e491191c
7 changed files with 102 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/COMPONENTS.md
+2 -2
View File
@@ -4,13 +4,13 @@
## GlassSurface
Базовая поверхность для карточки, панели и большого окна. Варианты меняют плотность материала, но не создают отдельный дизайн.
Базовая непрозрачная поверхность для карточки, панели и большого окна. Варианты меняют плотность нейтральной поверхности, но не создают отдельный дизайн. Реальный glass-материал с blur и rim используется только у modal `Window`.
- `default` — обычная карточка/панель;
- `strong` — dropdown, modal и поверхность над сложным фоном;
- `soft` — вложенная или вторичная область.
Material rim допустим только как часть стекла. Жёсткая цветная рамка, случайный browser outline или debug border не являются rim.
Material rim допустим только как часть modal-стекла. Жёсткая цветная рамка, случайный browser outline или debug border не являются rim.
## Button и IconButton
docs/THEMING.md
+4 -4
View File
@@ -9,10 +9,10 @@ NODE.DC-приложения отличаются цветовой схемой,
- canvas/background;
- основной и вторичный текст;
- accent и автоматически вычисляемый on-accent;
- плотность/цвет glass surfaces;
- цвет непрозрачных application surfaces;
- field/control surfaces;
- overlay;
- shadows и material rim;
- тени controls и modal material;
- semantic success/warning/danger tones при необходимости.
## Что тема не меняет
@@ -31,14 +31,14 @@ NODE.DC-приложения отличаются цветовой схемой,
В baseline включены `dark` и `light`. Это не два отдельных продукта, а примеры одного контракта:
- dark соответствует текущей основной семье Launcher/Hub/CMS;
- light воспроизводит SEO-поверхности: `#ececec` canvas, полупрозрачные белые glass panels, тёмный текст и тонкие нейтральные outlines;
- 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 компонентов.
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.