@vaneui/md 0.0.3-alpha.20250804165801.513897c → 0.3.1-alpha.20250916152826.fb70c71

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 (6) hide show
  1. package/dist/index.esm.js +11 -3
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +10 -2
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles/index.css +1239 -604
  6. package/package.json +3 -3
package/dist/styles/index.css CHANGED
@@ -3,127 +3,177 @@
3
3
  @layer theme, base, components, utilities;
4
4
  @layer theme;
5
5
  /* Import @vaneui/ui base styles */
6
- @theme {
6
+ @theme inline {
7
7
  /* Text Colors */
8
- --text-color-default: var(--color-gray-900, #111827);
9
- --text-color-primary: var(--color-blue-600, #2563eb);
10
- --text-color-secondary: var(--color-gray-600, #4b5563);
11
- --text-color-tertiary: var(--color-gray-500, #6b7280);
12
- --text-color-link: var(--color-blue-600, #2563eb);
13
- --text-color-accent: var(--color-rose-700, #9333ea);
14
- --text-color-success: var(--color-emerald-600, #059669);
15
- --text-color-danger: var(--color-red-600, #dc2626);
16
- --text-color-warning: var(--color-amber-600, #d97706);
17
- --text-color-info: var(--color-cyan-600, #0891b2);
8
+ --color-text-default: var(--color-gray-900);
9
+ --color-text-primary: var(--color-blue-600);
10
+ --color-text-secondary: var(--color-gray-600);
11
+ --color-text-tertiary: var(--color-gray-500);
12
+ --color-text-link: var(--color-blue-600);
13
+ --color-text-accent: var(--color-rose-700);
14
+ --color-text-success: var(--color-emerald-600);
15
+ --color-text-danger: var(--color-red-600);
16
+ --color-text-warning: var(--color-amber-600);
17
+ --color-text-info: var(--color-cyan-600);
18
18
 
19
- /* Background Colors */
20
- --background-color-default: var(--color-white, #ffffff);
21
- --background-color-primary: var(--color-blue-50, #eff6ff);
22
- --background-color-secondary: var(--color-gray-50, #f9fafb);
23
- --background-color-tertiary: var(--color-gray-100, #f3f4f6);
24
- --background-color-accent: var(--color-rose-50, #faf5ff);
25
- --background-color-success: var(--color-emerald-50, #ecfdf5);
26
- --background-color-danger: var(--color-red-50, #fef2f2);
27
- --background-color-warning: var(--color-amber-50, #fffbeb);
28
- --background-color-info: var(--color-cyan-50, #ecfeff);
29
- --background-color-link: var(--color-blue-50, #eff6ff);
19
+ /* Filled Text Colors */
20
+ --color-text-filled-default: var(--color-white);
21
+ --color-text-filled-primary: var(--color-blue-100);
22
+ --color-text-filled-secondary: var(--color-gray-200);
23
+ --color-text-filled-tertiary: var(--color-gray-300);
24
+ --color-text-filled-link: var(--color-blue-100);
25
+ --color-text-filled-accent: var(--color-rose-100);
26
+ --color-text-filled-success: var(--color-emerald-100);
27
+ --color-text-filled-danger: var(--color-red-100);
28
+ --color-text-filled-warning: var(--color-amber-100);
29
+ --color-text-filled-info: var(--color-cyan-100);
30
+ --color-text-filled-transparent: transparent;
30
31
 
31
- /* Background Hover Colors */
32
- --background-color-hover-default: var(--color-gray-50, #f3f4f6);
33
- --background-color-hover-primary: var(--color-blue-100, #dbeafe);
34
- --background-color-hover-secondary: var(--color-gray-100, #f3f4f6);
35
- --background-color-hover-tertiary: var(--color-gray-200, #e5e7eb);
36
- --background-color-hover-accent: var(--color-rose-100, #f5d0fe);
37
- --background-color-hover-success: var(--color-emerald-100, #d1fae5);
38
- --background-color-hover-danger: var(--color-red-100, #fee2e2);
39
- --background-color-hover-warning: var(--color-amber-100, #fef3c7);
40
- --background-color-hover-info: var(--color-cyan-100, #cffafe);
41
- --background-color-hover-link: var(--color-blue-100, #dbeafe);
32
+ /* UI Background Colors */
33
+ --color-bg-default: var(--color-white);
34
+ --color-bg-primary: var(--color-blue-50);
35
+ --color-bg-secondary: var(--color-gray-50);
36
+ --color-bg-tertiary: var(--color-gray-100);
37
+ --color-bg-accent: var(--color-rose-50);
38
+ --color-bg-success: var(--color-emerald-50);
39
+ --color-bg-danger: var(--color-red-50);
40
+ --color-bg-warning: var(--color-amber-50);
41
+ --color-bg-info: var(--color-cyan-50);
42
+ --color-bg-link: var(--color-blue-50);
42
43
 
43
- /* Background Active Colors */
44
- --background-color-active-default: var(--color-gray-100, #e5e7eb);
45
- --background-color-active-primary: var(--color-blue-200, #bfdbfe);
46
- --background-color-active-secondary: var(--color-gray-200, #e5e7eb);
47
- --background-color-active-tertiary: var(--color-gray-300, #d1d5db);
48
- --background-color-active-accent: var(--color-rose-200, #fbcfe8);
49
- --background-color-active-success: var(--color-emerald-200, #a7f3d0);
50
- --background-color-active-danger: var(--color-red-200, #fecaca);
51
- --background-color-active-warning: var(--color-amber-200, #fde68a);
52
- --background-color-active-info: var(--color-cyan-200, #a5f3fc);
53
- --background-color-active-link: var(--color-blue-200, #bfdbfe);
44
+ /* UI Background Hover Colors */
45
+ --color-bg-hover-default: var(--color-gray-50);
46
+ --color-bg-hover-primary: var(--color-blue-100);
47
+ --color-bg-hover-secondary: var(--color-gray-100);
48
+ --color-bg-hover-tertiary: var(--color-gray-200);
49
+ --color-bg-hover-accent: var(--color-rose-100);
50
+ --color-bg-hover-success: var(--color-emerald-100);
51
+ --color-bg-hover-danger: var(--color-red-100);
52
+ --color-bg-hover-warning: var(--color-amber-100);
53
+ --color-bg-hover-info: var(--color-cyan-100);
54
+ --color-bg-hover-link: var(--color-blue-100);
54
55
 
55
- /* Filled Button Background Colors */
56
- --filled-background-color-default: var(--color-gray-800, #1f2937);
57
- --filled-background-color-primary: var(--color-blue-600, #2563eb);
58
- --filled-background-color-secondary: var(--color-gray-600, #4b5563);
59
- --filled-background-color-tertiary: var(--color-gray-500, #6b7280);
60
- --filled-background-color-accent: var(--color-rose-600, #e11d48);
61
- --filled-background-color-success: var(--color-emerald-600, #059669);
62
- --filled-background-color-danger: var(--color-red-600, #dc2626);
63
- --filled-background-color-warning: var(--color-amber-600, #d97706);
64
- --filled-background-color-info: var(--color-cyan-600, #0891b2);
65
- --filled-background-color-link: var(--color-blue-600, #2563eb);
56
+ /* UI Background Active Colors */
57
+ --color-bg-active-default: var(--color-gray-100);
58
+ --color-bg-active-primary: var(--color-blue-200);
59
+ --color-bg-active-secondary: var(--color-gray-200);
60
+ --color-bg-active-tertiary: var(--color-gray-300);
61
+ --color-bg-active-accent: var(--color-rose-200);
62
+ --color-bg-active-success: var(--color-emerald-200);
63
+ --color-bg-active-danger: var(--color-red-200);
64
+ --color-bg-active-warning: var(--color-amber-200);
65
+ --color-bg-active-info: var(--color-cyan-200);
66
+ --color-bg-active-link: var(--color-blue-200);
66
67
 
67
- /* Filled Button Hover Background Colors */
68
- --filled-background-color-hover-default: var(--color-gray-900, #111827);
69
- --filled-background-color-hover-primary: var(--color-blue-700, #1d4ed8);
70
- --filled-background-color-hover-secondary: var(--color-gray-700, #374151);
71
- --filled-background-color-hover-tertiary: var(--color-gray-600, #4b5563);
72
- --filled-background-color-hover-accent: var(--color-rose-700, #be123c);
73
- --filled-background-color-hover-success: var(--color-emerald-700, #047857);
74
- --filled-background-color-hover-danger: var(--color-red-700, #b91c1c);
75
- --filled-background-color-hover-warning: var(--color-amber-700, #b45309);
76
- --filled-background-color-hover-info: var(--color-cyan-700, #0e7490);
77
- --filled-background-color-hover-link: var(--color-blue-700, #1d4ed8);
68
+ /* Filled UI Background Colors */
69
+ --color-bg-filled-default: var(--color-gray-800);
70
+ --color-bg-filled-primary: var(--color-blue-600);
71
+ --color-bg-filled-secondary: var(--color-gray-600);
72
+ --color-bg-filled-tertiary: var(--color-gray-500);
73
+ --color-bg-filled-accent: var(--color-rose-600);
74
+ --color-bg-filled-success: var(--color-emerald-600);
75
+ --color-bg-filled-danger: var(--color-red-600);
76
+ --color-bg-filled-warning: var(--color-amber-600);
77
+ --color-bg-filled-info: var(--color-cyan-600);
78
+ --color-bg-filled-link: var(--color-blue-600);
78
79
 
79
- /* Filled Button Active Background Colors */
80
- --filled-background-color-active-default: var(--color-gray-950, #030712);
81
- --filled-background-color-active-primary: var(--color-blue-800, #1e40af);
82
- --filled-background-color-active-secondary: var(--color-gray-800, #1f2937);
83
- --filled-background-color-active-tertiary: var(--color-gray-700, #374151);
84
- --filled-background-color-active-accent: var(--color-rose-800, #9f1239);
85
- --filled-background-color-active-success: var(--color-emerald-800, #065f46);
86
- --filled-background-color-active-danger: var(--color-red-800, #991b1b);
87
- --filled-background-color-active-warning: var(--color-amber-800, #92400e);
88
- --filled-background-color-active-info: var(--color-cyan-800, #155e75);
89
- --filled-background-color-active-link: var(--color-blue-800, #1e40af);
80
+ /* Filled UI Hover Background Colors */
81
+ --color-bg-filled-hover-default: var(--color-gray-900);
82
+ --color-bg-filled-hover-primary: var(--color-blue-700);
83
+ --color-bg-filled-hover-secondary: var(--color-gray-700);
84
+ --color-bg-filled-hover-tertiary: var(--color-gray-600);
85
+ --color-bg-filled-hover-accent: var(--color-rose-700);
86
+ --color-bg-filled-hover-success: var(--color-emerald-700);
87
+ --color-bg-filled-hover-danger: var(--color-red-700);
88
+ --color-bg-filled-hover-warning: var(--color-amber-700);
89
+ --color-bg-filled-hover-info: var(--color-cyan-700);
90
+ --color-bg-filled-hover-link: var(--color-blue-700);
91
+
92
+ /* Filled UI Active Background Colors */
93
+ --color-bg-filled-active-default: var(--color-gray-950);
94
+ --color-bg-filled-active-primary: var(--color-blue-800);
95
+ --color-bg-filled-active-secondary: var(--color-gray-800);
96
+ --color-bg-filled-active-tertiary: var(--color-gray-700);
97
+ --color-bg-filled-active-accent: var(--color-rose-800);
98
+ --color-bg-filled-active-success: var(--color-emerald-800);
99
+ --color-bg-filled-active-danger: var(--color-red-800);
100
+ --color-bg-filled-active-warning: var(--color-amber-800);
101
+ --color-bg-filled-active-info: var(--color-cyan-800);
102
+ --color-bg-filled-active-link: var(--color-blue-800);
90
103
 
91
104
  /* Layout Background Colors */
92
- --layout-background-default: var(--color-white, #ffffff);
93
- --layout-background-primary: var(--color-white, #ffffff);
94
- --layout-background-secondary: var(--color-gray-50, #f9fafb);
95
- --layout-background-tertiary: var(--color-gray-100, #f3f4f6);
96
- --layout-background-accent: var(--color-indigo-50, #eef2ff);
97
- --layout-background-success: var(--color-green-50, #f0fdf4);
98
- --layout-background-danger: var(--color-red-50, #fef2f2);
99
- --layout-background-warning: var(--color-yellow-50, #fefce8);
100
- --layout-background-info: var(--color-blue-50, #eff6ff);
101
- --layout-background-transparent: transparent;
102
- --layout-background-link: var(--color-blue-50, #eff6ff);
105
+ --color-bg-layout-default: var(--color-white);
106
+ --color-bg-layout-primary: var(--color-white);
107
+ --color-bg-layout-secondary: var(--color-gray-50);
108
+ --color-bg-layout-tertiary: var(--color-gray-100);
109
+ --color-bg-layout-accent: var(--color-indigo-50);
110
+ --color-bg-layout-success: var(--color-green-50);
111
+ --color-bg-layout-danger: var(--color-red-50);
112
+ --color-bg-layout-warning: var(--color-yellow-50);
113
+ --color-bg-layout-info: var(--color-blue-50);
114
+ --color-bg-layout-transparent: transparent;
115
+ --color-bg-layout-link: var(--color-blue-50);
116
+
117
+ /* Layout Filled Background Colors */
118
+ --color-bg-filled-layout-default: var(--color-gray-700);
119
+ --color-bg-filled-layout-primary: var(--color-blue-800);
120
+ --color-bg-filled-layout-secondary: var(--color-gray-800);
121
+ --color-bg-filled-layout-tertiary: var(--color-gray-900);
122
+ --color-bg-filled-layout-accent: var(--color-indigo-700);
123
+ --color-bg-filled-layout-success: var(--color-green-700);
124
+ --color-bg-filled-layout-danger: var(--color-red-700);
125
+ --color-bg-filled-layout-warning: var(--color-yellow-800);
126
+ --color-bg-filled-layout-info: var(--color-blue-700);
127
+ --color-bg-filled-layout-transparent: transparent;
128
+ --color-bg-filled-layout-link: var(--color-blue-700);
103
129
 
104
130
  /* Border Colors */
105
- --border-color-default: var(--color-gray-200, #d1d5db);
106
- --border-color-primary: var(--color-blue-200, #93c5fd);
107
- --border-color-secondary: var(--color-gray-200, #d1d5db);
108
- --border-color-tertiary: var(--color-gray-200, #e5e7eb);
109
- --border-color-link: var(--color-blue-200, #93c5fd);
110
- --border-color-accent: var(--color-rose-200, #d8b4fe);
111
- --border-color-success: var(--color-emerald-200, #6ee7b7);
112
- --border-color-danger: var(--color-red-200, #fca5a5);
113
- --border-color-warning: var(--color-amber-200, #fcd34d);
114
- --border-color-info: var(--color-cyan-200, #67e8f9);
131
+ --color-border-default: var(--color-gray-200);
132
+ --color-border-primary: var(--color-blue-200);
133
+ --color-border-secondary: var(--color-gray-200);
134
+ --color-border-tertiary: var(--color-gray-300);
135
+ --color-border-link: var(--color-blue-200);
136
+ --color-border-accent: var(--color-rose-200);
137
+ --color-border-success: var(--color-green-200);
138
+ --color-border-danger: var(--color-red-200);
139
+ --color-border-warning: var(--color-yellow-200);
140
+ --color-border-info: var(--color-blue-200);
115
141
 
116
142
  /* Filled Button Border Colors */
117
- --filled-border-color-default: var(--color-gray-800, #1f2937);
118
- --filled-border-color-primary: var(--color-blue-600, #2563eb);
119
- --filled-border-color-secondary: var(--color-gray-600, #4b5563);
120
- --filled-border-color-tertiary: var(--color-gray-500, #6b7280);
121
- --filled-border-color-accent: var(--color-rose-600, #e11d48);
122
- --filled-border-color-success: var(--color-emerald-600, #059669);
123
- --filled-border-color-danger: var(--color-red-600, #dc2626);
124
- --filled-border-color-warning: var(--color-amber-600, #d97706);
125
- --filled-border-color-info: var(--color-cyan-600, #0891b2);
126
- --filled-border-color-link: var(--color-blue-600, #2563eb);
143
+ --color-border-filled-default: var(--color-gray-600);
144
+ --color-border-filled-primary: var(--color-blue-600);
145
+ --color-border-filled-secondary: var(--color-gray-700);
146
+ --color-border-filled-tertiary: var(--color-gray-800);
147
+ --color-border-filled-accent: var(--color-rose-600);
148
+ --color-border-filled-success: var(--color-green-600);
149
+ --color-border-filled-danger: var(--color-red-600);
150
+ --color-border-filled-warning: var(--color-yellow-600);
151
+ --color-border-filled-info: var(--color-blue-600);
152
+ --color-border-filled-link: var(--color-blue-600);
153
+
154
+ /* UI Component Border Radius Sizes */
155
+ --ui-br-spacing: 0.125rem;
156
+ --ui-br-xs: calc(1 * var(--ui-br-spacing));
157
+ --ui-br-sm: calc(2 * var(--ui-br-spacing));
158
+ --ui-br-md: calc(3 * var(--ui-br-spacing));
159
+ --ui-br-lg: calc(4 * var(--ui-br-spacing));
160
+ --ui-br-xl: calc(5 * var(--ui-br-spacing));
161
+
162
+ /* Layout Component Border Radius Sizes */
163
+ --layout-br-spacing: 0.25rem;
164
+ --layout-br-xs: calc(3 * var(--layout-br-spacing));
165
+ --layout-br-sm: calc(4 * var(--layout-br-spacing));
166
+ --layout-br-md: calc(5 * var(--layout-br-spacing));
167
+ --layout-br-lg: calc(6 * var(--layout-br-spacing));
168
+ --layout-br-xl: calc(7 * var(--layout-br-spacing));
169
+
170
+ /* Layout Component Gap Sizes */
171
+ --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.375rem);
172
+ --layout-gap-xs: calc(2 * var(--layout-spacing));
173
+ --layout-gap-sm: calc(3 * var(--layout-spacing));
174
+ --layout-gap-md: calc(4 * var(--layout-spacing));
175
+ --layout-gap-lg: calc(5 * var(--layout-spacing));
176
+ --layout-gap-xl: calc(6 * var(--layout-spacing));
127
177
  }
128
178
  /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
129
179
  @layer theme {
@@ -136,10 +186,12 @@
136
186
  --color-red-50: oklch(97.1% 0.013 17.38);
137
187
  --color-red-100: oklch(93.6% 0.032 17.717);
138
188
  --color-red-200: oklch(88.5% 0.062 18.334);
189
+ --color-red-300: oklch(80.8% 0.114 19.571);
139
190
  --color-red-500: oklch(63.7% 0.237 25.331);
140
191
  --color-red-600: oklch(57.7% 0.245 27.325);
141
192
  --color-red-700: oklch(50.5% 0.213 27.518);
142
193
  --color-red-800: oklch(44.4% 0.177 26.899);
194
+ --color-orange-500: oklch(70.5% 0.213 47.604);
143
195
  --color-amber-50: oklch(98.7% 0.022 95.277);
144
196
  --color-amber-100: oklch(96.2% 0.059 95.617);
145
197
  --color-amber-200: oklch(92.4% 0.12 95.746);
@@ -147,12 +199,19 @@
147
199
  --color-amber-700: oklch(55.5% 0.163 48.998);
148
200
  --color-amber-800: oklch(47.3% 0.137 46.201);
149
201
  --color-yellow-50: oklch(98.7% 0.026 102.212);
202
+ --color-yellow-100: oklch(97.3% 0.071 103.193);
203
+ --color-yellow-200: oklch(94.5% 0.129 101.54);
204
+ --color-yellow-600: oklch(68.1% 0.162 75.834);
205
+ --color-yellow-800: oklch(47.6% 0.114 61.907);
150
206
  --color-green-50: oklch(98.2% 0.018 155.826);
151
207
  --color-green-200: oklch(92.5% 0.084 155.995);
152
208
  --color-green-500: oklch(72.3% 0.219 149.579);
209
+ --color-green-600: oklch(62.7% 0.194 149.214);
210
+ --color-green-700: oklch(52.7% 0.154 150.069);
153
211
  --color-emerald-50: oklch(97.9% 0.021 166.113);
154
212
  --color-emerald-100: oklch(95% 0.052 163.051);
155
213
  --color-emerald-200: oklch(90.5% 0.093 164.15);
214
+ --color-emerald-500: oklch(69.6% 0.17 162.48);
156
215
  --color-emerald-600: oklch(59.6% 0.145 163.225);
157
216
  --color-emerald-700: oklch(50.8% 0.118 165.612);
158
217
  --color-emerald-800: oklch(43.2% 0.095 166.913);
@@ -172,6 +231,15 @@
172
231
  --color-blue-800: oklch(42.4% 0.199 265.638);
173
232
  --color-blue-900: oklch(37.9% 0.146 265.522);
174
233
  --color-indigo-50: oklch(96.2% 0.018 272.314);
234
+ --color-indigo-100: oklch(93% 0.034 272.788);
235
+ --color-indigo-400: oklch(67.3% 0.182 276.935);
236
+ --color-indigo-500: oklch(58.5% 0.233 277.117);
237
+ --color-indigo-700: oklch(45.7% 0.24 277.023);
238
+ --color-violet-400: oklch(70.2% 0.183 293.541);
239
+ --color-violet-600: oklch(54.1% 0.281 293.009);
240
+ --color-purple-600: oklch(55.8% 0.288 302.321);
241
+ --color-purple-700: oklch(49.6% 0.265 301.924);
242
+ --color-pink-600: oklch(59.2% 0.249 0.584);
175
243
  --color-rose-50: oklch(96.9% 0.015 12.422);
176
244
  --color-rose-100: oklch(94.1% 0.03 12.58);
177
245
  --color-rose-200: oklch(89.2% 0.058 10.001);
@@ -190,7 +258,7 @@
190
258
  --color-gray-950: oklch(13% 0.028 261.692);
191
259
  --color-white: #fff;
192
260
  --spacing: 0.25rem;
193
- --container-xs: 20rem;
261
+ --container-md: 28rem;
194
262
  --container-3xl: 48rem;
195
263
  --container-4xl: 56rem;
196
264
  --container-5xl: 64rem;
@@ -230,119 +298,150 @@
230
298
  --tracking-tight: -0.025em;
231
299
  --tracking-wide: 0.025em;
232
300
  --leading-relaxed: 1.625;
233
- --radius-xs: 0.125rem;
234
- --radius-sm: 0.25rem;
235
- --radius-md: 0.375rem;
236
- --radius-lg: 0.5rem;
237
- --radius-xl: 0.75rem;
238
- --radius-2xl: 1rem;
239
- --radius-3xl: 1.5rem;
240
301
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
241
302
  --animate-bounce: bounce 1s infinite;
242
303
  --default-transition-duration: 150ms;
243
304
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
244
305
  --default-font-family: var(--font-sans);
245
306
  --default-mono-font-family: var(--font-mono);
246
- --text-color-default: var(--color-gray-900, #111827);
247
- --text-color-primary: var(--color-blue-600, #2563eb);
248
- --text-color-secondary: var(--color-gray-600, #4b5563);
249
- --text-color-tertiary: var(--color-gray-500, #6b7280);
250
- --text-color-link: var(--color-blue-600, #2563eb);
251
- --text-color-accent: var(--color-rose-700, #9333ea);
252
- --text-color-success: var(--color-emerald-600, #059669);
253
- --text-color-danger: var(--color-red-600, #dc2626);
254
- --text-color-warning: var(--color-amber-600, #d97706);
255
- --text-color-info: var(--color-cyan-600, #0891b2);
256
- --background-color-default: var(--color-white, #ffffff);
257
- --background-color-primary: var(--color-blue-50, #eff6ff);
258
- --background-color-secondary: var(--color-gray-50, #f9fafb);
259
- --background-color-tertiary: var(--color-gray-100, #f3f4f6);
260
- --background-color-accent: var(--color-rose-50, #faf5ff);
261
- --background-color-success: var(--color-emerald-50, #ecfdf5);
262
- --background-color-danger: var(--color-red-50, #fef2f2);
263
- --background-color-warning: var(--color-amber-50, #fffbeb);
264
- --background-color-info: var(--color-cyan-50, #ecfeff);
265
- --background-color-link: var(--color-blue-50, #eff6ff);
266
- --background-color-hover-default: var(--color-gray-50, #f3f4f6);
267
- --background-color-hover-primary: var(--color-blue-100, #dbeafe);
268
- --background-color-hover-secondary: var(--color-gray-100, #f3f4f6);
269
- --background-color-hover-tertiary: var(--color-gray-200, #e5e7eb);
270
- --background-color-hover-accent: var(--color-rose-100, #f5d0fe);
271
- --background-color-hover-success: var(--color-emerald-100, #d1fae5);
272
- --background-color-hover-danger: var(--color-red-100, #fee2e2);
273
- --background-color-hover-warning: var(--color-amber-100, #fef3c7);
274
- --background-color-hover-info: var(--color-cyan-100, #cffafe);
275
- --background-color-hover-link: var(--color-blue-100, #dbeafe);
276
- --background-color-active-default: var(--color-gray-100, #e5e7eb);
277
- --background-color-active-primary: var(--color-blue-200, #bfdbfe);
278
- --background-color-active-secondary: var(--color-gray-200, #e5e7eb);
279
- --background-color-active-tertiary: var(--color-gray-300, #d1d5db);
280
- --background-color-active-accent: var(--color-rose-200, #fbcfe8);
281
- --background-color-active-success: var(--color-emerald-200, #a7f3d0);
282
- --background-color-active-danger: var(--color-red-200, #fecaca);
283
- --background-color-active-warning: var(--color-amber-200, #fde68a);
284
- --background-color-active-info: var(--color-cyan-200, #a5f3fc);
285
- --background-color-active-link: var(--color-blue-200, #bfdbfe);
286
- --filled-background-color-default: var(--color-gray-800, #1f2937);
287
- --filled-background-color-primary: var(--color-blue-600, #2563eb);
288
- --filled-background-color-secondary: var(--color-gray-600, #4b5563);
289
- --filled-background-color-tertiary: var(--color-gray-500, #6b7280);
290
- --filled-background-color-accent: var(--color-rose-600, #e11d48);
291
- --filled-background-color-success: var(--color-emerald-600, #059669);
292
- --filled-background-color-danger: var(--color-red-600, #dc2626);
293
- --filled-background-color-warning: var(--color-amber-600, #d97706);
294
- --filled-background-color-info: var(--color-cyan-600, #0891b2);
295
- --filled-background-color-link: var(--color-blue-600, #2563eb);
296
- --filled-background-color-hover-default: var(--color-gray-900, #111827);
297
- --filled-background-color-hover-primary: var(--color-blue-700, #1d4ed8);
298
- --filled-background-color-hover-secondary: var(--color-gray-700, #374151);
299
- --filled-background-color-hover-tertiary: var(--color-gray-600, #4b5563);
300
- --filled-background-color-hover-accent: var(--color-rose-700, #be123c);
301
- --filled-background-color-hover-success: var(--color-emerald-700, #047857);
302
- --filled-background-color-hover-danger: var(--color-red-700, #b91c1c);
303
- --filled-background-color-hover-warning: var(--color-amber-700, #b45309);
304
- --filled-background-color-hover-info: var(--color-cyan-700, #0e7490);
305
- --filled-background-color-hover-link: var(--color-blue-700, #1d4ed8);
306
- --filled-background-color-active-default: var(--color-gray-950, #030712);
307
- --filled-background-color-active-primary: var(--color-blue-800, #1e40af);
308
- --filled-background-color-active-secondary: var(--color-gray-800, #1f2937);
309
- --filled-background-color-active-tertiary: var(--color-gray-700, #374151);
310
- --filled-background-color-active-accent: var(--color-rose-800, #9f1239);
311
- --filled-background-color-active-success: var(--color-emerald-800, #065f46);
312
- --filled-background-color-active-danger: var(--color-red-800, #991b1b);
313
- --filled-background-color-active-warning: var(--color-amber-800, #92400e);
314
- --filled-background-color-active-info: var(--color-cyan-800, #155e75);
315
- --filled-background-color-active-link: var(--color-blue-800, #1e40af);
316
- --layout-background-default: var(--color-white, #ffffff);
317
- --layout-background-primary: var(--color-white, #ffffff);
318
- --layout-background-secondary: var(--color-gray-50, #f9fafb);
319
- --layout-background-tertiary: var(--color-gray-100, #f3f4f6);
320
- --layout-background-accent: var(--color-indigo-50, #eef2ff);
321
- --layout-background-success: var(--color-green-50, #f0fdf4);
322
- --layout-background-danger: var(--color-red-50, #fef2f2);
323
- --layout-background-warning: var(--color-yellow-50, #fefce8);
324
- --layout-background-info: var(--color-blue-50, #eff6ff);
325
- --layout-background-link: var(--color-blue-50, #eff6ff);
326
- --border-color-default: var(--color-gray-200, #d1d5db);
327
- --border-color-primary: var(--color-blue-200, #93c5fd);
328
- --border-color-secondary: var(--color-gray-200, #d1d5db);
329
- --border-color-tertiary: var(--color-gray-200, #e5e7eb);
330
- --border-color-link: var(--color-blue-200, #93c5fd);
331
- --border-color-accent: var(--color-rose-200, #d8b4fe);
332
- --border-color-success: var(--color-emerald-200, #6ee7b7);
333
- --border-color-danger: var(--color-red-200, #fca5a5);
334
- --border-color-warning: var(--color-amber-200, #fcd34d);
335
- --border-color-info: var(--color-cyan-200, #67e8f9);
336
- --filled-border-color-default: var(--color-gray-800, #1f2937);
337
- --filled-border-color-primary: var(--color-blue-600, #2563eb);
338
- --filled-border-color-secondary: var(--color-gray-600, #4b5563);
339
- --filled-border-color-tertiary: var(--color-gray-500, #6b7280);
340
- --filled-border-color-accent: var(--color-rose-600, #e11d48);
341
- --filled-border-color-success: var(--color-emerald-600, #059669);
342
- --filled-border-color-danger: var(--color-red-600, #dc2626);
343
- --filled-border-color-warning: var(--color-amber-600, #d97706);
344
- --filled-border-color-info: var(--color-cyan-600, #0891b2);
345
- --filled-border-color-link: var(--color-blue-600, #2563eb);
307
+ --color-text-default: var(--color-gray-900);
308
+ --color-text-primary: var(--color-blue-600);
309
+ --color-text-secondary: var(--color-gray-600);
310
+ --color-text-tertiary: var(--color-gray-500);
311
+ --color-text-link: var(--color-blue-600);
312
+ --color-text-accent: var(--color-rose-700);
313
+ --color-text-success: var(--color-emerald-600);
314
+ --color-text-danger: var(--color-red-600);
315
+ --color-text-warning: var(--color-amber-600);
316
+ --color-text-info: var(--color-cyan-600);
317
+ --color-text-filled-default: var(--color-white);
318
+ --color-text-filled-primary: var(--color-blue-100);
319
+ --color-text-filled-secondary: var(--color-gray-200);
320
+ --color-text-filled-tertiary: var(--color-gray-300);
321
+ --color-text-filled-link: var(--color-blue-100);
322
+ --color-text-filled-accent: var(--color-rose-100);
323
+ --color-text-filled-success: var(--color-emerald-100);
324
+ --color-text-filled-danger: var(--color-red-100);
325
+ --color-text-filled-warning: var(--color-amber-100);
326
+ --color-text-filled-info: var(--color-cyan-100);
327
+ --color-bg-default: var(--color-white);
328
+ --color-bg-primary: var(--color-blue-50);
329
+ --color-bg-secondary: var(--color-gray-50);
330
+ --color-bg-tertiary: var(--color-gray-100);
331
+ --color-bg-accent: var(--color-rose-50);
332
+ --color-bg-success: var(--color-emerald-50);
333
+ --color-bg-danger: var(--color-red-50);
334
+ --color-bg-warning: var(--color-amber-50);
335
+ --color-bg-info: var(--color-cyan-50);
336
+ --color-bg-link: var(--color-blue-50);
337
+ --color-bg-hover-default: var(--color-gray-50);
338
+ --color-bg-hover-primary: var(--color-blue-100);
339
+ --color-bg-hover-secondary: var(--color-gray-100);
340
+ --color-bg-hover-tertiary: var(--color-gray-200);
341
+ --color-bg-hover-accent: var(--color-rose-100);
342
+ --color-bg-hover-success: var(--color-emerald-100);
343
+ --color-bg-hover-danger: var(--color-red-100);
344
+ --color-bg-hover-warning: var(--color-amber-100);
345
+ --color-bg-hover-info: var(--color-cyan-100);
346
+ --color-bg-hover-link: var(--color-blue-100);
347
+ --color-bg-active-default: var(--color-gray-100);
348
+ --color-bg-active-primary: var(--color-blue-200);
349
+ --color-bg-active-secondary: var(--color-gray-200);
350
+ --color-bg-active-tertiary: var(--color-gray-300);
351
+ --color-bg-active-accent: var(--color-rose-200);
352
+ --color-bg-active-success: var(--color-emerald-200);
353
+ --color-bg-active-danger: var(--color-red-200);
354
+ --color-bg-active-warning: var(--color-amber-200);
355
+ --color-bg-active-info: var(--color-cyan-200);
356
+ --color-bg-active-link: var(--color-blue-200);
357
+ --color-bg-filled-default: var(--color-gray-800);
358
+ --color-bg-filled-primary: var(--color-blue-600);
359
+ --color-bg-filled-secondary: var(--color-gray-600);
360
+ --color-bg-filled-tertiary: var(--color-gray-500);
361
+ --color-bg-filled-accent: var(--color-rose-600);
362
+ --color-bg-filled-success: var(--color-emerald-600);
363
+ --color-bg-filled-danger: var(--color-red-600);
364
+ --color-bg-filled-warning: var(--color-amber-600);
365
+ --color-bg-filled-info: var(--color-cyan-600);
366
+ --color-bg-filled-link: var(--color-blue-600);
367
+ --color-bg-filled-hover-default: var(--color-gray-900);
368
+ --color-bg-filled-hover-primary: var(--color-blue-700);
369
+ --color-bg-filled-hover-secondary: var(--color-gray-700);
370
+ --color-bg-filled-hover-tertiary: var(--color-gray-600);
371
+ --color-bg-filled-hover-accent: var(--color-rose-700);
372
+ --color-bg-filled-hover-success: var(--color-emerald-700);
373
+ --color-bg-filled-hover-danger: var(--color-red-700);
374
+ --color-bg-filled-hover-warning: var(--color-amber-700);
375
+ --color-bg-filled-hover-info: var(--color-cyan-700);
376
+ --color-bg-filled-hover-link: var(--color-blue-700);
377
+ --color-bg-filled-active-default: var(--color-gray-950);
378
+ --color-bg-filled-active-primary: var(--color-blue-800);
379
+ --color-bg-filled-active-secondary: var(--color-gray-800);
380
+ --color-bg-filled-active-tertiary: var(--color-gray-700);
381
+ --color-bg-filled-active-accent: var(--color-rose-800);
382
+ --color-bg-filled-active-success: var(--color-emerald-800);
383
+ --color-bg-filled-active-danger: var(--color-red-800);
384
+ --color-bg-filled-active-warning: var(--color-amber-800);
385
+ --color-bg-filled-active-info: var(--color-cyan-800);
386
+ --color-bg-filled-active-link: var(--color-blue-800);
387
+ --color-bg-layout-default: var(--color-white);
388
+ --color-bg-layout-primary: var(--color-white);
389
+ --color-bg-layout-secondary: var(--color-gray-50);
390
+ --color-bg-layout-tertiary: var(--color-gray-100);
391
+ --color-bg-layout-accent: var(--color-indigo-50);
392
+ --color-bg-layout-success: var(--color-green-50);
393
+ --color-bg-layout-danger: var(--color-red-50);
394
+ --color-bg-layout-warning: var(--color-yellow-50);
395
+ --color-bg-layout-info: var(--color-blue-50);
396
+ --color-bg-layout-link: var(--color-blue-50);
397
+ --color-bg-filled-layout-default: var(--color-gray-700);
398
+ --color-bg-filled-layout-primary: var(--color-blue-800);
399
+ --color-bg-filled-layout-secondary: var(--color-gray-800);
400
+ --color-bg-filled-layout-tertiary: var(--color-gray-900);
401
+ --color-bg-filled-layout-accent: var(--color-indigo-700);
402
+ --color-bg-filled-layout-success: var(--color-green-700);
403
+ --color-bg-filled-layout-danger: var(--color-red-700);
404
+ --color-bg-filled-layout-warning: var(--color-yellow-800);
405
+ --color-bg-filled-layout-info: var(--color-blue-700);
406
+ --color-bg-filled-layout-link: var(--color-blue-700);
407
+ --color-border-default: var(--color-gray-200);
408
+ --color-border-primary: var(--color-blue-200);
409
+ --color-border-secondary: var(--color-gray-200);
410
+ --color-border-tertiary: var(--color-gray-300);
411
+ --color-border-link: var(--color-blue-200);
412
+ --color-border-accent: var(--color-rose-200);
413
+ --color-border-success: var(--color-green-200);
414
+ --color-border-danger: var(--color-red-200);
415
+ --color-border-warning: var(--color-yellow-200);
416
+ --color-border-info: var(--color-blue-200);
417
+ --color-border-filled-default: var(--color-gray-600);
418
+ --color-border-filled-primary: var(--color-blue-600);
419
+ --color-border-filled-secondary: var(--color-gray-700);
420
+ --color-border-filled-tertiary: var(--color-gray-800);
421
+ --color-border-filled-accent: var(--color-rose-600);
422
+ --color-border-filled-success: var(--color-green-600);
423
+ --color-border-filled-danger: var(--color-red-600);
424
+ --color-border-filled-warning: var(--color-yellow-600);
425
+ --color-border-filled-info: var(--color-blue-600);
426
+ --color-border-filled-link: var(--color-blue-600);
427
+ --ui-br-spacing: 0.125rem;
428
+ --ui-br-xs: calc(1 * var(--ui-br-spacing));
429
+ --ui-br-sm: calc(2 * var(--ui-br-spacing));
430
+ --ui-br-md: calc(3 * var(--ui-br-spacing));
431
+ --ui-br-lg: calc(4 * var(--ui-br-spacing));
432
+ --ui-br-xl: calc(5 * var(--ui-br-spacing));
433
+ --layout-br-spacing: 0.25rem;
434
+ --layout-br-xs: calc(3 * var(--layout-br-spacing));
435
+ --layout-br-sm: calc(4 * var(--layout-br-spacing));
436
+ --layout-br-md: calc(5 * var(--layout-br-spacing));
437
+ --layout-br-lg: calc(6 * var(--layout-br-spacing));
438
+ --layout-br-xl: calc(7 * var(--layout-br-spacing));
439
+ --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.375rem);
440
+ --layout-gap-xs: calc(2 * var(--layout-spacing));
441
+ --layout-gap-sm: calc(3 * var(--layout-spacing));
442
+ --layout-gap-md: calc(4 * var(--layout-spacing));
443
+ --layout-gap-lg: calc(5 * var(--layout-spacing));
444
+ --layout-gap-xl: calc(6 * var(--layout-spacing));
346
445
  }
347
446
  }
348
447
  @layer base {
@@ -491,6 +590,9 @@
491
590
  }
492
591
  }
493
592
  @layer utilities {
593
+ .invisible {
594
+ visibility: hidden;
595
+ }
494
596
  .visible {
495
597
  visibility: visible;
496
598
  }
@@ -509,9 +611,18 @@
509
611
  .sticky {
510
612
  position: sticky;
511
613
  }
614
+ .left-3 {
615
+ left: calc(var(--spacing) * 3);
616
+ }
512
617
  .isolate {
513
618
  isolation: isolate;
514
619
  }
620
+ .col-start-1 {
621
+ grid-column-start: 1;
622
+ }
623
+ .row-start-1 {
624
+ grid-row-start: 1;
625
+ }
515
626
  .container {
516
627
  width: 100%;
517
628
  @media (width >= 40rem) {
@@ -569,12 +680,51 @@
569
680
  .table-cell {
570
681
  display: table-cell;
571
682
  }
683
+ .h-3 {
684
+ height: calc(var(--spacing) * 3);
685
+ }
686
+ .h-3\.5 {
687
+ height: calc(var(--spacing) * 3.5);
688
+ }
689
+ .h-4 {
690
+ height: calc(var(--spacing) * 4);
691
+ }
692
+ .h-4\.5 {
693
+ height: calc(var(--spacing) * 4.5);
694
+ }
695
+ .h-5 {
696
+ height: calc(var(--spacing) * 5);
697
+ }
698
+ .h-6 {
699
+ height: calc(var(--spacing) * 6);
700
+ }
701
+ .h-7 {
702
+ height: calc(var(--spacing) * 7);
703
+ }
572
704
  .h-fit {
573
705
  height: fit-content;
574
706
  }
575
707
  .h-px {
576
708
  height: 1px;
577
709
  }
710
+ .w-1\/3 {
711
+ width: calc(1/3 * 100%);
712
+ }
713
+ .w-3 {
714
+ width: calc(var(--spacing) * 3);
715
+ }
716
+ .w-3\.5 {
717
+ width: calc(var(--spacing) * 3.5);
718
+ }
719
+ .w-4 {
720
+ width: calc(var(--spacing) * 4);
721
+ }
722
+ .w-4\.5 {
723
+ width: calc(var(--spacing) * 4.5);
724
+ }
725
+ .w-5 {
726
+ width: calc(var(--spacing) * 5);
727
+ }
578
728
  .w-fit {
579
729
  width: fit-content;
580
730
  }
@@ -596,8 +746,8 @@
596
746
  .max-w-7xl {
597
747
  max-width: var(--container-7xl);
598
748
  }
599
- .max-w-xs {
600
- max-width: var(--container-xs);
749
+ .max-w-md {
750
+ max-width: var(--container-md);
601
751
  }
602
752
  .transform {
603
753
  transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
@@ -608,6 +758,9 @@
608
758
  .animate-pulse {
609
759
  animation: var(--animate-pulse);
610
760
  }
761
+ .cursor-default {
762
+ cursor: default;
763
+ }
611
764
  .cursor-pointer {
612
765
  cursor: pointer;
613
766
  }
@@ -620,6 +773,9 @@
620
773
  .list-disc {
621
774
  list-style-type: disc;
622
775
  }
776
+ .appearance-none {
777
+ appearance: none;
778
+ }
623
779
  .grid-cols-1 {
624
780
  grid-template-columns: repeat(1, minmax(0, 1fr));
625
781
  }
@@ -683,6 +839,21 @@
683
839
  .justify-stretch {
684
840
  justify-content: stretch;
685
841
  }
842
+ .gap-\(--layout-gap-lg\) {
843
+ gap: var(--layout-gap-lg);
844
+ }
845
+ .gap-\(--layout-gap-md\) {
846
+ gap: var(--layout-gap-md);
847
+ }
848
+ .gap-\(--layout-gap-sm\) {
849
+ gap: var(--layout-gap-sm);
850
+ }
851
+ .gap-\(--layout-gap-xl\) {
852
+ gap: var(--layout-gap-xl);
853
+ }
854
+ .gap-\(--layout-gap-xs\) {
855
+ gap: var(--layout-gap-xs);
856
+ }
686
857
  .gap-0 {
687
858
  gap: calc(var(--spacing) * 0);
688
859
  }
@@ -716,9 +887,6 @@
716
887
  .gap-8 {
717
888
  gap: calc(var(--spacing) * 8);
718
889
  }
719
- .gap-10 {
720
- gap: calc(var(--spacing) * 10);
721
- }
722
890
  .gap-12 {
723
891
  gap: calc(var(--spacing) * 12);
724
892
  }
@@ -787,32 +955,41 @@
787
955
  .rounded {
788
956
  border-radius: 0.25rem;
789
957
  }
790
- .rounded-2xl {
791
- border-radius: var(--radius-2xl);
958
+ .rounded-\(--layout-br-lg\) {
959
+ border-radius: var(--layout-br-lg);
792
960
  }
793
- .rounded-3xl {
794
- border-radius: var(--radius-3xl);
961
+ .rounded-\(--layout-br-md\) {
962
+ border-radius: var(--layout-br-md);
795
963
  }
796
- .rounded-full {
797
- border-radius: calc(infinity * 1px);
964
+ .rounded-\(--layout-br-sm\) {
965
+ border-radius: var(--layout-br-sm);
798
966
  }
799
- .rounded-lg {
800
- border-radius: var(--radius-lg);
967
+ .rounded-\(--layout-br-xl\) {
968
+ border-radius: var(--layout-br-xl);
801
969
  }
802
- .rounded-md {
803
- border-radius: var(--radius-md);
970
+ .rounded-\(--layout-br-xs\) {
971
+ border-radius: var(--layout-br-xs);
804
972
  }
805
- .rounded-none {
806
- border-radius: 0;
973
+ .rounded-\(--ui-br-lg\) {
974
+ border-radius: var(--ui-br-lg);
975
+ }
976
+ .rounded-\(--ui-br-md\) {
977
+ border-radius: var(--ui-br-md);
807
978
  }
808
- .rounded-sm {
809
- border-radius: var(--radius-sm);
979
+ .rounded-\(--ui-br-sm\) {
980
+ border-radius: var(--ui-br-sm);
810
981
  }
811
- .rounded-xl {
812
- border-radius: var(--radius-xl);
982
+ .rounded-\(--ui-br-xl\) {
983
+ border-radius: var(--ui-br-xl);
813
984
  }
814
- .rounded-xs {
815
- border-radius: var(--radius-xs);
985
+ .rounded-\(--ui-br-xs\) {
986
+ border-radius: var(--ui-br-xs);
987
+ }
988
+ .rounded-full {
989
+ border-radius: calc(infinity * 1px);
990
+ }
991
+ .rounded-none {
992
+ border-radius: 0;
816
993
  }
817
994
  .border {
818
995
  border-style: var(--tw-border-style);
@@ -822,73 +999,93 @@
822
999
  border-style: var(--tw-border-style);
823
1000
  border-width: 2px;
824
1001
  }
1002
+ .border-x {
1003
+ border-inline-style: var(--tw-border-style);
1004
+ border-inline-width: 1px;
1005
+ }
1006
+ .border-y {
1007
+ border-block-style: var(--tw-border-style);
1008
+ border-block-width: 1px;
1009
+ }
1010
+ .border-t {
1011
+ border-top-style: var(--tw-border-style);
1012
+ border-top-width: 1px;
1013
+ }
1014
+ .border-r {
1015
+ border-right-style: var(--tw-border-style);
1016
+ border-right-width: 1px;
1017
+ }
1018
+ .border-b {
1019
+ border-bottom-style: var(--tw-border-style);
1020
+ border-bottom-width: 1px;
1021
+ }
1022
+ .border-l {
1023
+ border-left-style: var(--tw-border-style);
1024
+ border-left-width: 1px;
1025
+ }
825
1026
  .border-dashed {
826
1027
  --tw-border-style: dashed;
827
1028
  border-style: dashed;
828
1029
  }
829
- .border-none {
830
- --tw-border-style: none;
831
- border-style: none;
1030
+ .border-\(--color-border-accent\) {
1031
+ border-color: var(--color-border-accent);
832
1032
  }
833
- .border-\(--border-color-accent\) {
834
- border-color: var(--border-color-accent);
1033
+ .border-\(--color-border-danger\) {
1034
+ border-color: var(--color-border-danger);
835
1035
  }
836
- .border-\(--border-color-danger\) {
837
- border-color: var(--border-color-danger);
1036
+ .border-\(--color-border-default\) {
1037
+ border-color: var(--color-border-default);
838
1038
  }
839
- .border-\(--border-color-default\) {
840
- border-color: var(--border-color-default);
1039
+ .border-\(--color-border-filled-accent\) {
1040
+ border-color: var(--color-border-filled-accent);
841
1041
  }
842
- .border-\(--border-color-info\) {
843
- border-color: var(--border-color-info);
1042
+ .border-\(--color-border-filled-danger\) {
1043
+ border-color: var(--color-border-filled-danger);
844
1044
  }
845
- .border-\(--border-color-link\) {
846
- border-color: var(--border-color-link);
1045
+ .border-\(--color-border-filled-default\) {
1046
+ border-color: var(--color-border-filled-default);
847
1047
  }
848
- .border-\(--border-color-primary\) {
849
- border-color: var(--border-color-primary);
1048
+ .border-\(--color-border-filled-info\) {
1049
+ border-color: var(--color-border-filled-info);
850
1050
  }
851
- .border-\(--border-color-secondary\) {
852
- border-color: var(--border-color-secondary);
1051
+ .border-\(--color-border-filled-link\) {
1052
+ border-color: var(--color-border-filled-link);
853
1053
  }
854
- .border-\(--border-color-success\) {
855
- border-color: var(--border-color-success);
1054
+ .border-\(--color-border-filled-primary\) {
1055
+ border-color: var(--color-border-filled-primary);
856
1056
  }
857
- .border-\(--border-color-tertiary\) {
858
- border-color: var(--border-color-tertiary);
1057
+ .border-\(--color-border-filled-secondary\) {
1058
+ border-color: var(--color-border-filled-secondary);
859
1059
  }
860
- .border-\(--border-color-warning\) {
861
- border-color: var(--border-color-warning);
1060
+ .border-\(--color-border-filled-success\) {
1061
+ border-color: var(--color-border-filled-success);
862
1062
  }
863
- .border-\(--filled-border-color-accent\) {
864
- border-color: var(--filled-border-color-accent);
1063
+ .border-\(--color-border-filled-tertiary\) {
1064
+ border-color: var(--color-border-filled-tertiary);
865
1065
  }
866
- .border-\(--filled-border-color-danger\) {
867
- border-color: var(--filled-border-color-danger);
1066
+ .border-\(--color-border-filled-warning\) {
1067
+ border-color: var(--color-border-filled-warning);
868
1068
  }
869
- .border-\(--filled-border-color-default\) {
870
- border-color: var(--filled-border-color-default);
1069
+ .border-\(--color-border-info\) {
1070
+ border-color: var(--color-border-info);
871
1071
  }
872
- .border-\(--filled-border-color-info\) {
873
- border-color: var(--filled-border-color-info);
1072
+ .border-\(--color-border-link\) {
1073
+ border-color: var(--color-border-link);
874
1074
  }
875
- .border-\(--filled-border-color-link\) {
876
- border-color: var(--filled-border-color-link);
1075
+ .border-\(--color-border-primary\) {
1076
+ border-color: var(--color-border-primary);
877
1077
  }
878
- .border-\(--filled-border-color-primary\) {
879
- border-color: var(--filled-border-color-primary);
1078
+ .border-\(--color-border-secondary\) {
1079
+ border-color: var(--color-border-secondary);
880
1080
  }
881
- .border-\(--filled-border-color-secondary\) {
882
- border-color: var(--filled-border-color-secondary);
1081
+ .border-\(--color-border-success\) {
1082
+ border-color: var(--color-border-success);
883
1083
  }
884
- .border-\(--filled-border-color-success\) {
885
- border-color: var(--filled-border-color-success);
1084
+ .border-\(--color-border-tertiary\) {
1085
+ border-color: var(--color-border-tertiary);
886
1086
  }
887
- .border-\(--filled-border-color-tertiary\) {
888
- border-color: var(--filled-border-color-tertiary);
889
- }
890
- .border-\(--filled-border-color-warning\) {
891
- border-color: var(--filled-border-color-warning);
1087
+ .border-\(--color-border-warning\) {
1088
+ border-color: var(--color-border-warning);
892
1089
  }
893
1090
  .border-blue-300 {
894
1091
  border-color: var(--color-blue-300);
@@ -896,6 +1093,12 @@
896
1093
  .border-green-200 {
897
1094
  border-color: var(--color-green-200);
898
1095
  }
1096
+ .border-green-500 {
1097
+ border-color: var(--color-green-500);
1098
+ }
1099
+ .border-indigo-400 {
1100
+ border-color: var(--color-indigo-400);
1101
+ }
899
1102
  .border-red-200 {
900
1103
  border-color: var(--color-red-200);
901
1104
  }
@@ -905,144 +1108,207 @@
905
1108
  .border-transparent {
906
1109
  border-color: transparent;
907
1110
  }
908
- .bg-\(--background-color-accent\) {
909
- background-color: var(--background-color-accent);
1111
+ .border-violet-400 {
1112
+ border-color: var(--color-violet-400);
1113
+ }
1114
+ .bg-\(--color-bg-accent\) {
1115
+ background-color: var(--color-bg-accent);
1116
+ }
1117
+ .bg-\(--color-bg-danger\) {
1118
+ background-color: var(--color-bg-danger);
1119
+ }
1120
+ .bg-\(--color-bg-default\) {
1121
+ background-color: var(--color-bg-default);
1122
+ }
1123
+ .bg-\(--color-bg-filled-accent\) {
1124
+ background-color: var(--color-bg-filled-accent);
1125
+ }
1126
+ .bg-\(--color-bg-filled-danger\) {
1127
+ background-color: var(--color-bg-filled-danger);
1128
+ }
1129
+ .bg-\(--color-bg-filled-default\) {
1130
+ background-color: var(--color-bg-filled-default);
1131
+ }
1132
+ .bg-\(--color-bg-filled-info\) {
1133
+ background-color: var(--color-bg-filled-info);
1134
+ }
1135
+ .bg-\(--color-bg-filled-layout-accent\) {
1136
+ background-color: var(--color-bg-filled-layout-accent);
1137
+ }
1138
+ .bg-\(--color-bg-filled-layout-danger\) {
1139
+ background-color: var(--color-bg-filled-layout-danger);
910
1140
  }
911
- .bg-\(--background-color-danger\) {
912
- background-color: var(--background-color-danger);
1141
+ .bg-\(--color-bg-filled-layout-default\) {
1142
+ background-color: var(--color-bg-filled-layout-default);
913
1143
  }
914
- .bg-\(--background-color-default\) {
915
- background-color: var(--background-color-default);
1144
+ .bg-\(--color-bg-filled-layout-info\) {
1145
+ background-color: var(--color-bg-filled-layout-info);
916
1146
  }
917
- .bg-\(--background-color-info\) {
918
- background-color: var(--background-color-info);
1147
+ .bg-\(--color-bg-filled-layout-link\) {
1148
+ background-color: var(--color-bg-filled-layout-link);
919
1149
  }
920
- .bg-\(--background-color-link\) {
921
- background-color: var(--background-color-link);
1150
+ .bg-\(--color-bg-filled-layout-primary\) {
1151
+ background-color: var(--color-bg-filled-layout-primary);
922
1152
  }
923
- .bg-\(--background-color-primary\) {
924
- background-color: var(--background-color-primary);
1153
+ .bg-\(--color-bg-filled-layout-secondary\) {
1154
+ background-color: var(--color-bg-filled-layout-secondary);
925
1155
  }
926
- .bg-\(--background-color-secondary\) {
927
- background-color: var(--background-color-secondary);
1156
+ .bg-\(--color-bg-filled-layout-success\) {
1157
+ background-color: var(--color-bg-filled-layout-success);
928
1158
  }
929
- .bg-\(--background-color-success\) {
930
- background-color: var(--background-color-success);
1159
+ .bg-\(--color-bg-filled-layout-tertiary\) {
1160
+ background-color: var(--color-bg-filled-layout-tertiary);
931
1161
  }
932
- .bg-\(--background-color-tertiary\) {
933
- background-color: var(--background-color-tertiary);
1162
+ .bg-\(--color-bg-filled-layout-warning\) {
1163
+ background-color: var(--color-bg-filled-layout-warning);
934
1164
  }
935
- .bg-\(--background-color-warning\) {
936
- background-color: var(--background-color-warning);
1165
+ .bg-\(--color-bg-filled-link\) {
1166
+ background-color: var(--color-bg-filled-link);
937
1167
  }
938
- .bg-\(--border-color-accent\) {
939
- background-color: var(--border-color-accent);
1168
+ .bg-\(--color-bg-filled-primary\) {
1169
+ background-color: var(--color-bg-filled-primary);
940
1170
  }
941
- .bg-\(--border-color-danger\) {
942
- background-color: var(--border-color-danger);
1171
+ .bg-\(--color-bg-filled-secondary\) {
1172
+ background-color: var(--color-bg-filled-secondary);
943
1173
  }
944
- .bg-\(--border-color-default\) {
945
- background-color: var(--border-color-default);
1174
+ .bg-\(--color-bg-filled-success\) {
1175
+ background-color: var(--color-bg-filled-success);
946
1176
  }
947
- .bg-\(--border-color-info\) {
948
- background-color: var(--border-color-info);
1177
+ .bg-\(--color-bg-filled-tertiary\) {
1178
+ background-color: var(--color-bg-filled-tertiary);
949
1179
  }
950
- .bg-\(--border-color-link\) {
951
- background-color: var(--border-color-link);
1180
+ .bg-\(--color-bg-filled-warning\) {
1181
+ background-color: var(--color-bg-filled-warning);
952
1182
  }
953
- .bg-\(--border-color-primary\) {
954
- background-color: var(--border-color-primary);
1183
+ .bg-\(--color-bg-info\) {
1184
+ background-color: var(--color-bg-info);
955
1185
  }
956
- .bg-\(--border-color-secondary\) {
957
- background-color: var(--border-color-secondary);
1186
+ .bg-\(--color-bg-layout-accent\) {
1187
+ background-color: var(--color-bg-layout-accent);
958
1188
  }
959
- .bg-\(--border-color-success\) {
960
- background-color: var(--border-color-success);
1189
+ .bg-\(--color-bg-layout-danger\) {
1190
+ background-color: var(--color-bg-layout-danger);
961
1191
  }
962
- .bg-\(--border-color-tertiary\) {
963
- background-color: var(--border-color-tertiary);
1192
+ .bg-\(--color-bg-layout-default\) {
1193
+ background-color: var(--color-bg-layout-default);
964
1194
  }
965
- .bg-\(--border-color-warning\) {
966
- background-color: var(--border-color-warning);
1195
+ .bg-\(--color-bg-layout-info\) {
1196
+ background-color: var(--color-bg-layout-info);
967
1197
  }
968
- .bg-\(--filled-background-color-accent\) {
969
- background-color: var(--filled-background-color-accent);
1198
+ .bg-\(--color-bg-layout-link\) {
1199
+ background-color: var(--color-bg-layout-link);
970
1200
  }
971
- .bg-\(--filled-background-color-danger\) {
972
- background-color: var(--filled-background-color-danger);
1201
+ .bg-\(--color-bg-layout-primary\) {
1202
+ background-color: var(--color-bg-layout-primary);
973
1203
  }
974
- .bg-\(--filled-background-color-default\) {
975
- background-color: var(--filled-background-color-default);
1204
+ .bg-\(--color-bg-layout-secondary\) {
1205
+ background-color: var(--color-bg-layout-secondary);
976
1206
  }
977
- .bg-\(--filled-background-color-info\) {
978
- background-color: var(--filled-background-color-info);
1207
+ .bg-\(--color-bg-layout-success\) {
1208
+ background-color: var(--color-bg-layout-success);
979
1209
  }
980
- .bg-\(--filled-background-color-link\) {
981
- background-color: var(--filled-background-color-link);
1210
+ .bg-\(--color-bg-layout-tertiary\) {
1211
+ background-color: var(--color-bg-layout-tertiary);
982
1212
  }
983
- .bg-\(--filled-background-color-primary\) {
984
- background-color: var(--filled-background-color-primary);
1213
+ .bg-\(--color-bg-layout-warning\) {
1214
+ background-color: var(--color-bg-layout-warning);
985
1215
  }
986
- .bg-\(--filled-background-color-secondary\) {
987
- background-color: var(--filled-background-color-secondary);
1216
+ .bg-\(--color-bg-link\) {
1217
+ background-color: var(--color-bg-link);
988
1218
  }
989
- .bg-\(--filled-background-color-success\) {
990
- background-color: var(--filled-background-color-success);
1219
+ .bg-\(--color-bg-primary\) {
1220
+ background-color: var(--color-bg-primary);
991
1221
  }
992
- .bg-\(--filled-background-color-tertiary\) {
993
- background-color: var(--filled-background-color-tertiary);
1222
+ .bg-\(--color-bg-secondary\) {
1223
+ background-color: var(--color-bg-secondary);
994
1224
  }
995
- .bg-\(--filled-background-color-warning\) {
996
- background-color: var(--filled-background-color-warning);
1225
+ .bg-\(--color-bg-success\) {
1226
+ background-color: var(--color-bg-success);
997
1227
  }
998
- .bg-\(--layout-background-accent\) {
999
- background-color: var(--layout-background-accent);
1228
+ .bg-\(--color-bg-tertiary\) {
1229
+ background-color: var(--color-bg-tertiary);
1000
1230
  }
1001
- .bg-\(--layout-background-danger\) {
1002
- background-color: var(--layout-background-danger);
1231
+ .bg-\(--color-bg-warning\) {
1232
+ background-color: var(--color-bg-warning);
1003
1233
  }
1004
- .bg-\(--layout-background-default\) {
1005
- background-color: var(--layout-background-default);
1234
+ .bg-\(--color-border-accent\) {
1235
+ background-color: var(--color-border-accent);
1006
1236
  }
1007
- .bg-\(--layout-background-info\) {
1008
- background-color: var(--layout-background-info);
1237
+ .bg-\(--color-border-danger\) {
1238
+ background-color: var(--color-border-danger);
1009
1239
  }
1010
- .bg-\(--layout-background-link\) {
1011
- background-color: var(--layout-background-link);
1240
+ .bg-\(--color-border-default\) {
1241
+ background-color: var(--color-border-default);
1012
1242
  }
1013
- .bg-\(--layout-background-primary\) {
1014
- background-color: var(--layout-background-primary);
1243
+ .bg-\(--color-border-info\) {
1244
+ background-color: var(--color-border-info);
1015
1245
  }
1016
- .bg-\(--layout-background-secondary\) {
1017
- background-color: var(--layout-background-secondary);
1246
+ .bg-\(--color-border-link\) {
1247
+ background-color: var(--color-border-link);
1018
1248
  }
1019
- .bg-\(--layout-background-success\) {
1020
- background-color: var(--layout-background-success);
1249
+ .bg-\(--color-border-primary\) {
1250
+ background-color: var(--color-border-primary);
1021
1251
  }
1022
- .bg-\(--layout-background-tertiary\) {
1023
- background-color: var(--layout-background-tertiary);
1252
+ .bg-\(--color-border-secondary\) {
1253
+ background-color: var(--color-border-secondary);
1024
1254
  }
1025
- .bg-\(--layout-background-warning\) {
1026
- background-color: var(--layout-background-warning);
1255
+ .bg-\(--color-border-success\) {
1256
+ background-color: var(--color-border-success);
1027
1257
  }
1028
- .bg-blue-100 {
1029
- background-color: var(--color-blue-100);
1258
+ .bg-\(--color-border-tertiary\) {
1259
+ background-color: var(--color-border-tertiary);
1260
+ }
1261
+ .bg-\(--color-border-warning\) {
1262
+ background-color: var(--color-border-warning);
1263
+ }
1264
+ .bg-blue-500 {
1265
+ background-color: var(--color-blue-500);
1266
+ }
1267
+ .bg-blue-600 {
1268
+ background-color: var(--color-blue-600);
1269
+ }
1270
+ .bg-emerald-500 {
1271
+ background-color: var(--color-emerald-500);
1030
1272
  }
1031
1273
  .bg-green-50 {
1032
1274
  background-color: var(--color-green-50);
1033
1275
  }
1276
+ .bg-green-600 {
1277
+ background-color: var(--color-green-600);
1278
+ }
1279
+ .bg-purple-600 {
1280
+ background-color: var(--color-purple-600);
1281
+ }
1034
1282
  .bg-red-50 {
1035
1283
  background-color: var(--color-red-50);
1036
1284
  }
1285
+ .bg-red-100 {
1286
+ background-color: var(--color-red-100);
1287
+ }
1037
1288
  .bg-transparent {
1038
1289
  background-color: transparent;
1039
1290
  }
1291
+ .bg-violet-600 {
1292
+ background-color: var(--color-violet-600);
1293
+ }
1294
+ .bg-gradient-to-r {
1295
+ --tw-gradient-position: to right in oklab;
1296
+ background-image: linear-gradient(var(--tw-gradient-stops));
1297
+ }
1298
+ .from-indigo-500 {
1299
+ --tw-gradient-from: var(--color-indigo-500);
1300
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1301
+ }
1302
+ .to-purple-600 {
1303
+ --tw-gradient-to: var(--color-purple-600);
1304
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1305
+ }
1306
+ .object-cover {
1307
+ object-fit: cover;
1308
+ }
1040
1309
  .p-0 {
1041
1310
  padding: calc(var(--spacing) * 0);
1042
1311
  }
1043
- .px-0 {
1044
- padding-inline: calc(var(--spacing) * 0);
1045
- }
1046
1312
  .px-1 {
1047
1313
  padding-inline: calc(var(--spacing) * 1);
1048
1314
  }
@@ -1112,6 +1378,9 @@
1112
1378
  .py-6 {
1113
1379
  padding-block: calc(var(--spacing) * 6);
1114
1380
  }
1381
+ .py-7 {
1382
+ padding-block: calc(var(--spacing) * 7);
1383
+ }
1115
1384
  .py-8 {
1116
1385
  padding-block: calc(var(--spacing) * 8);
1117
1386
  }
@@ -1127,9 +1396,6 @@
1127
1396
  .py-20 {
1128
1397
  padding-block: calc(var(--spacing) * 20);
1129
1398
  }
1130
- .pl-0 {
1131
- padding-left: calc(var(--spacing) * 0);
1132
- }
1133
1399
  .pl-2 {
1134
1400
  padding-left: calc(var(--spacing) * 2);
1135
1401
  }
@@ -1264,35 +1530,65 @@
1264
1530
  .whitespace-nowrap {
1265
1531
  white-space: nowrap;
1266
1532
  }
1267
- .text-\(--text-color-accent\) {
1268
- color: var(--text-color-accent);
1533
+ .text-\(--color-text-accent\) {
1534
+ color: var(--color-text-accent);
1535
+ }
1536
+ .text-\(--color-text-danger\) {
1537
+ color: var(--color-text-danger);
1538
+ }
1539
+ .text-\(--color-text-default\) {
1540
+ color: var(--color-text-default);
1541
+ }
1542
+ .text-\(--color-text-filled-accent\) {
1543
+ color: var(--color-text-filled-accent);
1544
+ }
1545
+ .text-\(--color-text-filled-danger\) {
1546
+ color: var(--color-text-filled-danger);
1269
1547
  }
1270
- .text-\(--text-color-danger\) {
1271
- color: var(--text-color-danger);
1548
+ .text-\(--color-text-filled-default\) {
1549
+ color: var(--color-text-filled-default);
1272
1550
  }
1273
- .text-\(--text-color-default\) {
1274
- color: var(--text-color-default);
1551
+ .text-\(--color-text-filled-info\) {
1552
+ color: var(--color-text-filled-info);
1275
1553
  }
1276
- .text-\(--text-color-info\) {
1277
- color: var(--text-color-info);
1554
+ .text-\(--color-text-filled-link\) {
1555
+ color: var(--color-text-filled-link);
1278
1556
  }
1279
- .text-\(--text-color-link\) {
1280
- color: var(--text-color-link);
1557
+ .text-\(--color-text-filled-primary\) {
1558
+ color: var(--color-text-filled-primary);
1281
1559
  }
1282
- .text-\(--text-color-primary\) {
1283
- color: var(--text-color-primary);
1560
+ .text-\(--color-text-filled-secondary\) {
1561
+ color: var(--color-text-filled-secondary);
1284
1562
  }
1285
- .text-\(--text-color-secondary\) {
1286
- color: var(--text-color-secondary);
1563
+ .text-\(--color-text-filled-success\) {
1564
+ color: var(--color-text-filled-success);
1287
1565
  }
1288
- .text-\(--text-color-success\) {
1289
- color: var(--text-color-success);
1566
+ .text-\(--color-text-filled-tertiary\) {
1567
+ color: var(--color-text-filled-tertiary);
1290
1568
  }
1291
- .text-\(--text-color-tertiary\) {
1292
- color: var(--text-color-tertiary);
1569
+ .text-\(--color-text-filled-warning\) {
1570
+ color: var(--color-text-filled-warning);
1293
1571
  }
1294
- .text-\(--text-color-warning\) {
1295
- color: var(--text-color-warning);
1572
+ .text-\(--color-text-info\) {
1573
+ color: var(--color-text-info);
1574
+ }
1575
+ .text-\(--color-text-link\) {
1576
+ color: var(--color-text-link);
1577
+ }
1578
+ .text-\(--color-text-primary\) {
1579
+ color: var(--color-text-primary);
1580
+ }
1581
+ .text-\(--color-text-secondary\) {
1582
+ color: var(--color-text-secondary);
1583
+ }
1584
+ .text-\(--color-text-success\) {
1585
+ color: var(--color-text-success);
1586
+ }
1587
+ .text-\(--color-text-tertiary\) {
1588
+ color: var(--color-text-tertiary);
1589
+ }
1590
+ .text-\(--color-text-warning\) {
1591
+ color: var(--color-text-warning);
1296
1592
  }
1297
1593
  .text-blue-200 {
1298
1594
  color: var(--color-blue-200);
@@ -1300,14 +1596,29 @@
1300
1596
  .text-blue-500 {
1301
1597
  color: var(--color-blue-500);
1302
1598
  }
1599
+ .text-gray-500 {
1600
+ color: var(--color-gray-500);
1601
+ }
1303
1602
  .text-green-500 {
1304
1603
  color: var(--color-green-500);
1305
1604
  }
1605
+ .text-indigo-100 {
1606
+ color: var(--color-indigo-100);
1607
+ }
1608
+ .text-pink-600 {
1609
+ color: var(--color-pink-600);
1610
+ }
1611
+ .text-red-500 {
1612
+ color: var(--color-red-500);
1613
+ }
1306
1614
  .text-transparent {
1307
1615
  color: transparent;
1308
1616
  }
1309
- .text-white {
1310
- color: var(--color-white);
1617
+ .text-violet-600 {
1618
+ color: var(--color-violet-600);
1619
+ }
1620
+ .text-yellow-100 {
1621
+ color: var(--color-yellow-100);
1311
1622
  }
1312
1623
  .capitalize {
1313
1624
  text-transform: capitalize;
@@ -1339,6 +1650,69 @@
1339
1650
  .underline {
1340
1651
  text-decoration-line: underline;
1341
1652
  }
1653
+ .accent-\(--color-bg-accent\) {
1654
+ accent-color: var(--color-bg-accent);
1655
+ }
1656
+ .accent-\(--color-bg-danger\) {
1657
+ accent-color: var(--color-bg-danger);
1658
+ }
1659
+ .accent-\(--color-bg-default\) {
1660
+ accent-color: var(--color-bg-default);
1661
+ }
1662
+ .accent-\(--color-bg-filled-accent\) {
1663
+ accent-color: var(--color-bg-filled-accent);
1664
+ }
1665
+ .accent-\(--color-bg-filled-danger\) {
1666
+ accent-color: var(--color-bg-filled-danger);
1667
+ }
1668
+ .accent-\(--color-bg-filled-default\) {
1669
+ accent-color: var(--color-bg-filled-default);
1670
+ }
1671
+ .accent-\(--color-bg-filled-info\) {
1672
+ accent-color: var(--color-bg-filled-info);
1673
+ }
1674
+ .accent-\(--color-bg-filled-link\) {
1675
+ accent-color: var(--color-bg-filled-link);
1676
+ }
1677
+ .accent-\(--color-bg-filled-primary\) {
1678
+ accent-color: var(--color-bg-filled-primary);
1679
+ }
1680
+ .accent-\(--color-bg-filled-secondary\) {
1681
+ accent-color: var(--color-bg-filled-secondary);
1682
+ }
1683
+ .accent-\(--color-bg-filled-success\) {
1684
+ accent-color: var(--color-bg-filled-success);
1685
+ }
1686
+ .accent-\(--color-bg-filled-tertiary\) {
1687
+ accent-color: var(--color-bg-filled-tertiary);
1688
+ }
1689
+ .accent-\(--color-bg-filled-warning\) {
1690
+ accent-color: var(--color-bg-filled-warning);
1691
+ }
1692
+ .accent-\(--color-bg-info\) {
1693
+ accent-color: var(--color-bg-info);
1694
+ }
1695
+ .accent-\(--color-bg-link\) {
1696
+ accent-color: var(--color-bg-link);
1697
+ }
1698
+ .accent-\(--color-bg-primary\) {
1699
+ accent-color: var(--color-bg-primary);
1700
+ }
1701
+ .accent-\(--color-bg-secondary\) {
1702
+ accent-color: var(--color-bg-secondary);
1703
+ }
1704
+ .accent-\(--color-bg-success\) {
1705
+ accent-color: var(--color-bg-success);
1706
+ }
1707
+ .accent-\(--color-bg-tertiary\) {
1708
+ accent-color: var(--color-bg-tertiary);
1709
+ }
1710
+ .accent-\(--color-bg-warning\) {
1711
+ accent-color: var(--color-bg-warning);
1712
+ }
1713
+ .accent-transparent {
1714
+ accent-color: transparent;
1715
+ }
1342
1716
  .opacity-50 {
1343
1717
  opacity: 50%;
1344
1718
  }
@@ -1366,87 +1740,88 @@
1366
1740
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1367
1741
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1368
1742
  }
1369
- .shadow\/ring {
1370
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1371
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1372
- }
1373
1743
  .ring {
1374
1744
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1375
1745
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1376
1746
  }
1377
- .ring-0 {
1378
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1379
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1380
- }
1381
1747
  .ring-2 {
1382
1748
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1383
1749
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1384
1750
  }
1751
+ .shadow-orange-500\/50 {
1752
+ --tw-shadow-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent);
1753
+ @supports (color: color-mix(in lab, red, red)) {
1754
+ --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
1755
+ }
1756
+ }
1385
1757
  .shadow-red-500 {
1386
1758
  --tw-shadow-color: oklch(63.7% 0.237 25.331);
1387
1759
  @supports (color: color-mix(in lab, red, red)) {
1388
1760
  --tw-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-shadow-alpha), transparent);
1389
1761
  }
1390
1762
  }
1391
- .ring-\(--border-color-accent\) {
1392
- --tw-ring-color: var(--border-color-accent);
1763
+ .ring-\(--color-border-accent\) {
1764
+ --tw-ring-color: var(--color-border-accent);
1393
1765
  }
1394
- .ring-\(--border-color-danger\) {
1395
- --tw-ring-color: var(--border-color-danger);
1766
+ .ring-\(--color-border-danger\) {
1767
+ --tw-ring-color: var(--color-border-danger);
1396
1768
  }
1397
- .ring-\(--border-color-default\) {
1398
- --tw-ring-color: var(--border-color-default);
1769
+ .ring-\(--color-border-default\) {
1770
+ --tw-ring-color: var(--color-border-default);
1399
1771
  }
1400
- .ring-\(--border-color-info\) {
1401
- --tw-ring-color: var(--border-color-info);
1772
+ .ring-\(--color-border-filled-accent\) {
1773
+ --tw-ring-color: var(--color-border-filled-accent);
1402
1774
  }
1403
- .ring-\(--border-color-link\) {
1404
- --tw-ring-color: var(--border-color-link);
1775
+ .ring-\(--color-border-filled-danger\) {
1776
+ --tw-ring-color: var(--color-border-filled-danger);
1405
1777
  }
1406
- .ring-\(--border-color-primary\) {
1407
- --tw-ring-color: var(--border-color-primary);
1778
+ .ring-\(--color-border-filled-default\) {
1779
+ --tw-ring-color: var(--color-border-filled-default);
1408
1780
  }
1409
- .ring-\(--border-color-secondary\) {
1410
- --tw-ring-color: var(--border-color-secondary);
1781
+ .ring-\(--color-border-filled-info\) {
1782
+ --tw-ring-color: var(--color-border-filled-info);
1411
1783
  }
1412
- .ring-\(--border-color-success\) {
1413
- --tw-ring-color: var(--border-color-success);
1784
+ .ring-\(--color-border-filled-link\) {
1785
+ --tw-ring-color: var(--color-border-filled-link);
1414
1786
  }
1415
- .ring-\(--border-color-tertiary\) {
1416
- --tw-ring-color: var(--border-color-tertiary);
1787
+ .ring-\(--color-border-filled-primary\) {
1788
+ --tw-ring-color: var(--color-border-filled-primary);
1417
1789
  }
1418
- .ring-\(--border-color-warning\) {
1419
- --tw-ring-color: var(--border-color-warning);
1790
+ .ring-\(--color-border-filled-secondary\) {
1791
+ --tw-ring-color: var(--color-border-filled-secondary);
1420
1792
  }
1421
- .ring-\(--filled-border-color-accent\) {
1422
- --tw-ring-color: var(--filled-border-color-accent);
1793
+ .ring-\(--color-border-filled-success\) {
1794
+ --tw-ring-color: var(--color-border-filled-success);
1423
1795
  }
1424
- .ring-\(--filled-border-color-danger\) {
1425
- --tw-ring-color: var(--filled-border-color-danger);
1796
+ .ring-\(--color-border-filled-tertiary\) {
1797
+ --tw-ring-color: var(--color-border-filled-tertiary);
1426
1798
  }
1427
- .ring-\(--filled-border-color-default\) {
1428
- --tw-ring-color: var(--filled-border-color-default);
1799
+ .ring-\(--color-border-filled-warning\) {
1800
+ --tw-ring-color: var(--color-border-filled-warning);
1429
1801
  }
1430
- .ring-\(--filled-border-color-info\) {
1431
- --tw-ring-color: var(--filled-border-color-info);
1802
+ .ring-\(--color-border-info\) {
1803
+ --tw-ring-color: var(--color-border-info);
1432
1804
  }
1433
- .ring-\(--filled-border-color-link\) {
1434
- --tw-ring-color: var(--filled-border-color-link);
1805
+ .ring-\(--color-border-link\) {
1806
+ --tw-ring-color: var(--color-border-link);
1435
1807
  }
1436
- .ring-\(--filled-border-color-primary\) {
1437
- --tw-ring-color: var(--filled-border-color-primary);
1808
+ .ring-\(--color-border-primary\) {
1809
+ --tw-ring-color: var(--color-border-primary);
1438
1810
  }
1439
- .ring-\(--filled-border-color-secondary\) {
1440
- --tw-ring-color: var(--filled-border-color-secondary);
1811
+ .ring-\(--color-border-secondary\) {
1812
+ --tw-ring-color: var(--color-border-secondary);
1441
1813
  }
1442
- .ring-\(--filled-border-color-success\) {
1443
- --tw-ring-color: var(--filled-border-color-success);
1814
+ .ring-\(--color-border-success\) {
1815
+ --tw-ring-color: var(--color-border-success);
1444
1816
  }
1445
- .ring-\(--filled-border-color-tertiary\) {
1446
- --tw-ring-color: var(--filled-border-color-tertiary);
1817
+ .ring-\(--color-border-tertiary\) {
1818
+ --tw-ring-color: var(--color-border-tertiary);
1447
1819
  }
1448
- .ring-\(--filled-border-color-warning\) {
1449
- --tw-ring-color: var(--filled-border-color-warning);
1820
+ .ring-\(--color-border-warning\) {
1821
+ --tw-ring-color: var(--color-border-warning);
1822
+ }
1823
+ .ring-orange-500 {
1824
+ --tw-ring-color: var(--color-orange-500);
1450
1825
  }
1451
1826
  .ring-transparent {
1452
1827
  --tw-ring-color: transparent;
@@ -1470,6 +1845,116 @@
1470
1845
  .ring-inset {
1471
1846
  --tw-ring-inset: inset;
1472
1847
  }
1848
+ .peer-checked\:visible {
1849
+ &:is(:where(.peer):checked ~ *) {
1850
+ visibility: visible;
1851
+ }
1852
+ }
1853
+ .checked\:bg-\(--color-bg-accent\) {
1854
+ &:checked {
1855
+ background-color: var(--color-bg-accent);
1856
+ }
1857
+ }
1858
+ .checked\:bg-\(--color-bg-danger\) {
1859
+ &:checked {
1860
+ background-color: var(--color-bg-danger);
1861
+ }
1862
+ }
1863
+ .checked\:bg-\(--color-bg-default\) {
1864
+ &:checked {
1865
+ background-color: var(--color-bg-default);
1866
+ }
1867
+ }
1868
+ .checked\:bg-\(--color-bg-filled-accent\) {
1869
+ &:checked {
1870
+ background-color: var(--color-bg-filled-accent);
1871
+ }
1872
+ }
1873
+ .checked\:bg-\(--color-bg-filled-danger\) {
1874
+ &:checked {
1875
+ background-color: var(--color-bg-filled-danger);
1876
+ }
1877
+ }
1878
+ .checked\:bg-\(--color-bg-filled-default\) {
1879
+ &:checked {
1880
+ background-color: var(--color-bg-filled-default);
1881
+ }
1882
+ }
1883
+ .checked\:bg-\(--color-bg-filled-info\) {
1884
+ &:checked {
1885
+ background-color: var(--color-bg-filled-info);
1886
+ }
1887
+ }
1888
+ .checked\:bg-\(--color-bg-filled-link\) {
1889
+ &:checked {
1890
+ background-color: var(--color-bg-filled-link);
1891
+ }
1892
+ }
1893
+ .checked\:bg-\(--color-bg-filled-primary\) {
1894
+ &:checked {
1895
+ background-color: var(--color-bg-filled-primary);
1896
+ }
1897
+ }
1898
+ .checked\:bg-\(--color-bg-filled-secondary\) {
1899
+ &:checked {
1900
+ background-color: var(--color-bg-filled-secondary);
1901
+ }
1902
+ }
1903
+ .checked\:bg-\(--color-bg-filled-success\) {
1904
+ &:checked {
1905
+ background-color: var(--color-bg-filled-success);
1906
+ }
1907
+ }
1908
+ .checked\:bg-\(--color-bg-filled-tertiary\) {
1909
+ &:checked {
1910
+ background-color: var(--color-bg-filled-tertiary);
1911
+ }
1912
+ }
1913
+ .checked\:bg-\(--color-bg-filled-warning\) {
1914
+ &:checked {
1915
+ background-color: var(--color-bg-filled-warning);
1916
+ }
1917
+ }
1918
+ .checked\:bg-\(--color-bg-info\) {
1919
+ &:checked {
1920
+ background-color: var(--color-bg-info);
1921
+ }
1922
+ }
1923
+ .checked\:bg-\(--color-bg-link\) {
1924
+ &:checked {
1925
+ background-color: var(--color-bg-link);
1926
+ }
1927
+ }
1928
+ .checked\:bg-\(--color-bg-primary\) {
1929
+ &:checked {
1930
+ background-color: var(--color-bg-primary);
1931
+ }
1932
+ }
1933
+ .checked\:bg-\(--color-bg-secondary\) {
1934
+ &:checked {
1935
+ background-color: var(--color-bg-secondary);
1936
+ }
1937
+ }
1938
+ .checked\:bg-\(--color-bg-success\) {
1939
+ &:checked {
1940
+ background-color: var(--color-bg-success);
1941
+ }
1942
+ }
1943
+ .checked\:bg-\(--color-bg-tertiary\) {
1944
+ &:checked {
1945
+ background-color: var(--color-bg-tertiary);
1946
+ }
1947
+ }
1948
+ .checked\:bg-\(--color-bg-warning\) {
1949
+ &:checked {
1950
+ background-color: var(--color-bg-warning);
1951
+ }
1952
+ }
1953
+ .checked\:bg-transparent {
1954
+ &:checked {
1955
+ background-color: transparent;
1956
+ }
1957
+ }
1473
1958
  .hover\:scale-105 {
1474
1959
  &:hover {
1475
1960
  @media (hover: hover) {
@@ -1480,159 +1965,164 @@
1480
1965
  }
1481
1966
  }
1482
1967
  }
1483
- .hover\:border {
1968
+ .hover\:border-green-600 {
1969
+ &:hover {
1970
+ @media (hover: hover) {
1971
+ border-color: var(--color-green-600);
1972
+ }
1973
+ }
1974
+ }
1975
+ .hover\:bg-\(--color-bg-filled-hover-accent\) {
1484
1976
  &:hover {
1485
1977
  @media (hover: hover) {
1486
- border-style: var(--tw-border-style);
1487
- border-width: 1px;
1978
+ background-color: var(--color-bg-filled-hover-accent);
1488
1979
  }
1489
1980
  }
1490
1981
  }
1491
- .hover\:border-none {
1982
+ .hover\:bg-\(--color-bg-filled-hover-danger\) {
1492
1983
  &:hover {
1493
1984
  @media (hover: hover) {
1494
- --tw-border-style: none;
1495
- border-style: none;
1985
+ background-color: var(--color-bg-filled-hover-danger);
1496
1986
  }
1497
1987
  }
1498
1988
  }
1499
- .hover\:bg-\(--background-color-hover-accent\) {
1989
+ .hover\:bg-\(--color-bg-filled-hover-default\) {
1500
1990
  &:hover {
1501
1991
  @media (hover: hover) {
1502
- background-color: var(--background-color-hover-accent);
1992
+ background-color: var(--color-bg-filled-hover-default);
1503
1993
  }
1504
1994
  }
1505
1995
  }
1506
- .hover\:bg-\(--background-color-hover-danger\) {
1996
+ .hover\:bg-\(--color-bg-filled-hover-info\) {
1507
1997
  &:hover {
1508
1998
  @media (hover: hover) {
1509
- background-color: var(--background-color-hover-danger);
1999
+ background-color: var(--color-bg-filled-hover-info);
1510
2000
  }
1511
2001
  }
1512
2002
  }
1513
- .hover\:bg-\(--background-color-hover-default\) {
2003
+ .hover\:bg-\(--color-bg-filled-hover-link\) {
1514
2004
  &:hover {
1515
2005
  @media (hover: hover) {
1516
- background-color: var(--background-color-hover-default);
2006
+ background-color: var(--color-bg-filled-hover-link);
1517
2007
  }
1518
2008
  }
1519
2009
  }
1520
- .hover\:bg-\(--background-color-hover-info\) {
2010
+ .hover\:bg-\(--color-bg-filled-hover-primary\) {
1521
2011
  &:hover {
1522
2012
  @media (hover: hover) {
1523
- background-color: var(--background-color-hover-info);
2013
+ background-color: var(--color-bg-filled-hover-primary);
1524
2014
  }
1525
2015
  }
1526
2016
  }
1527
- .hover\:bg-\(--background-color-hover-link\) {
2017
+ .hover\:bg-\(--color-bg-filled-hover-secondary\) {
1528
2018
  &:hover {
1529
2019
  @media (hover: hover) {
1530
- background-color: var(--background-color-hover-link);
2020
+ background-color: var(--color-bg-filled-hover-secondary);
1531
2021
  }
1532
2022
  }
1533
2023
  }
1534
- .hover\:bg-\(--background-color-hover-primary\) {
2024
+ .hover\:bg-\(--color-bg-filled-hover-success\) {
1535
2025
  &:hover {
1536
2026
  @media (hover: hover) {
1537
- background-color: var(--background-color-hover-primary);
2027
+ background-color: var(--color-bg-filled-hover-success);
1538
2028
  }
1539
2029
  }
1540
2030
  }
1541
- .hover\:bg-\(--background-color-hover-secondary\) {
2031
+ .hover\:bg-\(--color-bg-filled-hover-tertiary\) {
1542
2032
  &:hover {
1543
2033
  @media (hover: hover) {
1544
- background-color: var(--background-color-hover-secondary);
2034
+ background-color: var(--color-bg-filled-hover-tertiary);
1545
2035
  }
1546
2036
  }
1547
2037
  }
1548
- .hover\:bg-\(--background-color-hover-success\) {
2038
+ .hover\:bg-\(--color-bg-filled-hover-warning\) {
1549
2039
  &:hover {
1550
2040
  @media (hover: hover) {
1551
- background-color: var(--background-color-hover-success);
2041
+ background-color: var(--color-bg-filled-hover-warning);
1552
2042
  }
1553
2043
  }
1554
2044
  }
1555
- .hover\:bg-\(--background-color-hover-tertiary\) {
2045
+ .hover\:bg-\(--color-bg-hover-accent\) {
1556
2046
  &:hover {
1557
2047
  @media (hover: hover) {
1558
- background-color: var(--background-color-hover-tertiary);
2048
+ background-color: var(--color-bg-hover-accent);
1559
2049
  }
1560
2050
  }
1561
2051
  }
1562
- .hover\:bg-\(--background-color-hover-warning\) {
2052
+ .hover\:bg-\(--color-bg-hover-danger\) {
1563
2053
  &:hover {
1564
2054
  @media (hover: hover) {
1565
- background-color: var(--background-color-hover-warning);
2055
+ background-color: var(--color-bg-hover-danger);
1566
2056
  }
1567
2057
  }
1568
2058
  }
1569
- .hover\:bg-\(--filled-background-color-hover-accent\) {
2059
+ .hover\:bg-\(--color-bg-hover-default\) {
1570
2060
  &:hover {
1571
2061
  @media (hover: hover) {
1572
- background-color: var(--filled-background-color-hover-accent);
2062
+ background-color: var(--color-bg-hover-default);
1573
2063
  }
1574
2064
  }
1575
2065
  }
1576
- .hover\:bg-\(--filled-background-color-hover-danger\) {
2066
+ .hover\:bg-\(--color-bg-hover-info\) {
1577
2067
  &:hover {
1578
2068
  @media (hover: hover) {
1579
- background-color: var(--filled-background-color-hover-danger);
2069
+ background-color: var(--color-bg-hover-info);
1580
2070
  }
1581
2071
  }
1582
2072
  }
1583
- .hover\:bg-\(--filled-background-color-hover-default\) {
2073
+ .hover\:bg-\(--color-bg-hover-link\) {
1584
2074
  &:hover {
1585
2075
  @media (hover: hover) {
1586
- background-color: var(--filled-background-color-hover-default);
2076
+ background-color: var(--color-bg-hover-link);
1587
2077
  }
1588
2078
  }
1589
2079
  }
1590
- .hover\:bg-\(--filled-background-color-hover-info\) {
2080
+ .hover\:bg-\(--color-bg-hover-primary\) {
1591
2081
  &:hover {
1592
2082
  @media (hover: hover) {
1593
- background-color: var(--filled-background-color-hover-info);
2083
+ background-color: var(--color-bg-hover-primary);
1594
2084
  }
1595
2085
  }
1596
2086
  }
1597
- .hover\:bg-\(--filled-background-color-hover-link\) {
2087
+ .hover\:bg-\(--color-bg-hover-secondary\) {
1598
2088
  &:hover {
1599
2089
  @media (hover: hover) {
1600
- background-color: var(--filled-background-color-hover-link);
2090
+ background-color: var(--color-bg-hover-secondary);
1601
2091
  }
1602
2092
  }
1603
2093
  }
1604
- .hover\:bg-\(--filled-background-color-hover-primary\) {
2094
+ .hover\:bg-\(--color-bg-hover-success\) {
1605
2095
  &:hover {
1606
2096
  @media (hover: hover) {
1607
- background-color: var(--filled-background-color-hover-primary);
2097
+ background-color: var(--color-bg-hover-success);
1608
2098
  }
1609
2099
  }
1610
2100
  }
1611
- .hover\:bg-\(--filled-background-color-hover-secondary\) {
2101
+ .hover\:bg-\(--color-bg-hover-tertiary\) {
1612
2102
  &:hover {
1613
2103
  @media (hover: hover) {
1614
- background-color: var(--filled-background-color-hover-secondary);
2104
+ background-color: var(--color-bg-hover-tertiary);
1615
2105
  }
1616
2106
  }
1617
2107
  }
1618
- .hover\:bg-\(--filled-background-color-hover-success\) {
2108
+ .hover\:bg-\(--color-bg-hover-warning\) {
1619
2109
  &:hover {
1620
2110
  @media (hover: hover) {
1621
- background-color: var(--filled-background-color-hover-success);
2111
+ background-color: var(--color-bg-hover-warning);
1622
2112
  }
1623
2113
  }
1624
2114
  }
1625
- .hover\:bg-\(--filled-background-color-hover-tertiary\) {
2115
+ .hover\:bg-purple-700 {
1626
2116
  &:hover {
1627
2117
  @media (hover: hover) {
1628
- background-color: var(--filled-background-color-hover-tertiary);
2118
+ background-color: var(--color-purple-700);
1629
2119
  }
1630
2120
  }
1631
2121
  }
1632
- .hover\:bg-\(--filled-background-color-hover-warning\) {
2122
+ .hover\:bg-red-200 {
1633
2123
  &:hover {
1634
2124
  @media (hover: hover) {
1635
- background-color: var(--filled-background-color-hover-warning);
2125
+ background-color: var(--color-red-200);
1636
2126
  }
1637
2127
  }
1638
2128
  }
@@ -1650,6 +2140,13 @@
1650
2140
  }
1651
2141
  }
1652
2142
  }
2143
+ .hover\:text-indigo-50 {
2144
+ &:hover {
2145
+ @media (hover: hover) {
2146
+ color: var(--color-indigo-50);
2147
+ }
2148
+ }
2149
+ }
1653
2150
  .hover\:underline {
1654
2151
  &:hover {
1655
2152
  @media (hover: hover) {
@@ -1657,6 +2154,13 @@
1657
2154
  }
1658
2155
  }
1659
2156
  }
2157
+ .hover\:opacity-80 {
2158
+ &:hover {
2159
+ @media (hover: hover) {
2160
+ opacity: 80%;
2161
+ }
2162
+ }
2163
+ }
1660
2164
  .hover\:shadow-lg {
1661
2165
  &:hover {
1662
2166
  @media (hover: hover) {
@@ -1705,14 +2209,6 @@
1705
2209
  }
1706
2210
  }
1707
2211
  }
1708
- .hover\:ring-0 {
1709
- &:hover {
1710
- @media (hover: hover) {
1711
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1712
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1713
- }
1714
- }
1715
- }
1716
2212
  .hover\:ring-inset {
1717
2213
  &:hover {
1718
2214
  @media (hover: hover) {
@@ -1720,116 +2216,230 @@
1720
2216
  }
1721
2217
  }
1722
2218
  }
1723
- .active\:border {
2219
+ .focus-visible\:outline-2 {
2220
+ &:focus-visible {
2221
+ outline-style: var(--tw-outline-style);
2222
+ outline-width: 2px;
2223
+ }
2224
+ }
2225
+ .focus-visible\:outline-offset-2 {
2226
+ &:focus-visible {
2227
+ outline-offset: 2px;
2228
+ }
2229
+ }
2230
+ .focus-visible\:outline-\(--color-border-accent\) {
2231
+ &:focus-visible {
2232
+ outline-color: var(--color-border-accent);
2233
+ }
2234
+ }
2235
+ .focus-visible\:outline-\(--color-border-danger\) {
2236
+ &:focus-visible {
2237
+ outline-color: var(--color-border-danger);
2238
+ }
2239
+ }
2240
+ .focus-visible\:outline-\(--color-border-default\) {
2241
+ &:focus-visible {
2242
+ outline-color: var(--color-border-default);
2243
+ }
2244
+ }
2245
+ .focus-visible\:outline-\(--color-border-filled-accent\) {
2246
+ &:focus-visible {
2247
+ outline-color: var(--color-border-filled-accent);
2248
+ }
2249
+ }
2250
+ .focus-visible\:outline-\(--color-border-filled-danger\) {
2251
+ &:focus-visible {
2252
+ outline-color: var(--color-border-filled-danger);
2253
+ }
2254
+ }
2255
+ .focus-visible\:outline-\(--color-border-filled-default\) {
2256
+ &:focus-visible {
2257
+ outline-color: var(--color-border-filled-default);
2258
+ }
2259
+ }
2260
+ .focus-visible\:outline-\(--color-border-filled-info\) {
2261
+ &:focus-visible {
2262
+ outline-color: var(--color-border-filled-info);
2263
+ }
2264
+ }
2265
+ .focus-visible\:outline-\(--color-border-filled-link\) {
2266
+ &:focus-visible {
2267
+ outline-color: var(--color-border-filled-link);
2268
+ }
2269
+ }
2270
+ .focus-visible\:outline-\(--color-border-filled-primary\) {
2271
+ &:focus-visible {
2272
+ outline-color: var(--color-border-filled-primary);
2273
+ }
2274
+ }
2275
+ .focus-visible\:outline-\(--color-border-filled-secondary\) {
2276
+ &:focus-visible {
2277
+ outline-color: var(--color-border-filled-secondary);
2278
+ }
2279
+ }
2280
+ .focus-visible\:outline-\(--color-border-filled-success\) {
2281
+ &:focus-visible {
2282
+ outline-color: var(--color-border-filled-success);
2283
+ }
2284
+ }
2285
+ .focus-visible\:outline-\(--color-border-filled-tertiary\) {
2286
+ &:focus-visible {
2287
+ outline-color: var(--color-border-filled-tertiary);
2288
+ }
2289
+ }
2290
+ .focus-visible\:outline-\(--color-border-filled-warning\) {
2291
+ &:focus-visible {
2292
+ outline-color: var(--color-border-filled-warning);
2293
+ }
2294
+ }
2295
+ .focus-visible\:outline-\(--color-border-info\) {
2296
+ &:focus-visible {
2297
+ outline-color: var(--color-border-info);
2298
+ }
2299
+ }
2300
+ .focus-visible\:outline-\(--color-border-link\) {
2301
+ &:focus-visible {
2302
+ outline-color: var(--color-border-link);
2303
+ }
2304
+ }
2305
+ .focus-visible\:outline-\(--color-border-primary\) {
2306
+ &:focus-visible {
2307
+ outline-color: var(--color-border-primary);
2308
+ }
2309
+ }
2310
+ .focus-visible\:outline-\(--color-border-secondary\) {
2311
+ &:focus-visible {
2312
+ outline-color: var(--color-border-secondary);
2313
+ }
2314
+ }
2315
+ .focus-visible\:outline-\(--color-border-success\) {
2316
+ &:focus-visible {
2317
+ outline-color: var(--color-border-success);
2318
+ }
2319
+ }
2320
+ .focus-visible\:outline-\(--color-border-tertiary\) {
2321
+ &:focus-visible {
2322
+ outline-color: var(--color-border-tertiary);
2323
+ }
2324
+ }
2325
+ .focus-visible\:outline-\(--color-border-warning\) {
2326
+ &:focus-visible {
2327
+ outline-color: var(--color-border-warning);
2328
+ }
2329
+ }
2330
+ .focus-visible\:outline-transparent {
2331
+ &:focus-visible {
2332
+ outline-color: transparent;
2333
+ }
2334
+ }
2335
+ .active\:border-green-700 {
1724
2336
  &:active {
1725
- border-style: var(--tw-border-style);
1726
- border-width: 1px;
2337
+ border-color: var(--color-green-700);
1727
2338
  }
1728
2339
  }
1729
- .active\:border-none {
2340
+ .active\:bg-\(--color-bg-active-accent\) {
1730
2341
  &:active {
1731
- --tw-border-style: none;
1732
- border-style: none;
2342
+ background-color: var(--color-bg-active-accent);
1733
2343
  }
1734
2344
  }
1735
- .active\:bg-\(--background-color-active-accent\) {
2345
+ .active\:bg-\(--color-bg-active-danger\) {
1736
2346
  &:active {
1737
- background-color: var(--background-color-active-accent);
2347
+ background-color: var(--color-bg-active-danger);
1738
2348
  }
1739
2349
  }
1740
- .active\:bg-\(--background-color-active-danger\) {
2350
+ .active\:bg-\(--color-bg-active-default\) {
1741
2351
  &:active {
1742
- background-color: var(--background-color-active-danger);
2352
+ background-color: var(--color-bg-active-default);
1743
2353
  }
1744
2354
  }
1745
- .active\:bg-\(--background-color-active-default\) {
2355
+ .active\:bg-\(--color-bg-active-info\) {
1746
2356
  &:active {
1747
- background-color: var(--background-color-active-default);
2357
+ background-color: var(--color-bg-active-info);
1748
2358
  }
1749
2359
  }
1750
- .active\:bg-\(--background-color-active-info\) {
2360
+ .active\:bg-\(--color-bg-active-link\) {
1751
2361
  &:active {
1752
- background-color: var(--background-color-active-info);
2362
+ background-color: var(--color-bg-active-link);
1753
2363
  }
1754
2364
  }
1755
- .active\:bg-\(--background-color-active-link\) {
2365
+ .active\:bg-\(--color-bg-active-primary\) {
1756
2366
  &:active {
1757
- background-color: var(--background-color-active-link);
2367
+ background-color: var(--color-bg-active-primary);
1758
2368
  }
1759
2369
  }
1760
- .active\:bg-\(--background-color-active-primary\) {
2370
+ .active\:bg-\(--color-bg-active-secondary\) {
1761
2371
  &:active {
1762
- background-color: var(--background-color-active-primary);
2372
+ background-color: var(--color-bg-active-secondary);
1763
2373
  }
1764
2374
  }
1765
- .active\:bg-\(--background-color-active-secondary\) {
2375
+ .active\:bg-\(--color-bg-active-success\) {
1766
2376
  &:active {
1767
- background-color: var(--background-color-active-secondary);
2377
+ background-color: var(--color-bg-active-success);
1768
2378
  }
1769
2379
  }
1770
- .active\:bg-\(--background-color-active-success\) {
2380
+ .active\:bg-\(--color-bg-active-tertiary\) {
1771
2381
  &:active {
1772
- background-color: var(--background-color-active-success);
2382
+ background-color: var(--color-bg-active-tertiary);
1773
2383
  }
1774
2384
  }
1775
- .active\:bg-\(--background-color-active-tertiary\) {
2385
+ .active\:bg-\(--color-bg-active-warning\) {
1776
2386
  &:active {
1777
- background-color: var(--background-color-active-tertiary);
2387
+ background-color: var(--color-bg-active-warning);
1778
2388
  }
1779
2389
  }
1780
- .active\:bg-\(--background-color-active-warning\) {
2390
+ .active\:bg-\(--color-bg-filled-active-accent\) {
1781
2391
  &:active {
1782
- background-color: var(--background-color-active-warning);
2392
+ background-color: var(--color-bg-filled-active-accent);
1783
2393
  }
1784
2394
  }
1785
- .active\:bg-\(--filled-background-color-active-accent\) {
2395
+ .active\:bg-\(--color-bg-filled-active-danger\) {
1786
2396
  &:active {
1787
- background-color: var(--filled-background-color-active-accent);
2397
+ background-color: var(--color-bg-filled-active-danger);
1788
2398
  }
1789
2399
  }
1790
- .active\:bg-\(--filled-background-color-active-danger\) {
2400
+ .active\:bg-\(--color-bg-filled-active-default\) {
1791
2401
  &:active {
1792
- background-color: var(--filled-background-color-active-danger);
2402
+ background-color: var(--color-bg-filled-active-default);
1793
2403
  }
1794
2404
  }
1795
- .active\:bg-\(--filled-background-color-active-default\) {
2405
+ .active\:bg-\(--color-bg-filled-active-info\) {
1796
2406
  &:active {
1797
- background-color: var(--filled-background-color-active-default);
2407
+ background-color: var(--color-bg-filled-active-info);
1798
2408
  }
1799
2409
  }
1800
- .active\:bg-\(--filled-background-color-active-info\) {
2410
+ .active\:bg-\(--color-bg-filled-active-link\) {
1801
2411
  &:active {
1802
- background-color: var(--filled-background-color-active-info);
2412
+ background-color: var(--color-bg-filled-active-link);
1803
2413
  }
1804
2414
  }
1805
- .active\:bg-\(--filled-background-color-active-link\) {
2415
+ .active\:bg-\(--color-bg-filled-active-primary\) {
1806
2416
  &:active {
1807
- background-color: var(--filled-background-color-active-link);
2417
+ background-color: var(--color-bg-filled-active-primary);
1808
2418
  }
1809
2419
  }
1810
- .active\:bg-\(--filled-background-color-active-primary\) {
2420
+ .active\:bg-\(--color-bg-filled-active-secondary\) {
1811
2421
  &:active {
1812
- background-color: var(--filled-background-color-active-primary);
2422
+ background-color: var(--color-bg-filled-active-secondary);
1813
2423
  }
1814
2424
  }
1815
- .active\:bg-\(--filled-background-color-active-secondary\) {
2425
+ .active\:bg-\(--color-bg-filled-active-success\) {
1816
2426
  &:active {
1817
- background-color: var(--filled-background-color-active-secondary);
2427
+ background-color: var(--color-bg-filled-active-success);
1818
2428
  }
1819
2429
  }
1820
- .active\:bg-\(--filled-background-color-active-success\) {
2430
+ .active\:bg-\(--color-bg-filled-active-tertiary\) {
1821
2431
  &:active {
1822
- background-color: var(--filled-background-color-active-success);
2432
+ background-color: var(--color-bg-filled-active-tertiary);
1823
2433
  }
1824
2434
  }
1825
- .active\:bg-\(--filled-background-color-active-tertiary\) {
2435
+ .active\:bg-\(--color-bg-filled-active-warning\) {
1826
2436
  &:active {
1827
- background-color: var(--filled-background-color-active-tertiary);
2437
+ background-color: var(--color-bg-filled-active-warning);
1828
2438
  }
1829
2439
  }
1830
- .active\:bg-\(--filled-background-color-active-warning\) {
2440
+ .active\:bg-red-300 {
1831
2441
  &:active {
1832
- background-color: var(--filled-background-color-active-warning);
2442
+ background-color: var(--color-red-300);
1833
2443
  }
1834
2444
  }
1835
2445
  .active\:bg-transparent {
@@ -1848,17 +2458,16 @@
1848
2458
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1849
2459
  }
1850
2460
  }
1851
- .active\:ring-0 {
1852
- &:active {
1853
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1854
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1855
- }
1856
- }
1857
2461
  .active\:ring-inset {
1858
2462
  &:active {
1859
2463
  --tw-ring-inset: inset;
1860
2464
  }
1861
2465
  }
2466
+ .has-\[input\]\:cursor-pointer {
2467
+ &:has(*:is(input)) {
2468
+ cursor: pointer;
2469
+ }
2470
+ }
1862
2471
  .max-xl\:hidden {
1863
2472
  @media (width < 80rem) {
1864
2473
  display: none;
@@ -1879,11 +2488,6 @@
1879
2488
  flex-direction: column;
1880
2489
  }
1881
2490
  }
1882
- .max-lg\:gap-1 {
1883
- @media (width < 64rem) {
1884
- gap: calc(var(--spacing) * 1);
1885
- }
1886
- }
1887
2491
  .max-lg\:gap-2 {
1888
2492
  @media (width < 64rem) {
1889
2493
  gap: calc(var(--spacing) * 2);
@@ -1904,36 +2508,6 @@
1904
2508
  gap: calc(var(--spacing) * 5);
1905
2509
  }
1906
2510
  }
1907
- .max-lg\:gap-6 {
1908
- @media (width < 64rem) {
1909
- gap: calc(var(--spacing) * 6);
1910
- }
1911
- }
1912
- .max-lg\:gap-7 {
1913
- @media (width < 64rem) {
1914
- gap: calc(var(--spacing) * 7);
1915
- }
1916
- }
1917
- .max-lg\:gap-8 {
1918
- @media (width < 64rem) {
1919
- gap: calc(var(--spacing) * 8);
1920
- }
1921
- }
1922
- .max-lg\:gap-9 {
1923
- @media (width < 64rem) {
1924
- gap: calc(var(--spacing) * 9);
1925
- }
1926
- }
1927
- .max-lg\:px-2 {
1928
- @media (width < 64rem) {
1929
- padding-inline: calc(var(--spacing) * 2);
1930
- }
1931
- }
1932
- .max-lg\:px-3 {
1933
- @media (width < 64rem) {
1934
- padding-inline: calc(var(--spacing) * 3);
1935
- }
1936
- }
1937
2511
  .max-lg\:px-4 {
1938
2512
  @media (width < 64rem) {
1939
2513
  padding-inline: calc(var(--spacing) * 4);
@@ -1959,24 +2533,24 @@
1959
2533
  padding-inline: calc(var(--spacing) * 8);
1960
2534
  }
1961
2535
  }
1962
- .max-lg\:py-2 {
2536
+ .max-lg\:py-4 {
1963
2537
  @media (width < 64rem) {
1964
- padding-block: calc(var(--spacing) * 2);
2538
+ padding-block: calc(var(--spacing) * 4);
1965
2539
  }
1966
2540
  }
1967
- .max-lg\:py-3 {
2541
+ .max-lg\:py-5 {
1968
2542
  @media (width < 64rem) {
1969
- padding-block: calc(var(--spacing) * 3);
2543
+ padding-block: calc(var(--spacing) * 5);
1970
2544
  }
1971
2545
  }
1972
- .max-lg\:py-4 {
2546
+ .max-lg\:py-6 {
1973
2547
  @media (width < 64rem) {
1974
- padding-block: calc(var(--spacing) * 4);
2548
+ padding-block: calc(var(--spacing) * 6);
1975
2549
  }
1976
2550
  }
1977
- .max-lg\:py-5 {
2551
+ .max-lg\:py-7 {
1978
2552
  @media (width < 64rem) {
1979
- padding-block: calc(var(--spacing) * 5);
2553
+ padding-block: calc(var(--spacing) * 7);
1980
2554
  }
1981
2555
  }
1982
2556
  .max-lg\:py-14 {
@@ -2035,9 +2609,9 @@
2035
2609
  flex-direction: column;
2036
2610
  }
2037
2611
  }
2038
- .max-md\:gap-2 {
2612
+ .max-md\:gap-3 {
2039
2613
  @media (width < 48rem) {
2040
- gap: calc(var(--spacing) * 2);
2614
+ gap: calc(var(--spacing) * 3);
2041
2615
  }
2042
2616
  }
2043
2617
  .max-md\:gap-4 {
@@ -2045,16 +2619,6 @@
2045
2619
  gap: calc(var(--spacing) * 4);
2046
2620
  }
2047
2621
  }
2048
- .max-md\:gap-6 {
2049
- @media (width < 48rem) {
2050
- gap: calc(var(--spacing) * 6);
2051
- }
2052
- }
2053
- .max-md\:gap-8 {
2054
- @media (width < 48rem) {
2055
- gap: calc(var(--spacing) * 8);
2056
- }
2057
- }
2058
2622
  .max-md\:px-3 {
2059
2623
  @media (width < 48rem) {
2060
2624
  padding-inline: calc(var(--spacing) * 3);
@@ -2085,9 +2649,9 @@
2085
2649
  padding-block: calc(var(--spacing) * 3);
2086
2650
  }
2087
2651
  }
2088
- .max-md\:py-4 {
2652
+ .max-md\:py-5 {
2089
2653
  @media (width < 48rem) {
2090
- padding-block: calc(var(--spacing) * 4);
2654
+ padding-block: calc(var(--spacing) * 5);
2091
2655
  }
2092
2656
  }
2093
2657
  .max-md\:py-6 {
@@ -2151,16 +2715,36 @@
2151
2715
  grid-template-columns: repeat(2, minmax(0, 1fr));
2152
2716
  }
2153
2717
  }
2718
+ .md\:grid-cols-2 {
2719
+ @media (width >= 48rem) {
2720
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2721
+ }
2722
+ }
2154
2723
  .md\:grid-cols-3 {
2155
2724
  @media (width >= 48rem) {
2156
2725
  grid-template-columns: repeat(3, minmax(0, 1fr));
2157
2726
  }
2158
2727
  }
2728
+ .md\:grid-cols-4 {
2729
+ @media (width >= 48rem) {
2730
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2731
+ }
2732
+ }
2159
2733
  .lg\:grid-cols-4 {
2160
2734
  @media (width >= 64rem) {
2161
2735
  grid-template-columns: repeat(4, minmax(0, 1fr));
2162
2736
  }
2163
2737
  }
2738
+ .lg\:grid-cols-5 {
2739
+ @media (width >= 64rem) {
2740
+ grid-template-columns: repeat(5, minmax(0, 1fr));
2741
+ }
2742
+ }
2743
+ .lg\:grid-cols-6 {
2744
+ @media (width >= 64rem) {
2745
+ grid-template-columns: repeat(6, minmax(0, 1fr));
2746
+ }
2747
+ }
2164
2748
  }
2165
2749
  @property --tw-rotate-x {
2166
2750
  syntax: "*";
@@ -2197,6 +2781,48 @@
2197
2781
  inherits: false;
2198
2782
  initial-value: solid;
2199
2783
  }
2784
+ @property --tw-gradient-position {
2785
+ syntax: "*";
2786
+ inherits: false;
2787
+ }
2788
+ @property --tw-gradient-from {
2789
+ syntax: "<color>";
2790
+ inherits: false;
2791
+ initial-value: #0000;
2792
+ }
2793
+ @property --tw-gradient-via {
2794
+ syntax: "<color>";
2795
+ inherits: false;
2796
+ initial-value: #0000;
2797
+ }
2798
+ @property --tw-gradient-to {
2799
+ syntax: "<color>";
2800
+ inherits: false;
2801
+ initial-value: #0000;
2802
+ }
2803
+ @property --tw-gradient-stops {
2804
+ syntax: "*";
2805
+ inherits: false;
2806
+ }
2807
+ @property --tw-gradient-via-stops {
2808
+ syntax: "*";
2809
+ inherits: false;
2810
+ }
2811
+ @property --tw-gradient-from-position {
2812
+ syntax: "<length-percentage>";
2813
+ inherits: false;
2814
+ initial-value: 0%;
2815
+ }
2816
+ @property --tw-gradient-via-position {
2817
+ syntax: "<length-percentage>";
2818
+ inherits: false;
2819
+ initial-value: 50%;
2820
+ }
2821
+ @property --tw-gradient-to-position {
2822
+ syntax: "<length-percentage>";
2823
+ inherits: false;
2824
+ initial-value: 100%;
2825
+ }
2200
2826
  @property --tw-leading {
2201
2827
  syntax: "*";
2202
2828
  inherits: false;
@@ -2376,6 +3002,15 @@
2376
3002
  --tw-skew-y: skewY(0);
2377
3003
  --tw-space-y-reverse: 0;
2378
3004
  --tw-border-style: solid;
3005
+ --tw-gradient-position: initial;
3006
+ --tw-gradient-from: #0000;
3007
+ --tw-gradient-via: #0000;
3008
+ --tw-gradient-to: #0000;
3009
+ --tw-gradient-stops: initial;
3010
+ --tw-gradient-via-stops: initial;
3011
+ --tw-gradient-from-position: 0%;
3012
+ --tw-gradient-via-position: 50%;
3013
+ --tw-gradient-to-position: 100%;
2379
3014
  --tw-leading: initial;
2380
3015
  --tw-font-weight: initial;
2381
3016
  --tw-tracking: initial;