vanilla-jui 1.3.10 → 1.3.11

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 (32) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.umd.js +1 -1
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/components/modal.js +9 -9
  6. package/src/css/accordion.css +2 -2
  7. package/src/css/breadcrumb.css +1 -1
  8. package/src/css/button.css +5 -5
  9. package/src/css/card.css +6 -6
  10. package/src/css/color.css +51 -64
  11. package/src/css/color_p3.css +52 -64
  12. package/src/css/drop.css +1 -1
  13. package/src/css/flow.css +1 -1
  14. package/src/css/form.css +20 -20
  15. package/src/css/gradient.css +17 -4
  16. package/src/css/index.css +1 -1
  17. package/src/css/layout.css +1 -1
  18. package/src/css/menu.css +26 -26
  19. package/src/css/modal.css +10 -27
  20. package/src/css/offcanvas.css +2 -2
  21. package/src/css/pagination.css +1 -1
  22. package/src/css/popup.css +2 -2
  23. package/src/css/swiper.css +12 -12
  24. package/src/css/tabs.css +2 -2
  25. package/src/css/tag.css +3 -4
  26. package/src/css/theme-palette.css +6 -6
  27. package/src/css/tip.css +1 -1
  28. package/src/css/toast.css +8 -8
  29. package/src/css/tokens.css +197 -226
  30. package/src/css/toolbar.css +3 -3
  31. package/src/css/tooltip.css +1 -1
  32. package/src/css/toast.min.css +0 -1
package/src/css/tokens.css CHANGED
@@ -11,19 +11,26 @@
11
11
 
12
12
  :root {
13
13
  /* --- Z-Index --- */
14
- --z-index-0: 0;
15
- --z-index-1: 1;
16
- --z-index-badge: 2;
17
- --z-index-toolbar: 2;
18
- --z-index-submenu: 5;
19
- --z-index-drop: 9900;
20
- --z-index-overlay: 9950;
21
- --z-index-offcanvas: 9960;
22
- --z-index-popup: 9970;
23
- --z-index-toast: 9980;
14
+ --z-0: 0;
15
+ --z-1: 1;
16
+ --z-badge: 2;
17
+ --z-toolbar: 2;
18
+ --z-submenu: 5;
19
+ --z-drop: 9900;
20
+ --z-overlay: 9950;
21
+ --z-offcanvas: 9960;
22
+ --z-popup: 9970;
23
+ --z-toast: 9980;
24
24
 
25
25
  /* --- Spacing --- */
26
26
  --space: 0.25rem;
27
+ --s2: 0.5rem;
28
+ --s3: 0.75rem;
29
+ --s4: 1rem;
30
+ --s5: 1.25rem;
31
+ --s6: 1.5rem;
32
+ --s7: 1.75rem;
33
+ --s8: 2rem;
27
34
 
28
35
  /* --- Transitions --- */
29
36
  --speed-sm: 0.15s;
@@ -67,6 +74,11 @@
67
74
  --screen-xl: 1200px;
68
75
 
69
76
  /* --- Container Widths --- */
77
+ --columns-6xs: 10rem;
78
+ --columns-5xs: 12rem;
79
+ --columns-4xs: 14rem;
80
+ --columns-3xs: 16rem;
81
+ --columns-2xs: 18px;
70
82
  --columns-xs: 20rem;
71
83
  --columns-sm: 24rem;
72
84
  --columns-md: 28rem;
@@ -76,47 +88,10 @@
76
88
  --columns-3xl: 48rem;
77
89
  --columns-4xl: 56rem;
78
90
  --columns-5xl: 64rem;
91
+ --columns-6xl: 72rem;
79
92
 
80
93
  /* --- Border Radius --- */
81
- /* 2px */
82
- --radius-2xs: 0.125rem;
83
- /* 4px */
84
- --radius-xs: 0.25rem;
85
- /* 6px */
86
- --radius-sm: 0.375rem;
87
- /* 8px */
88
- --radius-md: 0.5rem;
89
- /* 12px */
90
- --radius-lg: 0.75rem;
91
- /* 16px */
92
- --radius-xl: 1rem;
93
- /* 24px */
94
- --radius-2xl: 1.5rem;
95
94
  --radius-full: 9999px;
96
-
97
- /* --- Element Heights --- */
98
- --el-height-3xs: 1rem;
99
- --el-height-2xs: 1.25rem;
100
- --el-height-xs: 1.5rem;
101
- --el-height-sm: 1.75rem;
102
- --el-height-md: 2rem;
103
- --el-height-lg: 2.25rem;
104
- --el-height-xl: 2.5rem;
105
-
106
- /* --- Font Sizes --- */
107
- --font-size-xs: 0.625rem;
108
- --font-size-sm: 0.75rem;
109
- --font-size-md: 0.875rem;
110
- --font-size-lg: 1rem;
111
- --font-size-xl: 1.125rem;
112
- --font-size-2xl: 1.25rem;
113
-
114
- /* Shadows */
115
- --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
116
- --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
117
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
118
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
119
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
120
95
  }
121
96
 
122
97
 
@@ -162,80 +137,50 @@
162
137
 
163
138
  /* --- Fixed Theme Colors (15 themes) --- */
164
139
  --ui-gray: #374151;
