@eventcatalog/core 3.0.0 → 3.2.0

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

@@ -20,13 +20,13 @@ export const columns = (tableConfiguration: TableConfiguration) => [
           href={buildUrl(`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`)}
           className="group inline-flex items-center"
         >
-          <span className="inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-yellow-300 hover:bg-yellow-50 transition-colors">
+          <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-yellow-400 dark:hover:border-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-500/10 transition-colors">
             <span className="flex items-center justify-center w-6 h-6 bg-yellow-500 rounded-l-md">
               <RectangleGroupIcon className="h-3 w-3 text-white" />
             </span>
-            <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">
+            <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
               {messageRaw.data.name}
-              <span className="text-gray-400 ml-1">v{messageRaw.data.version}</span>
+              <span className="text-[rgb(var(--ec-icon-color))] ml-1">v{messageRaw.data.version}</span>
             </span>
           </span>
         </a>
@@ -46,7 +46,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
       const isDraft = info.row.original.data.draft;
       const displayText = `${summary || ''}${isDraft ? ' (Draft)' : ''}`;
       return (
-        <span className="text-sm text-gray-600 line-clamp-2" title={displayText}>
+        <span className="text-sm text-[rgb(var(--ec-page-text-muted))] line-clamp-2" title={displayText}>
           {displayText}
         </span>
       );
@@ -70,7 +70,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
 
       if (services?.length === 0 || !services)
         return (
-          <span className="inline-flex items-center px-2 py-1 text-xs text-gray-400 bg-gray-50 rounded-md border border-gray-100">
+          <span className="inline-flex items-center px-2 py-1 text-xs text-[rgb(var(--ec-icon-color))] bg-[rgb(var(--ec-content-hover))] rounded-md border border-[rgb(var(--ec-page-border))]">
             No services
           </span>
         );
@@ -86,19 +86,22 @@ export const columns = (tableConfiguration: TableConfiguration) => [
               href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}`)}
               className="group inline-flex items-center"
             >
-              <span className="inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-pink-300 hover:bg-pink-50 transition-colors">
+              <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-pink-400 dark:hover:border-pink-500 hover:bg-pink-50 dark:hover:bg-pink-500/10 transition-colors">
                 <span className="flex items-center justify-center w-6 h-6 bg-pink-500 rounded-l-md">
                   <ServerIcon className="h-3 w-3 text-white" />
                 </span>
-                <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">
+                <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
                   {service.data.name}
-                  <span className="text-gray-400 ml-1">v{service.data.version}</span>
+                  <span className="text-[rgb(var(--ec-icon-color))] ml-1">v{service.data.version}</span>
                 </span>
               </span>
             </a>
           ))}
           {hiddenCount > 0 && (
-            <button onClick={() => setIsExpanded(!isExpanded)} className="text-xs text-gray-500 hover:text-gray-700 text-left">
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="text-xs text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] text-left"
+            >
               {isExpanded ? 'Show less' : `+${hiddenCount} more`}
             </button>
           )}
@@ -116,13 +119,13 @@ export const columns = (tableConfiguration: TableConfiguration) => [
       return (
         <div className="flex items-center gap-2">
           <a
-            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-colors whitespace-nowrap"
+            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] transition-colors whitespace-nowrap"
             href={buildUrl(`/docs/${item.collection}/${item.data.id}/${item.data.version}`)}
           >
             Docs
           </a>
           <a
-            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-colors whitespace-nowrap"
+            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] transition-colors whitespace-nowrap"
             href={buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`)}
           >
             Visualiser

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

