@kazamitte/design-token 0.3.0 → 0.4.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 (8) hide show
  1. package/README.md +16 -7
  2. package/dist/generate-theme.mjs +1 -0
  3. package/docs/tailwind-merge.md +1 -0
  4. package/package.json +2 -2
  5. package/tailwind/base/color/semantic.css +56 -0
  6. package/tailwind/base/color/status.css +4 -0
  7. package/tailwind/base/color/utility.css +28 -0
  8. package/tailwind/theme/color/default.css +3 -0
package/README.md CHANGED
@@ -93,13 +93,13 @@ tailwind/
93
93
 
94
94
  Each role carries 15 tokens.
95
95
 
96
- | Group | Tokens |
97
- | ---------- | ------------------------------------------------------------------ |
98
- | Text | `fg-strong`, `fg`, `fg-muted`, `fg-subtle` |
99
- | Background | `bg`, `bg-subtle`, `bg-muted`, `bg-selected`, `bg-solid` |
100
- | Border | `border-subtle`, `border-muted`, `border-selected`, `border-solid` |
101
- | Contrast | `fg-contrast` |
102
- | Focus ring | `focus-ring` |
96
+ | Group | Tokens |
97
+ | ---------- | ---------------------------------------------------------------------------- |
98
+ | Text | `fg-strong`, `fg`, `fg-muted`, `fg-subtle` |
99
+ | Background | `bg`, `bg-subtle`, `bg-muted`, `bg-selected`, `bg-solid` |
100
+ | Border | `border-subtle`, `border-muted`, `border-selected`, `border`, `border-solid` |
101
+ | Contrast | `fg-contrast` |
102
+ | Focus ring | `focus-ring` |
103
103
 
104
104
  ### Pairs that clear the contrast requirement
105
105
 
@@ -129,6 +129,15 @@ In dark, `bg-solid` is a light fill and `fg-contrast` a dark label. No fill dark
129
129
 
130
130
  `fg-subtle` is not held to 3:1.
131
131
 
132
+ ### Choosing a border
133
+
134
+ - `border` is the default frame for containers: cards, lists, tables, code blocks, popovers, menus and toasts. It is decorative, about 2.5:1 against `bg`, and is not held to 3:1.
135
+ - `border-solid` is for controls that need 3:1 under WCAG 1.4.11, such as inputs and checkboxes.
136
+ - `border-subtle` and `border-muted` are for faint dividers.
137
+ - `border-selected` marks a selected state.
138
+
139
+ The steps run `border-subtle` < `border-muted` < `border-selected` < `border` < `border-solid` in strength, in every hue and both modes.
140
+
132
141
  Contrast is measured the way axe-core measures it: out-of-gamut colors are clipped to sRGB, nothing is rounded, and a pair passes only when its ratio is strictly greater than the threshold.
133
142
 
134
143
  ### Semantic tokens
package/dist/generate-theme.mjs CHANGED
@@ -17,6 +17,7 @@ const ROLE_TOKENS = [
17
17
  "border-subtle",
18
18
  "border-muted",
19
19
  "border-selected",
20
+ "border",
20
21
  "border-solid",
21
22
  "fg-strong",
22
23
  "fg",
package/docs/tailwind-merge.md CHANGED
@@ -162,6 +162,7 @@ export const tv = createTV({
162
162
  'border-subtle',
163
163
  'border-muted',
164
164
  'border-selected',
165
+ 'border',
165
166
  'border-solid',
166
167
  ]),
167
168
  'outline-color': roleClasses(['focus-ring']),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kazamitte/design-token",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "Tailwind CSS v4 design token — color, typography, and style themes.",
5
5
  "license": "MIT",
6
6
  "author": "kazaminn",
@@ -43,4 +43,4 @@
43
43
  "publishConfig": {
44
44
  "access": "public"
45
45
  }
46
- }
46
+ }
package/tailwind/base/color/semantic.css CHANGED
@@ -57,6 +57,10 @@
57
57
  * 1.4.11), and the label on bg-solid must clear 4.5:1. A focus ring
58
58
  * matches a solid fill, so it needs an offset to show against one.
59
59
  *
60
+ * `border` sits between `border-selected` and `border-solid`: step 400 in
61
+ * light and 600 in dark, for every hue. It is the decorative frame for
62
+ * containers, about 2.5:1 against bg, and is not held to 3:1.
63
+ *
60
64
  * Light: 700 for chromatic hues, 600 for neutrals, with a white label.
61
65
  * Dark: 350 for every hue, with the hue's own 950 as the label. No
62
66
  * step dark enough for a white label also stands out 3:1 from a
@@ -76,6 +80,7 @@
76
80
  --c-red-border-subtle: var(--color-red-100);
