|
97 | 97 | --color-fuchsia-900: oklch(40.1% 0.17 325.612); |
98 | 98 | --color-slate-50: oklch(98.4% 0.003 247.858); |
99 | 99 | --color-slate-200: oklch(92.9% 0.013 255.508); |
| 100 | + --color-slate-300: oklch(86.9% 0.022 252.894); |
100 | 101 | --color-slate-400: oklch(70.4% 0.04 256.788); |
101 | 102 | --color-slate-500: oklch(55.4% 0.046 257.417); |
102 | 103 | --color-slate-700: oklch(37.2% 0.044 257.287); |
|
189 | 190 | --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |
190 | 191 | --default-font-family: var(--font-sans); |
191 | 192 | --default-mono-font-family: var(--font-mono); |
| 193 | + --default-ring-color: hsl(var(--ring)); |
192 | 194 | } |
193 | 195 | } |
194 | 196 | @layer base { |
|
393 | 395 | .top-0 { |
394 | 396 | top: calc(var(--spacing) * 0); |
395 | 397 | } |
| 398 | + .top-1 { |
| 399 | + top: calc(var(--spacing) * 1); |
| 400 | + } |
396 | 401 | .top-1\/2 { |
397 | 402 | top: calc(1/2 * 100%); |
398 | 403 | } |
|
429 | 434 | .left-0 { |
430 | 435 | left: calc(var(--spacing) * 0); |
431 | 436 | } |
| 437 | + .left-1 { |
| 438 | + left: calc(var(--spacing) * 1); |
| 439 | + } |
432 | 440 | .left-1\/2 { |
433 | 441 | left: calc(1/2 * 100%); |
434 | 442 | } |
|
501 | 509 | max-width: 96rem; |
502 | 510 | } |
503 | 511 | } |
| 512 | + .-m-2 { |
| 513 | + margin: calc(var(--spacing) * -2); |
| 514 | + } |
504 | 515 | .-m-2\.5 { |
505 | 516 | margin: calc(var(--spacing) * -2.5); |
506 | 517 | } |
507 | 518 | .m-2 { |
508 | 519 | margin: calc(var(--spacing) * 2); |
509 | 520 | } |
| 521 | + .-mx-1 { |
| 522 | + margin-inline: calc(var(--spacing) * -1); |
| 523 | + } |
510 | 524 | .-mx-1\.5 { |
511 | 525 | margin-inline: calc(var(--spacing) * -1.5); |
512 | 526 | } |
|
519 | 533 | .mx-auto { |
520 | 534 | margin-inline: auto; |
521 | 535 | } |
| 536 | + .-my-1 { |
| 537 | + margin-block: calc(var(--spacing) * -1); |
| 538 | + } |
522 | 539 | .-my-1\.5 { |
523 | 540 | margin-block: calc(var(--spacing) * -1.5); |
524 | 541 | } |
|
540 | 557 | .-mt-36 { |
541 | 558 | margin-top: calc(var(--spacing) * -36); |
542 | 559 | } |
| 560 | + .mt-0 { |
| 561 | + margin-top: calc(var(--spacing) * 0); |
| 562 | + } |
543 | 563 | .mt-0\.5 { |
544 | 564 | margin-top: calc(var(--spacing) * 0.5); |
545 | 565 | } |
|
721 | 741 | width: calc(var(--spacing) * 20); |
722 | 742 | height: calc(var(--spacing) * 20); |
723 | 743 | } |
| 744 | + .h-1 { |
| 745 | + height: calc(var(--spacing) * 1); |
| 746 | + } |
724 | 747 | .h-1\.5 { |
725 | 748 | height: calc(var(--spacing) * 1.5); |
726 | 749 | } |
|
989 | 1012 | .origin-top-right { |
990 | 1013 | transform-origin: 100% 0; |
991 | 1014 | } |
| 1015 | + .-translate-x-1 { |
| 1016 | + --tw-translate-x: calc(var(--spacing) * -1); |
| 1017 | + translate: var(--tw-translate-x) var(--tw-translate-y); |
| 1018 | + } |
992 | 1019 | .-translate-x-1\/2 { |
993 | 1020 | --tw-translate-x: calc(calc(1/2 * 100%) * -1); |
994 | 1021 | translate: var(--tw-translate-x) var(--tw-translate-y); |
|
1005 | 1032 | --tw-translate-x: calc(var(--spacing) * 0); |
1006 | 1033 | translate: var(--tw-translate-x) var(--tw-translate-y); |
1007 | 1034 | } |
| 1035 | + .translate-x-1 { |
| 1036 | + --tw-translate-x: calc(var(--spacing) * 1); |
| 1037 | + translate: var(--tw-translate-x) var(--tw-translate-y); |
| 1038 | + } |
1008 | 1039 | .translate-x-1\/4 { |
1009 | 1040 | --tw-translate-x: calc(1/4 * 100%); |
1010 | 1041 | translate: var(--tw-translate-x) var(--tw-translate-y); |
|
1017 | 1048 | --tw-translate-x: 100%; |
1018 | 1049 | translate: var(--tw-translate-x) var(--tw-translate-y); |
1019 | 1050 | } |
| 1051 | + .-translate-y-1 { |
| 1052 | + --tw-translate-y: calc(var(--spacing) * -1); |
| 1053 | + translate: var(--tw-translate-x) var(--tw-translate-y); |
| 1054 | + } |
1020 | 1055 | .-translate-y-1\/2 { |
1021 | 1056 | --tw-translate-y: calc(calc(1/2 * 100%) * -1); |
1022 | 1057 | translate: var(--tw-translate-x) var(--tw-translate-y); |
|
1029 | 1064 | --tw-translate-y: calc(var(--spacing) * 0); |
1030 | 1065 | translate: var(--tw-translate-x) var(--tw-translate-y); |
1031 | 1066 | } |
| 1067 | + .translate-y-1 { |
| 1068 | + --tw-translate-y: calc(var(--spacing) * 1); |
| 1069 | + translate: var(--tw-translate-x) var(--tw-translate-y); |
| 1070 | + } |
1032 | 1071 | .translate-y-1\/4 { |
1033 | 1072 | --tw-translate-y: calc(1/4 * 100%); |
1034 | 1073 | translate: var(--tw-translate-x) var(--tw-translate-y); |
|
1458 | 1497 | .border-red-400 { |
1459 | 1498 | border-color: var(--color-red-400); |
1460 | 1499 | } |
| 1500 | + .border-red-800 { |
| 1501 | + border-color: var(--color-red-800); |
| 1502 | + } |
1461 | 1503 | .border-red-800\/20 { |
1462 | 1504 | border-color: color-mix(in srgb, oklch(44.4% 0.177 26.899) 20%, transparent); |
1463 | 1505 | @supports (color: color-mix(in lab, red, red)) { |
|
1467 | 1509 | .border-transparent { |
1468 | 1510 | border-color: transparent; |
1469 | 1511 | } |
| 1512 | + .border-white { |
| 1513 | + border-color: var(--color-white); |
| 1514 | + } |
1470 | 1515 | .border-white\/10 { |
1471 | 1516 | border-color: color-mix(in srgb, #fff 10%, transparent); |
1472 | 1517 | @supports (color: color-mix(in lab, red, red)) { |
|
1488 | 1533 | .border-yellow-400 { |
1489 | 1534 | border-color: var(--color-yellow-400); |
1490 | 1535 | } |
| 1536 | + .border-yellow-500 { |
| 1537 | + border-color: var(--color-yellow-500); |
| 1538 | + } |
1491 | 1539 | .border-yellow-500\/30 { |
1492 | 1540 | border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent); |
1493 | 1541 | @supports (color: color-mix(in lab, red, red)) { |
1494 | 1542 | border-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent); |
1495 | 1543 | } |
1496 | 1544 | } |
| 1545 | + .border-yellow-600 { |
| 1546 | + border-color: var(--color-yellow-600); |
| 1547 | + } |
1497 | 1548 | .border-yellow-600\/30 { |
1498 | 1549 | border-color: color-mix(in srgb, oklch(68.1% 0.162 75.834) 30%, transparent); |
1499 | 1550 | @supports (color: color-mix(in lab, red, red)) { |
|
1503 | 1554 | .bg-\[\#fdfbf7\] { |
1504 | 1555 | background-color: #fdfbf7; |
1505 | 1556 | } |
| 1557 | + .bg-black { |
| 1558 | + background-color: var(--color-black); |
| 1559 | + } |
1506 | 1560 | .bg-black\/40 { |
1507 | 1561 | background-color: color-mix(in srgb, #000 40%, transparent); |
1508 | 1562 | @supports (color: color-mix(in lab, red, red)) { |
|
1569 | 1623 | .bg-gray-400 { |
1570 | 1624 | background-color: var(--color-gray-400); |
1571 | 1625 | } |
| 1626 | + .bg-gray-500 { |
| 1627 | + background-color: var(--color-gray-500); |
| 1628 | + } |
1572 | 1629 | .bg-gray-500\/75 { |
1573 | 1630 | background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 75%, transparent); |
1574 | 1631 | @supports (color: color-mix(in lab, red, red)) { |
|
1632 | 1689 | .bg-sky-600 { |
1633 | 1690 | background-color: var(--color-sky-600); |
1634 | 1691 | } |
| 1692 | + .bg-slate-50 { |
| 1693 | + background-color: var(--color-slate-50); |
| 1694 | + } |
1635 | 1695 | .bg-slate-50\! { |
1636 | 1696 | background-color: var(--color-slate-50) !important; |
1637 | 1697 | } |
| 1698 | + .bg-slate-400 { |
| 1699 | + background-color: var(--color-slate-400); |
| 1700 | + } |
1638 | 1701 | .bg-slate-400\/10 { |
1639 | 1702 | background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 10%, transparent); |
1640 | 1703 | @supports (color: color-mix(in lab, red, red)) { |
|
1702 | 1765 | --tw-gradient-position: to top in oklab; |
1703 | 1766 | background-image: linear-gradient(var(--tw-gradient-stops)); |
1704 | 1767 | } |
| 1768 | + .from-black { |
| 1769 | + --tw-gradient-from: var(--color-black); |
| 1770 | + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); |
| 1771 | + } |
1705 | 1772 | .from-black\/80 { |
1706 | 1773 | --tw-gradient-from: color-mix(in srgb, #000 80%, transparent); |
1707 | 1774 | @supports (color: color-mix(in lab, red, red)) { |
|
1733 | 1800 | --tw-gradient-from: var(--color-yellow-400); |
1734 | 1801 | --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); |
1735 | 1802 | } |
| 1803 | + .via-black { |
| 1804 | + --tw-gradient-via: var(--color-black); |
| 1805 | + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); |
| 1806 | + --tw-gradient-stops: var(--tw-gradient-via-stops); |
| 1807 | + } |
1736 | 1808 | .via-black\/20 { |
1737 | 1809 | --tw-gradient-via: color-mix(in srgb, #000 20%, transparent); |
1738 | 1810 | @supports (color: color-mix(in lab, red, red)) { |
|
1860 | 1932 | .px-12 { |
1861 | 1933 | padding-inline: calc(var(--spacing) * 12); |
1862 | 1934 | } |
| 1935 | + .py-0 { |
| 1936 | + padding-block: calc(var(--spacing) * 0); |
| 1937 | + } |
1863 | 1938 | .py-0\.5 { |
1864 | 1939 | padding-block: calc(var(--spacing) * 0.5); |
1865 | 1940 | } |
|
1896 | 1971 | .py-12 { |
1897 | 1972 | padding-block: calc(var(--spacing) * 12); |
1898 | 1973 | } |
| 1974 | + .pt-0 { |
| 1975 | + padding-top: calc(var(--spacing) * 0); |
| 1976 | + } |
1899 | 1977 | .pt-0\.5 { |
1900 | 1978 | padding-top: calc(var(--spacing) * 0.5); |
1901 | 1979 | } |
|
2265 | 2343 | .text-sky-600 { |
2266 | 2344 | color: var(--color-sky-600); |
2267 | 2345 | } |
| 2346 | + .text-slate-300 { |
| 2347 | + color: var(--color-slate-300); |
| 2348 | + } |
2268 | 2349 | .text-slate-500 { |
2269 | 2350 | color: var(--color-slate-500); |
2270 | 2351 | } |
|
2292 | 2373 | .text-yellow-400 { |
2293 | 2374 | color: var(--color-yellow-400); |
2294 | 2375 | } |
| 2376 | + .text-yellow-500 { |
| 2377 | + color: var(--color-yellow-500); |
| 2378 | + } |
2295 | 2379 | .text-yellow-500\/60 { |
2296 | 2380 | color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 60%, transparent); |
2297 | 2381 | @supports (color: color-mix(in lab, red, red)) { |
|
2454 | 2538 | --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor); |
2455 | 2539 | box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); |
2456 | 2540 | } |
| 2541 | + .shadow-black { |
| 2542 | + --tw-shadow-color: #000; |
| 2543 | + @supports (color: color-mix(in lab, red, red)) { |
| 2544 | + --tw-shadow-color: color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent); |
| 2545 | + } |
| 2546 | + } |
2457 | 2547 | .shadow-black\/5 { |
2458 | 2548 | --tw-shadow-color: color-mix(in srgb, #000 5%, transparent); |
2459 | 2549 | @supports (color: color-mix(in lab, red, red)) { |
2460 | 2550 | --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 5%, transparent) var(--tw-shadow-alpha), transparent); |
2461 | 2551 | } |
2462 | 2552 | } |
| 2553 | + .shadow-fuchsia-500 { |
| 2554 | + --tw-shadow-color: oklch(66.7% 0.295 322.15); |
| 2555 | + @supports (color: color-mix(in lab, red, red)) { |
| 2556 | + --tw-shadow-color: color-mix(in oklab, var(--color-fuchsia-500) var(--tw-shadow-alpha), transparent); |
| 2557 | + } |
| 2558 | + } |
2463 | 2559 | .shadow-fuchsia-500\/10 { |
2464 | 2560 | --tw-shadow-color: color-mix(in srgb, oklch(66.7% 0.295 322.15) 10%, transparent); |
2465 | 2561 | @supports (color: color-mix(in lab, red, red)) { |
2466 | 2562 | --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-fuchsia-500) 10%, transparent) var(--tw-shadow-alpha), transparent); |
2467 | 2563 | } |
2468 | 2564 | } |
| 2565 | + .shadow-gray-200 { |
| 2566 | + --tw-shadow-color: oklch(92.8% 0.006 264.531); |
| 2567 | + @supports (color: color-mix(in lab, red, red)) { |
| 2568 | + --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent); |
| 2569 | + } |
| 2570 | + } |
2469 | 2571 | .shadow-gray-200\/50 { |
2470 | 2572 | --tw-shadow-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent); |
2471 | 2573 | @supports (color: color-mix(in lab, red, red)) { |
2472 | 2574 | --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-200) 50%, transparent) var(--tw-shadow-alpha), transparent); |
2473 | 2575 | } |
2474 | 2576 | } |
| 2577 | + .ring-black { |
| 2578 | + --tw-ring-color: var(--color-black); |
| 2579 | + } |
2475 | 2580 | .ring-black\/5 { |
2476 | 2581 | --tw-ring-color: color-mix(in srgb, #000 5%, transparent); |
2477 | 2582 | @supports (color: color-mix(in lab, red, red)) { |
|
2493 | 2598 | .ring-indigo-500 { |
2494 | 2599 | --tw-ring-color: var(--color-indigo-500); |
2495 | 2600 | } |
| 2601 | + .ring-yellow-400 { |
| 2602 | + --tw-ring-color: var(--color-yellow-400); |
| 2603 | + } |
2496 | 2604 | .ring-yellow-400\/30 { |
2497 | 2605 | --tw-ring-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 30%, transparent); |
2498 | 2606 | @supports (color: color-mix(in lab, red, red)) { |
2499 | 2607 | --tw-ring-color: color-mix(in oklab, var(--color-yellow-400) 30%, transparent); |
2500 | 2608 | } |
2501 | 2609 | } |
| 2610 | + .inset-ring-gray-900 { |
| 2611 | + --tw-inset-ring-color: var(--color-gray-900); |
| 2612 | + } |
2502 | 2613 | .inset-ring-gray-900\/5 { |
2503 | 2614 | --tw-inset-ring-color: color-mix(in srgb, oklch(21% 0.034 264.665) 5%, transparent); |
2504 | 2615 | @supports (color: color-mix(in lab, red, red)) { |
|
0 commit comments