avo 4.0.0.beta.44 → 4.0.0.beta.45

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8064e5a8cb35e019ad3441160ab0042c555245551448e325b6e3ef20c912064c
-  data.tar.gz: 25f326ee60b97ff335284db6014f8d4b8c688e4e531d3ac507be3625bfbcf87a
+  metadata.gz: 0025b604ab0ca5ff4bdf83b41204be7b6ca2eb6211269b45bb1827f059a731fc
+  data.tar.gz: 1f5ac00fe7cf8b1218c4d6ec6657820175e7fce008d027f449ade483126a9791
 SHA512:
-  metadata.gz: 03bebbb26c91ab42c36eaa1534cd2a2bec2bec51ec4a60f61ec37f9b6e337b293afe049a0d925b363c34d96e5674d536d35af0ed132a763e24def378e88dd505
-  data.tar.gz: 16c16b4ec4b80a2875bfb61b95bae1ae462b9849075aedc399f3010625127f4a634c9395ab756a90324c3a36a2ddde0ee19fd9902f98d19ae2c8d867b9a2bd1c
+  metadata.gz: 9e26e80cadbb04224a25ce1ae3321545426a334ac195cde6f0880143ef3d38377788e39189d2f77e180ea8c5152c7647874b112e4dd1c6b9931907e6628f82d0
+  data.tar.gz: 7d6e56e3c9ddae3a12767064d99166fe603391b2157f792ef79107943e068cd035e11241d32f1f0929a4bcc472e01a3b4513ad7d953391f406aecc33667f6dd3

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (4.0.0.beta.44)
+    avo (4.0.0.beta.45)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)

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

@@ -349,6 +349,7 @@
     --color-primary: var(--color-white);
     --color-secondary: var(--color-avo-neutral-100);
     --color-tertiary: var(--color-avo-neutral-200);
+    --color-quaternary: var(--color-avo-neutral-300);
     --color-content: var(--color-avo-neutral-950);
     --color-content-secondary: var(--color-avo-neutral-500);
     --color-scheme: var(--color-white);
@@ -361,6 +362,8 @@
     --color-navbar-background: var(--color-avo-neutral-900);
     --color-main-content-background: var(--color-primary);
     --color-main-content-border: var(--border-color);
+    --radius-card: var(--radius-xl);
+    --radius-card-wrapper: var(--radius-lg);
     --top-navbar-height: 3rem;
     --navbar-notch-color: var(--color-navbar-background);
     --border-color: var(--color-tertiary);
@@ -577,6 +580,9 @@
   .inset-auto {
     inset: auto;
   }
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
   .start {
     inset-inline-start: var(--spacing);
   }
@@ -757,6 +763,9 @@
   .my-auto {
     margin-block: auto;
   }
+  .-ms-1\.5 {
+    margin-inline-start: calc(var(--spacing) * -1.5);
+  }
   .ms-1 {
     margin-inline-start: calc(var(--spacing) * 1);
   }
@@ -1963,9 +1972,9 @@
   .rounded-es {
     border-end-start-radius: 0.25rem;
   }
-  .rounded-t {
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
+  .rounded-t-card-wrapper {
+    border-top-left-radius: var(--radius-card-wrapper);
+    border-top-right-radius: var(--radius-card-wrapper);
   }
   .rounded-l {
     border-top-left-radius: 0.25rem;
@@ -2523,6 +2532,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -4598,6 +4610,11 @@
       padding-inline: calc(var(--spacing) * 24);
     }
   }
