okonomi_ui_kit 0.1.9 → 0.1.11

data/app/assets/builds/okonomi_ui_kit/application.tailwind.css

@@ -79,7 +79,6 @@
     --color-indigo-700: oklch(45.7% 0.24 277.023);
     --color-indigo-800: oklch(39.8% 0.195 277.366);
     --color-indigo-900: oklch(35.9% 0.144 278.697);
-    --color-indigo-950: oklch(25.7% 0.09 281.288);
     --color-purple-50: oklch(97.7% 0.014 308.299);
     --color-purple-100: oklch(94.6% 0.033 307.174);
     --color-purple-200: oklch(90.2% 0.063 306.703);
@@ -90,7 +89,6 @@
     --color-purple-700: oklch(49.6% 0.265 301.924);
     --color-purple-800: oklch(43.8% 0.218 303.724);
     --color-purple-900: oklch(38.1% 0.176 304.987);
-    --color-pink-500: oklch(65.6% 0.241 354.308);
     --color-rose-200: oklch(89.2% 0.058 10.001);
     --color-rose-900: oklch(41% 0.159 10.272);
     --color-slate-100: oklch(96.8% 0.007 247.896);
@@ -134,8 +132,6 @@
     --text-4xl--line-height: calc(2.5 / 2.25);
     --text-5xl: 3rem;
     --text-5xl--line-height: 1;
-    --text-6xl: 3.75rem;
-    --text-6xl--line-height: 1;
     --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
@@ -161,29 +157,40 @@
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --color-default-50: var(--color-gray-50);
-    --color-default-300: var(--color-gray-300);
+    --color-default-100: var(--color-gray-100);
     --color-default-500: var(--color-gray-500);
     --color-default-600: var(--color-gray-600);
     --color-default-700: var(--color-gray-700);
     --color-default-900: var(--color-gray-900);
     --color-primary-50: var(--color-indigo-50);
+    --color-primary-100: var(--color-indigo-100);
+    --color-primary-500: var(--color-indigo-500);
     --color-primary-600: var(--color-indigo-600);
     --color-primary-700: var(--color-indigo-700);
     --color-secondary-50: var(--color-purple-50);
+    --color-secondary-100: var(--color-purple-100);
+    --color-secondary-500: var(--color-purple-500);
     --color-secondary-600: var(--color-purple-600);
     --color-secondary-700: var(--color-purple-700);
     --color-success-50: var(--color-green-50);
+    --color-success-100: var(--color-green-100);
+    --color-success-500: var(--color-green-500);
     --color-success-600: var(--color-green-600);
     --color-success-700: var(--color-green-700);
     --color-danger-50: var(--color-red-50);
     --color-danger-100: var(--color-red-100);
     --color-danger-400: var(--color-red-400);
+    --color-danger-500: var(--color-red-500);
     --color-danger-600: var(--color-red-600);
     --color-danger-700: var(--color-red-700);
     --color-warning-50: var(--color-amber-50);
+    --color-warning-100: var(--color-amber-100);
+    --color-warning-500: var(--color-amber-500);
     --color-warning-600: var(--color-amber-600);
     --color-warning-700: var(--color-amber-700);
     --color-info-50: var(--color-sky-50);
+    --color-info-100: var(--color-sky-100);
+    --color-info-500: var(--color-sky-500);
     --color-info-600: var(--color-sky-600);
     --color-info-700: var(--color-sky-700);
   }
@@ -447,6 +454,24 @@
       max-width: 96rem;
     }
   }
+  .-m-4 {
+    margin: calc(var(--spacing) * -4);
+  }
+  .-m-8 {
+    margin: calc(var(--spacing) * -8);
+  }
+  .m-2 {
+    margin: calc(var(--spacing) * 2);
+  }
+  .m-4 {
+    margin: calc(var(--spacing) * 4);
+  }
+  .m-8 {
+    margin: calc(var(--spacing) * 8);
+  }
+  .m-\[1\.5rem\] {
+    margin: 1.5rem;
+  }
   .-mx-2 {
     margin-inline: calc(var(--spacing) * -2);
   }
@@ -456,9 +481,30 @@
   .-mx-6 {
     margin-inline: calc(var(--spacing) * -6);
   }
+  .-mx-8 {
+    margin-inline: calc(var(--spacing) * -8);
+  }
+  .mx-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
+  .mx-8 {
+    margin-inline: calc(var(--spacing) * 8);
+  }
   .mx-auto {
     margin-inline: auto;
   }
