@eventcatalog/core 3.0.0 → 3.2.0

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

@@ -1,15 +1,55 @@
 import { InformationCircleIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 
-const getConfigurationByType = (type: string) => {
+type AdmonitionType = 'danger' | 'alert' | 'warning' | 'info' | 'note';
+
+interface AdmonitionConfig {
+  icon: typeof InformationCircleIcon;
+  title: string;
+  containerClasses: string;
+  iconClasses: string;
+  titleClasses: string;
+  contentClasses: string;
+}
+
+const getConfigurationByType = (type: string): AdmonitionConfig => {
   switch (type) {
     case 'danger':
-      return { color: 'red', icon: ExclamationTriangleIcon, title: 'Danger' };
     case 'alert':
-      return { color: 'red', icon: ExclamationTriangleIcon, title: 'Alert' };
+      return {
+        icon: ExclamationTriangleIcon,
+        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',
+      };
     case 'warning':
-      return { color: 'yellow', icon: ExclamationTriangleIcon, title: 'Warning' };
+      return {
+        icon: ExclamationTriangleIcon,
+        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',
+      };
+    case 'note':
+      return {
+        icon: InformationCircleIcon,
+        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',
+      };
     default:
-      return { color: 'indigo', icon: InformationCircleIcon, title: 'Info' };
+      return {
+        icon: InformationCircleIcon,
+        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',
+      };
   }
 };
 
@@ -25,13 +65,13 @@ export default function Admonition({ children, type = 'info', className = '', ti
   const Icon = config.icon;
 
   return (
-    <div className={`bg-${config.color}-50 border-l-4 border-${config.color}-500 p-4 my-4 ${className} rounded-md not-prose`}>
+    <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 text-${config.color}-500 stroke-2`} aria-hidden="true" />
-          <h3 className={`ml-2 text-${config.color}-600 font-bold text-md`}>{title || config.title}</h3>
+          <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 text-${config.color}-700 text-md`}>{children}</div>
+        <div className={`mt-2 ${config.contentClasses} text-md`}>{children}</div>
       </div>
     </div>
   );

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

@@ -83,16 +83,16 @@ const sortedGroups = Object.entries(groupedAttachments).sort(([a], [b]) => {
 <section class="not-prose my-8">
   {title && <h3 class="flex items-center gap-2 text-3xl font-bold mb-4">{title}</h3>}
 
-  {description && <p class="text-gray-600 mb-6 prose prose-md">{description}</p>}
+  {description && <p class="text-[rgb(var(--ec-page-text-muted))] mb-6 prose prose-md">{description}</p>}
 
   {
     normalizedAttachments.length === 0 ? (
-      <div class="text-gray-500 text-sm italic">No attachments available.</div>
+      <div class="text-[rgb(var(--ec-page-text-muted))] text-sm italic">No attachments available.</div>
     ) : (
       <div class="space-y-6">
         {sortedGroups.map(([groupType, groupAttachments], index) => (
           <div>
-            <h4 class="text-sm font-medium text-gray-900 mb-3 uppercase tracking-wider">
+            <h4 class="text-sm font-medium text-[rgb(var(--ec-page-text))] mb-3 uppercase tracking-wider">
               {groupType} ({groupAttachments.length})
             </h4>
             <div class={`grid grid-cols-1 ${columns === 1 ? '' : `md:grid-cols-${Math.min(columns, 3)}`} gap-4`}>
@@ -105,34 +105,38 @@ const sortedGroups = Object.entries(groupedAttachments).sort(([a], [b]) => {
                     href={attachment.url}
                     target={isExternal ? '_blank' : '_self'}
                     rel={isExternal ? 'noopener noreferrer' : undefined}
-                    class="group block bg-white border border-gray-200 rounded-lg p-4 transition-all duration-200 hover:shadow-md hover:border-purple-300 hover:bg-purple-50/30 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                    class="group block bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg p-4 transition-all duration-200 hover:shadow-md hover:border-[rgb(var(--ec-accent)/0.5)] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2"
                   >
                     <div class="flex items-start gap-3">
-                      <div class="flex-shrink-0 p-2 bg-gray-100 rounded-lg group-hover:bg-purple-100 transition-colors duration-200">
-                        {IconComponent && <IconComponent className="w-5 h-5 text-gray-600 group-hover:text-purple-600" />}
+                      <div class="flex-shrink-0 p-2 bg-[rgb(var(--ec-content-hover))] rounded-lg group-hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors duration-200">
+                        {IconComponent && (
+                          <IconComponent className="w-5 h-5 text-[rgb(var(--ec-icon-color))] group-hover:text-[rgb(var(--ec-accent))]" />
+                        )}
                       </div>
 
                       <div class="flex-grow min-w-0">
                         <div class="flex items-center gap-2">
-                          <h5 class="text-sm font-medium text-gray-900 group-hover:text-purple-900 truncate">
+                          <h5 class="text-sm font-medium text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-accent))] truncate">
                             {attachment.title || 'Attachment'}
                           </h5>
                           {isExternal && (
-                            <Icons.ArrowTopRightOnSquareIcon className="w-3 h-3 text-gray-400 group-hover:text-purple-500 flex-shrink-0" />
+                            <Icons.ArrowTopRightOnSquareIcon className="w-3 h-3 text-[rgb(var(--ec-icon-color))] group-hover:text-[rgb(var(--ec-accent))] flex-shrink-0" />
                           )}
                         </div>
 
                         {attachment.summary && (
-                          <p class="mt-1 text-xs text-gray-600 group-hover:text-purple-700 line-clamp-2">{attachment.summary}</p>
+                          <p class="mt-1 text-xs text-[rgb(var(--ec-page-text-muted))] group-hover:text-[rgb(var(--ec-accent-text))] line-clamp-2">
+                            {attachment.summary}
+                          </p>
                         )}
 
                         {attachment.description && (
-                          <p class="mt-1 text-xs text-gray-600 group-hover:text-purple-700 line-clamp-2">
+                          <p class="mt-1 text-xs text-[rgb(var(--ec-page-text-muted))] group-hover:text-[rgb(var(--ec-accent-text))] line-clamp-2">
                             {attachment.description}
                           </p>
                         )}
 
-                        <div class="mt-2 text-xs text-gray-400 group-hover:text-purple-500 truncate">
+                        <div class="mt-2 text-xs text-[rgb(var(--ec-icon-color))] group-hover:text-[rgb(var(--ec-accent))] truncate">
                           {attachment.url.replace(/^https?:\/\//, '')}
                         </div>
                       </div>

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

@@ -5,14 +5,17 @@ const ChannelParameters = (data: CollectionEntry<'channels'>['data']) => {
   return (
     <div className="container mx-auto py-4 not-prose space-y-4">
       <div>
-        <h4 className="text-2xl font-bold">Channel information</h4>
+        <h4 className="text-2xl font-bold text-[rgb(var(--ec-page-text))]">Channel information</h4>
       </div>
 
       <div>
-        <p className="text-md">
+        <p className="text-md text-[rgb(var(--ec-page-text))]">
           {data.address && (
             <div>
-              <span className="font-semibold">Address:</span> <code className="bg-gray-100 p-1 rounded">{data.address}</code>
+              <span className="font-semibold">Address:</span>{' '}
+              <code className="bg-[rgb(var(--ec-content-hover))] p-1 rounded text-[rgb(var(--ec-page-text))]">
+                {data.address}
+              </code>
             </div>
           )}
           {data.protocols && data.protocols.length > 0 && (
@@ -22,7 +25,10 @@ const ChannelParameters = (data: CollectionEntry<'channels'>['data']) => {
                 {data.protocols.map((protocol) => {
                   const IconComponent = getIconForProtocol(protocol.toLowerCase());
                   return (
-                    <li key={protocol} className=" text-sm flex items-center space-x-1  bg-gray-100 rounded-md px-1">
+                    <li
+                      key={protocol}
+                      className="text-sm flex items-center space-x-1 bg-[rgb(var(--ec-content-hover))] rounded-md px-1"
+                    >
                       {IconComponent && <IconComponent className="w-4 h-4" />}
                       <span>{protocol}</span>
                     </li>
@@ -36,22 +42,30 @@ const ChannelParameters = (data: CollectionEntry<'channels'>['data']) => {
 
       {data.parameters && Object.keys(data.parameters).length > 0 && (
         <div className="overflow-x-auto">
-          <table className="min-w-full bg-white border border-gray-300">
+          <table className="min-w-full bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))]">
             <thead>
-              <tr className="bg-purple-500 text-white">
-                <th className="py-2 px-4 border-b text-left">Parameter</th>
-                <th className="py-2 px-4 border-b text-left">Description</th>
-                <th className="py-2 px-4 border-b text-left">Options</th>
-                <th className="py-2 px-4 border-b text-left">Default</th>
+              <tr className="bg-[rgb(var(--ec-accent))] text-white">
+                <th className="py-2 px-4 border-b border-[rgb(var(--ec-page-border))] text-left">Parameter</th>
+                <th className="py-2 px-4 border-b border-[rgb(var(--ec-page-border))] text-left">Description</th>
+                <th className="py-2 px-4 border-b border-[rgb(var(--ec-page-border))] text-left">Options</th>
+                <th className="py-2 px-4 border-b border-[rgb(var(--ec-page-border))] text-left">Default</th>
               </tr>
             </thead>
             <tbody>
               {Object.entries(data.parameters).map(([param, details]) => (
-                <tr className="hover:bg-gray-50" key={param}>
-                  <td className="py-2 px-4 border-b">{param}</td>
-                  <td className="py-2 px-4 border-b">{details.description}</td>
-                  <td className="py-2 px-4 border-b">{details.enum ? details.enum.join(', ') : 'N/A'}</td>
-                  <td className="py-2 px-4 border-b">{details.default || 'N/A'}</td>
+                <tr className="hover:bg-[rgb(var(--ec-content-hover))]" key={param}>
+                  <td className="py-2 px-4 border-b border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]">
+                    {param}
+                  </td>
+                  <td className="py-2 px-4 border-b border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text-muted))]">
+                    {details.description}
+                  </td>
+                  <td className="py-2 px-4 border-b border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text-muted))]">
+                    {details.enum ? details.enum.join(', ') : 'N/A'}
+                  </td>
+                  <td className="py-2 px-4 border-b border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text-muted))]">
+                    {details.default || 'N/A'}
+                  </td>
                 </tr>
               ))}
             </tbody>

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

@@ -41,8 +41,8 @@ const isComponentEnabled = collection === 'entities';
 {
   isComponentEnabled && properties && properties.length > 0 ? (
     <div class="overflow-x-auto relative not-prose">
-      <table class="w-full text-sm text-left text-gray-500 border border-gray-200 rounded-lg shadow-sm">
-        <thead class="text-xs text-gray-700 uppercase bg-gray-50">
+      <table class="w-full text-sm text-left text-[rgb(var(--ec-page-text-muted))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-sm">
+        <thead class="text-xs text-[rgb(var(--ec-page-text))] uppercase bg-[rgb(var(--ec-content-hover))]">
           <tr>
             <th scope="col" class="py-3 px-6">
               Name
@@ -60,25 +60,26 @@ const isComponentEnabled = collection === 'entities';
         </thead>
         <tbody>
           {properties.map((prop) => (
-            <tr class="bg-white border-b hover:bg-gray-50 align-top">
-              <td class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
-                <code class="text-sm bg-gray-100 rounded px-1 py-0.5">{prop.name}</code>
+            <tr class="bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border-b border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))] align-top">
+              <td class="py-4 px-6 font-medium text-[rgb(var(--ec-page-text))] whitespace-nowrap">
+                <code class="text-sm bg-[rgb(var(--ec-content-hover))] rounded px-1 py-0.5">{prop.name}</code>
               </td>
-              <td class="py-4 px-6">
+              <td class="py-4 px-6 text-[rgb(var(--ec-page-text-muted))]">
                 {prop.type === 'array' && prop.items ? (
                   <span>
-                    array&lt;<code class="text-sm bg-gray-100 rounded px-1 py-0.5">{prop.items.type}</code>&gt;
+                    array&lt;<code class="text-sm bg-[rgb(var(--ec-content-hover))] rounded px-1 py-0.5">{prop.items.type}</code>
+                    &gt;
                   </span>
                 ) : (
-                  <code class="text-sm bg-gray-100 rounded px-1 py-0.5">{prop.type}</code>
+                  <code class="text-sm bg-[rgb(var(--ec-content-hover))] rounded px-1 py-0.5">{prop.type}</code>
                 )}
                 {prop.enum && (
-                  <div class="text-xs text-gray-500 mt-2">
+                  <div class="text-xs text-[rgb(var(--ec-page-text-muted))] mt-2">
                     <span class="font-semibold block mb-1">Enum:</span>
                     <ul class="list-disc list-inside ml-2 space-y-1">
                       {prop.enum.map((enumValue: string) => (
                         <li>
-                          <code class="text-xs bg-gray-100 rounded px-1 py-0.5">{enumValue}</code>
+                          <code class="text-xs bg-[rgb(var(--ec-content-hover))] rounded px-1 py-0.5">{enumValue}</code>
                         </li>
                       ))}
                     </ul>
@@ -87,12 +88,18 @@ const isComponentEnabled = collection === 'entities';
               </td>
               <td class="py-4 px-6">
                 {prop.required ? (
-                  <span class="bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">Required</span>
+                  <span class="bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent-text))] text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                    Required
+                  </span>
                 ) : (
-                  <span class="bg-gray-100 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">Optional</span>
+                  <span class="bg-[rgb(var(--ec-content-hover))] text-[rgb(var(--ec-page-text-muted))] text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                    Optional
+                  </span>
                 )}
               </td>
-              <td class="py-4 px-6">{prop.description || <span class="text-gray-400 italic">No description provided.</span>}</td>
+              <td class="py-4 px-6 text-[rgb(var(--ec-page-text-muted))]">
+                {prop.description || <span class="text-[rgb(var(--ec-icon-color))] italic">No description provided.</span>}
+              </td>
             </tr>
           ))}
         </tbody>

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

@@ -4,4 +4,4 @@ import { buildUrl } from '@utils/url-builder';
 const { href } = Astro.props;
 ---
 
-<a href={buildUrl(href)} class="text-purple-500 hover:text-purple-700"><slot /></a>
+<a href={buildUrl(href)} class="text-[rgb(var(--ec-accent))] hover:text-[rgb(var(--ec-accent-hover))]"><slot /></a>

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

@@ -33,35 +33,35 @@ const MessageRow = memo(
     const channels = message.channels || [];
 
     return (
-      <tr className="group hover:bg-gray-100">
-        <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 relative">
+      <tr className="group hover:bg-[rgb(var(--ec-content-hover))]">
+        <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`} />
             <span className="group-hover:text-blue-600 break-all">{message.name}</span>
           </div>
         </td>
-        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 relative">
+        <td className="whitespace-nowrap px-3 py-4 text-sm text-[rgb(var(--ec-page-text-muted))] relative">
           <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
           <span>v{message.version}</span>
         </td>
-        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 relative">
+        <td className="whitespace-nowrap px-3 py-4 text-sm text-[rgb(var(--ec-page-text-muted))] relative">
           <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
           <span>{type}</span>
         </td>
-        <td className="px-3 py-4 text-sm text-gray-500 relative">
+        <td className="px-3 py-4 text-sm text-[rgb(var(--ec-page-text-muted))] relative">
           <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
           <span className="line-clamp-2 break-words">{message.summary || '-'}</span>
         </td>
         {showChannels && (
-          <td className="px-3 py-4 text-sm text-gray-500 relative">
+          <td className="px-3 py-4 text-sm text-[rgb(var(--ec-page-text-muted))] relative">
             <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
             <div className="flex flex-wrap gap-1">
               {channels.length > 0
                 ? channels.map((channel, index) => (
                     <span
                       key={`${channel.id}-${index}`}
-                      className="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+                      className="inline-flex items-center rounded-md bg-[rgb(var(--ec-content-hover))] px-2 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] ring-1 ring-inset ring-[rgb(var(--ec-page-border))]"
                     >
                       {channel.id}
                     </span>
@@ -98,8 +98,8 @@ const FilterButton = memo(
       }}
       className={`px-3 py-1 rounded-md text-sm font-medium ${
         typeFilter === type
-          ? 'bg-black text-white border border-gray-200 hover:bg-gray-900'
-          : 'bg-white text-black border border-gray-200 hover:bg-gray-100'
+          ? 'bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-button-bg-hover))]'
+          : 'bg-[rgb(var(--ec-page-bg))] text-[rgb(var(--ec-page-text))] border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))]'
       }`}
     >
       {label} ({count})
@@ -210,12 +210,12 @@ const MessageTable = (props: MessageTableProps) => {
     );
 
     return (
-      <div className="flow-root bg-white border-gray-200 border  p-4 pb-2 rounded-lg text-gray-900">
+      <div className="flow-root bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border-[rgb(var(--ec-page-border))] border  p-4 pb-2 rounded-lg text-[rgb(var(--ec-page-text))]">
         <div className="space-y-4">
           <h2 className="text-xl font-semibold">
             {title} ({searchTerm || typeFilter ? `${filteredMessages.length}/${messages.length}` : messages.length})
           </h2>
-          <span className="text-sm text-gray-700">
+          <span className="text-sm text-[rgb(var(--ec-page-text-muted))]">
             Quickly find the message you need by searching for the name, type, or summary.
           </span>
 
@@ -238,7 +238,12 @@ const MessageTable = (props: MessageTableProps) => {
 
           <div className="relative">
             <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-              <svg className="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <svg
+                className="h-5 w-5 text-[rgb(var(--ec-icon-color))]"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
                 <path
                   fillRule="evenodd"
                   d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
@@ -254,7 +259,7 @@ const MessageTable = (props: MessageTableProps) => {
                 setCurrentPage(1); // Reset to first page when searching
               }}
               placeholder={`Search by name, type, or summary...`}
-              className="block w-full rounded-md border-0 py-1.5 pl-10 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+              className="block w-full rounded-md border-0 py-1.5 pl-10 pr-10 text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-input-bg))] ring-1 ring-inset ring-[rgb(var(--ec-input-border))] placeholder:text-[rgb(var(--ec-input-placeholder))] focus:ring-2 focus:ring-inset focus:ring-[rgb(var(--ec-accent))] sm:text-sm sm:leading-6"
             />
             {searchTerm && (
               <button
@@ -265,7 +270,11 @@ const MessageTable = (props: MessageTableProps) => {
                 className="absolute inset-y-0 right-0 flex items-center pr-3"
                 aria-label="Clear search"
               >
-                <svg className="h-5 w-5 text-gray-400 hover:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
+                <svg
+                  className="h-5 w-5 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))]"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
                   <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                 </svg>
               </button>
@@ -275,35 +284,44 @@ const MessageTable = (props: MessageTableProps) => {
         <div className="overflow-x-auto">
           <div className="inline-block min-w-full py-2 align-middle">
             <div className="max-w-full overflow-hidden">
-              <table className="min-w-full table-fixed divide-y divide-gray-300  rounded-sm bg-white ">
+              <table className="min-w-full table-fixed divide-y divide-[rgb(var(--ec-page-border))] rounded-sm bg-[rgb(var(--ec-page-bg))]">
                 <thead>
                   <tr>
                     <th
                       scope="col"
-                      className={`${showChannels ? 'w-1/4' : 'w-1/3'} py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6`}
+                      className={`${showChannels ? 'w-1/4' : 'w-1/3'} py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-[rgb(var(--ec-page-text))] sm:pl-6`}
                     >
                       Name
                     </th>
-                    <th scope="col" className="w-[100px] px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                    <th
+                      scope="col"
+                      className="w-[100px] px-3 py-3.5 text-left text-sm font-semibold text-[rgb(var(--ec-page-text))]"
+                    >
                       Version
                     </th>
-                    <th scope="col" className="w-[100px] py-3.5 pl-3.5 pr-3 text-left text-sm font-semibold text-gray-900">
+                    <th
+                      scope="col"
+                      className="w-[100px] py-3.5 pl-3.5 pr-3 text-left text-sm font-semibold text-[rgb(var(--ec-page-text))]"
+                    >
                       Type
                     </th>
                     <th
                       scope="col"
-                      className={`${showChannels ? 'w-1/3' : 'w-1/2'} px-3 py-3.5 text-left text-sm font-semibold text-gray-900`}
+                      className={`${showChannels ? 'w-1/3' : 'w-1/2'} px-3 py-3.5 text-left text-sm font-semibold text-[rgb(var(--ec-page-text))]`}
                     >
                       Summary
                     </th>
                     {showChannels && (
-                      <th scope="col" className="w-1/4 px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                      <th
+                        scope="col"
+                        className="w-1/4 px-3 py-3.5 text-left text-sm font-semibold text-[rgb(var(--ec-page-text))]"
+                      >
                         Channels
                       </th>
                     )}
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-gray-200">
+                <tbody className="divide-y divide-[rgb(var(--ec-page-border))]">
                   {paginatedMessages.length > 0 ? (
                     paginatedMessages.map((message) => (
                       <MessageRow
@@ -315,7 +333,10 @@ const MessageTable = (props: MessageTableProps) => {
                     ))
                   ) : (
                     <tr>
-                      <td colSpan={showChannels ? 5 : 4} className="text-center py-4 text-sm text-gray-500">
+                      <td
+                        colSpan={showChannels ? 5 : 4}
+                        className="text-center py-4 text-sm text-[rgb(var(--ec-page-text-muted))]"
+                      >
                         No messages found
                       </td>
                     </tr>
@@ -326,26 +347,26 @@ const MessageTable = (props: MessageTableProps) => {
           </div>
         </div>
         {totalPages > 1 && (
-          <div className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6 -mt-2">
+          <div className="flex items-center justify-between border-t border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] px-4 py-3 sm:px-6 -mt-2">
             <div className="flex flex-1 justify-between sm:hidden">
               <button
                 onClick={() => setCurrentPage(currentPage - 1)}
                 disabled={currentPage === 1}
-                className={`relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium ${currentPage === 1 ? 'text-gray-300' : 'text-gray-700 hover:bg-gray-50'}`}
+                className={`relative inline-flex items-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] px-4 py-2 text-sm font-medium ${currentPage === 1 ? 'text-[rgb(var(--ec-page-text-muted))] opacity-50' : 'text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))]'}`}
               >
                 Previous
               </button>
               <button
                 onClick={() => setCurrentPage(currentPage + 1)}
                 disabled={currentPage === totalPages}
-                className={`relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium ${currentPage === totalPages ? 'text-gray-300' : 'text-gray-700 hover:bg-gray-50'}`}
+                className={`relative ml-3 inline-flex items-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] px-4 py-2 text-sm font-medium ${currentPage === totalPages ? 'text-[rgb(var(--ec-page-text-muted))] opacity-50' : 'text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))]'}`}
               >
                 Next
               </button>
             </div>
             <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
               <div>
-                <p className="text-sm text-gray-700">
+                <p className="text-sm text-[rgb(var(--ec-page-text-muted))]">
                   Showing <span className="font-medium">{startIndex + 1}</span> to{' '}
                   <span className="font-medium">{Math.min(startIndex + itemsPerPage, filteredMessages.length)}</span> of{' '}
                   <span className="font-medium">{filteredMessages.length}</span> results
@@ -356,7 +377,7 @@ const MessageTable = (props: MessageTableProps) => {
                   <button
                     onClick={() => setCurrentPage(currentPage - 1)}
                     disabled={currentPage === 1}
-                    className={`relative inline-flex items-center rounded-l-md px-2 py-2 ${currentPage === 1 ? 'text-gray-300' : 'text-gray-400 hover:bg-gray-50'} ring-1 ring-inset ring-gray-300`}
+                    className={`relative inline-flex items-center rounded-l-md px-2 py-2 ${currentPage === 1 ? 'text-[rgb(var(--ec-page-text-muted))] opacity-50' : 'text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-content-hover))]'} ring-1 ring-inset ring-[rgb(var(--ec-page-border))]`}
                   >
                     <span className="sr-only">Previous</span>
                     <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -370,7 +391,7 @@ const MessageTable = (props: MessageTableProps) => {
                   <button
                     onClick={() => setCurrentPage(currentPage + 1)}
                     disabled={currentPage === totalPages}
-                    className={`relative inline-flex items-center rounded-r-md px-2 py-2 ${currentPage === totalPages ? 'text-gray-300' : 'text-gray-400 hover:bg-gray-50'} ring-1 ring-inset ring-gray-300`}
+                    className={`relative inline-flex items-center rounded-r-md px-2 py-2 ${currentPage === totalPages ? 'text-[rgb(var(--ec-page-text-muted))] opacity-50' : 'text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-content-hover))]'} ring-1 ring-inset ring-[rgb(var(--ec-page-border))]`}
                   >
                     <span className="sr-only">Next</span>
                     <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -392,7 +413,7 @@ const MessageTable = (props: MessageTableProps) => {
 
   return (
     <div className={`mx-auto not-prose py-4  space-y-4  my-4`}>
-      <h2 className="text-2xl font-semibold">Messages for this {collection.slice(0, -1)}</h2>
+      <h2 className="text-2xl font-semibold text-[rgb(var(--ec-page-text))]">Messages for this {collection.slice(0, -1)}</h2>
       <div>
         {shouldRenderSends && (
           <div>

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

@@ -622,7 +622,7 @@ const NodeGraphBuilder = ({
               <div className="relative group">
                 <button
                   onClick={() => setIsSettingsOpen(!isSettingsOpen)}
-                  className="py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
+                  className="py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-[rgb(var(--ec-accent-subtle))] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))]"
                   aria-label="Open settings"
                 >
                   <CogIcon className="h-5 w-5 text-gray-600" />
@@ -634,12 +634,14 @@ const NodeGraphBuilder = ({
               <div className="relative group">
                 <button
                   onClick={toggleFullScreen}
-                  className={`py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 ${
-                    isFullscreen ? 'bg-purple-50 text-purple-600' : ''
+                  className={`py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-[rgb(var(--ec-accent-subtle))] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] ${
+                    isFullscreen ? 'bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))]' : ''
                   }`}
                   aria-label={isFullscreen ? 'Exit presentation mode' : 'Enter presentation mode'}
                 >
-                  <PresentationChartLineIcon className={`h-5 w-5 ${isFullscreen ? 'text-purple-600' : 'text-gray-600'}`} />
+                  <PresentationChartLineIcon
+                    className={`h-5 w-5 ${isFullscreen ? 'text-[rgb(var(--ec-accent))]' : 'text-gray-600'}`}
+                  />
                 </button>
                 <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2 py-1 bg-gray-900 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
                   {isFullscreen ? 'Exit Presentation Mode' : 'Presentation Mode'}
@@ -667,7 +669,7 @@ const NodeGraphBuilder = ({
                 <select
                   value={links.find((link) => window.location.href.includes(link.url))?.url || links[0].url}
                   onChange={(e) => navigate(e.target.value)}
-                  className="appearance-none pl-7 pr-6 py-0 text-[14px] bg-white rounded-md border border-gray-200 hover:bg-gray-100/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
+                  className="appearance-none pl-7 pr-6 py-0 text-[14px] bg-white rounded-md border border-gray-200 hover:bg-gray-100/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))]"
                   style={{ minWidth: 120, height: '26px' }}
                 >
                   {links.map((link) => (
@@ -699,8 +701,8 @@ const NodeGraphBuilder = ({
                     id="message-animation-toggle"
                     onClick={toggleAnimateMessages}
                     className={`${
-                      animateMessages ? 'bg-purple-600' : 'bg-gray-200'
-                    } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2`}
+                      animateMessages ? 'bg-[rgb(var(--ec-accent))]' : 'bg-gray-200'
+                    } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2`}
                   >
                     <span
                       className={`${
@@ -721,8 +723,8 @@ const NodeGraphBuilder = ({
                       id="hide-channels-toggle"
                       onClick={toggleChannelsVisibility}
                       className={`${
-                        hideChannels ? 'bg-purple-600' : 'bg-gray-200'
-                      } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2`}
+                        hideChannels ? 'bg-[rgb(var(--ec-accent))]' : 'bg-gray-200'
+                      } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2`}
                     >
                       <span
                         className={`${
@@ -737,7 +739,7 @@ const NodeGraphBuilder = ({
               <div className="pt-4 border-t border-gray-200 space-y-2">
                 <button
                   onClick={openStudioModal}
-                  className="w-full flex items-center justify-center space-x-2 px-4 py-2 bg-black hover:bg-gray-800 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-colors"
+                  className="w-full flex items-center justify-center space-x-2 px-4 py-2 bg-black hover:bg-gray-800 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 transition-colors"
                 >
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
@@ -751,7 +753,7 @@ const NodeGraphBuilder = ({
                 </button>
                 <button
                   onClick={handleExportVisual}
-                  className="w-full flex items-center justify-center border border-gray-200 space-x-2 px-4 py-2 bg-white text-gray-800 text-sm font-medium rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                  className="w-full flex items-center justify-center border border-gray-200 space-x-2 px-4 py-2 bg-white text-gray-800 text-sm font-medium rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2"
                 >
                   <DocumentArrowDownIcon className="w-4 h-4" />
                   <span>Export as png</span>
@@ -780,7 +782,7 @@ const NodeGraphBuilder = ({
                 {Object.entries(legend).map(([key, { count, colorClass, groupId }]) => (
                   <li
                     key={key}
-                    className="flex space-x-2 items-center text-[10px] cursor-pointer hover:text-purple-600 hover:underline"
+                    className="flex space-x-2 items-center text-[10px] cursor-pointer hover:text-[rgb(var(--ec-accent))] hover:underline"
                     onClick={() => handleLegendClick(key, groupId)}
                   >
                     <span className={`w-2 h-2 block ${colorClass}`} />