avo 4.0.0.beta.6 → 4.0.0.beta.8

data/app/assets/builds/avo/application.css

@@ -16,7 +16,6 @@
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
-    --color-red-900: oklch(39.6% 0.141 25.723);
     --color-orange-50: oklch(98% 0.016 73.684);
     --color-orange-100: oklch(95.4% 0.038 75.164);
     --color-orange-300: oklch(83.7% 0.128 66.29);
@@ -24,6 +23,7 @@
     --color-orange-500: oklch(70.5% 0.213 47.604);
     --color-orange-600: oklch(64.6% 0.222 41.116);
     --color-orange-700: oklch(55.3% 0.195 38.402);
+    --color-orange-950: oklch(26.6% 0.079 36.259);
     --color-amber-50: oklch(98.7% 0.022 95.277);
     --color-amber-100: oklch(96.2% 0.059 95.617);
     --color-amber-300: oklch(87.9% 0.169 91.605);
@@ -242,6 +242,7 @@
     --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-4xl: 56rem;
+    --container-6xl: 72rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -270,6 +271,7 @@
     --tracking-wide: 0.025em;
     --tracking-widest: 0.1em;
     --leading-tight: 1.25;
+    --leading-snug: 1.375;
     --radius-xs: 0.125rem;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -317,14 +319,20 @@
     --color-avo-neutral-800: oklch(39.04% 0.0000 89.88);
     --color-avo-neutral-900: oklch(27.68% 0.0000 89.88);
     --color-avo-neutral-950: oklch(20.46% 0.0000 89.88);
+    --color-success: var(--color-green-500);
     --color-success-content: var(--color-green-600);
+    --color-success-foreground: var(--color-green-400);
+    --color-info: var(--color-blue-400);
     --color-info-content: var(--color-blue-600);
     --color-info-foreground: var(--color-blue-500);
     --color-warning: var(--color-yellow-500);
     --color-warning-content: var(--color-yellow-600);
+    --color-warning-foreground: var(--color-yellow-400);
     --color-danger: var(--color-red-500);
     --color-danger-content: var(--color-red-600);
+    --color-danger-foreground: var(--color-red-400);
     --box-shadow-card: 0px 8px 16px 0px rgba(0, 0, 0, 0.04);
+    --box-shadow-dropdown-card: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
     --box-shadow-grid-card: 0 -1.5px 0 1px var(--color-secondary) inset, 0 0.8px 0 1.3px var(--color-primary) inset;
     --box-shadow-error: 0 0 5px 1px var(--color-red-600), 0 0 0 1px var(--color-red-600), 0 0 0 3px var(--color-red-300);
@@ -565,6 +573,9 @@
   .end-0 {
     inset-inline-end: calc(var(--spacing) * 0);
   }
+  .end-2 {
+    inset-inline-end: calc(var(--spacing) * 2);
+  }
   .end-3 {
     inset-inline-end: calc(var(--spacing) * 3);
   }
@@ -586,6 +597,9 @@
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
   .top-3 {
     top: calc(var(--spacing) * 3);
   }
@@ -595,9 +609,6 @@
   .top-full {
     top: 100%;
   }
-  .right-0 {
-    right: calc(var(--spacing) * 0);
-  }
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
@@ -610,9 +621,6 @@
   .bottom-full {
     bottom: 100%;
   }
-  .left-0 {
-    left: calc(var(--spacing) * 0);
-  }
   .left-auto {
     left: auto;
   }
