@ngrok/mantle 0.0.21 → 0.0.23

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 (11) hide show
  1. package/assets/mantle.css +346 -298
  2. package/dist/components/dialog/index.d.ts +2 -0
  3. package/dist/components/dialog/index.d.ts.map +1 -0
  4. package/dist/components/dialog/src/dialog.d.ts +24 -0
  5. package/dist/components/dialog/src/dialog.d.ts.map +1 -0
  6. package/dist/components/inline-code/src/inline-code.d.ts.map +1 -1
  7. package/dist/components/sheet/src/sheet.d.ts.map +1 -1
  8. package/dist/index.js +59 -53
  9. package/dist/index.js.map +1 -1
  10. package/dist/tsconfig.publish.tsbuildinfo +1 -1
  11. package/package.json +23 -20
package/assets/mantle.css CHANGED
@@ -26,7 +26,7 @@
26
26
  */
27
27
  color-scheme: light;
28
28
 
29
- --ngrok-blue-050: 221 100% 97%;
29
+ --ngrok-blue-50: 221 100% 97%;
30
30
  --ngrok-blue-100: 221 95% 93%;
31
31
  --ngrok-blue-200: 220 94% 87%;
32
32
  --ngrok-blue-300: 219 95% 78%;
@@ -40,7 +40,7 @@
40
40
 
41
41
  /* ngrok purple tinted grayscale (based on tw-zinc) */
42
42
 
43
- --ngrok-grayple-050: 216 18% 98%;
43
+ --ngrok-grayple-50: 216 18% 98%;
44
44
  --ngrok-grayple-100: 218 16% 95.9%;
45
45
  --ngrok-grayple-200: 220 14% 90%;
46
46
  --ngrok-grayple-300: 222 12% 83.9%;
@@ -60,7 +60,8 @@
60
60
 
61
61
  --tw-black: 0 0% 0%;
62
62
  --tw-white: 0 0% 100%;
63
- --tw-red-050: 0 85.7% 97.3%;
63
+
64
+ --tw-red-50: 0 85.7% 97.3%;
64
65
  --tw-red-100: 0 93.3% 94.1%;
65
66
  --tw-red-200: 0 96.3% 89.4%;
66
67
  --tw-red-300: 0 93.5% 81.8%;
@@ -71,7 +72,8 @@
71
72
  --tw-red-800: 0 70% 35.3%;
72
73
  --tw-red-900: 0 62.8% 30.6%;
73
74
  --tw-red-950: 0 74.7% 15.5%;
74
- --tw-orange-050: 33.3 100% 96.5%;
75
+
76
+ --tw-orange-50: 33.3 100% 96.5%;
75
77
  --tw-orange-100: 34.3 100% 91.8%;
76
78
  --tw-orange-200: 32.1 97.7% 83.1%;
77
79
  --tw-orange-300: 30.7 97.2% 72.4%;
@@ -82,7 +84,8 @@
82
84
  --tw-orange-800: 15 79.1% 33.7%;
83
85
  --tw-orange-900: 15.3 74.6% 27.8%;
84
86
  --tw-orange-950: 13 81.1% 14.5%;
85
- --tw-amber-050: 48 100% 96.1%;
87
+
88
+ --tw-amber-50: 48 100% 96.1%;
86
89
  --tw-amber-100: 48 96.5% 88.8%;
87
90
  --tw-amber-200: 48 96.6% 76.7%;
88
91
  --tw-amber-300: 45.9 96.7% 64.5%;
@@ -93,7 +96,8 @@
93
96
  --tw-amber-800: 22.7 82.5% 31.4%;
94
97
  --tw-amber-900: 21.7 77.8% 26.5%;
95
98
  --tw-amber-950: 20.9 91.7% 14.1%;
96
- --tw-yellow-050: 54.5 91.7% 95.3%;
99
+
100
+ --tw-yellow-50: 54.5 91.7% 95.3%;
97
101
  --tw-yellow-100: 54.9 96.7% 88%;
98
102
  --tw-yellow-200: 52.8 98.3% 76.9%;
99
103
  --tw-yellow-300: 50.4 97.8% 63.5%;
@@ -104,7 +108,8 @@
104
108
  --tw-yellow-800: 31.8 81% 28.8%;
105
109
  --tw-yellow-900: 28.4 72.5% 25.7%;
106
110
  --tw-yellow-950: 26 83.3% 14.1%;
107
- --tw-lime-050: 78.3 92% 95.1%;
111
+
112
+ --tw-lime-50: 78.3 92% 95.1%;
108
113
  --tw-lime-100: 79.6 89.1% 89.2%;
109
114
  --tw-lime-200: 80.9 88.5% 79.6%;
110
115
  --tw-lime-300: 82 84.5% 67.1%;
@@ -115,7 +120,8 @@
115
120
  --tw-lime-800: 86.3 69% 22.7%;
116
121
  --tw-lime-900: 87.6 61.2% 20.2%;
117
122
  --tw-lime-950: 89.3 80.4% 10%;
118
- --tw-green-050: 138.5 76.5% 96.7%;
123
+
124
+ --tw-green-50: 138.5 76.5% 96.7%;
119
125
  --tw-green-100: 140.6 84.2% 92.5%;
120
126
  --tw-green-200: 141 78.9% 85.1%;
121
127
  --tw-green-300: 141.7 76.6% 73.1%;
@@ -126,7 +132,8 @@
126
132
  --tw-green-800: 142.8 64.2% 24.1%;
127
133
  --tw-green-900: 143.8 61.2% 20.2%;
128
134
  --tw-green-950: 144.9 80.4% 10%;
129
- --tw-emerald-050: 151.8 81% 95.9%;
135
+
136
+ --tw-emerald-50: 151.8 81% 95.9%;
130
137
  --tw-emerald-100: 149.3 80.4% 90%;
131
138
  --tw-emerald-200: 152.4 76% 80.4%;
132
139
  --tw-emerald-300: 156.2 71.6% 66.9%;
@@ -137,7 +144,8 @@
137
144
  --tw-emerald-800: 163.1 88.1% 19.8%;
138
145
  --tw-emerald-900: 164.2 85.7% 16.5%;
139
146
  --tw-emerald-950: 165.7 91.3% 9%;
140
- --tw-teal-050: 166.2 76.5% 96.7%;
147
+
148
+ --tw-teal-50: 166.2 76.5% 96.7%;
141
149
  --tw-teal-100: 167.2 85.5% 89.2%;
142
150
  --tw-teal-200: 168.4 83.8% 78.2%;
143
151
  --tw-teal-300: 170.6 76.9% 64.3%;
@@ -148,7 +156,8 @@
148
156
  --tw-teal-800: 176.1 69.4% 21.8%;
149
157
  --tw-teal-900: 175.9 60.8% 19%;
150
158
  --tw-teal-950: 178.6 84.3% 10%;
151
- --tw-cyan-050: 183.2 100% 96.3%;
159
+
160
+ --tw-cyan-50: 183.2 100% 96.3%;
152
161
  --tw-cyan-100: 185.1 95.9% 90.4%;
153
162
  --tw-cyan-200: 186.2 93.5% 81.8%;
154
163
  --tw-cyan-300: 187 92.4% 69%;
@@ -159,7 +168,8 @@
159
168
  --tw-cyan-800: 194.4 69.6% 27.1%;
160
169
  --tw-cyan-900: 196.4 63.6% 23.7%;
161
170
  --tw-cyan-950: 197 78.9% 14.9%;
162
- --tw-sky-050: 204 100% 97.1%;
171
+
172
+ --tw-sky-50: 204 100% 97.1%;
163
173
  --tw-sky-100: 204 93.8% 93.7%;
164
174
  --tw-sky-200: 200.6 94.4% 86.1%;
165
175
  --tw-sky-300: 199.4 95.5% 73.9%;
@@ -170,7 +180,8 @@
170
180
  --tw-sky-800: 201 90% 27.5%;
171
181
  --tw-sky-900: 202 80.3% 23.9%;
172
182
  --tw-sky-950: 204 80.2% 15.9%;
173
- --tw-indigo-050: 225.9 100% 96.7%;
183
+
184
+ --tw-indigo-50: 225.9 100% 96.7%;
174
185
  --tw-indigo-100: 226.5 100% 93.9%;
175
186
  --tw-indigo-200: 228 96.5% 88.8%;
176
187
  --tw-indigo-300: 229.7 93.5% 81.8%;
@@ -181,7 +192,8 @@
181
192
  --tw-indigo-800: 243.7 54.5% 41.4%;
182
193
  --tw-indigo-900: 242.2 47.4% 34.3%;
