@cueplusplus/ui 0.8.0 → 0.9.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 (60) hide show
  1. package/CHANGELOG.md +262 -0
  2. package/README.md +49 -0
  3. package/dist/chat/message-list.js +2 -1
  4. package/dist/configurator/_export.d.ts +1 -1
  5. package/dist/configurator/_export.js +53 -13
  6. package/dist/configurator/_overrides.d.ts +25 -6
  7. package/dist/configurator/_overrides.js +30 -17
  8. package/dist/configurator/configurator.js +8 -3
  9. package/dist/configurator/panel-sections.js +43 -13
  10. package/dist/elements/command-palette.js +1 -1
  11. package/dist/elements/flow-graph.js +2 -2
  12. package/dist/elements/markdown.js +1 -1
  13. package/dist/elements/surfaces.js +4 -3
  14. package/dist/index.d.ts +5 -2
  15. package/dist/index.js +2 -1
  16. package/dist/midi/piano-keyboard.js +5 -1
  17. package/dist/primitives/chip.d.ts +1 -1
  18. package/dist/styles.css +23 -1
  19. package/dist/system/density.d.ts +17 -8
  20. package/dist/system/density.js +39 -16
  21. package/dist/system/index.d.ts +5 -2
  22. package/dist/system/index.js +2 -1
  23. package/dist/system/overrides.d.ts +43 -0
  24. package/dist/system/overrides.js +238 -0
  25. package/dist/system/portal.d.ts +4 -2
  26. package/dist/system/portal.js +34 -3
  27. package/dist/system/prepaint.d.ts +58 -7
  28. package/dist/system/prepaint.js +72 -20
  29. package/dist/system/theme-provider.d.ts +133 -8
  30. package/dist/system/theme-provider.js +203 -72
  31. package/dist/system/theme-registry.d.ts +53 -0
  32. package/dist/system/theme-registry.js +66 -0
  33. package/dist/system/use-density.d.ts +13 -5
  34. package/dist/system/use-density.js +142 -13
  35. package/dist/system/use-theme.d.ts +5 -3
  36. package/dist/system/use-theme.js +5 -3
  37. package/dist/system/vocabulary.d.ts +15 -0
  38. package/dist/system/vocabulary.js +111 -0
  39. package/dist/theming/contrast.d.ts +2 -122
  40. package/dist/theming/contrast.js +2 -194
  41. package/dist/theming/create-theme.d.ts +37 -11
  42. package/dist/theming/create-theme.js +54 -17
  43. package/dist/theming/index.d.ts +3 -4
  44. package/dist/theming/index.js +3 -4
  45. package/dist/theming/serialize.d.ts +24 -11
  46. package/dist/theming/serialize.js +16 -18
  47. package/manifest/components/colors-section.json +2 -3
  48. package/manifest/components/cue-portal-frame.json +1 -1
  49. package/manifest/components/density.json +1 -1
  50. package/manifest/components/export-dialog.json +0 -3
  51. package/manifest/components/preset-section.json +2 -3
  52. package/manifest/components/shape-section.json +2 -3
  53. package/manifest/components/theme-configurator.json +0 -3
  54. package/manifest/components/theme-provider.json +24 -9
  55. package/manifest/components/token-editor.json +0 -3
  56. package/manifest/manifest.json +145 -24
  57. package/manifest/tokens.json +121 -11
  58. package/package.json +15 -6
  59. package/dist/theming/_presets.d.ts +0 -11
  60. package/dist/theming/_presets.js +0 -678