@@ -19,13 +19,13 @@ export const columns = (tableConfiguration: TableConfiguration) => [
           href={buildUrl(`/docs/${flowRaw.collection}/${flowRaw.data.id}/${flowRaw.data.version}`)}
           className="group inline-flex items-center"
         >
-          <span className="inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-teal-300 hover:bg-teal-50 transition-colors">
+          <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-teal-400 dark:hover:border-teal-500 hover:bg-teal-50 dark:hover:bg-teal-500/10 transition-colors">
             <span className="flex items-center justify-center w-6 h-6 bg-teal-500 rounded-l-md">
               <QueueListIcon className="h-3 w-3 text-white" />
             </span>
-            <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">
+            <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
               {flowRaw.data.name}
-              <span className="text-gray-400 ml-1">v{flowRaw.data.version}</span>
+              <span className="text-[rgb(var(--ec-icon-color))] ml-1">v{flowRaw.data.version}</span>
             </span>
           </span>
         </a>
@@ -43,7 +43,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
     cell: (info) => {
       const summary = info.renderValue() as string;
       return (
-        <span className="text-sm text-gray-600 line-clamp-2" title={summary || ''}>
+        <span className="text-sm text-[rgb(var(--ec-page-text-muted))] line-clamp-2" title={summary || ''}>
           {summary}
         </span>
       );
@@ -63,13 +63,13 @@ export const columns = (tableConfiguration: TableConfiguration) => [
       return (
         <div className="flex items-center gap-2">
           <a
-            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-colors whitespace-nowrap"
+            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] transition-colors whitespace-nowrap"
             href={buildUrl(`/docs/${item.collection}/${item.data.id}/${item.data.version}`)}
           >
             Docs
           </a>
           <a
-            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-colors whitespace-nowrap"
+            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] transition-colors whitespace-nowrap"
             href={buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`)}
           >
             Visualiser

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

@@ -37,14 +37,14 @@ export const columns = (tableConfiguration: TableConfiguration) => [
           className="group inline-flex items-center"
         >
           <span
-            className={`inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-${color}-300 hover:bg-${color}-50 transition-colors`}
+            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-${color}-400 dark:hover:border-${color}-500 hover:bg-${color}-50 dark:hover:bg-${color}-500/10 transition-colors`}
           >
             <span className={`flex items-center justify-center w-6 h-6 bg-${color}-500 rounded-l-md`}>
               <Icon className="h-3 w-3 text-white" />
             </span>
-            <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">
+            <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
               {messageRaw.data.name}
-              <span className="text-gray-400 ml-1">v{messageRaw.data.version}</span>
+              <span className="text-[rgb(var(--ec-icon-color))] ml-1">v{messageRaw.data.version}</span>
             </span>
           </span>
         </a>
@@ -64,7 +64,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
       const isDraft = info.row.original.data.draft;
       const displayText = `${summary || ''}${isDraft ? ' (Draft)' : ''}`;
       return (
-        <span className="text-sm text-gray-600 line-clamp-2" title={displayText}>
+        <span className="text-sm text-[rgb(var(--ec-page-text-muted))] line-clamp-2" title={displayText}>
           {displayText}
         </span>
       );
@@ -89,7 +89,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
 
       if (producers?.length === 0 || !producers)
         return (
-          <span className="inline-flex items-center px-2 py-1 text-xs text-gray-400 bg-gray-50 rounded-md border border-gray-100">
+          <span className="inline-flex items-center px-2 py-1 text-xs text-[rgb(var(--ec-icon-color))] bg-[rgb(var(--ec-content-hover))] rounded-md border border-[rgb(var(--ec-page-border))]">
             No producers
           </span>
         );
@@ -105,19 +105,22 @@ export const columns = (tableConfiguration: TableConfiguration) => [
               href={buildUrl(`/docs/${producer.collection}/${producer.data.id}/${producer.data.version}`)}
               className="group inline-flex items-center"
             >
-              <span className="inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-pink-300 hover:bg-pink-50 transition-colors">
+              <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-pink-400 dark:hover:border-pink-500 hover:bg-pink-50 dark:hover:bg-pink-500/10 transition-colors">
                 <span className="flex items-center justify-center w-6 h-6 bg-pink-500 rounded-l-md">
                   <ServerIcon className="h-3 w-3 text-white" />
                 </span>
-                <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">
+                <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
                   {producer.data.name}
-                  <span className="text-gray-400 ml-1">v{producer.data.version}</span>
+                  <span className="text-[rgb(var(--ec-icon-color))] ml-1">v{producer.data.version}</span>
                 </span>
               </span>
             </a>
           ))}
           {hiddenCount > 0 && (
-            <button onClick={() => setIsExpanded(!isExpanded)} className="text-xs text-gray-500 hover:text-gray-700 text-left">
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="text-xs text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] text-left"
+            >
               {isExpanded ? 'Show less' : `+${hiddenCount} more`}
             </button>
           )}
@@ -140,7 +143,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
 
       if (consumers?.length === 0 || !consumers)
         return (
-          <span className="inline-flex items-center px-2 py-1 text-xs text-gray-400 bg-gray-50 rounded-md border border-gray-100">
+          <span className="inline-flex items-center px-2 py-1 text-xs text-[rgb(var(--ec-icon-color))] bg-[rgb(var(--ec-content-hover))] rounded-md border border-[rgb(var(--ec-page-border))]">
             No consumers
           </span>
         );
