@eventcatalog/visualiser 3.19.0 → 3.20.1

package/dist/styles-core.css

@@ -46,6 +46,7 @@
   --color-emerald-600: oklch(59.6% 0.145 163.225);
   --color-emerald-700: oklch(50.8% 0.118 165.612);
   --color-teal-100: oklch(95.3% 0.051 180.801);
+  --color-teal-300: oklch(85.5% 0.138 181.071);
   --color-teal-400: oklch(77.7% 0.152 181.912);
   --color-teal-500: oklch(70.4% 0.14 182.503);
   --color-teal-600: oklch(60% 0.118 184.704);
@@ -72,6 +73,7 @@
   --color-indigo-900: oklch(35.9% 0.144 278.697);
   --color-indigo-950: oklch(25.7% 0.09 281.288);
   --color-violet-100: oklch(94.3% 0.029 294.588);
+  --color-violet-300: oklch(81.1% 0.111 293.571);
   --color-violet-400: oklch(70.2% 0.183 293.541);
   --color-violet-500: oklch(60.6% 0.25 292.717);
   --color-violet-600: oklch(54.1% 0.281 293.009);
@@ -104,7 +106,6 @@
   --color-slate-500: oklch(55.4% 0.046 257.417);
   --color-slate-600: oklch(44.6% 0.043 257.281);
   --color-slate-700: oklch(37.2% 0.044 257.287);
-  --color-slate-800: oklch(27.9% 0.041 260.031);
   --color-gray-50: oklch(98.5% 0.002 247.839);
   --color-gray-100: oklch(96.7% 0.003 264.542);
   --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -179,6 +180,9 @@
 .eventcatalog-visualizer .-top-2\.5 {
   top: calc(var(--spacing) * -2.5);
 }
+.eventcatalog-visualizer .-top-3 {
+  top: calc(var(--spacing) * -3);
+}
 .eventcatalog-visualizer .-top-10 {
   top: calc(var(--spacing) * -10);
 }
@@ -443,6 +447,9 @@
 .eventcatalog-visualizer .h-6 {
   height: calc(var(--spacing) * 6);
 }
+.eventcatalog-visualizer .h-7 {
+  height: calc(var(--spacing) * 7);
+}
 .eventcatalog-visualizer .h-10 {
   height: calc(var(--spacing) * 10);
 }
@@ -707,6 +714,9 @@
     margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
   }
 }
+.eventcatalog-visualizer .gap-x-2 {
+  column-gap: calc(var(--spacing) * 2);
+}
 .eventcatalog-visualizer .gap-x-4 {
   column-gap: calc(var(--spacing) * 4);
 }
@@ -738,6 +748,9 @@
     margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
   }
 }
+.eventcatalog-visualizer .gap-y-1 {
+  row-gap: calc(var(--spacing) * 1);
+}
 .eventcatalog-visualizer .divide-y {
   .eventcatalog-visualizer :where(& > :not(:last-child)) {
     --tw-divide-y-reverse: 0;
@@ -897,6 +910,12 @@
 .eventcatalog-visualizer .border-blue-500 {
   border-color: var(--color-blue-500);
 }
+.eventcatalog-visualizer .border-blue-500\/25 {
+  border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 25%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-blue-500) 25%, transparent);
+  }
+}
 .eventcatalog-visualizer .border-blue-600 {
   border-color: var(--color-blue-600);
 }
@@ -936,6 +955,12 @@
 .eventcatalog-visualizer .border-gray-500 {
   border-color: var(--color-gray-500);
 }
+.eventcatalog-visualizer .border-gray-500\/25 {
+  border-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 25%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-gray-500) 25%, transparent);
+  }
+}
 .eventcatalog-visualizer .border-green-200 {
   border-color: var(--color-green-200);
 }
@@ -951,6 +976,12 @@
 .eventcatalog-visualizer .border-green-500 {
   border-color: var(--color-green-500);
 }