@@ -1,678 +0,0 @@
1
- //#region src/theming/_presets.ts
2
- /**
3
- * The colour tokens every theme block declares, in the order the tokens build
4
- * emits them. A generated theme is complete exactly when it covers this list.
5
- */
6
- const THEME_COLOR_TOKENS = [
7
- "bg",
8
- "sunken",
9
- "surface-1",
10
- "surface-2",
11
- "surface-3",
12
- "fg",
13
- "fg-muted",
14
- "fg-subtle",
15
- "border",
16
- "border-strong",
17
- "border-overlay",
18
- "accent",
19
- "accent-hover",
20
- "accent-fg",
21
- "ok",
22
- "busy",
23
- "warn",
24
- "warn-fg",
25
- "danger",
26
- "danger-fg",
27
- "info",
28
- "stream",
29
- "selection",
30
- "focus",
31
- "data-ground",
32
- "scrim"
33
- ];
34
- /** The shipped presets, keyed by name. */
35
- const THEME_PRESETS = {
36
- cue: {
37
- dark: {
38
- "bg": "#0a0a0a",
39
- "sunken": "#000000",
40
- "surface-1": "#121212",
41
- "surface-2": "#1a1a1a",
42
- "surface-3": "#242424",
43
- "fg": "#f5f5f7",
44
- "fg-muted": "rgba(255,255,255,0.55)",
45
- "fg-subtle": "rgba(255,255,255,0.35)",
46
- "border": "rgba(255,255,255,0.10)",
47
- "border-strong": "rgba(255,255,255,0.25)",
48
- "border-overlay": "rgba(255,255,255,0.25)",
49
- "accent": "#ffffff",
50
- "accent-hover": "rgba(255,255,255,0.85)",
51
- "accent-fg": "#0a0a0a",
52
- "ok": "oklch(0.72 0.17 149)",
53
- "busy": "oklch(0.78 0.13 220)",
54
- "warn": "oklch(0.8 0.17 75)",
55
- "warn-fg": "#000000",
56
- "danger": "#ff5f57",
57
- "danger-fg": "#000000",
58
- "info": "oklch(0.75 0.12 252)",
59
- "stream": "oklch(0.707 0.165 254.624)",
60
- "selection": "rgba(255,255,255,0.20)",
61
- "focus": "#ffffff",
62
- "data-ground": "#000000",
63
- "scrim": "rgba(0,0,0,0.55)"
64
- },
65
- light: {
66
- "bg": "#fcfcfc",
67
- "sunken": "#f0f0f0",
68
- "surface-1": "#ffffff",
69
- "surface-2": "#f6f6f6",
70
- "surface-3": "#ededed",
71
- "fg": "#0a0a0a",
72
- "fg-muted": "rgba(0,0,0,0.55)",
73
- "fg-subtle": "rgba(0,0,0,0.35)",
74
- "border": "rgba(0,0,0,0.10)",
75
- "border-strong": "rgba(0,0,0,0.25)",
76
- "border-overlay": "rgba(0,0,0,0.25)",
77
- "accent": "#0a0a0a",
78
- "accent-hover": "rgba(0,0,0,0.85)",
79
- "accent-fg": "#fcfcfc",
80
- "ok": "oklch(0.53 0.14 149)",
81
- "busy": "oklch(0.54 0.1 225)",
82
- "warn": "oklch(0.55 0.115 70)",
83
- "warn-fg": "#fcfcfc",
84
- "danger": "#d03030",
85
- "danger-fg": "#fcfcfc",
86
- "info": "oklch(0.55 0.16 258)",
87
- "stream": "oklch(0.55 0.21 259.815)",
88
- "selection": "rgba(0,0,0,0.20)",
89
- "focus": "#0a0a0a",
90
- "data-ground": "#000000",
91
- "scrim": "rgba(0,0,0,0.55)"
92
- },
93
- fonts: { "font-mono": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }
94
- },
95
- terminal: {
96
- dark: {
97
- "bg": "hsl(240 10% 6%)",
98
- "sunken": "hsl(240 12% 4%)",
99
- "surface-1": "hsl(240 8% 9%)",
100
- "surface-2": "hsl(240 6% 14%)",
101
- "surface-3": "hsl(240 6% 16%)",
102
- "fg": "hsl(240 5% 96%)",
103
- "fg-muted": "hsl(240 4% 56%)",
104
- "fg-subtle": "hsl(240 4% 40%)",
105
- "border": "hsl(240 6% 18%)",
106
- "border-strong": "hsl(240 6% 26%)",
107
- "border-overlay": "hsl(240 6% 26%)",
108
- "accent": "hsl(180 100% 50%)",
109
- "accent-hover": "hsl(180 100% 42%)",
110
- "accent-fg": "hsl(240 10% 6%)",
111
- "ok": "hsl(142 76% 50%)",
112
- "busy": "hsl(180 100% 50%)",
113
- "warn": "hsl(38 100% 55%)",
114
- "warn-fg": "hsl(240 12% 4%)",
115
- "danger": "hsl(0 72% 51%)",
116
- "danger-fg": "#ffffff",
117
- "info": "hsl(180 100% 50%)",
118
- "stream": "hsl(190 100% 55%)",
119
- "selection": "hsl(180 100% 50% / 0.25)",
120
- "focus": "hsl(180 100% 50%)",
121
- "data-ground": "#000000",
122
- "scrim": "rgba(0,0,0,0.55)"
123
- },
124
- light: {
125
- "bg": "hsl(0 0% 99%)",
126
- "sunken": "hsl(240 5% 92%)",
127
- "surface-1": "#ffffff",
128
- "surface-2": "hsl(240 5% 96%)",
129
- "surface-3": "hsl(240 5% 94%)",
130
- "fg": "hsl(240 6% 10%)",
131
- "fg-muted": "hsl(240 4% 46%)",
132
- "fg-subtle": "hsl(240 4% 60%)",
133
- "border": "hsl(240 6% 90%)",
134
- "border-strong": "hsl(240 6% 80%)",
135
- "border-overlay": "hsl(240 6% 80%)",
136
- "accent": "hsl(240 6% 10%)",
137
- "accent-hover": "hsl(240 6% 22%)",
138
- "accent-fg": "hsl(0 0% 98%)",
139
- "ok": "hsl(142 71% 45%)",
140
- "busy": "hsl(187 100% 33%)",
141
- "warn": "hsl(38 92% 50%)",
142
- "warn-fg": "hsl(240 6% 10%)",
143
- "danger": "hsl(0 72% 45%)",
144
- "danger-fg": "hsl(0 0% 99%)",
145
- "info": "hsl(187 100% 33%)",
146
- "stream": "hsl(196 100% 32%)",
147
- "selection": "hsl(187 100% 33% / 0.18)",
148
- "focus": "hsl(240 6% 10%)",
149
- "data-ground": "#000000",
150
- "scrim": "rgba(0,0,0,0.55)"
151
- },
152
- fonts: {}
153
- },
154
- signal: {
155
- dark: {
156
- "bg": "#1a1a1a",
157
- "sunken": "#141414",
158
- "surface-1": "#222222",
159
- "surface-2": "#2a2a2a",
160
- "surface-3": "#333333",
161
- "fg": "#cccccc",
162
- "fg-muted": "#888888",
163
- "fg-subtle": "#666666",
164
- "border": "#333333",
165
- "border-strong": "#3e3e3e",
166
- "border-overlay": "#555555",
167
- "accent": "#ff6a2e",
168
- "accent-hover": "#ff8552",
169
- "accent-fg": "#1a1a1a",
170
- "ok": "#00cc66",
171
- "busy": "#ff6a2e",
172
- "warn": "#ff9500",
173
- "warn-fg": "#141414",
174
- "danger": "#ff3333",
175
- "danger-fg": "#141414",
176
- "info": "#3b82f6",
177
- "stream": "#5b9dff",
178
- "selection": "rgba(255,106,46,0.16)",
179
- "focus": "#ff6a2e",
180
- "data-ground": "#000000",
181
- "scrim": "rgba(0,0,0,0.55)"
182
- },
183
- light: {
184
- "bg": "#f5f5f5",
185
- "sunken": "#ececec",
186
- "surface-1": "#ffffff",
187
- "surface-2": "#f0f0f0",
188
- "surface-3": "#e8e8e8",
189
- "fg": "#1f1f1f",
190
- "fg-muted": "#5c5c5c",
191
- "fg-subtle": "#8a8a8a",
192
- "border": "#e0e0e0",
193
- "border-strong": "#cfcfcf",
194
- "border-overlay": "#b5b5b5",
195
- "accent": "#d9541a",
196
- "accent-hover": "#c04a17",
197
- "accent-fg": "#ffffff",
198
- "ok": "#009e50",
199
- "busy": "#d9541a",
200
- "warn": "#cc7700",
201
- "warn-fg": "#1f1f1f",
202
- "danger": "#d42020",
203
- "danger-fg": "#f5f5f5",
204
- "info": "#1a6fd4",
205
- "stream": "#1560c4",
206
- "selection": "rgba(217,84,26,0.18)",
207
- "focus": "#d9541a",
208
- "data-ground": "#000000",
209
- "scrim": "rgba(0,0,0,0.35)"
210
- },
211
- fonts: { "font-mono": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }
212
- },
213
- venu: {
214
- dark: {
215
- "bg": "hsl(0 0% 9%)",
216
- "sunken": "hsl(0 0% 7%)",
217
- "surface-1": "hsl(0 0% 11%)",
218
- "surface-2": "hsl(0 0% 13%)",
219
- "surface-3": "hsl(0 0% 15%)",
220
- "fg": "hsl(240 4% 87%)",
221
- "fg-muted": "hsl(0 0% 65%)",
222
- "fg-subtle": "hsl(0 0% 33%)",
223
- "border": "hsl(0 0% 22%)",
224
- "border-strong": "hsl(0 0% 31%)",
225
- "border-overlay": "hsl(0 0% 13%)",
226
- "accent": "hsl(27 94% 53%)",
227
- "accent-hover": "hsl(27 94% 48%)",
228
- "accent-fg": "#ffffff",
229
- "ok": "hsl(166 79% 38%)",
230
- "busy": "hsl(27 94% 53%)",
231
- "warn": "hsl(27 88% 52%)",
232
- "warn-fg": "hsl(0 0% 7%)",
233
- "danger": "hsl(0 87% 62%)",
234
- "danger-fg": "hsl(0 0% 7%)",
235
- "info": "hsl(209 89% 54%)",
236
- "stream": "hsl(206 92% 66%)",
237
- "selection": "hsl(212 63% 23%)",
238
- "focus": "hsl(27 94% 53%)",
239
- "data-ground": "#000000",
240
- "scrim": "rgba(0,0,0,0.55)"
241
- },
242
- light: {
243
- "bg": "#f5f5f5",
244
- "sunken": "#e8e8e8",
245
- "surface-1": "#ffffff",
246
- "surface-2": "#f0f0f0",
247
- "surface-3": "#e4e4e4",
248
- "fg": "#17171a",
249
- "fg-muted": "#555555",
250
- "fg-subtle": "#999999",
251
- "border": "#dcdcdc",
252
- "border-strong": "#c4c4c4",
253
- "border-overlay": "#e4e4e4",
254
- "accent": "#e06510",
255
- "accent-hover": "#c85a0e",
256
- "accent-fg": "#ffffff",
257
- "ok": "#0e8c70",
258
- "busy": "#e06510",
259
- "warn": "#c05e10",
260
- "warn-fg": "#000000",
261
- "danger": "#cc2f2f",
262
- "danger-fg": "#f5f5f5",
263
- "info": "#1a75d2",
264
- "stream": "hsl(212 78% 42%)",
265
- "selection": "#cce0ff",
266
- "focus": "#c75600",
267
- "data-ground": "#000000",
268
- "scrim": "rgba(0,0,0,0.35)"
269
- },
270
- fonts: { "font-mono": "\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }
271
- },
272
- hivehub: {
273
- dark: {
274
- "bg": "hsl(222 47% 5%)",
275
- "sunken": "hsl(222 47% 4%)",
276
- "surface-1": "hsl(222 47% 8%)",
277
- "surface-2": "hsl(222 47% 11%)",
278
- "surface-3": "hsl(222 47% 13%)",
279
- "fg": "hsl(0 0% 98%)",
280
- "fg-muted": "hsl(0 0% 65%)",
281
- "fg-subtle": "hsl(0 0% 45%)",
282
- "border": "hsl(222 47% 15%)",
283
- "border-strong": "hsl(222 47% 20%)",
284
- "border-overlay": "hsl(222 47% 20%)",
285
- "accent": "hsl(27 94% 53%)",
286
- "accent-hover": "hsl(27 94% 48%)",
287
- "accent-fg": "#ffffff",
288
- "ok": "hsl(142 76% 36%)",
289
- "busy": "hsl(38 92% 50%)",
290
- "warn": "hsl(38 92% 50%)",
291
- "warn-fg": "hsl(222 47% 4%)",
292
- "danger": "hsl(0 72% 51%)",
293
- "danger-fg": "hsl(0 0% 98%)",
294
- "info": "hsl(221 83% 62%)",
295
- "stream": "hsl(217 91% 68%)",
296
- "selection": "hsl(27 94% 53% / 0.2)",
297
- "focus": "hsl(27 94% 53%)",
298
- "data-ground": "#000000",
299
- "scrim": "rgba(0,0,0,0.8)"
300
- },
301
- light: {
302
- "bg": "hsl(222 30% 97%)",
303
- "sunken": "hsl(222 28% 94%)",
304
- "surface-1": "#ffffff",
305
- "surface-2": "hsl(222 30% 95%)",
306
- "surface-3": "hsl(222 25% 92%)",
307
- "fg": "hsl(222 30% 12%)",
308
- "fg-muted": "hsl(222 12% 38%)",
309
- "fg-subtle": "hsl(222 10% 55%)",
310
- "border": "hsl(222 25% 88%)",
311
- "border-strong": "hsl(222 20% 78%)",
312
- "border-overlay": "hsl(222 20% 78%)",
313
- "accent": "#e06510",
314
- "accent-hover": "#c85a0e",
315
- "accent-fg": "#ffffff",
316
- "ok": "hsl(142 70% 30%)",
317
- "busy": "hsl(38 92% 40%)",
318
- "warn": "hsl(38 92% 40%)",
319
- "warn-fg": "hsl(222 30% 12%)",
320
- "danger": "#c62828",
321
- "danger-fg": "hsl(222 30% 97%)",
322
- "info": "#2f6fd0",
323
- "stream": "hsl(221 78% 45%)",
324
- "selection": "rgba(224,101,16,0.15)",
325
- "focus": "#c75600",
326
- "data-ground": "#000000",
327
- "scrim": "rgba(15,23,42,0.45)"
328
- },
329
- fonts: {}
330
- },
331
- dusk: {
332
- dark: {
333
- "bg": "#0C1411",
334
- "sunken": "#08100D",
335
- "surface-1": "#101C17",
336
- "surface-2": "#15241E",
337
- "surface-3": "#1a2c24",
338
- "fg": "#E9EFEA",
339
- "fg-muted": "#A7B3AC",
340
- "fg-subtle": "#6E7D75",
341
- "border": "#1E2A25",
342
- "border-strong": "#2C3A33",
343
- "border-overlay": "#2C3A33",
344
- "accent": "#E8A33D",
345
- "accent-hover": "#F2B85A",
346
- "accent-fg": "#20160A",
347
- "ok": "#6BBF95",
348
- "busy": "#D98E4B",
349
- "warn": "#D98E4B",
350
- "warn-fg": "#08100D",
351
- "danger": "#D9694B",
352
- "danger-fg": "#08100D",
353
- "info": "#5B8DEF",
354
- "stream": "#6FA0FF",
355
- "selection": "#1B1F16",
356
- "focus": "#E8A33D",
357
- "data-ground": "#000000",
358
- "scrim": "rgba(4,8,6,0.62)"
359
- },
360
- light: {
361
- "bg": "#F4F5F1",
362
- "sunken": "#E9EBE3",
363
- "surface-1": "#FAF8F0",
364
- "surface-2": "#EDEFE8",
365
- "surface-3": "#E4E7DD",
366
- "fg": "#14201B",
367
- "fg-muted": "#46554D",
368
- "fg-subtle": "#76837B",
369
- "border": "#DEE1D7",
370
- "border-strong": "#C3CABD",
371
- "border-overlay": "#C3CABD",
372
- "accent": "#9A6516",
373
- "accent-hover": "#7E5210",
374
- "accent-fg": "#FFFDF7",
375
- "ok": "#2C7D55",
376
- "busy": "#96591D",
377
- "warn": "#96591D",
378
- "warn-fg": "#F4F5F1",
379
- "danger": "#A23C22",
380
- "danger-fg": "#F4F5F1",
381
- "info": "#2563EB",
382
- "stream": "#1D4FD8",
383
- "selection": "rgba(154,101,22,0.18)",
384
- "focus": "#9A6516",
385
- "data-ground": "#000000",
386
- "scrim": "rgba(4,8,6,0.62)"
387
- },
388
- fonts: { "font-mono": "\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }
389
- },
390
- luma: {
391
- dark: {
392
- "bg": "#181818",
393
- "sunken": "#111111",
394
- "surface-1": "#1d1d1d",
395
- "surface-2": "#212121",
396
- "surface-3": "#2a2a2a",
397
- "fg": "#d6d6dd",
398
- "fg-muted": "#a6a6a6",
399
- "fg-subtle": "#535353",
400
- "border": "#2a2a2a",
401
- "border-strong": "#383838",
402
- "border-overlay": "#383838",
403
- "accent": "#edbd6a",
404
- "accent-hover": "#d9a850",
405
- "accent-fg": "#181818",
406
- "ok": "#15ac91",
407
- "busy": "#edbd6a",
408
- "warn": "#ea7620",
409
- "warn-fg": "#111111",
410
- "danger": "#f14c4c",
411
- "danger-fg": "#111111",
412
- "info": "#228df2",
413
- "stream": "#4aa5ff",
414
- "selection": "rgba(237,189,106,0.22)",
415
- "focus": "#edbd6a",
416
- "data-ground": "#000000",
417
- "scrim": "rgba(0,0,0,0.55)"
418
- },
419
- light: {
420
- "bg": "#f5f5f5",
421
- "sunken": "#e0e0e0",
422
- "surface-1": "#ffffff",
423
- "surface-2": "#f0f0f0",
424
- "surface-3": "#e8e8e8",
425
- "fg": "#1a1a1a",
426
- "fg-muted": "#555555",
427
- "fg-subtle": "#999999",
428
- "border": "#e0e0e0",
429
- "border-strong": "#cccccc",
430
- "border-overlay": "#999999",
431
- "accent": "#b8862f",
432
- "accent-hover": "#9c7226",
433
- "accent-fg": "#ffffff",
434
- "ok": "#0e8c70",
435
- "busy": "#b8862f",
436
- "warn": "#d06a10",
437
- "warn-fg": "#1a1a1a",
438
- "danger": "#d03030",
439
- "danger-fg": "#f5f5f5",
440
- "info": "#1a75d2",
441
- "stream": "#0f6ac4",
442
- "selection": "rgba(184,134,47,0.20)",
443
- "focus": "#9f6e08",
444
- "data-ground": "#000000",
445
- "scrim": "rgba(0,0,0,0.55)"
446
- },
447
- fonts: { "font-mono": "\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }
448
- },
449
- snuffle: {
450
- dark: {
451
- "bg": "#1a1a1a",
452
- "sunken": "#141414",
453
- "surface-1": "#202020",
454
- "surface-2": "#262626",
455
- "surface-3": "#2b2b2b",
456
- "fg": "#cccccc",
457
- "fg-muted": "#8a8a8a",
458
- "fg-subtle": "#6f6f6f",
459
- "border": "#333333",
460
- "border-strong": "#8a8a8a",
461
- "border-overlay": "#333333",
462
- "accent": "#e0568a",
463
- "accent-hover": "#e97aa2",
464
- "accent-fg": "#1a1a1a",
465
- "ok": "#7bc47f",
466
- "busy": "#e6c53a",
467
- "warn": "#e6c53a",
468
- "warn-fg": "#141414",
469
- "danger": "#e0563b",
470
- "danger-fg": "#141414",
471
- "info": "#5ac8fa",
472
- "stream": "#6ec0ff",
473
- "selection": "#e0568a",
474
- "focus": "#e0568a",
475
- "data-ground": "#000000",
476
- "scrim": "rgba(0,0,0,0.55)"
477
- },
478
- light: {
479
- "bg": "#f6f6f6",
480
- "sunken": "#ededed",
481
- "surface-1": "#ffffff",
482
- "surface-2": "#f0f0f0",
483
- "surface-3": "#e9e9e9",
484
- "fg": "#262626",
485
- "fg-muted": "#6b6b6b",
486
- "fg-subtle": "#999999",
487
- "border": "#dddddd",
488
- "border-strong": "#bdbdbd",
489
- "border-overlay": "#dddddd",
490
- "accent": "#b83560",
491
- "accent-hover": "#9c2c51",
492
- "accent-fg": "#ffffff",
493
- "ok": "#3d8b41",
494
- "busy": "#8f7a14",
495
- "warn": "#8f7a14",
496
- "warn-fg": "#000000",
497
- "danger": "#b8402b",
498
- "danger-fg": "#f6f6f6",
499
- "info": "#157fb3",
500
- "stream": "#0f6f9e",
501
- "selection": "rgba(184,53,96,0.18)",
502
- "focus": "#b83560",
503
- "data-ground": "#000000",
504
- "scrim": "rgba(0,0,0,0.35)"
505
- },
506
- fonts: { "font-mono": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }
507
- },
508
- requestport: {
509
- dark: {
510
- "bg": "#0a0d0e",
511
- "sunken": "#07090a",
512
- "surface-1": "#101416",
513
- "surface-2": "#151a1d",
514
- "surface-3": "#1a2024",
515
- "fg": "#f0eee9",
516
- "fg-muted": "#a3a6a8",
517
- "fg-subtle": "#81868a",
518
- "border": "#293034",
519
- "border-strong": "#61686d",
520
- "border-overlay": "#3f484e",
521
- "accent": "#e66a45",
522
- "accent-hover": "#f07a53",
523
- "accent-fg": "#160d09",
524
- "ok": "#63b482",
525
- "busy": "#9a8cdb",
526
- "warn": "#d6a65a",
527
- "warn-fg": "#07090a",
528
- "danger": "#dc6d69",
529
- "danger-fg": "#07090a",
530
- "info": "#6eb7d9",
531
- "stream": "#7cc4e8",
532
- "selection": "rgba(230,106,69,0.18)",
533
- "focus": "#e66a45",
534
- "data-ground": "#000000",
535
- "scrim": "rgba(0,0,0,0.72)"
536
- },
537
- light: {
538
- "bg": "#f4f3ef",
539
- "sunken": "#e7e6e1",
540
- "surface-1": "#faf9f6",
541
- "surface-2": "#ffffff",
542
- "surface-3": "#deddd8",
543
- "fg": "#1a1d1e",
544
- "fg-muted": "#53595c",
545
- "fg-subtle": "#62696d",
546
- "border": "#d0d2cf",
547
- "border-strong": "#7f8689",
548
- "border-overlay": "#aeb4b5",
549
- "accent": "#b8492b",
550
- "accent-hover": "#963b23",
551
- "accent-fg": "#ffffff",
552
- "ok": "#247746",
553
- "busy": "#604aaa",
554
- "warn": "#8a5b00",
555
- "warn-fg": "#f4f3ef",
556
- "danger": "#aa2f2b",
557
- "danger-fg": "#f4f3ef",
558
- "info": "#1d6587",
559
- "stream": "#15607f",
560
- "selection": "rgba(184,73,43,0.18)",
561
- "focus": "#b8492b",
562
- "data-ground": "#000000",
563
- "scrim": "rgba(20,18,15,0.45)"
564
- },
565
- fonts: { "font-mono": "\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }
566
- },
567
- quotamate: {
568
- dark: {
569
- "bg": "#0e0e12",
570
- "sunken": "#09090c",
571
- "surface-1": "#15151a",
572
- "surface-2": "#212127",
573
- "surface-3": "#2b2b31",
574
- "fg": "#f4f4f6",
575
- "fg-muted": "#8b8b95",
576
- "fg-subtle": "#62626b",
577
- "border": "#2b2b31",
578
- "border-strong": "#3d3d45",
579
- "border-overlay": "#3d3d45",
580
- "accent": "#00e5e5",
581
- "accent-hover": "#33ffff",
582
- "accent-fg": "#0e0e12",
583
- "ok": "#22d967",
584
- "busy": "#00e5e5",
585
- "warn": "#ffab1a",
586
- "warn-fg": "#09090c",
587
- "danger": "#e13d3d",
588
- "danger-fg": "#09090c",
589
- "info": "#4a9eff",
590
- "stream": "#5fb0ff",
591
- "selection": "rgba(0,229,229,0.18)",
592
- "focus": "#00e5e5",
593
- "data-ground": "#000000",
594
- "scrim": "rgba(0,0,0,0.55)"
595
- },
596
- light: {
597
- "bg": "#fcfcfd",
598
- "sunken": "#f1f1f4",
599
- "surface-1": "#ffffff",
600
- "surface-2": "#f4f4f6",
601
- "surface-3": "#e7e7ec",
602
- "fg": "#18181b",
603
- "fg-muted": "#6e6e78",
604
- "fg-subtle": "#9a9aa4",
605
- "border": "#e2e2e8",
606
- "border-strong": "#c9c9d2",
607
- "border-overlay": "#c9c9d2",
608
- "accent": "#0d7d7d",
609
- "accent-hover": "#0a6767",
610
- "accent-fg": "#ffffff",
611
- "ok": "#17914a",
612
- "busy": "#0d7d7d",
613
- "warn": "#b46a00",
614
- "warn-fg": "#000000",
615
- "danger": "#c22d2d",
616
- "danger-fg": "#fcfcfd",
617
- "info": "#1f6fd4",
618
- "stream": "#0f63c8",
619
- "selection": "rgba(13,125,125,0.16)",
620
- "focus": "#0d7d7d",
621
- "data-ground": "#ffffff",
622
- "scrim": "rgba(0,0,0,0.55)"
623
- },
624
- fonts: { "font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace" }
625
- }
626
- };
627
- /**
628
- * The base type stacks, restated by a theme block when the preset overrides
629
- * nothing — a theme block has no more specificity than the `:root` defaults it
630
- * has to beat, and `:root` carries the *default* theme's font override. A silent
631
- * theme would inherit cue's JetBrains Mono instead of the base stack, so every
632
- * block says what it owns. Mirrors `build.mjs`'s `THEME_FONTS` handling.
633
- *
634
- * Every entry is a generic or a face the platform ships. The sans stack named
635
- * `Geist` until 2026-08-19 and no webfont was ever loaded to make it resolve, so
636
- * it was a name most visitors silently fell straight past; Geist is now the head
637
- * of the `geist` font pairing, which an app can actually deliver.
638
- */
639
- const BASE_FONT_STACKS = {
640
- "font-sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", sans-serif",
641
- "font-mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
642
- "font-display": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif"
643
- };
644
- /**
645
- * The radius multiplier each density level contributes.
646
- *
647
- * Geometry belongs to the density axis, so a theme that wants rounder corners
648
- * cannot simply declare `--cue-radius-scale`: its block would outrank the density
649
- * block and freeze ultra-compact's 0.75 at 1. {@link createTheme} instead
650
- * multiplies the two and emits one crossed rule per density that differs from the
651
- * default — which is why this ladder has to be known here.
652
- */
653
- const DENSITY_RADIUS_SCALE = {
654
- "ultra-compact": .75,
655
- "compact": 1,
656
- "normal": 1,
657
- "large": 1,
658
- "ultra-large": 1
659
- };
660
- /** The default density, whose radius scale the uncrossed theme block carries. */
661
- const DEFAULT_DENSITY_LEVEL = "compact";
662
- /**
663
- * What every theme block sets `--cue-font-mono` to.
664
- *
665
- * Neither the theme axis nor the font axis writes the shared token: each
666
- * publishes its own half (`--cue-font-theme-mono` and `--cue-font-pairing-mono`)
667
- * and this is the resolution, pairing first. It has to be a `var()` chain rather
668
- * than a value because the two attributes land on different elements — a
669
- * provider stamps `data-theme` on a `<div>` inside the `<html>` the pre-paint
670
- * script stamped `data-font` on, and for an inherited property the nearer
671
- * declaration would otherwise win whatever the stylesheet's order is.
672
- *
673
- * Mirrors `packages/tokens/build.mjs`'s `RESOLVED_MONO`, and
674
- * `test/theming/presets.test.ts` fails when the two drift.
675
- */
676
- const RESOLVED_MONO = "var(--cue-font-pairing-mono, var(--cue-font-theme-mono))";
677
- //#endregion
678
- export { BASE_FONT_STACKS, DEFAULT_DENSITY_LEVEL, DENSITY_RADIUS_SCALE, RESOLVED_MONO, THEME_COLOR_TOKENS, THEME_PRESETS };