mosuk-ui 1.0.2 → 1.0.3

package/styles/utilities/buttons/button.css

@@ -1,1096 +0,0 @@
-@reference "tailwindcss";
-
-/* ! Sizes */
-@utility button-3xs {
-    height: calc(var(--spacing, 0.25rem) * 4);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 1.125);
-
-    font-size: var(--text-3xs, 0.5rem);
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 2);
-    padding-right: calc(var(--spacing, 0.25rem) * 2);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 2);
-        height: calc(var(--spacing, 0.25rem) * 2);
-        min-width: calc(var(--spacing, 0.25rem) * 2);
-        min-height: calc(var(--spacing, 0.25rem) * 2);
-
-        transition: all 200ms ease-in-out;
-    }
-
-    &:not(:hover) {
-        transition: all 600ms ease-in-out;
-
-        & svg {
-            transition: all 600ms ease-in-out;
-        }
-    }
-}
-
-@utility button-2xs {
-    height: calc(var(--spacing, 0.25rem) * 5);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 1.25);
-
-    font-size: var(--text-3xs, 0.5rem);
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 2.5);
-    padding-right: calc(var(--spacing, 0.25rem) * 2.5);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 2);
-        height: calc(var(--spacing, 0.25rem) * 2);
-        min-width: calc(var(--spacing, 0.25rem) * 2);
-        min-height: calc(var(--spacing, 0.25rem) * 2);
-
-        transition: all 200ms ease-in-out;
-    }
-
-    &:not(:hover) {
-        transition: all 600ms ease-in-out;
-
-        & svg {
-            transition: all 600ms ease-in-out;
-        }
-    }
-}
-
-@utility button-xs {
-    height: calc(var(--spacing, 0.25rem) * 6);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 1.5);
-
-    font-size: var(--text-3xs, 0.5rem);
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 2.75);
-    padding-right: calc(var(--spacing, 0.25rem) * 2.75);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 2.5);
-        height: calc(var(--spacing, 0.25rem) * 2.5);
-        min-width: calc(var(--spacing, 0.25rem) * 2.5);
-        min-height: calc(var(--spacing, 0.25rem) * 2.5);
-
-        margin-bottom: 1px;
-
-        transition: all 200ms ease-in-out;
-    }
-
-    &:not(:hover) {
-        transition: all 600ms ease-in-out;
-
-        & svg {
-            transition: all 600ms ease-in-out;
-        }
-    }
-}
-
-@utility button-sm {
-    height: calc(var(--spacing, 0.25rem) * 7);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 1.75);
-
-    font-size: var(--text-2xs, 0.625rem);
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 3);
-    padding-right: calc(var(--spacing, 0.25rem) * 3);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 3);
-        height: calc(var(--spacing, 0.25rem) * 3);
-        min-width: calc(var(--spacing, 0.25rem) * 3);
-        min-height: calc(var(--spacing, 0.25rem) * 3);
-
-        transition: all 200ms ease-in-out;
-    }
-
-    &:not(:hover) {
-        transition: all 600ms ease-in-out;
-
-        & svg {
-            transition: all 600ms ease-in-out;
-        }
-    }
-}
-
-@utility button-base {
-    height: calc(var(--spacing, 0.25rem) * 8);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 2);
-
-    font-size: var(--text-xs, 0.75rem);
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 4);
-    padding-right: calc(var(--spacing, 0.25rem) * 4);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 3.5);
-        height: calc(var(--spacing, 0.25rem) * 3.5);
-        min-width: calc(var(--spacing, 0.25rem) * 3.5);
-        min-height: calc(var(--spacing, 0.25rem) * 3.5);
-
-        transition: all 200ms ease-in-out;
-    }
-
-    &:not(:hover) {
-        transition: all 600ms ease-in-out;
-
-        & svg {
-            transition: all 600ms ease-in-out;
-        }
-    }
-}
-
-@utility button-md {
-    height: calc(var(--spacing, 0.25rem) * 9);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 2);
-
-    font-size: 0.7875rem;
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 5);
-    padding-right: calc(var(--spacing, 0.25rem) * 5);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 4);
-        height: calc(var(--spacing, 0.25rem) * 4);
-        min-width: calc(var(--spacing, 0.25rem) * 4);
-        min-height: calc(var(--spacing, 0.25rem) * 4);
-
-        margin-bottom: 1px;
-
-        transition: all 200ms ease-in-out;
-    }
-
-    &:not(:hover) {
-        transition: all 600ms ease-in-out;
-
-        & svg {
-            transition: all 600ms ease-in-out;
-        }
-    }
-}
-
-@utility button-lg {
-    height: calc(var(--spacing, 0.25rem) * 10);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 2);
-
-    font-size: var(--text-sm, 0.875rem);
-    font-weight: 500;
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 5);
-    padding-right: calc(var(--spacing, 0.25rem) * 5);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 4.5);
-        height: calc(var(--spacing, 0.25rem) * 4.5);
-        min-width: calc(var(--spacing, 0.25rem) * 4.5);
-        min-height: calc(var(--spacing, 0.25rem) * 4.5);
-
-        margin-bottom: 1px;
-
-        transition: all 200ms ease-in-out;
-    }
-
-    &:not(:hover) {
-        transition: all 600ms ease-in-out;
-
-        & svg {
-            transition: all 600ms ease-in-out;
-        }
-    }
-}
-
-@utility button-xl {
-    height: calc(var(--spacing, 0.25rem) * 11);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 2.5);
-
-    font-size: var(--text-sm, 0.875rem);
-    font-weight: 500;
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 6);
-    padding-right: calc(var(--spacing, 0.25rem) * 6);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 5);
-        height: calc(var(--spacing, 0.25rem) * 5);
-        min-width: calc(var(--spacing, 0.25rem) * 5);
-        min-height: calc(var(--spacing, 0.25rem) * 5);
-
-        margin-bottom: 1px;
-
-        transition: all 200ms ease-in-out;
-    }
-
-    &:not(:hover) {
-        transition: all 600ms ease-in-out;
-
-        & svg {
-            transition: all 600ms ease-in-out;
-        }
-    }
-}
-
-@utility button-2xl {
-    height: calc(var(--spacing, 0.25rem) * 12);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 2.5);
-
-    font-size: var(--text-base, 1rem);
-    font-weight: 500;
-    text-wrap: nowrap;
-
-    padding-left: calc(var(--spacing, 0.25rem) * 6);
-    padding-right: calc(var(--spacing, 0.25rem) * 6);
-    border-radius: calc(infinity * 1px);
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 200ms ease-in-out;
-
-    & svg {
-        width: calc(var(--spacing, 0.25rem) * 5.5);
-        height: calc(var(--spacing, 0.25rem) * 5.5);
-        min-width: calc(var(--spacing, 0.25rem) * 5.5);
-        min-height: calc(var(--spacing, 0.25rem) * 5.5);
-
-        margin-bottom: 1px;
-
-        transition: all 200ms ease-in-out;
-    }
-
-    &:not(:hover) {
-        transition: all 600ms ease-in-out;
-
-        & svg {
-            transition: all 600ms ease-in-out;
-        }
-    }
-}
-
-/* ! Styles */
-@utility button-transparent-black {
-    background-color: transparent;
-    color: var(--color-black, #000);
-
-    svg {
-        color: var(--color-gray-500, oklch(0.551 0.027 264.364));
-    }
-}
-
-@utility button-transparent-red-500 {
-    background-color: transparent;
-    color: var(--color-red-500, oklch(0.637 0.237 25.331));
-
-    svg {
-        color: var(--color-red-500, oklch(0.637 0.237 25.331));
-    }
-}
-
-@utility button-transparent-orange-500 {
-    background-color: transparent;
-    color: var(--color-orange-500, oklch(0.705 0.213 47.604));
-
-    svg {
-        color: var(--color-orange-500, oklch(0.705 0.213 47.604));
-    }
-}
-
-@utility button-transparent-yellow-500 {
-    background-color: transparent;
-    color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
-
-    svg {
-        color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
-    }
-}
-
-@utility button-transparent-green-500 {
-    background-color: transparent;
-    color: var(--color-green-500, oklch(0.723 0.219 149.579));
-
-    svg {
-        color: var(--color-green-500, oklch(0.723 0.219 149.579));
-    }
-}
-
-@utility button-transparent-primary-500 {
-    background-color: transparent;
-    color: var(--color-primary-500, #0074e7);
-
-    svg {
-        color: var(--color-primary-500, #0074e7);
-    }
-}
-
-@utility button-outline-gray-100 {
-    background-color: white;
-    color: var(--color-black, #000);
-    border: 1px solid var(--color-gray-100, oklch(0.967 0.003 264.542));
-
-    svg {
-        color: var(--color-gray-300, oklch(0.872 0.01 258.338));
-    }
-}
-
-@utility button-outline-gray-200 {
-    background-color: white;
-    color: var(--color-black, #000);
-    border: 1px solid var(--color-gray-200, oklch(0.928 0.006 264.531));
-
-    svg {
-        color: var(--color-gray-500, oklch(0.551 0.027 264.364));
-    }
-}
-
-@utility button-outline-gray-300 {
-    background-color: white;
-    color: var(--color-black, #000);
-    border: 1px solid var(--color-gray-300, oklch(0.872 0.01 258.338));
-
-    svg {
-        color: var(--color-gray-700, oklch(0.373 0.034 259.733));
-    }
-}
-
-@utility button-outline-gray-400 {
-    background-color: white;
-    color: var(--color-black, #000);
-    border: 1px solid var(--color-gray-400, oklch(0.707 0.022 261.325));
-
-    svg {
-        color: var(--color-gray-900, oklch(0.21 0.034 264.665));
-    }
-}
-
-@utility button-outline-gray-500 {
-    background-color: white;
-    color: var(--color-black, #000);
-    border: 1px solid var(--color-gray-500, oklch(0.551 0.027 264.364));
-
-    svg {
-        color: var(--color-black, #000);
-    }
-}
-
-@utility button-outline-gray-600 {
-    background-color: white;
-    color: var(--color-black, #000);
-    border: 1px solid var(--color-gray-600, oklch(0.446 0.03 256.802));
-
-    svg {
-        color: var(--color-black, #000);
-    }
-}
-
-@utility button-outline-red-100 {
-    background-color: white;
-    color: var(--color-red-500, oklch(0.637 0.237 25.331));
-    border: 1px solid var(--color-red-100, oklch(0.982 0.018 155.826));
-
-    svg {
-        color: var(--color-red-500, oklch(0.637 0.237 25.331));
-    }
-}
-
-@utility button-outline-red-200 {
-    background-color: white;
-    color: var(--color-red-500, oklch(0.637 0.237 25.331));
-    border: 1px solid var(--color-red-200, oklch(0.962 0.044 156.743));
-
-    svg {
-        color: var(--color-red-500, oklch(0.637 0.237 25.331));
-    }
-}
-
-@utility button-outline-red-300 {
-    background-color: white;
-    color: var(--color-red-500, oklch(0.637 0.237 25.331));
-    border: 1px solid var(--color-red-300, oklch(0.925 0.084 155.995));
-
-    svg {
-        color: var(--color-red-500, oklch(0.637 0.237 25.331));
-    }
-}
-
-@utility button-outline-red-400 {
-    background-color: white;
-    color: var(--color-red-500, oklch(0.637 0.237 25.331));
-    border: 1px solid var(--color-red-400, oklch(0.871 0.15 154.449));
-
-    svg {
-        color: var(--color-red-500, oklch(0.637 0.237 25.331));
-    }
-}
-
-@utility button-outline-red-500 {
-    background-color: white;
-    color: var(--color-red-500, oklch(0.637 0.237 25.331));
-    border: 1px solid var(--color-red-500, oklch(0.814 0.167 152.444));
-
-    svg {
-        color: var(--color-red-500, oklch(0.637 0.237 25.331));
-    }
-}
-
-@utility button-outline-red-600 {
-    background-color: white;
-    color: var(--color-red-600, oklch(0.637 0.237 25.331));
-    border: 1px solid var(--color-red-600, oklch(0.745 0.134 151.244));
-
-    svg {
-        color: var(--color-red-600, oklch(0.637 0.237 25.331));
-    }
-}
-
-@utility button-outline-orange-100 {
-    background-color: white;
-    color: var(--color-orange-500, oklch(0.705 0.213 47.604));
-    border: 1px solid var(--color-orange-100, oklch(0.973 0.071 103.193));
-
-    svg {
-        color: var(--color-orange-500, oklch(0.705 0.213 47.604));
-    }
-}
-
-@utility button-outline-orange-200 {
-    background-color: white;
-    color: var(--color-orange-500, oklch(0.705 0.213 47.604));
-    border: 1px solid var(--color-orange-200, oklch(0.945 0.129 101.54));
-
-    svg {
-        color: var(--color-orange-500, oklch(0.705 0.213 47.604));
-    }
-}
-
-@utility button-outline-orange-300 {
-    background-color: white;
-    color: var(--color-orange-500, oklch(0.705 0.213 47.604));
-    border: 1px solid var(--color-orange-300, oklch(0.905 0.182 98.111));
-
-    svg {
-        color: var(--color-orange-500, oklch(0.705 0.213 47.604));
-    }
-}
-
-@utility button-outline-orange-400 {
-    background-color: white;
-    color: var(--color-orange-500, oklch(0.705 0.213 47.604));
-    border: 1px solid var(--color-orange-400, oklch(0.852 0.199 91.936));
-
-    svg {
-        color: var(--color-orange-500, oklch(0.705 0.213 47.604));
-    }
-}
-
-@utility button-outline-orange-500 {
-    background-color: white;
-    color: var(--color-orange-500, oklch(0.705 0.213 47.604));
-    border: 1px solid var(--color-orange-500, oklch(0.795 0.184 86.047));
-
-    svg {
-        color: var(--color-orange-500, oklch(0.705 0.213 47.604));
-    }
-}
-
-@utility button-outline-orange-600 {
-    background-color: white;
-    color: var(--color-orange-600, oklch(0.681 0.162 75.834));
-    border: 1px solid var(--color-orange-600, oklch(0.681 0.162 75.834));
-
-    svg {
-        color: var(--color-orange-600, oklch(0.681 0.162 75.834));
-    }
-}
-
-@utility button-outline-yellow-100 {
-    background-color: white;
-    color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
-    border: 1px solid var(--color-yellow-100, oklch(0.973 0.071 103.193));
-
-    svg {
-        color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
-    }
-}
-
-@utility button-outline-yellow-200 {
-    background-color: white;
-    color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
-    border: 1px solid var(--color-yellow-200, oklch(0.945 0.129 101.54));
-
-    svg {
-        color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
-    }
-}
-
-@utility button-outline-yellow-300 {
-    background-color: white;
-    color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
-    border: 1px solid var(--color-yellow-300, oklch(0.905 0.182 98.111));
-
-    svg {
-        color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
-    }
-}
-
-@utility button-outline-yellow-400 {
-    background-color: white;
-    color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
-    border: 1px solid var(--color-yellow-400, oklch(0.852 0.199 91.936));
-
-    svg {
-        color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
-    }
-}
-
-@utility button-outline-yellow-500 {
-    background-color: white;
-    color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
-    border: 1px solid var(--color-yellow-500, oklch(0.795 0.184 86.047));
-
-    svg {
-        color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
-    }
-}
-
-@utility button-outline-yellow-600 {
-    background-color: white;
-    color: var(--color-yellow-600, oklch(0.681 0.162 75.834));
-    border: 1px solid var(--color-yellow-600, oklch(0.681 0.162 75.834));
-
-    svg {
-        color: var(--color-yellow-600, oklch(0.681 0.162 75.834));
-    }
-}
-
-@utility button-outline-green-100 {
-    background-color: white;
-    color: var(--color-green-500, oklch(0.637 0.237 25.331));
-    border: 1px solid var(--color-green-100, oklch(0.982 0.018 155.826));
-
-    svg {
-        color: var(--color-green-500, oklch(0.637 0.237 25.331));
-    }
-}
-
-@utility button-outline-green-200 {
-    background-color: white;
-    color: var(--color-green-500);
-    border: 1px solid var(--color-green-200, oklch(0.962 0.044 156.743));
-
-    svg {
-        color: var(--color-green-500);
-    }
-}
-
-@utility button-outline-green-300 {
-    background-color: white;
-    color: var(--color-green-500);
-    border: 1px solid var(--color-green-300, oklch(0.925 0.084 155.995));
-
-    svg {
-        color: var(--color-green-500);
-    }
-}
-
-@utility button-outline-green-400 {
-    background-color: white;
-    color: var(--color-green-500);
-    border: 1px solid var(--color-green-400, oklch(0.871 0.15 154.449));
-
-    svg {
-        color: var(--color-green-500);
-    }
-}
-
-@utility button-outline-green-500 {
-    background-color: white;
-    color: var(--color-green-500);
-    border: 1px solid var(--color-green-500, oklch(0.814 0.167 152.444));
-
-    svg {
-        color: var(--color-green-500);
-    }
-}
-
-@utility button-outline-green-600 {
-    background-color: white;
-    color: var(--color-green-600);
-    border: 1px solid var(--color-green-600, oklch(0.745 0.134 151.244));
-
-    svg {
-        color: var(--color-green-600);
-    }
-}
-
-@utility button-outline-primary-100 {
-    background-color: white;
-    color: var(--color-primary-500);
-    border: 1px solid var(--color-primary-100, oklch(0.967 0.003 264.542));
-
-    svg {
-        color: var(--color-primary-500);
-    }
-}
-
-@utility button-outline-primary-200 {
-    background-color: white;
-    color: var(--color-primary-500);
-    border: 1px solid var(--color-primary-200, oklch(0.928 0.006 264.531));
-
-    svg {
-        color: var(--color-primary-500);
-    }
-}
-
-@utility button-outline-primary-300 {
-    background-color: white;
-    color: var(--color-primary-500);
-    border: 1px solid var(--color-primary-300, oklch(0.872 0.01 258.338));
-
-    svg {
-        color: var(--color-primary-500);
-    }
-}
-
-@utility button-outline-primary-400 {
-    background-color: white;
-    color: var(--color-primary-500);
-    border: 1px solid var(--color-primary-400, oklch(0.707 0.022 261.325));
-
-    svg {
-        color: var(--color-primary-500);
-    }
-}
-
-@utility button-outline-primary-500 {
-    background-color: white;
-    color: var(--color-primary-500);
-    border: 1px solid var(--color-primary-500, oklch(0.551 0.027 264.364));
-
-    svg {
-        color: var(--color-primary-500);
-    }
-}
-
-@utility button-outline-primary-600 {
-    background-color: white;
-    color: var(--color-primary-600);
-    border: 1px solid var(--color-primary-600, oklch(0.446 0.03 256.802));
-
-    svg {
-        color: var(--color-primary-600);
-    }
-}
-
-@utility button-fill-gray-100 {
-    background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
-    color: var(--color-gray-700, oklch(0.373 0.034 259.733));
-
-    svg {
-        color: var(--color-gray-700, oklch(0.373 0.034 259.733));
-    }
-}
-
-@utility button-fill-gray-200 {
-    background-color: var(--color-gray-200, oklch(0.928 0.006 264.531));
-    color: var(--color-gray-900, oklch(0.21 0.034 264.665));
-
-    svg {
-        color: var(--color-gray-900, oklch(0.21 0.034 264.665));
-    }
-}
-
-@utility button-fill-gray-300 {
-    background-color: var(--color-gray-300, oklch(0.872 0.01 258.338));
-    color: var(--color-black, #000);
-
-    svg {
-        color: var(--color-black, #000);
-    }
-}
-
-@utility button-fill-gray-400 {
-    background-color: var(--color-gray-400, oklch(0.707 0.022 261.325));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-gray-500 {
-    background-color: var(--color-gray-500, oklch(0.551 0.027 264.364));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-gray-600 {
-    background-color: var(--color-gray-600, oklch(0.446 0.03 256.802));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-red-100 {
-    background-color: var(--color-red-100, oklch(0.982 0.018 155.826));
-    color: var(--color-red-500, oklch(0.637 0.237 25.331));
-
-    svg {
-        color: var(--color-red-500, oklch(0.637 0.237 25.331));
-    }
-}
-
-@utility button-fill-red-200 {
-    background-color: var(--color-red-200, oklch(0.962 0.044 156.743));
-    color: var(--color-red-700, oklch(0.527 0.154 150.069));
-
-    svg {
-        color: var(--color-red-700, oklch(0.527 0.154 150.069));
-    }
-}
-
-@utility button-fill-red-300 {
-    background-color: var(--color-red-300, oklch(0.925 0.084 155.995));
-    color: var(--color-red-900, oklch(0.393 0.095 152.535));
-
-    svg {
-        color: var(--color-red-900, oklch(0.393 0.095 152.535));
-    }
-}
-
-@utility button-fill-red-400 {
-    background-color: var(--color-red-400, oklch(0.871 0.15 154.449));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-red-500 {
-    background-color: var(--color-red-500, oklch(0.814 0.167 152.444));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-red-600 {
-    background-color: var(--color-red-600, oklch(0.745 0.134 151.244));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-orange-100 {
-    background-color: var(--color-orange-100, oklch(0.973 0.071 103.193));
-    color: var(--color-orange-500, oklch(0.705 0.213 47.604));
-
-    svg {
-        color: var(--color-orange-500, oklch(0.705 0.213 47.604));
-    }
-}
-
-@utility button-fill-orange-200 {
-    background-color: var(--color-orange-200, oklch(0.945 0.129 101.54));
-    color: var(--color-orange-700, oklch(0.554 0.135 66.442));
-
-    svg {
-        color: var(--color-orange-700, oklch(0.554 0.135 66.442));
-    }
-}
-
-@utility button-fill-orange-300 {
-    background-color: var(--color-orange-300, oklch(0.905 0.182 98.111));
-    color: var(--color-orange-900, oklch(0.421 0.095 57.708));
-
-    svg {
-        color: var(--color-orange-900, oklch(0.421 0.095 57.708));
-    }
-}
-
-@utility button-fill-orange-400 {
-    background-color: var(--color-orange-400, oklch(0.852 0.199 91.936));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-orange-500 {
-    background-color: var(--color-orange-500, oklch(0.795 0.184 86.047));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-orange-600 {
-    background-color: var(--color-orange-600, oklch(0.681 0.162 75.834));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-yellow-100 {
-    background-color: var(--color-yellow-100, oklch(0.973 0.071 103.193));
-    color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
-
-    svg {
-        color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
-    }
-}
-
-@utility button-fill-yellow-200 {
-    background-color: var(--color-yellow-200, oklch(0.945 0.129 101.54));
-    color: var(--color-yellow-700, oklch(0.554 0.135 66.442));
-
-    svg {
-        color: var(--color-yellow-700, oklch(0.554 0.135 66.442));
-    }
-}
-
-@utility button-fill-yellow-300 {
-    background-color: var(--color-yellow-300, oklch(0.905 0.182 98.111));
-    color: var(--color-yellow-900, oklch(0.421 0.095 57.708));
-
-    svg {
-        color: var(--color-yellow-900, oklch(0.421 0.095 57.708));
-    }
-}
-
-@utility button-fill-yellow-400 {
-    background-color: var(--color-yellow-400, oklch(0.852 0.199 91.936));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-yellow-500 {
-    background-color: var(--color-yellow-500, oklch(0.795 0.184 86.047));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-yellow-600 {
-    background-color: var(--color-yellow-600, oklch(0.681 0.162 75.834));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-green-100 {
-    background-color: var(--color-green-100, oklch(0.982 0.018 155.826));
-    color: var(--color-green-500, oklch(0.637 0.237 25.331));
-
-    svg {
-        color: var(--color-green-500, oklch(0.637 0.237 25.331));
-    }
-}
-
-@utility button-fill-green-200 {
-    background-color: var(--color-green-200, oklch(0.962 0.044 156.743));
-    color: var(--color-green-700, oklch(0.527 0.154 150.069));
-
-    svg {
-        color: var(--color-green-700, oklch(0.527 0.154 150.069));
-    }
-}
-
-@utility button-fill-green-300 {
-    background-color: var(--color-green-300, oklch(0.925 0.084 155.995));
-    color: var(--color-green-900, oklch(0.393 0.095 152.535));
-
-    svg {
-        color: var(--color-green-900, oklch(0.393 0.095 152.535));
-    }
-}
-
-@utility button-fill-green-400 {
-    background-color: var(--color-green-400, oklch(0.871 0.15 154.449));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-green-500 {
-    background-color: var(--color-green-500, oklch(0.814 0.167 152.444));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-green-600 {
-    background-color: var(--color-green-600, oklch(0.745 0.134 151.244));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-primary-100 {
-    background-color: var(--color-primary-100, oklch(0.967 0.003 264.542));
-    color: var(--color-primary-500, oklch(0.637 0.237 25.331));
-
-    svg {
-        color: var(--color-primary-500, oklch(0.637 0.237 25.331));
-    }
-}
-
-@utility button-fill-primary-200 {
-    background-color: var(--color-primary-200, oklch(0.928 0.006 264.531));
-    color: var(--color-primary-700, oklch(0.527 0.154 150.069));
-
-    svg {
-        color: var(--color-primary-700, oklch(0.527 0.154 150.069));
-    }
-}
-
-@utility button-fill-primary-300 {
-    background-color: var(--color-primary-300, oklch(0.872 0.01 258.338));
-    color: var(--color-primary-900, oklch(0.393 0.095 152.535));
-
-    svg {
-        color: var(--color-primary-900, oklch(0.393 0.095 152.535));
-    }
-}
-
-@utility button-fill-primary-400 {
-    background-color: var(--color-primary-400, oklch(0.707 0.022 261.325));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-primary-500 {
-    background-color: var(--color-primary-500, oklch(0.551 0.027 264.364));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}
-
-@utility button-fill-primary-600 {
-    background-color: var(--color-primary-600, oklch(0.446 0.03 256.802));
-    color: var(--color-white, #fff);
-
-    svg {
-        color: var(--color-white, #fff);
-    }
-}