avo 4.0.0.beta.30 → 4.0.0.beta.31

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 69ced6b7c6199125c5bd557c6aedfee3da17629fbd9a6c6dff9335e0ea8ed0ed
-  data.tar.gz: 9dd002010cc8c6913de34701227d18c22cb826714df00bdffe7abf5b11a430ec
+  metadata.gz: 9948a294c05c3f14ab75cce94a3a7cc2d37dede8c4b08523e54118fcfaa766be
+  data.tar.gz: 204b8a64980bfc9da4017402ac8575fde5c55c0423d91010f356749238b1c04e
 SHA512:
-  metadata.gz: dc3f5e45352156b69528559251c8595898bf9a770daefb9b994af2d62ac4f456346749ce5c0120995973c999ec12a9106d50098d6d518472b989ce9d11f49c94
-  data.tar.gz: 87efd6756a067fd5d033eada4fb90b114aac1a70c42481a66f7d0424d5bd0a461250b044dbfb2fcbd5b0ec04f9ebeac41de5375af44534be76c3993bb5df121f
+  metadata.gz: 2e0ad4f8b2de2aab41a58d5587d51b304d31287388e7af9262782584af0a849bcce85e28e3cb611319ed044664c4d995a81b3941554fe578f35143ef0236f697
+  data.tar.gz: afc83d8664bdbd1352dd62b3adf55d794d9f2f2e48370e93382fdc38b4baac915813193e105105a07b04b7c88c3569fbd291ae790908f0480c31f1f91680b269

data/Gemfile.lock

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

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

@@ -312,6 +312,7 @@
     --color-avo-neutral-300: oklch(75.72% 0 89.88);
     --color-avo-neutral-400: oklch(62.68% 0 89.88);
     --color-avo-neutral-500: oklch(53.48% 0 89.88);
+    --color-avo-neutral-600: oklch(47.84% 0 89.88);
     --color-avo-neutral-700: oklch(42.76% 0 89.88);
     --color-avo-neutral-800: oklch(39.04% 0 89.88);
     --color-avo-neutral-900: oklch(27.68% 0 89.88);
@@ -353,6 +354,11 @@
     --color-accent-foreground: var(--color-white);
     --color-brand-neutral-400: oklch(62.68% 0 89.88);
     --color-brand-accent: oklch(39.04% 0 89.88);
+    --top-navbar-height: 3.5rem;
+    --navbar-bg: var(--color-avo-neutral-900);
+    --navbar-notch-radius: 1rem;
+    --navbar-notch-color: var(--navbar-bg);
+    --border-color: var(--color-tertiary);
     --color-table-row-selected: color-mix(in srgb, #fff, oklch(20.46% 0 89.88) 12%);
     @supports (color: color-mix(in lab, red, red)) {
       --color-table-row-selected: color-mix(in oklab, var(--color-primary), var(--color-content) 12%);
@@ -722,9 +728,6 @@
       max-width: 96rem;
     }
   }
-  .m-0 {
-    margin: calc(var(--spacing) * 0);
-  }
   .m-2 {
     margin: calc(var(--spacing) * 2);
   }
@@ -966,9 +969,6 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
-  .h-16 {
-    height: calc(var(--spacing) * 16);
-  }
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
@@ -2215,6 +2215,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-8 {
+    padding-top: calc(var(--spacing) * 8);
+  }
   .pb-0\.5 {
     padding-bottom: calc(var(--spacing) * 0.5);
   }
@@ -2622,6 +2625,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -4205,15 +4212,6 @@
       justify-content: flex-start;
     }
   }
-  .sm\:space-x-8 {
-    @media (width >= 40rem) {
-      :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)));
-      }
-    }
-  }
   .sm\:p-6 {
     @media (width >= 40rem) {
       padding: calc(var(--spacing) * 6);
@@ -4245,11 +4243,6 @@
       padding-inline: calc(var(--spacing) * 24);
     }
   }