77
81
  --c-red-border-muted: var(--color-red-200);
78
82
  --c-red-border-selected: var(--color-red-300);
83
+ --c-red-border: var(--color-red-400);
79
84
  --c-red-border-solid: var(--color-red-700);
80
85
  --c-red-fg-strong: var(--color-red-900);
81
86
  --c-red-fg: var(--color-red-800);
@@ -92,6 +97,7 @@
92
97
  --c-orange-border-subtle: var(--color-orange-100);
93
98
  --c-orange-border-muted: var(--color-orange-200);
94
99
  --c-orange-border-selected: var(--color-orange-300);
100
+ --c-orange-border: var(--color-orange-400);
95
101
  --c-orange-border-solid: var(--color-orange-700);
96
102
  --c-orange-fg-strong: var(--color-orange-900);
97
103
  --c-orange-fg: var(--color-orange-800);
@@ -108,6 +114,7 @@
108
114
  --c-amber-border-subtle: var(--color-amber-100);
109
115
  --c-amber-border-muted: var(--color-amber-200);
110
116
  --c-amber-border-selected: var(--color-amber-300);
117
+ --c-amber-border: var(--color-amber-400);
111
118
  --c-amber-border-solid: var(--color-amber-700);
112
119
  --c-amber-fg-strong: var(--color-amber-900);
113
120
  --c-amber-fg: var(--color-amber-800);
@@ -124,6 +131,7 @@
124
131
  --c-yellow-border-subtle: var(--color-yellow-100);
125
132
  --c-yellow-border-muted: var(--color-yellow-200);
126
133
  --c-yellow-border-selected: var(--color-yellow-300);
134
+ --c-yellow-border: var(--color-yellow-400);
127
135
  --c-yellow-border-solid: var(--color-yellow-700);
128
136
  --c-yellow-fg-strong: var(--color-yellow-900);
129
137
  --c-yellow-fg: var(--color-yellow-800);
@@ -140,6 +148,7 @@
140
148
  --c-lime-border-subtle: var(--color-lime-100);
141
149
  --c-lime-border-muted: var(--color-lime-200);
142
150
  --c-lime-border-selected: var(--color-lime-300);
151
+ --c-lime-border: var(--color-lime-400);
143
152
  --c-lime-border-solid: var(--color-lime-700);
144
153
  --c-lime-fg-strong: var(--color-lime-900);
145
154
  --c-lime-fg: var(--color-lime-800);
@@ -156,6 +165,7 @@
156
165
  --c-green-border-subtle: var(--color-green-100);
157
166
  --c-green-border-muted: var(--color-green-200);
158
167
  --c-green-border-selected: var(--color-green-300);
168
+ --c-green-border: var(--color-green-400);
159
169
  --c-green-border-solid: var(--color-green-700);
160
170
  --c-green-fg-strong: var(--color-green-900);
161
171
  --c-green-fg: var(--color-green-800);
@@ -172,6 +182,7 @@
172
182
  --c-emerald-border-subtle: var(--color-emerald-100);
173
183
  --c-emerald-border-muted: var(--color-emerald-200);
174
184
  --c-emerald-border-selected: var(--color-emerald-300);
185
+ --c-emerald-border: var(--color-emerald-400);
175
186
  --c-emerald-border-solid: var(--color-emerald-700);
176
187
  --c-emerald-fg-strong: var(--color-emerald-900);
177
188
  --c-emerald-fg: var(--color-emerald-800);
@@ -188,6 +199,7 @@
188
199
  --c-teal-border-subtle: var(--color-teal-100);
189
200
  --c-teal-border-muted: var(--color-teal-200);
190
201
  --c-teal-border-selected: var(--color-teal-300);
202
+ --c-teal-border: var(--color-teal-400);
191
203
  --c-teal-border-solid: var(--color-teal-700);
192
204
  --c-teal-fg-strong: var(--color-teal-900);
193
205
  --c-teal-fg: var(--color-teal-800);
@@ -204,6 +216,7 @@
204
216
  --c-cyan-border-subtle: var(--color-cyan-100);
205
217
  --c-cyan-border-muted: var(--color-cyan-200);
206
218
  --c-cyan-border-selected: var(--color-cyan-300);
219
+ --c-cyan-border: var(--color-cyan-400);
207
220
  --c-cyan-border-solid: var(--color-cyan-700);
208
221
  --c-cyan-fg-strong: var(--color-cyan-900);
209
222
  --c-cyan-fg: var(--color-cyan-800);
@@ -220,6 +233,7 @@
220
233
  --c-sky-border-subtle: var(--color-sky-100);
221
234
  --c-sky-border-muted: var(--color-sky-200);
222
235
  --c-sky-border-selected: var(--color-sky-300);
