@speakeasy-api/moonshine 1.42.0 → 1.43.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 (111) hide show
  1. package/README.md +19 -21
  2. package/dist/components/AIChat/AIChatContainer.d.ts +2 -2
  3. package/dist/components/AIChat/AIChatMessage.d.ts +1 -1
  4. package/dist/components/AIChat/AIChatMessageComposer.d.ts +3 -3
  5. package/dist/components/AIChat/AIChatMessageList.d.ts +1 -1
  6. package/dist/components/AIChat/AIChatModelSelector.d.ts +2 -1
  7. package/dist/components/AIChat/parts/AIChatMessageFilePart.d.ts +1 -1
  8. package/dist/components/AIChat/parts/AIChatMessageReasoningPart.d.ts +1 -1
  9. package/dist/components/AIChat/parts/AIChatMessageSourcePart.d.ts +1 -1
  10. package/dist/components/AIChat/parts/AIChatMessageTextPart.d.ts +1 -1
  11. package/dist/components/AIChat/parts/AIChatMessageToolInvocationPart.d.ts +1 -1
  12. package/dist/components/AIChat/parts/AIChatMessageToolPart.d.ts +5 -5
  13. package/dist/components/AIChat/parts/AIChatMessageToolResultPart.d.ts +1 -1
  14. package/dist/components/AIChat/types.d.ts +9 -9
  15. package/dist/components/ActionBar/index.d.ts +3 -3
  16. package/dist/components/Alert/index.d.ts +2 -2
  17. package/dist/components/AppLayout/index.d.ts +11 -11
  18. package/dist/components/AppLayout/provider.d.ts +2 -2
  19. package/dist/components/Badge/index.d.ts +3 -3
  20. package/dist/components/Button/index.d.ts +3 -3
  21. package/dist/components/Card/index.d.ts +3 -3
  22. package/dist/components/CodeEditorLayout/index.d.ts +8 -8
  23. package/dist/components/CodeHighlight/Pre.d.ts +1 -1
  24. package/dist/components/CodePlayground/index.d.ts +4 -4
  25. package/dist/components/CodeSnippet/index.d.ts +1 -1
  26. package/dist/components/Combobox/index.d.ts +4 -4
  27. package/dist/components/Command/index.d.ts +3 -3
  28. package/dist/components/Container/index.d.ts +1 -1
  29. package/dist/components/ContextDropdown/index.d.ts +1 -1
  30. package/dist/components/Dialog/index.d.ts +4 -4
  31. package/dist/components/DragNDrop/DragNDropArea.d.ts +1 -1
  32. package/dist/components/DragNDrop/Draggable.d.ts +1 -1
  33. package/dist/components/DragNDrop/Droppable.d.ts +1 -1
  34. package/dist/components/Dropdown/index.d.ts +3 -3
  35. package/dist/components/ExternalPill/index.d.ts +3 -3
  36. package/dist/components/Facepile/index.d.ts +4 -3
  37. package/dist/components/GradientCircle/index.d.ts +1 -1
  38. package/dist/components/Grid/index.d.ts +4 -4
  39. package/dist/components/Heading/index.d.ts +2 -2
  40. package/dist/components/HighlightedText/index.d.ts +2 -2
  41. package/dist/components/Icon/index.d.ts +3 -3
  42. package/dist/components/IconButton/index.d.ts +3 -3
  43. package/dist/components/Input/index.d.ts +1 -1
  44. package/dist/components/KeyHint/index.d.ts +3 -3
  45. package/dist/components/LanguageIndicator/index.d.ts +1 -1
  46. package/dist/components/Link/index.d.ts +1 -1
  47. package/dist/components/Logo/Animated.d.ts +2 -2
  48. package/dist/components/Logo/index.d.ts +2 -2
  49. package/dist/components/Logo/svgs/index.d.ts +2 -2
  50. package/dist/components/Modal/index.d.ts +2 -2
  51. package/dist/components/PageHeader/index.d.ts +1 -1
  52. package/dist/components/Popover/index.d.ts +3 -3
  53. package/dist/components/PromptInput/index.d.ts +1 -1
  54. package/dist/components/PullRequestLink/index.d.ts +3 -3
  55. package/dist/components/ResizablePanel/index.d.ts +3 -3
  56. package/dist/components/Score/index.d.ts +1 -1
  57. package/dist/components/ScrollArea/index.d.ts +2 -2
  58. package/dist/components/SegmentedButton/index.d.ts +2 -2
  59. package/dist/components/Select/index.d.ts +2 -2
  60. package/dist/components/Separator/index.d.ts +1 -1
  61. package/dist/components/Skeleton/index.d.ts +1 -1
  62. package/dist/components/Stack/index.d.ts +6 -6
  63. package/dist/components/Subnav/index.d.ts +1 -1
  64. package/dist/components/Switch/index.d.ts +2 -2
  65. package/dist/components/Table/context/tableProvider.d.ts +1 -1
  66. package/dist/components/Table/index.d.ts +10 -10
  67. package/dist/components/Tabs/index.d.ts +2 -2
  68. package/dist/components/TargetLanguageIcon/index.d.ts +1 -1
  69. package/dist/components/Text/index.d.ts +6 -6
  70. package/dist/components/ThemeSwitcher/index.d.ts +2 -2
  71. package/dist/components/Timeline/index.d.ts +8 -8
  72. package/dist/components/Tooltip/index.d.ts +3 -3
  73. package/dist/components/UserAvatar/index.d.ts +1 -1
  74. package/dist/components/Wizard/index.d.ts +2 -2
  75. package/dist/components/WorkspaceSelector/CreateOrg.d.ts +1 -1
  76. package/dist/components/WorkspaceSelector/CreateWorkspace.d.ts +2 -1
  77. package/dist/components/WorkspaceSelector/OrgList.d.ts +1 -1
  78. package/dist/components/WorkspaceSelector/OrgSelector.d.ts +2 -1
  79. package/dist/components/WorkspaceSelector/RecentWorkspaces.d.ts +1 -1
  80. package/dist/components/WorkspaceSelector/SearchBox.d.ts +1 -1
  81. package/dist/components/WorkspaceSelector/WorkspaceList.d.ts +1 -1
  82. package/dist/components/WorkspaceSelector/index.d.ts +2 -1
  83. package/dist/components/__beta__/CLIWizard/index.d.ts +3 -2
  84. package/dist/components/__beta__/CLIWizard/terminal-command.d.ts +3 -9
  85. package/dist/components/__beta__/CLIWizard/terminal.d.ts +4 -4
  86. package/dist/context/ConfigContext.d.ts +1 -1
  87. package/dist/context/ModalContext.d.ts +2 -2
  88. package/dist/context/theme.d.ts +1 -1
  89. package/dist/createCustomLucideIcon-BSnVssGH.mjs.map +1 -1
  90. package/dist/gems-CjrcvmBL.mjs.map +1 -1
  91. package/dist/go-CMa98Edn.mjs.map +1 -1
  92. package/dist/hooks/useTheme.d.ts +1 -1
  93. package/dist/index.d.ts +1 -1
  94. package/dist/lib/responsiveMappers.d.ts +1 -1
  95. package/dist/lib/storybookUtils.d.ts +2 -2
  96. package/dist/lib/typeUtils.d.ts +1 -1
  97. package/dist/maven-BhPvGLiR.mjs.map +1 -1
  98. package/dist/moonshine.css +1 -1
  99. package/dist/moonshine.es.js +2234 -2234
  100. package/dist/moonshine.es.js.map +1 -1
  101. package/dist/npm-BNJZqB_6.mjs.map +1 -1
  102. package/dist/nuget-DigVDFf0.mjs.map +1 -1
  103. package/dist/packagist-DvGLhkI-.mjs.map +1 -1
  104. package/dist/pypi-Cj9893_x.mjs.map +1 -1
  105. package/dist/types.d.ts +1 -1
  106. package/dist/utils-DnjhZJTm.mjs.map +1 -1
  107. package/package.json +12 -13
  108. package/src/base.css +281 -271
  109. package/src/global.css +16 -8
  110. package/src/utilities.css +0 -1
  111. package/types/utilities.d.ts +1 -1