+  .my-1 {
+    margin-block: calc(var(--spacing) * 1);
+  }
+  .my-2 {
+    margin-block: calc(var(--spacing) * 2);
+  }
+  .my-4 {
+    margin-block: calc(var(--spacing) * 4);
+  }
+  .my-8 {
+    margin-block: calc(var(--spacing) * 8);
+  }
   .mt-0 {
     margin-top: calc(var(--spacing) * 0);
   }
@@ -483,18 +529,30 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
   .mt-auto {
     margin-top: auto;
   }
+  .-mr-1 {
+    margin-right: calc(var(--spacing) * -1);
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
+  .mr-1\.5 {
+    margin-right: calc(var(--spacing) * 1.5);
+  }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
   .mr-3 {
     margin-right: calc(var(--spacing) * 3);
   }
+  .mr-8 {
+    margin-right: calc(var(--spacing) * 8);
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -516,12 +574,27 @@
   .mb-12 {
     margin-bottom: calc(var(--spacing) * 12);
   }
+  .-ml-4 {
+    margin-left: calc(var(--spacing) * -4);
+  }
+  .-ml-8 {
+    margin-left: calc(var(--spacing) * -8);
+  }
+  .-ml-px {
+    margin-left: -1px;
+  }
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
   .ml-4 {
     margin-left: calc(var(--spacing) * 4);
   }
+  .ml-8 {
+    margin-left: calc(var(--spacing) * 8);
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -555,6 +628,14 @@
   .aspect-video {
     aspect-ratio: var(--aspect-video);
   }
+  .size-3 {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -575,6 +656,9 @@
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
   }
+  .h-0 {
+    height: calc(var(--spacing) * 0);
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -608,6 +692,9 @@
   .h-full {
     height: 100%;
   }
+  .h-px {
+    height: 1px;
+  }
   .max-h-32 {
     max-height: calc(var(--spacing) * 32);
   }
@@ -662,6 +749,9 @@
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
+  .w-56 {
+    width: calc(var(--spacing) * 56);
+  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -698,6 +788,9 @@
   .max-w-sm {
     max-width: var(--container-sm);
   }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
   .min-w-\[20px\] {
     min-width: 20px;
   }
@@ -719,6 +812,9 @@
   .border-collapse {
     border-collapse: collapse;
   }
+  .origin-top-right {
+    transform-origin: top right;
+  }
   .-translate-y-1 {
     --tw-translate-y: calc(var(--spacing) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -825,6 +921,9 @@
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -840,6 +939,23 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .gap-\[30px\] {
+    gap: 30px;
+  }
+  .-space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * -2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .-space-y-8 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * -8) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * -8) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -895,6 +1011,23 @@
   .gap-x-4 {
     column-gap: calc(var(--spacing) * 4);
   }
+  .gap-x-8 {
+    column-gap: calc(var(--spacing) * 8);
+  }
+  .-space-x-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * -4) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * -4) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
+  .-space-x-8 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * -8) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * -8) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .-space-x-px {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -923,12 +1056,25 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .space-x-8 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
+  .gap-y-2 {
+    row-gap: calc(var(--spacing) * 2);
+  }
   .gap-y-5 {
     row-gap: calc(var(--spacing) * 5);
   }
   .gap-y-7 {
     row-gap: calc(var(--spacing) * 7);
   }
+  .gap-y-8 {
+    row-gap: calc(var(--spacing) * 8);
+  }
   .divide-y {
     :where(& > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
@@ -988,10 +1134,18 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-l-md {
+    border-top-left-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
   .rounded-l-none {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+  .rounded-r-md {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
   .rounded-r-none {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -1016,6 +1170,10 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
+  .border-r-0 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0px;
+  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -1153,9 +1311,6 @@
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
-  .bg-danger-50 {
-    background-color: var(--color-danger-50);
-  }
   .bg-danger-100 {
     background-color: var(--color-danger-100);
   }
@@ -1201,9 +1356,6 @@
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
-  .bg-green-500 {
-    background-color: var(--color-green-500);
-  }
   .bg-green-600 {
     background-color: var(--color-green-600);
   }
@@ -1213,15 +1365,9 @@
   .bg-indigo-600 {
     background-color: var(--color-indigo-600);
   }
-  .bg-indigo-950 {
-    background-color: var(--color-indigo-950);
-  }
   .bg-info-600 {
     background-color: var(--color-info-600);
   }
-  .bg-primary-50 {
-    background-color: var(--color-primary-50);
-  }
   .bg-primary-600 {
     background-color: var(--color-primary-600);
   }
@@ -1252,15 +1398,9 @@
   .bg-slate-800 {
     background-color: var(--color-slate-800);
   }
-  .bg-success-50 {
-    background-color: var(--color-success-50);
-  }
   .bg-success-600 {
     background-color: var(--color-success-600);
   }
-  .bg-warning-50 {
-    background-color: var(--color-warning-50);
-  }
   .bg-warning-600 {
     background-color: var(--color-warning-600);
   }
@@ -1297,6 +1437,12 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .p-\[1px\] {
+    padding: 1px;
+  }
+  .p-\[20px\] {
+    padding: 20px;
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -1315,6 +1461,9 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .px-8 {
+    padding-inline: calc(var(--spacing) * 8);
+  }
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
   }
@@ -1339,9 +1488,6 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
-  .py-5 {
-    padding-block: calc(var(--spacing) * 5);
-  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
@@ -1357,12 +1503,24 @@
   .pt-5 {
     padding-top: calc(var(--spacing) * 5);
   }
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
+  .pt-8 {
+    padding-top: calc(var(--spacing) * 8);
+  }
+  .pr-2 {
+    padding-right: calc(var(--spacing) * 2);
+  }
   .pr-3 {
     padding-right: calc(var(--spacing) * 3);
   }
   .pr-4 {
     padding-right: calc(var(--spacing) * 4);
   }
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
   .pr-10 {
     padding-right: calc(var(--spacing) * 10);
   }
@@ -1372,15 +1530,27 @@
   .pr-20 {
     padding-right: calc(var(--spacing) * 20);
   }
+  .pb-1 {
+    padding-bottom: calc(var(--spacing) * 1);
+  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
+  .pl-8 {
+    padding-left: calc(var(--spacing) * 8);
+  }
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);
   }
@@ -1500,9 +1670,6 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .text-\[\#custom-color\] {
-    color: #custom-color;
-  }
   .text-blue-400 {
     color: var(--color-blue-400);
   }
@@ -1575,12 +1742,6 @@
   .text-green-800 {
     color: var(--color-green-800);
   }
-  .text-indigo-100 {
-    color: var(--color-indigo-100);
-  }
-  .text-indigo-500 {
-    color: var(--color-indigo-500);
-  }
   .text-indigo-600 {
     color: var(--color-indigo-600);
   }
@@ -1590,9 +1751,6 @@
   .text-info-600 {
     color: var(--color-info-600);
   }
-  .text-pink-500 {
-    color: var(--color-pink-500);
-  }
   .text-primary-600 {
     color: var(--color-primary-600);
   }
@@ -1718,25 +1876,57 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-4 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring-8 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-blue-500 {
     --tw-ring-color: var(--color-blue-500);
   }
   .ring-danger-400 {
     --tw-ring-color: var(--color-danger-400);
   }
+  .ring-gray-200 {
+    --tw-ring-color: var(--color-gray-200);
+  }
   .ring-gray-300 {
     --tw-ring-color: var(--color-gray-300);
   }
+  .ring-green-600 {
+    --tw-ring-color: var(--color-green-600);
+  }
   .ring-red-400 {
     --tw-ring-color: var(--color-red-400);
   }
   .ring-red-500 {
     --tw-ring-color: var(--color-red-500);
   }
+  .ring-offset-1 {
+    --tw-ring-offset-width: 1px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
   .ring-offset-2 {
     --tw-ring-offset-width: 2px;
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
+  .ring-offset-4 {
+    --tw-ring-offset-width: 4px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+  .ring-offset-8 {
+    --tw-ring-offset-width: 8px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+  .ring-offset-blue-500 {
+    --tw-ring-offset-color: var(--color-blue-500);
+  }
+  .ring-offset-red-500 {
+    --tw-ring-offset-color: var(--color-red-500);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1821,11 +2011,10 @@
       }
     }
   }
-  .group-hover\:text-red-500 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        color: var(--color-red-500);
-      }
+  .last\:border-0 {
+    &:last-child {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
     }
   }
   .focus-within\:ring-1 {
@@ -1839,6 +2028,20 @@
       --tw-ring-color: var(--color-gray-400);
     }
   }
+  .hover\:m-2 {
+    &:hover {
+      @media (hover: hover) {
+        margin: calc(var(--spacing) * 2);
+      }
+    }
+  }
+  .hover\:m-8 {
+    &:hover {
+      @media (hover: hover) {
+        margin: calc(var(--spacing) * 8);
+      }
+    }
+  }
   .hover\:cursor-help {
     &:hover {
       @media (hover: hover) {
@@ -2070,6 +2273,41 @@
       }
     }
   }
+  .hover\:p-4 {
+    &:hover {
+      @media (hover: hover) {
+        padding: calc(var(--spacing) * 4);
+      }
+    }
+  }
+  .hover\:p-8 {
+    &:hover {
+      @media (hover: hover) {
+        padding: calc(var(--spacing) * 8);
+      }
+    }
+  }
+  .hover\:px-4 {
+    &:hover {
+      @media (hover: hover) {
+        padding-inline: calc(var(--spacing) * 4);
+      }
+    }
+  }
+  .hover\:px-8 {
+    &:hover {
+      @media (hover: hover) {
+        padding-inline: calc(var(--spacing) * 8);
+      }
+    }
+  }
+  .hover\:text-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-blue-500);
+      }
+    }
+  }
   .hover\:text-blue-800 {
     &:hover {
       @media (hover: hover) {
@@ -2105,13 +2343,6 @@
       }
     }
   }
-  .hover\:text-indigo-900 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-indigo-900);
-      }
-    }
-  }
   .hover\:text-primary-600 {
     &:hover {
       @media (hover: hover) {
@@ -2133,13 +2364,6 @@
       }
     }
   }
