npm - @eventcatalog/core - Versions diffs - 3.36.4 → 3.37.0 - Mend

@eventcatalog/core 3.36.4 → 3.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

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

@@ -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 CHANGED Viewed

@@ -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))]';

package/eventcatalog/src/components/Tables/Discover/columns.tsx CHANGED Viewed

@@ -4,26 +4,13 @@ import { DocumentTextIcon, MapIcon } from '@heroicons/react/24/solid';
 import { ArrowDownIcon, ArrowUpIcon, EllipsisVerticalIcon, StarIcon } from '@heroicons/react/24/outline';
 import { buildUrl } from '@utils/url-builder';
 import { getColorAndIconForCollection } from '@utils/collections/icons';
+import { getCollectionTextColorClass } from '@utils/collection-colors';
 import { isIconPath, resolveIconUrl } from '@utils/icon';
 import { useStore } from '@nanostores/react';
 import { favoritesStore, toggleFavorite, type FavoriteItem } from '../../../stores/favorites-store';
 import type { DiscoverTableData, CollectionType } from './DiscoverTable';
 import type { TableConfiguration } from '@types';
-// Color mapping to ensure Tailwind classes are included in the build
-const colorClasses: Record<string, 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',
-};
 const columnHelper = createColumnHelper<DiscoverTableData>();
 // Badge cell component (proper React component to use hooks)