183
194
  --tw-indigo-950: 243.8 47.1% 20%;
184
- --tw-violet-050: 250 100% 97.6%;
195
+ --tw-violet-50: 250 100% 97.6%;
196
+
185
197
  --tw-violet-100: 251.4 91.3% 95.5%;
186
198
  --tw-violet-200: 250.5 95.2% 91.8%;
187
199
  --tw-violet-300: 252.5 94.7% 85.1%;
@@ -192,7 +204,8 @@
192
204
  --tw-violet-800: 263.4 69.3% 42.2%;
193
205
  --tw-violet-900: 263.5 67.4% 34.9%;
194
206
  --tw-violet-950: 261.2 72.6% 22.9%;
195
- --tw-purple-050: 270 100% 98%;
207
+
208
+ --tw-purple-50: 270 100% 98%;
196
209
  --tw-purple-100: 268.7 100% 95.5%;
197
210
  --tw-purple-200: 268.6 100% 91.8%;
198
211
  --tw-purple-300: 269.2 97.4% 85.1%;
@@ -203,7 +216,8 @@
203
216
  --tw-purple-800: 272.9 67.2% 39.4%;
204
217
  --tw-purple-900: 273.6 65.6% 32%;
205
218
  --tw-purple-950: 273.5 86.9% 21%;
206
- --tw-fuchsia-050: 289.1 100% 97.8%;
219
+
220
+ --tw-fuchsia-50: 289.1 100% 97.8%;
207
221
  --tw-fuchsia-100: 287 100% 95.5%;
208
222
  --tw-fuchsia-200: 288.3 95.8% 90.6%;
209
223
  --tw-fuchsia-300: 291.1 93.1% 82.9%;
@@ -214,7 +228,8 @@
214
228
  --tw-fuchsia-800: 295.4 70.2% 32.9%;
215
229
  --tw-fuchsia-900: 296.7 63.6% 28%;
216
230
  --tw-fuchsia-950: 296.8 90.2% 16.1%;
217
- --tw-pink-050: 327.3 73.3% 97.1%;
231
+
232
+ --tw-pink-50: 327.3 73.3% 97.1%;
218
233
  --tw-pink-100: 325.7 77.8% 94.7%;
219
234
  --tw-pink-200: 325.9 84.6% 89.8%;
220
235
  --tw-pink-300: 327.4 87.1% 81.8%;
@@ -225,7 +240,8 @@
225
240
  --tw-pink-800: 335.8 74.4% 35.3%;
226
241
  --tw-pink-900: 335.9 69% 30.4%;
227
242
  --tw-pink-950: 336.2 83.9% 17.1%;
228
- --tw-rose-050: 355.7 100% 97.3%;
243
+
244
+ --tw-rose-50: 355.7 100% 97.3%;
229
245
  --tw-rose-100: 355.6 100% 94.7%;
230
246
  --tw-rose-200: 352.7 96.1% 90%;
231
247
  --tw-rose-300: 352.6 95.7% 81.8%;
@@ -241,7 +257,8 @@
241
257
 
242
258
  --black: var(--tw-black);
243
259
  --white: var(--tw-white);
244
- --gray-050: var(--ngrok-grayple-050);
260
+
261
+ --gray-50: var(--ngrok-grayple-50);
245
262
  --gray-100: var(--ngrok-grayple-100);
246
263
  --gray-200: var(--ngrok-grayple-200);
247
264
  --gray-300: var(--ngrok-grayple-300);
@@ -252,7 +269,8 @@
252
269
  --gray-800: var(--ngrok-grayple-800);
253
270
  --gray-900: var(--ngrok-grayple-900);
254
271
  --gray-950: var(--ngrok-grayple-950);
255
- --red-050: var(--tw-red-050);
272
+
273
+ --red-50: var(--tw-red-50);
256
274
  --red-100: var(--tw-red-100);
257
275
  --red-200: var(--tw-red-200);
258
276
  --red-300: var(--tw-red-300);
@@ -263,7 +281,8 @@
263
281
  --red-800: var(--tw-red-800);
264
282
  --red-900: var(--tw-red-900);
265
283
  --red-950: var(--tw-red-950);
266
- --orange-050: var(--tw-orange-050);
284
+
285
+ --orange-50: var(--tw-orange-50);
267
286
  --orange-100: var(--tw-orange-100);
268
287
  --orange-200: var(--tw-orange-200);
269
288
  --orange-300: var(--tw-orange-300);
@@ -274,7 +293,8 @@
274
293
  --orange-800: var(--tw-orange-800);
275
294
  --orange-900: var(--tw-orange-900);
276
295
  --orange-950: var(--tw-orange-950);
277
- --amber-050: var(--tw-amber-050);
296
+
297
+ --amber-50: var(--tw-amber-50);
278
298
  --amber-100: var(--tw-amber-100);
279
299
  --amber-200: var(--tw-amber-200);
280
300
  --amber-300: var(--tw-amber-300);
@@ -285,7 +305,8 @@
285
305
  --amber-800: var(--tw-amber-800);
286
306
  --amber-900: var(--tw-amber-900);
287
307
  --amber-950: var(--tw-amber-950);
288
- --yellow-050: var(--tw-yellow-050);
308
+
309
+ --yellow-50: var(--tw-yellow-50);
289
310
  --yellow-100: var(--tw-yellow-100);
290
311
  --yellow-200: var(--tw-yellow-200);
291
312
  --yellow-300: var(--tw-yellow-300);
@@ -296,7 +317,8 @@
296
317
  --yellow-800: var(--tw-yellow-800);
297
318
  --yellow-900: var(--tw-yellow-900);
298
319
  --yellow-950: var(--tw-yellow-950);
299
- --lime-050: var(--tw-lime-050);
320
+
321
+ --lime-50: var(--tw-lime-50);
300
322
  --lime-100: var(--tw-lime-100);
301
323
  --lime-200: var(--tw-lime-200);
302
324
  --lime-300: var(--tw-lime-300);
@@ -307,7 +329,8 @@
307
329
  --lime-800: var(--tw-lime-800);
308
330
  --lime-900: var(--tw-lime-900);
309
331
  --lime-950: var(--tw-lime-950);
310
- --green-050: var(--tw-green-050);
332
+
333
+ --green-50: var(--tw-green-50);
311
334
  --green-100: var(--tw-green-100);
312
335
  --green-200: var(--tw-green-200);
313
336
  --green-300: var(--tw-green-300);
@@ -318,7 +341,8 @@
318
341
  --green-800: var(--tw-green-800);
319
342
  --green-900: var(--tw-green-900);
320
343
  --green-950: var(--tw-green-950);
321
- --emerald-050: var(--tw-emerald-050);
344
+
345
+ --emerald-50: var(--tw-emerald-50);
322
346
  --emerald-100: var(--tw-emerald-100);
323
347
  --emerald-200: var(--tw-emerald-200);
324
348
  --emerald-300: var(--tw-emerald-300);
@@ -329,7 +353,8 @@
329
353
  --emerald-800: var(--tw-emerald-800);
330
354
  --emerald-900: var(--tw-emerald-900);
331
355
  --emerald-950: var(--tw-emerald-950);
332
- --teal-050: var(--tw-teal-050);
356
+
357
+ --teal-50: var(--tw-teal-50);
333
358
  --teal-100: var(--tw-teal-100);
334
359
  --teal-200: var(--tw-teal-200);
335
360
  --teal-300: var(--tw-teal-300);
@@ -340,7 +365,8 @@
340
365
  --teal-800: var(--tw-teal-800);
341
366
  --teal-900: var(--tw-teal-900);
342
367
  --teal-950: var(--tw-teal-950);
343
- --cyan-050: var(--tw-cyan-050);
368
+
369
+ --cyan-50: var(--tw-cyan-50);
344
370
  --cyan-100: var(--tw-cyan-100);
345
371
  --cyan-200: var(--tw-cyan-200);
346
372
  --cyan-300: var(--tw-cyan-300);
@@ -351,7 +377,8 @@
351
377
  --cyan-800: var(--tw-cyan-800);
352
378
  --cyan-900: var(--tw-cyan-900);
353
379
  --cyan-950: var(--tw-cyan-950);
354
- --sky-050: var(--tw-sky-050);
380
+
381
+ --sky-50: var(--tw-sky-50);
355
382
  --sky-100: var(--tw-sky-100);
356
383
  --sky-200: var(--tw-sky-200);
357
384
  --sky-300: var(--tw-sky-300);
@@ -362,7 +389,8 @@
362
389
  --sky-800: var(--tw-sky-800);
363
390
  --sky-900: var(--tw-sky-900);
364
391
  --sky-950: var(--tw-sky-950);
