vibrant-tool 0.1.5 → 0.1.7

package/dist/vibrant-tool.css

@@ -79,13 +79,26 @@
     --color-yellow-400: oklch(85.2% .199 91.936);
     --color-green-600: oklch(62.7% .194 149.214);
     --color-green-700: oklch(52.7% .154 150.069);
+    --color-emerald-50: oklch(97.9% .021 166.113);
     --color-emerald-200: oklch(90.5% .093 164.15);
     --color-emerald-400: oklch(76.5% .177 163.223);
+    --color-emerald-500: oklch(69.6% .17 162.48);
+    --color-emerald-600: oklch(59.6% .145 163.225);
+    --color-emerald-900: oklch(37.8% .077 168.94);
+    --color-emerald-950: oklch(26.2% .051 172.552);
+    --color-teal-500: oklch(70.4% .14 182.503);
+    --color-teal-600: oklch(60% .118 184.704);
     --color-cyan-600: oklch(60.9% .126 221.723);
+    --color-sky-50: oklch(97.7% .013 236.62);
+    --color-sky-200: oklch(90.1% .058 230.902);
+    --color-sky-500: oklch(68.5% .169 237.323);
+    --color-sky-900: oklch(39.1% .09 240.876);
     --color-blue-200: oklch(88.2% .059 254.128);
     --color-blue-400: oklch(70.7% .165 254.624);
     --color-blue-500: oklch(62.3% .214 259.815);
     --color-blue-600: oklch(54.6% .245 262.881);
+    --color-rose-50: oklch(96.9% .015 12.422);
+    --color-rose-200: oklch(89.2% .058 10.001);
     --color-rose-600: oklch(58.6% .253 17.585);
     --color-slate-50: oklch(98.4% .003 247.858);
     --color-slate-100: oklch(96.8% .007 247.896);
@@ -113,7 +126,7 @@
     --color-white: #fff;
     --spacing: .25rem;
     --container-md: 28rem;
-    --container-4xl: 56rem;
+    --container-6xl: 72rem;
     --text-xs: .75rem;
     --text-xs--line-height: calc(1 / .75);
     --text-sm: .875rem;
@@ -147,6 +160,7 @@
     --animate-spin: spin 1s linear infinite;
     --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
     --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+    --blur-xs: 4px;
     --blur-sm: 8px;
     --blur-md: 12px;
     --blur-xl: 24px;
@@ -613,6 +627,10 @@
     z-index: 99999;
   }
 
+  .z-\[999999\] {
+    z-index: 999999;
+  }
+
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
@@ -887,6 +905,10 @@
     height: 85vh;
   }
 
+  .h-\[88vh\] {
+    height: 88vh;
+  }
+
   .h-\[135px\] {
     height: 135px;
   }
@@ -943,6 +965,14 @@
     max-height: calc(var(--spacing) * 60);
   }
 
+  .max-h-\[62vh\] {
+    max-height: 62vh;
+  }
+
+  .max-h-full {
+    max-height: 100%;
+  }
+
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -951,6 +981,10 @@
     min-height: 500px;
   }
 
+  .w-1\.5 {
+    width: calc(var(--spacing) * 1.5);
+  }
+
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -971,6 +1005,10 @@
     width: calc(var(--spacing) * 4);
   }
 
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
@@ -983,6 +1021,10 @@
     width: calc(var(--spacing) * 8);
   }
 
+  .w-9 {
+    width: calc(var(--spacing) * 9);
+  }
+
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
@@ -1031,6 +1073,10 @@
     width: 270px;
   }
 
+  .w-auto {
+    width: auto;
+  }
+
   .w-full {
     width: 100%;
   }
@@ -1043,8 +1089,12 @@
     width: 100vw;
   }
 
