@jacshuo/onyx 0.1.4 → 0.1.6

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 (5) hide show
  1. package/README.md +38 -2
  2. package/dist/index.cjs +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/styles.css +280 -334
  5. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -7,15 +7,8 @@
7
7
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
8
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
9
  "Courier New", monospace;
10
- --color-red-50: oklch(97.1% 0.013 17.38);
11
- --color-red-100: oklch(93.6% 0.032 17.717);
12
- --color-red-200: oklch(88.5% 0.062 18.334);
13
10
  --color-red-300: oklch(80.8% 0.114 19.571);
14
- --color-red-400: oklch(70.4% 0.191 22.216);
15
11
  --color-red-500: oklch(63.7% 0.237 25.331);
16
- --color-red-600: oklch(57.7% 0.245 27.325);
17
- --color-red-800: oklch(44.4% 0.177 26.899);
18
- --color-red-900: oklch(39.6% 0.141 25.723);
19
12
  --color-orange-50: oklch(98% 0.016 73.684);
20
13
  --color-orange-100: oklch(95.4% 0.038 75.164);
21
14
  --color-orange-200: oklch(90.1% 0.076 70.697);
@@ -26,25 +19,12 @@
26
19
  --color-orange-700: oklch(55.3% 0.195 38.402);
27
20
  --color-orange-800: oklch(47% 0.157 37.304);
28
21
  --color-orange-900: oklch(40.8% 0.123 38.172);
29
- --color-amber-50: oklch(98.7% 0.022 95.277);
30
- --color-amber-100: oklch(96.2% 0.059 95.617);
31
- --color-amber-200: oklch(92.4% 0.12 95.746);
32
22
  --color-amber-300: oklch(87.9% 0.169 91.605);
33
23
  --color-amber-400: oklch(82.8% 0.189 84.429);
34
24
  --color-amber-500: oklch(76.9% 0.188 70.08);
35
25
  --color-amber-600: oklch(66.6% 0.179 58.318);
36
- --color-amber-800: oklch(47.3% 0.137 46.201);
37
- --color-amber-900: oklch(41.4% 0.112 45.904);
38
26
  --color-yellow-500: oklch(79.5% 0.184 86.047);
39
- --color-green-50: oklch(98.2% 0.018 155.826);
40
- --color-green-100: oklch(96.2% 0.044 156.743);
41
- --color-green-200: oklch(92.5% 0.084 155.995);
42
- --color-green-400: oklch(79.2% 0.209 151.711);
43
27
  --color-green-500: oklch(72.3% 0.219 149.579);
44
- --color-green-600: oklch(62.7% 0.194 149.214);
45
- --color-green-700: oklch(52.7% 0.154 150.069);
46
- --color-green-800: oklch(44.8% 0.119 151.328);
47
- --color-green-900: oklch(39.3% 0.095 152.535);
48
28
  --color-emerald-50: oklch(97.9% 0.021 166.113);
49
29
  --color-emerald-100: oklch(95% 0.052 163.051);
50
30
  --color-emerald-200: oklch(90.5% 0.093 164.15);
@@ -55,16 +35,7 @@
55
35
  --color-emerald-700: oklch(50.8% 0.118 165.612);
56
36
  --color-emerald-800: oklch(43.2% 0.095 166.913);
57
37
  --color-emerald-900: oklch(37.8% 0.077 168.94);
58
- --color-blue-50: oklch(97% 0.014 254.604);
59
- --color-blue-100: oklch(93.2% 0.032 255.585);
60
- --color-blue-200: oklch(88.2% 0.059 254.128);
61
- --color-blue-300: oklch(80.9% 0.105 251.813);
62
- --color-blue-400: oklch(70.7% 0.165 254.624);
63
38
  --color-blue-500: oklch(62.3% 0.214 259.815);
64
- --color-blue-600: oklch(54.6% 0.245 262.881);
65
- --color-blue-700: oklch(48.8% 0.243 264.376);
66
- --color-blue-800: oklch(42.4% 0.199 265.638);
67
- --color-blue-900: oklch(37.9% 0.146 265.522);
68
39
  --color-violet-500: oklch(60.6% 0.25 292.717);
69
40
  --color-violet-600: oklch(54.1% 0.281 293.009);
70
41
  --color-purple-500: oklch(62.7% 0.265 303.9);
@@ -162,15 +133,42 @@
162
133
  --color-primary-700: var(--color-slate-700);
163
134
  --color-primary-800: var(--color-slate-800);
164
135
  --color-primary-900: var(--color-slate-900);
136
+ --color-secondary-50: var(--color-gray-50);
137
+ --color-secondary-100: var(--color-gray-100);
138
+ --color-secondary-200: var(--color-gray-200);
139
+ --color-secondary-300: var(--color-gray-300);
140
+ --color-secondary-400: var(--color-gray-400);
165
141
  --color-secondary-500: var(--color-gray-500);
166
142
  --color-secondary-600: var(--color-gray-600);
167
143
  --color-secondary-700: var(--color-gray-700);
144
+ --color-secondary-800: var(--color-gray-800);
145
+ --color-secondary-900: var(--color-gray-900);
146
+ --color-success-50: var(--color-emerald-50);
147
+ --color-success-100: var(--color-emerald-100);
148
+ --color-success-200: var(--color-emerald-200);
149
+ --color-success-400: var(--color-emerald-400);
150
+ --color-success-600: var(--color-emerald-600);
151
+ --color-success-700: var(--color-emerald-700);
152
+ --color-success-800: var(--color-emerald-800);
153
+ --color-success-900: var(--color-emerald-900);
154
+ --color-danger-50: var(--color-rose-50);
155
+ --color-danger-100: var(--color-rose-100);
156
+ --color-danger-200: var(--color-rose-200);
157
+ --color-danger-400: var(--color-rose-400);
168
158
  --color-danger-500: var(--color-rose-500);