365
- --blue-050: var(--ngrok-blue-050);
392
+
393
+ --blue-50: var(--ngrok-blue-50);
366
394
  --blue-100: var(--ngrok-blue-100);
367
395
  --blue-200: var(--ngrok-blue-200);
368
396
  --blue-300: var(--ngrok-blue-300);
@@ -373,7 +401,8 @@
373
401
  --blue-800: var(--ngrok-blue-800);
374
402
  --blue-900: var(--ngrok-blue-900);
375
403
  --blue-950: var(--ngrok-blue-950);
376
- --indigo-050: var(--tw-indigo-050);
404
+
405
+ --indigo-50: var(--tw-indigo-50);
377
406
  --indigo-100: var(--tw-indigo-100);
378
407
  --indigo-200: var(--tw-indigo-200);
379
408
  --indigo-300: var(--tw-indigo-300);
@@ -384,7 +413,8 @@
384
413
  --indigo-800: var(--tw-indigo-800);
385
414
  --indigo-900: var(--tw-indigo-900);
386
415
  --indigo-950: var(--tw-indigo-950);
387
- --violet-050: var(--tw-violet-050);
416
+
417
+ --violet-50: var(--tw-violet-50);
388
418
  --violet-100: var(--tw-violet-100);
389
419
  --violet-200: var(--tw-violet-200);
390
420
  --violet-300: var(--tw-violet-300);
@@ -395,7 +425,8 @@
395
425
  --violet-800: var(--tw-violet-800);
396
426
  --violet-900: var(--tw-violet-900);
397
427
  --violet-950: var(--tw-violet-950);
398
- --purple-050: var(--tw-purple-050);
428
+
429
+ --purple-50: var(--tw-purple-50);
399
430
  --purple-100: var(--tw-purple-100);
400
431
  --purple-200: var(--tw-purple-200);
401
432
  --purple-300: var(--tw-purple-300);
@@ -406,7 +437,8 @@
406
437
  --purple-800: var(--tw-purple-800);
407
438
  --purple-900: var(--tw-purple-900);
408
439
  --purple-950: var(--tw-purple-950);
409
- --fuchsia-050: var(--tw-fuchsia-050);
440
+
441
+ --fuchsia-50: var(--tw-fuchsia-50);
410
442
  --fuchsia-100: var(--tw-fuchsia-100);
411
443
  --fuchsia-200: var(--tw-fuchsia-200);
412
444
  --fuchsia-300: var(--tw-fuchsia-300);
@@ -417,7 +449,8 @@
417
449
  --fuchsia-800: var(--tw-fuchsia-800);
418
450
  --fuchsia-900: var(--tw-fuchsia-900);
419
451
  --fuchsia-950: var(--tw-fuchsia-950);
420
- --pink-050: var(--tw-pink-050);
452
+
453
+ --pink-50: var(--tw-pink-50);
421
454
  --pink-100: var(--tw-pink-100);
422
455
  --pink-200: var(--tw-pink-200);
423
456
  --pink-300: var(--tw-pink-300);
@@ -428,7 +461,8 @@
428
461
  --pink-800: var(--tw-pink-800);
429
462
  --pink-900: var(--tw-pink-900);
430
463
  --pink-950: var(--tw-pink-950);
431
- --rose-050: var(--tw-rose-050);
464
+
465
+ --rose-50: var(--tw-rose-50);
432
466
  --rose-100: var(--tw-rose-100);
433
467
  --rose-200: var(--tw-rose-200);
434
468
  --rose-300: var(--tw-rose-300);
@@ -440,122 +474,141 @@
440
474
  --rose-900: var(--tw-rose-900);
441
475
  --rose-950: var(--tw-rose-950);
442
476
 
443
- /* Elevation Tokens */
444
-
445
- --bg-base: var(--gray-050);
477
+ /* mantle functional palette */
478
+
479
+ --neutral-50: var(--gray-50);
480
+ --neutral-100: var(--gray-100);
481
+ --neutral-200: var(--gray-200);
482
+ --neutral-300: var(--gray-300);
483
+ --neutral-400: var(--gray-400);
484
+ --neutral-500: var(--gray-500);
485
+ --neutral-600: var(--gray-600);
486
+ --neutral-700: var(--gray-700);
487
+ --neutral-800: var(--gray-800);
488
+ --neutral-900: var(--gray-900);
489
+ --neutral-950: var(--gray-950);
490
+
491
+ --accent-50: var(--blue-50);
492
+ --accent-100: var(--blue-100);
493
+ --accent-200: var(--blue-200);
494
+ --accent-300: var(--blue-300);
495
+ --accent-400: var(--blue-400);
496
+ --accent-500: var(--blue-500);
497
+ --accent-600: var(--blue-600);
498
+ --accent-700: var(--blue-700);
499
+ --accent-800: var(--blue-800);
500
+ --accent-900: var(--blue-900);
501
+ --accent-950: var(--blue-950);
502
+
503
+ --danger-50: var(--red-50);
504
+ --danger-100: var(--red-100);
505
+ --danger-200: var(--red-200);
506
+ --danger-300: var(--red-300);
507
+ --danger-400: var(--red-400);
508
+ --danger-500: var(--red-500);
509
+ --danger-600: var(--red-600);
510
+ --danger-700: var(--red-700);
511
+ --danger-800: var(--red-800);
512
+ --danger-900: var(--red-900);
513
+ --danger-950: var(--red-950);
514
+
515
+ --warning-50: var(--amber-50);
516
+ --warning-100: var(--amber-100);
517
+ --warning-200: var(--amber-200);
518
+ --warning-300: var(--amber-300);
519
+ --warning-400: var(--amber-400);
520
+ --warning-500: var(--amber-500);
521
+ --warning-600: var(--amber-600);
522
+ --warning-700: var(--amber-700);
523
+ --warning-800: var(--amber-800);
524
+ --warning-900: var(--amber-900);
525
+ --warning-950: var(--amber-950);
526
+
527
+ --success-50: var(--green-50);
528
+ --success-100: var(--green-100);
529
+ --success-200: var(--green-200);
530
+ --success-300: var(--green-300);
531
+ --success-400: var(--green-400);
532
+ --success-500: var(--green-500);
533
+ --success-600: var(--green-600);
534
+ --success-700: var(--green-700);
535
+ --success-800: var(--green-800);
536
+ --success-900: var(--green-900);
537
+ --success-950: var(--green-950);
538
+
539
+ /* elevation tokens */
540
+
541
+ --bg-base: var(--neutral-50);
446
542
  --bg-card: var(--white);
447
543
  --bg-popover: var(--white);
448
544
  --bg-dialog: var(--white);
449
545
 
450
- --bg-base-hover: var(--gray-100);
451
- --bg-card-hover: var(--gray-100);
452
- --bg-popover-hover: var(--gray-100);
453
- --bg-dialog-hover: var(--gray-100);
546
+ --bg-base-hover: var(--neutral-500) / 0.08;
547
+ --bg-card-hover: var(--neutral-500) / 0.08;
548
+ --bg-popover-hover: var(--neutral-500) / 0.08;
549
+ --bg-dialog-hover: var(--neutral-500) / 0.08;
454
550
 
455
- --border-base: var(--gray-300);
456
- --border-card: var(--gray-300);
457
- --border-popover: var(--gray-300);
458
- --border-dialog: var(--gray-300);
551
+ --border-base: var(--neutral-300);
552
+ --border-card: var(--neutral-300);
553
+ --border-popover: var(--neutral-300);
554
+ --border-dialog: var(--neutral-300);
459
555
 
460
- --border-base-muted: var(--gray-200);
461
- --border-card-muted: var(--gray-200);
462
- --border-popover-muted: var(--gray-200);
463
- --border-dialog-muted: var(--gray-200);
556
+ --border-base-muted: var(--neutral-200);
557
+ --border-card-muted: var(--neutral-200);
558
+ --border-popover-muted: var(--neutral-200);
559
+ --border-dialog-muted: var(--neutral-200);
464
560
 
465
- /* Overlay */
561
+ /* text tokens */
562
+
563
+ --text-strong: var(--neutral-950);
564
+ --text-body: var(--neutral-950) / 0.75;
565
+ --text-muted: var(--neutral-950) / 0.6;
566
+ --text-placeholder: var(--neutral-950) / 0.5;
567
+ --text-on-filled: var(--tw-white);
568
+
569
+ /* overlay */
466
570
 
467
571
  --bg-overlay: var(--tw-black) / 0.12;
468
572
 
469
573
  /* Tooltip */
470
574
 
471
575
  --bg-tooltip: var(--gray-800);