@@ -156,19 +159,22 @@ export const columns = (tableConfiguration: TableConfiguration) => [
               href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
               className="group inline-flex items-center"
             >
-              <span className="inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-pink-300 hover:bg-pink-50 transition-colors">
+              <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-pink-400 dark:hover:border-pink-500 hover:bg-pink-50 dark:hover:bg-pink-500/10 transition-colors">
                 <span className="flex items-center justify-center w-6 h-6 bg-pink-500 rounded-l-md">
                   <ServerIcon className="h-3 w-3 text-white" />
                 </span>
-                <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">
+                <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
                   {consumer.data.name}
-                  <span className="text-gray-400 ml-1">v{consumer.data.version}</span>
+                  <span className="text-[rgb(var(--ec-icon-color))] ml-1">v{consumer.data.version}</span>
                 </span>
               </span>
             </a>
           ))}
           {hiddenCount > 0 && (
-            <button onClick={() => setIsExpanded(!isExpanded)} className="text-xs text-gray-500 hover:text-gray-700 text-left">
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="text-xs text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] text-left"
+            >
               {isExpanded ? 'Show less' : `+${hiddenCount} more`}
             </button>
           )}
@@ -187,13 +193,13 @@ export const columns = (tableConfiguration: TableConfiguration) => [
       return (
         <div className="flex items-center gap-2">
           <a
-            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-colors whitespace-nowrap"
+            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] transition-colors whitespace-nowrap"
             href={buildUrl(`/docs/${item.collection}/${item.data.id}/${item.data.version}`)}
           >
             Docs
           </a>
           <a
-            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-colors whitespace-nowrap"
+            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] transition-colors whitespace-nowrap"
             href={buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`)}
           >
             Visualiser

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

@@ -20,13 +20,13 @@ export const columns = (tableConfiguration: TableConfiguration) => [
           href={buildUrl(`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`)}
           className="group inline-flex items-center"
         >
-          <span className="inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-pink-300 hover:bg-pink-50 transition-colors">
+          <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-pink-400 dark:hover:border-pink-500 hover:bg-pink-50 dark:hover:bg-pink-500/10 transition-colors">
             <span className="flex items-center justify-center w-6 h-6 bg-pink-500 rounded-l-md">
               <ServerIcon className="h-3 w-3 text-white" />
             </span>
-            <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">
+            <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
               {messageRaw.data.name}
-              <span className="text-gray-400 ml-1">v{messageRaw.data.version}</span>
+              <span className="text-[rgb(var(--ec-icon-color))] ml-1">v{messageRaw.data.version}</span>
             </span>
           </span>
         </a>
@@ -45,7 +45,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
       const isDraft = info.row.original.data.draft;
       const displayText = `${summary || ''}${isDraft ? ' (Draft)' : ''}`;
       return (
-        <span className="text-sm text-gray-600 line-clamp-2" title={displayText}>
+        <span className="text-sm text-[rgb(var(--ec-page-text-muted))] line-clamp-2" title={displayText}>
           {displayText}
         </span>
       );
@@ -80,7 +80,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
 
       if (receives?.length === 0 || !receives)
         return (
-          <span className="inline-flex items-center px-2 py-1 text-xs text-gray-400 bg-gray-50 rounded-md border border-gray-100">
+          <span className="inline-flex items-center px-2 py-1 text-xs text-[rgb(var(--ec-icon-color))] bg-[rgb(var(--ec-content-hover))] rounded-md border border-[rgb(var(--ec-page-border))]">
             No messages
           </span>
         );
@@ -97,20 +97,23 @@ export const columns = (tableConfiguration: TableConfiguration) => [
               className="group inline-flex items-center"
             >
               <span
-                className={`inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-${consumer.color}-300 hover:bg-${consumer.color}-50 transition-colors`}
+                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-${consumer.color}-400 dark:hover:border-${consumer.color}-500 hover:bg-${consumer.color}-50 dark:hover:bg-${consumer.color}-500/10 transition-colors`}
               >
                 <span className={`flex items-center justify-center w-6 h-6 bg-${consumer.color}-500 rounded-l-md`}>
                   <consumer.Icon className="h-3 w-3 text-white" />
                 </span>
-                <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">
+                <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
                   {consumer.data.name}
