@bstage-sdk/design 0.6.2 → 0.7.0

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