@vaneui/md 0.0.3-alpha.20250807150626.4231a8a → 0.3.1-alpha.20251208195412.8f1e11c

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.
@@ -1,143 +1,190 @@
1
1
 
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
- @layer theme;
5
4
  /* Import @vaneui/ui base styles */
6
5
  @theme {
7
6
  /* 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);
7
+ --color-text-default: var(--color-gray-900);
8
+ --color-text-primary: var(--color-blue-600);
9
+ --color-text-secondary: var(--color-gray-600);
10
+ --color-text-tertiary: var(--color-gray-500);
11
+ --color-text-link: var(--color-blue-600);
12
+ --color-text-accent: var(--color-rose-700);
13
+ --color-text-success: var(--color-emerald-600);
14
+ --color-text-danger: var(--color-red-600);
15
+ --color-text-warning: var(--color-amber-600);
16
+ --color-text-info: var(--color-cyan-600);
18
17
 
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);
18
+ /* Filled Text Colors */
19
+ --color-text-filled-default: var(--color-white);
20
+ --color-text-filled-primary: var(--color-blue-100);
21
+ --color-text-filled-secondary: var(--color-gray-200);
22
+ --color-text-filled-tertiary: var(--color-gray-300);
23
+ --color-text-filled-link: var(--color-blue-100);
24
+ --color-text-filled-accent: var(--color-rose-100);
25
+ --color-text-filled-success: var(--color-emerald-100);
26
+ --color-text-filled-danger: var(--color-red-100);
27
+ --color-text-filled-warning: var(--color-amber-100);
28
+ --color-text-filled-info: var(--color-cyan-100);
29
+ --color-text-filled-transparent: transparent;
30
30
 
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);
31
+ /* UI Background Colors */
32
+ --color-bg-default: var(--color-white);
33
+ --color-bg-primary: var(--color-blue-50);
34
+ --color-bg-secondary: var(--color-gray-50);
35
+ --color-bg-tertiary: var(--color-gray-100);
36
+ --color-bg-accent: var(--color-rose-50);
37
+ --color-bg-success: var(--color-emerald-50);
38
+ --color-bg-danger: var(--color-red-50);
39
+ --color-bg-warning: var(--color-amber-50);
40
+ --color-bg-info: var(--color-cyan-50);
41
+ --color-bg-link: var(--color-blue-50);
42
42
 
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);
43
+ /* UI Background Hover Colors */
44
+ --color-bg-hover-default: var(--color-gray-50);
45
+ --color-bg-hover-primary: var(--color-blue-100);
46
+ --color-bg-hover-secondary: var(--color-gray-100);
47
+ --color-bg-hover-tertiary: var(--color-gray-200);
48
+ --color-bg-hover-accent: var(--color-rose-100);
49
+ --color-bg-hover-success: var(--color-emerald-100);
50
+ --color-bg-hover-danger: var(--color-red-100);
51
+ --color-bg-hover-warning: var(--color-amber-100);
52
+ --color-bg-hover-info: var(--color-cyan-100);
53
+ --color-bg-hover-link: var(--color-blue-100);
54
54
 
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);
55
+ /* UI Background Active Colors */
56
+ --color-bg-active-default: var(--color-gray-100);
57
+ --color-bg-active-primary: var(--color-blue-200);
58
+ --color-bg-active-secondary: var(--color-gray-200);
59
+ --color-bg-active-tertiary: var(--color-gray-300);
60
+ --color-bg-active-accent: var(--color-rose-200);
61
+ --color-bg-active-success: var(--color-emerald-200);
62
+ --color-bg-active-danger: var(--color-red-200);
63
+ --color-bg-active-warning: var(--color-amber-200);
64
+ --color-bg-active-info: var(--color-cyan-200);
65
+ --color-bg-active-link: var(--color-blue-200);
66
66
 
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);
67
+ /* Filled UI Background Colors */
68
+ --color-bg-filled-default: var(--color-gray-800);
69
+ --color-bg-filled-primary: var(--color-blue-600);
70
+ --color-bg-filled-secondary: var(--color-gray-600);
71
+ --color-bg-filled-tertiary: var(--color-gray-500);
72
+ --color-bg-filled-accent: var(--color-rose-600);
73
+ --color-bg-filled-success: var(--color-emerald-600);
74
+ --color-bg-filled-danger: var(--color-red-600);
75
+ --color-bg-filled-warning: var(--color-amber-600);
76
+ --color-bg-filled-info: var(--color-cyan-600);
77
+ --color-bg-filled-link: var(--color-blue-600);
78
78
 
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);
79
+ /* Filled UI Hover Background Colors */
80
+ --color-bg-filled-hover-default: var(--color-gray-900);
81
+ --color-bg-filled-hover-primary: var(--color-blue-700);
82
+ --color-bg-filled-hover-secondary: var(--color-gray-700);
83
+ --color-bg-filled-hover-tertiary: var(--color-gray-600);
84
+ --color-bg-filled-hover-accent: var(--color-rose-700);
85
+ --color-bg-filled-hover-success: var(--color-emerald-700);
86
+ --color-bg-filled-hover-danger: var(--color-red-700);
87
+ --color-bg-filled-hover-warning: var(--color-amber-700);
88
+ --color-bg-filled-hover-info: var(--color-cyan-700);
89
+ --color-bg-filled-hover-link: var(--color-blue-700);
90
+
91
+ /* Filled UI Active Background Colors */
92
+ --color-bg-filled-active-default: var(--color-gray-950);
93
+ --color-bg-filled-active-primary: var(--color-blue-800);
94
+ --color-bg-filled-active-secondary: var(--color-gray-800);
95
+ --color-bg-filled-active-tertiary: var(--color-gray-700);
96
+ --color-bg-filled-active-accent: var(--color-rose-800);
97
+ --color-bg-filled-active-success: var(--color-emerald-800);
98
+ --color-bg-filled-active-danger: var(--color-red-800);
99
+ --color-bg-filled-active-warning: var(--color-amber-800);
100
+ --color-bg-filled-active-info: var(--color-cyan-800);
101
+ --color-bg-filled-active-link: var(--color-blue-800);
90
102
 
91
103
  /* 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);
104
+ --color-bg-layout-default: var(--color-white);
105
+ --color-bg-layout-primary: var(--color-white);
106
+ --color-bg-layout-secondary: var(--color-gray-50);
107
+ --color-bg-layout-tertiary: var(--color-gray-100);
108
+ --color-bg-layout-accent: var(--color-indigo-50);
109
+ --color-bg-layout-success: var(--color-green-50);
110
+ --color-bg-layout-danger: var(--color-red-50);
111
+ --color-bg-layout-warning: var(--color-yellow-50);
112
+ --color-bg-layout-info: var(--color-blue-50);
113
+ --color-bg-layout-transparent: transparent;
114
+ --color-bg-layout-link: var(--color-blue-50);
115
+
116
+ /* Layout Filled Background Colors */
117
+ --color-bg-filled-layout-default: var(--color-gray-700);
118
+ --color-bg-filled-layout-primary: var(--color-blue-800);
119
+ --color-bg-filled-layout-secondary: var(--color-gray-800);
120
+ --color-bg-filled-layout-tertiary: var(--color-gray-900);
121
+ --color-bg-filled-layout-accent: var(--color-indigo-700);
122
+ --color-bg-filled-layout-success: var(--color-green-700);
123
+ --color-bg-filled-layout-danger: var(--color-red-700);
124
+ --color-bg-filled-layout-warning: var(--color-yellow-800);
125
+ --color-bg-filled-layout-info: var(--color-blue-700);
126
+ --color-bg-filled-layout-transparent: transparent;
127
+ --color-bg-filled-layout-link: var(--color-blue-700);
103
128
 
104
129
  /* 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);
130
+ --color-border-default: var(--color-gray-200);
131
+ --color-border-primary: var(--color-blue-200);
132
+ --color-border-secondary: var(--color-gray-200);
133
+ --color-border-tertiary: var(--color-gray-300);
134
+ --color-border-link: var(--color-blue-200);
135
+ --color-border-accent: var(--color-rose-200);
136
+ --color-border-success: var(--color-green-200);
137
+ --color-border-danger: var(--color-red-200);
138
+ --color-border-warning: var(--color-yellow-200);
139
+ --color-border-info: var(--color-blue-200);
115
140
 
116
141
  /* 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);
142
+ --color-border-filled-default: var(--color-gray-600);
143
+ --color-border-filled-primary: var(--color-blue-600);
144
+ --color-border-filled-secondary: var(--color-gray-700);
145
+ --color-border-filled-tertiary: var(--color-gray-800);
146
+ --color-border-filled-accent: var(--color-rose-600);
147
+ --color-border-filled-success: var(--color-green-600);
148
+ --color-border-filled-danger: var(--color-red-600);
149
+ --color-border-filled-warning: var(--color-yellow-600);
150
+ --color-border-filled-info: var(--color-blue-600);
151
+ --color-border-filled-link: var(--color-blue-600);
152
+
153
+ --layout-spacing: var(--spacing);
154
+ --ui-spacing: var(--spacing);
155
+ --br-base: var(--spacing);
156
+ --ui-br-base: calc(var(--spacing) * 0.5);
157
+ --fs-base: calc(var(--spacing) * 0.5);
127
158
 
128
- /* UI Component Border Radius Sizes */
129
- --ui-border-radius-xs: 0.125rem;
130
- --ui-border-radius-sm: 0.25rem;
131
- --ui-border-radius-md: 0.375rem;
132
- --ui-border-radius-lg: 0.5rem;
133
- --ui-border-radius-xl: 0.625rem;
159
+ --breakpoint-mobile: 40rem;
160
+ --breakpoint-tablet: 48rem;
161
+ --breakpoint-laptop: 64rem;
162
+ --breakpoint-desktop: 80rem;
134
163
 
135
- /* Layout Component Border Radius Sizes */
136
- --layout-border-radius-xs: 0.375rem;
137
- --layout-border-radius-sm: 0.5rem;
138
- --layout-border-radius-md: 0.625rem;
139
- --layout-border-radius-lg: 0.75rem;
140
- --layout-border-radius-xl: 0.875rem;
164
+ --lh: 1;
165
+ --fs-unit: 8; /* Default to text-base (1rem = 8 * 0.125rem) */
166
+ --gap-unit: 1;
167
+ --aspect-ratio: 1;
168
+ --py-unit: 1;
169
+ --br-unit: 1;
170
+ --size-unit: 1;
171
+ }
172
+ @layer base {
173
+ :where(*) {
174
+ --gap: calc(var(--gap-unit) * var(--layout-spacing));
175
+ --ui-gap: calc(var(--gap-unit) * var(--ui-spacing));
176
+
177
+ --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--layout-spacing));
178
+ --ui-px: calc(var(--aspect-ratio) * var(--py-unit) * var(--ui-spacing));
179
+ --py: calc(var(--py-unit) * var(--layout-spacing));
180
+ --ui-py: calc(var(--py-unit) * var(--ui-spacing));
181
+ --ui-size: calc(var(--size-unit) * var(--ui-spacing));
182
+
183
+ --br: calc(var(--br-unit) * var(--br-base));
184
+ --ui-br: calc(var(--br-unit) * var(--ui-br-base));
185
+
186
+ --fs: calc(var(--fs-unit) * var(--fs-base));
187
+ }
141
188
  }
142
189
  /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