-                  <span className="text-gray-400 ml-1">v{consumer.data.version}</span>
+                  <span className="text-[rgb(var(--ec-icon-color))] ml-1">v{consumer.data.version}</span>
                 </span>
               </span>
             </a>
           ))}
           {hiddenCount > 0 && (
-            <button onClick={() => setIsExpanded(!isExpanded)} className="text-xs text-gray-500 hover:text-gray-700 text-left">
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="text-xs text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] text-left"
+            >
               {isExpanded ? 'Show less' : `+${hiddenCount} more`}
             </button>
           )}
@@ -143,7 +146,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
 
       if (sends?.length === 0 || !sends)
         return (
-          <span className="inline-flex items-center px-2 py-1 text-xs text-gray-400 bg-gray-50 rounded-md border border-gray-100">
+          <span className="inline-flex items-center px-2 py-1 text-xs text-[rgb(var(--ec-icon-color))] bg-[rgb(var(--ec-content-hover))] rounded-md border border-[rgb(var(--ec-page-border))]">
             No messages
           </span>
         );
@@ -160,20 +163,23 @@ export const columns = (tableConfiguration: TableConfiguration) => [
               className="group inline-flex items-center"
             >
               <span
-                className={`inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-${sender.color}-300 hover:bg-${sender.color}-50 transition-colors`}
+                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-${sender.color}-400 dark:hover:border-${sender.color}-500 hover:bg-${sender.color}-50 dark:hover:bg-${sender.color}-500/10 transition-colors`}
               >
                 <span className={`flex items-center justify-center w-6 h-6 bg-${sender.color}-500 rounded-l-md`}>
                   <sender.Icon className="h-3 w-3 text-white" />
                 </span>
-                <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">
+                <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
                   {sender.data.name}
-                  <span className="text-gray-400 ml-1">v{sender.data.version}</span>
+                  <span className="text-[rgb(var(--ec-icon-color))] ml-1">v{sender.data.version}</span>
                 </span>
               </span>
             </a>
           ))}
           {hiddenCount > 0 && (
-            <button onClick={() => setIsExpanded(!isExpanded)} className="text-xs text-gray-500 hover:text-gray-700 text-left">
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="text-xs text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] text-left"
+            >
               {isExpanded ? 'Show less' : `+${hiddenCount} more`}
             </button>
           )}
@@ -191,13 +197,13 @@ export const columns = (tableConfiguration: TableConfiguration) => [
       return (
         <div className="flex items-center gap-2">
           <a
-            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-colors whitespace-nowrap"
+            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] transition-colors whitespace-nowrap"
             href={buildUrl(`/docs/${item.collection}/${item.data.id}/${item.data.version}`)}
           >
             Docs
           </a>
           <a
-            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-colors whitespace-nowrap"
+            className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] transition-colors whitespace-nowrap"
             href={buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`)}
           >
             Visualiser

package/eventcatalog/src/components/Tables/columns/SharedColumns.tsx