package/src/base.css CHANGED
@@ -20,12 +20,14 @@
20
20
  * ============================================ */
21
21
 
22
22
  /* Font Families */
23
- --font-diatype: 'Diatype', -apple-system, BlinkMacSystemFont, 'Segoe UI',
24
- Roboto, Helvetica, Arial, sans-serif;
25
- --font-diatype-mono: 'Diatype Mono', SFMono-Regular, Menlo, Monaco, Consolas,
26
- 'Liberation Mono', 'Courier New', monospace;
27
- --font-tobias: 'Tobias', 'Cormorant', Georgia, Cambria, 'Times New Roman',
28
- Times, serif;
23
+ --font-diatype:
24
+ "Diatype", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
25
+ Arial, sans-serif;
26
+ --font-diatype-mono:
27
+ "Diatype Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
28
+ "Courier New", monospace;
29
+ --font-tobias:
30
+ "Tobias", "Cormorant", Georgia, Cambria, "Times New Roman", Times, serif;
29
31
 
30
32
  --color-base-white: hsl(0 0% 100%);
31
33
  --color-base-black: hsl(0 0% 0%);
@@ -142,11 +144,12 @@
142
144
  --color-brand-ruby: hsl(23, 96%, 62%);
143
145
  --color-brand-postman: hsl(0, 0%, 83%);
144
146
 
145
- --gradient-brand-primary-colors: var(--color-brand-php) 0%,
146
- var(--color-brand-swift) 12.56%, var(--color-brand-ruby) 25.06%,
147
- var(--color-brand-unity) 37.56%, var(--color-brand-terraform) 50.06%,
148
- var(--color-brand-c) 62.06%, var(--color-brand-go) 74.06%,
149
- var(--color-brand-java) 86.06%, var(--color-brand-python) 97.06%;
147
+ --gradient-brand-primary-colors:
148
+ var(--color-brand-php) 0%, var(--color-brand-swift) 12.56%,
149
+ var(--color-brand-ruby) 25.06%, var(--color-brand-unity) 37.56%,
150
+ var(--color-brand-terraform) 50.06%, var(--color-brand-c) 62.06%,
151
+ var(--color-brand-go) 74.06%, var(--color-brand-java) 86.06%,
152
+ var(--color-brand-python) 97.06%;
150
153
 