-  .hover\:text-red-900 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-red-900);
-      }
-    }
-  }
   .hover\:text-white {
     &:hover {
       @media (hover: hover) {
@@ -2192,6 +2416,11 @@
       border-color: var(--color-indigo-500);
     }
   }
+  .focus\:p-8 {
+    &:focus {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
   .focus\:ring-2 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2230,11 +2459,86 @@
       outline-style: none;
     }
   }
+  .active\:bg-danger-100 {
+    &:active {
+      background-color: var(--color-danger-100);
+    }
+  }
+  .active\:bg-danger-500 {
+    &:active {
+      background-color: var(--color-danger-500);
+    }
+  }
+  .active\:bg-default-100 {
+    &:active {
+      background-color: var(--color-default-100);
+    }
+  }
+  .active\:bg-default-500 {
+    &:active {
+      background-color: var(--color-default-500);
+    }
+  }
+  .active\:bg-gray-100 {
+    &:active {
+      background-color: var(--color-gray-100);
+    }
+  }
+  .active\:bg-info-100 {
+    &:active {
+      background-color: var(--color-info-100);
+    }
+  }
+  .active\:bg-info-500 {
+    &:active {
+      background-color: var(--color-info-500);
+    }
+  }
+  .active\:bg-primary-100 {
+    &:active {
+      background-color: var(--color-primary-100);
+    }
+  }
+  .active\:bg-primary-500 {
+    &:active {
+      background-color: var(--color-primary-500);
+    }
+  }
   .active\:bg-red-800 {
     &:active {
       background-color: var(--color-red-800);
     }
   }
+  .active\:bg-secondary-100 {
+    &:active {
+      background-color: var(--color-secondary-100);
+    }
+  }
+  .active\:bg-secondary-500 {
+    &:active {
+      background-color: var(--color-secondary-500);
+    }
+  }
+  .active\:bg-success-100 {
+    &:active {
+      background-color: var(--color-success-100);
+    }
+  }
+  .active\:bg-success-500 {
+    &:active {
+      background-color: var(--color-success-500);
+    }
+  }
+  .active\:bg-warning-100 {
+    &:active {
+      background-color: var(--color-warning-100);
+    }
+  }
+  .active\:bg-warning-500 {
+    &:active {
+      background-color: var(--color-warning-500);
+    }
+  }
   .disabled\:cursor-not-allowed {
     &:disabled {
       cursor: not-allowed;
@@ -2383,6 +2687,11 @@
       gap: calc(var(--spacing) * 4);
     }
   }
+  .sm\:gap-8 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 8);
+    }
+  }
   .sm\:p-0 {
     @media (width >= 40rem) {
       padding: calc(var(--spacing) * 0);