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

Make application shell components package-native

Browse Source
This commit is contained in:
DCCONSTRUCTIONS
2026-07-10 12:41:12 +03:00
parent 9261d3af36
commit ebae662b52
52 changed files with 1036 additions and 185 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.3.0",
"version": "0.4.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.3.0"
"@nodedc/tokens": "0.4.0"
}
}
packages/ui-core/src/index.ts
+3 -3
View File
@@ -1,4 +1,4 @@
export * from "./accent";
export * from "./floating";
export * from "./theme";
export * from "./accent.js";
export * from "./floating.js";
export * from "./theme.js";
packages/ui-core/src/theme.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { createAccentVariables, type RgbTuple } from "./accent";
import { createAccentVariables, type RgbTuple } from "./accent.js";
export type NodedcTheme = "dark" | "light";
packages/ui-core/styles.css
+354 -11
View File
@@ -277,6 +277,299 @@ textarea.nodedc-field__control {
resize: vertical;
}
.nodedc-media-field {
display: grid;
min-width: 0;
gap: 0.42rem;
}
.nodedc-media-field__label-row {
display: flex;
min-width: 0;
align-items: baseline;
justify-content: space-between;
gap: var(--nodedc-space-2);
padding-inline: 0.15rem;
}
.nodedc-media-field__label,
.nodedc-media-field__kind {
color: var(--nodedc-text-secondary);
font-size: var(--nodedc-font-size-sm);
font-weight: var(--nodedc-font-weight-medium);
}
.nodedc-media-field__kind {
border-radius: var(--nodedc-radius-circle);
background: rgba(255, 255, 255, 0.07);
padding: 0.16rem 0.56rem;
color: var(--nodedc-text-muted);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.05em;
line-height: 1;
text-transform: uppercase;
}
.nodedc-media-control {
display: grid;
min-height: 3.35rem;
min-width: 0;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 0.22rem;
overflow: hidden;
border-radius: var(--nodedc-radius-circle);
background: var(--nodedc-field-bg);
padding: 0.25rem;
box-shadow: var(--nodedc-glass-control-shadow);
}
.nodedc-media-file {
display: flex;
min-width: 0;
height: 100%;
align-items: center;
gap: 0.7rem;
padding-left: 0.15rem;
}
.nodedc-media-file[hidden],
.nodedc-media-url[hidden] {
display: none;
}
.nodedc-media-file input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.nodedc-media-file__button {
display: inline-flex;
min-height: 2.78rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border-radius: var(--nodedc-radius-circle);
background: rgba(255, 255, 255, 0.92);
color: rgba(8, 8, 10, 0.96);
padding: 0 1rem;
font-size: 0.78rem;
font-weight: 850;
white-space: nowrap;
cursor: pointer;
}
.nodedc-media-file__button:hover {
background: #fff;
}
.nodedc-media-file__name {
min-width: 0;
overflow: hidden;
color: var(--nodedc-text-muted);
font-size: 0.78rem;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.nodedc-media-url {
min-width: 0;
height: 100%;
border: 0;
border-radius: var(--nodedc-radius-circle);
outline: 0;
background: transparent;
color: var(--nodedc-text-primary);
padding: 0 0.82rem;
font: inherit;
font-size: 0.78rem;
}
.nodedc-media-url::placeholder {
color: var(--nodedc-text-muted);
}
.nodedc-media-source-switch {
display: inline-flex;
align-items: center;
gap: 0.12rem;
}
.nodedc-media-source-button {
display: grid;
width: 2.78rem;
height: 2.78rem;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--nodedc-radius-circle);
background: transparent;
color: var(--nodedc-text-secondary);
font: inherit;
font-size: 0.68rem;
font-weight: 800;
cursor: pointer;
}
.nodedc-media-source-button:hover {
background: var(--nodedc-glass-control-hover);
color: var(--nodedc-text-primary);
}
.nodedc-media-source-button[data-active="true"] {
border-color: rgba(255, 255, 255, 0.92);
background: rgba(255, 255, 255, 0.92);
color: rgba(8, 8, 10, 0.96);
}
.nodedc-media-preview {
position: relative;
display: grid;
width: 2.78rem;
min-width: 2.78rem;
height: 2.78rem;
place-items: center;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--nodedc-radius-circle);
background:
linear-gradient(45deg, rgba(255, 255, 255, 0.16) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.16) 75%),
linear-gradient(45deg, rgba(255, 255, 255, 0.16) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.16) 75%),
rgba(18, 18, 20, 0.92);
background-position: 0 0, 6px 6px, 0 0;
background-size: 12px 12px, 12px 12px, auto;
color: var(--nodedc-text-secondary);
}
.nodedc-media-preview img,
.nodedc-media-preview video {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
}
.nodedc-media-field__path,
.nodedc-media-field__hint,
.nodedc-media-field__error {
color: var(--nodedc-text-muted);
font-size: var(--nodedc-font-size-xs);
line-height: 1.35;
}
.nodedc-media-field__error {
color: rgb(var(--nodedc-danger-rgb));
}
.nodedc-settings-card {
display: grid;
min-width: 0;
gap: 1rem;
border-radius: var(--nodedc-radius-card);
background: var(--nodedc-glass-control-bg);
padding: 1rem;
}
.nodedc-settings-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.nodedc-settings-card__titles {
display: grid;
min-width: 0;
gap: 0.22rem;
}
.nodedc-settings-card__titles > span {
color: var(--nodedc-text-muted);
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.nodedc-settings-card__titles h2,
.nodedc-settings-card__titles p {
margin: 0;
}
.nodedc-settings-card__titles h2 {
color: var(--nodedc-text-primary);
font-size: 1rem;
line-height: 1.25;
}
.nodedc-settings-card__titles p {
color: var(--nodedc-text-muted);
font-size: 0.75rem;
line-height: 1.4;
}
.nodedc-settings-card__actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 0.4rem;
}
.nodedc-settings-card__body {
display: grid;
min-width: 0;
gap: 0.8rem;
}
.nodedc-switch {
display: inline-flex;
width: max-content;
align-items: center;
gap: 0.48rem;
border: 0;
background: transparent;
color: var(--nodedc-text-secondary);
font: inherit;
font-size: var(--nodedc-font-size-sm);
font-weight: var(--nodedc-font-weight-strong);
cursor: pointer;
}
.nodedc-switch__track {
display: flex;
width: 2rem;
height: 1.12rem;
align-items: center;
border-radius: var(--nodedc-radius-circle);
background: rgba(255, 255, 255, 0.14);
padding: 0.14rem;
transition: background var(--nodedc-duration-normal) var(--nodedc-ease-standard);
}
.nodedc-switch__track > span {
width: 0.84rem;
height: 0.84rem;
border-radius: var(--nodedc-radius-circle);
background: var(--nodedc-text-primary);
transition: transform var(--nodedc-duration-normal) var(--nodedc-ease-standard);
}
.nodedc-switch[aria-checked="true"] .nodedc-switch__track {
background: rgb(var(--nodedc-accent-rgb));
}
.nodedc-switch[aria-checked="true"] .nodedc-switch__track > span {
transform: translateX(0.88rem);
}
.nodedc-checker {
display: grid;
width: 100%;
@@ -541,8 +834,16 @@ textarea.nodedc-field__control {
}
.nodedc-header {
display: grid;
display: flex;
min-height: 4.25rem;
width: 100%;
flex-direction: column;
}
.nodedc-header__row {
display: grid;
min-height: var(--nodedc-header-row-height);
width: 100%;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: var(--nodedc-space-4);
@@ -589,26 +890,27 @@ textarea.nodedc-field__control {
.nodedc-header__profile {
display: inline-flex;
height: var(--nodedc-header-pill-height);
min-height: var(--nodedc-header-pill-height);
align-items: center;
gap: 0.2rem;
border-radius: var(--nodedc-radius-circle);
background: var(--nodedc-glass-panel-bg-soft);
background: var(--nodedc-header-pill-bg);
padding: 0.32rem;
box-shadow: var(--nodedc-glass-control-shadow);
}
.nodedc-header__profile .nodedc-icon-button {
width: var(--nodedc-header-row-height);
height: var(--nodedc-header-row-height);
flex-basis: var(--nodedc-header-row-height);
width: var(--nodedc-header-control-height);
height: var(--nodedc-header-control-height);
flex-basis: var(--nodedc-header-control-height);
background: transparent;
box-shadow: none;
}
.nodedc-header__profile-button {
display: inline-flex;
min-height: calc(var(--nodedc-header-pill-height) - 0.64rem);
min-height: var(--nodedc-header-control-height);
align-items: center;
justify-content: center;
gap: 0.45rem;
@@ -639,8 +941,8 @@ textarea.nodedc-field__control {
overflow: hidden;
border-radius: var(--nodedc-radius-circle);
background:
radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.72), transparent 24%),
linear-gradient(135deg, rgb(166, 194, 109), rgb(142, 123, 139));
radial-gradient(circle at 70% 18%, rgba(255, 255, 255, 0.8), transparent 24%),
linear-gradient(135deg, #c8c9cb, #8d8f96 55%, #f1f1f1);
color: rgba(8, 8, 10, 0.96);
font-size: 0.72rem;
font-weight: 800;
@@ -660,15 +962,23 @@ textarea.nodedc-field__control {
place-items: center;
overflow: hidden;
border-radius: var(--nodedc-radius-circle);
background: var(--nodedc-canvas);
background: transparent;
color: var(--nodedc-text-primary);
font-size: var(--nodedc-font-size-sm);
font-weight: var(--nodedc-font-weight-strong);
}
.nodedc-header__workspace img {
display: block;
width: 1.75rem;
height: 1.75rem;
object-fit: contain;
}
.nodedc-header__workspace[data-kind="avatar"] img {
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
}
@@ -676,9 +986,20 @@ textarea.nodedc-field__control {
display: contents;
}
.nodedc-header-navigation {
display: inline-flex;
min-height: var(--nodedc-header-pill-height);
align-items: center;
gap: 0.18rem;
border-radius: var(--nodedc-radius-circle);
background: var(--nodedc-header-pill-bg);
padding: 0.32rem;
box-shadow: none;
}
.nodedc-header__nav-item {
display: inline-flex;
min-height: calc(var(--nodedc-header-pill-height) - 0.64rem);
min-height: var(--nodedc-header-control-height);
align-items: center;
justify-content: center;
border-radius: var(--nodedc-radius-circle);
@@ -1741,6 +2062,10 @@ textarea.nodedc-field__control {
.nodedc-header {
min-height: 8.6rem;
}
.nodedc-header__row {
min-height: 8.6rem;
grid-template-columns: minmax(0, 1fr) auto;
align-content: start;
row-gap: 0.65rem;
@@ -1753,7 +2078,8 @@ textarea.nodedc-field__control {
overflow-x: auto;
}
.nodedc-header__center .nodedc-segmented {
.nodedc-header__center .nodedc-segmented,
.nodedc-header__center .nodedc-header-navigation {
min-width: max-content;
}
@@ -1823,6 +2149,21 @@ textarea.nodedc-field__control {
align-items: stretch;
gap: var(--nodedc-space-2);
}
.nodedc-media-control {
grid-template-columns: minmax(0, 1fr) auto;
border-radius: var(--nodedc-radius-card);
}
.nodedc-media-file,
.nodedc-media-url {
grid-column: 1 / -1;
min-height: 2.78rem;
}
.nodedc-media-source-switch {
justify-self: start;
}
}
@media (prefers-reduced-motion: reduce) {
@@ -1837,6 +2178,8 @@ textarea.nodedc-field__control {
.nodedc-button,
.nodedc-icon-button,
.nodedc-checker,
.nodedc-media-source-button,
.nodedc-switch,
.nodedc-select-trigger,
.nodedc-segmented__item {
transition: none;