236
+ --c-sky-border: var(--color-sky-400);
223
237
  --c-sky-border-solid: var(--color-sky-700);
224
238
  --c-sky-fg-strong: var(--color-sky-900);
225
239
  --c-sky-fg: var(--color-sky-800);
@@ -236,6 +250,7 @@
236
250
  --c-blue-border-subtle: var(--color-blue-100);
237
251
  --c-blue-border-muted: var(--color-blue-200);
238
252
  --c-blue-border-selected: var(--color-blue-300);
253
+ --c-blue-border: var(--color-blue-400);
239
254
  --c-blue-border-solid: var(--color-blue-700);
240
255
  --c-blue-fg-strong: var(--color-blue-800);
241
256
  --c-blue-fg: var(--color-blue-700);
@@ -252,6 +267,7 @@
252
267
  --c-indigo-border-subtle: var(--color-indigo-100);
253
268
  --c-indigo-border-muted: var(--color-indigo-200);
254
269
  --c-indigo-border-selected: var(--color-indigo-300);
270
+ --c-indigo-border: var(--color-indigo-400);
255
271
  --c-indigo-border-solid: var(--color-indigo-700);
256
272
  --c-indigo-fg-strong: var(--color-indigo-800);
257
273
  --c-indigo-fg: var(--color-indigo-700);
@@ -268,6 +284,7 @@
268
284
  --c-violet-border-subtle: var(--color-violet-100);
269
285
  --c-violet-border-muted: var(--color-violet-200);
270
286
  --c-violet-border-selected: var(--color-violet-300);
287
+ --c-violet-border: var(--color-violet-400);
271
288
  --c-violet-border-solid: var(--color-violet-700);
272
289
  --c-violet-fg-strong: var(--color-violet-800);
273
290
  --c-violet-fg: var(--color-violet-700);
@@ -284,6 +301,7 @@
284
301
  --c-purple-border-subtle: var(--color-purple-100);
285
302
  --c-purple-border-muted: var(--color-purple-200);
286
303
  --c-purple-border-selected: var(--color-purple-300);
304
+ --c-purple-border: var(--color-purple-400);
287
305
  --c-purple-border-solid: var(--color-purple-700);
288
306
  --c-purple-fg-strong: var(--color-purple-800);
289
307
  --c-purple-fg: var(--color-purple-700);
@@ -300,6 +318,7 @@
300
318
  --c-fuchsia-border-subtle: var(--color-fuchsia-100);
301
319
  --c-fuchsia-border-muted: var(--color-fuchsia-200);
302
320
  --c-fuchsia-border-selected: var(--color-fuchsia-300);
321
+ --c-fuchsia-border: var(--color-fuchsia-400);
303
322
  --c-fuchsia-border-solid: var(--color-fuchsia-700);
304
323
  --c-fuchsia-fg-strong: var(--color-fuchsia-900);
305
324
  --c-fuchsia-fg: var(--color-fuchsia-800);
@@ -316,6 +335,7 @@
316
335
  --c-pink-border-subtle: var(--color-pink-100);
317
336
  --c-pink-border-muted: var(--color-pink-200);
318
337
  --c-pink-border-selected: var(--color-pink-300);
338
+ --c-pink-border: var(--color-pink-400);
319
339
  --c-pink-border-solid: var(--color-pink-700);
320
340
  --c-pink-fg-strong: var(--color-pink-900);
321
341
  --c-pink-fg: var(--color-pink-800);
@@ -332,6 +352,7 @@
332
352
  --c-rose-border-subtle: var(--color-rose-100);
333
353
  --c-rose-border-muted: var(--color-rose-200);
334
354
  --c-rose-border-selected: var(--color-rose-300);
355
+ --c-rose-border: var(--color-rose-400);
335
356
  --c-rose-border-solid: var(--color-rose-700);
336
357
  --c-rose-fg-strong: var(--color-rose-900);
337
358
  --c-rose-fg: var(--color-rose-800);
@@ -348,6 +369,7 @@
348
369
  --c-slate-border-subtle: var(--color-slate-100);
349
370
  --c-slate-border-muted: var(--color-slate-200);
350
371
  --c-slate-border-selected: var(--color-slate-300);
372
+ --c-slate-border: var(--color-slate-400);
351
373
  --c-slate-border-solid: var(--color-slate-600);
352
374
  --c-slate-fg-strong: var(--color-slate-900);
353
375
  --c-slate-fg: var(--color-slate-800);
@@ -364,6 +386,7 @@
364
386
  --c-gray-border-subtle: var(--color-gray-100);
365
387
  --c-gray-border-muted: var(--color-gray-200);
366
388
  --c-gray-border-selected: var(--color-gray-300);
389
+ --c-gray-border: var(--color-gray-400);
367
390
  --c-gray-border-solid: var(--color-gray-600);
