@bstage-sdk/design 0.7.0 → 0.8.1

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.
@@ -0,0 +1,723 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/user/index.ts
21
+ var user_exports = {};
22
+ __export(user_exports, {
23
+ color: () => color,
24
+ cssVar: () => cssVar,
25
+ flatColors: () => flatColors,
26
+ fontFamily: () => fontFamily,
27
+ fontWeightMap: () => fontWeightMap,
28
+ modeColors: () => modeColors,
29
+ renderCss: () => renderCss,
30
+ shadow: () => shadow,
31
+ shadowTokens: () => shadowTokens,
32
+ textStyle: () => textStyle,
33
+ typographyTokens: () => typographyTokens
34
+ });
35
+ module.exports = __toCommonJS(user_exports);
36
+
37
+ // src/user/tokens.generated.ts
38
+ var modeColors = {
39
+ "bg/base": {
40
+ "dark": "#151515",
41
+ "light": "#ffffff"
42
+ },
43
+ "bg/blue-grey": {
44
+ "dark": "#1f2023",
45
+ "light": "#eff1f7"
46
+ },
47
+ "bg/elevated": {
48
+ "dark": "#232323",
49
+ "light": "#ffffff"
50
+ },
51
+ "bg/grouped-strong": {
52
+ "dark": "#000000",
53
+ "light": "#f7f7f7"
54
+ },
55
+ "bg/grouped-weak": {
56
+ "dark": "#111111",
57
+ "light": "#f7f7f7"
58
+ },
59
+ "bg/grouped-weak-a": {
60
+ "dark": "#ffffff0f",
61
+ "light": "#0000000f"
62
+ },
63
+ "bg/highlight": {
64
+ "dark": "#2f2f2f",
65
+ "light": "#e6e6e6"
66
+ },
67
+ "bg/invert-weak-a": {
68
+ "dark": "#00000026",
69
+ "light": "#ffffff26"
70
+ },
71
+ "border/blue": {
72
+ "dark": "#0090ff",
73
+ "light": "#148aff"
74
+ },
75
+ "border/blue-weak-a": {
76
+ "dark": "#0090ff4d",
77
+ "light": "#148aff4d"
78
+ },
79
+ "border/default-a": {
80
+ "dark": "#ffffff1a",
81
+ "light": "#0000001a"
82
+ },
83
+ "border/divider-weaker": {
84
+ "dark": "#0d0d0d",
85
+ "light": "#f7f7f7"
86
+ },
87
+ "border/green": {
88
+ "dark": "#0be06f",
89
+ "light": "#00b84d"
90
+ },
91
+ "border/green-weak-a": {
92
+ "dark": "#0be06f4d",
93
+ "light": "#00b84d4d"
94
+ },
95
+ "border/grey": {
96
+ "dark": "#b3b3b3",
97
+ "light": "#7a7a7a"
98
+ },
99
+ "border/grey-weak-a": {
100
+ "dark": "#b3b3b34d",
101
+ "light": "#7a7a7a4d"
102
+ },
103
+ "border/invert": {
104
+ "dark": "#0d0d0d",
105
+ "light": "#ffffff"
106
+ },
107
+ "border/red": {
108
+ "dark": "#ff4747",
109
+ "light": "#ff4a40"
110
+ },
111
+ "border/red-weak-a": {
112
+ "dark": "#ff47474d",
113
+ "light": "#ff4a404d"
114
+ },
115
+ "border/strong-a": {
116
+ "dark": "#ffffff33",
117
+ "light": "#00000033"
118
+ },
119
+ "border/stronger": {
120
+ "dark": "#eeeeee",
121
+ "light": "#454545"
122
+ },
123
+ "border/weak-a": {
124
+ "dark": "#ffffff0a",
125
+ "light": "#0000000f"
126
+ },
127
+ "border/yellow": {
128
+ "dark": "#f5b625",
129
+ "light": "#f29900"
130
+ },
131
+ "border/yellow-weak-a": {
132
+ "dark": "#f5b6254d",
133
+ "light": "#f299004d"
134
+ },
135
+ "icon/blue": {
136
+ "dark": "#0090ff",
137
+ "light": "#148aff"
138
+ },
139
+ "icon/green": {
140
+ "dark": "#0be06f",
141
+ "light": "#00b84d"
142
+ },
143
+ "icon/grey": {
144
+ "dark": "#b3b3b3",
145
+ "light": "#7a7a7a"
146
+ },
147
+ "icon/invert": {
148
+ "dark": "#0d0d0d",
149
+ "light": "#ffffff"
150
+ },
151
+ "icon/primary": {
152
+ "dark": "#ffffff",
153
+ "light": "#000000"
154
+ },
155
+ "icon/quaternary-a": {
156
+ "dark": "#ffffff4d",
157
+ "light": "#0000004d"
158
+ },
159
+ "icon/red": {
160
+ "dark": "#ff4747",
161
+ "light": "#ff4a40"
162
+ },
163
+ "icon/secondary-a": {
164
+ "dark": "#ffffffba",
165
+ "light": "#000000ba"
166
+ },
167
+ "icon/tertiary-a": {
168
+ "dark": "#ffffff80",
169
+ "light": "#00000080"
170
+ },
171
+ "icon/yellow": {
172
+ "dark": "#f5b625",
173
+ "light": "#f29900"
174
+ },
175
+ "overlay/hover-a": {
176
+ "dark": "#ffffff14",
177
+ "light": "#0000001a"
178
+ },
179
+ "overlay/hover-grey-a": {
180
+ "dark": "#4545451a",
181
+ "light": "#4545451a"
182
+ },
183
+ "overlay/press-a": {
184
+ "dark": "#ffffff33",
185
+ "light": "#00000026"
186
+ },
187
+ "overlay/press-grey-a": {
188
+ "dark": "#45454526",
189
+ "light": "#45454526"
190
+ },
191
+ "service/live": {
192
+ "dark": "#e51a42",
193
+ "light": "#e2012d"
194
+ },
195
+ "service/live-weak-a": {
196
+ "dark": "#e51a4226",
197
+ "light": "#e2012d4d"
198
+ },
199
+ "service/membership": {
200
+ "dark": "#ffbf00",
201
+ "light": "#ffb010"
202
+ },
203
+ "service/membership-weak-a": {
204
+ "dark": "#ffbf001f",
205
+ "light": "#eb91001f"
206
+ },
207
+ "service/noti": {
208
+ "dark": "#0c198b",
209
+ "light": "#020f81"
210
+ },
211
+ "service/pop-bg": {
212
+ "dark": "linear-gradient(135deg, #3b3a2d 13.08%, #232732 87.56%)",
213
+ "light": "linear-gradient(135deg, #faf7de 13.08%, #e7edfd 87.56%)"
214
+ },
215
+ "surface/card": {
216
+ "dark": "#232323",
217
+ "light": "#ffffff"
218
+ },
219
+ "surface/display-bar-bottom": {
220
+ "dark": "#151515",
221
+ "light": "#fdfdfd"
222
+ },
223
+ "surface/display-bar-top": {
224
+ "dark": "#151515",
225
+ "light": "#ffffff"
226
+ },
227
+ "surface/display-lock": {
228
+ "dark": "#2f2f2f",
229
+ "light": "#bfbfbf"
230
+ },
231
+ "surface/form-blue": {
232
+ "dark": "#0090ff",
233
+ "light": "#148aff"
234
+ },
235
+ "surface/form-blue-weak-a": {
236
+ "dark": "#0f97ff1f",
237
+ "light": "#007aff26"
238
+ },
239
+ "surface/form-gradient-h": {
240
+ "dark": "linear-gradient(90deg, #151515 0%, #15151500 100%)",
241
+ "light": "linear-gradient(90deg, #ffffff 0%, #ffffff00 100%)"
242
+ },
243
+ "surface/form-green": {
244
+ "dark": "#00cc5f",
245
+ "light": "#00bf59"
246
+ },
247
+ "surface/form-green-weak-a": {
248
+ "dark": "#0be06f14",
249
+ "light": "#00b84d26"
250
+ },
251
+ "surface/form-grey": {
252
+ "dark": "#7a7a7a",
253
+ "light": "#999999"
254
+ },
255
+ "surface/form-grey-weak-a": {
256
+ "dark": "#b3b3b314",
257
+ "light": "#6666661f"
258
+ },
259
+ "surface/form-inverted": {
260
+ "dark": "#f7f7f7",
261
+ "light": "#151515"
262
+ },
263
+ "surface/form-inverted-deep": {
264
+ "dark": "#ffffff",
265
+ "light": "#000000"
266
+ },
267
+ "surface/form-primary-a": {
268
+ "dark": "#ffffff0f",
269
+ "light": "#0000000f"
270
+ },
271
+ "surface/form-red": {
272
+ "dark": "#ff4747",
273
+ "light": "#ff4a40"
274
+ },
275
+ "surface/form-red-weak-a": {
276
+ "dark": "#ff47471f",
277
+ "light": "#ff4a4026"
278
+ },
279
+ "surface/form-secondary-a": {
280
+ "dark": "#ffffff0a",
281
+ "light": "#0000000a"
282
+ },
283
+ "surface/form-yellow": {
284
+ "dark": "#f5b625",
285
+ "light": "#f29900"
286
+ },
287
+ "surface/form-yellow-weak-a": {
288
+ "dark": "#f5b62514",
289
+ "light": "#f299001f"
290
+ },
291
+ "text/blue": {
292
+ "dark": "#0090ff",
293
+ "light": "#148aff"
294
+ },
295
+ "text/green": {
296
+ "dark": "#0be06f",
297
+ "light": "#00b84d"
298
+ },
299
+ "text/grey": {
300
+ "dark": "#b3b3b3",
301
+ "light": "#666666"
302
+ },
303
+ "text/invert-a": {
304
+ "dark": "#000000ed",
305
+ "light": "#ffffffed"
306
+ },
307
+ "text/primary": {
308
+ "dark": "#eeeeee",
309
+ "light": "#151515"
310
+ },
311
+ "text/primary-a": {
312
+ "dark": "#ffffffed",
313
+ "light": "#000000ed"
314
+ },
315
+ "text/quaternary": {
316
+ "dark": "#777777",
317
+ "light": "#999999"
318
+ },
319
+ "text/quaternary-a": {
320
+ "dark": "#ffffff80",
321
+ "light": "#00000080"
322
+ },
323
+ "text/red": {
324
+ "dark": "#ff4747",
325
+ "light": "#ff4a40"
326
+ },
327
+ "text/secondary": {
328
+ "dark": "#bababa",
329
+ "light": "#454545"
330
+ },
331
+ "text/secondary-a": {
332
+ "dark": "#ffffffba",
333
+ "light": "#000000ba"
334
+ },
335
+ "text/tertiary": {
336
+ "dark": "#999999",
337
+ "light": "#666666"
338
+ },
339
+ "text/tertiary-a": {
340
+ "dark": "#ffffff99",
341
+ "light": "#00000099"
342
+ },
343
+ "text/yellow": {
344
+ "dark": "#f5b625",
345
+ "light": "#f29900"
346
+ }
347
+ };
348
+ var flatColors = {
349
+ "always/avatar-bg01": "#aa47bc",
350
+ "always/avatar-bg02": "#7a1fa2",
351
+ "always/avatar-bg03": "#7e57c2",
352
+ "always/avatar-bg04": "#512da7",
353
+ "always/avatar-bg05": "#5c6bc0",
354
+ "always/avatar-bg06": "#0288d1",
355
+ "always/avatar-bg07": "#00579c",
356
+ "always/avatar-bg08": "#0098a6",
357
+ "always/avatar-bg09": "#00887a",
358
+ "always/avatar-bg10": "#689f39",
359
+ "always/avatar-bg11": "#33691e",
360
+ "always/avatar-bg12": "#004c3f",
361
+ "always/avatar-bg13": "#ec407a",
362
+ "always/avatar-bg14": "#c2175b",
363
+ "always/avatar-bg15": "#bf360c",
364
+ "always/avatar-bg16": "#f5511e",
365
+ "always/avatar-bg17": "#ef6c00",
366
+ "always/avatar-bg18": "#8c6e63",
367
+ "always/avatar-bg19": "#5d4038",
368
+ "always/avatar-bg20": "#78909c",
369
+ "always/avatar-bg21": "#465a65",
370
+ "always/black006-a": "#0000000f",
371
+ "always/black010-a": "#0000001a",
372
+ "always/black015-a": "#00000026",
373
+ "always/black020-a": "#00000033",
374
+ "always/black030-a": "#0000004d",
375
+ "always/black050-a": "#00000080",
376
+ "always/black060-a": "#00000099",
377
+ "always/black080-a": "#000000cc",
378
+ "always/black100": "#000000",
379
+ "always/grey-strong": "#232323",
380
+ "always/grey085": "#5c5c5c",
381
+ "always/lightgrey006-a": "#9999990f",
382
+ "always/lightgrey010-a": "#9999991a",
383
+ "always/lightgrey015-a": "#99999926",
384
+ "always/lightgrey020-a": "#99999933",
385
+ "always/lightgrey030-a": "#9999994d",
386
+ "always/lightgrey050-a": "#99999980",
387
+ "always/lightgrey080-a": "#999999cc",
388
+ "always/lightgrey100": "#999999",
389
+ "always/palette05": "linear-gradient(135deg, #db2667 0%, #f4a368 100%)",
390
+ "always/service-live-pop": "#df3868",
391
+ "always/service-live-red": "#ff0000",
392
+ "always/service-mnet": "#ff477f",
393
+ "always/service-mnetapp": "#ff477f",
394
+ "always/service-point": "linear-gradient(135deg, #1cac3c 0%, #1ca6bb 100%)",
395
+ "always/service-pop-ing": "linear-gradient(135deg, #db2667 0%, #f4a368 100%)",
396
+ "always/service-popgrey-weak-a": "#707ca00f",
397
+ "always/service-post-thumb-a": "#aa89f5cc",
398
+ "always/service-rankingpoll-thumb-a": "#FFADDD80",
399
+ "always/service-red080-a": "#f5254acc",
400
+ "always/service-survey": "#597eff",
401
+ "always/service-survey-thumb-a": "#7192f5cc",
402
+ "always/service-ticket": "#00bf59",
403
+ "always/white006-a": "#ffffff0f",
404
+ "always/white010-a": "#ffffff1a",
405
+ "always/white015-a": "#ffffff26",
406
+ "always/white020-a": "#ffffff33",
407
+ "always/white030-a": "#ffffff4d",
408
+ "always/white050-a": "#ffffff80",
409
+ "always/white060-a": "#ffffff99",
410
+ "always/white080-a": "#ffffffcc",
411
+ "always/white100": "#ffffff",
412
+ "auto/icon-primary-on-dark": "#ffffff",
413
+ "auto/icon-primary-on-light": "#000000ed",
414
+ "auto/icon-secondary-on-dark": "#ffffff",
415
+ "auto/icon-secondary-on-light": "#000000ba",
416
+ "auto/text-primary-on-dark": "#ffffff",
417
+ "auto/text-primary-on-light": "#000000",
418
+ "auto/text-secondary-on-dark": "#ffffffcc",
419
+ "auto/text-secondary-on-light": "#000000cc",
420
+ "picker/button": "#654bff",
421
+ "picker/button-weak-a": "#654bff26",
422
+ "picker/on-button": "#ffffff",
423
+ "picker/star": "#7266ff",
424
+ "pop/bg-tl01": "#c9d0ea",
425
+ "pop/bg-tl02": "#f2de6f",
426
+ "pop/bg-tl03": "#fca783",
427
+ "pop/bg-tl04": "#a0dda6",
428
+ "pop/bg-tl05": "#a2bce3",
429
+ "pop/bg-tl06": "#f7b3cf",
430
+ "pop/bg-tl07": "#bfa2e3",
431
+ "pop/bg-tl08": "#fb8686",
432
+ "pop/bg-tl09": "#eec2c2",
433
+ "pop/bg-tl10": "#e2d1b0",
434
+ "pop/bubble-tl01": "#7984b1",
435
+ "pop/bubble-tl03": "#e3703f",
436
+ "pop/bubble-tl04": "#5fac70",
437
+ "pop/bubble-tl05": "#587ab1",
438
+ "pop/bubble-tl06": "#ca7094",
439
+ "pop/bubble-tl07": "#8067b5",
440
+ "pop/bubble-tl08": "#cb4e4e",
441
+ "pop/bubble-tl09": "#cb8181",
442
+ "pop/bubble-tl1": "#a79272",
443
+ "pop/item-gradient01": "linear-gradient(135deg, #fbf3ac 0%, #ffe1fc 100%)",
444
+ "pop/item-gradient02": "linear-gradient(135deg, #cbe6ff 0%, #d5ffdf 100%)",
445
+ "pop/item-gradient03": "linear-gradient(135deg, #e4ceff 0%, #ffe4cc 100%)",
446
+ "pop/item-gradient04": "linear-gradient(135deg, #ffdcb3 0%, #c9f8ff 100%)",
447
+ "pop/item-gradient05": "linear-gradient(135deg, #ffd0ec 0%, #d3fcff 100%)",
448
+ "pop/item-gradient06": "linear-gradient(135deg, #feb5b5 0%, #d6fee1 100%)"
449
+ };
450
+ var shadowTokens = {
451
+ "shadow/default-large": {
452
+ "dark": "0px 1px 2px 0px #00000033, 0px 8px 48px 0px #00000099",
453
+ "light": "0px 1px 2px 0px #1a1a1a05, 0px 8px 48px 0px #1a1a1a26"
454
+ },
455
+ "shadow/default-medium": {
456
+ "dark": "0px 1px 2px 0px #00000033, 0px 4px 24px 0px #00000066",
457
+ "light": "0px 1px 2px 0px #00000005, 0px 4px 24px 0px #1a1a1a1a"
458
+ },
459
+ "shadow/default-small": {
460
+ "dark": "0px 1px 2px 0px #0000001a, 0px 2px 8px 0px #00000066",
461
+ "light": "0px 1px 2px 0px #1a1a1a05, 0px 2px 8px 0px #1a1a1a1a"
462
+ },
463
+ "shadow/default-xlarge": {
464
+ "dark": "0px 1px 2px 0px #00000033, 0px 16px 72px 0px #00000099",
465
+ "light": "0px 1px 2px 0px #1a1a1a05, 0px 16px 72px 0px #1a1a1a26"
466
+ },
467
+ "shadow/default-xsmall": {
468
+ "dark": "0px 1px 2px 0px #00000033, 0px 0px 4px 0px #00000066",
469
+ "light": "0px 1px 2px 0px #1a1a1a05, 0px 0px 4px 0px #1a1a1a26"
470
+ },
471
+ "shadow/weak-large": {
472
+ "dark": "0px 1px 2px 0px #0000001a, 0px 8px 48px 0px #00000066",
473
+ "light": "0px 1px 2px 0px #1a1a1a05, 0px 8px 48px 0px #1a1a1a1f"
474
+ },
475
+ "shadow/weak-medium": {
476
+ "dark": "0px 1px 2px 0px #0000001a, 0px 4px 24px 0px #00000033",
477
+ "light": "0px 1px 2px 0px #00000005, 0px 4px 20px 0px #1a1a1a14"
478
+ },
479
+ "shadow/weak-small": {
480
+ "dark": "0px 1px 2px 0px #0000001a, 0px 2px 8px 0px #00000033",
481
+ "light": "0px 1px 2px 0px #1a1a1a05, 0px 2px 8px 0px #1a1a1a14"
482
+ },
483
+ "shadow/weak-xlarge": {
484
+ "dark": "0px 1px 2px 0px #0000001a, 0px 16px 72px 0px #00000066",
485
+ "light": "0px 1px 2px 0px #1a1a1a05, 0px 16px 72px 0px #1a1a1a1f"
486
+ },
487
+ "shadow/weak-xsmall": {
488
+ "dark": "0px 1px 2px 0px #0000001a, 0px 0px 4px 0px #00000033",
489
+ "light": "0px 1px 1px 0px #1a1a1a05, 0px 0px 4px 0px #1a1a1a14"
490
+ }
491
+ };
492
+ var typographyTokens = {
493
+ "10/caption": {
494
+ "fontSize": "0.625rem",
495
+ "letterSpacing": "0%",
496
+ "lineHeight": "0.75rem"
497
+ },
498
+ "11/caption": {
499
+ "fontSize": "0.6875rem",
500
+ "letterSpacing": "0%",
501
+ "lineHeight": "0.875rem"
502
+ },
503
+ "12/caption": {
504
+ "fontSize": "0.75rem",
505
+ "letterSpacing": "0%",
506
+ "lineHeight": "1rem"
507
+ },
508
+ "13/body": {
509
+ "fontSize": "0.8125rem",
510
+ "letterSpacing": "0%",
511
+ "lineHeight": "1.125rem"
512
+ },
513
+ "14/body": {
514
+ "fontSize": "0.875rem",
515
+ "letterSpacing": "0%",
516
+ "lineHeight": "1.25rem"
517
+ },
518
+ "15/body": {
519
+ "fontSize": "0.9375rem",
520
+ "letterSpacing": "0%",
521
+ "lineHeight": "1.375rem"
522
+ },
523
+ "15/title": {
524
+ "fontSize": "0.9375rem",
525
+ "letterSpacing": "0%",
526
+ "lineHeight": "1.25rem"
527
+ },
528
+ "16/title": {
529
+ "fontSize": "1rem",
530
+ "letterSpacing": "0%",
531
+ "lineHeight": "1.375rem"
532
+ },
533
+ "17/body": {
534
+ "fontSize": "1.0625rem",
535
+ "letterSpacing": "0%",
536
+ "lineHeight": "1.625rem"
537
+ },
538
+ "17/body28": {
539
+ "fontSize": "1.0625rem",
540
+ "letterSpacing": "0%",
541
+ "lineHeight": "1.75rem"
542
+ },
543
+ "18/title": {
544
+ "fontSize": "1.125rem",
545
+ "letterSpacing": "-0.5%",
546
+ "lineHeight": "1.375rem"
547
+ },
548
+ "20/title": {
549
+ "fontSize": "1.25rem",
550
+ "letterSpacing": "-0.5%",
551
+ "lineHeight": "1.5rem"
552
+ },
553
+ "24/title": {
554
+ "fontSize": "1.5rem",
555
+ "letterSpacing": "-0.5%",
556
+ "lineHeight": "1.75rem"
557
+ },
558
+ "28/title": {
559
+ "fontSize": "28px",
560
+ "letterSpacing": "-1.5%",
561
+ "lineHeight": "34px"
562
+ },
563
+ "32/title": {
564
+ "fontSize": "32px",
565
+ "letterSpacing": "-1.5%",
566
+ "lineHeight": "38px"
567
+ },
568
+ "40/title": {
569
+ "fontSize": "40px",
570
+ "letterSpacing": "-1.5%",
571
+ "lineHeight": "48px"
572
+ },
573
+ "9/caption": {
574
+ "fontSize": "0.5625rem",
575
+ "letterSpacing": "0%",
576
+ "lineHeight": "0.625rem"
577
+ }
578
+ };
579
+ var fontWeightMap = {
580
+ "med": 500,
581
+ "reg": 400,
582
+ "semibold": 600
583
+ };
584
+ var fontFamily = "'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'";
585
+
586
+ // src/shared/generator.ts
587
+ function cssVarName(slug, prefix, kind) {
588
+ const s = slug.replace(/\//g, "-");
589
+ return kind === "mode" ? `--${prefix}-mode-${s}` : `--${prefix}-${s}`;
590
+ }
591
+ function cssVarRef(slug, prefix, kind) {
592
+ return `var(${cssVarName(slug, prefix, kind)})`;
593
+ }
594
+ function buildColorTree(modeColors2, flatColors2, prefix) {
595
+ const tree = {};
596
+ const add = (slug, kind) => {
597
+ const [cat, ...rest] = slug.split("/");
598
+ const leaf = rest.join("/").replace(/\//g, "-") || cat;
599
+ (tree[cat] ?? (tree[cat] = {}))[leaf] = cssVarRef(slug, prefix, kind);
600
+ };
601
+ for (const slug of Object.keys(modeColors2)) add(slug, "mode");
602
+ for (const slug of Object.keys(flatColors2)) add(slug, "flat");
603
+ return tree;
604
+ }
605
+ function buildShadowRefs(shadowTokens2, prefix) {
606
+ const out = {};
607
+ for (const slug of Object.keys(shadowTokens2)) {
608
+ const leaf = slug.replace(/^shadow\//, "");
609
+ out[leaf] = cssVarRef(slug, prefix, "mode");
610
+ }
611
+ return out;
612
+ }
613
+ function colorLines(t, prefix, mode) {
614
+ return [
615
+ ...Object.entries(t.modeColors).map(
616
+ ([slug, pair]) => ` ${cssVarName(slug, prefix, "mode")}: ${pair[mode]};`
617
+ ),
618
+ ...Object.entries(t.shadowTokens).map(
619
+ ([slug, pair]) => ` ${cssVarName(slug, prefix, "mode")}: ${pair[mode]};`
620
+ )
621
+ ].join("\n");
622
+ }
623
+ function renderFallbackCss(t, opts) {
624
+ const p = opts.prefix;
625
+ const flat = Object.entries(t.flatColors).map(([slug, v]) => ` ${cssVarName(slug, p, "flat")}: ${v};`).join("\n");
626
+ const lightColors = colorLines(t, p, "light");
627
+ let css = `/* ================================================================
628
+ * bstage \uB514\uC790\uC778 \uD1A0\uD070 \u2014 dev fallback (${p})
629
+ * @bstage-sdk/design \uC0DD\uC131\uBB3C. \uAC1C\uBC1C/\uBBF8\uB9AC\uBCF4\uAE30 \uC804\uC6A9(:root fallback).
630
+ * \uBC30\uD3EC \uC2DC\uC5D4 \uD50C\uB7AB\uD3FC :root \uAC12\uC744 \uC0C1\uC18D\uD558\uBA70 \uC774 \uD30C\uC77C\uC740 \uBC88\uB4E4\uB418\uC9C0 \uC54A\uB294\uB2E4.
631
+ * ================================================================ */
632
+
633
+ :root {
634
+ ${lightColors}
635
+
636
+ ${flat}
637
+
638
+ --${p}-font-family: ${t.fontFamily};
639
+ }
640
+ `;
641
+ if (opts.dark) {
642
+ const darkColors = colorLines(t, p, "dark");
643
+ css += `
644
+ @media (prefers-color-scheme: dark) {
645
+ :root:not([data-bspoke="light"]) {
646
+ ${darkColors.replace(/^ {2}/gm, " ")}
647
+ }
648
+ }
649
+
650
+ :root[data-bspoke="dark"],
651
+ :root.dark {
652
+ ${darkColors}
653
+ }
654
+ `;
655
+ }
656
+ return css;
657
+ }
658
+
659
+ // src/shared/devWarn.ts
660
+ var warned = /* @__PURE__ */ new Set();
661
+ function devWarnOnce(dedupeKey, message) {
662
+ if (warned.has(dedupeKey)) return;
663
+ warned.add(dedupeKey);
664
+ console.warn(`[bstage-design] ${message}`);
665
+ }
666
+
667
+ // src/shared/text-style.ts
668
+ function resolveTextStyle(typographyTokens2, fontWeightMap2, token) {
669
+ const lastSlash = token.lastIndexOf("/");
670
+ const base = token.slice(0, lastSlash);
671
+ const weight = token.slice(lastSlash + 1);
672
+ const typo = typographyTokens2[token] ?? typographyTokens2[base];
673
+ if (!typo) {
674
+ throw new Error(
675
+ `[bstage-design] \uC54C \uC218 \uC5C6\uB294 \uD0C0\uC774\uD3EC\uADF8\uB798\uD53C \uD1A0\uD070: "${token}". \uC0AC\uC6A9 \uAC00\uB2A5: ${Object.keys(typographyTokens2).join(", ")}`
676
+ );
677
+ }
678
+ const weightBase = weight.split("-")[0];
679
+ const resolvedWeight = fontWeightMap2[weight] ?? fontWeightMap2[weightBase];
680
+ if (resolvedWeight === void 0 && process.env.NODE_ENV !== "production") {
681
+ devWarnOnce(
682
+ `textStyle:weight:${weight}`,
683
+ `\uC54C \uC218 \uC5C6\uB294 font weight: "${weight}" (\uD1A0\uD070 "${token}"). 400\uC73C\uB85C \uB300\uCCB4\uD569\uB2C8\uB2E4. \uC0AC\uC6A9 \uAC00\uB2A5: ${Object.keys(fontWeightMap2).join(", ")}`
684
+ );
685
+ }
686
+ return {
687
+ fontSize: typo.fontSize,
688
+ lineHeight: typo.lineHeight,
689
+ fontWeight: resolvedWeight ?? 400,
690
+ letterSpacing: typo.letterSpacing
691
+ };
692
+ }
693
+
694
+ // src/user/index.ts
695
+ var PREFIX = "user";
696
+ var color = buildColorTree(modeColors, flatColors, PREFIX);
697
+ var shadow = buildShadowRefs(shadowTokens, PREFIX);
698
+ function cssVar(slug) {
699
+ return slug in modeColors ? cssVarRef(slug, PREFIX, "mode") : cssVarRef(slug, PREFIX, "flat");
700
+ }
701
+ function textStyle(token) {
702
+ return resolveTextStyle(typographyTokens, fontWeightMap, token);
703
+ }
704
+ function renderCss() {
705
+ return renderFallbackCss(
706
+ { modeColors, flatColors, shadowTokens, fontFamily },
707
+ { prefix: PREFIX, dark: true }
708
+ );
709
+ }
710
+ // Annotate the CommonJS export names for ESM import in node:
711
+ 0 && (module.exports = {
712
+ color,
713
+ cssVar,
714
+ flatColors,
715
+ fontFamily,
716
+ fontWeightMap,
717
+ modeColors,
718
+ renderCss,
719
+ shadow,
720
+ shadowTokens,
721
+ textStyle,
722
+ typographyTokens
723
+ });