@chan.run/theme 0.0.0-stage → 0.3.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.
Files changed (5) hide show
  1. package/LICENSE +21 -0
  2. package/dist/index.d.mts +2 -0
  3. package/dist/index.mjs +1782 -0
  4. package/package.json +44 -3
  5. package/README.md +0 -3
package/dist/index.mjs ADDED
@@ -0,0 +1,1782 @@
1
+ import { Box, Flex, Grid, Heading, Text, createSystem, defaultConfig, defineConfig, defineRecipe, defineSlotRecipe } from "@chakra-ui/react";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ const adminChromeSlotRecipe = defineSlotRecipe({
4
+ className: "chan-admin-chrome",
5
+ slots: [
6
+ "rail",
7
+ "frame",
8
+ "tick",
9
+ "tag"
10
+ ],
11
+ base: {
12
+ rail: {
13
+ position: "sticky",
14
+ top: "52px",
15
+ zIndex: 54,
16
+ display: "flex",
17
+ alignItems: "center",
18
+ gap: "9px",
19
+ height: "26px",
20
+ px: "22px",
21
+ fontFamily: "body",
22
+ fontSize: "9px",
23
+ letterSpacing: "0.18em",
24
+ textTransform: "uppercase",
25
+ color: "chan.orange",
26
+ bg: "chan.bg",
27
+ borderBottom: "1px solid",
28
+ borderColor: "chan.orange.border",
29
+ backgroundImage: "repeating-linear-gradient(135deg, transparent, transparent 9px, rgba(255,77,0,.06) 9px, rgba(255,77,0,.06) 18px)"
30
+ },
31
+ frame: {
32
+ position: "fixed",
33
+ inset: 0,
34
+ zIndex: 80,
35
+ pointerEvents: "none",
36
+ border: "1.5px solid",
37
+ borderColor: "chan.orange.border"
38
+ },
39
+ tick: {
40
+ position: "absolute",
41
+ width: "16px",
42
+ height: "16px",
43
+ border: "2px solid",
44
+ borderColor: "chan.orange"
45
+ },
46
+ tag: {
47
+ position: "absolute",
48
+ left: "50%",
49
+ bottom: 0,
50
+ transform: "translateX(-50%)",
51
+ fontFamily: "body",
52
+ fontSize: "8px",
53
+ letterSpacing: "0.2em",
54
+ textTransform: "uppercase",
55
+ color: "chan.orange",
56
+ whiteSpace: "nowrap",
57
+ bg: "chan.bg",
58
+ border: "1px solid",
59
+ borderColor: "chan.orange.border",
60
+ borderBottom: 0,
61
+ borderTopRadius: "4px",
62
+ px: "12px",
63
+ pt: "4px",
64
+ pb: "5px"
65
+ }
66
+ }
67
+ });
68
+ // src/recipes/codeBlock.recipe.ts
69
+ const codeBlockSlotRecipe = defineSlotRecipe({
70
+ slots: [
71
+ "root",
72
+ "content",
73
+ "title",
74
+ "header",
75
+ "footer",
76
+ "control",
77
+ "overlay",
78
+ "code",
79
+ "codeText",
80
+ "copyTrigger",
81
+ "copyIndicator",
82
+ "collapseTrigger",
83
+ "collapseIndicator",
84
+ "collapseText"
85
+ ],
86
+ variants: { variant: { chan: {
87
+ root: {
88
+ "--code-block-radius": "radii.sm",
89
+ "--code-block-max-height": "none",
90
+ mb: "4",
91
+ bg: "chan.bg.code",
92
+ color: "chan.text.dim",
93
+ borderColor: "chan.border"
94
+ },
95
+ header: {
96
+ px: {
97
+ base: "3",
98
+ md: "4"
99
+ },
100
+ py: "2",
101
+ mb: "0",
102
+ minH: "36px",
103
+ borderBottomWidth: "1px",
104
+ borderColor: "chan.border",
105
+ "& [data-icon]": {
106
+ flexShrink: 0,
107
+ w: "16px",
108
+ h: "16px",
109
+ color: "chan.text.faint",
110
+ "& svg": {
111
+ width: "100%",
112
+ height: "100%",
113
+ fill: "currentColor"
114
+ }
115
+ }
116
+ },
117
+ title: {
118
+ display: "block",
119
+ fontFamily: "body",
120
+ fontSize: "xs",
121
+ color: "chan.text.dim",
122
+ letterSpacing: "0.02em",
123
+ overflow: "hidden",
124
+ textOverflow: "ellipsis",
125
+ whiteSpace: "nowrap"
126
+ },
127
+ control: {
128
+ position: "absolute",
129
+ top: "2",
130
+ right: "2",
131
+ zIndex: "1",
132
+ opacity: 0,
133
+ transition: "opacity 0.15s",
134
+ "[data-codeblock]:hover &, [data-codeblock]:focus-within &": { opacity: 1 }
135
+ },
136
+ copyTrigger: {
137
+ display: "flex",
138
+ alignItems: "center",
139
+ justifyContent: "center",
140
+ w: "28px",
141
+ h: "28px",
142
+ flexShrink: 0,
143
+ fontSize: "16px",
144
+ bg: "transparent",
145
+ borderRadius: "xs",
146
+ cursor: "pointer",
147
+ color: "chan.text.faint",
148
+ transition: "color 0.15s, background 0.15s",
149
+ _hover: {
150
+ color: "chan.text",
151
+ bg: "chan.bg.hover",
152
+ "&[data-copied]": { color: "chan.green" }
153
+ },
154
+ "&[data-copied]": { color: "chan.green" },
155
+ _focusVisible: {
156
+ outline: "2px solid",
157
+ outlineColor: "chan.orange",
158
+ outlineOffset: "-2px"
159
+ },
160
+ position: "relative",
161
+ _before: {
162
+ content: "\"\"",
163
+ position: "absolute",
164
+ inset: "-8px"
165
+ }
166
+ },
167
+ content: {
168
+ "& > pre": {
169
+ fontFamily: "body",
170
+ fontSize: "xs",
171
+ lineHeight: "1.6",
172
+ p: {
173
+ base: "3",
174
+ md: "4"
175
+ },
176
+ overflowX: "auto",
177
+ whiteSpace: "pre !important"
178
+ },
179
+ "& pre code": {
180
+ background: "none",
181
+ border: "none",
182
+ padding: 0,
183
+ fontSize: "inherit",
184
+ color: "inherit",
185
+ whiteSpace: "pre !important",
186
+ display: "block"
187
+ },
188
+ "& pre .line": { display: "inline" },
189
+ "& pre span[style]": {
190
+ color: "var(--shiki-dark) !important",
191
+ _light: { color: "var(--shiki-light) !important" }
192
+ }
193
+ }
194
+ } } }
195
+ });
196
+ // src/recipes/dataTable.recipe.ts
197
+ const dataTableSlotRecipe = defineSlotRecipe({
198
+ className: "chan-data-table",
199
+ slots: [
200
+ "root",
201
+ "header",
202
+ "columnHeader",
203
+ "row",
204
+ "cell"
205
+ ],
206
+ base: {
207
+ root: {
208
+ border: "1px solid",
209
+ borderColor: "chan.border",
210
+ borderRadius: "md",
211
+ bg: "chan.bg",
212
+ overflow: "hidden",
213
+ fontFamily: "body"
214
+ },
215
+ header: { bg: "chan.bg.code" },
216
+ columnHeader: {
217
+ fontSize: "8px",
218
+ letterSpacing: "0.22em",
219
+ textTransform: "uppercase",
220
+ color: "chan.text.faint",
221
+ borderColor: "chan.border",
222
+ py: "11px"
223
+ },
224
+ row: { cursor: "default" },
225
+ cell: {
226
+ fontSize: "11px",
227
+ borderColor: "chan.border",
228
+ borderBottomStyle: "dashed"
229
+ }
230
+ },
231
+ variants: {
232
+ archived: { true: { row: { opacity: .5 } } },
233
+ clickable: { true: { row: { cursor: "pointer" } } }
234
+ }
235
+ });
236
+ // src/recipes/dialog.recipe.ts
237
+ const dialogSlotRecipe = defineSlotRecipe({
238
+ slots: [
239
+ "trigger",
240
+ "backdrop",
241
+ "positioner",
242
+ "content",
243
+ "title",
244
+ "description",
245
+ "closeTrigger",
246
+ "header",
247
+ "body",
248
+ "footer"
249
+ ],
250
+ variants: { variant: { chan: {
251
+ backdrop: { bg: "blackAlpha.700" },
252
+ content: {
253
+ "--dialog-base-margin": {
254
+ base: "spacing.4",
255
+ md: "15vh"
256
+ },
257
+ w: {
258
+ base: "calc(100% - {spacing.8})",
259
+ md: "560px"
260
+ },
261
+ maxW: "none",
262
+ maxH: {
263
+ base: "calc(100dvh - {spacing.8})",
264
+ md: "480px"
265
+ },
266
+ bg: "chan.bg.card",
267
+ borderWidth: "1px",
268
+ borderColor: "chan.border",
269
+ borderRadius: "md",
270
+ boxShadow: "none",
271
+ overflow: "hidden"
272
+ },
273
+ header: {
274
+ alignItems: "center",
275
+ gap: "3",
276
+ px: "4",
277
+ py: "0",
278
+ color: "chan.text.faint",
279
+ borderBottomWidth: "1px",
280
+ borderColor: "chan.border"
281
+ },
282
+ body: {
283
+ display: "flex",
284
+ flexDirection: "column",
285
+ minH: "0",
286
+ p: "0"
287
+ }
288
+ } } }
289
+ });
290
+ // src/recipes/emptyState.recipe.ts
291
+ const emptyStateSlotRecipe = defineSlotRecipe({
292
+ slots: [
293
+ "root",
294
+ "content",
295
+ "indicator",
296
+ "title",
297
+ "description"
298
+ ],
299
+ variants: { variant: { chan: {
300
+ root: {
301
+ minH: "100dvh",
302
+ display: "flex",
303
+ alignItems: "center",
304
+ justifyContent: "center",
305
+ bg: "chan.bg"
306
+ },
307
+ indicator: {
308
+ fontFamily: "display",
309
+ fontWeight: "900",
310
+ fontSize: {
311
+ base: "6xl",
312
+ md: "8xl"
313
+ },
314
+ lineHeight: "1",
315
+ color: "chan.orange"
316
+ },
317
+ title: {
318
+ fontFamily: "display",
319
+ fontWeight: "800",
320
+ fontSize: "2xl",
321
+ textTransform: "uppercase",
322
+ letterSpacing: "0.04em",
323
+ color: "chan.text"
324
+ },
325
+ description: {
326
+ fontFamily: "body",
327
+ fontSize: "sm",
328
+ color: "chan.text.dim",
329
+ textAlign: "center",
330
+ maxW: "md"
331
+ }
332
+ } } }
333
+ });
334
+ // src/recipes/lbl.recipe.ts
335
+ const toneColor = (color) => ({ color });
336
+ const lblRecipe = defineRecipe({
337
+ className: "chan-lbl",
338
+ base: {
339
+ display: "inline-flex",
340
+ alignItems: "center",
341
+ fontFamily: "body",
342
+ fontSize: "9.5px",
343
+ letterSpacing: "0.18em",
344
+ textTransform: "uppercase"
345
+ },
346
+ variants: {
347
+ tone: {
348
+ orange: toneColor("chan.orange"),
349
+ dim: toneColor("chan.text.dim"),
350
+ faint: toneColor("chan.text.faint"),
351
+ ok: toneColor("chan.green"),
352
+ warn: toneColor("chan.yellow"),
353
+ danger: toneColor("chan.danger"),
354
+ info: toneColor("#6a9eda"),
355
+ neutral: toneColor("chan.text.dim"),
356
+ owner: toneColor("chan.orange"),
357
+ admin: toneColor("#6a9eda"),
358
+ member: toneColor("chan.text.dim"),
359
+ off: toneColor("chan.text.faint")
360
+ },
361
+ variant: {
362
+ plain: {},
363
+ chip: {
364
+ fontSize: "8.5px",
365
+ letterSpacing: "0.14em",
366
+ border: "1px solid",
367
+ borderColor: "color-mix(in srgb, currentColor 38%, transparent)",
368
+ bg: "color-mix(in srgb, currentColor 12%, transparent)",
369
+ borderRadius: "3px",
370
+ px: "7px",
371
+ py: "2px"
372
+ }
373
+ }
374
+ },
375
+ compoundVariants: [{
376
+ tone: "off",
377
+ variant: "chip",
378
+ css: {
379
+ borderStyle: "dashed",
380
+ bg: "transparent"
381
+ }
382
+ }],
383
+ defaultVariants: {
384
+ tone: "neutral",
385
+ variant: "plain"
386
+ }
387
+ });
388
+ // src/recipes/listbox.recipe.ts
389
+ const listboxSlotRecipe = defineSlotRecipe({
390
+ slots: [
391
+ "label",
392
+ "input",
393
+ "item",
394
+ "itemText",
395
+ "itemIndicator",
396
+ "itemGroup",
397
+ "itemGroupLabel",
398
+ "content",
399
+ "root",
400
+ "valueText",
401
+ "empty"
402
+ ],
403
+ variants: { variant: { chan: {
404
+ root: {
405
+ flex: "1",
406
+ minH: "0",
407
+ gap: "0"
408
+ },
409
+ input: {
410
+ flex: "1",
411
+ minW: "0",
412
+ py: "3",
413
+ bg: "transparent",
414
+ outline: "none",
415
+ fontFamily: "body",
416
+ fontSize: "sm",
417
+ color: "chan.text",
418
+ _placeholder: { color: "chan.text.faint" }
419
+ },
420
+ content: {
421
+ flex: "1",
422
+ maxH: "none",
423
+ py: "2",
424
+ px: "2",
425
+ gap: "0"
426
+ },
427
+ item: {
428
+ gap: "3",
429
+ px: "4",
430
+ py: "2",
431
+ borderRadius: "xs",
432
+ fontFamily: "body",
433
+ color: "chan.text.dim",
434
+ transition: "background 0.1s",
435
+ _highlighted: {
436
+ outline: "none",
437
+ bg: "chan.bg.hover",
438
+ color: "chan.text"
439
+ }
440
+ },
441
+ itemText: {
442
+ minW: "0",
443
+ fontSize: "sm",
444
+ "& mark": {
445
+ bg: "transparent",
446
+ color: "chan.orange",
447
+ fontWeight: "500"
448
+ }
449
+ },
450
+ empty: {
451
+ px: "4",
452
+ py: "8",
453
+ fontFamily: "body",
454
+ fontSize: "xs",
455
+ color: "chan.text.faint",
456
+ textAlign: "center"
457
+ }
458
+ } } }
459
+ });
460
+ // src/recipes/panel.recipe.ts
461
+ const panelSlotRecipe = defineSlotRecipe({
462
+ className: "chan-panel",
463
+ slots: [
464
+ "root",
465
+ "head",
466
+ "label",
467
+ "body"
468
+ ],
469
+ base: {
470
+ root: {
471
+ border: "1px solid",
472
+ borderColor: "chan.border",
473
+ borderRadius: "md",
474
+ bg: "chan.bg",
475
+ overflow: "hidden"
476
+ },
477
+ head: {
478
+ display: "flex",
479
+ alignItems: "center",
480
+ gap: "8px",
481
+ px: "16px",
482
+ py: "11px",
483
+ borderBottom: "1px solid",
484
+ borderColor: "chan.border"
485
+ },
486
+ label: {
487
+ fontFamily: "body",
488
+ fontSize: "8.5px",
489
+ letterSpacing: "0.18em",
490
+ textTransform: "uppercase",
491
+ color: "chan.text.dim"
492
+ },
493
+ body: {
494
+ px: "16px",
495
+ py: "14px"
496
+ }
497
+ },
498
+ variants: { state: {
499
+ default: {},
500
+ live: { label: { color: "chan.orange" } },
501
+ degraded: { root: { borderColor: "chan.danger.border" } },
502
+ placeholder: { root: {
503
+ borderStyle: "dashed",
504
+ opacity: .6
505
+ } }
506
+ } },
507
+ defaultVariants: { state: "default" }
508
+ });
509
+ // src/recipes/progress.recipe.ts
510
+ const progressSlotRecipe = defineSlotRecipe({
511
+ slots: [
512
+ "root",
513
+ "label",
514
+ "track",
515
+ "range",
516
+ "valueText",
517
+ "view",
518
+ "circle",
519
+ "circleTrack",
520
+ "circleRange"
521
+ ],
522
+ variants: { variant: { chan: {
523
+ track: {
524
+ bg: "chan.bg.card",
525
+ borderRadius: "0"
526
+ },
527
+ range: {
528
+ bg: "chan.orange",
529
+ transitionProperty: "width",
530
+ transitionDuration: "0.3s",
531
+ transitionTimingFunction: "ease",
532
+ _motionReduce: { transitionProperty: "none" }
533
+ }
534
+ } } },
535
+ compoundVariants: [{
536
+ variant: "chan",
537
+ css: { track: { h: "3px" } }
538
+ }]
539
+ });
540
+ // src/recipes/splash.recipe.ts
541
+ const splashSlotRecipe = defineSlotRecipe({
542
+ className: "chan-splash",
543
+ slots: [
544
+ "root",
545
+ "panelStart",
546
+ "panelEnd",
547
+ "hub"
548
+ ],
549
+ base: {
550
+ root: {
551
+ position: "fixed",
552
+ inset: 0,
553
+ display: "flex",
554
+ zIndex: 1e4,
555
+ "--splash-reveal": "1000ms"
556
+ },
557
+ panelStart: {
558
+ flex: 1,
559
+ position: "relative",
560
+ bg: "chan.bg.soft",
561
+ top: 0,
562
+ left: 0,
563
+ transitionProperty: "top, left",
564
+ transitionDuration: "var(--splash-reveal)",
565
+ transitionTimingFunction: "ease-in-out"
566
+ },
567
+ panelEnd: {
568
+ flex: 1,
569
+ position: "relative",
570
+ bg: "chan.bg.soft",
571
+ bottom: 0,
572
+ right: 0,
573
+ transitionProperty: "bottom, right",
574
+ transitionDuration: "var(--splash-reveal)",
575
+ transitionTimingFunction: "ease-in-out"
576
+ },
577
+ hub: {
578
+ position: "absolute",
579
+ bg: "chan.bg.card",
580
+ border: "1px solid",
581
+ borderColor: "chan.border",
582
+ borderRadius: "md",
583
+ display: "flex",
584
+ alignItems: "center",
585
+ justifyContent: "center",
586
+ zIndex: 1,
587
+ width: "var(--splash-hub-w)"
588
+ }
589
+ },
590
+ variants: {
591
+ orientation: {
592
+ vertical: {
593
+ root: { flexDirection: "column" },
594
+ panelStart: {
595
+ borderBottom: "2px solid",
596
+ borderColor: "chan.border"
597
+ },
598
+ panelEnd: {
599
+ borderTop: "2px solid",
600
+ borderColor: "chan.border"
601
+ },
602
+ hub: {
603
+ bottom: 0,
604
+ left: "50%",
605
+ transform: "translate(-50%, 50%)"
606
+ }
607
+ },
608
+ horizontal: {
609
+ root: { flexDirection: "row" },
610
+ panelStart: {
611
+ borderRight: "2px solid",
612
+ borderColor: "chan.border"
613
+ },
614
+ panelEnd: {
615
+ borderLeft: "2px solid",
616
+ borderColor: "chan.border"
617
+ },
618
+ hub: {
619
+ right: 0,
620
+ top: "50%",
621
+ transform: "translate(50%, -50%)"
622
+ }
623
+ }
624
+ },
625
+ size: {
626
+ sm: { hub: {
627
+ "--splash-hub-w": "180px",
628
+ px: 4,
629
+ py: 3
630
+ } },
631
+ md: { hub: {
632
+ "--splash-hub-w": "240px",
633
+ px: 5,
634
+ py: 4
635
+ } },
636
+ lg: { hub: {
637
+ "--splash-hub-w": "320px",
638
+ px: 6,
639
+ py: 5
640
+ } }
641
+ },
642
+ splitting: {
643
+ true: { root: { pointerEvents: "none" } },
644
+ false: {}
645
+ }
646
+ },
647
+ compoundVariants: [{
648
+ orientation: "vertical",
649
+ splitting: true,
650
+ css: {
651
+ panelStart: { top: "-100%" },
652
+ panelEnd: { bottom: "-100%" }
653
+ }
654
+ }, {
655
+ orientation: "horizontal",
656
+ splitting: true,
657
+ css: {
658
+ panelStart: { left: "-100%" },
659
+ panelEnd: { right: "-100%" }
660
+ }
661
+ }],
662
+ defaultVariants: {
663
+ orientation: "vertical",
664
+ size: "md",
665
+ splitting: false
666
+ }
667
+ });
668
+ // src/recipes/statusDot.recipe.ts
669
+ const dot = (color) => ({ bg: color });
670
+ const statusDotRecipe = defineRecipe({
671
+ className: "chan-status-dot",
672
+ base: {
673
+ display: "inline-block",
674
+ width: "6px",
675
+ height: "6px",
676
+ borderRadius: "full",
677
+ flexShrink: 0
678
+ },
679
+ variants: {
680
+ tone: {
681
+ ok: dot("chan.green"),
682
+ warn: dot("chan.yellow"),
683
+ danger: dot("chan.danger"),
684
+ info: dot("#6a9eda"),
685
+ neutral: dot("chan.text.faint"),
686
+ off: dot("chan.text.faint")
687
+ },
688
+ live: { true: { animation: "chan-pulse" } }
689
+ },
690
+ defaultVariants: { tone: "neutral" }
691
+ });
692
+ // src/recipes/tabs.recipe.ts
693
+ const tabsSlotRecipe = defineSlotRecipe({
694
+ slots: [
695
+ "root",
696
+ "trigger",
697
+ "list",
698
+ "content",
699
+ "contentGroup",
700
+ "indicator"
701
+ ],
702
+ variants: { variant: { chan: {
703
+ root: {
704
+ mb: "4",
705
+ borderWidth: "1px",
706
+ borderColor: "chan.border",
707
+ borderRadius: "sm",
708
+ overflow: "hidden"
709
+ },
710
+ list: {
711
+ display: "flex",
712
+ bg: "chan.bg.card",
713
+ borderBottomWidth: "1px",
714
+ borderColor: "chan.border",
715
+ overflowX: "auto"
716
+ },
717
+ trigger: {
718
+ height: "auto",
719
+ minW: "auto",
720
+ px: "4",
721
+ py: "2",
722
+ fontFamily: "body",
723
+ fontSize: "xs",
724
+ fontWeight: "500",
725
+ letterSpacing: "0.02em",
726
+ whiteSpace: "nowrap",
727
+ color: "chan.text.faint",
728
+ borderBottom: "2px solid",
729
+ borderColor: "transparent",
730
+ cursor: "pointer",
731
+ transition: "color 0.15s, border-color 0.15s",
732
+ _hover: { color: "chan.text.dim" },
733
+ _selected: {
734
+ color: "chan.orange",
735
+ borderColor: "chan.orange"
736
+ },
737
+ _focusVisible: {
738
+ outline: "2px solid",
739
+ outlineColor: "chan.orange",
740
+ outlineOffset: "-2px"
741
+ }
742
+ },
743
+ content: {
744
+ _horizontal: { pt: "0" },
745
+ "& > [data-codeblock]": {
746
+ mb: "0",
747
+ borderWidth: "0",
748
+ borderRadius: "0"
749
+ }
750
+ }
751
+ } } }
752
+ });
753
+ // src/theme.ts
754
+ const config = defineConfig({
755
+ globalCss: { body: {
756
+ bg: "{colors.chan.bg}",
757
+ color: "{colors.chan.text}",
758
+ fontFamily: "{fonts.body}"
759
+ } },
760
+ theme: {
761
+ tokens: {
762
+ colors: {
763
+ "chan.palette.dark.bg": { value: "#0a0a08" },
764
+ "chan.palette.dark.bg.soft": { value: "#111110" },
765
+ "chan.palette.dark.bg.card": { value: "#161614" },
766
+ "chan.palette.dark.bg.code": { value: "#131311" },
767
+ "chan.palette.dark.bg.hover": { value: "#1d1d1a" },
768
+ "chan.palette.dark.bg.sidebar": { value: "#0f0f0d" },
769
+ "chan.palette.dark.border": { value: "#242420" },
770
+ "chan.palette.dark.border.soft": { value: "#1a1a18" },
771
+ "chan.palette.dark.border.sidebar": { value: "#1e1e1c" },
772
+ "chan.palette.dark.text": { value: "#f0ece4" },
773
+ "chan.palette.dark.text.dim": { value: "color-mix(in srgb, #f0ece4 50%, transparent)" },
774
+ "chan.palette.dark.text.faint": { value: "color-mix(in srgb, #f0ece4 30%, transparent)" },
775
+ "chan.palette.dark.bg.hover.subtle": { value: "rgba(255, 255, 255, 0.03)" },
776
+ "chan.palette.light.bg": { value: "#fafaf7" },
777
+ "chan.palette.light.bg.soft": { value: "#f3f1ec" },
778
+ "chan.palette.light.bg.card": { value: "#ebe8e1" },
779
+ "chan.palette.light.bg.code": { value: "#efece4" },
780
+ "chan.palette.light.bg.hover": { value: "#e2ded5" },
781
+ "chan.palette.light.bg.sidebar": { value: "#f5f3ed" },
782
+ "chan.palette.light.border": { value: "#d5d1c6" },
783
+ "chan.palette.light.border.soft": { value: "#e2ded4" },
784
+ "chan.palette.light.border.sidebar": { value: "#dcd8cd" },
785
+ "chan.palette.light.text": { value: "#1a1a16" },
786
+ "chan.palette.light.text.dim": { value: "color-mix(in srgb, #1a1a16 60%, transparent)" },
787
+ "chan.palette.light.text.faint": { value: "color-mix(in srgb, #1a1a16 40%, transparent)" },
788
+ "chan.palette.light.bg.hover.subtle": { value: "rgba(0, 0, 0, 0.04)" },
789
+ "chan.orange": { value: "#ff4d00" },
790
+ "chan.orange.dim": { value: "#cc3d00" },
791
+ "chan.orange.glow": { value: "#ff6a2a" },
792
+ "chan.orange.bg": { value: "rgba(255, 77, 0, 0.08)" },
793
+ "chan.orange.border": { value: "rgba(255, 77, 0, 0.20)" },
794
+ "chan.green": { value: "#3a8c5c" },
795
+ "chan.green.bg": { value: "rgba(58, 140, 92, 0.08)" },
796
+ "chan.green.border": { value: "rgba(58, 140, 92, 0.20)" },
797
+ "chan.teal": { value: "#2f9c9c" },
798
+ "chan.teal.bg": { value: "rgba(47, 156, 156, 0.08)" },
799
+ "chan.teal.border": { value: "rgba(47, 156, 156, 0.20)" },
800
+ "chan.yellow": { value: "#a88000" },
801
+ "chan.yellow.bg": { value: "rgba(200, 160, 0, 0.07)" },
802
+ "chan.yellow.border": { value: "rgba(200, 160, 0, 0.15)" },
803
+ "chan.danger": { value: "#d06060" },
804
+ "chan.danger.bg": { value: "rgba(180, 40, 40, 0.12)" },
805
+ "chan.danger.border": { value: "rgba(180, 40, 40, 0.20)" },
806
+ "chan.orange.glow.bg": { value: "rgba(255, 77, 0, 0.06)" }
807
+ },
808
+ fonts: {
809
+ display: { value: "'Barlow Condensed', sans-serif" },
810
+ body: { value: "'IBM Plex Mono', monospace" }
811
+ },
812
+ radii: {
813
+ xs: { value: "5px" },
814
+ sm: { value: "10px" },
815
+ md: { value: "18px" }
816
+ },
817
+ spacing: {
818
+ 1: { value: "4px" },
819
+ 2: { value: "8px" },
820
+ 3: { value: "12px" },
821
+ 4: { value: "16px" },
822
+ 5: { value: "24px" },
823
+ 6: { value: "32px" },
824
+ 7: { value: "48px" },
825
+ 8: { value: "56px" },
826
+ 9: { value: "64px" },
827
+ 10: { value: "72px" }
828
+ },
829
+ sizes: {
830
+ sidebar: { value: "256px" },
831
+ topbar: { value: "52px" },
832
+ bottomNav: { value: "58px" },
833
+ touchTarget: { value: "44px" },
834
+ docsContent: { value: "768px" },
835
+ docsLayout: { value: "1080px" },
836
+ toc: { value: "200px" }
837
+ },
838
+ easings: { cinematic: { value: "cubic-bezier(0.16, 1, 0.3, 1)" } },
839
+ animations: { "chan-pulse": { value: "chan-pulse 2.5s ease-in-out infinite" } }
840
+ },
841
+ keyframes: {
842
+ "chan-pulse": {
843
+ "0%, 100%": { opacity: .35 },
844
+ "50%": { opacity: 1 }
845
+ },
846
+ "line-draw": { to: { width: "65%" } },
847
+ "border-sweep": {
848
+ "0%": {
849
+ opacity: 0,
850
+ backgroundPositionX: "0%"
851
+ },
852
+ "15%": { opacity: 1 },
853
+ "100%": {
854
+ opacity: 1,
855
+ backgroundPositionX: "50%"
856
+ }
857
+ },
858
+ "clip-up": { to: {
859
+ opacity: 1,
860
+ transform: "translateY(0)"
861
+ } },
862
+ "fade-up": { to: {
863
+ opacity: 1,
864
+ transform: "translateY(0)"
865
+ } }
866
+ },
867
+ textStyles: {
868
+ "chan.wordmark": { value: {
869
+ fontFamily: "{fonts.display}",
870
+ fontWeight: 800,
871
+ letterSpacing: "0.05em",
872
+ textTransform: "uppercase",
873
+ lineHeight: 1
874
+ } },
875
+ "chan.label": { value: {
876
+ fontFamily: "{fonts.body}",
877
+ fontSize: "8px",
878
+ letterSpacing: "0.12em",
879
+ textTransform: "uppercase"
880
+ } },
881
+ "chan.nav": { value: {
882
+ fontFamily: "{fonts.body}",
883
+ fontSize: "10.5px",
884
+ letterSpacing: "0.07em",
885
+ textTransform: "uppercase",
886
+ fontWeight: 500
887
+ } },
888
+ "chan.navGroup": { value: {
889
+ fontFamily: "{fonts.body}",
890
+ fontSize: "7.5px",
891
+ letterSpacing: "0.22em",
892
+ textTransform: "uppercase"
893
+ } }
894
+ },
895
+ recipes: {
896
+ lbl: lblRecipe,
897
+ statusDot: statusDotRecipe
898
+ },
899
+ slotRecipes: {
900
+ splash: splashSlotRecipe,
901
+ panel: panelSlotRecipe,
902
+ dataTable: dataTableSlotRecipe,
903
+ adminChrome: adminChromeSlotRecipe,
904
+ codeBlock: codeBlockSlotRecipe,
905
+ dialog: dialogSlotRecipe,
906
+ emptyState: emptyStateSlotRecipe,
907
+ listbox: listboxSlotRecipe,
908
+ progress: progressSlotRecipe,
909
+ tabs: tabsSlotRecipe
910
+ },
911
+ semanticTokens: { colors: {
912
+ "chan.bg": { value: {
913
+ _light: "{colors.chan.palette.light.bg}",
914
+ _dark: "{colors.chan.palette.dark.bg}"
915
+ } },
916
+ "chan.bg.soft": { value: {
917
+ _light: "{colors.chan.palette.light.bg.soft}",
918
+ _dark: "{colors.chan.palette.dark.bg.soft}"
919
+ } },
920
+ "chan.bg.card": { value: {
921
+ _light: "{colors.chan.palette.light.bg.card}",
922
+ _dark: "{colors.chan.palette.dark.bg.card}"
923
+ } },
924
+ "chan.bg.code": { value: {
925
+ _light: "{colors.chan.palette.light.bg.code}",
926
+ _dark: "{colors.chan.palette.dark.bg.code}"
927
+ } },
928
+ "chan.bg.hover": { value: {
929
+ _light: "{colors.chan.palette.light.bg.hover}",
930
+ _dark: "{colors.chan.palette.dark.bg.hover}"
931
+ } },
932
+ "chan.bg.sidebar": { value: {
933
+ _light: "{colors.chan.palette.light.bg.sidebar}",
934
+ _dark: "{colors.chan.palette.dark.bg.sidebar}"
935
+ } },
936
+ "chan.bg.hover.subtle": { value: {
937
+ _light: "{colors.chan.palette.light.bg.hover.subtle}",
938
+ _dark: "{colors.chan.palette.dark.bg.hover.subtle}"
939
+ } },
940
+ "chan.border": { value: {
941
+ _light: "{colors.chan.palette.light.border}",
942
+ _dark: "{colors.chan.palette.dark.border}"
943
+ } },
944
+ "chan.border.soft": { value: {
945
+ _light: "{colors.chan.palette.light.border.soft}",
946
+ _dark: "{colors.chan.palette.dark.border.soft}"
947
+ } },
948
+ "chan.border.sidebar": { value: {
949
+ _light: "{colors.chan.palette.light.border.sidebar}",
950
+ _dark: "{colors.chan.palette.dark.border.sidebar}"
951
+ } },
952
+ "chan.text": { value: {
953
+ _light: "{colors.chan.palette.light.text}",
954
+ _dark: "{colors.chan.palette.dark.text}"
955
+ } },
956
+ "chan.text.dim": { value: {
957
+ _light: "{colors.chan.palette.light.text.dim}",
958
+ _dark: "{colors.chan.palette.dark.text.dim}"
959
+ } },
960
+ "chan.text.faint": { value: {
961
+ _light: "{colors.chan.palette.light.text.faint}",
962
+ _dark: "{colors.chan.palette.dark.text.faint}"
963
+ } },
964
+ bg: {
965
+ DEFAULT: { value: "{colors.chan.bg}" },
966
+ subtle: { value: "{colors.chan.bg.soft}" },
967
+ muted: { value: "{colors.chan.bg.card}" }
968
+ },
969
+ fg: {
970
+ DEFAULT: { value: "{colors.chan.text}" },
971
+ muted: { value: "{colors.chan.text.dim}" },
972
+ subtle: { value: "{colors.chan.text.faint}" }
973
+ },
974
+ border: {
975
+ DEFAULT: { value: "{colors.chan.border}" },
976
+ muted: { value: "{colors.chan.border.soft}" }
977
+ }
978
+ } }
979
+ }
980
+ });
981
+ const system = createSystem(defaultConfig, config);
982
+ // src/TokenShowcase.tsx
983
+ function Swatch({ name, token, hex }) {
984
+ return /* @__PURE__ */ jsxs(Box, {
985
+ borderRadius: "sm",
986
+ border: "1px solid",
987
+ borderColor: "chan.border",
988
+ overflow: "hidden",
989
+ children: [/* @__PURE__ */ jsx(Box, {
990
+ h: "44px",
991
+ bg: hex
992
+ }), /* @__PURE__ */ jsxs(Box, {
993
+ p: "8px 10px",
994
+ bg: "chan.bg.card",
995
+ children: [
996
+ /* @__PURE__ */ jsx(Text, {
997
+ fontSize: "9px",
998
+ letterSpacing: "0.04em",
999
+ color: "chan.text",
1000
+ children: name
1001
+ }),
1002
+ /* @__PURE__ */ jsx(Text, {
1003
+ fontSize: "8px",
1004
+ letterSpacing: "0.06em",
1005
+ color: "chan.text.faint",
1006
+ mt: "1px",
1007
+ children: hex
1008
+ }),
1009
+ /* @__PURE__ */ jsx(Text, {
1010
+ fontSize: "7.5px",
1011
+ letterSpacing: "0.06em",
1012
+ color: "chan.orange",
1013
+ mt: "2px",
1014
+ children: token
1015
+ })
1016
+ ]
1017
+ })]
1018
+ });
1019
+ }
1020
+ function SectionTitle({ id, title }) {
1021
+ return /* @__PURE__ */ jsxs(Flex, {
1022
+ align: "center",
1023
+ gap: "14px",
1024
+ mb: "24px",
1025
+ pb: "12px",
1026
+ borderBottom: "1px solid",
1027
+ borderColor: "chan.border",
1028
+ children: [/* @__PURE__ */ jsx(Text, {
1029
+ fontSize: "8px",
1030
+ letterSpacing: "0.22em",
1031
+ textTransform: "uppercase",
1032
+ color: "chan.orange",
1033
+ children: id
1034
+ }), /* @__PURE__ */ jsx(Heading, {
1035
+ fontFamily: "display",
1036
+ fontWeight: "700",
1037
+ fontSize: "28px",
1038
+ letterSpacing: "0.04em",
1039
+ textTransform: "uppercase",
1040
+ color: "chan.text",
1041
+ children: title
1042
+ })]
1043
+ });
1044
+ }
1045
+ function SubHead({ children }) {
1046
+ return /* @__PURE__ */ jsx(Text, {
1047
+ fontSize: "8px",
1048
+ letterSpacing: "0.2em",
1049
+ textTransform: "uppercase",
1050
+ color: "chan.orange",
1051
+ mb: "14px",
1052
+ mt: "32px",
1053
+ children
1054
+ });
1055
+ }
1056
+ function TypeRow({ label, children }) {
1057
+ return /* @__PURE__ */ jsxs(Flex, {
1058
+ align: "baseline",
1059
+ gap: "20px",
1060
+ p: "18px 20px",
1061
+ borderBottom: "1px solid",
1062
+ borderColor: "chan.border.soft",
1063
+ children: [/* @__PURE__ */ jsx(Text, {
1064
+ fontSize: "8px",
1065
+ letterSpacing: "0.12em",
1066
+ textTransform: "uppercase",
1067
+ color: "chan.text.faint",
1068
+ minW: "72px",
1069
+ flexShrink: 0,
1070
+ pt: "3px",
1071
+ children: label
1072
+ }), /* @__PURE__ */ jsx(Box, {
1073
+ flex: "1",
1074
+ lineHeight: "1.1",
1075
+ children
1076
+ })]
1077
+ });
1078
+ }
1079
+ function SpaceRow({ token, px, use }) {
1080
+ return /* @__PURE__ */ jsxs(Flex, {
1081
+ align: "center",
1082
+ gap: "12px",
1083
+ bg: "chan.bg.card",
1084
+ border: "1px solid",
1085
+ borderColor: "chan.border",
1086
+ borderRadius: "xs",
1087
+ p: "10px 16px",
1088
+ children: [
1089
+ /* @__PURE__ */ jsx(Text, {
1090
+ fontSize: "9px",
1091
+ letterSpacing: "0.1em",
1092
+ color: "chan.orange",
1093
+ minW: "80px",
1094
+ children: token
1095
+ }),
1096
+ /* @__PURE__ */ jsx(Text, {
1097
+ fontSize: "9px",
1098
+ letterSpacing: "0.08em",
1099
+ color: "chan.text.dim",
1100
+ minW: "36px",
1101
+ children: px
1102
+ }),
1103
+ /* @__PURE__ */ jsx(Box, {
1104
+ flex: "1",
1105
+ h: "8px",
1106
+ bg: "chan.bg",
1107
+ borderRadius: "2px",
1108
+ overflow: "hidden",
1109
+ children: /* @__PURE__ */ jsx(Box, {
1110
+ h: "100%",
1111
+ bg: "chan.orange.bg",
1112
+ borderRight: "2px solid",
1113
+ borderColor: "chan.orange",
1114
+ w: `${Math.min(parseInt(px, 10) / 72 * 100, 100)}%`
1115
+ })
1116
+ }),
1117
+ /* @__PURE__ */ jsx(Text, {
1118
+ fontSize: "8px",
1119
+ letterSpacing: "0.06em",
1120
+ color: "chan.text.faint",
1121
+ minW: "160px",
1122
+ textAlign: "right",
1123
+ children: use
1124
+ })
1125
+ ]
1126
+ });
1127
+ }
1128
+ function RadiusDemo({ label, value }) {
1129
+ return /* @__PURE__ */ jsxs(Box, {
1130
+ textAlign: "center",
1131
+ children: [
1132
+ /* @__PURE__ */ jsx(Box, {
1133
+ w: "80px",
1134
+ h: "80px",
1135
+ border: "1px solid",
1136
+ borderColor: "chan.border",
1137
+ bg: "chan.bg.card",
1138
+ borderRadius: value,
1139
+ mx: "auto",
1140
+ mb: "8px"
1141
+ }),
1142
+ /* @__PURE__ */ jsx(Text, {
1143
+ fontSize: "9px",
1144
+ color: "chan.orange",
1145
+ letterSpacing: "0.1em",
1146
+ children: label
1147
+ }),
1148
+ /* @__PURE__ */ jsx(Text, {
1149
+ fontSize: "8px",
1150
+ color: "chan.text.faint",
1151
+ mt: "2px",
1152
+ children: value
1153
+ })
1154
+ ]
1155
+ });
1156
+ }
1157
+ function BadgeDemo({ label, bg, color, borderColor }) {
1158
+ return /* @__PURE__ */ jsx(Text, {
1159
+ as: "span",
1160
+ display: "inline-block",
1161
+ fontSize: "7.5px",
1162
+ letterSpacing: "0.14em",
1163
+ textTransform: "uppercase",
1164
+ p: "3px 8px",
1165
+ borderRadius: "3px",
1166
+ bg,
1167
+ color,
1168
+ border: "1px solid",
1169
+ borderColor,
1170
+ children: label
1171
+ });
1172
+ }
1173
+ function ButtonDemo({ label, bg, color, borderColor }) {
1174
+ return /* @__PURE__ */ jsx(Text, {
1175
+ as: "button",
1176
+ display: "inline-flex",
1177
+ alignItems: "center",
1178
+ p: "9px 16px",
1179
+ borderRadius: "xs",
1180
+ fontFamily: "body",
1181
+ fontSize: "10px",
1182
+ letterSpacing: "0.1em",
1183
+ textTransform: "uppercase",
1184
+ fontWeight: "500",
1185
+ cursor: "pointer",
1186
+ bg,
1187
+ color,
1188
+ border: borderColor ? "1px solid" : "none",
1189
+ borderColor,
1190
+ children: label
1191
+ });
1192
+ }
1193
+ function TokenShowcase() {
1194
+ return /* @__PURE__ */ jsxs(Box, {
1195
+ maxW: "860px",
1196
+ mx: "auto",
1197
+ p: "64px 40px 120px",
1198
+ fontFamily: "body",
1199
+ children: [
1200
+ /* @__PURE__ */ jsxs(Box, {
1201
+ pb: "64px",
1202
+ borderBottom: "1px solid",
1203
+ borderColor: "chan.border",
1204
+ mb: "64px",
1205
+ children: [
1206
+ /* @__PURE__ */ jsx(Text, {
1207
+ fontSize: "9px",
1208
+ letterSpacing: "0.2em",
1209
+ textTransform: "uppercase",
1210
+ color: "chan.text.faint",
1211
+ mb: "48px",
1212
+ children: "chan.run / design tokens"
1213
+ }),
1214
+ /* @__PURE__ */ jsxs(Heading, {
1215
+ fontFamily: "display",
1216
+ fontWeight: "900",
1217
+ fontSize: "clamp(48px, 8vw, 72px)",
1218
+ lineHeight: "0.88",
1219
+ letterSpacing: "-0.01em",
1220
+ textTransform: "uppercase",
1221
+ mb: "24px",
1222
+ color: "chan.text",
1223
+ children: [
1224
+ "TOKEN",
1225
+ /* @__PURE__ */ jsx("br", {}),
1226
+ /* @__PURE__ */ jsx(Text, {
1227
+ as: "span",
1228
+ color: "chan.orange",
1229
+ children: "SHOWCASE"
1230
+ })
1231
+ ]
1232
+ }),
1233
+ /* @__PURE__ */ jsx(Text, {
1234
+ fontSize: "12px",
1235
+ lineHeight: "1.9",
1236
+ color: "chan.text.dim",
1237
+ maxW: "520px",
1238
+ children: "Visual reference for all design tokens defined in the @chan.run/design package. Every color, font, spacing, and radius value rendered for verification."
1239
+ })
1240
+ ]
1241
+ }),
1242
+ /* @__PURE__ */ jsxs(Box, {
1243
+ mb: "72px",
1244
+ children: [
1245
+ /* @__PURE__ */ jsx(SectionTitle, {
1246
+ id: "01",
1247
+ title: "Color Tokens"
1248
+ }),
1249
+ /* @__PURE__ */ jsx(SubHead, { children: "Backgrounds" }),
1250
+ /* @__PURE__ */ jsxs(Grid, {
1251
+ templateColumns: "repeat(auto-fill, minmax(110px, 1fr))",
1252
+ gap: "8px",
1253
+ mb: "24px",
1254
+ children: [
1255
+ /* @__PURE__ */ jsx(Swatch, {
1256
+ name: "Base",
1257
+ token: "chan.bg",
1258
+ hex: "#0a0a08"
1259
+ }),
1260
+ /* @__PURE__ */ jsx(Swatch, {
1261
+ name: "Canvas",
1262
+ token: "chan.bg.soft",
1263
+ hex: "#111110"
1264
+ }),
1265
+ /* @__PURE__ */ jsx(Swatch, {
1266
+ name: "Card",
1267
+ token: "chan.bg.card",
1268
+ hex: "#161614"
1269
+ }),
1270
+ /* @__PURE__ */ jsx(Swatch, {
1271
+ name: "Hover",
1272
+ token: "chan.bg.hover",
1273
+ hex: "#1d1d1a"
1274
+ }),
1275
+ /* @__PURE__ */ jsx(Swatch, {
1276
+ name: "Sidebar",
1277
+ token: "chan.bg.sidebar",
1278
+ hex: "#0f0f0d"
1279
+ })
1280
+ ]
1281
+ }),
1282
+ /* @__PURE__ */ jsx(SubHead, { children: "Brand Orange" }),
1283
+ /* @__PURE__ */ jsxs(Grid, {
1284
+ templateColumns: "repeat(auto-fill, minmax(110px, 1fr))",
1285
+ gap: "8px",
1286
+ mb: "24px",
1287
+ children: [
1288
+ /* @__PURE__ */ jsx(Swatch, {
1289
+ name: "Orange",
1290
+ token: "chan.orange",
1291
+ hex: "#ff4d00"
1292
+ }),
1293
+ /* @__PURE__ */ jsx(Swatch, {
1294
+ name: "Dim",
1295
+ token: "chan.orange.dim",
1296
+ hex: "#cc3d00"
1297
+ }),
1298
+ /* @__PURE__ */ jsx(Swatch, {
1299
+ name: "Glow",
1300
+ token: "chan.orange.glow",
1301
+ hex: "#ff6a2a"
1302
+ }),
1303
+ /* @__PURE__ */ jsx(Swatch, {
1304
+ name: "Bg tint",
1305
+ token: "chan.orange.bg",
1306
+ hex: "rgba(255,77,0,0.08)"
1307
+ }),
1308
+ /* @__PURE__ */ jsx(Swatch, {
1309
+ name: "Border",
1310
+ token: "chan.orange.border",
1311
+ hex: "rgba(255,77,0,0.20)"
1312
+ })
1313
+ ]
1314
+ }),
1315
+ /* @__PURE__ */ jsx(SubHead, { children: "Text" }),
1316
+ /* @__PURE__ */ jsxs(Grid, {
1317
+ templateColumns: "repeat(auto-fill, minmax(110px, 1fr))",
1318
+ gap: "8px",
1319
+ mb: "24px",
1320
+ children: [
1321
+ /* @__PURE__ */ jsx(Swatch, {
1322
+ name: "Primary",
1323
+ token: "chan.text",
1324
+ hex: "#f0ece4"
1325
+ }),
1326
+ /* @__PURE__ */ jsx(Swatch, {
1327
+ name: "Dim",
1328
+ token: "chan.text.dim",
1329
+ hex: "#7a7870"
1330
+ }),
1331
+ /* @__PURE__ */ jsx(Swatch, {
1332
+ name: "Faint",
1333
+ token: "chan.text.faint",
1334
+ hex: "#3a3a36"
1335
+ })
1336
+ ]
1337
+ }),
1338
+ /* @__PURE__ */ jsx(SubHead, { children: "Borders" }),
1339
+ /* @__PURE__ */ jsxs(Grid, {
1340
+ templateColumns: "repeat(auto-fill, minmax(110px, 1fr))",
1341
+ gap: "8px",
1342
+ mb: "24px",
1343
+ children: [
1344
+ /* @__PURE__ */ jsx(Swatch, {
1345
+ name: "Default",
1346
+ token: "chan.border",
1347
+ hex: "#242420"
1348
+ }),
1349
+ /* @__PURE__ */ jsx(Swatch, {
1350
+ name: "Soft",
1351
+ token: "chan.border.soft",
1352
+ hex: "#1a1a18"
1353
+ }),
1354
+ /* @__PURE__ */ jsx(Swatch, {
1355
+ name: "Sidebar",
1356
+ token: "chan.border.sidebar",
1357
+ hex: "#1e1e1c"
1358
+ })
1359
+ ]
1360
+ }),
1361
+ /* @__PURE__ */ jsx(SubHead, { children: "Semantic" }),
1362
+ /* @__PURE__ */ jsxs(Grid, {
1363
+ templateColumns: "repeat(auto-fill, minmax(110px, 1fr))",
1364
+ gap: "8px",
1365
+ mb: "24px",
1366
+ children: [
1367
+ /* @__PURE__ */ jsx(Swatch, {
1368
+ name: "Green",
1369
+ token: "chan.green",
1370
+ hex: "#3a8c5c"
1371
+ }),
1372
+ /* @__PURE__ */ jsx(Swatch, {
1373
+ name: "Yellow",
1374
+ token: "chan.yellow",
1375
+ hex: "#a88000"
1376
+ }),
1377
+ /* @__PURE__ */ jsx(Swatch, {
1378
+ name: "Danger",
1379
+ token: "chan.danger",
1380
+ hex: "#d06060"
1381
+ })
1382
+ ]
1383
+ })
1384
+ ]
1385
+ }),
1386
+ /* @__PURE__ */ jsxs(Box, {
1387
+ mb: "72px",
1388
+ children: [
1389
+ /* @__PURE__ */ jsx(SectionTitle, {
1390
+ id: "02",
1391
+ title: "Typography"
1392
+ }),
1393
+ /* @__PURE__ */ jsx(SubHead, { children: "Barlow Condensed — Display" }),
1394
+ /* @__PURE__ */ jsxs(Box, {
1395
+ bg: "chan.bg.card",
1396
+ border: "1px solid",
1397
+ borderColor: "chan.border",
1398
+ borderRadius: "sm",
1399
+ overflow: "hidden",
1400
+ mb: "8px",
1401
+ children: [
1402
+ /* @__PURE__ */ jsx(TypeRow, {
1403
+ label: "Hero / 900",
1404
+ children: /* @__PURE__ */ jsx(Text, {
1405
+ fontFamily: "display",
1406
+ fontWeight: "900",
1407
+ fontSize: "clamp(40px, 7vw, 72px)",
1408
+ textTransform: "uppercase",
1409
+ color: "chan.text",
1410
+ children: "TOOLS THAT RUN"
1411
+ })
1412
+ }),
1413
+ /* @__PURE__ */ jsx(TypeRow, {
1414
+ label: "Title / 800",
1415
+ children: /* @__PURE__ */ jsx(Text, {
1416
+ fontFamily: "display",
1417
+ fontWeight: "800",
1418
+ fontSize: "clamp(32px, 5vw, 48px)",
1419
+ textTransform: "uppercase",
1420
+ color: "chan.text",
1421
+ children: "ONE PLACE FOR EVERY TOOL"
1422
+ })
1423
+ }),
1424
+ /* @__PURE__ */ jsx(TypeRow, {
1425
+ label: "Section / 700",
1426
+ children: /* @__PURE__ */ jsx(Text, {
1427
+ fontFamily: "display",
1428
+ fontWeight: "700",
1429
+ fontSize: "28px",
1430
+ textTransform: "uppercase",
1431
+ color: "chan.text",
1432
+ children: "Products · Open Source · About"
1433
+ })
1434
+ }),
1435
+ /* @__PURE__ */ jsx(TypeRow, {
1436
+ label: "Card / 700",
1437
+ children: /* @__PURE__ */ jsx(Text, {
1438
+ fontFamily: "display",
1439
+ fontWeight: "700",
1440
+ fontSize: "21px",
1441
+ textTransform: "uppercase",
1442
+ color: "chan.text",
1443
+ children: "RESTUNNEL"
1444
+ })
1445
+ }),
1446
+ /* @__PURE__ */ jsx(TypeRow, {
1447
+ label: "Small / 700",
1448
+ children: /* @__PURE__ */ jsx(Text, {
1449
+ fontFamily: "display",
1450
+ fontWeight: "700",
1451
+ fontSize: "17px",
1452
+ textTransform: "uppercase",
1453
+ color: "chan.text",
1454
+ children: "MISE-MSVC"
1455
+ })
1456
+ })
1457
+ ]
1458
+ }),
1459
+ /* @__PURE__ */ jsx(SubHead, { children: "IBM Plex Mono — Body" }),
1460
+ /* @__PURE__ */ jsxs(Box, {
1461
+ bg: "chan.bg.card",
1462
+ border: "1px solid",
1463
+ borderColor: "chan.border",
1464
+ borderRadius: "sm",
1465
+ overflow: "hidden",
1466
+ mb: "8px",
1467
+ children: [
1468
+ /* @__PURE__ */ jsx(TypeRow, {
1469
+ label: "Body / 400",
1470
+ children: /* @__PURE__ */ jsx(Text, {
1471
+ fontFamily: "body",
1472
+ fontWeight: "400",
1473
+ fontSize: "13px",
1474
+ color: "chan.text.dim",
1475
+ children: "We build tools that work, document them, and ship them. No noise. No vaporware."
1476
+ })
1477
+ }),
1478
+ /* @__PURE__ */ jsx(TypeRow, {
1479
+ label: "Small / 400",
1480
+ children: /* @__PURE__ */ jsx(Text, {
1481
+ fontFamily: "body",
1482
+ fontWeight: "400",
1483
+ fontSize: "11px",
1484
+ color: "chan.text.dim",
1485
+ children: "Route datacenter traffic through personal devices using Noise Protocol encryption."
1486
+ })
1487
+ }),
1488
+ /* @__PURE__ */ jsx(TypeRow, {
1489
+ label: "Meta / 400",
1490
+ children: /* @__PURE__ */ jsx(Text, {
1491
+ fontFamily: "body",
1492
+ fontWeight: "400",
1493
+ fontSize: "10px",
1494
+ color: "chan.text.dim",
1495
+ children: "Hub-and-spoke · SOCKS5 / HTTP proxy output · Residential IP"
1496
+ })
1497
+ }),
1498
+ /* @__PURE__ */ jsx(TypeRow, {
1499
+ label: "Label / 500",
1500
+ children: /* @__PURE__ */ jsx(Text, {
1501
+ fontFamily: "body",
1502
+ fontWeight: "500",
1503
+ fontSize: "9px",
1504
+ letterSpacing: "0.15em",
1505
+ textTransform: "uppercase",
1506
+ color: "chan.text.faint",
1507
+ children: "PRODUCT STUDIO · CHIANG MAI · 18°N 98°E"
1508
+ })
1509
+ }),
1510
+ /* @__PURE__ */ jsx(TypeRow, {
1511
+ label: "Light / 300",
1512
+ children: /* @__PURE__ */ jsx(Text, {
1513
+ fontFamily: "body",
1514
+ fontWeight: "300",
1515
+ fontSize: "12px",
1516
+ color: "chan.text.dim",
1517
+ children: "Secondary content and supporting metadata."
1518
+ })
1519
+ })
1520
+ ]
1521
+ })
1522
+ ]
1523
+ }),
1524
+ /* @__PURE__ */ jsxs(Box, {
1525
+ mb: "72px",
1526
+ children: [
1527
+ /* @__PURE__ */ jsx(SectionTitle, {
1528
+ id: "03",
1529
+ title: "Spacing & Layout"
1530
+ }),
1531
+ /* @__PURE__ */ jsx(SubHead, { children: "Spacing Scale (8px grid)" }),
1532
+ /* @__PURE__ */ jsxs(Flex, {
1533
+ direction: "column",
1534
+ gap: "6px",
1535
+ mb: "24px",
1536
+ children: [
1537
+ /* @__PURE__ */ jsx(SpaceRow, {
1538
+ token: "--space-1",
1539
+ px: "4px",
1540
+ use: "Icon gap, tight inline spacing"
1541
+ }),
1542
+ /* @__PURE__ */ jsx(SpaceRow, {
1543
+ token: "--space-2",
1544
+ px: "8px",
1545
+ use: "Badge padding, small gaps"
1546
+ }),
1547
+ /* @__PURE__ */ jsx(SpaceRow, {
1548
+ token: "--space-3",
1549
+ px: "12px",
1550
+ use: "Button padding, nav item gap"
1551
+ }),
1552
+ /* @__PURE__ */ jsx(SpaceRow, {
1553
+ token: "--space-4",
1554
+ px: "16px",
1555
+ use: "Card padding (sm), grid gap"
1556
+ }),
1557
+ /* @__PURE__ */ jsx(SpaceRow, {
1558
+ token: "--space-5",
1559
+ px: "24px",
1560
+ use: "Card padding, sidebar padding"
1561
+ }),
1562
+ /* @__PURE__ */ jsx(SpaceRow, {
1563
+ token: "--space-6",
1564
+ px: "32px",
1565
+ use: "Section element spacing"
1566
+ }),
1567
+ /* @__PURE__ */ jsx(SpaceRow, {
1568
+ token: "--space-7",
1569
+ px: "48px",
1570
+ use: "Section header margin"
1571
+ }),
1572
+ /* @__PURE__ */ jsx(SpaceRow, {
1573
+ token: "--space-8",
1574
+ px: "56px",
1575
+ use: "Section horizontal padding"
1576
+ }),
1577
+ /* @__PURE__ */ jsx(SpaceRow, {
1578
+ token: "--space-9",
1579
+ px: "64px",
1580
+ use: "Hero padding top"
1581
+ }),
1582
+ /* @__PURE__ */ jsx(SpaceRow, {
1583
+ token: "--space-10",
1584
+ px: "72px",
1585
+ use: "Between major chapters"
1586
+ })
1587
+ ]
1588
+ }),
1589
+ /* @__PURE__ */ jsx(SubHead, { children: "Border Radius" }),
1590
+ /* @__PURE__ */ jsxs(Flex, {
1591
+ gap: "32px",
1592
+ mb: "24px",
1593
+ children: [
1594
+ /* @__PURE__ */ jsx(RadiusDemo, {
1595
+ label: "--radius-xs",
1596
+ value: "5px"
1597
+ }),
1598
+ /* @__PURE__ */ jsx(RadiusDemo, {
1599
+ label: "--radius-sm",
1600
+ value: "10px"
1601
+ }),
1602
+ /* @__PURE__ */ jsx(RadiusDemo, {
1603
+ label: "--radius-md",
1604
+ value: "18px"
1605
+ })
1606
+ ]
1607
+ }),
1608
+ /* @__PURE__ */ jsx(SubHead, { children: "Layout Sizes" }),
1609
+ /* @__PURE__ */ jsx(Box, {
1610
+ bg: "chan.bg.card",
1611
+ border: "1px solid",
1612
+ borderColor: "chan.border",
1613
+ borderRadius: "sm",
1614
+ overflow: "hidden",
1615
+ children: [
1616
+ ["Sidebar width", "256px"],
1617
+ ["Mobile topbar", "52px"],
1618
+ ["Mobile bottom nav", "58px"],
1619
+ ["Touch target min", "44px"]
1620
+ ].map(([label, value]) => /* @__PURE__ */ jsxs(Flex, {
1621
+ p: "10px 16px",
1622
+ borderBottom: "1px solid",
1623
+ borderColor: "chan.border.soft",
1624
+ justify: "space-between",
1625
+ children: [/* @__PURE__ */ jsx(Text, {
1626
+ fontSize: "10px",
1627
+ color: "chan.text.dim",
1628
+ children: label
1629
+ }), /* @__PURE__ */ jsx(Text, {
1630
+ fontSize: "10px",
1631
+ color: "chan.orange",
1632
+ letterSpacing: "0.06em",
1633
+ children: value
1634
+ })]
1635
+ }, label))
1636
+ })
1637
+ ]
1638
+ }),
1639
+ /* @__PURE__ */ jsxs(Box, {
1640
+ mb: "72px",
1641
+ children: [
1642
+ /* @__PURE__ */ jsx(SectionTitle, {
1643
+ id: "04",
1644
+ title: "Components"
1645
+ }),
1646
+ /* @__PURE__ */ jsx(SubHead, { children: "Badges" }),
1647
+ /* @__PURE__ */ jsxs(Flex, {
1648
+ gap: "8px",
1649
+ mb: "24px",
1650
+ flexWrap: "wrap",
1651
+ children: [
1652
+ /* @__PURE__ */ jsx(BadgeDemo, {
1653
+ label: "Active",
1654
+ bg: "chan.orange.bg",
1655
+ color: "chan.orange",
1656
+ borderColor: "chan.orange.border"
1657
+ }),
1658
+ /* @__PURE__ */ jsx(BadgeDemo, {
1659
+ label: "In Dev",
1660
+ bg: "chan.yellow.bg",
1661
+ color: "chan.yellow",
1662
+ borderColor: "chan.yellow.border"
1663
+ }),
1664
+ /* @__PURE__ */ jsx(BadgeDemo, {
1665
+ label: "Planned",
1666
+ bg: "chan.bg.hover.subtle",
1667
+ color: "chan.text.faint",
1668
+ borderColor: "chan.border"
1669
+ }),
1670
+ /* @__PURE__ */ jsx(BadgeDemo, {
1671
+ label: "Stable",
1672
+ bg: "chan.green.bg",
1673
+ color: "chan.green",
1674
+ borderColor: "chan.green.border"
1675
+ })
1676
+ ]
1677
+ }),
1678
+ /* @__PURE__ */ jsx(SubHead, { children: "Buttons" }),
1679
+ /* @__PURE__ */ jsxs(Flex, {
1680
+ gap: "8px",
1681
+ mb: "24px",
1682
+ flexWrap: "wrap",
1683
+ children: [
1684
+ /* @__PURE__ */ jsx(ButtonDemo, {
1685
+ label: "Primary",
1686
+ bg: "chan.orange",
1687
+ color: "chan.bg"
1688
+ }),
1689
+ /* @__PURE__ */ jsx(ButtonDemo, {
1690
+ label: "Secondary",
1691
+ bg: "transparent",
1692
+ color: "chan.text",
1693
+ borderColor: "chan.border"
1694
+ }),
1695
+ /* @__PURE__ */ jsx(ButtonDemo, {
1696
+ label: "Ghost",
1697
+ bg: "transparent",
1698
+ color: "chan.orange",
1699
+ borderColor: "chan.orange.border"
1700
+ }),
1701
+ /* @__PURE__ */ jsx(ButtonDemo, {
1702
+ label: "Danger",
1703
+ bg: "chan.danger.bg",
1704
+ color: "chan.danger",
1705
+ borderColor: "chan.danger.border"
1706
+ })
1707
+ ]
1708
+ }),
1709
+ /* @__PURE__ */ jsx(SubHead, { children: "Status Indicators" }),
1710
+ /* @__PURE__ */ jsx(Flex, {
1711
+ gap: "8px",
1712
+ mb: "24px",
1713
+ flexWrap: "wrap",
1714
+ children: [
1715
+ {
1716
+ label: "Live",
1717
+ color: "chan.orange",
1718
+ bg: "chan.orange.bg",
1719
+ border: "chan.orange.border"
1720
+ },
1721
+ {
1722
+ label: "Operational",
1723
+ color: "chan.green",
1724
+ bg: "chan.green.bg",
1725
+ border: "chan.green.border"
1726
+ },
1727
+ {
1728
+ label: "Degraded",
1729
+ color: "chan.yellow",
1730
+ bg: "chan.yellow.bg",
1731
+ border: "chan.yellow.border"
1732
+ },
1733
+ {
1734
+ label: "Offline",
1735
+ color: "chan.text.faint",
1736
+ bg: "chan.bg.hover.subtle",
1737
+ border: "chan.border"
1738
+ }
1739
+ ].map((s) => /* @__PURE__ */ jsxs(Flex, {
1740
+ align: "center",
1741
+ gap: "7px",
1742
+ p: "5px 12px",
1743
+ borderRadius: "3px",
1744
+ fontSize: "9px",
1745
+ letterSpacing: "0.12em",
1746
+ textTransform: "uppercase",
1747
+ border: "1px solid",
1748
+ borderColor: s.border,
1749
+ bg: s.bg,
1750
+ color: s.color,
1751
+ children: [/* @__PURE__ */ jsx(Box, {
1752
+ w: "5px",
1753
+ h: "5px",
1754
+ borderRadius: "full",
1755
+ bg: s.color
1756
+ }), s.label]
1757
+ }, s.label))
1758
+ })
1759
+ ]
1760
+ }),
1761
+ /* @__PURE__ */ jsxs(Flex, {
1762
+ pt: "40px",
1763
+ borderTop: "1px solid",
1764
+ borderColor: "chan.border",
1765
+ justify: "space-between",
1766
+ align: "center",
1767
+ children: [/* @__PURE__ */ jsx(Text, {
1768
+ fontSize: "9px",
1769
+ letterSpacing: "0.12em",
1770
+ color: "chan.text.faint",
1771
+ children: "@chan.run/design token showcase"
1772
+ }), /* @__PURE__ */ jsx(Text, {
1773
+ fontSize: "9px",
1774
+ letterSpacing: "0.12em",
1775
+ color: "chan.orange",
1776
+ children: "chan.run"
1777
+ })]
1778
+ })
1779
+ ]
1780
+ });
1781
+ }
1782
+ export { TokenShowcase, system };