368
391
  --c-gray-fg-strong: var(--color-gray-900);
369
392
  --c-gray-fg: var(--color-gray-800);
@@ -380,6 +403,7 @@
380
403
  --c-zinc-border-subtle: var(--color-zinc-100);
381
404
  --c-zinc-border-muted: var(--color-zinc-200);
382
405
  --c-zinc-border-selected: var(--color-zinc-300);
406
+ --c-zinc-border: var(--color-zinc-400);
383
407
  --c-zinc-border-solid: var(--color-zinc-600);
384
408
  --c-zinc-fg-strong: var(--color-zinc-900);
385
409
  --c-zinc-fg: var(--color-zinc-800);
@@ -396,6 +420,7 @@
396
420
  --c-neutral-border-subtle: var(--color-neutral-100);
397
421
  --c-neutral-border-muted: var(--color-neutral-200);
398
422
  --c-neutral-border-selected: var(--color-neutral-300);
423
+ --c-neutral-border: var(--color-neutral-400);
399
424
  --c-neutral-border-solid: var(--color-neutral-600);
400
425
  --c-neutral-fg-strong: var(--color-neutral-900);
401
426
  --c-neutral-fg: var(--color-neutral-800);
@@ -412,6 +437,7 @@
412
437
  --c-stone-border-subtle: var(--color-stone-100);
413
438
  --c-stone-border-muted: var(--color-stone-200);
414
439
  --c-stone-border-selected: var(--color-stone-300);
440
+ --c-stone-border: var(--color-stone-400);
415
441
  --c-stone-border-solid: var(--color-stone-600);
416
442
  --c-stone-fg-strong: var(--color-stone-900);
417
443
  --c-stone-fg: var(--color-stone-800);
@@ -429,6 +455,7 @@
429
455
  --c-mauve-border-subtle: var(--color-mauve-100);
430
456
  --c-mauve-border-muted: var(--color-mauve-200);
431
457
  --c-mauve-border-selected: var(--color-mauve-300);
458
+ --c-mauve-border: var(--color-mauve-400);
432
459
  --c-mauve-border-solid: var(--color-mauve-600);
433
460
  --c-mauve-fg-strong: var(--color-mauve-900);
434
461
  --c-mauve-fg: var(--color-mauve-800);
@@ -446,6 +473,7 @@
446
473
  --c-olive-border-subtle: var(--color-olive-100);
447
474
  --c-olive-border-muted: var(--color-olive-200);
448
475
  --c-olive-border-selected: var(--color-olive-300);
476
+ --c-olive-border: var(--color-olive-400);
449
477
  --c-olive-border-solid: var(--color-olive-600);
450
478
  --c-olive-fg-strong: var(--color-olive-900);
451
479
  --c-olive-fg: var(--color-olive-800);
@@ -463,6 +491,7 @@
463
491
  --c-mist-border-subtle: var(--color-mist-100);
464
492
  --c-mist-border-muted: var(--color-mist-200);
465
493
  --c-mist-border-selected: var(--color-mist-300);
494
+ --c-mist-border: var(--color-mist-400);
466
495
  --c-mist-border-solid: var(--color-mist-600);
467
496
  --c-mist-fg-strong: var(--color-mist-900);
468
497
  --c-mist-fg: var(--color-mist-800);
@@ -480,6 +509,7 @@
480
509
  --c-taupe-border-subtle: var(--color-taupe-100);
481
510
  --c-taupe-border-muted: var(--color-taupe-200);
482
511
  --c-taupe-border-selected: var(--color-taupe-300);
512
+ --c-taupe-border: var(--color-taupe-400);
483
513
  --c-taupe-border-solid: var(--color-taupe-600);
484
514
  --c-taupe-fg-strong: var(--color-taupe-900);
485
515
  --c-taupe-fg: var(--color-taupe-800);
@@ -499,6 +529,7 @@
499
529
  --c-red-border-subtle: var(--color-red-900);
500
530
  --c-red-border-muted: var(--color-red-800);
501
531
  --c-red-border-selected: var(--color-red-700);
532
+ --c-red-border: var(--color-red-600);
502
533
  --c-red-border-solid: var(--color-red-350);
503
534
  --c-red-fg-strong: var(--color-red-100);
504
535
  --c-red-fg: var(--color-red-200);
@@ -516,6 +547,7 @@
516
547
  --c-orange-border-subtle: var(--color-orange-900);
517
548
  --c-orange-border-muted: var(--color-orange-800);
518
549
  --c-orange-border-selected: var(--color-orange-700);
550
+ --c-orange-border: var(--color-orange-600);
519
551
  --c-orange-border-solid: var(--color-orange-350);
520
552
  --c-orange-fg-strong: var(--color-orange-100);