151
154
  --gradient-brand-primary: linear-gradient(
152
155
  90deg,
@@ -171,10 +174,15 @@
171
174
  --color-feedback-red-800: hsl(1, 63%, 24%);
172
175
  --color-feedback-red-900: hsl(0, 62%, 17%);
173
176
 
174
- --color-feedback-red-400-56: hsl(from var(--color-feedback-red-400) h s l / 56%);
175
- --color-feedback-red-500-56: hsl(from var(--color-feedback-red-500) h s l / 56%);
176
- --color-feedback-red-600-56: hsl(from var(--color-feedback-red-600) h s l / 56%);
177
-
177
+ --color-feedback-red-400-56: hsl(
178
+ from var(--color-feedback-red-400) h s l / 56%
179
+ );
180
+ --color-feedback-red-500-56: hsl(
181
+ from var(--color-feedback-red-500) h s l / 56%
182
+ );
183
+ --color-feedback-red-600-56: hsl(
184
+ from var(--color-feedback-red-600) h s l / 56%
185
+ );
178
186
 
179
187
  /* Orange */
180
188
  --color-feedback-orange-100: hsl(29, 100%, 95%);
@@ -187,8 +195,12 @@
187
195
  --color-feedback-orange-800: hsl(19, 66%, 33%);
188
196
  --color-feedback-orange-900: hsl(18, 69%, 24%);
189
197
 
190
- --color-feedback-orange-400-56: hsl(from var(--color-feedback-orange-400) h s l / 56%);
191
- --color-feedback-orange-500-56: hsl(from var(--color-feedback-orange-500) h s l / 56%);
198
+ --color-feedback-orange-400-56: hsl(
199
+ from var(--color-feedback-orange-400) h s l / 56%
200
+ );
201
+ --color-feedback-orange-500-56: hsl(
202
+ from var(--color-feedback-orange-500) h s l / 56%
203
+ );
192
204
 
193
205
  /* Green */
194
206
  --color-feedback-green-100: hsl(102, 35%, 93%);
@@ -201,8 +213,12 @@
201
213
  --color-feedback-green-800: hsl(104, 24%, 20%);
202
214
  --color-feedback-green-900: hsl(105, 24%, 13%);
203
215
 
204
- --color-feedback-green-400-56: hsl(from var(--color-feedback-green-400) h s l / 56%);
205
- --color-feedback-green-500-56: hsl(from var(--color-feedback-green-500) h s l / 56%);
216
+ --color-feedback-green-400-56: hsl(
217
+ from var(--color-feedback-green-400) h s l / 56%
218
+ );
219
+ --color-feedback-green-500-56: hsl(
220
+ from var(--color-feedback-green-500) h s l / 56%
221
+ );
206
222
 
207
223
  /* Blue */
208
224
  --color-feedback-blue-100: hsl(212, 100%, 95%);
@@ -215,12 +231,16 @@
215
231
  --color-feedback-blue-800: hsl(217, 73%, 23%);
216
232
  --color-feedback-blue-900: hsl(218, 73%, 15%);
217
233
 
218
- --color-feedback-blue-400-56: hsl(from var(--color-feedback-blue-400) h s l / 56%);
219
- --color-feedback-blue-500-56: hsl(from var(--color-feedback-blue-500) h s l / 56%);
234
+ --color-feedback-blue-400-56: hsl(
235
+ from var(--color-feedback-blue-400) h s l / 56%
236
+ );
237
+ --color-feedback-blue-500-56: hsl(
238
+ from var(--color-feedback-blue-500) h s l / 56%
239
+ );
220
240
 
221
241
  /* Violet */
222
242
  --color-feedback-violet-300: hsl(265, 77%, 65%);
223
- --color-feedback-violet-600: hsl(268, 75%, 31%);
243
+ --color-feedback-violet-600: hsl(268, 75%, 31%);
224
244
 
225
245
  --color-link-default: var(--color-brand-blue-600);
226
246
  --color-link-visited-primary: var(--color-feedback-violet-600);
@@ -280,7 +300,6 @@
280
300
  --text-default-warning: var(--color-feedback-orange-700);
281
301
  --text-link-warning: var(--color-feedback-orange-900);
282
302
 
283
-
284
303
  --text-body: var(--color-neutral-900);
285
304
  --text-body-muted: var(--color-neutral-400);
286
305
 
@@ -289,13 +308,11 @@
289
308
  --text-warning: var(--color-feedback-orange-700);
290
309
  --border-warning: var(--color-feedback-orange-300);
291
310
 
292
-
293
- /* Link utilities */
311
+ /* Link utilities */
294
312
  --underline-link-primary: var(--color-brand-blue-600);
295
313
  --underline-link-secondary: var(--color-base-black);
296
314
  --underline-link-visited: var(--color-feedback-violet-600);
297
315
 
298
-
299
316
  /* ============================================
300
317
  * BORDER TOKENS
301
318
  * ============================================ */
@@ -314,7 +331,6 @@
314
331
  0.2
315
332
  ); /* Black with 20% opacity for light mode */
316
333
 
317
-
318
334
  /* Border Destructive utilities */
319
335
  --border-destructive-highlight: var(--color-feedback-red-600);
320
336
  --border-destructive-default: var(--color-feedback-red-500);
@@ -342,160 +358,156 @@
342
358
  /* Border Focus utilities */
343
359
  --border-focus: var(--color-brand-blue-600);
344
360
 
345
-
346
361
  /* ============================================
347
362
  * FILLS
348
363
  * ============================================ */
349
364
 