@@ -817,8 +825,8 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
-  .mr-0 {
-    margin-right: calc(var(--spacing) * 0);
+  .mt-auto {
+    margin-top: auto;
   }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
@@ -914,6 +922,10 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -966,9 +978,6 @@
   .h-\[0\.75rem\] {
     height: 0.75rem;
   }
-  .h-\[76vh\] {
-    height: 76vh;
-  }
   .h-full {
     height: 100%;
   }
@@ -1011,6 +1020,9 @@
   .min-h-56 {
     min-height: calc(var(--spacing) * 56);
   }
+  .min-h-64 {
+    min-height: calc(var(--spacing) * 64);
+  }
   .min-h-\[8rem\] {
     min-height: 8rem;
   }
@@ -1143,6 +1155,9 @@
   .max-w-4xl {
     max-width: var(--container-4xl);
   }
+  .max-w-6xl {
+    max-width: var(--container-6xl);
+  }
   .max-w-24 {
     max-width: calc(var(--spacing) * 24);
   }
@@ -1152,8 +1167,8 @@
   .max-w-full {
     max-width: 100%;
   }
-  .max-w-lg {
-    max-width: var(--container-lg);
+  .max-w-md {
+    max-width: var(--container-md);
   }
   .max-w-screen-xl {
     max-width: var(--breakpoint-xl);
@@ -1197,6 +1212,9 @@
   .flex-2 {
     flex: 2;
   }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1217,10 +1235,21 @@
   .origin-top-left {
     transform-origin: 0 0;
   }
+  .origin-top-right {
+    transform-origin: 100% 0;
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-0 {
+    --tw-translate-x: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-10 {
+    --tw-translate-x: calc(var(--spacing) * 10);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1303,6 +1332,9 @@
   .grid-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
+  .grid-cols-\[repeat\(auto-fit\,minmax\(min\(100\%\,247px\)\,1fr\)\)\] {
+    grid-template-columns: repeat(auto-fit,minmax(min(100%, 247px),1fr));
+  }
   .grid-rows-1 {
     grid-template-rows: repeat(1, minmax(0, 1fr));
   }
@@ -1386,6 +1418,13 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1444,6 +1483,9 @@
       margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .gap-y-1 {
+    row-gap: calc(var(--spacing) * 1);
+  }
   .gap-y-4 {
     row-gap: calc(var(--spacing) * 4);
   }
@@ -1595,6 +1637,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -1695,9 +1741,6 @@
   .border-green-500 {
     border-color: var(--color-green-500);
   }
-  .border-green-600 {
-    border-color: var(--color-green-600);
-  }
   .border-indigo-300 {
     border-color: var(--color-indigo-300);
   }
@@ -1710,9 +1753,6 @@
   .border-lime-500 {
     border-color: var(--color-lime-500);
   }
-  .border-neutral-200 {
-    border-color: var(--color-neutral-200);
-  }
   .border-neutral-300 {
     border-color: var(--color-neutral-300);
   }
@@ -1725,8 +1765,11 @@
   .border-orange-500 {
     border-color: var(--color-orange-500);
   }
-  .border-orange-600 {
-    border-color: var(--color-orange-600);
+  .border-orange-600\/40 {
+    border-color: color-mix(in srgb, oklch(64.6% 0.222 41.116) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-orange-600) 40%, transparent);
+    }
   }
   .border-pink-300 {
     border-color: var(--color-pink-300);
@@ -1947,21 +1990,21 @@
   .bg-neutral-50 {
     background-color: var(--color-neutral-50);
   }
-  .bg-neutral-100 {
-    background-color: var(--color-neutral-100);
-  }
   .bg-neutral-500 {
     background-color: var(--color-neutral-500);
   }
   .bg-orange-50 {
     background-color: var(--color-orange-50);
   }
-  .bg-orange-400 {
-    background-color: var(--color-orange-400);
-  }
   .bg-orange-500 {
     background-color: var(--color-orange-500);
   }
+  .bg-orange-500\/10 {
+    background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
+    }
+  }
   .bg-orange-700 {
     background-color: var(--color-orange-700);
   }
@@ -2109,9 +2152,6 @@
   .object-cover {
     object-fit: cover;
   }
-  .p-0\.5 {
-    padding: calc(var(--spacing) * 0.5);
-  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -2196,6 +2236,9 @@
   .pt-0\.5 {
     padding-top: calc(var(--spacing) * 0.5);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -2285,6 +2328,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[0\.85em\] {
+    font-size: 0.85em;
+  }
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -2304,6 +2350,10 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
   .leading-tight {
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
@@ -2457,9 +2507,15 @@
   .text-orange-500 {
     color: var(--color-orange-500);
   }
+  .text-orange-600 {
+    color: var(--color-orange-600);
+  }
   .text-orange-700 {
     color: var(--color-orange-700);
   }
+  .text-orange-950 {
+    color: var(--color-orange-950);
+  }
   .text-pink-500 {
     color: var(--color-pink-500);
   }
@@ -2660,10 +2716,22 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .ease-in {
+    --tw-ease: var(--ease-in);
+    transition-timing-function: var(--ease-in);
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -3264,29 +3332,19 @@
       background-color: var(--color-zinc-600);
     }
   }
-  .hover\:text-blue-500 {
-    &:hover {
-      color: var(--color-blue-500);
-    }
-  }
   .hover\:text-content {
     &:hover {
       color: var(--color-content);
     }
   }
-  .hover\:text-gray-600 {
+  .hover\:text-danger-content {
     &:hover {
-      color: var(--color-gray-600);
+      color: var(--color-danger-content);
     }
   }
-  .hover\:text-gray-900 {
-    &:hover {
-      color: var(--color-gray-900);
-    }
-  }
-  .hover\:text-red-900 {
+  .hover\:text-gray-600 {
     &:hover {
-      color: var(--color-red-900);
+      color: var(--color-gray-600);
     }
   }
   .hover\:text-slate-900 {
@@ -3294,11 +3352,6 @@
       color: var(--color-slate-900);
     }
   }
-  .hover\:underline {
-    &:hover {
-      text-decoration-line: underline;
-    }
-  }
   .hover\:opacity-100 {
     &:hover {
       opacity: 100%;
@@ -3383,6 +3436,11 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .active\:cursor-grabbing {
+    &:active {
+      cursor: grabbing;
+    }
+  }
   .active\:border-amber-500 {
     &:active {
       border-color: var(--color-amber-500);
@@ -4436,11 +4494,45 @@
       }
     }
   }
+  .dark\:border-orange-500\/30 {
+    &:where(.dark, .dark *) {
+      border-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-orange-500) 30%, transparent);
+      }
+    }
+  }
+  .dark\:bg-orange-500\/15 {
+    &:where(.dark, .dark *) {
+      background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 15%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-orange-500) 15%, transparent);
+      }
+    }
+  }
+  .dark\:bg-orange-950\/30 {
+    &:where(.dark, .dark *) {
+      background-color: color-mix(in srgb, oklch(26.6% 0.079 36.259) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-orange-950) 30%, transparent);
+      }
+    }
+  }
   .dark\:bg-tertiary {
     &:where(.dark, .dark *) {
       background-color: var(--color-tertiary);
     }
   }
+  .dark\:text-orange-50 {
+    &:where(.dark, .dark *) {
+      color: var(--color-orange-50);
+    }
+  }
+  .dark\:text-orange-300 {
+    &:where(.dark, .dark *) {
+      color: var(--color-orange-300);
+    }
+  }
   .print\:hidden {
     @media print {
       display: none;
@@ -7684,6 +7776,9 @@
     transform: scale(0.75) translateY(2px);
     box-shadow: none;
   }
+  .hotkeys-hide-badges .hotkey-badge kbd {
+    display: none;
+  }
   @layer base {
     a {
       color: var(--color-info-content);
@@ -8414,7 +8509,7 @@
       border-radius: var(--radius-2xl);
       background-color: var(--color-primary);
       padding: calc(var(--spacing) * 4);
-      --tw-shadow: 0 8px 16px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.08));
+      --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.08));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       transition: margin 0.1s ease-in-out, width 0.1s ease-in-out;
       height: calc(100dvh - var(--spacing) - var(--top-navbar-height));
