@vaneui/ui 0.2.2-alpha.20250907183237.5f63365 → 0.2.2-alpha.20250913214402.427a7ea

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/README.md +2 -2
  2. package/dist/index.esm.js +1007 -410
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +1169 -409
  5. package/dist/index.js.map +1 -1
  6. package/dist/src/components/tests/grid5.test.d.ts +1 -0
  7. package/dist/src/components/tests/grid6.test.d.ts +1 -0
  8. package/dist/src/components/tests/input.test.d.ts +1 -0
  9. package/dist/src/components/tests/transparent-key-behavior.test.d.ts +1 -0
  10. package/dist/src/components/themeContext.d.ts +11 -1
  11. package/dist/src/components/ui/card.d.ts +126 -2
  12. package/dist/src/components/ui/checkbox.d.ts +2 -0
  13. package/dist/src/components/ui/classes/appearanceClasses.d.ts +20 -18
  14. package/dist/src/components/ui/classes/typographyClasses.d.ts +3 -3
  15. package/dist/src/components/ui/code.d.ts +2 -0
  16. package/dist/src/components/ui/col.d.ts +93 -2
  17. package/dist/src/components/ui/container.d.ts +93 -2
  18. package/dist/src/components/ui/grid.d.ts +420 -4
  19. package/dist/src/components/ui/img.d.ts +2 -0
  20. package/dist/src/components/ui/input.d.ts +123 -0
  21. package/dist/src/components/ui/layout.d.ts +1 -1
  22. package/dist/src/components/ui/props/appearance.d.ts +22 -0
  23. package/dist/src/components/ui/props/border.d.ts +6 -0
  24. package/dist/src/components/ui/props/breakpoint.d.ts +12 -0
  25. package/dist/src/components/ui/props/display.d.ts +24 -0
  26. package/dist/src/components/ui/props/flexDirection.d.ts +10 -0
  27. package/dist/src/components/ui/props/focusVisible.d.ts +6 -0
  28. package/dist/src/components/ui/props/fontFamily.d.ts +8 -0
  29. package/dist/src/components/ui/props/fontStyle.d.ts +6 -0
  30. package/dist/src/components/ui/props/fontWeight.d.ts +20 -0
  31. package/dist/src/components/ui/props/gap.d.ts +6 -0
  32. package/dist/src/components/ui/props/hide.d.ts +12 -0
  33. package/dist/src/components/ui/props/items.d.ts +12 -0
  34. package/dist/src/components/ui/props/justify.d.ts +18 -0
  35. package/dist/src/components/ui/props/keys.d.ts +143 -16
  36. package/dist/src/components/ui/props/listStyle.d.ts +6 -0
  37. package/dist/src/components/ui/props/mode.d.ts +21 -0
  38. package/dist/src/components/ui/props/overflow.d.ts +32 -0
  39. package/dist/src/components/ui/props/padding.d.ts +6 -0
  40. package/dist/src/components/ui/props/position.d.ts +12 -0
  41. package/dist/src/components/ui/props/props.d.ts +25 -8
  42. package/dist/src/components/ui/props/reverse.d.ts +4 -0
  43. package/dist/src/components/ui/props/ring.d.ts +6 -0
  44. package/dist/src/components/ui/props/shadow.d.ts +6 -0
  45. package/dist/src/components/ui/props/shape.d.ts +8 -0
  46. package/dist/src/components/ui/props/size.d.ts +12 -0
  47. package/dist/src/components/ui/props/textAlign.d.ts +10 -0
  48. package/dist/src/components/ui/props/textDecoration.d.ts +10 -0
  49. package/dist/src/components/ui/props/textTransform.d.ts +10 -0
  50. package/dist/src/components/ui/props/transparent.d.ts +4 -0
  51. package/dist/src/components/ui/props/variant.d.ts +6 -0
  52. package/dist/src/components/ui/props/wrap.d.ts +8 -0
  53. package/dist/src/components/ui/row.d.ts +98 -2
  54. package/dist/src/components/ui/section.d.ts +100 -2
  55. package/dist/src/components/ui/stack.d.ts +100 -2
  56. package/dist/src/components/ui/theme/appearance/appearanceTheme.d.ts +3 -2
  57. package/dist/src/components/ui/theme/appearance/genericVariantTheme.d.ts +5 -0
  58. package/dist/src/components/ui/theme/appearance/shadowAppearanceTheme.d.ts +5 -5
  59. package/dist/src/components/ui/theme/badgeTheme.d.ts +3 -0
  60. package/dist/src/components/ui/theme/buttonTheme.d.ts +3 -0
  61. package/dist/src/components/ui/theme/checkboxTheme.d.ts +11 -2
  62. package/dist/src/components/ui/theme/chipTheme.d.ts +3 -0
  63. package/dist/src/components/ui/theme/codeTheme.d.ts +3 -0
  64. package/dist/src/components/ui/theme/common/ComponentTheme.d.ts +3 -3
  65. package/dist/src/components/ui/theme/gridTheme.d.ts +2 -0
  66. package/dist/src/components/ui/theme/imgTheme.d.ts +4 -0
  67. package/dist/src/components/ui/theme/inputTheme.d.ts +40 -0
  68. package/dist/src/components/ui/theme/layout/borderTheme.d.ts +2 -0
  69. package/dist/src/components/ui/theme/layout/focusVisibleTheme.d.ts +11 -0
  70. package/dist/src/components/ui/theme/layout/ringTheme.d.ts +2 -0
  71. package/dist/src/index.d.ts +2 -1
  72. package/dist/ui.css +690 -566
  73. package/dist/vars.css +134 -134
  74. package/package.json +1 -1
package/dist/ui.css CHANGED
@@ -16,6 +16,7 @@
16
16
  --color-red-600: oklch(57.7% 0.245 27.325);
17
17
  --color-red-700: oklch(50.5% 0.213 27.518);
18
18
  --color-red-800: oklch(44.4% 0.177 26.899);
19
+ --color-red-900: oklch(39.6% 0.141 25.723);
19
20
  --color-orange-500: oklch(70.5% 0.213 47.604);
20
21
  --color-amber-50: oklch(98.7% 0.022 95.277);
21
22
  --color-amber-100: oklch(96.2% 0.059 95.617);
@@ -25,13 +26,16 @@
25
26
  --color-amber-800: oklch(47.3% 0.137 46.201);
26
27
  --color-yellow-50: oklch(98.7% 0.026 102.212);
27
28
  --color-yellow-100: oklch(97.3% 0.071 103.193);
29
+ --color-yellow-200: oklch(94.5% 0.129 101.54);
28
30
  --color-yellow-800: oklch(47.6% 0.114 61.907);
31
+ --color-yellow-900: oklch(42.1% 0.095 57.708);
29
32
  --color-green-50: oklch(98.2% 0.018 155.826);
30
33
  --color-green-200: oklch(92.5% 0.084 155.995);
31
34
  --color-green-500: oklch(72.3% 0.219 149.579);
32
35
  --color-green-600: oklch(62.7% 0.194 149.214);
33
36
  --color-green-700: oklch(52.7% 0.154 150.069);
34
37
  --color-green-800: oklch(44.8% 0.119 151.328);
38
+ --color-green-900: oklch(39.3% 0.095 152.535);
35
39
  --color-emerald-50: oklch(97.9% 0.021 166.113);
36
40
  --color-emerald-100: oklch(95% 0.052 163.051);
37
41
  --color-emerald-200: oklch(90.5% 0.093 164.15);
@@ -70,6 +74,7 @@
70
74
  --color-rose-600: oklch(58.6% 0.253 17.585);
71
75
  --color-rose-700: oklch(51.4% 0.222 16.935);
72
76
  --color-rose-800: oklch(45.5% 0.188 13.697);
77
+ --color-rose-900: oklch(41% 0.159 10.272);
73
78
  --color-gray-50: oklch(98.5% 0.002 247.839);
74
79
  --color-gray-100: oklch(96.7% 0.003 264.542);
75
80
  --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -127,137 +132,136 @@
127
132
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
128
133
  --default-font-family: var(--font-sans);
129
134
  --default-mono-font-family: var(--font-mono);
