avo 4.0.0.beta.40 → 4.0.0.beta.41

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d072669e3627be036a587636a0a0583ed92c5e60511ee51d6bac952c8227d805
-  data.tar.gz: ea976ac4cafbb83da07ee62444687c9a2e737832bb86334142611fefb51cae45
+  metadata.gz: f019699500b8f42ed10db6244690d9e6bffe114d2cc9791e1ae488ae99e5a4a1
+  data.tar.gz: 63815ed46257dd196eba4343e2bf968efbfa083496611425f566f93e5d9eae81
 SHA512:
-  metadata.gz: e87cdb46e4306ac1fe6bb56a627882a008931c776d9b85edae0faf392ffe20bbcb1ecb9898d192b973ddf6db039601c6dd9b063d01427a1e282bcb0bbf382f1d
-  data.tar.gz: 4772e2bd344a6bff9fd81949f9900d527e7ae4b6b5be53047b8759dbe5bb3d27c483a6cc47fe7e59bed81606cd8f33fe1264a61fd662112de90f10a13b9387a4
+  metadata.gz: e559dbed9ba04d98f53f78359879a1dc9de52774efbdad16a1a98f8354fc900c9c3a62503c71e3a2e01ec8b55e26a44c3dc0600adeba820562ed214b5fb7cd3a
+  data.tar.gz: 61cfd42b719cb778d75cc27b42fd7fde9576bb4488fccba2aa546c0108eb1b9adfd2070d889f360b3e2f7a42ad712eee57438601fc3d9492c50134f7cd270fcf

data/Gemfile.lock

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

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

@@ -356,10 +356,11 @@
     --color-brand-neutral-400: oklch(62.68% 0 89.88);
     --color-brand-accent: oklch(39.04% 0 89.88);
     --color-sidebar-background: var(--color-background);
+    --color-navbar-background: var(--color-avo-neutral-900);
+    --color-main-content-background: var(--color-primary);
+    --color-main-content-border: var(--border-color);
     --top-navbar-height: 3rem;