143
190
  @layer theme {
@@ -150,10 +197,12 @@
150
197
  --color-red-50: oklch(97.1% 0.013 17.38);
151
198
  --color-red-100: oklch(93.6% 0.032 17.717);
152
199
  --color-red-200: oklch(88.5% 0.062 18.334);
200
+ --color-red-300: oklch(80.8% 0.114 19.571);
153
201
  --color-red-500: oklch(63.7% 0.237 25.331);
154
202
  --color-red-600: oklch(57.7% 0.245 27.325);
155
203
  --color-red-700: oklch(50.5% 0.213 27.518);
156
204
  --color-red-800: oklch(44.4% 0.177 26.899);
205
+ --color-orange-500: oklch(70.5% 0.213 47.604);
157
206
  --color-amber-50: oklch(98.7% 0.022 95.277);
158
207
  --color-amber-100: oklch(96.2% 0.059 95.617);
159
208
  --color-amber-200: oklch(92.4% 0.12 95.746);
@@ -161,12 +210,19 @@
161
210
  --color-amber-700: oklch(55.5% 0.163 48.998);
162
211
  --color-amber-800: oklch(47.3% 0.137 46.201);
163
212
  --color-yellow-50: oklch(98.7% 0.026 102.212);
213
+ --color-yellow-100: oklch(97.3% 0.071 103.193);
214
+ --color-yellow-200: oklch(94.5% 0.129 101.54);
215
+ --color-yellow-600: oklch(68.1% 0.162 75.834);
216
+ --color-yellow-800: oklch(47.6% 0.114 61.907);
164
217
  --color-green-50: oklch(98.2% 0.018 155.826);
165
218
  --color-green-200: oklch(92.5% 0.084 155.995);
166
219
  --color-green-500: oklch(72.3% 0.219 149.579);
220
+ --color-green-600: oklch(62.7% 0.194 149.214);
221
+ --color-green-700: oklch(52.7% 0.154 150.069);
167
222
  --color-emerald-50: oklch(97.9% 0.021 166.113);
168
223
  --color-emerald-100: oklch(95% 0.052 163.051);
169
224
  --color-emerald-200: oklch(90.5% 0.093 164.15);
225
+ --color-emerald-500: oklch(69.6% 0.17 162.48);
170
226
  --color-emerald-600: oklch(59.6% 0.145 163.225);
171
227
  --color-emerald-700: oklch(50.8% 0.118 165.612);
172
228
  --color-emerald-800: oklch(43.2% 0.095 166.913);
@@ -179,13 +235,21 @@
179
235
  --color-blue-50: oklch(97% 0.014 254.604);
180
236
  --color-blue-100: oklch(93.2% 0.032 255.585);
181
237
  --color-blue-200: oklch(88.2% 0.059 254.128);
182
- --color-blue-300: oklch(80.9% 0.105 251.813);
183
238
  --color-blue-500: oklch(62.3% 0.214 259.815);
184
239
  --color-blue-600: oklch(54.6% 0.245 262.881);
185
240
  --color-blue-700: oklch(48.8% 0.243 264.376);
186
241
  --color-blue-800: oklch(42.4% 0.199 265.638);
187
242
  --color-blue-900: oklch(37.9% 0.146 265.522);
188
243
  --color-indigo-50: oklch(96.2% 0.018 272.314);
244
+ --color-indigo-100: oklch(93% 0.034 272.788);
245
+ --color-indigo-400: oklch(67.3% 0.182 276.935);
246
+ --color-indigo-500: oklch(58.5% 0.233 277.117);
247
+ --color-indigo-700: oklch(45.7% 0.24 277.023);
248
+ --color-violet-400: oklch(70.2% 0.183 293.541);
249
+ --color-violet-600: oklch(54.1% 0.281 293.009);
250
+ --color-purple-600: oklch(55.8% 0.288 302.321);
251
+ --color-purple-700: oklch(49.6% 0.265 301.924);
252
+ --color-pink-600: oklch(59.2% 0.249 0.584);
189
253
  --color-rose-50: oklch(96.9% 0.015 12.422);
190
254
  --color-rose-100: oklch(94.1% 0.03 12.58);
191
255
  --color-rose-200: oklch(89.2% 0.058 10.001);
@@ -204,7 +268,9 @@
204
268
  --color-gray-950: oklch(13% 0.028 261.692);
205
269
  --color-white: #fff;
206
270
  --spacing: 0.25rem;
207
- --container-xs: 20rem;
271
+ --container-sm: 24rem;
272
+ --container-lg: 32rem;
273
+ --container-xl: 36rem;
208
274
  --container-3xl: 48rem;
209
275
  --container-4xl: 56rem;
210
276
  --container-5xl: 64rem;
@@ -250,116 +316,142 @@
250
316
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
251
317
  --default-font-family: var(--font-sans);
252
318
  --default-mono-font-family: var(--font-mono);
253
- --text-color-default: var(--color-gray-900, #111827);
254
- --text-color-primary: var(--color-blue-600, #2563eb);
255
- --text-color-secondary: var(--color-gray-600, #4b5563);
256
- --text-color-tertiary: var(--color-gray-500, #6b7280);
257
- --text-color-link: var(--color-blue-600, #2563eb);
258
- --text-color-accent: var(--color-rose-700, #9333ea);
259
- --text-color-success: var(--color-emerald-600, #059669);
260
- --text-color-danger: var(--color-red-600, #dc2626);
261
- --text-color-warning: var(--color-amber-600, #d97706);
262
- --text-color-info: var(--color-cyan-600, #0891b2);
263
- --background-color-default: var(--color-white, #ffffff);
264
- --background-color-primary: var(--color-blue-50, #eff6ff);
265
- --background-color-secondary: var(--color-gray-50, #f9fafb);
266
- --background-color-tertiary: var(--color-gray-100, #f3f4f6);
267
- --background-color-accent: var(--color-rose-50, #faf5ff);
268
- --background-color-success: var(--color-emerald-50, #ecfdf5);
269
- --background-color-danger: var(--color-red-50, #fef2f2);
270
- --background-color-warning: var(--color-amber-50, #fffbeb);
271
- --background-color-info: var(--color-cyan-50, #ecfeff);
272
- --background-color-link: var(--color-blue-50, #eff6ff);
273
- --background-color-hover-default: var(--color-gray-50, #f3f4f6);
274
- --background-color-hover-primary: var(--color-blue-100, #dbeafe);
275
- --background-color-hover-secondary: var(--color-gray-100, #f3f4f6);
276
- --background-color-hover-tertiary: var(--color-gray-200, #e5e7eb);
277
- --background-color-hover-accent: var(--color-rose-100, #f5d0fe);
278
- --background-color-hover-success: var(--color-emerald-100, #d1fae5);
279
- --background-color-hover-danger: var(--color-red-100, #fee2e2);
280
- --background-color-hover-warning: var(--color-amber-100, #fef3c7);
281
- --background-color-hover-info: var(--color-cyan-100, #cffafe);
282
- --background-color-hover-link: var(--color-blue-100, #dbeafe);
283
- --background-color-active-default: var(--color-gray-100, #e5e7eb);
284
- --background-color-active-primary: var(--color-blue-200, #bfdbfe);
285
- --background-color-active-secondary: var(--color-gray-200, #e5e7eb);
286
- --background-color-active-tertiary: var(--color-gray-300, #d1d5db);
287
- --background-color-active-accent: var(--color-rose-200, #fbcfe8);
288
- --background-color-active-success: var(--color-emerald-200, #a7f3d0);
289
- --background-color-active-danger: var(--color-red-200, #fecaca);
290
- --background-color-active-warning: var(--color-amber-200, #fde68a);
291
- --background-color-active-info: var(--color-cyan-200, #a5f3fc);
292
- --background-color-active-link: var(--color-blue-200, #bfdbfe);
293
- --filled-background-color-default: var(--color-gray-800, #1f2937);
294
- --filled-background-color-primary: var(--color-blue-600, #2563eb);
295
- --filled-background-color-secondary: var(--color-gray-600, #4b5563);
296
- --filled-background-color-tertiary: var(--color-gray-500, #6b7280);
297
- --filled-background-color-accent: var(--color-rose-600, #e11d48);
298
- --filled-background-color-success: var(--color-emerald-600, #059669);
299
- --filled-background-color-danger: var(--color-red-600, #dc2626);
300
- --filled-background-color-warning: var(--color-amber-600, #d97706);
301
- --filled-background-color-info: var(--color-cyan-600, #0891b2);
302
- --filled-background-color-link: var(--color-blue-600, #2563eb);
303
- --filled-background-color-hover-default: var(--color-gray-900, #111827);
304
- --filled-background-color-hover-primary: var(--color-blue-700, #1d4ed8);
305
- --filled-background-color-hover-secondary: var(--color-gray-700, #374151);
306
- --filled-background-color-hover-tertiary: var(--color-gray-600, #4b5563);
307
- --filled-background-color-hover-accent: var(--color-rose-700, #be123c);
308
- --filled-background-color-hover-success: var(--color-emerald-700, #047857);
309
- --filled-background-color-hover-danger: var(--color-red-700, #b91c1c);
310
- --filled-background-color-hover-warning: var(--color-amber-700, #b45309);
311
- --filled-background-color-hover-info: var(--color-cyan-700, #0e7490);
312
- --filled-background-color-hover-link: var(--color-blue-700, #1d4ed8);
313
- --filled-background-color-active-default: var(--color-gray-950, #030712);
314
- --filled-background-color-active-primary: var(--color-blue-800, #1e40af);
315
- --filled-background-color-active-secondary: var(--color-gray-800, #1f2937);
316
- --filled-background-color-active-tertiary: var(--color-gray-700, #374151);
317
- --filled-background-color-active-accent: var(--color-rose-800, #9f1239);
318
- --filled-background-color-active-success: var(--color-emerald-800, #065f46);
319
- --filled-background-color-active-danger: var(--color-red-800, #991b1b);
320
- --filled-background-color-active-warning: var(--color-amber-800, #92400e);
321
- --filled-background-color-active-info: var(--color-cyan-800, #155e75);
322
- --filled-background-color-active-link: var(--color-blue-800, #1e40af);
323
- --layout-background-default: var(--color-white, #ffffff);
324
- --layout-background-primary: var(--color-white, #ffffff);
325
- --layout-background-secondary: var(--color-gray-50, #f9fafb);
326
- --layout-background-tertiary: var(--color-gray-100, #f3f4f6);
327
- --layout-background-accent: var(--color-indigo-50, #eef2ff);
328
- --layout-background-success: var(--color-green-50, #f0fdf4);
329
- --layout-background-danger: var(--color-red-50, #fef2f2);
330
- --layout-background-warning: var(--color-yellow-50, #fefce8);
331
- --layout-background-info: var(--color-blue-50, #eff6ff);
332
- --layout-background-link: var(--color-blue-50, #eff6ff);
333
- --border-color-default: var(--color-gray-200, #d1d5db);
334
- --border-color-primary: var(--color-blue-200, #93c5fd);
335
- --border-color-secondary: var(--color-gray-200, #d1d5db);
336
- --border-color-tertiary: var(--color-gray-200, #e5e7eb);
337
- --border-color-link: var(--color-blue-200, #93c5fd);
338
- --border-color-accent: var(--color-rose-200, #d8b4fe);
339
- --border-color-success: var(--color-emerald-200, #6ee7b7);
340
- --border-color-danger: var(--color-red-200, #fca5a5);
341
- --border-color-warning: var(--color-amber-200, #fcd34d);
342
- --border-color-info: var(--color-cyan-200, #67e8f9);
343
- --filled-border-color-default: var(--color-gray-800, #1f2937);
344
- --filled-border-color-primary: var(--color-blue-600, #2563eb);
345
- --filled-border-color-secondary: var(--color-gray-600, #4b5563);
346
- --filled-border-color-tertiary: var(--color-gray-500, #6b7280);
347
- --filled-border-color-accent: var(--color-rose-600, #e11d48);
348
- --filled-border-color-success: var(--color-emerald-600, #059669);
349
- --filled-border-color-danger: var(--color-red-600, #dc2626);
350
- --filled-border-color-warning: var(--color-amber-600, #d97706);
351
- --filled-border-color-info: var(--color-cyan-600, #0891b2);
352
- --filled-border-color-link: var(--color-blue-600, #2563eb);
353
- --ui-border-radius-xs: 0.125rem;
354
- --ui-border-radius-sm: 0.25rem;
355
- --ui-border-radius-md: 0.375rem;
356
- --ui-border-radius-lg: 0.5rem;
357
- --ui-border-radius-xl: 0.625rem;
358
- --layout-border-radius-xs: 0.375rem;
359
- --layout-border-radius-sm: 0.5rem;
360
- --layout-border-radius-md: 0.625rem;
361
- --layout-border-radius-lg: 0.75rem;
362
- --layout-border-radius-xl: 0.875rem;
319
+ --color-text-default: var(--color-gray-900);
320
+ --color-text-primary: var(--color-blue-600);
321
+ --color-text-secondary: var(--color-gray-600);
322
+ --color-text-tertiary: var(--color-gray-500);
323
+ --color-text-link: var(--color-blue-600);
324
+ --color-text-accent: var(--color-rose-700);
325
+ --color-text-success: var(--color-emerald-600);
326
+ --color-text-danger: var(--color-red-600);
327
+ --color-text-warning: var(--color-amber-600);
328
+ --color-text-info: var(--color-cyan-600);
329
+ --color-text-filled-default: var(--color-white);
330
+ --color-text-filled-primary: var(--color-blue-100);
331
+ --color-text-filled-secondary: var(--color-gray-200);
332
+ --color-text-filled-tertiary: var(--color-gray-300);
333
+ --color-text-filled-link: var(--color-blue-100);
334
+ --color-text-filled-accent: var(--color-rose-100);
335
+ --color-text-filled-success: var(--color-emerald-100);
336
+ --color-text-filled-danger: var(--color-red-100);
337
+ --color-text-filled-warning: var(--color-amber-100);
338
+ --color-text-filled-info: var(--color-cyan-100);
339
+ --color-bg-default: var(--color-white);
340
+ --color-bg-primary: var(--color-blue-50);
341
+ --color-bg-secondary: var(--color-gray-50);
342
+ --color-bg-tertiary: var(--color-gray-100);
343
+ --color-bg-accent: var(--color-rose-50);
344
+ --color-bg-success: var(--color-emerald-50);
345
+ --color-bg-danger: var(--color-red-50);
346
+ --color-bg-warning: var(--color-amber-50);
347
+ --color-bg-info: var(--color-cyan-50);
348
+ --color-bg-link: var(--color-blue-50);
349
+ --color-bg-hover-default: var(--color-gray-50);
350
+ --color-bg-hover-primary: var(--color-blue-100);
351
+ --color-bg-hover-secondary: var(--color-gray-100);
352
+ --color-bg-hover-tertiary: var(--color-gray-200);
353
+ --color-bg-hover-accent: var(--color-rose-100);
354
+ --color-bg-hover-success: var(--color-emerald-100);
355
+ --color-bg-hover-danger: var(--color-red-100);
356
+ --color-bg-hover-warning: var(--color-amber-100);
357
+ --color-bg-hover-info: var(--color-cyan-100);
358
+ --color-bg-hover-link: var(--color-blue-100);
359
+ --color-bg-active-default: var(--color-gray-100);
360
+ --color-bg-active-primary: var(--color-blue-200);
361
+ --color-bg-active-secondary: var(--color-gray-200);
362
+ --color-bg-active-tertiary: var(--color-gray-300);
363
+ --color-bg-active-accent: var(--color-rose-200);
364
+ --color-bg-active-success: var(--color-emerald-200);
365
+ --color-bg-active-danger: var(--color-red-200);
366
+ --color-bg-active-warning: var(--color-amber-200);
367
+ --color-bg-active-info: var(--color-cyan-200);
368
+ --color-bg-active-link: var(--color-blue-200);
369
+ --color-bg-filled-default: var(--color-gray-800);
370
+ --color-bg-filled-primary: var(--color-blue-600);
371
+ --color-bg-filled-secondary: var(--color-gray-600);
372
+ --color-bg-filled-tertiary: var(--color-gray-500);
373
+ --color-bg-filled-accent: var(--color-rose-600);
374
+ --color-bg-filled-success: var(--color-emerald-600);
375
+ --color-bg-filled-danger: var(--color-red-600);
376
+ --color-bg-filled-warning: var(--color-amber-600);
377
+ --color-bg-filled-info: var(--color-cyan-600);
378
+ --color-bg-filled-link: var(--color-blue-600);
379
+ --color-bg-filled-hover-default: var(--color-gray-900);
380
+ --color-bg-filled-hover-primary: var(--color-blue-700);
381
+ --color-bg-filled-hover-secondary: var(--color-gray-700);
382
+ --color-bg-filled-hover-tertiary: var(--color-gray-600);
383
+ --color-bg-filled-hover-accent: var(--color-rose-700);
384
+ --color-bg-filled-hover-success: var(--color-emerald-700);
385
+ --color-bg-filled-hover-danger: var(--color-red-700);
386
+ --color-bg-filled-hover-warning: var(--color-amber-700);
387
+ --color-bg-filled-hover-info: var(--color-cyan-700);
388
+ --color-bg-filled-hover-link: var(--color-blue-700);
389
+ --color-bg-filled-active-default: var(--color-gray-950);
390
+ --color-bg-filled-active-primary: var(--color-blue-800);
391
+ --color-bg-filled-active-secondary: var(--color-gray-800);
392
+ --color-bg-filled-active-tertiary: var(--color-gray-700);
393
+ --color-bg-filled-active-accent: var(--color-rose-800);
394
+ --color-bg-filled-active-success: var(--color-emerald-800);
395
+ --color-bg-filled-active-danger: var(--color-red-800);
396
+ --color-bg-filled-active-warning: var(--color-amber-800);
397
+ --color-bg-filled-active-info: var(--color-cyan-800);
398
+ --color-bg-filled-active-link: var(--color-blue-800);
399
+ --color-bg-layout-default: var(--color-white);
400
+ --color-bg-layout-primary: var(--color-white);
401
+ --color-bg-layout-secondary: var(--color-gray-50);
402
+ --color-bg-layout-tertiary: var(--color-gray-100);
403
+ --color-bg-layout-accent: var(--color-indigo-50);
404
+ --color-bg-layout-success: var(--color-green-50);
405
+ --color-bg-layout-danger: var(--color-red-50);
406
+ --color-bg-layout-warning: var(--color-yellow-50);
407
+ --color-bg-layout-info: var(--color-blue-50);
408
+ --color-bg-layout-link: var(--color-blue-50);
409
+ --color-bg-filled-layout-default: var(--color-gray-700);
410
+ --color-bg-filled-layout-primary: var(--color-blue-800);
411
+ --color-bg-filled-layout-secondary: var(--color-gray-800);
412
+ --color-bg-filled-layout-tertiary: var(--color-gray-900);
413
+ --color-bg-filled-layout-accent: var(--color-indigo-700);
414
+ --color-bg-filled-layout-success: var(--color-green-700);
415
+ --color-bg-filled-layout-danger: var(--color-red-700);
416
+ --color-bg-filled-layout-warning: var(--color-yellow-800);
417
+ --color-bg-filled-layout-info: var(--color-blue-700);
418
+ --color-bg-filled-layout-link: var(--color-blue-700);
419
+ --color-border-default: var(--color-gray-200);
420
+ --color-border-primary: var(--color-blue-200);
421
+ --color-border-secondary: var(--color-gray-200);
422
+ --color-border-tertiary: var(--color-gray-300);
423
+ --color-border-link: var(--color-blue-200);
424
+ --color-border-accent: var(--color-rose-200);
425
+ --color-border-success: var(--color-green-200);
426
+ --color-border-danger: var(--color-red-200);
427
+ --color-border-warning: var(--color-yellow-200);
428
+ --color-border-info: var(--color-blue-200);
429
+ --color-border-filled-default: var(--color-gray-600);
430
+ --color-border-filled-primary: var(--color-blue-600);
431
+ --color-border-filled-secondary: var(--color-gray-700);
432
+ --color-border-filled-tertiary: var(--color-gray-800);
433
+ --color-border-filled-accent: var(--color-rose-600);
434
+ --color-border-filled-success: var(--color-green-600);
435
+ --color-border-filled-danger: var(--color-red-600);
436
+ --color-border-filled-warning: var(--color-yellow-600);
437
+ --color-border-filled-info: var(--color-blue-600);
438
+ --color-border-filled-link: var(--color-blue-600);
439
+ --layout-spacing: var(--spacing);
440
+ --ui-spacing: var(--spacing);
441
+ --br-base: var(--spacing);
442
+ --ui-br-base: calc(var(--spacing) * 0.5);
443
+ --fs-base: calc(var(--spacing) * 0.5);
444
+ --breakpoint-mobile: 40rem;
445
+ --breakpoint-tablet: 48rem;
446
+ --breakpoint-laptop: 64rem;
447
+ --breakpoint-desktop: 80rem;
448
+ --lh: 1;
449
+ --fs-unit: 8;
450
+ --gap-unit: 1;
451
+ --aspect-ratio: 1;
452
+ --py-unit: 1;
453
+ --br-unit: 1;
454
+ --size-unit: 1;
363
455
  }
364
456
  }
365
457
  @layer base {
@@ -543,15 +635,27 @@
543
635
  @media (width >= 40rem) {
544
636
  max-width: 40rem;
545
637
  }
638
+ @media (width >= 40rem) {
639
+ max-width: 40rem;
640
+ }
546
641
  @media (width >= 48rem) {
547
642
  max-width: 48rem;
548
643
  }
644
+ @media (width >= 48rem) {
645
+ max-width: 48rem;
646
+ }
647
+ @media (width >= 64rem) {
648
+ max-width: 64rem;
649
+ }
549
650
  @media (width >= 64rem) {
550
651
  max-width: 64rem;
551
652
  }
552
653
  @media (width >= 80rem) {
553
654
  max-width: 80rem;
554
655
  }
656
+ @media (width >= 80rem) {
657
+ max-width: 80rem;
658
+ }
555
659
  @media (width >= 96rem) {
556
660
  max-width: 96rem;
557
661
  }
@@ -562,6 +666,9 @@
562
666
  .mx-auto {
563
667
  margin-inline: auto;
564
668
  }
669
+ .mb-2 {
670
+ margin-bottom: calc(var(--spacing) * 2);
671
+ }
565
672
  .block {
566
673
  display: block;
567
674
  }
@@ -595,26 +702,18 @@
595
702
  .table-cell {
596
703
  display: table-cell;
597
704
  }
598
- .h-3 {
599
- height: calc(var(--spacing) * 3);
600
- }
601
- .h-3\.5 {
602
- height: calc(var(--spacing) * 3.5);
603
- }
604
- .h-4 {
605
- height: calc(var(--spacing) * 4);
705
+ .aspect-ratio {
706
+ aspect-ratio: var(--aspect-ratio);
606
707
  }
607
- .h-4\.5 {
608
- height: calc(var(--spacing) * 4.5);
708
+ .size-\(--ui-size\) {
709
+ width: var(--ui-size);
710
+ height: var(--ui-size);
609
711
  }
610
- .h-5 {
611
- height: calc(var(--spacing) * 5);
712
+ .h-\[calc\(var\(--lh\)\*var\(--fs\)\)\] {
713
+ height: calc(var(--lh) * var(--fs));
612
714
  }
613
- .h-6 {
614
- height: calc(var(--spacing) * 6);
615
- }
616
- .h-7 {
617
- height: calc(var(--spacing) * 7);
715
+ .h-auto {
716
+ height: auto;
618
717
  }
619
718
  .h-fit {
620
719
  height: fit-content;
@@ -622,20 +721,8 @@
622
721
  .h-px {
623
722
  height: 1px;
624
723
  }
625
- .w-3 {
626
- width: calc(var(--spacing) * 3);
627
- }
628
- .w-3\.5 {
629
- width: calc(var(--spacing) * 3.5);
630
- }
631
- .w-4 {
632
- width: calc(var(--spacing) * 4);
633
- }
634
- .w-4\.5 {
635
- width: calc(var(--spacing) * 4.5);
636
- }
637
- .w-5 {
638
- width: calc(var(--spacing) * 5);
724
+ .h-screen {
725
+ height: 100vh;
639
726
  }
640
727
  .w-fit {
641
728
  width: fit-content;
@@ -658,8 +745,20 @@
658
745
  .max-w-7xl {
659
746
  max-width: var(--container-7xl);
660
747
  }
661
- .max-w-xs {
662
- max-width: var(--container-xs);
748
+ .max-w-\[216px\] {
749
+ max-width: 216px;
750
+ }
751
+ .max-w-lg {
752
+ max-width: var(--container-lg);
753
+ }
754
+ .max-w-none {
755
+ max-width: none;
756
+ }
757
+ .max-w-sm {
758
+ max-width: var(--container-sm);
759
+ }
760
+ .max-w-xl {
761
+ max-width: var(--container-xl);
663
762
  }
664
763
  .transform {
665
764
  transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
@@ -670,6 +769,9 @@
670
769
  .animate-pulse {
671
770
  animation: var(--animate-pulse);
672
771
  }
772
+ .cursor-default {
773
+ cursor: default;
774
+ }
673
775
  .cursor-pointer {
674
776
  cursor: pointer;
675
777
  }
@@ -685,6 +787,9 @@
685
787
  .appearance-none {
686
788
  appearance: none;
687
789
  }
790
+ .auto-rows-fr {
791
+ grid-auto-rows: minmax(0, 1fr);
792
+ }
688
793
  .grid-cols-1 {
689
794
  grid-template-columns: repeat(1, minmax(0, 1fr));
690
795
  }
@@ -748,47 +853,17 @@
748
853
  .justify-stretch {
749
854
  justify-content: stretch;
750
855
  }
751
- .gap-0 {
752
- gap: calc(var(--spacing) * 0);
753
- }
754
- .gap-0\.5 {
755
- gap: calc(var(--spacing) * 0.5);
756
- }
757
- .gap-1 {
758
- gap: calc(var(--spacing) * 1);
759
- }
760
- .gap-1\.5 {
761
- gap: calc(var(--spacing) * 1.5);
762
- }
763
- .gap-2 {
764
- gap: calc(var(--spacing) * 2);
856
+ .gap-\(--gap\) {
857
+ gap: var(--gap);
765
858
  }
766
- .gap-2\.5 {
767
- gap: calc(var(--spacing) * 2.5);
859
+ .gap-\(--ui-gap\) {
860
+ gap: var(--ui-gap);
768
861
  }
769
- .gap-3 {
770
- gap: calc(var(--spacing) * 3);
771
- }
772
- .gap-4 {
773
- gap: calc(var(--spacing) * 4);
774
- }
775
- .gap-5 {
776
- gap: calc(var(--spacing) * 5);
777
- }
778
- .gap-6 {
779
- gap: calc(var(--spacing) * 6);
780
- }
781
- .gap-8 {
782
- gap: calc(var(--spacing) * 8);
783
- }
784
- .gap-10 {
785
- gap: calc(var(--spacing) * 10);
786
- }
787
- .gap-12 {
788
- gap: calc(var(--spacing) * 12);
862
+ .gap-0 {
863
+ gap: calc(var(--spacing) * 0);
789
864
  }
790
- .gap-16 {
791
- gap: calc(var(--spacing) * 16);
865
+ .gap-unit {
866
+ gap: var(--gap-unit);
792
867
  }
793
868
  .space-y-2 {
794
869
  :where(& > :not(:last-child)) {
@@ -852,35 +927,11 @@
852
927
  .rounded {
853
928
  border-radius: 0.25rem;
854
929
  }
855
- .rounded-\(--layout-border-radius-lg\) {
856
- border-radius: var(--layout-border-radius-lg);
857
- }
858
- .rounded-\(--layout-border-radius-md\) {
859
- border-radius: var(--layout-border-radius-md);
860
- }
861
- .rounded-\(--layout-border-radius-sm\) {
862
- border-radius: var(--layout-border-radius-sm);
863
- }
864
- .rounded-\(--layout-border-radius-xl\) {
865
- border-radius: var(--layout-border-radius-xl);
930
+ .rounded-\(--br\) {
931
+ border-radius: var(--br);
866
932
  }
867
- .rounded-\(--layout-border-radius-xs\) {
868
- border-radius: var(--layout-border-radius-xs);
869
- }
870
- .rounded-\(--ui-border-radius-lg\) {
871
- border-radius: var(--ui-border-radius-lg);
872
- }
873
- .rounded-\(--ui-border-radius-md\) {
874
- border-radius: var(--ui-border-radius-md);
875
- }
876
- .rounded-\(--ui-border-radius-sm\) {
877
- border-radius: var(--ui-border-radius-sm);
878
- }
879
- .rounded-\(--ui-border-radius-xl\) {
880
- border-radius: var(--ui-border-radius-xl);
881
- }
882
- .rounded-\(--ui-border-radius-xs\) {
883
- border-radius: var(--ui-border-radius-xs);
933
+ .rounded-\(--ui-br\) {
934
+ border-radius: var(--ui-br);
884
935
  }
885
936
  .rounded-full {
886
937
  border-radius: calc(infinity * 1px);
@@ -896,78 +947,102 @@
896
947
  border-style: var(--tw-border-style);
897
948
  border-width: 2px;
898
949
  }
950
+ .border-x {
951
+ border-inline-style: var(--tw-border-style);
952
+ border-inline-width: 1px;
953
+ }
954
+ .border-y {
955
+ border-block-style: var(--tw-border-style);
956
+ border-block-width: 1px;
957
+ }
958
+ .border-t {
959
+ border-top-style: var(--tw-border-style);
960
+ border-top-width: 1px;
961
+ }
962
+ .border-r {
963
+ border-right-style: var(--tw-border-style);
964
+ border-right-width: 1px;
965
+ }
966
+ .border-b {
967
+ border-bottom-style: var(--tw-border-style);
968
+ border-bottom-width: 1px;
969
+ }
970
+ .border-l {
971
+ border-left-style: var(--tw-border-style);
972
+ border-left-width: 1px;
973
+ }
899
974
  .border-dashed {
900
975
  --tw-border-style: dashed;
901
976
  border-style: dashed;
902
977
  }
903
- .border-\(--border-color-accent\) {
904
- border-color: var(--border-color-accent);
978
+ .border-\(--color-border-accent\) {
979
+ border-color: var(--color-border-accent);
905
980
  }
906
- .border-\(--border-color-danger\) {
907
- border-color: var(--border-color-danger);
981
+ .border-\(--color-border-danger\) {
982
+ border-color: var(--color-border-danger);
908
983
  }
909
- .border-\(--border-color-default\) {
910
- border-color: var(--border-color-default);
984
+ .border-\(--color-border-default\) {
985
+ border-color: var(--color-border-default);
911
986
  }
912
- .border-\(--border-color-info\) {
913
- border-color: var(--border-color-info);
987
+ .border-\(--color-border-filled-accent\) {
988
+ border-color: var(--color-border-filled-accent);
914
989
  }
915
- .border-\(--border-color-link\) {
916
- border-color: var(--border-color-link);
990
+ .border-\(--color-border-filled-danger\) {
991
+ border-color: var(--color-border-filled-danger);
917
992
  }
918
- .border-\(--border-color-primary\) {
919
- border-color: var(--border-color-primary);
993
+ .border-\(--color-border-filled-default\) {
994
+ border-color: var(--color-border-filled-default);
920
995
  }
921
- .border-\(--border-color-secondary\) {
922
- border-color: var(--border-color-secondary);
996
+ .border-\(--color-border-filled-info\) {
997
+ border-color: var(--color-border-filled-info);
923
998
  }
924
- .border-\(--border-color-success\) {
925
- border-color: var(--border-color-success);
999
+ .border-\(--color-border-filled-link\) {
1000
+ border-color: var(--color-border-filled-link);
926
1001
  }
927
- .border-\(--border-color-tertiary\) {
928
- border-color: var(--border-color-tertiary);
1002
+ .border-\(--color-border-filled-primary\) {
1003
+ border-color: var(--color-border-filled-primary);
929
1004
  }
930
- .border-\(--border-color-warning\) {
931
- border-color: var(--border-color-warning);
1005
+ .border-\(--color-border-filled-secondary\) {
1006
+ border-color: var(--color-border-filled-secondary);
932
1007
  }
933
- .border-\(--filled-border-color-accent\) {
934
- border-color: var(--filled-border-color-accent);
1008
+ .border-\(--color-border-filled-success\) {
1009
+ border-color: var(--color-border-filled-success);
935
1010
  }
936
- .border-\(--filled-border-color-danger\) {
937
- border-color: var(--filled-border-color-danger);
1011
+ .border-\(--color-border-filled-tertiary\) {
1012
+ border-color: var(--color-border-filled-tertiary);
938
1013
  }
939
- .border-\(--filled-border-color-default\) {
940
- border-color: var(--filled-border-color-default);
1014
+ .border-\(--color-border-filled-warning\) {
1015
+ border-color: var(--color-border-filled-warning);
941
1016
  }
942
- .border-\(--filled-border-color-info\) {
943
- border-color: var(--filled-border-color-info);
1017
+ .border-\(--color-border-info\) {
1018
+ border-color: var(--color-border-info);
944
1019
  }
945
- .border-\(--filled-border-color-link\) {
946
- border-color: var(--filled-border-color-link);
1020
+ .border-\(--color-border-link\) {
1021
+ border-color: var(--color-border-link);
947
1022
  }
948
- .border-\(--filled-border-color-primary\) {
949
- border-color: var(--filled-border-color-primary);
1023
+ .border-\(--color-border-primary\) {
1024
+ border-color: var(--color-border-primary);
950
1025
  }
951
- .border-\(--filled-border-color-secondary\) {
952
- border-color: var(--filled-border-color-secondary);
1026
+ .border-\(--color-border-secondary\) {
1027
+ border-color: var(--color-border-secondary);
953
1028
  }
954
- .border-\(--filled-border-color-success\) {
955
- border-color: var(--filled-border-color-success);
1029
+ .border-\(--color-border-success\) {
1030
+ border-color: var(--color-border-success);
956
1031
  }
957
- .border-\(--filled-border-color-tertiary\) {
958
- border-color: var(--filled-border-color-tertiary);
1032
+ .border-\(--color-border-tertiary\) {
1033
+ border-color: var(--color-border-tertiary);
959
1034
  }
960
- .border-\(--filled-border-color-warning\) {
961
- border-color: var(--filled-border-color-warning);
1035
+ .border-\(--color-border-warning\) {
1036
+ border-color: var(--color-border-warning);
962
1037
  }
963
- .border-blue-300 {
964
- border-color: var(--color-blue-300);
1038
+ .border-gray-600 {
1039
+ border-color: var(--color-gray-600);
965
1040
  }
966
- .border-green-200 {
967
- border-color: var(--color-green-200);
1041
+ .border-green-500 {
1042
+ border-color: var(--color-green-500);
968
1043
  }
969
- .border-red-200 {
970
- border-color: var(--color-red-200);
1044
+ .border-indigo-400 {
1045
+ border-color: var(--color-indigo-400);
971
1046
  }
972
1047
  .border-red-600 {
973
1048
  border-color: var(--color-red-600);
@@ -975,165 +1050,219 @@
975
1050
  .border-transparent {
976
1051
  border-color: transparent;
977
1052
  }
978
- .bg-\(--background-color-accent\) {
979
- background-color: var(--background-color-accent);
1053
+ .border-violet-400 {
1054
+ border-color: var(--color-violet-400);
1055
+ }
1056
+ .bg-\(--color-bg-accent\) {
1057
+ background-color: var(--color-bg-accent);
1058
+ }
1059
+ .bg-\(--color-bg-danger\) {
1060
+ background-color: var(--color-bg-danger);
1061
+ }
1062
+ .bg-\(--color-bg-default\) {
1063
+ background-color: var(--color-bg-default);
1064
+ }
1065
+ .bg-\(--color-bg-filled-accent\) {
1066
+ background-color: var(--color-bg-filled-accent);
1067
+ }
1068
+ .bg-\(--color-bg-filled-danger\) {
1069
+ background-color: var(--color-bg-filled-danger);
1070
+ }
1071
+ .bg-\(--color-bg-filled-default\) {
1072
+ background-color: var(--color-bg-filled-default);
1073
+ }
1074
+ .bg-\(--color-bg-filled-info\) {
1075
+ background-color: var(--color-bg-filled-info);
1076
+ }
1077
+ .bg-\(--color-bg-filled-layout-accent\) {
1078
+ background-color: var(--color-bg-filled-layout-accent);
980
1079
  }
981
- .bg-\(--background-color-danger\) {
982
- background-color: var(--background-color-danger);
1080
+ .bg-\(--color-bg-filled-layout-danger\) {
1081
+ background-color: var(--color-bg-filled-layout-danger);
983
1082
  }
984
- .bg-\(--background-color-default\) {
985
- background-color: var(--background-color-default);
1083
+ .bg-\(--color-bg-filled-layout-default\) {
1084
+ background-color: var(--color-bg-filled-layout-default);
986
1085
  }
987
- .bg-\(--background-color-info\) {
988
- background-color: var(--background-color-info);
1086
+ .bg-\(--color-bg-filled-layout-info\) {
1087
+ background-color: var(--color-bg-filled-layout-info);
989
1088
  }
990
- .bg-\(--background-color-link\) {
991
- background-color: var(--background-color-link);
1089
+ .bg-\(--color-bg-filled-layout-link\) {
1090
+ background-color: var(--color-bg-filled-layout-link);
992
1091
  }
993
- .bg-\(--background-color-primary\) {
994
- background-color: var(--background-color-primary);
1092
+ .bg-\(--color-bg-filled-layout-primary\) {
1093
+ background-color: var(--color-bg-filled-layout-primary);
995
1094
  }
996
- .bg-\(--background-color-secondary\) {
997
- background-color: var(--background-color-secondary);
1095
+ .bg-\(--color-bg-filled-layout-secondary\) {
1096
+ background-color: var(--color-bg-filled-layout-secondary);
998
1097
  }
999
- .bg-\(--background-color-success\) {
1000
- background-color: var(--background-color-success);
1098
+ .bg-\(--color-bg-filled-layout-success\) {
1099
+ background-color: var(--color-bg-filled-layout-success);
1001
1100
  }
1002
- .bg-\(--background-color-tertiary\) {
1003
- background-color: var(--background-color-tertiary);
1101
+ .bg-\(--color-bg-filled-layout-tertiary\) {
1102
+ background-color: var(--color-bg-filled-layout-tertiary);
1004
1103
  }
1005
- .bg-\(--background-color-warning\) {
1006
- background-color: var(--background-color-warning);
1104
+ .bg-\(--color-bg-filled-layout-warning\) {
1105
+ background-color: var(--color-bg-filled-layout-warning);
1007
1106
  }
1008
- .bg-\(--border-color-accent\) {
1009
- background-color: var(--border-color-accent);
1107
+ .bg-\(--color-bg-filled-link\) {
1108
+ background-color: var(--color-bg-filled-link);
1010
1109
  }
1011
- .bg-\(--border-color-danger\) {
1012
- background-color: var(--border-color-danger);
1110
+ .bg-\(--color-bg-filled-primary\) {
1111
+ background-color: var(--color-bg-filled-primary);
1013
1112
  }
1014
- .bg-\(--border-color-default\) {
1015
- background-color: var(--border-color-default);
1113
+ .bg-\(--color-bg-filled-secondary\) {
1114
+ background-color: var(--color-bg-filled-secondary);
1016
1115
  }
1017
- .bg-\(--border-color-info\) {
1018
- background-color: var(--border-color-info);
1116
+ .bg-\(--color-bg-filled-success\) {
1117
+ background-color: var(--color-bg-filled-success);
1019
1118
  }
1020
- .bg-\(--border-color-link\) {
1021
- background-color: var(--border-color-link);
1119
+ .bg-\(--color-bg-filled-tertiary\) {
1120
+ background-color: var(--color-bg-filled-tertiary);
1022
1121
  }
1023
- .bg-\(--border-color-primary\) {
1024
- background-color: var(--border-color-primary);
1122
+ .bg-\(--color-bg-filled-warning\) {
1123
+ background-color: var(--color-bg-filled-warning);
1025
1124
  }
1026
- .bg-\(--border-color-secondary\) {
1027
- background-color: var(--border-color-secondary);
1125
+ .bg-\(--color-bg-info\) {
1126
+ background-color: var(--color-bg-info);
1028
1127
  }
1029
- .bg-\(--border-color-success\) {
1030
- background-color: var(--border-color-success);
1128
+ .bg-\(--color-bg-layout-accent\) {
1129
+ background-color: var(--color-bg-layout-accent);
1031
1130
  }
1032
- .bg-\(--border-color-tertiary\) {
1033
- background-color: var(--border-color-tertiary);
1131
+ .bg-\(--color-bg-layout-danger\) {
1132
+ background-color: var(--color-bg-layout-danger);
1034
1133
  }
1035
- .bg-\(--border-color-warning\) {
1036
- background-color: var(--border-color-warning);
1134
+ .bg-\(--color-bg-layout-default\) {
1135
+ background-color: var(--color-bg-layout-default);
1037
1136
  }
1038
- .bg-\(--filled-background-color-accent\) {
1039
- background-color: var(--filled-background-color-accent);
1137
+ .bg-\(--color-bg-layout-info\) {
1138
+ background-color: var(--color-bg-layout-info);
1040
1139
  }
1041
- .bg-\(--filled-background-color-danger\) {
1042
- background-color: var(--filled-background-color-danger);
1140
+ .bg-\(--color-bg-layout-link\) {
1141
+ background-color: var(--color-bg-layout-link);
1043
1142
  }
1044
- .bg-\(--filled-background-color-default\) {
1045
- background-color: var(--filled-background-color-default);
1143
+ .bg-\(--color-bg-layout-primary\) {
1144
+ background-color: var(--color-bg-layout-primary);
1046
1145
  }
1047
- .bg-\(--filled-background-color-info\) {
1048
- background-color: var(--filled-background-color-info);
1146
+ .bg-\(--color-bg-layout-secondary\) {
1147
+ background-color: var(--color-bg-layout-secondary);
1049
1148
  }
1050
- .bg-\(--filled-background-color-link\) {
1051
- background-color: var(--filled-background-color-link);
1149
+ .bg-\(--color-bg-layout-success\) {
1150
+ background-color: var(--color-bg-layout-success);
1052
1151
  }
1053
- .bg-\(--filled-background-color-primary\) {
1054
- background-color: var(--filled-background-color-primary);
1152
+ .bg-\(--color-bg-layout-tertiary\) {
1153
+ background-color: var(--color-bg-layout-tertiary);
1055
1154
  }
1056
- .bg-\(--filled-background-color-secondary\) {
1057
- background-color: var(--filled-background-color-secondary);
1155
+ .bg-\(--color-bg-layout-warning\) {
1156
+ background-color: var(--color-bg-layout-warning);
1058
1157
  }
1059
- .bg-\(--filled-background-color-success\) {
1060
- background-color: var(--filled-background-color-success);
1158
+ .bg-\(--color-bg-link\) {
1159
+ background-color: var(--color-bg-link);
1061
1160
  }
1062
- .bg-\(--filled-background-color-tertiary\) {
1063
- background-color: var(--filled-background-color-tertiary);
1161
+ .bg-\(--color-bg-primary\) {
1162
+ background-color: var(--color-bg-primary);
1064
1163
  }
1065
- .bg-\(--filled-background-color-warning\) {
1066
- background-color: var(--filled-background-color-warning);
1164
+ .bg-\(--color-bg-secondary\) {
1165
+ background-color: var(--color-bg-secondary);
1067
1166
  }
1068
- .bg-\(--layout-background-accent\) {
1069
- background-color: var(--layout-background-accent);
1167
+ .bg-\(--color-bg-success\) {
1168
+ background-color: var(--color-bg-success);
1070
1169
  }
1071
- .bg-\(--layout-background-danger\) {
1072
- background-color: var(--layout-background-danger);
1170
+ .bg-\(--color-bg-tertiary\) {
1171
+ background-color: var(--color-bg-tertiary);
1073
1172
  }
1074
- .bg-\(--layout-background-default\) {
1075
- background-color: var(--layout-background-default);
1173
+ .bg-\(--color-bg-warning\) {
1174
+ background-color: var(--color-bg-warning);
1076
1175
  }
1077
- .bg-\(--layout-background-info\) {
1078
- background-color: var(--layout-background-info);
1176
+ .bg-\(--color-border-accent\) {
1177
+ background-color: var(--color-border-accent);
1079
1178
  }
1080
- .bg-\(--layout-background-link\) {
1081
- background-color: var(--layout-background-link);
1179
+ .bg-\(--color-border-danger\) {
1180
+ background-color: var(--color-border-danger);
1082
1181
  }
1083
- .bg-\(--layout-background-primary\) {
1084
- background-color: var(--layout-background-primary);
1182
+ .bg-\(--color-border-default\) {
1183
+ background-color: var(--color-border-default);
1085
1184
  }
1086
- .bg-\(--layout-background-secondary\) {
1087
- background-color: var(--layout-background-secondary);
1185
+ .bg-\(--color-border-info\) {
1186
+ background-color: var(--color-border-info);
1088
1187
  }
1089
- .bg-\(--layout-background-success\) {
1090
- background-color: var(--layout-background-success);
1188
+ .bg-\(--color-border-link\) {
1189
+ background-color: var(--color-border-link);
1091
1190
  }
1092
- .bg-\(--layout-background-tertiary\) {
1093
- background-color: var(--layout-background-tertiary);
1191
+ .bg-\(--color-border-primary\) {
1192
+ background-color: var(--color-border-primary);
1094
1193
  }
1095
- .bg-\(--layout-background-warning\) {
1096
- background-color: var(--layout-background-warning);
1194
+ .bg-\(--color-border-secondary\) {
1195
+ background-color: var(--color-border-secondary);
1097
1196
  }
1098
- .bg-blue-100 {
1099
- background-color: var(--color-blue-100);
1197
+ .bg-\(--color-border-success\) {
1198
+ background-color: var(--color-border-success);
1100
1199
  }
1101
- .bg-green-50 {
1102
- background-color: var(--color-green-50);
1200
+ .bg-\(--color-border-tertiary\) {
1201
+ background-color: var(--color-border-tertiary);
1103
1202
  }
1104
- .bg-red-50 {
1105
- background-color: var(--color-red-50);
1203
+ .bg-\(--color-border-warning\) {
1204
+ background-color: var(--color-border-warning);
1205
+ }
1206
+ .bg-blue-500 {
1207
+ background-color: var(--color-blue-500);
1208
+ }
1209
+ .bg-blue-600 {
1210
+ background-color: var(--color-blue-600);
1211
+ }
1212
+ .bg-emerald-500 {
1213
+ background-color: var(--color-emerald-500);
1214
+ }
1215
+ .bg-gray-800 {
1216
+ background-color: var(--color-gray-800);
1217
+ }
1218
+ .bg-green-600 {
1219
+ background-color: var(--color-green-600);
1220
+ }
1221
+ .bg-purple-600 {
1222
+ background-color: var(--color-purple-600);
1223
+ }
1224
+ .bg-red-100 {
1225
+ background-color: var(--color-red-100);
1106
1226
  }
1107
1227
  .bg-transparent {
1108
1228
  background-color: transparent;
1109
1229
  }
1230
+ .bg-violet-600 {
1231
+ background-color: var(--color-violet-600);
1232
+ }
1233
+ .bg-gradient-to-r {
1234
+ --tw-gradient-position: to right in oklab;
1235
+ background-image: linear-gradient(var(--tw-gradient-stops));
1236
+ }
1237
+ .from-indigo-500 {
1238
+ --tw-gradient-from: var(--color-indigo-500);
1239
+ --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));
1240
+ }
1241
+ .to-purple-600 {
1242
+ --tw-gradient-to: var(--color-purple-600);
1243
+ --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));
1244
+ }
1110
1245
  .object-cover {
1111
1246
  object-fit: cover;
1112
1247
  }
1113
1248
  .p-0 {
1114
1249
  padding: calc(var(--spacing) * 0);
1115
1250
  }
1116
- .px-0 {
1117
- padding-inline: calc(var(--spacing) * 0);
1251
+ .p-4 {
1252
+ padding: calc(var(--spacing) * 4);
1118
1253
  }
1119
- .px-1 {
1120
- padding-inline: calc(var(--spacing) * 1);
1254
+ .px-\(--px\) {
1255
+ padding-inline: var(--px);
1121
1256
  }
1122
- .px-1\.5 {
1123
- padding-inline: calc(var(--spacing) * 1.5);
1257
+ .px-\(--ui-px\) {
1258
+ padding-inline: var(--ui-px);
1124
1259
  }
1125
1260
  .px-2 {
1126
1261
  padding-inline: calc(var(--spacing) * 2);
1127
1262
  }
1128
- .px-2\.5 {
1129
- padding-inline: calc(var(--spacing) * 2.5);
1130
- }
1131
1263
  .px-3 {
1132
1264
  padding-inline: calc(var(--spacing) * 3);
1133
1265
  }
1134
- .px-3\.5 {
1135
- padding-inline: calc(var(--spacing) * 3.5);
1136
- }
1137
1266
  .px-4 {
1138
1267
  padding-inline: calc(var(--spacing) * 4);
1139
1268
  }
@@ -1143,23 +1272,11 @@
1143
1272
  .px-6 {
1144
1273
  padding-inline: calc(var(--spacing) * 6);
1145
1274
  }
1146
- .px-7 {
1147
- padding-inline: calc(var(--spacing) * 7);
1148
- }
1149
- .px-8 {
1150
- padding-inline: calc(var(--spacing) * 8);
1151
- }
1152
- .px-9 {
1153
- padding-inline: calc(var(--spacing) * 9);
1154
- }
1155
- .px-10 {
1156
- padding-inline: calc(var(--spacing) * 10);
1275
+ .py-\(--py\) {
1276
+ padding-block: var(--py);
1157
1277
  }
1158
- .py-0 {
1159
- padding-block: calc(var(--spacing) * 0);
1160
- }
1161
- .py-0\.5 {
1162
- padding-block: calc(var(--spacing) * 0.5);
1278
+ .py-\(--ui-py\) {
1279
+ padding-block: var(--ui-py);
1163
1280
  }
1164
1281
  .py-1 {
1165
1282
  padding-block: calc(var(--spacing) * 1);
@@ -1179,9 +1296,6 @@
1179
1296
  .py-4 {
1180
1297
  padding-block: calc(var(--spacing) * 4);
1181
1298
  }
1182
- .py-5 {
1183
- padding-block: calc(var(--spacing) * 5);
1184
- }
1185
1299
  .py-6 {
1186
1300
  padding-block: calc(var(--spacing) * 6);
1187
1301
  }
@@ -1191,18 +1305,6 @@
1191
1305
  .py-10 {
1192
1306
  padding-block: calc(var(--spacing) * 10);
1193
1307
  }
1194
- .py-12 {
1195
- padding-block: calc(var(--spacing) * 12);
1196
- }
1197
- .py-16 {
1198
- padding-block: calc(var(--spacing) * 16);
1199
- }
1200
- .py-20 {
1201
- padding-block: calc(var(--spacing) * 20);
1202
- }
1203
- .pl-0 {
1204
- padding-left: calc(var(--spacing) * 0);
1205
- }
1206
1308
  .pl-2 {
1207
1309
  padding-left: calc(var(--spacing) * 2);
1208
1310
  }
@@ -1283,6 +1385,13 @@
1283
1385
  font-size: var(--text-xs);
1284
1386
  line-height: var(--tw-leading, var(--text-xs--line-height));
1285
1387
  }
1388
+ .text-\(length\:--fs\) {
1389
+ font-size: var(--fs);
1390
+ }
1391
+ .leading-\(--lh\) {
1392
+ --tw-leading: var(--lh);
1393
+ line-height: var(--lh);
1394
+ }
1286
1395
  .leading-relaxed {
1287
1396
  --tw-leading: var(--leading-relaxed);
1288
1397
  line-height: var(--leading-relaxed);
@@ -1337,35 +1446,65 @@
1337
1446
  .whitespace-nowrap {
1338
1447
  white-space: nowrap;
1339
1448
  }
1340
- .text-\(--text-color-accent\) {
1341
- color: var(--text-color-accent);
1449
+ .text-\(--color-text-accent\) {
1450
+ color: var(--color-text-accent);
1451
+ }
1452
+ .text-\(--color-text-danger\) {
1453
+ color: var(--color-text-danger);
1454
+ }
1455
+ .text-\(--color-text-default\) {
1456
+ color: var(--color-text-default);
1457
+ }
1458
+ .text-\(--color-text-filled-accent\) {
1459
+ color: var(--color-text-filled-accent);
1460
+ }
1461
+ .text-\(--color-text-filled-danger\) {
1462
+ color: var(--color-text-filled-danger);
1463
+ }
1464
+ .text-\(--color-text-filled-default\) {
1465
+ color: var(--color-text-filled-default);
1466
+ }
1467
+ .text-\(--color-text-filled-info\) {
1468
+ color: var(--color-text-filled-info);
1469
+ }
1470
+ .text-\(--color-text-filled-link\) {
1471
+ color: var(--color-text-filled-link);
1342
1472
  }
1343
- .text-\(--text-color-danger\) {
1344
- color: var(--text-color-danger);
1473
+ .text-\(--color-text-filled-primary\) {
1474
+ color: var(--color-text-filled-primary);
1345
1475
  }
1346
- .text-\(--text-color-default\) {
1347
- color: var(--text-color-default);
1476
+ .text-\(--color-text-filled-secondary\) {
1477
+ color: var(--color-text-filled-secondary);
1348
1478
  }
1349
- .text-\(--text-color-info\) {
1350
- color: var(--text-color-info);
1479
+ .text-\(--color-text-filled-success\) {
1480
+ color: var(--color-text-filled-success);
1351
1481
  }
1352
- .text-\(--text-color-link\) {
1353
- color: var(--text-color-link);
1482
+ .text-\(--color-text-filled-tertiary\) {
1483
+ color: var(--color-text-filled-tertiary);
1354
1484
  }
1355
- .text-\(--text-color-primary\) {
1356
- color: var(--text-color-primary);
1485
+ .text-\(--color-text-filled-warning\) {
1486
+ color: var(--color-text-filled-warning);
1357
1487
  }
1358
- .text-\(--text-color-secondary\) {
1359
- color: var(--text-color-secondary);
1488
+ .text-\(--color-text-info\) {
1489
+ color: var(--color-text-info);
1360
1490
  }
1361
- .text-\(--text-color-success\) {
1362
- color: var(--text-color-success);
1491
+ .text-\(--color-text-link\) {
1492
+ color: var(--color-text-link);
1363
1493
  }
1364
- .text-\(--text-color-tertiary\) {
1365
- color: var(--text-color-tertiary);
1494
+ .text-\(--color-text-primary\) {
1495
+ color: var(--color-text-primary);
1366
1496
  }
1367
- .text-\(--text-color-warning\) {
1368
- color: var(--text-color-warning);
1497
+ .text-\(--color-text-secondary\) {
1498
+ color: var(--color-text-secondary);
1499
+ }
1500
+ .text-\(--color-text-success\) {
1501
+ color: var(--color-text-success);
1502
+ }
1503
+ .text-\(--color-text-tertiary\) {
1504
+ color: var(--color-text-tertiary);
1505
+ }
1506
+ .text-\(--color-text-warning\) {
1507
+ color: var(--color-text-warning);
1369
1508
  }
1370
1509
  .text-blue-200 {
1371
1510
  color: var(--color-blue-200);
@@ -1376,12 +1515,27 @@
1376
1515
  .text-green-500 {
1377
1516
  color: var(--color-green-500);
1378
1517
  }
1518
+ .text-indigo-100 {
1519
+ color: var(--color-indigo-100);
1520
+ }
1521
+ .text-pink-600 {
1522
+ color: var(--color-pink-600);
1523
+ }
1524
+ .text-red-500 {
1525
+ color: var(--color-red-500);
1526
+ }
1379
1527
  .text-transparent {
1380
1528
  color: transparent;
1381
1529
  }
1530
+ .text-violet-600 {
1531
+ color: var(--color-violet-600);
1532
+ }
1382
1533
  .text-white {
1383
1534
  color: var(--color-white);
1384
1535
  }
1536
+ .text-yellow-100 {
1537
+ color: var(--color-yellow-100);
1538
+ }
1385
1539
  .capitalize {
1386
1540
  text-transform: capitalize;
1387
1541
  }
@@ -1412,65 +1566,65 @@
1412
1566
  .underline {
1413
1567
  text-decoration-line: underline;
1414
1568
  }
1415
- .accent-\(--background-color-accent\) {
1416
- accent-color: var(--background-color-accent);
1569
+ .accent-\(--color-bg-accent\) {
1570
+ accent-color: var(--color-bg-accent);
1417
1571
  }
1418
- .accent-\(--background-color-danger\) {
1419
- accent-color: var(--background-color-danger);
1572
+ .accent-\(--color-bg-danger\) {
1573
+ accent-color: var(--color-bg-danger);
1420
1574
  }
1421
- .accent-\(--background-color-default\) {
1422
- accent-color: var(--background-color-default);
1575
+ .accent-\(--color-bg-default\) {
1576
+ accent-color: var(--color-bg-default);
1423
1577
  }
1424
- .accent-\(--background-color-info\) {
1425
- accent-color: var(--background-color-info);
1578
+ .accent-\(--color-bg-filled-accent\) {
1579
+ accent-color: var(--color-bg-filled-accent);
1426
1580
  }
1427
- .accent-\(--background-color-link\) {
1428
- accent-color: var(--background-color-link);
1581
+ .accent-\(--color-bg-filled-danger\) {
1582
+ accent-color: var(--color-bg-filled-danger);
1429
1583
  }
1430
- .accent-\(--background-color-primary\) {
1431
- accent-color: var(--background-color-primary);
1584
+ .accent-\(--color-bg-filled-default\) {
1585
+ accent-color: var(--color-bg-filled-default);
1432
1586
  }
1433
- .accent-\(--background-color-secondary\) {
1434
- accent-color: var(--background-color-secondary);
1587
+ .accent-\(--color-bg-filled-info\) {
1588
+ accent-color: var(--color-bg-filled-info);
1435
1589
  }
1436
- .accent-\(--background-color-success\) {
1437
- accent-color: var(--background-color-success);
1590
+ .accent-\(--color-bg-filled-link\) {
1591
+ accent-color: var(--color-bg-filled-link);
1438
1592
  }
1439
- .accent-\(--background-color-tertiary\) {
1440
- accent-color: var(--background-color-tertiary);
1593
+ .accent-\(--color-bg-filled-primary\) {
1594
+ accent-color: var(--color-bg-filled-primary);
1441
1595
  }
1442
- .accent-\(--background-color-warning\) {
1443
- accent-color: var(--background-color-warning);
1596
+ .accent-\(--color-bg-filled-secondary\) {
1597
+ accent-color: var(--color-bg-filled-secondary);
1444
1598
  }
1445
- .accent-\(--filled-background-color-accent\) {
1446
- accent-color: var(--filled-background-color-accent);
1599
+ .accent-\(--color-bg-filled-success\) {
1600
+ accent-color: var(--color-bg-filled-success);
1447
1601
  }
1448
- .accent-\(--filled-background-color-danger\) {
1449
- accent-color: var(--filled-background-color-danger);
1602
+ .accent-\(--color-bg-filled-tertiary\) {
1603
+ accent-color: var(--color-bg-filled-tertiary);
1450
1604
  }
1451
- .accent-\(--filled-background-color-default\) {
1452
- accent-color: var(--filled-background-color-default);
1605
+ .accent-\(--color-bg-filled-warning\) {
1606
+ accent-color: var(--color-bg-filled-warning);
1453
1607
  }
1454
- .accent-\(--filled-background-color-info\) {
1455
- accent-color: var(--filled-background-color-info);
1608
+ .accent-\(--color-bg-info\) {
1609
+ accent-color: var(--color-bg-info);
1456
1610
  }
1457
- .accent-\(--filled-background-color-link\) {
1458
- accent-color: var(--filled-background-color-link);
1611
+ .accent-\(--color-bg-link\) {
1612
+ accent-color: var(--color-bg-link);
1459
1613
  }
1460
- .accent-\(--filled-background-color-primary\) {
1461
- accent-color: var(--filled-background-color-primary);
1614
+ .accent-\(--color-bg-primary\) {
1615
+ accent-color: var(--color-bg-primary);
1462
1616
  }
1463
- .accent-\(--filled-background-color-secondary\) {
1464
- accent-color: var(--filled-background-color-secondary);
1617
+ .accent-\(--color-bg-secondary\) {
1618
+ accent-color: var(--color-bg-secondary);
1465
1619
  }
1466
- .accent-\(--filled-background-color-success\) {
1467
- accent-color: var(--filled-background-color-success);
1620
+ .accent-\(--color-bg-success\) {
1621
+ accent-color: var(--color-bg-success);
1468
1622
  }
1469
- .accent-\(--filled-background-color-tertiary\) {
1470
- accent-color: var(--filled-background-color-tertiary);
1623
+ .accent-\(--color-bg-tertiary\) {
1624
+ accent-color: var(--color-bg-tertiary);
1471
1625
  }
1472
- .accent-\(--filled-background-color-warning\) {
1473
- accent-color: var(--filled-background-color-warning);
1626
+ .accent-\(--color-bg-warning\) {
1627
+ accent-color: var(--color-bg-warning);
1474
1628
  }
1475
1629
  .accent-transparent {
1476
1630
  accent-color: transparent;
@@ -1478,10 +1632,17 @@
1478
1632
  .opacity-50 {
1479
1633
  opacity: 50%;
1480
1634
  }
1635
+ .opacity-80 {
1636
+ opacity: 80%;
1637
+ }
1481
1638
  .shadow {
1482
1639
  --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));
1483
1640
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1484
1641
  }
1642
+ .shadow-2xl {
1643
+ --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
1644
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1645
+ }
1485
1646
  .shadow-2xs {
1486
1647
  --tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1487
1648
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1506,79 +1667,84 @@
1506
1667
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1507
1668
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1508
1669
  }
1509
- .ring-0 {
1510
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1511
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1512
- }
1513
1670
  .ring-2 {
1514
1671
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1515
1672
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1516
1673
  }
1674
+ .shadow-orange-500\/50 {
1675
+ --tw-shadow-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent);
1676
+ @supports (color: color-mix(in lab, red, red)) {
1677
+ --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
1678
+ }
1679
+ }
1517
1680
  .shadow-red-500 {
1518
1681
  --tw-shadow-color: oklch(63.7% 0.237 25.331);
1519
1682
  @supports (color: color-mix(in lab, red, red)) {
1520
1683
  --tw-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-shadow-alpha), transparent);
1521
1684
  }
1522
1685
  }
1523
- .ring-\(--border-color-accent\) {
1524
- --tw-ring-color: var(--border-color-accent);
1686
+ .ring-\(--color-border-accent\) {
1687
+ --tw-ring-color: var(--color-border-accent);
1688
+ }
1689
+ .ring-\(--color-border-danger\) {
1690
+ --tw-ring-color: var(--color-border-danger);
1525
1691
  }
1526
- .ring-\(--border-color-danger\) {
1527
- --tw-ring-color: var(--border-color-danger);
1692
+ .ring-\(--color-border-default\) {
1693
+ --tw-ring-color: var(--color-border-default);
1528
1694
  }
1529
- .ring-\(--border-color-default\) {
1530
- --tw-ring-color: var(--border-color-default);
1695
+ .ring-\(--color-border-filled-accent\) {
1696
+ --tw-ring-color: var(--color-border-filled-accent);
1531
1697
  }
1532
- .ring-\(--border-color-info\) {
1533
- --tw-ring-color: var(--border-color-info);
1698
+ .ring-\(--color-border-filled-danger\) {
1699
+ --tw-ring-color: var(--color-border-filled-danger);
1534
1700
  }
1535
- .ring-\(--border-color-link\) {
1536
- --tw-ring-color: var(--border-color-link);
1701
+ .ring-\(--color-border-filled-default\) {
1702
+ --tw-ring-color: var(--color-border-filled-default);
1537
1703
  }
1538
- .ring-\(--border-color-primary\) {
1539
- --tw-ring-color: var(--border-color-primary);
1704
+ .ring-\(--color-border-filled-info\) {
1705
+ --tw-ring-color: var(--color-border-filled-info);
1540
1706
  }
1541
- .ring-\(--border-color-secondary\) {
1542
- --tw-ring-color: var(--border-color-secondary);
1707
+ .ring-\(--color-border-filled-link\) {
1708
+ --tw-ring-color: var(--color-border-filled-link);
1543
1709
  }
1544
- .ring-\(--border-color-success\) {
1545
- --tw-ring-color: var(--border-color-success);
1710
+ .ring-\(--color-border-filled-primary\) {
1711
+ --tw-ring-color: var(--color-border-filled-primary);
1546
1712
  }
1547
- .ring-\(--border-color-tertiary\) {
1548
- --tw-ring-color: var(--border-color-tertiary);
1713
+ .ring-\(--color-border-filled-secondary\) {
1714
+ --tw-ring-color: var(--color-border-filled-secondary);
1549
1715
  }
1550
- .ring-\(--border-color-warning\) {
1551
- --tw-ring-color: var(--border-color-warning);
1716
+ .ring-\(--color-border-filled-success\) {
1717
+ --tw-ring-color: var(--color-border-filled-success);
1552
1718
  }
1553
- .ring-\(--filled-border-color-accent\) {
1554
- --tw-ring-color: var(--filled-border-color-accent);
1719
+ .ring-\(--color-border-filled-tertiary\) {
1720
+ --tw-ring-color: var(--color-border-filled-tertiary);
1555
1721
  }
1556
- .ring-\(--filled-border-color-danger\) {
1557
- --tw-ring-color: var(--filled-border-color-danger);
1722
+ .ring-\(--color-border-filled-warning\) {
1723
+ --tw-ring-color: var(--color-border-filled-warning);
1558
1724
  }
1559
- .ring-\(--filled-border-color-default\) {
1560
- --tw-ring-color: var(--filled-border-color-default);
1725
+ .ring-\(--color-border-info\) {
1726
+ --tw-ring-color: var(--color-border-info);
1561
1727
  }
1562
- .ring-\(--filled-border-color-info\) {
1563
- --tw-ring-color: var(--filled-border-color-info);
1728
+ .ring-\(--color-border-link\) {
1729
+ --tw-ring-color: var(--color-border-link);
1564
1730
  }
1565
- .ring-\(--filled-border-color-link\) {
1566
- --tw-ring-color: var(--filled-border-color-link);
1731
+ .ring-\(--color-border-primary\) {
1732
+ --tw-ring-color: var(--color-border-primary);
1567
1733
  }
1568
- .ring-\(--filled-border-color-primary\) {
1569
- --tw-ring-color: var(--filled-border-color-primary);
1734
+ .ring-\(--color-border-secondary\) {
1735
+ --tw-ring-color: var(--color-border-secondary);
1570
1736
  }
1571
- .ring-\(--filled-border-color-secondary\) {
1572
- --tw-ring-color: var(--filled-border-color-secondary);
1737
+ .ring-\(--color-border-success\) {
1738
+ --tw-ring-color: var(--color-border-success);
1573
1739
  }
1574
- .ring-\(--filled-border-color-success\) {
1575
- --tw-ring-color: var(--filled-border-color-success);
1740
+ .ring-\(--color-border-tertiary\) {
1741
+ --tw-ring-color: var(--color-border-tertiary);
1576
1742
  }
1577
- .ring-\(--filled-border-color-tertiary\) {
1578
- --tw-ring-color: var(--filled-border-color-tertiary);
1743
+ .ring-\(--color-border-warning\) {
1744
+ --tw-ring-color: var(--color-border-warning);
1579
1745
  }
1580
- .ring-\(--filled-border-color-warning\) {
1581
- --tw-ring-color: var(--filled-border-color-warning);
1746
+ .ring-orange-500 {
1747
+ --tw-ring-color: var(--color-orange-500);
1582
1748
  }
1583
1749
  .ring-transparent {
1584
1750
  --tw-ring-color: transparent;
@@ -1595,10 +1761,230 @@
1595
1761
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1596
1762
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1597
1763
  }
1764
+ .transition-shadow {
1765
+ transition-property: box-shadow;
1766
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1767
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1768
+ }
1769
+ .transition-transform {
1770
+ transition-property: transform, translate, scale, rotate;
1771
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1772
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1773
+ }
1598
1774
  .duration-200 {
1599
1775
  --tw-duration: 200ms;
1600
1776
  transition-duration: 200ms;
1601
1777
  }
1778
+ .\[--aspect-ratio\:1\.5\] {
1779
+ --aspect-ratio: 1.5;
1780
+ }
1781
+ .\[--aspect-ratio\:1\.6\] {
1782
+ --aspect-ratio: 1.6;
1783
+ }
1784
+ .\[--aspect-ratio\:1\.8\] {
1785
+ --aspect-ratio: 1.8;
1786
+ }
1787
+ .\[--aspect-ratio\:1\.75\] {
1788
+ --aspect-ratio: 1.75;
1789
+ }
1790
+ .\[--aspect-ratio\:1\] {
1791
+ --aspect-ratio: 1;
1792
+ }
1793
+ .\[--aspect-ratio\:2\.5\] {
1794
+ --aspect-ratio: 2.5;
1795
+ }
1796
+ .\[--aspect-ratio\:2\] {
1797
+ --aspect-ratio: 2;
1798
+ }
1799
+ .\[--br-unit\:1\.5\] {
1800
+ --br-unit: 1.5;
1801
+ }
1802
+ .\[--br-unit\:1\] {
1803
+ --br-unit: 1;
1804
+ }
1805
+ .\[--br-unit\:2\.5\] {
1806
+ --br-unit: 2.5;
1807
+ }
1808
+ .\[--br-unit\:2\] {
1809
+ --br-unit: 2;
1810
+ }
1811
+ .\[--br-unit\:3\] {
1812
+ --br-unit: 3;
1813
+ }
1814
+ .\[--br-unit\:4\] {
1815
+ --br-unit: 4;
1816
+ }
1817
+ .\[--br-unit\:5\] {
1818
+ --br-unit: 5;
1819
+ }
1820
+ .\[--br-unit\:6\] {
1821
+ --br-unit: 6;
1822
+ }
1823
+ .\[--br-unit\:7\] {
1824
+ --br-unit: 7;
1825
+ }
1826
+ .\[--fs-unit\:5\] {
1827
+ --fs-unit: 5;
1828
+ }
1829
+ .\[--fs-unit\:6\] {
1830
+ --fs-unit: 6;
1831
+ }
1832
+ .\[--fs-unit\:7\] {
1833
+ --fs-unit: 7;
1834
+ }
1835
+ .\[--fs-unit\:8\] {
1836
+ --fs-unit: 8;
1837
+ }
1838
+ .\[--fs-unit\:9\] {
1839
+ --fs-unit: 9;
1840
+ }
1841
+ .\[--fs-unit\:10\] {
1842
+ --fs-unit: 10;
1843
+ }
1844
+ .\[--fs-unit\:12\] {
1845
+ --fs-unit: 12;
1846
+ }
1847
+ .\[--fs-unit\:15\] {
1848
+ --fs-unit: 15;
1849
+ }
1850
+ .\[--fs-unit\:18\] {
1851
+ --fs-unit: 18;
1852
+ }
1853
+ .\[--fs-unit\:24\] {
1854
+ --fs-unit: 24;
1855
+ }
1856
+ .\[--fs-unit\:30\] {
1857
+ --fs-unit: 30;
1858
+ }
1859
+ .\[--fs-unit\:36\] {
1860
+ --fs-unit: 36;
1861
+ }
1862
+ .\[--gap-unit\:1\.5\] {
1863
+ --gap-unit: 1.5;
1864
+ }
1865
+ .\[--gap-unit\:1\] {
1866
+ --gap-unit: 1;
1867
+ }
1868
+ .\[--gap-unit\:2\.5\] {
1869
+ --gap-unit: 2.5;
1870
+ }
1871
+ .\[--gap-unit\:2\] {
1872
+ --gap-unit: 2;
1873
+ }
1874
+ .\[--gap-unit\:3\] {
1875
+ --gap-unit: 3;
1876
+ }
1877
+ .\[--gap-unit\:4\] {
1878
+ --gap-unit: 4;
1879
+ }
1880
+ .\[--gap-unit\:5\] {
1881
+ --gap-unit: 5;
1882
+ }
1883
+ .\[--gap-unit\:6\] {
1884
+ --gap-unit: 6;
1885
+ }
1886
+ .\[--gap-unit\:8\] {
1887
+ --gap-unit: 8;
1888
+ }
1889
+ .\[--gap-unit\:10\] {
1890
+ --gap-unit: 10;
1891
+ }
1892
+ .\[--gap-unit\:12\] {
1893
+ --gap-unit: 12;
1894
+ }
1895
+ .\[--lh\:1\.2\] {
1896
+ --lh: 1.2;
1897
+ }
1898
+ .\[--lh\:1\.3\] {
1899
+ --lh: 1.3;
1900
+ }
1901
+ .\[--lh\:1\.4\] {
1902
+ --lh: 1.4;
1903
+ }
1904
+ .\[--lh\:1\.6\] {
1905
+ --lh: 1.6;
1906
+ }
1907
+ .\[--lh\:1\.111\] {
1908
+ --lh: 1.111;
1909
+ }
1910
+ .\[--lh\:1\.333\] {
1911
+ --lh: 1.333;
1912
+ }
1913
+ .\[--lh\:1\.556\] {
1914
+ --lh: 1.556;
1915
+ }
1916
+ .\[--lh\:1\] {
1917
+ --lh: 1;
1918
+ }
1919
+ .\[--py-unit\:0\.4\] {
1920
+ --py-unit: 0.4;
1921
+ }
1922
+ .\[--py-unit\:0\.5\] {
1923
+ --py-unit: 0.5;
1924
+ }
1925
+ .\[--py-unit\:0\.6\] {
1926
+ --py-unit: 0.6;
1927
+ }
1928
+ .\[--py-unit\:0\.8\] {
1929
+ --py-unit: 0.8;
1930
+ }
1931
+ .\[--py-unit\:1\.2\] {
1932
+ --py-unit: 1.2;
1933
+ }
1934
+ .\[--py-unit\:1\.5\] {
1935
+ --py-unit: 1.5;
1936
+ }
1937
+ .\[--py-unit\:1\] {
1938
+ --py-unit: 1;
1939
+ }
1940
+ .\[--py-unit\:2\.5\] {
1941
+ --py-unit: 2.5;
1942
+ }
1943
+ .\[--py-unit\:2\] {
1944
+ --py-unit: 2;
1945
+ }
1946
+ .\[--py-unit\:3\] {
1947
+ --py-unit: 3;
1948
+ }
1949
+ .\[--py-unit\:4\] {
1950
+ --py-unit: 4;
1951
+ }
1952
+ .\[--py-unit\:5\] {
1953
+ --py-unit: 5;
1954
+ }
1955
+ .\[--py-unit\:6\] {
1956
+ --py-unit: 6;
1957
+ }
1958
+ .\[--py-unit\:8\] {
1959
+ --py-unit: 8;
1960
+ }
1961
+ .\[--py-unit\:10\] {
1962
+ --py-unit: 10;
1963
+ }
1964
+ .\[--py-unit\:12\] {
1965
+ --py-unit: 12;
1966
+ }
1967
+ .\[--py-unit\:16\] {
1968
+ --py-unit: 16;
1969
+ }
1970
+ .\[--py-unit\:20\] {
1971
+ --py-unit: 20;
1972
+ }
1973
+ .\[--size-unit\:3\.5\] {
1974
+ --size-unit: 3.5;
1975
+ }
1976
+ .\[--size-unit\:3\] {
1977
+ --size-unit: 3;
1978
+ }
1979
+ .\[--size-unit\:4\.5\] {
1980
+ --size-unit: 4.5;
1981
+ }
1982
+ .\[--size-unit\:4\] {
1983
+ --size-unit: 4;
1984
+ }
1985
+ .\[--size-unit\:5\] {
1986
+ --size-unit: 5;
1987
+ }
1602
1988
  .ring-inset {
1603
1989
  --tw-ring-inset: inset;
1604
1990
  }
@@ -1607,104 +1993,104 @@
1607
1993
  visibility: visible;
1608
1994
  }
1609
1995
  }
1610
- .checked\:bg-\(--background-color-accent\) {
1996
+ .checked\:bg-\(--color-bg-accent\) {
1611
1997
  &:checked {
1612
- background-color: var(--background-color-accent);
1998
+ background-color: var(--color-bg-accent);
1613
1999
  }
1614
2000
  }
1615
- .checked\:bg-\(--background-color-danger\) {
2001
+ .checked\:bg-\(--color-bg-danger\) {
1616
2002
  &:checked {
1617
- background-color: var(--background-color-danger);
2003
+ background-color: var(--color-bg-danger);
1618
2004
  }
1619
2005
  }
1620
- .checked\:bg-\(--background-color-default\) {
2006
+ .checked\:bg-\(--color-bg-default\) {
1621
2007
  &:checked {
1622
- background-color: var(--background-color-default);
2008
+ background-color: var(--color-bg-default);
1623
2009
  }
1624
2010
  }
1625
- .checked\:bg-\(--background-color-info\) {
2011
+ .checked\:bg-\(--color-bg-filled-accent\) {
1626
2012
  &:checked {
1627
- background-color: var(--background-color-info);
2013
+ background-color: var(--color-bg-filled-accent);
1628
2014
  }
1629
2015
  }
1630
- .checked\:bg-\(--background-color-link\) {
2016
+ .checked\:bg-\(--color-bg-filled-danger\) {
1631
2017
  &:checked {
1632
- background-color: var(--background-color-link);
2018
+ background-color: var(--color-bg-filled-danger);
1633
2019
  }
1634
2020
  }
1635
- .checked\:bg-\(--background-color-primary\) {
2021
+ .checked\:bg-\(--color-bg-filled-default\) {
1636
2022
  &:checked {
1637
- background-color: var(--background-color-primary);
2023
+ background-color: var(--color-bg-filled-default);
1638
2024
  }
1639
2025
  }
1640
- .checked\:bg-\(--background-color-secondary\) {
2026
+ .checked\:bg-\(--color-bg-filled-info\) {
1641
2027
  &:checked {
1642
- background-color: var(--background-color-secondary);
2028
+ background-color: var(--color-bg-filled-info);
1643
2029
  }
1644
2030
  }
1645
- .checked\:bg-\(--background-color-success\) {
2031
+ .checked\:bg-\(--color-bg-filled-link\) {
1646
2032
  &:checked {
1647
- background-color: var(--background-color-success);
2033
+ background-color: var(--color-bg-filled-link);
1648
2034
  }
1649
2035
  }
1650
- .checked\:bg-\(--background-color-tertiary\) {
2036
+ .checked\:bg-\(--color-bg-filled-primary\) {
1651
2037
  &:checked {
1652
- background-color: var(--background-color-tertiary);
2038
+ background-color: var(--color-bg-filled-primary);
1653
2039
  }
1654
2040
  }
1655
- .checked\:bg-\(--background-color-warning\) {
2041
+ .checked\:bg-\(--color-bg-filled-secondary\) {
1656
2042
  &:checked {
1657
- background-color: var(--background-color-warning);
2043
+ background-color: var(--color-bg-filled-secondary);
1658
2044
  }
1659
2045
  }
1660
- .checked\:bg-\(--filled-background-color-accent\) {
2046
+ .checked\:bg-\(--color-bg-filled-success\) {
1661
2047
  &:checked {
1662
- background-color: var(--filled-background-color-accent);
2048
+ background-color: var(--color-bg-filled-success);
1663
2049
  }
1664
2050
  }
1665
- .checked\:bg-\(--filled-background-color-danger\) {
2051
+ .checked\:bg-\(--color-bg-filled-tertiary\) {
1666
2052
  &:checked {
1667
- background-color: var(--filled-background-color-danger);
2053
+ background-color: var(--color-bg-filled-tertiary);
1668
2054
  }
1669
2055
  }
1670
- .checked\:bg-\(--filled-background-color-default\) {
2056
+ .checked\:bg-\(--color-bg-filled-warning\) {
1671
2057
  &:checked {
1672
- background-color: var(--filled-background-color-default);
2058
+ background-color: var(--color-bg-filled-warning);
1673
2059
  }
1674
2060
  }
1675
- .checked\:bg-\(--filled-background-color-info\) {
2061
+ .checked\:bg-\(--color-bg-info\) {
1676
2062
  &:checked {
1677
- background-color: var(--filled-background-color-info);
2063
+ background-color: var(--color-bg-info);
1678
2064
  }
1679
2065
  }
1680
- .checked\:bg-\(--filled-background-color-link\) {
2066
+ .checked\:bg-\(--color-bg-link\) {
1681
2067
  &:checked {
1682
- background-color: var(--filled-background-color-link);
2068
+ background-color: var(--color-bg-link);
1683
2069
  }
1684
2070
  }
1685
- .checked\:bg-\(--filled-background-color-primary\) {
2071
+ .checked\:bg-\(--color-bg-primary\) {
1686
2072
  &:checked {
1687
- background-color: var(--filled-background-color-primary);
2073
+ background-color: var(--color-bg-primary);
1688
2074
  }
1689
2075
  }
1690
- .checked\:bg-\(--filled-background-color-secondary\) {
2076
+ .checked\:bg-\(--color-bg-secondary\) {
1691
2077
  &:checked {
1692
- background-color: var(--filled-background-color-secondary);
2078
+ background-color: var(--color-bg-secondary);
1693
2079
  }
1694
2080
  }
1695
- .checked\:bg-\(--filled-background-color-success\) {
2081
+ .checked\:bg-\(--color-bg-success\) {
1696
2082
  &:checked {
1697
- background-color: var(--filled-background-color-success);
2083
+ background-color: var(--color-bg-success);
1698
2084
  }
1699
2085
  }
1700
- .checked\:bg-\(--filled-background-color-tertiary\) {
2086
+ .checked\:bg-\(--color-bg-tertiary\) {
1701
2087
  &:checked {
1702
- background-color: var(--filled-background-color-tertiary);
2088
+ background-color: var(--color-bg-tertiary);
1703
2089
  }
1704
2090
  }
1705
- .checked\:bg-\(--filled-background-color-warning\) {
2091
+ .checked\:bg-\(--color-bg-warning\) {
1706
2092
  &:checked {
1707
- background-color: var(--filled-background-color-warning);
2093
+ background-color: var(--color-bg-warning);
1708
2094
  }
1709
2095
  }
1710
2096
  .checked\:bg-transparent {
@@ -1722,151 +2108,164 @@
1722
2108
  }
1723
2109
  }
1724
2110
  }
1725
- .hover\:border {
2111
+ .hover\:border-green-600 {
2112
+ &:hover {
2113
+ @media (hover: hover) {
2114
+ border-color: var(--color-green-600);
2115
+ }
2116
+ }
2117
+ }
2118
+ .hover\:bg-\(--color-bg-filled-hover-accent\) {
2119
+ &:hover {
2120
+ @media (hover: hover) {
2121
+ background-color: var(--color-bg-filled-hover-accent);
2122
+ }
2123
+ }
2124
+ }
2125
+ .hover\:bg-\(--color-bg-filled-hover-danger\) {
1726
2126
  &:hover {
1727
2127
  @media (hover: hover) {
1728
- border-style: var(--tw-border-style);
1729
- border-width: 1px;
2128
+ background-color: var(--color-bg-filled-hover-danger);
1730
2129
  }
1731
2130
  }
1732
2131
  }
1733
- .hover\:bg-\(--background-color-hover-accent\) {
2132
+ .hover\:bg-\(--color-bg-filled-hover-default\) {
1734
2133
  &:hover {
1735
2134
  @media (hover: hover) {
1736
- background-color: var(--background-color-hover-accent);
2135
+ background-color: var(--color-bg-filled-hover-default);
1737
2136
  }
1738
2137
  }
1739
2138
  }
1740
- .hover\:bg-\(--background-color-hover-danger\) {
2139
+ .hover\:bg-\(--color-bg-filled-hover-info\) {
1741
2140
  &:hover {
1742
2141
  @media (hover: hover) {
1743
- background-color: var(--background-color-hover-danger);
2142
+ background-color: var(--color-bg-filled-hover-info);
1744
2143
  }
1745
2144
  }
1746
2145
  }
1747
- .hover\:bg-\(--background-color-hover-default\) {
2146
+ .hover\:bg-\(--color-bg-filled-hover-link\) {
1748
2147
  &:hover {
1749
2148
  @media (hover: hover) {
1750
- background-color: var(--background-color-hover-default);
2149
+ background-color: var(--color-bg-filled-hover-link);
1751
2150
  }
1752
2151
  }
1753
2152
  }
1754
- .hover\:bg-\(--background-color-hover-info\) {
2153
+ .hover\:bg-\(--color-bg-filled-hover-primary\) {
1755
2154
  &:hover {
1756
2155
  @media (hover: hover) {
1757
- background-color: var(--background-color-hover-info);
2156
+ background-color: var(--color-bg-filled-hover-primary);
1758
2157
  }
1759
2158
  }
1760
2159
  }
1761
- .hover\:bg-\(--background-color-hover-link\) {
2160
+ .hover\:bg-\(--color-bg-filled-hover-secondary\) {
1762
2161
  &:hover {
1763
2162
  @media (hover: hover) {
1764
- background-color: var(--background-color-hover-link);
2163
+ background-color: var(--color-bg-filled-hover-secondary);
1765
2164
  }
1766
2165
  }
1767
2166
  }
1768
- .hover\:bg-\(--background-color-hover-primary\) {
2167
+ .hover\:bg-\(--color-bg-filled-hover-success\) {
1769
2168
  &:hover {
1770
2169
  @media (hover: hover) {
1771
- background-color: var(--background-color-hover-primary);
2170
+ background-color: var(--color-bg-filled-hover-success);
1772
2171
  }
1773
2172
  }
1774
2173
  }
1775
- .hover\:bg-\(--background-color-hover-secondary\) {
2174
+ .hover\:bg-\(--color-bg-filled-hover-tertiary\) {
1776
2175
  &:hover {
1777
2176
  @media (hover: hover) {
1778
- background-color: var(--background-color-hover-secondary);
2177
+ background-color: var(--color-bg-filled-hover-tertiary);
1779
2178
  }
1780
2179
  }
1781
2180
  }
1782
- .hover\:bg-\(--background-color-hover-success\) {
2181
+ .hover\:bg-\(--color-bg-filled-hover-warning\) {
1783
2182
  &:hover {
1784
2183
  @media (hover: hover) {
1785
- background-color: var(--background-color-hover-success);
2184
+ background-color: var(--color-bg-filled-hover-warning);
1786
2185
  }
1787
2186
  }
1788
2187
  }
1789
- .hover\:bg-\(--background-color-hover-tertiary\) {
2188
+ .hover\:bg-\(--color-bg-hover-accent\) {
1790
2189
  &:hover {
1791
2190
  @media (hover: hover) {
1792
- background-color: var(--background-color-hover-tertiary);
2191
+ background-color: var(--color-bg-hover-accent);
1793
2192
  }
1794
2193
  }
1795
2194
  }
1796
- .hover\:bg-\(--background-color-hover-warning\) {
2195
+ .hover\:bg-\(--color-bg-hover-danger\) {
1797
2196
  &:hover {
1798
2197
  @media (hover: hover) {
1799
- background-color: var(--background-color-hover-warning);
2198
+ background-color: var(--color-bg-hover-danger);
1800
2199
  }
1801
2200
  }
1802
2201
  }
1803
- .hover\:bg-\(--filled-background-color-hover-accent\) {
2202
+ .hover\:bg-\(--color-bg-hover-default\) {
1804
2203
  &:hover {
1805
2204
  @media (hover: hover) {
1806
- background-color: var(--filled-background-color-hover-accent);
2205
+ background-color: var(--color-bg-hover-default);
1807
2206
  }
1808
2207
  }
1809
2208
  }
1810
- .hover\:bg-\(--filled-background-color-hover-danger\) {
2209
+ .hover\:bg-\(--color-bg-hover-info\) {
1811
2210
  &:hover {
1812
2211
  @media (hover: hover) {
1813
- background-color: var(--filled-background-color-hover-danger);
2212
+ background-color: var(--color-bg-hover-info);
1814
2213
  }
1815
2214
  }
1816
2215
  }
1817
- .hover\:bg-\(--filled-background-color-hover-default\) {
2216
+ .hover\:bg-\(--color-bg-hover-link\) {
1818
2217
  &:hover {
1819
2218
  @media (hover: hover) {
1820
- background-color: var(--filled-background-color-hover-default);
2219
+ background-color: var(--color-bg-hover-link);
1821
2220
  }
1822
2221
  }
1823
2222
  }
1824
- .hover\:bg-\(--filled-background-color-hover-info\) {
2223
+ .hover\:bg-\(--color-bg-hover-primary\) {
1825
2224
  &:hover {
1826
2225
  @media (hover: hover) {
1827
- background-color: var(--filled-background-color-hover-info);
2226
+ background-color: var(--color-bg-hover-primary);
1828
2227
  }
1829
2228
  }
1830
2229
  }
1831
- .hover\:bg-\(--filled-background-color-hover-link\) {
2230
+ .hover\:bg-\(--color-bg-hover-secondary\) {
1832
2231
  &:hover {
1833
2232
  @media (hover: hover) {
1834
- background-color: var(--filled-background-color-hover-link);
2233
+ background-color: var(--color-bg-hover-secondary);
1835
2234
  }
1836
2235
  }
1837
2236
  }
1838
- .hover\:bg-\(--filled-background-color-hover-primary\) {
2237
+ .hover\:bg-\(--color-bg-hover-success\) {
1839
2238
  &:hover {
1840
2239
  @media (hover: hover) {
1841
- background-color: var(--filled-background-color-hover-primary);
2240
+ background-color: var(--color-bg-hover-success);
1842
2241
  }
1843
2242
  }
1844
2243
  }
1845
- .hover\:bg-\(--filled-background-color-hover-secondary\) {
2244
+ .hover\:bg-\(--color-bg-hover-tertiary\) {
1846
2245
  &:hover {
1847
2246
  @media (hover: hover) {
1848
- background-color: var(--filled-background-color-hover-secondary);
2247
+ background-color: var(--color-bg-hover-tertiary);
1849
2248
  }
1850
2249
  }
1851
2250
  }
1852
- .hover\:bg-\(--filled-background-color-hover-success\) {
2251
+ .hover\:bg-\(--color-bg-hover-warning\) {
1853
2252
  &:hover {
1854
2253
  @media (hover: hover) {
1855
- background-color: var(--filled-background-color-hover-success);
2254
+ background-color: var(--color-bg-hover-warning);
1856
2255
  }
1857
2256
  }
1858
2257
  }
1859
- .hover\:bg-\(--filled-background-color-hover-tertiary\) {
2258
+ .hover\:bg-purple-700 {
1860
2259
  &:hover {
1861
2260
  @media (hover: hover) {
1862
- background-color: var(--filled-background-color-hover-tertiary);
2261
+ background-color: var(--color-purple-700);
1863
2262
  }
1864
2263
  }
1865
2264
  }
1866
- .hover\:bg-\(--filled-background-color-hover-warning\) {
2265
+ .hover\:bg-red-200 {
1867
2266
  &:hover {
1868
2267
  @media (hover: hover) {
1869
- background-color: var(--filled-background-color-hover-warning);
2268
+ background-color: var(--color-red-200);
1870
2269
  }
1871
2270
  }
1872
2271
  }
@@ -1884,6 +2283,13 @@
1884
2283
  }
1885
2284
  }
1886
2285
  }
2286
+ .hover\:text-indigo-50 {
2287
+ &:hover {
2288
+ @media (hover: hover) {
2289
+ color: var(--color-indigo-50);
2290
+ }
2291
+ }
2292
+ }
1887
2293
  .hover\:underline {
1888
2294
  &:hover {
1889
2295
  @media (hover: hover) {
@@ -1891,6 +2297,13 @@
1891
2297
  }
1892
2298
  }
1893
2299
  }
2300
+ .hover\:opacity-80 {
2301
+ &:hover {
2302
+ @media (hover: hover) {
2303
+ opacity: 80%;
2304
+ }
2305
+ }
2306
+ }
1894
2307
  .hover\:shadow-lg {
1895
2308
  &:hover {
1896
2309
  @media (hover: hover) {
@@ -1939,14 +2352,6 @@
1939
2352
  }
1940
2353
  }
1941
2354
  }
1942
- .hover\:ring-0 {
1943
- &:hover {
1944
- @media (hover: hover) {
1945
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1946
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1947
- }
1948
- }
1949
- }
1950
2355
  .hover\:ring-inset {
1951
2356
  &:hover {
1952
2357
  @media (hover: hover) {
@@ -1954,110 +2359,230 @@
1954
2359
  }
1955
2360
  }
1956
2361
  }
1957
- .active\:border {
2362
+ .focus-visible\:outline-2 {
2363
+ &:focus-visible {
2364
+ outline-style: var(--tw-outline-style);
2365
+ outline-width: 2px;
2366
+ }
2367
+ }
2368
+ .focus-visible\:outline-offset-2 {
2369
+ &:focus-visible {
2370
+ outline-offset: 2px;
2371
+ }
2372
+ }
2373
+ .focus-visible\:outline-\(--color-border-accent\) {
2374
+ &:focus-visible {
2375
+ outline-color: var(--color-border-accent);
2376
+ }
2377
+ }
2378
+ .focus-visible\:outline-\(--color-border-danger\) {
2379
+ &:focus-visible {
2380
+ outline-color: var(--color-border-danger);
2381
+ }
2382
+ }
2383
+ .focus-visible\:outline-\(--color-border-default\) {
2384
+ &:focus-visible {
2385
+ outline-color: var(--color-border-default);
2386
+ }
2387
+ }
2388
+ .focus-visible\:outline-\(--color-border-filled-accent\) {
2389
+ &:focus-visible {
2390
+ outline-color: var(--color-border-filled-accent);
2391
+ }
2392
+ }
2393
+ .focus-visible\:outline-\(--color-border-filled-danger\) {
2394
+ &:focus-visible {
2395
+ outline-color: var(--color-border-filled-danger);
2396
+ }
2397
+ }
2398
+ .focus-visible\:outline-\(--color-border-filled-default\) {
2399
+ &:focus-visible {
2400
+ outline-color: var(--color-border-filled-default);
2401
+ }
2402
+ }
2403
+ .focus-visible\:outline-\(--color-border-filled-info\) {
2404
+ &:focus-visible {
2405
+ outline-color: var(--color-border-filled-info);
2406
+ }
2407
+ }
2408
+ .focus-visible\:outline-\(--color-border-filled-link\) {
2409
+ &:focus-visible {
2410
+ outline-color: var(--color-border-filled-link);
2411
+ }
2412
+ }
2413
+ .focus-visible\:outline-\(--color-border-filled-primary\) {
2414
+ &:focus-visible {
2415
+ outline-color: var(--color-border-filled-primary);
2416
+ }
2417
+ }
2418
+ .focus-visible\:outline-\(--color-border-filled-secondary\) {
2419
+ &:focus-visible {
2420
+ outline-color: var(--color-border-filled-secondary);
2421
+ }
2422
+ }
2423
+ .focus-visible\:outline-\(--color-border-filled-success\) {
2424
+ &:focus-visible {
2425
+ outline-color: var(--color-border-filled-success);
2426
+ }
2427
+ }
2428
+ .focus-visible\:outline-\(--color-border-filled-tertiary\) {
2429
+ &:focus-visible {
2430
+ outline-color: var(--color-border-filled-tertiary);
2431
+ }
2432
+ }
2433
+ .focus-visible\:outline-\(--color-border-filled-warning\) {
2434
+ &:focus-visible {
2435
+ outline-color: var(--color-border-filled-warning);
2436
+ }
2437
+ }
2438
+ .focus-visible\:outline-\(--color-border-info\) {
2439
+ &:focus-visible {
2440
+ outline-color: var(--color-border-info);
2441
+ }
2442
+ }
2443
+ .focus-visible\:outline-\(--color-border-link\) {
2444
+ &:focus-visible {
2445
+ outline-color: var(--color-border-link);
2446
+ }
2447
+ }
2448
+ .focus-visible\:outline-\(--color-border-primary\) {
2449
+ &:focus-visible {
2450
+ outline-color: var(--color-border-primary);
2451
+ }
2452
+ }
2453
+ .focus-visible\:outline-\(--color-border-secondary\) {
2454
+ &:focus-visible {
2455
+ outline-color: var(--color-border-secondary);
2456
+ }
2457
+ }
2458
+ .focus-visible\:outline-\(--color-border-success\) {
2459
+ &:focus-visible {
2460
+ outline-color: var(--color-border-success);
2461
+ }
2462
+ }
2463
+ .focus-visible\:outline-\(--color-border-tertiary\) {
2464
+ &:focus-visible {
2465
+ outline-color: var(--color-border-tertiary);
2466
+ }
2467
+ }
2468
+ .focus-visible\:outline-\(--color-border-warning\) {
2469
+ &:focus-visible {
2470
+ outline-color: var(--color-border-warning);
2471
+ }
2472
+ }
2473
+ .focus-visible\:outline-transparent {
2474
+ &:focus-visible {
2475
+ outline-color: transparent;
2476
+ }
2477
+ }
2478
+ .active\:border-green-700 {
1958
2479
  &:active {
1959
- border-style: var(--tw-border-style);
1960
- border-width: 1px;
2480
+ border-color: var(--color-green-700);
1961
2481
  }
1962
2482
  }
1963
- .active\:bg-\(--background-color-active-accent\) {
2483
+ .active\:bg-\(--color-bg-active-accent\) {
1964
2484
  &:active {
1965
- background-color: var(--background-color-active-accent);
2485
+ background-color: var(--color-bg-active-accent);
1966
2486
  }
1967
2487
  }
1968
- .active\:bg-\(--background-color-active-danger\) {
2488
+ .active\:bg-\(--color-bg-active-danger\) {
1969
2489
  &:active {
1970
- background-color: var(--background-color-active-danger);
2490
+ background-color: var(--color-bg-active-danger);
1971
2491
  }
1972
2492
  }
1973
- .active\:bg-\(--background-color-active-default\) {
2493
+ .active\:bg-\(--color-bg-active-default\) {
1974
2494
  &:active {
1975
- background-color: var(--background-color-active-default);
2495
+ background-color: var(--color-bg-active-default);
1976
2496
  }
1977
2497
  }
1978
- .active\:bg-\(--background-color-active-info\) {
2498
+ .active\:bg-\(--color-bg-active-info\) {
1979
2499
  &:active {
1980
- background-color: var(--background-color-active-info);
2500
+ background-color: var(--color-bg-active-info);
1981
2501
  }
1982
2502
  }
1983
- .active\:bg-\(--background-color-active-link\) {
2503
+ .active\:bg-\(--color-bg-active-link\) {
1984
2504
  &:active {
1985
- background-color: var(--background-color-active-link);
2505
+ background-color: var(--color-bg-active-link);
1986
2506
  }
1987
2507
  }
1988
- .active\:bg-\(--background-color-active-primary\) {
2508
+ .active\:bg-\(--color-bg-active-primary\) {
1989
2509
  &:active {
1990
- background-color: var(--background-color-active-primary);
2510
+ background-color: var(--color-bg-active-primary);
1991
2511
  }
1992
2512
  }
1993
- .active\:bg-\(--background-color-active-secondary\) {
2513
+ .active\:bg-\(--color-bg-active-secondary\) {
1994
2514
  &:active {
1995
- background-color: var(--background-color-active-secondary);
2515
+ background-color: var(--color-bg-active-secondary);
1996
2516
  }
1997
2517
  }
1998
- .active\:bg-\(--background-color-active-success\) {
2518
+ .active\:bg-\(--color-bg-active-success\) {
1999
2519
  &:active {
2000
- background-color: var(--background-color-active-success);
2520
+ background-color: var(--color-bg-active-success);
2001
2521
  }
2002
2522
  }
2003
- .active\:bg-\(--background-color-active-tertiary\) {
2523
+ .active\:bg-\(--color-bg-active-tertiary\) {
2004
2524
  &:active {
2005
- background-color: var(--background-color-active-tertiary);
2525
+ background-color: var(--color-bg-active-tertiary);
2006
2526
  }
2007
2527
  }
2008
- .active\:bg-\(--background-color-active-warning\) {
2528
+ .active\:bg-\(--color-bg-active-warning\) {
2009
2529
  &:active {
2010
- background-color: var(--background-color-active-warning);
2530
+ background-color: var(--color-bg-active-warning);
2011
2531
  }
2012
2532
  }
2013
- .active\:bg-\(--filled-background-color-active-accent\) {
2533
+ .active\:bg-\(--color-bg-filled-active-accent\) {
2014
2534
  &:active {
2015
- background-color: var(--filled-background-color-active-accent);
2535
+ background-color: var(--color-bg-filled-active-accent);
2016
2536
  }
2017
2537
  }
2018
- .active\:bg-\(--filled-background-color-active-danger\) {
2538
+ .active\:bg-\(--color-bg-filled-active-danger\) {
2019
2539
  &:active {
2020
- background-color: var(--filled-background-color-active-danger);
2540
+ background-color: var(--color-bg-filled-active-danger);
2021
2541
  }
2022
2542
  }
2023
- .active\:bg-\(--filled-background-color-active-default\) {
2543
+ .active\:bg-\(--color-bg-filled-active-default\) {
2024
2544
  &:active {
2025
- background-color: var(--filled-background-color-active-default);
2545
+ background-color: var(--color-bg-filled-active-default);
2026
2546
  }
2027
2547
  }
2028
- .active\:bg-\(--filled-background-color-active-info\) {
2548
+ .active\:bg-\(--color-bg-filled-active-info\) {
2029
2549
  &:active {
2030
- background-color: var(--filled-background-color-active-info);
2550
+ background-color: var(--color-bg-filled-active-info);
2031
2551
  }
2032
2552
  }
2033
- .active\:bg-\(--filled-background-color-active-link\) {
2553
+ .active\:bg-\(--color-bg-filled-active-link\) {
2034
2554
  &:active {
2035
- background-color: var(--filled-background-color-active-link);
2555
+ background-color: var(--color-bg-filled-active-link);
2036
2556
  }
2037
2557
  }
2038
- .active\:bg-\(--filled-background-color-active-primary\) {
2558
+ .active\:bg-\(--color-bg-filled-active-primary\) {
2039
2559
  &:active {
2040
- background-color: var(--filled-background-color-active-primary);
2560
+ background-color: var(--color-bg-filled-active-primary);
2041
2561
  }
2042
2562
  }
2043
- .active\:bg-\(--filled-background-color-active-secondary\) {
2563
+ .active\:bg-\(--color-bg-filled-active-secondary\) {
2044
2564
  &:active {
2045
- background-color: var(--filled-background-color-active-secondary);
2565
+ background-color: var(--color-bg-filled-active-secondary);
2046
2566
  }
2047
2567
  }
2048
- .active\:bg-\(--filled-background-color-active-success\) {
2568
+ .active\:bg-\(--color-bg-filled-active-success\) {
2049
2569
  &:active {
2050
- background-color: var(--filled-background-color-active-success);
2570
+ background-color: var(--color-bg-filled-active-success);
2051
2571
  }
2052
2572
  }
2053
- .active\:bg-\(--filled-background-color-active-tertiary\) {
2573
+ .active\:bg-\(--color-bg-filled-active-tertiary\) {
2054
2574
  &:active {
2055
- background-color: var(--filled-background-color-active-tertiary);
2575
+ background-color: var(--color-bg-filled-active-tertiary);
2056
2576
  }
2057
2577
  }
2058
- .active\:bg-\(--filled-background-color-active-warning\) {
2578
+ .active\:bg-\(--color-bg-filled-active-warning\) {
2059
2579
  &:active {
2060
- background-color: var(--filled-background-color-active-warning);
2580
+ background-color: var(--color-bg-filled-active-warning);
2581
+ }
2582
+ }
2583
+ .active\:bg-red-300 {
2584
+ &:active {
2585
+ background-color: var(--color-red-300);
2061
2586
  }
2062
2587
  }
2063
2588
  .active\:bg-transparent {
@@ -2076,300 +2601,277 @@
2076
2601
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2077
2602
  }
2078
2603
  }
2079
- .active\:ring-0 {
2080
- &:active {
2081
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2082
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2083
- }
2084
- }
2085
2604
  .active\:ring-inset {
2086
2605
  &:active {
2087
2606
  --tw-ring-inset: inset;
2088
2607
  }
2089
2608
  }
2090
- .max-xl\:hidden {
2609
+ .has-\[input\]\:cursor-pointer {
2610
+ &:has(*:is(input)) {
2611
+ cursor: pointer;
2612
+ }
2613
+ }
2614
+ .max-desktop\:hidden {
2091
2615
  @media (width < 80rem) {
2092
2616
  display: none;
2093
2617
  }
2094
2618
  }
2095
- .max-xl\:flex-col {
2619
+ .max-desktop\:flex-col {
2096
2620
  @media (width < 80rem) {
2097
2621
  flex-direction: column;
2098
2622
  }
2099
2623
  }
2100
- .max-lg\:hidden {
2624
+ .max-laptop\:hidden {
2101
2625
  @media (width < 64rem) {
2102
2626
  display: none;
2103
2627
  }
2104
2628
  }
2105
- .max-lg\:flex-col {
2629
+ .max-laptop\:flex-col {
2106
2630
  @media (width < 64rem) {
2107
2631
  flex-direction: column;
2108
2632
  }
2109
2633
  }
2110
- .max-lg\:gap-1 {
2111
- @media (width < 64rem) {
2112
- gap: calc(var(--spacing) * 1);
2113
- }
2114
- }
2115
- .max-lg\:gap-2 {
2116
- @media (width < 64rem) {
2117
- gap: calc(var(--spacing) * 2);
2118
- }
2119
- }
2120
- .max-lg\:gap-3 {
2634
+ .max-laptop\:\[--fs-unit\:8\] {
2121
2635
  @media (width < 64rem) {
2122
- gap: calc(var(--spacing) * 3);
2636
+ --fs-unit: 8;
2123
2637
  }
2124
2638
  }
2125
- .max-lg\:gap-4 {
2639
+ .max-laptop\:\[--fs-unit\:9\] {
2126
2640
  @media (width < 64rem) {
2127
- gap: calc(var(--spacing) * 4);
2641
+ --fs-unit: 9;
2128
2642
  }
2129
2643
  }
2130
- .max-lg\:gap-5 {
2644
+ .max-laptop\:\[--fs-unit\:10\] {
2131
2645
  @media (width < 64rem) {
2132
- gap: calc(var(--spacing) * 5);
2646
+ --fs-unit: 10;
2133
2647
  }
2134
2648
  }
2135
- .max-lg\:gap-6 {
2649
+ .max-laptop\:\[--fs-unit\:11\] {
2136
2650
  @media (width < 64rem) {
2137
- gap: calc(var(--spacing) * 6);
2651
+ --fs-unit: 11;
2138
2652
  }
2139
2653
  }
2140
- .max-lg\:gap-7 {
2654
+ .max-laptop\:\[--fs-unit\:12\] {
2141
2655
  @media (width < 64rem) {
2142
- gap: calc(var(--spacing) * 7);
2656
+ --fs-unit: 12;
2143
2657
  }
2144
2658
  }
2145
- .max-lg\:gap-8 {
2659
+ .max-laptop\:\[--fs-unit\:13\] {
2146
2660
  @media (width < 64rem) {
2147
- gap: calc(var(--spacing) * 8);
2661
+ --fs-unit: 13;
2148
2662
  }
2149
2663
  }
2150
- .max-lg\:gap-9 {
2664
+ .max-laptop\:\[--fs-unit\:14\] {
2151
2665
  @media (width < 64rem) {
2152
- gap: calc(var(--spacing) * 9);
2666
+ --fs-unit: 14;
2153
2667
  }
2154
2668
  }
2155
- .max-lg\:px-2 {
2669
+ .max-laptop\:\[--fs-unit\:15\] {
2156
2670
  @media (width < 64rem) {
2157
- padding-inline: calc(var(--spacing) * 2);
2671
+ --fs-unit: 15;
2158
2672
  }
2159
2673
  }
2160
- .max-lg\:px-3 {
2674
+ .max-laptop\:\[--fs-unit\:16\] {
2161
2675
  @media (width < 64rem) {
2162
- padding-inline: calc(var(--spacing) * 3);
2676
+ --fs-unit: 16;
2163
2677
  }
2164
2678
  }
2165
- .max-lg\:px-4 {
2679
+ .max-laptop\:\[--fs-unit\:17\] {
2166
2680
  @media (width < 64rem) {
2167
- padding-inline: calc(var(--spacing) * 4);
2681
+ --fs-unit: 17;
2168
2682
  }
2169
2683
  }
2170
- .max-lg\:px-5 {
2684
+ .max-laptop\:\[--fs-unit\:21\] {
2171
2685
  @media (width < 64rem) {
2172
- padding-inline: calc(var(--spacing) * 5);
2686
+ --fs-unit: 21;
2173
2687
  }
2174
2688
  }
2175
- .max-lg\:px-6 {
2689
+ .max-laptop\:\[--fs-unit\:22\] {
2176
2690
  @media (width < 64rem) {
2177
- padding-inline: calc(var(--spacing) * 6);
2691
+ --fs-unit: 22;
2178
2692
  }
2179
2693
  }
2180
- .max-lg\:px-7 {
2694
+ .max-laptop\:\[--fs-unit\:27\] {
2181
2695
  @media (width < 64rem) {
2182
- padding-inline: calc(var(--spacing) * 7);
2696
+ --fs-unit: 27;
2183
2697
  }
2184
2698
  }
2185
- .max-lg\:px-8 {
2699
+ .max-laptop\:\[--fs-unit\:28\] {
2186
2700
  @media (width < 64rem) {
2187
- padding-inline: calc(var(--spacing) * 8);
2701
+ --fs-unit: 28;
2188
2702
  }
2189
2703
  }
2190
- .max-lg\:py-2 {
2704
+ .max-laptop\:\[--fs-unit\:33\] {
2191
2705
  @media (width < 64rem) {
2192
- padding-block: calc(var(--spacing) * 2);
2706
+ --fs-unit: 33;
2193
2707
  }
2194
2708
  }
2195
- .max-lg\:py-3 {
2709
+ .max-laptop\:\[--gap-unit\:3\] {
2196
2710
  @media (width < 64rem) {
2197
- padding-block: calc(var(--spacing) * 3);
2711
+ --gap-unit: 3;
2198
2712
  }
2199
2713
  }
2200
- .max-lg\:py-4 {
2714
+ .max-laptop\:\[--gap-unit\:5\] {
2201
2715
  @media (width < 64rem) {
2202
- padding-block: calc(var(--spacing) * 4);
2716
+ --gap-unit: 5;
2203
2717
  }
2204
2718
  }
2205
- .max-lg\:py-5 {
2719
+ .max-laptop\:\[--gap-unit\:6\] {
2206
2720
  @media (width < 64rem) {
2207
- padding-block: calc(var(--spacing) * 5);
2721
+ --gap-unit: 6;
2208
2722
  }
2209
2723
  }
2210
- .max-lg\:py-14 {
2724
+ .max-laptop\:\[--gap-unit\:8\] {
2211
2725
  @media (width < 64rem) {
2212
- padding-block: calc(var(--spacing) * 14);
2726
+ --gap-unit: 8;
2213
2727
  }
2214
2728
  }
2215
- .max-lg\:py-16 {
2729
+ .max-laptop\:\[--gap-unit\:10\] {
2216
2730
  @media (width < 64rem) {
2217
- padding-block: calc(var(--spacing) * 16);
2731
+ --gap-unit: 10;
2218
2732
  }
2219
2733
  }
2220
- .max-lg\:text-2xl {
2734
+ .max-laptop\:\[--py-unit\:3\] {
2221
2735
  @media (width < 64rem) {
2222
- font-size: var(--text-2xl);
2223
- line-height: var(--tw-leading, var(--text-2xl--line-height));
2736
+ --py-unit: 3;
2224
2737
  }
2225
2738
  }
2226
- .max-lg\:text-3xl {
2739
+ .max-laptop\:\[--py-unit\:4\] {
2227
2740
  @media (width < 64rem) {
2228
- font-size: var(--text-3xl);
2229
- line-height: var(--tw-leading, var(--text-3xl--line-height));
2741
+ --py-unit: 4;
2230
2742
  }
2231
2743
  }
2232
- .max-lg\:text-4xl {
2744
+ .max-laptop\:\[--py-unit\:6\] {
2233
2745
  @media (width < 64rem) {
2234
- font-size: var(--text-4xl);
2235
- line-height: var(--tw-leading, var(--text-4xl--line-height));
2746
+ --py-unit: 6;
2236
2747
  }
2237
2748
  }
2238
- .max-lg\:text-5xl {
2749
+ .max-laptop\:\[--py-unit\:8\] {
2239
2750
  @media (width < 64rem) {
2240
- font-size: var(--text-5xl);
2241
- line-height: var(--tw-leading, var(--text-5xl--line-height));
2751
+ --py-unit: 8;
2242
2752
  }
2243
2753
  }
2244
- .max-lg\:text-6xl {
2754
+ .max-laptop\:\[--py-unit\:10\] {
2245
2755
  @media (width < 64rem) {
2246
- font-size: var(--text-6xl);
2247
- line-height: var(--tw-leading, var(--text-6xl--line-height));
2756
+ --py-unit: 10;
2248
2757
  }
2249
2758
  }
2250
- .max-lg\:text-xl {
2251
- @media (width < 64rem) {
2252
- font-size: var(--text-xl);
2253
- line-height: var(--tw-leading, var(--text-xl--line-height));
2254
- }
2255
- }
2256
- .max-md\:hidden {
2759
+ .max-tablet\:hidden {
2257
2760
  @media (width < 48rem) {
2258
2761
  display: none;
2259
2762
  }
2260
2763
  }
2261
- .max-md\:flex-col {
2764
+ .max-tablet\:flex-col {
2262
2765
  @media (width < 48rem) {
2263
2766
  flex-direction: column;
2264
2767
  }
2265
2768
  }
2266
- .max-md\:gap-2 {
2769
+ .max-tablet\:\[--fs-unit\:7\] {
2770
+ @media (width < 48rem) {
2771
+ --fs-unit: 7;
2772
+ }
2773
+ }
2774
+ .max-tablet\:\[--fs-unit\:8\] {
2267
2775
  @media (width < 48rem) {
2268
- gap: calc(var(--spacing) * 2);
2776
+ --fs-unit: 8;
2269
2777
  }
2270
2778
  }
2271
- .max-md\:gap-4 {
2779
+ .max-tablet\:\[--fs-unit\:9\] {
2272
2780
  @media (width < 48rem) {
2273
- gap: calc(var(--spacing) * 4);
2781
+ --fs-unit: 9;
2274
2782
  }
2275
2783
  }
2276
- .max-md\:gap-6 {
2784
+ .max-tablet\:\[--fs-unit\:10\] {
2277
2785
  @media (width < 48rem) {
2278
- gap: calc(var(--spacing) * 6);
2786
+ --fs-unit: 10;
2279
2787
  }
2280
2788
  }
2281
- .max-md\:gap-8 {
2789
+ .max-tablet\:\[--fs-unit\:11\] {
2282
2790
  @media (width < 48rem) {
2283
- gap: calc(var(--spacing) * 8);
2791
+ --fs-unit: 11;
2284
2792
  }
2285
2793
  }
2286
- .max-md\:px-3 {
2794
+ .max-tablet\:\[--fs-unit\:12\] {
2287
2795
  @media (width < 48rem) {
2288
- padding-inline: calc(var(--spacing) * 3);
2796
+ --fs-unit: 12;
2289
2797
  }
2290
2798
  }
2291
- .max-md\:px-4 {
2799
+ .max-tablet\:\[--fs-unit\:13\] {
2292
2800
  @media (width < 48rem) {
2293
- padding-inline: calc(var(--spacing) * 4);
2801
+ --fs-unit: 13;
2294
2802
  }
2295
2803
  }
2296
- .max-md\:px-5 {
2804
+ .max-tablet\:\[--fs-unit\:14\] {
2297
2805
  @media (width < 48rem) {
2298
- padding-inline: calc(var(--spacing) * 5);
2806
+ --fs-unit: 14;
2299
2807
  }
2300
2808
  }
2301
- .max-md\:px-6 {
2809
+ .max-tablet\:\[--fs-unit\:16\] {
2302
2810
  @media (width < 48rem) {
2303
- padding-inline: calc(var(--spacing) * 6);
2811
+ --fs-unit: 16;
2304
2812
  }
2305
2813
  }
2306
- .max-md\:px-7 {
2814
+ .max-tablet\:\[--fs-unit\:18\] {
2307
2815
  @media (width < 48rem) {
2308
- padding-inline: calc(var(--spacing) * 7);
2816
+ --fs-unit: 18;
2309
2817
  }
2310
2818
  }
2311
- .max-md\:py-3 {
2819
+ .max-tablet\:\[--fs-unit\:20\] {
2312
2820
  @media (width < 48rem) {
2313
- padding-block: calc(var(--spacing) * 3);
2821
+ --fs-unit: 20;
2314
2822
  }
2315
2823
  }
2316
- .max-md\:py-4 {
2824
+ .max-tablet\:\[--fs-unit\:24\] {
2317
2825
  @media (width < 48rem) {
2318
- padding-block: calc(var(--spacing) * 4);
2826
+ --fs-unit: 24;
2319
2827
  }
2320
2828
  }
2321
- .max-md\:py-6 {
2829
+ .max-tablet\:\[--fs-unit\:26\] {
2322
2830
  @media (width < 48rem) {
2323
- padding-block: calc(var(--spacing) * 6);
2831
+ --fs-unit: 26;
2324
2832
  }
2325
2833
  }
2326
- .max-md\:py-12 {
2834
+ .max-tablet\:\[--fs-unit\:30\] {
2327
2835
  @media (width < 48rem) {
2328
- padding-block: calc(var(--spacing) * 12);
2836
+ --fs-unit: 30;
2329
2837
  }
2330
2838
  }
2331
- .max-md\:text-2xl {
2839
+ .max-tablet\:\[--gap-unit\:2\] {
2332
2840
  @media (width < 48rem) {
2333
- font-size: var(--text-2xl);
2334
- line-height: var(--tw-leading, var(--text-2xl--line-height));
2841
+ --gap-unit: 2;
2335
2842
  }
2336
2843
  }
2337
- .max-md\:text-3xl {
2844
+ .max-tablet\:\[--gap-unit\:4\] {
2338
2845
  @media (width < 48rem) {
2339
- font-size: var(--text-3xl);
2340
- line-height: var(--tw-leading, var(--text-3xl--line-height));
2846
+ --gap-unit: 4;
2341
2847
  }
2342
2848
  }
2343
- .max-md\:text-4xl {
2849
+ .max-tablet\:\[--gap-unit\:6\] {
2344
2850
  @media (width < 48rem) {
2345
- font-size: var(--text-4xl);
2346
- line-height: var(--tw-leading, var(--text-4xl--line-height));
2851
+ --gap-unit: 6;
2347
2852
  }
2348
2853
  }
2349
- .max-md\:text-5xl {
2854
+ .max-tablet\:\[--gap-unit\:8\] {
2350
2855
  @media (width < 48rem) {
2351
- font-size: var(--text-5xl);
2352
- line-height: var(--tw-leading, var(--text-5xl--line-height));
2856
+ --gap-unit: 8;
2353
2857
  }
2354
2858
  }
2355
- .max-md\:text-lg {
2859
+ .max-tablet\:\[--py-unit\:2\] {
2356
2860
  @media (width < 48rem) {
2357
- font-size: var(--text-lg);
2358
- line-height: var(--tw-leading, var(--text-lg--line-height));
2861
+ --py-unit: 2;
2359
2862
  }
2360
2863
  }
2361
- .max-md\:text-xl {
2864
+ .max-tablet\:\[--py-unit\:4\] {
2362
2865
  @media (width < 48rem) {
2363
- font-size: var(--text-xl);
2364
- line-height: var(--tw-leading, var(--text-xl--line-height));
2866
+ --py-unit: 4;
2365
2867
  }
2366
2868
  }
2367
- .max-sm\:hidden {
2869
+ .max-mobile\:hidden {
2368
2870
  @media (width < 40rem) {
2369
2871
  display: none;
2370
2872
  }
2371
2873
  }
2372
- .max-sm\:flex-col {
2874
+ .max-mobile\:flex-col {
2373
2875
  @media (width < 40rem) {
2374
2876
  flex-direction: column;
2375
2877
  }
@@ -2379,16 +2881,52 @@
2379
2881
  grid-template-columns: repeat(2, minmax(0, 1fr));
2380
2882
  }
2381
2883
  }
2884
+ .md\:grid-cols-2 {
2885
+ @media (width >= 48rem) {
2886
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2887
+ }
2888
+ }
2382
2889
  .md\:grid-cols-3 {
2383
2890
  @media (width >= 48rem) {
2384
2891
  grid-template-columns: repeat(3, minmax(0, 1fr));
2385
2892
  }
2386
2893
  }
2894
+ .md\:grid-cols-4 {
2895
+ @media (width >= 48rem) {
2896
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2897
+ }
2898
+ }
2387
2899
  .lg\:grid-cols-4 {
2388
2900
  @media (width >= 64rem) {
2389
2901
  grid-template-columns: repeat(4, minmax(0, 1fr));
2390
2902
  }
2391
2903
  }
2904
+ .lg\:grid-cols-5 {
2905
+ @media (width >= 64rem) {
2906
+ grid-template-columns: repeat(5, minmax(0, 1fr));
2907
+ }
2908
+ }
2909
+ .lg\:grid-cols-6 {
2910
+ @media (width >= 64rem) {
2911
+ grid-template-columns: repeat(6, minmax(0, 1fr));
2912
+ }
2913
+ }
2914
+ }
2915
+ @layer theme {
2916
+ @layer base {
2917
+ :where(*) {
2918
+ --gap: calc(var(--gap-unit) * var(--layout-spacing));
2919
+ --ui-gap: calc(var(--gap-unit) * var(--ui-spacing));
2920
+ --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--layout-spacing));
2921
+ --ui-px: calc(var(--aspect-ratio) * var(--py-unit) * var(--ui-spacing));
2922
+ --py: calc(var(--py-unit) * var(--layout-spacing));
2923
+ --ui-py: calc(var(--py-unit) * var(--ui-spacing));
2924
+ --ui-size: calc(var(--size-unit) * var(--ui-spacing));
2925
+ --br: calc(var(--br-unit) * var(--br-base));
2926
+ --ui-br: calc(var(--br-unit) * var(--ui-br-base));
2927
+ --fs: calc(var(--fs-unit) * var(--fs-base));
2928
+ }
2929
+ }
2392
2930
  }
2393
2931
  @property --tw-rotate-x {
2394
2932
  syntax: "*";
@@ -2425,6 +2963,48 @@
2425
2963
  inherits: false;
2426
2964
  initial-value: solid;
2427
2965
  }
2966
+ @property --tw-gradient-position {
2967
+ syntax: "*";
2968
+ inherits: false;
2969
+ }
2970
+ @property --tw-gradient-from {
2971
+ syntax: "<color>";
2972
+ inherits: false;
2973
+ initial-value: #0000;
2974
+ }
2975
+ @property --tw-gradient-via {
2976
+ syntax: "<color>";
2977
+ inherits: false;
2978
+ initial-value: #0000;
2979
+ }
2980
+ @property --tw-gradient-to {
2981
+ syntax: "<color>";
2982
+ inherits: false;
2983
+ initial-value: #0000;
2984
+ }
2985
+ @property --tw-gradient-stops {
2986
+ syntax: "*";
2987
+ inherits: false;
2988
+ }
2989
+ @property --tw-gradient-via-stops {
2990
+ syntax: "*";
2991
+ inherits: false;
2992
+ }
2993
+ @property --tw-gradient-from-position {
2994
+ syntax: "<length-percentage>";
2995
+ inherits: false;
2996
+ initial-value: 0%;
2997
+ }
2998
+ @property --tw-gradient-via-position {
2999
+ syntax: "<length-percentage>";
3000
+ inherits: false;
3001
+ initial-value: 50%;
3002
+ }
3003
+ @property --tw-gradient-to-position {
3004
+ syntax: "<length-percentage>";
3005
+ inherits: false;
3006
+ initial-value: 100%;
3007
+ }
2428
3008
  @property --tw-leading {
2429
3009
  syntax: "*";
2430
3010
  inherits: false;
@@ -2604,6 +3184,15 @@
2604
3184
  --tw-skew-y: skewY(0);
2605
3185
  --tw-space-y-reverse: 0;
2606
3186
  --tw-border-style: solid;
3187
+ --tw-gradient-position: initial;
3188
+ --tw-gradient-from: #0000;
3189
+ --tw-gradient-via: #0000;
3190
+ --tw-gradient-to: #0000;
3191
+ --tw-gradient-stops: initial;
3192
+ --tw-gradient-via-stops: initial;
3193
+ --tw-gradient-from-position: 0%;
3194
+ --tw-gradient-via-position: 50%;
3195
+ --tw-gradient-to-position: 100%;
2607
3196
  --tw-leading: initial;
2608
3197
  --tw-font-weight: initial;
2609
3198
  --tw-tracking: initial;