169
159
  --color-danger-600: var(--color-rose-600);
170
160
  --color-danger-700: var(--color-rose-700);
161
+ --color-danger-800: var(--color-rose-800);
162
+ --color-danger-900: var(--color-rose-900);
163
+ --color-warning-50: var(--color-orange-50);
164
+ --color-warning-100: var(--color-orange-100);
165
+ --color-warning-200: var(--color-orange-200);
166
+ --color-warning-400: var(--color-orange-400);
171
167
  --color-warning-500: var(--color-orange-500);
172
168
  --color-warning-600: var(--color-orange-600);
173
169
  --color-warning-700: var(--color-orange-700);
170
+ --color-warning-800: var(--color-orange-800);
171
+ --color-warning-900: var(--color-orange-900);
174
172
  --animate-fade-in: fade-in 150ms ease-out;
175
173
  --animate-scale-in: scale-in 200ms ease-out;
176
174
  --animate-slide-in-right: slide-in-right 300ms ease-out;
@@ -1203,32 +1201,17 @@
1203
1201
  .border-\(--mp-border\) {
1204
1202
  border-color: var(--mp-border);
1205
1203
  }
1206
- .border-amber-200 {
1207
- border-color: var(--color-amber-200);
1208
- }
1209
1204
  .border-amber-500\/40 {
1210
1205
  border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 40%, transparent);
1211
1206
  @supports (color: color-mix(in lab, red, red)) {
1212
1207
  border-color: color-mix(in oklab, var(--color-amber-500) 40%, transparent);
1213
1208
  }
1214
1209
  }