-    --navbar-bg: var(--color-avo-neutral-900);
-    --navbar-notch-radius: 1rem;
-    --navbar-notch-color: var(--navbar-bg);
+    --navbar-notch-color: var(--color-navbar-background);
     --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)) {
@@ -1374,6 +1375,9 @@
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
+  .h-auto {
+    height: auto;
+  }
   .h-full {
     height: 100%;
   }
@@ -2334,9 +2338,6 @@
   .bg-gray-100\! {
     background-color: var(--color-gray-100) !important;
   }
-  .bg-gray-300 {
-    background-color: var(--color-gray-300);
-  }
   .bg-gray-500 {
     background-color: var(--color-gray-500);
   }
@@ -2445,6 +2446,9 @@
   .bg-teal-500 {
     background-color: var(--color-teal-500);
   }
+  .bg-tertiary {
+    background-color: var(--color-tertiary);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -2809,6 +2813,9 @@
   .text-danger {
     color: var(--color-danger);
   }
+  .text-danger-content {
+    color: var(--color-danger-content);
+  }
   .text-emerald-500 {
     color: var(--color-emerald-500);
   }
@@ -2899,9 +2906,6 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
-  .text-red-600 {
-    color: var(--color-red-600);
-  }
   .text-red-700 {
     color: var(--color-red-700);
   }
@@ -2929,6 +2933,9 @@
   .text-stone-700 {
     color: var(--color-stone-700);
   }
+  .text-success-content {
+    color: var(--color-success-content);
+  }
   .text-teal-500 {
     color: var(--color-teal-500);
   }
@@ -3142,9 +3149,9 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .peer-checked\:bg-green-500 {
+  .peer-checked\:bg-success {
     &:is(:where(.peer):checked ~ *) {
-      background-color: var(--color-green-500);
+      background-color: var(--color-success);
     }
   }
   .before\:absolute {
@@ -4926,6 +4933,47 @@
 .tippy-box[data-theme~='preview'] .tippy-arrow {
   display: none;
 }
+tags.tagify {
+  --tags-border-color: var(--color-tertiary);
+  --tags-hover-border-color: var(--color-tertiary);
+  --tags-focus-border-color: var(--color-primary);
+  --placeholder-color: var(--color-content-secondary);
+  --placeholder-color-focus: var(--color-content-secondary);
+  --tag-text-color: var(--color-content);
+  --tag-text-color--edit: var(--color-content);
+  --tag-remove-btn-color: var(--color-content);
+  --tag-bg: var(--color-secondary);
+  --tag-hover: var(--color-tertiary);
+  padding-block: var(--input-py);
+  align-items: center;
+}
+tags.tagify .tagify__input {
+  margin: 0;
+  padding-block: 0;
+  line-height: var(--input-leading);
+}
+tags.tagify.tagify--focus {
+  box-shadow: var(--box-shadow-focus);
+}
+.tagify__dropdown {
+  --tagify-dd-color-primary: var(--color-tertiary);
+  --tagify-dd-text-color: var(--color-content);
+  --tagify-dd-bg-color: var(--color-primary);
+}
+.tagify__dropdown__item {
+  width: calc(100% - 2px) !important;
+}
+.tagify__dropdown__item.tagify__dropdown__item--active {
+  background-color: var(--color-secondary);
+  color: var(--color-content);
+}
+.tagify__tag > div {
+  padding-block: calc(var(--spacing) * 1) !important;
+}
+:root {
+  --navbar-notch-enabled: true;
+  --navbar-notch-radius: 1rem;
+}
 @layer theme {
   .dark {
     --color-background: var(--color-avo-neutral-900);
@@ -5867,8 +5915,8 @@
     border-start-end-radius: var(--navbar-notch-radius);
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 1px;
-    border-color: var(--border-color);
-    background-color: var(--color-primary);
+    border-color: var(--color-main-content-border);
+    background-color: var(--color-main-content-background);
     padding-inline: calc(var(--spacing) * 2);
     padding-block: calc(var(--spacing) * 2);
     @media (width >= 64rem) {
@@ -5939,7 +5987,7 @@
     align-items: center;
     gap: 0.75rem;
     padding-inline: 0.5rem;
-    background-color: var(--navbar-bg);
+    background-color: var(--color-navbar-background);
     > * {
       pointer-events: auto;
     }
@@ -5955,6 +6003,11 @@
       height: var(--navbar-notch-radius);
       pointer-events: none;
     }
+    @container style(--navbar-notch-enabled: false) {
+      &::before, &::after {
+        display: none;
+      }
+    }
     &::before {
       left: 0;
       background: radial-gradient( circle var(--navbar-notch-radius) at 100% 100%, transparent 99%, var(--navbar-notch-color) 100% );
@@ -6688,38 +6741,6 @@
   .dark trix-toolbar .trix-button--icon:not(.trix-active)::before {
     filter: invert(1);
   }
-  tags.tagify {
-    --tags-border-color: var(--color-tertiary);
-    --tags-hover-border-color: var(--color-tertiary);
-    --tags-focus-border-color: var(--color-primary);
-    --placeholder-color: var(--color-content-secondary);
-    --placeholder-color-focus: var(--color-content-secondary);
-    padding-block: var(--input-py);
-    align-items: center;
-  }
-  tags.tagify .tagify__input {
-    margin: 0;
-    padding-block: 0;
-    line-height: var(--input-leading);
-  }
-  tags.tagify.tagify--focus {
-    box-shadow: var(--box-shadow-focus);
-  }
-  .tagify__dropdown {
-    --tagify-dd-color-primary: var(--color-tertiary);
-    --tagify-dd-text-color: var(--color-content);
-    --tagify-dd-bg-color: var(--color-primary);
-  }
-  .tagify__dropdown__item {
-    width: calc(100% - 2px) !important;
-  }
-  .tagify__dropdown__item.tagify__dropdown__item--active {
-    background-color: var(--color-secondary);
-    color: var(--color-content);
-  }
-  .tagify__tag > div {
-    padding-block: calc(var(--spacing) * 1) !important;
-  }
   .tiptap {
     margin: calc(var(--spacing) * 0);
     min-height: calc(var(--spacing) * 44);
@@ -6889,13 +6910,13 @@
     .star {
       height: calc(var(--spacing) * 5);
       width: calc(var(--spacing) * 5);
-      color: var(--color-gray-300);
+      color: var(--color-tertiary);
       transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
       transition-duration: var(--tw-duration, var(--default-transition-duration));
     }
     .star.filled {
-      color: var(--color-yellow-400);
+      color: var(--color-warning-foreground);
     }
     .rating-group {
       display: flex;
@@ -8911,7 +8932,7 @@
     z-index: 40;
     margin-bottom: calc(var(--spacing) * 4);
     width: 100%;
-    background-color: var(--color-primary);
+    background-color: var(--color-main-content-background);
     top: calc(var(--top-navbar-height) + var(--spacing) * 2);
     margin-top: calc(var(--spacing) * -2);
     &::before {
@@ -8923,7 +8944,7 @@
       right: 0;
       height: calc(0.5rem);
       transform: translateY(-100%);
-      background: var(--color-primary);
+      background: var(--color-main-content-background);
       pointer-events: none;
     }
   }
@@ -8936,9 +8957,9 @@
     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%) );
+    background: linear-gradient( to bottom, var(--color-main-content-background), 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%) );
+      background: linear-gradient( to bottom, var(--color-main-content-background), color-mix(in oklab, var(--color-main-content-background), transparent 100%) );
     }
     pointer-events: none;
   }
@@ -10095,7 +10116,7 @@
     --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);
   }
-  body:not(.hotkeys-hide-badges) .color-scheme-switcher__scheme-button[data-key-badges="show"], body.hotkeys-hide-badges .color-scheme-switcher__scheme-button[data-key-badges="hide"] {
+  :root:not(.hotkeys-hide-badges) .color-scheme-switcher__scheme-button[data-key-badges="show"], :root.hotkeys-hide-badges .color-scheme-switcher__scheme-button[data-key-badges="hide"] {
     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));