@@ -8425,6 +8520,7 @@
         flex-direction: column;
         overflow-y: auto;
         padding-inline: calc(var(--spacing) * 2);
+        padding-top: calc(var(--spacing) * 1);
       }
       .avo-container {
         display: flex;
@@ -10598,6 +10694,7 @@
     display: flex;
     width: 100%;
     flex: 1;
+    flex-direction: column;
     flex-wrap: wrap;
     :where(& > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
@@ -11321,15 +11418,32 @@
       background-color: transparent !important;
       color: var(--color-content-secondary);
     }
+    &.menu__item--action {
+      gap: calc(var(--spacing) * 1.5);
+      color: var(--color-content-secondary);
+      &.dropdown-menu__item--disabled {
+        opacity: 60%;
+      }
+    }
+    &:hover {
+      background-color: var(--color-secondary);
+      color: var(--color-content);
+    }
   }
-  .dropdown-menu__item--active, .dropdown-menu__item:hover, .dropdown-menu__list > :is(a, button):hover {
+  .dropdown-menu__list > :is(a, button):hover {
     background-color: var(--color-secondary);
   }
+  .dropdown-menu__item--active {
+    background: color-mix(in srgb, oklch(97.31% 0.0000 89.88), oklch(20.46% 0.0000 89.88) 5%);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in oklab, var(--color-secondary), var(--color-content) 5%);
+    }
+  }
   .dropdown-menu__item:focus-visible, .dropdown-menu__list > :is(a, button):focus-visible {
     background-color: var(--color-primary);
     --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);
-    --tw-ring-color: var(--color-content);
+    --tw-ring-color: var(--color-info-foreground);
     --tw-outline-style: none;
     outline-style: none;
     --tw-ring-inset: inset;
@@ -11338,7 +11452,34 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
     flex-shrink: 0;
-    color: var(--color-content);
+    color: inherit;
+    &.menu__item__icon--action {
+      box-sizing: content-box;
+      border-radius: var(--radius-sm);
+      background-color: var(--color-secondary);
+      padding: calc(var(--spacing) * 0.5);
+      .dropdown-menu__item--active &, .dropdown-menu__item:hover & {
+        background-color: inherit;
+      }
+    }
+  }
+  .dropdown-card {
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-tertiary);
+    background-color: var(--color-secondary);
+    padding: calc(var(--spacing) * 0.5);
+    box-shadow: var(--box-shadow-dropdown-card);
+  }
+  .dropdown-card__body {
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-tertiary);
+    background-color: var(--color-primary);
   }
   @layer base {
     input[type="radio"] {
@@ -11891,6 +12032,120 @@
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);
   }
