@eventcatalog/visualiser 3.20.3 → 3.21.1

package/dist/styles-core.css

@@ -66,6 +66,7 @@
   --color-blue-900: oklch(37.9% 0.146 265.522);
   --color-blue-950: oklch(28.2% 0.091 267.935);
   --color-indigo-100: oklch(93% 0.034 272.788);
+  --color-indigo-300: oklch(78.5% 0.115 274.713);
   --color-indigo-400: oklch(67.3% 0.182 276.935);
   --color-indigo-500: oklch(58.5% 0.233 277.117);
   --color-indigo-600: oklch(51.1% 0.262 276.966);
@@ -106,6 +107,7 @@
   --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-950: oklch(12.9% 0.042 264.695);
   --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);
@@ -228,6 +230,9 @@
 .eventcatalog-visualizer .bottom-4 {
   bottom: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .bottom-full {
+  bottom: 100%;
+}
 .eventcatalog-visualizer .\!left-\[-0px\] {
   left: -0px !important;
 }
@@ -561,6 +566,9 @@
 .eventcatalog-visualizer .w-full {
   width: 100%;
 }
+.eventcatalog-visualizer .w-max {
+  width: max-content;
+}
 .eventcatalog-visualizer .max-w-40 {
   max-width: calc(var(--spacing) * 40);
 }
@@ -576,6 +584,9 @@
 .eventcatalog-visualizer .max-w-\[280px\] {
   max-width: 280px;
 }
+.eventcatalog-visualizer .max-w-\[320px\] {
+  max-width: 320px;
+}
 .eventcatalog-visualizer .max-w-full {
   max-width: 100%;
 }
@@ -635,6 +646,9 @@
   --tw-scale-z: 110%;
   scale: var(--tw-scale-x) var(--tw-scale-y);
 }
+.eventcatalog-visualizer .rotate-45 {
+  rotate: 45deg;
+}
 .eventcatalog-visualizer .rotate-180 {
   rotate: 180deg;
 }
@@ -844,6 +858,10 @@
   border-top-style: var(--tw-border-style);
   border-top-width: 1px;
 }
+.eventcatalog-visualizer .border-r {
+  border-right-style: var(--tw-border-style);
+  border-right-width: 1px;
+}
 .eventcatalog-visualizer .border-r-\[1px\] {
   border-right-style: var(--tw-border-style);
   border-right-width: 1px;
@@ -1012,6 +1030,12 @@
     border-color: color-mix(in oklab, var(--color-indigo-900) 10%, transparent);
   }
 }
+.eventcatalog-visualizer .border-indigo-950\/10 {
+  border-color: color-mix(in srgb, oklch(25.7% 0.09 281.288) 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-indigo-950) 10%, transparent);
+  }
+}
 .eventcatalog-visualizer .border-orange-400 {
   border-color: var(--color-orange-400);
 }
@@ -1327,6 +1351,9 @@
 .eventcatalog-visualizer .bg-green-600 {
   background-color: var(--color-green-600);
 }
+.eventcatalog-visualizer .bg-indigo-400 {
+  background-color: var(--color-indigo-400);
+}
 .eventcatalog-visualizer .bg-indigo-500 {
   background-color: var(--color-indigo-500);
 }
@@ -1390,6 +1417,9 @@
 .eventcatalog-visualizer .bg-slate-500 {
   background-color: var(--color-slate-500);
 }
+.eventcatalog-visualizer .bg-slate-950 {
+  background-color: var(--color-slate-950);
+}
 .eventcatalog-visualizer .bg-teal-500 {
   background-color: var(--color-teal-500);
 }
@@ -1750,6 +1780,9 @@
 .eventcatalog-visualizer .px-2 {
   padding-inline: calc(var(--spacing) * 2);
 }
+.eventcatalog-visualizer .px-2\.5 {
+  padding-inline: calc(var(--spacing) * 2.5);
+}
 .eventcatalog-visualizer .px-3 {
   padding-inline: calc(var(--spacing) * 3);
 }
@@ -1856,6 +1889,9 @@
 .eventcatalog-visualizer .text-\[10px\] {
   font-size: 10px;
 }
