@texturehq/edges 1.33.2 → 1.34.1

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 (53) 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 +2122 -820
  39. package/dist/theme.css +20 -7
  40. package/dist/typography.css +150 -0
  41. package/package.json +13 -14
  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/scripts/generate-color-utilities.mjs +163 -0
  46. package/templates/claude-rules/.claude +5 -5
  47. package/templates/claude-rules/claude.md +5 -5
  48. package/templates/codex-rules/codex.md +5 -5
  49. package/dist/generated/tailwind-tokens-dark.css +0 -397
  50. package/dist/generated/tailwind-tokens-light.css +0 -611
  51. package/dist/generated/viz-runtime.css +0 -243
  52. package/scripts/generate-viz-runtime.js +0 -107
  53. package/scripts/validate-tokens.js +0 -176
@@ -1,611 +0,0 @@
1
- /**
2
- * Design Tokens for Tailwind CSS
3
- * Generated by Style Dictionary
4
- *
5
- * These CSS variables are formatted specifically for Tailwind CSS compatibility.
6
- * The 'color-' prefix is required for Tailwind's color utility classes to work.
7
- *
8
- * For other platforms, generate separate outputs using different transforms.
9
- */
10
-
11
- @theme {
12
- --color-white: #ffffff;
13
- --color-black: #000000;
14
- --color-gray-50: #f9fafb;
15
- --color-gray-100: #f3f4f6;
16
- --color-gray-200: #e5e7eb;
17
- --color-gray-300: #d1d5db;
18
- --color-gray-400: #9ca3af;
19
- --color-gray-500: #6b7280;
20
- --color-gray-600: #4b5563;
21
- --color-gray-700: #374151;
22
- --color-gray-800: #1f2937;
23
- --color-gray-900: #111827;
24
- --color-gray-950: #030712;
25
- --color-red-50: oklch(0.971 0.013 17.38);
26
- --color-red-100: oklch(0.936 0.032 17.717);
27
- --color-red-200: oklch(0.885 0.062 18.334);
28
- --color-red-300: oklch(0.808 0.114 19.571);
29
- --color-red-400: oklch(0.704 0.191 22.216);
30
- --color-red-500: oklch(0.637 0.237 25.331);
31
- --color-red-600: oklch(0.577 0.245 27.325);
32
- --color-red-700: oklch(0.505 0.213 27.518);
33
- --color-red-800: oklch(0.444 0.177 26.899);
34
- --color-red-900: oklch(0.396 0.141 25.723);
35
- --color-red-950: oklch(0.258 0.092 26.042);
36
- --color-green-50: oklch(0.982 0.018 131.68);
37
- --color-green-100: oklch(0.947 0.052 132.272);
38
- --color-green-200: oklch(0.895 0.111 131.438);
39
- --color-green-300: oklch(0.82 0.178 132.63);
40
- --color-green-400: oklch(0.718 0.209 130.901);
41
- --color-green-500: oklch(0.627 0.194 130.331);
42
- --color-green-600: oklch(0.527 0.19 131.688);
43
- --color-green-700: oklch(0.437 0.154 132.474);
44
- --color-green-800: oklch(0.366 0.121 132.109);
45
- --color-green-900: oklch(0.314 0.095 133.748);
46
- --color-green-950: oklch(0.197 0.06 130.709);
47
- --color-blue-50: oklch(0.97 0.014 237.69);
48
- --color-blue-100: oklch(0.932 0.032 241.935);
49
- --color-blue-200: oklch(0.882 0.059 243.157);
50
- --color-blue-300: oklch(0.809 0.105 244.039);
51
- --color-blue-400: oklch(0.707 0.165 246.422);
52
- --color-blue-500: oklch(0.623 0.214 250.546);
53
- --color-blue-600: oklch(0.546 0.245 253.739);
54
- --color-blue-700: oklch(0.488 0.243 255.638);
55
- --color-blue-800: oklch(0.424 0.199 255.585);
56
- --color-blue-900: oklch(0.368 0.146 254.128);
57
- --color-blue-950: oklch(0.262 0.09 254.128);
58
- --color-yellow-50: oklch(0.987 0.024 102.851);
59
- --color-yellow-100: oklch(0.973 0.071 103.193);
60
- --color-yellow-200: oklch(0.945 0.129 101.54);
61
- --color-yellow-300: oklch(0.905 0.182 98.111);
62
- --color-yellow-400: oklch(0.852 0.199 91.936);
63
- --color-yellow-500: oklch(0.795 0.184 86.047);
64
- --color-yellow-600: oklch(0.681 0.162 75.834);
65
- --color-yellow-700: oklch(0.554 0.135 66.191);
66
- --color-yellow-800: oklch(0.456 0.111 61.896);
67
- --color-yellow-900: oklch(0.398 0.092 60.236);
68
- --color-yellow-950: oklch(0.265 0.06 56.259);
69
- --color-brand-primary: #444ae1;
70
- --color-brand-light: #f7f7ff;
71
- --color-brand-dark: #363ccb;
72
- --color-brand-background: #f6f7ff;
73
- --color-neutral-white: #ffffff;
74
- --color-neutral-black: #000000;
75
- --motion-duration-instant: 0ms;
76
- --motion-duration-fast: 150ms;
77
- --motion-duration-normal: 250ms;
78
- --motion-duration-slow: 350ms;
79
- --motion-duration-slower: 500ms;
80
- --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
81
- --motion-easing-emphasized: cubic-bezier(0, 0, 0.2, 1);
82
- --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
83
- --motion-easing-deaccelerate: cubic-bezier(0, 0, 0.2, 1);
84
- --motion-distance-xs: 4px;
85
- --motion-distance-sm: 8px;
86
- --motion-distance-md: 16px;
87
- --motion-opacity-hover: 0.9;
88
- --motion-opacity-disabled: 0.5;
89
- --motion-scale-hover: 1.02;
90
- --motion-scale-press: 0.97;
91
- --spacing-0: 0;
92
- --spacing-1: 0.25rem;
93
- --spacing-2: 0.5rem;
94
- --spacing-3: 0.75rem;
95
- --spacing-4: 1rem;
96
- --spacing-5: 1.25rem;
97
- --spacing-6: 1.5rem;
98
- --spacing-7: 1.75rem;
99
- --spacing-8: 2rem;
100
- --spacing-9: 2.25rem;
101
- --spacing-10: 2.5rem;
102
- --spacing-11: 2.75rem;
103
- --spacing-12: 3rem;
104
- --spacing-14: 3.5rem;
105
- --spacing-16: 4rem;
106
- --spacing-20: 5rem;
107
- --spacing-24: 6rem;
108
- --spacing-28: 7rem;
109
- --spacing-32: 8rem;
110
- --spacing-36: 9rem;
111
- --spacing-40: 10rem;
112
- --spacing-44: 11rem;
113
- --spacing-48: 12rem;
114
- --spacing-52: 13rem;
115
- --spacing-56: 14rem;
116
- --spacing-60: 15rem;
117
- --spacing-64: 16rem;
118
- --spacing-72: 18rem;
119
- --spacing-80: 20rem;
120
- --spacing-96: 24rem;
121
- --radius-none: 0;
122
- --radius-xs: 0.125rem;
123
- --radius-sm: 0.25rem;
124
- --radius-md: 0.375rem;
125
- --radius-lg: 0.5rem;
126
- --radius-xl: 0.75rem;
127
- --radius-2xl: 1rem;
128
- --radius-3xl: 1.5rem;
129
- --radius-4xl: 2rem;
130
- --radius-full: 9999px;
131
- --font-family-sans: Inter, system-ui, sans-serif;
132
- --font-family-brand: 'TT Firs Neue', 'Helvetica Neue', Arial, system-ui, sans-serif;
133
- --font-family-serif: Merriweather, serif;
134
- --font-family-mono: 'Fira Code', monospace;
135
- --font-size-xs: 0.75rem;
136
- --font-size-sm: 0.875rem;
137
- --font-size-base: 1rem;
138
- --font-size-lg: 1.125rem;
139
- --font-size-xl: 1.25rem;
140
- --font-size-2xl: 1.5rem;
141
- --font-size-3xl: 1.875rem;
142
- --font-size-4xl: 2.25rem;
143
- --font-size-5xl: 3rem;
144
- --font-size-6xl: 3.75rem;
145
- --font-size-7xl: 4.5rem;
146
- --font-size-8xl: 6rem;
147
- --font-size-9xl: 8rem;
148
- --font-weight-thin: 100;
149
- --font-weight-extralight: 200;
150
- --font-weight-light: 300;
151
- --font-weight-normal: 400;
152
- --font-weight-medium: 500;
153
- --font-weight-semibold: 600;
154
- --font-weight-bold: 700;
155
- --font-weight-extrabold: 800;
156
- --font-weight-black: 900;
157
- --font-lineheight-tight: 1.25;
158
- --font-lineheight-snug: 1.375;
159
- --font-lineheight-normal: 1.5;
160
- --font-lineheight-relaxed: 1.625;
161
- --font-lineheight-loose: 2;
162
- --font-letterspacing-tighter: -0.05em;
163
- --font-letterspacing-tight: -0.025em;
164
- --font-letterspacing-normal: 0;
165
- --font-letterspacing-wide: 0.025em;
166
- --font-letterspacing-wider: 0.05em;
167
- --font-letterspacing-widest: 0.1em;
168
- --action-brand-background: #444ae1;
169
- --action-brand-hover: #363ccb;
170
- --action-brand-text: #ffffff;
171
- --action-default-background: #111827;
172
- --action-default-hover: #374151;
173
- --action-default-text: #ffffff;
174
- --action-destructive-background: oklch(0.505 0.213 27.518);
175
- --action-destructive-hover: oklch(0.444 0.177 26.899);
176
- --action-destructive-text: #ffffff;
177
- --action-disabled-background: #d1d5db;
178
- --action-disabled-text: #6b7280;
179
- --elevation-surface-default: #ffffff;
180
- --elevation-surface-raised: #ffffff;
181
- --elevation-surface-floating: #ffffff;
182
- --elevation-surface-overlay: #ffffff;
183
- --shadow-none: none;
184
- --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
185
- --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
186
- --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
187
- --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
188
- --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.08);
189
- --shadow-overflow: 0 4px 12px rgba(0, 0, 0, 0.10);
190
- --feedback-success-text: oklch(0.314 0.095 133.748);
191
- --feedback-success-icon: oklch(0.437 0.154 132.474);
192
- --feedback-success-background: oklch(0.99 0.01 131.68);
193
- --feedback-success-border: oklch(0.527 0.19 131.688);
194
- --feedback-error-text: oklch(0.505 0.213 27.518);
195
- --feedback-error-icon: oklch(0.577 0.245 27.325);
196
- --feedback-error-background: oklch(0.985 0.008 17.38);
197
- --feedback-error-border: oklch(0.637 0.237 25.331);
198
- --feedback-warning-text: oklch(0.398 0.092 60.236);
199
- --feedback-warning-icon: oklch(0.554 0.135 66.191);
200
- --feedback-warning-background: oklch(0.993 0.015 102.851);
201
- --feedback-warning-border: oklch(0.681 0.162 75.834);
202
- --feedback-info-text: oklch(0.488 0.243 255.638);
203
- --feedback-info-icon: oklch(0.546 0.245 253.739);
204
- --feedback-info-background: oklch(0.985 0.008 237.69);
205
- --feedback-info-border: oklch(0.623 0.214 250.546);
206
- --color-map-marker-default: #444ae1;
207
- --color-map-streets-border: #000000;
208
- --color-map-satellite-border: #ffffff;
209
- --color-map-neutral-border: #000000;
210
- --skeleton-base: #e5e7eb;
211
- --skeleton-highlight: #f3f4f6;
212
- --skeleton-wave: rgba(255, 255, 255, 0.5);
213
- --text-display-xl-size: 6rem;
214
- --text-display-xl-line-height: 1;
215
- --text-display-xl-letter-spacing: 0;
216
- --text-display-xl-weight: 500;
217
- --text-display-lg-size: 4.5rem;
218
- --text-display-lg-line-height: 1;
219
- --text-display-lg-letter-spacing: 0;
220
- --text-display-lg-weight: 500;
221
- --text-display-md-size: 3rem;
222
- --text-display-md-line-height: 1.05;
223
- --text-display-md-letter-spacing: 0;
224
- --text-display-md-weight: 500;
225
- --text-heading-xl-size: 2.25rem;
226
- --text-heading-xl-line-height: 1.1;
227
- --text-heading-xl-letter-spacing: 0;
228
- --text-heading-xl-weight: 500;
229
- --text-heading-lg-size: 1.875rem;
230
- --text-heading-lg-line-height: 1.15;
231
- --text-heading-lg-letter-spacing: 0;
232
- --text-heading-lg-weight: 500;
233
- --text-heading-md-size: 1.5rem;
234
- --text-heading-md-line-height: 1.2;
235
- --text-heading-md-letter-spacing: 0;
236
- --text-heading-md-weight: 600;
237
- --text-heading-sm-size: 1.25rem;
238
- --text-heading-sm-line-height: 1.25;
239
- --text-heading-sm-letter-spacing: 0;
240
- --text-heading-sm-weight: 600;
241
- --text-body-lg-size: 1.125rem;
242
- --text-body-lg-line-height: 1.55;
243
- --text-body-lg-letter-spacing: 0;
244
- --text-body-lg-weight: 400;
245
- --text-body-md-size: 1rem;
246
- --text-body-md-line-height: 1.5;
247
- --text-body-md-letter-spacing: 0;
248
- --text-body-md-weight: 400;
249
- --text-body-sm-size: 0.875rem;
250
- --text-body-sm-line-height: 1.55;
251
- --text-body-sm-letter-spacing: 0;
252
- --text-body-sm-weight: 400;
253
- --text-label-lg-size: 1rem;
254
- --text-label-lg-line-height: 1.4;
255
- --text-label-lg-letter-spacing: 0;
256
- --text-label-lg-weight: 500;
257
- --text-label-md-size: 0.875rem;
258
- --text-label-md-line-height: 1.4;
259
- --text-label-md-letter-spacing: 0;
260
- --text-label-md-weight: 500;
261
- --text-label-sm-size: 0.8125rem;
262
- --text-label-sm-line-height: 1.4;
263
- --text-label-sm-letter-spacing: 0;
264
- --text-label-sm-weight: 500;
265
- --text-caption-size: 0.8125rem;
266
- --text-caption-line-height: 1.4;
267
- --text-caption-letter-spacing: 0;
268
- --text-caption-weight: 400;
269
- --text-code-size: 0.875rem;
270
- --text-code-line-height: 1.5;
271
- --text-code-letter-spacing: 0;
272
- --text-code-weight: 400;
273
- --text-eyebrow-size: 0.6875rem;
274
- --text-eyebrow-line-height: 1.4;
275
- --text-eyebrow-letter-spacing: 0.1em;
276
- --text-eyebrow-weight: 600;
277
- --color-background-body: #ffffff;
278
- --color-background-surface: #ffffff;
279
- --color-background-muted: #f3f4f6;
280
- --color-background-hover: #f3f4f6;
281
- --color-background-selected: #e5e7eb;
282
- --color-background-modal: rgba(0, 0, 0, 0.15);
283
- --color-background-input: #ffffff;
284
- --theme-background-canvas: linear-gradient(to bottom right, rgb(239 246 255), rgb(250 245 255), rgb(253 242 248));
285
- --theme-background-ai: linear-gradient(to bottom right, rgb(245 243 255 / 0.5), rgb(255 255 255), rgb(240 249 255 / 0.5));
286
- --color-text-body: #333333;
287
- --color-text-heading: #111827;
288
- --theme-text-label: #111827;
289
- --color-text-muted: #4b5563;
290
- --color-text-caption: #6b7280;
291
- --color-text-subtle: #5f6873;
292
- --color-text-placeholder: #9ca3af;
293
- --color-text-disabled: #9ca3af;
294
- --color-text-link-default: #444ae1;
295
- --color-text-link-hover: #363ccb;
296
- --color-text-onPrimary: #ffffff;
297
- --color-border-default: #e5e7eb;
298
- --color-border-focus: #111827;
299
- --color-border-muted: #e5e7eb;
300
- --color-border-input: #d1d5db;
301
- --color-feedback-success-text: #065f46;
302
- --color-feedback-success-background: #d1fae5;
303
- --color-feedback-success-border: #10b981;
304
- --color-feedback-error-text: #b91c1c;
305
- --color-feedback-error-background: #fee2e2;
306
- --color-feedback-error-border: #ef4444;
307
- --color-feedback-warning-text: #92400e;
308
- --color-feedback-warning-background: #fef3c7;
309
- --color-feedback-warning-border: #f59e0b;
310
- --color-feedback-info-text: #2563eb;
311
- --color-feedback-info-background: #dbeafe;
312
- --color-feedback-info-border: #93c5fd;
313
- --color-action-brand: #444ae1;
314
- --color-action-brand-hover: #363ccb;
315
- --color-action-brand-text: #ffffff;
316
- --color-action-default: #333333;
317
- --color-action-default-hover: #4b5563;
318
- --color-action-default-text: #ffffff;
319
- --color-state-charging: #f3e8ff;
320
- --color-state-charging-data: #d9b6fd;
321
- --color-state-charging-border: #c084fc;
322
- --color-state-charging-text: #6b21a8;
323
- --color-state-discharging: #fffbeb;
324
- --color-state-discharging-data: #fce380;
325
- --color-state-discharging-border: #facc15;
326
- --color-state-discharging-text: #78350f;
327
- --color-state-heat: #fee2e2;
328
- --color-state-heat-data: #fba9a9;
329
- --color-state-heat-border: #f87171;
330
- --color-state-heat-text: #920000;
331
- --color-state-cool: #dbeafe;
332
- --color-state-cool-data: #9dc7fc;
333
- --color-state-cool-border: #60a5fa;
334
- --color-state-cool-text: #0334be;
335
- --color-state-eco: #ddfff1;
336
- --color-state-eco-data: #88e9c5;
337
- --color-state-eco-border: #34d399;
338
- --color-state-eco-text: #065f46;
339
- --color-state-auto: #ffedd5;
340
- --color-state-auto-data: #fed3a4;
341
- --color-state-auto-border: #fdba74;
342
- --color-state-auto-text: #7c2d12;
343
- --color-state-circulate: #ede9fe;
344
- --color-state-circulate-data: #c4b5fd;
345
- --color-state-circulate-border: #a78bfa;
346
- --color-state-circulate-text: #4338ca;
347
- --color-state-on: #ccfbf1;
348
- --color-state-on-data: #7ce7d8;
349
- --color-state-on-border: #2dd4bf;
350
- --color-state-on-text: #0f766e;
351
- --color-state-idle: #e5e7eb;
352
- --color-state-idle-data: #c0c5cd;
353
- --color-state-idle-border: #9ca3af;
354
- --color-state-idle-text: #374151;
355
- --color-state-off: #e5e7eb;
356
- --color-state-off-data: #c0c5cd;
357
- --color-state-off-border: #9ca3af;
358
- --color-state-off-text: #374151;
359
- --color-state-unknown: #f8f8f8;
360
- --color-state-unknown-data: #e4e6e9;
361
- --color-state-unknown-border: #d1d5db;
362
- --color-state-unknown-text: #000000;
363
- --color-state-importing: #dbeafe;
364
- --color-state-importing-data: #8bb6fa;
365
- --color-state-importing-border: #3b82f6;
366
- --color-state-importing-text: #1e40af;
367
- --color-state-exporting: #fef3c7;
368
- --color-state-exporting-data: #f9c869;
369
- --color-state-exporting-border: #f59e0b;
370
- --color-state-exporting-text: #92400e;
371
- --color-viz-default: #0082ff;
372
- --color-viz-categorical-1: #a3eae4;
373
- --color-viz-categorical-2: #91a0ff;
374
- --color-viz-categorical-3: #ffd1a3;
375
- --color-viz-categorical-4: #ffabc8;
376
- --color-viz-categorical-5: #c1b8ff;
377
- --color-viz-categorical-6: #e0ffb8;
378
- --color-viz-sequential-viridis-1: #fafa37;
379
- --color-viz-sequential-viridis-2: #d6e654;
380
- --color-viz-sequential-viridis-3: #b2d373;
381
- --color-viz-sequential-viridis-4: #88be8c;
382
- --color-viz-sequential-viridis-5: #5fa2a4;
383
- --color-viz-sequential-viridis-6: #3d7eaa;
384
- --color-viz-sequential-viridis-7: #2a60b1;
385
- --color-viz-sequential-viridis-8: #1b3a99;
386
- --color-viz-sequential-viridis-9: #132353;
387
- --color-viz-sequential-viridis-10: #110f39;
388
- --color-viz-sequential-magma-1: #fcf5cd;
389
- --color-viz-sequential-magma-2: #f5db95;
390
- --color-viz-sequential-magma-3: #e9af7c;
391
- --color-viz-sequential-magma-4: #db7d70;
392
- --color-viz-sequential-magma-5: #b9577a;
393
- --color-viz-sequential-magma-6: #883482;
394
- --color-viz-sequential-magma-7: #6a1f78;
395
- --color-viz-sequential-magma-8: #4b1277;
396
- --color-viz-sequential-magma-9: #2d0b42;
397
- --color-viz-sequential-magma-10: #0b0511;
398
- --color-viz-sequential-rose-1: #fef3e7;
399
- --color-viz-sequential-rose-2: #f5c7e0;
400
- --color-viz-sequential-rose-3: #ec9bce;
401
- --color-viz-sequential-rose-4: #d86db0;
402
- --color-viz-sequential-rose-5: #be4a8b;
403
- --color-viz-sequential-rose-6: #9d2f76;
404
- --color-viz-sequential-rose-7: #78176c;
405
- --color-viz-sequential-rose-8: #56135c;
406
- --color-viz-sequential-rose-9: #371344;
407
- --color-viz-sequential-rose-10: #190b29;
408
- --color-viz-sequential-cerulean-1: #e2f7f2;
409
- --color-viz-sequential-cerulean-2: #b6e4e8;
410
- --color-viz-sequential-cerulean-3: #8bd3d7;
411
- --color-viz-sequential-cerulean-4: #60b2c7;
412
- --color-viz-sequential-cerulean-5: #3d91b6;
413
- --color-viz-sequential-cerulean-6: #22698e;
414
- --color-viz-sequential-cerulean-7: #0e486a;
415
- --color-viz-sequential-cerulean-8: #0a314d;
416
- --color-viz-sequential-cerulean-9: #081e33;
417
- --color-viz-sequential-cerulean-10: #030e1d;
418
- --color-viz-sequential-forest-1: #f4fad8;
419
- --color-viz-sequential-forest-2: #d6e6a5;
420
- --color-viz-sequential-forest-3: #b2cd73;
421
- --color-viz-sequential-forest-4: #88af52;
422
- --color-viz-sequential-forest-5: #5f8835;
423
- --color-viz-sequential-forest-6: #3d6426;
424
- --color-viz-sequential-forest-7: #2a461a;
425
- --color-viz-sequential-forest-8: #1b2e13;
426
- --color-viz-sequential-forest-9: #13200d;
427
- --color-viz-sequential-forest-10: #0b1305;
428
- --color-viz-sequential-red-yellow-green-1: #7f1d1d;
429
- --color-viz-sequential-red-yellow-green-2: #b91c1c;
430
- --color-viz-sequential-red-yellow-green-3: #ef4444;
431
- --color-viz-sequential-red-yellow-green-4: #fb923c;
432
- --color-viz-sequential-red-yellow-green-5: #f59e0b;
433
- --color-viz-sequential-red-yellow-green-6: #fbbf24;
434
- --color-viz-sequential-red-yellow-green-7: #a3e635;
435
- --color-viz-sequential-red-yellow-green-8: #4ade80;
436
- --color-viz-sequential-red-yellow-green-9: #10b981;
437
- --color-viz-sequential-red-yellow-green-10: #059669;
438
- --color-viz-diverging-orange-yellow-seafoam-1: #6b2c1a;
439
- --color-viz-diverging-orange-yellow-seafoam-2: #a24b1e;
440
- --color-viz-diverging-orange-yellow-seafoam-3: #cb7131;
441
- --color-viz-diverging-orange-yellow-seafoam-4: #e2a05d;
442
- --color-viz-diverging-orange-yellow-seafoam-5: #f3e1a3;
443
- --color-viz-diverging-orange-yellow-seafoam-6: #c1e4d2;
444
- --color-viz-diverging-orange-yellow-seafoam-7: #7eb8b1;
445
- --color-viz-diverging-orange-yellow-seafoam-8: #4c8c89;
446
- --color-viz-diverging-orange-yellow-seafoam-9: #2b6262;
447
- --color-viz-diverging-orange-yellow-seafoam-10: #1b3d3c;
448
- --color-viz-diverging-red-yellow-blue-1: #4e142d;
449
- --color-viz-diverging-red-yellow-blue-2: #8b2d4e;
450
- --color-viz-diverging-red-yellow-blue-3: #c15a4a;
451
- --color-viz-diverging-red-yellow-blue-4: #db8b6a;
452
- --color-viz-diverging-red-yellow-blue-5: #f3e1a3;
453
- --color-viz-diverging-red-yellow-blue-6: #bfd4c7;
454
- --color-viz-diverging-red-yellow-blue-7: #7c9eb9;
455
- --color-viz-diverging-red-yellow-blue-8: #4770a3;
456
- --color-viz-diverging-red-yellow-blue-9: #2e4d8c;
457
- --color-viz-diverging-red-yellow-blue-10: #18274e;
458
- --color-viz-diverging-red-blue-1: #4e142d;
459
- --color-viz-diverging-red-blue-2: #8b2d4e;
460
- --color-viz-diverging-red-blue-3: #c15a7a;
461
- --color-viz-diverging-red-blue-4: #db8b9e;
462
- --color-viz-diverging-red-blue-5: #f3e1f4;
463
- --color-viz-diverging-red-blue-6: #c7bfe2;
464
- --color-viz-diverging-red-blue-7: #9ea7ce;
465
- --color-viz-diverging-red-blue-8: #7080b5;
466
- --color-viz-diverging-red-blue-9: #4d5e99;
467
- --color-viz-diverging-red-blue-10: #2b3d70;
468
- --color-skeleton-base: #e5e7eb;
469
- --color-skeleton-highlight: #f3f4f6;
470
- --color-skeleton-wave: rgba(255, 255, 255, 0.5);
471
- }
472
-
473
- /* Semantic tokens with cascading references - override @theme for runtime cascading */
474
- :root {
475
- --color-neutral-white: var(--color-white);
476
- --color-neutral-black: var(--color-black);
477
- --action-brand-background: var(--color-brand-primary);
478
- --action-brand-hover: var(--color-brand-dark);
479
- --action-brand-text: var(--color-white);
480
- --action-default-background: var(--color-gray-900);
481
- --action-default-hover: var(--color-gray-700);
482
- --action-default-text: var(--color-white);
483
- --action-destructive-background: var(--color-red-700);
484
- --action-destructive-hover: var(--color-red-800);
485
- --action-destructive-text: var(--color-white);
486
- --action-disabled-background: var(--color-gray-300);
487
- --action-disabled-text: var(--color-gray-500);
488
- --elevation-surface-default: var(--color-background-surface);
489
- --elevation-surface-raised: var(--color-background-surface);
490
- --elevation-surface-floating: var(--color-background-surface);
491
- --elevation-surface-overlay: var(--color-background-surface);
492
- --feedback-success-text: var(--color-green-900);
493
- --feedback-success-icon: var(--color-green-700);
494
- --feedback-success-border: var(--color-green-600);
495
- --feedback-error-text: var(--color-red-700);
496
- --feedback-error-icon: var(--color-red-600);
497
- --feedback-error-border: var(--color-red-500);
498
- --feedback-warning-text: var(--color-yellow-900);
499
- --feedback-warning-icon: var(--color-yellow-700);
500
- --feedback-warning-border: var(--color-yellow-600);
501
- --feedback-info-text: var(--color-blue-700);
502
- --feedback-info-icon: var(--color-blue-600);
503
- --feedback-info-border: var(--color-blue-500);
504
- --color-map-marker-default: var(--color-action-brand);
505
- --color-map-streets-border: var(--color-black);
506
- --color-map-satellite-border: var(--color-white);
507
- --color-map-neutral-border: var(--color-black);
508
- --skeleton-base: var(--color-gray-200);
509
- --skeleton-highlight: var(--color-gray-100);
510
- --text-display-xl-size: var(--font-size-8xl);
511
- --text-display-xl-letter-spacing: var(--font-letterspacing-normal);
512
- --text-display-xl-weight: var(--font-weight-medium);
513
- --text-display-lg-size: var(--font-size-7xl);
514
- --text-display-lg-letter-spacing: var(--font-letterspacing-normal);
515
- --text-display-lg-weight: var(--font-weight-medium);
516
- --text-display-md-size: var(--font-size-5xl);
517
- --text-display-md-letter-spacing: var(--font-letterspacing-normal);
518
- --text-display-md-weight: var(--font-weight-medium);
519
- --text-heading-xl-size: var(--font-size-4xl);
520
- --text-heading-xl-letter-spacing: var(--font-letterspacing-normal);
521
- --text-heading-xl-weight: var(--font-weight-medium);
522
- --text-heading-lg-size: var(--font-size-3xl);
523
- --text-heading-lg-letter-spacing: var(--font-letterspacing-normal);
524
- --text-heading-lg-weight: var(--font-weight-medium);
525
- --text-heading-md-size: var(--font-size-2xl);
526
- --text-heading-md-letter-spacing: var(--font-letterspacing-normal);
527
- --text-heading-md-weight: var(--font-weight-semibold);
528
- --text-heading-sm-size: var(--font-size-xl);
529
- --text-heading-sm-line-height: var(--font-lineheight-tight);
530
- --text-heading-sm-letter-spacing: var(--font-letterspacing-normal);
531
- --text-heading-sm-weight: var(--font-weight-semibold);
532
- --text-body-lg-size: var(--font-size-lg);
533
- --text-body-lg-letter-spacing: var(--font-letterspacing-normal);
534
- --text-body-lg-weight: var(--font-weight-normal);
535
- --text-body-md-size: var(--font-size-base);
536
- --text-body-md-line-height: var(--font-lineheight-normal);
537
- --text-body-md-letter-spacing: var(--font-letterspacing-normal);
538
- --text-body-md-weight: var(--font-weight-normal);
539
- --text-body-sm-size: var(--font-size-sm);
540
- --text-body-sm-letter-spacing: var(--font-letterspacing-normal);
541
- --text-body-sm-weight: var(--font-weight-normal);
542
- --text-label-lg-size: var(--font-size-base);
543
- --text-label-lg-letter-spacing: var(--font-letterspacing-normal);
544
- --text-label-lg-weight: var(--font-weight-medium);
545
- --text-label-md-size: var(--font-size-sm);
546
- --text-label-md-letter-spacing: var(--font-letterspacing-normal);
547
- --text-label-md-weight: var(--font-weight-medium);
548
- --text-label-sm-letter-spacing: var(--font-letterspacing-normal);
549
- --text-label-sm-weight: var(--font-weight-medium);
550
- --text-caption-letter-spacing: var(--font-letterspacing-normal);
551
- --text-caption-weight: var(--font-weight-normal);
552
- --text-code-size: var(--font-size-sm);
553
- --text-code-line-height: var(--font-lineheight-normal);
554
- --text-code-letter-spacing: var(--font-letterspacing-normal);
555
- --text-code-weight: var(--font-weight-normal);
556
- --text-eyebrow-letter-spacing: var(--font-letterspacing-widest);
557
- --text-eyebrow-weight: var(--font-weight-semibold);
558
- --color-background-body: var(--color-white);
559
- --color-background-surface: var(--color-white);
560
- --color-background-muted: var(--color-gray-100);
561
- --color-background-hover: var(--color-gray-100);
562
- --color-background-selected: var(--color-gray-200);
563
- --color-background-input: var(--color-white);
564
- --color-text-heading: var(--color-gray-900);
565
- --theme-text-label: var(--color-gray-900);
566
- --color-text-muted: var(--color-gray-600);
567
- --color-text-caption: var(--color-gray-500);
568
- --color-text-placeholder: var(--color-gray-400);
569
- --color-text-disabled: var(--color-gray-400);
570
- --color-text-link-default: var(--color-brand-primary);
571
- --color-text-link-hover: var(--color-brand-dark);
572
- --color-text-onPrimary: var(--color-white);
573
- --color-border-default: var(--color-gray-200);
574
- --color-border-focus: var(--color-gray-900);
575
- --color-border-muted: var(--color-gray-200);
576
- --color-border-input: var(--color-gray-300);
577
- --color-action-brand: var(--color-brand-primary);
578
- --color-action-brand-hover: var(--color-brand-dark);
579
- --color-action-brand-text: var(--color-white);
580
- --color-action-default-text: var(--color-white);
581
- --color-skeleton-base: var(--color-gray-200);
582
- --color-skeleton-highlight: var(--color-gray-100);
583
- }
584
-
585
- /* Semantic typography shorthand — `font:` shorthand per role. */
586
- :root {
587
- --text-display-xl: var(--text-display-xl-weight) var(--text-display-xl-size)/var(--text-display-xl-line-height) var(--font-family-brand);
588
- --text-display-lg: var(--text-display-lg-weight) var(--text-display-lg-size)/var(--text-display-lg-line-height) var(--font-family-brand);
589
- --text-display-md: var(--text-display-md-weight) var(--text-display-md-size)/var(--text-display-md-line-height) var(--font-family-brand);
590
- --text-heading-xl: var(--text-heading-xl-weight) var(--text-heading-xl-size)/var(--text-heading-xl-line-height) var(--font-family-brand);
591
- --text-heading-lg: var(--text-heading-lg-weight) var(--text-heading-lg-size)/var(--text-heading-lg-line-height) var(--font-family-brand);
592
- --text-heading-md: var(--text-heading-md-weight) var(--text-heading-md-size)/var(--text-heading-md-line-height) var(--font-family-brand);
593
- --text-heading-sm: var(--text-heading-sm-weight) var(--text-heading-sm-size)/var(--text-heading-sm-line-height) var(--font-family-brand);
594
- --text-body-lg: var(--text-body-lg-weight) var(--text-body-lg-size)/var(--text-body-lg-line-height) var(--font-family-sans);
595
- --text-body-md: var(--text-body-md-weight) var(--text-body-md-size)/var(--text-body-md-line-height) var(--font-family-sans);
596
- --text-body-sm: var(--text-body-sm-weight) var(--text-body-sm-size)/var(--text-body-sm-line-height) var(--font-family-sans);
597
- --text-label-lg: var(--text-label-lg-weight) var(--text-label-lg-size)/var(--text-label-lg-line-height) var(--font-family-sans);
598
- --text-label-md: var(--text-label-md-weight) var(--text-label-md-size)/var(--text-label-md-line-height) var(--font-family-sans);
599
- --text-label-sm: var(--text-label-sm-weight) var(--text-label-sm-size)/var(--text-label-sm-line-height) var(--font-family-sans);
600
- --text-caption: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line-height) var(--font-family-sans);
601
- --text-code: var(--text-code-weight) var(--text-code-size)/var(--text-code-line-height) var(--font-family-mono);
602
- --text-eyebrow: var(--text-eyebrow-weight) var(--text-eyebrow-size)/var(--text-eyebrow-line-height) var(--font-family-mono);
603
- }
604
-
605
- /* Mobile bump — body copy gets a touch larger on phones for readability. */
606
- @media (max-width: 768px) {
607
- :root {
608
- --text-body-md-size: 1.0625rem; /* 16 → 17 */
609
- --text-body-lg-size: 1.1875rem; /* 18 → 19 */
610
- }
611
- }