+.eventcatalog-visualizer .border-green-500\/25 {
+  border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 25%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-green-500) 25%, transparent);
+  }
+}
 .eventcatalog-visualizer .border-green-900\/10 {
   border-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 10%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -987,6 +1018,12 @@
 .eventcatalog-visualizer .border-orange-500 {
   border-color: var(--color-orange-500);
 }
+.eventcatalog-visualizer .border-orange-500\/25 {
+  border-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 25%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-orange-500) 25%, transparent);
+  }
+}
 .eventcatalog-visualizer .border-orange-900\/10 {
   border-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 10%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -1008,6 +1045,12 @@
 .eventcatalog-visualizer .border-pink-500 {
   border-color: var(--color-pink-500);
 }
+.eventcatalog-visualizer .border-pink-500\/25 {
+  border-color: color-mix(in srgb, oklch(65.6% 0.241 354.308) 25%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-pink-500) 25%, transparent);
+  }
+}
 .eventcatalog-visualizer .border-pink-900\/10 {
   border-color: color-mix(in srgb, oklch(40.8% 0.153 2.432) 10%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -1059,6 +1102,12 @@
 .eventcatalog-visualizer .border-teal-500 {
   border-color: var(--color-teal-500);
 }
+.eventcatalog-visualizer .border-teal-500\/25 {
+  border-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 25%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-teal-500) 25%, transparent);
+  }
+}
 .eventcatalog-visualizer .border-transparent {
   border-color: transparent;
 }
@@ -1068,6 +1117,12 @@
 .eventcatalog-visualizer .border-violet-500 {
   border-color: var(--color-violet-500);
 }
+.eventcatalog-visualizer .border-violet-500\/25 {
+  border-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 25%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-violet-500) 25%, transparent);
+  }
+}
 .eventcatalog-visualizer .border-yellow-400 {
   border-color: var(--color-yellow-400);
 }
@@ -1080,6 +1135,12 @@
 .eventcatalog-visualizer .border-yellow-500 {
   border-color: var(--color-yellow-500);
 }
+.eventcatalog-visualizer .border-yellow-500\/25 {
+  border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 25%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-yellow-500) 25%, transparent);
+  }
+}
 .eventcatalog-visualizer .border-yellow-900\/10 {
   border-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 10%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -1149,6 +1210,9 @@
 .eventcatalog-visualizer .bg-amber-100 {
   background-color: var(--color-amber-100);
 }
+.eventcatalog-visualizer .bg-amber-500 {
+  background-color: var(--color-amber-500);
+}
 .eventcatalog-visualizer .bg-amber-500\/20 {
   background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -1179,6 +1243,12 @@
 .eventcatalog-visualizer .bg-blue-500 {
   background-color: var(--color-blue-500);
 }
+.eventcatalog-visualizer .bg-blue-500\/10 {
+  background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
+  }
+}
 .eventcatalog-visualizer .bg-blue-500\/15 {
   background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 15%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -1188,15 +1258,18 @@
 .eventcatalog-visualizer .bg-blue-600 {
   background-color: var(--color-blue-600);
 }
+.eventcatalog-visualizer .bg-cyan-500 {
+  background-color: var(--color-cyan-500);
+}
 .eventcatalog-visualizer .bg-cyan-600 {
   background-color: var(--color-cyan-600);
 }
+.eventcatalog-visualizer .bg-emerald-500 {
+  background-color: var(--color-emerald-500);
+}
 .eventcatalog-visualizer .bg-gray-50 {
   background-color: var(--color-gray-50);
 }
-.eventcatalog-visualizer .bg-gray-100 {
-  background-color: var(--color-gray-100);
-}
 .eventcatalog-visualizer .bg-gray-200 {
   background-color: var(--color-gray-200);
 }
@@ -1206,6 +1279,12 @@
 .eventcatalog-visualizer .bg-gray-500 {
   background-color: var(--color-gray-500);
 }
+.eventcatalog-visualizer .bg-gray-500\/10 {
+  background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-gray-500) 10%, transparent);
+  }
+}
 .eventcatalog-visualizer .bg-gray-600 {
   background-color: var(--color-gray-600);
 }
@@ -1233,6 +1312,12 @@
 .eventcatalog-visualizer .bg-green-500 {
   background-color: var(--color-green-500);
 }
+.eventcatalog-visualizer .bg-green-500\/10 {
+  background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
+  }
+}
 .eventcatalog-visualizer .bg-green-600 {
   background-color: var(--color-green-600);
 }
@@ -1248,6 +1333,12 @@
 .eventcatalog-visualizer .bg-orange-500 {
   background-color: var(--color-orange-500);
 }
+.eventcatalog-visualizer .bg-orange-500\/10 {
+  background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
+  }
+}
 .eventcatalog-visualizer .bg-orange-600 {
   background-color: var(--color-orange-600);
 }
@@ -1263,6 +1354,12 @@
 .eventcatalog-visualizer .bg-pink-500 {
   background-color: var(--color-pink-500);
 }
+.eventcatalog-visualizer .bg-pink-500\/10 {
+  background-color: color-mix(in srgb, oklch(65.6% 0.241 354.308) 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-pink-500) 10%, transparent);
+  }
+}
 .eventcatalog-visualizer .bg-pink-600 {
   background-color: var(--color-pink-600);
 }