165
- --ui-gray-light: #6b7280;
166
- --ui-gray-heavy: #111827;
140
+ --ui-gray-tint: #6b7280;
141
+ --ui-gray-shade: #111827;
167
142
  --ui-olive: #717762;
168
- --ui-olive-light: #8a927d;
169
- --ui-olive-heavy: #4d5440;
143
+ --ui-olive-tint: #8a927d;
144
+ --ui-olive-shade: #4d5440;
170
145
  --ui-tomato: #ef4444;
171
- --ui-tomato-light: #f87171;
172
- --ui-tomato-heavy: #b91c1c;
146
+ --ui-tomato-tint: #f87171;
147
+ --ui-tomato-shade: #b91c1c;
173
148
  --ui-ruby: #f43f5e;
174
- --ui-ruby-light: #fb7185;
175
- --ui-ruby-heavy: #be123c;
149
+ --ui-ruby-tint: #fb7185;
150
+ --ui-ruby-shade: #be123c;
176
151
  --ui-pink: #ec4899;
177
- --ui-pink-light: #f472b6;
178
- --ui-pink-heavy: #be185d;
152
+ --ui-pink-tint: #f472b6;
153
+ --ui-pink-shade: #be185d;
179
154
  --ui-violet: #8b5cf6;
180
- --ui-violet-light: #a78bfa;
181
- --ui-violet-heavy: #6d28d9;
155
+ --ui-violet-tint: #a78bfa;
156
+ --ui-violet-shade: #6d28d9;
182
157
  --ui-indigo: #6366f1;
183
- --ui-indigo-light: #818cf8;
184
- --ui-indigo-heavy: #4338ca;
158
+ --ui-indigo-tint: #818cf8;
159
+ --ui-indigo-shade: #4338ca;
185
160
  --ui-blue: #3b82f6;
186
- --ui-blue-light: #60a5fa;
187
- --ui-blue-heavy: #1d4ed8;
161
+ --ui-blue-tint: #60a5fa;
162
+ --ui-blue-shade: #1d4ed8;
188
163
  --ui-teal: #14b8a6;
189
- --ui-teal-light: #2dd4bf;
190
- --ui-teal-heavy: #0f766e;
164
+ --ui-teal-tint: #2dd4bf;
165
+ --ui-teal-shade: #0f766e;
191
166
  --ui-grass: #22c55e;
192
- --ui-grass-light: #4ade80;
193
- --ui-grass-heavy: #15803d;
167
+ --ui-grass-tint: #4ade80;
168
+ --ui-grass-shade: #15803d;
194
169
  --ui-mint: #06b6d4;
195
- --ui-mint-light: #22d3ee;
196
- --ui-mint-heavy: #0e7490;
170
+ --ui-mint-tint: #22d3ee;
171
+ --ui-mint-shade: #0e7490;
197
172
  --ui-lime: #84cc16;
198
- --ui-lime-light: #a3e635;
199
- --ui-lime-heavy: #4d7c0f;
173
+ --ui-lime-tint: #a3e635;
174
+ --ui-lime-shade: #4d7c0f;
200
175
  --ui-yellow: #eab308;
201
- --ui-yellow-light: #facc15;
202
- --ui-yellow-heavy: #a16207;
176
+ --ui-yellow-tint: #facc15;
177
+ --ui-yellow-shade: #a16207;
203
178
  --ui-orange: #f97316;
204
- --ui-orange-light: #fb923c;
205
- --ui-orange-heavy: #c2410c;
179
+ --ui-orange-tint: #fb923c;
180
+ --ui-orange-shade: #c2410c;
206
181
  --ui-gold: #b45309;
207
- --ui-gold-light: #d97706;
208
- --ui-gold-heavy: #78350f;
209
- --ui-gray-tint: var(--ui-gray-light);
210
- --ui-gray-shade: var(--ui-gray-heavy);
211
- --ui-olive-tint: var(--ui-olive-light);
212
- --ui-olive-shade: var(--ui-olive-heavy);
213
- --ui-tomato-tint: var(--ui-tomato-light);
214
- --ui-tomato-shade: var(--ui-tomato-heavy);
215
- --ui-ruby-tint: var(--ui-ruby-light);
216
- --ui-ruby-shade: var(--ui-ruby-heavy);
217
- --ui-pink-tint: var(--ui-pink-light);
218
- --ui-pink-shade: var(--ui-pink-heavy);
219
- --ui-violet-tint: var(--ui-violet-light);
220
- --ui-violet-shade: var(--ui-violet-heavy);
221
- --ui-indigo-tint: var(--ui-indigo-light);
222
- --ui-indigo-shade: var(--ui-indigo-heavy);
223
- --ui-blue-tint: var(--ui-blue-light);
224
- --ui-blue-shade: var(--ui-blue-heavy);
225
- --ui-teal-tint: var(--ui-teal-light);
226
- --ui-teal-shade: var(--ui-teal-heavy);
227
- --ui-grass-tint: var(--ui-grass-light);
228
- --ui-grass-shade: var(--ui-grass-heavy);
229
- --ui-mint-tint: var(--ui-mint-light);
230
- --ui-mint-shade: var(--ui-mint-heavy);
231
- --ui-lime-tint: var(--ui-lime-light);
232
- --ui-lime-shade: var(--ui-lime-heavy);
233
- --ui-yellow-tint: var(--ui-yellow-light);
234
- --ui-yellow-shade: var(--ui-yellow-heavy);
235
- --ui-orange-tint: var(--ui-orange-light);
236
- --ui-orange-shade: var(--ui-orange-heavy);
237
- --ui-gold-tint: var(--ui-gold-light);
238
- --ui-gold-shade: var(--ui-gold-heavy);
182
+ --ui-gold-tint: #d97706;
183
+ --ui-gold-shade: #78350f;
239
184
 
