@eventcatalog/core 3.36.5 → 3.37.0

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.36.5";
+var version = "3.37.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-VDTDZ4XR.js";
-import "../chunk-TGSOUKM7.js";
+} from "../chunk-6UFDH5SD.js";
+import "../chunk-C24AACHY.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -111,7 +111,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.36.5";
+var version = "3.37.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-J3ZV5QI5.js";
-import "../chunk-VDTDZ4XR.js";
+} from "../chunk-3N5OG33R.js";
+import "../chunk-6UFDH5SD.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-TGSOUKM7.js";
+import "../chunk-C24AACHY.js";
 import "../chunk-5T63CXKU.js";
 export {
   log_build_default as default

package/dist/{chunk-J3ZV5QI5.js → chunk-3N5OG33R.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-VDTDZ4XR.js";
+} from "./chunk-6UFDH5SD.js";
 import {
   countResources,
   serializeCounts

package/dist/{chunk-VDTDZ4XR.js → chunk-6UFDH5SD.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-TGSOUKM7.js";
+} from "./chunk-C24AACHY.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-TGSOUKM7.js → chunk-C24AACHY.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "3.36.5";
+var version = "3.37.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-2WL2AHTJ.js → chunk-G6DWKVUO.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-TGSOUKM7.js";
+} from "./chunk-C24AACHY.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/{chunk-CZV4WMQ2.js → chunk-R6AVEQA4.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-2WL2AHTJ.js";
+} from "./chunk-G6DWKVUO.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "3.36.5";
+var version = "3.37.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-TGSOUKM7.js";
+} from "./chunk-C24AACHY.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -114,7 +114,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.36.5";
+var version = "3.37.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -13,8 +13,8 @@ import {
 } from "./chunk-K3ZVEX2Y.js";
 import {
   log_build_default
-} from "./chunk-J3ZV5QI5.js";
-import "./chunk-VDTDZ4XR.js";
+} from "./chunk-3N5OG33R.js";
+import "./chunk-6UFDH5SD.js";
 import "./chunk-4UVFXLPI.js";
 import {
   catalogToAstro
@@ -28,13 +28,13 @@ import {
 } from "./chunk-ULZYHF3V.js";
 import {
   generate
-} from "./chunk-CZV4WMQ2.js";
+} from "./chunk-R6AVEQA4.js";
 import {
   logger
-} from "./chunk-2WL2AHTJ.js";
+} from "./chunk-G6DWKVUO.js";
 import {
   VERSION
-} from "./chunk-TGSOUKM7.js";
+} from "./chunk-C24AACHY.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/generate.cjs

@@ -78,7 +78,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.36.5";
+var version = "3.37.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-CZV4WMQ2.js";
-import "./chunk-2WL2AHTJ.js";
-import "./chunk-TGSOUKM7.js";
+} from "./chunk-R6AVEQA4.js";
+import "./chunk-G6DWKVUO.js";
+import "./chunk-C24AACHY.js";
 import "./chunk-5T63CXKU.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.36.5";
+var version = "3.37.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-2WL2AHTJ.js";
-import "../chunk-TGSOUKM7.js";
+} from "../chunk-G6DWKVUO.js";
+import "../chunk-C24AACHY.js";
 export {
   logger
 };