@@ -1281,8 +1378,20 @@
 .eventcatalog-visualizer .bg-red-500 {
   background-color: var(--color-red-500);
 }
-.eventcatalog-visualizer .bg-slate-800 {
-  background-color: var(--color-slate-800);
+.eventcatalog-visualizer .bg-rose-500 {
+  background-color: var(--color-rose-500);
+}
+.eventcatalog-visualizer .bg-slate-500 {
+  background-color: var(--color-slate-500);
+}
+.eventcatalog-visualizer .bg-teal-500 {
+  background-color: var(--color-teal-500);
+}
+.eventcatalog-visualizer .bg-teal-500\/10 {
+  background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-teal-500) 10%, transparent);
+  }
 }
 .eventcatalog-visualizer .bg-teal-600 {
   background-color: var(--color-teal-600);
@@ -1290,6 +1399,15 @@
 .eventcatalog-visualizer .bg-transparent {
   background-color: transparent;
 }
+.eventcatalog-visualizer .bg-violet-500 {
+  background-color: var(--color-violet-500);
+}
+.eventcatalog-visualizer .bg-violet-500\/10 {
+  background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent);
+  }
+}
 .eventcatalog-visualizer .bg-violet-600 {
   background-color: var(--color-violet-600);
 }
@@ -1299,6 +1417,12 @@
 .eventcatalog-visualizer .bg-yellow-500 {
   background-color: var(--color-yellow-500);
 }
+.eventcatalog-visualizer .bg-yellow-500\/10 {
+  background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
+  }
+}
 .eventcatalog-visualizer .bg-yellow-600 {
   background-color: var(--color-yellow-600);
 }
@@ -1581,9 +1705,6 @@
 .eventcatalog-visualizer .fill-\[rgb\(var\(--ec-page-bg\)\)\] {
   fill: rgb(var(--ec-page-bg));
 }
-.eventcatalog-visualizer .fill-slate-800 {
-  fill: var(--color-slate-800);
-}
 .eventcatalog-visualizer .stroke-\[rgb\(var\(--ec-page-border\)\)\] {
   stroke: rgb(var(--ec-page-border));
 }
@@ -1838,6 +1959,9 @@
 .eventcatalog-visualizer .text-blue-500 {
   color: var(--color-blue-500);
 }
+.eventcatalog-visualizer .text-blue-700 {
+  color: var(--color-blue-700);
+}
 .eventcatalog-visualizer .text-blue-900 {
   color: var(--color-blue-900);
 }
@@ -1928,6 +2052,9 @@
 .eventcatalog-visualizer .text-green-300 {
   color: var(--color-green-300);
 }
+.eventcatalog-visualizer .text-green-500 {
+  color: var(--color-green-500);
+}
 .eventcatalog-visualizer .text-green-700 {
   color: var(--color-green-700);
 }
@@ -1997,6 +2124,12 @@
 .eventcatalog-visualizer .text-orange-300 {
   color: var(--color-orange-300);
 }
+.eventcatalog-visualizer .text-orange-500 {
+  color: var(--color-orange-500);
+}
+.eventcatalog-visualizer .text-orange-700 {
+  color: var(--color-orange-700);
+}
 .eventcatalog-visualizer .text-orange-900\/40 {
   color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 40%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -2030,6 +2163,12 @@
 .eventcatalog-visualizer .text-pink-300 {
   color: var(--color-pink-300);
 }
+.eventcatalog-visualizer .text-pink-500 {
+  color: var(--color-pink-500);
+}
+.eventcatalog-visualizer .text-pink-700 {
+  color: var(--color-pink-700);
+}
 .eventcatalog-visualizer .text-pink-900 {
   color: var(--color-pink-900);
 }
@@ -2111,9 +2250,21 @@
 .eventcatalog-visualizer .text-teal-100 {
   color: var(--color-teal-100);
 }
+.eventcatalog-visualizer .text-teal-500 {
+  color: var(--color-teal-500);
+}
+.eventcatalog-visualizer .text-teal-700 {
+  color: var(--color-teal-700);
+}
 .eventcatalog-visualizer .text-violet-100 {
   color: var(--color-violet-100);
 }
+.eventcatalog-visualizer .text-violet-500 {
+  color: var(--color-violet-500);
+}
+.eventcatalog-visualizer .text-violet-700 {
+  color: var(--color-violet-700);
+}
 .eventcatalog-visualizer .text-white {
   color: var(--color-white);
 }
@@ -2123,6 +2274,12 @@
 .eventcatalog-visualizer .text-yellow-500 {
   color: var(--color-yellow-500);
 }
+.eventcatalog-visualizer .text-yellow-600 {
+  color: var(--color-yellow-600);
+}
+.eventcatalog-visualizer .text-yellow-700 {
+  color: var(--color-yellow-700);
+}
 .eventcatalog-visualizer .text-yellow-900 {
   color: var(--color-yellow-900);
 }
@@ -2244,6 +2401,12 @@
     --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yellow-300) 50%, transparent) var(--tw-shadow-alpha), transparent);
   }
 }