1215
- .border-blue-200 {
1216
- border-color: var(--color-blue-200);
1217
- }
1218
- .border-blue-400 {
1219
- border-color: var(--color-blue-400);
1220
- }
1221
- .border-blue-600 {
1222
- border-color: var(--color-blue-600);
1223
- }
1224
- .border-gray-200 {
1225
- border-color: var(--color-gray-200);
1210
+ .border-danger-200 {
1211
+ border-color: var(--color-danger-200);
1226
1212
  }
1227
- .border-gray-300 {
1228
- border-color: var(--color-gray-300);
1229
- }
1230
- .border-green-200 {
1231
- border-color: var(--color-green-200);
1213
+ .border-danger-400 {
1214
+ border-color: var(--color-danger-400);
1232
1215
  }
1233
1216
  .border-primary-100 {
1234
1217
  border-color: var(--color-primary-100);
@@ -1239,15 +1222,27 @@
1239
1222
  .border-primary-300 {
1240
1223
  border-color: var(--color-primary-300);
1241
1224
  }
1242
- .border-red-200 {
1243
- border-color: var(--color-red-200);
1225
+ .border-primary-400 {
1226
+ border-color: var(--color-primary-400);
1227
+ }
1228
+ .border-primary-600 {
1229
+ border-color: var(--color-primary-600);
1230
+ }
1231
+ .border-secondary-200 {
1232
+ border-color: var(--color-secondary-200);
1244
1233
  }
1245
- .border-red-400 {
1246
- border-color: var(--color-red-400);
1234
+ .border-secondary-300 {
1235
+ border-color: var(--color-secondary-300);
1236
+ }
1237
+ .border-success-200 {
1238
+ border-color: var(--color-success-200);
1247
1239
  }
1248
1240
  .border-transparent {
1249
1241
  border-color: transparent;
1250
1242
  }
1243
+ .border-warning-200 {
1244
+ border-color: var(--color-warning-200);
1245
+ }
1251
1246
  .border-white {
1252
1247
  border-color: var(--color-white);
1253
1248
  }
@@ -1305,12 +1300,6 @@
1305
1300
  .bg-\(--mp-surface\) {
1306
1301
  background-color: var(--mp-surface);
1307
1302
  }
1308
- .bg-amber-50 {
1309
- background-color: var(--color-amber-50);
1310
- }
1311
- .bg-amber-100 {
1312
- background-color: var(--color-amber-100);
1313
- }
1314
1303
  .bg-amber-500 {
1315
1304
  background-color: var(--color-amber-500);
1316
1305
  }
@@ -1338,23 +1327,11 @@
1338
1327
  background-color: color-mix(in oklab, var(--color-black) 95%, transparent);
1339
1328
  }
1340
1329
  }
1341
- .bg-blue-50 {
1342
- background-color: var(--color-blue-50);
1330
+ .bg-danger-50 {
1331
+ background-color: var(--color-danger-50);
1343
1332
  }
1344
- .bg-blue-50\/60 {
1345
- background-color: color-mix(in srgb, oklch(97% 0.014 254.604) 60%, transparent);
1346
- @supports (color: color-mix(in lab, red, red)) {
1347
- background-color: color-mix(in oklab, var(--color-blue-50) 60%, transparent);
1348
- }
1349
- }
1350
- .bg-blue-100 {
1351
- background-color: var(--color-blue-100);
1352
- }
1353
- .bg-blue-500 {
1354
- background-color: var(--color-blue-500);
1355
- }
1356
- .bg-blue-600 {
1357
- background-color: var(--color-blue-600);
1333
+ .bg-danger-100 {
1334
+ background-color: var(--color-danger-100);
1358
1335
  }
1359
1336
  .bg-danger-500 {
1360
1337
  background-color: var(--color-danger-500);
@@ -1365,21 +1342,15 @@
1365
1342
  .bg-fuchsia-500 {
1366
1343
  background-color: var(--color-fuchsia-500);
1367
1344
  }
1368
- .bg-gray-50 {
1369
- background-color: var(--color-gray-50);
1370
- }
1371
- .bg-gray-100 {
1372
- background-color: var(--color-gray-100);
1373
- }
1374
- .bg-green-50 {
1375
- background-color: var(--color-green-50);
1376
- }
1377
- .bg-green-100 {
1378
- background-color: var(--color-green-100);
1379
- }
1380
1345
  .bg-primary-50 {
1381
1346
  background-color: var(--color-primary-50);
1382
1347
  }
1348
+ .bg-primary-50\/60 {
1349
+ background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 60%, transparent);
1350
+ @supports (color: color-mix(in lab, red, red)) {
1351
+ background-color: color-mix(in oklab, var(--color-primary-50) 60%, transparent);
1352
+ }
1353
+ }
1383
1354
  .bg-primary-100 {
1384
1355
  background-color: var(--color-primary-100);
1385
1356
  }
@@ -1395,21 +1366,33 @@
1395
1366
  .bg-primary-900 {
1396
1367
  background-color: var(--color-primary-900);
1397
1368
  }
1398
- .bg-red-50 {
1399
- background-color: var(--color-red-50);
1369
+ .bg-secondary-50 {
1370
+ background-color: var(--color-secondary-50);
1400
1371
  }
1401
- .bg-red-100 {
1402
- background-color: var(--color-red-100);
1372
+ .bg-secondary-100 {
1373
+ background-color: var(--color-secondary-100);
1403
1374
  }
1404
1375
  .bg-secondary-500 {
1405
1376
  background-color: var(--color-secondary-500);
1406
1377
  }
1378
+ .bg-success-50 {
1379
+ background-color: var(--color-success-50);
1380
+ }
1381
+ .bg-success-100 {
1382
+ background-color: var(--color-success-100);
1383
+ }
1407
1384
  .bg-transparent {
1408
1385
  background-color: transparent;
1409
1386
  }
1410
1387
  .bg-violet-600 {
1411
1388
  background-color: var(--color-violet-600);
1412
1389
  }
1390
+ .bg-warning-50 {
1391
+ background-color: var(--color-warning-50);
1392
+ }
1393
+ .bg-warning-100 {
1394
+ background-color: var(--color-warning-100);
1395
+ }
1413
1396
  .bg-warning-500 {
1414
1397
  background-color: var(--color-warning-500);
1415
1398
  }
@@ -1747,48 +1730,27 @@
1747
1730
  color: color-mix(in oklab, var(--color-amber-400) 80%, transparent);
1748
1731
  }
1749
1732
  }
1750
- .text-amber-800 {
1751
- color: var(--color-amber-800);
1752
- }
1753
1733
  .text-blue-500 {
1754
1734
  color: var(--color-blue-500);
1755
1735
  }
1756
- .text-blue-600 {
1757
- color: var(--color-blue-600);
1758
- }
1759
- .text-blue-700 {
1760
- color: var(--color-blue-700);
1761
- }
1762
- .text-blue-800 {
1763
- color: var(--color-blue-800);
1764
- }
1765
1736
  .text-danger-500 {
1766
1737
  color: var(--color-danger-500);
1767
1738
  }
1768
- .text-gray-400 {
1769
- color: var(--color-gray-400);
1739
+ .text-danger-600 {
1740
+ color: var(--color-danger-600);
1741
+ }
1742
+ .text-danger-800 {
1743
+ color: var(--color-danger-800);
1770
1744
  }
1771
1745
  .text-gray-500 {
1772
1746
  color: var(--color-gray-500);
1773
1747
  }
1774
- .text-gray-600 {
1775
- color: var(--color-gray-600);
1776
- }
1777
- .text-gray-700 {
1778
- color: var(--color-gray-700);
1779
- }
1780
1748
  .text-gray-900 {
1781
1749
  color: var(--color-gray-900);
1782
1750
  }
1783
1751
  .text-green-500 {
1784
1752
  color: var(--color-green-500);
1785
1753
  }
1786
- .text-green-600 {
1787
- color: var(--color-green-600);
1788
- }
1789
- .text-green-800 {
1790
- color: var(--color-green-800);
1791
- }
1792
1754
  .text-primary-400 {
1793
1755
  color: var(--color-primary-400);
1794
1756
  }
@@ -1813,18 +1775,36 @@
1813
1775
  .text-red-500 {
1814
1776
  color: var(--color-red-500);
1815
1777
  }
1816
- .text-red-600 {
1817
- color: var(--color-red-600);
1818
- }
1819
- .text-red-800 {
1820
- color: var(--color-red-800);
1821
- }
1822
1778
  .text-rose-500 {
1823
1779
  color: var(--color-rose-500);
1824
1780
  }
1781
+ .text-secondary-400 {
1782
+ color: var(--color-secondary-400);
1783
+ }
1784
+ .text-secondary-500 {
1785
+ color: var(--color-secondary-500);
1786
+ }
1787
+ .text-secondary-600 {
1788
+ color: var(--color-secondary-600);
1789
+ }
1790
+ .text-secondary-700 {
1791
+ color: var(--color-secondary-700);
1792
+ }
1793
+ .text-secondary-900 {
1794
+ color: var(--color-secondary-900);
1795
+ }
1796
+ .text-success-600 {
1797
+ color: var(--color-success-600);
1798
+ }
1799
+ .text-success-800 {
1800
+ color: var(--color-success-800);
1801
+ }
1825
1802
  .text-warning-500 {
1826
1803
  color: var(--color-warning-500);
1827
1804
  }
1805
+ .text-warning-800 {
1806
+ color: var(--color-warning-800);
1807
+ }
1828
1808
  .text-white {
1829
1809
  color: var(--color-white);
1830
1810
  }
@@ -1873,8 +1853,8 @@
1873
1853
  .accent-\(--accent\) {
1874
1854
  accent-color: var(--accent);
1875
1855
  }
1876
- .accent-blue-600 {
1877
- accent-color: var(--color-blue-600);
1856
+ .accent-primary-600 {
1857
+ accent-color: var(--color-primary-600);
1878
1858
  }
1879
1859
  .opacity-0 {
1880
1860
  opacity: 0%;
@@ -2173,9 +2153,9 @@
2173
2153
  color: var(--fe-text-muted);
2174
2154
  }
2175
2155
  }
2176
- .placeholder\:text-gray-400 {
2156
+ .placeholder\:text-secondary-400 {
2177
2157
  &::placeholder {
2178
- color: var(--color-gray-400);
2158
+ color: var(--color-secondary-400);
2179
2159
  }
2180
2160
  }
2181
2161
  .after\:ml-0\.5 {
@@ -2196,14 +2176,14 @@
2196
2176
  content: var(--tw-content);
2197
2177
  }
2198
2178
  }
2199
- .focus-within\:border-blue-500 {
2179
+ .focus-within\:border-danger-500 {
2200
2180
  &:focus-within {
2201
- border-color: var(--color-blue-500);
2181
+ border-color: var(--color-danger-500);
2202
2182
  }
2203
2183
  }
2204
- .focus-within\:border-red-500 {
2184
+ .focus-within\:border-primary-500 {
2205
2185
  &:focus-within {
2206
- border-color: var(--color-red-500);
2186
+ border-color: var(--color-primary-500);
2207
2187
  }
2208
2188
  }
2209
2189
  .focus-within\:ring-2 {
@@ -2212,19 +2192,19 @@
2212
2192
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2213
2193
  }
2214
2194
  }
2215
- .focus-within\:ring-blue-500\/20 {
2195
+ .focus-within\:ring-danger-500\/20 {
2216
2196
  &:focus-within {
2217
- --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
2197
+ --tw-ring-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent);
2218
2198
  @supports (color: color-mix(in lab, red, red)) {
2219
- --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
2199
+ --tw-ring-color: color-mix(in oklab, var(--color-danger-500) 20%, transparent);
2220
2200
  }
2221
2201
  }
2222
2202
  }
2223
- .focus-within\:ring-red-500\/20 {
2203
+ .focus-within\:ring-primary-500\/20 {
2224
2204
  &:focus-within {
2225
- --tw-ring-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
2205
+ --tw-ring-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 20%, transparent);
2226
2206
  @supports (color: color-mix(in lab, red, red)) {
2227
- --tw-ring-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
2207
+ --tw-ring-color: color-mix(in oklab, var(--color-primary-500) 20%, transparent);
2228
2208
  }
2229
2209
  }
2230
2210
  }
@@ -2276,10 +2256,10 @@
2276
2256
  }
2277
2257
  }
2278
2258
  }
2279
- .hover\:bg-blue-50 {
2259
+ .hover\:bg-danger-50 {
2280
2260
  &:hover {
2281
2261
  @media (hover: hover) {
2282
- background-color: var(--color-blue-50);
2262
+ background-color: var(--color-danger-50);
2283
2263
  }
2284
2264
  }
2285
2265
  }
@@ -2304,13 +2284,6 @@
2304
2284
  }
2305
2285
  }
2306
2286
  }
2307
- .hover\:bg-gray-50 {
2308
- &:hover {
2309
- @media (hover: hover) {
2310
- background-color: var(--color-gray-50);
2311
- }
2312
- }
2313
- }
2314
2287
  .hover\:bg-primary-50 {
2315
2288
  &:hover {
2316
2289
  @media (hover: hover) {
@@ -2349,13 +2322,6 @@
2349
2322
  }
2350
2323
  }
2351
2324
  }
2352
- .hover\:bg-red-50 {
2353
- &:hover {
2354
- @media (hover: hover) {
2355
- background-color: var(--color-red-50);
2356
- }
2357
- }
2358
- }
2359
2325
  .hover\:bg-red-500\/40\! {
2360
2326
  &:hover {
2361
2327
  @media (hover: hover) {
@@ -2366,6 +2332,13 @@
2366
2332
  }
2367
2333
  }
2368
2334
  }
2335
+ .hover\:bg-secondary-50 {
2336
+ &:hover {
2337
+ @media (hover: hover) {
2338
+ background-color: var(--color-secondary-50);
2339
+ }
2340
+ }
2341
+ }
2369
2342
  .hover\:bg-secondary-600 {
2370
2343
  &:hover {
2371
2344
  @media (hover: hover) {
@@ -2425,17 +2398,10 @@
2425
2398
  }
2426
2399
  }
2427
2400
  }
2428
- .hover\:text-blue-600 {
2401
+ .hover\:text-danger-600 {
2429
2402
  &:hover {
2430
2403
  @media (hover: hover) {
2431
- color: var(--color-blue-600);
2432
- }
2433
- }
2434
- }
2435
- .hover\:text-green-700 {
2436
- &:hover {
2437
- @media (hover: hover) {
2438
- color: var(--color-green-700);
2404
+ color: var(--color-danger-600);
2439
2405
  }
2440
2406
  }
2441
2407
  }
@@ -2467,24 +2433,24 @@
2467
2433
  }
2468
2434
  }
2469
2435
  }