240
185
  /* Theme Color (default indigo) */
241
186
  --tone-subtle: rgba(99, 102, 241, 0.05);
@@ -246,6 +191,8 @@
246
191
  --tone-border: rgba(99, 102, 241, 0.2);
247
192
  --tone-border-strong: rgba(99, 102, 241, 0.35);
248
193
  --tone-solid: #6366f1;
194
+ --tone-tint: #a78bfa;
195
+ --tone-shade: #6d28d9;
249
196
  --tone-solid-hover: #4f46e5;
250
197
  --tone-solid-active: #4338ca;
251
198
  --tone-text: #4f46e5;
@@ -381,80 +328,50 @@
381
328
 
382
329
  /* --- Fixed Theme Colors (15 themes) --- */
383
330
  --ui-gray: #e5e7eb;
384
- --ui-gray-light: #f3f4f6;
385
- --ui-gray-heavy: #9ca3af;
331
+ --ui-gray-tint: #f3f4f6;
332
+ --ui-gray-shade: #9ca3af;
386
333
  --ui-olive: #d4d9cc;
387
- --ui-olive-light: #e5e7db;
388
- --ui-olive-heavy: #a8b092;
334
+ --ui-olive-tint: #e5e7db;
335
+ --ui-olive-shade: #a8b092;
389
336
  --ui-tomato: #fca5a5;
390
- --ui-tomato-light: #fecaca;
391
- --ui-tomato-heavy: #f87171;
337
+ --ui-tomato-tint: #fecaca;
338
+ --ui-tomato-shade: #f87171;
392
339
  --ui-ruby: #fda4af;
393
- --ui-ruby-light: #fecdd3;
394
- --ui-ruby-heavy: #fb7185;
340
+ --ui-ruby-tint: #fecdd3;
341
+ --ui-ruby-shade: #fb7185;
395
342
  --ui-pink: #f9a8d4;
396
- --ui-pink-light: #fbcfe8;
397
- --ui-pink-heavy: #f472b6;
343
+ --ui-pink-tint: #fbcfe8;
344
+ --ui-pink-shade: #f472b6;
398
345
  --ui-violet: #c4b5fd;
399
- --ui-violet-light: #ddd6fe;
400
- --ui-violet-heavy: #a78bfa;
346
+ --ui-violet-tint: #ddd6fe;
347
+ --ui-violet-shade: #a78bfa;
401
348
  --ui-indigo: #a5b4fc;
402
- --ui-indigo-light: #c7d2fe;
403
- --ui-indigo-heavy: #818cf8;
349
+ --ui-indigo-tint: #c7d2fe;
350
+ --ui-indigo-shade: #818cf8;
404
351
  --ui-blue: #93c5fd;
405
- --ui-blue-light: #bfdbfe;
406
- --ui-blue-heavy: #60a5fa;
352
+ --ui-blue-tint: #bfdbfe;
353
+ --ui-blue-shade: #60a5fa;
407
354
  --ui-teal: #5eead4;
408
- --ui-teal-light: #99f6e4;
409
- --ui-teal-heavy: #2dd4bf;
355
+ --ui-teal-tint: #99f6e4;
356
+ --ui-teal-shade: #2dd4bf;
410
357
  --ui-grass: #86efac;
411
- --ui-grass-light: #bbf7d0;
412
- --ui-grass-heavy: #4ade80;
358
+ --ui-grass-tint: #bbf7d0;
359
+ --ui-grass-shade: #4ade80;
413
360
  --ui-mint: #67e8f9;
414
- --ui-mint-light: #a5f3fc;
415
- --ui-mint-heavy: #22d3ee;
361
+ --ui-mint-tint: #a5f3fc;
362
+ --ui-mint-shade: #22d3ee;
416
363
  --ui-lime: #bef264;
417
- --ui-lime-light: #d9f99d;
418
- --ui-lime-heavy: #a3e635;
364
+ --ui-lime-tint: #d9f99d;
365
+ --ui-lime-shade: #a3e635;
419
366
  --ui-yellow: #fde047;
420
- --ui-yellow-light: #fef08a;
421
- --ui-yellow-heavy: #facc15;
367
+ --ui-yellow-tint: #fef08a;
368
+ --ui-yellow-shade: #facc15;
422
369
  --ui-orange: #fdba74;
423
- --ui-orange-light: #fed7aa;
424
- --ui-orange-heavy: #fb923c;
370
+ --ui-orange-tint: #fed7aa;
371
+ --ui-orange-shade: #fb923c;
425
372
  --ui-gold: #fbbf24;
