@stn-uiux/pub-ui 0.1.77 → 0.1.78
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-2ZYBBVBT.js → chunk-36QC3ZAD.js} +2 -2
- package/dist/{chunk-2ZYBBVBT.js.map → chunk-36QC3ZAD.js.map} +1 -1
- package/dist/{chunk-75GHU6VI.js → chunk-G4SOYIHZ.js} +11 -7
- package/dist/chunk-G4SOYIHZ.js.map +1 -0
- package/dist/chunk-GYPBZAB2.js +9 -0
- package/dist/chunk-GYPBZAB2.js.map +1 -0
- package/dist/{chunk-3CYSR7V4.js → chunk-QGC3IK52.js} +2 -2
- package/dist/{chunk-3CYSR7V4.js.map → chunk-QGC3IK52.js.map} +1 -1
- package/dist/{chunk-7YKAIENZ.js → chunk-RVYQ7WL3.js} +2 -7
- package/dist/{chunk-7YKAIENZ.js.map → chunk-RVYQ7WL3.js.map} +1 -1
- package/dist/{chunk-FSSMH6VS.js → chunk-TEK632EJ.js} +9 -46
- package/dist/chunk-TEK632EJ.js.map +1 -0
- package/dist/cli.js +3 -3
- package/dist/data/index.d.ts +1 -1
- package/dist/data/index.js +6 -8
- package/dist/data/stnLayer0Background.d.ts +9 -43
- package/dist/data/stnLayer0Background.js +1 -3
- package/dist/data/stnLayout.d.ts +1 -1
- package/dist/data/stnLayout.js +1 -1
- package/dist/data/stnLogin.d.ts +1 -1
- package/dist/data/stnLogin.js +1 -1
- package/dist/data/stnPackageVersion.d.ts +2 -2
- package/dist/data/stnPackageVersion.js +1 -1
- package/dist/data/stnPopup.d.ts +8 -8
- package/dist/data/stnPopup.js +1 -1
- package/dist/data/stnSectionSide.d.ts +1 -5
- package/dist/data/stnSectionSide.js +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +6 -8
- package/package.json +1 -1
- package/styles/components/stn-label-prefix.css +4 -2
- package/styles/components/stn-popup.css +44 -104
- package/styles/layouts/stn-layer0-bg.css +92 -26
- package/styles/patterns/stn-section-side.css +1 -9
- package/styles/tokens/stn-colors-semantic.css +8 -1
- package/styles/tokens/stn-size-semantic.css +5 -0
- package/styles/tokens/stn-spacing-semantic.css +12 -0
- package/dist/chunk-75GHU6VI.js.map +0 -1
- package/dist/chunk-FSSMH6VS.js.map +0 -1
- package/dist/chunk-RSKMNZIS.js +0 -9
- package/dist/chunk-RSKMNZIS.js.map +0 -1
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
box-sizing: border-box;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
.stn-pop--open {
|
|
21
|
-
display: flex
|
|
20
|
+
.stn-pop.stn-pop--open {
|
|
21
|
+
display: flex;
|
|
22
22
|
align-items: center;
|
|
23
23
|
justify-content: center;
|
|
24
24
|
}
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
overflow: hidden;
|
|
42
42
|
box-sizing: border-box;
|
|
43
43
|
background-color: var(--stn-pop-surface);
|
|
44
|
-
border:
|
|
45
|
-
border-radius: var(--stn-radius-pop-wrap
|
|
44
|
+
border: var(--stn-pop-border-width) solid var(--stn-pop-border);
|
|
45
|
+
border-radius: var(--stn-radius-pop-wrap);
|
|
46
46
|
box-shadow: var(--stn-pop-shadow);
|
|
47
47
|
}
|
|
48
48
|
|
|
@@ -50,19 +50,28 @@
|
|
|
50
50
|
.stn-pop__head {
|
|
51
51
|
box-sizing: border-box;
|
|
52
52
|
display: flex;
|
|
53
|
-
|
|
54
|
-
justify-content:
|
|
55
|
-
|
|
53
|
+
align-items: center;
|
|
54
|
+
justify-content: space-between;
|
|
55
|
+
gap: var(--stn-pop-head-gap);
|
|
56
|
+
min-height: var(--stn-pop-header-height);
|
|
56
57
|
height: auto;
|
|
57
|
-
padding:
|
|
58
|
+
padding: var(--stn-pop-head-padding-y) var(--stn-pop-head-padding-x);
|
|
58
59
|
margin: 0;
|
|
59
|
-
border-bottom:
|
|
60
|
+
border-bottom: var(--stn-pop-border-width) solid var(--stn-pop-divider);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.stn-pop__head-start {
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
justify-content: center;
|
|
67
|
+
min-width: 0;
|
|
68
|
+
flex: 1 1 auto;
|
|
60
69
|
}
|
|
61
70
|
|
|
62
71
|
.stn-pop__head-row {
|
|
63
72
|
display: flex;
|
|
64
73
|
align-items: center;
|
|
65
|
-
gap: var(--stn-
|
|
74
|
+
gap: var(--stn-pop-head-row-gap);
|
|
66
75
|
flex-wrap: wrap;
|
|
67
76
|
}
|
|
68
77
|
|
|
@@ -71,24 +80,24 @@
|
|
|
71
80
|
color: var(--stn-pop-title);
|
|
72
81
|
font-family: var(--stn-font-body);
|
|
73
82
|
font-size: var(--stn-text-title-medium-size);
|
|
74
|
-
line-height: var(--stn-line-height-tight
|
|
83
|
+
line-height: var(--stn-line-height-tight);
|
|
75
84
|
font-weight: var(--stn-font-weight-semibold);
|
|
76
85
|
letter-spacing: 0;
|
|
77
86
|
}
|
|
78
87
|
|
|
79
88
|
.stn-pop__subtitle {
|
|
80
|
-
margin:
|
|
89
|
+
margin: var(--stn-pop-subtitle-margin-top) 0 0 0;
|
|
81
90
|
font-family: var(--stn-font-body);
|
|
82
91
|
font-size: var(--stn-text-body-small-size);
|
|
83
92
|
color: var(--stn-text-subtle);
|
|
84
|
-
line-height: var(--stn-line-height-normal
|
|
93
|
+
line-height: var(--stn-line-height-normal);
|
|
85
94
|
}
|
|
86
95
|
|
|
87
96
|
/* Body */
|
|
88
97
|
.stn-pop__body {
|
|
89
98
|
flex: 1 1 auto;
|
|
90
99
|
min-height: 0;
|
|
91
|
-
padding: var(--stn-
|
|
100
|
+
padding: var(--stn-pop-body-padding);
|
|
92
101
|
overflow: auto;
|
|
93
102
|
-webkit-overflow-scrolling: touch;
|
|
94
103
|
background: transparent;
|
|
@@ -103,75 +112,8 @@
|
|
|
103
112
|
/* 본문 레이아웃 — 배경은 .stn-pop__panel 만 (내부 투명) */
|
|
104
113
|
.stn-pop__body .box_area,
|
|
105
114
|
.stn-pop__body .box_area .box {
|
|
106
|
-
background: transparent
|
|
107
|
-
|
|
108
|
-
background-image: none !important;
|
|
109
|
-
box-shadow: none !important;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
/* Close button — centered vertically in 56px header (top 14, right 16) */
|
|
113
|
-
.stn-pop__close {
|
|
114
|
-
position: absolute;
|
|
115
|
-
top: 14px;
|
|
116
|
-
right: 16px;
|
|
117
|
-
box-sizing: border-box;
|
|
118
|
-
width: var(--stn-pop-close-size) !important;
|
|
119
|
-
height: var(--stn-pop-close-size) !important;
|
|
120
|
-
min-width: var(--stn-pop-close-size);
|
|
121
|
-
min-height: var(--stn-pop-close-size);
|
|
122
|
-
padding: 0;
|
|
123
|
-
border: none;
|
|
124
|
-
border-radius: var(--stn-radius-sm);
|
|
125
|
-
background-color: transparent;
|
|
126
|
-
background-image: none;
|
|
127
|
-
opacity: 1;
|
|
128
|
-
color: var(--stn-pop-title);
|
|
129
|
-
transition: background-color 0.15s ease, color 0.15s ease;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.stn-pop__close::before,
|
|
133
|
-
.stn-pop__close::after {
|
|
134
|
-
content: none;
|
|
135
|
-
display: none;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
/* Legacy HTML close (no React glyph) — Figma icon/line/x mask */
|
|
139
|
-
.stn-pop__close:not(.icon, .stn-btn--icon):not(.stn-icon-btn--with-glyph) {
|
|
140
|
-
background-color: transparent;
|
|
141
|
-
background-image: none;
|
|
142
|
-
-webkit-mask: none;
|
|
143
|
-
mask: none;
|
|
144
|
-
color: var(--stn-pop-title);
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.stn-pop__close:not(.icon, .stn-btn--icon):not(.stn-icon-btn--with-glyph)::before {
|
|
148
|
-
content: '';
|
|
149
|
-
display: block;
|
|
150
|
-
position: absolute;
|
|
151
|
-
top: 50%;
|
|
152
|
-
left: 50%;
|
|
153
|
-
width: var(--stn-pop-close-icon);
|
|
154
|
-
height: var(--stn-pop-close-icon);
|
|
155
|
-
margin: calc(var(--stn-pop-close-icon) / -2) 0 0 calc(var(--stn-pop-close-icon) / -2);
|
|
156
|
-
background-color: currentColor;
|
|
157
|
-
mask-image: url('../@assets/svg/system/line/x.svg');
|
|
158
|
-
mask-position: center;
|
|
159
|
-
mask-size: contain;
|
|
160
|
-
mask-repeat: no-repeat;
|
|
161
|
-
-webkit-mask-image: url('../@assets/svg/system/line/x.svg');
|
|
162
|
-
-webkit-mask-position: center;
|
|
163
|
-
-webkit-mask-size: contain;
|
|
164
|
-
-webkit-mask-repeat: no-repeat;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
.stn-pop__close:not(.icon, .stn-btn--icon):not(.stn-icon-btn--with-glyph)::after {
|
|
168
|
-
content: none;
|
|
169
|
-
display: none;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.stn-pop__close:hover {
|
|
173
|
-
background-color: var(--stn-pop-close-hover-bg);
|
|
174
|
-
color: var(--stn-pop-close-hover-fg);
|
|
115
|
+
background: transparent;
|
|
116
|
+
box-shadow: none;
|
|
175
117
|
}
|
|
176
118
|
|
|
177
119
|
/* —— Size modifiers — active width on .stn-pop —— */
|
|
@@ -216,7 +158,7 @@
|
|
|
216
158
|
|
|
217
159
|
/* 문서·패턴 프리뷰 — 인라인 시연 */
|
|
218
160
|
.stn-pop-uc-inline.stn-pop {
|
|
219
|
-
display: flex
|
|
161
|
+
display: flex;
|
|
220
162
|
position: relative;
|
|
221
163
|
top: auto;
|
|
222
164
|
right: auto;
|
|
@@ -230,7 +172,7 @@
|
|
|
230
172
|
.stn-pop-stack {
|
|
231
173
|
position: fixed;
|
|
232
174
|
inset: 0;
|
|
233
|
-
z-index: var(--stn-elevation-z-2
|
|
175
|
+
z-index: var(--stn-elevation-z-2);
|
|
234
176
|
pointer-events: none;
|
|
235
177
|
}
|
|
236
178
|
|
|
@@ -284,7 +226,7 @@
|
|
|
284
226
|
.stn-pop-stack--inline {
|
|
285
227
|
position: absolute;
|
|
286
228
|
inset: 0;
|
|
287
|
-
z-index: var(--stn-elevation-z-2
|
|
229
|
+
z-index: var(--stn-elevation-z-2);
|
|
288
230
|
min-height: 0;
|
|
289
231
|
pointer-events: auto;
|
|
290
232
|
}
|
|
@@ -292,24 +234,24 @@
|
|
|
292
234
|
.stn-pop-stack--inline > .stn-layer-dim {
|
|
293
235
|
position: absolute;
|
|
294
236
|
inset: 0;
|
|
295
|
-
z-index: var(--stn-elevation-z-2
|
|
237
|
+
z-index: var(--stn-elevation-z-2);
|
|
296
238
|
border-radius: inherit;
|
|
297
239
|
}
|
|
298
240
|
|
|
299
241
|
.stn-pop-stack--inline > .stn-layer-2 {
|
|
300
242
|
position: absolute;
|
|
301
243
|
inset: 0;
|
|
302
|
-
z-index: calc(var(--stn-elevation-z-2
|
|
244
|
+
z-index: calc(var(--stn-elevation-z-2) + 1);
|
|
303
245
|
display: flex;
|
|
304
246
|
align-items: center;
|
|
305
247
|
justify-content: center;
|
|
306
|
-
padding: var(--stn-pop-gutter
|
|
248
|
+
padding: var(--stn-pop-gutter);
|
|
307
249
|
box-sizing: border-box;
|
|
308
250
|
pointer-events: none;
|
|
309
251
|
}
|
|
310
252
|
|
|
311
253
|
.stn-pop-stack--inline > .stn-layer-2 > .stn-pop {
|
|
312
|
-
display: flex
|
|
254
|
+
display: flex;
|
|
313
255
|
pointer-events: auto;
|
|
314
256
|
}
|
|
315
257
|
|
|
@@ -319,12 +261,12 @@
|
|
|
319
261
|
flex-wrap: wrap;
|
|
320
262
|
align-items: center;
|
|
321
263
|
justify-content: flex-end;
|
|
322
|
-
gap: var(--stn-
|
|
264
|
+
gap: var(--stn-pop-actions-gap);
|
|
323
265
|
box-sizing: border-box;
|
|
324
|
-
min-height: var(--stn-pop-footer-height
|
|
266
|
+
min-height: var(--stn-pop-footer-height);
|
|
325
267
|
margin-top: 0;
|
|
326
|
-
padding:
|
|
327
|
-
border-top:
|
|
268
|
+
padding: var(--stn-pop-actions-padding-y) var(--stn-pop-actions-padding-x);
|
|
269
|
+
border-top: var(--stn-pop-border-width) solid var(--stn-pop-divider);
|
|
328
270
|
background-color: var(--stn-pop-surface);
|
|
329
271
|
}
|
|
330
272
|
|
|
@@ -343,19 +285,19 @@
|
|
|
343
285
|
/* —— Master-Detail Split Layout (.stn-pop-split) —— */
|
|
344
286
|
.stn-pop-split {
|
|
345
287
|
display: flex;
|
|
346
|
-
gap: var(--stn-
|
|
347
|
-
min-height:
|
|
288
|
+
gap: var(--stn-pop-split-gap);
|
|
289
|
+
min-height: var(--stn-pop-split-min-height);
|
|
348
290
|
height: 100%;
|
|
349
291
|
box-sizing: border-box;
|
|
350
292
|
}
|
|
351
293
|
|
|
352
294
|
.stn-pop-split__aside {
|
|
353
|
-
width: var(--stn-pop-split-aside-width
|
|
354
|
-
min-width: var(--stn-pop-split-aside-width
|
|
355
|
-
max-width:
|
|
295
|
+
width: var(--stn-pop-split-aside-width);
|
|
296
|
+
min-width: var(--stn-pop-split-aside-width);
|
|
297
|
+
max-width: var(--stn-pop-split-aside-max-width);
|
|
356
298
|
flex-shrink: 0;
|
|
357
|
-
border-right:
|
|
358
|
-
padding-right: var(--stn-
|
|
299
|
+
border-right: var(--stn-pop-border-width) solid var(--stn-pop-divider);
|
|
300
|
+
padding-right: var(--stn-pop-split-aside-padding-right);
|
|
359
301
|
display: flex;
|
|
360
302
|
flex-direction: column;
|
|
361
303
|
overflow-y: auto;
|
|
@@ -367,9 +309,7 @@
|
|
|
367
309
|
min-width: 0;
|
|
368
310
|
display: flex;
|
|
369
311
|
flex-direction: column;
|
|
370
|
-
gap: var(--stn-
|
|
312
|
+
gap: var(--stn-pop-split-main-gap);
|
|
371
313
|
overflow-y: auto;
|
|
372
314
|
box-sizing: border-box;
|
|
373
315
|
}
|
|
374
|
-
|
|
375
|
-
|
|
@@ -1,10 +1,56 @@
|
|
|
1
1
|
@charset "utf-8";
|
|
2
2
|
/**
|
|
3
3
|
* STN Layout — L0 Background Layer (z-index: 0)
|
|
4
|
-
*
|
|
5
|
-
*
|
|
4
|
+
*
|
|
5
|
+
* 순수 CSS 토큰(Token-driven) 아키텍처:
|
|
6
|
+
* 테마(Default/Blue) 및 모드(Light/Dark)에 따른 배경 이미지를 CSS 변수(--stn-l0-*-bg)로 선언하여,
|
|
7
|
+
* 컴포넌트는 단 한 줄의 background-image: var(...) 만으로 테마 전환을 자동 처리합니다.
|
|
6
8
|
*/
|
|
7
9
|
|
|
10
|
+
/* ==========================================================================
|
|
11
|
+
1. L0 Background Image Tokens (CDN)
|
|
12
|
+
========================================================================== */
|
|
13
|
+
|
|
14
|
+
/* 1-1. Default Theme — Light Mode */
|
|
15
|
+
[data-mode='light'],
|
|
16
|
+
[data-theme='default'][data-mode='light'] {
|
|
17
|
+
--stn-l0-dashboard-bg: url('https://stn-design.vercel.app/images/layer0/dashboard-light.png');
|
|
18
|
+
--stn-l0-list-bg: var(--stn-gradient-l0-background);
|
|
19
|
+
--stn-l0-showroom-a-bg: url('https://stn-design.vercel.app/images/layer0/showroom-a-light.png');
|
|
20
|
+
--stn-l0-showroom-b-bg: url('https://stn-design.vercel.app/images/layer0/showroom-b-light.png');
|
|
21
|
+
--stn-l0-map-light-bg: url('https://stn-design.vercel.app/images/layer0/map-light.png');
|
|
22
|
+
--stn-l0-login-bg: url('https://stn-design.vercel.app/images/layer0/login-light.png');
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* 1-2. Default Theme — Dark Mode */
|
|
26
|
+
:root,
|
|
27
|
+
[data-mode='dark'],
|
|
28
|
+
[data-theme='default'][data-mode='dark'] {
|
|
29
|
+
--stn-l0-dashboard-bg: url('https://stn-design.vercel.app/images/layer0/dashboard-dark.png');
|
|
30
|
+
--stn-l0-list-bg: var(--stn-gradient-l0-background);
|
|
31
|
+
--stn-l0-showroom-a-bg: url('https://stn-design.vercel.app/images/layer0/showroom-a-dark.png');
|
|
32
|
+
--stn-l0-showroom-b-bg: url('https://stn-design.vercel.app/images/layer0/showroom-b-dark.png');
|
|
33
|
+
--stn-l0-map-light-bg: url('https://stn-design.vercel.app/images/layer0/map-dark.png');
|
|
34
|
+
--stn-l0-login-bg: url('https://stn-design.vercel.app/images/layer0/login-dark.png');
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* 1-3. Blue Theme — Light Mode */
|
|
38
|
+
[data-theme='blue'][data-mode='light'] {
|
|
39
|
+
--stn-l0-dashboard-bg: url('https://stn-design.vercel.app/images/layer0/infomap-light.png');
|
|
40
|
+
--stn-l0-list-bg: url('https://stn-design.vercel.app/images/layer0/infomap-light-none.png');
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* 1-4. Blue Theme — Dark Mode */
|
|
44
|
+
[data-theme='blue'][data-mode='dark'] {
|
|
45
|
+
--stn-l0-dashboard-bg: url('https://stn-design.vercel.app/images/layer0/infomap-dark.png');
|
|
46
|
+
--stn-l0-list-bg: url('https://stn-design.vercel.app/images/layer0/infomap-dark-none.png');
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
/* ==========================================================================
|
|
51
|
+
2. Base Layer 0 Shell
|
|
52
|
+
========================================================================== */
|
|
53
|
+
|
|
8
54
|
.stn-layer0-bg {
|
|
9
55
|
position: absolute;
|
|
10
56
|
inset: 0;
|
|
@@ -13,30 +59,63 @@
|
|
|
13
59
|
z-index: var(--stn-elevation-z-0, 0);
|
|
14
60
|
overflow: hidden;
|
|
15
61
|
pointer-events: none;
|
|
62
|
+
background-size: cover;
|
|
63
|
+
background-position: center;
|
|
64
|
+
background-repeat: no-repeat;
|
|
16
65
|
}
|
|
17
66
|
|
|
18
|
-
/*
|
|
67
|
+
/* Color preset */
|
|
19
68
|
.stn-layer0-bg.color,
|
|
20
69
|
.stn-layer0-bg.color.default {
|
|
21
70
|
background-color: var(--stn-elevation-surface-0);
|
|
22
71
|
background-image: none;
|
|
23
72
|
}
|
|
24
73
|
|
|
25
|
-
/*
|
|
74
|
+
/* Gradient preset */
|
|
26
75
|
.stn-layer0-bg.gradient {
|
|
27
76
|
background-color: var(--stn-elevation-surface-0);
|
|
28
77
|
background-image: var(--stn-gradient-l0-background);
|
|
29
|
-
background-size: cover;
|
|
30
|
-
background-position: center;
|
|
31
|
-
background-repeat: no-repeat;
|
|
32
78
|
}
|
|
33
79
|
|
|
34
|
-
/*
|
|
35
|
-
.stn-layer0-bg.
|
|
80
|
+
/* List preset — 테마 반응형 바닥면 (Default: 그라데이션, Blue: 3D infomap-none) */
|
|
81
|
+
.stn-layer0-bg.list {
|
|
82
|
+
background-color: var(--stn-elevation-surface-0);
|
|
83
|
+
background-image: var(--stn-l0-list-bg);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Dashboard preset — 테마 반응형 바닥면 (Default: 웨이브, Blue: 3D infomap) */
|
|
87
|
+
.stn-layer0-bg.dashboard {
|
|
36
88
|
background-color: var(--stn-elevation-surface-0);
|
|
89
|
+
background-image: var(--stn-l0-dashboard-bg);
|
|
37
90
|
}
|
|
38
91
|
|
|
92
|
+
/* 기타 이미지 프리셋 */
|
|
93
|
+
.stn-layer0-bg.showroom-a {
|
|
94
|
+
background-image: var(--stn-l0-showroom-a-bg);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.stn-layer0-bg.showroom-b {
|
|
98
|
+
background-image: var(--stn-l0-showroom-b-bg);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.stn-layer0-bg.map-light {
|
|
102
|
+
background-image: var(--stn-l0-map-light-bg);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.stn-layer0-bg.login {
|
|
106
|
+
background-image: var(--stn-l0-login-bg);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* 레거시/호환용 프리셋 */
|
|
110
|
+
.stn-layer0-bg.infomap {
|
|
111
|
+
background-image: var(--stn-l0-dashboard-bg);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.stn-layer0-bg.infomap-none {
|
|
115
|
+
background-image: var(--stn-l0-list-bg);
|
|
116
|
+
}
|
|
39
117
|
|
|
118
|
+
/* 커스텀 이미지 URL을 src로 직접 전달한 경우 호환용 미디어 영역 */
|
|
40
119
|
.stn-layer0-bg__media {
|
|
41
120
|
position: absolute;
|
|
42
121
|
inset: 0;
|
|
@@ -51,15 +130,6 @@
|
|
|
51
130
|
object-position: center;
|
|
52
131
|
}
|
|
53
132
|
|
|
54
|
-
/* Dark/Light image switching */
|
|
55
|
-
.stn-layer0-bg__img.light {
|
|
56
|
-
display: none;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.stn-layer0-bg__img.dark {
|
|
60
|
-
display: block;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
133
|
[data-mode='dark'] .stn-layer0-bg__img.light {
|
|
64
134
|
display: none;
|
|
65
135
|
}
|
|
@@ -92,15 +162,11 @@
|
|
|
92
162
|
display: block;
|
|
93
163
|
}
|
|
94
164
|
|
|
95
|
-
.stn-layer0-bg__overlay.radial {
|
|
165
|
+
[data-mode='dark'] .stn-layer0-bg__overlay.radial {
|
|
96
166
|
display: block;
|
|
97
167
|
background: radial-gradient(
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
color-mix(in srgb, var(--stn-
|
|
168
|
+
ellipse 70% 60% at 50% 45%,
|
|
169
|
+
transparent 0%,
|
|
170
|
+
color-mix(in srgb, var(--stn-static-black) 72%, transparent) 100%
|
|
101
171
|
);
|
|
102
172
|
}
|
|
103
|
-
|
|
104
|
-
[data-mode='light'] .stn-layer0-bg__overlay.radial {
|
|
105
|
-
display: none;
|
|
106
|
-
}
|
|
@@ -21,15 +21,7 @@
|
|
|
21
21
|
overflow: hidden;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
.stn-section-side.translucent,
|
|
26
|
-
.stn-section-side--translucent {
|
|
27
|
-
background: var(--stn-section-side-bg-translucent);
|
|
28
|
-
backdrop-filter: blur(var(--stn-section-side-translucent-blur, 8px));
|
|
29
|
-
-webkit-backdrop-filter: blur(var(--stn-section-side-translucent-blur, 8px));
|
|
30
|
-
border-color: var(--stn-section-side-border-translucent);
|
|
31
|
-
box-shadow: none;
|
|
32
|
-
}
|
|
24
|
+
|
|
33
25
|
|
|
34
26
|
/* fullWidth prop 또는 부모 LNB 컨테이너 안에서 가로 100% 확장 지원 */
|
|
35
27
|
.stn-section-side.is-full-width,
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
--stn-elevation-surface-1: var(--stn-opacity-black-0);
|
|
52
52
|
--stn-elevation-surface-2: var(--stn-gray-800);
|
|
53
53
|
--stn-elevation-surface-widget: var(--stn-gray-850);
|
|
54
|
-
--stn-drawer-bg: var(--stn-gray-
|
|
54
|
+
--stn-drawer-bg: var(--stn-gray-850);
|
|
55
55
|
--stn-dim-bg: color-mix(in srgb, var(--stn-gray-950) 50%, transparent);
|
|
56
56
|
--stn-dim-blur: 4px;
|
|
57
57
|
--stn-input-bg: var(--stn-gray-900);
|
|
@@ -1229,8 +1229,15 @@
|
|
|
1229
1229
|
|
|
1230
1230
|
[data-theme='blue'][data-mode='dark'] {
|
|
1231
1231
|
--stn-table-th-bg: var(--stn-blue-750);
|
|
1232
|
+
--stn-section-side-bg: var(--stn-opacity-black-25);
|
|
1233
|
+
--stn-section-side-border: var(--stn-border-subtle);
|
|
1234
|
+
--stn-input-border: var(--stn-gray-800);
|
|
1235
|
+
--stn-input-bg: var(--stn-opacity-black-25);
|
|
1236
|
+
--stn-search-requirement-bg: var(--stn-opacity-black-25);
|
|
1232
1237
|
}
|
|
1233
1238
|
|
|
1234
1239
|
[data-theme='blue'][data-mode='light'] {
|
|
1235
1240
|
--stn-table-th-bg: var(--stn-blue-100);
|
|
1241
|
+
--stn-section-side-bg: var(--stn-opacity-white-25);
|
|
1242
|
+
--stn-section-side-border: var(--stn-border-subtle);
|
|
1236
1243
|
}
|
|
@@ -62,6 +62,11 @@
|
|
|
62
62
|
--stn-icon-box-size-xl: var(--stn-size-44);
|
|
63
63
|
--stn-pop-header-height: var(--stn-size-56);
|
|
64
64
|
--stn-pop-footer-height: var(--stn-size-56);
|
|
65
|
+
--stn-pop-border-width: var(--stn-size-1);
|
|
66
|
+
--stn-pop-split-min-height: var(--stn-size-400);
|
|
67
|
+
--stn-pop-split-aside-width: var(--stn-size-280);
|
|
68
|
+
--stn-pop-split-aside-max-width: var(--stn-size-320);
|
|
69
|
+
--stn-pop-max-height: calc(100vh - var(--stn-pop-gutter) * 2);
|
|
65
70
|
--stn-segmented-item-height: var(--stn-size-32);
|
|
66
71
|
--stn-segmented-item-height-sm: var(--stn-size-26);
|
|
67
72
|
--stn-segmented-item-height-lg: var(--stn-size-40);
|
|
@@ -59,6 +59,18 @@
|
|
|
59
59
|
--stn-chip-gap: var(--stn-space-4);
|
|
60
60
|
--stn-chip-padding-y: var(--stn-space-0);
|
|
61
61
|
--stn-pop-gutter: var(--stn-space-20);
|
|
62
|
+
--stn-pop-head-padding-y: var(--stn-space-12);
|
|
63
|
+
--stn-pop-head-padding-x: var(--stn-space-20);
|
|
64
|
+
--stn-pop-head-gap: var(--stn-space-12);
|
|
65
|
+
--stn-pop-head-row-gap: var(--stn-space-8);
|
|
66
|
+
--stn-pop-subtitle-margin-top: var(--stn-space-4);
|
|
67
|
+
--stn-pop-body-padding: var(--stn-space-20);
|
|
68
|
+
--stn-pop-actions-padding-y: var(--stn-space-12);
|
|
69
|
+
--stn-pop-actions-padding-x: var(--stn-space-20);
|
|
70
|
+
--stn-pop-actions-gap: var(--stn-space-8);
|
|
71
|
+
--stn-pop-split-gap: var(--stn-space-20);
|
|
72
|
+
--stn-pop-split-aside-padding-right: var(--stn-space-16);
|
|
73
|
+
--stn-pop-split-main-gap: var(--stn-space-16);
|
|
62
74
|
--stn-text-field-padding-x-xl: var(--stn-space-16);
|
|
63
75
|
--stn-text-field-padding-x-lg: var(--stn-space-12);
|
|
64
76
|
--stn-text-field-padding-x-md: var(--stn-space-10);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/data/stnPopup.ts"],"sourcesContent":["/**\n * Pub HTML Popup (.stn-pop) — StnPopup shell · sizes · pattern\n */\n\nexport const STN_POPUP_INTRO =\n '사용자의 주의를 환기시키거나 추가 입력을 받는 팝업/모달 패턴입니다. React에서는 `<StnPopup>` 컴포넌트 하나만 사용하면 내부에서 배경 딤(Overlay)과 레이어 층을 자동으로 내장 처리해 줍니다.'\n\nexport const STN_POPUP_STACK_HTML = `<div class=\"stn-pop-stack\">\n <div\n class=\"stn-layer stn-elev-3 stn-elev--shell stn-elev--dim stn-pop-stack__dim\"\n data-stn-layer=\"3\"\n data-stn-layer-role=\"dim\"\n data-stn-layer-surface=\"dim\"\n >\n <button type=\"button\" class=\"stn-layer__dim-hit\" aria-label=\"닫기\"></button>\n </div>\n <div\n class=\"stn-layer stn-elev-4 stn-elev--shell stn-pop-stack__modal\"\n data-stn-layer=\"4\"\n data-stn-layer-role=\"modal\"\n data-stn-layer-surface=\"transparent\"\n >\n <!-- .stn-pop — 패널 셸 -->\n </div>\n</div>`\n\nexport const STN_POPUP_USAGE_HTML = `${STN_POPUP_STACK_HTML.replace(' <!-- .stn-pop — 패널 셸 -->', `<div class=\"stn-pop stn-pop--md stn-pop--open\">\n <div class=\"stn-pop__cont\">\n <div class=\"stn-pop__panel\">\n <div class=\"stn-pop__head\">\n <h4>제목</h4>\n </div>\n <button type=\"button\" class=\"stn-pop__close\" aria-label=\"닫기\"></button>\n <div class=\"stn-pop__body\"><!-- 본문 --></div>\n <div class=\"stn-pop__actions\"><!-- StnButton primary · secondary --></div>\n </div>\n </div>\n </div>`)}`\n\nexport const STN_POPUP_USAGE = `import { StnButton, StnPopup } from '@stn-uiux/pub-ui-react'\nimport { useState } from 'react'\n\nconst [open, setOpen] = useState(false)\n\n<StnButton size=\"M\" variant=\"contained\" onClick={() => setOpen(true)}>열기</StnButton>\n<StnPopup\n open={open}\n onClose={() => setOpen(false)}\n size=\"md\"\n title=\"제목\"\n actions={\n <StnButton size=\"S\" variant=\"contained\" onClick={() => setOpen(false)}>\n 확인\n </StnButton>\n }\n>\n 본문\n</StnPopup>`\n\nexport const STN_POPUP_RESPONSIVE_NOTE =\n '가로: `width: min(var(--stn-pop-active-width), calc(100vw - var(--stn-pop-gutter) * 2))` · `--full`: `calc(100vw - gutter×2)`. 세로: `.pop_con` overflow + `--stn-pop-max-height`.'\n\nexport const STN_POPUP_SHELL_PARTIAL =\n '01 PC_HTML_Revision/html/_partials/popup-shell.partial.html'\n\nexport const STN_POPUP_SYNC_CSS = [\n 'packages/stn-pub-ui/css/stn-pub-popup.css',\n '01 PC_HTML_Revision/resource/css/stn-pub-popup.css',\n 'style-pub.css · style.css → @import stn-popup.css',\n] as const\n\nexport const STN_POPUP_SIZES = [\n {\n id: 'xs',\n label: 'Extra Small',\n className: 'stn-pop--xs',\n width: '400px',\n token: '--stn-pop-width-xs',\n usage: '단순 확인 · 삭제/경고 확인 얼럿 · 상태 변경',\n },\n {\n id: 'sm',\n label: 'Small',\n className: 'stn-pop--sm',\n width: '520px',\n token: '--stn-pop-width-sm',\n usage: '1~2개 입력 숏 폼 · 단축 검색 · 명칭 변경',\n },\n {\n id: 'md',\n label: 'Medium',\n className: 'stn-pop--md',\n width: '680px',\n token: '--stn-pop-width-md',\n usage: '단일 입력 폼 · 사용자 설정 · 저장 확인 (권장 기본)',\n },\n {\n id: 'lg',\n label: 'Large',\n className: 'stn-pop--lg',\n width: '920px',\n token: '--stn-pop-width-lg',\n usage: '복합 필터 · 2열 폼 · 짧은 테이블 목록',\n },\n {\n id: 'xl',\n label: 'XL',\n className: 'stn-pop--xl',\n width: '1200px',\n token: '--stn-pop-width-xl',\n usage: '대형 데이터 테이블 · 다열 프로비저닝 폼 · 대형 상세',\n },\n {\n id: 'full',\n label: 'Full',\n className: 'stn-pop--full',\n width: 'calc(100vw − 40px)',\n token: '(viewport − gutter)',\n usage: '전체 화면 대시보드 설정 및 토폴로지 매핑',\n },\n] as const\n\nexport type StnPopupSizeId = (typeof STN_POPUP_SIZES)[number]['id']\n\n/** 레거시 `content.css` 고정 px → 권장 modifier (마이그레이션 참고) */\nexport function resolveStnPopupSizeFromWidth(px: number): StnPopupSizeId {\n if (px <= 400) return 'xs'\n if (px <= 480) return 'sm'\n if (px <= 640) return 'md'\n if (px <= 960) return 'lg'\n if (px <= 1200) return 'xl'\n return 'full'\n}\n\nexport const STN_POPUP_LEGACY_WIDTH_SAMPLES = [\n { popClass: 'batch_equip_pop', widthPx: 1780, suggested: 'full' as const },\n { popClass: 'template_history_pop', widthPx: 1565, suggested: 'full' as const },\n { popClass: 'real_time_view_pop', widthPx: 1500, suggested: 'full' as const },\n { popClass: 'select_equip_pop', widthPx: 1412, suggested: 'xl' as const },\n { popClass: 'equip_regist_pop', widthPx: 1070, suggested: 'xl' as const },\n { popClass: 'fail_measure_pop', widthPx: 1100, suggested: 'xl' as const },\n] as const\n\nexport const STN_POPUP_PARTS = [\n { part: 'Stack', selector: '.stn-pop-stack', note: 'Dim + Modal 래퍼 · StnLayer.Modal (L2)' },\n { part: 'Dim', selector: '.stn-layer-dim · .stn-elev--dim', note: 'L2 내장 scrim · blur · dim-hit 클릭 닫기' },\n { part: 'Modal host', selector: '.stn-pop', note: 'L2 모달 도화지 · 중앙 정렬' },\n { part: 'Width host', selector: '.stn-pop__cont', note: 'size modifier · responsive min()' },\n {\n part: 'Panel',\n selector: '.stn-pop__panel',\n note: 'surface · border · radius 8 · shadow · overflow',\n },\n {\n part: 'Header',\n selector: '.stn-pop__head',\n note: '56px · h4 16 SemiBold · theme title token',\n },\n {\n part: 'Close',\n selector: '.stn-pop__close',\n note: 'StnButton icon=\"line/x\" size=sm · top 14 / right 16',\n },\n { part: 'Body', selector: '.stn-pop__body', note: 'padding 20px · overflow auto · 화면별 슬롯' },\n {\n part: 'Actions',\n selector: '.stn-pop__actions',\n note: '56px · right/center · gap 8 · StnButton',\n },\n] as const\n\nexport const STN_POPUP_TOKEN_ROWS = [\n { token: '--stn-pop-gutter', resolvesTo: '20px', usage: '좌우·portal padding' },\n { token: '--stn-pop-width-xs', resolvesTo: '400px', usage: '.stn-pop--xs · 단순 확인/얼럿' },\n { token: '--stn-pop-width-sm', resolvesTo: '480px', usage: '.stn-pop--sm · 1~2개 입력 폼' },\n { token: '--stn-pop-width-md', resolvesTo: '640px', usage: '.stn-pop--md · 기본 표준' },\n { token: '--stn-pop-width-lg', resolvesTo: '960px', usage: '.stn-pop--lg · 2단 분할/상세' },\n { token: '--stn-pop-width-xl', resolvesTo: '1200px', usage: '.stn-pop--xl · 대형 테이블/그리드' },\n { token: '.stn-pop--full', resolvesTo: '100vw − gutter×2', usage: '전체화면 모달' },\n { token: '--stn-pop-max-height', resolvesTo: 'min(85dvh, …)', usage: '.stn-pop 본문 스크롤' },\n { token: '--stn-pop-header-height', resolvesTo: '56px', usage: '.stn-pop__head min-height' },\n { token: '--stn-pop-footer-height', resolvesTo: '56px', usage: '.stn-pop__actions' },\n { token: '--stn-pop-close-size', resolvesTo: 'icon-size.xsmall (16px)', usage: '.stn-pop__close hit' },\n { token: '--stn-pop-close-icon', resolvesTo: 'icon-size.xsmall (16px)', usage: '.stn-pop__close glyph' },\n { token: '--stn-pop-surface', resolvesTo: 'gray.850 (dark) · white (light)', usage: '.stn-pop__panel background' },\n { token: '--stn-pop-border', resolvesTo: 'gray.700 (dark) · gray.100 (light)', usage: '.stn-pop__panel border' },\n { token: '--stn-pop-title', resolvesTo: 'static.white (dark) · gray.650 (light)', usage: '.stn-pop__head h4' },\n { token: '--stn-pop-shadow', resolvesTo: '0 0 10px black (dark) · 0 4px 10px / 25% (light)', usage: '팝업 패널' },\n { token: '--stn-radius-pop-wrap', resolvesTo: 'radius.10', usage: '.stn-pop__panel border-radius' },\n {\n token: '--stn-dim-bg',\n resolvesTo: 'Dark gray-950/50 · Light gray-900/20',\n usage: 'StnLayer.Dim scrim',\n },\n {\n token: '--stn-dim-blur',\n resolvesTo: 'Dark 4px · Light 2px',\n usage: 'backdrop-filter on scrim',\n },\n] as const\n\nexport const STN_POPUP_INVENTORY_ROWS = [\n {\n pattern: 'Popup panel shell',\n pubClass: '.stn-pop .stn-pop__panel',\n size: 'radius 10 · 934 xl',\n status: 'implemented' as const,\n },\n {\n pattern: 'Size SM–Full',\n pubClass: '.stn-pop--sm … --full',\n size: 'responsive min(토큰, 100vw−40px)',\n status: 'implemented' as const,\n },\n {\n pattern: '화면별 width',\n pubClass: '.equip_regist_pop .stn-pop__cont 등',\n size: 'content.css override → xxl/2xl/full로 이전 권장',\n status: 'partial' as const,\n },\n {\n pattern: 'MUI Dialog (migrated)',\n pubClass: '.stn-pop',\n size: 'sm–full',\n status: 'implemented' as const,\n },\n] as const\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/data/stnLayer0Background.ts"],"sourcesContent":["/**\n * Infomap Layer 0 background pattern\n * Light: 41267 · 186876 · 186860 · 202895\n * Dark: 80488 · 35369 · 84014 · 91183\n * @see StnLayer0Background · layouts/stn-layer0-bg.css\n */\n\nexport const STN_LAYER0_BACKGROUND_FIGMA = {\n none: '40000040:41267',\n noneDark: '40000040:80488',\n showroomA: '40000042:186876',\n showroomADark: '40002117:35369',\n showroomB: '40000042:186860',\n showroomBDark: '40000040:84014',\n mapLight: '40000042:202895',\n mapDark: '40000040:91183',\n login: '40004209:78293',\n loginDark: '40004209:78293',\n dashboard: '40004209:78300',\n dashboardDark: '40004209:78300',\n} as const\n\nexport type StnLayer0BackgroundKind = 'color' | 'gradient' | 'image'\n\n/** Figma 예제 프리셋 — color 1종 · gradient 1종 · image 7종 (light/dark 자동 전환) */\nexport type StnLayer0BackgroundPreset = 'none' | 'gradient' | 'showroom-a' | 'showroom-b' | 'map-light' | 'login' | 'dashboard' | 'infomap' | 'infomap-none'\n\n/** Doc site · Pub HTML 기준 경로 — 앱에서는 동일 경로 또는 자산 URL로 교체 */\nexport {\n STN_LAYER0_BACKGROUND_ASSET_PATHS,\n STN_LAYER0_BACKGROUND_DEMO_IMAGES,\n} from './stnLayer0BackgroundAssets'\n\nexport const STN_LAYER0_BACKGROUND_INTRO =\n '페이지 최하단 레벨(Level 0)에 위치하는 시스템 바닥면 배경 패턴입니다. 단색 컬러 및 맵·토폴로지 캔버스 배경 이미지를 `StnLayer0BackgroundPreset`으로 손쉽게 적용할 수 있습니다.'\n\nexport const STN_LAYER0_BACKGROUND_VARIANT_ROWS = [\n {\n preset: 'none',\n kind: 'color',\n figma: STN_LAYER0_BACKGROUND_FIGMA.none,\n figmaDark: STN_LAYER0_BACKGROUND_FIGMA.noneDark,\n note: 'Light gradient · Dark elevation surface-0 (gray-950)',\n },\n {\n preset: 'dashboard',\n kind: 'image',\n figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,\n figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,\n note: 'Dashboard · light/dark pair',\n },\n {\n preset: 'infomap',\n kind: 'image',\n figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,\n figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,\n note: 'Infomap 3D Graphic · light/dark pair',\n },\n {\n preset: 'infomap-none',\n kind: 'image',\n figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,\n figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,\n note: 'Infomap 3D Graphic (None/텍스트 없음) · light/dark pair',\n },\n {\n preset: 'showroom-a',\n kind: 'image',\n figma: STN_LAYER0_BACKGROUND_FIGMA.showroomA,\n figmaDark: STN_LAYER0_BACKGROUND_FIGMA.showroomADark,\n note: 'Showroom A · dark logo stage',\n },\n {\n preset: 'showroom-b',\n kind: 'image',\n figma: STN_LAYER0_BACKGROUND_FIGMA.showroomB,\n figmaDark: STN_LAYER0_BACKGROUND_FIGMA.showroomBDark,\n note: 'Showroom B · dark + radial vignette',\n },\n {\n preset: 'map-light',\n kind: 'image',\n figma: STN_LAYER0_BACKGROUND_FIGMA.mapLight,\n figmaDark: STN_LAYER0_BACKGROUND_FIGMA.mapDark,\n note: 'Map light(+20% white) · Map dark',\n },\n {\n preset: 'login',\n kind: 'image',\n figma: STN_LAYER0_BACKGROUND_FIGMA.login,\n figmaDark: STN_LAYER0_BACKGROUND_FIGMA.loginDark,\n note: 'Login · light/dark pair',\n },\n] as const satisfies ReadonlyArray<{\n preset: StnLayer0BackgroundPreset\n kind: StnLayer0BackgroundKind\n figma: string\n figmaDark: string\n note: string\n}>\n\nexport const STN_LAYER0_BACKGROUND_USAGE = `import {\n StnLayer,\n StnLayer0Background,\n StnLayer0BackgroundPreset,\n DashboardPageScaffold,\n} from '@stn-uiux/pub-ui-react'\n\n/** Map / Topology — wrapClassName만 (맵 배경은 elevation CSS) */\n<DashboardPageScaffold\n shell=\"layer\"\n wrapClassName=\"stn-page--map-bg\"\n gnb={…}\n header={…}\n/>\n\n/** 일반 페이지 — L0 color (default = elevation-surface-0) */\n<StnLayer.Background>\n <StnLayer0Background color=\"default\" />\n <StnLayer.Content>{/* 본문 */}</StnLayer.Content>\n</StnLayer.Background>\n\n/** Figma image 프리셋 — showroom · map · login */\n<StnLayer.Background>\n <StnLayer0BackgroundPreset variant=\"map-light\" />\n <StnLayer.Content>{/* 본문 */}</StnLayer.Content>\n</StnLayer.Background>\n\n<StnLayer.Background>\n <StnLayer0BackgroundPreset variant=\"login\" />\n <StnLayer.Content>{/* 본문 */}</StnLayer.Content>\n</StnLayer.Background>\n\n/** 직접 조합 — light/dark 이미지 */\n<StnLayer.Background>\n <StnLayer0Background\n kind=\"image\"\n src=\"/assets/bg-light.png\"\n srcDark=\"/assets/bg-dark.png\"\n />\n <StnLayer.Content>…</StnLayer.Content>\n</StnLayer.Background>`\n\nexport const STN_LAYER0_BACKGROUND_USAGE_HTML = `<!-- L0 background — color / image -->\n<div class=\"stn-elev-0 stn-layer0-bg\">\n <!-- color -->\n <div class=\"stn-layer0-bg color default\" aria-hidden=\"true\"></div>\n\n <!-- 또는 image -->\n <div\n class=\"stn-layer0-bg image\"\n style=\"--stn-layer0-bg-image: url('/assets/bg-light.png')\"\n aria-hidden=\"true\"\n ></div>\n\n <main class=\"stn-elev-1\"><!-- L1 content --></main>\n</div>`\n\nexport const STN_LAYER0_MAP_LIGHT_OVERLAY = 0.2\n\n/** Patterns → Background playground 프리셋 (UI 라벨 · 내부 variant) */\nexport type StnLayer0BackgroundPlaygroundPresetId =\n | 'dashboard'\n | 'infomap'\n | 'infomap-none'\n | 'color'\n | 'gradient'\n | 'map'\n | 'topology'\n | 'none'\n\nexport const STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS: {\n id: StnLayer0BackgroundPlaygroundPresetId\n label: string\n asset: string\n variant?: StnLayer0BackgroundPreset\n}[] = [\n { id: 'dashboard', label: 'dashboard', asset: '대시보드 배경 (dashboard-light / dark)', variant: 'dashboard' },\n { id: 'infomap', label: 'infomap', asset: '인포맵 3D 배경 (infomap-light / dark)', variant: 'infomap' },\n { id: 'infomap-none', label: 'infomap-none', asset: '인포맵 3D (None/텍스트 없음)', variant: 'infomap-none' },\n { id: 'color', label: 'color', asset: '단색 테마 배경 (solid default)', variant: 'none' },\n { id: 'gradient', label: 'gradient', asset: '공식 앰비언트 그라데이션 (워시/심도)', variant: 'gradient' },\n { id: 'map', label: 'map', asset: 'GIS 지도 배경 (map-light)', variant: 'map-light' },\n { id: 'topology', label: 'topology', asset: '토폴로지 배경 (showroom-b)', variant: 'showroom-b' },\n { id: 'none', label: 'none', asset: 'L0 배경 없음 (외부 캔버스 전용)', variant: 'none' },\n]\n"],"mappings":";AAOO,IAAM,8BAA8B;AAAA,EACzC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,WAAW;AAAA,EACX,eAAe;AAAA,EACf,WAAW;AAAA,EACX,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,WAAW;AAAA,EACX,eAAe;AACjB;AAaO,IAAM,8BACX;AAEK,IAAM,qCAAqC;AAAA,EAChD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AACF;AAQO,IAAM,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CpC,IAAM,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezC,IAAM,+BAA+B;AAarC,IAAM,2CAKP;AAAA,EACJ,EAAE,IAAI,aAAa,OAAO,aAAa,OAAO,kEAAoC,SAAS,YAAY;AAAA,EACvG,EAAE,IAAI,WAAW,OAAO,WAAW,OAAO,6DAAoC,SAAS,UAAU;AAAA,EACjG,EAAE,IAAI,gBAAgB,OAAO,gBAAgB,OAAO,gEAAwB,SAAS,eAAe;AAAA,EACpG,EAAE,IAAI,SAAS,OAAO,SAAS,OAAO,0DAA4B,SAAS,OAAO;AAAA,EAClF,EAAE,IAAI,YAAY,OAAO,YAAY,OAAO,oGAAyB,SAAS,WAAW;AAAA,EACzF,EAAE,IAAI,OAAO,OAAO,OAAO,OAAO,6CAAyB,SAAS,YAAY;AAAA,EAChF,EAAE,IAAI,YAAY,OAAO,YAAY,OAAO,sDAAwB,SAAS,aAAa;AAAA,EAC1F,EAAE,IAAI,QAAQ,OAAO,QAAQ,OAAO,+EAAwB,SAAS,OAAO;AAC9E;","names":[]}
|
package/dist/chunk-RSKMNZIS.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/data/stnPackageVersion.ts"],"sourcesContent":["/** Package version constants */\nexport const STN_UI_VERSION = '0.1.77'\nexport const STN_UI_VERSION_LABEL = 'v0.1.77'\n"],"mappings":";AACO,IAAM,iBAAiB;AACvB,IAAM,uBAAuB;","names":[]}
|