2470
- .hover\:text-red-600 {
2436
+ .hover\:text-rose-400 {
2471
2437
  &:hover {
2472
2438
  @media (hover: hover) {
2473
- color: var(--color-red-600);
2439
+ color: var(--color-rose-400);
2474
2440
  }
2475
2441
  }
2476
2442
  }
2477
- .hover\:text-rose-400 {
2443
+ .hover\:text-rose-500 {
2478
2444
  &:hover {
2479
2445
  @media (hover: hover) {
2480
- color: var(--color-rose-400);
2446
+ color: var(--color-rose-500);
2481
2447
  }
2482
2448
  }
2483
2449
  }
2484
- .hover\:text-rose-500 {
2450
+ .hover\:text-success-700 {
2485
2451
  &:hover {
2486
2452
  @media (hover: hover) {
2487
- color: var(--color-rose-500);
2453
+ color: var(--color-success-700);
2488
2454
  }
2489
2455
  }
2490
2456
  }
@@ -2518,14 +2484,14 @@
2518
2484
  }
2519
2485
  }
2520
2486
  }
2521
- .focus\:border-blue-500 {
2487
+ .focus\:border-danger-500 {
2522
2488
  &:focus {
2523
- border-color: var(--color-blue-500);
2489
+ border-color: var(--color-danger-500);
2524
2490
  }
2525
2491
  }
2526
- .focus\:border-red-500 {
2492
+ .focus\:border-primary-500 {
2527
2493
  &:focus {
2528
- border-color: var(--color-red-500);
2494
+ border-color: var(--color-primary-500);
2529
2495
  }
2530
2496
  }
2531
2497
  .focus\:bg-\(--fe-input-bg\) {
@@ -2545,24 +2511,24 @@
2545
2511
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2546
2512
  }
2547
2513
  }
2548
- .focus\:ring-blue-400 {
2514
+ .focus\:ring-danger-500\/20 {
2549
2515
  &:focus {
2550
- --tw-ring-color: var(--color-blue-400);
2516
+ --tw-ring-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent);
2517
+ @supports (color: color-mix(in lab, red, red)) {
2518
+ --tw-ring-color: color-mix(in oklab, var(--color-danger-500) 20%, transparent);
2519
+ }
2551
2520
  }
2552
2521
  }
2553
- .focus\:ring-blue-500\/20 {
2522
+ .focus\:ring-primary-400 {
2554
2523
  &:focus {
2555
- --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
2556
- @supports (color: color-mix(in lab, red, red)) {
2557
- --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
2558
- }
2524
+ --tw-ring-color: var(--color-primary-400);
2559
2525
  }
2560
2526
  }
2561
- .focus\:ring-red-500\/20 {
2527
+ .focus\:ring-primary-500\/20 {
2562
2528
  &:focus {
2563
- --tw-ring-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
2529
+ --tw-ring-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 20%, transparent);
2564
2530
  @supports (color: color-mix(in lab, red, red)) {
2565
- --tw-ring-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
2531
+ --tw-ring-color: color-mix(in oklab, var(--color-primary-500) 20%, transparent);
2566
2532
  }
2567
2533
  }
2568
2534
  }
@@ -2704,39 +2670,14 @@
2704
2670
  }
2705
2671
  }
