avo 4.0.0.beta.1 → 4.0.0.beta.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '059f38d64a442b811a2d8310f256d67066f4986da9aa64ea85c834bfcb77300f'
-  data.tar.gz: 667a4e24346368c9712313e43f7e91f19c72913d6d78bca413763e1eb12369c2
+  metadata.gz: 19ff8cb45166e5eba8e5f34a5077f598110351433d7617aa0acb0ef16024d503
+  data.tar.gz: f959099635501f862297712d3a67de1cde5e3b2eda3872913deef69a2eea8412
 SHA512:
-  metadata.gz: 9acd6221bba530cf104f4e178d154a4d4dc4b74332e8109ef8b8c5ec8f11f9b42cb4e3eba093f89d1b67a316ce29ad65275f4f05336cb624368133f674702c4c
-  data.tar.gz: b4416c7fe727f699356c475f0c1d1b2f317cce87a4a09ef77b9b09738d094e6bbbee71915fa106a02e04ad0dfa6498b79d3c11c59d754cbe8437da714717ee3d
+  metadata.gz: f0483f39c5f03075b9ead52b593d5307e665b5993723ccad3877faa861c96edcd8ee1edf51050b1fc169c357c1781a23c4a794df9a9b599123509e91b4247979
+  data.tar.gz: fd7c1d840794b4a117f0730bb46836f0576de3d4826613da6bcb5b99ba56a80be61be189689a3969726cd8d9ee460507205acf4b739f1d409fff42f5fd065398

data/Gemfile.lock

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

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

@@ -568,15 +568,15 @@
   .end-0 {
     inset-inline-end: calc(var(--spacing) * 0);
   }
-  .end-2\.5 {
-    inset-inline-end: calc(var(--spacing) * 2.5);
-  }
   .end-3 {
     inset-inline-end: calc(var(--spacing) * 3);
   }
   .end-auto {
     inset-inline-end: auto;
   }
+  .inset-e-2\.5 {
+    inset-inline-end: calc(var(--spacing) * 2.5);
+  }
   .-top-\[0\.1rem\] {
     top: calc(0.1rem * -1);
   }
@@ -820,9 +820,6 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
-  .mt-12 {
-    margin-top: calc(var(--spacing) * 12);
-  }
   .mr-0 {
     margin-right: calc(var(--spacing) * 0);
   }
@@ -832,9 +829,6 @@
   .mr-px {
     margin-right: 1px;
   }
-  .\!-mb-8 {
-    margin-bottom: calc(var(--spacing) * -8) !important;
-  }
   .mb-0 {
     margin-bottom: calc(var(--spacing) * 0);
   }
@@ -850,9 +844,6 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
-  .mb-5 {
-    margin-bottom: calc(var(--spacing) * 5);
-  }
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
@@ -926,10 +917,18 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
   .size-10 {
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
   }
+  .size-12 {
+    width: calc(var(--spacing) * 12);
+    height: calc(var(--spacing) * 12);
+  }
   .size-full {
     width: 100%;
     height: 100%;
@@ -958,15 +957,15 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
-  .h-12 {
-    height: calc(var(--spacing) * 12);
-  }
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
+  .h-40 {
+    height: calc(var(--spacing) * 40);
+  }
   .h-52 {
     height: calc(var(--spacing) * 52);
   }
@@ -1018,6 +1017,9 @@
   .min-h-24 {
     min-height: calc(var(--spacing) * 24);
   }
+  .min-h-56 {
+    min-height: calc(var(--spacing) * 56);
+  }
   .min-h-\[8rem\] {
     min-height: 8rem;
   }
@@ -1093,9 +1095,6 @@
   .w-10\/12 {
     width: calc(10 / 12 * 100%);
   }
-  .w-12 {
-    width: calc(var(--spacing) * 12);
-  }
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
@@ -1457,9 +1456,6 @@
   .gap-y-4 {
     row-gap: calc(var(--spacing) * 4);
   }
-  .gap-y-12 {
-    row-gap: calc(var(--spacing) * 12);
-  }
   .divide-x {
     :where(& > :not(:last-child)) {
       --tw-divide-x-reverse: 0;
@@ -1682,6 +1678,9 @@
   .border-cyan-500 {
     border-color: var(--color-cyan-500);
   }
+  .border-danger {
+    border-color: var(--color-danger);
+  }
   .border-emerald-300 {
     border-color: var(--color-emerald-300);
   }
@@ -2207,6 +2206,9 @@
   .pe-9 {
     padding-inline-end: calc(var(--spacing) * 9);
   }
+  .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
+  }
   .pt-0\.5 {
     padding-top: calc(var(--spacing) * 0.5);
   }
@@ -2411,6 +2413,9 @@
   .text-cyan-700 {
     color: var(--color-cyan-700);
   }
+  .text-danger {
+    color: var(--color-danger);
+  }
   .text-emerald-500 {
     color: var(--color-emerald-500);
   }
@@ -3036,6 +3041,14 @@
       background-color: var(--color-cyan-600);
     }
   }