350
- /* Neutrals */
351
- --fill-neutral-highlight: var(--color-base-black);
352
- --fill-neutral-active: var(--color-neutral-900);
353
- --fill-neutral-default: var(--color-neutral-800);
354
- --fill-neutral-muted: var(--color-neutral-800-56);
355
-
356
- /* Fixed dark fill */
357
- --fill-neutral-highlight-fixed-dark: var(--color-base-black);
358
- --fill-neutral-default-fixed-dark: var(--color-neutral-800);
359
- --fill-neutral-muted-fixed-dark: var(--color-neutral-900-56);
360
-
361
- /* Fixed light fill */
362
- --fill-neutral-highlight-fixed-light: var(--color-base-white);
363
- --fill-neutral-default-fixed-light: var(--color-neutral-100);
364
- --fill-neutral-muted-fixed-light: var(--color-neutral-100-56);
365
-
366
- /* Inverse fill */
367
- --fill-neutral-highlight-inverse: var(--color-base-white);
368
- --fill-neutral-default-inverse: var(--color-neutral-100);
369
- --fill-neutral-muted-inverse: var(--color-neutral-100-56);
370
-
371
- /* Links */
372
- --fill-link-primary: var(--color-brand-blue-600);
373
- --fill-link-secondary: var(--color-base-black);
374
- --fill-link-visited: var(--color-feedback-violet-600);
375
-
376
- /* Destructive */
377
- --fill-destructive-highlight: var(--color-feedback-red-600);
378
- --fill-destructive-default: var(--color-feedback-red-500);
379
- --fill-destructive-muted: var(--color-feedback-red-600-56);
380
-
381
- /* Information */
382
- --fill-information-highlight: var(--color-feedback-blue-600);
383
- --fill-information-default: var(--color-feedback-blue-500);
384
- --fill-information-muted: var(--color-feedback-blue-500-56);
385
-
386
- /* Success */
387
- --fill-success-highlight: var(--color-feedback-green-600);
388
- --fill-success-default: var(--color-feedback-green-500);
389
- --fill-success-muted: var(--color-feedback-green-500-56);
390
-
391
- /* Warning */
392
- --fill-warning-highlight: var(--color-feedback-orange-600);
393
- --fill-warning-default: var(--color-feedback-orange-500);
394
- --fill-warning-muted: var(--color-feedback-orange-500-56);
395
-
396
- /* ============================================
365
+ /* Neutrals */
366
+ --fill-neutral-highlight: var(--color-base-black);
367
+ --fill-neutral-active: var(--color-neutral-900);
368
+ --fill-neutral-default: var(--color-neutral-800);
369
+ --fill-neutral-muted: var(--color-neutral-800-56);
370
+
371
+ /* Fixed dark fill */
372
+ --fill-neutral-highlight-fixed-dark: var(--color-base-black);
373
+ --fill-neutral-default-fixed-dark: var(--color-neutral-800);
374
+ --fill-neutral-muted-fixed-dark: var(--color-neutral-900-56);
375
+
376
+ /* Fixed light fill */
377
+ --fill-neutral-highlight-fixed-light: var(--color-base-white);
378
+ --fill-neutral-default-fixed-light: var(--color-neutral-100);
379
+ --fill-neutral-muted-fixed-light: var(--color-neutral-100-56);
380
+
381
+ /* Inverse fill */
382
+ --fill-neutral-highlight-inverse: var(--color-base-white);
383
+ --fill-neutral-default-inverse: var(--color-neutral-100);
384
+ --fill-neutral-muted-inverse: var(--color-neutral-100-56);
385
+
386
+ /* Links */
387
+ --fill-link-primary: var(--color-brand-blue-600);
388
+ --fill-link-secondary: var(--color-base-black);
389
+ --fill-link-visited: var(--color-feedback-violet-600);
390
+
391
+ /* Destructive */
392
+ --fill-destructive-highlight: var(--color-feedback-red-600);
393
+ --fill-destructive-default: var(--color-feedback-red-500);
394
+ --fill-destructive-muted: var(--color-feedback-red-600-56);
395
+
396
+ /* Information */
397
+ --fill-information-highlight: var(--color-feedback-blue-600);
398
+ --fill-information-default: var(--color-feedback-blue-500);
399
+ --fill-information-muted: var(--color-feedback-blue-500-56);
400
+
401
+ /* Success */
402
+ --fill-success-highlight: var(--color-feedback-green-600);
403
+ --fill-success-default: var(--color-feedback-green-500);
404
+ --fill-success-muted: var(--color-feedback-green-500-56);
405
+
406
+ /* Warning */
407
+ --fill-warning-highlight: var(--color-feedback-orange-600);
408
+ --fill-warning-default: var(--color-feedback-orange-500);
409
+ --fill-warning-muted: var(--color-feedback-orange-500-56);
410
+
411
+ /* ============================================
397
412
  * Strokes
398
413
  * ============================================ */
399
414
 