-  .max-w-4xl {
-    max-width: var(--container-4xl);
+  .max-w-6xl {
+    max-width: var(--container-6xl);
+  }
+
+  .max-w-full {
+    max-width: 100%;
   }
 
   .max-w-md {
@@ -1217,6 +1267,10 @@
     gap: calc(var(--spacing) * 3);
   }
 
+  .gap-3\.5 {
+    gap: calc(var(--spacing) * 3.5);
+  }
+
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -1255,6 +1309,14 @@
     margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  .gap-x-5 {
+    column-gap: calc(var(--spacing) * 5);
+  }
+
+  .gap-y-3\.5 {
+    row-gap: calc(var(--spacing) * 3.5);
+  }
+
   .truncate {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1342,9 +1404,9 @@
     border-width: 2px;
   }
 
-  .border-4 {
+  .border-3 {
     border-style: var(--tw-border-style);
-    border-width: 4px;
+    border-width: 3px;
   }
 
   .border-t {
@@ -1371,6 +1433,10 @@
     border-color: #02bc71;
   }
 
+  .border-\[\#02bc71\]\/30 {
+    border-color: oklab(69.9534% -.154036 .0673199 / .3);
+  }
+
   .border-\[\#02bc71\]\/40 {
     border-color: oklab(69.9534% -.154036 .0673199 / .4);
   }
@@ -1383,6 +1449,16 @@
     border-color: var(--color-blue-500);
   }
 
+  .border-emerald-200\/70 {
+    border-color: #a4f4cfb3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-emerald-200\/70 {
+      border-color: color-mix(in oklab, var(--color-emerald-200) 70%, transparent);
+    }
+  }
+
   .border-gray-100 {
     border-color: var(--color-gray-100);
   }
@@ -1391,6 +1467,16 @@
     border-color: var(--color-gray-200);
   }
 
+  .border-gray-200\/80 {
+    border-color: #e5e7ebcc;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-gray-200\/80 {
+      border-color: color-mix(in oklab, var(--color-gray-200) 80%, transparent);
+    }
+  }
+
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
@@ -1415,6 +1501,16 @@
     border-color: var(--color-neutral-700);
   }
 
+  .border-neutral-700\/70 {
+    border-color: #404040b3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-neutral-700\/70 {
+      border-color: color-mix(in oklab, var(--color-neutral-700) 70%, transparent);
+    }
+  }
+
   .border-neutral-700\/80 {
     border-color: #404040cc;
   }
@@ -1443,6 +1539,20 @@
     }
   }
 
+  .border-rose-200 {
+    border-color: var(--color-rose-200);
+  }
+
+  .border-sky-200\/70 {
+    border-color: #b8e6feb3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-sky-200\/70 {
+      border-color: color-mix(in oklab, var(--color-sky-200) 70%, transparent);
+    }
+  }
+
   .border-transparent {
     border-color: #0000;
   }
@@ -1497,6 +1607,10 @@
     background-color: #02bc71;
   }
 
+  .bg-\[\#02bc71\]\/15 {
+    background-color: oklab(69.9534% -.154036 .0673199 / .15);
+  }
+
   .bg-\[\#2b2b2b\] {
     background-color: #2b2b2b;
   }
@@ -1529,16 +1643,6 @@
     background-color: var(--color-black);
   }
 
-  .bg-black\/40 {
-    background-color: #0006;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-black\/40 {
-      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
-    }
-  }
-
   .bg-black\/50 {
     background-color: #00000080;
   }
@@ -1577,6 +1681,24 @@
     background-color: var(--color-blue-600);
   }
 
+  .bg-emerald-50\/90 {
+    background-color: #ecfdf5e6;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-emerald-50\/90 {
+      background-color: color-mix(in oklab, var(--color-emerald-50) 90%, transparent);
+    }
+  }
+
+  .bg-emerald-500 {
+    background-color: var(--color-emerald-500);
+  }
+
+  .bg-emerald-600 {
+    background-color: var(--color-emerald-600);
+  }
+
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
@@ -1655,6 +1777,10 @@
     background-color: var(--color-gray-800);
   }
 
