@eventcatalog/core 3.36.4 → 3.37.0

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/[docType]/[docId]/index.astro

@@ -2,6 +2,7 @@
 import { render } from 'astro:content';
 
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import Admonition from '@components/MDX/Admonition';
 import components from '@components/MDX/components';
 import CopyAsMarkdown from '@components/CopyAsMarkdown';
 import { buildUrl } from '@utils/url-builder';
@@ -93,33 +94,14 @@ const pagefindAttributes =
         <div data-pagefind-ignore>
           {
             props.data.version !== props.data.latestVersion && (
-              <div class="rounded-md bg-[rgb(var(--ec-accent-subtle))] p-4 not-prose my-4">
-                <div class="flex">
-                  <div class="flex-shrink-0">
-                    <svg class="h-5 w-5 text-[rgb(var(--ec-accent))]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                      <path
-                        fill-rule="evenodd"
-                        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
-                        clip-rule="evenodd"
-                      />
-                    </svg>
-                  </div>
-                  <div class="ml-3">
-                    <h3 class="text-sm font-medium text-[rgb(var(--ec-accent-text))]">New version found</h3>
-                    <div class="mt-2 text-sm text-[rgb(var(--ec-accent-text))]">
-                      <p>
-                        You are looking at a previous version of the {singularResourceName} doc <strong>{title}</strong>.{' '}
-                        <a
-                          class="underline hover:text-primary block pt-2"
-                          href={buildUrl(`${docsBasePath}/${props.data.latestVersion}`)}
-                        >
-                          The latest version of this doc is <span>v{props.data.latestVersion}</span> &rarr;
-                        </a>
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <Admonition type="warning" title="New version found">
+                <p>
+                  You are looking at a previous version of the {singularResourceName} doc <strong>{title}</strong>.{' '}
+                  <a class="underline block pt-2" href={buildUrl(`${docsBasePath}/${props.data.latestVersion}`)}>
+                    The latest version of this doc is <span>v{props.data.latestVersion}</span> &rarr;
+                  </a>
+                </p>
+              </Admonition>
             )
           }
         </div>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/graphql/[filename].astro

@@ -109,34 +109,18 @@ const pagefindAttributes =
         <div data-pagefind-ignore>
           {
             data.version !== data.latestVersion && (
-              <div class="rounded-md bg-[rgb(var(--ec-accent-subtle))] p-4 not-prose my-4">
-                <div class="flex">
-                  <div class="flex-shrink-0">
-                    <svg class="h-5 w-5 text-[rgb(var(--ec-accent))]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                      <path
-                        fill-rule="evenodd"
-                        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
-                        clip-rule="evenodd"
-                      />
-                    </svg>
-                  </div>
-                  <div class="ml-3">
-                    <h3 class="text-sm font-medium text-[rgb(var(--ec-accent-text))]">New version found</h3>
-                    <div class="mt-2 text-sm text-[rgb(var(--ec-accent-text))]">
-                      <p>
-                        You are looking at a previous version of the service <strong>{data.name}</strong>.{' '}
-                        <a
-                          class="underline hover:text-primary block pt-2"
-                          href={buildUrl(`/docs/${collection}/${data.id}/${data.latestVersion}/graphql/${filename}`)}
-                        >
-                          The latest version of this GraphQL schema is
-                          <span>v{data.latestVersion}</span> &rarr;
-                        </a>
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <Admonition type="warning" title="New version found">
+                <p>
+                  You are looking at a previous version of the service <strong>{data.name}</strong>.{' '}
+                  <a
+                    class="underline block pt-2"
+                    href={buildUrl(`/docs/${collection}/${data.id}/${data.latestVersion}/graphql/${filename}`)}
+                  >
+                    The latest version of this GraphQL schema is
+                    <span>v{data.latestVersion}</span> &rarr;
+                  </a>
+                </p>
+              </Admonition>
             )
           }
         </div>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -349,10 +349,7 @@ if (!hasCurrentFlowEmbed && !hasCurrentPageNodeGraph) {
                     )
                   }
                   <div class="flex items-center gap-2">
-                    <h2
-                      id="doc-page-header"
-                      class={`text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))] ${props.data.deprecated && hasDeprecated ? 'text-red-500' : ''}`}
-                    >
+                    <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">
                       {props.data.name}
                       {props.data.latestVersion !== props.data.version && <span>(v{props.data.version})</span>}
                     </h2>