472
- --text-on-bg-tooltip: var(--tw-white);
576
+ --text-tooltip: var(--tw-white);
473
577
 
474
- /* Form Tokens */
578
+ /* form tokens */
475
579
 
476
580
  --bg-form: var(--white);
477
- --bg-form-hover: var(--bg-neutral-muted-hover);
478
- --bg-form-active: var(--bg-neutral-muted-active);
479
- --border-form: var(--gray-300);
480
-
481
- /* Theme Tokens */
482
-
483
- --bg-neutral: var(--gray-500);
484
- --bg-accent: var(--blue-500);
485
- --bg-danger: var(--red-500);
486
- --bg-warning: var(--amber-500);
487
- --bg-success: var(--green-500);
488
-
489
- --bg-neutral-hover: var(--gray-600);
490
- --bg-accent-hover: var(--blue-600);
491
- --bg-danger-hover: var(--red-600);
492
- --bg-warning-hover: var(--amber-600);
493
- --bg-success-hover: var(--green-600);
494
-
495
- --bg-neutral-active: var(--gray-700);
496
- --bg-accent-active: var(--blue-700);
497
- --bg-danger-active: var(--red-700);
498
- --bg-warning-active: var(--amber-700);
499
- --bg-success-active: var(--green-700);
500
-
501
- --bg-neutral-muted: var(--gray-500) / 0.08;
502
- --bg-accent-muted: var(--blue-500) / 0.08;
503
- --bg-danger-muted: var(--red-500) / 0.08;
504
- --bg-warning-muted: var(--amber-500) / 0.08;
505
- --bg-success-muted: var(--green-500) / 0.08;
506
-
507
- --bg-neutral-muted-hover: var(--gray-500) / 0.08;
508
- --bg-accent-muted-hover: var(--blue-500) / 0.08;
509
- --bg-danger-muted-hover: var(--red-500) / 0.08;
510
- --bg-warning-muted-hover: var(--amber-500) / 0.08;
511
- --bg-success-muted-hover: var(--green-500) / 0.08;
512
-
513
- --bg-neutral-muted-active: var(--gray-500) / 0.12;
514
- --bg-accent-muted-active: var(--blue-500) / 0.12;
515
- --bg-danger-muted-active: var(--red-500) / 0.12;
516
- --bg-warning-muted-active: var(--amber-500) / 0.12;
517
- --bg-success-muted-active: var(--green-500) / 0.12;
518
-
519
- --border-neutral: var(--gray-600);
520
- --border-accent: var(--blue-600);
521
- --border-danger: var(--red-600);
522
- --border-warning: var(--amber-600);
523
- --border-success: var(--green-600);
524
-
525
- --border-neutral-muted: var(--gray-500) / 0.75;
526
- --border-accent-muted: var(--blue-500) / 0.75;
527
- --border-danger-muted: var(--red-500) / 0.75;
528
- --border-warning-muted: var(--amber-500) / 0.75;
529
- --border-success-muted: var(--green-500) / 0.75;
530
-
531
- --text-strong: var(--gray-950);
532
- --text-default: var(--gray-950) / 0.75;
533
- --text-muted: var(--gray-950) / 0.6;
534
- --text-placeholder: var(--gray-950) / 0.5;
535
-
536
- --text-neutral: var(--gray-600);
537
- --text-accent: var(--blue-600);
538
- --text-danger: var(--red-600);
539
- --text-warning: var(--amber-600);
540
- --text-success: var(--green-600);
541
-
542
- --text-on-bg-neutral-muted: var(--gray-700);
543
- --text-on-bg-accent-muted: var(--blue-700);
544
- --text-on-bg-danger-muted: var(--red-700);
545
- --text-on-bg-warning-muted: var(--amber-700);
546
- --text-on-bg-success-muted: var(--green-700);
547
-
548
- --text-on-bg-neutral: var(--tw-white);
549
- --text-on-bg-accent: var(--tw-white);
550
- --text-on-bg-danger: var(--tw-white);
551
- --text-on-bg-warning: var(--tw-white);
552
- --text-on-bg-success: var(--tw-white);
553
-
554
- --ring-neutral: var(--gray-500) / 0.25;
555
- --ring-accent: var(--blue-500) / 0.25;
556
- --ring-danger: var(--red-500) / 0.25;
557
- --ring-warning: var(--amber-500) / 0.25;
558
- --ring-success: var(--green-500) / 0.25;
581
+ --bg-form-hover: var(--neutral-500) / 0.05;
582
+ --bg-form-active: var(--neutral-500) / 0.1;
583
+ --border-form: var(--neutral-300);
584
+
585
+ /* theme tokens */
586
+
587
+ --bg-filled-neutral: var(--neutral-500);
588
+ --bg-filled-accent: var(--accent-500);
589
+ --bg-filled-danger: var(--danger-500);
590
+ --bg-filled-warning: var(--warning-500);
591
+ --bg-filled-success: var(--success-500);
592
+
593
+ --bg-filled-neutral-hover: var(--neutral-600);
594
+ --bg-filled-accent-hover: var(--accent-600);
595
+ --bg-filled-danger-hover: var(--danger-600);
596
+ --bg-filled-warning-hover: var(--warning-600);
597
+ --bg-filled-success-hover: var(--success-600);
598
+
599
+ --bg-filled-neutral-active: var(--neutral-700);
600
+ --bg-filled-accent-active: var(--accent-700);
601
+ --bg-filled-danger-active: var(--danger-700);
602
+ --bg-filled-warning-active: var(--warning-700);
603
+ --bg-filled-success-active: var(--success-700);
604
+
605
+ /* focus tokens */
606
+
607
+ --ring-focus-neutral: var(--neutral-500) / 0.3;
608
+ --ring-focus-accent: var(--accent-500) / 0.3;
609
+ --ring-focus-danger: var(--danger-500) / 0.3;
610
+ --ring-focus-warning: var(--warning-500) / 0.3;
611
+ --ring-focus-success: var(--success-500) / 0.3;
559
612
  }
560
613
 
