@eventcatalog/core 2.7.16 → 2.8.0

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@eventcatalog/core",
+  "homepage": "https://github.com/event-catalog/eventcatalog",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/event-catalog/eventcatalog.git"
+  },
   "type": "module",
-  "version": "2.7.16",
+  "version": "2.8.0",
   "publishConfig": {
     "access": "public"
   },
@@ -67,17 +72,17 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "unist-util-visit": "^5.0.0",
-    "uuid": "^10.0.0"
-  },
-  "devDependencies": {
-    "@parcel/watcher": "^2.4.1",
+    "uuid": "^10.0.0",
     "@types/diff": "^5.2.2",
     "@types/lodash.merge": "4.6.9",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@parcel/watcher": "^2.4.1",
     "commander": "^12.1.0",
     "concurrently": "^8.2.2",
-    "cross-env": "^7.0.3",
+    "cross-env": "^7.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
     "rimraf": "^5.0.7",

package/src/components/DocsNavigation.astro

@@ -98,12 +98,12 @@ const currentPath = Astro.url.pathname;
             return (
               <li class="px-2 w-full text-md xl:text-lg border-l border-gray-200 space-y-2 scroll-m-20" id={item.href}>
                 <a
-                  class={`flex justify-between items-center w-full px-2 rounded-md font-normal ${currentPath.includes(item.href) ? 'bg-purple-200 text-purple-800 ' : 'font-thin'}`}
+                  class={`flex justify-between items-center w-full px-2 rounded-md font-normal ${currentPath.includes(item.href) ? 'bg-primary/5 text-primary ' : 'font-thin'}`}
                   href={`${item.href}`}
                 >
                   <span class="block truncate !whitespace-normal">{item.label}</span>
                   {item.version && (
-                    <span class="block text-sm bg-purple-100 p-0.5 px-1 text-gray-600  rounded-md font-light">
+                    <span class="block text-sm bg-primary/10 p-0.5 px-1 text-gray-600  rounded-md font-light">
                       v{item.version}
                     </span>
                   )}

package/src/components/Header.astro

@@ -50,7 +50,7 @@ const logo = {
             navItems.map((item) => {
               const isActive = currentPath.includes(item.href);
               return (
-                <li class={`font-light text-[0.8em] ${isActive ? 'border-b-2 border-purple-500' : ''}`}>
+                <li class={`font-light hover:text-primary text-[0.8em] ${isActive ? 'border-b-2 border-primary' : ''}`}>
                   <a href={item.href}>{item.label}</a>
                 </li>
               );
@@ -82,7 +82,7 @@ const logo = {
           navItems.map((item) => {
             const isActive = currentPath.includes(item.href);
             return (
-              <li class={`font-light ${isActive ? 'font-bold text-purple-500' : ''}`}>
+              <li class={`font-light ${isActive ? 'font-bold text-primary' : ''}`}>
                 <a href={item.href}>{item.label}</a>
               </li>
             );

package/src/components/Lists/BasicList.tsx

@@ -30,12 +30,12 @@ const BasicList = ({ title, items, emptyMessage, color = 'gray' }: Props) => {
                 return (
                   <li key={item.version} className="px-2 w-full text-md xl:text-lg border-l border-gray-200 py-1 ">
                     <a
-                      className={`flex justify-between items-center w-full px-2 rounded-md font-normal   ${item.active ? 'bg-purple-200 text-purple-800 ' : 'font-thin'}`}
+                      className={`flex justify-between items-center w-full px-2 rounded-md font-normal   ${item.active ? 'bg-primary/10 text-primary ' : 'font-thin'}`}
                       href={item.href}
                     >
                       <span className="block truncate !whitespace-normal">{item.label}</span>
                       {item.version && (
-                        <span className="block text-sm bg-purple-100 p-0.5 px-1 text-gray-600  rounded-md font-light">
+                        <span className="block text-sm bg-primary/20 p-0.5 px-1 text-gray-600  rounded-md font-light">
                           v{item.version}
                         </span>
                       )}

package/src/components/Lists/OwnersList.tsx

@@ -32,21 +32,21 @@ const OwnersList2 = ({ title, owners, emptyMessage }: Props) => {
                         <img
                           src={item.avatarUrl}
                           alt={item.label}
-                          className="w-7 h-7 rounded-full border group-hover:border-purple-300"
+                          className="w-7 h-7 rounded-full border group-hover:border-primary/60"
                         />
                       )}
                       {(item.type === 'teams' || !item.avatarUrl) && (
-                        <span className="w-6 rounded-full mt-1 bg-red-500 block text-center text-white uppercase group-hover:bg-purple-500">
+                        <span className="w-6 rounded-full mt-1 bg-red-500 block text-center text-white uppercase group-hover:bg-primary">
                           {item.label.charAt(0)}
                         </span>
                       )}
                       {/*  <span className="w-6 rounded-full mt-1 bg-red-500 block text-center text-white uppercase">{item.label.charAt(0)}</span> */}
                       <div>
-                        <h3 className="flex-auto truncate text-sm font-semibold leading-6 text-black group-hover:underline group-hover:text-purple-500">
+                        <h3 className="flex-auto truncate text-sm font-semibold leading-6 text-black group-hover:underline group-hover:text-primary">
                           {item.label}
                         </h3>
                         <div className="-mt-0.5">
-                          <span className="text-xs font-light bg-gray-100 text-gray-700 rounded-md py-0.5 group-hover:bg-purple-100">
+                          <span className="text-xs font-light bg-gray-100 text-gray-700 rounded-md py-0.5 group-hover:bg-primary/10">
                             {item.badge}
                           </span>
                         </div>
@@ -79,7 +79,7 @@ export default OwnersList2;
 //           <a class="flex items-center gap-x-3 group " href={item.href}>
 //             {item.type === 'users' && item.avatarUrl && <img src={item.avatarUrl} alt={item.label} class="w-7 h-7 rounded-full border group-hover:border-purple-300" />}
 //             {(item.type === 'teams' || !item.avatarUrl) && (
-//               <span class="w-6 rounded-full mt-1 bg-red-500 block text-center text-white uppercase group-hover:bg-purple-500">{item.label.charAt(0)}</span>
+//               <span class="w-6 rounded-full mt-1 bg-red-500 block text-center text-white uppercase group-hover:bg-primary">{item.label.charAt(0)}</span>
 //             )}
 //             {/* // <span class="w-6 rounded-full mt-1 bg-red-500 block text-center text-white uppercase">{item.label.charAt(0)}</span> */}
 //             <div>

package/src/components/Lists/PillList.tsx

@@ -33,15 +33,15 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray' }: Props) => {
                       href={item.href}
                     >
                       <div className="w-full">
-                        <h3 className="flex-auto truncate text-sm font-semibold leading-6 text-black group-hover:underline group-hover:text-purple-500">
+                        <h3 className="flex-auto truncate text-sm font-semibold leading-6 text-black group-hover:underline group-hover:text-primary">
                           {item.label}
                         </h3>
                         <div className=" flex justify-between">
-                          <span className="text-xs font-light bg-gray-100 text-gray-700 rounded-md py-0.5 group-hover:bg-purple-100">
+                          <span className="text-xs font-light bg-gray-100 text-gray-700 rounded-md py-0.5 group-hover:bg-primary/20">
                             {item.tag}
                           </span>
                           {item.badge && (
-                            <span className="text-xs font-light bg-gray-100 text-gray-700 rounded-md py-0.5 group-hover:bg-purple-100 capitalize">
+                            <span className="text-xs font-light bg-gray-100 text-gray-700 rounded-md py-0.5 group-hover:bg-primary/20 capitalize">
                               {item.badge.slice(0, -1)}
                             </span>
                           )}

package/src/components/Lists/SpecificationsList.astro

@@ -19,7 +19,7 @@ const numberOfSpecifications = Object.keys(specVersions).length;
     collectionItem.data.specifications?.openapiPath && (
       <a
         href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}/spec`)}
-        class="text-sm flex items-center space-x-1 hover:underline hover:text-purple-500"
+        class="text-sm flex items-center space-x-1 hover:underline hover:text-primary"
       >
         <img src={buildUrl('/icons/openapi.svg', true)} class="h-4 w-4" />
         <span>OpenAPI spec</span>
@@ -30,7 +30,7 @@ const numberOfSpecifications = Object.keys(specVersions).length;
     collectionItem.data.specifications?.asyncapiPath && (
       <a
         href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}/asyncapi`)}
-        class="text-sm flex items-center space-x-1 hover:underline hover:text-purple-500"
+        class="text-sm flex items-center space-x-1 hover:underline hover:text-primary"
       >
         <img src={buildUrl('/icons/asyncapi.svg', true)} class="h-4 w-4" />
         <span>AsyncAPI spec</span>

package/src/components/Lists/VersionList.astro

@@ -24,7 +24,7 @@ const currentPath = Astro.url.pathname;
           <option
             selected={isCurrent}
             value={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${version}`)}
-            class={`inline-flex items-center rounded-md  px-2 py-1 text-xs text-indigo-700 ring-1 ring-inset ring-indigo-700/10 hover:bg-purple-100 hover:underline ${isCurrent ? 'bg-purple-100 text-purple-500 underline ' : 'bg-white'}`}
+            class={`inline-flex items-center rounded-md  px-2 py-1 text-xs text-indigo-700 ring-1 ring-inset ring-indigo-700/10 hover:bg-purple-100 hover:underline ${isCurrent ? 'bg-purple-100 text-primary underline ' : 'bg-white'}`}
           >
             <span>
               v{version}

package/src/components/MDX/NodeGraph/DownloadButton.tsx

@@ -48,8 +48,8 @@ function DownloadButton({ filename, addPadding = true }: { filename?: string; ad
         className={`hidden md:flex bg-white group download-btn items-center space-x-1 text-[14px] border border-gray-200 px-1 py-0.5 rounded-md hover:bg-gray-100/50 ${addPadding ? 'mt-14' : '-mt-1'}`}
         onClick={onClick}
       >
-        <DocumentArrowDownIcon className="w-4 h-4 group-hover:text-purple-500" />
-        <span className="group-hover:text-purple-500">Download visual </span>
+        <DocumentArrowDownIcon className="w-4 h-4 group-hover:text-primary" />
+        <span className="group-hover:text-primary">Download visual </span>
       </button>
     </Panel>
   );

package/src/components/MDX/NodeGraph/NodeGraph.astro

@@ -19,9 +19,10 @@ interface Props {
     label: string;
     url: string;
   };
+  linksToVisualiser?: boolean;
 }
 
-const { id, collection, title, mode = 'simple', linkTo = 'docs', version, href } = Astro.props;
+const { id, collection, title, mode = 'simple', linkTo = 'docs', version, href, linksToVisualiser } = Astro.props;
 let nodes = [],
   edges = [];
 
@@ -99,6 +100,7 @@ const getVisualiserUrlForCollection = () => {
     linkTo={linkTo}
     client:only="react"
     urlHasTrailingSlash={config.trailingSlash}
+    linksToVisualiser={linksToVisualiser}
   />
 </div>
 

package/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState, useCallback, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import ReactFlow, {
   Background,
@@ -7,8 +7,10 @@ import ReactFlow, {
   Panel,
   ReactFlowProvider,
   useNodesState,
+  useEdgesState,
   type Edge,
   type Node,
+  useReactFlow,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 import ServiceNode from './Nodes/Service';
@@ -33,6 +35,7 @@ interface Props {
   linkTo: 'docs' | 'visualiser';
   includeKey?: boolean;
   urlHasTrailingSlash?: boolean;
+  linksToVisualiser?: boolean;
 }
 
 const getDocUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>, trailingSlash?: boolean) => {
@@ -45,15 +48,15 @@ const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<Collectio
   );
 };
 
-// const NodeGraphBuilder = ({ title, subtitle, includeBackground = true, includeControls = true }: Props) => {
 const NodeGraphBuilder = ({
   nodes: initialNodes,
-  edges,
+  edges: initialEdges,
   title,
   includeBackground = true,
   linkTo = 'docs',
   includeKey = true,
   urlHasTrailingSlash,
+  linksToVisualiser = false,
 }: Props) => {
   const nodeTypes = useMemo(
     () => ({
@@ -68,37 +71,87 @@ const NodeGraphBuilder = ({
     []
   );
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const nodeOrigin = [0.5, 0.5];
-
-  const handleNodeClick = (_: any, node: Node) => {
-    if (node.type === 'events' || node.type === 'commands') {
-      navigate(
-        linkTo === 'docs'
-          ? getDocUrlForCollection(node.data.message, urlHasTrailingSlash)
-          : getVisualiserUrlForCollection(node.data.message, urlHasTrailingSlash)
-      );
-    }
-    if (node.type === 'services') {
-      navigate(
-        linkTo === 'docs'
-          ? getDocUrlForCollection(node.data.service, urlHasTrailingSlash)
-          : getVisualiserUrlForCollection(node.data.service, urlHasTrailingSlash)
-      );
-    }
-  };
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const { fitView } = useReactFlow();
+
+  const resetNodesAndEdges = useCallback(() => {
+    setNodes((nds) =>
+      nds.map((node) => {
+        node.style = { ...node.style, opacity: 1 };
+        return { ...node, animated: false };
+      })
+    );
+    setEdges((eds) =>
+      eds.map((edge) => {
+        edge.style = { ...edge.style, opacity: 1 };
+        return { ...edge, animated: false };
+      })
+    );
+  }, [setNodes, setEdges]);
+
+  const handleNodeClick = useCallback(
+    (_: any, node: Node) => {
+      if (linksToVisualiser) {
+        if (node.type === 'events' || node.type === 'commands') {
+          navigate(getVisualiserUrlForCollection(node.data.message, urlHasTrailingSlash));
+        }
+        if (node.type === 'services') {
+          navigate(getVisualiserUrlForCollection(node.data.service, urlHasTrailingSlash));
+        }
+        return;
+      }
+
+      resetNodesAndEdges();
+
+      const connectedNodeIds = new Set<string>();
+      connectedNodeIds.add(node.id);
+
+      const updatedEdges = edges.map((edge) => {
+        if (edge.source === node.id || edge.target === node.id) {
+          connectedNodeIds.add(edge.source);
+          connectedNodeIds.add(edge.target);
+          return { ...edge, style: { ...edge.style, opacity: 1 }, animated: true };
+        }
+        return { ...edge, style: { ...edge.style, opacity: 0.1 }, animated: false };
+      });
+
+      const updatedNodes = nodes.map((n) => {
+        if (connectedNodeIds.has(n.id)) {
+          return { ...n, style: { ...n.style, opacity: 1 } };
+        }
+        return { ...n, style: { ...n.style, opacity: 0.1 } };
+      });
+
+      setNodes(updatedNodes);
+      setEdges(updatedEdges);
+
+      // Fit the clicked node and its connected nodes into view
+      fitView({
+        padding: 0.2,
+        duration: 800,
+        nodes: updatedNodes.filter((n) => connectedNodeIds.has(n.id)),
+      });
+    },
+    [nodes, edges, setNodes, setEdges, resetNodesAndEdges, fitView]
+  );
+
+  const handlePaneClick = useCallback(() => {
+    resetNodesAndEdges();
+    fitView({ duration: 800 });
+  }, [resetNodesAndEdges, fitView]);
 
   return (
-    // @ts-ignore
     <ReactFlow
       nodeTypes={nodeTypes}
       nodes={nodes}
       edges={edges}
       fitView
       onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
       connectionLineType={ConnectionLineType.SmoothStep}
-      // @ts-ignore
-      nodeOrigin={nodeOrigin}
+      nodeOrigin={[0.1, 0.1]}
       onNodeClick={handleNodeClick}
+      onPaneClick={handlePaneClick}
     >
       {title && (
         <Panel position="top-right">
@@ -146,6 +199,7 @@ interface NodeGraphProps {
   includeKey?: boolean;
   footerLabel?: string;
   urlHasTrailingSlash?: boolean;
+  linksToVisualiser?: boolean;
 }
 
 const NodeGraph = ({
@@ -159,6 +213,7 @@ const NodeGraph = ({
   includeKey = true,
   footerLabel,
   urlHasTrailingSlash,
+  linksToVisualiser = false,
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
 
@@ -180,6 +235,7 @@ const NodeGraph = ({
             linkTo={linkTo}
             includeKey={includeKey}
             urlHasTrailingSlash={urlHasTrailingSlash}
+            linksToVisualiser={linksToVisualiser}
           />
 
           <div className="flex justify-between">
@@ -191,7 +247,7 @@ const NodeGraph = ({
 
             {href && (
               <div className="py-2 w-full text-right">
-                <a className=" text-sm no-underline py-2 text-gray-800 hover:text-purple-500" href={href}>
+                <a className=" text-sm no-underline py-2 text-gray-800 hover:text-primary" href={href}>
                   {hrefLabel} &rarr;
                 </a>
               </div>

package/src/components/MDX/NodeGraph/Nodes/ExternalSystem.tsx

@@ -65,7 +65,7 @@ export default function ExternalSystemNode({ data, sourcePosition, targetPositio
               <div className="grid grid-cols-2 gap-x-4 py-1">
                 <span className="text-xs" style={{ fontSize: '0.2em' }}>
                   URL:{' '}
-                  <a href={url} target="_blank" className="text-purple-500 underline">
+                  <a href={url} target="_blank" className="text-primary underline">
                     {url}
                   </a>
                 </span>

package/src/components/MDX/Steps/Step.astro

@@ -4,7 +4,7 @@ const { title } = Astro.props;
 
 <li class="mb-8 ml-6 w-full xl:max-w-[50%]">
   <div class="flex items-center mb-4">
-    <span class="step-number absolute flex items-center justify-center w-6 h-6 bg-purple-500/70 rounded-md -left-3 text-white">
+    <span class="step-number absolute flex items-center justify-center w-6 h-6 bg-primary/80 rounded-md -left-3 text-white">
       <div></div>
     </span>
     <h3 class="font-semibold text-lg ml-0">{title}</h3>

package/src/components/MDX/Tiles/Tile.astro

@@ -19,10 +19,10 @@ const IconComponent: ComponentType<{ className?: string }> | undefined = Icons[i
 <a
   href={buildUrl(href)}
   target={openWindow ? '_blank' : '_self'}
-  class="block bg-white border border-gray-200 rounded-lg p-6 transition-all duration-300 ease-in-out hover:shadow-md hover:border-purple-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-500 focus:ring-white"
+  class="block bg-white border border-gray-200 rounded-lg p-6 transition-all duration-300 ease-in-out hover:shadow-md hover:border-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-primary focus:ring-white"
 >
   <div class="flex flex-col h-full space-y-8">
-    {IconComponent && <IconComponent className="w-6 h-6 text-purple-500" />}
+    {IconComponent && <IconComponent className="w-6 h-6 text-primary" />}
     <div>
       <h2 class="text-gray-800 text-lg font-semibold transition-colors duration-300 ease-in-out group-hover:text-gray-300">
         {title}

package/src/components/MDX/page-components.tsx

@@ -1,5 +1,5 @@
 const components = {
-  a: (mdxProp: any) => <a className="text-purple-500" {...mdxProp} />,
+  a: (mdxProp: any) => <a className="text-primary" {...mdxProp} />,
   h1: (mdxProp: any) => <h1 className="mb-4" {...mdxProp} />,
   h3: (mdxProp: any) => <h3 className="mb-2" {...mdxProp} />,
   p: (mdxProp: any) => <p className="my-3" {...mdxProp} />,

package/src/components/SideBars/DomainSideBar.astro

@@ -51,12 +51,12 @@ const ownersList = owners.map((o) => ({
     <div class="space-y-2">
       <a
         href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}
-        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500"
+        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
         >View in Visualiser</a
       >
       <a
         href={buildUrl(`/docs/${domain.collection}/${domain.data.id}/${domain.data.version}/changelog`)}
-        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500"
+        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
         >Changelog</a
       >
     </div>

package/src/components/SideBars/MessageSideBar.astro

@@ -102,13 +102,13 @@ const schemaURL = path.join(publicPath, schemaFilePath || '');
       }
       <a
         href={buildUrl(`/visualiser/${message.collection}/${message.data.id}/${message.data.version}`)}
-        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500"
+        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
         >View in Visualiser</a
       >
 
       <a
         href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.version}/changelog`)}
-        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500"
+        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
         >Changelog</a
       >
     </div>

package/src/components/SideBars/ServiceSideBar.astro

@@ -106,12 +106,12 @@ const schemaURL = join(publicPath, schemaFilePath || '');
       }
       <a
         href={buildUrl(`/visualiser/${service.collection}/${service.data.id}/${service.data.version}`)}
-        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500"
+        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
         >View in Visualiser</a
       >
       <a
         href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}/changelog`)}
-        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500"
+        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
         >Changelog</a
       >
     </div>

package/src/components/Tables/columns/DomainTableColumns.tsx

@@ -25,7 +25,7 @@ export const columns = () => [
                 <span className={`bg-${color}-500 group-hover:bg-${color}-600 h-full rounded-tl rounded-bl p-1`}>
                   <RectangleGroupIcon className="h-4 w-4 text-white" />
                 </span>
-                <span className="leading-none px-2 group-hover:underline group-hover:text-purple-500 font-light">
+                <span className="leading-none px-2 group-hover:underline group-hover:text-primary font-light">
                   {messageRaw.data.name} (v{messageRaw.data.version})
                 </span>
               </span>
@@ -77,7 +77,7 @@ export const columns = () => [
               <li key={consumer.data.id} className="py-1 group ">
                 <a
                   href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
-                  className="group-hover:text-purple-500 flex space-x-1 items-center "
+                  className="group-hover:text-primary flex space-x-1 items-center "
                 >
                   <div className={`flex items-center border border-gray-300 rounded-md`}>
                     <span className="flex items-center">
@@ -105,7 +105,7 @@ export const columns = () => [
       const domain = info.row.original;
       return (
         <a
-          className="hover:text-purple-500 hover:underline px-4 font-light"
+          className="hover:text-primary hover:underline px-4 font-light"
           href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}
         >
           Visualiser &rarr;

package/src/components/Tables/columns/FlowTableColumns.tsx

@@ -26,7 +26,7 @@ export const columns = () => [
                 <span className={`bg-${color}-500 group-hover:bg-${color}-600 h-full rounded-tl rounded-bl p-1`}>
                   <QueueListIcon className="h-4 w-4 text-white" />
                 </span>
-                <span className="leading-none px-2 group-hover:underline group-hover:text-purple-500 font-light">
+                <span className="leading-none px-2 group-hover:underline group-hover:text-primary font-light">
                   {flowRaw.data.name} (v{flowRaw.data.version})
                 </span>
               </span>
@@ -67,7 +67,7 @@ export const columns = () => [
       const domain = info.row.original;
       return (
         <a
-          className="hover:text-purple-500 hover:underline px-4 font-light"
+          className="hover:text-primary hover:underline px-4 font-light"
           href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}
         >
           Visualiser &rarr;

package/src/components/Tables/columns/MessageTableColumns.tsx

@@ -28,7 +28,7 @@ export const columns = () => [
                 <span className={`bg-${color}-500 group-hover:bg-${color}-600 h-full rounded-tl rounded-bl p-1`}>
                   <Icon className="h-4 w-4 text-white" />
                 </span>
-                <span className="leading-none px-2 group-hover:underline group-hover:text-purple-500 font-light">
+                <span className="leading-none px-2 group-hover:underline group-hover:text-primary font-light">
                   {messageRaw.data.name} (v{messageRaw.data.version})
                 </span>
               </span>
@@ -70,7 +70,7 @@ export const columns = () => [
               <li className="py-2 group flex items-center space-x-2" key={producer.data.id}>
                 <a
                   href={buildUrl(`/docs/${producer.collection}/${producer.data.id}/${producer.data.version}`)}
-                  className="group-hover:text-purple-500 flex space-x-1 items-center "
+                  className="group-hover:text-primary flex space-x-1 items-center "
                 >
                   <div className="flex items-center border border-gray-300 shadow-sm rounded-md">
                     <span className="flex items-center">
@@ -110,7 +110,7 @@ export const columns = () => [
               <li key={consumer.data.id} className="py-1 group font-light ">
                 <a
                   href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
-                  className="group-hover:text-purple-500 flex space-x-1 items-center "
+                  className="group-hover:text-primary flex space-x-1 items-center "
                 >
                   <div className="flex items-center border border-gray-300 shadow-sm rounded-md">
                     <span className="flex items-center">
@@ -138,7 +138,7 @@ export const columns = () => [
       const domain = info.row.original;
       return (
         <a
-          className="hover:text-purple-500 hover:underline px-4 font-light"
+          className="hover:text-primary hover:underline px-4 font-light"
           href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}
         >
           Visualiser &rarr;

package/src/components/Tables/columns/ServiceTableColumns.tsx

@@ -26,7 +26,7 @@ export const columns = () => [
                 <span className={`bg-${color}-500 group-hover:bg-${color}-600 h-full rounded-tl rounded-bl p-1`}>
                   <ServerIcon className="h-4 w-4 text-white" />
                 </span>
-                <span className="leading-none px-2 group-hover:underline group-hover:text-purple-500">
+                <span className="leading-none px-2 group-hover:underline group-hover:text-primary">
                   {messageRaw.data.name} (v{messageRaw.data.version})
                 </span>
               </span>
@@ -79,7 +79,7 @@ export const columns = () => [
               <li key={consumer.data.id} className="py-1 group font-light ">
                 <a
                   href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
-                  className="group-hover:text-purple-500 flex space-x-1 items-center "
+                  className="group-hover:text-primary flex space-x-1 items-center "
                 >
                   <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
                     <span className="flex items-center">
@@ -122,7 +122,7 @@ export const columns = () => [
               <li key={consumer.data.id} className="py-1 group font-light">
                 <a
                   href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
-                  className="group-hover:text-purple-500 flex space-x-1 items-center "
+                  className="group-hover:text-primary flex space-x-1 items-center "
                 >
                   <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
                     <span className="flex items-center">
@@ -150,7 +150,7 @@ export const columns = () => [
       const domain = info.row.original;
       return (
         <a
-          className="hover:text-purple-500 hover:underline px-4 font-light"
+          className="hover:text-primary hover:underline px-4 font-light"
           href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}
         >
           Visualiser &rarr;