+.eventcatalog-visualizer .text-\[11px\] {
+  font-size: 11px;
+}
 .eventcatalog-visualizer .text-\[12px\] {
   font-size: 12px;
 }
@@ -2097,6 +2133,9 @@
 .eventcatalog-visualizer .text-indigo-100 {
   color: var(--color-indigo-100);
 }
+.eventcatalog-visualizer .text-indigo-300 {
+  color: var(--color-indigo-300);
+}
 .eventcatalog-visualizer .text-indigo-900\/40 {
   color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 40%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -2118,6 +2157,12 @@
     color: color-mix(in oklab, var(--color-indigo-950) 40%, transparent);
   }
 }
+.eventcatalog-visualizer .text-indigo-950\/50 {
+  color: color-mix(in srgb, oklch(25.7% 0.09 281.288) 50%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    color: color-mix(in oklab, var(--color-indigo-950) 50%, transparent);
+  }
+}
 .eventcatalog-visualizer .text-indigo-950\/60 {
   color: color-mix(in srgb, oklch(25.7% 0.09 281.288) 60%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -2595,6 +2640,18 @@
   --tw-outline-style: none;
   outline-style: none;
 }
+.eventcatalog-visualizer .group-focus-within\:block {
+  .eventcatalog-visualizer &:is(:where(.group):focus-within *) {
+    display: block;
+  }
+}
+.eventcatalog-visualizer .group-hover\:block {
+  .eventcatalog-visualizer &:is(:where(.group):hover *) {
+    @media (hover: hover) {
+      display: block;
+    }
+  }
+}
 .eventcatalog-visualizer .group-hover\:text-\[rgb\(var\(--ec-accent\)\)\] {
   .eventcatalog-visualizer &:is(:where(.group):hover *) {
     @media (hover: hover) {
@@ -3635,6 +3692,9 @@
 .eventcatalog-visualizer .react-flow__node {
   cursor: pointer;
 }
+.eventcatalog-visualizer .react-flow__node:hover .ec-truncated-resource-name-tooltip {
+  display: block;
+}
 .eventcatalog-visualizer .ec-animating-layout .react-flow__node {
   transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }

package/dist/styles.css

@@ -66,6 +66,7 @@
   --color-blue-900: oklch(37.9% 0.146 265.522);
   --color-blue-950: oklch(28.2% 0.091 267.935);
   --color-indigo-100: oklch(93% 0.034 272.788);
+  --color-indigo-300: oklch(78.5% 0.115 274.713);
   --color-indigo-400: oklch(67.3% 0.182 276.935);
   --color-indigo-500: oklch(58.5% 0.233 277.117);
   --color-indigo-600: oklch(51.1% 0.262 276.966);
@@ -106,6 +107,7 @@
   --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-950: oklch(12.9% 0.042 264.695);
   --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);
@@ -228,6 +230,9 @@
 .eventcatalog-visualizer .bottom-4 {
   bottom: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .bottom-full {
+  bottom: 100%;
+}
 .eventcatalog-visualizer .\!left-\[-0px\] {
   left: -0px !important;
 }
@@ -561,6 +566,9 @@
 .eventcatalog-visualizer .w-full {
   width: 100%;
 }
+.eventcatalog-visualizer .w-max {
+  width: max-content;
+}
 .eventcatalog-visualizer .max-w-40 {
   max-width: calc(var(--spacing) * 40);
 }
@@ -576,6 +584,9 @@
 .eventcatalog-visualizer .max-w-\[280px\] {
   max-width: 280px;
 }
+.eventcatalog-visualizer .max-w-\[320px\] {
+  max-width: 320px;
+}
 .eventcatalog-visualizer .max-w-full {
   max-width: 100%;
 }
@@ -635,6 +646,9 @@
   --tw-scale-z: 110%;
   scale: var(--tw-scale-x) var(--tw-scale-y);
 }
+.eventcatalog-visualizer .rotate-45 {
+  rotate: 45deg;
+}
 .eventcatalog-visualizer .rotate-180 {
   rotate: 180deg;
 }
@@ -844,6 +858,10 @@
   border-top-style: var(--tw-border-style);
   border-top-width: 1px;
 }
+.eventcatalog-visualizer .border-r {
+  border-right-style: var(--tw-border-style);
+  border-right-width: 1px;
+}
 .eventcatalog-visualizer .border-r-\[1px\] {
   border-right-style: var(--tw-border-style);
   border-right-width: 1px;
@@ -1012,6 +1030,12 @@
     border-color: color-mix(in oklab, var(--color-indigo-900) 10%, transparent);
   }
 }
+.eventcatalog-visualizer .border-indigo-950\/10 {
+  border-color: color-mix(in srgb, oklch(25.7% 0.09 281.288) 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-indigo-950) 10%, transparent);
+  }
+}
 .eventcatalog-visualizer .border-orange-400 {
   border-color: var(--color-orange-400);
 }