426
- --ui-gold-light: #fcd34d;
427
- --ui-gold-heavy: #d97706;
428
- --ui-gray-tint: var(--ui-gray-light);
429
- --ui-gray-shade: var(--ui-gray-heavy);
430
- --ui-olive-tint: var(--ui-olive-light);
431
- --ui-olive-shade: var(--ui-olive-heavy);
432
- --ui-tomato-tint: var(--ui-tomato-light);
433
- --ui-tomato-shade: var(--ui-tomato-heavy);
434
- --ui-ruby-tint: var(--ui-ruby-light);
435
- --ui-ruby-shade: var(--ui-ruby-heavy);
436
- --ui-pink-tint: var(--ui-pink-light);
437
- --ui-pink-shade: var(--ui-pink-heavy);
438
- --ui-violet-tint: var(--ui-violet-light);
439
- --ui-violet-shade: var(--ui-violet-heavy);
440
- --ui-indigo-tint: var(--ui-indigo-light);
441
- --ui-indigo-shade: var(--ui-indigo-heavy);
442
- --ui-blue-tint: var(--ui-blue-light);
443
- --ui-blue-shade: var(--ui-blue-heavy);
444
- --ui-teal-tint: var(--ui-teal-light);
445
- --ui-teal-shade: var(--ui-teal-heavy);
446
- --ui-grass-tint: var(--ui-grass-light);
447
- --ui-grass-shade: var(--ui-grass-heavy);
448
- --ui-mint-tint: var(--ui-mint-light);
449
- --ui-mint-shade: var(--ui-mint-heavy);
450
- --ui-lime-tint: var(--ui-lime-light);
451
- --ui-lime-shade: var(--ui-lime-heavy);
452
- --ui-yellow-tint: var(--ui-yellow-light);
453
- --ui-yellow-shade: var(--ui-yellow-heavy);
454
- --ui-orange-tint: var(--ui-orange-light);
455
- --ui-orange-shade: var(--ui-orange-heavy);
456
- --ui-gold-tint: var(--ui-gold-light);
457
- --ui-gold-shade: var(--ui-gold-heavy);
373
+ --ui-gold-tint: #fcd34d;
374
+ --ui-gold-shade: #d97706;
458
375
 
459
376
  /* Theme Color (default indigo) */
460
377
  --tone-subtle: rgba(129, 140, 248, 0.1);
@@ -465,6 +382,8 @@
465
382
  --tone-border: rgba(129, 140, 248, 0.25);
466
383
  --tone-border-strong: rgba(129, 140, 248, 0.4);
467
384
  --tone-solid: #818cf8;
385
+ --tone-tint: #c7d2fe;
386
+ --tone-shade: #818cf8;
468
387
  --tone-solid-hover: #a5b4fc;
469
388
  --tone-solid-active: #c7d2fe;
470
389
  --tone-text: #a5b4fc;
@@ -568,7 +487,9 @@
568
487
  --tone-wash: rgba(0, 0, 0, 0.02);
569
488
  --tone-border: rgba(0, 0, 0, 0.12);
570
489
  --tone-border-strong: rgba(0, 0, 0, 0.2);
571
- --tone-solid: #374151;
490
+ --tone-solid: var(--ui-gray);
491
+ --tone-tint: var(--ui-gray-tint);
492
+ --tone-shade: var(--ui-gray-shade);
572
493
  --tone-solid-hover: #4b5563;
573
494
  --tone-solid-active: #6b7280;
574
495
  --tone-text: #374151;
@@ -588,7 +509,9 @@
588
509
  --tone-wash: rgba(113, 119, 98, 0.03);
589
510
  --tone-border: rgba(113, 119, 98, 0.2);
590
511
  --tone-border-strong: rgba(113, 119, 98, 0.35);
591
- --tone-solid: #717762;
512
+ --tone-solid: var(--ui-olive);
513
+ --tone-tint: var(--ui-olive-tint);
514
+ --tone-shade: var(--ui-olive-shade);
592
515
  --tone-solid-hover: #5f6651;
593
516
  --tone-solid-active: #4d5440;
594
517
  --tone-text: #5f6651;
@@ -608,7 +531,9 @@
608
531
  --tone-wash: rgba(239, 68, 68, 0.03);
609
532
  --tone-border: rgba(239, 68, 68, 0.2);
610
533
  --tone-border-strong: rgba(239, 68, 68, 0.35);
611
- --tone-solid: #ef4444;
534
+ --tone-solid: var(--ui-tomato);
535
+ --tone-tint: var(--ui-tomato-tint);
536
+ --tone-shade: var(--ui-tomato-shade);
612
537
  --tone-solid-hover: #dc2626;
613
538
  --tone-solid-active: #b91c1c;
614
539
  --tone-text: #dc2626;
@@ -628,7 +553,9 @@
628
553
  --tone-wash: rgba(244, 63, 94, 0.03);
629
554
  --tone-border: rgba(244, 63, 94, 0.2);
630
555
  --tone-border-strong: rgba(244, 63, 94, 0.35);
631
- --tone-solid: #f43f5e;
556
+ --tone-solid: var(--ui-ruby);
557
+ --tone-tint: var(--ui-ruby-tint);
558
+ --tone-shade: var(--ui-ruby-shade);
632
559
  --tone-solid-hover: #e11d48;
633
560
  --tone-solid-active: #be123c;
634
561
  --tone-text: #e11d48;
@@ -648,7 +575,9 @@
648
575
  --tone-wash: rgba(236, 72, 153, 0.03);
649
576
  --tone-border: rgba(236, 72, 153, 0.2);
650
577
  --tone-border-strong: rgba(236, 72, 153, 0.35);