400
- /* Neutrals */
401
- --stroke-neutral-highlight: var(--color-base-black);
402
- --stroke-neutral-active: var(--color-neutral-900);
403
- --stroke-neutral-default: var(--color-neutral-800);
404
- --stroke-neutral-muted: var(--color-neutral-800-56);
405
-
406
- /* Fixed dark stroke */
407
- --stroke-neutral-highlight-fixed-dark: var(--color-base-black);
408
- --stroke-neutral-default-fixed-dark: var(--color-neutral-800);
409
- --stroke-neutral-muted-fixed-dark: var(--color-neutral-900-56);
410
-
411
- /* Fixed light stroke */
412
- --stroke-neutral-highlight-fixed-light: var(--color-base-white);
413
- --stroke-neutral-default-fixed-light: var(--color-neutral-100);
414
- --stroke-neutral-muted-fixed-light: var(--color-neutral-100-56);
415
-
416
- /* Inverse stroke */
417
- --stroke-neutral-highlight-inverse: var(--color-base-white);
418
- --stroke-neutral-default-inverse: var(--color-neutral-100);
419
- --stroke-neutral-muted-inverse: var(--color-neutral-100-56);
420
-
421
- /* Links */
422
- --stroke-link-primary: var(--color-brand-blue-600);
423
- --stroke-link-secondary: var(--color-base-black);
424
- --stroke-link-visited: var(--color-feedback-violet-600);
425
-
426
- /* Destructive */
427
- --stroke-destructive-highlight: var(--color-feedback-red-600);
428
- --stroke-destructive-default: var(--color-feedback-red-500);
429
- --stroke-destructive-muted: var(--color-feedback-red-600-56);
430
-
431
- /* Information */
432
- --stroke-information-highlight: var(--color-feedback-blue-600);
433
- --stroke-information-default: var(--color-feedback-blue-500);
434
- --stroke-information-muted: var(--color-feedback-blue-500-56);
435
-
436
- /* Success */
437
- --stroke-success-highlight: var(--color-feedback-green-600);
438
- --stroke-success-default: var(--color-feedback-green-500);
439
- --stroke-success-muted: var(--color-feedback-green-500-56);
440
-
441
- /* Warning */
442
- --stroke-warning-highlight: var(--color-feedback-orange-600);
443
- --stroke-warning-default: var(--color-feedback-orange-500);
444
- --stroke-warning-muted: var(--color-feedback-orange-500-56);
415
+ /* Neutrals */
416
+ --stroke-neutral-highlight: var(--color-base-black);
417
+ --stroke-neutral-active: var(--color-neutral-900);
418
+ --stroke-neutral-default: var(--color-neutral-800);
419
+ --stroke-neutral-muted: var(--color-neutral-800-56);
420
+
421
+ /* Fixed dark stroke */
422
+ --stroke-neutral-highlight-fixed-dark: var(--color-base-black);
423
+ --stroke-neutral-default-fixed-dark: var(--color-neutral-800);
424
+ --stroke-neutral-muted-fixed-dark: var(--color-neutral-900-56);
425
+
426
+ /* Fixed light stroke */
427
+ --stroke-neutral-highlight-fixed-light: var(--color-base-white);
428
+ --stroke-neutral-default-fixed-light: var(--color-neutral-100);
429
+ --stroke-neutral-muted-fixed-light: var(--color-neutral-100-56);
430
+
431
+ /* Inverse stroke */
432
+ --stroke-neutral-highlight-inverse: var(--color-base-white);
433
+ --stroke-neutral-default-inverse: var(--color-neutral-100);
434
+ --stroke-neutral-muted-inverse: var(--color-neutral-100-56);
435
+
436
+ /* Links */
437
+ --stroke-link-primary: var(--color-brand-blue-600);
438
+ --stroke-link-secondary: var(--color-base-black);
439
+ --stroke-link-visited: var(--color-feedback-violet-600);
440
+
441
+ /* Destructive */
442
+ --stroke-destructive-highlight: var(--color-feedback-red-600);
443
+ --stroke-destructive-default: var(--color-feedback-red-500);
444
+ --stroke-destructive-muted: var(--color-feedback-red-600-56);
445
+
446
+ /* Information */
447
+ --stroke-information-highlight: var(--color-feedback-blue-600);
448
+ --stroke-information-default: var(--color-feedback-blue-500);
449
+ --stroke-information-muted: var(--color-feedback-blue-500-56);
450
+
451
+ /* Success */
452
+ --stroke-success-highlight: var(--color-feedback-green-600);
453
+ --stroke-success-default: var(--color-feedback-green-500);
454
+ --stroke-success-muted: var(--color-feedback-green-500-56);
455
+
456
+ /* Warning */
457
+ --stroke-warning-highlight: var(--color-feedback-orange-600);
458
+ --stroke-warning-default: var(--color-feedback-orange-500);
459
+ --stroke-warning-muted: var(--color-feedback-orange-500-56);
445
460
 
446
461
  /* ============================================
447
462
  * BACKGROUNDS
448
463
  * ============================================ */