@@ -80,7 +67,7 @@ const ResourceNameCell = ({ item }: { item: DiscoverTableData }) => {
       {resourceIconUrl ? (
         <img src={resourceIconUrl} alt="" className="h-5 w-5 flex-shrink-0 rounded-sm object-contain" />
       ) : (
-        <Icon className={`h-4 w-4 flex-shrink-0 ${colorClasses[color] || 'text-[rgb(var(--ec-icon-color))]'}`} />
+        <Icon className={`h-4 w-4 flex-shrink-0 ${getCollectionTextColorClass(color, 'text-[rgb(var(--ec-icon-color))]')}`} />
       )}
       <span className="text-sm font-semibold text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-accent))]">
         {item.data.name}
@@ -248,7 +235,7 @@ const CollectionListCell = ({
           href={buildUrl(`/docs/${item.collection}/${item.data.id}/${item.data.version}`)}
           className="group inline-flex items-center gap-1.5 text-[0.8rem] text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] transition-colors"
         >
-          <item.Icon className={`h-3.5 w-3.5 ${colorClasses[item.color] || 'text-gray-500'} flex-shrink-0`} />
+          <item.Icon className={`h-3.5 w-3.5 ${getCollectionTextColorClass(item.color)} flex-shrink-0`} />
           <span className="truncate max-w-[120px]" title={item.data.name}>
             {item.data.name}
           </span>

package/eventcatalog/src/components/Tables/columns/ContainersTableColumns.tsx CHANGED Viewed

@@ -21,8 +21,8 @@ export const columns = (tableConfiguration: TableConfiguration) => [
           href={buildUrl(`/docs/${containerRaw.collection}/${containerRaw.data.id}/${containerRaw.data.version}`)}
           className="group inline-flex items-center"
         >
-          <span className="inline-flex items-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] hover:border-blue-400 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-500/10 transition-colors">
-            <span className="flex items-center justify-center w-6 h-6 bg-blue-500 rounded-l-md">
+          <span className="inline-flex items-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] hover:border-indigo-400 dark:hover:border-indigo-500 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 transition-colors">
+            <span className="flex items-center justify-center w-6 h-6 bg-indigo-500 rounded-l-md">
               <DatabaseIcon className="h-3 w-3 text-white" />
             </span>
             <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">

package/eventcatalog/src/components/Tables/columns/ServiceTableColumns.tsx CHANGED Viewed

@@ -5,6 +5,7 @@ import { useMemo, useState } from 'react';
 import { filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
 import { getColorAndIconForCollection } from '@utils/collections/icons';
+import { getCollectionTextColorClass } from '@utils/collection-colors';
 import { createBadgesColumn } from './SharedColumns';
 import FavoriteButton from '@components/FavoriteButton';
 import type { TData } from '../Table';
@@ -95,7 +96,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
               href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
               className="group inline-flex items-center gap-1.5 text-xs hover:text-[rgb(var(--ec-accent))] transition-colors"
             >
-              <consumer.Icon className={`h-3.5 w-3.5 text-${consumer.color}-500 flex-shrink-0`} />
+              <consumer.Icon className={`h-3.5 w-3.5 ${getCollectionTextColorClass(consumer.color)} flex-shrink-0`} />
               <span className="truncate max-w-[120px]" title={consumer.data.name}>
                 {consumer.data.name}
               </span>
@@ -154,7 +155,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
               href={buildUrl(`/docs/${sender.collection}/${sender.data.id}/${sender.data.version}`)}
               className="group inline-flex items-center gap-1.5 text-xs hover:text-[rgb(var(--ec-accent))] transition-colors"
             >
-              <sender.Icon className={`h-3.5 w-3.5 text-${sender.color}-500 flex-shrink-0`} />
+              <sender.Icon className={`h-3.5 w-3.5 ${getCollectionTextColorClass(sender.color)} flex-shrink-0`} />
               <span className="truncate max-w-[120px]" title={sender.data.name}>
                 {sender.data.name}
               </span>

package/eventcatalog/src/components/Tables/columns/TeamsTableColumns.tsx CHANGED Viewed

@@ -6,21 +6,9 @@ import type { TData } from '../Table';
 import type { CollectionUserTypes } from '@types';
 import type { TableConfiguration } from '@types';
 import { getColorAndIconForCollection } from '@utils/collections/icons';
+import { getCollectionTextColorClass } from '@utils/collection-colors';
 const columnHelper = createColumnHelper<TData<CollectionUserTypes>>();
-const colorClasses: Record<string, 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',
-};
 const CollectionListCell = ({
   items,
   emptyText,
@@ -49,7 +37,9 @@ const CollectionListCell = ({
             href={href}
             className="group inline-flex items-center gap-1.5 text-[0.8rem] text-[rgb(var(--ec-icon-color))] transition-colors hover:text-[rgb(var(--ec-accent))]"
           >
-            <Icon className={`h-3.5 w-3.5 flex-shrink-0 ${colorClasses[color] || 'text-[rgb(var(--ec-icon-color))]'}`} />
+            <Icon
+              className={`h-3.5 w-3.5 flex-shrink-0 ${getCollectionTextColorClass(color, 'text-[rgb(var(--ec-icon-color))]')}`}
+            />
             <span className="max-w-[140px] truncate" title={item.data.name}>
               {item.data.name}
             </span>

package/eventcatalog/src/components/Tables/columns/UserTableColumns.tsx CHANGED Viewed

@@ -6,21 +6,9 @@ import type { TData } from '../Table';
 import type { CollectionUserTypes } from '@types';
 import type { TableConfiguration } from '@types';
 import { getColorAndIconForCollection } from '@utils/collections/icons';
+import { getCollectionTextColorClass } from '@utils/collection-colors';
 const columnHelper = createColumnHelper<TData<CollectionUserTypes>>();
-const colorClasses: Record<string, 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',
-};
 const CollectionListCell = ({
   items,
   emptyText,
@@ -52,7 +40,9 @@ const CollectionListCell = ({
             href={href}
             className="group inline-flex items-center gap-1.5 text-[0.8rem] text-[rgb(var(--ec-icon-color))] transition-colors hover:text-[rgb(var(--ec-accent))]"
           >
-            <Icon className={`h-3.5 w-3.5 flex-shrink-0 ${colorClasses[color] || 'text-[rgb(var(--ec-icon-color))]'}`} />
+            <Icon
+              className={`h-3.5 w-3.5 flex-shrink-0 ${getCollectionTextColorClass(color, 'text-[rgb(var(--ec-icon-color))]')}`}
+            />
             <span className="max-w-[140px] truncate" title={item.data.name}>
               {item.data.name}
             </span>

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro CHANGED Viewed

@@ -182,7 +182,7 @@ const editUrl =
                     class="group flex flex-col border border-[rgb(var(--ec-page-border))] rounded-lg p-4 hover:border-[rgb(var(--ec-content-text-muted))] hover:bg-[rgb(var(--ec-content-hover))] transition-colors w-full sm:w-1/2"
                   >
                     <span class="text-sm text-[rgb(var(--ec-page-text-muted))] mb-1">Previous</span>
-                    <span class="font-medium text-[rgb(var(--ec-page-text))] group-hover:text-primary-600 transition-colors">
+                    <span class="font-medium text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-accent))] transition-colors">
                       {prev.label}
                     </span>
                   </a>
@@ -198,7 +198,7 @@ const editUrl =
                     class="group flex flex-col items-end text-right border border-[rgb(var(--ec-page-border))] rounded-lg p-4 hover:border-[rgb(var(--ec-content-text-muted))] hover:bg-[rgb(var(--ec-content-hover))] transition-colors w-full sm:w-1/2"
                   >
                     <span class="text-sm text-[rgb(var(--ec-page-text-muted))] mb-1">Next</span>
-                    <span class="font-medium text-[rgb(var(--ec-page-text))] group-hover:text-primary-600 transition-colors">
+                    <span class="font-medium text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-accent))] transition-colors">
                       {next.label}
                     </span>
                   </a>

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/root-index.astro CHANGED Viewed

@@ -99,28 +99,28 @@ if (!isCustomDocsEnabled()) {
 ---
 <VerticalSideBarLayout title="Custom Documentation" showNestedSideBar={false}>
-  <body class="min-h-screen font-inter">
+  <body class="min-h-screen font-inter bg-[rgb(var(--ec-page-bg))] text-[rgb(var(--ec-page-text))]">
     <main class="container px-8 lg:px-8 mx-auto py-8 max-w-[80em]">
       <div class="mb-12">
         <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
           <div>
             <div class="flex flex-wrap items-center gap-3 mb-3">
-              <h1 class="text-4xl font-semibold text-gray-900 font-inter">Custom Documentation</h1>
+              <h1 class="text-4xl font-semibold text-[rgb(var(--ec-page-text))] font-inter">Custom Documentation</h1>
               <div
                 class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent-text))] border border-[rgb(var(--ec-accent)/0.3)] shadow-xs"
               >
                 Pro feature
               </div>
             </div>
-            <p class="text-base mb-0 text-gray-600 max-w-3xl">
+            <p class="text-base mb-0 text-[rgb(var(--ec-page-text-muted))] max-w-3xl">
               Add custom documentation to EventCatalog to create a unified source of truth for your team. Document your
               architecture decisions, patterns, and guidelines.
             </p>
           </div>
           <div class="flex space-x-4 shrink-0">
             <a
-              href="https://www.eventcatalog.dev/docs/custom-documentation"
-              class="inline-flex items-center justify-center px-5 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+              href="https://www.eventcatalog.dev/docs/development/bring-your-own-documentation/custom-pages/introduction"
+              class="inline-flex items-center justify-center px-5 py-2 border border-[rgb(var(--ec-page-border))] text-sm font-medium rounded-md text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-content-hover))] transition-colors"
             >
               Read documentation &rarr;
             </a>
@@ -128,7 +128,7 @@ if (!isCustomDocsEnabled()) {
               !isCustomDocsEnabled() && (
                 <a
                   href="https://www.eventcatalog.dev/pro/trial"
-                  class="inline-flex items-center justify-center px-5 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-[rgb(var(--ec-accent-gradient-from))] to-[rgb(var(--ec-accent-gradient-to))] hover:opacity-90 shadow-xs"
+                  class="inline-flex items-center justify-center px-5 py-2 border border-transparent text-sm font-medium rounded-md text-[rgb(var(--ec-button-text))] bg-gradient-to-r from-[rgb(var(--ec-accent-gradient-from))] to-[rgb(var(--ec-accent-gradient-to))] hover:opacity-90 shadow-xs"
                 >
                   Start 14-day trial
                 </a>
@@ -138,58 +138,62 @@ if (!isCustomDocsEnabled()) {
         </div>
       </div>
-      <h2 class="text-2xl font-semibold mb-2 text-gray-900">Setup Guide</h2>
-      <p class="text-gray-600 mb-8 max-w-3xl">
+      <h2 class="text-2xl font-semibold mb-2 text-[rgb(var(--ec-page-text))]">Setup Guide</h2>
+      <p class="text-[rgb(var(--ec-page-text-muted))] mb-8 max-w-3xl">
         Custom documentation let's you bring any documentation into EventCatalog. This is useful for documenting your architecture
         decisions, patterns, and guidelines. Follow these steps to get started:
       </p>
       <div class="space-y-10 mb-12">
-        <div class="bg-white p-6 rounded-lg shadow-xs border border-gray-200">
+        <div class="bg-[rgb(var(--ec-card-bg))] p-6 rounded-lg shadow-xs border border-[rgb(var(--ec-page-border))]">
           <div class="flex items-start gap-4">
             <div
-              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1"
+              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] text-lg font-medium shrink-0 mt-1"
             >
               1
             </div>
             <div class="w-full">
-              <h3 class="text-xl font-semibold text-gray-900 mb-3">Create the content structure</h3>
-              <p class="text-gray-600 mb-4">Create a folder structure in your directory to organize your documentation.</p>
+              <h3 class="text-xl font-semibold text-[rgb(var(--ec-page-text))] mb-3">Create the content structure</h3>
+              <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">
+                Create a folder structure in your directory to organize your documentation.
+              </p>
               <Code code={folderStructureExample} lang="bash" frame="terminal" />
             </div>
           </div>
         </div>
-        <div class="bg-white p-6 rounded-lg shadow-xs border border-gray-200">
+        <div class="bg-[rgb(var(--ec-card-bg))] p-6 rounded-lg shadow-xs border border-[rgb(var(--ec-page-border))]">
           <div class="flex items-start gap-4">
             <div
-              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1"
+              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] text-lg font-medium shrink-0 mt-1"
             >
               2
             </div>
             <div class="w-full">
-              <h3 class="text-xl font-semibold text-gray-900 mb-3">Add MDX files</h3>
-              <p class="text-gray-600 mb-4">Create MDX files with frontmatter and markdown content.</p>
+              <h3 class="text-xl font-semibold text-[rgb(var(--ec-page-text))] mb-3">Add MDX files</h3>
+              <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">Create MDX files with frontmatter and markdown content.</p>
               <Code code={mdxFileExample} lang="mdx" frame="terminal" />
             </div>
           </div>
         </div>
-        <div class="bg-white p-6 rounded-lg shadow-xs border border-gray-200">
+        <div class="bg-[rgb(var(--ec-card-bg))] p-6 rounded-lg shadow-xs border border-[rgb(var(--ec-page-border))]">
           <div class="flex items-start gap-4">
             <div
-              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1"
+              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] text-lg font-medium shrink-0 mt-1"
             >
               3
             </div>
             <div class="w-full">
-              <h3 class="text-xl font-semibold text-gray-900 mb-3">Update your eventcatalog.config.js file</h3>
-              <p class="text-gray-600 mb-4">
+              <h3 class="text-xl font-semibold text-[rgb(var(--ec-page-text))] mb-3">Update your eventcatalog.config.js file</h3>
+              <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">
                 Add the customDocs configuration to your eventcatalog.config.js file to define your sidebar structure.
               </p>
               <Code code={configExample} lang="js" frame="terminal" />
-              <p class="text-gray-600 mt-4">This configuration defines the sidebar structure for your custom documentation:</p>
-              <ul class="list-disc list-inside text-gray-600 mt-2 ml-2 space-y-1">
+              <p class="text-[rgb(var(--ec-page-text-muted))] mt-4">
+                This configuration defines the sidebar structure for your custom documentation:
+              </p>
+              <ul class="list-disc list-inside text-[rgb(var(--ec-page-text-muted))] mt-2 ml-2 space-y-1">
                 <li>
                   <strong>label</strong>: The display name for each sidebar section
                 </li>
@@ -210,25 +214,25 @@ if (!isCustomDocsEnabled()) {
           </div>
         </div>
-        <div class="bg-white p-6 rounded-lg shadow-xs border border-gray-200">
+        <div class="bg-[rgb(var(--ec-card-bg))] p-6 rounded-lg shadow-xs border border-[rgb(var(--ec-page-border))]">
           <div class="flex items-start gap-4">
             <div
-              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1"
+              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] text-lg font-medium shrink-0 mt-1"
             >
               4
             </div>
             <div class="w-full">
-              <h3 class="text-xl font-semibold text-gray-900 mb-3">Restart EventCatalog</h3>
-              <p class="text-gray-600 mb-4">
+              <h3 class="text-xl font-semibold text-[rgb(var(--ec-page-text))] mb-3">Restart EventCatalog</h3>
+              <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">
                 After configuring your documentation, restart EventCatalog to see your custom documentation.
               </p>
               <div class="mb-4">
                 <Code code="npm run dev" lang="bash" frame="terminal" />
               </div>
-              <p class="text-gray-600 mb-4">
+              <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">
                 Once restarted, you'll see your custom documentation displayed with the sidebar structure you defined:
               </p>
-              <div class="border border-gray-200 rounded-lg overflow-hidden">
+              <div class="border border-[rgb(var(--ec-page-border))] rounded-lg overflow-hidden">
                 <img src="/images/custom-docs-placeholder.png" alt="Example of custom documentation interface" class="w-full" />
               </div>
             </div>

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro CHANGED Viewed

@@ -150,7 +150,7 @@ const navigationItems = [
     href: getDefaultUrl('docs/custom', '/docs/custom'),
     current: currentPath.includes('/docs/custom'),
     isPremium: true,
-    visible: isCustomDocsEnabled(),
+    visible: isCustomDocsEnabled() && customDocs.length > 0,
   },
   {
     id: '/schemas/explorer',

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

@@ -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';
@@ -99,33 +100,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>