651
- --tone-solid: #ec4899;
578
+ --tone-solid: var(--ui-pink);
579
+ --tone-tint: var(--ui-pink-tint);
580
+ --tone-shade: var(--ui-pink-shade);
652
581
  --tone-solid-hover: #db2777;
653
582
  --tone-solid-active: #be185d;
654
583
  --tone-text: #db2777;
@@ -668,7 +597,9 @@
668
597
  --tone-wash: rgba(139, 92, 246, 0.03);
669
598
  --tone-border: rgba(139, 92, 246, 0.2);
670
599
  --tone-border-strong: rgba(139, 92, 246, 0.35);
671
- --tone-solid: #8b5cf6;
600
+ --tone-solid: var(--ui-violet);
601
+ --tone-tint: var(--ui-violet-tint);
602
+ --tone-shade: var(--ui-violet-shade);
672
603
  --tone-solid-hover: #7c3aed;
673
604
  --tone-solid-active: #6d28d9;
674
605
  --tone-text: #7c3aed;
@@ -688,7 +619,9 @@
688
619
  --tone-wash: rgba(99, 102, 241, 0.03);
689
620
  --tone-border: rgba(99, 102, 241, 0.2);
690
621
  --tone-border-strong: rgba(99, 102, 241, 0.35);
691
- --tone-solid: #6366f1;
622
+ --tone-solid: var(--ui-indigo);
623
+ --tone-tint: var(--ui-indigo-tint);
624
+ --tone-shade: var(--ui-indigo-shade);
692
625
  --tone-solid-hover: #4f46e5;
693
626
  --tone-solid-active: #4338ca;
694
627
  --tone-text: #4f46e5;
@@ -708,7 +641,9 @@
708
641
  --tone-wash: rgba(59, 130, 246, 0.03);
709
642
  --tone-border: rgba(59, 130, 246, 0.2);
710
643
  --tone-border-strong: rgba(59, 130, 246, 0.35);
711
- --tone-solid: #3b82f6;
644
+ --tone-solid: var(--ui-blue);
645
+ --tone-tint: var(--ui-blue-tint);
646
+ --tone-shade: var(--ui-blue-shade);
712
647
  --tone-solid-hover: #2563eb;
713
648
  --tone-solid-active: #1d4ed8;
714
649
  --tone-text: #2563eb;
@@ -728,7 +663,9 @@
728
663
  --tone-wash: rgba(20, 184, 166, 0.03);
729
664
  --tone-border: rgba(20, 184, 166, 0.2);
730
665
  --tone-border-strong: rgba(20, 184, 166, 0.35);
731
- --tone-solid: #14b8a6;
666
+ --tone-solid: var(--ui-teal);
667
+ --tone-tint: var(--ui-teal-tint);
668
+ --tone-shade: var(--ui-teal-shade);
732
669
  --tone-solid-hover: #0d9488;
733
670
  --tone-solid-active: #0f766e;
734
671
  --tone-text: #0d9488;
@@ -748,7 +685,9 @@
748
685
  --tone-wash: rgba(34, 197, 94, 0.03);
749
686
  --tone-border: rgba(34, 197, 94, 0.2);
750
687
  --tone-border-strong: rgba(34, 197, 94, 0.35);
751
- --tone-solid: #22c55e;
688
+ --tone-solid: var(--ui-grass);
689
+ --tone-tint: var(--ui-grass-tint);
690
+ --tone-shade: var(--ui-grass-shade);
752
691
  --tone-solid-hover: #16a34a;
753
692
  --tone-solid-active: #15803d;
754
693
  --tone-text: #16a34a;
@@ -768,7 +707,9 @@
768
707
  --tone-wash: rgba(6, 182, 212, 0.03);
769
708
  --tone-border: rgba(6, 182, 212, 0.2);
770
709
  --tone-border-strong: rgba(6, 182, 212, 0.35);
771
- --tone-solid: #06b6d4;
710
+ --tone-solid: var(--ui-mint);
711
+ --tone-tint: var(--ui-mint-tint);
712
+ --tone-shade: var(--ui-mint-shade);
772
713
  --tone-solid-hover: #0891b2;
773
714
  --tone-solid-active: #0e7490;
774
715
  --tone-text: #0891b2;
@@ -788,7 +729,9 @@
788
729
  --tone-wash: rgba(132, 204, 22, 0.03);
789
730
  --tone-border: rgba(132, 204, 22, 0.2);
790
731
  --tone-border-strong: rgba(132, 204, 22, 0.35);
791
- --tone-solid: #84cc16;
732
+ --tone-solid: var(--ui-lime);
733
+ --tone-tint: var(--ui-lime-tint);
734
+ --tone-shade: var(--ui-lime-shade);
792
735
  --tone-solid-hover: #65a30d;
793
736
  --tone-solid-active: #4d7c0f;
794
737
  --tone-text: #65a30d;
@@ -808,7 +751,9 @@
808
751
  --tone-wash: rgba(234, 179, 8, 0.03);
809
752
  --tone-border: rgba(234, 179, 8, 0.2);
810
753
  --tone-border-strong: rgba(234, 179, 8, 0.35);
811
- --tone-solid: #eab308;
754
+ --tone-solid: var(--ui-yellow);
755
+ --tone-tint: var(--ui-yellow-tint);
756
+ --tone-shade: var(--ui-yellow-shade);
812
757
  --tone-solid-hover: #ca8a04;