521
553
  --c-orange-fg: var(--color-orange-200);
@@ -533,6 +565,7 @@
533
565
  --c-amber-border-subtle: var(--color-amber-900);
534
566
  --c-amber-border-muted: var(--color-amber-800);
535
567
  --c-amber-border-selected: var(--color-amber-700);
568
+ --c-amber-border: var(--color-amber-600);
536
569
  --c-amber-border-solid: var(--color-amber-350);
537
570
  --c-amber-fg-strong: var(--color-amber-100);
538
571
  --c-amber-fg: var(--color-amber-300);
@@ -550,6 +583,7 @@
550
583
  --c-yellow-border-subtle: var(--color-yellow-900);
551
584
  --c-yellow-border-muted: var(--color-yellow-800);
552
585
  --c-yellow-border-selected: var(--color-yellow-700);
586
+ --c-yellow-border: var(--color-yellow-600);
553
587
  --c-yellow-border-solid: var(--color-yellow-350);
554
588
  --c-yellow-fg-strong: var(--color-yellow-100);
555
589
  --c-yellow-fg: var(--color-yellow-300);
@@ -567,6 +601,7 @@
567
601
  --c-lime-border-subtle: var(--color-lime-900);
568
602
  --c-lime-border-muted: var(--color-lime-800);
569
603
  --c-lime-border-selected: var(--color-lime-700);
604
+ --c-lime-border: var(--color-lime-600);
570
605
  --c-lime-border-solid: var(--color-lime-350);
571
606
  --c-lime-fg-strong: var(--color-lime-100);
572
607
  --c-lime-fg: var(--color-lime-300);
@@ -584,6 +619,7 @@
584
619
  --c-green-border-subtle: var(--color-green-900);
585
620
  --c-green-border-muted: var(--color-green-800);
586
621
  --c-green-border-selected: var(--color-green-700);
622
+ --c-green-border: var(--color-green-600);
587
623
  --c-green-border-solid: var(--color-green-350);
588
624
  --c-green-fg-strong: var(--color-green-50);
589
625
  --c-green-fg: var(--color-green-300);
@@ -601,6 +637,7 @@
601
637
  --c-emerald-border-subtle: var(--color-emerald-900);
602
638
  --c-emerald-border-muted: var(--color-emerald-800);
603
639
  --c-emerald-border-selected: var(--color-emerald-700);
640
+ --c-emerald-border: var(--color-emerald-600);
604
641
  --c-emerald-border-solid: var(--color-emerald-350);
605
642
  --c-emerald-fg-strong: var(--color-emerald-100);
606
643
  --c-emerald-fg: var(--color-emerald-300);
@@ -618,6 +655,7 @@
618
655
  --c-teal-border-subtle: var(--color-teal-900);
619
656
  --c-teal-border-muted: var(--color-teal-800);
620
657
  --c-teal-border-selected: var(--color-teal-700);
658
+ --c-teal-border: var(--color-teal-600);
621
659
  --c-teal-border-solid: var(--color-teal-350);
622
660
  --c-teal-fg-strong: var(--color-teal-100);
623
661
  --c-teal-fg: var(--color-teal-300);
@@ -635,6 +673,7 @@
635
673
  --c-cyan-border-subtle: var(--color-cyan-900);
636
674
  --c-cyan-border-muted: var(--color-cyan-800);
637
675
  --c-cyan-border-selected: var(--color-cyan-700);
676
+ --c-cyan-border: var(--color-cyan-600);
638
677
  --c-cyan-border-solid: var(--color-cyan-350);
639
678
  --c-cyan-fg-strong: var(--color-cyan-100);
640
679
  --c-cyan-fg: var(--color-cyan-300);
@@ -652,6 +691,7 @@
652
691
  --c-sky-border-subtle: var(--color-sky-900);
653
692
  --c-sky-border-muted: var(--color-sky-800);
654
693
  --c-sky-border-selected: var(--color-sky-700);
694
+ --c-sky-border: var(--color-sky-600);
655
695
  --c-sky-border-solid: var(--color-sky-350);
656
696
  --c-sky-fg-strong: var(--color-sky-100);
657
697
  --c-sky-fg: var(--color-sky-300);
@@ -669,6 +709,7 @@
669
709
  --c-blue-border-subtle: var(--color-blue-900);
670
710
  --c-blue-border-muted: var(--color-blue-800);
671
711
  --c-blue-border-selected: var(--color-blue-700);
712
+ --c-blue-border: var(--color-blue-600);
672
713
  --c-blue-border-solid: var(--color-blue-350);
673
714
  --c-blue-fg-strong: var(--color-blue-200);
674
715
  --c-blue-fg: var(--color-blue-300);