2706
2672
  }
2707
- .dark\:border-amber-800 {
2708
- &:where(.dark, .dark *) {
2709
- border-color: var(--color-amber-800);
2710
- }
2711
- }
2712
- .dark\:border-blue-500 {
2713
- &:where(.dark, .dark *) {
2714
- border-color: var(--color-blue-500);
2715
- }
2716
- }
2717
- .dark\:border-blue-600 {
2718
- &:where(.dark, .dark *) {
2719
- border-color: var(--color-blue-600);
2720
- }
2721
- }
2722
- .dark\:border-blue-800 {
2723
- &:where(.dark, .dark *) {
2724
- border-color: var(--color-blue-800);
2725
- }
2726
- }
2727
- .dark\:border-gray-600 {
2728
- &:where(.dark, .dark *) {
2729
- border-color: var(--color-gray-600);
2730
- }
2731
- }
2732
- .dark\:border-gray-700 {
2673
+ .dark\:border-danger-800 {
2733
2674
  &:where(.dark, .dark *) {
2734
- border-color: var(--color-gray-700);
2675
+ border-color: var(--color-danger-800);
2735
2676
  }
2736
2677
  }
2737
- .dark\:border-green-800 {
2678
+ .dark\:border-primary-500 {
2738
2679
  &:where(.dark, .dark *) {
2739
- border-color: var(--color-green-800);
2680
+ border-color: var(--color-primary-500);
2740
2681
  }
2741
2682
  }
2742
2683
  .dark\:border-primary-600 {
@@ -2754,113 +2695,73 @@
2754
2695
  border-color: var(--color-primary-800);
2755
2696
  }
2756
2697
  }
2757
- .dark\:border-red-800 {
2698
+ .dark\:border-secondary-600 {
2758
2699
  &:where(.dark, .dark *) {
2759
- border-color: var(--color-red-800);
2700
+ border-color: var(--color-secondary-600);
2760
2701
  }
2761
2702
  }
2762
- .dark\:bg-\(--accent\)\/15 {
2703
+ .dark\:border-secondary-700 {
2763
2704
  &:where(.dark, .dark *) {
2764
- background-color: var(--accent);
2765
- @supports (color: color-mix(in lab, red, red)) {
2766
- background-color: color-mix(in oklab, var(--accent) 15%, transparent);
2767
- }
2705
+ border-color: var(--color-secondary-700);
2768
2706
  }
2769
2707
  }
2770
- .dark\:bg-amber-900\/30 {
2708
+ .dark\:border-success-800 {
2771
2709
  &:where(.dark, .dark *) {
2772
- background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 30%, transparent);
2773
- @supports (color: color-mix(in lab, red, red)) {
2774
- background-color: color-mix(in oklab, var(--color-amber-900) 30%, transparent);
2775
- }
2710
+ border-color: var(--color-success-800);
2776
2711
  }
2777
2712
  }
2778
- .dark\:bg-amber-900\/80 {
2713
+ .dark\:border-warning-800 {
2779
2714
  &:where(.dark, .dark *) {
2780
- background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 80%, transparent);
2781
- @supports (color: color-mix(in lab, red, red)) {
2782
- background-color: color-mix(in oklab, var(--color-amber-900) 80%, transparent);
2783
- }
2715
+ border-color: var(--color-warning-800);
2784
2716
  }
2785
2717
  }
2786
- .dark\:bg-blue-500 {
2787
- &:where(.dark, .dark *) {
2788
- background-color: var(--color-blue-500);
2789
- }
2790
- }
2791
- .dark\:bg-blue-600 {
2792
- &:where(.dark, .dark *) {
2793
- background-color: var(--color-blue-600);
2794
- }
2795
- }
2796
- .dark\:bg-blue-900 {
2797
- &:where(.dark, .dark *) {
2798
- background-color: var(--color-blue-900);
2799
- }
2800
- }
2801
- .dark\:bg-blue-900\/20 {
2718
+ .dark\:bg-\(--accent\)\/15 {
2802
2719
  &:where(.dark, .dark *) {
2803
- background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
2720
+ background-color: var(--accent);
2804
2721
  @supports (color: color-mix(in lab, red, red)) {
2805
- background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
2722
+ background-color: color-mix(in oklab, var(--accent) 15%, transparent);
2806
2723
  }
2807
2724
  }
2808
2725
  }
2809
- .dark\:bg-blue-900\/30 {
2726
+ .dark\:bg-danger-900\/30 {
2810
2727
  &:where(.dark, .dark *) {
2811
- background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 30%, transparent);
2728
+ background-color: color-mix(in srgb, oklch(41% 0.159 10.272) 30%, transparent);
2812
2729
  @supports (color: color-mix(in lab, red, red)) {
2813
- background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent);
2730
+ background-color: color-mix(in oklab, var(--color-danger-900) 30%, transparent);
2814
2731
  }
2815
2732
  }
2816
2733
  }
2817
- .dark\:bg-blue-900\/80 {
2734
+ .dark\:bg-danger-900\/80 {
2818
2735
  &:where(.dark, .dark *) {
2819
- background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 80%, transparent);
2736
+ background-color: color-mix(in srgb, oklch(41% 0.159 10.272) 80%, transparent);
2820
2737
  @supports (color: color-mix(in lab, red, red)) {
2821
- background-color: color-mix(in oklab, var(--color-blue-900) 80%, transparent);
2738
+ background-color: color-mix(in oklab, var(--color-danger-900) 80%, transparent);
2822
2739
  }
2823
2740
  }
2824
2741
  }
2825
- .dark\:bg-gray-800 {
2826
- &:where(.dark, .dark *) {
2827
- background-color: var(--color-gray-800);
2828
- }
2829
- }
2830
- .dark\:bg-gray-900 {
2831
- &:where(.dark, .dark *) {
2832
- background-color: var(--color-gray-900);
2833
- }
2834
- }
2835
2742
  .dark\:bg-gray-950 {
2836
2743
  &:where(.dark, .dark *) {
2837
2744
  background-color: var(--color-gray-950);
2838
2745
  }
2839
2746
  }
2840
- .dark\:bg-green-900\/30 {
2747
+ .dark\:bg-primary-100 {
2841
2748
  &:where(.dark, .dark *) {
2842
- background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent);
2843
- @supports (color: color-mix(in lab, red, red)) {
2844
- background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent);
2845
- }
2749
+ background-color: var(--color-primary-100);
2846
2750
  }
2847
2751
  }
2848
- .dark\:bg-green-900\/80 {
2752
+ .dark\:bg-primary-400 {
2849
2753
  &:where(.dark, .dark *) {
2850
- background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 80%, transparent);
2851
- @supports (color: color-mix(in lab, red, red)) {
2852
- background-color: color-mix(in oklab, var(--color-green-900) 80%, transparent);
2853
- }
2754
+ background-color: var(--color-primary-400);
2854
2755
  }
2855
2756
  }
2856
- .dark\:bg-primary-100 {
2757
+ .dark\:bg-primary-500 {
2857
2758
  &:where(.dark, .dark *) {
2858
- background-color: var(--color-primary-100);
2759
+ background-color: var(--color-primary-500);
2859
2760
  }
2860
2761
  }
2861
- .dark\:bg-primary-400 {
2762
+ .dark\:bg-primary-600 {
2862
2763
  &:where(.dark, .dark *) {
2863
- background-color: var(--color-primary-400);
2764
+ background-color: var(--color-primary-600);
2864
2765
  }
2865
2766
  }
2866
2767
  .dark\:bg-primary-700 {
@@ -2894,88 +2795,98 @@
2894
2795
  background-color: var(--color-primary-900);
2895
2796
  }
2896
2797
  }
2897
- .dark\:bg-primary-900\/50 {
2798
+ .dark\:bg-primary-900\/20 {
2898
2799
  &:where(.dark, .dark *) {
2899
- background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);
2800
+ background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 20%, transparent);
2900
2801
  @supports (color: color-mix(in lab, red, red)) {
2901
- background-color: color-mix(in oklab, var(--color-primary-900) 50%, transparent);
2802
+ background-color: color-mix(in oklab, var(--color-primary-900) 20%, transparent);
2902
2803
  }
2903
2804
  }
2904
2805
  }
2905
- .dark\:bg-red-900\/30 {
2806
+ .dark\:bg-primary-900\/30 {
2906
2807
  &:where(.dark, .dark *) {
2907
- background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent);
2808
+ background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 30%, transparent);
2908
2809
  @supports (color: color-mix(in lab, red, red)) {
2909
- background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
2810
+ background-color: color-mix(in oklab, var(--color-primary-900) 30%, transparent);
2910
2811
  }
2911
2812
  }
2912
2813
  }
2913
- .dark\:bg-red-900\/80 {
2814
+ .dark\:bg-primary-900\/50 {
2914
2815
  &:where(.dark, .dark *) {
2915
- background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 80%, transparent);
2816
+ background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);
2916
2817
  @supports (color: color-mix(in lab, red, red)) {
2917
- background-color: color-mix(in oklab, var(--color-red-900) 80%, transparent);
2818
+ background-color: color-mix(in oklab, var(--color-primary-900) 50%, transparent);
2918
2819
  }
2919
2820
  }
2920
2821
  }