+.eventcatalog-visualizer .ring-amber-400\/60 {
+  --tw-ring-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 60%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 60%, transparent);
+  }
+}
 .eventcatalog-visualizer .ring-blue-400\/60 {
   --tw-ring-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 60%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -2259,6 +2422,12 @@
     --tw-ring-color: color-mix(in oklab, var(--color-cyan-400) 60%, transparent);
   }
 }
+.eventcatalog-visualizer .ring-emerald-400\/60 {
+  --tw-ring-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 60%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 60%, transparent);
+  }
+}
 .eventcatalog-visualizer .ring-gray-400\/60 {
   --tw-ring-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 60%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -2307,6 +2476,30 @@
 .eventcatalog-visualizer .ring-purple-500 {
   --tw-ring-color: var(--color-purple-500);
 }
+.eventcatalog-visualizer .ring-red-400\/60 {
+  --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 60%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--color-red-400) 60%, transparent);
+  }
+}
+.eventcatalog-visualizer .ring-rose-400\/60 {
+  --tw-ring-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 60%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--color-rose-400) 60%, transparent);
+  }
+}
+.eventcatalog-visualizer .ring-slate-400\/60 {
+  --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 60%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--color-slate-400) 60%, transparent);
+  }
+}
+.eventcatalog-visualizer .ring-teal-400\/60 {
+  --tw-ring-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 60%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--color-teal-400) 60%, transparent);
+  }
+}
 .eventcatalog-visualizer .ring-violet-400\/60 {
   --tw-ring-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 60%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -2334,6 +2527,16 @@
   outline-style: var(--tw-outline-style);
   outline-width: 1px;
 }
+.eventcatalog-visualizer .outline-1 {
+  outline-style: var(--tw-outline-style);
+  outline-width: 1px;
+}
+.eventcatalog-visualizer .-outline-offset-1 {
+  outline-offset: calc(1px * -1);
+}
+.eventcatalog-visualizer .outline-\[rgb\(var\(--ec-accent\)\)\] {
+  outline-color: rgb(var(--ec-accent));
+}
 .eventcatalog-visualizer .invert {
   --tw-invert: invert(100%);
   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -2637,6 +2840,51 @@
     color: var(--color-amber-400);
   }
 }
+.eventcatalog-visualizer .dark\:text-blue-300 {
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-blue-300);
+  }
+}
+.eventcatalog-visualizer .dark\:text-gray-300 {
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-gray-300);
+  }
+}
+.eventcatalog-visualizer .dark\:text-green-300 {
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-green-300);
+  }
+}
+.eventcatalog-visualizer .dark\:text-orange-300 {
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-orange-300);
+  }
+}
+.eventcatalog-visualizer .dark\:text-pink-300 {
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-pink-300);
+  }
+}
+.eventcatalog-visualizer .dark\:text-teal-300 {
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-teal-300);
+  }
+}
+.eventcatalog-visualizer .dark\:text-violet-300 {
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-violet-300);
+  }
+}
+.eventcatalog-visualizer .dark\:text-yellow-300 {
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-yellow-300);
+  }
+}
+.eventcatalog-visualizer .dark\:text-yellow-400 {
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-yellow-400);
+  }
+}
 .eventcatalog-visualizer .\[\&_svg\]\:h-full {
   .eventcatalog-visualizer & svg {
     height: 100%;
@@ -3235,6 +3483,7 @@
   --ec-dp-node-bg: #f7f5ff;
   --ec-external-node-bg: #faf5ff;
   --ec-actor-node-bg: #fffdf5;
+  --ec-custom-node-bg: #f8fbff;
   --ec-message-group-node-bg: #f9f5ff;
   --ec-deprecated-stripe: rgba(239, 68, 68, 0.3);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -3260,6 +3509,7 @@
   --ec-dp-node-bg: rgb(40, 46, 56);
   --ec-external-node-bg: rgb(40, 46, 56);
   --ec-actor-node-bg: rgb(40, 46, 56);
+  --ec-custom-node-bg: rgb(40, 46, 56);
   --ec-message-group-node-bg: rgb(40, 46, 56);
   --ec-deprecated-stripe: rgba(239, 68, 68, 0.25);
   --ec-input-bg: 22, 27, 34;