813
758
  --tone-solid-active: #a16207;
814
759
  --tone-text: #ca8a04;
@@ -828,7 +773,9 @@
828
773
  --tone-wash: rgba(249, 115, 22, 0.03);
829
774
  --tone-border: rgba(249, 115, 22, 0.2);
830
775
  --tone-border-strong: rgba(249, 115, 22, 0.35);
831
- --tone-solid: #f97316;
776
+ --tone-solid: var(--ui-orange);
777
+ --tone-tint: var(--ui-orange-tint);
778
+ --tone-shade: var(--ui-orange-shade);
832
779
  --tone-solid-hover: #ea580c;
833
780
  --tone-solid-active: #c2410c;
834
781
  --tone-text: #ea580c;
@@ -848,7 +795,9 @@
848
795
  --tone-wash: rgba(180, 83, 9, 0.03);
849
796
  --tone-border: rgba(180, 83, 9, 0.2);
850
797
  --tone-border-strong: rgba(180, 83, 9, 0.35);
851
- --tone-solid: #b45309;
798
+ --tone-solid: var(--ui-gold);
799
+ --tone-tint: var(--ui-gold-tint);
800
+ --tone-shade: var(--ui-gold-shade);
852
801
  --tone-solid-hover: #92400e;
853
802
  --tone-solid-active: #78350f;
854
803
  --tone-text: #92400e;
@@ -873,7 +822,7 @@
873
822
  --tone-wash: rgba(255, 255, 255, 0.03);
874
823
  --tone-border: rgba(255, 255, 255, 0.12);
875
824
  --tone-border-strong: rgba(255, 255, 255, 0.2);
876
- --tone-solid: #e5e7eb;
825
+ /* --tone-solid: #e5e7eb; */
877
826
  --tone-solid-hover: #d1d5db;
878
827
  --tone-solid-active: #9ca3af;
879
828
  --tone-text: #e5e7eb;
@@ -893,7 +842,7 @@
893
842
  --tone-wash: rgba(180, 188, 162, 0.05);
894
843
  --tone-border: rgba(180, 188, 162, 0.25);
895
844
  --tone-border-strong: rgba(180, 188, 162, 0.4);
896
- --tone-solid: #b4bc9e;
845
+ /* --tone-solid: #b4bc9e; */
897
846
  --tone-solid-hover: #c8cfb5;
898
847
  --tone-solid-active: #dce2cc;
899
848
  --tone-text: #c8cfb5;
@@ -913,7 +862,7 @@
913
862
  --tone-wash: rgba(248, 113, 113, 0.05);
914
863
  --tone-border: rgba(248, 113, 113, 0.25);
915
864
  --tone-border-strong: rgba(248, 113, 113, 0.4);
916
- --tone-solid: #f87171;
865
+ /* --tone-solid: #f87171; */
917
866
  --tone-solid-hover: #fca5a5;
918
867
  --tone-solid-active: #fecaca;
919
868
  --tone-text: #fca5a5;
@@ -933,7 +882,7 @@
933
882
  --tone-wash: rgba(251, 113, 133, 0.05);
934
883
  --tone-border: rgba(251, 113, 133, 0.25);
935
884
  --tone-border-strong: rgba(251, 113, 133, 0.4);
936
- --tone-solid: #fb7185;
885
+ /* --tone-solid: #fb7185; */
937
886
  --tone-solid-hover: #fda4af;
938
887
  --tone-solid-active: #fecdd3;
939
888
  --tone-text: #fda4af;
@@ -953,7 +902,7 @@
953
902
  --tone-wash: rgba(244, 114, 182, 0.05);
954
903
  --tone-border: rgba(244, 114, 182, 0.25);
955
904
  --tone-border-strong: rgba(244, 114, 182, 0.4);
956
- --tone-solid: #f472b6;
905
+ /* --tone-solid: #f472b6; */
957
906
  --tone-solid-hover: #f9a8d4;
958
907
  --tone-solid-active: #fbcfe8;
959
908
  --tone-text: #f9a8d4;
@@ -973,7 +922,7 @@
973
922
  --tone-wash: rgba(167, 139, 250, 0.05);
974
923
  --tone-border: rgba(167, 139, 250, 0.25);
975
924
  --tone-border-strong: rgba(167, 139, 250, 0.4);
976
- --tone-solid: #a78bfa;
925
+ /* --tone-solid: #a78bfa; */
977
926
  --tone-solid-hover: #c4b5fd;
978
927
  --tone-solid-active: #ddd6fe;
979
928
  --tone-text: #c4b5fd;
@@ -993,7 +942,7 @@
993
942
  --tone-wash: rgba(129, 140, 248, 0.05);
994
943
  --tone-border: rgba(129, 140, 248, 0.25);
995
944
  --tone-border-strong: rgba(129, 140, 248, 0.4);
996
- --tone-solid: #818cf8;
945
+ /* --tone-solid: #818cf8; */
997
946
  --tone-solid-hover: #a5b4fc;
998
947
  --tone-solid-active: #c7d2fe;
999
948
  --tone-text: #a5b4fc;
@@ -1013,7 +962,7 @@
1013
962
  --tone-wash: rgba(96, 165, 250, 0.05);
1014
963
  --tone-border: rgba(96, 165, 250, 0.25);
1015
964
  --tone-border-strong: rgba(96, 165, 250, 0.4);
