pixelplay 1.0.6 → 1.0.7

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,1557 @@
1
+ // ../../app/ui-kit/pixelplay-ui/shared/config/tokens.ts
2
+ var colors = {
3
+ // ── Semantic / role colors ────────────────────────────────────────────────
4
+ // Curated shades for their specific UI role (slightly tuned vs. raw palette).
5
+ // brand → purple family | error → red family | warning → amber family
6
+ // success → green family | neutral base → gray
7
+ brand: {
8
+ 25: "#FCFAFF",
9
+ 50: "#F9F5FF",
10
+ 100: "#F4EBFF",
11
+ 200: "#E9D7FE",
12
+ 300: "#D6BBFB",
13
+ 400: "#B692F6",
14
+ 500: "#9E77ED",
15
+ 600: "#7F56D9",
16
+ 700: "#6941C6",
17
+ 800: "#53389E",
18
+ 900: "#42307D",
19
+ 950: "#26145A",
20
+ 975: "#160C34"
21
+ },
22
+ error: {
23
+ 25: "#FFFBFA",
24
+ 50: "#FEF3F2",
25
+ 100: "#FEE4E2",
26
+ 200: "#FECDCA",
27
+ 300: "#FDA29B",
28
+ 400: "#F97066",
29
+ 500: "#F04438",
30
+ 600: "#D92D20",
31
+ 700: "#B42318",
32
+ 800: "#912018",
33
+ 900: "#7A271A",
34
+ 950: "#4C1108",
35
+ 975: "#2B0904"
36
+ },
37
+ warning: {
38
+ 25: "#FFFCF5",
39
+ 50: "#FFFAEB",
40
+ 100: "#FEF0C7",
41
+ 200: "#FEDF89",
42
+ 300: "#FEC84B",
43
+ 400: "#FDB022",
44
+ 500: "#F79009",
45
+ 600: "#DC6803",
46
+ 700: "#B54708",
47
+ 800: "#93370D",
48
+ 900: "#7A2E0E",
49
+ 950: "#491A06",
50
+ 975: "#291003"
51
+ },
52
+ success: {
53
+ 25: "#F6FEF9",
54
+ 50: "#ECFDF3",
55
+ 100: "#D1FADF",
56
+ 200: "#A6F4C5",
57
+ 300: "#6CE9A6",
58
+ 400: "#32D583",
59
+ 500: "#12B76A",
60
+ 600: "#039855",
61
+ 700: "#027A48",
62
+ 800: "#05603A",
63
+ 900: "#054F31",
64
+ 950: "#03301E",
65
+ 975: "#021C11"
66
+ },
67
+ // ── Neutrals ──────────────────────────────────────────────────────────────
68
+ gray: {
69
+ 25: "#FDFDFD",
70
+ 50: "#FAFAFA",
71
+ 100: "#F5F5F5",
72
+ 200: "#E9EAEB",
73
+ 300: "#D5D7DA",
74
+ 400: "#A4A7AE",
75
+ 500: "#717680",
76
+ 600: "#535862",
77
+ 700: "#414651",
78
+ 800: "#252B37",
79
+ 900: "#101828",
80
+ 950: "#090E18",
81
+ 975: "#05080E"
82
+ },
83
+ slate: {
84
+ 25: "#FCFCFE",
85
+ 50: "#F8FAFC",
86
+ 100: "#F1F5F9",
87
+ 200: "#E2E8F0",
88
+ 300: "#CBD5E1",
89
+ 400: "#94A3B8",
90
+ 500: "#64748B",
91
+ 600: "#475569",
92
+ 700: "#334155",
93
+ 800: "#1E293B",
94
+ 900: "#0F172A",
95
+ 950: "#090D19",
96
+ 975: "#05070E"
97
+ },
98
+ zinc: {
99
+ 25: "#FAFAFB",
100
+ 50: "#FAFAFA",
101
+ 100: "#F4F4F5",
102
+ 200: "#E4E4E7",
103
+ 300: "#D4D4D8",
104
+ 400: "#A1A1AA",
105
+ 500: "#71717A",
106
+ 600: "#52525B",
107
+ 700: "#3F3F46",
108
+ 800: "#27272A",
109
+ 900: "#18181B",
110
+ 950: "#0E0E10",
111
+ 975: "#080809"
112
+ },
113
+ stone: {
114
+ 25: "#FAFAF9",
115
+ 50: "#FAFAF9",
116
+ 100: "#F5F5F4",
117
+ 200: "#E7E5E4",
118
+ 300: "#D6D3D1",
119
+ 400: "#A8A29E",
120
+ 500: "#78716C",
121
+ 600: "#57534E",
122
+ 700: "#44403C",
123
+ 800: "#292524",
124
+ 900: "#1C1917",
125
+ 950: "#110F0D",
126
+ 975: "#090807"
127
+ },
128
+ // ── Reds & oranges ────────────────────────────────────────────────────────
129
+ red: {
130
+ 25: "#FFF5F5",
131
+ 50: "#FEF2F2",
132
+ 100: "#FEE2E2",
133
+ 200: "#FECACA",
134
+ 300: "#FCA5A5",
135
+ 400: "#F87171",
136
+ 500: "#EF4444",
137
+ 600: "#DC2626",
138
+ 700: "#B91C1C",
139
+ 800: "#991B1B",
140
+ 900: "#7F1D1D",
141
+ 950: "#4C1111",
142
+ 975: "#2B0909"
143
+ },
144
+ orange: {
145
+ 25: "#FFFAF5",
146
+ 50: "#FFF6ED",
147
+ 100: "#FFEAD5",
148
+ 200: "#FDDCAB",
149
+ 300: "#FEB273",
150
+ 400: "#FD853A",
151
+ 500: "#FB6514",
152
+ 600: "#EC4A0A",
153
+ 700: "#C4320A",
154
+ 800: "#9C2A10",
155
+ 900: "#7E2410",
156
+ 950: "#4C1509",
157
+ 975: "#2B0C05"
158
+ },
159
+ amber: {
160
+ 25: "#FFFDF5",
161
+ 50: "#FFFBEB",
162
+ 100: "#FEF3C7",
163
+ 200: "#FDE68A",
164
+ 300: "#FCD34D",
165
+ 400: "#FBBF24",
166
+ 500: "#F59E0B",
167
+ 600: "#D97706",
168
+ 700: "#B45309",
169
+ 800: "#92400E",
170
+ 900: "#78350F",
171
+ 950: "#471E07",
172
+ 975: "#280F03"
173
+ },
174
+ yellow: {
175
+ 25: "#FEFEF2",
176
+ 50: "#FEFCE8",
177
+ 100: "#FEF9C3",
178
+ 200: "#FEF08A",
179
+ 300: "#FDE047",
180
+ 400: "#FACC15",
181
+ 500: "#EAB308",
182
+ 600: "#CA8A04",
183
+ 700: "#A16207",
184
+ 800: "#854D0E",
185
+ 900: "#713F12",
186
+ 950: "#44250A",
187
+ 975: "#261505"
188
+ },
189
+ // ── Greens ────────────────────────────────────────────────────────────────
190
+ lime: {
191
+ 25: "#FBFFE7",
192
+ 50: "#F7FEE7",
193
+ 100: "#ECFCCB",
194
+ 200: "#D9F99D",
195
+ 300: "#BEF264",
196
+ 400: "#A3E635",
197
+ 500: "#84CC16",
198
+ 600: "#65A30D",
199
+ 700: "#4D7C0F",
200
+ 800: "#3F6212",
201
+ 900: "#365314",
202
+ 950: "#20320C",
203
+ 975: "#121C06"
204
+ },
205
+ green: {
206
+ 25: "#F2FDF5",
207
+ 50: "#F0FDF4",
208
+ 100: "#DCFCE7",
209
+ 200: "#BBF7D0",
210
+ 300: "#86EFAC",
211
+ 400: "#4ADE80",
212
+ 500: "#22C55E",
213
+ 600: "#16A34A",
214
+ 700: "#15803D",
215
+ 800: "#166534",
216
+ 900: "#14532D",
217
+ 950: "#0C321B",
218
+ 975: "#061C0F"
219
+ },
220
+ emerald: {
221
+ 25: "#F3FDF8",
222
+ 50: "#ECFDF5",
223
+ 100: "#D1FAE5",
224
+ 200: "#A7F3D0",
225
+ 300: "#6EE7B7",
226
+ 400: "#34D399",
227
+ 500: "#10B981",
228
+ 600: "#059669",
229
+ 700: "#047857",
230
+ 800: "#065F46",
231
+ 900: "#064E3B",
232
+ 950: "#032F23",
233
+ 975: "#021A13"
234
+ },
235
+ teal: {
236
+ 25: "#F0FCFB",
237
+ 50: "#F0FDFA",
238
+ 100: "#CCFBF1",
239
+ 200: "#99F6E4",
240
+ 300: "#5EEAD4",
241
+ 400: "#2DD4BF",
242
+ 500: "#14B8A6",
243
+ 600: "#0D9488",
244
+ 700: "#0F766E",
245
+ 800: "#115E59",
246
+ 900: "#134E4A",
247
+ 950: "#0A302E",
248
+ 975: "#061C1A"
249
+ },
250
+ // ── Blues ─────────────────────────────────────────────────────────────────
251
+ cyan: {
252
+ 25: "#F0FEFF",
253
+ 50: "#ECFEFF",
254
+ 100: "#CFFAFE",
255
+ 200: "#A5F3FC",
256
+ 300: "#67E8F9",
257
+ 400: "#22D3EE",
258
+ 500: "#06B6D4",
259
+ 600: "#0891B2",
260
+ 700: "#0E7490",
261
+ 800: "#155E75",
262
+ 900: "#164E63",
263
+ 950: "#0C2F3C",
264
+ 975: "#071A22"
265
+ },
266
+ blueLight: {
267
+ 25: "#F5FBFF",
268
+ 50: "#F0F9FF",
269
+ 100: "#E0F2FE",
270
+ 200: "#B9E6FE",
271
+ 300: "#7CD4FD",
272
+ 400: "#36BFFA",
273
+ 500: "#0BA5EC",
274
+ 600: "#0086C9",
275
+ 700: "#026AA2",
276
+ 800: "#065986",
277
+ 900: "#0B4A6F",
278
+ 950: "#062C43",
279
+ 975: "#031826"
280
+ },
281
+ blue: {
282
+ 25: "#F5FAFF",
283
+ 50: "#EFF8FF",
284
+ 100: "#D1E9FF",
285
+ 200: "#B2DDFF",
286
+ 300: "#84CAFF",
287
+ 400: "#53B1FD",
288
+ 500: "#2E90FA",
289
+ 600: "#1570EF",
290
+ 700: "#175CD3",
291
+ 800: "#1849A9",
292
+ 900: "#194185",
293
+ 950: "#0E2669",
294
+ 975: "#08153B"
295
+ },
296
+ blueGray: {
297
+ 25: "#FCFCFD",
298
+ 50: "#F8F9FC",
299
+ 100: "#EAECF5",
300
+ 200: "#D5D9EB",
301
+ 300: "#AFB5D9",
302
+ 400: "#717BBC",
303
+ 500: "#4E5BA6",
304
+ 600: "#3E4784",
305
+ 700: "#363F72",
306
+ 800: "#293056",
307
+ 900: "#101323",
308
+ 950: "#090B15",
309
+ 975: "#05060B"
310
+ },
311
+ // ── Purples & pinks ───────────────────────────────────────────────────────
312
+ indigo: {
313
+ 25: "#F5F8FF",
314
+ 50: "#EEF4FF",
315
+ 100: "#E0EAFF",
316
+ 200: "#C7D7FE",
317
+ 300: "#A4BCFD",
318
+ 400: "#8098F9",
319
+ 500: "#6172F3",
320
+ 600: "#444CE7",
321
+ 700: "#3538CD",
322
+ 800: "#2D31A6",
323
+ 900: "#2D3282",
324
+ 950: "#1B1F52",
325
+ 975: "#10122F"
326
+ },
327
+ violet: {
328
+ 25: "#FAFAFF",
329
+ 50: "#F5F3FF",
330
+ 100: "#EDE9FE",
331
+ 200: "#DDD6FE",
332
+ 300: "#C4B5FD",
333
+ 400: "#A78BFA",
334
+ 500: "#8B5CF6",
335
+ 600: "#7C3AED",
336
+ 700: "#6D28D9",
337
+ 800: "#5B21B6",
338
+ 900: "#4C1D95",
339
+ 950: "#2D1159",
340
+ 975: "#190932"
341
+ },
342
+ purple: {
343
+ 25: "#FAFAFF",
344
+ 50: "#F4F3FF",
345
+ 100: "#EBE9FE",
346
+ 200: "#D9D6FE",
347
+ 300: "#BDB4FE",
348
+ 400: "#9B8AFB",
349
+ 500: "#7A5AF8",
350
+ 600: "#6938EF",
351
+ 700: "#5925DC",
352
+ 800: "#4A1FB8",
353
+ 900: "#3E1C96",
354
+ 950: "#25105A",
355
+ 975: "#140932"
356
+ },
357
+ fuchsia: {
358
+ 25: "#FEF8FF",
359
+ 50: "#FDF4FF",
360
+ 100: "#FAE8FF",
361
+ 200: "#F5D0FE",
362
+ 300: "#F0ABFC",
363
+ 400: "#E879F9",
364
+ 500: "#D946EF",
365
+ 600: "#C026D3",
366
+ 700: "#A21CAF",
367
+ 800: "#86198F",
368
+ 900: "#701A75",
369
+ 950: "#430F46",
370
+ 975: "#250827"
371
+ },
372
+ pink: {
373
+ 25: "#FEF6FB",
374
+ 50: "#FDF2FA",
375
+ 100: "#FCE7F6",
376
+ 200: "#FCCEEE",
377
+ 300: "#FAA7E0",
378
+ 400: "#F670C7",
379
+ 500: "#EE46BC",
380
+ 600: "#DD2590",
381
+ 700: "#C11574",
382
+ 800: "#9E165F",
383
+ 900: "#851651",
384
+ 950: "#4F0C30",
385
+ 975: "#2C071A"
386
+ },
387
+ rose: {
388
+ 25: "#FFF5F6",
389
+ 50: "#FFF1F3",
390
+ 100: "#FFE4E8",
391
+ 200: "#FECDD6",
392
+ 300: "#FEA3B4",
393
+ 400: "#FD6F8E",
394
+ 500: "#F63D68",
395
+ 600: "#E31B54",
396
+ 700: "#C01048",
397
+ 800: "#A11043",
398
+ 900: "#89123E",
399
+ 950: "#520A25",
400
+ 975: "#2E0514"
401
+ }
402
+ };
403
+ var textScale = {
404
+ xl: { fontSize: "1.25rem", lineHeight: "1.875rem", letterSpacing: "0em" },
405
+ // 20px / 30px
406
+ lg: { fontSize: "1.125rem", lineHeight: "1.75rem", letterSpacing: "0em" },
407
+ // 18px / 28px
408
+ md: { fontSize: "1rem", lineHeight: "1.5rem", letterSpacing: "0em" },
409
+ // 16px / 24px
410
+ sm: { fontSize: "0.875rem", lineHeight: "1.25rem", letterSpacing: "0em" },
411
+ // 14px / 20px
412
+ xs: { fontSize: "0.75rem", lineHeight: "1.125rem", letterSpacing: "0em" }
413
+ // 12px / 18px
414
+ };
415
+ var fontSizes = {
416
+ xs: textScale.xs.fontSize,
417
+ sm: textScale.sm.fontSize,
418
+ md: textScale.md.fontSize,
419
+ lg: textScale.lg.fontSize,
420
+ xl: textScale.xl.fontSize
421
+ };
422
+
423
+ // ../../app/ui-kit/pixelplay-ui/shared/config/themes/rosewood.ts
424
+ var rosewoodLightTheme = {
425
+ // Surfaces — warm blush tones
426
+ surface: colors.rose[25],
427
+ "surface-dim": colors.rose[50],
428
+ "surface-bright": "#FFFFFF",
429
+ "surface-container-lowest": "#FFFFFF",
430
+ "surface-container-low": colors.rose[25],
431
+ "surface-container": colors.rose[50],
432
+ "surface-container-high": colors.rose[100],
433
+ "surface-container-highest": colors.rose[200],
434
+ // Content
435
+ "on-surface": colors.stone[900],
436
+ "on-surface-variant": colors.stone[600],
437
+ "inverse-surface": colors.stone[900],
438
+ "inverse-on-surface": colors.rose[25],
439
+ // Primary — rich rosewood pink (600 for contrast against blush surfaces)
440
+ primary: colors.red[400],
441
+ "on-primary": "#FFFFFF",
442
+ "primary-container": colors.rose[100],
443
+ "on-primary-container": colors.rose[800],
444
+ "inverse-primary": colors.rose[300],
445
+ // Secondary — deep burgundy
446
+ secondary: colors.red[700],
447
+ "on-secondary": "#FFFFFF",
448
+ "secondary-container": colors.rose[200],
449
+ "on-secondary-container": colors.red[900],
450
+ // Tertiary — dusty rose gold
451
+ tertiary: colors.pink[400],
452
+ "on-tertiary": "#FFFFFF",
453
+ "tertiary-container": colors.pink[100],
454
+ "on-tertiary-container": colors.pink[800],
455
+ // Utility
456
+ outline: colors.rose[300],
457
+ "outline-variant": colors.rose[200],
458
+ scrim: "rgba(68,44,46,0.4)",
459
+ shadow: "rgba(68,44,46,0.08)",
460
+ // Feedback
461
+ error: colors.error[500],
462
+ "on-error": "#FFFFFF",
463
+ "error-container": colors.error[100],
464
+ "on-error-container": colors.error[800],
465
+ success: colors.success[500],
466
+ "on-success": "#FFFFFF",
467
+ "success-container": colors.success[100],
468
+ "on-success-container": colors.success[800],
469
+ warning: colors.warning[500],
470
+ "on-warning": "#FFFFFF",
471
+ "warning-container": colors.warning[100],
472
+ "on-warning-container": colors.warning[800],
473
+ info: colors.blue[500],
474
+ "on-info": "#FFFFFF",
475
+ "info-container": colors.blue[100],
476
+ "on-info-container": colors.blue[800],
477
+ // States
478
+ "surface-tint": colors.rose[200],
479
+ "state-hover": "rgba(68,44,46,0.06)",
480
+ "state-focus": "rgba(68,44,46,0.10)",
481
+ "state-pressed": "rgba(68,44,46,0.10)",
482
+ "state-dragged": "rgba(68,44,46,0.14)",
483
+ "state-disabled": "rgba(68,44,46,0.38)",
484
+ // Categorical
485
+ "graphic-1": colors.pink[400],
486
+ "graphic-2": colors.red[700],
487
+ "graphic-3": colors.warning[500],
488
+ "graphic-4": colors.success[500],
489
+ "graphic-5": colors.orange[500],
490
+ "graphic-6": colors.error[500],
491
+ "graphic-7": colors.blue[500],
492
+ "graphic-8": colors.pink[600],
493
+ "graphic-9": colors.amber[500],
494
+ "graphic-10": colors.slate[500],
495
+ "on-graphic": "#FFFFFF",
496
+ "graphic-1-container": colors.pink[50],
497
+ "graphic-2-container": colors.red[50],
498
+ "graphic-3-container": colors.warning[50],
499
+ "graphic-4-container": colors.success[50],
500
+ "graphic-5-container": colors.orange[50],
501
+ "graphic-6-container": colors.error[50],
502
+ "graphic-7-container": colors.blue[50],
503
+ "graphic-8-container": colors.pink[50],
504
+ "graphic-9-container": colors.amber[50],
505
+ "graphic-10-container": colors.slate[50],
506
+ "on-graphic-1-container": colors.pink[800],
507
+ "on-graphic-2-container": colors.red[800],
508
+ "on-graphic-3-container": colors.warning[800],
509
+ "on-graphic-4-container": colors.success[800],
510
+ "on-graphic-5-container": colors.orange[800],
511
+ "on-graphic-6-container": colors.error[800],
512
+ "on-graphic-7-container": colors.blue[800],
513
+ "on-graphic-8-container": colors.pink[800],
514
+ "on-graphic-9-container": colors.amber[800],
515
+ "on-graphic-10-container": colors.slate[800],
516
+ // Status
517
+ "status-positive": colors.success[500],
518
+ "status-warning": colors.warning[500],
519
+ "status-negative": colors.red[700],
520
+ "status-neutral": colors.stone[400],
521
+ // Progress
522
+ "progress-track": colors.rose[200],
523
+ "progress-indicator": colors.red[700],
524
+ "progress-buffer": colors.pink[400],
525
+ // Scales
526
+ "scale-low": colors.success[500],
527
+ "scale-medium": colors.warning[500],
528
+ "scale-high": colors.red[700],
529
+ // Infrastructure
530
+ "graphic-outline": colors.rose[300],
531
+ "graphic-divider": colors.rose[200],
532
+ "graphic-label": colors.stone[600],
533
+ "graphic-marker": colors.red[700],
534
+ // Overlays
535
+ "graphic-hover": colors.rose[100],
536
+ "graphic-muted": colors.rose[200],
537
+ "annotation-line": colors.stone[400]
538
+ };
539
+ var rosewoodDarkTheme = {
540
+ // Surfaces — deep burgundy-charcoal
541
+ surface: colors.stone[900],
542
+ "surface-dim": colors.stone[950],
543
+ "surface-bright": colors.stone[800],
544
+ "surface-container-lowest": colors.stone[950],
545
+ "surface-container-low": colors.stone[900],
546
+ "surface-container": colors.stone[800],
547
+ "surface-container-high": colors.stone[700],
548
+ "surface-container-highest": colors.stone[600],
549
+ // Content
550
+ "on-surface": colors.rose[25],
551
+ "on-surface-variant": colors.rose[300],
552
+ "inverse-surface": colors.rose[25],
553
+ "inverse-on-surface": colors.stone[900],
554
+ // Primary — warm pink lighter for dark bg
555
+ primary: colors.rose[200],
556
+ "on-primary": colors.stone[900],
557
+ "primary-container": colors.stone[700],
558
+ "on-primary-container": colors.rose[200],
559
+ "inverse-primary": colors.red[700],
560
+ // Secondary
561
+ secondary: colors.rose[300],
562
+ "on-secondary": colors.red[950],
563
+ "secondary-container": colors.red[900],
564
+ "on-secondary-container": colors.rose[200],
565
+ // Tertiary
566
+ tertiary: colors.pink[300],
567
+ "on-tertiary": colors.pink[950],
568
+ "tertiary-container": colors.pink[800],
569
+ "on-tertiary-container": colors.pink[100],
570
+ // Utility
571
+ outline: colors.stone[600],
572
+ "outline-variant": colors.stone[700],
573
+ scrim: "rgba(255,255,255,0.1)",
574
+ shadow: "rgba(0,0,0,0.3)",
575
+ // Feedback
576
+ error: colors.error[400],
577
+ "on-error": colors.error[900],
578
+ "error-container": colors.error[950],
579
+ "on-error-container": colors.error[100],
580
+ success: colors.success[400],
581
+ "on-success": colors.success[900],
582
+ "success-container": colors.success[950],
583
+ "on-success-container": colors.success[100],
584
+ warning: colors.warning[400],
585
+ "on-warning": colors.warning[900],
586
+ "warning-container": colors.warning[950],
587
+ "on-warning-container": colors.warning[100],
588
+ info: colors.blue[400],
589
+ "on-info": colors.blue[900],
590
+ "info-container": colors.blue[950],
591
+ "on-info-container": colors.blue[100],
592
+ // States
593
+ "surface-tint": colors.rose[200],
594
+ "state-hover": "rgba(254,219,208,0.08)",
595
+ "state-focus": "rgba(254,219,208,0.12)",
596
+ "state-pressed": "rgba(254,219,208,0.12)",
597
+ "state-dragged": "rgba(254,219,208,0.16)",
598
+ "state-disabled": "rgba(255,245,243,0.38)",
599
+ // Categorical
600
+ "graphic-1": colors.pink[300],
601
+ "graphic-2": colors.rose[300],
602
+ "graphic-3": colors.warning[400],
603
+ "graphic-4": colors.success[400],
604
+ "graphic-5": colors.orange[400],
605
+ "graphic-6": colors.error[400],
606
+ "graphic-7": colors.blue[400],
607
+ "graphic-8": colors.pink[400],
608
+ "graphic-9": colors.amber[400],
609
+ "graphic-10": colors.slate[400],
610
+ "on-graphic": "#FFFFFF",
611
+ "graphic-1-container": colors.pink[950],
612
+ "graphic-2-container": colors.rose[950],
613
+ "graphic-3-container": colors.warning[950],
614
+ "graphic-4-container": colors.success[950],
615
+ "graphic-5-container": colors.orange[950],
616
+ "graphic-6-container": colors.error[950],
617
+ "graphic-7-container": colors.blue[950],
618
+ "graphic-8-container": colors.pink[950],
619
+ "graphic-9-container": colors.amber[950],
620
+ "graphic-10-container": colors.slate[950],
621
+ "on-graphic-1-container": colors.pink[100],
622
+ "on-graphic-2-container": colors.rose[100],
623
+ "on-graphic-3-container": colors.warning[100],
624
+ "on-graphic-4-container": colors.success[100],
625
+ "on-graphic-5-container": colors.orange[100],
626
+ "on-graphic-6-container": colors.error[100],
627
+ "on-graphic-7-container": colors.blue[100],
628
+ "on-graphic-8-container": colors.pink[100],
629
+ "on-graphic-9-container": colors.amber[100],
630
+ "on-graphic-10-container": colors.slate[100],
631
+ // Status
632
+ "status-positive": colors.success[400],
633
+ "status-warning": colors.warning[400],
634
+ "status-negative": colors.rose[300],
635
+ "status-neutral": colors.stone[500],
636
+ // Progress
637
+ "progress-track": colors.stone[700],
638
+ "progress-indicator": colors.rose[200],
639
+ "progress-buffer": colors.stone[600],
640
+ // Scales
641
+ "scale-low": colors.success[400],
642
+ "scale-medium": colors.warning[400],
643
+ "scale-high": colors.rose[300],
644
+ // Infrastructure
645
+ "graphic-outline": colors.stone[600],
646
+ "graphic-divider": colors.stone[700],
647
+ "graphic-label": colors.rose[300],
648
+ "graphic-marker": colors.rose[200],
649
+ // Overlays
650
+ "graphic-hover": colors.stone[700],
651
+ "graphic-muted": colors.stone[700],
652
+ "annotation-line": colors.stone[500]
653
+ };
654
+ var rosewoodTheme = {
655
+ label: "Rosewood",
656
+ description: "Elegant fashion & retail",
657
+ swatch: colors.rose[200],
658
+ light: rosewoodLightTheme,
659
+ dark: rosewoodDarkTheme,
660
+ globals: {
661
+ "--radius-xs": "0.5rem",
662
+ "--radius-sm": "0.625rem",
663
+ "--radius-md": "0.875rem",
664
+ "--radius-lg": "1.25rem",
665
+ "--radius-xl": "1.5rem",
666
+ "--radius-2xl": "2rem",
667
+ "--radius-3xl": "2.5rem",
668
+ "--radius-4xl": "3rem",
669
+ "--font-sans": "'JetBrains Mono', 'Courier New', monospace",
670
+ "--font-heading": "'JetBrains Mono', 'Courier New', monospace",
671
+ "--font-body": "'JetBrains Mono', 'Courier New', monospace",
672
+ "--font-weight-normal": "400",
673
+ "--font-weight-medium": "500",
674
+ "--font-weight-semibold": "600",
675
+ "--font-weight-bold": "700",
676
+ // ── Typography scale (standard sizes) ──
677
+ "--text-xs": "0.75rem",
678
+ "--text-xs--line-height": "1.125rem",
679
+ "--text-sm": "0.875rem",
680
+ "--text-sm--line-height": "1.25rem",
681
+ "--text-base": "1rem",
682
+ "--text-base--line-height": "1.5rem",
683
+ "--text-lg": "1.125rem",
684
+ "--text-lg--line-height": "1.75rem",
685
+ "--text-xl": "1.25rem",
686
+ "--text-xl--line-height": "1.875rem",
687
+ "--text-2xl": "1.5rem",
688
+ "--text-2xl--line-height": "2rem",
689
+ "--text-3xl": "1.875rem",
690
+ "--text-3xl--line-height": "2.375rem",
691
+ "--text-4xl": "2.25rem",
692
+ "--text-4xl--line-height": "2.75rem",
693
+ "--letter-spacing-normal": "0em",
694
+ "--letter-spacing-tight": "-0.02em",
695
+ "--shadow-xs": "0 1px 4px 0 rgba(68,44,46,0.04)",
696
+ "--shadow-sm": "0 2px 8px -1px rgba(68,44,46,0.06)",
697
+ "--shadow-md": "0 4px 16px -2px rgba(68,44,46,0.06)",
698
+ "--shadow-lg": "0 8px 28px -4px rgba(68,44,46,0.06)",
699
+ "--shadow-xl": "0 16px 44px -6px rgba(68,44,46,0.06)",
700
+ "--shadow-2xl": "0 24px 60px -8px rgba(68,44,46,0.06)"
701
+ }
702
+ };
703
+
704
+ // ../../app/ui-kit/pixelplay-ui/shared/config/themes/botanica.ts
705
+ var botanicaLightTheme = {
706
+ // Surfaces — warm olive-cream
707
+ surface: colors.yellow[25],
708
+ "surface-dim": colors.yellow[100],
709
+ "surface-bright": "#FFFFFF",
710
+ "surface-container-lowest": "#FFFFFF",
711
+ "surface-container-low": colors.yellow[50],
712
+ "surface-container": colors.yellow[100],
713
+ "surface-container-high": colors.yellow[200],
714
+ "surface-container-highest": colors.lime[200],
715
+ // Content
716
+ "on-surface": colors.emerald[950],
717
+ "on-surface-variant": colors.emerald[700],
718
+ "inverse-surface": colors.emerald[950],
719
+ "inverse-on-surface": colors.lime[50],
720
+ // Primary — deep herb green
721
+ primary: colors.emerald[700],
722
+ "on-primary": "#FFFFFF",
723
+ "primary-container": colors.emerald[200],
724
+ "on-primary-container": colors.emerald[950],
725
+ "inverse-primary": colors.emerald[400],
726
+ // Secondary — spicy orange-red
727
+ secondary: colors.orange[500],
728
+ "on-secondary": "#FFFFFF",
729
+ "secondary-container": colors.orange[100],
730
+ "on-secondary-container": colors.orange[900],
731
+ // Tertiary — earthy olive
732
+ tertiary: colors.lime[600],
733
+ "on-tertiary": "#FFFFFF",
734
+ "tertiary-container": colors.lime[100],
735
+ "on-tertiary-container": colors.lime[900],
736
+ // Utility
737
+ outline: colors.emerald[300],
738
+ "outline-variant": colors.emerald[200],
739
+ scrim: "rgba(26,58,42,0.4)",
740
+ shadow: "rgba(26,58,42,0.10)",
741
+ // Feedback
742
+ error: colors.error[600],
743
+ "on-error": "#FFFFFF",
744
+ "error-container": colors.error[100],
745
+ "on-error-container": colors.error[800],
746
+ success: colors.success[600],
747
+ "on-success": "#FFFFFF",
748
+ "success-container": colors.success[100],
749
+ "on-success-container": colors.success[800],
750
+ warning: colors.warning[600],
751
+ "on-warning": "#FFFFFF",
752
+ "warning-container": colors.warning[100],
753
+ "on-warning-container": colors.warning[800],
754
+ info: colors.blue[600],
755
+ "on-info": "#FFFFFF",
756
+ "info-container": colors.blue[100],
757
+ "on-info-container": colors.blue[800],
758
+ // States
759
+ "surface-tint": colors.emerald[700],
760
+ "state-hover": "rgba(26,58,42,0.06)",
761
+ "state-focus": "rgba(26,58,42,0.10)",
762
+ "state-pressed": "rgba(26,58,42,0.10)",
763
+ "state-dragged": "rgba(26,58,42,0.14)",
764
+ "state-disabled": "rgba(26,58,42,0.38)",
765
+ // Categorical
766
+ "graphic-1": colors.emerald[700],
767
+ "graphic-2": colors.orange[500],
768
+ "graphic-3": colors.lime[600],
769
+ "graphic-4": colors.success[600],
770
+ "graphic-5": colors.warning[500],
771
+ "graphic-6": colors.error[600],
772
+ "graphic-7": colors.blue[600],
773
+ "graphic-8": colors.green[600],
774
+ "graphic-9": colors.orange[600],
775
+ "graphic-10": colors.teal[600],
776
+ "on-graphic": "#FFFFFF",
777
+ "graphic-1-container": colors.emerald[50],
778
+ "graphic-2-container": colors.orange[50],
779
+ "graphic-3-container": colors.lime[50],
780
+ "graphic-4-container": colors.success[50],
781
+ "graphic-5-container": colors.warning[50],
782
+ "graphic-6-container": colors.error[50],
783
+ "graphic-7-container": colors.blue[50],
784
+ "graphic-8-container": colors.green[50],
785
+ "graphic-9-container": colors.orange[50],
786
+ "graphic-10-container": colors.teal[50],
787
+ "on-graphic-1-container": colors.emerald[800],
788
+ "on-graphic-2-container": colors.orange[800],
789
+ "on-graphic-3-container": colors.lime[800],
790
+ "on-graphic-4-container": colors.success[800],
791
+ "on-graphic-5-container": colors.warning[800],
792
+ "on-graphic-6-container": colors.error[800],
793
+ "on-graphic-7-container": colors.blue[800],
794
+ "on-graphic-8-container": colors.green[800],
795
+ "on-graphic-9-container": colors.orange[800],
796
+ "on-graphic-10-container": colors.teal[800],
797
+ // Status
798
+ "status-positive": colors.success[600],
799
+ "status-warning": colors.warning[600],
800
+ "status-negative": colors.error[600],
801
+ "status-neutral": colors.emerald[400],
802
+ // Progress
803
+ "progress-track": colors.emerald[200],
804
+ "progress-indicator": colors.emerald[700],
805
+ "progress-buffer": colors.emerald[400],
806
+ // Scales
807
+ "scale-low": colors.success[600],
808
+ "scale-medium": colors.warning[600],
809
+ "scale-high": colors.error[600],
810
+ // Infrastructure
811
+ "graphic-outline": colors.emerald[300],
812
+ "graphic-divider": colors.emerald[200],
813
+ "graphic-label": colors.emerald[700],
814
+ "graphic-marker": colors.orange[500],
815
+ // Overlays
816
+ "graphic-hover": colors.emerald[50],
817
+ "graphic-muted": colors.emerald[200],
818
+ "annotation-line": colors.emerald[400]
819
+ };
820
+ var botanicaDarkTheme = {
821
+ // Surfaces — dark forest
822
+ surface: colors.emerald[975],
823
+ "surface-dim": colors.emerald[975],
824
+ "surface-bright": colors.emerald[900],
825
+ "surface-container-lowest": colors.emerald[975],
826
+ "surface-container-low": colors.emerald[950],
827
+ "surface-container": colors.emerald[900],
828
+ "surface-container-high": colors.green[900],
829
+ "surface-container-highest": colors.green[800],
830
+ // Content
831
+ "on-surface": colors.emerald[50],
832
+ "on-surface-variant": colors.emerald[300],
833
+ "inverse-surface": colors.emerald[50],
834
+ "inverse-on-surface": colors.emerald[950],
835
+ // Primary
836
+ primary: colors.emerald[300],
837
+ "on-primary": colors.emerald[950],
838
+ "primary-container": colors.emerald[900],
839
+ "on-primary-container": colors.emerald[200],
840
+ "inverse-primary": colors.emerald[700],
841
+ // Secondary
842
+ secondary: colors.orange[400],
843
+ "on-secondary": colors.orange[950],
844
+ "secondary-container": colors.orange[900],
845
+ "on-secondary-container": colors.orange[100],
846
+ // Tertiary
847
+ tertiary: colors.lime[400],
848
+ "on-tertiary": colors.lime[950],
849
+ "tertiary-container": colors.lime[900],
850
+ "on-tertiary-container": colors.lime[100],
851
+ // Utility
852
+ outline: colors.emerald[600],
853
+ "outline-variant": colors.emerald[800],
854
+ scrim: "rgba(255,255,255,0.1)",
855
+ shadow: "rgba(0,0,0,0.3)",
856
+ // Feedback
857
+ error: colors.error[400],
858
+ "on-error": colors.error[950],
859
+ "error-container": colors.error[900],
860
+ "on-error-container": colors.error[100],
861
+ success: colors.success[400],
862
+ "on-success": colors.success[950],
863
+ "success-container": colors.success[900],
864
+ "on-success-container": colors.success[100],
865
+ warning: colors.warning[400],
866
+ "on-warning": colors.warning[950],
867
+ "warning-container": colors.warning[900],
868
+ "on-warning-container": colors.warning[100],
869
+ info: colors.blue[400],
870
+ "on-info": colors.blue[950],
871
+ "info-container": colors.blue[900],
872
+ "on-info-container": colors.blue[100],
873
+ // States
874
+ "surface-tint": colors.emerald[300],
875
+ "state-hover": "rgba(110,231,183,0.08)",
876
+ "state-focus": "rgba(110,231,183,0.12)",
877
+ "state-pressed": "rgba(110,231,183,0.12)",
878
+ "state-dragged": "rgba(110,231,183,0.16)",
879
+ "state-disabled": "rgba(236,253,245,0.38)",
880
+ // Categorical
881
+ "graphic-1": colors.emerald[300],
882
+ "graphic-2": colors.orange[400],
883
+ "graphic-3": colors.lime[400],
884
+ "graphic-4": colors.success[400],
885
+ "graphic-5": colors.warning[400],
886
+ "graphic-6": colors.error[400],
887
+ "graphic-7": colors.blue[400],
888
+ "graphic-8": colors.green[400],
889
+ "graphic-9": colors.orange[400],
890
+ "graphic-10": colors.teal[400],
891
+ "on-graphic": "#FFFFFF",
892
+ "graphic-1-container": colors.emerald[950],
893
+ "graphic-2-container": colors.orange[950],
894
+ "graphic-3-container": colors.lime[950],
895
+ "graphic-4-container": colors.success[950],
896
+ "graphic-5-container": colors.warning[950],
897
+ "graphic-6-container": colors.error[950],
898
+ "graphic-7-container": colors.blue[950],
899
+ "graphic-8-container": colors.green[950],
900
+ "graphic-9-container": colors.orange[950],
901
+ "graphic-10-container": colors.teal[950],
902
+ "on-graphic-1-container": colors.emerald[100],
903
+ "on-graphic-2-container": colors.orange[100],
904
+ "on-graphic-3-container": colors.lime[100],
905
+ "on-graphic-4-container": colors.success[100],
906
+ "on-graphic-5-container": colors.warning[100],
907
+ "on-graphic-6-container": colors.error[100],
908
+ "on-graphic-7-container": colors.blue[100],
909
+ "on-graphic-8-container": colors.green[100],
910
+ "on-graphic-9-container": colors.orange[100],
911
+ "on-graphic-10-container": colors.teal[100],
912
+ // Status
913
+ "status-positive": colors.success[400],
914
+ "status-warning": colors.warning[400],
915
+ "status-negative": colors.error[400],
916
+ "status-neutral": colors.emerald[500],
917
+ // Progress
918
+ "progress-track": colors.emerald[800],
919
+ "progress-indicator": colors.emerald[300],
920
+ "progress-buffer": colors.emerald[600],
921
+ // Scales
922
+ "scale-low": colors.success[400],
923
+ "scale-medium": colors.warning[400],
924
+ "scale-high": colors.error[400],
925
+ // Infrastructure
926
+ "graphic-outline": colors.emerald[600],
927
+ "graphic-divider": colors.emerald[800],
928
+ "graphic-label": colors.emerald[300],
929
+ "graphic-marker": colors.orange[400],
930
+ // Overlays
931
+ "graphic-hover": colors.emerald[900],
932
+ "graphic-muted": colors.emerald[800],
933
+ "annotation-line": colors.emerald[500]
934
+ };
935
+ var botanicaTheme = {
936
+ label: "Botanica",
937
+ description: "Nature-inspired cooking & lifestyle",
938
+ swatch: colors.emerald[700],
939
+ light: botanicaLightTheme,
940
+ dark: botanicaDarkTheme,
941
+ globals: {
942
+ "--radius-xs": "0.25rem",
943
+ "--radius-sm": "0.375rem",
944
+ "--radius-md": "0.5rem",
945
+ "--radius-lg": "0.75rem",
946
+ "--radius-xl": "1rem",
947
+ "--radius-2xl": "1.25rem",
948
+ "--radius-3xl": "1.5rem",
949
+ "--radius-4xl": "2rem",
950
+ "--font-sans": "'Inter', 'Helvetica Neue', Arial, sans-serif",
951
+ "--font-heading": "'Inter', 'Helvetica Neue', Arial, sans-serif",
952
+ "--font-body": "'Inter', 'Helvetica Neue', Arial, sans-serif",
953
+ "--font-weight-normal": "400",
954
+ "--font-weight-medium": "500",
955
+ "--font-weight-semibold": "600",
956
+ "--font-weight-bold": "700",
957
+ // ── Typography scale (geometric sans — standard sizes, moderate leading) ──
958
+ "--text-xs": "0.75rem",
959
+ "--text-xs--line-height": "1.125rem",
960
+ "--text-sm": "0.875rem",
961
+ "--text-sm--line-height": "1.25rem",
962
+ "--text-base": "1rem",
963
+ "--text-base--line-height": "1.5rem",
964
+ "--text-lg": "1.125rem",
965
+ "--text-lg--line-height": "1.75rem",
966
+ "--text-xl": "1.25rem",
967
+ "--text-xl--line-height": "1.875rem",
968
+ "--text-2xl": "1.5rem",
969
+ "--text-2xl--line-height": "2rem",
970
+ "--text-3xl": "1.875rem",
971
+ "--text-3xl--line-height": "2.375rem",
972
+ "--text-4xl": "2.25rem",
973
+ "--text-4xl--line-height": "2.75rem",
974
+ "--letter-spacing-normal": "0.005em",
975
+ "--letter-spacing-tight": "-0.02em",
976
+ "--shadow-xs": "0 1px 2px 0 rgba(26,58,42,0.08)",
977
+ "--shadow-sm": "0 2px 4px -1px rgba(26,58,42,0.10)",
978
+ "--shadow-md": "0 3px 10px -2px rgba(26,58,42,0.10)",
979
+ "--shadow-lg": "0 6px 20px -4px rgba(26,58,42,0.12)",
980
+ "--shadow-xl": "0 12px 32px -6px rgba(26,58,42,0.12)",
981
+ "--shadow-2xl": "0 20px 48px -8px rgba(26,58,42,0.14)"
982
+ }
983
+ };
984
+
985
+ // ../../app/ui-kit/pixelplay-ui/shared/config/themes/inkwell.ts
986
+ var inkwellLightTheme = {
987
+ // Surfaces — pure white / cool gray
988
+ surface: "#FFFFFF",
989
+ "surface-dim": colors.gray[100],
990
+ "surface-bright": "#FFFFFF",
991
+ "surface-container-lowest": "#FFFFFF",
992
+ "surface-container-low": colors.gray[50],
993
+ "surface-container": colors.gray[100],
994
+ "surface-container-high": colors.gray[200],
995
+ "surface-container-highest": colors.gray[300],
996
+ // Content — near black
997
+ "on-surface": colors.gray[950],
998
+ "on-surface-variant": colors.gray[700],
999
+ "inverse-surface": colors.gray[900],
1000
+ "inverse-on-surface": colors.gray[50],
1001
+ // Primary — deep purple (editorial ink)
1002
+ primary: colors.violet[600],
1003
+ "on-primary": "#FFFFFF",
1004
+ "primary-container": colors.violet[100],
1005
+ "on-primary-container": colors.violet[900],
1006
+ "inverse-primary": colors.violet[300],
1007
+ // Secondary — muted charcoal
1008
+ secondary: colors.gray[700],
1009
+ "on-secondary": "#FFFFFF",
1010
+ "secondary-container": colors.gray[200],
1011
+ "on-secondary-container": colors.gray[900],
1012
+ // Tertiary — editorial red accent
1013
+ tertiary: colors.red[600],
1014
+ "on-tertiary": "#FFFFFF",
1015
+ "tertiary-container": colors.red[100],
1016
+ "on-tertiary-container": colors.red[900],
1017
+ // Utility
1018
+ outline: colors.gray[300],
1019
+ "outline-variant": colors.gray[200],
1020
+ scrim: "rgba(0,0,0,0.5)",
1021
+ shadow: "rgba(0,0,0,0.15)",
1022
+ // Feedback
1023
+ error: colors.error[600],
1024
+ "on-error": "#FFFFFF",
1025
+ "error-container": colors.error[100],
1026
+ "on-error-container": colors.error[800],
1027
+ success: colors.success[600],
1028
+ "on-success": "#FFFFFF",
1029
+ "success-container": colors.success[100],
1030
+ "on-success-container": colors.success[800],
1031
+ warning: colors.warning[600],
1032
+ "on-warning": "#FFFFFF",
1033
+ "warning-container": colors.warning[100],
1034
+ "on-warning-container": colors.warning[800],
1035
+ info: colors.blue[600],
1036
+ "on-info": "#FFFFFF",
1037
+ "info-container": colors.blue[100],
1038
+ "on-info-container": colors.blue[800],
1039
+ // States
1040
+ "surface-tint": colors.violet[600],
1041
+ "state-hover": "rgba(0,0,0,0.06)",
1042
+ "state-focus": "rgba(0,0,0,0.10)",
1043
+ "state-pressed": "rgba(0,0,0,0.10)",
1044
+ "state-dragged": "rgba(0,0,0,0.14)",
1045
+ "state-disabled": "rgba(0,0,0,0.38)",
1046
+ // Categorical
1047
+ "graphic-1": colors.violet[600],
1048
+ "graphic-2": colors.red[600],
1049
+ "graphic-3": colors.gray[700],
1050
+ "graphic-4": colors.success[600],
1051
+ "graphic-5": colors.warning[600],
1052
+ "graphic-6": colors.blue[600],
1053
+ "graphic-7": colors.purple[600],
1054
+ "graphic-8": colors.teal[600],
1055
+ "graphic-9": colors.orange[600],
1056
+ "graphic-10": colors.blueGray[600],
1057
+ "on-graphic": "#FFFFFF",
1058
+ "graphic-1-container": colors.violet[50],
1059
+ "graphic-2-container": colors.red[50],
1060
+ "graphic-3-container": colors.gray[100],
1061
+ "graphic-4-container": colors.success[50],
1062
+ "graphic-5-container": colors.warning[50],
1063
+ "graphic-6-container": colors.blue[50],
1064
+ "graphic-7-container": colors.purple[50],
1065
+ "graphic-8-container": colors.teal[50],
1066
+ "graphic-9-container": colors.orange[50],
1067
+ "graphic-10-container": colors.blueGray[50],
1068
+ "on-graphic-1-container": colors.violet[800],
1069
+ "on-graphic-2-container": colors.red[800],
1070
+ "on-graphic-3-container": colors.gray[800],
1071
+ "on-graphic-4-container": colors.success[800],
1072
+ "on-graphic-5-container": colors.warning[800],
1073
+ "on-graphic-6-container": colors.blue[800],
1074
+ "on-graphic-7-container": colors.purple[800],
1075
+ "on-graphic-8-container": colors.teal[800],
1076
+ "on-graphic-9-container": colors.orange[800],
1077
+ "on-graphic-10-container": colors.blueGray[800],
1078
+ // Status
1079
+ "status-positive": colors.success[600],
1080
+ "status-warning": colors.warning[600],
1081
+ "status-negative": colors.red[600],
1082
+ "status-neutral": colors.gray[400],
1083
+ // Progress
1084
+ "progress-track": colors.gray[200],
1085
+ "progress-indicator": colors.violet[600],
1086
+ "progress-buffer": colors.violet[300],
1087
+ // Scales
1088
+ "scale-low": colors.success[600],
1089
+ "scale-medium": colors.warning[600],
1090
+ "scale-high": colors.red[600],
1091
+ // Infrastructure
1092
+ "graphic-outline": colors.gray[300],
1093
+ "graphic-divider": colors.gray[200],
1094
+ "graphic-label": colors.gray[700],
1095
+ "graphic-marker": colors.violet[600],
1096
+ // Overlays
1097
+ "graphic-hover": colors.violet[50],
1098
+ "graphic-muted": colors.gray[200],
1099
+ "annotation-line": colors.gray[400]
1100
+ };
1101
+ var inkwellDarkTheme = {
1102
+ // Surfaces — pure dark editorial
1103
+ surface: colors.gray[950],
1104
+ "surface-dim": colors.gray[975],
1105
+ "surface-bright": colors.gray[800],
1106
+ "surface-container-lowest": colors.gray[975],
1107
+ "surface-container-low": colors.gray[950],
1108
+ "surface-container": colors.gray[900],
1109
+ "surface-container-high": colors.gray[800],
1110
+ "surface-container-highest": colors.gray[700],
1111
+ // Content
1112
+ "on-surface": colors.gray[50],
1113
+ "on-surface-variant": colors.gray[400],
1114
+ "inverse-surface": colors.gray[50],
1115
+ "inverse-on-surface": colors.gray[950],
1116
+ // Primary
1117
+ primary: colors.violet[300],
1118
+ "on-primary": colors.violet[950],
1119
+ "primary-container": colors.violet[800],
1120
+ "on-primary-container": colors.violet[100],
1121
+ "inverse-primary": colors.violet[600],
1122
+ // Secondary
1123
+ secondary: colors.gray[400],
1124
+ "on-secondary": colors.gray[900],
1125
+ "secondary-container": colors.gray[700],
1126
+ "on-secondary-container": colors.gray[100],
1127
+ // Tertiary
1128
+ tertiary: colors.red[400],
1129
+ "on-tertiary": colors.red[950],
1130
+ "tertiary-container": colors.red[900],
1131
+ "on-tertiary-container": colors.red[100],
1132
+ // Utility
1133
+ outline: colors.gray[600],
1134
+ "outline-variant": colors.gray[700],
1135
+ scrim: "rgba(255,255,255,0.1)",
1136
+ shadow: "rgba(0,0,0,0.4)",
1137
+ // Feedback
1138
+ error: colors.error[400],
1139
+ "on-error": colors.error[950],
1140
+ "error-container": colors.error[900],
1141
+ "on-error-container": colors.error[100],
1142
+ success: colors.success[400],
1143
+ "on-success": colors.success[950],
1144
+ "success-container": colors.success[900],
1145
+ "on-success-container": colors.success[100],
1146
+ warning: colors.warning[400],
1147
+ "on-warning": colors.warning[950],
1148
+ "warning-container": colors.warning[900],
1149
+ "on-warning-container": colors.warning[100],
1150
+ info: colors.blue[400],
1151
+ "on-info": colors.blue[950],
1152
+ "info-container": colors.blue[900],
1153
+ "on-info-container": colors.blue[100],
1154
+ // States
1155
+ "surface-tint": colors.violet[300],
1156
+ "state-hover": "rgba(196,181,253,0.08)",
1157
+ "state-focus": "rgba(196,181,253,0.12)",
1158
+ "state-pressed": "rgba(196,181,253,0.12)",
1159
+ "state-dragged": "rgba(196,181,253,0.16)",
1160
+ "state-disabled": "rgba(250,250,250,0.38)",
1161
+ // Categorical
1162
+ "graphic-1": colors.violet[300],
1163
+ "graphic-2": colors.red[400],
1164
+ "graphic-3": colors.gray[400],
1165
+ "graphic-4": colors.success[400],
1166
+ "graphic-5": colors.warning[400],
1167
+ "graphic-6": colors.blue[400],
1168
+ "graphic-7": colors.purple[400],
1169
+ "graphic-8": colors.teal[400],
1170
+ "graphic-9": colors.orange[400],
1171
+ "graphic-10": colors.blueGray[400],
1172
+ "on-graphic": "#FFFFFF",
1173
+ "graphic-1-container": colors.violet[950],
1174
+ "graphic-2-container": colors.red[950],
1175
+ "graphic-3-container": colors.gray[900],
1176
+ "graphic-4-container": colors.success[950],
1177
+ "graphic-5-container": colors.warning[950],
1178
+ "graphic-6-container": colors.blue[950],
1179
+ "graphic-7-container": colors.purple[950],
1180
+ "graphic-8-container": colors.teal[950],
1181
+ "graphic-9-container": colors.orange[950],
1182
+ "graphic-10-container": colors.blueGray[950],
1183
+ "on-graphic-1-container": colors.violet[100],
1184
+ "on-graphic-2-container": colors.red[100],
1185
+ "on-graphic-3-container": colors.gray[100],
1186
+ "on-graphic-4-container": colors.success[100],
1187
+ "on-graphic-5-container": colors.warning[100],
1188
+ "on-graphic-6-container": colors.blue[100],
1189
+ "on-graphic-7-container": colors.purple[100],
1190
+ "on-graphic-8-container": colors.teal[100],
1191
+ "on-graphic-9-container": colors.orange[100],
1192
+ "on-graphic-10-container": colors.blueGray[100],
1193
+ // Status
1194
+ "status-positive": colors.success[400],
1195
+ "status-warning": colors.warning[400],
1196
+ "status-negative": colors.red[400],
1197
+ "status-neutral": colors.gray[500],
1198
+ // Progress
1199
+ "progress-track": colors.gray[700],
1200
+ "progress-indicator": colors.violet[300],
1201
+ "progress-buffer": colors.violet[700],
1202
+ // Scales
1203
+ "scale-low": colors.success[400],
1204
+ "scale-medium": colors.warning[400],
1205
+ "scale-high": colors.red[400],
1206
+ // Infrastructure
1207
+ "graphic-outline": colors.gray[600],
1208
+ "graphic-divider": colors.gray[700],
1209
+ "graphic-label": colors.gray[400],
1210
+ "graphic-marker": colors.violet[300],
1211
+ // Overlays
1212
+ "graphic-hover": colors.violet[800],
1213
+ "graphic-muted": colors.gray[700],
1214
+ "annotation-line": colors.gray[500]
1215
+ };
1216
+ var inkwellTheme = {
1217
+ label: "Inkwell",
1218
+ description: "Bold editorial & news",
1219
+ swatch: colors.violet[600],
1220
+ light: inkwellLightTheme,
1221
+ dark: inkwellDarkTheme,
1222
+ globals: {
1223
+ "--radius-xs": "0px",
1224
+ "--radius-sm": "0px",
1225
+ "--radius-md": "2px",
1226
+ "--radius-lg": "2px",
1227
+ "--radius-xl": "4px",
1228
+ "--radius-2xl": "4px",
1229
+ "--radius-3xl": "4px",
1230
+ "--radius-4xl": "4px",
1231
+ "--font-sans": "'Space Grotesk', 'Helvetica Neue', Arial, sans-serif",
1232
+ "--font-heading": "'Space Grotesk', 'Helvetica Neue', Arial, sans-serif",
1233
+ "--font-body": "'Space Grotesk', 'Helvetica Neue', Arial, sans-serif",
1234
+ "--font-weight-normal": "400",
1235
+ "--font-weight-medium": "500",
1236
+ "--font-weight-semibold": "600",
1237
+ "--font-weight-bold": "700",
1238
+ // ── Typography scale (editorial — tighter body, punchy display headings) ──
1239
+ "--text-xs": "0.6875rem",
1240
+ "--text-xs--line-height": "1rem",
1241
+ "--text-sm": "0.8125rem",
1242
+ "--text-sm--line-height": "1.25rem",
1243
+ "--text-base": "0.9375rem",
1244
+ "--text-base--line-height": "1.375rem",
1245
+ "--text-lg": "1.0625rem",
1246
+ "--text-lg--line-height": "1.5rem",
1247
+ "--text-xl": "1.25rem",
1248
+ "--text-xl--line-height": "1.75rem",
1249
+ "--text-2xl": "1.625rem",
1250
+ "--text-2xl--line-height": "2rem",
1251
+ "--text-3xl": "2.125rem",
1252
+ "--text-3xl--line-height": "2.5rem",
1253
+ "--text-4xl": "2.75rem",
1254
+ "--text-4xl--line-height": "3.25rem",
1255
+ "--letter-spacing-normal": "0em",
1256
+ "--letter-spacing-tight": "-0.025em",
1257
+ "--shadow-xs": "0 1px 2px 0 rgba(0,0,0,0.14)",
1258
+ "--shadow-sm": "0 1px 3px 0 rgba(0,0,0,0.18)",
1259
+ "--shadow-md": "0 2px 6px -1px rgba(0,0,0,0.20)",
1260
+ "--shadow-lg": "0 4px 12px -2px rgba(0,0,0,0.22)",
1261
+ "--shadow-xl": "0 8px 24px -4px rgba(0,0,0,0.22)",
1262
+ "--shadow-2xl": "0 12px 36px -6px rgba(0,0,0,0.24)"
1263
+ }
1264
+ };
1265
+
1266
+ // ../../app/ui-kit/pixelplay-ui/shared/config/theme-tokens.ts
1267
+ var lightTheme = {
1268
+ // Surfaces
1269
+ surface: colors.gray[25],
1270
+ "surface-dim": colors.gray[100],
1271
+ "surface-bright": "#FFFFFF",
1272
+ "surface-container-lowest": "#FFFFFF",
1273
+ "surface-container-low": colors.gray[50],
1274
+ "surface-container": colors.gray[100],
1275
+ "surface-container-high": colors.gray[200],
1276
+ "surface-container-highest": colors.gray[300],
1277
+ // Content
1278
+ "on-surface": colors.gray[900],
1279
+ "on-surface-variant": colors.gray[600],
1280
+ "inverse-surface": colors.gray[800],
1281
+ "inverse-on-surface": colors.gray[50],
1282
+ // Primary (brand = purple family)
1283
+ primary: colors.brand[600],
1284
+ "on-primary": "#FFFFFF",
1285
+ "primary-container": colors.brand[200],
1286
+ "on-primary-container": colors.brand[800],
1287
+ "inverse-primary": colors.brand[300],
1288
+ // Secondary (violet)
1289
+ secondary: colors.violet[500],
1290
+ "on-secondary": "#FFFFFF",
1291
+ "secondary-container": colors.violet[100],
1292
+ "on-secondary-container": colors.violet[800],
1293
+ // Tertiary (teal accent)
1294
+ tertiary: colors.teal[500],
1295
+ "on-tertiary": "#FFFFFF",
1296
+ "tertiary-container": colors.teal[100],
1297
+ "on-tertiary-container": colors.teal[800],
1298
+ // Utility
1299
+ outline: colors.gray[300],
1300
+ "outline-variant": colors.gray[200],
1301
+ scrim: "rgba(0,0,0,0.4)",
1302
+ shadow: "rgba(0,0,0,0.08)",
1303
+ // Feedback
1304
+ error: colors.error[500],
1305
+ "on-error": "#FFFFFF",
1306
+ "error-container": colors.error[100],
1307
+ "on-error-container": colors.error[800],
1308
+ success: colors.success[500],
1309
+ "on-success": "#FFFFFF",
1310
+ "success-container": colors.success[100],
1311
+ "on-success-container": colors.success[800],
1312
+ warning: colors.warning[500],
1313
+ "on-warning": "#FFFFFF",
1314
+ "warning-container": colors.warning[100],
1315
+ "on-warning-container": colors.warning[800],
1316
+ info: colors.blue[500],
1317
+ "on-info": "#FFFFFF",
1318
+ "info-container": colors.blue[100],
1319
+ "on-info-container": colors.blue[800],
1320
+ // States
1321
+ "surface-tint": colors.brand[500],
1322
+ "state-hover": "rgba(0,0,0,0.08)",
1323
+ "state-focus": "rgba(0,0,0,0.12)",
1324
+ "state-pressed": "rgba(0,0,0,0.12)",
1325
+ "state-dragged": "rgba(0,0,0,0.16)",
1326
+ "state-disabled": "rgba(0,0,0,0.38)",
1327
+ // Categorical — 10 perceptually distinct hues
1328
+ "graphic-1": colors.brand[500],
1329
+ // purple
1330
+ "graphic-2": colors.blue[500],
1331
+ // blue
1332
+ "graphic-3": colors.teal[500],
1333
+ // teal
1334
+ "graphic-4": colors.success[500],
1335
+ // green
1336
+ "graphic-5": colors.warning[500],
1337
+ // amber
1338
+ "graphic-6": colors.error[500],
1339
+ // red
1340
+ "graphic-7": colors.indigo[500],
1341
+ // indigo
1342
+ "graphic-8": colors.pink[500],
1343
+ // pink
1344
+ "graphic-9": colors.amber[500],
1345
+ // yellow-amber
1346
+ "graphic-10": colors.cyan[500],
1347
+ // cyan
1348
+ "on-graphic": "#FFFFFF",
1349
+ // Categorical containers — very light bg ([50]) + mid-tone icon/text ([600])
1350
+ "graphic-1-container": colors.brand[50],
1351
+ "graphic-2-container": colors.blue[50],
1352
+ "graphic-3-container": colors.teal[50],
1353
+ "graphic-4-container": colors.success[50],
1354
+ "graphic-5-container": colors.warning[50],
1355
+ "graphic-6-container": colors.error[50],
1356
+ "graphic-7-container": colors.indigo[50],
1357
+ "graphic-8-container": colors.pink[50],
1358
+ "graphic-9-container": colors.amber[50],
1359
+ "graphic-10-container": colors.cyan[50],
1360
+ "on-graphic-1-container": colors.brand[600],
1361
+ "on-graphic-2-container": colors.blue[600],
1362
+ "on-graphic-3-container": colors.teal[600],
1363
+ "on-graphic-4-container": colors.success[600],
1364
+ "on-graphic-5-container": colors.warning[600],
1365
+ "on-graphic-6-container": colors.error[600],
1366
+ "on-graphic-7-container": colors.indigo[600],
1367
+ "on-graphic-8-container": colors.pink[600],
1368
+ "on-graphic-9-container": colors.amber[600],
1369
+ "on-graphic-10-container": colors.cyan[600],
1370
+ // Status
1371
+ "status-positive": colors.success[600],
1372
+ "status-warning": colors.warning[500],
1373
+ "status-negative": colors.error[600],
1374
+ "status-neutral": colors.gray[400],
1375
+ // Progress
1376
+ "progress-track": colors.gray[200],
1377
+ "progress-indicator": colors.brand[500],
1378
+ "progress-buffer": colors.brand[300],
1379
+ // Scales
1380
+ "scale-low": colors.success[300],
1381
+ "scale-medium": colors.warning[400],
1382
+ "scale-high": colors.error[500],
1383
+ // Infrastructure
1384
+ "graphic-outline": colors.gray[300],
1385
+ "graphic-divider": colors.gray[200],
1386
+ "graphic-label": colors.gray[600],
1387
+ "graphic-marker": colors.brand[600],
1388
+ // Overlays
1389
+ "graphic-hover": colors.brand[100],
1390
+ "graphic-muted": colors.gray[200],
1391
+ "annotation-line": colors.gray[400]
1392
+ };
1393
+ var darkTheme = {
1394
+ // Surfaces
1395
+ surface: colors.gray[900],
1396
+ "surface-dim": "#080D14",
1397
+ "surface-bright": colors.gray[800],
1398
+ "surface-container-lowest": "#080D14",
1399
+ "surface-container-low": colors.gray[900],
1400
+ "surface-container": colors.gray[800],
1401
+ "surface-container-high": colors.gray[700],
1402
+ "surface-container-highest": colors.gray[600],
1403
+ // Content
1404
+ "on-surface": colors.gray[50],
1405
+ "on-surface-variant": colors.gray[400],
1406
+ "inverse-surface": colors.gray[100],
1407
+ "inverse-on-surface": colors.gray[900],
1408
+ // Primary
1409
+ primary: colors.brand[400],
1410
+ "on-primary": "#000000",
1411
+ "primary-container": colors.brand[900],
1412
+ "on-primary-container": colors.brand[100],
1413
+ "inverse-primary": colors.brand[600],
1414
+ // Secondary
1415
+ secondary: colors.violet[400],
1416
+ "on-secondary": colors.violet[900],
1417
+ "secondary-container": colors.violet[800],
1418
+ "on-secondary-container": colors.violet[100],
1419
+ // Tertiary
1420
+ tertiary: colors.teal[400],
1421
+ "on-tertiary": "#000000",
1422
+ "tertiary-container": colors.teal[900],
1423
+ "on-tertiary-container": colors.teal[100],
1424
+ // Utility
1425
+ outline: colors.gray[600],
1426
+ "outline-variant": colors.gray[700],
1427
+ scrim: "rgba(255,255,255,0.1)",
1428
+ shadow: "rgba(0,0,0,0.3)",
1429
+ // Feedback
1430
+ error: colors.error[400],
1431
+ "on-error": colors.error[900],
1432
+ "error-container": colors.error[800],
1433
+ "on-error-container": colors.error[100],
1434
+ success: colors.success[400],
1435
+ "on-success": colors.success[900],
1436
+ "success-container": colors.success[800],
1437
+ "on-success-container": colors.success[100],
1438
+ warning: colors.warning[400],
1439
+ "on-warning": colors.warning[900],
1440
+ "warning-container": colors.warning[800],
1441
+ "on-warning-container": colors.warning[100],
1442
+ info: colors.blue[400],
1443
+ "on-info": colors.blue[900],
1444
+ "info-container": colors.blue[800],
1445
+ "on-info-container": colors.blue[100],
1446
+ // States
1447
+ "surface-tint": colors.brand[400],
1448
+ "state-hover": "rgba(255,255,255,0.08)",
1449
+ "state-focus": "rgba(255,255,255,0.12)",
1450
+ "state-pressed": "rgba(255,255,255,0.12)",
1451
+ "state-dragged": "rgba(255,255,255,0.16)",
1452
+ "state-disabled": "rgba(255,255,255,0.38)",
1453
+ // Categorical
1454
+ "graphic-1": colors.brand[400],
1455
+ "graphic-2": colors.blue[400],
1456
+ "graphic-3": colors.teal[400],
1457
+ "graphic-4": colors.success[400],
1458
+ "graphic-5": colors.warning[400],
1459
+ "graphic-6": colors.error[400],
1460
+ "graphic-7": colors.indigo[400],
1461
+ "graphic-8": colors.pink[400],
1462
+ "graphic-9": colors.amber[400],
1463
+ "graphic-10": colors.cyan[400],
1464
+ "on-graphic": "#FFFFFF",
1465
+ // Categorical containers — very dark bg + light text
1466
+ "graphic-1-container": colors.brand[950],
1467
+ "graphic-2-container": colors.blue[950],
1468
+ "graphic-3-container": colors.teal[950],
1469
+ "graphic-4-container": colors.success[950],
1470
+ "graphic-5-container": colors.warning[950],
1471
+ "graphic-6-container": colors.error[950],
1472
+ "graphic-7-container": colors.indigo[950],
1473
+ "graphic-8-container": colors.pink[950],
1474
+ "graphic-9-container": colors.amber[950],
1475
+ "graphic-10-container": colors.cyan[950],
1476
+ "on-graphic-1-container": colors.brand[100],
1477
+ "on-graphic-2-container": colors.blue[100],
1478
+ "on-graphic-3-container": colors.teal[100],
1479
+ "on-graphic-4-container": colors.success[100],
1480
+ "on-graphic-5-container": colors.warning[100],
1481
+ "on-graphic-6-container": colors.error[100],
1482
+ "on-graphic-7-container": colors.indigo[100],
1483
+ "on-graphic-8-container": colors.pink[100],
1484
+ "on-graphic-9-container": colors.amber[100],
1485
+ "on-graphic-10-container": colors.cyan[100],
1486
+ // Status
1487
+ "status-positive": colors.success[400],
1488
+ "status-warning": colors.warning[400],
1489
+ "status-negative": colors.error[400],
1490
+ "status-neutral": colors.gray[500],
1491
+ // Progress
1492
+ "progress-track": colors.gray[700],
1493
+ "progress-indicator": colors.brand[400],
1494
+ "progress-buffer": colors.brand[700],
1495
+ // Scales
1496
+ "scale-low": colors.success[400],
1497
+ "scale-medium": colors.warning[400],
1498
+ "scale-high": colors.error[400],
1499
+ // Infrastructure
1500
+ "graphic-outline": colors.gray[600],
1501
+ "graphic-divider": colors.gray[700],
1502
+ "graphic-label": colors.gray[400],
1503
+ "graphic-marker": colors.brand[400],
1504
+ // Overlays
1505
+ "graphic-hover": colors.brand[800],
1506
+ "graphic-muted": colors.gray[700],
1507
+ "annotation-line": colors.gray[500]
1508
+ };
1509
+ var designThemes = {
1510
+ rosewood: rosewoodTheme,
1511
+ botanica: botanicaTheme,
1512
+ inkwell: inkwellTheme
1513
+ };
1514
+ function tokensToVarBlock(tokens) {
1515
+ return Object.entries(tokens).map(([key, value]) => ` --${key}: ${value};`).join("\n");
1516
+ }
1517
+ function globalsToVarBlock(globals) {
1518
+ return Object.entries(globals).map(([key, value]) => ` ${key}: ${value};`).join("\n");
1519
+ }
1520
+ function generateThemeCSS() {
1521
+ const blocks = [];
1522
+ const entries = Object.entries(designThemes);
1523
+ const [, firstTheme] = entries[0];
1524
+ const firstLightVars = tokensToVarBlock(firstTheme.light);
1525
+ const firstGlobals = globalsToVarBlock(firstTheme.globals);
1526
+ const firstDarkVars = tokensToVarBlock(firstTheme.dark);
1527
+ const rootBlock = [firstLightVars, firstGlobals].filter(Boolean).join("\n");
1528
+ blocks.push(`:root {
1529
+ ${rootBlock}
1530
+ }`);
1531
+ blocks.push(`.dark {
1532
+ ${firstDarkVars}
1533
+ ${firstGlobals}
1534
+ }`);
1535
+ for (const [name, theme] of entries) {
1536
+ const lightVars = tokensToVarBlock(theme.light);
1537
+ const globalsVars = globalsToVarBlock(theme.globals);
1538
+ const darkVars = tokensToVarBlock(theme.dark);
1539
+ const lightBlock = [lightVars, globalsVars].filter(Boolean).join("\n");
1540
+ blocks.push(`[data-design-theme="${name}"] {
1541
+ ${lightBlock}
1542
+ }`);
1543
+ blocks.push(
1544
+ `[data-design-theme="${name}"].dark {
1545
+ ${darkVars}
1546
+ ${globalsVars}
1547
+ }`
1548
+ );
1549
+ }
1550
+ return blocks.join("\n\n");
1551
+ }
1552
+ export {
1553
+ darkTheme,
1554
+ generateThemeCSS,
1555
+ lightTheme
1556
+ };
1557
+ //# sourceMappingURL=server.mjs.map