@texturehq/edges 1.33.2 → 1.34.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 (52) hide show
  1. package/README.md +57 -3
  2. package/dist/{RichTextEditor-CxrunTg7.d.cts → RichTextEditor-diZqy_s1.d.cts} +1 -1
  3. package/dist/{RichTextEditor-CxrunTg7.d.ts → RichTextEditor-diZqy_s1.d.ts} +1 -1
  4. package/dist/{TimeField-DRQshIHX.d.ts → TimeField-7pTUPh11.d.ts} +32 -17
  5. package/dist/{TimeField-WCmeiLu3.d.cts → TimeField-CqmVrAdn.d.cts} +32 -17
  6. package/dist/{colors-Cgs2MGZ8.d.ts → colors-CoULWZ5j.d.ts} +53 -18
  7. package/dist/{colors-DGRiGzgj.d.cts → colors-upTGgIQe.d.cts} +53 -18
  8. package/dist/form/index.cjs +1 -1
  9. package/dist/form/index.cjs.map +1 -1
  10. package/dist/form/index.d.cts +1 -1
  11. package/dist/form/index.d.ts +1 -1
  12. package/dist/form/index.js +1 -1
  13. package/dist/form/index.js.map +1 -1
  14. package/dist/{index-BqpWEc_N.d.ts → index-dofSwYId.d.cts} +5 -5
  15. package/dist/{index-BqpWEc_N.d.cts → index-dofSwYId.d.ts} +5 -5
  16. package/dist/index.cjs +10 -10
  17. package/dist/index.cjs.map +1 -1
  18. package/dist/index.d.cts +161 -41
  19. package/dist/index.d.ts +161 -41
  20. package/dist/index.js +10 -10
  21. package/dist/index.js.map +1 -1
  22. package/dist/prose.css +202 -0
  23. package/dist/rhf/index.cjs +1 -1
  24. package/dist/rhf/index.cjs.map +1 -1
  25. package/dist/rhf/index.d.cts +2 -2
  26. package/dist/rhf/index.d.ts +2 -2
  27. package/dist/rhf/index.js +1 -1
  28. package/dist/rhf/index.js.map +1 -1
  29. package/dist/server.cjs +2 -2
  30. package/dist/server.cjs.map +1 -1
  31. package/dist/server.d.cts +2 -2
  32. package/dist/server.d.ts +2 -2
  33. package/dist/server.js +2 -2
  34. package/dist/server.js.map +1 -1
  35. package/dist/styles/computed.css +2 -2
  36. package/dist/styles/responsive-typography.css +9 -7
  37. package/dist/styles/theme-light-override.css +26 -15
  38. package/dist/styles.css +953 -877
  39. package/dist/theme.css +20 -7
  40. package/dist/typography.css +150 -0
  41. package/package.json +10 -12
  42. package/scripts/check-legacy-action-variants.mjs +96 -0
  43. package/scripts/check-legacy-font-colors.mjs +92 -0
  44. package/scripts/copy-assets.js +12 -0
  45. package/templates/claude-rules/.claude +5 -5
  46. package/templates/claude-rules/claude.md +5 -5
  47. package/templates/codex-rules/codex.md +5 -5
  48. package/dist/generated/tailwind-tokens-dark.css +0 -397
  49. package/dist/generated/tailwind-tokens-light.css +0 -611
  50. package/dist/generated/viz-runtime.css +0 -243
  51. package/scripts/generate-viz-runtime.js +0 -107
  52. package/scripts/validate-tokens.js +0 -176
package/dist/styles.css CHANGED
@@ -4,6 +4,7 @@
4
4
  --color-white: #ffffff;
5
5
  --color-black: #000000;
6
6
  --color-linen: #faf7f0;
7
+ --color-paper-border: #e5dfd3;
7
8
  --color-graphite: #2c2a26;
8
9
  --color-ink: #111111;
9
10
  --color-gray-50: #fafafa;
@@ -17,6 +18,20 @@
17
18
  --color-gray-800: #302f2d;
18
19
  --color-gray-900: #222120;
19
20
  --color-gray-950: #161615;
21
+ --color-honey-pastel: #fcebd4;
22
+ --color-honey-base: #f0972a;
23
+ --color-canary-pastel: #fffccc;
24
+ --color-canary-base: #ffff0c;
25
+ --color-moss-pastel: #eef6d8;
26
+ --color-moss-base: #8fbf2c;
27
+ --color-ocean-pastel: #dcf1f4;
28
+ --color-ocean-base: #2fa3b0;
29
+ --color-iris-pastel: #e3e6f5;
30
+ --color-iris-base: #3945a8;
31
+ --color-plum-pastel: #f0e3f7;
32
+ --color-plum-base: #8b39b8;
33
+ --color-rose-pastel: #fbe3ec;
34
+ --color-rose-base: #d93d72;
20
35
  --color-error-light: #fdecec;
21
36
  --color-error-base: #c42d2d;
22
37
  --color-error-dark: #7a1212;
@@ -40,22 +55,12 @@
40
55
  --color-viz-categorical-4: #5d89ff;
41
56
  --color-viz-categorical-5: #9a47e2;
42
57
  --color-viz-categorical-6: #f24cb8;
43
- --motion-duration-instant: 0ms;
44
- --motion-duration-fast: 150ms;
45
- --motion-duration-normal: 250ms;
46
- --motion-duration-slow: 350ms;
47
- --motion-duration-slower: 500ms;
48
- --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
49
- --motion-easing-emphasized: cubic-bezier(0, 0, 0.2, 1);
50
- --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
51
- --motion-easing-deaccelerate: cubic-bezier(0, 0, 0.2, 1);
52
- --motion-distance-xs: 4px;
53
- --motion-distance-sm: 8px;
54
- --motion-distance-md: 16px;
55
- --motion-opacity-hover: 0.9;
56
- --motion-opacity-disabled: 0.5;
57
- --motion-scale-hover: 1.02;
58
- --motion-scale-press: 0.97;
58
+ --color-viz-categorical-7: #0ba286;
59
+ --color-viz-categorical-8: #9c28af;
60
+ --color-viz-categorical-9: #036e45;
61
+ --color-viz-categorical-10: #52a119;
62
+ --color-viz-categorical-11: #ff513d;
63
+ --color-viz-categorical-12: #046691;
59
64
  --spacing-0: 0;
60
65
  --spacing-1: 0.25rem;
61
66
  --spacing-2: 0.5rem;
@@ -88,79 +93,87 @@
88
93
  --radius-lg: 0.5rem;
89
94
  --radius-xl: 0.75rem;
90
95
  --radius-full: 9999px;
91
- --font-family-sans: Inter, system-ui, sans-serif;
92
- --font-family-brand: 'TT Firs Neue', 'Helvetica Neue', Arial, system-ui, sans-serif;
93
- --font-family-mono: 'Fira Code', monospace;
94
- --font-size-xs: 0.75rem;
96
+ --font-family-sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
97
+ --font-family-brand: 'Rethink Sans', -apple-system, BlinkMacSystemFont, sans-serif;
98
+ --font-family-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace;
99
+ --font-family-agent: 'Source Serif 4', Charter, Georgia, serif;
95
100
  --font-size-sm: 0.875rem;
96
101
  --font-size-base: 1rem;
97
102
  --font-size-lg: 1.125rem;
98
103
  --font-size-xl: 1.25rem;
99
104
  --font-size-2xl: 1.5rem;
100
- --font-size-3xl: 1.875rem;
101
105
  --font-size-4xl: 2.25rem;
102
- --font-size-5xl: 3rem;
103
- --font-size-7xl: 4.5rem;
104
- --font-size-8xl: 6rem;
105
- --font-size-9xl: 8rem;
106
106
  --font-weight-light: 300;
107
107
  --font-weight-normal: 400;
108
108
  --font-weight-medium: 500;
109
109
  --font-weight-semibold: 600;
110
110
  --font-weight-bold: 700;
111
- --font-lineheight-tight: 1.25;
112
111
  --font-lineheight-normal: 1.5;
113
112
  --font-letterspacing-normal: 0;
114
- --font-letterspacing-widest: 0.1em;
115
- --text-display-xl-size: 6rem;
113
+ --text-display-xl-size: clamp(3rem, 4vw + 1rem, 4.5rem);
116
114
  --text-display-xl-line-height: 1;
117
- --text-display-xl-weight: 500;
118
- --text-display-lg-size: 4.5rem;
119
- --text-display-lg-line-height: 1;
120
- --text-display-lg-weight: 500;
121
- --text-display-md-size: 3rem;
122
- --text-display-md-line-height: 1.05;
123
- --text-display-md-weight: 500;
115
+ --text-display-xl-letter-spacing: -0.035em;
116
+ --text-display-xl-weight: 400;
117
+ --text-display-lg-size: clamp(2.25rem, 3vw + 1rem, 3.25rem);
118
+ --text-display-lg-line-height: 1.05;
119
+ --text-display-lg-letter-spacing: -0.03em;
120
+ --text-display-lg-weight: 400;
121
+ --text-display-md-size: 2.25rem;
122
+ --text-display-md-line-height: 1.1;
123
+ --text-display-md-letter-spacing: -0.025em;
124
+ --text-display-md-weight: 400;
125
+ --text-display-sm-size: 1.0625rem;
126
+ --text-display-sm-line-height: 1.35;
127
+ --text-display-sm-letter-spacing: -0.005em;
128
+ --text-display-sm-weight: 400;
124
129
  --text-heading-xl-size: 2.25rem;
125
- --text-heading-xl-line-height: 1.1;
126
- --text-heading-xl-weight: 500;
127
- --text-heading-lg-size: 1.875rem;
128
- --text-heading-lg-line-height: 1.15;
129
- --text-heading-lg-weight: 500;
130
- --text-heading-md-size: 1.5rem;
131
- --text-heading-md-line-height: 1.2;
130
+ --text-heading-xl-line-height: 1.15;
131
+ --text-heading-xl-letter-spacing: -0.02em;
132
+ --text-heading-xl-weight: 600;
133
+ --text-heading-lg-size: 1.5rem;
134
+ --text-heading-lg-line-height: 1.2;
135
+ --text-heading-lg-letter-spacing: -0.015em;
136
+ --text-heading-lg-weight: 600;
137
+ --text-heading-md-size: 1.25rem;
138
+ --text-heading-md-line-height: 1.3;
139
+ --text-heading-md-letter-spacing: -0.01em;
132
140
  --text-heading-md-weight: 600;
133
- --text-heading-sm-size: 1.25rem;
134
- --text-heading-sm-line-height: 1.25;
141
+ --text-heading-sm-size: 1.0625rem;
142
+ --text-heading-sm-line-height: 1.35;
143
+ --text-heading-sm-letter-spacing: -0.005em;
135
144
  --text-heading-sm-weight: 600;
136
145
  --text-body-lg-size: 1.125rem;
137
146
  --text-body-lg-line-height: 1.55;
147
+ --text-body-lg-letter-spacing: 0;
138
148
  --text-body-lg-weight: 400;
139
149
  --text-body-md-size: 1rem;
140
- --text-body-md-line-height: 1.5;
150
+ --text-body-md-line-height: 1.55;
141
151
  --text-body-md-letter-spacing: 0;
142
152
  --text-body-md-weight: 400;
143
153
  --text-body-sm-size: 0.875rem;
144
154
  --text-body-sm-line-height: 1.55;
155
+ --text-body-sm-letter-spacing: 0;
145
156
  --text-body-sm-weight: 400;
146
157
  --text-label-lg-size: 1rem;
147
158
  --text-label-lg-line-height: 1.4;
159
+ --text-label-lg-letter-spacing: 0;
148
160
  --text-label-lg-weight: 500;
149
161
  --text-label-md-size: 0.875rem;
150
162
  --text-label-md-line-height: 1.4;
163
+ --text-label-md-letter-spacing: 0;
151
164
  --text-label-md-weight: 500;
152
165
  --text-label-sm-size: 0.8125rem;
153
- --text-label-sm-line-height: 1.4;
166
+ --text-label-sm-line-height: 1.35;
167
+ --text-label-sm-letter-spacing: 0;
154
168
  --text-label-sm-weight: 500;
155
- --text-caption-size: 0.8125rem;
156
- --text-caption-line-height: 1.4;
157
- --text-caption-weight: 400;
158
169
  --text-code-size: 0.875rem;
159
170
  --text-code-line-height: 1.5;
171
+ --text-code-letter-spacing: 0;
160
172
  --text-code-weight: 400;
161
- --text-eyebrow-size: 0.6875rem;
162
- --text-eyebrow-line-height: 1.4;
163
- --text-eyebrow-weight: 600;
173
+ --text-agent-size: 1.125rem;
174
+ --text-agent-line-height: 1.6;
175
+ --text-agent-letter-spacing: 0;
176
+ --text-agent-weight: 400;
164
177
  --color-background-body: #ffffff;
165
178
  --color-background-surface: #ffffff;
166
179
  --color-background-muted: #f5f5f4;
@@ -170,26 +183,40 @@
170
183
  --color-background-modal: rgba(0, 0, 0, 0.15);
171
184
  --color-background-canvas: linear-gradient(to bottom right, rgb(239 246 255), rgb(250 245 255), rgb(253 242 248));
172
185
  --color-background-ai: linear-gradient(to bottom right, rgb(245 243 255 / 0.5), rgb(255 255 255), rgb(240 249 255 / 0.5));
186
+ --color-text-primary: #2c2a26;
187
+ --color-text-secondary: #525250;
188
+ --color-text-inverse: #ffffff;
189
+ --color-text-disabled: #a09d98;
173
190
  --color-text-body: #2c2a26;
174
- --color-text-heading: #111111;
175
- --color-text-muted: #5d5b56;
176
- --color-text-caption: #7c7974;
177
- --color-text-subtle: #7c7974;
178
- --color-text-placeholder: #a09d98;
179
- --color-text-disabled: #d4d3d0;
180
- --color-text-link-default: #111111;
191
+ --color-text-heading: #2c2a26;
192
+ --color-text-label: #2c2a26;
193
+ --color-text-muted: #525250;
194
+ --color-text-caption: #525250;
195
+ --color-text-subtle: #525250;
196
+ --color-text-placeholder: #525250;
197
+ --color-text-link-default: #2c2a26;
181
198
  --color-text-link-hover: #2c2a26;
182
199
  --color-text-onPrimary: #ffffff;
200
+ --color-text-onBrand: #ffffff;
183
201
  --color-border-default: #e7e6e5;
184
202
  --color-border-focus: #111111;
185
203
  --color-border-muted: #f5f5f4;
186
204
  --color-border-input: #d4d3d0;
205
+ --color-action-primary: #111111;
206
+ --color-action-primary-hover: #2c2a26;
207
+ --color-action-primary-text: #ffffff;
208
+ --color-action-secondary: rgba(0, 0, 0, 0);
209
+ --color-action-secondary-hover: #fafafa;
210
+ --color-action-secondary-text: #2c2a26;
187
211
  --color-action-brand: #111111;
188
212
  --color-action-brand-hover: #2c2a26;
189
213
  --color-action-brand-text: #ffffff;
190
214
  --color-action-default: #111111;
191
215
  --color-action-default-hover: #2c2a26;
192
216
  --color-action-default-text: #ffffff;
217
+ --color-action-destructive: #c42d2d;
218
+ --color-action-destructive-hover: #7a1212;
219
+ --color-action-destructive-text: #ffffff;
193
220
  --color-feedback-success-text: #15452a;
194
221
  --color-feedback-success-background: #e4f3e9;
195
222
  --color-feedback-success-border: #278a4a;
@@ -257,12 +284,10 @@
257
284
  --color-state-exporting-text: #92400e;
258
285
  --color-brand-primary: var(--color-ink);
259
286
  --color-brand-dark: var(--color-ink);
260
- --color-brand-light: var(--color-linen);
261
- --color-brand-background: var(--color-linen);
262
287
  --color-neutral-black: var(--color-black);
263
288
  --action-brand-background: var(--color-ink);
264
289
  --action-brand-hover: var(--color-graphite);
265
- --feedback-success-text: var(--color-success-dark);
290
+ --theme-text-label: var(--color-text-primary);
266
291
  --control-sm: 0.75rem;
267
292
  --control-md: 0.875rem;
268
293
  --control-lg: 1rem;
@@ -296,78 +321,32 @@
296
321
  --color-red-50: oklch(97.1% 0.013 17.38);
297
322
  --color-red-100: oklch(93.6% 0.032 17.717);
298
323
  --color-red-200: oklch(88.5% 0.062 18.334);
299
- --color-red-300: oklch(80.8% 0.114 19.571);
300
- --color-red-400: oklch(70.4% 0.191 22.216);
301
324
  --color-red-500: oklch(63.7% 0.237 25.331);
302
- --color-red-600: oklch(57.7% 0.245 27.325);
303
- --color-red-700: oklch(50.5% 0.213 27.518);
304
325
  --color-red-800: oklch(44.4% 0.177 26.899);
305
326
  --color-red-900: oklch(39.6% 0.141 25.723);
306
327
  --color-red-950: oklch(25.8% 0.092 26.042);
307
- --color-orange-50: oklch(98% 0.016 73.684);
308
- --color-orange-100: oklch(95.4% 0.038 75.164);
309
- --color-orange-200: oklch(90.1% 0.076 70.697);
310
- --color-orange-500: oklch(70.5% 0.213 47.604);
311
- --color-orange-600: oklch(64.6% 0.222 41.116);
312
- --color-orange-800: oklch(47% 0.157 37.304);
313
328
  --color-amber-50: oklch(98.7% 0.022 95.277);