449
- --bg-surface-primary-default: var(--color-base-white);
450
- --bg-surface-secondary-default: var(--color-neutral-100);
451
- --bg-surface-tertiary-default: var(--color-neutral-200);
452
- --bg-surface-primary-inverse: var(--color-base-black);
453
- --bg-surface-secondary-inverse: var(--color-neutral-900);
454
- --bg-surface-tertiary-inverse: var(--color-neutral-800);
455
-
456
- /* State */
457
- --bg-highlight: var(--color-neutral-300);
458
- --bg-active: var(--color-neutral-200);
459
- --bg-default: var(--color-neutral-100);
460
- --bg-muted: var(--color-neutral-100-56);
461
- --bg-inset: var(--color-base-white);
462
-
463
- /* Light background in dark mode */
464
- --bg-surface-primary-fixed-light: var(--color-base-white);
465
- --bg-surface-secondary-fixed-light: var(--color-neutral-100);
466
- --bg-surface-tertiary-fixed-light: var(--color-neutral-200);
467
-
468
- /* Dark background in light mode */
469
- --bg-surface-primary-fixed-dark: var(--color-base-black);
470
- --bg-surface-secondary-fixed-dark: var(--color-neutral-900);
471
- --bg-surface-tertiary-fixed-dark: var(--color-neutral-800);
472
-
473
- /* Destructive */
474
- --bg-destructive-highlight: var(--color-feedback-red-600);
475
- --bg-destructive-default: var(--color-feedback-red-500);
476
- --bg-destructive-muted: var(--color-feedback-red-500-56);
477
- --bg-destructive-softest: var(--color-feedback-red-100);
478
-
479
- /* Information */
480
- --bg-information-highlight: var(--color-feedback-blue-600);
481
- --bg-information-default: var(--color-feedback-blue-500);
482
- --bg-information-muted: var(--color-feedback-blue-500-56);
483
- --bg-information-softest: var(--color-feedback-blue-100);
484
-
485
- /* Success */
486
- --bg-success-highlight: var(--color-feedback-green-600);
487
- --bg-success-default: var(--color-feedback-green-500);
488
- --bg-success-muted: var(--color-feedback-green-500-56);
489
- --bg-success-softest: var(--color-feedback-green-100);
490
-
491
- /* Warning */
492
- --bg-warning-highlight: var(--color-feedback-orange-600);
493
- --bg-warning-default: var(--color-feedback-orange-500);
494
- --bg-warning-muted: var(--color-feedback-orange-500-56);
495
- --bg-warning-softest: var(--color-feedback-orange-100);
496
-
497
-
498
-
464
+ --bg-surface-primary-default: var(--color-base-white);
465
+ --bg-surface-secondary-default: var(--color-neutral-100);
466
+ --bg-surface-tertiary-default: var(--color-neutral-200);
467
+ --bg-surface-primary-inverse: var(--color-base-black);
468
+ --bg-surface-secondary-inverse: var(--color-neutral-900);
469
+ --bg-surface-tertiary-inverse: var(--color-neutral-800);
470
+
471
+ /* State */
472
+ --bg-highlight: var(--color-neutral-300);
473
+ --bg-active: var(--color-neutral-200);
474
+ --bg-default: var(--color-neutral-100);
475
+ --bg-muted: var(--color-neutral-100-56);
476
+ --bg-inset: var(--color-base-white);
477
+
478
+ /* Light background in dark mode */
479
+ --bg-surface-primary-fixed-light: var(--color-base-white);
480
+ --bg-surface-secondary-fixed-light: var(--color-neutral-100);
481
+ --bg-surface-tertiary-fixed-light: var(--color-neutral-200);
482
+
483
+ /* Dark background in light mode */
484
+ --bg-surface-primary-fixed-dark: var(--color-base-black);
485
+ --bg-surface-secondary-fixed-dark: var(--color-neutral-900);
486
+ --bg-surface-tertiary-fixed-dark: var(--color-neutral-800);
487
+
488
+ /* Destructive */
489
+ --bg-destructive-highlight: var(--color-feedback-red-600);
490
+ --bg-destructive-default: var(--color-feedback-red-500);
491
+ --bg-destructive-muted: var(--color-feedback-red-500-56);
492
+ --bg-destructive-softest: var(--color-feedback-red-100);
493
+
494
+ /* Information */
495
+ --bg-information-highlight: var(--color-feedback-blue-600);
496
+ --bg-information-default: var(--color-feedback-blue-500);
497
+ --bg-information-muted: var(--color-feedback-blue-500-56);
498
+ --bg-information-softest: var(--color-feedback-blue-100);
499
+
500
+ /* Success */
501
+ --bg-success-highlight: var(--color-feedback-green-600);
502
+ --bg-success-default: var(--color-feedback-green-500);
503
+ --bg-success-muted: var(--color-feedback-green-500-56);
504
+ --bg-success-softest: var(--color-feedback-green-100);
505
+
506
+ /* Warning */
507
+ --bg-warning-highlight: var(--color-feedback-orange-600);
508
+ --bg-warning-default: var(--color-feedback-orange-500);
509
+ --bg-warning-muted: var(--color-feedback-orange-500-56);
510
+ --bg-warning-softest: var(--color-feedback-orange-100);
499
511
 
500
512
  /* ============================================
501
513
  * 3. COMPONENT TOKENS
@@ -616,7 +628,7 @@
616
628
  }
617
629
 
618
630
  button:not(:disabled),
619
- [role='button']:not(:disabled) {
631
+ [role="button"]:not(:disabled) {
620
632
  cursor: pointer;
621
633
  }
622
634
 
@@ -684,7 +696,7 @@
684
696
  --text-warning: var(--color-feedback-orange-300);
685
697
  --border-warning: var(--color-feedback-orange-700);
686
698
 
687
- /* Link utilities (dark mode) */
699
+ /* Link utilities (dark mode) */
688
700
  --underline-link-primary: var(--color-brand-blue-300);
689
701
  --underline-link-secondary: var(--color-base-white);
690
702
  --underline-link-visited: var(--color-feedback-violet-300);
@@ -731,15 +743,14 @@
731
743
  --border-warning-muted: var(--color-feedback-orange-500-56);
732
744
  --border-warning-softest: var(--color-feedback-orange-700);
733
745
 
734
- /* Border Focus utilities */
746
+ /* Border Focus utilities */
735
747
  --border-focus: var(--color-brand-blue-300);
736
748
 
737
-
738
- /* ============================================
749
+ /* ============================================
739
750
  * FILLS
740
751
  * ============================================ */
741
752
 
742
- /* Neutrals */
753
+ /* Neutrals */
743
754
  --fill-neutral-highlight: var(--color-base-white);
744
755
  --fill-neutral-active: var(--color-neutral-100);
745
756
  --fill-neutral-default: var(--color-neutral-200);
@@ -747,43 +758,43 @@
747
758
 
748
759
  /* Fixed dark fill */
749
760
 
750
- /* Fixed light fill */
761
+ /* Fixed light fill */
751
762
 