+  .bg-gray-900 {
+    background-color: var(--color-gray-900);
+  }
+
   .bg-gray-900\/95 {
     background-color: #101828f2;
   }
@@ -1725,6 +1851,16 @@
     }
   }
 
+  .bg-neutral-900\/90 {
+    background-color: #171717e6;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-neutral-900\/90 {
+      background-color: color-mix(in oklab, var(--color-neutral-900) 90%, transparent);
+    }
+  }
+
   .bg-neutral-900\/95 {
     background-color: #171717f2;
   }
@@ -1749,10 +1885,28 @@
     }
   }
 
+  .bg-rose-50 {
+    background-color: var(--color-rose-50);
+  }
+
   .bg-rose-600 {
     background-color: var(--color-rose-600);
   }
 
+  .bg-sky-50\/90 {
+    background-color: #f0f9ffe6;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-sky-50\/90 {
+      background-color: color-mix(in oklab, var(--color-sky-50) 90%, transparent);
+    }
+  }
+
+  .bg-sky-500 {
+    background-color: var(--color-sky-500);
+  }
+
   .bg-slate-50 {
     background-color: var(--color-slate-50);
   }
@@ -1795,6 +1949,16 @@
     }
   }
 
+  .bg-white\/95 {
+    background-color: #fffffff2;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/95 {
+      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
+    }
+  }
+
   .bg-white\/96 {
     background-color: #fffffff5;
   }
@@ -1820,6 +1984,11 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .from-emerald-600 {
+    --tw-gradient-from: var(--color-emerald-600);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
   .from-slate-50 {
     --tw-gradient-from: var(--color-slate-50);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1835,6 +2004,11 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .to-teal-600 {
+    --tw-gradient-to: var(--color-teal-600);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
   .object-contain {
     object-fit: contain;
   }
@@ -1843,10 +2017,6 @@
     object-fit: cover;
   }
 
-  .object-fill {
-    object-fit: fill;
-  }
-
   .p-0\.5 {
     padding: calc(var(--spacing) * .5);
   }
@@ -1923,6 +2093,10 @@
     padding-inline: calc(var(--spacing) * 5);
   }
 
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+
   .py-0\.5 {
     padding-block: calc(var(--spacing) * .5);
   }
@@ -1971,6 +2145,10 @@
     padding-top: calc(var(--spacing) * 1);
   }
 
+  .pt-1\.5 {
+    padding-top: calc(var(--spacing) * 1.5);
+  }
+
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -2035,6 +2213,10 @@
     padding-left: calc(var(--spacing) * 1);
   }
 
+  .pl-3\.5 {
+    padding-left: calc(var(--spacing) * 3.5);
+  }
+
   .pl-6 {
     padding-left: calc(var(--spacing) * 6);
   }
@@ -2165,6 +2347,14 @@
     color: var(--color-blue-400);
   }
 
+  .text-emerald-200 {
+    color: var(--color-emerald-200);
+  }
+
+  .text-emerald-900 {
+    color: var(--color-emerald-900);
+  }
+
   .text-gray-200 {
     color: var(--color-gray-200);
   }
@@ -2229,6 +2419,14 @@
     color: var(--color-red-500);
   }
 
+  .text-rose-600 {
+    color: var(--color-rose-600);
+  }
+
+  .text-sky-900 {
+    color: var(--color-sky-900);
+  }
+
   .text-white {
     color: var(--color-white);
   }
@@ -2279,6 +2477,10 @@
     opacity: 0;
   }
 
+  .opacity-25 {
+    opacity: .25;
+  }
+
   .opacity-30 {
     opacity: .3;
   }
@@ -2295,6 +2497,10 @@
     opacity: .7;
   }
 
+  .opacity-75 {
+    opacity: .75;
+  }
+
   .opacity-80 {
     opacity: .8;
   }
@@ -2307,10 +2513,6 @@
     mix-blend-mode: difference;
   }
 
