@eventcatalog/core 3.0.0-beta.9 → 3.1.0

package/eventcatalog/src/components/Header.astro

@@ -2,10 +2,12 @@
 import catalog from '@utils/eventcatalog-config/catalog';
 import Search from '@components/Search/Search.astro';
 import { buildUrl } from '@utils/url-builder';
-import { showEventCatalogBranding, showCustomBranding } from '@utils/feature';
+import { showEventCatalogBranding, showCustomBranding, isEventCatalogChatEnabled } from '@utils/feature';
 import { getSession } from 'auth-astro/server';
 import { isAuthEnabled, isSSR } from '@utils/feature';
 import { EnvironmentDropdown } from './EnvironmentDropdown';
+import ChatPanelButton from './ChatPanel/ChatPanelButton';
+import ThemeToggle from './ThemeToggle';
 
 let session = null;
 if (isAuthEnabled()) {
@@ -23,7 +25,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
 
 <nav
   id="eventcatalog-header"
-  class="fixed top-0 left-0 right-0 h-header bg-white/95 border-b border-gray-200 py-3 font-bold text-xl backdrop-blur-md z-10"
+  class="fixed top-0 left-0 right-0 h-header bg-[rgb(var(--ec-header-bg))] border-b border-[rgb(var(--ec-header-border))] py-3 font-bold text-xl z-10 text-[rgb(var(--ec-header-text))]"
 >
   <div class="px-4 sm:px-4 lg:px-4">
     <div class="flex justify-between items-center">
@@ -42,8 +44,11 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
         </a>
       </div>
 
-      <div class="hidden lg:block flex-grow -ml-1">
-        <Search />
+      <div class="hidden lg:flex flex-grow -ml-1 items-center">
+        <div class="flex-grow max-w-xl">
+          <Search />
+        </div>
+        {isEventCatalogChatEnabled() && <ChatPanelButton client:load />}
       </div>
 
       <div class="hidden md:block w-3/12">
@@ -53,6 +58,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
               {catalog.environments && catalog.environments.length > 0 && (
                 <EnvironmentDropdown environments={catalog.environments} client:load />
               )}
+              <ThemeToggle client:load />
               <div class="relative">
                 <button
                   id="profile-menu-button"
@@ -60,6 +66,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                   class="flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 rounded-full"
                   aria-expanded="false"
                   aria-haspopup="true"
+                  aria-label="User menu"
                 >
                   {session.user?.image && !session.user?.image?.includes('googleusercontent.com') ? (
                     <img
@@ -82,15 +89,17 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                 </button>
                 <div
                   id="profile-dropdown"
-                  class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-md py-1 z-50 border-2 border-gray-200 overflow-hidden"
+                  class="hidden absolute right-0 mt-2 w-48 bg-[rgb(var(--ec-dropdown-bg))] rounded-lg shadow-md py-1 z-50 border-2 border-[rgb(var(--ec-dropdown-border))] overflow-hidden"
                 >
-                  <div class="px-4 py-2 text-sm text-gray-700 border-b border-gray-200">
+                  <div class="px-4 py-2 text-sm text-[rgb(var(--ec-dropdown-text))] border-b border-[rgb(var(--ec-dropdown-border))]">
                     <div class="font-semibold">{session.user?.name || 'User'}</div>
-                    {session.user?.email && <div class="text-gray-500 text-xs mt-0.5">{session.user.email}</div>}
+                    {session.user?.email && (
+                      <div class="text-[rgb(var(--ec-icon-color))] text-xs mt-0.5">{session.user.email}</div>
+                    )}
                   </div>
                   <button
                     id="signout-btn"
-                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors font-medium"
+                    class="block w-full text-left px-4 py-2 text-sm text-[rgb(var(--ec-dropdown-text))] hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors font-medium"
                   >
                     Sign out
                   </button>
@@ -106,27 +115,40 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                 {isAuthEnabled() && (
                   <button
                     id="okta-signin-btn"
-                    class="bg-gray-900 hover:bg-gray-800 text-white text-sm font-medium px-4 py-2 rounded-lg transition-all shadow-sm hover:shadow focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+                    class="bg-[rgb(var(--ec-button-bg))] hover:bg-[rgb(var(--ec-button-bg-hover))] text-[rgb(var(--ec-button-text))] text-sm font-medium px-4 py-2 rounded-lg transition-all shadow-sm hover:shadow focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
                   >
                     Sign In
                   </button>
                 )}
+                <ThemeToggle client:load />
                 {showEventCatalogBranding() && (
                   <ul class="flex space-x-4">
                     <li>
                       <a
                         href="https://discord.com/invite/3rjaZMmrAm"
-                        class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+                        class="block p-1.5 rounded-lg hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors"
+                        aria-label="Join our Discord community"
                       >
-                        <img src={buildUrl('/icons/discord.svg', true)} class="h-6 w-6  hover:opacity-100 transition-opacity" />
+                        <img
+                          src={buildUrl('/icons/discord.svg', true)}
+                          alt=""
+                          class="h-6 w-6  hover:opacity-100 transition-opacity"
+                          aria-hidden="true"
+                        />
                       </a>
                     </li>
                     <li>
                       <a
                         href="https://github.com/event-catalog/eventcatalog"
-                        class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+                        class="block p-1.5 rounded-lg hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors"
+                        aria-label="View EventCatalog on GitHub"
                       >
-                        <img src={buildUrl('/icons/github.svg', true)} class="h-6 w-6  hover:opacity-100 transition-opacity" />
+                        <img
+                          src={buildUrl('/icons/github.svg', true)}
+                          alt=""
+                          class="h-6 w-6  hover:opacity-100 transition-opacity"
+                          aria-hidden="true"
+                        />
                       </a>
                     </li>
                   </ul>
@@ -136,11 +158,14 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                     <li>
                       <a
                         href={repositoryUrl}
-                        class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors focus:outline-none"
+                        class="block p-1.5 rounded-lg hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors focus:outline-none"
+                        aria-label="View repository on GitHub"
                       >
                         <img
                           src={buildUrl('/icons/github.svg', true)}
+                          alt=""
                           class="h-6 w-6 opacity-70 hover:opacity-100 transition-opacity"
+                          aria-hidden="true"
                         />
                       </a>
                     </li>
@@ -156,7 +181,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
         <button
           id="menu-toggle"
           type="button"
-          class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600"
+          class="text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))] focus:outline-none focus:text-[rgb(var(--ec-icon-hover))]"
           aria-label="Toggle menu"
         >
           <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">

package/eventcatalog/src/components/Lists/OwnersList.tsx

@@ -1,6 +1,7 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import { UserGroupIcon, UserIcon } from '@heroicons/react/24/outline';
+import './PillListFlat.styles.css';
 
 interface Props {
   title: string;
@@ -17,30 +18,36 @@ interface Props {
 const OwnersList = ({ title, owners, emptyMessage }: Props) => {
   return (
     <div>
-      <div className="mx-auto w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
+      <div className="mx-auto w-full max-w-lg divide-y divide-[rgb(var(--ec-page-border))] rounded-xl">
         <Disclosure as="div" className="" defaultOpen={owners.length <= 5}>
           <DisclosureButton className="group flex w-full items-center justify-start space-x-4">
-            <span className="text-sm text-black font-semibold group-data-[hover]:text-black/80 capitalize"> {title} </span>
-            <ChevronDownIcon className="size-5 fill-black/60 group-data-[hover]:fill-black/50 group-data-[open]:rotate-180" />
+            <span className="text-sm text-[rgb(var(--ec-page-text))] font-semibold group-data-[hover]:opacity-80 capitalize">
+              {' '}
+              {title}{' '}
+            </span>
+            <ChevronDownIcon className="size-5 fill-[rgb(var(--ec-icon-color))] group-data-[hover]:opacity-80 group-data-[open]:rotate-180" />
           </DisclosureButton>
-          <DisclosurePanel className="mt-2 text-sm/5 text-black/50">
+          <DisclosurePanel className="mt-2 text-sm/5 text-[rgb(var(--ec-page-text-muted))]">
             <ul role="list" className="space-y-2">
               {owners.map((item) => {
                 return (
                   <li
-                    className="has-tooltip rounded-md text-gray-600 group px-1 w-full hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  "
+                    className="owner-item has-tooltip rounded-md text-[rgb(var(--ec-page-text-muted))] group px-1 w-full hover:text-white hover:font-normal"
                     key={item.href}
                   >
                     <a className={`flex items-center space-x-2`} href={item.href}>
                       {item.type === 'users' && (
-                        <UserIcon className="h-4 w-4 text-gray-800 group-hover:text-white" strokeWidth={1} />
+                        <UserIcon className="h-4 w-4 text-[rgb(var(--ec-page-text))] group-hover:text-white" strokeWidth={1} />
                       )}
                       {item.type === 'teams' && (
-                        <UserGroupIcon className="h-4 w-4 text-gray-800 group-hover:text-white" strokeWidth={1} />
+                        <UserGroupIcon
+                          className="h-4 w-4 text-[rgb(var(--ec-page-text))] group-hover:text-white"
+                          strokeWidth={1}
+                        />
                       )}
                       <span className="font-light text-sm truncate">{item.label}</span>
                       {item.label.length > 24 && (
-                        <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-white  text-black ml-[30px] mt-12">
+                        <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] border border-[rgb(var(--ec-page-border))] ml-[30px] mt-12">
                           {item.label}
                         </span>
                       )}
@@ -50,14 +57,14 @@ const OwnersList = ({ title, owners, emptyMessage }: Props) => {
               })}
               {owners.length === 0 && (
                 <li className="inline mr-2 leading-6 text-sm">
-                  <span className="text-gray-500">{emptyMessage}</span>
+                  <span className="text-[rgb(var(--ec-page-text-muted))]">{emptyMessage}</span>
                 </li>
               )}
             </ul>
           </DisclosurePanel>
         </Disclosure>
       </div>
-      <div className="border-b border-gray-100 my-4"></div>
+      <div className="border-b border-[rgb(var(--ec-page-border))] my-4"></div>
     </div>
   );
 };

package/eventcatalog/src/components/Lists/PillListFlat.styles.css

@@ -5,4 +5,16 @@
   .has-tooltip:hover .tooltip {
     visibility: visible;
     z-index: 100;
+  }
+
+  .pill-item:hover {
+    background: linear-gradient(to left, rgb(var(--ec-accent-gradient-from)), rgb(var(--ec-accent-gradient-to)));
+    color: white;
+    font-weight: normal;
+  }
+
+  .owner-item:hover {
+    background: linear-gradient(to left, rgb(var(--ec-accent-gradient-from)), rgb(var(--ec-accent-gradient-to)));
+    color: white;
+    font-weight: normal;
   }

package/eventcatalog/src/components/Lists/PillListFlat.tsx

@@ -66,10 +66,7 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...p
     const PillIcon = item.icon ? (icons as any)[item.icon] : null;
 
     return (
-      <li
-        className=" has-tooltip rounded-md text-gray-600 group px-1 w-full hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  "
-        key={item.href}
-      >
+      <li className="pill-item has-tooltip rounded-md text-[rgb(var(--ec-page-text-muted))] group px-1 w-full" key={item.href}>
         <a className={`leading-3`} href={href} target={item.target ?? '_self'}>
           <span className="space-x-2 flex items-center">
             {Icon && !PillIcon && <Icon className="h-4 w-4 shrink-0" />}
@@ -78,7 +75,7 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...p
               {item.label} {item.tag && <>({item.tag})</>}
             </span>
             {item.label.length > 24 && (
-              <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-white  text-black ml-[30px] mt-12">
+              <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] border border-[rgb(var(--ec-page-border))] ml-[30px] mt-12">
                 {item.label} {item.tag && <>({item.tag})</>}
               </span>
             )}
@@ -91,13 +88,16 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...p
 
   return (
     <div className="">
-      <div className="mx-auto w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
+      <div className="mx-auto w-full max-w-lg divide-y divide-[rgb(var(--ec-page-border))] rounded-xl">
         <Disclosure as="div" className="" defaultOpen={pills.length <= limit}>
           <DisclosureButton className="group flex w-full items-center justify-start space-x-4">
-            <span className="text-sm text-black font-semibold group-data-[hover]:text-black/80 capitalize"> {title} </span>
-            <ChevronDownIcon className="size-5 ml-2 fill-black/60 group-data-[hover]:fill-black/50 group-data-[open]:rotate-180" />
+            <span className="text-sm text-[rgb(var(--ec-page-text))] font-semibold group-data-[hover]:opacity-80 capitalize">
+              {' '}
+              {title}{' '}
+            </span>
+            <ChevronDownIcon className="size-5 ml-2 fill-[rgb(var(--ec-icon-color))] group-data-[hover]:opacity-80 group-data-[open]:rotate-180" />
           </DisclosureButton>
-          <DisclosurePanel className="mt-2 text-sm/5 text-black/50">
+          <DisclosurePanel className="mt-2 text-sm/5 text-[rgb(var(--ec-page-text-muted))]">
             <div className="space-y-2">
               {groupedPills.ungrouped.length > 0 && (
                 <ul role="list" className="space-y-2">
@@ -115,10 +115,10 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...p
                           e.stopPropagation();
                           toggleSubgroup(subgroupName);
                         }}
-                        className="p-1 hover:bg-gray-100 rounded-md"
+                        className="p-1 hover:bg-[rgb(var(--ec-content-hover))] rounded-md"
                       >
                         <div className={`transition-transform duration-150 ${isCollapsed ? '' : 'rotate-180'}`}>
-                          <ChevronDownIcon className="h-3 w-3 text-gray-500" />
+                          <ChevronDownIcon className="h-3 w-3 text-[rgb(var(--ec-icon-color))]" />
                         </div>
                       </button>
                       <button
@@ -126,7 +126,7 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...p
                           e.stopPropagation();
                           toggleSubgroup(subgroupName);
                         }}
-                        className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md text-gray-900 uppercase"
+                        className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md text-[rgb(var(--ec-page-text))] uppercase"
                       >
                         {subgroupName} ({subgroupPills.length})
                       </button>
@@ -134,7 +134,7 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...p
                     <div
                       className={`overflow-hidden transition-[height] duration-150 ease-out ${isCollapsed ? 'h-0' : 'h-auto'}`}
                     >
-                      <ul role="list" className="space-y-2 border-l border-gray-200/80 ml-[9px] pl-4 pt-2">
+                      <ul role="list" className="space-y-2 border-l border-[rgb(var(--ec-page-border))] ml-[9px] pl-4 pt-2">
                         {subgroupPills.map(renderPillItem)}
                       </ul>
                     </div>
@@ -144,14 +144,14 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...p
 
               {pills.length === 0 && emptyMessage && (
                 <div className="inline mr-2 leading-tight text-xs">
-                  <span className="text-gray-400">{emptyMessage}</span>
+                  <span className="text-[rgb(var(--ec-icon-color))]">{emptyMessage}</span>
                 </div>
               )}
             </div>
           </DisclosurePanel>
         </Disclosure>
       </div>
-      <div className="border-b border-gray-100 my-4"></div>
+      <div className="border-b border-[rgb(var(--ec-page-border))] my-4"></div>
     </div>
   );
 };

package/eventcatalog/src/components/Lists/VersionList.astro

@@ -15,7 +15,9 @@ const currentPath = Astro.url.pathname;
 ---
 
 <div class="space-y-2 pb-4">
-  <span class="text-xs text-black font-semibold group-data-[hover]:text-black/80 capitalize">
+  <span
+    class="text-xs text-[rgb(var(--ec-page-text))] font-semibold group-data-[hover]:text-[rgb(var(--ec-page-text))]/80 capitalize"
+  >
     {title || `Versions (${collectionItem.data.versions?.length})`}
   </span>
   <ul role="list" class="space-y-2">
@@ -23,14 +25,16 @@ const currentPath = Astro.url.pathname;
       versions.map((version) => {
         const isCurrent = currentPath.includes(version);
         return (
-          <li class="rounded-md px-1 group w-full hover:bg-gradient-to-l  hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  ">
+          <li class="version-item rounded-md px-1 group w-full hover:text-white hover:font-normal">
             <a
               class={`flex items-center space-x-2 cursor-pointer`}
               href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${version}`)}
             >
               {/* {Icon && <Icon class={`h-4 w-4`} />} */}
-              <HistoryIcon className="h-4 w-4 text-gray-800 group-hover:text-white" strokeWidth={1} />
-              <span class={`font-light text-xs ${isCurrent ? 'underline ' : ''}`}>
+              <HistoryIcon className="h-4 w-4 text-[rgb(var(--ec-page-text-muted))] group-hover:text-white" strokeWidth={1} />
+              <span
+                class={`font-light text-xs text-[rgb(var(--ec-page-text))] group-hover:text-white ${isCurrent ? 'underline ' : ''}`}
+              >
                 {version === collectionItem.data.latestVersion ? `v${version} (latest)` : `v${version}`}
               </span>
             </a>
@@ -39,9 +43,15 @@ const currentPath = Astro.url.pathname;
       })
     }
   </ul>
-  <div class="border-b border-gray-100 pt-2"></div>
+  <div class="border-b border-[rgb(var(--ec-page-border))] pt-2"></div>
 </div>
 
+<style>
+  .version-item:hover {
+    background: linear-gradient(to left, rgb(var(--ec-accent-gradient-from)), rgb(var(--ec-accent-gradient-to)));
+  }
+</style>
+
 <script>
   document.getElementById('version')?.addEventListener('change', (e: any) => {
     if (!e.target) return;

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

@@ -12,7 +12,7 @@ declare global {
 
 export default function Example({ title, children }: any) {
   return (
-    <div className="border border-gray-200 rounded-md px-4 shadow-sm py-2 accordion">
+    <div className="border border-[rgb(var(--ec-page-border))] rounded-md px-4 shadow-sm py-2 accordion bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
       <Disclosure as="div" key={title} className="">
         {({ open }) => {
           useEffect(() => {
@@ -30,7 +30,7 @@ export default function Example({ title, children }: any) {
 
           return (
             <div>
-              <DisclosureButton className="flex w-full items-start justify-between text-left text-gray-900">
+              <DisclosureButton className="flex w-full items-start justify-between text-left text-[rgb(var(--ec-page-text))]">
                 <span className="text-base font-semibold leading-7">{title}</span>
                 <span className="ml-6 flex h-7 items-center">
                   {open ? (
@@ -41,7 +41,7 @@ export default function Example({ title, children }: any) {
                 </span>
               </DisclosureButton>
               <DisclosurePanel as="dd" className="pr-12 py-4 prose prose-sm max-w-none">
-                <div className="text-base leading-7 text-gray-600">{children}</div>
+                <div className="text-base leading-7 text-[rgb(var(--ec-page-text-muted))]">{children}</div>
               </DisclosurePanel>
             </div>
           );

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>