@@ -485,35 +482,19 @@ if (!hasCurrentFlowEmbed && !hasCurrentPageNodeGraph) {
         <div data-pagefind-ignore>
           {
             props.data.version !== props.data.latestVersion && (
-              <div class="rounded-md bg-[rgb(var(--ec-accent-subtle))] p-4 not-prose my-4">
-                <div class="flex">
-                  <div class="flex-shrink-0">
-                    <svg class="h-5 w-5 text-[rgb(var(--ec-accent))]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                      <path
-                        fill-rule="evenodd"
-                        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
-                        clip-rule="evenodd"
-                      />
-                    </svg>
-                  </div>
-                  <div class="ml-3">
-                    <h3 class="text-sm font-medium text-[rgb(var(--ec-accent-text))]">New version found</h3>
-                    <div class="mt-2 text-sm text-[rgb(var(--ec-accent-text))]">
-                      <p>
-                        You are looking at a previous version of the {props.collection.slice(0, props.collection.length - 1)}{' '}
-                        <strong>{props.data.name}</strong>.{' '}
-                        <a
-                          class="underline hover:text-primary block pt-2"
-                          href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.latestVersion}`)}
-                        >
-                          The latest version of this {props.collection.slice(0, props.collection.length - 1)} is
-                          <span>v{props.data.latestVersion}</span> &rarr;
-                        </a>
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <Admonition type="warning" title="New version found">
+                <p>
+                  You are looking at a previous version of the {props.collection.slice(0, props.collection.length - 1)}{' '}
+                  <strong>{props.data.name}</strong>.{' '}
+                  <a
+                    class="underline block pt-2"
+                    href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.latestVersion}`)}
+                  >
+                    The latest version of this {props.collection.slice(0, props.collection.length - 1)} is
+                    <span>v{props.data.latestVersion}</span> &rarr;
+                  </a>
+                </p>
+              </Admonition>
             )
           }
         </div>

package/eventcatalog/src/styles/tailwind.css

@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @plugin "@tailwindcss/typography";
 