314
329
  --color-amber-100: oklch(96.2% 0.059 95.617);
315
330
  --color-amber-200: oklch(92.4% 0.12 95.746);
316
331
  --color-amber-800: oklch(47.3% 0.137 46.201);
317
332
  --color-amber-900: oklch(41.4% 0.112 45.904);
318
333
  --color-amber-950: oklch(27.9% 0.077 45.635);
319
- --color-yellow-50: oklch(98.7% 0.026 102.212);
320
- --color-yellow-100: oklch(97.3% 0.071 103.193);
321
- --color-yellow-200: oklch(94.5% 0.129 101.54);
322
- --color-yellow-300: oklch(90.5% 0.182 98.111);
323
- --color-yellow-400: oklch(85.2% 0.199 91.936);
324
- --color-yellow-500: oklch(79.5% 0.184 86.047);
325
- --color-yellow-600: oklch(68.1% 0.162 75.834);
326
- --color-yellow-700: oklch(55.4% 0.135 66.442);
327
- --color-yellow-800: oklch(47.6% 0.114 61.907);
328
- --color-yellow-900: oklch(42.1% 0.095 57.708);
329
- --color-yellow-950: oklch(28.6% 0.066 53.813);
330
334
  --color-green-50: oklch(98.2% 0.018 155.826);
331
335
  --color-green-100: oklch(96.2% 0.044 156.743);
332
- --color-green-200: oklch(92.5% 0.084 155.995);
333
- --color-green-300: oklch(87.1% 0.15 154.449);
334
336
  --color-green-400: oklch(79.2% 0.209 151.711);
335
337
  --color-green-500: oklch(72.3% 0.219 149.579);
336
338
  --color-green-600: oklch(62.7% 0.194 149.214);
337
- --color-green-700: oklch(52.7% 0.154 150.069);
338
- --color-green-800: oklch(44.8% 0.119 151.328);
339
339
  --color-green-900: oklch(39.3% 0.095 152.535);
340
- --color-green-950: oklch(26.6% 0.065 152.934);
341
- --color-teal-500: oklch(70.4% 0.14 182.503);
342
340
  --color-blue-50: oklch(97% 0.014 254.604);
343
341
  --color-blue-100: oklch(93.2% 0.032 255.585);
344
342
  --color-blue-200: oklch(88.2% 0.059 254.128);
345
- --color-blue-300: oklch(80.9% 0.105 251.813);
346
- --color-blue-400: oklch(70.7% 0.165 254.624);
347
343
  --color-blue-500: oklch(62.3% 0.214 259.815);
348
- --color-blue-600: oklch(54.6% 0.245 262.881);
349
- --color-blue-700: oklch(48.8% 0.243 264.376);
350
344
  --color-blue-800: oklch(42.4% 0.199 265.638);
351
345
  --color-blue-900: oklch(37.9% 0.146 265.522);
352
346
  --color-blue-950: oklch(28.2% 0.091 267.935);
353
- --color-purple-50: oklch(97.7% 0.014 308.299);
354
- --color-purple-100: oklch(94.6% 0.033 307.174);
355
347
  --color-purple-500: oklch(62.7% 0.265 303.9);
356
348
  --color-purple-600: oklch(55.8% 0.288 302.321);
357
- --color-purple-800: oklch(43.8% 0.218 303.724);
358
349
  --color-pink-500: oklch(65.6% 0.241 354.308);
359
- --color-pink-600: oklch(59.2% 0.249 0.584);
360
- --color-slate-300: oklch(86.9% 0.022 252.894);
361
- --color-slate-600: oklch(44.6% 0.043 257.281);
362
- --color-slate-700: oklch(37.2% 0.044 257.287);
363
- --color-slate-800: oklch(27.9% 0.041 260.031);
364
- --color-zinc-100: oklch(96.7% 0.001 286.375);
365
- --color-zinc-200: oklch(92% 0.004 286.32);
366
- --color-zinc-300: oklch(87.1% 0.006 286.286);
367
- --color-zinc-400: oklch(70.5% 0.015 286.067);
368
- --color-zinc-600: oklch(44.2% 0.017 285.786);
369
- --color-zinc-700: oklch(37% 0.013 285.805);
370
- --color-zinc-900: oklch(21% 0.006 285.885);
371
350
  --spacing: 0.25rem;
372
351
  --breakpoint-lg: 64rem;
373
352
  --container-xs: 20rem;
@@ -431,6 +410,7 @@
431
410
  --color-white: #ffffff;
432
411
  --color-black: #000000;
433
412
  --color-linen: #faf7f0;
413
+ --color-paper-border: #e5dfd3;
434
414
  --color-graphite: #2c2a26;
435
415
  --color-ink: #111111;
436
416
  --color-gray-50: #fafafa;
@@ -531,10 +511,10 @@
531
511
  --radius-3xl: 1.5rem;
532
512
  --radius-4xl: 2rem;
533
513
  --radius-full: 9999px;
534
- --font-family-sans: Inter, system-ui, sans-serif;
535
- --font-family-brand: 'TT Firs Neue', 'Helvetica Neue', Arial, system-ui, sans-serif;
536
- --font-family-serif: Merriweather, serif;
537
- --font-family-mono: 'Fira Code', monospace;
514
+ --font-family-sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
515
+ --font-family-brand: 'Rethink Sans', -apple-system, BlinkMacSystemFont, sans-serif;
516
+ --font-family-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace;
517
+ --font-family-agent: 'Source Serif 4', Charter, Georgia, serif;
538
518
  --font-size-xs: 0.75rem;
539
519
  --font-size-sm: 0.875rem;
540
520
  --font-size-base: 1rem;
@@ -579,40 +559,44 @@
579
559
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
580
560
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.08);
581
561
  --shadow-overflow: 0 4px 12px rgba(0, 0, 0, 0.10);
582
- --text-display-xl-size: 6rem;
562
+ --text-display-xl-size: clamp(3rem, 4vw + 1rem, 4.5rem);
583
563
  --text-display-xl-line-height: 1;
584
- --text-display-xl-letter-spacing: 0;
585
- --text-display-xl-weight: 500;
586
- --text-display-lg-size: 4.5rem;
587
- --text-display-lg-line-height: 1;
588
- --text-display-lg-letter-spacing: 0;
589
- --text-display-lg-weight: 500;
590
- --text-display-md-size: 3rem;
591
- --text-display-md-line-height: 1.05;
592
- --text-display-md-letter-spacing: 0;
593
- --text-display-md-weight: 500;
564
+ --text-display-xl-letter-spacing: -0.035em;
565
+ --text-display-xl-weight: 400;
566
+ --text-display-lg-size: clamp(2.25rem, 3vw + 1rem, 3.25rem);
567
+ --text-display-lg-line-height: 1.05;
568
+ --text-display-lg-letter-spacing: -0.03em;
569
+ --text-display-lg-weight: 400;
570
+ --text-display-md-size: 2.25rem;
571
+ --text-display-md-line-height: 1.1;
572
+ --text-display-md-letter-spacing: -0.025em;
573
+ --text-display-md-weight: 400;
574
+ --text-display-sm-size: 1.0625rem;
575
+ --text-display-sm-line-height: 1.35;
576
+ --text-display-sm-letter-spacing: -0.005em;
577
+ --text-display-sm-weight: 400;
594
578
  --text-heading-xl-size: 2.25rem;
595
- --text-heading-xl-line-height: 1.1;
596
- --text-heading-xl-letter-spacing: 0;
597
- --text-heading-xl-weight: 500;
598
- --text-heading-lg-size: 1.875rem;
599
- --text-heading-lg-line-height: 1.15;
600
- --text-heading-lg-letter-spacing: 0;
601
- --text-heading-lg-weight: 500;
602
- --text-heading-md-size: 1.5rem;
603
- --text-heading-md-line-height: 1.2;
604
- --text-heading-md-letter-spacing: 0;
579
+ --text-heading-xl-line-height: 1.15;
580
+ --text-heading-xl-letter-spacing: -0.02em;
581
+ --text-heading-xl-weight: 600;
582
+ --text-heading-lg-size: 1.5rem;
583
+ --text-heading-lg-line-height: 1.2;
584
+ --text-heading-lg-letter-spacing: -0.015em;
585
+ --text-heading-lg-weight: 600;
586
+ --text-heading-md-size: 1.25rem;
587
+ --text-heading-md-line-height: 1.3;
588
+ --text-heading-md-letter-spacing: -0.01em;
605
589
  --text-heading-md-weight: 600;
606
- --text-heading-sm-size: 1.25rem;
607
- --text-heading-sm-line-height: 1.25;
608
- --text-heading-sm-letter-spacing: 0;
590
+ --text-heading-sm-size: 1.0625rem;
591
+ --text-heading-sm-line-height: 1.35;
592
+ --text-heading-sm-letter-spacing: -0.005em;
609
593
  --text-heading-sm-weight: 600;
610
594
  --text-body-lg-size: 1.125rem;
611
595
  --text-body-lg-line-height: 1.55;
612
596
  --text-body-lg-letter-spacing: 0;
613
597
  --text-body-lg-weight: 400;
614
598
  --text-body-md-size: 1rem;
615
- --text-body-md-line-height: 1.5;
599
+ --text-body-md-line-height: 1.55;
616
600
  --text-body-md-letter-spacing: 0;
617
601
  --text-body-md-weight: 400;
618
602
  --text-body-sm-size: 0.875rem;
@@ -628,21 +612,17 @@
628
612
  --text-label-md-letter-spacing: 0;
629
613
  --text-label-md-weight: 500;
630
614
  --text-label-sm-size: 0.8125rem;
631
- --text-label-sm-line-height: 1.4;
615
+ --text-label-sm-line-height: 1.35;
632
616
  --text-label-sm-letter-spacing: 0;
633
617
  --text-label-sm-weight: 500;
634
- --text-caption-size: 0.8125rem;
635
- --text-caption-line-height: 1.4;
636
- --text-caption-letter-spacing: 0;
637
- --text-caption-weight: 400;
638
618
  --text-code-size: 0.875rem;
639
619
  --text-code-line-height: 1.5;
640
620
  --text-code-letter-spacing: 0;
641
621
  --text-code-weight: 400;
642
- --text-eyebrow-size: 0.6875rem;
643
- --text-eyebrow-line-height: 1.4;
644
- --text-eyebrow-letter-spacing: 0.1em;
645
- --text-eyebrow-weight: 600;
622
+ --text-agent-size: 1.125rem;
623
+ --text-agent-line-height: 1.6;
624
+ --text-agent-letter-spacing: 0;
625
+ --text-agent-weight: 400;
646
626
  --color-background-body: #ffffff;
647
627
  --color-background-surface: #ffffff;
648
628
  --color-background-muted: #f5f5f4;
@@ -652,15 +632,19 @@
652
632
  --color-background-modal: rgba(0, 0, 0, 0.15);
653
633
  --color-background-canvas: linear-gradient(to bottom right, rgb(239 246 255), rgb(250 245 255), rgb(253 242 248));
654
634
  --color-background-ai: linear-gradient(to bottom right, rgb(245 243 255 / 0.5), rgb(255 255 255), rgb(240 249 255 / 0.5));
635
+ --color-background-paper: #faf7f0;
636
+ --color-text-primary: #2c2a26;
637
+ --color-text-secondary: #525250;
638
+ --color-text-inverse: #ffffff;
639
+ --color-text-disabled: #a09d98;
655
640
  --color-text-body: #2c2a26;
656
- --color-text-heading: #111111;
657
- --theme-text-label: #111111;
658
- --color-text-muted: #5d5b56;
659
- --color-text-caption: #7c7974;
660
- --color-text-subtle: #7c7974;
661
- --color-text-placeholder: #a09d98;
662
- --color-text-disabled: #d4d3d0;
663
- --color-text-link-default: #111111;
641
+ --color-text-heading: #2c2a26;
642
+ --color-text-label: #2c2a26;
643
+ --color-text-muted: #525250;
644
+ --color-text-caption: #525250;
645
+ --color-text-subtle: #525250;
646
+ --color-text-placeholder: #525250;
647
+ --color-text-link-default: #2c2a26;
664
648
  --color-text-link-hover: #2c2a26;
665
649
  --color-text-onPrimary: #ffffff;
666
650
  --color-text-onBrand: #ffffff;
@@ -668,12 +652,22 @@
668
652
  --color-border-focus: #111111;
669
653
  --color-border-muted: #f5f5f4;
670
654
  --color-border-input: #d4d3d0;
655
+ --color-border-paper: #e5dfd3;
656
+ --color-action-primary: #111111;
657
+ --color-action-primary-hover: #2c2a26;
658
+ --color-action-primary-text: #ffffff;
659
+ --color-action-secondary: rgba(0, 0, 0, 0);
660
+ --color-action-secondary-hover: #fafafa;
661
+ --color-action-secondary-text: #2c2a26;
671
662
  --color-action-brand: #111111;
672
663
  --color-action-brand-hover: #2c2a26;
673
664
  --color-action-brand-text: #ffffff;
674
665
  --color-action-default: #111111;
675
666
  --color-action-default-hover: #2c2a26;
676
667
  --color-action-default-text: #ffffff;
668
+ --color-action-destructive: #c42d2d;
669
+ --color-action-destructive-hover: #7a1212;
670
+ --color-action-destructive-text: #ffffff;
677
671
  --color-feedback-success-text: #15452a;
678
672
  --color-feedback-success-background: #e4f3e9;
679
673
  --color-feedback-success-border: #278a4a;
@@ -854,33 +848,22 @@
854
848
  --elevation-surface-raised: var(--color-background-surface);
855
849
  --elevation-surface-floating: var(--color-background-surface);
856
850
  --elevation-surface-overlay: var(--color-background-surface);
857
- --text-display-xl-size: var(--font-size-8xl);
858
- --text-display-xl-letter-spacing: var(--font-letterspacing-normal);
859
- --text-display-xl-weight: var(--font-weight-medium);
860
- --text-display-lg-size: var(--font-size-7xl);
861
- --text-display-lg-letter-spacing: var(--font-letterspacing-normal);
862
- --text-display-lg-weight: var(--font-weight-medium);
863
- --text-display-md-size: var(--font-size-5xl);
864
- --text-display-md-letter-spacing: var(--font-letterspacing-normal);
865
- --text-display-md-weight: var(--font-weight-medium);
851
+ --text-display-xl-weight: var(--font-weight-normal);
852
+ --text-display-lg-weight: var(--font-weight-normal);
853
+ --text-display-md-size: var(--font-size-4xl);
854
+ --text-display-md-weight: var(--font-weight-normal);
855
+ --text-display-sm-weight: var(--font-weight-normal);
866
856
  --text-heading-xl-size: var(--font-size-4xl);
867
- --text-heading-xl-letter-spacing: var(--font-letterspacing-normal);
868
- --text-heading-xl-weight: var(--font-weight-medium);
869
- --text-heading-lg-size: var(--font-size-3xl);
870
- --text-heading-lg-letter-spacing: var(--font-letterspacing-normal);
871
- --text-heading-lg-weight: var(--font-weight-medium);
872
- --text-heading-md-size: var(--font-size-2xl);
873
- --text-heading-md-letter-spacing: var(--font-letterspacing-normal);
857
+ --text-heading-xl-weight: var(--font-weight-semibold);
858
+ --text-heading-lg-size: var(--font-size-2xl);
859
+ --text-heading-lg-weight: var(--font-weight-semibold);
860
+ --text-heading-md-size: var(--font-size-xl);
874
861
  --text-heading-md-weight: var(--font-weight-semibold);
875
- --text-heading-sm-size: var(--font-size-xl);
876
- --text-heading-sm-line-height: var(--font-lineheight-tight);
877
- --text-heading-sm-letter-spacing: var(--font-letterspacing-normal);
878
862
  --text-heading-sm-weight: var(--font-weight-semibold);
879
863
  --text-body-lg-size: var(--font-size-lg);
880
864
  --text-body-lg-letter-spacing: var(--font-letterspacing-normal);
881
865
  --text-body-lg-weight: var(--font-weight-normal);
882
866
  --text-body-md-size: var(--font-size-base);
883
- --text-body-md-line-height: var(--font-lineheight-normal);
884
867
  --text-body-md-letter-spacing: var(--font-letterspacing-normal);
885
868
  --text-body-md-weight: var(--font-weight-normal);
886
869
  --text-body-sm-size: var(--font-size-sm);
@@ -894,14 +877,13 @@
894
877
  --text-label-md-weight: var(--font-weight-medium);
895
878
  --text-label-sm-letter-spacing: var(--font-letterspacing-normal);
896
879
  --text-label-sm-weight: var(--font-weight-medium);
897
- --text-caption-letter-spacing: var(--font-letterspacing-normal);
898
- --text-caption-weight: var(--font-weight-normal);
899
880
  --text-code-size: var(--font-size-sm);
900
881
  --text-code-line-height: var(--font-lineheight-normal);
901
882
  --text-code-letter-spacing: var(--font-letterspacing-normal);
902
883
  --text-code-weight: var(--font-weight-normal);
903
- --text-eyebrow-letter-spacing: var(--font-letterspacing-widest);
904
- --text-eyebrow-weight: var(--font-weight-semibold);
884
+ --text-agent-size: var(--font-size-lg);
885
+ --text-agent-letter-spacing: var(--font-letterspacing-normal);
886
+ --text-agent-weight: var(--font-weight-normal);
905
887
  --color-background-body: var(--color-white);
