@stn-uiux/pub-ui 0.1.85 → 0.1.87
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-BYGKJSDN.js → chunk-6HRKKRTT.js} +18 -3
- package/dist/chunk-6HRKKRTT.js.map +1 -0
- package/dist/{chunk-YN774RCQ.js → chunk-6TQ4O7BK.js} +2 -2
- package/dist/chunk-7OZGRHFD.js +15 -0
- package/dist/chunk-7OZGRHFD.js.map +1 -0
- package/dist/{chunk-W7K3FSAX.js → chunk-F5WWHWEU.js} +9 -1
- package/dist/chunk-F5WWHWEU.js.map +1 -0
- package/dist/chunk-I2Y7E4TU.js +15 -0
- package/dist/chunk-I2Y7E4TU.js.map +1 -0
- package/dist/chunk-PXTPAYC3.js +1 -0
- package/dist/{chunk-SOEBXG3T.js → chunk-U66BCO23.js} +2 -2
- package/dist/chunk-ZGYPJEU3.js +9 -0
- package/dist/chunk-ZGYPJEU3.js.map +1 -0
- package/dist/cli.js +7 -7
- package/dist/data/index.d.ts +3 -1
- package/dist/data/index.js +61 -47
- package/dist/data/stnColorPalette.js +2 -2
- package/dist/data/stnFeedbackColors.d.ts +7 -0
- package/dist/data/stnFeedbackColors.js +1 -1
- package/dist/data/stnList.d.ts +19 -0
- package/dist/data/stnList.js +9 -0
- package/dist/data/stnList.js.map +1 -0
- package/dist/data/stnMenu.d.ts +22 -0
- package/dist/data/stnMenu.js +9 -0
- package/dist/data/stnMenu.js.map +1 -0
- package/dist/data/stnPackageVersion.d.ts +2 -2
- package/dist/data/stnPackageVersion.js +1 -1
- package/dist/data/stnSplitView.d.ts +3 -1
- package/dist/data/stnSplitView.js +3 -1
- package/dist/data/stnToast.js +2 -2
- package/dist/index.d.ts +3 -1
- package/dist/index.js +61 -47
- package/package.json +1 -1
- package/styles/components/stn-badge.css +17 -0
- package/styles/components/stn-breadcrumb.css +9 -0
- package/styles/components/stn-card.css +32 -0
- package/styles/components/stn-drawer.css +7 -0
- package/styles/components/stn-list.css +430 -0
- package/styles/components/stn-menu.css +467 -0
- package/styles/components/stn-popup.css +32 -0
- package/styles/components/stn-topology.css +93 -1
- package/styles/foundations/stn-typography.css +1 -0
- package/styles/layouts/stn-container.css +49 -5
- package/styles/layouts/stn-layer1-content.css +4 -1
- package/styles/patterns/stn-floating-toolbar.css +39 -0
- package/styles/patterns/stn-split-view.css +68 -0
- package/styles/style-pub.css +2 -0
- package/styles/tokens/stn-colors-semantic.css +36 -4
- package/styles/tokens/stn-size-semantic.css +22 -4
- package/styles/tokens/stn-size.css +1 -0
- package/dist/chunk-5QPBSOJ6.js +0 -9
- package/dist/chunk-5QPBSOJ6.js.map +0 -1
- package/dist/chunk-BYGKJSDN.js.map +0 -1
- package/dist/chunk-ERZPIKPF.js +0 -1
- package/dist/chunk-W7K3FSAX.js.map +0 -1
- /package/dist/{chunk-YN774RCQ.js.map → chunk-6TQ4O7BK.js.map} +0 -0
- /package/dist/{chunk-ERZPIKPF.js.map → chunk-PXTPAYC3.js.map} +0 -0
- /package/dist/{chunk-SOEBXG3T.js.map → chunk-U66BCO23.js.map} +0 -0
|
@@ -42,11 +42,55 @@
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
/*
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
45
|
+
/* ==========================================================================
|
|
46
|
+
Padding 0 Modifiers (상·하·좌·우 개별 및 전체 패딩 0 제거 유틸리티)
|
|
47
|
+
- !important 없이 CSS 변수 및 특정성 체이닝으로 부모 레이어 여백도 자연스럽게 무력화
|
|
48
|
+
========================================================================== */
|
|
49
|
+
.stn-container--disable-gutters,
|
|
50
|
+
.stn-container.stn-container--disable-gutters,
|
|
51
|
+
.stn-layer-1__body > .stn-container.stn-container--disable-gutters {
|
|
52
|
+
--stn-container-padding-left: var(--stn-container-gutter-none, 0px);
|
|
53
|
+
--stn-container-padding-right: var(--stn-container-gutter-none, 0px);
|
|
54
|
+
padding-left: var(--stn-container-gutter-none, 0px);
|
|
55
|
+
padding-right: var(--stn-container-gutter-none, 0px);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.stn-container--disable-padding-top,
|
|
59
|
+
.stn-container.stn-container--disable-padding-top,
|
|
60
|
+
.stn-layer-1__body > .stn-container.stn-container--disable-padding-top {
|
|
61
|
+
--stn-container-padding-top: var(--stn-space-0, 0px);
|
|
62
|
+
padding-top: var(--stn-space-0, 0px);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.stn-container--disable-padding-bottom,
|
|
66
|
+
.stn-container.stn-container--disable-padding-bottom,
|
|
67
|
+
.stn-layer-1__body > .stn-container.stn-container--disable-padding-bottom {
|
|
68
|
+
--stn-container-padding-bottom: var(--stn-space-0, 0px);
|
|
69
|
+
padding-bottom: var(--stn-space-0, 0px);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.stn-container--disable-padding-left,
|
|
73
|
+
.stn-container.stn-container--disable-padding-left,
|
|
74
|
+
.stn-layer-1__body > .stn-container.stn-container--disable-padding-left {
|
|
75
|
+
--stn-container-padding-left: var(--stn-container-gutter-none, 0px);
|
|
76
|
+
padding-left: var(--stn-container-gutter-none, 0px);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.stn-container--disable-padding-right,
|
|
80
|
+
.stn-container.stn-container--disable-padding-right,
|
|
81
|
+
.stn-layer-1__body > .stn-container.stn-container--disable-padding-right {
|
|
82
|
+
--stn-container-padding-right: var(--stn-container-gutter-none, 0px);
|
|
83
|
+
padding-right: var(--stn-container-gutter-none, 0px);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.stn-container--disable-padding,
|
|
87
|
+
.stn-container.stn-container--disable-padding,
|
|
88
|
+
.stn-layer-1__body > .stn-container.stn-container--disable-padding {
|
|
89
|
+
--stn-container-padding-top: var(--stn-space-0, 0px);
|
|
90
|
+
--stn-container-padding-bottom: var(--stn-space-0, 0px);
|
|
91
|
+
--stn-container-padding-left: var(--stn-space-0, 0px);
|
|
92
|
+
--stn-container-padding-right: var(--stn-space-0, 0px);
|
|
93
|
+
padding: var(--stn-space-0, 0px);
|
|
50
94
|
}
|
|
51
95
|
|
|
52
96
|
/* Fluid max-width. width 100%라서 캡에 닿기 전까지 화면과 같이 늘어난다.
|
|
@@ -177,7 +177,10 @@
|
|
|
177
177
|
display: flex;
|
|
178
178
|
flex-direction: column;
|
|
179
179
|
box-sizing: border-box;
|
|
180
|
-
padding: var(--stn-space-16);
|
|
180
|
+
padding-top: var(--stn-container-padding-top, var(--stn-space-16));
|
|
181
|
+
padding-bottom: var(--stn-container-padding-bottom, var(--stn-space-16));
|
|
182
|
+
padding-left: var(--stn-container-padding-left, var(--stn-space-16));
|
|
183
|
+
padding-right: var(--stn-container-padding-right, var(--stn-space-16));
|
|
181
184
|
overflow: hidden;
|
|
182
185
|
}
|
|
183
186
|
|
|
@@ -80,6 +80,45 @@
|
|
|
80
80
|
flex-direction: column;
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
+
/* 자식 요소 정렬 (Align Items) */
|
|
84
|
+
.stn-floating-toolbar--align-stretch {
|
|
85
|
+
align-items: stretch;
|
|
86
|
+
}
|
|
87
|
+
.stn-floating-toolbar--align-start {
|
|
88
|
+
align-items: flex-start;
|
|
89
|
+
}
|
|
90
|
+
.stn-floating-toolbar--align-end {
|
|
91
|
+
align-items: flex-end;
|
|
92
|
+
}
|
|
93
|
+
.stn-floating-toolbar--align-center {
|
|
94
|
+
align-items: center;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* 간격 스케일 (Gap) */
|
|
98
|
+
.stn-floating-toolbar--gap-xs {
|
|
99
|
+
gap: var(--stn-space-2);
|
|
100
|
+
}
|
|
101
|
+
.stn-floating-toolbar--gap-sm {
|
|
102
|
+
gap: var(--stn-space-4);
|
|
103
|
+
}
|
|
104
|
+
.stn-floating-toolbar--gap-md {
|
|
105
|
+
gap: var(--stn-space-6);
|
|
106
|
+
}
|
|
107
|
+
.stn-floating-toolbar--gap-lg {
|
|
108
|
+
gap: var(--stn-space-8);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* 너비 프리셋 (.w80 ~ .w200, .full) — STN 3대 Width 규격 */
|
|
112
|
+
.stn-floating-toolbar.w80 { width: var(--stn-size-80, 80px); }
|
|
113
|
+
.stn-floating-toolbar.w100 { width: var(--stn-size-100, 100px); }
|
|
114
|
+
.stn-floating-toolbar.w120 { width: var(--stn-size-120, 120px); }
|
|
115
|
+
.stn-floating-toolbar.w140 { width: var(--stn-size-140, 140px); }
|
|
116
|
+
.stn-floating-toolbar.w160 { width: var(--stn-size-160, 160px); }
|
|
117
|
+
.stn-floating-toolbar.w180 { width: var(--stn-size-180, 180px); }
|
|
118
|
+
.stn-floating-toolbar.w200 { width: var(--stn-size-200, 200px); }
|
|
119
|
+
.stn-floating-toolbar.full,
|
|
120
|
+
.stn-floating-toolbar--full { width: 100%; }
|
|
121
|
+
|
|
83
122
|
/* 툴바 구분선 */
|
|
84
123
|
.stn-floating-toolbar__divider {
|
|
85
124
|
width: 1px;
|
|
@@ -82,6 +82,74 @@
|
|
|
82
82
|
overflow: hidden;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
+
/* ── Stage Padding Presets (none · xs · sm · md · lg) ── */
|
|
86
|
+
.stn-split-view__stage--pad-none {
|
|
87
|
+
padding: 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.stn-split-view__stage--pad-xs {
|
|
91
|
+
padding: var(--stn-space-8);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.stn-split-view__stage--pad-sm {
|
|
95
|
+
padding: var(--stn-space-12);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.stn-split-view__stage--pad-md {
|
|
99
|
+
padding: var(--stn-space-16);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.stn-split-view__stage--pad-lg {
|
|
103
|
+
padding: var(--stn-space-24);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/* ── Side Body Padding Presets (none · xs · sm · md · lg) ── */
|
|
107
|
+
.stn-split-view__side--pad-none .stn-split-view__side-body,
|
|
108
|
+
.stn-split-view__side--pad-none .stn-split-view__side-body.stn-scroll {
|
|
109
|
+
padding: 0;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.stn-split-view__side--pad-xs .stn-split-view__side-body,
|
|
113
|
+
.stn-split-view__side--pad-xs .stn-split-view__side-body.stn-scroll {
|
|
114
|
+
padding: var(--stn-space-8);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.stn-split-view__side--pad-sm .stn-split-view__side-body,
|
|
118
|
+
.stn-split-view__side--pad-sm .stn-split-view__side-body.stn-scroll {
|
|
119
|
+
padding: var(--stn-space-12);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.stn-split-view__side--pad-md .stn-split-view__side-body,
|
|
123
|
+
.stn-split-view__side--pad-md .stn-split-view__side-body.stn-scroll {
|
|
124
|
+
padding: var(--stn-space-16);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.stn-split-view__side--pad-lg .stn-split-view__side-body,
|
|
128
|
+
.stn-split-view__side--pad-lg .stn-split-view__side-body.stn-scroll {
|
|
129
|
+
padding: var(--stn-space-24);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* ── SplitView Root Padding Presets (none · xs · sm · md · lg) ── */
|
|
133
|
+
.stn-split-view--pad-none {
|
|
134
|
+
padding: 0;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.stn-split-view--pad-xs {
|
|
138
|
+
padding: var(--stn-space-8);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.stn-split-view--pad-sm {
|
|
142
|
+
padding: var(--stn-space-12);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.stn-split-view--pad-md {
|
|
146
|
+
padding: var(--stn-space-16);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.stn-split-view--pad-lg {
|
|
150
|
+
padding: var(--stn-space-24);
|
|
151
|
+
}
|
|
152
|
+
|
|
85
153
|
/* Non-toolbar floating slots (legend, filters, callouts) */
|
|
86
154
|
.stn-split-view__overlay {
|
|
87
155
|
box-sizing: border-box;
|
package/styles/style-pub.css
CHANGED
|
@@ -48,6 +48,8 @@
|
|
|
48
48
|
@import './components/stn-popup.css';
|
|
49
49
|
@import './components/stn-drawer.css';
|
|
50
50
|
@import './components/stn-table.css';
|
|
51
|
+
@import './components/stn-list.css';
|
|
52
|
+
@import './components/stn-menu.css';
|
|
51
53
|
@import './components/stn-pagination.css';
|
|
52
54
|
@import './components/stn-slider.css';
|
|
53
55
|
@import './components/stn-progress-bar.css';
|
|
@@ -32,8 +32,9 @@
|
|
|
32
32
|
--stn-warning: var(--stn-teal-400);
|
|
33
33
|
--stn-feedback-success: var(--stn-green-400);
|
|
34
34
|
--stn-feedback-info: var(--stn-blue-400);
|
|
35
|
-
--stn-feedback-warning: var(--stn-yellow-
|
|
35
|
+
--stn-feedback-warning: var(--stn-yellow-400);
|
|
36
36
|
--stn-feedback-error: var(--stn-red-400);
|
|
37
|
+
--stn-feedback-discovery: var(--stn-purple-400);
|
|
37
38
|
--stn-text-primary: var(--stn-gray-100);
|
|
38
39
|
--stn-text-secondary: var(--stn-gray-200);
|
|
39
40
|
--stn-text-re-primary: var(--stn-gray-850);
|
|
@@ -44,7 +45,7 @@
|
|
|
44
45
|
--stn-grade-minor-count: var(--stn-yellow-400);
|
|
45
46
|
--stn-grade-warning: var(--stn-teal-400);
|
|
46
47
|
--stn-grade-normal: var(--stn-green-400);
|
|
47
|
-
--stn-grade-neutral: var(--stn-gray-
|
|
48
|
+
--stn-grade-neutral: var(--stn-gray-450);
|
|
48
49
|
--stn-icon-fg: var(--stn-gray-200);
|
|
49
50
|
--stn-icon-fg-muted: var(--stn-gray-400);
|
|
50
51
|
--stn-elevation-surface-0: var(--stn-gray-950);
|
|
@@ -52,6 +53,7 @@
|
|
|
52
53
|
--stn-elevation-surface-2: var(--stn-gray-800);
|
|
53
54
|
--stn-elevation-surface-widget: var(--stn-gray-850);
|
|
54
55
|
--stn-drawer-bg: var(--stn-gray-850);
|
|
56
|
+
--stn-drawer-bg-subtle: var(--stn-gray-900);
|
|
55
57
|
--stn-dim-bg: color-mix(in srgb, var(--stn-gray-950) 50%, transparent);
|
|
56
58
|
--stn-dim-blur: 4px;
|
|
57
59
|
--stn-input-bg: var(--stn-gray-900);
|
|
@@ -156,13 +158,16 @@
|
|
|
156
158
|
--stn-pagination-font-size: var(--stn-font-size-13);
|
|
157
159
|
--stn-pagination-font-weight: var(--stn-font-weight-regular, 400);
|
|
158
160
|
--stn-card-bg-flat: var(--stn-gray-850);
|
|
161
|
+
--stn-card-bg-flat-hover: var(--stn-gray-800);
|
|
159
162
|
--stn-card-bg-elevated: var(--stn-gray-800);
|
|
160
163
|
--stn-card-border-color: var(--stn-gray-700);
|
|
164
|
+
--stn-card-border-hover: var(--stn-gray-600);
|
|
161
165
|
--stn-card-severity-critical-bg: color-mix(in srgb, var(--stn-red-400) 5%, transparent);
|
|
162
166
|
--stn-card-severity-major-bg: color-mix(in srgb, var(--stn-orange-400) 5%, transparent);
|
|
163
167
|
--stn-card-severity-minor-bg: color-mix(in srgb, var(--stn-yellow-350) 5%, transparent);
|
|
164
168
|
--stn-card-severity-warning-bg: color-mix(in srgb, var(--stn-teal-400) 5%, transparent);
|
|
165
|
-
--stn-card-shadow:
|
|
169
|
+
--stn-card-shadow: var(--stn-shadow-2, 0 4px 14px rgba(0, 0, 0, 0.45));
|
|
170
|
+
--stn-card-shadow-hover: var(--stn-shadow-3, 0 8px 24px rgba(0, 0, 0, 0.55));
|
|
166
171
|
--stn-search-requirement-bg: transparent;
|
|
167
172
|
--stn-search-requirement-border: var(--stn-gray-750);
|
|
168
173
|
--stn-search-requirement-export-bg: var(--stn-gray-800);
|
|
@@ -499,6 +504,17 @@
|
|
|
499
504
|
--stn-topology-node-selected-glow: color-mix(in srgb, var(--stn-blue-300) 50%, transparent);
|
|
500
505
|
--stn-topology-minimap-bg: color-mix(in srgb, var(--stn-elevation-surface-widget) 75%, transparent);
|
|
501
506
|
--stn-topology-mode-shadow: 0 4px 16px color-mix(in srgb, var(--stn-static-black) 40%, transparent);
|
|
507
|
+
--stn-topology-node-current-bg: color-mix(in srgb, var(--stn-static-white) 22%, transparent);
|
|
508
|
+
--stn-topology-node-current-ring: color-mix(in srgb, var(--stn-static-white) 40%, transparent);
|
|
509
|
+
--stn-topology-node-current-ambient: color-mix(in srgb, var(--stn-static-white) 15%, transparent);
|
|
510
|
+
--stn-topology-node-current-glow: color-mix(in srgb, var(--stn-static-white) 20%, transparent);
|
|
511
|
+
--stn-topology-node-point: var(--stn-primary);
|
|
512
|
+
--stn-topology-badge-bg: var(--stn-primary);
|
|
513
|
+
--stn-topology-badge-text: var(--stn-static-white);
|
|
514
|
+
--stn-topology-link-label-fg: var(--stn-text-secondary);
|
|
515
|
+
--stn-topology-link-label-halo: var(--stn-elevation-surface-0);
|
|
516
|
+
--stn-topology-node-label-fg: var(--stn-text-primary);
|
|
517
|
+
--stn-topology-node-label-halo: var(--stn-elevation-surface-0);
|
|
502
518
|
--stn-widget-critical-accent: var(--stn-red-550);
|
|
503
519
|
--stn-widget-critical-bg: color-mix(in srgb, var(--stn-red-550) 6%, transparent);
|
|
504
520
|
--stn-widget-critical-glow: 0 0 16px 0 color-mix(in srgb, var(--stn-red-550) 32%, transparent) inset, 0 0 32px 0 color-mix(in srgb, var(--stn-red-550) 16%, transparent) inset;
|
|
@@ -750,6 +766,7 @@
|
|
|
750
766
|
--stn-feedback-info: var(--stn-blue-500);
|
|
751
767
|
--stn-feedback-warning: var(--stn-yellow-400);
|
|
752
768
|
--stn-feedback-error: var(--stn-red-500);
|
|
769
|
+
--stn-feedback-discovery: var(--stn-purple-500);
|
|
753
770
|
--stn-text-primary: var(--stn-gray-900);
|
|
754
771
|
--stn-text-secondary: var(--stn-gray-500);
|
|
755
772
|
--stn-text-re-primary: var(--stn-static-white);
|
|
@@ -760,7 +777,7 @@
|
|
|
760
777
|
--stn-grade-minor-count: var(--stn-yellow-500);
|
|
761
778
|
--stn-grade-warning: var(--stn-teal-500);
|
|
762
779
|
--stn-grade-normal: var(--stn-green-500);
|
|
763
|
-
--stn-grade-neutral: var(--stn-gray-
|
|
780
|
+
--stn-grade-neutral: var(--stn-gray-450);
|
|
764
781
|
--stn-icon-fg: var(--stn-gray-600);
|
|
765
782
|
--stn-icon-fg-muted: var(--stn-gray-400);
|
|
766
783
|
--stn-elevation-surface-0: var(--stn-gray-25);
|
|
@@ -768,6 +785,7 @@
|
|
|
768
785
|
--stn-elevation-surface-2: var(--stn-static-white);
|
|
769
786
|
--stn-elevation-surface-widget: var(--stn-static-white);
|
|
770
787
|
--stn-drawer-bg: var(--stn-static-white);
|
|
788
|
+
--stn-drawer-bg-subtle: var(--stn-gray-50);
|
|
771
789
|
--stn-dim-bg: color-mix(in srgb, var(--stn-gray-900) 20%, transparent);
|
|
772
790
|
--stn-dim-blur: 2px;
|
|
773
791
|
--stn-input-bg: var(--stn-static-white);
|
|
@@ -872,13 +890,16 @@
|
|
|
872
890
|
--stn-pagination-font-size: var(--stn-font-size-14);
|
|
873
891
|
--stn-pagination-font-weight: var(--stn-font-weight-medium, 500);
|
|
874
892
|
--stn-card-bg-flat: var(--stn-gray-50);
|
|
893
|
+
--stn-card-bg-flat-hover: var(--stn-gray-100);
|
|
875
894
|
--stn-card-bg-elevated: var(--stn-static-white);
|
|
876
895
|
--stn-card-border-color: var(--stn-border-subtle);
|
|
896
|
+
--stn-card-border-hover: var(--stn-gray-300);
|
|
877
897
|
--stn-card-severity-critical-bg: var(--stn-red-50);
|
|
878
898
|
--stn-card-severity-major-bg: var(--stn-orange-50);
|
|
879
899
|
--stn-card-severity-minor-bg: var(--stn-yellow-50);
|
|
880
900
|
--stn-card-severity-warning-bg: var(--stn-teal-50);
|
|
881
901
|
--stn-card-shadow: var(--stn-shadow-2, 0 4px 14px rgba(0, 0, 0, 0.07));
|
|
902
|
+
--stn-card-shadow-hover: var(--stn-shadow-3, 0 8px 24px rgba(0, 0, 0, 0.12));
|
|
882
903
|
--stn-search-requirement-bg: transparent;
|
|
883
904
|
--stn-search-requirement-border: var(--stn-gray-75);
|
|
884
905
|
--stn-search-requirement-export-bg: var(--stn-gray-50);
|
|
@@ -1217,6 +1238,17 @@
|
|
|
1217
1238
|
--stn-topology-node-selected-glow: color-mix(in srgb, var(--stn-blue-400) 40%, transparent);
|
|
1218
1239
|
--stn-topology-minimap-bg: color-mix(in srgb, var(--stn-elevation-surface-widget) 75%, transparent);
|
|
1219
1240
|
--stn-topology-mode-shadow: 0 4px 16px color-mix(in srgb, var(--stn-static-black) 12%, transparent);
|
|
1241
|
+
--stn-topology-node-current-bg: color-mix(in srgb, var(--stn-gray-900) 15%, transparent);
|
|
1242
|
+
--stn-topology-node-current-ring: color-mix(in srgb, var(--stn-gray-900) 30%, transparent);
|
|
1243
|
+
--stn-topology-node-current-ambient: color-mix(in srgb, var(--stn-gray-900) 12%, transparent);
|
|
1244
|
+
--stn-topology-node-current-glow: color-mix(in srgb, var(--stn-gray-700) 15%, transparent);
|
|
1245
|
+
--stn-topology-node-point: var(--stn-primary);
|
|
1246
|
+
--stn-topology-badge-bg: var(--stn-primary);
|
|
1247
|
+
--stn-topology-badge-text: var(--stn-static-white);
|
|
1248
|
+
--stn-topology-link-label-fg: var(--stn-text-secondary);
|
|
1249
|
+
--stn-topology-link-label-halo: var(--stn-elevation-surface-0);
|
|
1250
|
+
--stn-topology-node-label-fg: var(--stn-text-primary);
|
|
1251
|
+
--stn-topology-node-label-halo: var(--stn-elevation-surface-0);
|
|
1220
1252
|
--stn-widget-critical-accent: var(--stn-red-500);
|
|
1221
1253
|
--stn-widget-critical-bg: color-mix(in srgb, var(--stn-red-50) 65%, var(--stn-static-white));
|
|
1222
1254
|
--stn-widget-critical-glow: 0 0 16px 0 color-mix(in srgb, var(--stn-red-400) 22%, transparent) inset, 0 2px 8px 0 color-mix(in srgb, var(--stn-red-400) 12%, transparent);
|
|
@@ -34,6 +34,11 @@
|
|
|
34
34
|
--stn-text-field-height-lg: var(--stn-size-40);
|
|
35
35
|
--stn-text-field-height-md: var(--stn-size-32);
|
|
36
36
|
--stn-text-field-height-sm: var(--stn-size-24);
|
|
37
|
+
--stn-list-item-height-xs: var(--stn-size-24);
|
|
38
|
+
--stn-list-item-height-sm: var(--stn-size-32);
|
|
39
|
+
--stn-list-item-height-md: var(--stn-size-40);
|
|
40
|
+
--stn-list-item-height-lg: var(--stn-size-48);
|
|
41
|
+
--stn-list-item-height-xl: var(--stn-size-56);
|
|
37
42
|
--stn-card-header-min-height: var(--stn-size-40);
|
|
38
43
|
--stn-split-view-side-width-sm: var(--stn-size-220);
|
|
39
44
|
--stn-split-view-side-width-md: var(--stn-size-280);
|
|
@@ -43,6 +48,12 @@
|
|
|
43
48
|
--stn-dropdown-height-md: var(--stn-size-32);
|
|
44
49
|
--stn-dropdown-height-lg: var(--stn-size-40);
|
|
45
50
|
--stn-dropdown-height-xl: var(--stn-size-56);
|
|
51
|
+
--stn-menu-min-width: var(--stn-size-140);
|
|
52
|
+
--stn-menu-item-height-xs: var(--stn-size-24);
|
|
53
|
+
--stn-menu-item-height-sm: var(--stn-size-28);
|
|
54
|
+
--stn-menu-item-height-md: var(--stn-size-32);
|
|
55
|
+
--stn-menu-item-height-lg: var(--stn-size-38);
|
|
56
|
+
--stn-menu-item-height-xl: var(--stn-size-44);
|
|
46
57
|
--stn-date-range-field-height-sm: var(--stn-size-24);
|
|
47
58
|
--stn-date-range-field-height-md: var(--stn-size-32);
|
|
48
59
|
--stn-date-range-field-height-lg: var(--stn-size-40);
|
|
@@ -275,12 +286,19 @@
|
|
|
275
286
|
--stn-breadcrumb-sep-size-lg: var(--stn-size-14);
|
|
276
287
|
--stn-event-banner-btn-height: var(--stn-size-28);
|
|
277
288
|
--stn-event-banner-icon-size: var(--stn-size-24);
|
|
278
|
-
--stn-topology-node-size-xs: var(--stn-size-
|
|
279
|
-
--stn-topology-node-size-sm: var(--stn-size-
|
|
280
|
-
--stn-topology-node-size-md: var(--stn-size-
|
|
281
|
-
--stn-topology-node-size-lg: var(--stn-size-
|
|
289
|
+
--stn-topology-node-size-xs: var(--stn-size-12);
|
|
290
|
+
--stn-topology-node-size-sm: var(--stn-size-16);
|
|
291
|
+
--stn-topology-node-size-md: var(--stn-size-20);
|
|
292
|
+
--stn-topology-node-size-lg: var(--stn-size-24);
|
|
293
|
+
--stn-topology-node-size-xl: var(--stn-size-28);
|
|
294
|
+
--stn-topology-node-radius-xs: var(--stn-size-6);
|
|
295
|
+
--stn-topology-node-radius-sm: var(--stn-size-8);
|
|
296
|
+
--stn-topology-node-radius-md: var(--stn-size-10);
|
|
297
|
+
--stn-topology-node-radius-lg: var(--stn-size-12);
|
|
298
|
+
--stn-topology-node-radius-xl: var(--stn-size-14);
|
|
282
299
|
--stn-topology-container-min-height: var(--stn-size-260);
|
|
283
300
|
--stn-topology-node-border-width: var(--stn-size-1);
|
|
301
|
+
--stn-topology-node-stroke: 1.2px;
|
|
284
302
|
--stn-topology-minimap-border-width: var(--stn-size-1);
|
|
285
303
|
--stn-topology-minimap-width: var(--stn-size-140);
|
|
286
304
|
--stn-topology-minimap-content-height: var(--stn-size-96);
|
package/dist/chunk-5QPBSOJ6.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/data/stnPackageVersion.ts"],"sourcesContent":["/** Package version constants */\nexport const STN_UI_VERSION = '0.1.85'\nexport const STN_UI_VERSION_LABEL = 'v0.1.85'\n"],"mappings":";AACO,IAAM,iBAAiB;AACvB,IAAM,uBAAuB;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/data/stnFeedbackColors.ts"],"sourcesContent":["import type { StnSemanticTokenRow } from './stnColorPalette'\n\n/** stnPubColorPalette.ts 와 동기 — 순환 import 방지를 위해 리터럴 사용 */\nconst FEEDBACK_PRIMITIVE_HEX = {\n 'pub.blue.400': '#00aeef',\n 'pub.green.400': '#1fa550',\n 'pub.yellow.300': '#ffdc53',\n 'pub.red.400': '#d61f3a',\n} as const\n\n/** 01 PC_HTML_Revision · pub/pub.css `--toastify-color-*` (아이콘·progress bar; toastTheme light/dark) */\nexport const STN_FEEDBACK_SOURCE = {\n info: {\n hex: '#3498db',\n label: 'INFO',\n descKo: '안내, 정보',\n toastVar: '--stn-feedback-info',\n toastifyVar: '--stn-feedback-info',\n },\n success: {\n hex: '#07bc0c',\n label: 'SUCCESS',\n descKo: '완료, 성공',\n toastVar: '--stn-feedback-success',\n toastifyVar: '--stn-feedback-success',\n },\n warn: {\n hex: '#f1c40f',\n label: 'WARN',\n descKo: '주의, 경고',\n toastVar: '--stn-feedback-warning',\n toastifyVar: '--stn-feedback-warning',\n },\n error: {\n hex: '#e74c3c',\n label: 'ERROR',\n descKo: '긴급, 오류',\n toastVar: '--stn-feedback-error',\n toastifyVar: '--stn-feedback-error',\n },\n} as const\n\nexport type StnFeedbackKind = keyof typeof STN_FEEDBACK_SOURCE\n\n/** Pub toastify 유형색 → DS primitive (`--stn-feedback-*` · `--toastify-color-*`) */\nexport const STN_FEEDBACK_SEMANTIC_ROWS: StnSemanticTokenRow[] = [\n {\n token: 'pub.feedback.info',\n cssVar: '--stn-feedback-info',\n hex: FEEDBACK_PRIMITIVE_HEX['pub.blue.400'],\n primitiveToken: 'pub.blue.400',\n },\n {\n token: 'pub.feedback.success',\n cssVar: '--stn-feedback-success',\n hex: FEEDBACK_PRIMITIVE_HEX['pub.green.400'],\n primitiveToken: 'pub.green.400',\n },\n {\n token: 'pub.feedback.warning',\n cssVar: '--stn-feedback-warning',\n hex: FEEDBACK_PRIMITIVE_HEX['pub.yellow.300'],\n primitiveToken: 'pub.yellow.300',\n },\n {\n token: 'pub.feedback.error',\n cssVar: '--stn-feedback-error',\n hex: FEEDBACK_PRIMITIVE_HEX['pub.red.400'],\n primitiveToken: 'pub.red.400',\n },\n]\n\nexport const STN_FEEDBACK_BY_KIND: Record<StnFeedbackKind, StnSemanticTokenRow> = {\n info: STN_FEEDBACK_SEMANTIC_ROWS[0]!,\n success: STN_FEEDBACK_SEMANTIC_ROWS[1]!,\n warn: STN_FEEDBACK_SEMANTIC_ROWS[2]!,\n error: STN_FEEDBACK_SEMANTIC_ROWS[3]!,\n}\n"],"mappings":";AAGA,IAAM,yBAAyB;AAAA,EAC7B,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,eAAe;AACjB;AAGO,IAAM,sBAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EACA,MAAM;AAAA,IACJ,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,aAAa;AAAA,EACf;AACF;AAKO,IAAM,6BAAoD;AAAA,EAC/D;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK,uBAAuB,cAAc;AAAA,IAC1C,gBAAgB;AAAA,EAClB;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK,uBAAuB,eAAe;AAAA,IAC3C,gBAAgB;AAAA,EAClB;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK,uBAAuB,gBAAgB;AAAA,IAC5C,gBAAgB;AAAA,EAClB;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK,uBAAuB,aAAa;AAAA,IACzC,gBAAgB;AAAA,EAClB;AACF;AAEO,IAAM,uBAAqE;AAAA,EAChF,MAAM,2BAA2B,CAAC;AAAA,EAClC,SAAS,2BAA2B,CAAC;AAAA,EACrC,MAAM,2BAA2B,CAAC;AAAA,EAClC,OAAO,2BAA2B,CAAC;AACrC;","names":[]}
|
package/dist/chunk-ERZPIKPF.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=chunk-ERZPIKPF.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/data/stnSplitView.ts"],"sourcesContent":["/**\n * STN Split View Pattern — Side + Stage shell (SSOT types)\n * Store locator / 망구성도 / 캔버스 탐색: 중첩 Card 없이 좌 패널 + 우 스테이지.\n */\n\nexport type StnSplitViewSideWidth = 'sm' | 'md' | 'lg'\n\nexport type StnSplitViewOverlayPlacement =\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'center-left'\n | 'center-right'\n\nexport const STN_SPLIT_VIEW_SIDE_WIDTHS: readonly StnSplitViewSideWidth[] = ['sm', 'md', 'lg'] as const\n\nexport const STN_SPLIT_VIEW_OVERLAY_PLACEMENTS: readonly StnSplitViewOverlayPlacement[] = [\n 'top-left',\n 'top-right',\n 'bottom-left',\n 'bottom-center',\n 'bottom-right',\n 'center-left',\n 'center-right',\n] as const\n\nexport const STN_SPLIT_VIEW_INTRO = {\n name: 'Split View',\n slug: 'split-view',\n kind: 'pattern' as const,\n description:\n '카드(또는 패널) 본문을 좌 Side · 우 Stage로 나누는 레이아웃 셸입니다. Stage는 position:relative 캔버스 호스트이며 StnFloatingToolbar·Overlay를 올립니다. 맵·토폴로지·스토어 로케이터 등에 공통으로 씁니다.',\n}\n"],"mappings":";AAgBO,IAAM,6BAA+D,CAAC,MAAM,MAAM,IAAI;AAEtF,IAAM,oCAA6E;AAAA,EACxF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,uBAAuB;AAAA,EAClC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,aACE;AACJ;","names":[]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|