@@ -24,23 +24,41 @@
   --animate-contentShow: contentShow 200ms ease-out;
 
   @keyframes progress-bar {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
   }
 
   @keyframes progress-bar-reverse {
-    0% { transform: translateX(100%); }
-    100% { transform: translateX(-100%); }
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
   }
 
   @keyframes overlayShow {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
 
   @keyframes contentShow {
-    from { opacity: 0; transform: scale(0.96); }
-    to { opacity: 1; transform: scale(1); }
+    from {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
   }
 }
 
@@ -49,20 +67,20 @@
  * at runtime (e.g. `bg-${color}-50`). Tailwind v4 can't detect these from source
  * scanning, so we explicitly declare them here.
  *
- * Colors used: orange, blue, green, emerald, amber, violet, pink, purple, gray, yellow, teal
+ * Colors used: orange, blue, green, emerald, amber, violet, pink, purple, gray, yellow, teal, cyan, indigo
  * Used in: SchemaListItem, Grids/components, SchemaExplorer, MessageGrid
  */
-@source inline("bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{50,100}");
-@source inline("bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500/{10,20}");
-@source inline("text-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{400,500,600,700}");
-@source inline("border-l-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500");
+@source inline("bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{50,100}");
+@source inline("bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-500/{10,20}");
+@source inline("text-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{400,500,600,700}");
+@source inline("border-l-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-500");
 @source inline("ring-2");
-@source inline("ring-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500");
+@source inline("ring-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-500");
 
 /* Border color variants for MessageGrid cards */
-@source inline("border-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{200,300}");
-@source inline("{dark:,}border-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500/{30,50}");
-@source inline("{hover:,dark:hover:,}border-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal}-{300,400,500,500/50}");
+@source inline("border-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{200,300}");
+@source inline("{dark:,}border-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-500/{30,50}");
+@source inline("{hover:,dark:hover:,}border-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{300,400,500,500/50}");
 
 /* Explicit safelist classes used in various components */
 @source inline("bg-{blue,orange}-600");
@@ -72,13 +90,13 @@
 @source inline("text-[5px] text-[9px] min-h-[100px]");
 
 /* Gradient classes for dynamic colors */
-@source inline("from-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{100,200,300,400,500,600,700}");
-@source inline("to-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{100,200,300,400,500,600,700}");
+@source inline("from-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{100,200,300,400,500,600,700}");
+@source inline("to-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{100,200,300,400,500,600,700}");
 
 /* Dark variant safelist for dynamic colors */
-@source inline("{dark:,}bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{100,200,400,500}");
-@source inline("{dark:,}bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500/{20,30}");
-@source inline("{dark:,}text-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{100,300,400,500,800}");
-@source inline("{dark:,group-hover:,}text-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{100,300,400,500,600,800}");
-@source inline("{dark:,}ring-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500/30");
-@source inline("{group-hover:,dark:group-hover:,}text-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{400,600}");
+@source inline("{dark:,}bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{100,200,400,500}");
+@source inline("{dark:,}bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-500/{20,30}");
+@source inline("{dark:,}text-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{100,300,400,500,800}");
+@source inline("{dark:,group-hover:,}text-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{100,300,400,500,600,800}");
+@source inline("{dark:,}ring-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-500/30");
+@source inline("{group-hover:,dark:group-hover:,}text-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{400,600}");

package/eventcatalog/src/styles/theme.css

@@ -108,6 +108,8 @@
   --ec-badge-design-text: 15 118 110; /* teal-700 */
   --ec-badge-channel-bg: 224 231 255; /* indigo-100 */
   --ec-badge-channel-text: 67 56 202; /* indigo-700 */
+  --ec-badge-container-bg: 224 231 255; /* indigo-100 */
+  --ec-badge-container-text: 67 56 202; /* indigo-700 */
   --ec-badge-data-product-bg: 219 234 254; /* blue-100 */
   --ec-badge-data-product-text: 30 64 175; /* blue-800 */
   --ec-badge-default-bg: 243 244 246; /* gray-100 */
@@ -214,6 +216,8 @@
   --ec-badge-design-text: 94 234 212; /* teal-300 */
   --ec-badge-channel-bg: 49 46 129 / 0.3; /* indigo-900/30 */
   --ec-badge-channel-text: 165 180 252; /* indigo-300 */
+  --ec-badge-container-bg: 49 46 129 / 0.3; /* indigo-900/30 */
+  --ec-badge-container-text: 165 180 252; /* indigo-300 */
   --ec-badge-data-product-bg: 30 64 175 / 0.3; /* blue-800/30 */
   --ec-badge-data-product-text: 147 197 253; /* blue-300 */
   --ec-badge-default-bg: 63 63 70 / 0.3; /* zinc-700/30 */

package/eventcatalog/src/styles/themes/forest.css

@@ -101,6 +101,8 @@
   --ec-badge-design-text: 22 101 52; /* green-800 */
   --ec-badge-channel-bg: 224 231 255; /* indigo-100 */
   --ec-badge-channel-text: 67 56 202; /* indigo-700 */
+  --ec-badge-container-bg: 224 231 255; /* indigo-100 */
+  --ec-badge-container-text: 67 56 202; /* indigo-700 */
   --ec-badge-data-product-bg: 219 234 254; /* blue-100 */
   --ec-badge-data-product-text: 30 64 175; /* blue-800 */
   --ec-badge-default-bg: 240 253 244; /* green-50 */
@@ -198,6 +200,8 @@
   --ec-badge-design-text: 134 239 172; /* green-300 */
   --ec-badge-channel-bg: 49 46 129 / 0.3; /* indigo-900/30 */
   --ec-badge-channel-text: 165 180 252; /* indigo-300 */
+  --ec-badge-container-bg: 49 46 129 / 0.3; /* indigo-900/30 */
+  --ec-badge-container-text: 165 180 252; /* indigo-300 */
   --ec-badge-data-product-bg: 30 64 175 / 0.3; /* blue-800/30 */
   --ec-badge-data-product-text: 147 197 253; /* blue-300 */
   --ec-badge-default-bg: 55 65 81 / 0.3; /* gray-700/30 */

package/eventcatalog/src/styles/themes/ocean.css

@@ -101,6 +101,8 @@
   --ec-badge-design-text: 15 118 110; /* teal-700 */
   --ec-badge-channel-bg: 224 231 255; /* indigo-100 */
   --ec-badge-channel-text: 67 56 202; /* indigo-700 */
+  --ec-badge-container-bg: 224 231 255; /* indigo-100 */
+  --ec-badge-container-text: 67 56 202; /* indigo-700 */
   --ec-badge-data-product-bg: 219 234 254; /* blue-100 */
   --ec-badge-data-product-text: 30 64 175; /* blue-800 */
   --ec-badge-default-bg: 240 253 250; /* teal-50 */
@@ -203,6 +205,8 @@
   --ec-badge-design-text: 94 234 212; /* teal-300 */
   --ec-badge-channel-bg: 49 46 129 / 0.3; /* indigo-900/30 */
   --ec-badge-channel-text: 165 180 252; /* indigo-300 */
+  --ec-badge-container-bg: 49 46 129 / 0.3; /* indigo-900/30 */
+  --ec-badge-container-text: 165 180 252; /* indigo-300 */
   --ec-badge-data-product-bg: 30 64 175 / 0.3; /* blue-800/30 */
   --ec-badge-data-product-text: 147 197 253; /* blue-300 */
   --ec-badge-default-bg: 51 65 85 / 0.3; /* slate-700/30 */

package/eventcatalog/src/styles/themes/sapphire.css

@@ -101,6 +101,8 @@
   --ec-badge-design-text: 37 99 235; /* blue-600 */
   --ec-badge-channel-bg: 224 231 255; /* indigo-100 */
   --ec-badge-channel-text: 67 56 202; /* indigo-700 */
+  --ec-badge-container-bg: 224 231 255; /* indigo-100 */
+  --ec-badge-container-text: 67 56 202; /* indigo-700 */
   --ec-badge-data-product-bg: 219 234 254; /* blue-100 */
   --ec-badge-data-product-text: 30 64 175; /* blue-800 */
   --ec-badge-default-bg: 239 246 255; /* blue-50 */
@@ -198,6 +200,8 @@
   --ec-badge-design-text: 147 197 253; /* blue-300 */
   --ec-badge-channel-bg: 49 46 129 / 0.3; /* indigo-900/30 */
   --ec-badge-channel-text: 165 180 252; /* indigo-300 */
+  --ec-badge-container-bg: 49 46 129 / 0.3; /* indigo-900/30 */
+  --ec-badge-container-text: 165 180 252; /* indigo-300 */
   --ec-badge-data-product-bg: 30 64 175 / 0.3; /* blue-800/30 */
   --ec-badge-data-product-text: 147 197 253; /* blue-300 */
   --ec-badge-default-bg: 51 65 85 / 0.3; /* slate-700/30 */

package/eventcatalog/src/styles/themes/sunset.css

@@ -101,6 +101,8 @@
   --ec-badge-design-text: 234 88 12; /* orange-600 */
   --ec-badge-channel-bg: 224 231 255; /* indigo-100 */
   --ec-badge-channel-text: 67 56 202; /* indigo-700 */
+  --ec-badge-container-bg: 224 231 255; /* indigo-100 */
+  --ec-badge-container-text: 67 56 202; /* indigo-700 */
   --ec-badge-data-product-bg: 219 234 254; /* blue-100 */
   --ec-badge-data-product-text: 30 64 175; /* blue-800 */
   --ec-badge-default-bg: 255 247 237; /* orange-50 */
@@ -198,6 +200,8 @@
   --ec-badge-design-text: 253 186 116; /* orange-300 */
   --ec-badge-channel-bg: 49 46 129 / 0.3; /* indigo-900/30 */
   --ec-badge-channel-text: 165 180 252; /* indigo-300 */
+  --ec-badge-container-bg: 49 46 129 / 0.3; /* indigo-900/30 */
+  --ec-badge-container-text: 165 180 252; /* indigo-300 */
   --ec-badge-data-product-bg: 30 64 175 / 0.3; /* blue-800/30 */
   --ec-badge-data-product-text: 147 197 253; /* blue-300 */
   --ec-badge-default-bg: 64 64 64 / 0.3; /* neutral-700/30 */

package/eventcatalog/src/utils/collection-colors.ts

@@ -0,0 +1,76 @@
+export type CollectionColor =
+  | 'orange'
+  | 'blue'
+  | 'green'
+  | 'pink'
+  | 'yellow'
+  | 'teal'
+  | 'purple'
+  | 'red'
+  | 'gray'
+  | 'cyan'
+  | 'indigo';
+
+export const getColorForCollection = (collection: string): CollectionColor => {
+  switch (collection) {
+    case 'events':
+      return 'orange';
+    case 'commands':
+      return 'blue';
+    case 'queries':
+      return 'green';
+    case 'flows':
+      return 'teal';
+    case 'teams':
+      return 'gray';
+    case 'users':
+      return 'gray';
+    case 'channels':
+      return 'purple';
+    case 'ubiquitousLanguages':
+      return 'green';
+    case 'entities':
+      return 'purple';
+    case 'domains':
+      return 'yellow';
+    case 'services':
+      return 'pink';
+    case 'data-products':
+      return 'cyan';
+    case 'containers':
+      return 'indigo';
+    default:
+      return 'gray';
+  }
+};
+
+export const tailwind500RgbByColor: Record<CollectionColor, string> = {
+  orange: '249 115 22',
+  blue: '59 130 246',
+  green: '34 197 94',
+  pink: '236 72 153',
+  yellow: '234 179 8',
+  teal: '20 184 166',
+  purple: '168 85 247',
+  red: '239 68 68',
+  gray: '107 114 128',
+  cyan: '6 182 212',
+  indigo: '99 102 241',
+};
+
+export const collectionTextColorClassByColor: Record<CollectionColor, string> = {
+  orange: 'text-orange-500',
+  blue: 'text-blue-500',
+  green: 'text-green-500',
+  pink: 'text-pink-500',
+  yellow: 'text-yellow-500',
+  teal: 'text-teal-500',
+  purple: 'text-purple-500',
+  red: 'text-red-500',
+  gray: 'text-gray-500',
+  cyan: 'text-cyan-500',
+  indigo: 'text-indigo-500',
+};
+
+export const getCollectionTextColorClass = (color: string, fallback = 'text-gray-500'): string =>
+  collectionTextColorClassByColor[color as CollectionColor] || fallback;

package/eventcatalog/src/utils/collections/icons.ts

@@ -13,6 +13,7 @@ import {
   CubeIcon,
 } from '@heroicons/react/24/outline';
 import { BookText, Box, DatabaseIcon } from 'lucide-react';
+import { getColorForCollection } from '@utils/collection-colors';
 
 export const getIconForCollection = (collection: string) => {
   switch (collection) {
@@ -53,33 +54,5 @@ export const getIconForCollection = (collection: string) => {
 
 export const getColorAndIconForCollection = (collection: string) => {
   const icon = getIconForCollection(collection);
-
-  switch (collection) {
-    case 'events':
-      return { color: 'orange', Icon: icon };
-    case 'commands':
-      return { color: 'blue', Icon: icon };
-    case 'queries':
-      return { color: 'green', Icon: icon };
-    case 'flows':
-      return { color: 'teal', Icon: icon };
-    case 'teams':
-      return { color: 'red', Icon: icon };
-    case 'users':
-      return { color: 'gray', Icon: icon };
-    case 'channels':
-      return { color: 'purple', Icon: icon };
-    case 'ubiquitousLanguages':
-      return { color: 'green', Icon: icon };
-    case 'entities':
-      return { color: 'purple', Icon: icon };
-    case 'domains':
-      return { color: 'yellow', Icon: icon };
-    case 'services':
-      return { color: 'pink', Icon: icon };
-    case 'data-products':
-      return { color: 'cyan', Icon: icon };
-    default:
-      return { color: 'gray', Icon: icon };
-  }
+  return { color: getColorForCollection(collection), Icon: icon };
 };

package/eventcatalog/src/utils/resource-reference-colors.ts

@@ -0,0 +1,49 @@
+import { getColorForCollection, tailwind500RgbByColor, type CollectionColor } from './collection-colors';
+import { resourceToCollectionMap } from './collections/util';
+
+export type ResourceReferenceType =
+  | 'entity'
+  | 'service'
+  | 'event'
+  | 'command'
+  | 'query'
+  | 'domain'
+  | 'flow'
+  | 'channel'
+  | 'diagram'
+  | 'container'
+  | 'user'
+  | 'team'
+  | 'doc'
+  | 'data-product';
+
+const resourceTypeToCollection = {
+  ...resourceToCollectionMap,
+  doc: 'customPages',
+} as Record<ResourceReferenceType, string>;
+
+export const getResourceReferenceColorName = (type: string): CollectionColor => {
+  const collection = resourceTypeToCollection[type as ResourceReferenceType] || '';
+  return getColorForCollection(collection);
+};
+
+export const getResourceReferenceStyle = (type: string): string => {
+  if (type === 'doc') {
+    return [
+      '--ec-resource-ref-bg: rgb(var(--ec-accent) / 0.12)',
+      '--ec-resource-ref-color: rgb(var(--ec-accent))',
+      'color: var(--ec-resource-ref-color)',
+      'text-decoration-color: var(--ec-resource-ref-color)',
+    ].join('; ');
+  }
+
+  const color = getResourceReferenceColorName(type);
+  const rgb = tailwind500RgbByColor[color];
+
+  return [
+    `--ec-resource-ref-bg: rgb(${rgb} / 0.12)`,
+    `--ec-resource-ref-color: rgb(${rgb})`,
+    'color: var(--ec-resource-ref-color)',
+    'text-decoration-color: var(--ec-resource-ref-color)',
+  ].join('; ');
+};

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "3.36.4",
+  "version": "3.37.0",
   "publishConfig": {
     "access": "public"
   },
@@ -107,8 +107,8 @@
     "uuid": "^10.0.0",
     "zod": "^4.3.6",
     "@eventcatalog/linter": "1.0.23",
-    "@eventcatalog/visualiser": "^3.20.3",
-    "@eventcatalog/sdk": "2.21.1"
+    "@eventcatalog/sdk": "2.21.1",
+    "@eventcatalog/visualiser": "^3.21.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",