@@ -20,7 +20,7 @@ export const createBadgesColumn = <T extends { data: Pick<TData<U>['data'], 'bad
 
       if (badges?.length === 0 || !badges)
         return (
-          <span className="inline-flex items-center px-2 py-1 text-xs text-gray-400 bg-gray-50 rounded-md border border-gray-100">
+          <span className="inline-flex items-center px-2 py-1 text-xs text-[rgb(var(--ec-icon-color))] bg-[rgb(var(--ec-content-hover))] rounded-md border border-[rgb(var(--ec-page-border))]">
             No badges
           </span>
         );
@@ -35,19 +35,19 @@ export const createBadgesColumn = <T extends { data: Pick<TData<U>['data'], 'bad
             return (
               <span
                 key={`${badge.id}-${index}`}
-                className={`inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-${badge.backgroundColor}-300 hover:bg-${badge.backgroundColor}-50 transition-colors`}
+                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-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
               >
                 <span className={`flex items-center justify-center w-6 h-6 bg-${badge.backgroundColor}-500 rounded-l-md`}>
                   {IconComponent ? <IconComponent className="h-3 w-3 text-white" /> : <Tag className="h-3 w-3 text-white" />}
                 </span>
-                <span className="px-2 py-1 text-xs text-gray-700">{badge.content}</span>
+                <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))]">{badge.content}</span>
               </span>
             );
           })}
           {hiddenCount > 0 && (
             <button
               onClick={() => setIsExpanded(!isExpanded)}
-              className="text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded hover:bg-gray-100 transition-colors"
+              className="text-xs text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] px-2 py-1 rounded hover:bg-[rgb(var(--ec-content-hover))] transition-colors"
             >
               {isExpanded ? 'Show less' : `+${hiddenCount} more`}
             </button>

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

@@ -25,11 +25,13 @@ export const columns = (tableConfiguration: TableConfiguration) => [
       const team = info.row.original;
       return (
         <a href={buildUrl(`/docs/${team.collection}/${team.data.id}`)} className="group inline-flex items-center">
-          <span className="inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-pink-300 hover:bg-pink-50 transition-colors">
+          <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-pink-400 dark:hover:border-pink-500 hover:bg-pink-50 dark:hover:bg-pink-500/10 transition-colors">
             <span className="flex items-center justify-center w-6 h-6 bg-pink-500 rounded-l-md">
               <Users className="h-3 w-3 text-white" />
             </span>
-            <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">{team.data.name}</span>
+            <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
+              {team.data.name}
+            </span>
           </span>
         </a>
       );
@@ -62,7 +64,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
 
         if (messages?.length === 0 || !messages)
           return (
-            <span className="inline-flex items-center px-2 py-1 text-xs text-gray-400 bg-gray-50 rounded-md border border-gray-100">
+            <span className="inline-flex items-center px-2 py-1 text-xs text-[rgb(var(--ec-icon-color))] bg-[rgb(var(--ec-content-hover))] rounded-md border border-[rgb(var(--ec-page-border))]">
               No messages
             </span>
           );
@@ -81,21 +83,24 @@ export const columns = (tableConfiguration: TableConfiguration) => [
                   className="group inline-flex items-center"
                 >
                   <span
-                    className={`inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-${color}-300 hover:bg-${color}-50 transition-colors`}
+                    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-${color}-400 dark:hover:border-${color}-500 hover:bg-${color}-50 dark:hover:bg-${color}-500/10 transition-colors`}
                   >
                     <span className={`flex items-center justify-center w-6 h-6 bg-${color}-500 rounded-l-md`}>
                       <Icon className="h-3 w-3 text-white" />
                     </span>
-                    <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">
+                    <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
                       {message.data.name}
-                      <span className="text-gray-400 ml-1">v{message.data.version}</span>
+                      <span className="text-[rgb(var(--ec-icon-color))] ml-1">v{message.data.version}</span>
                     </span>
                   </span>
                 </a>
               );
             })}
             {hiddenCount > 0 && (
-              <button onClick={() => setIsExpanded(!isExpanded)} className="text-xs text-gray-500 hover:text-gray-700 text-left">
+              <button
+                onClick={() => setIsExpanded(!isExpanded)}
+                className="text-xs text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] text-left"
+              >
                 {isExpanded ? 'Show less' : `+${hiddenCount} more`}
               </button>
             )}
@@ -118,7 +123,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
 
       if (services?.length === 0 || !services)
         return (
-          <span className="inline-flex items-center px-2 py-1 text-xs text-gray-400 bg-gray-50 rounded-md border border-gray-100">
+          <span className="inline-flex items-center px-2 py-1 text-xs text-[rgb(var(--ec-icon-color))] bg-[rgb(var(--ec-content-hover))] rounded-md border border-[rgb(var(--ec-page-border))]">
             No services
           </span>
         );
@@ -134,19 +139,22 @@ export const columns = (tableConfiguration: TableConfiguration) => [
               href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}`)}
               className="group inline-flex items-center"
             >
-              <span className="inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-pink-300 hover:bg-pink-50 transition-colors">
+              <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-pink-400 dark:hover:border-pink-500 hover:bg-pink-50 dark:hover:bg-pink-500/10 transition-colors">
                 <span className="flex items-center justify-center w-6 h-6 bg-pink-500 rounded-l-md">
                   <ServerIcon className="h-3 w-3 text-white" />
                 </span>
-                <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">
+                <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
                   {service.data.name}
-                  <span className="text-gray-400 ml-1">v{service.data.version}</span>
+                  <span className="text-[rgb(var(--ec-icon-color))] ml-1">v{service.data.version}</span>
                 </span>
               </span>
             </a>
           ))}
           {hiddenCount > 0 && (
-            <button onClick={() => setIsExpanded(!isExpanded)} className="text-xs text-gray-500 hover:text-gray-700 text-left">
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="text-xs text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] text-left"
+            >
               {isExpanded ? 'Show less' : `+${hiddenCount} more`}
             </button>
           )}
@@ -163,7 +171,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
       const item = info.row.original;
       return (
         <a
-          className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-colors whitespace-nowrap"
+          className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] transition-colors whitespace-nowrap"
           href={buildUrl(`/docs/${item.collection}/${item.data.id}`)}
         >
           View team