1016
- --tone-solid: #60a5fa;
965
+ /* --tone-solid: #60a5fa; */
1017
966
  --tone-solid-hover: #93bbfd;
1018
967
  --tone-solid-active: #bfdbfe;
1019
968
  --tone-text: #93bbfd;
@@ -1033,7 +982,7 @@
1033
982
  --tone-wash: rgba(45, 212, 191, 0.05);
1034
983
  --tone-border: rgba(45, 212, 191, 0.25);
1035
984
  --tone-border-strong: rgba(45, 212, 191, 0.4);
1036
- --tone-solid: #2dd4bf;
985
+ /* --tone-solid: #2dd4bf; */
1037
986
  --tone-solid-hover: #5eead4;
1038
987
  --tone-solid-active: #99f6e4;
1039
988
  --tone-text: #5eead4;
@@ -1053,7 +1002,7 @@
1053
1002
  --tone-wash: rgba(74, 222, 128, 0.05);
1054
1003
  --tone-border: rgba(74, 222, 128, 0.25);
1055
1004
  --tone-border-strong: rgba(74, 222, 128, 0.4);
1056
- --tone-solid: #4ade80;
1005
+ /* --tone-solid: #4ade80; */
1057
1006
  --tone-solid-hover: #86efac;
1058
1007
  --tone-solid-active: #bbf7d0;
1059
1008
  --tone-text: #86efac;
@@ -1073,7 +1022,7 @@
1073
1022
  --tone-wash: rgba(34, 211, 238, 0.05);
1074
1023
  --tone-border: rgba(34, 211, 238, 0.25);
1075
1024
  --tone-border-strong: rgba(34, 211, 238, 0.4);
1076
- --tone-solid: #22d3ee;
1025
+ /* --tone-solid: #22d3ee; */
1077
1026
  --tone-solid-hover: #67e8f9;
1078
1027
  --tone-solid-active: #a5f3fc;
1079
1028
  --tone-text: #67e8f9;
@@ -1093,7 +1042,7 @@
1093
1042
  --tone-wash: rgba(163, 230, 53, 0.05);
1094
1043
  --tone-border: rgba(163, 230, 53, 0.25);
1095
1044
  --tone-border-strong: rgba(163, 230, 53, 0.4);
1096
- --tone-solid: #a3e635;
1045
+ /* --tone-solid: #a3e635; */
1097
1046
  --tone-solid-hover: #bef264;
1098
1047
  --tone-solid-active: #d9f99d;
1099
1048
  --tone-text: #bef264;
@@ -1113,7 +1062,7 @@
1113
1062
  --tone-wash: rgba(250, 204, 21, 0.05);
1114
1063
  --tone-border: rgba(250, 204, 21, 0.25);
1115
1064
  --tone-border-strong: rgba(250, 204, 21, 0.4);
1116
- --tone-solid: #facc15;
1065
+ /* --tone-solid: #facc15; */
1117
1066
  --tone-solid-hover: #fde047;
1118
1067
  --tone-solid-active: #fef08a;
1119
1068
  --tone-text: #fde047;
@@ -1133,7 +1082,7 @@
1133
1082
  --tone-wash: rgba(251, 146, 60, 0.05);
1134
1083
  --tone-border: rgba(251, 146, 60, 0.25);
1135
1084
  --tone-border-strong: rgba(251, 146, 60, 0.4);
1136
- --tone-solid: #fb923c;
1085
+ /* --tone-solid: #fb923c; */
1137
1086
  --tone-solid-hover: #fdba74;
1138
1087
  --tone-solid-active: #fed7aa;
1139
1088
  --tone-text: #fdba74;
@@ -1153,7 +1102,7 @@
1153
1102
  --tone-wash: rgba(217, 119, 6, 0.05);
1154
1103
  --tone-border: rgba(217, 119, 6, 0.25);
1155
1104
  --tone-border-strong: rgba(217, 119, 6, 0.4);
1156
- --tone-solid: #d97706;
1105
+ /* --tone-solid: #d97706; */
1157
1106
  --tone-solid-hover: #f59e0b;
1158
1107
  --tone-solid-active: #fbbf24;
1159
1108
  --tone-text: #f59e0b;
@@ -1168,9 +1117,27 @@
1168
1117
 
1169
1118
  /* ============================================
1170
1119
  7. Radius Themes
1171
- ============================================ */
1120
+ ============================================ */
1121
+ :root,
1122
+ .j-radius-md {
1123
+ /* 2px */
1124
+ --radius-2xs: 0.125rem;
1125
+ /* 4px */
1126
+ --radius-xs: 0.25rem;
1127
+ /* 6px */
1128
+ --radius-sm: 0.375rem;
1129
+ /* 8px */
1130
+ --radius-md: 0.5rem;
1131
+ /* 12px */
1132
+ --radius-lg: 0.75rem;
1133
+ /* 16px */
1134
+ --radius-xl: 1rem;
1135
+ /* 24px */
1136
+ --radius-2xl: 1.5rem;
1137
+ }
1172
1138
 
1173
1139
  .j-radius-none {
1140
+ --radius-2xs: 0;
1174
1141
  --radius-xs: 0;
1175
1142
  --radius-sm: 0;
1176
1143
  --radius-md: 0;
@@ -1180,42 +1147,37 @@
1180
1147
  }