package/eventcatalog/src/components/FieldsExplorer/FieldsTable.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { SearchX, Copy, Check, AlertTriangle } from 'lucide-react';
 import { BoltIcon, ChatBubbleLeftIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid';
 import { buildUrl } from '@utils/url-builder';
+import { getCollectionTextColorClass } from '@utils/collection-colors';
 
 export interface FieldResult {
   path: string;
@@ -28,13 +29,6 @@ export interface FieldsTableProps {
   isScaleEnabled?: boolean;
 }
 
-const colorClasses: Record<string, string> = {
-  orange: 'text-orange-500',
-  blue: 'text-blue-500',
-  green: 'text-green-500',
-  gray: 'text-gray-500',
-};
-
 const getColorAndIconForMessageType = (type: string) => {
   switch (type) {
     case 'event':
@@ -58,7 +52,7 @@ function MessageBadge({ id, name, version, type }: { id: string; name?: string;
       onClick={(e) => e.stopPropagation()}
       className="group/msg inline-flex items-center gap-1.5 text-[0.8rem] text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-accent))] transition-colors"
     >
-      <Icon className={`h-3.5 w-3.5 ${colorClasses[color] || 'text-gray-500'} flex-shrink-0`} />
+      <Icon className={`h-3.5 w-3.5 ${getCollectionTextColorClass(color)} flex-shrink-0`} />
       <span className="truncate max-w-[160px] text-[rgb(var(--ec-page-text-muted))] group-hover/msg:text-[rgb(var(--ec-accent))]">
         {name || id}
       </span>

package/eventcatalog/src/components/MDX/Admonition.tsx

@@ -1,14 +1,10 @@
-import { InformationCircleIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
-
-type AdmonitionType = 'danger' | 'alert' | 'warning' | 'info' | 'note';
+type AdmonitionType = 'danger' | 'alert' | 'warning' | 'info' | 'note' | 'tip';
 
 interface AdmonitionConfig {
-  icon: typeof InformationCircleIcon;
+  iconPath: string;
   title: string;
   containerClasses: string;
-  iconClasses: string;
-  titleClasses: string;
-  contentClasses: string;
+  accentClasses: string;
 }
 
 const getConfigurationByType = (type: string): AdmonitionConfig => {
@@ -16,39 +12,38 @@ const getConfigurationByType = (type: string): AdmonitionConfig => {
     case 'danger':
     case 'alert':
       return {
-        icon: ExclamationTriangleIcon,
+        iconPath: 'M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86L7.86 2z M12 8v4 M12 16h.01',
         title: type === 'danger' ? 'Danger' : 'Alert',
-        containerClasses: 'bg-red-50 dark:bg-red-950/50 border-red-500',
-        iconClasses: 'text-red-500 dark:text-red-400',
-        titleClasses: 'text-red-600 dark:text-red-300',
-        contentClasses: 'text-red-700 dark:text-red-200',
+        containerClasses: 'bg-red-50/60 dark:bg-red-950/30 border border-red-200/70 dark:border-red-900/60',
+        accentClasses: 'text-red-700 dark:text-red-300',
       };
     case 'warning':
       return {
-        icon: ExclamationTriangleIcon,
+        iconPath: 'M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4 M12 17h.01',
         title: 'Warning',
-        containerClasses: 'bg-yellow-50 dark:bg-yellow-950/50 border-yellow-500',
-        iconClasses: 'text-yellow-500 dark:text-yellow-400',
-        titleClasses: 'text-yellow-600 dark:text-yellow-300',
-        contentClasses: 'text-yellow-700 dark:text-yellow-200',
+        containerClasses: 'bg-amber-50/60 dark:bg-amber-950/30 border border-amber-200/70 dark:border-amber-900/60',
+        accentClasses: 'text-amber-700 dark:text-amber-300',
       };
     case 'note':
       return {
-        icon: InformationCircleIcon,
+        iconPath: 'M12 20h9 M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z',
         title: 'Note',
-        containerClasses: 'bg-blue-50 dark:bg-blue-950/50 border-blue-500',
-        iconClasses: 'text-blue-500 dark:text-blue-400',
-        titleClasses: 'text-blue-600 dark:text-blue-300',
-        contentClasses: 'text-blue-700 dark:text-blue-200',
+        containerClasses: 'bg-slate-50/70 dark:bg-slate-900/40 border border-slate-200/70 dark:border-slate-700/60',
+        accentClasses: 'text-slate-600 dark:text-slate-300',
+      };
+    case 'tip':
+      return {
+        iconPath: 'M9 18h6 M10 22h4 M12 2a7 7 0 0 0-4 12.74V17h8v-2.26A7 7 0 0 0 12 2z',
+        title: 'Tip',
+        containerClasses: 'bg-emerald-50/60 dark:bg-emerald-900/40 border border-emerald-200/70 dark:border-emerald-700/80',
+        accentClasses: 'text-emerald-700 dark:text-emerald-300',
       };
     default:
       return {
-        icon: InformationCircleIcon,
+        iconPath: 'M12 2a10 10 0 100 20 10 10 0 000-20zM12 8h.01M11 12h1v4h1',
         title: 'Info',
-        containerClasses: 'bg-indigo-50 dark:bg-indigo-950/50 border-indigo-500',
-        iconClasses: 'text-indigo-500 dark:text-indigo-400',
-        titleClasses: 'text-indigo-600 dark:text-indigo-300',
-        contentClasses: 'text-indigo-700 dark:text-indigo-200',
+        containerClasses: 'bg-blue-50/60 dark:bg-blue-950/30 border border-blue-200/70 dark:border-blue-900/60',
+        accentClasses: 'text-blue-700 dark:text-blue-300',
       };
   }
 };
@@ -62,16 +57,31 @@ interface AdmonitionProps {
 
 export default function Admonition({ children, type = 'info', className = '', title }: AdmonitionProps) {
   const config = getConfigurationByType(type);
-  const Icon = config.icon;
 
   return (
-    <div className={`${config.containerClasses} border-l-4 p-4 my-4 ${className} rounded-md not-prose`}>
-      <div className="flex flex-col">
-        <div className="flex items-center justify-start">
-          <Icon className={`h-6 w-6 ${config.iconClasses} stroke-2`} aria-hidden="true" />
-          <h3 className={`ml-2 ${config.titleClasses} font-bold text-md`}>{title || config.title}</h3>
-        </div>
-        <div className={`mt-2 ${config.contentClasses} text-md`}>{children}</div>
+    <div
+      className={`ec-admonition ${config.containerClasses} rounded-md px-3 py-2.5 my-4 text-[0.85rem] leading-relaxed not-prose ${className}`}
+    >
+      <div className={`flex items-center gap-1.5 mb-1 ${config.accentClasses}`}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="lucide shrink-0"
+          aria-hidden="true"
+        >
+          <path d={config.iconPath} />
+        </svg>
+        <span className="text-[0.7rem] font-semibold uppercase tracking-wider">{title || config.title}</span>
+      </div>
+      <div className="prose prose-sm dark:prose-invert w-full max-w-none! prose-p:my-0.5 prose-p:text-inherit prose-p:text-[0.85rem] prose-p:leading-relaxed prose-code:text-[0.8rem]">
+        {children}
       </div>
     </div>
   );

package/eventcatalog/src/components/MDX/MessageTable/MessageTable.client.tsx

@@ -1,4 +1,5 @@
 import { getColorAndIconForCollection } from '@utils/collections/icons';
+import { getCollectionTextColorClass } from '@utils/collection-colors';
 import { buildUrl } from '@utils/url-builder';
 import { useState, useMemo, useCallback, memo } from 'react';
 
@@ -37,7 +38,7 @@ const MessageRow = memo(
         <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-[rgb(var(--ec-page-text))] sm:pl-6 relative">
           <a href={url} className="absolute inset-0 z-10" aria-label={`View details for ${message.name}`} />
           <div className="flex items-center gap-2 relative">
-            <Icon className={`h-5 w-5 text-${color}-500`} />
+            <Icon className={`h-5 w-5 ${getCollectionTextColorClass(color)}`} />
             <span className="group-hover:text-blue-600 break-all">{message.name}</span>
           </div>
         </td>

package/eventcatalog/src/components/MDX/ResourceGroupTable/ResourceGroupTable.client.tsx

@@ -1,4 +1,5 @@
 import { getColorAndIconForCollection } from '@utils/collections/icons';
+import { getCollectionTextColorClass } from '@utils/collection-colors';
 import { buildUrl } from '@utils/url-builder';
 import { useState, useMemo, useCallback, memo } from 'react';
 
@@ -41,7 +42,7 @@ const ResourceRow = memo(
         <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-[rgb(var(--ec-page-text))] sm:pl-6 relative">
           <a href={url} className="absolute inset-0 z-10" aria-label={`View details for ${resource.name}`} />
           <div className="flex items-center gap-2 relative">
-            <Icon className={`h-5 w-5 text-${color}-500`} />
+            <Icon className={`h-5 w-5 ${getCollectionTextColorClass(color)}`} />
             <span className="group-hover:text-[rgb(var(--ec-accent))] break-all">{resource.name}</span>
           </div>
         </td>

package/eventcatalog/src/components/MDX/ResourceLink/ResourceLink.astro

@@ -2,9 +2,11 @@
 import { buildUrl } from '@utils/url-builder';
 import { getItemsFromCollectionByIdAndSemverOrLatest, resourceToCollectionMap } from '@utils/collections/util';
 import { getCollection } from 'astro:content';
+import { getResourceReferenceStyle } from '@utils/resource-reference-colors';
 
 const { id, version, type } = Astro.props;
 const collection = resourceToCollectionMap[type as keyof typeof resourceToCollectionMap];
+const resourceReferenceStyle = getResourceReferenceStyle(type);
 
 let slotHTML = await Astro.slots.render('default');
 let href = '#';
@@ -43,7 +45,11 @@ try {
 
 {
   !linkHasError && (
-    <a href={href} class="text-[rgb(var(--ec-accent))] hover:text-[rgb(var(--ec-accent-hover))]">
+    <a
+      href={href}
+      class="rounded px-1 -mx-1 text-[var(--ec-resource-ref-color)] hover:bg-[var(--ec-resource-ref-bg)] transition-colors"
+      style={resourceReferenceStyle}
+    >
       {slotHTML}
     </a>
   )

package/eventcatalog/src/components/MDX/ResourceRef/ResourceRef.astro

@@ -14,6 +14,8 @@ import {
 } from '@utils/collections/util';
 import { getCollection } from 'astro:content';
 import { getServiceSpecifications, getSpecUrl, getSpecLabel } from '@components/Grids/specification-utils';
+import { getResourceReferenceStyle } from '@utils/resource-reference-colors';
+import { isIconPath, resolveIconUrl } from '@utils/icon';
 
 interface Props {
   type:
@@ -29,7 +31,8 @@ interface Props {
     | 'container'
     | 'user'
     | 'team'
-    | 'doc';
+    | 'doc'
+    | 'data-product';
   version?: string;
 }
 
@@ -56,22 +59,21 @@ const normalizedResourceId = normalizeCustomDocPath(resourceId).toLowerCase();
 // Map type to collection name
 const collection = resourceToCollectionMap[type as keyof typeof resourceToCollectionMap];
 
-// Type-specific styling using CSS variables from theme.css
-// Maps to --ec-badge-{type}-text variables for consistency
-const typeStyles: Record<string, { borderColor: string; label: string }> = {
-  entity: { borderColor: 'var(--ec-badge-query-text)', label: 'Entity' }, // purple
-  service: { borderColor: 'var(--ec-badge-service-text)', label: 'Service' }, // pink
-  event: { borderColor: 'var(--ec-badge-event-text)', label: 'Event' }, // amber/orange
-  command: { borderColor: 'var(--ec-badge-command-text)', label: 'Command' }, // pink
-  query: { borderColor: 'var(--ec-badge-query-text)', label: 'Query' }, // purple
-  domain: { borderColor: 'var(--ec-badge-domain-text)', label: 'Domain' }, // yellow
-  flow: { borderColor: 'var(--ec-badge-design-text)', label: 'Flow' }, // teal
-  channel: { borderColor: 'var(--ec-badge-channel-text)', label: 'Channel' }, // indigo
-  diagram: { borderColor: 'var(--ec-badge-default-text)', label: 'Diagram' }, // gray
-  container: { borderColor: 'var(--ec-badge-default-text)', label: 'Container' }, // gray
-  user: { borderColor: 'var(--ec-badge-default-text)', label: 'User' }, // gray
-  team: { borderColor: 'var(--ec-badge-default-text)', label: 'Team' }, // gray
-  doc: { borderColor: 'var(--ec-badge-default-text)', label: 'Doc' }, // gray
+const typeLabels: Record<string, string> = {
+  entity: 'Entity',
+  service: 'Service',
+  event: 'Event',
+  command: 'Command',
+  query: 'Query',
+  domain: 'Domain',
+  flow: 'Flow',
+  channel: 'Channel',
+  diagram: 'Diagram',
+  container: 'Container',
+  user: 'User',
+  team: 'Team',
+  doc: 'Custom Doc',
+  'data-product': 'Data Product',
 };
 
 // SVG icons for each type (from heroicons outline)
@@ -97,11 +99,14 @@ const typeIcons: Record<string, string> = {
     '<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />', // Database
   user: '<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />', // User
   team: '<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />', // UserGroup
-  doc: '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-8.25a2.25 2.25 0 00-2.25-2.25h-10.5A2.25 2.25 0 004.5 6v12a2.25 2.25 0 002.25 2.25h5.25M16.5 18.75h6m-3-3v6" />', // Document with plus
+  doc: '<path stroke-linecap="round" stroke-linejoin="round" d="M14 2v4a2 2 0 002 2h4" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7z" /><path stroke-linecap="round" stroke-linejoin="round" d="M10 9H8" /><path stroke-linecap="round" stroke-linejoin="round" d="M16 13H8" /><path stroke-linecap="round" stroke-linejoin="round" d="M16 17H8" />', // FileText
+  'data-product':
+    '<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25M21 7.5v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />', // Cube
 };
 
-const style = typeStyles[type] || typeStyles.entity;
+const label = typeLabels[type] || typeLabels.entity;
 const iconPath = typeIcons[type] || typeIcons.entity;
+const resourceReferenceStyle = getResourceReferenceStyle(type);
 
 let resource: any = null;
 let href = '#';
@@ -172,6 +177,7 @@ const hasVisualizer = ['domain', 'service', 'event', 'query', 'command', 'contai
 // Check deprecation status
 const deprecation = resource ? getDeprecatedDetails(resource) : null;
 const isDeprecated = deprecation?.isMarkedAsDeprecated || false;
+const resourceIconUrl = isIconPath(resource?.data?.styles?.icon) ? resolveIconUrl(resource.data.styles.icon) : null;
 
 // Get owners (first 2)
 const owners = resource?.data?.owners?.slice(0, 2) || [];
@@ -234,7 +240,7 @@ const hasSpecifications = specifications.length > 0;
 const tooltipId = `ref-tooltip-${Math.random().toString(36).slice(2, 9)}`;
 ---
 
-<span class="resource-ref-wrapper inline">
+<span class="resource-ref-wrapper inline relative">
   {
     hasError ? (
       <span
@@ -249,14 +255,13 @@ const tooltipId = `ref-tooltip-${Math.random().toString(36).slice(2, 9)}`;
           href={href}
           class:list={[
             'resource-ref-trigger inline-flex items-center gap-1 px-1 -mx-1 rounded font-medium underline decoration-dotted decoration-2 underline-offset-[3px] transition-colors',
-            isDeprecated
-              ? 'text-amber-700 dark:text-amber-400 decoration-amber-500/60'
-              : 'text-[rgb(var(--ec-accent-text))] decoration-[rgb(var(--ec-primary))] hover:bg-[rgb(var(--ec-accent-subtle))]',
+            'text-[var(--ec-resource-ref-color)] decoration-[var(--ec-resource-ref-color)] hover:bg-[var(--ec-resource-ref-bg)]',
           ]}
+          style={resourceReferenceStyle}
           data-tooltip-id={tooltipId}
         >
           <svg
-            class="w-3.5 h-3.5 flex-shrink-0 text-[rgb(var(--ec-primary))]"
+            class="w-3.5 h-3.5 flex-shrink-0 text-[var(--ec-resource-ref-color)]"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -271,7 +276,7 @@ const tooltipId = `ref-tooltip-${Math.random().toString(36).slice(2, 9)}`;
         <span
           id={tooltipId}
           class="resource-ref-tooltip fixed w-80 bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] border-l-[3px] rounded-r-lg rounded-l-none shadow-lg shadow-black/8 z-[9999] text-left overflow-hidden opacity-0 pointer-events-none transition-all duration-150 scale-95 origin-top-left"
-          style={`border-left-color: rgb(${style.borderColor});`}
+          style={`${resourceReferenceStyle}; border-left-color: var(--ec-resource-ref-color);`}
         >
           {/* Deprecation banner */}
           {isDeprecated && (
@@ -289,29 +294,41 @@ const tooltipId = `ref-tooltip-${Math.random().toString(36).slice(2, 9)}`;
 
           <span class="block p-3">
             {/* Header: Name with icon top-right */}
-            <span class="flex justify-between items-start mb-2">
-              <span class="flex flex-col">
-                <span class="flex items-baseline gap-2">
-                  <span class="font-semibold text-[rgb(var(--ec-page-text))] text-[0.95rem] leading-tight">
-                    {resource?.data?.name || resourceId}
-                  </span>
-                  <span class="text-[0.65rem] text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wide">{style.label}</span>
+            <span class="grid grid-cols-[minmax(0,1fr)_1.25rem] items-start gap-3 border-b border-[rgb(var(--ec-page-border))] pb-2 mb-3">
+              <span class="flex min-w-0 flex-col">
+                <span class="font-semibold text-[rgb(var(--ec-page-text))] text-[0.95rem] leading-tight">
+                  {resource?.data?.name || resourceId}
                 </span>
-                {isVersionedResource && (
-                  <span class="text-[0.7rem] font-mono text-[rgb(var(--ec-page-text-muted))] mt-0.5">
-                    v{resource?.data?.version}
-                  </span>
+                <span class="mt-0.5 flex items-center gap-1.5 text-[0.7rem] text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wide">
+                  <span class="text-[0.65rem] text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wide">{label}</span>
+                  {isVersionedResource && (
+                    <>
+                      <span aria-hidden="true">•</span>
+                      <span class="font-mono normal-case">v{resource?.data?.version}</span>
+                    </>
+                  )}
+                </span>
+              </span>
+              <span class="flex h-[24px] w-[24px] items-start justify-end mr-4">
+                {resourceIconUrl ? (
+                  <img
+                    src={resourceIconUrl}
+                    alt=""
+                    class="not-prose m-0 block  h-[24px] w-[24px] object-contain"
+                    loading="lazy"
+                  />
+                ) : (
+                  <svg
+                    class="h-5 w-5"
+                    style="color: var(--ec-resource-ref-color);"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    set:html={iconPath}
+                  />
                 )}
               </span>
-              <svg
-                class="w-5 h-5 flex-shrink-0"
-                style={`color: rgb(${style.borderColor});`}
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="1.5"
-                set:html={iconPath}
-              />
             </span>
 
             {/* Summary */}
@@ -413,7 +430,7 @@ const tooltipId = `ref-tooltip-${Math.random().toString(36).slice(2, 9)}`;
             ) : null}
 
             {/* Actions */}
-            <span class="flex items-center justify-between pt-2 border-t border-[rgb(var(--ec-page-border))] text-[0.7rem]">
+            <span class="flex items-center justify-between pt-1 text-[0.7rem]">
               <span class="flex items-center gap-3">
                 {type === 'flow' && (
                   <a
@@ -450,7 +467,11 @@ const tooltipId = `ref-tooltip-${Math.random().toString(36).slice(2, 9)}`;
                   </a>
                 )}
               </span>
-              <a href={href} class="text-[rgb(var(--ec-accent))] hover:underline font-medium">
+              <a
+                href={href}
+                class="text-[var(--ec-resource-ref-color)] hover:underline font-medium"
+                style="color: var(--ec-resource-ref-color);"
+              >
                 {type === 'diagram' ? 'View diagram' : type === 'doc' ? 'View doc' : 'View docs'}
               </a>
             </span>

package/eventcatalog/src/components/SideNav/NestedSideBar/utils.ts

@@ -14,6 +14,7 @@ export const getBadgeClasses = (badge: string): string => {
     message: 'bg-[rgb(var(--ec-badge-message-bg))] text-[rgb(var(--ec-badge-message-text))]',
     design: 'bg-[rgb(var(--ec-badge-design-bg))] text-[rgb(var(--ec-badge-design-text))]',
     channel: 'bg-[rgb(var(--ec-badge-channel-bg))] text-[rgb(var(--ec-badge-channel-text))]',
+    container: 'bg-[rgb(var(--ec-badge-container-bg))] text-[rgb(var(--ec-badge-container-text))]',
     'data product': 'bg-[rgb(var(--ec-badge-data-product-bg))] text-[rgb(var(--ec-badge-data-product-text))]',
   };
   return badgeColors[badge.toLowerCase()] || 'bg-[rgb(var(--ec-badge-default-bg))] text-[rgb(var(--ec-badge-default-text))]';