+  .lg\:ms-0 {
+    @media (width >= 64rem) {
+      margin-inline-start: calc(var(--spacing) * 0);
+    }
+  }
   .lg\:flex {
     @media (width >= 64rem) {
       display: flex;
@@ -4951,6 +4968,7 @@ tag.tagify__tag {
     --color-primary: var(--color-avo-neutral-950);
     --color-secondary: var(--color-avo-neutral-800);
     --color-tertiary: var(--color-avo-neutral-700);
+    --color-quaternary: var(--color-avo-neutral-600);
     --color-content: var(--color-white);
     --color-content-secondary: var(--color-avo-neutral-300);
     --color-scheme: var(--color-black);
@@ -5881,31 +5899,26 @@ tag.tagify__tag {
   }
   [data-controller~="sidebar"] {
     --sidebar-width: calc(var(--spacing) * 64);
-    --sidebar-offset-size: 0rem;
-    --content-width: calc(100% - var(--spacing));
+    --sidebar-offset-size: 0;
+    --content-width: calc(100%);
   }
   @media (min-width: 64rem) {
     [data-controller~="sidebar"][data-sidebar-open-value="true"] {
       --sidebar-offset-size: var(--sidebar-width);
     }
   }
-  [data-controller~="sidebar"][data-sidebar-open-value="false"] {
-    .main-content {
-      margin-inline-start: calc(var(--spacing) * 0);
-    }
-  }
   .main {
     padding-top: var(--top-navbar-height);
-    padding-inline-start: calc(var(--sidebar-offset-size) - var(--spacing));
+    padding-inline-start: var(--sidebar-offset-size);
     transition: padding 0.1s ease-in-out;
   }
   .main-content {
-    --main-content-start-radius: 0px;
-    --main-content-end-radius: 0px;
+    --main-content-start-radius: 0;
+    --main-content-end-radius: 0;
+    --main-content-width: var(--content-width);
     position: relative;
-    margin-inline-start: calc(var(--spacing) * 1);
     display: flex;
-    width: var(--content-width);
+    width: var(--main-content-width);
     flex-direction: column;
     border-start-start-radius: var(--main-content-start-radius);
     border-start-end-radius: var(--main-content-end-radius);
@@ -5924,10 +5937,33 @@ tag.tagify__tag {
     transition: margin 0.1s ease-in-out, width 0.1s ease-in-out;
     min-height: calc(100dvh - var(--top-navbar-height) - var(--spacing));
     @container style(--navbar-notch-enabled: true) {
+      --main-content-start-radius: var(--main-content-radius);
       --main-content-end-radius: var(--main-content-radius);
     }
     @container style(--navbar-notch-enabled: true) and style(--top-navbar-start-notch-align-with-main-content: true) {
       --main-content-start-radius: var(--main-content-radius);
+      --main-content-end-radius: var(--main-content-radius);
+    }
+  }
+  @media (min-width: 64rem) {
+    .sidebar-open .avo-sidebar {
+      transform: translateX(0);
+    }
+    html[dir="rtl"] .sidebar-open .avo-sidebar {
+      transform: translateX(0);
+    }
+    @container style(--navbar-notch-enabled: true) and style(--top-navbar-start-notch-align-with-main-content: false) {
+      .sidebar-open .main-content {
+        --main-content-start-radius: 0;
+      }
+    }
+  }
+  @media (width < 64rem) {
+    .sidebar-mobile-open .avo-sidebar {
+      transform: translateX(0);
+    }
+    html[dir="rtl"] .sidebar-mobile-open .avo-sidebar {
+      transform: translateX(0);
     }
   }
   .main-content.focused, .main-content:focus-visible {
@@ -5938,7 +5974,10 @@ tag.tagify__tag {
     display: flex;
     flex: 1;
     flex-direction: column;
-    padding-inline: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 0);
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 2);
+    }
   }
   .container-large {
     @media (width >= 96rem) {
@@ -6149,25 +6188,6 @@ tag.tagify__tag {
   html[dir="rtl"] .avo-sidebar {
     transform: translateX(100%);
   }
-  @media (min-width: 64rem) {
-    .sidebar-open .avo-sidebar {
-      transform: translateX(0);
-    }
-    html[dir="rtl"] .sidebar-open .avo-sidebar {
-      transform: translateX(0);
-    }
-    .main:not(.sidebar-open) .main-content {
-      margin-inline-start: calc(var(--spacing) * 0);
-    }
-  }
-  @media (width < 64rem) {
-    .sidebar-mobile-open .avo-sidebar {
-      transform: translateX(0);
-    }
-    html[dir="rtl"] .sidebar-mobile-open .avo-sidebar {
-      transform: translateX(0);
-    }
-  }
   .button-spinner {
     width: 24px;
     height: 24px;
@@ -6961,7 +6981,7 @@ tag.tagify__tag {
     flex-direction: column;
     align-items: flex-start;
     align-self: stretch;
-    border-radius: var(--radius-xl);
+    border-radius: var(--radius-card);
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-tertiary);
@@ -7040,7 +7060,7 @@ tag.tagify__tag {
     flex-direction: column;
     align-items: flex-start;
     align-self: stretch;
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-card-wrapper);
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-tertiary);
@@ -7371,6 +7391,28 @@ tag.tagify__tag {
       border-color: var(--color-accent);
       margin-bottom: -1px;
     }
+    .tab-group {
+      position: relative;
+      border-radius: var(--radius-2xl);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      --tw-border-style: dashed;
+      border-style: dashed;
+      border-color: var(--color-tertiary);
+      &:hover {
+        border-color: var(--color-quaternary);
+      }
+      --tab-group-modifier: 4;
+      --tab-group-padding: calc(var(--tab-group-modifier) - (var(--tab-group-modifier)/2));
+      width: calc(100% + calc(var(--spacing) * var(--tab-group-modifier)));
+      margin-inline: calc(var(--spacing) * var(--tab-group-padding) * -1);
+      padding: calc(var(--spacing) * var(--tab-group-padding));
+    }
+    @media (width > 48rem) {
+      .tab-group {
+        --tab-group-modifier: 8;
+      }
+    }
   }
   .badge {
     display: inline-flex;
@@ -7938,7 +7980,6 @@ tag.tagify__tag {
   .dropdown-menu {
     display: flex;
     width: 100%;
-    min-width: calc(var(--spacing) * 48);
     flex-direction: column;
     border-radius: var(--radius-lg);
     border-style: var(--tw-border-style);
@@ -8397,9 +8438,10 @@ tag.tagify__tag {
       display: flex;
       cursor: pointer;
       align-items: center;
+      justify-content: center;
       border-radius: var(--radius-lg);
       color: var(--color-content-secondary);
-      padding-inline-end: var(--input-icon-offset);
+      padding-inline: var(--input-icon-offset);
       outline-offset: var(--focus-outline-offset-inset);
     }
     .field-wrapper__input:has(.input-field__password-toggle) input {
@@ -8951,11 +8993,12 @@ tag.tagify__tag {
   }
   .breadcrumbs {
     position: sticky;
+    top: var(--top-navbar-height);
     z-index: 40;
     margin-bottom: calc(var(--spacing) * 4);
     width: 100%;
     background-color: var(--color-main-content-background);
-    top: calc(var(--top-navbar-height));
+    margin-top: calc(var(--spacing) * -1);
   }
   .breadcrumbs::after {
     content: "";
@@ -9006,6 +9049,12 @@ tag.tagify__tag {
     &:first-child {
       margin-inline-start: calc(var(--spacing) * -1);
     }
+    &:first-child:has(.breadcrumb-element__icon) .breadcrumb-element__text {
+      display: none;
+      @media (width >= 48rem) {
+        display: inline;
+      }
+    }
     &:focus-visible {
       outline-offset: var(--focus-outline-offset-inset);
     }
@@ -10063,12 +10112,12 @@ tag.tagify__tag {
   }
   .color-scheme-switcher__compact-trigger {
     display: inline-flex;
-    height: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 6);
     align-items: center;
     gap: calc(var(--spacing) * 1);
     border-radius: var(--radius-lg);
-    padding-inline-start: calc(var(--spacing) * 2);
-    padding-inline-end: calc(var(--spacing) * 1.5);
+    padding-inline-start: calc(var(--spacing) * 1.5);
+    padding-inline-end: calc(var(--spacing) * 1);
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -10094,6 +10143,13 @@ tag.tagify__tag {
       color: var(--top-navbar-content-hover);
     }
   }
+  @media (min-width: 64rem) {
+    .color-scheme-switcher__compact-trigger {
+      height: calc(var(--spacing) * 8);
+      padding-inline-start: calc(var(--spacing) * 2);
+      padding-inline-end: calc(var(--spacing) * 1.5);
+    }
+  }
   .color-scheme-switcher__chevron {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -11162,8 +11218,9 @@ tag.tagify__tag {
     inset-inline-end: calc(var(--spacing) * 0);
     display: flex;
     align-items: center;
+    justify-content: center;
     border-radius: var(--radius-lg);
-    padding-inline-end: calc(var(--spacing) * 2.5);
+    padding-inline: calc(var(--spacing) * 2.5);
     color: var(--color-content-secondary);
     outline-offset: var(--focus-outline-offset-inset);
   }
@@ -11187,22 +11244,6 @@ tag.tagify__tag {
     text-align: start;
     white-space: normal;
   }
-  @layer components {
-    .tab-group {
-      position: relative;
-      border-radius: var(--radius-2xl);
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-      --tw-border-style: dashed;
-      border-style: dashed;
-      border-color: var(--color-tertiary);
-      --tab-group-modifier: 8;
-      --tab-group-padding: calc(var(--tab-group-modifier) - (var(--tab-group-modifier)/2));
-      width: calc(100% + calc(var(--spacing) * var(--tab-group-modifier)));
-      margin-inline: calc(var(--spacing) * var(--tab-group-padding) * -1);
-      padding: calc(var(--spacing) * var(--tab-group-padding));
-    }
-  }
   .css-animate-dialog-slide-down[open], .css-animate-slide-down {
     opacity: 1;
     transform: translateY(0);

data/app/assets/stylesheets/application.css

@@ -162,7 +162,6 @@
   @import "./css/components/hotkey.css";
   @import "./css/components/modal.css";
   @import "./css/components/filters.css";
-  @import "./css/components/tab_group.css";
   @import "./css/css-animations.css";
   @import "./css/sidebar.css";
 

data/app/assets/stylesheets/css/components/breadcrumbs.css

@@ -1,6 +1,7 @@
 .breadcrumbs {
-  @apply sticky z-40 w-full bg-(--color-main-content-background) mb-4;
-  top: calc(var(--top-navbar-height));
+  @apply sticky z-40 w-full bg-(--color-main-content-background) mb-4 top-(--top-navbar-height);
+  /* Vertical optical adjustment */
+  @apply  -mt-1;
 }
 
 /* Soft fade strip just below the sticky breadcrumbs. Eases the seam between
@@ -36,6 +37,14 @@
     @apply -ms-1;
   }
 
+  /* The home crumb is the first element and is the only one carrying an icon by
+     default. On small screens collapse it to just the icon to save horizontal
+     space; the label returns at md. Scoping to :has(icon) means a custom first
+     crumb without an icon keeps its text instead of rendering empty. */
+  &:first-child:has(.breadcrumb-element__icon) .breadcrumb-element__text {
+    @apply hidden md:inline;
+  }
+
   &:focus-visible {
     outline-offset: var(--focus-outline-offset-inset);
   }

data/app/assets/stylesheets/css/components/color_scheme_switcher.css

@@ -20,7 +20,7 @@
 }
 
 .color-scheme-switcher__compact-trigger {
-  @apply inline-flex items-center gap-1 h-8 ps-2 pe-1.5 rounded-lg transition-all duration-150;
+  @apply inline-flex items-center gap-1 h-6 ps-1.5 pe-1 rounded-lg transition-all duration-150;
   @apply text-avo-neutral-300 bg-avo-neutral-800 border border-avo-neutral-700 hover:bg-avo-neutral-700 hover:text-avo-neutral-50;
   @apply cursor-pointer;
   background-color: var(--top-navbar-control-background);
@@ -33,6 +33,12 @@
   }
 }
 
+@media (min-width: theme(--breakpoint-lg)) {
+  .color-scheme-switcher__compact-trigger {
+    @apply h-8 ps-2 pe-1.5;
+  }
+}
+
 .color-scheme-switcher__chevron {
   @apply size-3 opacity-60;
 }

data/app/assets/stylesheets/css/components/filters.css

@@ -51,7 +51,7 @@
 }
 
 .filters-date-input__action {
-  @apply absolute inset-y-0 end-0 flex items-center pe-2.5 text-content-secondary rounded-lg;
+  @apply absolute inset-y-0 end-0 flex items-center justify-center px-2.5 text-content-secondary rounded-lg;
 
   outline-offset: var(--focus-outline-offset-inset);
 }

data/app/assets/stylesheets/css/components/input.css

@@ -150,9 +150,9 @@
     ========================================================================== */
 
   .input-field__password-toggle {
-    @apply absolute text-content-secondary inset-y-0 end-0 flex items-center cursor-pointer rounded-lg;
+    @apply absolute text-content-secondary inset-y-0 end-0 flex items-center justify-center cursor-pointer rounded-lg;
 
-    padding-inline-end: var(--input-icon-offset);
+    padding-inline: var(--input-icon-offset);
     outline-offset: var(--focus-outline-offset-inset);
   }
 

data/app/assets/stylesheets/css/components/ui/card.css

@@ -1,6 +1,12 @@
+/* Card radii as shared design tokens. Consumed via Tailwind's `rounded-(--var)`
+   arbitrary-property syntax so the value can be reused and overridden anywhere
+   instead of being a one-off literal. */
+@theme {
+}
+
 /* Card Component - Based on Figma Design System */
 .card {
-  @apply flex flex-col items-start self-stretch rounded-xl border border-tertiary bg-secondary;
+  @apply flex flex-col items-start self-stretch rounded-card border border-tertiary bg-secondary;
 
   /* Contain horizontal overflow so a wide inner scroller (e.g. .card__wrapper
      wrapping a wide table) can't bleed past the card and push the document
@@ -79,7 +85,7 @@
 
 /* Card body */
 .card__body {
-  @apply flex flex-col items-start self-stretch w-full rounded-lg border border-tertiary bg-primary;
+  @apply flex flex-col items-start self-stretch w-full rounded-card-wrapper border border-tertiary bg-primary;
 }
 
 /* Card footer - full width so pagination can span edge to edge */

data/app/assets/stylesheets/css/components/ui/dropdown.css

@@ -19,7 +19,7 @@
 }
 
 .dropdown-menu {
-  @apply flex flex-col w-full rounded-lg border border-tertiary bg-primary min-w-48;
+  @apply flex flex-col w-full rounded-lg border border-tertiary bg-primary;
 }
 
 .dropdown-menu--scrollable {

data/app/assets/stylesheets/css/components/ui/tabs.css

@@ -155,4 +155,26 @@
     @apply border-b-2 border-accent;
     margin-bottom: -1px; /* Overlap with container border */
   }
+
+  /* Tab Group Component */
+  /* Dashed border wraps both the tabs list and the active tab's content.
+     The element extends 5px past each side of its container so the border
+     sits outside the panel padding without requiring the parent to know
+     about it. Uses width + negative margin-inline (RTL-safe) instead of
+     left/right. */
+  .tab-group {
+    @apply relative border border-dashed border-1 border-tertiary hover:border-quaternary rounded-2xl;
+    --tab-group-modifier: 4;
+    --tab-group-padding: calc(var(--tab-group-modifier) - (var(--tab-group-modifier)/2));
+
+    width: calc(100% + calc(var(--spacing) * var(--tab-group-modifier)));
+    margin-inline: calc(var(--spacing) * var(--tab-group-padding) * -1);
+    padding: calc(var(--spacing) * var(--tab-group-padding));
+  }
+
+  @media (width > theme(--breakpoint-md)) {
+    .tab-group {
+      --tab-group-modifier: 8;
+    }
+  }
 }

data/app/assets/stylesheets/css/layout.css

@@ -41,8 +41,9 @@
    mx-auto happens inside the area to the right of the sidebar, not the page. */
 [data-controller~="sidebar"] {
   --sidebar-width: --spacing(64);
-  --sidebar-offset-size: 0rem;
-  --content-width: calc(100% - var(--spacing));
+  --sidebar-offset-size: 0;
+
+  --content-width: calc(100%);
 }
 
 @media (min-width: theme(--breakpoint-lg)) {
@@ -51,35 +52,65 @@
   }
 }
 
-[data-controller~="sidebar"][data-sidebar-open-value="false"] {
-  .main-content {
-    @apply ms-0;
-  }
-}
-
 .main {
   padding-top: var(--top-navbar-height);
-  padding-inline-start: calc(var(--sidebar-offset-size) - var(--spacing));
+  padding-inline-start: var(--sidebar-offset-size);
   transition: padding 0.1s ease-in-out;
 }
 
 .main-content {
-  --main-content-start-radius: 0px;
-  --main-content-end-radius: 0px;
+  --main-content-start-radius: 0;
+  --main-content-end-radius: 0;
+  --main-content-width: var(--content-width);
 
-  @apply relative w-(--content-width) flex flex-col bg-(--color-main-content-background) py-2 lg:py-4 px-2 lg:px-4 border-s border-(--color-main-content-border) ms-1 rounded-se-(--main-content-end-radius) rounded-ss-(--main-content-start-radius);
+  @apply relative w-(--main-content-width) flex flex-col bg-(--color-main-content-background) py-2 lg:py-4 px-2 lg:px-4 border-s border-(--color-main-content-border) rounded-se-(--main-content-end-radius) rounded-ss-(--main-content-start-radius);
 
   transition: margin 0.1s ease-in-out, width 0.1s ease-in-out;
   min-height: calc(100dvh - var(--top-navbar-height) - var(--spacing));
 
   @container style(--navbar-notch-enabled: true) {
+    --main-content-start-radius: var(--main-content-radius);
     --main-content-end-radius: var(--main-content-radius);
   }
 
   @container style(--navbar-notch-enabled: true) and style(--top-navbar-start-notch-align-with-main-content: true) {
     --main-content-start-radius: var(--main-content-radius);
+    --main-content-end-radius: var(--main-content-radius);
+  }
+
+}
+
+/* Desktop: show sidebar when sidebar-open class is present (lg+ only) */
+@media (min-width: theme(--breakpoint-lg)) {
+  .sidebar-open .avo-sidebar {
+    transform: translateX(0);
+  }
+
+  html[dir="rtl"] .sidebar-open .avo-sidebar {
+    transform: translateX(0);
+  }
+
+  /* With the sidebar open the content panel butts up against it, so flatten the
+     start corner. When the sidebar is closed the panel floats free and keeps the
+     rounded start corner it inherits from the base block. The
+     align-with-main-content layout reads as one continuous strip, so it stays
+     rounded regardless of sidebar state (the `: false` style query excludes it). */
+  @container style(--navbar-notch-enabled: true) and style(--top-navbar-start-notch-align-with-main-content: false) {
+    .sidebar-open .main-content {
+      --main-content-start-radius: 0;
+    }
+  }
+}
+
+/* Mobile: show sidebar only when explicitly toggled open */
+@media (width < theme(--breakpoint-lg)) {
+  .sidebar-mobile-open .avo-sidebar {
+    transform: translateX(0);
   }
 
+  html[dir="rtl"] .sidebar-mobile-open .avo-sidebar {
+    transform: translateX(0);
+  }
 }
 
 .main-content.focused,
@@ -89,7 +120,7 @@
 }
 
 .main-content__container {
-  @apply flex flex-1 flex-col px-2;
+  @apply flex flex-1 flex-col px-0 md:px-2;
 }
 
 .container-large {
@@ -107,29 +138,6 @@
 .top-navbar {
   @apply z-400 fixed top-0 inset-x-0 w-full shrink-0 pointer-events-none;
 
-  /* Top navbar theme contract.
-     Override these variables on `.top-navbar` when the navbar needs its own
-     palette. They are defined here so the customization point stays local to
-     the navbar while popovers, dropdown panels, and the main content keep using
-     their own surface tokens.
-
-     Example:
-       .top-navbar {
-         --top-navbar-background: var(--color-primary);
-         --top-navbar-content: var(--color-content-secondary);
-         --top-navbar-content-hover: var(--color-content);
-         --top-navbar-control-background: var(--color-secondary);
-         --top-navbar-control-background-hover: var(--color-tertiary);
-         --top-navbar-control-border: var(--color-tertiary);
-         --top-navbar-control-content: var(--color-content);
-         --top-navbar-control-muted: var(--color-content-secondary);
-         --top-navbar-control-shortcut-background: var(--color-primary);
-         --top-navbar-control-shortcut-border: var(--color-tertiary);
-         --top-navbar-control-shortcut-content: var(--color-content-secondary);
-         --top-navbar-active-background: var(--color-foreground);
-         --top-navbar-active-content: var(--color-background);
-       }
-  */
   --top-navbar-background: var(--color-navbar-background);
   --top-navbar-content: var(--color-avo-neutral-300);
   --top-navbar-content-hover: var(--color-avo-neutral-50);
@@ -334,28 +342,3 @@ button[data-sidebar-toggle-icon] {
 html[dir="rtl"] .avo-sidebar {
   transform: translateX(100%);
 }
-
-/* Desktop: show sidebar when sidebar-open class is present (lg+ only) */
-@media (min-width: theme(--breakpoint-lg)) {
-  .sidebar-open .avo-sidebar {
-    transform: translateX(0);
-  }
-
-  html[dir="rtl"] .sidebar-open .avo-sidebar {
-    transform: translateX(0);
-  }
-  .main:not(.sidebar-open) .main-content {
-    @apply ms-0;
-  }
-}
-
-/* Mobile: show sidebar only when explicitly toggled open */
-@media (width < theme(--breakpoint-lg)) {
-  .sidebar-mobile-open .avo-sidebar {
-    transform: translateX(0);
-  }
-
-  html[dir="rtl"] .sidebar-mobile-open .avo-sidebar {
-    transform: translateX(0);
-  }
-}

data/app/assets/stylesheets/css/variables.css

@@ -61,6 +61,7 @@
   --color-primary: var(--color-white);
   --color-secondary: var(--color-avo-neutral-100);
   --color-tertiary: var(--color-avo-neutral-200);
+  --color-quaternary: var(--color-avo-neutral-300);
   --color-content: var(--color-avo-neutral-950);
   --color-content-secondary: var(--color-avo-neutral-500);
 
@@ -108,6 +109,8 @@
      --border-color by default, so it resolves per-scheme automatically. */
   --color-main-content-border: var(--border-color);
 
+  --radius-card: var(--radius-xl);
+  --radius-card-wrapper: var(--radius-lg);
 }
 
 /* Navbar notch knobs live in a plain :root block, not in @theme:
@@ -167,6 +170,7 @@
     --color-primary: var(--color-avo-neutral-950);
     --color-secondary: var(--color-avo-neutral-800);
     --color-tertiary: var(--color-avo-neutral-700);
+    --color-quaternary: var(--color-avo-neutral-600);
     --color-content: var(--color-white);
     --color-content-secondary: var(--color-avo-neutral-300);