@@ -1327,6 +1351,9 @@
 .eventcatalog-visualizer .bg-green-600 {
   background-color: var(--color-green-600);
 }
+.eventcatalog-visualizer .bg-indigo-400 {
+  background-color: var(--color-indigo-400);
+}
 .eventcatalog-visualizer .bg-indigo-500 {
   background-color: var(--color-indigo-500);
 }
@@ -1390,6 +1417,9 @@
 .eventcatalog-visualizer .bg-slate-500 {
   background-color: var(--color-slate-500);
 }
+.eventcatalog-visualizer .bg-slate-950 {
+  background-color: var(--color-slate-950);
+}
 .eventcatalog-visualizer .bg-teal-500 {
   background-color: var(--color-teal-500);
 }
@@ -1750,6 +1780,9 @@
 .eventcatalog-visualizer .px-2 {
   padding-inline: calc(var(--spacing) * 2);
 }
+.eventcatalog-visualizer .px-2\.5 {
+  padding-inline: calc(var(--spacing) * 2.5);
+}
 .eventcatalog-visualizer .px-3 {
   padding-inline: calc(var(--spacing) * 3);
 }
@@ -1856,6 +1889,9 @@
 .eventcatalog-visualizer .text-\[10px\] {
   font-size: 10px;
 }
+.eventcatalog-visualizer .text-\[11px\] {
+  font-size: 11px;
+}
 .eventcatalog-visualizer .text-\[12px\] {
   font-size: 12px;
 }
@@ -2097,6 +2133,9 @@
 .eventcatalog-visualizer .text-indigo-100 {
   color: var(--color-indigo-100);
 }
+.eventcatalog-visualizer .text-indigo-300 {
+  color: var(--color-indigo-300);
+}
 .eventcatalog-visualizer .text-indigo-900\/40 {
   color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 40%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -2118,6 +2157,12 @@
     color: color-mix(in oklab, var(--color-indigo-950) 40%, transparent);
   }
 }
+.eventcatalog-visualizer .text-indigo-950\/50 {
+  color: color-mix(in srgb, oklch(25.7% 0.09 281.288) 50%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    color: color-mix(in oklab, var(--color-indigo-950) 50%, transparent);
+  }
+}
 .eventcatalog-visualizer .text-indigo-950\/60 {
   color: color-mix(in srgb, oklch(25.7% 0.09 281.288) 60%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -2595,6 +2640,18 @@
   --tw-outline-style: none;
   outline-style: none;
 }
+.eventcatalog-visualizer .group-focus-within\:block {
+  .eventcatalog-visualizer &:is(:where(.group):focus-within *) {
+    display: block;
+  }
+}
+.eventcatalog-visualizer .group-hover\:block {
+  .eventcatalog-visualizer &:is(:where(.group):hover *) {
+    @media (hover: hover) {
+      display: block;
+    }
+  }
+}
 .eventcatalog-visualizer .group-hover\:text-\[rgb\(var\(--ec-accent\)\)\] {
   .eventcatalog-visualizer &:is(:where(.group):hover *) {
     @media (hover: hover) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventcatalog/visualiser",
-  "version": "3.20.3",
+  "version": "3.21.1",
   "description": "ReactFlow nodes and visualiser components for EventCatalog - framework agnostic",
   "main": "dist/index.js",
   "module": "dist/index.mjs",