-  .lg\:\!inline-flex {
-    @media (width >= 64rem) {
-      display: inline-flex !important;
-    }
-  }
   .lg\:flex {
     @media (width >= 64rem) {
       display: flex;
@@ -4265,21 +4258,6 @@
       display: inline-flex;
     }
   }
-  .lg\:w-64 {
-    @media (width >= 64rem) {
-      width: calc(var(--spacing) * 64);
-    }
-  }
-  .lg\:justify-start {
-    @media (width >= 64rem) {
-      justify-content: flex-start;
-    }
-  }
-  .lg\:px-1 {
-    @media (width >= 64rem) {
-      padding-inline: calc(var(--spacing) * 1);
-    }
-  }
   .lg\:px-8 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--spacing) * 8);
@@ -5515,6 +5493,10 @@
   input[type=file][data-direct-upload-url][disabled] {
     display: none;
   }
+  html, body, .main-content, .scrollable-wrapper {
+    scroll-padding-top: calc(var(--top-navbar-height) + var(--spacing) * 2);
+    scroll-padding-bottom: calc(var(--spacing) * 2);
+  }
   body.os-pc .mac-styled-scrollbar::-webkit-scrollbar {
     background-color: none;
     width: 0.5rem;
@@ -5536,8 +5518,10 @@
   body.os-pc .mac-styled-scrollbar:hover::-webkit-scrollbar-thumb {
     display: block;
   }
-  :root {
-    --top-navbar-height: 4rem;
+  @layer theme {
+    .dark {
+      --border-color: var(--color-background);
+    }
   }
   .skip-to-content {
     position: absolute;
@@ -5574,63 +5558,51 @@
   .top-navbar {
     height: var(--top-navbar-height);
   }
-  .main {
+  [data-controller~="sidebar"] {
     --sidebar-width: calc(var(--spacing) * 64);
     --sidebar-offset-size: 0rem;
-    --content-width: calc(100% - var(--sidebar-offset-size) - var(--spacing) * 2);
-    @media (min-width: 64rem) {
-      &.sidebar-open {
-        --sidebar-offset-size: var(--sidebar-width);
-      }
+    --content-width: calc(100% - var(--spacing));
+  }
+  @media (min-width: 64rem) {
+    [data-controller~="sidebar"][data-sidebar-open-value="true"] {
+      --sidebar-offset-size: var(--sidebar-width);
     }
-    margin-top: var(--top-navbar-height);
-    .main-content-area {
-      position: fixed;
-      z-index: 50;
-      margin-inline-start: calc(var(--spacing) * 1);
-      display: flex;
-      height: 100%;
-      width: var(--content-width);
-      flex: 1;
-      flex-direction: column;
-      border-radius: var(--radius-2xl);
-      background-color: var(--color-primary);
-      padding-inline: calc(var(--spacing) * 2);
-      padding-block: calc(var(--spacing) * 2);
-      --tw-shadow: 0 8px 16px 0 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);
-      @media (width >= 64rem) {
-        padding-inline: calc(var(--spacing) * 4);
-      }
-      @media (width >= 64rem) {
-        padding-block: calc(var(--spacing) * 4);
-      }
-      transition: margin 0.1s ease-in-out, width 0.1s ease-in-out;
-      height: calc(100dvh - var(--spacing) - var(--top-navbar-height));
-      .scrollable-wrapper {
-        display: flex;
-        height: 100%;
-        flex: 1;
-        flex-direction: column;
-        overflow-y: auto;
-        padding-inline: calc(var(--spacing) * 0.5);
-        padding-top: calc(var(--spacing) * 1);
-      }
-      .avo-container {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        justify-content: space-between;
-      }
+  }
+  [data-controller~="sidebar"][data-sidebar-open-value="false"] {
+    .main-content {
+      margin-inline-start: calc(var(--spacing) * 0);
     }
-    &.sidebar-open {
-      .main-content-area {
-        @media (min-width: 64rem) {
-          margin-inline-start: calc(var(--sidebar-width) + var(--spacing));
-          width: var(--content-width);
-        }
-      }
+  }
+  .main {
+    padding-top: var(--top-navbar-height);
+    padding-inline-start: calc(var(--sidebar-offset-size) - var(--spacing));
+    transition: padding 0.1s ease-in-out;
+  }
+  .main-content {
+    margin-inline-start: calc(var(--spacing) * 1);
+    display: flex;
+    width: var(--content-width);
+    flex-direction: column;
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 1px;
+    border-color: var(--border-color);
+    background-color: var(--color-primary);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 2);
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 4);
     }
+    @media (width >= 64rem) {
+      padding-block: calc(var(--spacing) * 4);
+    }
+    transition: margin 0.1s ease-in-out, width 0.1s ease-in-out;
+    min-height: calc(100dvh - var(--top-navbar-height) - var(--spacing));
+  }
+  .main-content__container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding-inline: calc(var(--spacing) * 2);
   }
   .container-large {
     @media (width >= 96rem) {
@@ -5673,33 +5645,90 @@
     width: 100%;
   }
   .top-navbar {
+    pointer-events: none;
     position: fixed;
+    inset-inline: calc(var(--spacing) * 0);
+    top: calc(var(--spacing) * 0);
     z-index: 100;
-    display: flex;
     width: 100%;
     flex-shrink: 0;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
     align-items: center;
-    :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)));
+    gap: 1rem;
+    padding-inline: 0.75rem;
+    background-color: var(--navbar-bg);
+    > * {
+      pointer-events: auto;
     }
-    padding-inline: calc(var(--spacing) * 4);
-    @media (width >= 64rem) {
-      :where(& > :not(:last-child)) {
-        --tw-space-x-reverse: 0;
-        margin-inline-start: calc(calc(var(--spacing) * 0) * var(--tw-space-x-reverse));
-        margin-inline-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-x-reverse)));
-      }
+    .breadcrumbs__container {
+      flex-wrap: nowrap;
+      overflow-x: auto;
     }