906
888
  --color-background-surface: var(--color-white);
907
889
  --color-background-muted: var(--color-gray-100);
@@ -909,28 +891,40 @@
909
891
  --color-background-selected: var(--color-gray-200);
910
892
  --color-background-input: var(--color-white);
911
893
  --color-background-modal: var(--color-scrim-light);
912
- --color-text-body: var(--color-graphite);
913
- --color-text-heading: var(--color-ink);
914
- --theme-text-label: var(--color-ink);
915
- --color-text-muted: var(--color-gray-600);
916
- --color-text-caption: var(--color-gray-500);
917
- --color-text-subtle: var(--color-gray-500);
918
- --color-text-placeholder: var(--color-gray-400);
919
- --color-text-disabled: var(--color-gray-300);
920
- --color-text-link-default: var(--color-ink);
894
+ --color-background-paper: var(--color-linen);
895
+ --color-text-primary: var(--color-graphite);
896
+ --color-text-inverse: var(--color-white);
897
+ --color-text-disabled: var(--color-gray-400);
898
+ --color-text-body: var(--color-text-primary);
899
+ --color-text-heading: var(--color-text-primary);
900
+ --color-text-label: var(--color-text-primary);
901
+ --color-text-muted: var(--color-text-secondary);
902
+ --color-text-caption: var(--color-text-secondary);
903
+ --color-text-subtle: var(--color-text-secondary);
904
+ --color-text-placeholder: var(--color-text-secondary);
905
+ --color-text-link-default: var(--color-text-primary);
921
906
  --color-text-link-hover: var(--color-graphite);
922
- --color-text-onPrimary: var(--color-white);
923
- --color-text-onBrand: var(--color-white);
907
+ --color-text-onPrimary: var(--color-text-inverse);
908
+ --color-text-onBrand: var(--color-text-inverse);
924
909
  --color-border-default: var(--color-gray-200);
925
910
  --color-border-focus: var(--color-ink);
926
911
  --color-border-muted: var(--color-gray-100);
927
912
  --color-border-input: var(--color-gray-300);
928
- --color-action-brand: var(--color-ink);
929
- --color-action-brand-hover: var(--color-graphite);
930
- --color-action-brand-text: var(--color-white);
931
- --color-action-default: var(--color-ink);
932
- --color-action-default-hover: var(--color-graphite);
933
- --color-action-default-text: var(--color-white);
913
+ --color-border-paper: var(--color-paper-border);
914
+ --color-action-primary: var(--color-ink);
915
+ --color-action-primary-hover: var(--color-graphite);
916
+ --color-action-primary-text: var(--color-white);
917
+ --color-action-secondary-hover: var(--color-background-hover);
918
+ --color-action-secondary-text: var(--color-text-primary);
919
+ --color-action-brand: var(--color-action-primary);
920
+ --color-action-brand-hover: var(--color-action-primary-hover);
921
+ --color-action-brand-text: var(--color-action-primary-text);
922
+ --color-action-default: var(--color-action-primary);
923
+ --color-action-default-hover: var(--color-action-primary-hover);
924
+ --color-action-default-text: var(--color-action-primary-text);
925
+ --color-action-destructive: var(--color-feedback-error-border);
926
+ --color-action-destructive-hover: var(--color-feedback-error-text);
927
+ --color-action-destructive-text: var(--color-text-inverse);
934
928
  --color-feedback-success-text: var(--color-success-dark);
935
929
  --color-feedback-success-background: var(--color-success-light);
936
930
  --color-feedback-success-border: var(--color-success-base);
@@ -947,7 +941,7 @@
947
941
  --color-skeleton-base: var(--color-gray-200);
948
942
  --color-skeleton-highlight: var(--color-gray-100);
949
943
  --color-skeleton-wave: var(--color-skeleton-wave-light);
950
- --color-map-marker-default: var(--color-action-brand);
944
+ --color-map-marker-default: var(--color-action-primary);
951
945
  --color-map-streets-border: var(--color-black);
952
946
  --color-map-satellite-border: var(--color-white);
953
947
  --color-map-neutral-border: var(--color-black);
@@ -956,19 +950,19 @@
956
950
  --text-display-xl: var(--text-display-xl-weight) var(--text-display-xl-size)/var(--text-display-xl-line-height) var(--font-family-brand);
957
951
  --text-display-lg: var(--text-display-lg-weight) var(--text-display-lg-size)/var(--text-display-lg-line-height) var(--font-family-brand);
958
952
  --text-display-md: var(--text-display-md-weight) var(--text-display-md-size)/var(--text-display-md-line-height) var(--font-family-brand);
959
- --text-heading-xl: var(--text-heading-xl-weight) var(--text-heading-xl-size)/var(--text-heading-xl-line-height) var(--font-family-brand);
960
- --text-heading-lg: var(--text-heading-lg-weight) var(--text-heading-lg-size)/var(--text-heading-lg-line-height) var(--font-family-brand);
961
- --text-heading-md: var(--text-heading-md-weight) var(--text-heading-md-size)/var(--text-heading-md-line-height) var(--font-family-brand);
962
- --text-heading-sm: var(--text-heading-sm-weight) var(--text-heading-sm-size)/var(--text-heading-sm-line-height) var(--font-family-brand);
953
+ --text-display-sm: var(--text-display-sm-weight) var(--text-display-sm-size)/var(--text-display-sm-line-height) var(--font-family-brand);
954
+ --text-heading-xl: var(--text-heading-xl-weight) var(--text-heading-xl-size)/var(--text-heading-xl-line-height) var(--font-family-sans);
955
+ --text-heading-lg: var(--text-heading-lg-weight) var(--text-heading-lg-size)/var(--text-heading-lg-line-height) var(--font-family-sans);
956
+ --text-heading-md: var(--text-heading-md-weight) var(--text-heading-md-size)/var(--text-heading-md-line-height) var(--font-family-sans);
957
+ --text-heading-sm: var(--text-heading-sm-weight) var(--text-heading-sm-size)/var(--text-heading-sm-line-height) var(--font-family-sans);
963
958
  --text-body-lg: var(--text-body-lg-weight) var(--text-body-lg-size)/var(--text-body-lg-line-height) var(--font-family-sans);
964
959
  --text-body-md: var(--text-body-md-weight) var(--text-body-md-size)/var(--text-body-md-line-height) var(--font-family-sans);
965
960
  --text-body-sm: var(--text-body-sm-weight) var(--text-body-sm-size)/var(--text-body-sm-line-height) var(--font-family-sans);
966
961
  --text-label-lg: var(--text-label-lg-weight) var(--text-label-lg-size)/var(--text-label-lg-line-height) var(--font-family-sans);
967
962
  --text-label-md: var(--text-label-md-weight) var(--text-label-md-size)/var(--text-label-md-line-height) var(--font-family-sans);
968
963
  --text-label-sm: var(--text-label-sm-weight) var(--text-label-sm-size)/var(--text-label-sm-line-height) var(--font-family-sans);
969
- --text-caption: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line-height) var(--font-family-sans);
970
964
  --text-code: var(--text-code-weight) var(--text-code-size)/var(--text-code-line-height) var(--font-family-mono);
971
- --text-eyebrow: var(--text-eyebrow-weight) var(--text-eyebrow-size)/var(--text-eyebrow-line-height) var(--font-family-mono);
965
+ --text-agent: var(--text-agent-weight) var(--text-agent-size)/var(--text-agent-line-height) var(--font-family-agent);
972
966
  }