2921
- .dark\:text-amber-200 {
2922
- &:where(.dark, .dark *) {
2923
- color: var(--color-amber-200);
2924
- }
2925
- }
2926
- .dark\:text-amber-400 {
2822
+ .dark\:bg-primary-900\/80 {
2927
2823
  &:where(.dark, .dark *) {
2928
- color: var(--color-amber-400);
2824
+ background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 80%, transparent);
2825
+ @supports (color: color-mix(in lab, red, red)) {
2826
+ background-color: color-mix(in oklab, var(--color-primary-900) 80%, transparent);
2827
+ }
2929
2828
  }
2930
2829
  }
2931
- .dark\:text-blue-200 {
2830
+ .dark\:bg-secondary-800 {
2932
2831
  &:where(.dark, .dark *) {
2933
- color: var(--color-blue-200);
2832
+ background-color: var(--color-secondary-800);
2934
2833
  }
2935
2834
  }
2936
- .dark\:text-blue-300 {
2835
+ .dark\:bg-secondary-900 {
2937
2836
  &:where(.dark, .dark *) {
2938
- color: var(--color-blue-300);
2837
+ background-color: var(--color-secondary-900);
2939
2838
  }
2940
2839
  }
2941
- .dark\:text-blue-400 {
2840
+ .dark\:bg-success-900\/30 {
2942
2841
  &:where(.dark, .dark *) {
2943
- color: var(--color-blue-400);
2842
+ background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 30%, transparent);
2843
+ @supports (color: color-mix(in lab, red, red)) {
2844
+ background-color: color-mix(in oklab, var(--color-success-900) 30%, transparent);
2845
+ }
2944
2846
  }
2945
2847
  }
2946
- .dark\:text-gray-100 {
2848
+ .dark\:bg-success-900\/80 {
2947
2849
  &:where(.dark, .dark *) {
2948
- color: var(--color-gray-100);
2850
+ background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 80%, transparent);
2851
+ @supports (color: color-mix(in lab, red, red)) {
2852
+ background-color: color-mix(in oklab, var(--color-success-900) 80%, transparent);
2853
+ }
2949
2854
  }
2950
2855
  }
2951
- .dark\:text-gray-300 {
2856
+ .dark\:bg-warning-900\/30 {
2952
2857
  &:where(.dark, .dark *) {
2953
- color: var(--color-gray-300);
2858
+ background-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 30%, transparent);
2859
+ @supports (color: color-mix(in lab, red, red)) {
2860
+ background-color: color-mix(in oklab, var(--color-warning-900) 30%, transparent);
2861
+ }
2954
2862
  }
2955
2863
  }
2956
- .dark\:text-gray-400 {
2864
+ .dark\:bg-warning-900\/80 {
2957
2865
  &:where(.dark, .dark *) {
2958
- color: var(--color-gray-400);
2866
+ background-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 80%, transparent);
2867
+ @supports (color: color-mix(in lab, red, red)) {
2868
+ background-color: color-mix(in oklab, var(--color-warning-900) 80%, transparent);
2869
+ }
2959
2870
  }
2960
2871
  }
2961
- .dark\:text-gray-500 {
2872
+ .dark\:text-danger-200 {
2962
2873
  &:where(.dark, .dark *) {
2963
- color: var(--color-gray-500);
2874
+ color: var(--color-danger-200);
2964
2875
  }
2965
2876
  }
2966
- .dark\:text-gray-600 {
2877
+ .dark\:text-danger-400 {
2967
2878
  &:where(.dark, .dark *) {
2968
- color: var(--color-gray-600);
2879
+ color: var(--color-danger-400);
2969
2880
  }
2970
2881
  }
2971
- .dark\:text-green-200 {
2882
+ .dark\:text-gray-100 {
2972
2883
  &:where(.dark, .dark *) {
2973
- color: var(--color-green-200);
2884
+ color: var(--color-gray-100);
2974
2885
  }
2975
2886
  }
2976
- .dark\:text-green-400 {
2887
+ .dark\:text-gray-400 {
2977
2888
  &:where(.dark, .dark *) {
2978
- color: var(--color-green-400);
2889
+ color: var(--color-gray-400);
2979
2890
  }
2980
2891
  }
2981
2892
  .dark\:text-primary-100 {
@@ -3008,40 +2919,66 @@
3008
2919
  color: var(--color-primary-900);
3009
2920
  }
3010
2921
  }
3011
- .dark\:text-red-200 {
2922
+ .dark\:text-secondary-100 {
3012
2923
  &:where(.dark, .dark *) {
3013
- color: var(--color-red-200);
2924
+ color: var(--color-secondary-100);
3014
2925
  }
3015
2926
  }
3016
- .dark\:text-red-400 {
2927
+ .dark\:text-secondary-300 {
3017
2928
  &:where(.dark, .dark *) {
3018
- color: var(--color-red-400);
2929
+ color: var(--color-secondary-300);
3019
2930
  }
3020
2931
  }
3021
- .dark\:placeholder\:text-gray-600 {
2932
+ .dark\:text-secondary-400 {
3022
2933
  &:where(.dark, .dark *) {
3023
- &::placeholder {
3024
- color: var(--color-gray-600);
3025
- }
2934
+ color: var(--color-secondary-400);
3026
2935
  }
3027
2936
  }
3028
- .dark\:hover\:bg-blue-900\/30 {
2937
+ .dark\:text-secondary-500 {
3029
2938
  &:where(.dark, .dark *) {
3030
- &:hover {
3031
- @media (hover: hover) {
3032
- background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 30%, transparent);
3033
- @supports (color: color-mix(in lab, red, red)) {
3034
- background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent);
3035
- }
3036
- }
2939
+ color: var(--color-secondary-500);
2940
+ }
2941
+ }
2942
+ .dark\:text-secondary-600 {
2943
+ &:where(.dark, .dark *) {
2944
+ color: var(--color-secondary-600);
2945
+ }
2946
+ }
2947
+ .dark\:text-success-200 {
2948
+ &:where(.dark, .dark *) {
2949
+ color: var(--color-success-200);
2950
+ }
2951
+ }
2952
+ .dark\:text-success-400 {
2953
+ &:where(.dark, .dark *) {
2954
+ color: var(--color-success-400);
2955
+ }
2956
+ }
2957
+ .dark\:text-warning-200 {
2958
+ &:where(.dark, .dark *) {
2959
+ color: var(--color-warning-200);
2960
+ }
2961
+ }
2962
+ .dark\:text-warning-400 {
2963
+ &:where(.dark, .dark *) {
2964
+ color: var(--color-warning-400);
2965
+ }
2966
+ }
2967
+ .dark\:placeholder\:text-secondary-600 {
2968
+ &:where(.dark, .dark *) {
2969
+ &::placeholder {
2970
+ color: var(--color-secondary-600);
3037
2971
  }
3038
2972
  }
3039
2973
  }
3040
- .dark\:hover\:bg-gray-700 {
2974
+ .dark\:hover\:bg-danger-900\/20 {
3041
2975
  &:where(.dark, .dark *) {
3042
2976
  &:hover {
3043
2977
  @media (hover: hover) {
3044
- background-color: var(--color-gray-700);
2978
+ background-color: color-mix(in srgb, oklch(41% 0.159 10.272) 20%, transparent);
2979
+ @supports (color: color-mix(in lab, red, red)) {
2980
+ background-color: color-mix(in oklab, var(--color-danger-900) 20%, transparent);
2981
+ }
3045
2982
  }
3046
2983
  }
3047
2984
  }
@@ -3100,23 +3037,23 @@
3100
3037
  }
3101
3038
  }
3102
3039
  }
3103
- .dark\:hover\:bg-red-900\/20 {
3040
+ .dark\:hover\:bg-primary-900\/30 {
3104
3041
  &:where(.dark, .dark *) {
3105
3042
  &:hover {
3106
3043
  @media (hover: hover) {
3107
- background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent);
3044
+ background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 30%, transparent);
3108
3045
  @supports (color: color-mix(in lab, red, red)) {
3109
- background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
3046
+ background-color: color-mix(in oklab, var(--color-primary-900) 30%, transparent);
3110
3047
  }
3111
3048
  }
3112
3049
  }
3113
3050
  }
3114
3051
  }
3115
- .dark\:hover\:text-blue-400 {
3052
+ .dark\:hover\:bg-secondary-700 {
3116
3053
  &:where(.dark, .dark *) {
3117
3054
  &:hover {
3118
3055
  @media (hover: hover) {
3119
- color: var(--color-blue-400);
3056
+ background-color: var(--color-secondary-700);
3120
3057
  }
3121
3058
  }
3122
3059
  }
@@ -3148,6 +3085,15 @@
3148
3085
  }
3149
3086
  }
3150
3087
  }
3088
+ .dark\:hover\:text-primary-400 {
3089
+ &:where(.dark, .dark *) {
3090
+ &:hover {
3091
+ @media (hover: hover) {
3092
+ color: var(--color-primary-400);
3093
+ }
3094
+ }
3095
+ }
3096
+ }
3151
3097
  .dark\:hover\:shadow-primary-900\/60 {
3152
3098
  &:where(.dark, .dark *) {
3153
3099
  &:hover {