752
- /* Inverse fill */
753
- --fill-neutral-highlight-inverse: var(--color-base-black);
754
- --fill-neutral-default-inverse: var(--color-neutral-900);
755
- --fill-neutral-muted-inverse: var(--color-neutral-900-56);
763
+ /* Inverse fill */
764
+ --fill-neutral-highlight-inverse: var(--color-base-black);
765
+ --fill-neutral-default-inverse: var(--color-neutral-900);
766
+ --fill-neutral-muted-inverse: var(--color-neutral-900-56);
756
767
 
757
- /* Links */
758
- --fill-link-primary: var(--color-brand-blue-300);
759
- --fill-link-secondary: var(--color-base-white);
760
- --fill-link-visited: var(--color-feedback-violet-300);
768
+ /* Links */
769
+ --fill-link-primary: var(--color-brand-blue-300);
770
+ --fill-link-secondary: var(--color-base-white);
771
+ --fill-link-visited: var(--color-feedback-violet-300);
761
772
 
762
- /* Destructive */
763
- --fill-destructive-highlight: var(--color-feedback-red-300);
764
- --fill-destructive-default: var(--color-feedback-red-400);
765
- --fill-destructive-muted: var(--color-feedback-red-400-56);
773
+ /* Destructive */
774
+ --fill-destructive-highlight: var(--color-feedback-red-300);
775
+ --fill-destructive-default: var(--color-feedback-red-400);
776
+ --fill-destructive-muted: var(--color-feedback-red-400-56);
766
777
 
767
- /* Information */
768
- --fill-information-highlight: var(--color-feedback-blue-300);
769
- --fill-information-default: var(--color-feedback-blue-400);
770
- --fill-information-muted: var(--color-feedback-blue-400-56);
778
+ /* Information */
779
+ --fill-information-highlight: var(--color-feedback-blue-300);
780
+ --fill-information-default: var(--color-feedback-blue-400);
781
+ --fill-information-muted: var(--color-feedback-blue-400-56);
771
782
 
772
- /* Success */
773
- --fill-success-highlight: var(--color-feedback-green-300);
774
- --fill-success-default: var(--color-feedback-green-400);
775
- --fill-success-muted: var(--color-feedback-green-400-56);
783
+ /* Success */
784
+ --fill-success-highlight: var(--color-feedback-green-300);
785
+ --fill-success-default: var(--color-feedback-green-400);
786
+ --fill-success-muted: var(--color-feedback-green-400-56);
776
787
 
777
- /* Warning */
778
- --fill-warning-highlight: var(--color-feedback-orange-300);
779
- --fill-warning-default: var(--color-feedback-orange-400);
780
- --fill-warning-muted: var(--color-feedback-orange-400-56);
788
+ /* Warning */
789
+ --fill-warning-highlight: var(--color-feedback-orange-300);
790
+ --fill-warning-default: var(--color-feedback-orange-400);
791
+ --fill-warning-muted: var(--color-feedback-orange-400-56);
781
792
 
782
- /* ============================================
793
+ /* ============================================
783
794
  * Strokes
784
795
  * ============================================ */
785
796
 
786
- /* Neutrals */
797
+ /* Neutrals */
787
798
  --stroke-neutral-highlight: var(--color-base-white);
788
799
  --stroke-neutral-active: var(--color-neutral-100);
789
800
  --stroke-neutral-default: var(--color-neutral-200);
@@ -791,83 +802,82 @@
791
802
 
792
803
  /* Fixed dark stroke*/
793
804
 
794
- /* Fixed light stroke */
805
+ /* Fixed light stroke */
795
806
 
796
- /* Inverse stroke */
797
- --stroke-neutral-highlight-inverse: var(--color-base-black);
798
- --stroke-neutral-default-inverse: var(--color-neutral-900);
799
- --stroke-neutral-muted-inverse: var(--color-neutral-900-56);
807
+ /* Inverse stroke */
808
+ --stroke-neutral-highlight-inverse: var(--color-base-black);
809
+ --stroke-neutral-default-inverse: var(--color-neutral-900);
810
+ --stroke-neutral-muted-inverse: var(--color-neutral-900-56);
800
811
 
801
- /* Links */
802
- --stroke-link-primary: var(--color-brand-blue-300);
803
- --stroke-link-secondary: var(--color-base-white);
804
- --stroke-link-visited: var(--color-feedback-violet-300);
812
+ /* Links */
813
+ --stroke-link-primary: var(--color-brand-blue-300);
814
+ --stroke-link-secondary: var(--color-base-white);
815
+ --stroke-link-visited: var(--color-feedback-violet-300);
805
816
 
806
- /* Destructive */
807
- --stroke-destructive-highlight: var(--color-feedback-red-300);
808
- --stroke-destructive-default: var(--color-feedback-red-400);
809
- --stroke-destructive-muted: var(--color-feedback-red-400-56);
817
+ /* Destructive */
818
+ --stroke-destructive-highlight: var(--color-feedback-red-300);
819
+ --stroke-destructive-default: var(--color-feedback-red-400);
820
+ --stroke-destructive-muted: var(--color-feedback-red-400-56);
810
821
 
811
- /* Information */
812
- --stroke-information-highlight: var(--color-feedback-blue-300);
813
- --stroke-information-default: var(--color-feedback-blue-400);
814
- --stroke-information-muted: var(--color-feedback-blue-400-56);
822
+ /* Information */
823
+ --stroke-information-highlight: var(--color-feedback-blue-300);
824
+ --stroke-information-default: var(--color-feedback-blue-400);
825
+ --stroke-information-muted: var(--color-feedback-blue-400-56);
815
826
 
