From 4c74c22a6ef8f1773a051f298b2a85bd962023ba Mon Sep 17 00:00:00 2001 From: DCCONSTRUCTIONS Date: Fri, 10 Jul 2026 20:22:42 +0300 Subject: [PATCH] Refine SEO light theme and environment controls --- CHANGELOG.md | 8 ++ apps/catalog/package.json | 6 +- apps/catalog/src/CatalogApp.tsx | 90 +++++------- apps/catalog/src/styles.css | 39 +++--- docs/COMPONENTS.md | 10 +- docs/ICONS.md | 8 +- docs/SOURCE_BASELINE.md | 4 +- docs/THEMING.md | 4 +- package-lock.json | 24 ++-- package.json | 2 +- packages/tokens/package.json | 2 +- packages/tokens/themes.css | 26 ++++ packages/tokens/tokens.css | 2 +- packages/ui-core/package.json | 4 +- packages/ui-core/styles.css | 183 ++++++++++++++++++++----- packages/ui-dom/package.json | 4 +- packages/ui-react/package.json | 4 +- packages/ui-react/src/Icon.tsx | 2 +- packages/ui-react/src/RangeControl.tsx | 154 ++++++++++++++++++++- registry/components.json | 14 +- registry/registry.json | 2 +- 21 files changed, 437 insertions(+), 155 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 40c2a85..136f9ef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ # Changelog +## 0.5.1 — SEO light glass and controllable Environment Settings + +- Replaced hard-coded dark Application/Admin panel surfaces with theme tokens; the light preset now uses the audited SEO white-glass panel treatment. +- Rebuilt `ColorField` from the Engine/BIM swatch-and-HEX anatomy with a portable saturation/value palette, hue slider and quick colors instead of a browser-native dark picker. +- Made the application accent a true global runtime variable: it now flows through Environment Settings, active actions, range fill, media actions and theme-aware windows. +- Moved the complete Engine Environment Settings specimen into `Guideline → Контролы`, including split select and collapsible sections; removed the separate catalog Inspector route. +- Reduced default icon optical size/weight again while preserving all button and circular hit targets. + ## 0.5.0 — media stage and modal inventory - Switched the default NODE.DC application accent to pink while retaining live accent editing and semantic status colors. diff --git a/apps/catalog/package.json b/apps/catalog/package.json index 926ac26..c5900b8 100644 --- a/apps/catalog/package.json +++ b/apps/catalog/package.json @@ -1,6 +1,6 @@ { "name": "@nodedc/ui-catalog", - "version": "0.5.0", + "version": "0.5.1", "private": true, "type": "module", "scripts": { @@ -9,8 +9,8 @@ "typecheck": "tsc -b --pretty false" }, "dependencies": { - "@nodedc/ui-core": "0.5.0", - "@nodedc/ui-react": "0.5.0", + "@nodedc/ui-core": "0.5.1", + "@nodedc/ui-react": "0.5.1", "react": "^19.1.0", "react-dom": "^19.1.0" }, diff --git a/apps/catalog/src/CatalogApp.tsx b/apps/catalog/src/CatalogApp.tsx index 634abbe..fe8650f 100644 --- a/apps/catalog/src/CatalogApp.tsx +++ b/apps/catalog/src/CatalogApp.tsx @@ -38,12 +38,7 @@ import { type ShareAccessMember, } from "@nodedc/ui-react"; -type CatalogSection = "foundation" | "controls" | "media" | "windows" | "modals" | "inspector" | "icons"; - -const engineAccentStyle = { - "--nodedc-accent-rgb": "255 47 146", - "--nodedc-on-accent-rgb": "11 17 23", -} as CSSProperties; +type CatalogSection = "foundation" | "controls" | "media" | "windows" | "modals" | "icons"; const accents: Array<{ label: string; value: RgbTuple; hex: string }> = [ { label: "NODE.DC", value: [255, 47, 146], hex: "#ff2f92" }, @@ -76,7 +71,7 @@ const sectionDefinitions: Record ))} - + +

Акцент сразу перекрашивает environment-controls, активные действия, заливку range, file action и состояния окон. Геометрия и semantic-status при этом не меняются.

@@ -427,19 +417,17 @@ export function CatalogApp() { -
+ onChange(event.target.value)} {...props} /> - + ( + + )} + > +
+
{ + if (disabled) return; + event.currentTarget.setPointerCapture(event.pointerId); + updateSpectrum(event); + }} + onPointerMove={(event) => { + if (event.currentTarget.hasPointerCapture(event.pointerId)) updateSpectrum(event); + }} + onPointerUp={(event) => { + if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId); + }} + onKeyDown={(event) => { + const delta = event.shiftKey ? 10 : 2; + if (event.key === "ArrowLeft") { event.preventDefault(); commit({ ...hsv, s: hsv.s - delta }); } + if (event.key === "ArrowRight") { event.preventDefault(); commit({ ...hsv, s: hsv.s + delta }); } + if (event.key === "ArrowDown") { event.preventDefault(); commit({ ...hsv, v: hsv.v - delta }); } + if (event.key === "ArrowUp") { event.preventDefault(); commit({ ...hsv, v: hsv.v + delta }); } + }} + >
+ +
+ {palettePresets.map((preset) => ( +
+
+ onChange(event.target.value)} + {...props} /> ); diff --git a/registry/components.json b/registry/components.json index 4efd49f..38cc7fc 100644 --- a/registry/components.json +++ b/registry/components.json @@ -73,7 +73,12 @@ "package": "@nodedc/ui-react", "exports": ["ColorField"], "domContract": ["nodedc-color-field"], - "summary": "Combined color picker and textual value for settings/inspectors." + "summary": "Engine/BIM-derived swatch and HEX field with a theme-neutral portal palette.", + "behavior": ["controlled HEX value", "saturation/value plane", "hue slider", "quick colors", "portal palette", "keyboard spectrum adjustment"], + "rules": [ + "Do not expose a browser-native color dialog as the product runtime UI.", + "The palette owns choice geometry; the consumer owns color validation, persistence and domain reaction." + ] }, { "id": "dropdown", @@ -196,7 +201,8 @@ "rules": [ "The bottom Launcher service rail is product-specific and is not part of the general application template.", "Desktop page gap is 20 px and navigation width follows the Launcher 332–352 px range.", - "Applications supply routes, profile data, stage media and panel content without changing shell geometry." + "Applications supply routes, profile data, stage media and panel content without changing shell geometry.", + "Light panels use the SEO white-glass surface tokens rather than a dark shell with inverted text." ] }, { @@ -206,10 +212,10 @@ "exports": ["Icon"], "domContract": ["svg using currentColor"], "summary": "Audited semantic icon subset shared by NODE.DC applications instead of product-local vendor imports.", - "variants": ["15 px", "17 px", "18 px"], + "variants": ["14 px", "16 px", "18 px"], "rules": [ "Use semantic names from registry/icons.json.", - "The containing component owns surface, hit target and state; the icon owns only the glyph and is optically scaled to 90% inside controls.", + "The containing component owns surface, hit target and state; the icon owns only the glyph and is optically scaled to 78% inside controls.", "Do not copy complete Lucide or Font Awesome catalogs into an application." ] }, diff --git a/registry/registry.json b/registry/registry.json index 2c4a738..f33a5fe 100644 --- a/registry/registry.json +++ b/registry/registry.json @@ -1,6 +1,6 @@ { "schemaVersion": "1.0.0", - "libraryVersion": "0.5.0", + "libraryVersion": "0.5.1", "name": "NODE.DC Design System", "purpose": "Canonical code-level UI system for current and future NODE.DC applications.", "packages": [