|
195 | 195 | --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |
196 | 196 | --default-font-family: var(--font-sans); |
197 | 197 | --default-mono-font-family: var(--font-mono); |
| 198 | + --default-ring-color: hsl(var(--ring)); |
198 | 199 | } |
199 | 200 | } |
200 | 201 | @layer base { |
|
402 | 403 | .top-0 { |
403 | 404 | top: calc(var(--spacing) * 0); |
404 | 405 | } |
| 406 | + .top-1 { |
| 407 | + top: calc(var(--spacing) * 1); |
| 408 | + } |
405 | 409 | .top-1\/2 { |
406 | 410 | top: calc(1/2 * 100%); |
407 | 411 | } |
|
438 | 442 | .left-0 { |
439 | 443 | left: calc(var(--spacing) * 0); |
440 | 444 | } |
| 445 | + .left-1 { |
| 446 | + left: calc(var(--spacing) * 1); |
| 447 | + } |
441 | 448 | .left-1\/2 { |
442 | 449 | left: calc(1/2 * 100%); |
443 | 450 | } |
|
510 | 517 | max-width: 96rem; |
511 | 518 | } |
512 | 519 | } |
| 520 | + .-m-2 { |
| 521 | + margin: calc(var(--spacing) * -2); |
| 522 | + } |
513 | 523 | .-m-2\.5 { |
514 | 524 | margin: calc(var(--spacing) * -2.5); |
515 | 525 | } |
516 | 526 | .m-2 { |
517 | 527 | margin: calc(var(--spacing) * 2); |
518 | 528 | } |
| 529 | + .-mx-1 { |
| 530 | + margin-inline: calc(var(--spacing) * -1); |
| 531 | + } |
519 | 532 | .-mx-1\.5 { |
520 | 533 | margin-inline: calc(var(--spacing) * -1.5); |
521 | 534 | } |
|
528 | 541 | .mx-auto { |
529 | 542 | margin-inline: auto; |
530 | 543 | } |
| 544 | + .-my-1 { |
| 545 | + margin-block: calc(var(--spacing) * -1); |
| 546 | + } |
531 | 547 | .-my-1\.5 { |
532 | 548 | margin-block: calc(var(--spacing) * -1.5); |
533 | 549 | } |
|
549 | 565 | .-mt-36 { |
550 | 566 | margin-top: calc(var(--spacing) * -36); |
551 | 567 | } |
| 568 | + .mt-0 { |
| 569 | + margin-top: calc(var(--spacing) * 0); |
| 570 | + } |
552 | 571 | .mt-0\.5 { |
553 | 572 | margin-top: calc(var(--spacing) * 0.5); |
554 | 573 | } |
|
730 | 749 | width: calc(var(--spacing) * 20); |
731 | 750 | height: calc(var(--spacing) * 20); |
732 | 751 | } |
| 752 | + .h-1 { |
| 753 | + height: calc(var(--spacing) * 1); |
| 754 | + } |
733 | 755 | .h-1\.5 { |
734 | 756 | height: calc(var(--spacing) * 1.5); |
735 | 757 | } |
|
998 | 1020 | .origin-top-right { |
999 | 1021 | transform-origin: 100% 0; |
1000 | 1022 | } |
| 1023 | + .-translate-x-1 { |
| 1024 | + --tw-translate-x: calc(var(--spacing) * -1); |
| 1025 | + translate: var(--tw-translate-x) var(--tw-translate-y); |
| 1026 | + } |
1001 | 1027 | .-translate-x-1\/2 { |
1002 | 1028 | --tw-translate-x: calc(calc(1/2 * 100%) * -1); |
1003 | 1029 | translate: var(--tw-translate-x) var(--tw-translate-y); |
|
1014 | 1040 | --tw-translate-x: calc(var(--spacing) * 0); |
1015 | 1041 | translate: var(--tw-translate-x) var(--tw-translate-y); |
1016 | 1042 | } |
| 1043 | + .translate-x-1 { |
| 1044 | + --tw-translate-x: calc(var(--spacing) * 1); |
| 1045 | + translate: var(--tw-translate-x) var(--tw-translate-y); |
| 1046 | + } |
1017 | 1047 | .translate-x-1\/4 { |
1018 | 1048 | --tw-translate-x: calc(1/4 * 100%); |
1019 | 1049 | translate: var(--tw-translate-x) var(--tw-translate-y); |
|
1026 | 1056 | --tw-translate-x: 100%; |
1027 | 1057 | translate: var(--tw-translate-x) var(--tw-translate-y); |
1028 | 1058 | } |
| 1059 | + .-translate-y-1 { |
| 1060 | + --tw-translate-y: calc(var(--spacing) * -1); |
| 1061 | + translate: var(--tw-translate-x) var(--tw-translate-y); |
| 1062 | + } |
1029 | 1063 | .-translate-y-1\/2 { |
1030 | 1064 | --tw-translate-y: calc(calc(1/2 * 100%) * -1); |
1031 | 1065 | translate: var(--tw-translate-x) var(--tw-translate-y); |
|
1038 | 1072 | --tw-translate-y: calc(var(--spacing) * 0); |
1039 | 1073 | translate: var(--tw-translate-x) var(--tw-translate-y); |
1040 | 1074 | } |
| 1075 | + .translate-y-1 { |
| 1076 | + --tw-translate-y: calc(var(--spacing) * 1); |
| 1077 | + translate: var(--tw-translate-x) var(--tw-translate-y); |
| 1078 | + } |
1041 | 1079 | .translate-y-1\/4 { |
1042 | 1080 | --tw-translate-y: calc(1/4 * 100%); |
1043 | 1081 | translate: var(--tw-translate-x) var(--tw-translate-y); |
|
1470 | 1508 | .border-red-400 { |
1471 | 1509 | border-color: var(--color-red-400); |
1472 | 1510 | } |
| 1511 | + .border-red-800 { |
| 1512 | + border-color: var(--color-red-800); |
| 1513 | + } |
1473 | 1514 | .border-red-800\/20 { |
1474 | 1515 | border-color: color-mix(in srgb, oklch(44.4% 0.177 26.899) 20%, transparent); |
1475 | 1516 | @supports (color: color-mix(in lab, red, red)) { |
|
1479 | 1520 | .border-transparent { |
1480 | 1521 | border-color: transparent; |
1481 | 1522 | } |
| 1523 | + .border-white { |
| 1524 | + border-color: var(--color-white); |
| 1525 | + } |
1482 | 1526 | .border-white\/10 { |
1483 | 1527 | border-color: color-mix(in srgb, #fff 10%, transparent); |
1484 | 1528 | @supports (color: color-mix(in lab, red, red)) { |
|
1500 | 1544 | .border-yellow-400 { |
1501 | 1545 | border-color: var(--color-yellow-400); |
1502 | 1546 | } |
| 1547 | + .border-yellow-500 { |
| 1548 | + border-color: var(--color-yellow-500); |
| 1549 | + } |
1503 | 1550 | .border-yellow-500\/30 { |
1504 | 1551 | border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent); |
1505 | 1552 | @supports (color: color-mix(in lab, red, red)) { |
1506 | 1553 | border-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent); |
1507 | 1554 | } |
1508 | 1555 | } |
| 1556 | + .border-yellow-600 { |
| 1557 | + border-color: var(--color-yellow-600); |
| 1558 | + } |
1509 | 1559 | .border-yellow-600\/30 { |
1510 | 1560 | border-color: color-mix(in srgb, oklch(68.1% 0.162 75.834) 30%, transparent); |
1511 | 1561 | @supports (color: color-mix(in lab, red, red)) { |
|
1515 | 1565 | .bg-\[\#fdfbf7\] { |
1516 | 1566 | background-color: #fdfbf7; |
1517 | 1567 | } |
| 1568 | + .bg-black { |
| 1569 | + background-color: var(--color-black); |
| 1570 | + } |
1518 | 1571 | .bg-black\/40 { |
1519 | 1572 | background-color: color-mix(in srgb, #000 40%, transparent); |
1520 | 1573 | @supports (color: color-mix(in lab, red, red)) { |
|
1581 | 1634 | .bg-gray-400 { |
1582 | 1635 | background-color: var(--color-gray-400); |
1583 | 1636 | } |
| 1637 | + .bg-gray-500 { |
| 1638 | + background-color: var(--color-gray-500); |
| 1639 | + } |
1584 | 1640 | .bg-gray-500\/75 { |
1585 | 1641 | background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 75%, transparent); |
1586 | 1642 | @supports (color: color-mix(in lab, red, red)) { |
|
1647 | 1703 | .bg-sky-600 { |
1648 | 1704 | background-color: var(--color-sky-600); |
1649 | 1705 | } |
| 1706 | + .bg-slate-50 { |
| 1707 | + background-color: var(--color-slate-50); |
| 1708 | + } |
1650 | 1709 | .bg-slate-50\! { |
1651 | 1710 | background-color: var(--color-slate-50) !important; |
1652 | 1711 | } |
| 1712 | + .bg-slate-400 { |
| 1713 | + background-color: var(--color-slate-400); |
| 1714 | + } |
1653 | 1715 | .bg-slate-400\/10 { |
1654 | 1716 | background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 10%, transparent); |
1655 | 1717 | @supports (color: color-mix(in lab, red, red)) { |
|
1714 | 1776 | --tw-gradient-position: to top in oklab; |
1715 | 1777 | background-image: linear-gradient(var(--tw-gradient-stops)); |
1716 | 1778 | } |
| 1779 | + .from-black { |
| 1780 | + --tw-gradient-from: var(--color-black); |
| 1781 | + --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)); |
| 1782 | + } |
1717 | 1783 | .from-black\/80 { |
1718 | 1784 | --tw-gradient-from: color-mix(in srgb, #000 80%, transparent); |
1719 | 1785 | @supports (color: color-mix(in lab, red, red)) { |
|
1757 | 1823 | --tw-gradient-from: var(--color-yellow-400); |
1758 | 1824 | --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)); |
1759 | 1825 | } |
| 1826 | + .via-black { |
| 1827 | + --tw-gradient-via: var(--color-black); |
| 1828 | + --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); |
| 1829 | + --tw-gradient-stops: var(--tw-gradient-via-stops); |
| 1830 | + } |
1760 | 1831 | .via-black\/20 { |
1761 | 1832 | --tw-gradient-via: color-mix(in srgb, #000 20%, transparent); |
1762 | 1833 | @supports (color: color-mix(in lab, red, red)) { |
|
1896 | 1967 | .px-12 { |
1897 | 1968 | padding-inline: calc(var(--spacing) * 12); |
1898 | 1969 | } |
| 1970 | + .py-0 { |
| 1971 | + padding-block: calc(var(--spacing) * 0); |
| 1972 | + } |
1899 | 1973 | .py-0\.5 { |
1900 | 1974 | padding-block: calc(var(--spacing) * 0.5); |
1901 | 1975 | } |
|
1932 | 2006 | .py-12 { |
1933 | 2007 | padding-block: calc(var(--spacing) * 12); |
1934 | 2008 | } |
| 2009 | + .pt-0 { |
| 2010 | + padding-top: calc(var(--spacing) * 0); |
| 2011 | + } |
1935 | 2012 | .pt-0\.5 { |
1936 | 2013 | padding-top: calc(var(--spacing) * 0.5); |
1937 | 2014 | } |
|
2310 | 2387 | .text-sky-600 { |
2311 | 2388 | color: var(--color-sky-600); |
2312 | 2389 | } |
| 2390 | + .text-slate-300 { |
| 2391 | + color: var(--color-slate-300); |
| 2392 | + } |
2313 | 2393 | .text-slate-500 { |
2314 | 2394 | color: var(--color-slate-500); |
2315 | 2395 | } |
|
2337 | 2417 | .text-yellow-400 { |
2338 | 2418 | color: var(--color-yellow-400); |
2339 | 2419 | } |
| 2420 | + .text-yellow-500 { |
| 2421 | + color: var(--color-yellow-500); |
| 2422 | + } |
2340 | 2423 | .text-yellow-500\/60 { |
2341 | 2424 | color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 60%, transparent); |
2342 | 2425 | @supports (color: color-mix(in lab, red, red)) { |
|
2496 | 2579 | --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor); |
2497 | 2580 | box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); |
2498 | 2581 | } |
| 2582 | + .shadow-black { |
| 2583 | + --tw-shadow-color: #000; |
| 2584 | + @supports (color: color-mix(in lab, red, red)) { |
| 2585 | + --tw-shadow-color: color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent); |
| 2586 | + } |
| 2587 | + } |
2499 | 2588 | .shadow-black\/5 { |
2500 | 2589 | --tw-shadow-color: color-mix(in srgb, #000 5%, transparent); |
2501 | 2590 | @supports (color: color-mix(in lab, red, red)) { |
2502 | 2591 | --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 5%, transparent) var(--tw-shadow-alpha), transparent); |
2503 | 2592 | } |
2504 | 2593 | } |
| 2594 | + .shadow-fuchsia-500 { |
| 2595 | + --tw-shadow-color: oklch(66.7% 0.295 322.15); |
| 2596 | + @supports (color: color-mix(in lab, red, red)) { |
| 2597 | + --tw-shadow-color: color-mix(in oklab, var(--color-fuchsia-500) var(--tw-shadow-alpha), transparent); |
| 2598 | + } |
| 2599 | + } |
2505 | 2600 | .shadow-fuchsia-500\/10 { |
2506 | 2601 | --tw-shadow-color: color-mix(in srgb, oklch(66.7% 0.295 322.15) 10%, transparent); |
2507 | 2602 | @supports (color: color-mix(in lab, red, red)) { |
2508 | 2603 | --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-fuchsia-500) 10%, transparent) var(--tw-shadow-alpha), transparent); |
2509 | 2604 | } |
2510 | 2605 | } |
| 2606 | + .shadow-gray-200 { |
| 2607 | + --tw-shadow-color: oklch(92.8% 0.006 264.531); |
| 2608 | + @supports (color: color-mix(in lab, red, red)) { |
| 2609 | + --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent); |
| 2610 | + } |
| 2611 | + } |
2511 | 2612 | .shadow-gray-200\/50 { |
2512 | 2613 | --tw-shadow-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent); |
2513 | 2614 | @supports (color: color-mix(in lab, red, red)) { |
2514 | 2615 | --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-200) 50%, transparent) var(--tw-shadow-alpha), transparent); |
2515 | 2616 | } |
2516 | 2617 | } |
| 2618 | + .ring-black { |
| 2619 | + --tw-ring-color: var(--color-black); |
| 2620 | + } |
2517 | 2621 | .ring-black\/5 { |
2518 | 2622 | --tw-ring-color: color-mix(in srgb, #000 5%, transparent); |
2519 | 2623 | @supports (color: color-mix(in lab, red, red)) { |
|
2535 | 2639 | .ring-indigo-500 { |
2536 | 2640 | --tw-ring-color: var(--color-indigo-500); |
2537 | 2641 | } |
| 2642 | + .ring-yellow-400 { |
| 2643 | + --tw-ring-color: var(--color-yellow-400); |
| 2644 | + } |
2538 | 2645 | .ring-yellow-400\/30 { |
2539 | 2646 | --tw-ring-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 30%, transparent); |
2540 | 2647 | @supports (color: color-mix(in lab, red, red)) { |
2541 | 2648 | --tw-ring-color: color-mix(in oklab, var(--color-yellow-400) 30%, transparent); |
2542 | 2649 | } |
2543 | 2650 | } |
| 2651 | + .inset-ring-gray-900 { |
| 2652 | + --tw-inset-ring-color: var(--color-gray-900); |
| 2653 | + } |
2544 | 2654 | .inset-ring-gray-900\/5 { |
2545 | 2655 | --tw-inset-ring-color: color-mix(in srgb, oklch(21% 0.034 264.665) 5%, transparent); |
2546 | 2656 | @supports (color: color-mix(in lab, red, red)) { |
|
0 commit comments