561
614
  :root.dark {
@@ -564,7 +617,8 @@
564
617
 
565
618
  --white: var(--tw-black);
566
619
  --black: var(--tw-white);
567
- --gray-050: var(--ngrok-grayple-950);
620
+
621
+ --gray-50: var(--ngrok-grayple-950);
568
622
  --gray-100: var(--ngrok-grayple-900);
569
623
  --gray-200: var(--ngrok-grayple-800);
570
624
  --gray-300: var(--ngrok-grayple-700);
@@ -574,8 +628,9 @@
574
628
  --gray-700: var(--ngrok-grayple-300);
575
629
  --gray-800: var(--ngrok-grayple-200);
576
630
  --gray-900: var(--ngrok-grayple-100);
577
- --gray-950: var(--ngrok-grayple-050);
578
- --red-050: var(--tw-red-950);
631
+ --gray-950: var(--ngrok-grayple-50);
632
+
633
+ --red-50: var(--tw-red-950);
579
634
  --red-100: var(--tw-red-900);
580
635
  --red-200: var(--tw-red-800);
581
636
  --red-300: var(--tw-red-700);
@@ -585,8 +640,9 @@
585
640
  --red-700: var(--tw-red-300);
586
641
  --red-800: var(--tw-red-200);
587
642
  --red-900: var(--tw-red-100);
588
- --red-950: var(--tw-red-050);
589
- --orange-050: var(--tw-orange-950);
643
+ --red-950: var(--tw-red-50);
644
+
645
+ --orange-50: var(--tw-orange-950);
590
646
  --orange-100: var(--tw-orange-900);
591
647
  --orange-200: var(--tw-orange-800);
592
648
  --orange-300: var(--tw-orange-700);
@@ -596,8 +652,9 @@
596
652
  --orange-700: var(--tw-orange-300);
597
653
  --orange-800: var(--tw-orange-200);
598
654
  --orange-900: var(--tw-orange-100);
599
- --orange-950: var(--tw-orange-050);
600
- --amber-050: var(--tw-amber-950);
655
+ --orange-950: var(--tw-orange-50);
656
+
657
+ --amber-50: var(--tw-amber-950);
601
658
  --amber-100: var(--tw-amber-900);
602
659
  --amber-200: var(--tw-amber-800);
603
660
  --amber-300: var(--tw-amber-700);
@@ -607,8 +664,9 @@
607
664
  --amber-700: var(--tw-amber-300);
608
665
  --amber-800: var(--tw-amber-200);
609
666
  --amber-900: var(--tw-amber-100);
610
- --amber-950: var(--tw-amber-050);
611
- --yellow-050: var(--tw-yellow-950);
667
+ --amber-950: var(--tw-amber-50);
668
+
669
+ --yellow-50: var(--tw-yellow-950);
612
670
  --yellow-100: var(--tw-yellow-900);
613
671
  --yellow-200: var(--tw-yellow-800);
614
672
  --yellow-300: var(--tw-yellow-700);
@@ -618,8 +676,9 @@
618
676
  --yellow-700: var(--tw-yellow-300);
619
677
  --yellow-800: var(--tw-yellow-200);
620
678
  --yellow-900: var(--tw-yellow-100);
621
- --yellow-950: var(--tw-yellow-050);
622
- --lime-050: var(--tw-lime-950);
679
+ --yellow-950: var(--tw-yellow-50);
680
+
681
+ --lime-50: var(--tw-lime-950);
623
682
  --lime-100: var(--tw-lime-900);
624
683
  --lime-200: var(--tw-lime-800);
625
684
  --lime-300: var(--tw-lime-700);
@@ -629,8 +688,9 @@
629
688
  --lime-700: var(--tw-lime-300);
630
689
  --lime-800: var(--tw-lime-200);
631
690
  --lime-900: var(--tw-lime-100);
632
- --lime-950: var(--tw-lime-050);
633
- --green-050: var(--tw-green-950);
691
+ --lime-950: var(--tw-lime-50);
692
+
693
+ --green-50: var(--tw-green-950);
634
694
  --green-100: var(--tw-green-900);
635
695
  --green-200: var(--tw-green-800);
636
696
  --green-300: var(--tw-green-700);
@@ -640,8 +700,9 @@
640
700
  --green-700: var(--tw-green-300);
641
701
  --green-800: var(--tw-green-200);
642
702
  --green-900: var(--tw-green-100);
643
- --green-950: var(--tw-green-050);
644
- --emerald-050: var(--tw-emerald-950);
703
+ --green-950: var(--tw-green-50);
704
+
705
+ --emerald-50: var(--tw-emerald-950);
645
706
  --emerald-100: var(--tw-emerald-900);
646
707
  --emerald-200: var(--tw-emerald-800);
647
708
  --emerald-300: var(--tw-emerald-700);
@@ -651,8 +712,9 @@
651
712
  --emerald-700: var(--tw-emerald-300);
652
713
  --emerald-800: var(--tw-emerald-200);
653
714
  --emerald-900: var(--tw-emerald-100);
654
- --emerald-950: var(--tw-emerald-050);
655
- --teal-050: var(--tw-teal-950);
715
+ --emerald-950: var(--tw-emerald-50);
716
+
717
+ --teal-50: var(--tw-teal-950);
656
718
  --teal-100: var(--tw-teal-900);
657
719
  --teal-200: var(--tw-teal-800);
658
720
  --teal-300: var(--tw-teal-700);
@@ -662,8 +724,9 @@
662
724
  --teal-700: var(--tw-teal-300);
663
725
  --teal-800: var(--tw-teal-200);
664
726
  --teal-900: var(--tw-teal-100);
665
- --teal-950: var(--tw-teal-050);
666
- --cyan-050: var(--tw-cyan-950);
727
+ --teal-950: var(--tw-teal-50);
728
+
729
+ --cyan-50: var(--tw-cyan-950);
667
730
  --cyan-100: var(--tw-cyan-900);
668
731
  --cyan-200: var(--tw-cyan-800);
669
732
  --cyan-300: var(--tw-cyan-700);
@@ -673,8 +736,9 @@
673
736
  --cyan-700: var(--tw-cyan-300);
674
737
  --cyan-800: var(--tw-cyan-200);
675
738
  --cyan-900: var(--tw-cyan-100);
676
- --cyan-950: var(--tw-cyan-050);
677
- --sky-050: var(--tw-sky-950);
739
+ --cyan-950: var(--tw-cyan-50);
740
+
741
+ --sky-50: var(--tw-sky-950);
678
742
  --sky-100: var(--tw-sky-900);
679
743
  --sky-200: var(--tw-sky-800);
680
744
  --sky-300: var(--tw-sky-700);
@@ -684,8 +748,9 @@
684
748
  --sky-700: var(--tw-sky-300);
685
749
  --sky-800: var(--tw-sky-200);
686
750
  --sky-900: var(--tw-sky-100);
687
- --sky-950: var(--tw-sky-050);
688
- --blue-050: var(--ngrok-blue-950);
751
+ --sky-950: var(--tw-sky-50);
752
+
753
+ --blue-50: var(--ngrok-blue-950);
689
754
  --blue-100: var(--ngrok-blue-900);
690
755
  --blue-200: var(--ngrok-blue-800);
691
756
  --blue-300: var(--ngrok-blue-700);
@@ -695,8 +760,9 @@
695
760
  --blue-700: var(--ngrok-blue-300);
696
761
  --blue-800: var(--ngrok-blue-200);
697
762
  --blue-900: var(--ngrok-blue-100);
698
- --blue-950: var(--ngrok-blue-050);
699
- --indigo-050: var(--tw-indigo-950);
763
+ --blue-950: var(--ngrok-blue-50);
764
+
765
+ --indigo-50: var(--tw-indigo-950);
700
766
  --indigo-100: var(--tw-indigo-900);
701
767
  --indigo-200: var(--tw-indigo-800);
702
768
  --indigo-300: var(--tw-indigo-700);
@@ -706,8 +772,9 @@
706
772
  --indigo-700: var(--tw-indigo-300);
707
773
  --indigo-800: var(--tw-indigo-200);
708
774
  --indigo-900: var(--tw-indigo-100);
709
- --indigo-950: var(--tw-indigo-050);
710
- --violet-050: var(--tw-violet-950);
775
+ --indigo-950: var(--tw-indigo-50);
776
+
777
+ --violet-50: var(--tw-violet-950);
711
778
  --violet-100: var(--tw-violet-900);
712
779
  --violet-200: var(--tw-violet-800);
713
780
  --violet-300: var(--tw-violet-700);
@@ -717,8 +784,9 @@
717
784
  --violet-700: var(--tw-violet-300);
718
785
  --violet-800: var(--tw-violet-200);
719
786
  --violet-900: var(--tw-violet-100);
720
- --violet-950: var(--tw-violet-050);
721
- --purple-050: var(--tw-purple-950);
787
+ --violet-950: var(--tw-violet-50);
788
+
789
+ --purple-50: var(--tw-purple-950);
722
790
  --purple-100: var(--tw-purple-900);
723
791
  --purple-200: var(--tw-purple-800);
724
792
  --purple-300: var(--tw-purple-700);
@@ -728,8 +796,9 @@
728
796
  --purple-700: var(--tw-purple-300);
729
797
  --purple-800: var(--tw-purple-200);
730
798
  --purple-900: var(--tw-purple-100);
731
- --purple-950: var(--tw-purple-050);
732
- --fuchsia-050: var(--tw-fuchsia-950);
799
+ --purple-950: var(--tw-purple-50);
800
+
801
+ --fuchsia-50: var(--tw-fuchsia-950);
733
802
  --fuchsia-100: var(--tw-fuchsia-900);
734
803
  --fuchsia-200: var(--tw-fuchsia-800);
735
804
  --fuchsia-300: var(--tw-fuchsia-700);
@@ -739,8 +808,9 @@
739
808
  --fuchsia-700: var(--tw-fuchsia-300);
740
809
  --fuchsia-800: var(--tw-fuchsia-200);
741
810
  --fuchsia-900: var(--tw-fuchsia-100);
742
- --fuchsia-950: var(--tw-fuchsia-050);
743
- --pink-050: var(--tw-pink-950);
811
+ --fuchsia-950: var(--tw-fuchsia-50);
812
+
813
+ --pink-50: var(--tw-pink-950);
744
814
  --pink-100: var(--tw-pink-900);
745
815
  --pink-200: var(--tw-pink-800);
746
816
  --pink-300: var(--tw-pink-700);
@@ -750,8 +820,9 @@
750
820
  --pink-700: var(--tw-pink-300);
751
821
  --pink-800: var(--tw-pink-200);
752
822
  --pink-900: var(--tw-pink-100);
753
- --pink-950: var(--tw-pink-050);
754
- --rose-050: var(--tw-rose-950);
823
+ --pink-950: var(--tw-pink-50);
824
+
825
+ --rose-50: var(--tw-rose-950);
755
826
  --rose-100: var(--tw-rose-900);
756
827
  --rose-200: var(--tw-rose-800);
757
828
  --rose-300: var(--tw-rose-700);
@@ -761,86 +832,77 @@
761
832
  --rose-700: var(--tw-rose-300);
762
833
  --rose-800: var(--tw-rose-200);
763
834
  --rose-900: var(--tw-rose-100);
764
- --rose-950: var(--tw-rose-050);
835
+ --rose-950: var(--tw-rose-50);
765
836
 
766
- /* Elevation Tokens */
837
+ /* elevation tokens */
767
838
 
768
- --bg-base: var(--gray-050);
769
- --bg-card: var(--gray-100);
770
- --bg-popover: var(--gray-100);
771
- --bg-dialog: var(--gray-050);
839
+ --bg-base: var(--neutral-50);
840
+ --bg-card: var(--neutral-100);
841
+ --bg-popover: var(--neutral-100);
842
+ --bg-dialog: var(--neutral-50);
772
843
 
773
- --bg-base-hover: var(--gray-200);
774
- --bg-card-hover: var(--gray-200);
775
- --bg-popover-hover: var(--gray-200);
776
- --bg-dialog-hover: var(--gray-200);
844
+ --bg-base-hover: var(--neutral-500) / 0.15;
845
+ --bg-card-hover: var(--neutral-500) / 0.15;
846
+ --bg-popover-hover: var(--neutral-500) / 0.15;
847
+ --bg-dialog-hover: var(--neutral-500) / 0.15;
777
848
 
778
- --border-base: var(--gray-300);
779
- --border-card: var(--gray-300);
780
- --border-popover: var(--gray-300);
781
- --border-dialog: var(--gray-300);
849
+ --border-base: var(--neutral-300);
850
+ --border-card: var(--neutral-300);
851
+ --border-popover: var(--neutral-300);
852
+ --border-dialog: var(--neutral-300);
782
853
 
783
- --border-base-muted: var(--gray-200);
784
- --border-card-muted: var(--gray-200);
785
- --border-popover-muted: var(--gray-200);
786
- --border-dialog-muted: var(--gray-200);
854
+ --border-base-muted: var(--neutral-200);
855
+ --border-card-muted: var(--neutral-200);
856
+ --border-popover-muted: var(--neutral-200);
857
+ --border-dialog-muted: var(--neutral-200);
787
858
 
788
- /* Overlay */
859
+ /* text tokens */
789
860
 
790
- --bg-overlay: var(--tw-black) / 0.6;
861
+ --text-strong: var(--black);
862
+ --text-body: var(--black) / 0.7;
863
+ --text-muted: var(--black) / 0.5;
864
+ --text-placeholder: var(--black) / 0.4;
865
+ --text-on-filled: var(--tw-white);
791
866
 
792
- /* Tooltip */
867
+ /* overlay */
793
868
 
794
- --bg-tooltip: var(--tw-black);
795
- --text-on-bg-tooltip: var(--gray-900);
869
+ --bg-overlay: var(--tw-black) / 0.6;
796
870
 
797
- /* Form Tokens */
871
+ /* tooltip */
798
872
 
799
- --bg-form: var(--gray-050);
800
- --border-form: var(--gray-300);
873
+ --bg-tooltip: var(--tw-black);
874
+ --text-tooltip: var(--neutral-900);
801
875
 
802
- /* Theme Tokens */
876
+ /* form tokens */
803
877
 
804
- --bg-neutral: var(--gray-500);
805
- --bg-accent: var(--blue-500);
806
- --bg-danger: var(--red-500);
807
- --bg-warning: var(--amber-500);
808
- --bg-success: var(--green-500);
878
+ --bg-form: var(--neutral-50);
879
+ --border-form: var(--neutral-300);
809
880
 
810
- --bg-neutral-hover: var(--gray-500) / 0.9;
811
- --bg-accent-hover: var(--blue-500) / 0.9;
812
- --bg-danger-hover: var(--red-500) / 0.9;
813
- --bg-warning-hover: var(--amber-500) / 0.9;
814
- --bg-success-hover: var(--green-500) / 0.9;
881
+ /* theme tokens */
815
882
 
816
- --bg-neutral-active: var(--gray-500) / 0.8;
817
- --bg-accent-active: var(--blue-500) / 0.8;
818
- --bg-danger-active: var(--red-500) / 0.8;
819
- --bg-warning-active: var(--amber-500) / 0.8;
820
- --bg-success-active: var(--green-500) / 0.8;
883
+ --bg-neutral: var(--neutral-500);
884
+ --bg-accent: var(--accent-500);
885
+ --bg-danger: var(--danger-500);
886
+ --bg-warning: var(--warning-500);
887
+ --bg-success: var(--success-500);
821
888
 
822
- --text-strong: var(--black);
823
- --text-default: var(--black) / 0.7;
824
- --text-muted: var(--black) / 0.5;
825
- --text-placeholder: var(--black) / 0.4;
889
+ --bg-filled-neutral-hover: var(--neutral-500) / 0.9;
890
+ --bg-filled-accent-hover: var(--accent-500) / 0.9;
891
+ --bg-filled-danger-hover: var(--danger-500) / 0.9;
892
+ --bg-filled-warning-hover: var(--warning-500) / 0.9;
893
+ --bg-filled-success-hover: var(--success-500) / 0.9;
826
894
 
827
- --text-on-bg-neutral: var(--tw-white);
828
- --text-on-bg-accent: var(--tw-white);
829
- --text-on-bg-danger: var(--tw-white);
830
- --text-on-bg-warning: var(--tw-white);
831
- --text-on-bg-success: var(--tw-white);
832
-
833
- --ring-neutral: var(--gray-600) / 0.35;
834
- --ring-accent: var(--blue-600) / 0.35;
835
- --ring-danger: var(--red-600) / 0.35;
836
- --ring-warning: var(--amber-600) / 0.35;
837
- --ring-success: var(--green-600) / 0.35;
895
+ --bg-filled-neutral-active: var(--neutral-500) / 0.8;
896
+ --bg-filled-accent-active: var(--accent-500) / 0.8;
897
+ --bg-filled-danger-active: var(--danger-500) / 0.8;
898
+ --bg-filled-warning-active: var(--warning-500) / 0.8;
899
+ --bg-filled-success-active: var(--success-500) / 0.8;
838
900
  }