@@ -686,6 +727,7 @@
686
727
  --c-indigo-border-subtle: var(--color-indigo-900);
687
728
  --c-indigo-border-muted: var(--color-indigo-800);
688
729
  --c-indigo-border-selected: var(--color-indigo-700);
730
+ --c-indigo-border: var(--color-indigo-600);
689
731
  --c-indigo-border-solid: var(--color-indigo-350);
690
732
  --c-indigo-fg-strong: var(--color-indigo-200);
691
733
  --c-indigo-fg: var(--color-indigo-300);
@@ -703,6 +745,7 @@
703
745
  --c-violet-border-subtle: var(--color-violet-900);
704
746
  --c-violet-border-muted: var(--color-violet-800);
705
747
  --c-violet-border-selected: var(--color-violet-700);
748
+ --c-violet-border: var(--color-violet-600);
706
749
  --c-violet-border-solid: var(--color-violet-350);
707
750
  --c-violet-fg-strong: var(--color-violet-200);
708
751
  --c-violet-fg: var(--color-violet-300);
@@ -720,6 +763,7 @@
720
763
  --c-purple-border-subtle: var(--color-purple-900);
721
764
  --c-purple-border-muted: var(--color-purple-800);
722
765
  --c-purple-border-selected: var(--color-purple-700);
766
+ --c-purple-border: var(--color-purple-600);
723
767
  --c-purple-border-solid: var(--color-purple-350);
724
768
  --c-purple-fg-strong: var(--color-purple-200);
725
769
  --c-purple-fg: var(--color-purple-300);
@@ -737,6 +781,7 @@
737
781
  --c-fuchsia-border-subtle: var(--color-fuchsia-900);
738
782
  --c-fuchsia-border-muted: var(--color-fuchsia-800);
739
783
  --c-fuchsia-border-selected: var(--color-fuchsia-700);
784
+ --c-fuchsia-border: var(--color-fuchsia-600);
740
785
  --c-fuchsia-border-solid: var(--color-fuchsia-350);
741
786
  --c-fuchsia-fg-strong: var(--color-fuchsia-200);
742
787
  --c-fuchsia-fg: var(--color-fuchsia-300);
@@ -754,6 +799,7 @@
754
799
  --c-pink-border-subtle: var(--color-pink-900);
755
800
  --c-pink-border-muted: var(--color-pink-800);
756
801
  --c-pink-border-selected: var(--color-pink-700);
802
+ --c-pink-border: var(--color-pink-600);
757
803
  --c-pink-border-solid: var(--color-pink-350);
758
804
  --c-pink-fg-strong: var(--color-pink-100);
759
805
  --c-pink-fg: var(--color-pink-200);
@@ -771,6 +817,7 @@
771
817
  --c-rose-border-subtle: var(--color-rose-900);
772
818
  --c-rose-border-muted: var(--color-rose-800);
773
819
  --c-rose-border-selected: var(--color-rose-700);
820
+ --c-rose-border: var(--color-rose-600);
774
821
  --c-rose-border-solid: var(--color-rose-350);
775
822
  --c-rose-fg-strong: var(--color-rose-100);
776
823
  --c-rose-fg: var(--color-rose-200);
@@ -788,6 +835,7 @@
788
835
  --c-slate-border-subtle: var(--color-slate-900);
789
836
  --c-slate-border-muted: var(--color-slate-800);
790
837
  --c-slate-border-selected: var(--color-slate-700);
838
+ --c-slate-border: var(--color-slate-600);
791
839
  --c-slate-border-solid: var(--color-slate-350);
792
840
  --c-slate-fg-strong: var(--color-slate-100);
793
841
  --c-slate-fg: var(--color-slate-200);
@@ -805,6 +853,7 @@
805
853
  --c-gray-border-subtle: var(--color-gray-900);
806
854
  --c-gray-border-muted: var(--color-gray-800);
807
855
  --c-gray-border-selected: var(--color-gray-700);
856
+ --c-gray-border: var(--color-gray-600);
808
857
  --c-gray-border-solid: var(--color-gray-350);
809
858
  --c-gray-fg-strong: var(--color-gray-100);
810
859
  --c-gray-fg: var(--color-gray-200);
@@ -822,6 +871,7 @@
822
871
  --c-zinc-border-subtle: var(--color-zinc-900);
823
872
  --c-zinc-border-muted: var(--color-zinc-800);
824
873
  --c-zinc-border-selected: var(--color-zinc-700);
874
+ --c-zinc-border: var(--color-zinc-600);
825
875
  --c-zinc-border-solid: var(--color-zinc-350);
826
876
  --c-zinc-fg-strong: var(--color-zinc-100);
827
877
  --c-zinc-fg: var(--color-zinc-200);
