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

feat(ui): stabilize laboratory viewer primitives

Browse Source
This commit is contained in:
Codex
2026-08-24 22:31:35 +03:00
parent c7e136cc14
commit 6e7255ecdb
17 changed files with 590 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-core/styles.css
+125 -2
View File
@@ -15,13 +15,13 @@
box-sizing: border-box;
}
:where(.nodedc-button, .nodedc-icon-button, .nodedc-checker, .nodedc-select-trigger, .nodedc-select__toggle, .nodedc-dropdown-option, .nodedc-segmented__item, .nodedc-header__nav-item, .nodedc-inspector__section-trigger, .nodedc-window__close, .nodedc-workspace-window__action, .nodedc-workspace-window__resize) {
:where(.nodedc-button, .nodedc-icon-button, .nodedc-checker, .nodedc-select-trigger, .nodedc-select-inline, .nodedc-select__toggle, .nodedc-dropdown-option, .nodedc-segmented__item, .nodedc-header__nav-item, .nodedc-inspector__section-trigger, .nodedc-window__close, .nodedc-workspace-window__action, .nodedc-workspace-window__resize) {
border: 0;
outline: 0;
font: inherit;
}
:where(.nodedc-button, .nodedc-icon-button, .nodedc-checker, .nodedc-select-trigger, .nodedc-select__toggle, .nodedc-dropdown-option, .nodedc-segmented__item, .nodedc-header__nav-item, .nodedc-inspector__section-trigger, .nodedc-window__close, .nodedc-workspace-window__action, .nodedc-workspace-window__resize):focus-visible {
:where(.nodedc-button, .nodedc-icon-button, .nodedc-checker, .nodedc-select-trigger, .nodedc-select-inline, .nodedc-select__toggle, .nodedc-dropdown-option, .nodedc-segmented__item, .nodedc-header__nav-item, .nodedc-inspector__section-trigger, .nodedc-window__close, .nodedc-workspace-window__action, .nodedc-workspace-window__resize):focus-visible {
background-color: var(--nodedc-focus-surface);
box-shadow: var(--nodedc-glass-control-shadow), inset 0 0 0 1px rgb(var(--nodedc-accent-rgb) / 0.22);
}
@@ -73,6 +73,10 @@
border-radius: var(--nodedc-radius-modal);
}
.nodedc-glass[data-radius="pill"] {
border-radius: var(--nodedc-radius-circle);
}
.nodedc-glass[data-padding="sm"] {
padding: var(--nodedc-space-3);
}
@@ -255,6 +259,11 @@
color: var(--nodedc-text-primary);
}
.nodedc-icon-button[aria-pressed="true"] {
background: var(--nodedc-glass-control-active);
color: var(--nodedc-glass-control-active-text);
}
.nodedc-icon-button:active:not(:disabled) {
transform: translateY(1px);
}
@@ -2206,6 +2215,33 @@ textarea.nodedc-field__control {
transform: translateY(2px) rotate(225deg);
}
.nodedc-select-inline {
display: inline-flex;
min-height: var(--nodedc-control-height-compact);
align-items: center;
justify-content: center;
gap: var(--nodedc-space-2);
border-radius: var(--nodedc-radius-circle);
background: transparent;
color: var(--nodedc-text-secondary);
padding: 0 var(--nodedc-space-3);
font-size: var(--nodedc-font-size-sm);
font-weight: var(--nodedc-font-weight-strong);
line-height: 1;
cursor: pointer;
}
.nodedc-select-inline:hover:not(:disabled),
.nodedc-select-inline[aria-expanded="true"] {
background: var(--nodedc-glass-control-hover);
color: var(--nodedc-text-primary);
}
.nodedc-select-inline:disabled {
opacity: 0.42;
cursor: not-allowed;
}
.nodedc-select__toggle[aria-expanded="true"] .nodedc-select-trigger__chevron {
transform: translateY(2px) rotate(225deg);
}
@@ -2829,6 +2865,93 @@ textarea.nodedc-field__control {
color: var(--nodedc-text-primary);
}
.nodedc-split-pane {
--nodedc-split-pane-primary: 50%;
position: relative;
display: grid;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
}
.nodedc-split-pane[data-orientation="vertical"] {
grid-template-columns: minmax(0, var(--nodedc-split-pane-primary)) minmax(0, 1fr);
}
.nodedc-split-pane[data-orientation="horizontal"] {
grid-template-rows: minmax(0, var(--nodedc-split-pane-primary)) minmax(0, 1fr);
}
.nodedc-split-pane__panel {
min-width: 0;
min-height: 0;
overflow: hidden;
}
.nodedc-split-pane__separator {
position: absolute;
z-index: 5;
border: 0;
outline: 0;
background: transparent;
padding: 0;
touch-action: none;
}
.nodedc-split-pane[data-orientation="vertical"] > .nodedc-split-pane__separator {
top: 0;
bottom: 0;
left: var(--nodedc-split-pane-primary);
width: 0.9rem;
cursor: col-resize;
transform: translateX(-50%);
}
.nodedc-split-pane[data-orientation="horizontal"] > .nodedc-split-pane__separator {
right: 0;
bottom: calc(100% - var(--nodedc-split-pane-primary));
left: 0;
height: 0.9rem;
cursor: row-resize;
transform: translateY(50%);
}
.nodedc-split-pane__separator::before {
position: absolute;
background: var(--nodedc-glass-outline);
content: "";
transition: background var(--nodedc-duration-fast) var(--nodedc-ease-standard), box-shadow var(--nodedc-duration-fast) var(--nodedc-ease-standard);
}
.nodedc-split-pane[data-orientation="vertical"] > .nodedc-split-pane__separator::before {
top: 0;
bottom: 0;
left: 50%;
width: 1px;
transform: translateX(-50%);
}
.nodedc-split-pane[data-orientation="horizontal"] > .nodedc-split-pane__separator::before {
right: 0;
bottom: 50%;
left: 0;
height: 1px;
transform: translateY(50%);
}
.nodedc-split-pane__separator:hover::before,
.nodedc-split-pane__separator:focus-visible::before,
.nodedc-split-pane[data-dragging="true"] > .nodedc-split-pane__separator::before {
background: rgb(var(--nodedc-accent-rgb));
box-shadow: 0 0 0 2px rgb(var(--nodedc-accent-rgb) / 0.16);
}
.nodedc-split-pane[data-dragging="true"] {
user-select: none;
}
.nodedc-toolbar-wrap {
position: fixed;
z-index: calc(var(--nodedc-layer-header) + 20);