839
901
 
840
902
  :root.light-high-contrast {
841
903
  color-scheme: light;
842
904
 
843
- --amber-050: 48 100% 96%;
905
+ --amber-50: 48 100% 96%;
844
906
  --amber-100: 48 96% 89%;
845
907
  --amber-200: 48 97% 77%;
846
908
  --amber-300: 32 95% 44%;
@@ -852,7 +914,7 @@
852
914
  --amber-900: 25 92% 19%;
853
915
  --amber-950: 21 92% 14%;
854
916
 
855
- --blue-050: 220 100% 97%;
917
+ --blue-50: 220 100% 97%;
856
918
  --blue-100: 221 94% 93%;
857
919
  --blue-200: 221 94% 87%;
858
920
  --blue-300: 228 82% 55%;
@@ -864,7 +926,7 @@
864
926
  --blue-900: 232 58% 26%;
865
927
  --blue-950: 234 55% 21%;
866
928
 
867
- --cyan-050: 183 100% 96%;
929
+ --cyan-50: 183 100% 96%;
868
930
  --cyan-100: 185 96% 90%;
869
931
  --cyan-200: 186 94% 82%;
870
932
  --cyan-300: 192 91% 36%;
@@ -876,7 +938,7 @@
876
938
  --cyan-900: 196 81% 18%;
877
939
  --cyan-950: 197 79% 15%;
878
940
 
879
- --emerald-050: 152 81% 96%;
941
+ --emerald-50: 152 81% 96%;
880
942
  --emerald-100: 149 80% 90%;
881
943
  --emerald-200: 152 76% 80%;
882
944
  --emerald-300: 161 94% 30%;
@@ -888,7 +950,7 @@
888
950
  --emerald-900: 164 90% 12%;
889
951
  --emerald-950: 166 91% 9%;
890
952
 
891
- --fuchsia-050: 289 100% 98%;
953
+ --fuchsia-50: 289 100% 98%;
892
954
  --fuchsia-100: 287 100% 95%;
893
955
  --fuchsia-200: 288 96% 91%;
894
956
  --fuchsia-300: 293 69% 49%;
@@ -900,7 +962,7 @@
900
962
  --fuchsia-900: 296 81% 21%;
901
963
  --fuchsia-950: 297 90% 16%;
902
964
 
903
- --gray-050: 210 20% 98%;
965
+ --gray-50: 210 20% 98%;
904
966
  --gray-100: 220 14% 96%;
905
967
  --gray-200: 223 14% 90%;
906
968
  --gray-300: 228 11% 35%;
@@ -912,7 +974,7 @@
912
974
  --gray-900: 235 17% 15%;
913
975
  --gray-950: 235 21% 11%;
914
976
 
915
- --green-050: 138 76% 97%;
977
+ --green-50: 138 76% 97%;
916
978
  --green-100: 141 84% 93%;
917
979
  --green-200: 141 79% 85%;
918
980
  --green-300: 142 76% 36%;
@@ -924,7 +986,7 @@
924
986
  --green-900: 144 77% 14%;
925
987
  --green-950: 145 80% 10%;
926
988
 
927
- --indigo-050: 226 100% 97%;
989
+ --indigo-50: 226 100% 97%;
928
990
  --indigo-100: 226 100% 94%;
929
991
  --indigo-200: 228 96% 89%;
930
992
  --indigo-300: 243 75% 59%;
@@ -936,7 +998,7 @@
936
998
  --indigo-900: 244 49% 26%;
937
999
  --indigo-950: 244 47% 20%;
938
1000
 
939
- --lime-050: 78 92% 95%;
1001
+ --lime-50: 78 92% 95%;
940
1002
  --lime-100: 80 89% 89%;
941
1003
  --lime-200: 81 88% 80%;
942
1004
  --lime-300: 85 85% 35%;
@@ -948,7 +1010,7 @@
948
1010
  --lime-900: 87 80% 14%;
949
1011
  --lime-950: 89 80% 10%;
950
1012
 
951
- --orange-050: 33 100% 96%;
1013
+ --orange-50: 33 100% 96%;
952
1014
  --orange-100: 34 100% 92%;
953
1015
  --orange-200: 32 98% 83%;
954
1016
  --orange-300: 21 90% 48%;
@@ -960,7 +1022,7 @@
960
1022
  --orange-900: 16 84% 20%;
961
1023
  --orange-950: 13 81% 15%;
962
1024
 
963
- --pink-050: 327 73% 97%;
1025
+ --pink-50: 327 73% 97%;
964
1026
  --pink-100: 326 78% 95%;
965
1027
  --pink-200: 326 85% 90%;
966
1028
  --pink-300: 333 71% 51%;
@@ -972,7 +1034,7 @@
972
1034
  --pink-900: 335 79% 22%;
973
1035
  --pink-950: 336 84% 17%;
974
1036
 
975
- --purple-050: 270 100% 98%;
1037
+ --purple-50: 270 100% 98%;
976
1038
  --purple-100: 269 100% 95%;
977
1039
  --purple-200: 269 100% 92%;
978
1040
  --purple-300: 271 81% 56%;
@@ -984,7 +1046,7 @@
984
1046
  --purple-900: 273 79% 26%;
985
1047
  --purple-950: 274 87% 21%;
986
1048
 
987
- --red-050: 0 86% 97%;
1049
+ --red-50: 0 86% 97%;
988
1050
  --red-100: 0 93% 94%;
989
1051
  --red-200: 0 96% 89%;
990
1052
  --red-300: 0 72% 51%;
@@ -996,7 +1058,7 @@
996
1058
  --red-900: 0 72% 21%;
997
1059
  --red-950: 0 75% 15%;
998
1060
 
999
- --rose-050: 356 100% 97%;
1061
+ --rose-50: 356 100% 97%;
1000
1062
  --rose-100: 356 100% 95%;
1001
1063
  --rose-200: 353 96% 90%;
1002
1064
  --rose-300: 347 77% 50%;
@@ -1008,7 +1070,7 @@
1008
1070
  --rose-900: 344 83% 21%;
1009
1071
  --rose-950: 343 88% 16%;
1010
1072
 
1011
- --sky-050: 204 100% 97%;
1073
+ --sky-50: 204 100% 97%;
1012
1074
  --sky-100: 204 94% 94%;
1013
1075
  --sky-200: 201 94% 86%;
1014
1076
  --sky-300: 200 98% 39%;
@@ -1020,7 +1082,7 @@
1020
1082
  --sky-900: 203 84% 20%;
1021
1083
  --sky-950: 204 80% 16%;
1022
1084
 
1023
- --teal-050: 166 76% 97%;
1085
+ --teal-50: 166 76% 97%;
1024
1086
  --teal-100: 167 85% 89%;
1025
1087
  --teal-200: 168 84% 78%;
1026
1088
  --teal-300: 175 84% 32%;
@@ -1032,7 +1094,7 @@
1032
1094
  --teal-900: 178 82% 13%;
1033
1095
  --teal-950: 179 84% 10%;
1034
1096
 
1035
- --violet-050: 250 100% 98%;
1097
+ --violet-50: 250 100% 98%;
1036
1098
  --violet-100: 251 91% 95%;
1037
1099
  --violet-200: 251 95% 92%;
1038
1100
  --violet-300: 262 83% 58%;
@@ -1044,7 +1106,7 @@
1044
1106
  --violet-900: 261 68% 28%;
1045
1107
  --violet-950: 261 73% 23%;
1046
1108
 
1047
- --yellow-050: 55 92% 95%;
1109
+ --yellow-50: 55 92% 95%;
1048
1110
  --yellow-100: 55 97% 88%;
1049
1111
  --yellow-200: 53 98% 77%;
1050
1112
  --yellow-300: 41 96% 40%;
@@ -1059,23 +1121,20 @@
1059
1121
  --black: 0 0% 0%;
1060
1122
  --white: 0 0% 100%;
1061
1123
 
1062
- /* Tokens */
1124
+ /* elevation tokens */
1063
1125
 
1064
- --border-base-muted: var(--gray-300);
1065
- --border-card-muted: var(--gray-300);
1066
- --border-popover-muted: var(--gray-300);
1067
- --border-dialog-muted: var(--gray-300);
1126
+ --border-base-muted: var(--neutral-300);
1127
+ --border-card-muted: var(--neutral-300);
1128
+ --border-popover-muted: var(--neutral-300);
1129
+ --border-dialog-muted: var(--neutral-300);
1130
+
1131
+ /* text tokens */
1068
1132
 
1069
1133
  --text-strong: var(--black);
1070
- --text-default: var(--black);
1134
+ --text-body: var(--black);
1071
1135
  --text-muted: var(--black) / 0.75;
1072
1136
  --text-placeholder: var(--black) / 0.5;
1073
-
1074
- --ring-neutral: var(--gray-400) / 0.4;
1075
- --ring-accent: var(--blue-400) / 0.4;
1076
- --ring-danger: var(--red-400) / 0.4;
1077
- --ring-warning: var(--amber-400) / 0.4;
1078
- --ring-success: var(--green-400) / 0.4;
1137
+ --text-on-filled: var(--tw-white);
1079
1138
  }
