@eventcatalog/visualiser 3.19.0 → 3.20.0

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);
@@ -443,6 +445,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);
 }
@@ -897,6 +902,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 +947,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 +968,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 +1010,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 +1037,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 +1094,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 +1109,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 +1127,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)) {
@@ -1179,6 +1232,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)) {
@@ -1194,9 +1253,6 @@
 .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 +1262,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 +1295,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 +1316,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 +1337,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);
 }
@@ -1284,12 +1364,24 @@
 .eventcatalog-visualizer .bg-slate-800 {
   background-color: var(--color-slate-800);
 }
+.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);
 }
 .eventcatalog-visualizer .bg-transparent {
   background-color: transparent;
 }
+.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 +1391,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);
 }
@@ -1838,6 +1936,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 +2029,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 +2101,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 +2140,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 +2227,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 +2251,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);
 }
@@ -2334,6 +2468,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 +2781,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%;