+  .alert {
+    pointer-events: auto;
+    position: relative;
+    display: grid;
+    width: 100%;
+    max-width: var(--container-md);
+    min-width: calc(var(--spacing) * 0);
+    --tw-translate-x: calc(var(--spacing) * 10);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+    align-items: flex-start;
+    gap: calc(var(--spacing) * 1);
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    padding: calc(var(--spacing) * 3);
+    opacity: 0%;
+    grid-template-columns: auto 1fr auto;
+    background: var(--alert-background);
+    border-color: var(--alert-border);
+    will-change: opacity, transform;
+    --alert-color: var(--color-foreground);
+    --alert-title-color: oklch(20.46% 0.0000 89.88);
+    @supports (color: color-mix(in lab, red, red)) {
+      --alert-title-color: color-mix(in oklab, var(--color-content) 20%, var(--alert-color));
+    }
+    --alert-message-color: oklch(20.46% 0.0000 89.88);
+    @supports (color: color-mix(in lab, red, red)) {
+      --alert-message-color: color-mix(in oklab, var(--color-content) 10%, var(--alert-color));
+    }
+    --alert-background: var(--color-background);
+    --alert-border: var(--color-tertiary);
+  }
+  .alert__icon-container {
+    display: flex;
+    flex-shrink: 0;
+    align-items: flex-start;
+    justify-content: center;
+    padding: calc(var(--spacing) * 1);
+    color: var(--alert-title-color);
+  }
+  .alert__icon-container--status {
+    grid-column-start: 1;
+    align-self: stretch;
+  }
+  .alert__icon {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+  .alert__body {
+    grid-column-start: 2;
+    display: flex;
+    min-width: calc(var(--spacing) * 0);
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: calc(var(--spacing) * 0.5);
+    align-self: stretch;
+  }
+  .alert__title {
+    width: 100%;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--alert-title-color);
+  }
+  .alert__message {
+    width: 100%;
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+    color: var(--alert-message-color);
+  }
+  .alert__icon-container--close {
+    grid-column-start: 3;
+    align-self: flex-start;
+  }
+  .alert--success {
+    --alert-color: var(--color-success-content);
+    --alert-background: color-mix(in srgb, oklch(72.3% 0.219 149.579) 15%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      --alert-background: color-mix(in oklab, var(--color-success) 15%, var(--color-primary));
+    }
+    --alert-border: var(--color-success-foreground);
+  }
+  .alert--info {
+    --alert-color: var(--color-info-content);
+    --alert-background: color-mix(in srgb, oklch(70.7% 0.165 254.624) 15%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      --alert-background: color-mix(in oklab, var(--color-info) 15%, var(--color-primary));
+    }
+    --alert-border: var(--color-info-foreground);
+  }
+  .alert--warning {
+    --alert-color: var(--color-warning-content);
+    --alert-background: color-mix(in srgb, oklch(79.5% 0.184 86.047) 15%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      --alert-background: color-mix(in oklab, var(--color-warning) 15%, var(--color-primary));
+    }
+    --alert-border: var(--color-warning-foreground);
+  }
+  .alert--danger {
+    --alert-color: var(--color-danger-content);
+    --alert-background: color-mix(in srgb, oklch(63.7% 0.237 25.331) 15%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      --alert-background: color-mix(in oklab, var(--color-danger) 15%, var(--color-primary));
+    }
+    --alert-border: var(--color-danger-foreground);
+  }
   .breadcrumbs {
     width: 100%;
   }
@@ -11956,6 +12211,16 @@
     }
   }
   @layer base {
+    .button-icon {
+      display: inline-flex;
+      cursor: pointer;
+      &:focus-visible {
+        border-radius: var(--radius-lg);
+        --tw-outline-style: none;
+        outline-style: none;
+        box-shadow: var(--box-shadow-focus);
+      }
+    }
     .button {
       display: inline-flex;
       flex-grow: 0;
@@ -11999,7 +12264,7 @@
         border-radius: var(--radius-lg);
         --tw-outline-style: none;
         outline-style: none;
-        box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 3px var(--color-info-foreground);
+        box-shadow: var(--box-shadow-focus);
       }
       --btn-color-accent: var(--color-avo-neutral-50);
       --btn-color-accent-content: var(--color-avo-neutral-100);