1080
1139
 
1081
1140
  :root.dark-high-contrast {
@@ -1084,7 +1143,7 @@
1084
1143
  --white: 0 0% 0%;
1085
1144
  --black: 0 0% 100%;
1086
1145
 
1087
- --amber-050: 21 92% 14%;
1146
+ --amber-50: 21 92% 14%;
1088
1147
  --amber-100: 22 78% 26%;
1089
1148
  --amber-200: 23 83% 31%;
1090
1149
  --amber-300: 43 96% 56%;
@@ -1096,7 +1155,7 @@
1096
1155
  --amber-900: 44 100% 90%;
1097
1156
  --amber-950: 48 100% 96%;
1098
1157
 
1099
- --blue-050: 234 55% 21%;
1158
+ --blue-50: 234 55% 21%;
1100
1159
  --blue-100: 232 63% 33%;
1101
1160
  --blue-200: 232 70% 40%;
1102
1161
  --blue-300: 220 96% 70%;
@@ -1108,7 +1167,7 @@
1108
1167
  --blue-900: 221 94% 93%;
1109
1168
  --blue-950: 220 100% 97%;
1110
1169
 
1111
- --cyan-050: 197 79% 15%;
1170
+ --cyan-50: 197 79% 15%;
1112
1171
  --cyan-100: 196 64% 24%;
1113
1172
  --cyan-200: 194 70% 27%;
1114
1173
  --cyan-300: 188 86% 53%;
@@ -1120,7 +1179,7 @@
1120
1179
  --cyan-900: 187 92% 90%;
1121
1180
  --cyan-950: 183 100% 96%;
1122
1181
 
1123
- --emerald-050: 166 91% 9%;
1182
+ --emerald-50: 166 91% 9%;
1124
1183
  --emerald-100: 164 86% 16%;
1125
1184
  --emerald-200: 163 88% 20%;
1126
1185
  --emerald-300: 158 64% 52%;
@@ -1132,7 +1191,7 @@
1132
1191
  --emerald-900: 155 71% 89%;
1133
1192
  --emerald-950: 152 81% 96%;
1134
1193
 
1135
- --fuchsia-050: 297 90% 16%;
1194
+ --fuchsia-50: 297 90% 16%;
1136
1195
  --fuchsia-100: 297 64% 28%;
1137
1196
  --fuchsia-200: 295 70% 33%;
1138
1197
  --fuchsia-300: 292 91% 73%;
@@ -1144,7 +1203,7 @@
1144
1203
  --fuchsia-900: 289 100% 95%;
1145
1204
  --fuchsia-950: 289 100% 98%;
1146
1205
 
1147
- --gray-050: 235 21% 11%;
1206
+ --gray-50: 235 21% 11%;
1148
1207
  --gray-100: 236 17% 17%;
1149
1208
  --gray-200: 233 16% 21%;
1150
1209
  --gray-300: 226 9% 65%;
@@ -1156,7 +1215,7 @@
1156
1215
  --gray-900: 210 12% 93%;
1157
1216
  --gray-950: 210 20% 98%;
1158
1217
 
1159
- --green-050: 145 80% 10%;
1218
+ --green-50: 145 80% 10%;
1160
1219
  --green-100: 144 61% 20%;
1161
1220
  --green-200: 143 64% 24%;
1162
1221
  --green-300: 142 69% 58%;
@@ -1168,7 +1227,7 @@
1168
1227
  --green-900: 142 73% 91%;
1169
1228
  --green-950: 138 76% 97%;
1170
1229
 
1171
- --indigo-050: 244 47% 20%;
1230
+ --indigo-50: 244 47% 20%;
1172
1231
  --indigo-100: 242 47% 34%;
1173
1232
  --indigo-200: 244 55% 41%;
1174
1233
  --indigo-300: 234 89% 74%;
@@ -1180,7 +1239,7 @@
1180
1239
  --indigo-900: 230 94% 94%;
1181
1240
  --indigo-950: 226 100% 97%;
1182
1241
 
1183
- --lime-050: 89 80% 10%;
1242
+ --lime-50: 89 80% 10%;
1184
1243
  --lime-100: 88 61% 20%;
1185
1244
  --lime-200: 86 69% 23%;
1186
1245
  --lime-300: 83 78% 55%;
@@ -1192,7 +1251,7 @@
1192
1251
  --lime-900: 80 85% 90%;
1193
1252
  --lime-950: 78 92% 95%;
1194
1253
 
1195
- --orange-050: 13 81% 15%;
1254
+ --orange-50: 13 81% 15%;
1196
1255
  --orange-100: 15 75% 28%;
1197
1256
  --orange-200: 15 79% 34%;
1198
1257
  --orange-300: 27 96% 61%;
@@ -1204,7 +1263,7 @@
1204
1263
  --orange-900: 29 100% 91%;
1205
1264
  --orange-950: 33 100% 96%;
1206
1265
 
1207
- --pink-050: 336 84% 17%;
1266
+ --pink-50: 336 84% 17%;
1208
1267
  --pink-100: 336 69% 30%;
1209
1268
  --pink-200: 336 74% 35%;
1210
1269
  --pink-300: 329 86% 70%;
@@ -1216,7 +1275,7 @@
1216
1275
  --pink-900: 329 82% 94%;
1217
1276
  --pink-950: 327 73% 97%;
1218
1277
 
1219
- --purple-050: 274 87% 21%;
1278
+ --purple-50: 274 87% 21%;
1220
1279
  --purple-100: 274 66% 32%;
1221
1280
  --purple-200: 273 67% 39%;
1222
1281
  --purple-300: 270 95% 75%;
@@ -1228,7 +1287,7 @@
1228
1287
  --purple-900: 270 100% 95%;
1229
1288
  --purple-950: 270 100% 98%;
1230
1289
 
1231
- --red-050: 0 75% 15%;
1290
+ --red-50: 0 75% 15%;
1232
1291
  --red-100: 0 63% 31%;
1233
1292
  --red-200: 0 70% 35%;
1234
1293
  --red-300: 0 91% 71%;
@@ -1240,7 +1299,7 @@
1240
1299
  --red-900: 0 88% 93%;
1241
1300
  --red-950: 0 86% 97%;
1242
1301
 
1243
- --rose-050: 343 88% 16%;
1302
+ --rose-50: 343 88% 16%;
1244
1303
  --rose-100: 342 75% 30%;
1245
1304
  --rose-200: 343 80% 35%;
1246
1305
  --rose-300: 351 95% 71%;
@@ -1252,7 +1311,7 @@
1252
1311
  --rose-900: 353 100% 94%;
1253
1312
  --rose-950: 356 100% 97%;
1254
1313
 
1255
- --sky-050: 204 80% 16%;
1314
+ --sky-50: 204 80% 16%;
1256
1315
  --sky-100: 202 80% 24%;
1257
1316
  --sky-200: 201 90% 27%;
1258
1317
  --sky-300: 198 93% 60%;
@@ -1264,7 +1323,7 @@
1264
1323
  --sky-900: 200 95% 91%;
1265
1324
  --sky-950: 204 100% 97%;
1266
1325
 
1267
- --teal-050: 179 84% 10%;
1326
+ --teal-50: 179 84% 10%;
1268
1327
  --teal-100: 176 61% 19%;
1269
1328
  --teal-200: 176 69% 22%;
1270
1329
  --teal-300: 172 66% 50%;
@@ -1276,7 +1335,7 @@
1276
1335
  --teal-900: 170 70% 90%;
1277
1336
  --teal-950: 166 76% 97%;
1278
1337
 
1279
- --violet-050: 261 73% 23%;
1338
+ --violet-50: 261 73% 23%;
1280
1339
  --violet-100: 264 67% 35%;
1281
1340
  --violet-200: 263 69% 42%;
1282
1341
  --violet-300: 255 92% 76%;
@@ -1288,7 +1347,7 @@
1288
1347
  --violet-900: 253 100% 95%;
1289
1348
  --violet-950: 250 100% 98%;
1290
1349
 
1291
- --yellow-050: 26 83% 14%;
1350
+ --yellow-50: 26 83% 14%;
1292
1351
  --yellow-100: 28 73% 26%;
1293
1352
  --yellow-200: 32 81% 29%;
1294
1353
  --yellow-300: 48 96% 53%;
@@ -1300,40 +1359,29 @@
1300
1359
  --yellow-900: 50 96% 89%;
1301
1360
  --yellow-950: 55 92% 95%;
1302
1361
 
1303
- /* Tokens */
1362
+ /* tokens */
1304
1363
 
1305
1364
  --bg-base: var(--white);
1306
- --bg-card: var(--gray-050);
1307
- --bg-popover: var(--gray-050);
1308
- --bg-dialog: var(--gray-050);
1365
+ --bg-card: var(--neutral-50);
1366
+ --bg-popover: var(--neutral-50);
1367
+ --bg-dialog: var(--neutral-50);
1309
1368
  --bg-overlay: var(--tw-black) / 0.8;
1310
1369
 
1311
1370
  --text-strong: var(--black);
1312
- --text-default: var(--black);
1371
+ --text-body: var(--black);
1313
1372
  --text-muted: var(--black) / 0.75;
1314
1373
  --text-placeholder: var(--black) / 0.5;
1374
+ --text-on-filled: var(--tw-black);
1315
1375
 
1316
- --text-on-bg-neutral: var(--tw-black);
1317
- --text-on-bg-accent: var(--tw-black);
1318
- --text-on-bg-danger: var(--tw-black);
1319
- --text-on-bg-warning: var(--tw-black);
1320
- --text-on-bg-success: var(--tw-black);
1321
-
1322
- --border-base-muted: var(--gray-300);
1323
- --border-card-muted: var(--gray-300);
1324
- --border-popover-muted: var(--gray-300);
1325
- --border-dialog-muted: var(--gray-300);
1326
-
1327
- --ring-neutral: var(--gray-700) / 0.65;
1328
- --ring-accent: var(--blue-700) / 0.65;
1329
- --ring-danger: var(--red-700) / 0.65;
1330
- --ring-warning: var(--amber-700) / 0.65;
1331
- --ring-success: var(--green-700) / 0.65;
1376
+ --border-base-muted: var(--neutral-300);
1377
+ --border-card-muted: var(--neutral-300);
1378
+ --border-popover-muted: var(--neutral-300);
1379
+ --border-dialog-muted: var(--neutral-300);
1332
1380
 
1333
1381
  --bg-overlay: var(--tw-black) / 0.6;
1334
1382
 
1335
1383
  --bg-tooltip: var(--tw-black);
1336
- --text-on-bg-tooltip: var(--tw-white);
1384
+ --text-tooltip: var(--tw-white);
1337
1385
  }
1338
1386
 
1339
1387
  /**