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

Add Launcher application template and icon system

Browse Source
This commit is contained in:
DCCONSTRUCTIONS
2026-07-10 11:56:27 +03:00
parent 4a9ad01ea6
commit 9261d3af36
30 changed files with 1466 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-core/package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@nodedc/ui-core",
"version": "0.2.0",
"version": "0.3.0",
"type": "module",
"files": ["dist", "styles.css"],
"main": "./dist/index.js",
@@ -17,6 +17,6 @@
"typecheck": "tsc -p tsconfig.json --noEmit"
},
"dependencies": {
"@nodedc/tokens": "0.2.0"
"@nodedc/tokens": "0.3.0"
}
}
packages/ui-core/styles.css
+276
View File
@@ -532,6 +532,14 @@ textarea.nodedc-field__control {
padding: 1rem var(--nodedc-page-padding) 0.75rem;
}
.nodedc-header-shell[data-fixed="true"] {
position: fixed;
top: 0;
left: 50%;
margin-inline: 0;
transform: translateX(-50%);
}
.nodedc-header {
display: grid;
min-height: 4.25rem;
@@ -603,6 +611,7 @@ textarea.nodedc-field__control {
min-height: calc(var(--nodedc-header-pill-height) - 0.64rem);
align-items: center;
justify-content: center;
gap: 0.45rem;
border: 0;
border-radius: var(--nodedc-radius-circle);
outline: 0;
@@ -691,6 +700,189 @@ textarea.nodedc-field__control {
color: var(--nodedc-glass-control-active-text);
}
.nodedc-app-shell {
--nodedc-app-header-height: 6rem;
--nodedc-app-page-pad: 1.25rem;
--nodedc-app-panel-gap: 1.25rem;
--nodedc-app-nav-width: clamp(20.75rem, 19.5vw, 22rem);
--nodedc-app-content-width: calc(
100vw - (var(--nodedc-app-page-pad) * 2) - (var(--nodedc-app-panel-gap) * 2) - (var(--nodedc-app-nav-width) * 2)
);
min-height: 100vh;
overflow: hidden;
background: var(--nodedc-canvas);
}
.nodedc-app-shell__main {
position: relative;
height: calc(100vh - var(--nodedc-app-header-height));
min-height: 0;
margin-top: var(--nodedc-app-header-height);
overflow: hidden;
}
.nodedc-app-shell__stage {
position: absolute;
inset: 0;
overflow: hidden;
padding: 0 var(--nodedc-app-page-pad) var(--nodedc-app-page-pad);
transition: padding 440ms cubic-bezier(0.22, 1, 0.36, 1), transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nodedc-app-shell__stage > * {
width: 100%;
height: 100%;
}
.nodedc-app-shell__navigation,
.nodedc-app-shell__content {
position: absolute;
z-index: var(--nodedc-layer-panel);
top: 0;
bottom: var(--nodedc-app-page-pad);
min-height: 0;
}
.nodedc-app-shell__navigation {
left: var(--nodedc-app-page-pad);
width: var(--nodedc-app-nav-width);
}
.nodedc-app-shell__content {
left: calc(var(--nodedc-app-page-pad) + var(--nodedc-app-nav-width) + var(--nodedc-app-panel-gap));
width: max(32rem, var(--nodedc-app-content-width));
transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1), right 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nodedc-app-shell[data-navigation-open="true"] .nodedc-app-shell__stage {
padding-left: calc(var(--nodedc-app-page-pad) + var(--nodedc-app-nav-width) + var(--nodedc-app-panel-gap));
}
.nodedc-app-shell[data-content-open="true"]:not([data-content-expanded="true"]) .nodedc-app-shell__stage {
padding-left: calc(
var(--nodedc-app-page-pad) + var(--nodedc-app-nav-width) + var(--nodedc-app-panel-gap) +
max(32rem, var(--nodedc-app-content-width)) + var(--nodedc-app-panel-gap)
);
}
.nodedc-app-shell[data-content-open="true"][data-content-expanded="true"] .nodedc-app-shell__content {
right: var(--nodedc-app-page-pad);
width: auto;
}
.nodedc-app-shell[data-content-open="true"][data-content-expanded="true"] .nodedc-app-shell__stage {
pointer-events: none;
transform: translateX(calc(100vw + var(--nodedc-app-page-pad)));
}
.nodedc-application-panel {
display: grid;
width: 100%;
height: 100%;
min-height: 0;
grid-template-rows: auto minmax(0, 1fr);
gap: 0.75rem;
overflow: hidden;
border: 0;
border-radius: var(--nodedc-radius-card);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
rgba(10, 10, 13, 0.9);
color: var(--nodedc-text-primary);
padding: 1rem;
box-shadow: 0 34px 110px rgba(0, 0, 0, 0.42);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
animation: nodedc-application-panel-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes nodedc-application-panel-in {
from { opacity: 0; transform: translateX(-1.1rem); }
to { opacity: 1; transform: translateX(0); }
}
.nodedc-application-panel__head {
display: flex;
min-height: 3.55rem;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.nodedc-application-panel__titles {
display: grid;
min-width: 0;
gap: 0.24rem;
padding: 0.2rem 0.25rem;
}
.nodedc-application-panel__titles span {
color: var(--nodedc-text-muted);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.nodedc-application-panel__titles h1,
.nodedc-application-panel__titles p {
margin: 0;
}
.nodedc-application-panel__titles h1 {
font-size: 1.15rem;
font-weight: 780;
line-height: 1.15;
}
.nodedc-application-panel__titles p {
max-width: 42rem;
color: var(--nodedc-text-muted);
font-size: 0.75rem;
line-height: 1.35;
}
.nodedc-application-panel__actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 0.45rem;
}
.nodedc-application-panel__action {
display: grid;
width: 2.92rem;
height: 2.92rem;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--nodedc-radius-circle);
outline: 0;
background: transparent;
color: var(--nodedc-text-secondary);
cursor: pointer;
}
.nodedc-application-panel__action:hover,
.nodedc-application-panel__action:focus-visible {
border-color: rgba(255, 255, 255, 0.3);
background: var(--nodedc-glass-control-hover);
color: var(--nodedc-text-primary);
}
.nodedc-application-panel[data-expanded="true"] .nodedc-application-panel__action:first-child {
border-color: transparent;
background: var(--nodedc-glass-control-active);
color: var(--nodedc-glass-control-active-text);
}
.nodedc-application-panel__body {
min-height: 0;
overflow: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.nodedc-admin-panel {
position: relative;
display: grid;
@@ -713,6 +905,10 @@ textarea.nodedc-field__control {
animation: nodedc-admin-panel-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.nodedc-admin-panel:not([data-has-contexts="true"]) {
grid-template-rows: auto minmax(0, 1fr) auto;
}
@keyframes nodedc-admin-panel-in {
from { opacity: 0; transform: translateX(-1.6rem); }
to { opacity: 1; transform: translateX(0); }
@@ -915,6 +1111,7 @@ textarea.nodedc-field__control {
}
.nodedc-admin-panel__nav-item {
outline: 0;
cursor: pointer;
transition: background 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease;
}
@@ -933,6 +1130,15 @@ textarea.nodedc-field__control {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.048), 0 10px 22px rgba(0, 0, 0, 0.12);
}
.nodedc-admin-panel__nav-item:focus-visible {
outline: 0;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 22px rgba(0, 0, 0, 0.12);
}
.nodedc-app-shell__navigation > .nodedc-admin-panel {
width: 100%;
}
.nodedc-admin-panel__nav-icon {
position: absolute;
top: 50%;
@@ -1514,9 +1720,30 @@ textarea.nodedc-field__control {
font-size: var(--nodedc-font-size-lg);
}
@media (max-width: 1100px) {
.nodedc-app-shell[data-content-open="true"] .nodedc-app-shell__content {
right: var(--nodedc-app-page-pad);
width: auto;
}
.nodedc-app-shell[data-content-open="true"] .nodedc-app-shell__stage {
pointer-events: none;
transform: translateX(calc(100vw + var(--nodedc-app-page-pad)));
}
}
@media (max-width: 760px) {
.nodedc-header-shell {
width: 100%;
padding: 0.85rem 1rem 0.65rem;
background: var(--nodedc-canvas);
}
.nodedc-header {
min-height: 8.6rem;
grid-template-columns: minmax(0, 1fr) auto;
align-content: start;
row-gap: 0.65rem;
}
.nodedc-header__center {
@@ -1530,6 +1757,54 @@ textarea.nodedc-field__control {
min-width: max-content;
}
.nodedc-app-shell {
--nodedc-app-header-height: 10.25rem;
--nodedc-app-page-pad: 0.7rem;
--nodedc-app-panel-gap: 0.7rem;
}
.nodedc-app-shell__stage {
padding: 0 var(--nodedc-app-page-pad) var(--nodedc-app-page-pad);
}
.nodedc-app-shell__navigation,
.nodedc-app-shell__content {
right: var(--nodedc-app-page-pad);
bottom: var(--nodedc-app-page-pad);
left: var(--nodedc-app-page-pad);
width: auto;
}
.nodedc-app-shell[data-navigation-open="true"] .nodedc-app-shell__stage,
.nodedc-app-shell[data-content-open="true"] .nodedc-app-shell__stage {
padding-left: var(--nodedc-app-page-pad);
pointer-events: none;
transform: translateX(calc(100vw + var(--nodedc-app-page-pad)));
}
.nodedc-app-shell[data-content-open="true"] .nodedc-app-shell__navigation {
opacity: 0;
pointer-events: none;
}
.nodedc-application-panel,
.nodedc-admin-panel {
width: 100%;
max-width: none;
}
.nodedc-application-panel {
padding: 0.75rem;
}
.nodedc-application-panel__titles p {
display: none;
}
.nodedc-application-panel__action:first-child {
display: none;
}
.nodedc-window[data-placement="end"] {
width: calc(100vw - 1.75rem);
max-height: calc(100vh - 1.75rem);
@@ -1554,6 +1829,7 @@ textarea.nodedc-field__control {
.nodedc-dropdown-surface,
.nodedc-overlay,
.nodedc-window,
.nodedc-application-panel,
.nodedc-inspector__section-content {
animation: none;
}