-    @media (width >= 64rem) {
-      padding-inline: calc(var(--spacing) * 2);
+    &::before, &::after {
+      content: "";
+      position: absolute;
+      top: 100%;
+      width: var(--navbar-notch-radius);
+      height: var(--navbar-notch-radius);
+      pointer-events: none;
     }
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      :where(& > :not(:last-child)) {
-        --tw-space-x-reverse: 1;
+    &::before {
+      left: 0;
+      background: radial-gradient( circle var(--navbar-notch-radius) at 100% 100%, transparent 99%, var(--navbar-notch-color) 100% );
+    }
+    &::after {
+      right: 0;
+      background: radial-gradient( circle var(--navbar-notch-radius) at 0% 100%, transparent 99%, var(--navbar-notch-color) 100% );
+    }
+  }
+  .top-navbar__start {
+    display: flex;
+    height: 100%;
+    min-width: calc(var(--spacing) * 0);
+    align-items: center;
+    gap: calc(var(--spacing) * 3);
+  }
+  .top-navbar__logo {
+    flex-shrink: 0;
+    height: calc(var(--top-navbar-height) - calc(var(--spacing) * 6));
+  }
+  .top-navbar__center {
+    display: flex;
+    min-width: calc(var(--spacing) * 0);
+    align-items: center;
+    justify-content: center;
+    .search-input__input {
+      background-color: var(--color-avo-neutral-800);
+      border-color: var(--color-avo-neutral-700);
+      color: var(--color-avo-neutral-50);
+      &::placeholder {
+        color: var(--color-avo-neutral-400);
       }
     }
+    .search-input__prefix, .search-input__suffix {
+      color: var(--color-avo-neutral-400);
+    }
+    .search-input__suffix kbd {
+      background-color: var(--color-avo-neutral-700);
+      border-color: var(--color-avo-neutral-600);
+      color: var(--color-avo-neutral-200);
+      box-shadow: none;
+    }
+  }
+  .top-navbar__end {
+    display: flex;
+    height: 100%;
+    min-width: calc(var(--spacing) * 0);
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(var(--spacing) * 4);
+  }
+  .top-navbar a {
+    color: var(--color-avo-neutral-300);
+    &:hover {
+      color: var(--color-avo-neutral-50);
+    }
   }
   .sidebar-toggle-icon {
     display: inline-flex;
@@ -5713,12 +5742,17 @@
   button[data-sidebar-state="closed"] .sidebar-toggle-icon--closed {
     display: inline-flex;
   }
+  button[data-sidebar-toggle-icon] {
+    --btn-text-color: var(--color-avo-neutral-300);
+    &:hover {
+      --btn-text-color: var(--color-avo-neutral-50);
+      background-color: var(--color-avo-neutral-800);
+    }
+  }
   .avo-sidebar {
     position: fixed;
-    top: calc(var(--spacing) * 0);
-    z-index: 60;
-    margin-top: var(--top-navbar-height);
-    height: calc(100dvh - var(--top-navbar-height));
+    inset-inline-start: calc(var(--spacing) * 0);
+    z-index: 50;
     width: var(--sidebar-width);
     flex: 1;
     border-inline-end-style: var(--tw-border-style);
@@ -5732,8 +5766,13 @@
     @media (width >= 64rem) {
       background-color: transparent;
     }
+    &:where(.dark, .dark *) {
+      background-color: var(--color-primary);
+    }
+    top: var(--top-navbar-height);
+    height: calc(100dvh - var(--top-navbar-height));
     transform: translateX(-100%);
-    transition: transform 0.1s ease;
+    transition: transform 0.1s ease-in-out;
   }
   html[dir="rtl"] .avo-sidebar {
     transform: translateX(100%);
@@ -5968,7 +6007,7 @@
     border-width: 1px;
     border-color: var(--color-tertiary);
   }
-  .main-content-area:has(.CodeMirror-fullscreen) {
+  .main-content:has(.CodeMirror-fullscreen) {
     z-index: 101;
   }
   .editor-toolbar {
@@ -8380,7 +8419,40 @@
     color: var(--alert-color);
   }
   .breadcrumbs {
+    position: sticky;
+    z-index: 40;
+    margin-bottom: calc(var(--spacing) * 4);
     width: 100%;
+    background-color: var(--color-primary);
+    top: calc(var(--top-navbar-height) + var(--spacing) * 2);
+    margin-top: calc(var(--spacing) * -2 + 1px);
+    &::before {
+      content: "";
+      position: absolute;
+      width: 100%;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: calc(0.5rem);
+      transform: translateY(-100%);
+      background: var(--color-primary);
+      pointer-events: none;
+    }
+  }
+  .breadcrumbs::after {
+    content: "";
+    position: absolute;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(100%);
+    height: calc(var(--spacing) * 4);
+    background: linear-gradient( to bottom, var(--color-primary), color-mix(in srgb, #fff, transparent 100%) );
+    @supports (color: color-mix(in lab, red, red)) {
+      background: linear-gradient( to bottom, var(--color-primary), color-mix(in oklab, var(--color-primary), transparent 100%) );
+    }
+    pointer-events: none;
   }
   .breadcrumbs__container {
     display: flex;
@@ -8402,7 +8474,7 @@
     align-items: center;
     gap: calc(var(--spacing) * 2);
     border-radius: var(--radius-lg);
-    padding-inline: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 1);
     padding-block: calc(var(--spacing) * 0.5);
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -8412,7 +8484,7 @@
     font-weight: var(--font-weight-medium);
     color: var(--color-content-secondary);
     &:first-child {
-      padding-inline-start: calc(var(--spacing) * 0);
+      margin-inline-start: calc(var(--spacing) * -1);
     }
   }
   .breadcrumb-element__icon {
@@ -8443,7 +8515,10 @@
       color: var(--color-content-secondary);
     }
     &:hover {
-      background-color: var(--color-secondary);
+      background-color: var(--color-tertiary);
+      .breadcrumb-element__text {
+        color: var(--color-content);
+      }
     }
   }
   @layer base {
@@ -9352,8 +9427,8 @@
     border-radius: var(--radius-lg);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-tertiary);
-    background-color: var(--color-secondary);
+    border-color: var(--color-avo-neutral-700);
+    background-color: var(--color-avo-neutral-800);
     padding: calc(var(--spacing) * 1);
   }
   .color-scheme-switcher--compact {
@@ -9374,11 +9449,14 @@
     transition-duration: 150ms;
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-tertiary);
-    background-color: var(--color-secondary);
-    color: var(--color-content-secondary);
+    border-color: var(--color-avo-neutral-700);
+    background-color: var(--color-avo-neutral-800);
+    color: var(--color-avo-neutral-300);
     &:hover {
-      background-color: var(--color-tertiary);
+      background-color: var(--color-avo-neutral-700);
+    }
+    &:hover {
+      color: var(--color-avo-neutral-50);
     }
     &:focus {
       --tw-outline-style: none;
@@ -9535,14 +9613,17 @@
     justify-content: center;
     border-radius: var(--radius-md);
     padding: calc(var(--spacing) * 1.5);
-    color: var(--color-content-secondary);
+    color: var(--color-avo-neutral-300);
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 150ms;
     transition-duration: 150ms;
     &:hover {
-      background-color: var(--color-tertiary);
+      background-color: var(--color-avo-neutral-700);
+    }
+    &:hover {
+      color: var(--color-avo-neutral-50);
     }
     &:focus {
       --tw-outline-style: none;
@@ -9570,39 +9651,15 @@
     border-width: 0px;
     background-color: transparent;
   }
-  .color-scheme-switcher__button[data-scheme="light"] {
+  .color-scheme-switcher__button[data-scheme="light"], .color-scheme-switcher__button[data-scheme="dark"], .color-scheme-switcher__button[data-scheme="auto"] {
     background-color: transparent;
-    color: var(--color-content-secondary);
+    color: var(--color-avo-neutral-300);
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .scheme-light .color-scheme-switcher__button[data-scheme="light"] {
-    background-color: var(--color-primary);
-    color: var(--color-content);
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .color-scheme-switcher__button[data-scheme="dark"] {
-    background-color: transparent;
-    color: var(--color-content-secondary);
-    --tw-shadow: 0 0 #0000;
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .scheme-dark .color-scheme-switcher__button[data-scheme="dark"] {
-    background-color: var(--color-primary);
-    color: var(--color-content);
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .color-scheme-switcher__button[data-scheme="auto"] {
-    background-color: transparent;
-    color: var(--color-content-secondary);
-    --tw-shadow: 0 0 #0000;
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .scheme-auto .color-scheme-switcher__button[data-scheme="auto"] {
-    background-color: var(--color-primary);
-    color: var(--color-content);
+  .scheme-light .color-scheme-switcher__button[data-scheme="light"], .scheme-dark .color-scheme-switcher__button[data-scheme="dark"], .scheme-auto .color-scheme-switcher__button[data-scheme="auto"] {
+    background-color: var(--color-avo-neutral-950);
+    color: var(--color-avo-neutral-50);
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
@@ -10859,7 +10916,7 @@
   .sidebar-status {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
-    border-color: var(--color-tertiary);
+    border-color: var(--border-color);
     padding: calc(var(--spacing) * 4);
   }
   .sidebar-status__link {
@@ -10870,7 +10927,7 @@
     border-radius: var(--radius-sm);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-tertiary);
+    border-color: var(--border-color);
     padding-inline: calc(var(--spacing) * 4);
     padding-block: calc(var(--spacing) * 2);
     font-size: var(--text-sm);