@@ -839,6 +889,7 @@
839
889
  --c-neutral-border-subtle: var(--color-neutral-900);
840
890
  --c-neutral-border-muted: var(--color-neutral-800);
841
891
  --c-neutral-border-selected: var(--color-neutral-700);
892
+ --c-neutral-border: var(--color-neutral-600);
842
893
  --c-neutral-border-solid: var(--color-neutral-350);
843
894
  --c-neutral-fg-strong: var(--color-neutral-100);
844
895
  --c-neutral-fg: var(--color-neutral-200);
@@ -856,6 +907,7 @@
856
907
  --c-stone-border-subtle: var(--color-stone-900);
857
908
  --c-stone-border-muted: var(--color-stone-800);
858
909
  --c-stone-border-selected: var(--color-stone-700);
910
+ --c-stone-border: var(--color-stone-600);
859
911
  --c-stone-border-solid: var(--color-stone-350);
860
912
  --c-stone-fg-strong: var(--color-stone-100);
861
913
  --c-stone-fg: var(--color-stone-200);
@@ -873,6 +925,7 @@
873
925
  --c-mauve-border-subtle: var(--color-mauve-900);
874
926
  --c-mauve-border-muted: var(--color-mauve-800);
875
927
  --c-mauve-border-selected: var(--color-mauve-700);
928
+ --c-mauve-border: var(--color-mauve-600);
876
929
  --c-mauve-border-solid: var(--color-mauve-350);
877
930
  --c-mauve-fg-strong: var(--color-mauve-100);
878
931
  --c-mauve-fg: var(--color-mauve-200);
@@ -890,6 +943,7 @@
890
943
  --c-olive-border-subtle: var(--color-olive-900);
891
944
  --c-olive-border-muted: var(--color-olive-800);
892
945
  --c-olive-border-selected: var(--color-olive-700);
946
+ --c-olive-border: var(--color-olive-600);
893
947
  --c-olive-border-solid: var(--color-olive-350);
894
948
  --c-olive-fg-strong: var(--color-olive-100);
895
949
  --c-olive-fg: var(--color-olive-200);
@@ -907,6 +961,7 @@
907
961
  --c-mist-border-subtle: var(--color-mist-900);
908
962
  --c-mist-border-muted: var(--color-mist-800);
909
963
  --c-mist-border-selected: var(--color-mist-700);
964
+ --c-mist-border: var(--color-mist-600);
910
965
  --c-mist-border-solid: var(--color-mist-350);
911
966
  --c-mist-fg-strong: var(--color-mist-100);
912
967
  --c-mist-fg: var(--color-mist-200);
@@ -924,6 +979,7 @@
924
979
  --c-taupe-border-subtle: var(--color-taupe-900);
925
980
  --c-taupe-border-muted: var(--color-taupe-800);
926
981
  --c-taupe-border-selected: var(--color-taupe-700);
982
+ --c-taupe-border: var(--color-taupe-600);
927
983
  --c-taupe-border-solid: var(--color-taupe-350);
928
984
  --c-taupe-fg-strong: var(--color-taupe-100);
929
985
  --c-taupe-fg: var(--color-taupe-200);
package/tailwind/base/color/status.css CHANGED
@@ -22,6 +22,7 @@
22
22
  --r-error-border-subtle: var(--c-red-border-subtle);
23
23
  --r-error-border-muted: var(--c-red-border-muted);
24
24
  --r-error-border-selected: var(--c-red-border-selected);
25
+ --r-error-border: var(--c-red-border);
25
26
  --r-error-border-solid: var(--c-red-border-solid);
26
27
  --r-error-fg-strong: var(--c-red-fg-strong);
27
28
  --r-error-fg: var(--c-red-fg);
@@ -38,6 +39,7 @@
38
39
  --r-warning-border-subtle: var(--c-amber-border-subtle);
39
40
  --r-warning-border-muted: var(--c-amber-border-muted);
40
41
  --r-warning-border-selected: var(--c-amber-border-selected);
42
+ --r-warning-border: var(--c-amber-border);
41
43
  --r-warning-border-solid: var(--c-amber-border-solid);
42
44
  --r-warning-fg-strong: var(--c-amber-fg-strong);
43
45
  --r-warning-fg: var(--c-amber-fg);
@@ -54,6 +56,7 @@
54
56
  --r-success-border-subtle: var(--c-green-border-subtle);
55
57
  --r-success-border-muted: var(--c-green-border-muted);
56
58
  --r-success-border-selected: var(--c-green-border-selected);
59
+ --r-success-border: var(--c-green-border);
57
60
  --r-success-border-solid: var(--c-green-border-solid);
58
61
  --r-success-fg-strong: var(--c-green-fg-strong);
59
62
  --r-success-fg: var(--c-green-fg);
