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

Establish NODE.DC design system baseline

Browse Source
This commit is contained in:
DCCONSTRUCTIONS
2026-07-10 02:34:36 +03:00
commit 73629d68c3
63 changed files with 6701 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/tokens/package.json
+11
View File
@@ -0,0 +1,11 @@
{
"name": "@nodedc/tokens",
"version": "0.1.0",
"type": "module",
"files": ["tokens.json", "tokens.css", "themes.css"],
"exports": {
"./tokens.json": "./tokens.json",
"./tokens.css": "./tokens.css",
"./themes.css": "./themes.css"
}
}
packages/tokens/themes.css
+67
View File
@@ -0,0 +1,67 @@
:root,
[data-nodedc-theme="dark"] {
color-scheme: dark;
--nodedc-accent-rgb: 195 255 102;
--nodedc-on-accent-rgb: 11 17 23;
--nodedc-danger-rgb: 255 116 116;
--nodedc-warning-rgb: 255 209 102;
--nodedc-success-rgb: 181 255 90;
--nodedc-canvas: #050506;
--nodedc-canvas-soft: #0b0b0d;
--nodedc-text-primary: rgba(247, 248, 244, 0.96);
--nodedc-text-secondary: rgba(247, 248, 244, 0.72);
--nodedc-text-muted: rgba(247, 248, 244, 0.48);
--nodedc-text-disabled: rgba(247, 248, 244, 0.34);
--nodedc-glass-panel-bg: rgba(28, 28, 30, 0.72);
--nodedc-glass-panel-bg-strong: rgba(18, 18, 21, 0.88);
--nodedc-glass-panel-bg-soft: rgba(42, 42, 46, 0.5);
--nodedc-glass-panel-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)), var(--nodedc-glass-panel-bg);
--nodedc-glass-panel-surface-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.018)), var(--nodedc-glass-panel-bg-strong);
--nodedc-glass-control-bg: rgba(110, 110, 110, 0.07);
--nodedc-glass-control-hover: rgba(129, 129, 129, 0.13);
--nodedc-glass-control-active: rgba(255, 255, 255, 0.92);
--nodedc-glass-control-active-text: rgba(8, 8, 10, 0.96);
--nodedc-field-bg: rgba(20, 20, 27, 0.96);
--nodedc-overlay-bg: rgba(0, 0, 0, 0.46);
--nodedc-glass-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.026));
--nodedc-glass-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
--nodedc-glass-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 22px 72px rgba(0, 0, 0, 0.42);
--nodedc-glass-dropdown-shadow: 0 22px 60px rgba(0, 0, 0, 0.42), 0 6px 18px rgba(0, 0, 0, 0.2);
--nodedc-focus-surface: rgba(var(--nodedc-accent-rgb), 0.14);
}
[data-nodedc-theme="light"] {
color-scheme: light;
--nodedc-accent-rgb: 32 32 34;
--nodedc-on-accent-rgb: 247 248 244;
--nodedc-danger-rgb: 205 47 67;
--nodedc-warning-rgb: 173 111 0;
--nodedc-success-rgb: 46 125 76;
--nodedc-canvas: #ececec;
--nodedc-canvas-soft: #f4f4f4;
--nodedc-text-primary: rgba(18, 20, 22, 0.96);
--nodedc-text-secondary: rgba(18, 20, 22, 0.7);
--nodedc-text-muted: rgba(18, 20, 22, 0.48);
--nodedc-text-disabled: rgba(18, 20, 22, 0.32);
--nodedc-glass-panel-bg: rgba(255, 255, 255, 0.48);
--nodedc-glass-panel-bg-strong: rgba(255, 255, 255, 0.72);
--nodedc-glass-panel-bg-soft: rgba(255, 255, 255, 0.34);
--nodedc-glass-panel-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.22)), var(--nodedc-glass-panel-bg);
--nodedc-glass-panel-surface-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.34)), var(--nodedc-glass-panel-bg-strong);
--nodedc-glass-control-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.22)), rgba(255, 255, 255, 0.38);
--nodedc-glass-control-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)), rgba(255, 255, 255, 0.54);
--nodedc-glass-control-active: rgba(32, 32, 34, 0.96);
--nodedc-glass-control-active-text: rgba(247, 248, 244, 0.96);
--nodedc-field-bg: rgba(255, 255, 255, 0.58);
--nodedc-overlay-bg: rgba(24, 32, 29, 0.22);
--nodedc-glass-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(24, 32, 29, 0.1));
--nodedc-glass-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
--nodedc-glass-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 22px 76px rgba(24, 32, 29, 0.16);
--nodedc-glass-dropdown-shadow: 0 22px 60px rgba(24, 32, 29, 0.2), 0 6px 18px rgba(24, 32, 29, 0.1);
--nodedc-focus-surface: rgba(var(--nodedc-accent-rgb), 0.1);
}
packages/tokens/tokens.css
+56
View File
@@ -0,0 +1,56 @@
:root,
[data-nodedc-ui] {
--nodedc-radius-modal: 1.75rem;
--nodedc-radius-panel: 1.375rem;
--nodedc-radius-card: 1.35rem;
--nodedc-radius-control: 1.25rem;
--nodedc-radius-control-compact: 0.875rem;
--nodedc-radius-option: 0.9rem;
--nodedc-radius-circle: 999px;
--nodedc-control-height: 2.875rem;
--nodedc-control-height-compact: 2.375rem;
--nodedc-icon-button-size: 2.875rem;
--nodedc-header-row-height: 3rem;
--nodedc-header-pill-height: 3.45rem;
--nodedc-header-logo-width: 7.25rem;
--nodedc-header-logo-height: 1.79rem;
--nodedc-inspector-width: 24.375rem;
--nodedc-space-1: 0.25rem;
--nodedc-space-2: 0.5rem;
--nodedc-space-3: 0.75rem;
--nodedc-space-4: 1rem;
--nodedc-space-5: 1.25rem;
--nodedc-space-6: 1.5rem;
--nodedc-space-8: 2rem;
--nodedc-page-padding: 1.25rem;
--nodedc-blur-control: 24px;
--nodedc-blur-panel: 44px;
--nodedc-blur-modal: 64px;
--nodedc-blur-dropdown: 44px;
--nodedc-duration-fast: 120ms;
--nodedc-duration-normal: 180ms;
--nodedc-duration-slow: 260ms;
--nodedc-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
--nodedc-layer-base: 0;
--nodedc-layer-panel: 100;
--nodedc-layer-header: 400;
--nodedc-layer-overlay: 800;
--nodedc-layer-popover: 900;
--nodedc-layer-toast: 950;
--nodedc-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--nodedc-font-size-xs: 0.6875rem;
--nodedc-font-size-sm: 0.75rem;
--nodedc-font-size-md: 0.8125rem;
--nodedc-font-size-lg: 1rem;
--nodedc-font-size-title: 1.125rem;
--nodedc-font-weight-regular: 450;
--nodedc-font-weight-medium: 620;
--nodedc-font-weight-strong: 760;
}
packages/tokens/tokens.json
+61
View File
@@ -0,0 +1,61 @@
{
"$schema": "https://design-tokens.github.io/community-group/format/",
"schemaVersion": "1.0.0",
"name": "NODE.DC Design Tokens",
"color": {
"accentRgb": { "$type": "color", "$value": "rgb(195 255 102)" },
"onAccentRgb": { "$type": "color", "$value": "rgb(11 17 23)" },
"dangerRgb": { "$type": "color", "$value": "rgb(255 116 116)" },
"warningRgb": { "$type": "color", "$value": "rgb(255 209 102)" },
"successRgb": { "$type": "color", "$value": "rgb(181 255 90)" }
},
"radius": {
"modal": { "$type": "dimension", "$value": "28px" },
"panel": { "$type": "dimension", "$value": "22px" },
"card": { "$type": "dimension", "$value": "21.6px" },
"control": { "$type": "dimension", "$value": "20px" },
"controlCompact": { "$type": "dimension", "$value": "14px" },
"option": { "$type": "dimension", "$value": "14.4px" },
"circle": { "$type": "dimension", "$value": "999px" }
},
"size": {
"control": { "$type": "dimension", "$value": "46px" },
"controlCompact": { "$type": "dimension", "$value": "38px" },
"iconButton": { "$type": "dimension", "$value": "46px" },
"headerRow": { "$type": "dimension", "$value": "48px" },
"headerPill": { "$type": "dimension", "$value": "55.2px" },
"logoWidth": { "$type": "dimension", "$value": "116px" },
"logoHeight": { "$type": "dimension", "$value": "28.64px" },
"inspectorWidth": { "$type": "dimension", "$value": "390px" }
},
"space": {
"1": { "$type": "dimension", "$value": "4px" },
"2": { "$type": "dimension", "$value": "8px" },
"3": { "$type": "dimension", "$value": "12px" },
"4": { "$type": "dimension", "$value": "16px" },
"5": { "$type": "dimension", "$value": "20px" },
"6": { "$type": "dimension", "$value": "24px" },
"8": { "$type": "dimension", "$value": "32px" },
"page": { "$type": "dimension", "$value": "20px" }
},
"blur": {
"control": { "$type": "dimension", "$value": "24px" },
"panel": { "$type": "dimension", "$value": "44px" },
"modal": { "$type": "dimension", "$value": "64px" },
"dropdown": { "$type": "dimension", "$value": "44px" }
},
"duration": {
"fast": { "$type": "duration", "$value": "120ms" },
"normal": { "$type": "duration", "$value": "180ms" },
"slow": { "$type": "duration", "$value": "260ms" }
},
"layer": {
"base": { "$type": "number", "$value": 0 },
"panel": { "$type": "number", "$value": 100 },
"header": { "$type": "number", "$value": 400 },
"overlay": { "$type": "number", "$value": 800 },
"popover": { "$type": "number", "$value": 900 },
"toast": { "$type": "number", "$value": 950 }
}
}