130
- --text-color-default: var(--color-gray-900, #111827);
131
- --text-color-primary: var(--color-blue-600, #2563eb);
132
- --text-color-secondary: var(--color-gray-600, #4b5563);
133
- --text-color-tertiary: var(--color-gray-500, #6b7280);
134
- --text-color-link: var(--color-blue-600, #2563eb);
135
- --text-color-accent: var(--color-rose-700, #9333ea);
136
- --text-color-success: var(--color-emerald-600, #059669);
137
- --text-color-danger: var(--color-red-600, #dc2626);
138
- --text-color-warning: var(--color-amber-600, #d97706);
139
- --text-color-info: var(--color-cyan-600, #0891b2);
140
- --filled-text-color-default: #ffffff;
141
- --filled-text-color-primary: var(--color-blue-100, #dbeafe);
142
- --filled-text-color-secondary: var(--color-gray-100, #f3f4f6);
143
- --filled-text-color-tertiary: var(--color-gray-200, #e5e7eb);
144
- --filled-text-color-link: var(--color-blue-100, #dbeafe);
145
- --filled-text-color-accent: var(--color-rose-100, #fdf2f8);
146
- --filled-text-color-success: var(--color-emerald-100, #d1fae5);
147
- --filled-text-color-danger: var(--color-red-100, #fee2e2);
148
- --filled-text-color-warning: var(--color-amber-100, #fef3c7);
149
- --filled-text-color-info: var(--color-cyan-100, #cffafe);
150
- --filled-text-color-transparent: transparent;
151
- --background-color-default: var(--color-white, #ffffff);
152
- --background-color-primary: var(--color-blue-50, #eff6ff);
153
- --background-color-secondary: var(--color-gray-50, #f9fafb);
154
- --background-color-tertiary: var(--color-gray-100, #f3f4f6);
155
- --background-color-accent: var(--color-rose-50, #faf5ff);
156
- --background-color-success: var(--color-emerald-50, #ecfdf5);
157
- --background-color-danger: var(--color-red-50, #fef2f2);
158
- --background-color-warning: var(--color-amber-50, #fffbeb);
159
- --background-color-info: var(--color-cyan-50, #ecfeff);
160
- --background-color-link: var(--color-blue-50, #eff6ff);
161
- --background-color-hover-default: var(--color-gray-50, #f3f4f6);
162
- --background-color-hover-primary: var(--color-blue-100, #dbeafe);
163
- --background-color-hover-secondary: var(--color-gray-100, #f3f4f6);
164
- --background-color-hover-tertiary: var(--color-gray-200, #e5e7eb);
165
- --background-color-hover-accent: var(--color-rose-100, #f5d0fe);
166
- --background-color-hover-success: var(--color-emerald-100, #d1fae5);
167
- --background-color-hover-danger: var(--color-red-100, #fee2e2);
168
- --background-color-hover-warning: var(--color-amber-100, #fef3c7);
169
- --background-color-hover-info: var(--color-cyan-100, #cffafe);
170
- --background-color-hover-link: var(--color-blue-100, #dbeafe);
171
- --background-color-active-default: var(--color-gray-100, #e5e7eb);
172
- --background-color-active-primary: var(--color-blue-200, #bfdbfe);
173
- --background-color-active-secondary: var(--color-gray-200, #e5e7eb);
174
- --background-color-active-tertiary: var(--color-gray-300, #d1d5db);
175
- --background-color-active-accent: var(--color-rose-200, #fbcfe8);
176
- --background-color-active-success: var(--color-emerald-200, #a7f3d0);
177
- --background-color-active-danger: var(--color-red-200, #fecaca);
178
- --background-color-active-warning: var(--color-amber-200, #fde68a);
179
- --background-color-active-info: var(--color-cyan-200, #a5f3fc);
180
- --background-color-active-link: var(--color-blue-200, #bfdbfe);
181
- --filled-background-color-default: var(--color-gray-800, #1f2937);
182
- --filled-background-color-primary: var(--color-blue-600, #2563eb);
183
- --filled-background-color-secondary: var(--color-gray-600, #4b5563);
184
- --filled-background-color-tertiary: var(--color-gray-500, #6b7280);
185
- --filled-background-color-accent: var(--color-rose-600, #e11d48);
186
- --filled-background-color-success: var(--color-emerald-600, #059669);
187
- --filled-background-color-danger: var(--color-red-600, #dc2626);
188
- --filled-background-color-warning: var(--color-amber-600, #d97706);
189
- --filled-background-color-info: var(--color-cyan-600, #0891b2);
190
- --filled-background-color-link: var(--color-blue-600, #2563eb);
191
- --filled-background-color-hover-default: var(--color-gray-900, #111827);
192
- --filled-background-color-hover-primary: var(--color-blue-700, #1d4ed8);
193
- --filled-background-color-hover-secondary: var(--color-gray-700, #374151);
194
- --filled-background-color-hover-tertiary: var(--color-gray-600, #4b5563);
195
- --filled-background-color-hover-accent: var(--color-rose-700, #be123c);
196
- --filled-background-color-hover-success: var(--color-emerald-700, #047857);
197
- --filled-background-color-hover-danger: var(--color-red-700, #b91c1c);
198
- --filled-background-color-hover-warning: var(--color-amber-700, #b45309);
199
- --filled-background-color-hover-info: var(--color-cyan-700, #0e7490);
200
- --filled-background-color-hover-link: var(--color-blue-700, #1d4ed8);
201
- --filled-background-color-active-default: var(--color-gray-950, #030712);
202
- --filled-background-color-active-primary: var(--color-blue-800, #1e40af);
203
- --filled-background-color-active-secondary: var(--color-gray-800, #1f2937);
204
- --filled-background-color-active-tertiary: var(--color-gray-700, #374151);
205
- --filled-background-color-active-accent: var(--color-rose-800, #9f1239);
206
- --filled-background-color-active-success: var(--color-emerald-800, #065f46);
207
- --filled-background-color-active-danger: var(--color-red-800, #991b1b);
208
- --filled-background-color-active-warning: var(--color-amber-800, #92400e);
209
- --filled-background-color-active-info: var(--color-cyan-800, #155e75);
210
- --filled-background-color-active-link: var(--color-blue-800, #1e40af);
211
- --layout-background-default: var(--color-white, #ffffff);
212
- --layout-background-primary: var(--color-white, #ffffff);
213
- --layout-background-secondary: var(--color-gray-50, #f9fafb);
214
- --layout-background-tertiary: var(--color-gray-100, #f3f4f6);
215
- --layout-background-accent: var(--color-indigo-50, #eef2ff);
216
- --layout-background-success: var(--color-green-50, #f0fdf4);
217
- --layout-background-danger: var(--color-red-50, #fef2f2);
218
- --layout-background-warning: var(--color-yellow-50, #fefce8);
219
- --layout-background-info: var(--color-blue-50, #eff6ff);
220
- --layout-background-link: var(--color-blue-50, #eff6ff);
221
- --layout-filled-background-color-default: var(--color-gray-800, #4b5563);
222
- --layout-filled-background-color-primary: var(--color-blue-800, #2563eb);
223
- --layout-filled-background-color-secondary: var(--color-gray-900, #4b5563);
224
- --layout-filled-background-color-tertiary: var(--color-gray-800, #6b7280);
225
- --layout-filled-background-color-accent: var(--color-indigo-800, #4f46e5);
226
- --layout-filled-background-color-success: var(--color-green-800, #16a34a);
227
- --layout-filled-background-color-danger: var(--color-red-800, #dc2626);
228
- --layout-filled-background-color-warning: var(--color-yellow-800, #ca8a04);
229
- --layout-filled-background-color-info: var(--color-blue-800, #2563eb);
230
- --layout-filled-background-color-link: var(--color-blue-800, #2563eb);
231
- --border-color-default: var(--color-gray-200, #d1d5db);
232
- --border-color-primary: var(--color-blue-200, #93c5fd);
233
- --border-color-secondary: var(--color-gray-200, #d1d5db);
234
- --border-color-tertiary: var(--color-gray-200, #e5e7eb);
235
- --border-color-link: var(--color-blue-200, #93c5fd);
236
- --border-color-accent: var(--color-rose-200, #d8b4fe);
237
- --border-color-success: var(--color-emerald-200, #6ee7b7);
238
- --border-color-danger: var(--color-red-200, #fca5a5);
239
- --border-color-warning: var(--color-amber-200, #fcd34d);
240
- --border-color-info: var(--color-cyan-200, #67e8f9);
241
- --filled-border-color-default: var(--color-gray-800, #1f2937);
242
- --filled-border-color-primary: var(--color-blue-600, #2563eb);
243
- --filled-border-color-secondary: var(--color-gray-600, #4b5563);
244
- --filled-border-color-tertiary: var(--color-gray-500, #6b7280);
245
- --filled-border-color-accent: var(--color-rose-600, #e11d48);
246
- --filled-border-color-success: var(--color-emerald-600, #059669);
247
- --filled-border-color-danger: var(--color-red-600, #dc2626);
248
- --filled-border-color-warning: var(--color-amber-600, #d97706);
249
- --filled-border-color-info: var(--color-cyan-600, #0891b2);
250
- --filled-border-color-link: var(--color-blue-600, #2563eb);
251
- --ui-border-radius-xs: 0.125rem;
252
- --ui-border-radius-sm: 0.25rem;
253
- --ui-border-radius-md: 0.375rem;
254
- --ui-border-radius-lg: 0.5rem;
255
- --ui-border-radius-xl: 0.625rem;
256
- --layout-border-radius-xs: 0.375rem;
257
- --layout-border-radius-sm: 0.5rem;
258
- --layout-border-radius-md: 0.625rem;
259
- --layout-border-radius-lg: 0.75rem;
260
- --layout-border-radius-xl: 0.875rem;
135
+ --color-text-default: var(--color-gray-900);
136
+ --color-text-primary: var(--color-blue-600);
137
+ --color-text-secondary: var(--color-gray-600);
138
+ --color-text-tertiary: var(--color-gray-500);
139
+ --color-text-link: var(--color-blue-600);
140
+ --color-text-accent: var(--color-rose-700);
141
+ --color-text-success: var(--color-emerald-600);
142
+ --color-text-danger: var(--color-red-600);
143
+ --color-text-warning: var(--color-amber-600);
144
+ --color-text-info: var(--color-cyan-600);
145
+ --color-text-filled-default: var(--color-white);
146
+ --color-text-filled-primary: var(--color-blue-100);
147
+ --color-text-filled-secondary: var(--color-gray-200);
148
+ --color-text-filled-tertiary: var(--color-gray-300);
149
+ --color-text-filled-link: var(--color-blue-100);
150
+ --color-text-filled-accent: var(--color-rose-100);
151
+ --color-text-filled-success: var(--color-emerald-100);
152
+ --color-text-filled-danger: var(--color-red-100);
153
+ --color-text-filled-warning: var(--color-amber-100);
154
+ --color-text-filled-info: var(--color-cyan-100);
155
+ --color-bg-default: var(--color-white);
156
+ --color-bg-primary: var(--color-blue-50);
157
+ --color-bg-secondary: var(--color-gray-50);
158
+ --color-bg-tertiary: var(--color-gray-100);
159
+ --color-bg-accent: var(--color-rose-50);
160
+ --color-bg-success: var(--color-emerald-50);
161
+ --color-bg-danger: var(--color-red-50);
162
+ --color-bg-warning: var(--color-amber-50);
163
+ --color-bg-info: var(--color-cyan-50);
164
+ --color-bg-link: var(--color-blue-50);
165
+ --color-bg-hover-default: var(--color-gray-50);
166
+ --color-bg-hover-primary: var(--color-blue-100);
167
+ --color-bg-hover-secondary: var(--color-gray-100);
168
+ --color-bg-hover-tertiary: var(--color-gray-200);
169
+ --color-bg-hover-accent: var(--color-rose-100);
170
+ --color-bg-hover-success: var(--color-emerald-100);
171
+ --color-bg-hover-danger: var(--color-red-100);
172
+ --color-bg-hover-warning: var(--color-amber-100);
173
+ --color-bg-hover-info: var(--color-cyan-100);
174
+ --color-bg-hover-link: var(--color-blue-100);
175
+ --color-bg-active-default: var(--color-gray-100);
176
+ --color-bg-active-primary: var(--color-blue-200);
177
+ --color-bg-active-secondary: var(--color-gray-200);
178
+ --color-bg-active-tertiary: var(--color-gray-300);
179
+ --color-bg-active-accent: var(--color-rose-200);
180
+ --color-bg-active-success: var(--color-emerald-200);
181
+ --color-bg-active-danger: var(--color-red-200);
182
+ --color-bg-active-warning: var(--color-amber-200);
183
+ --color-bg-active-info: var(--color-cyan-200);
184
+ --color-bg-active-link: var(--color-blue-200);
185
+ --color-bg-filled-default: var(--color-gray-800);
186
+ --color-bg-filled-primary: var(--color-blue-600);
187
+ --color-bg-filled-secondary: var(--color-gray-600);
188
+ --color-bg-filled-tertiary: var(--color-gray-500);
189
+ --color-bg-filled-accent: var(--color-rose-600);
190
+ --color-bg-filled-success: var(--color-emerald-600);
191
+ --color-bg-filled-danger: var(--color-red-600);
192
+ --color-bg-filled-warning: var(--color-amber-600);
193
+ --color-bg-filled-info: var(--color-cyan-600);
194
+ --color-bg-filled-link: var(--color-blue-600);
195
+ --color-bg-filled-hover-default: var(--color-gray-900);
196
+ --color-bg-filled-hover-primary: var(--color-blue-700);
197
+ --color-bg-filled-hover-secondary: var(--color-gray-700);
198
+ --color-bg-filled-hover-tertiary: var(--color-gray-600);
199
+ --color-bg-filled-hover-accent: var(--color-rose-700);
200
+ --color-bg-filled-hover-success: var(--color-emerald-700);
201
+ --color-bg-filled-hover-danger: var(--color-red-700);
202
+ --color-bg-filled-hover-warning: var(--color-amber-700);
203
+ --color-bg-filled-hover-info: var(--color-cyan-700);
204
+ --color-bg-filled-hover-link: var(--color-blue-700);
205
+ --color-bg-filled-active-default: var(--color-gray-950);
206
+ --color-bg-filled-active-primary: var(--color-blue-800);
207
+ --color-bg-filled-active-secondary: var(--color-gray-800);
208
+ --color-bg-filled-active-tertiary: var(--color-gray-700);
209
+ --color-bg-filled-active-accent: var(--color-rose-800);
210
+ --color-bg-filled-active-success: var(--color-emerald-800);
211
+ --color-bg-filled-active-danger: var(--color-red-800);
212
+ --color-bg-filled-active-warning: var(--color-amber-800);
213
+ --color-bg-filled-active-info: var(--color-cyan-800);
214
+ --color-bg-filled-active-link: var(--color-blue-800);
215
+ --color-bg-layout-default: var(--color-white);
216
+ --color-bg-layout-primary: var(--color-white);
217
+ --color-bg-layout-secondary: var(--color-gray-50);
218
+ --color-bg-layout-tertiary: var(--color-gray-100);
219
+ --color-bg-layout-accent: var(--color-indigo-50);
220
+ --color-bg-layout-success: var(--color-green-50);
221
+ --color-bg-layout-danger: var(--color-red-50);
222
+ --color-bg-layout-warning: var(--color-yellow-50);
223
+ --color-bg-layout-info: var(--color-blue-50);
224
+ --color-bg-layout-link: var(--color-blue-50);
225
+ --color-bg-filled-layout-default: var(--color-gray-700);
226
+ --color-bg-filled-layout-primary: var(--color-blue-800);
227
+ --color-bg-filled-layout-secondary: var(--color-gray-800);
228
+ --color-bg-filled-layout-tertiary: var(--color-gray-900);
229
+ --color-bg-filled-layout-accent: var(--color-indigo-800);
230
+ --color-bg-filled-layout-success: var(--color-green-800);
231
+ --color-bg-filled-layout-danger: var(--color-red-800);
232
+ --color-bg-filled-layout-warning: var(--color-yellow-800);
233
+ --color-bg-filled-layout-info: var(--color-blue-800);
234
+ --color-bg-filled-layout-link: var(--color-blue-800);
235
+ --color-border-default: var(--color-gray-200);
236
+ --color-border-primary: var(--color-blue-200);
237
+ --color-border-secondary: var(--color-gray-200);
238
+ --color-border-tertiary: var(--color-gray-300);
239
+ --color-border-link: var(--color-blue-200);
240
+ --color-border-accent: var(--color-rose-200);
241
+ --color-border-success: var(--color-green-200);
242
+ --color-border-danger: var(--color-red-200);
243
+ --color-border-warning: var(--color-yellow-200);
244
+ --color-border-info: var(--color-blue-200);
245
+ --color-border-filled-default: var(--color-gray-900);
246
+ --color-border-filled-primary: var(--color-blue-900);
247
+ --color-border-filled-secondary: var(--color-gray-900);
248
+ --color-border-filled-tertiary: var(--color-gray-950);
249
+ --color-border-filled-accent: var(--color-rose-900);
250
+ --color-border-filled-success: var(--color-green-900);
251
+ --color-border-filled-danger: var(--color-red-900);
252
+ --color-border-filled-warning: var(--color-yellow-900);
253
+ --color-border-filled-info: var(--color-blue-900);
254
+ --color-border-filled-link: var(--color-blue-900);
255
+ --ui-br-xs: 0.125rem;
256
+ --ui-br-sm: 0.25rem;
257
+ --ui-br-md: 0.375rem;
258
+ --ui-br-lg: 0.5rem;
259
+ --ui-br-xl: 0.625rem;
260
+ --layout-br-xs: 0.375rem;
261
+ --layout-br-sm: 0.5rem;
262
+ --layout-br-md: 0.625rem;
263
+ --layout-br-lg: 0.75rem;
264
+ --layout-br-xl: 0.875rem;
261
265
  }
262
266
  }
263
267
  @layer base {
@@ -427,6 +431,9 @@
427
431
  .sticky {
428
432
  position: sticky;
429
433
  }
434
+ .left-3 {
435
+ left: calc(var(--spacing) * 3);
436
+ }
430
437
  .isolate {
431
438
  isolation: isolate;
432
439
  }
@@ -750,35 +757,35 @@
750
757
  .rounded {
751
758
  border-radius: 0.25rem;
752
759
  }
753
- .rounded-\(--layout-border-radius-lg\) {
754
- border-radius: var(--layout-border-radius-lg);
760
+ .rounded-\(--layout-br-lg\) {
761
+ border-radius: var(--layout-br-lg);
755
762
  }
756
- .rounded-\(--layout-border-radius-md\) {
757
- border-radius: var(--layout-border-radius-md);
763
+ .rounded-\(--layout-br-md\) {
764
+ border-radius: var(--layout-br-md);
758
765
  }
759
- .rounded-\(--layout-border-radius-sm\) {
760
- border-radius: var(--layout-border-radius-sm);
766
+ .rounded-\(--layout-br-sm\) {
767
+ border-radius: var(--layout-br-sm);
761
768
  }
762
- .rounded-\(--layout-border-radius-xl\) {
763
- border-radius: var(--layout-border-radius-xl);
769
+ .rounded-\(--layout-br-xl\) {
770
+ border-radius: var(--layout-br-xl);
764
771
  }
765
- .rounded-\(--layout-border-radius-xs\) {
766
- border-radius: var(--layout-border-radius-xs);
772
+ .rounded-\(--layout-br-xs\) {
773
+ border-radius: var(--layout-br-xs);
767
774
  }
768
- .rounded-\(--ui-border-radius-lg\) {
769
- border-radius: var(--ui-border-radius-lg);
775
+ .rounded-\(--ui-br-lg\) {
776
+ border-radius: var(--ui-br-lg);
770
777
  }
771
- .rounded-\(--ui-border-radius-md\) {
772
- border-radius: var(--ui-border-radius-md);
778
+ .rounded-\(--ui-br-md\) {
779
+ border-radius: var(--ui-br-md);
773
780
  }
774
- .rounded-\(--ui-border-radius-sm\) {
775
- border-radius: var(--ui-border-radius-sm);
781
+ .rounded-\(--ui-br-sm\) {
782
+ border-radius: var(--ui-br-sm);
776
783
  }
777
- .rounded-\(--ui-border-radius-xl\) {
778
- border-radius: var(--ui-border-radius-xl);
784
+ .rounded-\(--ui-br-xl\) {
785
+ border-radius: var(--ui-br-xl);
779
786
  }
780
- .rounded-\(--ui-border-radius-xs\) {
781
- border-radius: var(--ui-border-radius-xs);
787
+ .rounded-\(--ui-br-xs\) {
788
+ border-radius: var(--ui-br-xs);
782
789
  }
783
790
  .rounded-full {
784
791
  border-radius: calc(infinity * 1px);
@@ -798,75 +805,69 @@
798
805
  --tw-border-style: dashed;
799
806
  border-style: dashed;
800
807
  }
801
- .border-\(--border-color-accent\) {
802
- border-color: var(--border-color-accent);
803
- }
804
- .border-\(--border-color-danger\) {
805
- border-color: var(--border-color-danger);
808
+ .border-\(--color-border-accent\) {
809
+ border-color: var(--color-border-accent);
806
810
  }
807
- .border-\(--border-color-default\) {
808
- border-color: var(--border-color-default);
811
+ .border-\(--color-border-danger\) {
812
+ border-color: var(--color-border-danger);
809
813
  }
810
- .border-\(--border-color-info\) {
811
- border-color: var(--border-color-info);
814
+ .border-\(--color-border-default\) {
815
+ border-color: var(--color-border-default);
812
816
  }
813
- .border-\(--border-color-link\) {
814
- border-color: var(--border-color-link);
817
+ .border-\(--color-border-filled-accent\) {
818
+ border-color: var(--color-border-filled-accent);
815
819
  }
816
- .border-\(--border-color-primary\) {
817
- border-color: var(--border-color-primary);
820
+ .border-\(--color-border-filled-danger\) {
821
+ border-color: var(--color-border-filled-danger);
818
822
  }
819
- .border-\(--border-color-secondary\) {
820
- border-color: var(--border-color-secondary);
823
+ .border-\(--color-border-filled-default\) {
824
+ border-color: var(--color-border-filled-default);
821
825
  }
822
- .border-\(--border-color-success\) {
823
- border-color: var(--border-color-success);
826
+ .border-\(--color-border-filled-info\) {
827
+ border-color: var(--color-border-filled-info);
824
828
  }
825
- .border-\(--border-color-tertiary\) {
826
- border-color: var(--border-color-tertiary);
829
+ .border-\(--color-border-filled-link\) {
830
+ border-color: var(--color-border-filled-link);
827
831
  }
828
- .border-\(--border-color-warning\) {
829
- border-color: var(--border-color-warning);
832
+ .border-\(--color-border-filled-primary\) {
833
+ border-color: var(--color-border-filled-primary);
830
834
  }
831
- .border-\(--filled-border-color-accent\) {
832
- border-color: var(--filled-border-color-accent);
835
+ .border-\(--color-border-filled-secondary\) {
836
+ border-color: var(--color-border-filled-secondary);
833
837
  }
834
- .border-\(--filled-border-color-danger\) {
835
- border-color: var(--filled-border-color-danger);
838
+ .border-\(--color-border-filled-success\) {
839
+ border-color: var(--color-border-filled-success);
836
840
  }
837
- .border-\(--filled-border-color-default\) {
838
- border-color: var(--filled-border-color-default);
841
+ .border-\(--color-border-filled-tertiary\) {
842
+ border-color: var(--color-border-filled-tertiary);
839
843
  }
840
- .border-\(--filled-border-color-info\) {
841
- border-color: var(--filled-border-color-info);
844
+ .border-\(--color-border-filled-warning\) {
845
+ border-color: var(--color-border-filled-warning);
842
846
  }
843
- .border-\(--filled-border-color-link\) {
844
- border-color: var(--filled-border-color-link);
847
+ .border-\(--color-border-info\) {
848
+ border-color: var(--color-border-info);
845
849
  }
846
- .border-\(--filled-border-color-primary\) {
847
- border-color: var(--filled-border-color-primary);
850
+ .border-\(--color-border-link\) {
851
+ border-color: var(--color-border-link);
848
852
  }
849
- .border-\(--filled-border-color-secondary\) {
850
- border-color: var(--filled-border-color-secondary);
853
+ .border-\(--color-border-primary\) {
854
+ border-color: var(--color-border-primary);
851
855
  }
852
- .border-\(--filled-border-color-success\) {
853
- border-color: var(--filled-border-color-success);
856
+ .border-\(--color-border-secondary\) {
857
+ border-color: var(--color-border-secondary);
854
858
  }
855
- .border-\(--filled-border-color-tertiary\) {
856
- border-color: var(--filled-border-color-tertiary);
859
+ .border-\(--color-border-success\) {
860
+ border-color: var(--color-border-success);
857
861
  }
858
- .border-\(--filled-border-color-warning\) {
859
- border-color: var(--filled-border-color-warning);
862
+ .border-\(--color-border-tertiary\) {
863
+ border-color: var(--color-border-tertiary);
860
864
  }
861
- .border-accent {
862
- border-color: var(--border-color-accent);
865
+ .border-\(--color-border-warning\) {
866
+ border-color: var(--color-border-warning);
863
867
  }
864
868
  .border-blue-300 {
865
869
  border-color: var(--color-blue-300);
866
870
  }
867
- .border-danger {
868
- border-color: var(--border-color-danger);
869
- }
870
871
  .border-green-200 {
871
872
  border-color: var(--color-green-200);
872
873
  }
@@ -876,173 +877,167 @@
876
877
  .border-indigo-400 {
877
878
  border-color: var(--color-indigo-400);
878
879
  }
879
- .border-primary {
880
- border-color: var(--border-color-primary);
881
- }
882
880
  .border-red-200 {
883
881
  border-color: var(--color-red-200);
884
882
  }
885
883
  .border-red-600 {
886
884
  border-color: var(--color-red-600);
887
885
  }
888
- .border-secondary {
889
- border-color: var(--border-color-secondary);
890
- }
891
886
  .border-transparent {
892
887
  border-color: transparent;
893
888
  }
894
889
  .border-violet-400 {
895
890
  border-color: var(--color-violet-400);
896
891
  }
897
- .bg-\(--background-color-accent\) {
898
- background-color: var(--background-color-accent);
892
+ .bg-\(--color-bg-accent\) {
893
+ background-color: var(--color-bg-accent);
899
894
  }
900
- .bg-\(--background-color-danger\) {
901
- background-color: var(--background-color-danger);
895
+ .bg-\(--color-bg-danger\) {
896
+ background-color: var(--color-bg-danger);
902
897
  }
903
- .bg-\(--background-color-default\) {
904
- background-color: var(--background-color-default);
898
+ .bg-\(--color-bg-default\) {
899
+ background-color: var(--color-bg-default);
905
900
  }
906
- .bg-\(--background-color-info\) {
907
- background-color: var(--background-color-info);
901
+ .bg-\(--color-bg-filled-accent\) {
902
+ background-color: var(--color-bg-filled-accent);
908
903
  }
909
- .bg-\(--background-color-link\) {
910
- background-color: var(--background-color-link);
904
+ .bg-\(--color-bg-filled-danger\) {
905
+ background-color: var(--color-bg-filled-danger);
911
906
  }
912
- .bg-\(--background-color-primary\) {
913
- background-color: var(--background-color-primary);
907
+ .bg-\(--color-bg-filled-default\) {
908
+ background-color: var(--color-bg-filled-default);
914
909
  }
915
- .bg-\(--background-color-secondary\) {
916
- background-color: var(--background-color-secondary);
910
+ .bg-\(--color-bg-filled-info\) {
911
+ background-color: var(--color-bg-filled-info);
917
912
  }
918
- .bg-\(--background-color-success\) {
919
- background-color: var(--background-color-success);
913
+ .bg-\(--color-bg-filled-layout-accent\) {
914
+ background-color: var(--color-bg-filled-layout-accent);
920
915
  }
921
- .bg-\(--background-color-tertiary\) {
922
- background-color: var(--background-color-tertiary);
916
+ .bg-\(--color-bg-filled-layout-danger\) {
917
+ background-color: var(--color-bg-filled-layout-danger);
923
918
  }
924
- .bg-\(--background-color-warning\) {
925
- background-color: var(--background-color-warning);
919
+ .bg-\(--color-bg-filled-layout-default\) {
920
+ background-color: var(--color-bg-filled-layout-default);
926
921
  }
927
- .bg-\(--border-color-accent\) {
928
- background-color: var(--border-color-accent);
922
+ .bg-\(--color-bg-filled-layout-info\) {
923
+ background-color: var(--color-bg-filled-layout-info);
929
924
  }
930
- .bg-\(--border-color-danger\) {
931
- background-color: var(--border-color-danger);
925
+ .bg-\(--color-bg-filled-layout-link\) {
926
+ background-color: var(--color-bg-filled-layout-link);
932
927
  }
933
- .bg-\(--border-color-default\) {
934
- background-color: var(--border-color-default);
928
+ .bg-\(--color-bg-filled-layout-primary\) {
929
+ background-color: var(--color-bg-filled-layout-primary);
935
930
  }
936
- .bg-\(--border-color-info\) {
937
- background-color: var(--border-color-info);
931
+ .bg-\(--color-bg-filled-layout-secondary\) {
932
+ background-color: var(--color-bg-filled-layout-secondary);
938
933
  }
939
- .bg-\(--border-color-link\) {
940
- background-color: var(--border-color-link);
934
+ .bg-\(--color-bg-filled-layout-success\) {
935
+ background-color: var(--color-bg-filled-layout-success);
941
936
  }
942
- .bg-\(--border-color-primary\) {
943
- background-color: var(--border-color-primary);
937
+ .bg-\(--color-bg-filled-layout-tertiary\) {
938
+ background-color: var(--color-bg-filled-layout-tertiary);
944
939
  }
945
- .bg-\(--border-color-secondary\) {
946
- background-color: var(--border-color-secondary);
940
+ .bg-\(--color-bg-filled-layout-warning\) {
941
+ background-color: var(--color-bg-filled-layout-warning);
947
942
  }
948
- .bg-\(--border-color-success\) {
949
- background-color: var(--border-color-success);
943
+ .bg-\(--color-bg-filled-link\) {
944
+ background-color: var(--color-bg-filled-link);
950
945
  }
951
- .bg-\(--border-color-tertiary\) {
952
- background-color: var(--border-color-tertiary);
946
+ .bg-\(--color-bg-filled-primary\) {
947
+ background-color: var(--color-bg-filled-primary);
953
948
  }
954
- .bg-\(--border-color-warning\) {
955
- background-color: var(--border-color-warning);
949
+ .bg-\(--color-bg-filled-secondary\) {
950
+ background-color: var(--color-bg-filled-secondary);
956
951
  }
957
- .bg-\(--filled-background-color-accent\) {
958
- background-color: var(--filled-background-color-accent);
952
+ .bg-\(--color-bg-filled-success\) {
953
+ background-color: var(--color-bg-filled-success);
959
954
  }
960
- .bg-\(--filled-background-color-danger\) {
961
- background-color: var(--filled-background-color-danger);
955
+ .bg-\(--color-bg-filled-tertiary\) {
956
+ background-color: var(--color-bg-filled-tertiary);
962
957
  }
963
- .bg-\(--filled-background-color-default\) {
964
- background-color: var(--filled-background-color-default);
958
+ .bg-\(--color-bg-filled-warning\) {
959
+ background-color: var(--color-bg-filled-warning);
965
960
  }
966
- .bg-\(--filled-background-color-info\) {
967
- background-color: var(--filled-background-color-info);
961
+ .bg-\(--color-bg-info\) {
962
+ background-color: var(--color-bg-info);
968
963
  }
969
- .bg-\(--filled-background-color-link\) {
970
- background-color: var(--filled-background-color-link);
964
+ .bg-\(--color-bg-layout-accent\) {
965
+ background-color: var(--color-bg-layout-accent);
971
966
  }
972
- .bg-\(--filled-background-color-primary\) {
973
- background-color: var(--filled-background-color-primary);
967
+ .bg-\(--color-bg-layout-danger\) {
968
+ background-color: var(--color-bg-layout-danger);
974
969
  }
975
- .bg-\(--filled-background-color-secondary\) {
976
- background-color: var(--filled-background-color-secondary);
970
+ .bg-\(--color-bg-layout-default\) {
971
+ background-color: var(--color-bg-layout-default);
977
972
  }
978
- .bg-\(--filled-background-color-success\) {
979
- background-color: var(--filled-background-color-success);
973
+ .bg-\(--color-bg-layout-info\) {
974
+ background-color: var(--color-bg-layout-info);
980
975
  }
981
- .bg-\(--filled-background-color-tertiary\) {
982
- background-color: var(--filled-background-color-tertiary);
976
+ .bg-\(--color-bg-layout-link\) {
977
+ background-color: var(--color-bg-layout-link);
983
978
  }
984
- .bg-\(--filled-background-color-warning\) {
985
- background-color: var(--filled-background-color-warning);
979
+ .bg-\(--color-bg-layout-primary\) {
980
+ background-color: var(--color-bg-layout-primary);
986
981
  }
987
- .bg-\(--layout-background-accent\) {
988
- background-color: var(--layout-background-accent);
982
+ .bg-\(--color-bg-layout-secondary\) {
983
+ background-color: var(--color-bg-layout-secondary);
989
984
  }
990
- .bg-\(--layout-background-danger\) {
991
- background-color: var(--layout-background-danger);
985
+ .bg-\(--color-bg-layout-success\) {
986
+ background-color: var(--color-bg-layout-success);
992
987
  }
993
- .bg-\(--layout-background-default\) {
994
- background-color: var(--layout-background-default);
988
+ .bg-\(--color-bg-layout-tertiary\) {
989
+ background-color: var(--color-bg-layout-tertiary);
995
990
  }
996
- .bg-\(--layout-background-info\) {
997
- background-color: var(--layout-background-info);
991
+ .bg-\(--color-bg-layout-warning\) {
992
+ background-color: var(--color-bg-layout-warning);
998
993
  }
999
- .bg-\(--layout-background-link\) {
1000
- background-color: var(--layout-background-link);
994
+ .bg-\(--color-bg-link\) {
995
+ background-color: var(--color-bg-link);
1001
996
  }
1002
- .bg-\(--layout-background-primary\) {
1003
- background-color: var(--layout-background-primary);
997
+ .bg-\(--color-bg-primary\) {
998
+ background-color: var(--color-bg-primary);
1004
999
  }
1005
- .bg-\(--layout-background-secondary\) {
1006
- background-color: var(--layout-background-secondary);
1000
+ .bg-\(--color-bg-secondary\) {
1001
+ background-color: var(--color-bg-secondary);
1007
1002
  }
1008
- .bg-\(--layout-background-success\) {
1009
- background-color: var(--layout-background-success);
1003
+ .bg-\(--color-bg-success\) {
1004
+ background-color: var(--color-bg-success);
1010
1005
  }
1011
- .bg-\(--layout-background-tertiary\) {
1012
- background-color: var(--layout-background-tertiary);
1006
+ .bg-\(--color-bg-tertiary\) {
1007
+ background-color: var(--color-bg-tertiary);
1013
1008
  }
1014
- .bg-\(--layout-background-warning\) {
1015
- background-color: var(--layout-background-warning);
1009
+ .bg-\(--color-bg-warning\) {
1010
+ background-color: var(--color-bg-warning);
1016
1011
  }
1017
- .bg-\(--layout-filled-background-color-accent\) {
1018
- background-color: var(--layout-filled-background-color-accent);
1012
+ .bg-\(--color-border-accent\) {
1013
+ background-color: var(--color-border-accent);
1019
1014
  }
1020
- .bg-\(--layout-filled-background-color-danger\) {
1021
- background-color: var(--layout-filled-background-color-danger);
1015
+ .bg-\(--color-border-danger\) {
1016
+ background-color: var(--color-border-danger);
1022
1017
  }
1023
- .bg-\(--layout-filled-background-color-default\) {
1024
- background-color: var(--layout-filled-background-color-default);
1018
+ .bg-\(--color-border-default\) {
1019
+ background-color: var(--color-border-default);
1025
1020
  }
1026
- .bg-\(--layout-filled-background-color-info\) {
1027
- background-color: var(--layout-filled-background-color-info);
1021
+ .bg-\(--color-border-info\) {
1022
+ background-color: var(--color-border-info);
1028
1023
  }
1029
- .bg-\(--layout-filled-background-color-link\) {
1030
- background-color: var(--layout-filled-background-color-link);
1024
+ .bg-\(--color-border-link\) {
1025
+ background-color: var(--color-border-link);
1031
1026
  }
1032
- .bg-\(--layout-filled-background-color-primary\) {
1033
- background-color: var(--layout-filled-background-color-primary);
1027
+ .bg-\(--color-border-primary\) {
1028
+ background-color: var(--color-border-primary);
1034
1029
  }
1035
- .bg-\(--layout-filled-background-color-secondary\) {
1036
- background-color: var(--layout-filled-background-color-secondary);
1030
+ .bg-\(--color-border-secondary\) {
1031
+ background-color: var(--color-border-secondary);
1037
1032
  }
1038
- .bg-\(--layout-filled-background-color-success\) {
1039
- background-color: var(--layout-filled-background-color-success);
1033
+ .bg-\(--color-border-success\) {
1034
+ background-color: var(--color-border-success);
1040
1035
  }
1041
- .bg-\(--layout-filled-background-color-tertiary\) {
1042
- background-color: var(--layout-filled-background-color-tertiary);
1036
+ .bg-\(--color-border-tertiary\) {
1037
+ background-color: var(--color-border-tertiary);
1043
1038
  }
1044
- .bg-\(--layout-filled-background-color-warning\) {
1045
- background-color: var(--layout-filled-background-color-warning);
1039
+ .bg-\(--color-border-warning\) {
1040
+ background-color: var(--color-border-warning);
1046
1041
  }
1047
1042
  .bg-blue-500 {
1048
1043
  background-color: var(--color-blue-500);
@@ -1161,6 +1156,9 @@
1161
1156
  .py-6 {
1162
1157
  padding-block: calc(var(--spacing) * 6);
1163
1158
  }
1159
+ .py-7 {
1160
+ padding-block: calc(var(--spacing) * 7);
1161
+ }
1164
1162
  .py-8 {
1165
1163
  padding-block: calc(var(--spacing) * 8);
1166
1164
  }
@@ -1310,68 +1308,65 @@
1310
1308
  .whitespace-nowrap {
1311
1309
  white-space: nowrap;
1312
1310
  }
1313
- .text-\(--filled-text-color-accent\) {
1314
- color: var(--filled-text-color-accent);
1311
+ .text-\(--color-text-accent\) {
1312
+ color: var(--color-text-accent);
1315
1313
  }
1316
- .text-\(--filled-text-color-danger\) {
1317
- color: var(--filled-text-color-danger);
1314
+ .text-\(--color-text-danger\) {
1315
+ color: var(--color-text-danger);
1318
1316
  }
1319
- .text-\(--filled-text-color-default\) {
1320
- color: var(--filled-text-color-default);
1317
+ .text-\(--color-text-default\) {
1318
+ color: var(--color-text-default);
1321
1319
  }
1322
- .text-\(--filled-text-color-info\) {
1323
- color: var(--filled-text-color-info);
1320
+ .text-\(--color-text-filled-accent\) {
1321
+ color: var(--color-text-filled-accent);
1324
1322
  }
1325
- .text-\(--filled-text-color-link\) {
1326
- color: var(--filled-text-color-link);
1323
+ .text-\(--color-text-filled-danger\) {
1324
+ color: var(--color-text-filled-danger);
1327
1325
  }
1328
- .text-\(--filled-text-color-primary\) {
1329
- color: var(--filled-text-color-primary);
1326
+ .text-\(--color-text-filled-default\) {
1327
+ color: var(--color-text-filled-default);
1330
1328
  }
1331
- .text-\(--filled-text-color-secondary\) {
1332
- color: var(--filled-text-color-secondary);
1329
+ .text-\(--color-text-filled-info\) {
1330
+ color: var(--color-text-filled-info);
1333
1331
  }
1334
- .text-\(--filled-text-color-success\) {
1335
- color: var(--filled-text-color-success);
1332
+ .text-\(--color-text-filled-link\) {
1333
+ color: var(--color-text-filled-link);
1336
1334
  }
1337
- .text-\(--filled-text-color-tertiary\) {
1338
- color: var(--filled-text-color-tertiary);
1335
+ .text-\(--color-text-filled-primary\) {
1336
+ color: var(--color-text-filled-primary);
1339
1337
  }
1340
- .text-\(--filled-text-color-transparent\) {
1341
- color: var(--filled-text-color-transparent);
1338
+ .text-\(--color-text-filled-secondary\) {
1339
+ color: var(--color-text-filled-secondary);
1342
1340
  }
1343
- .text-\(--filled-text-color-warning\) {
1344
- color: var(--filled-text-color-warning);
1341
+ .text-\(--color-text-filled-success\) {
1342
+ color: var(--color-text-filled-success);
1345
1343
  }
1346
- .text-\(--text-color-accent\) {
1347
- color: var(--text-color-accent);
1344
+ .text-\(--color-text-filled-tertiary\) {
1345
+ color: var(--color-text-filled-tertiary);
1348
1346
  }
1349
- .text-\(--text-color-danger\) {
1350
- color: var(--text-color-danger);
1347
+ .text-\(--color-text-filled-warning\) {
1348
+ color: var(--color-text-filled-warning);
1351
1349
  }
1352
- .text-\(--text-color-default\) {
1353
- color: var(--text-color-default);
1350
+ .text-\(--color-text-info\) {
1351
+ color: var(--color-text-info);
1354
1352
  }
1355
- .text-\(--text-color-info\) {
1356
- color: var(--text-color-info);
1353
+ .text-\(--color-text-link\) {
1354
+ color: var(--color-text-link);
1357
1355
  }
1358
- .text-\(--text-color-link\) {
1359
- color: var(--text-color-link);
1356
+ .text-\(--color-text-primary\) {
1357
+ color: var(--color-text-primary);
1360
1358
  }
1361
- .text-\(--text-color-primary\) {
1362
- color: var(--text-color-primary);
1359
+ .text-\(--color-text-secondary\) {
1360
+ color: var(--color-text-secondary);
1363
1361
  }
1364
- .text-\(--text-color-secondary\) {
1365
- color: var(--text-color-secondary);
1362
+ .text-\(--color-text-success\) {
1363
+ color: var(--color-text-success);
1366
1364
  }
1367
- .text-\(--text-color-success\) {
1368
- color: var(--text-color-success);
1365
+ .text-\(--color-text-tertiary\) {
1366
+ color: var(--color-text-tertiary);
1369
1367
  }
1370
- .text-\(--text-color-tertiary\) {
1371
- color: var(--text-color-tertiary);
1372
- }
1373
- .text-\(--text-color-warning\) {
1374
- color: var(--text-color-warning);
1368
+ .text-\(--color-text-warning\) {
1369
+ color: var(--color-text-warning);
1375
1370
  }
1376
1371
  .text-blue-200 {
1377
1372
  color: var(--color-blue-200);
@@ -1379,6 +1374,9 @@
1379
1374
  .text-blue-500 {
1380
1375
  color: var(--color-blue-500);
1381
1376
  }
1377
+ .text-gray-500 {
1378
+ color: var(--color-gray-500);
1379
+ }
1382
1380
  .text-green-500 {
1383
1381
  color: var(--color-green-500);
1384
1382
  }
@@ -1430,65 +1428,65 @@
1430
1428
  .underline {
1431
1429
  text-decoration-line: underline;
1432
1430
  }
1433
- .accent-\(--background-color-accent\) {
1434
- accent-color: var(--background-color-accent);
1431
+ .accent-\(--color-bg-accent\) {
1432
+ accent-color: var(--color-bg-accent);
1435
1433
  }
1436
- .accent-\(--background-color-danger\) {
1437
- accent-color: var(--background-color-danger);
1434
+ .accent-\(--color-bg-danger\) {
1435
+ accent-color: var(--color-bg-danger);
1438
1436
  }
1439
- .accent-\(--background-color-default\) {
1440
- accent-color: var(--background-color-default);
1437
+ .accent-\(--color-bg-default\) {
1438
+ accent-color: var(--color-bg-default);
1441
1439
  }
1442
- .accent-\(--background-color-info\) {
1443
- accent-color: var(--background-color-info);
1440
+ .accent-\(--color-bg-filled-accent\) {
1441
+ accent-color: var(--color-bg-filled-accent);
1444
1442
  }
1445
- .accent-\(--background-color-link\) {
1446
- accent-color: var(--background-color-link);
1443
+ .accent-\(--color-bg-filled-danger\) {
1444
+ accent-color: var(--color-bg-filled-danger);
1447
1445
  }
1448
- .accent-\(--background-color-primary\) {
1449
- accent-color: var(--background-color-primary);
1446
+ .accent-\(--color-bg-filled-default\) {
1447
+ accent-color: var(--color-bg-filled-default);
1450
1448
  }
1451
- .accent-\(--background-color-secondary\) {
1452
- accent-color: var(--background-color-secondary);
1449
+ .accent-\(--color-bg-filled-info\) {
1450
+ accent-color: var(--color-bg-filled-info);
1453
1451
  }
1454
- .accent-\(--background-color-success\) {
1455
- accent-color: var(--background-color-success);
1452
+ .accent-\(--color-bg-filled-link\) {
1453
+ accent-color: var(--color-bg-filled-link);
1456
1454
  }
1457
- .accent-\(--background-color-tertiary\) {
1458
- accent-color: var(--background-color-tertiary);
1455
+ .accent-\(--color-bg-filled-primary\) {
1456
+ accent-color: var(--color-bg-filled-primary);
1459
1457
  }
1460
- .accent-\(--background-color-warning\) {
1461
- accent-color: var(--background-color-warning);
1458
+ .accent-\(--color-bg-filled-secondary\) {
1459
+ accent-color: var(--color-bg-filled-secondary);
1462
1460
  }
1463
- .accent-\(--filled-background-color-accent\) {
1464
- accent-color: var(--filled-background-color-accent);
1461
+ .accent-\(--color-bg-filled-success\) {
1462
+ accent-color: var(--color-bg-filled-success);
1465
1463
  }
1466
- .accent-\(--filled-background-color-danger\) {
1467
- accent-color: var(--filled-background-color-danger);
1464
+ .accent-\(--color-bg-filled-tertiary\) {
1465
+ accent-color: var(--color-bg-filled-tertiary);
1468
1466
  }
1469
- .accent-\(--filled-background-color-default\) {
1470
- accent-color: var(--filled-background-color-default);
1467
+ .accent-\(--color-bg-filled-warning\) {
1468
+ accent-color: var(--color-bg-filled-warning);
1471
1469
  }
1472
- .accent-\(--filled-background-color-info\) {
1473
- accent-color: var(--filled-background-color-info);
1470
+ .accent-\(--color-bg-info\) {
1471
+ accent-color: var(--color-bg-info);
1474
1472
  }
1475
- .accent-\(--filled-background-color-link\) {
1476
- accent-color: var(--filled-background-color-link);
1473
+ .accent-\(--color-bg-link\) {
1474
+ accent-color: var(--color-bg-link);
1477
1475
  }
1478
- .accent-\(--filled-background-color-primary\) {
1479
- accent-color: var(--filled-background-color-primary);
1476
+ .accent-\(--color-bg-primary\) {
1477
+ accent-color: var(--color-bg-primary);
1480
1478
  }
1481
- .accent-\(--filled-background-color-secondary\) {
1482
- accent-color: var(--filled-background-color-secondary);
1479
+ .accent-\(--color-bg-secondary\) {
1480
+ accent-color: var(--color-bg-secondary);
1483
1481
  }
1484
- .accent-\(--filled-background-color-success\) {
1485
- accent-color: var(--filled-background-color-success);
1482
+ .accent-\(--color-bg-success\) {
1483
+ accent-color: var(--color-bg-success);
1486
1484
  }
1487
- .accent-\(--filled-background-color-tertiary\) {
1488
- accent-color: var(--filled-background-color-tertiary);
1485
+ .accent-\(--color-bg-tertiary\) {
1486
+ accent-color: var(--color-bg-tertiary);
1489
1487
  }
1490
- .accent-\(--filled-background-color-warning\) {
1491
- accent-color: var(--filled-background-color-warning);
1488
+ .accent-\(--color-bg-warning\) {
1489
+ accent-color: var(--color-bg-warning);
1492
1490
  }
1493
1491
  .accent-transparent {
1494
1492
  accent-color: transparent;
@@ -1540,65 +1538,65 @@
1540
1538
  --tw-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-shadow-alpha), transparent);
1541
1539
  }
1542
1540
  }
1543
- .ring-\(--border-color-accent\) {
1544
- --tw-ring-color: var(--border-color-accent);
1541
+ .ring-\(--color-border-accent\) {
1542
+ --tw-ring-color: var(--color-border-accent);
1545
1543
  }
1546
- .ring-\(--border-color-danger\) {
1547
- --tw-ring-color: var(--border-color-danger);
1544
+ .ring-\(--color-border-danger\) {
1545
+ --tw-ring-color: var(--color-border-danger);
1548
1546
  }
1549
- .ring-\(--border-color-default\) {
1550
- --tw-ring-color: var(--border-color-default);
1547
+ .ring-\(--color-border-default\) {
1548
+ --tw-ring-color: var(--color-border-default);
1551
1549
  }
1552
- .ring-\(--border-color-info\) {
1553
- --tw-ring-color: var(--border-color-info);
1550
+ .ring-\(--color-border-filled-accent\) {
1551
+ --tw-ring-color: var(--color-border-filled-accent);
1554
1552
  }
1555
- .ring-\(--border-color-link\) {
1556
- --tw-ring-color: var(--border-color-link);
1553
+ .ring-\(--color-border-filled-danger\) {
1554
+ --tw-ring-color: var(--color-border-filled-danger);
1557
1555
  }
1558
- .ring-\(--border-color-primary\) {
1559
- --tw-ring-color: var(--border-color-primary);
1556
+ .ring-\(--color-border-filled-default\) {
1557
+ --tw-ring-color: var(--color-border-filled-default);
1560
1558
  }
1561
- .ring-\(--border-color-secondary\) {
1562
- --tw-ring-color: var(--border-color-secondary);
1559
+ .ring-\(--color-border-filled-info\) {
1560
+ --tw-ring-color: var(--color-border-filled-info);
1563
1561
  }
1564
- .ring-\(--border-color-success\) {
1565
- --tw-ring-color: var(--border-color-success);
1562
+ .ring-\(--color-border-filled-link\) {
1563
+ --tw-ring-color: var(--color-border-filled-link);
1566
1564
  }
1567
- .ring-\(--border-color-tertiary\) {
1568
- --tw-ring-color: var(--border-color-tertiary);
1565
+ .ring-\(--color-border-filled-primary\) {
1566
+ --tw-ring-color: var(--color-border-filled-primary);
1569
1567
  }
1570
- .ring-\(--border-color-warning\) {
1571
- --tw-ring-color: var(--border-color-warning);
1568
+ .ring-\(--color-border-filled-secondary\) {
1569
+ --tw-ring-color: var(--color-border-filled-secondary);
1572
1570
  }
1573
- .ring-\(--filled-border-color-accent\) {
1574
- --tw-ring-color: var(--filled-border-color-accent);
1571
+ .ring-\(--color-border-filled-success\) {
1572
+ --tw-ring-color: var(--color-border-filled-success);
1575
1573
  }
1576
- .ring-\(--filled-border-color-danger\) {
1577
- --tw-ring-color: var(--filled-border-color-danger);
1574
+ .ring-\(--color-border-filled-tertiary\) {
1575
+ --tw-ring-color: var(--color-border-filled-tertiary);
1578
1576
  }
1579
- .ring-\(--filled-border-color-default\) {
1580
- --tw-ring-color: var(--filled-border-color-default);
1577
+ .ring-\(--color-border-filled-warning\) {
1578
+ --tw-ring-color: var(--color-border-filled-warning);
1581
1579
  }
1582
- .ring-\(--filled-border-color-info\) {
1583
- --tw-ring-color: var(--filled-border-color-info);
1580
+ .ring-\(--color-border-info\) {
1581
+ --tw-ring-color: var(--color-border-info);
1584
1582
  }
1585
- .ring-\(--filled-border-color-link\) {
1586
- --tw-ring-color: var(--filled-border-color-link);
1583
+ .ring-\(--color-border-link\) {
1584
+ --tw-ring-color: var(--color-border-link);
1587
1585
  }
1588
- .ring-\(--filled-border-color-primary\) {
1589
- --tw-ring-color: var(--filled-border-color-primary);
1586
+ .ring-\(--color-border-primary\) {
1587
+ --tw-ring-color: var(--color-border-primary);
1590
1588
  }
1591
- .ring-\(--filled-border-color-secondary\) {
1592
- --tw-ring-color: var(--filled-border-color-secondary);
1589
+ .ring-\(--color-border-secondary\) {
1590
+ --tw-ring-color: var(--color-border-secondary);
1593
1591
  }
1594
- .ring-\(--filled-border-color-success\) {
1595
- --tw-ring-color: var(--filled-border-color-success);
1592
+ .ring-\(--color-border-success\) {
1593
+ --tw-ring-color: var(--color-border-success);
1596
1594
  }
1597
- .ring-\(--filled-border-color-tertiary\) {
1598
- --tw-ring-color: var(--filled-border-color-tertiary);
1595
+ .ring-\(--color-border-tertiary\) {
1596
+ --tw-ring-color: var(--color-border-tertiary);
1599
1597
  }
1600
- .ring-\(--filled-border-color-warning\) {
1601
- --tw-ring-color: var(--filled-border-color-warning);
1598
+ .ring-\(--color-border-warning\) {
1599
+ --tw-ring-color: var(--color-border-warning);
1602
1600
  }
1603
1601
  .ring-orange-500 {
1604
1602
  --tw-ring-color: var(--color-orange-500);
@@ -1630,104 +1628,104 @@
1630
1628
  visibility: visible;
1631
1629
  }
1632
1630
  }
1633
- .checked\:bg-\(--background-color-accent\) {
1631
+ .checked\:bg-\(--color-bg-accent\) {
1634
1632
  &:checked {
1635
- background-color: var(--background-color-accent);
1633
+ background-color: var(--color-bg-accent);
1636
1634
  }
1637
1635
  }
1638
- .checked\:bg-\(--background-color-danger\) {
1636
+ .checked\:bg-\(--color-bg-danger\) {
1639
1637
  &:checked {
1640
- background-color: var(--background-color-danger);
1638
+ background-color: var(--color-bg-danger);
1641
1639
  }
1642
1640
  }
1643
- .checked\:bg-\(--background-color-default\) {
1641
+ .checked\:bg-\(--color-bg-default\) {
1644
1642
  &:checked {
1645
- background-color: var(--background-color-default);
1643
+ background-color: var(--color-bg-default);
1646
1644
  }
1647
1645
  }
1648
- .checked\:bg-\(--background-color-info\) {
1646
+ .checked\:bg-\(--color-bg-filled-accent\) {
1649
1647
  &:checked {
1650
- background-color: var(--background-color-info);
1648
+ background-color: var(--color-bg-filled-accent);
1651
1649
  }
1652
1650
  }
1653
- .checked\:bg-\(--background-color-link\) {
1651
+ .checked\:bg-\(--color-bg-filled-danger\) {
1654
1652
  &:checked {
1655
- background-color: var(--background-color-link);
1653
+ background-color: var(--color-bg-filled-danger);
1656
1654
  }
1657
1655
  }
1658
- .checked\:bg-\(--background-color-primary\) {
1656
+ .checked\:bg-\(--color-bg-filled-default\) {
1659
1657
  &:checked {
1660
- background-color: var(--background-color-primary);
1658
+ background-color: var(--color-bg-filled-default);
1661
1659
  }
1662
1660
  }
1663
- .checked\:bg-\(--background-color-secondary\) {
1661
+ .checked\:bg-\(--color-bg-filled-info\) {
1664
1662
  &:checked {
1665
- background-color: var(--background-color-secondary);
1663
+ background-color: var(--color-bg-filled-info);
1666
1664
  }
1667
1665
  }
1668
- .checked\:bg-\(--background-color-success\) {
1666
+ .checked\:bg-\(--color-bg-filled-link\) {
1669
1667
  &:checked {
1670
- background-color: var(--background-color-success);
1668
+ background-color: var(--color-bg-filled-link);
1671
1669
  }
1672
1670
  }
1673
- .checked\:bg-\(--background-color-tertiary\) {
1671
+ .checked\:bg-\(--color-bg-filled-primary\) {
1674
1672
  &:checked {
1675
- background-color: var(--background-color-tertiary);
1673
+ background-color: var(--color-bg-filled-primary);
1676
1674
  }
1677
1675
  }
1678
- .checked\:bg-\(--background-color-warning\) {
1676
+ .checked\:bg-\(--color-bg-filled-secondary\) {
1679
1677
  &:checked {
1680
- background-color: var(--background-color-warning);
1678
+ background-color: var(--color-bg-filled-secondary);
1681
1679
  }
1682
1680
  }
1683
- .checked\:bg-\(--filled-background-color-accent\) {
1681
+ .checked\:bg-\(--color-bg-filled-success\) {
1684
1682
  &:checked {
1685
- background-color: var(--filled-background-color-accent);
1683
+ background-color: var(--color-bg-filled-success);
1686
1684
  }
1687
1685
  }
1688
- .checked\:bg-\(--filled-background-color-danger\) {
1686
+ .checked\:bg-\(--color-bg-filled-tertiary\) {
1689
1687
  &:checked {
1690
- background-color: var(--filled-background-color-danger);
1688
+ background-color: var(--color-bg-filled-tertiary);
1691
1689
  }
1692
1690
  }
1693
- .checked\:bg-\(--filled-background-color-default\) {
1691
+ .checked\:bg-\(--color-bg-filled-warning\) {
1694
1692
  &:checked {
1695
- background-color: var(--filled-background-color-default);
1693
+ background-color: var(--color-bg-filled-warning);
1696
1694
  }
1697
1695
  }
1698
- .checked\:bg-\(--filled-background-color-info\) {
1696
+ .checked\:bg-\(--color-bg-info\) {
1699
1697
  &:checked {
1700
- background-color: var(--filled-background-color-info);
1698
+ background-color: var(--color-bg-info);
1701
1699
  }
1702
1700
  }
1703
- .checked\:bg-\(--filled-background-color-link\) {
1701
+ .checked\:bg-\(--color-bg-link\) {
1704
1702
  &:checked {
1705
- background-color: var(--filled-background-color-link);
1703
+ background-color: var(--color-bg-link);
1706
1704
  }
1707
1705
  }
1708
- .checked\:bg-\(--filled-background-color-primary\) {
1706
+ .checked\:bg-\(--color-bg-primary\) {
1709
1707
  &:checked {
1710
- background-color: var(--filled-background-color-primary);
1708
+ background-color: var(--color-bg-primary);
1711
1709
  }
1712
1710
  }
1713
- .checked\:bg-\(--filled-background-color-secondary\) {
1711
+ .checked\:bg-\(--color-bg-secondary\) {
1714
1712
  &:checked {
1715
- background-color: var(--filled-background-color-secondary);
1713
+ background-color: var(--color-bg-secondary);
1716
1714
  }
1717
1715
  }
1718
- .checked\:bg-\(--filled-background-color-success\) {
1716
+ .checked\:bg-\(--color-bg-success\) {
1719
1717
  &:checked {
1720
- background-color: var(--filled-background-color-success);
1718
+ background-color: var(--color-bg-success);
1721
1719
  }
1722
1720
  }
1723
- .checked\:bg-\(--filled-background-color-tertiary\) {
1721
+ .checked\:bg-\(--color-bg-tertiary\) {
1724
1722
  &:checked {
1725
- background-color: var(--filled-background-color-tertiary);
1723
+ background-color: var(--color-bg-tertiary);
1726
1724
  }
1727
1725
  }
1728
- .checked\:bg-\(--filled-background-color-warning\) {
1726
+ .checked\:bg-\(--color-bg-warning\) {
1729
1727
  &:checked {
1730
- background-color: var(--filled-background-color-warning);
1728
+ background-color: var(--color-bg-warning);
1731
1729
  }
1732
1730
  }
1733
1731
  .checked\:bg-transparent {
@@ -1752,143 +1750,143 @@
1752
1750
  }
1753
1751
  }
1754
1752
  }
1755
- .hover\:bg-\(--background-color-hover-accent\) {
1753
+ .hover\:bg-\(--color-bg-filled-hover-accent\) {
1756
1754
  &:hover {
1757
1755
  @media (hover: hover) {
1758
- background-color: var(--background-color-hover-accent);
1756
+ background-color: var(--color-bg-filled-hover-accent);
1759
1757
  }
1760
1758
  }
1761
1759
  }
1762
- .hover\:bg-\(--background-color-hover-danger\) {
1760
+ .hover\:bg-\(--color-bg-filled-hover-danger\) {
1763
1761
  &:hover {
1764
1762
  @media (hover: hover) {
1765
- background-color: var(--background-color-hover-danger);
1763
+ background-color: var(--color-bg-filled-hover-danger);
1766
1764
  }
1767
1765
  }
1768
1766
  }
1769
- .hover\:bg-\(--background-color-hover-default\) {
1767
+ .hover\:bg-\(--color-bg-filled-hover-default\) {
1770
1768
  &:hover {
1771
1769
  @media (hover: hover) {
1772
- background-color: var(--background-color-hover-default);
1770
+ background-color: var(--color-bg-filled-hover-default);
1773
1771
  }
1774
1772
  }
1775
1773
  }
1776
- .hover\:bg-\(--background-color-hover-info\) {
1774
+ .hover\:bg-\(--color-bg-filled-hover-info\) {
1777
1775
  &:hover {
1778
1776
  @media (hover: hover) {
1779
- background-color: var(--background-color-hover-info);
1777
+ background-color: var(--color-bg-filled-hover-info);
1780
1778
  }
1781
1779
  }
1782
1780
  }
1783
- .hover\:bg-\(--background-color-hover-link\) {
1781
+ .hover\:bg-\(--color-bg-filled-hover-link\) {
1784
1782
  &:hover {
1785
1783
  @media (hover: hover) {
1786
- background-color: var(--background-color-hover-link);
1784
+ background-color: var(--color-bg-filled-hover-link);
1787
1785
  }
1788
1786
  }
1789
1787
  }
1790
- .hover\:bg-\(--background-color-hover-primary\) {
1788
+ .hover\:bg-\(--color-bg-filled-hover-primary\) {
1791
1789
  &:hover {
1792
1790
  @media (hover: hover) {
1793
- background-color: var(--background-color-hover-primary);
1791
+ background-color: var(--color-bg-filled-hover-primary);
1794
1792
  }
1795
1793
  }
1796
1794
  }
1797
- .hover\:bg-\(--background-color-hover-secondary\) {
1795
+ .hover\:bg-\(--color-bg-filled-hover-secondary\) {
1798
1796
  &:hover {
1799
1797
  @media (hover: hover) {
1800
- background-color: var(--background-color-hover-secondary);
1798
+ background-color: var(--color-bg-filled-hover-secondary);
1801
1799
  }
1802
1800
  }
1803
1801
  }
1804
- .hover\:bg-\(--background-color-hover-success\) {
1802
+ .hover\:bg-\(--color-bg-filled-hover-success\) {
1805
1803
  &:hover {
1806
1804
  @media (hover: hover) {
1807
- background-color: var(--background-color-hover-success);
1805
+ background-color: var(--color-bg-filled-hover-success);
1808
1806
  }
1809
1807
  }
1810
1808
  }
1811
- .hover\:bg-\(--background-color-hover-tertiary\) {
1809
+ .hover\:bg-\(--color-bg-filled-hover-tertiary\) {
1812
1810
  &:hover {
1813
1811
  @media (hover: hover) {
1814
- background-color: var(--background-color-hover-tertiary);
1812
+ background-color: var(--color-bg-filled-hover-tertiary);
1815
1813
  }
1816
1814
  }
1817
1815
  }
1818
- .hover\:bg-\(--background-color-hover-warning\) {
1816
+ .hover\:bg-\(--color-bg-filled-hover-warning\) {
1819
1817
  &:hover {
1820
1818
  @media (hover: hover) {
1821
- background-color: var(--background-color-hover-warning);
1819
+ background-color: var(--color-bg-filled-hover-warning);
1822
1820
  }
1823
1821
  }
1824
1822
  }
1825
- .hover\:bg-\(--filled-background-color-hover-accent\) {
1823
+ .hover\:bg-\(--color-bg-hover-accent\) {
1826
1824
  &:hover {
1827
1825
  @media (hover: hover) {
1828
- background-color: var(--filled-background-color-hover-accent);
1826
+ background-color: var(--color-bg-hover-accent);
1829
1827
  }
1830
1828
  }
1831
1829
  }
1832
- .hover\:bg-\(--filled-background-color-hover-danger\) {
1830
+ .hover\:bg-\(--color-bg-hover-danger\) {
1833
1831
  &:hover {
1834
1832
  @media (hover: hover) {
1835
- background-color: var(--filled-background-color-hover-danger);
1833
+ background-color: var(--color-bg-hover-danger);
1836
1834
  }
1837
1835
  }
1838
1836
  }
1839
- .hover\:bg-\(--filled-background-color-hover-default\) {
1837
+ .hover\:bg-\(--color-bg-hover-default\) {
1840
1838
  &:hover {
1841
1839
  @media (hover: hover) {
1842
- background-color: var(--filled-background-color-hover-default);
1840
+ background-color: var(--color-bg-hover-default);
1843
1841
  }
1844
1842
  }
1845
1843
  }
1846
- .hover\:bg-\(--filled-background-color-hover-info\) {
1844
+ .hover\:bg-\(--color-bg-hover-info\) {
1847
1845
  &:hover {
1848
1846
  @media (hover: hover) {
1849
- background-color: var(--filled-background-color-hover-info);
1847
+ background-color: var(--color-bg-hover-info);
1850
1848
  }
1851
1849
  }
1852
1850
  }
1853
- .hover\:bg-\(--filled-background-color-hover-link\) {
1851
+ .hover\:bg-\(--color-bg-hover-link\) {
1854
1852
  &:hover {
1855
1853
  @media (hover: hover) {
1856
- background-color: var(--filled-background-color-hover-link);
1854
+ background-color: var(--color-bg-hover-link);
1857
1855
  }
1858
1856
  }
1859
1857
  }
1860
- .hover\:bg-\(--filled-background-color-hover-primary\) {
1858
+ .hover\:bg-\(--color-bg-hover-primary\) {
1861
1859
  &:hover {
1862
1860
  @media (hover: hover) {
1863
- background-color: var(--filled-background-color-hover-primary);
1861
+ background-color: var(--color-bg-hover-primary);
1864
1862
  }
1865
1863
  }
1866
1864
  }
1867
- .hover\:bg-\(--filled-background-color-hover-secondary\) {
1865
+ .hover\:bg-\(--color-bg-hover-secondary\) {
1868
1866
  &:hover {
1869
1867
  @media (hover: hover) {
1870
- background-color: var(--filled-background-color-hover-secondary);
1868
+ background-color: var(--color-bg-hover-secondary);
1871
1869
  }
1872
1870
  }
1873
1871
  }
1874
- .hover\:bg-\(--filled-background-color-hover-success\) {
1872
+ .hover\:bg-\(--color-bg-hover-success\) {
1875
1873
  &:hover {
1876
1874
  @media (hover: hover) {
1877
- background-color: var(--filled-background-color-hover-success);
1875
+ background-color: var(--color-bg-hover-success);
1878
1876
  }
1879
1877
  }
1880
1878
  }
1881
- .hover\:bg-\(--filled-background-color-hover-tertiary\) {
1879
+ .hover\:bg-\(--color-bg-hover-tertiary\) {
1882
1880
  &:hover {
1883
1881
  @media (hover: hover) {
1884
- background-color: var(--filled-background-color-hover-tertiary);
1882
+ background-color: var(--color-bg-hover-tertiary);
1885
1883
  }
1886
1884
  }
1887
1885
  }
1888
- .hover\:bg-\(--filled-background-color-hover-warning\) {
1886
+ .hover\:bg-\(--color-bg-hover-warning\) {
1889
1887
  &:hover {
1890
1888
  @media (hover: hover) {
1891
- background-color: var(--filled-background-color-hover-warning);
1889
+ background-color: var(--color-bg-hover-warning);
1892
1890
  }
1893
1891
  }
1894
1892
  }
@@ -1996,109 +1994,225 @@
1996
1994
  }
1997
1995
  }
1998
1996
  }
1997
+ .focus-visible\:outline-2 {
1998
+ &:focus-visible {
1999
+ outline-style: var(--tw-outline-style);
2000
+ outline-width: 2px;
2001
+ }
2002
+ }
2003
+ .focus-visible\:outline-offset-2 {
2004
+ &:focus-visible {
2005
+ outline-offset: 2px;
2006
+ }
2007
+ }
2008
+ .focus-visible\:outline-\(--color-border-accent\) {
2009
+ &:focus-visible {
2010
+ outline-color: var(--color-border-accent);
2011
+ }
2012
+ }
2013
+ .focus-visible\:outline-\(--color-border-danger\) {
2014
+ &:focus-visible {
2015
+ outline-color: var(--color-border-danger);
2016
+ }
2017
+ }
2018
+ .focus-visible\:outline-\(--color-border-default\) {
2019
+ &:focus-visible {
2020
+ outline-color: var(--color-border-default);
2021
+ }
2022
+ }
2023
+ .focus-visible\:outline-\(--color-border-filled-accent\) {
2024
+ &:focus-visible {
2025
+ outline-color: var(--color-border-filled-accent);
2026
+ }
2027
+ }
2028
+ .focus-visible\:outline-\(--color-border-filled-danger\) {
2029
+ &:focus-visible {
2030
+ outline-color: var(--color-border-filled-danger);
2031
+ }
2032
+ }
2033
+ .focus-visible\:outline-\(--color-border-filled-default\) {
2034
+ &:focus-visible {
2035
+ outline-color: var(--color-border-filled-default);
2036
+ }
2037
+ }
2038
+ .focus-visible\:outline-\(--color-border-filled-info\) {
2039
+ &:focus-visible {
2040
+ outline-color: var(--color-border-filled-info);
2041
+ }
2042
+ }
2043
+ .focus-visible\:outline-\(--color-border-filled-link\) {
2044
+ &:focus-visible {
2045
+ outline-color: var(--color-border-filled-link);
2046
+ }
2047
+ }
2048
+ .focus-visible\:outline-\(--color-border-filled-primary\) {
2049
+ &:focus-visible {
2050
+ outline-color: var(--color-border-filled-primary);
2051
+ }
2052
+ }
2053
+ .focus-visible\:outline-\(--color-border-filled-secondary\) {
2054
+ &:focus-visible {
2055
+ outline-color: var(--color-border-filled-secondary);
2056
+ }
2057
+ }
2058
+ .focus-visible\:outline-\(--color-border-filled-success\) {
2059
+ &:focus-visible {
2060
+ outline-color: var(--color-border-filled-success);
2061
+ }
2062
+ }
2063
+ .focus-visible\:outline-\(--color-border-filled-tertiary\) {
2064
+ &:focus-visible {
2065
+ outline-color: var(--color-border-filled-tertiary);
2066
+ }
2067
+ }
2068
+ .focus-visible\:outline-\(--color-border-filled-warning\) {
2069
+ &:focus-visible {
2070
+ outline-color: var(--color-border-filled-warning);
2071
+ }
2072
+ }
2073
+ .focus-visible\:outline-\(--color-border-info\) {
2074
+ &:focus-visible {
2075
+ outline-color: var(--color-border-info);
2076
+ }
2077
+ }
2078
+ .focus-visible\:outline-\(--color-border-link\) {
2079
+ &:focus-visible {
2080
+ outline-color: var(--color-border-link);
2081
+ }
2082
+ }
2083
+ .focus-visible\:outline-\(--color-border-primary\) {
2084
+ &:focus-visible {
2085
+ outline-color: var(--color-border-primary);
2086
+ }
2087
+ }
2088
+ .focus-visible\:outline-\(--color-border-secondary\) {
2089
+ &:focus-visible {
2090
+ outline-color: var(--color-border-secondary);
2091
+ }
2092
+ }
2093
+ .focus-visible\:outline-\(--color-border-success\) {
2094
+ &:focus-visible {
2095
+ outline-color: var(--color-border-success);
2096
+ }
2097
+ }
2098
+ .focus-visible\:outline-\(--color-border-tertiary\) {
2099
+ &:focus-visible {
2100
+ outline-color: var(--color-border-tertiary);
2101
+ }
2102
+ }
2103
+ .focus-visible\:outline-\(--color-border-warning\) {
2104
+ &:focus-visible {
2105
+ outline-color: var(--color-border-warning);
2106
+ }
2107
+ }
2108
+ .focus-visible\:outline-transparent {
2109
+ &:focus-visible {
2110
+ outline-color: transparent;
2111
+ }
2112
+ }
1999
2113
  .active\:border-green-700 {
2000
2114
  &:active {
2001
2115
  border-color: var(--color-green-700);
2002
2116
  }
2003
2117
  }
2004
- .active\:bg-\(--background-color-active-accent\) {
2118
+ .active\:bg-\(--color-bg-active-accent\) {
2005
2119
  &:active {
2006
- background-color: var(--background-color-active-accent);
2120
+ background-color: var(--color-bg-active-accent);
2007
2121
  }
2008
2122
  }
2009
- .active\:bg-\(--background-color-active-danger\) {
2123
+ .active\:bg-\(--color-bg-active-danger\) {
2010
2124
  &:active {
2011
- background-color: var(--background-color-active-danger);
2125
+ background-color: var(--color-bg-active-danger);
2012
2126
  }
2013
2127
  }
2014
- .active\:bg-\(--background-color-active-default\) {
2128
+ .active\:bg-\(--color-bg-active-default\) {
2015
2129
  &:active {
2016
- background-color: var(--background-color-active-default);
2130
+ background-color: var(--color-bg-active-default);
2017
2131
  }
2018
2132
  }
2019
- .active\:bg-\(--background-color-active-info\) {
2133
+ .active\:bg-\(--color-bg-active-info\) {
2020
2134
  &:active {
2021
- background-color: var(--background-color-active-info);
2135
+ background-color: var(--color-bg-active-info);
2022
2136
  }
2023
2137
  }
2024
- .active\:bg-\(--background-color-active-link\) {
2138
+ .active\:bg-\(--color-bg-active-link\) {
2025
2139
  &:active {
2026
- background-color: var(--background-color-active-link);
2140
+ background-color: var(--color-bg-active-link);
2027
2141
  }
2028
2142
  }
2029
- .active\:bg-\(--background-color-active-primary\) {
2143
+ .active\:bg-\(--color-bg-active-primary\) {
2030
2144
  &:active {
2031
- background-color: var(--background-color-active-primary);
2145
+ background-color: var(--color-bg-active-primary);
2032
2146
  }
2033
2147
  }
2034
- .active\:bg-\(--background-color-active-secondary\) {
2148
+ .active\:bg-\(--color-bg-active-secondary\) {
2035
2149
  &:active {
2036
- background-color: var(--background-color-active-secondary);
2150
+ background-color: var(--color-bg-active-secondary);
2037
2151
  }
2038
2152
  }
2039
- .active\:bg-\(--background-color-active-success\) {
2153
+ .active\:bg-\(--color-bg-active-success\) {
2040
2154
  &:active {
2041
- background-color: var(--background-color-active-success);
2155
+ background-color: var(--color-bg-active-success);
2042
2156
  }
2043
2157
  }
2044
- .active\:bg-\(--background-color-active-tertiary\) {
2158
+ .active\:bg-\(--color-bg-active-tertiary\) {
2045
2159
  &:active {
2046
- background-color: var(--background-color-active-tertiary);
2160
+ background-color: var(--color-bg-active-tertiary);
2047
2161
  }
2048
2162
  }
2049
- .active\:bg-\(--background-color-active-warning\) {
2163
+ .active\:bg-\(--color-bg-active-warning\) {
2050
2164
  &:active {
2051
- background-color: var(--background-color-active-warning);
2165
+ background-color: var(--color-bg-active-warning);
2052
2166
  }
2053
2167
  }
2054
- .active\:bg-\(--filled-background-color-active-accent\) {
2168
+ .active\:bg-\(--color-bg-filled-active-accent\) {
2055
2169
  &:active {
2056
- background-color: var(--filled-background-color-active-accent);
2170
+ background-color: var(--color-bg-filled-active-accent);
2057
2171
  }
2058
2172
  }
2059
- .active\:bg-\(--filled-background-color-active-danger\) {
2173
+ .active\:bg-\(--color-bg-filled-active-danger\) {
2060
2174
  &:active {
2061
- background-color: var(--filled-background-color-active-danger);
2175
+ background-color: var(--color-bg-filled-active-danger);
2062
2176
  }
2063
2177
  }
2064
- .active\:bg-\(--filled-background-color-active-default\) {
2178
+ .active\:bg-\(--color-bg-filled-active-default\) {
2065
2179
  &:active {
2066
- background-color: var(--filled-background-color-active-default);
2180
+ background-color: var(--color-bg-filled-active-default);
2067
2181
  }
2068
2182
  }
2069
- .active\:bg-\(--filled-background-color-active-info\) {
2183
+ .active\:bg-\(--color-bg-filled-active-info\) {
2070
2184
  &:active {
2071
- background-color: var(--filled-background-color-active-info);
2185
+ background-color: var(--color-bg-filled-active-info);
2072
2186
  }
2073
2187
  }
2074
- .active\:bg-\(--filled-background-color-active-link\) {
2188
+ .active\:bg-\(--color-bg-filled-active-link\) {
2075
2189
  &:active {
2076
- background-color: var(--filled-background-color-active-link);
2190
+ background-color: var(--color-bg-filled-active-link);
2077
2191
  }
2078
2192
  }
2079
- .active\:bg-\(--filled-background-color-active-primary\) {
2193
+ .active\:bg-\(--color-bg-filled-active-primary\) {
2080
2194
  &:active {
2081
- background-color: var(--filled-background-color-active-primary);
2195
+ background-color: var(--color-bg-filled-active-primary);
2082
2196
  }
2083
2197
  }
2084
- .active\:bg-\(--filled-background-color-active-secondary\) {
2198
+ .active\:bg-\(--color-bg-filled-active-secondary\) {
2085
2199
  &:active {
2086
- background-color: var(--filled-background-color-active-secondary);
2200
+ background-color: var(--color-bg-filled-active-secondary);
2087
2201
  }
2088
2202
  }
2089
- .active\:bg-\(--filled-background-color-active-success\) {
2203
+ .active\:bg-\(--color-bg-filled-active-success\) {
2090
2204
  &:active {
2091
- background-color: var(--filled-background-color-active-success);
2205
+ background-color: var(--color-bg-filled-active-success);
2092
2206
  }
2093
2207
  }
2094
- .active\:bg-\(--filled-background-color-active-tertiary\) {
2208
+ .active\:bg-\(--color-bg-filled-active-tertiary\) {
2095
2209
  &:active {
2096
- background-color: var(--filled-background-color-active-tertiary);
2210
+ background-color: var(--color-bg-filled-active-tertiary);
2097
2211
  }
2098
2212
  }
2099
- .active\:bg-\(--filled-background-color-active-warning\) {
2213
+ .active\:bg-\(--color-bg-filled-active-warning\) {
2100
2214
  &:active {
2101
- background-color: var(--filled-background-color-active-warning);
2215
+ background-color: var(--color-bg-filled-active-warning);
2102
2216
  }
2103
2217
  }
2104
2218
  .active\:bg-red-300 {
@@ -2197,16 +2311,6 @@
2197
2311
  gap: calc(var(--spacing) * 9);
2198
2312
  }
2199
2313
  }
2200
- .max-lg\:px-2 {
2201
- @media (width < 64rem) {
2202
- padding-inline: calc(var(--spacing) * 2);
2203
- }
2204
- }
2205
- .max-lg\:px-3 {
2206
- @media (width < 64rem) {
2207
- padding-inline: calc(var(--spacing) * 3);
2208
- }
2209
- }
2210
2314
  .max-lg\:px-4 {
2211
2315
  @media (width < 64rem) {
2212
2316
  padding-inline: calc(var(--spacing) * 4);
@@ -2232,24 +2336,24 @@
2232
2336
  padding-inline: calc(var(--spacing) * 8);
2233
2337
  }
2234
2338
  }
2235
- .max-lg\:py-2 {
2339
+ .max-lg\:py-4 {
2236
2340
  @media (width < 64rem) {
2237
- padding-block: calc(var(--spacing) * 2);
2341
+ padding-block: calc(var(--spacing) * 4);
2238
2342
  }
2239
2343
  }
2240
- .max-lg\:py-3 {
2344
+ .max-lg\:py-5 {
2241
2345
  @media (width < 64rem) {
2242
- padding-block: calc(var(--spacing) * 3);
2346
+ padding-block: calc(var(--spacing) * 5);
2243
2347
  }
2244
2348
  }
2245
- .max-lg\:py-4 {
2349
+ .max-lg\:py-6 {
2246
2350
  @media (width < 64rem) {
2247
- padding-block: calc(var(--spacing) * 4);
2351
+ padding-block: calc(var(--spacing) * 6);
2248
2352
  }
2249
2353
  }
2250
- .max-lg\:py-5 {
2354
+ .max-lg\:py-7 {
2251
2355
  @media (width < 64rem) {
2252
- padding-block: calc(var(--spacing) * 5);
2356
+ padding-block: calc(var(--spacing) * 7);
2253
2357
  }
2254
2358
  }
2255
2359
  .max-lg\:py-14 {
@@ -2313,6 +2417,11 @@
2313
2417
  gap: calc(var(--spacing) * 2);
2314
2418
  }
2315
2419
  }
2420
+ .max-md\:gap-3 {
2421
+ @media (width < 48rem) {
2422
+ gap: calc(var(--spacing) * 3);
2423
+ }
2424
+ }
2316
2425
  .max-md\:gap-4 {
2317
2426
  @media (width < 48rem) {
2318
2427
  gap: calc(var(--spacing) * 4);
@@ -2358,9 +2467,9 @@
2358
2467
  padding-block: calc(var(--spacing) * 3);
2359
2468
  }
2360
2469
  }
2361
- .max-md\:py-4 {
2470
+ .max-md\:py-5 {
2362
2471
  @media (width < 48rem) {
2363
- padding-block: calc(var(--spacing) * 4);
2472
+ padding-block: calc(var(--spacing) * 5);
2364
2473
  }
2365
2474
  }
2366
2475
  .max-md\:py-6 {
@@ -2434,11 +2543,26 @@
2434
2543
  grid-template-columns: repeat(3, minmax(0, 1fr));
2435
2544
  }
2436
2545
  }
2546
+ .md\:grid-cols-4 {
2547
+ @media (width >= 48rem) {
2548
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2549
+ }
2550
+ }
2437
2551
  .lg\:grid-cols-4 {
2438
2552
  @media (width >= 64rem) {
2439
2553
  grid-template-columns: repeat(4, minmax(0, 1fr));
2440
2554
  }
2441
2555
  }
2556
+ .lg\:grid-cols-5 {
2557
+ @media (width >= 64rem) {
2558
+ grid-template-columns: repeat(5, minmax(0, 1fr));
2559
+ }
2560
+ }
2561
+ .lg\:grid-cols-6 {
2562
+ @media (width >= 64rem) {
2563
+ grid-template-columns: repeat(6, minmax(0, 1fr));
2564
+ }
2565
+ }
2442
2566
  }
2443
2567
  @layer theme;
2444
2568
  @property --tw-rotate-x {