@@ -70,6 +73,7 @@
70
73
  --r-info-border-subtle: var(--c-blue-border-subtle);
71
74
  --r-info-border-muted: var(--c-blue-border-muted);
72
75
  --r-info-border-selected: var(--c-blue-border-selected);
76
+ --r-info-border: var(--c-blue-border);
73
77
  --r-info-border-solid: var(--c-blue-border-solid);
74
78
  --r-info-fg-strong: var(--c-blue-fg-strong);
75
79
  --r-info-fg: var(--c-blue-fg);
package/tailwind/base/color/utility.css CHANGED
@@ -39,6 +39,10 @@
39
39
  border-color: var(--r-base-border-selected);
40
40
  }
41
41
 
42
+ @utility base-border {
43
+ border-color: var(--r-base-border);
44
+ }
45
+
42
46
  @utility base-border-solid {
43
47
  border-color: var(--r-base-border-solid);
44
48
  }
@@ -101,6 +105,10 @@
101
105
  border-color: var(--r-primary-border-selected);
102
106
  }
103
107
 
108
+ @utility primary-border {
109
+ border-color: var(--r-primary-border);
110
+ }
111
+
104
112
  @utility primary-border-solid {
105
113
  border-color: var(--r-primary-border-solid);
106
114
  }
@@ -163,6 +171,10 @@
163
171
  border-color: var(--r-secondary-border-selected);
164
172
  }
165
173
 
174
+ @utility secondary-border {
175
+ border-color: var(--r-secondary-border);
176
+ }
177
+
166
178
  @utility secondary-border-solid {
167
179
  border-color: var(--r-secondary-border-solid);
168
180
  }
@@ -225,6 +237,10 @@
225
237
  border-color: var(--r-error-border-selected);
226
238
  }
227
239
 
240
+ @utility error-border {
241
+ border-color: var(--r-error-border);
242
+ }
243
+
228
244
  @utility error-border-solid {
229
245
  border-color: var(--r-error-border-solid);
230
246
  }
@@ -287,6 +303,10 @@
287
303
  border-color: var(--r-warning-border-selected);
288
304
  }
289
305
 
306
+ @utility warning-border {
307
+ border-color: var(--r-warning-border);
308
+ }
309
+
290
310
  @utility warning-border-solid {
291
311
  border-color: var(--r-warning-border-solid);
292
312
  }
@@ -349,6 +369,10 @@
349
369
  border-color: var(--r-success-border-selected);
350
370
  }
351
371
 
372
+ @utility success-border {
373
+ border-color: var(--r-success-border);
374
+ }
375
+
352
376
  @utility success-border-solid {
353
377
  border-color: var(--r-success-border-solid);
354
378
  }
@@ -411,6 +435,10 @@
411
435
  border-color: var(--r-info-border-selected);
412
436
  }
413
437
 
438
+ @utility info-border {
439
+ border-color: var(--r-info-border);
440
+ }
441
+
414
442
  @utility info-border-solid {
415
443
  border-color: var(--r-info-border-solid);
416
444
  }
package/tailwind/theme/color/default.css CHANGED
@@ -15,6 +15,7 @@
15
15
  --r-base-border-subtle: var(--c-slate-border-subtle);
16
16
  --r-base-border-muted: var(--c-slate-border-muted);
17
17
  --r-base-border-selected: var(--c-slate-border-selected);
18
+ --r-base-border: var(--c-slate-border);
18
19
  --r-base-border-solid: var(--c-slate-border-solid);
19
20
  --r-base-fg-strong: var(--c-slate-fg-strong);
20
21
  --r-base-fg: var(--c-slate-fg);
@@ -31,6 +32,7 @@
31
32
  --r-primary-border-subtle: var(--c-sky-border-subtle);
32
33
  --r-primary-border-muted: var(--c-sky-border-muted);
33
34
  --r-primary-border-selected: var(--c-sky-border-selected);
35
+ --r-primary-border: var(--c-sky-border);
34
36
  --r-primary-border-solid: var(--c-sky-border-solid);
35
37
  --r-primary-fg-strong: var(--c-sky-fg-strong);
36
38
  --r-primary-fg: var(--c-sky-fg);
@@ -47,6 +49,7 @@
47
49
  --r-secondary-border-subtle: var(--c-lime-border-subtle);
48
50
  --r-secondary-border-muted: var(--c-lime-border-muted);
49
51
  --r-secondary-border-selected: var(--c-lime-border-selected);
52
+ --r-secondary-border: var(--c-lime-border);
50
53
  --r-secondary-border-solid: var(--c-lime-border-solid);
51
54
  --r-secondary-fg-strong: var(--c-lime-fg-strong);
52
55
  --r-secondary-fg: var(--c-lime-fg);