973
967
  @media (max-width: 768px) {
974
968
  :root {
@@ -979,7 +973,8 @@
979
973
  .theme-dark {
980
974
  --color-white: #ffffff;
981
975
  --color-black: #000000;
982
- --color-linen: #faf7f0;
976
+ --color-linen: #121110;
977
+ --color-paper-border: #2f2b24;
983
978
  --color-graphite: #d5d2cb;
984
979
  --color-ink: #ededef;
985
980
  --color-gray-50: #fafafa;
@@ -1080,10 +1075,10 @@
1080
1075
  --radius-3xl: 1.5rem;
1081
1076
  --radius-4xl: 2rem;
1082
1077
  --radius-full: 9999px;
1083
- --font-family-sans: Inter, system-ui, sans-serif;
1084
- --font-family-brand: 'TT Firs Neue', 'Helvetica Neue', Arial, system-ui, sans-serif;
1085
- --font-family-serif: Merriweather, serif;
1086
- --font-family-mono: 'Fira Code', monospace;
1078
+ --font-family-sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
1079
+ --font-family-brand: 'Rethink Sans', -apple-system, BlinkMacSystemFont, sans-serif;
1080
+ --font-family-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace;
1081
+ --font-family-agent: 'Source Serif 4', Charter, Georgia, serif;
1087
1082
  --font-weight-thin: 100;
1088
1083
  --font-weight-extralight: 200;
1089
1084
  --font-weight-light: 300;
@@ -1124,28 +1119,42 @@
1124
1119
  --color-background-modal: var(--color-scrim-dark);
1125
1120
  --color-background-canvas: linear-gradient(to bottom right, rgb(24 28 48), rgb(30 26 45), rgb(35 26 38));
1126
1121
  --color-background-ai: linear-gradient(to bottom right, rgb(46 16 101 / 0.2), rgb(31 41 55), rgb(8 47 73 / 0.2));
1127
- --color-text-body: var(--color-gray-200);
1128
- --color-text-heading: var(--color-white);
1129
- --theme-text-label: var(--color-white);
1130
- --color-text-muted: var(--color-gray-400);
1131
- --color-text-caption: var(--color-gray-400);
1132
- --color-text-subtle: var(--color-gray-400);
1133
- --color-text-placeholder: var(--color-gray-400);
1122
+ --color-background-paper: var(--color-linen);
1123
+ --color-text-primary: var(--color-gray-200);
1124
+ --color-text-secondary: var(--color-gray-400);
1125
+ --color-text-inverse: var(--color-gray-950);
1134
1126
  --color-text-disabled: var(--color-gray-700);
1135
- --color-text-link-default: var(--color-ink);
1127
+ --color-text-body: var(--color-text-primary);
1128
+ --color-text-heading: var(--color-text-primary);
1129
+ --color-text-label: var(--color-text-primary);
1130
+ --color-text-muted: var(--color-text-secondary);
1131
+ --color-text-caption: var(--color-text-secondary);
1132
+ --color-text-subtle: var(--color-text-secondary);
1133
+ --color-text-placeholder: var(--color-text-secondary);
1134
+ --color-text-link-default: var(--color-text-primary);
1136
1135
  --color-text-link-hover: var(--color-graphite);
1137
- --color-text-onPrimary: var(--color-gray-900);
1138
- --color-text-onBrand: #111111;
1136
+ --color-text-onPrimary: var(--color-text-inverse);
1137
+ --color-text-onBrand: var(--color-text-inverse);
1139
1138
  --color-border-default: var(--color-gray-700);
1140
1139
  --color-border-focus: var(--color-gray-200);
1141
1140
  --color-border-muted: var(--color-gray-800);
1142
1141
  --color-border-input: var(--color-gray-700);
1143
- --color-action-brand: var(--color-ink);
1144
- --color-action-brand-hover: var(--color-graphite);
1145
- --color-action-brand-text: #111111;
1146
- --color-action-default: var(--color-ink);
1147
- --color-action-default-hover: var(--color-graphite);
1148
- --color-action-default-text: #111111;
1142
+ --color-border-paper: var(--color-paper-border);
1143
+ --color-action-primary: var(--color-ink);
1144
+ --color-action-primary-hover: var(--color-graphite);
1145
+ --color-action-primary-text: #111111;
1146
+ --color-action-secondary: rgba(0, 0, 0, 0);
1147
+ --color-action-secondary-hover: var(--color-background-hover);
1148
+ --color-action-secondary-text: var(--color-text-primary);
1149
+ --color-action-brand: var(--color-action-primary);
1150
+ --color-action-brand-hover: var(--color-action-primary-hover);
1151
+ --color-action-brand-text: var(--color-action-primary-text);
1152
+ --color-action-default: var(--color-action-primary);
1153
+ --color-action-default-hover: var(--color-action-primary-hover);
1154
+ --color-action-default-text: var(--color-action-primary-text);
1155
+ --color-action-destructive: var(--color-feedback-error-border);
1156
+ --color-action-destructive-hover: var(--color-feedback-error-text);
1157
+ --color-action-destructive-text: var(--color-text-inverse);
1149
1158
  --color-feedback-success-text: var(--color-success-dark);
1150
1159
  --color-feedback-success-background: var(--color-success-light);
1151
1160
  --color-feedback-success-border: var(--color-success-base);
@@ -1264,7 +1273,7 @@
1264
1273
  --color-skeleton-base: var(--color-gray-800);
1265
1274
  --color-skeleton-highlight: var(--color-gray-700);
1266
1275
  --color-skeleton-wave: var(--color-skeleton-wave-dark);
1267
- --color-map-marker-default: var(--color-action-brand);
1276
+ --color-map-marker-default: var(--color-action-primary);
1268
1277
  --color-map-streets-border: var(--color-white);
1269
1278
  --color-map-satellite-border: var(--color-white);
1270
1279
  --color-map-neutral-border: var(--color-white);
@@ -1321,6 +1330,264 @@
1321
1330
  --color-state-exporting-border: #fbbf24;
1322
1331
  --color-state-exporting-text: #fef3c7;
1323
1332
  }
1333
+ .text-agent {
1334
+ font: var(--text-agent);
1335
+ letter-spacing: var(--text-agent-letter-spacing);
1336
+ font-optical-sizing: auto;
1337
+ }
1338
+ .text-body-lg {
1339
+ font: var(--text-body-lg);
1340
+ letter-spacing: var(--text-body-lg-letter-spacing);
1341
+ }
1342
+ .text-body-md {
1343
+ font: var(--text-body-md);
1344
+ letter-spacing: var(--text-body-md-letter-spacing);
1345
+ }
1346
+ .text-body-sm {
1347
+ font: var(--text-body-sm);
1348
+ letter-spacing: var(--text-body-sm-letter-spacing);
1349
+ }
1350
+ .text-code {
1351
+ font: var(--text-code);
1352
+ letter-spacing: var(--text-code-letter-spacing);
1353
+ font-variant-numeric: tabular-nums;
1354
+ }
1355
+ .text-display-lg {
1356
+ font: var(--text-display-lg);
1357
+ letter-spacing: var(--text-display-lg-letter-spacing);
1358
+ }
1359
+ .text-display-md {
1360
+ font: var(--text-display-md);
1361
+ letter-spacing: var(--text-display-md-letter-spacing);
1362
+ }
1363
+ .text-display-sm {
1364
+ font: var(--text-display-sm);
1365
+ letter-spacing: var(--text-display-sm-letter-spacing);
1366
+ }
1367
+ .text-display-xl {
1368
+ font: var(--text-display-xl);
1369
+ letter-spacing: var(--text-display-xl-letter-spacing);
1370
+ }
1371
+ .text-heading-lg {
1372
+ font: var(--text-heading-lg);
1373
+ letter-spacing: var(--text-heading-lg-letter-spacing);
1374
+ }
1375
+ .text-heading-md {
1376
+ font: var(--text-heading-md);
1377
+ letter-spacing: var(--text-heading-md-letter-spacing);
1378
+ }
1379
+ .text-heading-sm {
1380
+ font: var(--text-heading-sm);
1381
+ letter-spacing: var(--text-heading-sm-letter-spacing);
1382
+ }
1383
+ .text-heading-xl {
1384
+ font: var(--text-heading-xl);
1385
+ letter-spacing: var(--text-heading-xl-letter-spacing);
1386
+ }
1387
+ .text-label-lg {
1388
+ font: var(--text-label-lg);
1389
+ letter-spacing: var(--text-label-lg-letter-spacing);
1390
+ }
1391
+ .text-label-md {
1392
+ font: var(--text-label-md);
1393
+ letter-spacing: var(--text-label-md-letter-spacing);
1394
+ }
1395
+ .text-label-sm {
1396
+ font: var(--text-label-sm);
1397
+ letter-spacing: var(--text-label-sm-letter-spacing);
1398
+ }
1399
+ .text-text-body {
1400
+ color: var(--color-text-body);
1401
+ }
1402
+ .text-text-caption {
1403
+ color: var(--color-text-caption);
1404
+ }
1405
+ .text-text-disabled {
1406
+ color: var(--color-text-disabled);
1407
+ }
1408
+ .text-text-heading {
1409
+ color: var(--color-text-heading);
1410
+ }
1411
+ .text-text-inverse {
1412
+ color: var(--color-text-inverse);
1413
+ }
1414
+ .text-text-label {
1415
+ color: var(--color-text-label);
1416
+ }
1417
+ .text-text-link-default {
1418
+ color: var(--color-text-link-default);
1419
+ }
1420
+ .text-text-link-hover {
1421
+ color: var(--color-text-link-hover);
1422
+ }
1423
+ .text-text-muted {
1424
+ color: var(--color-text-muted);
1425
+ }
1426
+ .text-text-onBrand {
1427
+ color: var(--color-text-onBrand);
1428
+ }
1429
+ .text-text-onPrimary {
1430
+ color: var(--color-text-onPrimary);
1431
+ }
1432
+ .text-text-placeholder {
1433
+ color: var(--color-text-placeholder);
1434
+ }
1435
+ .text-text-primary {
1436
+ color: var(--color-text-primary);
1437
+ }
1438
+ .text-text-secondary {
1439
+ color: var(--color-text-secondary);
1440
+ }
1441
+ .text-text-subtle {
1442
+ color: var(--color-text-subtle);
1443
+ }
1444
+ .prose {
1445
+ max-width: 42rem;
1446
+ color: var(--color-text-primary);
1447
+ }
1448
+ .prose.prose-sm {
1449
+ max-width: 36rem;
1450
+ }
1451
+ .prose.prose-sm p, .prose.prose-sm ul, .prose.prose-sm ol, .prose.prose-sm blockquote {
1452
+ font: var(--text-body-md);
1453
+ letter-spacing: var(--text-body-md-letter-spacing);
1454
+ }
1455
+ .prose.prose-lede p:first-child, .prose.prose-lede > p:only-child {
1456
+ font: var(--text-body-lg);
1457
+ letter-spacing: var(--text-body-lg-letter-spacing);
1458
+ color: var(--color-text-secondary);
1459
+ }
1460
+ .prose h1 {
1461
+ font: var(--text-display-lg);
1462
+ letter-spacing: var(--text-display-lg-letter-spacing);
1463
+ color: var(--color-text-primary);
1464
+ text-wrap: balance;
1465
+ margin: 0 0 var(--spacing-4);
1466
+ }
1467
+ .prose h2 {
1468
+ font: var(--text-display-md);
1469
+ letter-spacing: var(--text-display-md-letter-spacing);
1470
+ color: var(--color-text-primary);
1471
+ text-wrap: balance;
1472
+ margin: var(--spacing-10) 0 var(--spacing-3);
1473
+ }
1474
+ .prose h3 {
1475
+ font: var(--text-display-sm);
1476
+ letter-spacing: var(--text-display-sm-letter-spacing);
1477
+ color: var(--color-text-primary);
1478
+ text-wrap: balance;
1479
+ margin: var(--spacing-8) 0 var(--spacing-3);
1480
+ }
1481
+ .prose h4 {
1482
+ font: var(--text-heading-lg);
1483
+ letter-spacing: var(--text-heading-lg-letter-spacing);
1484
+ color: var(--color-text-primary);
1485
+ text-wrap: balance;
1486
+ margin: var(--spacing-6) 0 var(--spacing-2);
1487
+ }
1488
+ .prose h5 {
1489
+ font: var(--text-heading-md);
1490
+ letter-spacing: var(--text-heading-md-letter-spacing);
1491
+ color: var(--color-text-primary);
1492
+ text-wrap: balance;
1493
+ margin: var(--spacing-6) 0 var(--spacing-2);
1494
+ }
1495
+ .prose h6 {
1496
+ font: var(--text-heading-sm);
1497
+ letter-spacing: var(--text-heading-sm-letter-spacing);
1498
+ color: var(--color-text-primary);
1499
+ text-wrap: balance;
1500
+ margin: var(--spacing-6) 0 var(--spacing-2);
1501
+ }
1502
+ .prose p {
1503
+ font: var(--text-body-lg);
1504
+ letter-spacing: var(--text-body-lg-letter-spacing);
1505
+ color: var(--color-text-primary);
1506
+ text-wrap: pretty;
1507
+ hyphens: auto;
1508
+ margin: 0 0 var(--spacing-5);
1509
+ }
1510
+ .prose > :last-child {
1511
+ margin-bottom: 0;
1512
+ }
1513
+ .prose strong, .prose b {
1514
+ font-weight: 600;
1515
+ color: var(--color-text-primary);
1516
+ }
1517
+ .prose em, .prose i {
1518
+ font-style: italic;
1519
+ }
1520
+ .prose a {
1521
+ color: var(--color-iris-base);
1522
+ font-weight: 500;
1523
+ text-decoration: underline;
1524
+ text-decoration-thickness: 1px;
1525
+ text-underline-offset: 6px;
1526
+ text-decoration-color: color-mix(in srgb, #3945a8, transparent 60%);
1527
+ @supports (color: color-mix(in lab, red, red)) {
1528
+ text-decoration-color: color-mix(in oklch, var(--color-iris-base), transparent 60%);
1529
+ }
1530
+ transition: color 150ms ease, text-decoration-color 150ms ease;
1531
+ }
1532
+ .prose a:hover, .prose a:focus-visible {
1533
+ color: color-mix(in srgb, #3945a8, black 15%);
1534
+ @supports (color: color-mix(in lab, red, red)) {
1535
+ color: color-mix(in oklch, var(--color-iris-base), black 15%);
1536
+ }
1537
+ text-decoration-color: currentcolor;
1538
+ }
1539
+ .prose :where(code):not(pre code) {
1540
+ font: var(--text-code);
1541
+ letter-spacing: var(--text-code-letter-spacing);
1542
+ font-size: 0.875em;
1543
+ background: var(--color-rose-pastel);
1544
+ color: var(--color-rose-base);
1545
+ padding: 0 5px;
1546
+ border-radius: var(--radius-sm);
1547
+ }
1548
+ .prose ul, .prose ol {
1549
+ padding-left: 1.5rem;
1550
+ margin: 0 0 var(--spacing-5);
1551
+ font: var(--text-body-lg);
1552
+ letter-spacing: var(--text-body-lg-letter-spacing);
1553
+ color: var(--color-text-primary);
1554
+ }
1555
+ .prose ul {
1556
+ list-style: disc;
1557
+ }
1558
+ .prose ol {
1559
+ list-style: decimal;
1560
+ }
1561
+ .prose li + li {
1562
+ margin-top: 0.75rem;
1563
+ }
1564
+ .prose blockquote {
1565
+ margin: 0 0 var(--spacing-5);
1566
+ padding: 4px 0 4px 1.5rem;
1567
+ border-left: 3px solid var(--color-border-default);
1568
+ font: var(--text-body-lg);
1569
+ letter-spacing: var(--text-body-lg-letter-spacing);
1570
+ color: var(--color-text-primary);
1571
+ font-style: italic;
1572
+ }
1573
+ .prose hr {
1574
+ max-width: 42rem;
1575
+ margin: var(--spacing-10) 0;
1576
+ border: 0;
1577
+ border-top: 1px solid var(--color-border-default);
1578
+ }
1579
+ .prose-neutral a {
1580
+ color: var(--color-text-primary);
1581
+ font-weight: 600;
1582
+ text-decoration-color: color-mix(in srgb, #2c2a26, transparent 60%);
1583
+ @supports (color: color-mix(in lab, red, red)) {
1584
+ text-decoration-color: color-mix(in oklch, var(--color-text-primary), transparent 60%);
1585
+ }
1586
+ }
1587
+ .prose-neutral a:hover, .prose-neutral a:focus-visible {
1588
+ color: var(--color-text-primary);
1589
+ text-decoration-color: currentcolor;
1590
+ }
1324
1591
  :root {
1325
1592
  --theme-background-canvas: var(--color-background-canvas);
1326
1593
  --theme-background-ai: var(--color-background-ai);
@@ -1401,16 +1668,21 @@
1401
1668
  --color-background-selected: #e7e6e5;
1402
1669
  --color-background-modal: rgba(0, 0, 0, 0.15);
1403
1670
  --color-background-input: #ffffff;
1404
- --color-text-body: #2c2a26;
1405
- --color-text-heading: #111111;
1406
- --color-text-muted: #5d5b56;
1407
- --color-text-caption: #7c7974;
1408
- --color-text-subtle: #7c7974;
1409
- --color-text-placeholder: #a09d98;
1410
- --color-text-disabled: #d4d3d0;
1411
- --color-text-link-default: #111111;
1671
+ --color-text-primary: #2c2a26;
1672
+ --color-text-secondary: #525250;
1673
+ --color-text-inverse: #ffffff;
1674
+ --color-text-disabled: #a09d98;
1675
+ --color-text-body: var(--color-text-primary);
1676
+ --color-text-heading: var(--color-text-primary);
1677
+ --color-text-label: var(--color-text-primary);
1678
+ --color-text-muted: var(--color-text-secondary);
1679
+ --color-text-caption: var(--color-text-secondary);
1680
+ --color-text-subtle: var(--color-text-secondary);
1681
+ --color-text-placeholder: var(--color-text-disabled);
1682
+ --color-text-link-default: var(--color-text-primary);
1412
1683
  --color-text-link-hover: #2c2a26;
1413
- --color-text-onPrimary: #ffffff;
1684
+ --color-text-onPrimary: var(--color-text-inverse);
1685
+ --color-text-onBrand: var(--color-text-inverse);
1414
1686
  --color-border-default: #e7e6e5;
1415
1687
  --color-border-focus: #111111;
1416
1688
  --color-border-muted: #f5f5f4;
@@ -1427,12 +1699,18 @@
1427
1699
  --color-feedback-info-text: #123862;
1428
1700
  --color-feedback-info-background: #e0eaf5;
1429
1701
  --color-feedback-info-border: #2d6cb8;
1430
- --color-action-brand: #111111;
1431
- --color-action-brand-hover: #2c2a26;
1432
- --color-action-brand-text: #ffffff;
1433
- --color-action-default: #111111;
1434
- --color-action-default-hover: #2c2a26;
1435
- --color-action-default-text: #ffffff;
1702
+ --color-action-primary: #111111;
1703
+ --color-action-primary-hover: #2c2a26;
1704
+ --color-action-primary-text: #ffffff;
1705
+ --color-action-secondary: transparent;
1706
+ --color-action-secondary-hover: var(--color-background-hover);
1707
+ --color-action-secondary-text: var(--color-text-primary);
1708
+ --color-action-brand: var(--color-action-primary);
1709
+ --color-action-brand-hover: var(--color-action-primary-hover);
1710
+ --color-action-brand-text: var(--color-action-primary-text);
1711
+ --color-action-default: var(--color-action-primary);
1712
+ --color-action-default-hover: var(--color-action-primary-hover);
1713
+ --color-action-default-text: var(--color-action-primary-text);
1436
1714
  --color-skeleton-base: #e7e6e5;
1437
1715
  --color-skeleton-highlight: #f5f5f4;
1438
1716
  --color-skeleton-wave: rgba(255, 255, 255, 0.6);
@@ -3578,6 +3856,18 @@
3578
3856
  .border-action-default {
3579
3857
  border-color: var(--color-action-default);
3580
3858
  }
3859
+ .border-action-default-hover {
3860
+ border-color: var(--color-action-default-hover);
3861
+ }
3862
+ .border-action-primary {
3863
+ border-color: var(--color-action-primary);
3864
+ }
3865
+ .border-action-primary\/20 {
3866
+ border-color: color-mix(in srgb, #111111 20%, transparent);
3867
+ @supports (color: color-mix(in lab, red, red)) {
3868
+ border-color: color-mix(in oklab, var(--color-action-primary) 20%, transparent);
3869
+ }
3870
+ }
3581
3871
  .border-amber-200 {
3582
3872
  border-color: var(--color-amber-200);
3583
3873
  }
@@ -3638,12 +3928,6 @@
3638
3928
  .border-brand-primary {
3639
3929
  border-color: var(--color-brand-primary);
3640
3930
  }
3641
- .border-brand-primary\/20 {
3642
- border-color: color-mix(in srgb, #111111 20%, transparent);
3643
- @supports (color: color-mix(in lab, red, red)) {
3644
- border-color: color-mix(in oklab, var(--color-brand-primary) 20%, transparent);
3645
- }
3646
- }
3647
3931
  .border-current {
3648
3932
  border-color: currentcolor;
3649
3933
  }
@@ -3692,38 +3976,29 @@
3692
3976
  .border-gray-300 {
3693
3977
  border-color: var(--color-gray-300);
3694
3978
  }
3695
- .border-green-200 {
3696
- border-color: var(--color-green-200);
3697
- }
3698
3979
  .border-green-600 {
3699
3980
  border-color: var(--color-green-600);
3700
3981
  }
3701
- .border-orange-200 {
3702
- border-color: var(--color-orange-200);
3703
- }
3704
3982
  .border-red-200 {
3705
3983
  border-color: var(--color-red-200);
3706
3984
  }
3707
- .border-slate-800 {
3708
- border-color: var(--color-slate-800);
3709
- }
3710
3985
  .border-text-body {
3711
3986
  border-color: var(--color-text-body);
3712
3987
  }
3713
3988
  .border-text-heading {
3714
3989
  border-color: var(--color-text-heading);
3715
3990
  }
3716
- .border-transparent {
3717
- border-color: transparent;
3718
- }
3719
- .border-white\/30 {
3991
+ .border-text-inverse\/30 {
3720
3992
  border-color: color-mix(in srgb, #ffffff 30%, transparent);
3721
3993
  @supports (color: color-mix(in lab, red, red)) {
3722
- border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
3994
+ border-color: color-mix(in oklab, var(--color-text-inverse) 30%, transparent);
3723
3995
  }
3724
3996
  }
3725
- .border-yellow-200 {
3726
- border-color: var(--color-yellow-200);
3997
+ .border-text-primary {
3998
+ border-color: var(--color-text-primary);
3999
+ }
4000
+ .border-transparent {
4001
+ border-color: transparent;
3727
4002
  }
3728
4003
  .border-t-transparent {
3729
4004
  border-top-color: transparent;
@@ -3731,15 +4006,15 @@
3731
4006
  .border-r-transparent {
3732
4007
  border-right-color: transparent;
3733
4008
  }
4009
+ .border-l-action-brand {
4010
+ border-left-color: var(--color-action-brand);
4011
+ }
3734
4012
  .border-l-action-default {
3735
4013
  border-left-color: var(--color-action-default);
3736
4014
  }
3737
4015
  .border-l-border-muted {
3738
4016
  border-left-color: var(--color-border-muted);
3739
4017
  }
3740
- .border-l-brand-primary {
3741
- border-left-color: var(--color-brand-primary);
3742
- }
3743
4018
  .border-l-feedback-error-border {
3744
4019
  border-left-color: var(--color-feedback-error-border);
3745
4020
  }
@@ -3785,12 +4060,27 @@
3785
4060
  background-color: color-mix(in oklab, var(--color-action-default) 5%, transparent);
3786
4061
  }
3787
4062
  }
3788
- .bg-action-default\/10 {
4063
+ .bg-action-destructive {
4064
+ background-color: var(--color-action-destructive);
4065
+ }
4066
+ .bg-action-destructive\/10 {
4067
+ background-color: color-mix(in srgb, #c42d2d 10%, transparent);
4068
+ @supports (color: color-mix(in lab, red, red)) {
4069
+ background-color: color-mix(in oklab, var(--color-action-destructive) 10%, transparent);
4070
+ }
4071
+ }
4072
+ .bg-action-primary {
4073
+ background-color: var(--color-action-primary);
4074
+ }
4075
+ .bg-action-primary\/10 {
3789
4076
  background-color: color-mix(in srgb, #111111 10%, transparent);
3790
4077
  @supports (color: color-mix(in lab, red, red)) {
3791
- background-color: color-mix(in oklab, var(--color-action-default) 10%, transparent);
4078
+ background-color: color-mix(in oklab, var(--color-action-primary) 10%, transparent);
3792
4079
  }
3793
4080
  }
4081
+ .bg-action-secondary {
4082
+ background-color: var(--color-action-secondary);
4083
+ }
3794
4084
  .bg-amber-50 {
3795
4085
  background-color: var(--color-amber-50);
3796
4086
  }
@@ -3809,6 +4099,9 @@
3809
4099
  .bg-background-input {
3810
4100
  background-color: var(--color-background-input);
3811
4101
  }
4102
+ .bg-background-modal {
4103
+ background-color: var(--color-background-modal);
4104
+ }
3812
4105
  .bg-background-muted {
3813
4106
  background-color: var(--color-background-muted);
3814
4107
  }
@@ -3824,6 +4117,12 @@
3824
4117
  background-color: color-mix(in oklab, var(--color-background-muted) 50%, transparent);
3825
4118
  }
3826
4119
  }
4120
+ .bg-background-muted\/60 {
4121
+ background-color: color-mix(in srgb, #f5f5f4 60%, transparent);
4122
+ @supports (color: color-mix(in lab, red, red)) {
4123
+ background-color: color-mix(in oklab, var(--color-background-muted) 60%, transparent);
4124
+ }
4125
+ }
3827
4126
  .bg-background-selected {
3828
4127
  background-color: var(--color-background-selected);
3829
4128
  }
@@ -3848,11 +4147,8 @@
3848
4147
  background-color: color-mix(in oklab, var(--color-background-surface) 95%, transparent);
3849
4148
  }
3850
4149
  }
3851
- .bg-black\/50 {
3852
- background-color: color-mix(in srgb, #000000 50%, transparent);
3853
- @supports (color: color-mix(in lab, red, red)) {
3854
- background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
3855
- }
4150
+ .bg-black {
4151
+ background-color: var(--color-black);
3856
4152
  }
3857
4153
  .bg-blue-50 {
3858
4154
  background-color: var(--color-blue-50);
@@ -3860,30 +4156,18 @@
3860
4156
  .bg-blue-100 {
3861
4157
  background-color: var(--color-blue-100);
3862
4158
  }
3863
- .bg-blue-500 {
3864
- background-color: var(--color-blue-500);
3865
- }
3866
- .bg-blue-600 {
3867
- background-color: var(--color-blue-600);
3868
- }
3869
4159
  .bg-border-default {
3870
4160
  background-color: var(--color-border-default);
3871
4161
  }
4162
+ .bg-border-input {
4163
+ background-color: var(--color-border-input);
4164
+ }
3872
4165
  .bg-border-muted {
3873
4166
  background-color: var(--color-border-muted);
3874
4167
  }
3875
- .bg-brand-light {
3876
- background-color: var(--color-brand-light);
3877
- }
3878
4168
  .bg-brand-primary {
3879
4169
  background-color: var(--color-brand-primary);
3880
4170
  }
3881
- .bg-brand-primary\/10 {
3882
- background-color: color-mix(in srgb, #111111 10%, transparent);
3883
- @supports (color: color-mix(in lab, red, red)) {
3884
- background-color: color-mix(in oklab, var(--color-brand-primary) 10%, transparent);
3885
- }
3886
- }
3887
4171
  .bg-brand-primary\/20 {
3888
4172
  background-color: color-mix(in srgb, #111111 20%, transparent);
3889
4173
  @supports (color: color-mix(in lab, red, red)) {
@@ -3905,6 +4189,12 @@
3905
4189
  .bg-feedback-error-border {
3906
4190
  background-color: var(--color-feedback-error-border);
3907
4191
  }
4192
+ .bg-feedback-error-border\/20 {
4193
+ background-color: color-mix(in srgb, #c42d2d 20%, transparent);
4194
+ @supports (color: color-mix(in lab, red, red)) {
4195
+ background-color: color-mix(in oklab, var(--color-feedback-error-border) 20%, transparent);
4196
+ }
4197
+ }
3908
4198
  .bg-feedback-error-text {
3909
4199
  background-color: var(--color-feedback-error-text);
3910
4200
  }
@@ -3929,6 +4219,12 @@
3929
4219
  .bg-feedback-success-border {
3930
4220
  background-color: var(--color-feedback-success-border);
3931
4221
  }
4222
+ .bg-feedback-success-border\/20 {
4223
+ background-color: color-mix(in srgb, #278a4a 20%, transparent);
4224
+ @supports (color: color-mix(in lab, red, red)) {
4225
+ background-color: color-mix(in oklab, var(--color-feedback-success-border) 20%, transparent);
4226
+ }
4227
+ }
3932
4228
  .bg-feedback-success-text {
3933
4229
  background-color: var(--color-feedback-success-text);
3934
4230
  }
@@ -3938,102 +4234,33 @@
3938
4234
  .bg-feedback-warning-border {
3939
4235
  background-color: var(--color-feedback-warning-border);
3940
4236
  }
4237
+ .bg-feedback-warning-border\/20 {
4238
+ background-color: color-mix(in srgb, #c88420 20%, transparent);
4239
+ @supports (color: color-mix(in lab, red, red)) {
4240
+ background-color: color-mix(in oklab, var(--color-feedback-warning-border) 20%, transparent);
4241
+ }
4242
+ }
3941
4243
  .bg-feedback-warning-text {
3942
4244
  background-color: var(--color-feedback-warning-text);
3943
4245
  }
3944
4246
  .bg-gray-50 {
3945
4247
  background-color: var(--color-gray-50);
3946
4248
  }
3947
- .bg-gray-100 {
3948
- background-color: var(--color-gray-100);
3949
- }
3950
- .bg-gray-100\/60 {
3951
- background-color: color-mix(in srgb, #f5f5f4 60%, transparent);
3952
- @supports (color: color-mix(in lab, red, red)) {
3953
- background-color: color-mix(in oklab, var(--color-gray-100) 60%, transparent);
3954
- }
3955
- }
3956
- .bg-gray-200 {
3957
- background-color: var(--color-gray-200);
3958
- }
3959
- .bg-gray-400 {
3960
- background-color: var(--color-gray-400);
3961
- }
3962
4249
  .bg-green-50 {
3963
4250
  background-color: var(--color-green-50);
3964
4251
  }
3965
4252
  .bg-green-100 {
3966
4253
  background-color: var(--color-green-100);
3967
4254
  }
3968
- .bg-green-500 {
3969
- background-color: var(--color-green-500);
3970
- }
3971
- .bg-green-500\/20 {
3972
- background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 20%, transparent);
3973
- @supports (color: color-mix(in lab, red, red)) {
3974
- background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
3975
- }
3976
- }
3977
4255
  .bg-green-600 {
3978
4256
  background-color: var(--color-green-600);
3979
4257
  }
3980
4258
  .bg-inherit {
3981
4259
  background-color: inherit;
3982
4260
  }
3983
- .bg-neutral-black {
3984
- background-color: var(--color-neutral-black);
3985
- }
3986
- .bg-orange-50 {
3987
- background-color: var(--color-orange-50);
3988
- }
3989
- .bg-orange-100 {
3990
- background-color: var(--color-orange-100);
3991
- }
3992
- .bg-orange-500 {
3993
- background-color: var(--color-orange-500);
3994
- }
3995
- .bg-orange-600 {
3996
- background-color: var(--color-orange-600);
3997
- }
3998
- .bg-pink-500 {
3999
- background-color: var(--color-pink-500);
4000
- }
4001
- .bg-pink-600 {
4002
- background-color: var(--color-pink-600);
4003
- }
4004
- .bg-purple-50 {
4005
- background-color: var(--color-purple-50);
4006
- }
4007
- .bg-purple-100 {
4008
- background-color: var(--color-purple-100);
4009
- }
4010
- .bg-purple-500 {
4011
- background-color: var(--color-purple-500);
4012
- }
4013
- .bg-purple-600 {
4014
- background-color: var(--color-purple-600);
4015
- }
4016
4261
  .bg-red-50 {
4017
4262
  background-color: var(--color-red-50);
4018
4263
  }
4019
- .bg-red-100 {
4020
- background-color: var(--color-red-100);
4021
- }
4022
- .bg-red-500 {
4023
- background-color: var(--color-red-500);
4024
- }
4025
- .bg-red-500\/20 {
4026
- background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
4027
- @supports (color: color-mix(in lab, red, red)) {
4028
- background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
4029
- }
4030
- }
4031
- .bg-red-600 {
4032
- background-color: var(--color-red-600);
4033
- }
4034
- .bg-slate-700 {
4035
- background-color: var(--color-slate-700);
4036
- }
4037
4264
  .bg-state-auto {
4038
4265
  background-color: var(--color-state-auto);
4039
4266
  }
@@ -4070,47 +4297,62 @@
4070
4297
  .bg-state-unknown {
4071
4298
  background-color: var(--color-state-unknown);
4072
4299
  }
4073
- .bg-teal-500 {
4074
- background-color: var(--color-teal-500);
4075
- }
4076
4300
  .bg-text-caption {
4077
4301
  background-color: var(--color-text-caption);
4078
4302
  }
4079
4303
  .bg-text-heading {
4080
4304
  background-color: var(--color-text-heading);
4081
4305
  }
4306
+ .bg-text-inverse\/20 {
4307
+ background-color: color-mix(in srgb, #ffffff 20%, transparent);
4308
+ @supports (color: color-mix(in lab, red, red)) {
4309
+ background-color: color-mix(in oklab, var(--color-text-inverse) 20%, transparent);
4310
+ }
4311
+ }
4082
4312
  .bg-text-muted {
4083
4313
  background-color: var(--color-text-muted);
4084
4314
  }
4315
+ .bg-text-primary {
4316
+ background-color: var(--color-text-primary);
4317
+ }
4318
+ .bg-text-secondary {
4319
+ background-color: var(--color-text-secondary);
4320
+ }
4085
4321
  .bg-transparent {
4086
4322
  background-color: transparent;
4087
4323
  }
4088
- .bg-white {
4089
- background-color: var(--color-white);
4324
+ .bg-viz-categorical-3 {
4325
+ background-color: var(--color-viz-categorical-3);
4090
4326
  }
4091
- .bg-white\/20 {
4092
- background-color: color-mix(in srgb, #ffffff 20%, transparent);
4327
+ .bg-viz-categorical-4 {
4328
+ background-color: var(--color-viz-categorical-4);
4329
+ }
4330
+ .bg-viz-categorical-4\/15 {
4331
+ background-color: color-mix(in srgb, #5d89ff 15%, transparent);
4093
4332
  @supports (color: color-mix(in lab, red, red)) {
4094
- background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
4333
+ background-color: color-mix(in oklab, var(--color-viz-categorical-4) 15%, transparent);
4095
4334
  }
4096
4335
  }
4097
- .bg-yellow-50 {
4098
- background-color: var(--color-yellow-50);
4099
- }
4100
- .bg-yellow-100 {
4101
- background-color: var(--color-yellow-100);
4336
+ .bg-viz-categorical-5 {
4337
+ background-color: var(--color-viz-categorical-5);
4102
4338
  }
4103
- .bg-yellow-500 {
4104
- background-color: var(--color-yellow-500);
4339
+ .bg-viz-categorical-5\/10 {
4340
+ background-color: color-mix(in srgb, #9a47e2 10%, transparent);
4341
+ @supports (color: color-mix(in lab, red, red)) {
4342
+ background-color: color-mix(in oklab, var(--color-viz-categorical-5) 10%, transparent);
4343
+ }
4105
4344
  }
4106
- .bg-yellow-500\/20 {
4107
- background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 20%, transparent);
4345
+ .bg-viz-categorical-5\/15 {
4346
+ background-color: color-mix(in srgb, #9a47e2 15%, transparent);
4108
4347
  @supports (color: color-mix(in lab, red, red)) {
4109
- background-color: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
4348
+ background-color: color-mix(in oklab, var(--color-viz-categorical-5) 15%, transparent);
4110
4349
  }
4111
4350
  }
4112
- .bg-zinc-900 {
4113
- background-color: var(--color-zinc-900);
4351
+ .bg-viz-categorical-6 {
4352
+ background-color: var(--color-viz-categorical-6);
4353
+ }
4354
+ .bg-viz-categorical-7 {
4355
+ background-color: var(--color-viz-categorical-7);
4114
4356
  }
4115
4357
  .bg-gradient-to-br {
4116
4358
  --tw-gradient-position: to bottom right in oklab;
@@ -4128,10 +4370,10 @@
4128
4370
  --tw-gradient-from: var(--color-action-brand);
4129
4371
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
4130
4372
  }
4131
- .from-black\/20 {
4132
- --tw-gradient-from: color-mix(in srgb, #000000 20%, transparent);
4373
+ .from-background-modal\/20 {
4374
+ --tw-gradient-from: color-mix(in srgb, rgba(0, 0, 0, 0.15) 20%, transparent);
4133
4375
  @supports (color: color-mix(in lab, red, red)) {
4134
- --tw-gradient-from: color-mix(in oklab, var(--color-black) 20%, transparent);
4376
+ --tw-gradient-from: color-mix(in oklab, var(--color-background-modal) 20%, transparent);
4135
4377
  }
4136
4378
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
4137
4379
  }
@@ -4152,10 +4394,10 @@
4152
4394
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
4153
4395
  --tw-gradient-stops: var(--tw-gradient-via-stops);
4154
4396
  }
4155
- .via-black\/15 {
4156
- --tw-gradient-via: color-mix(in srgb, #000000 15%, transparent);
4397
+ .via-background-modal\/15 {
4398
+ --tw-gradient-via: color-mix(in srgb, rgba(0, 0, 0, 0.15) 15%, transparent);
4157
4399
  @supports (color: color-mix(in lab, red, red)) {
4158
- --tw-gradient-via: color-mix(in oklab, var(--color-black) 15%, transparent);
4400
+ --tw-gradient-via: color-mix(in oklab, var(--color-background-modal) 15%, transparent);
4159
4401
  }
4160
4402
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
4161
4403
  --tw-gradient-stops: var(--tw-gradient-via-stops);
@@ -4164,10 +4406,10 @@
4164
4406
  --tw-gradient-to: var(--color-skeleton-base);
4165
4407
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
4166
4408
  }
4167
- .to-black\/20 {
4168
- --tw-gradient-to: color-mix(in srgb, #000000 20%, transparent);
4409
+ .to-background-modal\/20 {
4410
+ --tw-gradient-to: color-mix(in srgb, rgba(0, 0, 0, 0.15) 20%, transparent);
4169
4411
  @supports (color: color-mix(in lab, red, red)) {
4170
- --tw-gradient-to: color-mix(in oklab, var(--color-black) 20%, transparent);
4412
+ --tw-gradient-to: color-mix(in oklab, var(--color-background-modal) 20%, transparent);
4171
4413
  }
4172
4414
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
4173
4415
  }
@@ -4190,24 +4432,24 @@
4190
4432
  .bg-clip-padding {
4191
4433
  background-clip: padding-box;
4192
4434
  }
4435
+ .fill-action-brand {
4436
+ fill: var(--color-action-brand);
4437
+ }
4438
+ .fill-action-default {
4439
+ fill: var(--color-action-default);
4440
+ }
4193
4441
  .fill-background-muted {
4194
4442
  fill: var(--color-background-muted);
4195
4443
  }
4196
4444
  .fill-background-surface {
4197
4445
  fill: var(--color-background-surface);
4198
4446
  }
4199
- .fill-brand-primary {
4200
- fill: var(--color-brand-primary);
4201
- }
4202
4447
  .fill-neutral-black {
4203
4448
  fill: var(--color-neutral-black);
4204
4449
  }
4205
4450
  .fill-red-500 {
4206
4451
  fill: var(--color-red-500);
4207
4452
  }
4208
- .fill-slate-700 {
4209
- fill: var(--color-slate-700);
4210
- }
4211
4453
  .fill-text-body {
4212
4454
  fill: var(--color-text-body);
4213
4455
  }
@@ -4220,18 +4462,24 @@
4220
4462
  .fill-text-muted {
4221
4463
  fill: var(--color-text-muted);
4222
4464
  }
4465
+ .fill-text-primary {
4466
+ fill: var(--color-text-primary);
4467
+ }
4468
+ .fill-text-secondary {
4469
+ fill: var(--color-text-secondary);
4470
+ }
4223
4471
  .fill-white {
4224
4472
  fill: var(--color-white);
4225
4473
  }
4474
+ .stroke-action-default-hover {
4475
+ stroke: var(--color-action-default-hover);
4476
+ }
4226
4477
  .stroke-border-default {
4227
4478
  stroke: var(--color-border-default);
4228
4479
  }
4229
4480
  .stroke-border-muted {
4230
4481
  stroke: var(--color-border-muted);
4231
4482
  }
4232
- .stroke-gray-800 {
4233
- stroke: var(--color-gray-800);
4234
- }
4235
4483
  .stroke-1 {
4236
4484
  stroke-width: 1;
4237
4485
  }
@@ -4608,14 +4856,6 @@
4608
4856
  .text-\[length\:var\(--control-text-xl\)\] {
4609
4857
  font-size: var(--control-text-xl);
4610
4858
  }
4611
- .leading-5 {
4612
- --tw-leading: var(--spacing-5);
4613
- line-height: var(--spacing-5);
4614
- }
4615
- .leading-6 {
4616
- --tw-leading: var(--spacing-6);
4617
- line-height: var(--spacing-6);
4618
- }
4619
4859
  .leading-\[2\.25\] {
4620
4860
  --tw-leading: 2.25;
4621
4861
  line-height: 2.25;
@@ -4685,8 +4925,11 @@
4685
4925
  .whitespace-pre-line {
4686
4926
  white-space: pre-line;
4687
4927
  }
4688
- .\!text-action-brand {
4689
- color: var(--color-action-brand) !important;
4928
+ .\!text-action-primary {
4929
+ color: var(--color-action-primary) !important;
4930
+ }
4931
+ .\!text-text-label {
4932
+ color: var(--color-text-label) !important;
4690
4933
  }
4691
4934
  .text-\[\#111827\] {
4692
4935
  color: #111827;
@@ -4703,11 +4946,23 @@
4703
4946
  .text-\[color\:var\(--color-action-default-text\)\] {
4704
4947
  color: var(--color-action-default-text);
4705
4948
  }
4949
+ .text-\[color\:var\(--color-action-destructive-text\)\] {
4950
+ color: var(--color-action-destructive-text);
4951
+ }
4952
+ .text-\[color\:var\(--color-action-primary-text\)\] {
4953
+ color: var(--color-action-primary-text);
4954
+ }
4955
+ .text-\[color\:var\(--color-action-secondary-text\)\] {
4956
+ color: var(--color-action-secondary-text);
4957
+ }
4706
4958
  .text-action-brand {
4707
4959
  color: var(--color-action-brand);
4708
4960
  }
4709
- .text-action-default {
4710
- color: var(--color-action-default);
4961
+ .text-action-destructive {
4962
+ color: var(--color-action-destructive);
4963
+ }
4964
+ .text-action-primary {
4965
+ color: var(--color-action-primary);
4711
4966
  }
4712
4967
  .text-amber-800 {
4713
4968
  color: var(--color-amber-800);
@@ -4718,114 +4973,72 @@
4718
4973
  .text-background-body {
4719
4974
  color: var(--color-background-body);
4720
4975
  }
4721
- .text-black {
4722
- color: var(--color-black);
4723
- }
4724
- .text-blue-400 {
4725
- color: var(--color-blue-400);
4726
- }
4727
4976
  .text-blue-500 {
4728
4977
  color: var(--color-blue-500);
4729
4978
  }
4730
- .text-blue-600 {
4731
- color: var(--color-blue-600);
4732
- }
4733
4979
  .text-blue-800 {
4734
4980
  color: var(--color-blue-800);
4735
4981
  }
4736
4982
  .text-blue-900 {
4737
4983
  color: var(--color-blue-900);
4738
4984
  }
4739
- .text-brand-light {
4740
- color: var(--color-brand-light);
4741
- }
4742
4985
  .text-brand-primary {
4743
4986
  color: var(--color-brand-primary);
4744
4987
  }
4745
4988
  .text-current {
4746
4989
  color: currentcolor;
4747
4990
  }
4991
+ .text-feedback-error-border {
4992
+ color: var(--color-feedback-error-border);
4993
+ }
4748
4994
  .text-feedback-error-text {
4749
4995
  color: var(--color-feedback-error-text);
4750
4996
  }
4997
+ .text-feedback-info-border {
4998
+ color: var(--color-feedback-info-border);
4999
+ }
4751
5000
  .text-feedback-info-text {
4752
5001
  color: var(--color-feedback-info-text);
4753
5002
  }
5003
+ .text-feedback-success-border {
5004
+ color: var(--color-feedback-success-border);
5005
+ }
4754
5006
  .text-feedback-success-text {
4755
5007
  color: var(--color-feedback-success-text);
4756
5008
  }
5009
+ .text-feedback-warning-border {
5010
+ color: var(--color-feedback-warning-border);
5011
+ }
4757
5012
  .text-feedback-warning-text {
4758
5013
  color: var(--color-feedback-warning-text);
4759
5014
  }
4760
- .text-gray-300 {
4761
- color: var(--color-gray-300);
4762
- }
4763
- .text-gray-400 {
4764
- color: var(--color-gray-400);
4765
- }
4766
5015
  .text-gray-500 {
4767
5016
  color: var(--color-gray-500);
4768
5017
  }
4769
- .text-gray-600 {
4770
- color: var(--color-gray-600);
4771
- }
4772
5018
  .text-gray-700 {
4773
5019
  color: var(--color-gray-700);
4774
5020
  }
4775
- .text-gray-800 {
4776
- color: var(--color-gray-800);
4777
- }
4778
5021
  .text-gray-900 {
4779
5022
  color: var(--color-gray-900);
4780
5023
  }
4781
5024
  .text-green-600 {
4782
5025
  color: var(--color-green-600);
4783
5026
  }
4784
- .text-green-700 {
4785
- color: var(--color-green-700);
4786
- }
4787
- .text-green-800 {
4788
- color: var(--color-green-800);
4789
- }
4790
5027
  .text-green-900 {
4791
5028
  color: var(--color-green-900);
4792
5029
  }
4793
5030
  .text-map-marker-default {
4794
5031
  color: var(--color-map-marker-default);
4795
5032
  }
4796
- .text-orange-500 {
4797
- color: var(--color-orange-500);
4798
- }
4799
- .text-orange-600 {
4800
- color: var(--color-orange-600);
4801
- }
4802
- .text-orange-800 {
4803
- color: var(--color-orange-800);
4804
- }
4805
- .text-purple-600 {
4806
- color: var(--color-purple-600);
4807
- }
4808
- .text-purple-800 {
4809
- color: var(--color-purple-800);
4810
- }
4811
5033
  .text-red-500 {
4812
5034
  color: var(--color-red-500);
4813
5035
  }
4814
- .text-red-600 {
4815
- color: var(--color-red-600);
4816
- }
4817
- .text-red-700 {
4818
- color: var(--color-red-700);
4819
- }
4820
5036
  .text-red-800 {
4821
5037
  color: var(--color-red-800);
4822
5038
  }
4823
5039
  .text-red-900 {
4824
5040
  color: var(--color-red-900);
4825
5041
  }
4826
- .text-slate-300 {
4827
- color: var(--color-slate-300);
4828
- }
4829
5042
  .text-state-auto-text {
4830
5043
  color: var(--color-state-auto-text);
4831
5044
  }
@@ -4874,44 +5087,44 @@
4874
5087
  .text-text-heading {
4875
5088
  color: var(--color-text-heading);
4876
5089
  }
5090
+ .text-text-inverse {
5091
+ color: var(--color-text-inverse);
5092
+ }
5093
+ .text-text-inverse\/90 {
5094
+ color: color-mix(in srgb, #ffffff 90%, transparent);
5095
+ @supports (color: color-mix(in lab, red, red)) {
5096
+ color: color-mix(in oklab, var(--color-text-inverse) 90%, transparent);
5097
+ }
5098
+ }
4877
5099
  .text-text-link-default {
4878
5100
  color: var(--color-text-link-default);
4879
5101
  }
4880
5102
  .text-text-muted {
4881
5103
  color: var(--color-text-muted);
4882
5104
  }
5105
+ .text-text-onBrand {
5106
+ color: var(--color-text-onBrand);
5107
+ }
4883
5108
  .text-text-onPrimary {
4884
5109
  color: var(--color-text-onPrimary);
4885
5110
  }
4886
5111
  .text-text-placeholder {
4887
5112
  color: var(--color-text-placeholder);
4888
5113
  }
4889
- .text-text-subtle {
4890
- color: var(--color-text-subtle);
4891
- }
4892
- .text-white {
4893
- color: var(--color-white);
4894
- }
4895
- .text-white\/90 {
4896
- color: color-mix(in srgb, #ffffff 90%, transparent);
4897
- @supports (color: color-mix(in lab, red, red)) {
4898
- color: color-mix(in oklab, var(--color-white) 90%, transparent);
4899
- }
4900
- }
4901
- .text-yellow-500 {
4902
- color: var(--color-yellow-500);
5114
+ .text-text-primary {
5115
+ color: var(--color-text-primary);
4903
5116
  }
4904
- .text-yellow-600 {
4905
- color: var(--color-yellow-600);
5117
+ .text-text-secondary {
5118
+ color: var(--color-text-secondary);
4906
5119
  }
4907
- .text-yellow-700 {
4908
- color: var(--color-yellow-700);
5120
+ .text-viz-categorical-4 {
5121
+ color: var(--color-viz-categorical-4);
4909
5122
  }
4910
- .text-yellow-800 {
4911
- color: var(--color-yellow-800);
5123
+ .text-viz-categorical-5 {
5124
+ color: var(--color-viz-categorical-5);
4912
5125
  }
4913
- .text-zinc-900 {
4914
- color: var(--color-zinc-900);
5126
+ .text-white {
5127
+ color: var(--color-white);
4915
5128
  }
4916
5129
  .capitalize {
4917
5130
  text-transform: capitalize;
@@ -4943,7 +5156,7 @@
4943
5156
  text-decoration-color: currentcolor;
4944
5157
  }
4945
5158
  .decoration-text-link-default\/30 {
4946
- text-decoration-color: color-mix(in srgb, #111111 30%, transparent);
5159
+ text-decoration-color: color-mix(in srgb, #2c2a26 30%, transparent);
4947
5160
  @supports (color: color-mix(in lab, red, red)) {
4948
5161
  text-decoration-color: color-mix(in oklab, var(--color-text-link-default) 30%, transparent);
4949
5162
  }
@@ -4960,14 +5173,6 @@
4960
5173
  .underline-offset-4 {
4961
5174
  text-underline-offset: 4px;
4962
5175
  }
4963
- .placeholder-text-muted {
4964
- &::-moz-placeholder {
4965
- color: var(--color-text-muted);
4966
- }
4967
- &::placeholder {
4968
- color: var(--color-text-muted);
4969
- }
4970
- }
4971
5176
  .opacity-0 {
4972
5177
  opacity: 0%;
4973
5178
  }
@@ -5029,10 +5234,6 @@
5029
5234
  --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--color-feedback-error-border));
5030
5235
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
5031
5236
  }
5032
- .shadow-\[inset_0_1px_0_0_theme\(colors\.gray\.600\)\] {
5033
- --tw-shadow: inset 0 1px 0 0 var(--tw-shadow-color, #5d5b56);
5034
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
5035
- }
5036
5237
  .shadow-inner {
5037
5238
  --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
5038
5239
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5049,10 +5250,6 @@
5049
5250
  --tw-shadow: 0 0 #0000;
5050
5251
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
5051
5252
  }
5052
- .shadow-overflow {
5053
- --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(0, 0, 0, 0.10));
5054
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
5055
- }
5056
5253
  .shadow-sm {
5057
5254
  --tw-shadow: 0 1px 4px var(--tw-shadow-color, rgba(0, 0, 0, 0.08)), 0 2px 8px var(--tw-shadow-color, rgba(0, 0, 0, 0.04));
5058
5255
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5061,10 +5258,6 @@
5061
5258
  --tw-shadow: 0 20px 48px var(--tw-shadow-color, rgba(0, 0, 0, 0.16)), 0 8px 16px var(--tw-shadow-color, rgba(0, 0, 0, 0.08));
5062
5259
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
5063
5260
  }
5064
- .shadow-xs {
5065
- --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(0, 0, 0, 0.06));
5066
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
5067
- }
5068
5261
  .\!ring-0 {
5069
5262
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
5070
5263
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
@@ -5097,6 +5290,9 @@
5097
5290
  --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 30%, transparent) var(--tw-shadow-alpha), transparent);
5098
5291
  }
5099
5292
  }
5293
+ .ring-action-primary {
5294
+ --tw-ring-color: var(--color-action-primary);
5295
+ }
5100
5296
  .ring-background-surface {
5101
5297
  --tw-ring-color: var(--color-background-surface);
5102
5298
  }
@@ -5112,9 +5308,6 @@
5112
5308
  .ring-border-muted {
5113
5309
  --tw-ring-color: var(--color-border-muted);
5114
5310
  }
5115
- .ring-gray-200 {
5116
- --tw-ring-color: var(--color-gray-200);
5117
- }
5118
5311
  .ring-offset-2 {
5119
5312
  --tw-ring-offset-width: 2px;
5120
5313
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -5292,9 +5485,9 @@
5292
5485
  .ring-inset {
5293
5486
  --tw-ring-inset: inset;
5294
5487
  }
5295
- .group-invalid\:bg-red-600 {
5488
+ .group-invalid\:bg-feedback-error-border {
5296
5489
  &:is(:where(.group):invalid *) {
5297
- background-color: var(--color-red-600);
5490
+ background-color: var(--color-feedback-error-border);
5298
5491
  }
5299
5492
  }
5300
5493
  .group-invalid\:outline-2 {
@@ -5332,6 +5525,13 @@
5332
5525
  }
5333
5526
  }
5334
5527
  }
5528
+ .group-hover\:bg-action-brand-hover {
5529
+ &:is(:where(.group):hover *) {
5530
+ @media (hover: hover) {
5531
+ background-color: var(--color-action-brand-hover);
5532
+ }
5533
+ }
5534
+ }
5335
5535
  .group-hover\:bg-action-brand\/50 {
5336
5536
  &:is(:where(.group):hover *) {
5337
5537
  @media (hover: hover) {
@@ -5356,59 +5556,32 @@
5356
5556
  }
5357
5557
  }
5358
5558
  }
5359
- .group-hover\:bg-brand-primary\/15 {
5559
+ .group-hover\:text-text-link-hover {
5360
5560
  &:is(:where(.group):hover *) {
5361
5561
  @media (hover: hover) {
5362
- background-color: color-mix(in srgb, #111111 15%, transparent);
5363
- @supports (color: color-mix(in lab, red, red)) {
5364
- background-color: color-mix(in oklab, var(--color-brand-primary) 15%, transparent);
5365
- }
5562
+ color: var(--color-text-link-hover);
5366
5563
  }
5367
5564
  }
5368
5565
  }
5369
- .group-hover\:bg-brand-primary\/90 {
5566
+ .group-hover\:text-text-primary {
5370
5567
  &:is(:where(.group):hover *) {
5371
5568
  @media (hover: hover) {
5372
- background-color: color-mix(in srgb, #111111 90%, transparent);
5373
- @supports (color: color-mix(in lab, red, red)) {
5374
- background-color: color-mix(in oklab, var(--color-brand-primary) 90%, transparent);
5375
- }
5569
+ color: var(--color-text-primary);
5376
5570
  }
5377
5571
  }
5378
5572
  }
5379
- .group-hover\:bg-gray-200 {
5573
+ .group-hover\:opacity-100 {
5380
5574
  &:is(:where(.group):hover *) {
5381
5575
  @media (hover: hover) {
5382
- background-color: var(--color-gray-200);
5576
+ opacity: 100%;
5383
5577
  }
5384
5578
  }
5385
5579
  }
5386
- .group-hover\:text-brand-primary {
5387
- &:is(:where(.group):hover *) {
5388
- @media (hover: hover) {
5389
- color: var(--color-brand-primary);
5390
- }
5391
- }
5392
- }
5393
- .group-hover\:text-text-heading {
5394
- &:is(:where(.group):hover *) {
5395
- @media (hover: hover) {
5396
- color: var(--color-text-heading);
5397
- }
5398
- }
5399
- }
5400
- .group-hover\:opacity-100 {
5401
- &:is(:where(.group):hover *) {
5402
- @media (hover: hover) {
5403
- opacity: 100%;
5404
- }
5405
- }
5406
- }
5407
- .group-invalid\:group-hover\:bg-red-200 {
5580
+ .group-invalid\:group-hover\:bg-feedback-error-background {
5408
5581
  &:is(:where(.group):invalid *) {
5409
5582
  &:is(:where(.group):hover *) {
5410
5583
  @media (hover: hover) {
5411
- background-color: var(--color-red-200);
5584
+ background-color: var(--color-feedback-error-background);
5412
5585
  }
5413
5586
  }
5414
5587
  }
@@ -5418,11 +5591,6 @@
5418
5591
  opacity: 100%;
5419
5592
  }
5420
5593
  }
5421
- .group-disabled\:text-gray-200 {
5422
- &:is(:where(.group):disabled *) {
5423
- color: var(--color-gray-200);
5424
- }
5425
- }
5426
5594
  .group-disabled\:text-text-disabled {
5427
5595
  &:is(:where(.group):disabled *) {
5428
5596
  color: var(--color-text-disabled);
@@ -5459,12 +5627,20 @@
5459
5627
  opacity: 100%;
5460
5628
  }
5461
5629
  }
5462
- .placeholder\:text-text-placeholder {
5630
+ .placeholder\:text-text-disabled {
5463
5631
  &::-moz-placeholder {
5464
- color: var(--color-text-placeholder);
5632
+ color: var(--color-text-disabled);
5465
5633
  }
5466
5634
  &::placeholder {
5467
- color: var(--color-text-placeholder);
5635
+ color: var(--color-text-disabled);
5636
+ }
5637
+ }
5638
+ .placeholder\:text-text-secondary {
5639
+ &::-moz-placeholder {
5640
+ color: var(--color-text-secondary);
5641
+ }
5642
+ &::placeholder {
5643
+ color: var(--color-text-secondary);
5468
5644
  }
5469
5645
  }
5470
5646
  .before\:absolute {
@@ -5644,14 +5820,19 @@
5644
5820
  padding-right: var(--spacing-0);
5645
5821
  }
5646
5822
  }
5647
- .visited\:text-action-brand {
5823
+ .visited\:text-action-primary {
5648
5824
  &:visited {
5649
- color: var(--color-action-brand);
5825
+ color: var(--color-action-primary);
5650
5826
  }
5651
5827
  }
5652
- .visited\:text-text-muted {
5828
+ .visited\:text-text-link-default {
5653
5829
  &:visited {
5654
- color: var(--color-text-muted);
5830
+ color: var(--color-text-link-default);
5831
+ }
5832
+ }
5833
+ .visited\:text-text-secondary {
5834
+ &:visited {
5835
+ color: var(--color-text-secondary);
5655
5836
  }
5656
5837
  }
5657
5838
  .invalid\:bg-feedback-error-border {
@@ -5740,6 +5921,13 @@
5740
5921
  }
5741
5922
  }
5742
5923
  }
5924
+ .hover\:border-action-primary-hover {
5925
+ &:hover {
5926
+ @media (hover: hover) {
5927
+ border-color: var(--color-action-primary-hover);
5928
+ }
5929
+ }
5930
+ }
5743
5931
  .hover\:border-border-default {
5744
5932
  &:hover {
5745
5933
  @media (hover: hover) {
@@ -5761,16 +5949,6 @@
5761
5949
  }
5762
5950
  }
5763
5951
  }
5764
- .hover\:bg-action-brand\/15 {
5765
- &:hover {
5766
- @media (hover: hover) {
5767
- background-color: color-mix(in srgb, #111111 15%, transparent);
5768
- @supports (color: color-mix(in lab, red, red)) {
5769
- background-color: color-mix(in oklab, var(--color-action-brand) 15%, transparent);
5770
- }
5771
- }
5772
- }
5773
- }
5774
5952
  .hover\:bg-action-brand\/90 {
5775
5953
  &:hover {
5776
5954
  @media (hover: hover) {
@@ -5788,65 +5966,92 @@
5788
5966
  }
5789
5967
  }
5790
5968
  }
5791
- .hover\:bg-action-default\/90 {
5969
+ .hover\:bg-action-destructive-hover {
5970
+ &:hover {
5971
+ @media (hover: hover) {
5972
+ background-color: var(--color-action-destructive-hover);
5973
+ }
5974
+ }
5975
+ }
5976
+ .hover\:bg-action-primary-hover {
5977
+ &:hover {
5978
+ @media (hover: hover) {
5979
+ background-color: var(--color-action-primary-hover);
5980
+ }
5981
+ }
5982
+ }
5983
+ .hover\:bg-action-primary\/15 {
5984
+ &:hover {
5985
+ @media (hover: hover) {
5986
+ background-color: color-mix(in srgb, #111111 15%, transparent);
5987
+ @supports (color: color-mix(in lab, red, red)) {
5988
+ background-color: color-mix(in oklab, var(--color-action-primary) 15%, transparent);
5989
+ }
5990
+ }
5991
+ }
5992
+ }
5993
+ .hover\:bg-action-primary\/90 {
5792
5994
  &:hover {
5793
5995
  @media (hover: hover) {
5794
5996
  background-color: color-mix(in srgb, #111111 90%, transparent);
5795
5997
  @supports (color: color-mix(in lab, red, red)) {
5796
- background-color: color-mix(in oklab, var(--color-action-default) 90%, transparent);
5998
+ background-color: color-mix(in oklab, var(--color-action-primary) 90%, transparent);
5797
5999
  }
5798
6000
  }
5799
6001
  }
5800
6002
  }
5801
- .hover\:bg-background-hover {
6003
+ .hover\:bg-action-secondary-hover {
5802
6004
  &:hover {
5803
6005
  @media (hover: hover) {
5804
- background-color: var(--color-background-hover);
6006
+ background-color: var(--color-action-secondary-hover);
5805
6007
  }
5806
6008
  }
5807
6009
  }
5808
- .hover\:bg-background-muted {
6010
+ .hover\:bg-background-hover {
5809
6011
  &:hover {
5810
6012
  @media (hover: hover) {
5811
- background-color: var(--color-background-muted);
6013
+ background-color: var(--color-background-hover);
5812
6014
  }
5813
6015
  }
5814
6016
  }
5815
- .hover\:bg-background-selected {
6017
+ .hover\:bg-background-modal\/10 {
5816
6018
  &:hover {
5817
6019
  @media (hover: hover) {
5818
- background-color: var(--color-background-selected);
6020
+ background-color: color-mix(in srgb, rgba(0, 0, 0, 0.15) 10%, transparent);
6021
+ @supports (color: color-mix(in lab, red, red)) {
6022
+ background-color: color-mix(in oklab, var(--color-background-modal) 10%, transparent);
6023
+ }
5819
6024
  }
5820
6025
  }
5821
6026
  }
5822
- .hover\:bg-background-surface {
6027
+ .hover\:bg-background-muted {
5823
6028
  &:hover {
5824
6029
  @media (hover: hover) {
5825
- background-color: var(--color-background-surface);
6030
+ background-color: var(--color-background-muted);
5826
6031
  }
5827
6032
  }
5828
6033
  }
5829
- .hover\:bg-black\/10 {
6034
+ .hover\:bg-background-selected {
5830
6035
  &:hover {
5831
6036
  @media (hover: hover) {
5832
- background-color: color-mix(in srgb, #000000 10%, transparent);
5833
- @supports (color: color-mix(in lab, red, red)) {
5834
- background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
5835
- }
6037
+ background-color: var(--color-background-selected);
5836
6038
  }
5837
6039
  }
5838
6040
  }
5839
- .hover\:bg-blue-200 {
6041
+ .hover\:bg-background-surface {
5840
6042
  &:hover {
5841
6043
  @media (hover: hover) {
5842
- background-color: var(--color-blue-200);
6044
+ background-color: var(--color-background-surface);
5843
6045
  }
5844
6046
  }
5845
6047
  }
5846
- .hover\:bg-blue-600 {
6048
+ .hover\:bg-background-surface\/90 {
5847
6049
  &:hover {
5848
6050
  @media (hover: hover) {
5849
- background-color: var(--color-blue-600);
6051
+ background-color: color-mix(in srgb, #ffffff 90%, transparent);
6052
+ @supports (color: color-mix(in lab, red, red)) {
6053
+ background-color: color-mix(in oklab, var(--color-background-surface) 90%, transparent);
6054
+ }
5850
6055
  }
5851
6056
  }
5852
6057
  }
@@ -5881,16 +6086,6 @@
5881
6086
  }
5882
6087
  }
5883
6088
  }
5884
- .hover\:bg-feedback-error-background\/50 {
5885
- &:hover {
5886
- @media (hover: hover) {
5887
- background-color: color-mix(in srgb, #fdecec 50%, transparent);
5888
- @supports (color: color-mix(in lab, red, red)) {
5889
- background-color: color-mix(in oklab, var(--color-feedback-error-background) 50%, transparent);
5890
- }
5891
- }
5892
- }
5893
- }
5894
6089
  .hover\:bg-feedback-error-background\/80 {
5895
6090
  &:hover {
5896
6091
  @media (hover: hover) {
@@ -5911,70 +6106,59 @@
5911
6106
  }
5912
6107
  }
5913
6108
  }
5914
- .hover\:bg-gray-50 {
5915
- &:hover {
5916
- @media (hover: hover) {
5917
- background-color: var(--color-gray-50);
5918
- }
5919
- }
5920
- }
5921
- .hover\:bg-gray-100 {
6109
+ .hover\:bg-text-body {
5922
6110
  &:hover {
5923
6111
  @media (hover: hover) {
5924
- background-color: var(--color-gray-100);
6112
+ background-color: var(--color-text-body);
5925
6113
  }
5926
6114
  }
5927
6115
  }
5928
- .hover\:bg-red-50 {
6116
+ .hover\:bg-text-inverse\/10 {
5929
6117
  &:hover {
5930
6118
  @media (hover: hover) {
5931
- background-color: var(--color-red-50);
5932
- }
5933
- }
5934
- }
5935
- .hover\:bg-red-700 {
5936
- &:hover {
5937
- @media (hover: hover) {
5938
- background-color: var(--color-red-700);
6119
+ background-color: color-mix(in srgb, #ffffff 10%, transparent);
6120
+ @supports (color: color-mix(in lab, red, red)) {
6121
+ background-color: color-mix(in oklab, var(--color-text-inverse) 10%, transparent);
6122
+ }
5939
6123
  }
5940
6124
  }
5941
6125
  }
5942
- .hover\:bg-text-body\/5 {
6126
+ .hover\:bg-text-primary\/5 {
5943
6127
  &:hover {
5944
6128
  @media (hover: hover) {
5945
6129
  background-color: color-mix(in srgb, #2c2a26 5%, transparent);
5946
6130
  @supports (color: color-mix(in lab, red, red)) {
5947
- background-color: color-mix(in oklab, var(--color-text-body) 5%, transparent);
6131
+ background-color: color-mix(in oklab, var(--color-text-primary) 5%, transparent);
5948
6132
  }
5949
6133
  }
5950
6134
  }
5951
6135
  }
5952
- .hover\:bg-text-body\/\[0\.05\] {
6136
+ .hover\:bg-text-primary\/10 {
5953
6137
  &:hover {
5954
6138
  @media (hover: hover) {
5955
- background-color: color-mix(in srgb, #2c2a26 5%, transparent);
6139
+ background-color: color-mix(in srgb, #2c2a26 10%, transparent);
5956
6140
  @supports (color: color-mix(in lab, red, red)) {
5957
- background-color: color-mix(in oklab, var(--color-text-body) 5%, transparent);
6141
+ background-color: color-mix(in oklab, var(--color-text-primary) 10%, transparent);
5958
6142
  }
5959
6143
  }
5960
6144
  }
5961
6145
  }
5962
- .hover\:bg-white\/10 {
6146
+ .hover\:bg-text-primary\/\[0\.05\] {
5963
6147
  &:hover {
5964
6148
  @media (hover: hover) {
5965
- background-color: color-mix(in srgb, #ffffff 10%, transparent);
6149
+ background-color: color-mix(in srgb, #2c2a26 5%, transparent);
5966
6150
  @supports (color: color-mix(in lab, red, red)) {
5967
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
6151
+ background-color: color-mix(in oklab, var(--color-text-primary) 5%, transparent);
5968
6152
  }
5969
6153
  }
5970
6154
  }
5971
6155
  }
5972
- .hover\:bg-white\/90 {
6156
+ .hover\:bg-viz-categorical-4\/20 {
5973
6157
  &:hover {
5974
6158
  @media (hover: hover) {
5975
- background-color: color-mix(in srgb, #ffffff 90%, transparent);
6159
+ background-color: color-mix(in srgb, #5d89ff 20%, transparent);
5976
6160
  @supports (color: color-mix(in lab, red, red)) {
5977
- background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
6161
+ background-color: color-mix(in oklab, var(--color-viz-categorical-4) 20%, transparent);
5978
6162
  }
5979
6163
  }
5980
6164
  }
@@ -5994,41 +6178,37 @@
5994
6178
  }
5995
6179
  }
5996
6180
  }
5997
- .hover\:text-action-brand-hover {
6181
+ .hover\:text-action-primary {
5998
6182
  &:hover {
5999
6183
  @media (hover: hover) {
6000
- color: var(--color-action-brand-hover);
6184
+ color: var(--color-action-primary);
6001
6185
  }
6002
6186
  }
6003
6187
  }
6004
- .hover\:text-action-brand\/90 {
6188
+ .hover\:text-action-primary-hover {
6005
6189
  &:hover {
6006
6190
  @media (hover: hover) {
6007
- color: color-mix(in srgb, #111111 90%, transparent);
6008
- @supports (color: color-mix(in lab, red, red)) {
6009
- color: color-mix(in oklab, var(--color-action-brand) 90%, transparent);
6010
- }
6191
+ color: var(--color-action-primary-hover);
6011
6192
  }
6012
6193
  }
6013
6194
  }
6014
- .hover\:text-brand-primary {
6195
+ .hover\:text-action-primary\/90 {
6015
6196
  &:hover {
6016
6197
  @media (hover: hover) {
6017
- color: var(--color-brand-primary);
6018
- }
6019
- }
6020
- }
6021
- .hover\:text-text-body {
6022
- &:hover {
6023
- @media (hover: hover) {
6024
- color: var(--color-text-body);
6198
+ color: color-mix(in srgb, #111111 90%, transparent);
6199
+ @supports (color: color-mix(in lab, red, red)) {
6200
+ color: color-mix(in oklab, var(--color-action-primary) 90%, transparent);
6201
+ }
6025
6202
  }
6026
6203
  }
6027
6204
  }
6028
- .hover\:text-text-heading {
6205
+ .hover\:text-text-inverse\/80 {
6029
6206
  &:hover {
6030
6207
  @media (hover: hover) {
6031
- color: var(--color-text-heading);
6208
+ color: color-mix(in srgb, #ffffff 80%, transparent);
6209
+ @supports (color: color-mix(in lab, red, red)) {
6210
+ color: color-mix(in oklab, var(--color-text-inverse) 80%, transparent);
6211
+ }
6032
6212
  }
6033
6213
  }
6034
6214
  }
@@ -6039,20 +6219,17 @@
6039
6219
  }
6040
6220
  }
6041
6221
  }
6042
- .hover\:text-text-muted {
6222
+ .hover\:text-text-primary {
6043
6223
  &:hover {
6044
6224
  @media (hover: hover) {
6045
- color: var(--color-text-muted);
6225
+ color: var(--color-text-primary);
6046
6226
  }
6047
6227
  }
6048
6228
  }
6049
- .hover\:text-white\/80 {
6229
+ .hover\:text-text-secondary {
6050
6230
  &:hover {
6051
6231
  @media (hover: hover) {
6052
- color: color-mix(in srgb, #ffffff 80%, transparent);
6053
- @supports (color: color-mix(in lab, red, red)) {
6054
- color: color-mix(in oklab, var(--color-white) 80%, transparent);
6055
- }
6232
+ color: var(--color-text-secondary);
6056
6233
  }
6057
6234
  }
6058
6235
  }
@@ -6174,9 +6351,9 @@
6174
6351
  --tw-ring-color: var(--color-action-brand);
6175
6352
  }
6176
6353
  }
6177
- .focus\:ring-action-default {
6354
+ .focus\:ring-action-primary {
6178
6355
  &:focus {
6179
- --tw-ring-color: var(--color-action-default);
6356
+ --tw-ring-color: var(--color-action-primary);
6180
6357
  }
6181
6358
  }
6182
6359
  .focus\:ring-border-focus {
@@ -6208,9 +6385,9 @@
6208
6385
  border-width: 0px !important;
6209
6386
  }
6210
6387
  }
6211
- .focus-visible\:bg-brand-light {
6388
+ .focus-visible\:bg-background-muted {
6212
6389
  &:focus-visible {
6213
- background-color: var(--color-brand-light);
6390
+ background-color: var(--color-background-muted);
6214
6391
  }
6215
6392
  }
6216
6393
  .focus-visible\:\!ring-0 {
@@ -6225,6 +6402,28 @@
6225
6402
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
6226
6403
  }
6227
6404
  }
6405
+ .focus-visible\:ring-2 {
6406
+ &:focus-visible {
6407
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
6408
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
6409
+ }
6410
+ }
6411
+ .focus-visible\:ring-border-focus {
6412
+ &:focus-visible {
6413
+ --tw-ring-color: var(--color-border-focus);
6414
+ }
6415
+ }
6416
+ .focus-visible\:ring-offset-1 {
6417
+ &:focus-visible {
6418
+ --tw-ring-offset-width: 1px;
6419
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
6420
+ }
6421
+ }
6422
+ .focus-visible\:ring-offset-background-surface {
6423
+ &:focus-visible {
6424
+ --tw-ring-offset-color: var(--color-background-surface);
6425
+ }
6426
+ }
6228
6427
  .focus-visible\:outline {
6229
6428
  &:focus-visible {
6230
6429
  outline-style: var(--tw-outline-style);
@@ -6242,9 +6441,9 @@
6242
6441
  outline-offset: 0px;
6243
6442
  }
6244
6443
  }
6245
- .focus-visible\:outline-action-brand {
6444
+ .focus-visible\:outline-\[color\:var\(--color-action-secondary-text\)\] {
6246
6445
  &:focus-visible {
6247
- outline-color: var(--color-action-brand);
6446
+ outline-color: var(--color-action-secondary-text);
6248
6447
  }
6249
6448
  }
6250
6449
  .focus-visible\:outline-action-default {
@@ -6252,6 +6451,11 @@
6252
6451
  outline-color: var(--color-action-default);
6253
6452
  }
6254
6453
  }
6454
+ .focus-visible\:outline-action-primary {
6455
+ &:focus-visible {
6456
+ outline-color: var(--color-action-primary);
6457
+ }
6458
+ }
6255
6459
  .focus-visible\:\!outline-none {
6256
6460
  &:focus-visible {
6257
6461
  --tw-outline-style: none !important;
@@ -6295,14 +6499,14 @@
6295
6499
  cursor: not-allowed;
6296
6500
  }
6297
6501
  }
6298
- .disabled\:text-gray-300 {
6502
+ .disabled\:text-text-disabled {
6299
6503
  &:disabled {
6300
- color: var(--color-gray-300);
6504
+ color: var(--color-text-disabled);
6301
6505
  }
6302
6506
  }
6303
- .disabled\:text-text-muted {
6507
+ .disabled\:text-text-secondary {
6304
6508
  &:disabled {
6305
- color: var(--color-text-muted);
6509
+ color: var(--color-text-secondary);
6306
6510
  }
6307
6511
  }
6308
6512
  .disabled\:opacity-40 {
@@ -6360,6 +6564,11 @@
6360
6564
  --tw-ring-color: var(--color-action-default);
6361
6565
  }
6362
6566
  }
6567
+ .data-\[focus-visible\]\:ring-action-primary {
6568
+ &[data-focus-visible] {
6569
+ --tw-ring-color: var(--color-action-primary);
6570
+ }
6571
+ }
6363
6572
  .data-\[focus-visible\]\:ring-feedback-error-border {
6364
6573
  &[data-focus-visible] {
6365
6574
  --tw-ring-color: var(--color-feedback-error-border);
@@ -6407,9 +6616,9 @@
6407
6616
  background-color: var(--color-feedback-error-background);
6408
6617
  }
6409
6618
  }
6410
- .data-\[focused\]\:text-text-body {
6619
+ .data-\[focused\]\:text-text-primary {
6411
6620
  &[data-focused] {
6412
- color: var(--color-text-body);
6621
+ color: var(--color-text-primary);
6413
6622
  }
6414
6623
  }
6415
6624
  .data-\[focused\]\:opacity-100 {
@@ -6417,9 +6626,31 @@
6417
6626
  opacity: 100%;
6418
6627
  }
6419
6628
  }
6420
- .data-\[placeholder\]\:text-text-placeholder {
6629
+ .data-\[focused\]\:ring-2 {
6630
+ &[data-focused] {
6631
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
6632
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
6633
+ }
6634
+ }
6635
+ .data-\[focused\]\:ring-border-focus {
6636
+ &[data-focused] {
6637
+ --tw-ring-color: var(--color-border-focus);
6638
+ }
6639
+ }
6640
+ .data-\[focused\]\:ring-offset-1 {
6641
+ &[data-focused] {
6642
+ --tw-ring-offset-width: 1px;
6643
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
6644
+ }
6645
+ }
6646
+ .data-\[focused\]\:ring-offset-background-surface {
6647
+ &[data-focused] {
6648
+ --tw-ring-offset-color: var(--color-background-surface);
6649
+ }
6650
+ }
6651
+ .data-\[placeholder\]\:text-text-disabled {
6421
6652
  &[data-placeholder] {
6422
- color: var(--color-text-placeholder);
6653
+ color: var(--color-text-disabled);
6423
6654
  }
6424
6655
  }
6425
6656
  .data-\[selected\]\:bg-background-selected {
@@ -6438,24 +6669,24 @@
6438
6669
  opacity: 100%;
6439
6670
  }
6440
6671
  }
6441
- .supports-\[-moz-appearance\:none\]\:bg-gray-100 {
6672
+ .supports-\[-moz-appearance\:none\]\:bg-background-muted {
6442
6673
  @supports (-moz-appearance:none) {
6443
- background-color: var(--color-gray-100);
6674
+ background-color: var(--color-background-muted);
6444
6675
  }
6445
6676
  }
6446
- .supports-\[backdrop-filter\]\:bg-background-surface\/70 {
6677
+ .supports-\[backdrop-filter\]\:bg-background-modal\/15 {
6447
6678
  @supports (backdrop-filter: var(--tw)) {
6448
- background-color: color-mix(in srgb, #ffffff 70%, transparent);
6679
+ background-color: color-mix(in srgb, rgba(0, 0, 0, 0.15) 15%, transparent);
6449
6680
  @supports (color: color-mix(in lab, red, red)) {
6450
- background-color: color-mix(in oklab, var(--color-background-surface) 70%, transparent);
6681
+ background-color: color-mix(in oklab, var(--color-background-modal) 15%, transparent);
6451
6682
  }
6452
6683
  }
6453
6684
  }
6454
- .supports-\[backdrop-filter\]\:bg-black\/15 {
6685
+ .supports-\[backdrop-filter\]\:bg-background-surface\/70 {
6455
6686
  @supports (backdrop-filter: var(--tw)) {
6456
- background-color: color-mix(in srgb, #000000 15%, transparent);
6687
+ background-color: color-mix(in srgb, #ffffff 70%, transparent);
6457
6688
  @supports (color: color-mix(in lab, red, red)) {
6458
- background-color: color-mix(in oklab, var(--color-black) 15%, transparent);
6689
+ background-color: color-mix(in oklab, var(--color-background-surface) 70%, transparent);
6459
6690
  }
6460
6691
  }
6461
6692
  }
@@ -7093,24 +7324,6 @@
7093
7324
  padding-bottom: var(--spacing-28);
7094
7325
  }
7095
7326
  }
7096
- .md\:text-2xl {
7097
- @media (width >= 48rem) {
7098
- font-size: var(--text-2xl);
7099
- line-height: var(--tw-leading, var(--text-2xl--line-height));
7100
- }
7101
- }
7102
- .md\:text-3xl {
7103
- @media (width >= 48rem) {
7104
- font-size: var(--text-3xl);
7105
- line-height: var(--tw-leading, var(--text-3xl--line-height));
7106
- }
7107
- }
7108
- .md\:text-4xl {
7109
- @media (width >= 48rem) {
7110
- font-size: var(--text-4xl);
7111
- line-height: var(--tw-leading, var(--text-4xl--line-height));
7112
- }
7113
- }
7114
7327
  .md\:text-lg {
7115
7328
  @media (width >= 48rem) {
7116
7329
  font-size: var(--text-lg);
@@ -7123,12 +7336,6 @@
7123
7336
  line-height: var(--tw-leading, var(--text-sm--line-height));
7124
7337
  }
7125
7338
  }
7126
- .md\:text-xl {
7127
- @media (width >= 48rem) {
7128
- font-size: var(--text-xl);
7129
- line-height: var(--tw-leading, var(--text-xl--line-height));
7130
- }
7131
- }
7132
7339
  .md\:text-xs {
7133
7340
  @media (width >= 48rem) {
7134
7341
  font-size: var(--text-xs);
@@ -7637,37 +7844,29 @@
7637
7844
  border-color: var(--color-blue-800);
7638
7845
  }
7639
7846
  }
7640
- .dark\:border-gray-600 {
7641
- @media (prefers-color-scheme: dark) {
7642
- border-color: var(--color-gray-600);
7643
- }
7644
- }
7645
- .dark\:border-gray-700 {
7847
+ .dark\:border-border-muted {
7646
7848
  @media (prefers-color-scheme: dark) {
7647
- border-color: var(--color-gray-700);
7849
+ border-color: var(--color-border-muted);
7648
7850
  }
7649
7851
  }
7650
- .dark\:border-gray-800 {
7852
+ .dark\:border-feedback-info-border {
7651
7853
  @media (prefers-color-scheme: dark) {
7652
- border-color: var(--color-gray-800);
7854
+ border-color: var(--color-feedback-info-border);
7653
7855
  }
7654
7856
  }
7655
- .dark\:border-red-800 {
7857
+ .dark\:border-gray-600 {
7656
7858
  @media (prefers-color-scheme: dark) {
7657
- border-color: var(--color-red-800);
7859
+ border-color: var(--color-gray-600);
7658
7860
  }
7659
7861
  }
7660
- .dark\:border-white\/10 {
7862
+ .dark\:border-gray-700 {
7661
7863
  @media (prefers-color-scheme: dark) {
7662
- border-color: color-mix(in srgb, #ffffff 10%, transparent);
7663
- @supports (color: color-mix(in lab, red, red)) {
7664
- border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
7665
- }
7864
+ border-color: var(--color-gray-700);
7666
7865
  }
7667
7866
  }
7668
- .dark\:border-y-zinc-700 {
7867
+ .dark\:border-red-800 {
7669
7868
  @media (prefers-color-scheme: dark) {
7670
- border-block-color: var(--color-zinc-700);
7869
+ border-color: var(--color-red-800);
7671
7870
  }
7672
7871
  }
7673
7872
  .dark\:bg-amber-950 {
@@ -7675,17 +7874,9 @@
7675
7874
  background-color: var(--color-amber-950);
7676
7875
  }
7677
7876
  }
7678
- .dark\:bg-blue-500 {
7877
+ .dark\:bg-background-muted {
7679
7878
  @media (prefers-color-scheme: dark) {
7680
- background-color: var(--color-blue-500);
7681
- }
7682
- }
7683
- .dark\:bg-blue-900\/20 {
7684
- @media (prefers-color-scheme: dark) {
7685
- background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
7686
- @supports (color: color-mix(in lab, red, red)) {
7687
- background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
7688
- }
7879
+ background-color: var(--color-background-muted);
7689
7880
  }
7690
7881
  }
7691
7882
  .dark\:bg-blue-950 {
@@ -7693,22 +7884,19 @@
7693
7884
  background-color: var(--color-blue-950);
7694
7885
  }
7695
7886
  }
7696
- .dark\:bg-gray-800 {
7887
+ .dark\:bg-feedback-info-background {
7697
7888
  @media (prefers-color-scheme: dark) {
7698
- background-color: var(--color-gray-800);
7889
+ background-color: var(--color-feedback-info-background);
7699
7890
  }
7700
7891
  }
7701
- .dark\:bg-gray-900 {
7892
+ .dark\:bg-feedback-success-background {
7702
7893
  @media (prefers-color-scheme: dark) {
7703
- background-color: var(--color-gray-900);
7894
+ background-color: var(--color-feedback-success-background);
7704
7895
  }
7705
7896
  }
7706
- .dark\:bg-green-900\/20 {
7897
+ .dark\:bg-gray-900 {
7707
7898
  @media (prefers-color-scheme: dark) {
7708
- background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 20%, transparent);
7709
- @supports (color: color-mix(in lab, red, red)) {
7710
- background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent);
7711
- }
7899
+ background-color: var(--color-gray-900);
7712
7900
  }
7713
7901
  }
7714
7902
  .dark\:bg-red-950 {
@@ -7716,52 +7904,6 @@
7716
7904
  background-color: var(--color-red-950);
7717
7905
  }
7718
7906
  }
7719
- .dark\:bg-slate-600 {
7720
- @media (prefers-color-scheme: dark) {
7721
- background-color: var(--color-slate-600);
7722
- }
7723
- }
7724
- .dark\:bg-zinc-100 {
7725
- @media (prefers-color-scheme: dark) {
7726
- background-color: var(--color-zinc-100);
7727
- }
7728
- }
7729
- .dark\:bg-zinc-400 {
7730
- @media (prefers-color-scheme: dark) {
7731
- background-color: var(--color-zinc-400);
7732
- }
7733
- }
7734
- .dark\:bg-zinc-700 {
7735
- @media (prefers-color-scheme: dark) {
7736
- background-color: var(--color-zinc-700);
7737
- }
7738
- }
7739
- .dark\:bg-zinc-700\/60 {
7740
- @media (prefers-color-scheme: dark) {
7741
- background-color: color-mix(in srgb, oklch(37% 0.013 285.805) 60%, transparent);
7742
- @supports (color: color-mix(in lab, red, red)) {
7743
- background-color: color-mix(in oklab, var(--color-zinc-700) 60%, transparent);
7744
- }
7745
- }
7746
- }
7747
- .dark\:bg-zinc-900 {
7748
- @media (prefers-color-scheme: dark) {
7749
- background-color: var(--color-zinc-900);
7750
- }
7751
- }
7752
- .dark\:fill-slate-600 {
7753
- @media (prefers-color-scheme: dark) {
7754
- fill: var(--color-slate-600);
7755
- }
7756
- }
7757
- .dark\:stroke-white\/10 {
7758
- @media (prefers-color-scheme: dark) {
7759
- stroke: color-mix(in srgb, #ffffff 10%, transparent);
7760
- @supports (color: color-mix(in lab, red, red)) {
7761
- stroke: color-mix(in oklab, var(--color-white) 10%, transparent);
7762
- }
7763
- }
7764
- }
7765
7907
  .dark\:text-amber-100 {
7766
7908
  @media (prefers-color-scheme: dark) {
7767
7909
  color: var(--color-amber-100);
@@ -7782,6 +7924,11 @@
7782
7924
  color: var(--color-blue-200);
7783
7925
  }
7784
7926
  }
7927
+ .dark\:text-feedback-info-text {
7928
+ @media (prefers-color-scheme: dark) {
7929
+ color: var(--color-feedback-info-text);
7930
+ }
7931
+ }
7785
7932
  .dark\:text-gray-100 {
7786
7933
  @media (prefers-color-scheme: dark) {
7787
7934
  color: var(--color-gray-100);
@@ -7812,40 +7959,19 @@
7812
7959
  color: var(--color-red-200);
7813
7960
  }
7814
7961
  }
7815
- .dark\:text-text-body {
7962
+ .dark\:text-text-primary {
7816
7963
  @media (prefers-color-scheme: dark) {
7817
- color: var(--color-text-body);
7964
+ color: var(--color-text-primary);
7818
7965
  }
7819
7966
  }
7820
- .dark\:text-zinc-100 {
7967
+ .dark\:text-text-secondary {
7821
7968
  @media (prefers-color-scheme: dark) {
7822
- color: var(--color-zinc-100);
7969
+ color: var(--color-text-secondary);
7823
7970
  }
7824
7971
  }
7825
- .dark\:text-zinc-200 {
7972
+ .dark\:text-viz-categorical-4 {
7826
7973
  @media (prefers-color-scheme: dark) {
7827
- color: var(--color-zinc-200);
7828
- }
7829
- }
7830
- .dark\:text-zinc-300 {
7831
- @media (prefers-color-scheme: dark) {
7832
- color: var(--color-zinc-300);
7833
- }
7834
- }
7835
- .dark\:text-zinc-600 {
7836
- @media (prefers-color-scheme: dark) {
7837
- color: var(--color-zinc-600);
7838
- }
7839
- }
7840
- .dark\:text-zinc-900 {
7841
- @media (prefers-color-scheme: dark) {
7842
- color: var(--color-zinc-900);
7843
- }
7844
- }
7845
- .dark\:shadow-none {
7846
- @media (prefers-color-scheme: dark) {
7847
- --tw-shadow: 0 0 #0000;
7848
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
7974
+ color: var(--color-viz-categorical-4);
7849
7975
  }
7850
7976
  }
7851
7977
  .dark\:shadow-black\/60 {
@@ -7856,27 +7982,6 @@
7856
7982
  }
7857
7983
  }
7858
7984
  }
7859
- .dark\:ring-gray-700 {
7860
- @media (prefers-color-scheme: dark) {
7861
- --tw-ring-color: var(--color-gray-700);
7862
- }
7863
- }
7864
- .dark\:group-hover\:bg-zinc-600 {
7865
- @media (prefers-color-scheme: dark) {
7866
- &:is(:where(.group):hover *) {
7867
- @media (hover: hover) {
7868
- background-color: var(--color-zinc-600);
7869
- }
7870
- }
7871
- }
7872
- }
7873
- .group-disabled\:dark\:text-zinc-600 {
7874
- &:is(:where(.group):disabled *) {
7875
- @media (prefers-color-scheme: dark) {
7876
- color: var(--color-zinc-600);
7877
- }
7878
- }
7879
- }
7880
7985
  .dark\:hover\:bg-background-hover {
7881
7986
  @media (prefers-color-scheme: dark) {
7882
7987
  &:hover {
@@ -7886,44 +7991,10 @@
7886
7991
  }
7887
7992
  }
7888
7993
  }
7889
- .dark\:hover\:bg-gray-700 {
7890
- @media (prefers-color-scheme: dark) {
7891
- &:hover {
7892
- @media (hover: hover) {
7893
- background-color: var(--color-gray-700);
7894
- }
7895
- }
7896
- }
7897
- }
7898
- .dark\:hover\:bg-gray-800 {
7899
- @media (prefers-color-scheme: dark) {
7900
- &:hover {
7901
- @media (hover: hover) {
7902
- background-color: var(--color-gray-800);
7903
- }
7904
- }
7905
- }
7906
- }
7907
- .dark\:hover\:bg-zinc-700 {
7908
- @media (prefers-color-scheme: dark) {
7909
- &:hover {
7910
- @media (hover: hover) {
7911
- background-color: var(--color-zinc-700);
7912
- }
7913
- }
7914
- }
7915
- }
7916
- .dark\:disabled\:text-text-muted {
7994
+ .dark\:disabled\:text-text-secondary {
7917
7995
  @media (prefers-color-scheme: dark) {
7918
7996
  &:disabled {
7919
- color: var(--color-text-muted);
7920
- }
7921
- }
7922
- }
7923
- .dark\:disabled\:text-zinc-600 {
7924
- @media (prefers-color-scheme: dark) {
7925
- &:disabled {
7926
- color: var(--color-zinc-600);
7997
+ color: var(--color-text-secondary);
7927
7998
  }
7928
7999
  }
7929
8000
  }
@@ -7987,6 +8058,11 @@
7987
8058
  background-color: Highlight;
7988
8059
  }
7989
8060
  }
8061
+ .forced-colors\:bg-\[Mark\] {
8062
+ @media (forced-colors: active) {
8063
+ background-color: Mark;
8064
+ }
8065
+ }
7990
8066
  .forced-colors\:fill-\[Canvas\] {
7991
8067
  @media (forced-colors: active) {
7992
8068
  fill: Canvas;
@@ -8032,14 +8108,14 @@
8032
8108
  color: HighlightText;
8033
8109
  }
8034
8110
  }
8035
- .forced-colors\:text-\[Mark\] {
8111
+ .forced-colors\:text-\[MarkText\] {
8036
8112
  @media (forced-colors: active) {
8037
- color: Mark;
8113
+ color: MarkText;
8038
8114
  }
8039
8115
  }
8040
- .forced-colors\:text-white {
8116
+ .forced-colors\:text-text-disabled {
8041
8117
  @media (forced-colors: active) {
8042
- color: var(--color-white);
8118
+ color: var(--color-text-disabled);
8043
8119
  }
8044
8120
  }
8045
8121
  .forced-colors\:outline-\[GrayText\] {
@@ -8457,17 +8533,17 @@
8457
8533
  text-align: left;
8458
8534
  }
8459
8535
  }
8460
- .\[\&_\[data-chip-id\]\:\:selection\]\:bg-action-brand\/20 {
8536
+ .\[\&_\[data-chip-id\]\:\:selection\]\:bg-action-primary\/20 {
8461
8537
  & [data-chip-id]::-moz-selection {
8462
8538
  background-color: color-mix(in srgb, #111111 20%, transparent);
8463
8539
  @supports (color: color-mix(in lab, red, red)) {
8464
- background-color: color-mix(in oklab, var(--color-action-brand) 20%, transparent);
8540
+ background-color: color-mix(in oklab, var(--color-action-primary) 20%, transparent);
8465
8541
  }
8466
8542
  }
8467
8543
  & [data-chip-id]::selection {
8468
8544
  background-color: color-mix(in srgb, #111111 20%, transparent);
8469
8545
  @supports (color: color-mix(in lab, red, red)) {
8470
- background-color: color-mix(in oklab, var(--color-action-brand) 20%, transparent);
8546
+ background-color: color-mix(in oklab, var(--color-action-primary) 20%, transparent);
8471
8547
  }
8472
8548
  }
8473
8549
  }
@@ -8667,11 +8743,11 @@
8667
8743
  }
8668
8744
  }
8669
8745
  }
8670
- .\[\&\:empty\]\:before\:text-text-placeholder {
8746
+ .\[\&\:empty\]\:before\:text-text-disabled {
8671
8747
  &:empty {
8672
8748
  &::before {
8673
8749
  content: var(--tw-content);
8674
- color: var(--color-text-placeholder);
8750
+ color: var(--color-text-disabled);
8675
8751
  }
8676
8752
  }
8677
8753
  }
@@ -8729,11 +8805,11 @@
8729
8805
  @layer base {
8730
8806
  :root {
8731
8807
  --default-border-color: var(--color-border-default);
8732
- --default-text-color: var(--color-text-body);
8808
+ --default-text-color: var(--color-text-primary);
8733
8809
  }
8734
8810
  .theme-dark {
8735
8811
  --default-border-color: var(--color-border-default);
8736
- --default-text-color: var(--color-text-body);
8812
+ --default-text-color: var(--color-text-primary);
8737
8813
  }
8738
8814
  *,
8739
8815
  ::after,