+  .hover\:bg-danger\/10 {
+    &:hover {
+      background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-danger) 10%, transparent);
+      }
+    }
+  }
   .hover\:bg-emerald-100 {
     &:hover {
       background-color: var(--color-emerald-100);
@@ -3061,11 +3074,6 @@
       background-color: var(--color-gray-100);
     }
   }
-  .hover\:bg-gray-200 {
-    &:hover {
-      background-color: var(--color-gray-200);
-    }
-  }
   .hover\:bg-gray-600 {
     &:hover {
       background-color: var(--color-gray-600);
@@ -3156,11 +3164,6 @@
       background-color: var(--color-purple-600);
     }
   }
-  .hover\:bg-red-50 {
-    &:hover {
-      background-color: var(--color-red-50);
-    }
-  }
   .hover\:bg-red-100 {
     &:hover {
       background-color: var(--color-red-100);
@@ -3226,6 +3229,11 @@
       background-color: var(--color-teal-600);
     }
   }
+  .hover\:bg-tertiary {
+    &:hover {
+      background-color: var(--color-tertiary);
+    }
+  }
   .hover\:bg-violet-100 {
     &:hover {
       background-color: var(--color-violet-100);
@@ -3269,11 +3277,6 @@
       color: var(--color-blue-500);
     }
   }
-  .hover\:text-blue-700 {
-    &:hover {
-      color: var(--color-blue-700);
-    }
-  }
   .hover\:text-content {
     &:hover {
       color: var(--color-content);
@@ -3339,14 +3342,17 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus\:ring-gray-100 {
+  .focus\:ring-danger\/30 {
     &:focus {
-      --tw-ring-color: var(--color-gray-100);
+      --tw-ring-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-danger) 30%, transparent);
+      }
     }
   }
-  .focus\:ring-red-300 {
+  .focus\:ring-tertiary {
     &:focus {
-      --tw-ring-color: var(--color-red-300);
+      --tw-ring-color: var(--color-tertiary);
     }
   }
   .focus\:ring-warning\/50 {
@@ -4438,6 +4444,11 @@
       }
     }
   }
+  .dark\:bg-tertiary {
+    &:where(.dark, .dark *) {
+      background-color: var(--color-tertiary);
+    }
+  }
   .print\:hidden {
     @media print {
       display: none;
@@ -12058,29 +12069,13 @@
     }
   }
   .grid-wrapper {
-    margin-top: calc(var(--spacing) * 8);
-    display: grid;
+    --grid-max-cols: 12;
+    --grid-min-col: 13rem;
+    --grid-gap: 1rem;
     width: 100%;
-    grid-template-columns: repeat(1, minmax(0, 1fr));
     gap: calc(var(--spacing) * 4);
-    @media (width >= 30rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    @media (width >= 40rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    @media (width >= 80rem) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-    @media (width >= 96rem) {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
+    display: grid;
+    grid-template-columns: repeat( auto-fill, minmax( min( 100%, max( var(--grid-min-col), calc( (100cqw - (var(--grid-max-cols) - 1) * var(--grid-gap)) / var(--grid-max-cols) ) ) ), 1fr ) );
   }
   .grid-card {
     display: flex;
@@ -12173,6 +12168,39 @@
     font-weight: var(--font-weight-normal);
     color: var(--color-content-secondary);
   }
+  @keyframes icon-float {
+    0%, 100% {
+      translate: 0 0;
+    }
+    50% {
+      translate: 0 -5px;
+    }
+  }
+  .grid-card__icon {
+    pointer-events: none;
+    position: absolute;
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+    transform: translate(var(--tx, 0px), var(--ty, 0px));
+    transition: transform 0.5s ease-out;
+  }
+  .grid-card__icon--repelling {
+    transition: transform 0.08s ease-out;
+  }
+  .grid-card__avocado {
+    display: block;
+    transform: translate(var(--tx, 0px), var(--ty, 0px));
+    transition: transform 0.5s ease-out;
+    &.grid-card__icon--repelling {
+      transition: transform 0.08s ease-out;
+    }
+  }
+  .grid-card__icon--float {
+    animation-name: icon-float;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+    animation-fill-mode: none;
+  }
   .color-scheme-switcher {
     display: inline-flex;
     align-items: center;
@@ -13520,6 +13548,15 @@
       margin-inline-start: calc(var(--spacing) * 0);
     }
   }
+  .panel-spacer {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 12);
+    &>[data-component="avo/ui/panel_header_component"], &>[data-component="avo/cover_component"] {
+      margin-bottom: calc(var(--spacing) * -8);
+    }
+  }
 }
 .loading-spinner {
   position: absolute;