816
- /* Success */
817
- --stroke-success-highlight: var(--color-feedback-green-300);
818
- --stroke-success-default: var(--color-feedback-green-400);
819
- --stroke-success-muted: var(--color-feedback-green-400-56);
827
+ /* Success */
828
+ --stroke-success-highlight: var(--color-feedback-green-300);
829
+ --stroke-success-default: var(--color-feedback-green-400);
830
+ --stroke-success-muted: var(--color-feedback-green-400-56);
820
831
 
821
- /* Warning */
822
- --stroke-warning-highlight: var(--color-feedback-orange-300);
823
- --stroke-warning-default: var(--color-feedback-orange-400);
824
- --stroke-warning-muted: var(--color-feedback-orange-400-56);
832
+ /* Warning */
833
+ --stroke-warning-highlight: var(--color-feedback-orange-300);
834
+ --stroke-warning-default: var(--color-feedback-orange-400);
835
+ --stroke-warning-muted: var(--color-feedback-orange-400-56);
825
836
 
826
- /* ============================================
837
+ /* ============================================
827
838
  * BACKGROUNDS
828
839
  * ============================================ */
829
- --bg-surface-primary-default: var(--color-base-black);
830
- --bg-surface-secondary-default: var(--color-neutral-900);
831
- --bg-surface-tertiary-default: var(--color-neutral-800);
832
- --bg-surface-primary-inverse: var(--color-base-white);
833
- --bg-surface-secondary-inverse: var(--color-neutral-100);
834
- --bg-surface-tertiary-inverse: var(--color-neutral-200);
835
-
836
- /* State */
837
- --bg-highlight: var(--color-neutral-700);
838
- --bg-active: var(--color-neutral-800);
839
- --bg-default: var(--color-neutral-900);
840
- --bg-muted: var(--color-neutral-900-56);
841
- --bg-inset: var(--color-base-black);
842
-
843
- /* Light background in dark mode */
844
-
845
- /* Dark background in light mode */
846
-
847
- /* Destructive */
848
- --bg-destructive-highlight: var(--color-feedback-red-400);
849
- --bg-destructive-default: var(--color-feedback-red-500);
850
- --bg-destructive-muted: var(--color-feedback-red-500-56);
851
- --bg-destructive-softest: var(--color-feedback-red-900);
852
-
853
- /* Information */
854
- --bg-information-highlight: var(--color-feedback-blue-400);
855
- --bg-information-default: var(--color-feedback-blue-500);
856
- --bg-information-muted: var(--color-feedback-blue-500-56);
857
- --bg-information-softest: var(--color-feedback-blue-900);
858
-
859
- /* Success */
860
- --bg-success-highlight: var(--color-feedback-green-400);
861
- --bg-success-default: var(--color-feedback-green-500);
862
- --bg-success-muted: var(--color-feedback-green-500-56);
863
- --bg-success-softest: var(--color-feedback-green-900);
864
-
865
- /* Warning */
866
- --bg-warning-highlight: var(--color-feedback-orange-400);
867
- --bg-warning-default: var(--color-feedback-orange-500);
868
- --bg-warning-muted: var(--color-feedback-orange-500-56);
869
- --bg-warning-softest: var(--color-feedback-orange-900);
870
-
840
+ --bg-surface-primary-default: var(--color-base-black);
841
+ --bg-surface-secondary-default: var(--color-neutral-900);
842
+ --bg-surface-tertiary-default: var(--color-neutral-800);
843
+ --bg-surface-primary-inverse: var(--color-base-white);
844
+ --bg-surface-secondary-inverse: var(--color-neutral-100);
845
+ --bg-surface-tertiary-inverse: var(--color-neutral-200);
846
+
847
+ /* State */
848
+ --bg-highlight: var(--color-neutral-700);
849
+ --bg-active: var(--color-neutral-800);
850
+ --bg-default: var(--color-neutral-900);
851
+ --bg-muted: var(--color-neutral-900-56);
852
+ --bg-inset: var(--color-base-black);
853
+
854
+ /* Light background in dark mode */
855
+
856
+ /* Dark background in light mode */
857
+
858
+ /* Destructive */
859
+ --bg-destructive-highlight: var(--color-feedback-red-400);
860
+ --bg-destructive-default: var(--color-feedback-red-500);
861
+ --bg-destructive-muted: var(--color-feedback-red-500-56);
862
+ --bg-destructive-softest: var(--color-feedback-red-900);
863
+
864
+ /* Information */
865
+ --bg-information-highlight: var(--color-feedback-blue-400);
866
+ --bg-information-default: var(--color-feedback-blue-500);
867
+ --bg-information-muted: var(--color-feedback-blue-500-56);
868
+ --bg-information-softest: var(--color-feedback-blue-900);
869
+
870
+ /* Success */
871
+ --bg-success-highlight: var(--color-feedback-green-400);
872
+ --bg-success-default: var(--color-feedback-green-500);
873
+ --bg-success-muted: var(--color-feedback-green-500-56);
874
+ --bg-success-softest: var(--color-feedback-green-900);
875
+
876
+ /* Warning */
877
+ --bg-warning-highlight: var(--color-feedback-orange-400);
878
+ --bg-warning-default: var(--color-feedback-orange-500);
879
+ --bg-warning-muted: var(--color-feedback-orange-500-56);
880
+ --bg-warning-softest: var(--color-feedback-orange-900);
871
881
 
872
882
  /* ============================================
873
883
  * 3. COMPONENT TOKENS (Dark Mode)