1181
1148
 
1182
1149
  .j-radius-sm {
1183
- --radius-xs: 0.0625rem;
1184
- --radius-sm: 0.125rem;
1185
- --radius-md: 0.25rem;
1150
+ --radius-2xs: 0.0625rem;
1151
+ --radius-xs: 0.125rem;
1152
+ --radius-sm: 0.25rem;
1153
+ --radius-md: 0.375rem;
1186
1154
  --radius-lg: 0.5rem;
1187
1155
  --radius-xl: 0.75rem;
1188
1156
  --radius-2xl: 1rem;
1189
1157
  }
1190
1158
 
1191
- .j-radius-md {
1192
- --radius-xs: 0.125rem;
1193
- --radius-sm: 0.25rem;
1194
- --radius-md: 0.5rem;
1195
- --radius-lg: 0.75rem;
1196
- --radius-xl: 1rem;
1197
- --radius-2xl: 1.25rem;
1198
- }
1199
-
1200
1159
  .j-radius-lg {
1201
- --radius-xs: 0.25rem;
1160
+ --radius-2xs: 0.25rem;
1161
+ --radius-xs: 0.375rem;
1202
1162
  --radius-sm: 0.5rem;
1203
1163
  --radius-md: 0.75rem;
1204
1164
  --radius-lg: 1rem;
1205
- --radius-xl: 1.25rem;
1206
- --radius-2xl: 1.5rem;
1165
+ --radius-xl: 1.5rem;
1166
+ --radius-2xl: 2rem;
1207
1167
  }
1208
1168
 
1209
1169
  .j-radius-xl {
1170
+ --radius-2xs: 0.375rem;
1210
1171
  --radius-xs: 0.5rem;
1211
1172
  --radius-sm: 0.75rem;
1212
1173
  --radius-md: 1rem;
1213
- --radius-lg: 1.25rem;
1214
- --radius-xl: 1.5rem;
1215
- --radius-2xl: 1.75rem;
1174
+ --radius-lg: 1.5rem;
1175
+ --radius-xl: 2rem;
1176
+ --radius-2xl: 2.5rem;
1216
1177
  }
1217
1178
 
1218
1179
  .j-radius-round {
1180
+ --radius-2xs: 9999px;
1219
1181
  --radius-xs: 9999px;
1220
1182
  --radius-sm: 9999px;
1221
1183
  --radius-md: 9999px;
@@ -1229,6 +1191,15 @@
1229
1191
  8. Shadow Themes
1230
1192
  ============================================ */
1231
1193
 
1194
+ :root,
1195
+ .j-shadow-md {
1196
+ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1197
+ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
1198
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
1199
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
1200
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
1201
+ }
1202
+
1232
1203
  .j-shadow-none {
1233
1204
  --shadow-xs: none;
1234
1205
  --shadow-sm: none;
@@ -1245,14 +1216,6 @@
1245
1216
  --shadow-xl: 0 8px 10px -3px rgb(0 0 0 / 0.1);
1246
1217
  }
1247
1218
 
1248
- .j-shadow-md {
1249
- --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1250
- --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
1251
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
1252
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
1253
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
1254
- }
1255
-
1256
1219
  .j-shadow-lg {
1257
1220
  --shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.08);
1258
1221
  --shadow-sm: 0 2px 4px 0 rgb(0 0 0 / 0.12);
@@ -1288,8 +1251,9 @@
1288
1251
 
1289
1252
  /* ============================================
1290
1253
  9. Font Themes
1291
- ============================================ */
1254
+ ============================================ */
1292
1255
 
1256
+ :root,
1293
1257
  .j-font-sm {
1294
1258
  --font-size-xs: 0.625rem;
1295
1259
  --font-size-sm: 0.75rem;
@@ -1297,6 +1261,8 @@
1297
1261
  --font-size-lg: 1rem;
1298
1262
  --font-size-xl: 1.125rem;
1299
1263
  --font-size-2xl: 1.25rem;
1264
+
1265
+ /* --- Element Heights --- */
1300
1266
  --el-height-3xs: 1rem;
1301
1267
  --el-height-2xs: 1.25rem;
1302
1268
  --el-height-xs: 1.5rem;
@@ -1304,6 +1270,8 @@
1304
1270
  --el-height-md: 2rem;
1305
1271
  --el-height-lg: 2.25rem;
1306
1272
  --el-height-xl: 2.5rem;
1273
+ --el-height-2xl: 2.75rem;
1274
+ --el-height-3xl: 3rem;
1307
1275
  }
1308
1276
 
1309
1277
  .j-font-md {
@@ -1313,6 +1281,7 @@
1313
1281
  --font-size-lg: 1.125rem;
1314
1282
  --font-size-xl: 1.25rem;
1315
1283
  --font-size-2xl: 1.5rem;
1284
+
1316
1285
  --el-height-3xs: 1.25rem;
1317
1286
  --el-height-2xs: 1.5rem;
1318
1287
  --el-height-xs: 1.75rem;
@@ -1320,5 +1289,7 @@
1320
1289
  --el-height-md: 2.25rem;
1321
1290
  --el-height-lg: 2.5rem;
1322
1291
  --el-height-xl: 2.75rem;
1292
+ --el-height-2xl: 3rem;
1293
+ --el-height-3xl: 3.25rem;
1323
1294
  }
1324
1295
  }