|
105 | 105 | --color-fuchsia-900: oklch(40.1% 0.17 325.612); |
106 | 106 | --color-slate-50: oklch(98.4% 0.003 247.858); |
107 | 107 | --color-slate-200: oklch(92.9% 0.013 255.508); |
| 108 | + --color-slate-300: oklch(86.9% 0.022 252.894); |
108 | 109 | --color-slate-400: oklch(70.4% 0.04 256.788); |
109 | 110 | --color-slate-500: oklch(55.4% 0.046 257.417); |
110 | 111 | --color-slate-700: oklch(37.2% 0.044 257.287); |
|
197 | 198 | --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |
198 | 199 | --default-font-family: var(--font-sans); |
199 | 200 | --default-mono-font-family: var(--font-mono); |
| 201 | + --default-ring-color: hsl(var(--ring)); |
200 | 202 | } |
201 | 203 | } |
202 | 204 | @layer base { |
|
404 | 406 | .top-0 { |
405 | 407 | top: calc(var(--spacing) * 0); |
406 | 408 | } |
| 409 | + .top-1 { |
| 410 | + top: calc(var(--spacing) * 1); |
| 411 | + } |
407 | 412 | .top-1\/2 { |
408 | 413 | top: calc(1/2 * 100%); |
409 | 414 | } |
|
443 | 448 | .left-0 { |
444 | 449 | left: calc(var(--spacing) * 0); |
445 | 450 | } |
| 451 | + .left-1 { |
| 452 | + left: calc(var(--spacing) * 1); |
| 453 | + } |
446 | 454 | .left-1\/2 { |
447 | 455 | left: calc(1/2 * 100%); |
448 | 456 | } |
|
509 | 517 | max-width: 96rem; |
510 | 518 | } |
511 | 519 | } |
| 520 | + .-m-2 { |
| 521 | + margin: calc(var(--spacing) * -2); |
| 522 | + } |
512 | 523 | .-m-2\.5 { |
513 | 524 | margin: calc(var(--spacing) * -2.5); |
514 | 525 | } |
515 | 526 | .m-2 { |
516 | 527 | margin: calc(var(--spacing) * 2); |
517 | 528 | } |
| 529 | + .-mx-1 { |
| 530 | + margin-inline: calc(var(--spacing) * -1); |
| 531 | + } |
518 | 532 | .-mx-1\.5 { |
519 | 533 | margin-inline: calc(var(--spacing) * -1.5); |
520 | 534 | } |
|
530 | 544 | .mx-auto { |
531 | 545 | margin-inline: auto; |
532 | 546 | } |
| 547 | + .-my-1 { |
| 548 | + margin-block: calc(var(--spacing) * -1); |
| 549 | + } |
533 | 550 | .-my-1\.5 { |
534 | 551 | margin-block: calc(var(--spacing) * -1.5); |
535 | 552 | } |
|
551 | 568 | .-mt-36 { |
552 | 569 | margin-top: calc(var(--spacing) * -36); |
553 | 570 | } |
| 571 | + .mt-0 { |
| 572 | + margin-top: calc(var(--spacing) * 0); |
| 573 | + } |
554 | 574 | .mt-0\.5 { |
555 | 575 | margin-top: calc(var(--spacing) * 0.5); |
556 | 576 | } |
|
605 | 625 | .-mb-px { |
606 | 626 | margin-bottom: -1px; |
607 | 627 | } |
| 628 | + .mb-0 { |
| 629 | + margin-bottom: calc(var(--spacing) * 0); |
| 630 | + } |
608 | 631 | .mb-0\.5 { |
609 | 632 | margin-bottom: calc(var(--spacing) * 0.5); |
610 | 633 | } |
|
738 | 761 | width: calc(var(--spacing) * 20); |
739 | 762 | height: calc(var(--spacing) * 20); |
740 | 763 | } |
| 764 | + .h-1 { |
| 765 | + height: calc(var(--spacing) * 1); |
| 766 | + } |
741 | 767 | .h-1\.5 { |
742 | 768 | height: calc(var(--spacing) * 1.5); |
743 | 769 | } |
|
1030 | 1056 | .origin-top-right { |
1031 | 1057 | transform-origin: 100% 0; |
1032 | 1058 | } |
| 1059 | + .-translate-x-1 { |
| 1060 | + --tw-translate-x: calc(var(--spacing) * -1); |
| 1061 | + translate: var(--tw-translate-x) var(--tw-translate-y); |
| 1062 | + } |
1033 | 1063 | .-translate-x-1\/2 { |
1034 | 1064 | --tw-translate-x: calc(calc(1/2 * 100%) * -1); |
1035 | 1065 | translate: var(--tw-translate-x) var(--tw-translate-y); |
|
1046 | 1076 | --tw-translate-x: calc(var(--spacing) * 0); |
1047 | 1077 | translate: var(--tw-translate-x) var(--tw-translate-y); |
1048 | 1078 | } |
| 1079 | + .translate-x-1 { |
| 1080 | + --tw-translate-x: calc(var(--spacing) * 1); |
| 1081 | + translate: var(--tw-translate-x) var(--tw-translate-y); |
| 1082 | + } |
1049 | 1083 | .translate-x-1\/4 { |
1050 | 1084 | --tw-translate-x: calc(1/4 * 100%); |
1051 | 1085 | translate: var(--tw-translate-x) var(--tw-translate-y); |
|
1058 | 1092 | --tw-translate-x: 100%; |
1059 | 1093 | translate: var(--tw-translate-x) var(--tw-translate-y); |
1060 | 1094 | } |
| 1095 | + .-translate-y-1 { |
| 1096 | + --tw-translate-y: calc(var(--spacing) * -1); |
| 1097 | + translate: var(--tw-translate-x) var(--tw-translate-y); |
| 1098 | + } |
1061 | 1099 | .-translate-y-1\/2 { |
1062 | 1100 | --tw-translate-y: calc(calc(1/2 * 100%) * -1); |
1063 | 1101 | translate: var(--tw-translate-x) var(--tw-translate-y); |
|
1070 | 1108 | --tw-translate-y: calc(var(--spacing) * 0); |
1071 | 1109 | translate: var(--tw-translate-x) var(--tw-translate-y); |
1072 | 1110 | } |
| 1111 | + .translate-y-1 { |
| 1112 | + --tw-translate-y: calc(var(--spacing) * 1); |
| 1113 | + translate: var(--tw-translate-x) var(--tw-translate-y); |
| 1114 | + } |
1073 | 1115 | .translate-y-1\/4 { |
1074 | 1116 | --tw-translate-y: calc(1/4 * 100%); |
1075 | 1117 | translate: var(--tw-translate-x) var(--tw-translate-y); |
|
1514 | 1556 | .border-red-400 { |
1515 | 1557 | border-color: var(--color-red-400); |
1516 | 1558 | } |
| 1559 | + .border-red-800 { |
| 1560 | + border-color: var(--color-red-800); |
| 1561 | + } |
1517 | 1562 | .border-red-800\/20 { |
1518 | 1563 | border-color: color-mix(in srgb, oklch(44.4% 0.177 26.899) 20%, transparent); |
1519 | 1564 | @supports (color: color-mix(in lab, red, red)) { |
|
1523 | 1568 | .border-transparent { |
1524 | 1569 | border-color: transparent; |
1525 | 1570 | } |
| 1571 | + .border-white { |
| 1572 | + border-color: var(--color-white); |
| 1573 | + } |
1526 | 1574 | .border-white\/10 { |
1527 | 1575 | border-color: color-mix(in srgb, #fff 10%, transparent); |
1528 | 1576 | @supports (color: color-mix(in lab, red, red)) { |
|
1544 | 1592 | .border-yellow-400 { |
1545 | 1593 | border-color: var(--color-yellow-400); |
1546 | 1594 | } |
| 1595 | + .border-yellow-500 { |
| 1596 | + border-color: var(--color-yellow-500); |
| 1597 | + } |
1547 | 1598 | .border-yellow-500\/30 { |
1548 | 1599 | border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent); |
1549 | 1600 | @supports (color: color-mix(in lab, red, red)) { |
1550 | 1601 | border-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent); |
1551 | 1602 | } |
1552 | 1603 | } |
| 1604 | + .border-yellow-600 { |
| 1605 | + border-color: var(--color-yellow-600); |
| 1606 | + } |
1553 | 1607 | .border-yellow-600\/30 { |
1554 | 1608 | border-color: color-mix(in srgb, oklch(68.1% 0.162 75.834) 30%, transparent); |
1555 | 1609 | @supports (color: color-mix(in lab, red, red)) { |
|
1559 | 1613 | .bg-\[\#fdfbf7\] { |
1560 | 1614 | background-color: #fdfbf7; |
1561 | 1615 | } |
| 1616 | + .bg-black { |
| 1617 | + background-color: var(--color-black); |
| 1618 | + } |
1562 | 1619 | .bg-black\/40 { |
1563 | 1620 | background-color: color-mix(in srgb, #000 40%, transparent); |
1564 | 1621 | @supports (color: color-mix(in lab, red, red)) { |
|
1640 | 1697 | .bg-gray-400 { |
1641 | 1698 | background-color: var(--color-gray-400); |
1642 | 1699 | } |
| 1700 | + .bg-gray-500 { |
| 1701 | + background-color: var(--color-gray-500); |
| 1702 | + } |
1643 | 1703 | .bg-gray-500\/75 { |
1644 | 1704 | background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 75%, transparent); |
1645 | 1705 | @supports (color: color-mix(in lab, red, red)) { |
|
1706 | 1766 | .bg-sky-600 { |
1707 | 1767 | background-color: var(--color-sky-600); |
1708 | 1768 | } |
| 1769 | + .bg-slate-50 { |
| 1770 | + background-color: var(--color-slate-50); |
| 1771 | + } |
1709 | 1772 | .bg-slate-50\! { |
1710 | 1773 | background-color: var(--color-slate-50) !important; |
1711 | 1774 | } |
| 1775 | + .bg-slate-400 { |
| 1776 | + background-color: var(--color-slate-400); |
| 1777 | + } |
1712 | 1778 | .bg-slate-400\/10 { |
1713 | 1779 | background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 10%, transparent); |
1714 | 1780 | @supports (color: color-mix(in lab, red, red)) { |
|
1773 | 1839 | --tw-gradient-position: to top in oklab; |
1774 | 1840 | background-image: linear-gradient(var(--tw-gradient-stops)); |
1775 | 1841 | } |
| 1842 | + .from-black { |
| 1843 | + --tw-gradient-from: var(--color-black); |
| 1844 | + --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)); |
| 1845 | + } |
1776 | 1846 | .from-black\/80 { |
1777 | 1847 | --tw-gradient-from: color-mix(in srgb, #000 80%, transparent); |
1778 | 1848 | @supports (color: color-mix(in lab, red, red)) { |
|
1820 | 1890 | --tw-gradient-from: var(--color-yellow-400); |
1821 | 1891 | --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)); |
1822 | 1892 | } |
| 1893 | + .via-black { |
| 1894 | + --tw-gradient-via: var(--color-black); |
| 1895 | + --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); |
| 1896 | + --tw-gradient-stops: var(--tw-gradient-via-stops); |
| 1897 | + } |
1823 | 1898 | .via-black\/20 { |
1824 | 1899 | --tw-gradient-via: color-mix(in srgb, #000 20%, transparent); |
1825 | 1900 | @supports (color: color-mix(in lab, red, red)) { |
|
1959 | 2034 | .px-12 { |
1960 | 2035 | padding-inline: calc(var(--spacing) * 12); |
1961 | 2036 | } |
| 2037 | + .py-0 { |
| 2038 | + padding-block: calc(var(--spacing) * 0); |
| 2039 | + } |
1962 | 2040 | .py-0\.5 { |
1963 | 2041 | padding-block: calc(var(--spacing) * 0.5); |
1964 | 2042 | } |
|
1995 | 2073 | .py-12 { |
1996 | 2074 | padding-block: calc(var(--spacing) * 12); |
1997 | 2075 | } |
| 2076 | + .pt-0 { |
| 2077 | + padding-top: calc(var(--spacing) * 0); |
| 2078 | + } |
1998 | 2079 | .pt-0\.5 { |
1999 | 2080 | padding-top: calc(var(--spacing) * 0.5); |
2000 | 2081 | } |
|
2388 | 2469 | .text-sky-600 { |
2389 | 2470 | color: var(--color-sky-600); |
2390 | 2471 | } |
| 2472 | + .text-slate-300 { |
| 2473 | + color: var(--color-slate-300); |
| 2474 | + } |
2391 | 2475 | .text-slate-500 { |
2392 | 2476 | color: var(--color-slate-500); |
2393 | 2477 | } |
|
2575 | 2659 | --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor); |
2576 | 2660 | box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); |
2577 | 2661 | } |
| 2662 | + .shadow-black { |
| 2663 | + --tw-shadow-color: #000; |
| 2664 | + @supports (color: color-mix(in lab, red, red)) { |
| 2665 | + --tw-shadow-color: color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent); |
| 2666 | + } |
| 2667 | + } |
2578 | 2668 | .shadow-black\/5 { |
2579 | 2669 | --tw-shadow-color: color-mix(in srgb, #000 5%, transparent); |
2580 | 2670 | @supports (color: color-mix(in lab, red, red)) { |
2581 | 2671 | --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 5%, transparent) var(--tw-shadow-alpha), transparent); |
2582 | 2672 | } |
2583 | 2673 | } |
| 2674 | + .shadow-fuchsia-500 { |
| 2675 | + --tw-shadow-color: oklch(66.7% 0.295 322.15); |
| 2676 | + @supports (color: color-mix(in lab, red, red)) { |
| 2677 | + --tw-shadow-color: color-mix(in oklab, var(--color-fuchsia-500) var(--tw-shadow-alpha), transparent); |
| 2678 | + } |
| 2679 | + } |
2584 | 2680 | .shadow-fuchsia-500\/10 { |
2585 | 2681 | --tw-shadow-color: color-mix(in srgb, oklch(66.7% 0.295 322.15) 10%, transparent); |
2586 | 2682 | @supports (color: color-mix(in lab, red, red)) { |
2587 | 2683 | --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-fuchsia-500) 10%, transparent) var(--tw-shadow-alpha), transparent); |
2588 | 2684 | } |
2589 | 2685 | } |
| 2686 | + .shadow-gray-200 { |
| 2687 | + --tw-shadow-color: oklch(92.8% 0.006 264.531); |
| 2688 | + @supports (color: color-mix(in lab, red, red)) { |
| 2689 | + --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent); |
| 2690 | + } |
| 2691 | + } |
2590 | 2692 | .shadow-gray-200\/50 { |
2591 | 2693 | --tw-shadow-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent); |
2592 | 2694 | @supports (color: color-mix(in lab, red, red)) { |
2593 | 2695 | --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-200) 50%, transparent) var(--tw-shadow-alpha), transparent); |
2594 | 2696 | } |
2595 | 2697 | } |
| 2698 | + .ring-black { |
| 2699 | + --tw-ring-color: var(--color-black); |
| 2700 | + } |
2596 | 2701 | .ring-black\/5 { |
2597 | 2702 | --tw-ring-color: color-mix(in srgb, #000 5%, transparent); |
2598 | 2703 | @supports (color: color-mix(in lab, red, red)) { |
|
2614 | 2719 | .ring-indigo-500 { |
2615 | 2720 | --tw-ring-color: var(--color-indigo-500); |
2616 | 2721 | } |
| 2722 | + .ring-yellow-400 { |
| 2723 | + --tw-ring-color: var(--color-yellow-400); |
| 2724 | + } |
2617 | 2725 | .ring-yellow-400\/30 { |
2618 | 2726 | --tw-ring-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 30%, transparent); |
2619 | 2727 | @supports (color: color-mix(in lab, red, red)) { |
2620 | 2728 | --tw-ring-color: color-mix(in oklab, var(--color-yellow-400) 30%, transparent); |
2621 | 2729 | } |
2622 | 2730 | } |
| 2731 | + .inset-ring-gray-900 { |
| 2732 | + --tw-inset-ring-color: var(--color-gray-900); |
| 2733 | + } |
2623 | 2734 | .inset-ring-gray-900\/5 { |
2624 | 2735 | --tw-inset-ring-color: color-mix(in srgb, oklch(21% 0.034 264.665) 5%, transparent); |
2625 | 2736 | @supports (color: color-mix(in lab, red, red)) { |
|
0 commit comments