-  .mix-blend-overlay {
-    mix-blend-mode: overlay;
-  }
-
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2331,6 +2533,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .shadow-\[0_10px_35px_rgba\(0\,0\,0\,0\.1\)\] {
+    --tw-shadow: 0 10px 35px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .shadow-\[0_12px_30px_rgba\(0\,0\,0\,0\.35\)\] {
     --tw-shadow: 0 12px 30px var(--tw-shadow-color, #00000059);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2376,6 +2583,16 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .shadow-\[\#02bc71\]\/20 {
+    --tw-shadow-color: #02bc7133;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .shadow-\[\#02bc71\]\/20 {
+      --tw-shadow-color: color-mix(in oklab, oklab(69.9534% -.154036 .0673199 / .2) var(--tw-shadow-alpha), transparent);
+    }
+  }
+
   .shadow-blue-200 {
     --tw-shadow-color: oklch(88.2% .059 254.128);
   }
@@ -2396,6 +2613,26 @@
     }
   }
 
+  .shadow-emerald-900\/20 {
+    --tw-shadow-color: #004e3b33;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .shadow-emerald-900\/20 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-900) 20%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
+
+  .shadow-emerald-950\/30 {
+    --tw-shadow-color: #002c224d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .shadow-emerald-950\/30 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-950) 30%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
+
   .ring-\[\#02bc71\] {
     --tw-ring-color: #02bc71;
   }
@@ -2480,6 +2717,12 @@
     backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
   }
 
+  .backdrop-blur-xs {
+    --tw-backdrop-blur: blur(var(--blur-xs));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
+    backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
+  }
+
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2556,6 +2799,10 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
+    .group-hover\:rotate-180:is(:where(.group):hover *) {
+      rotate: 180deg;
+    }
+
     .group-hover\:text-white:is(:where(.group):hover *) {
       color: var(--color-white);
     }
@@ -2597,6 +2844,10 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
+    .hover\:scale-\[1\.02\]:hover {
+      scale: 1.02;
+    }
+
     .hover\:rounded-sm:hover {
       border-radius: var(--radius-sm);
     }
@@ -2693,6 +2944,16 @@
       }
     }
 
+    .hover\:from-emerald-500:hover {
+      --tw-gradient-from: var(--color-emerald-500);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    .hover\:to-teal-500:hover {
+      --tw-gradient-to: var(--color-teal-500);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
     .hover\:text-\[\#02bc71\]:hover {
       color: #02bc71;
     }
@@ -2796,6 +3057,13 @@
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
 
+  .active\:scale-98:active {
+    --tw-scale-x: 98%;
+    --tw-scale-y: 98%;
+    --tw-scale-z: 98%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
   .active\:scale-\[0\.98\]:active {
     scale: .98;
   }
@@ -2820,6 +3088,10 @@
     opacity: .5;
   }
 
+  .disabled\:opacity-60:disabled {
+    opacity: .6;
+  }
+
   @media (min-width: 48rem) {
     .md\:absolute {
       position: absolute;
@@ -3584,4 +3856,45 @@ div[class*="driver-stage"], div[id*="driver-stage"], .driver-active-element, #dr
 .pqc-channel-input:focus {
     border-color: #06b6d4;
     box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
+}
+
+/* Choose Gradient Colors Sliders */
+.gradient-range-slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 4px;
+    background: #474f63;
+    border-radius: 9999px;
+    outline: none;
+    cursor: pointer;
+}
+
+.gradient-range-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #b5c2d9;
+    cursor: pointer;
+    border: 2px solid #2b2f3e;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+    transition: transform 0.1s ease, background 0.15s ease;
+}
+
+.gradient-range-slider:active::-webkit-slider-thumb,
+.gradient-range-slider:hover::-webkit-slider-thumb {
+    background: #d1dcf0;
+    transform: scale(1.1);
+}
+
+.gradient-range-slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #b5c2d9;
+    cursor: pointer;
+    border: 2px solid #2b2f3e;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 }