@eventcatalog/core 3.36.5 → 3.37.0

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

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

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

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

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

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

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

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

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

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

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

@@ -2,6 +2,7 @@
 import { render } from 'astro:content';
 
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import Admonition from '@components/MDX/Admonition';
 import components from '@components/MDX/components';
 import CopyAsMarkdown from '@components/CopyAsMarkdown';
 import { buildUrl } from '@utils/url-builder';
@@ -99,33 +100,14 @@ const pagefindAttributes =
         <div data-pagefind-ignore>
           {
             props.data.version !== props.data.latestVersion && (
-              <div class="rounded-md bg-[rgb(var(--ec-accent-subtle))] p-4 not-prose my-4">
-                <div class="flex">
-                  <div class="flex-shrink-0">
-                    <svg class="h-5 w-5 text-[rgb(var(--ec-accent))]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                      <path
-                        fill-rule="evenodd"
-                        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
-                        clip-rule="evenodd"
-                      />
-                    </svg>
-                  </div>
-                  <div class="ml-3">
-                    <h3 class="text-sm font-medium text-[rgb(var(--ec-accent-text))]">New version found</h3>
-                    <div class="mt-2 text-sm text-[rgb(var(--ec-accent-text))]">
-                      <p>
-                        You are looking at a previous version of the {singularResourceName} doc <strong>{title}</strong>.{' '}
-                        <a
-                          class="underline hover:text-primary block pt-2"
-                          href={buildUrl(`${docsBasePath}/${props.data.latestVersion}`)}
-                        >
-                          The latest version of this doc is <span>v{props.data.latestVersion}</span> &rarr;
-                        </a>
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <Admonition type="warning" title="New version found">
+                <p>
+                  You are looking at a previous version of the {singularResourceName} doc <strong>{title}</strong>.{' '}
+                  <a class="underline block pt-2" href={buildUrl(`${docsBasePath}/${props.data.latestVersion}`)}>
+                    The latest version of this doc is <span>v{props.data.latestVersion}</span> &rarr;
+                  </a>
+                </p>
+              </Admonition>
             )
           }
         </div>

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

@@ -2,6 +2,7 @@
 import { render } from 'astro:content';
 
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import Admonition from '@components/MDX/Admonition';
 import components from '@components/MDX/components';
 import CopyAsMarkdown from '@components/CopyAsMarkdown';
 import { buildUrl } from '@utils/url-builder';
@@ -93,33 +94,14 @@ const pagefindAttributes =
         <div data-pagefind-ignore>
           {
             props.data.version !== props.data.latestVersion && (
-              <div class="rounded-md bg-[rgb(var(--ec-accent-subtle))] p-4 not-prose my-4">
-                <div class="flex">
-                  <div class="flex-shrink-0">
-                    <svg class="h-5 w-5 text-[rgb(var(--ec-accent))]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                      <path
-                        fill-rule="evenodd"
-                        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
-                        clip-rule="evenodd"
-                      />
-                    </svg>
-                  </div>
-                  <div class="ml-3">
-                    <h3 class="text-sm font-medium text-[rgb(var(--ec-accent-text))]">New version found</h3>
-                    <div class="mt-2 text-sm text-[rgb(var(--ec-accent-text))]">
-                      <p>
-                        You are looking at a previous version of the {singularResourceName} doc <strong>{title}</strong>.{' '}
-                        <a
-                          class="underline hover:text-primary block pt-2"
-                          href={buildUrl(`${docsBasePath}/${props.data.latestVersion}`)}
-                        >
-                          The latest version of this doc is <span>v{props.data.latestVersion}</span> &rarr;
-                        </a>
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <Admonition type="warning" title="New version found">
+                <p>
+                  You are looking at a previous version of the {singularResourceName} doc <strong>{title}</strong>.{' '}
+                  <a class="underline block pt-2" href={buildUrl(`${docsBasePath}/${props.data.latestVersion}`)}>
+                    The latest version of this doc is <span>v{props.data.latestVersion}</span> &rarr;
+                  </a>
+                </p>
+              </Admonition>
             )
           }
         </div>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/graphql/[filename].astro

@@ -109,34 +109,18 @@ const pagefindAttributes =
         <div data-pagefind-ignore>
           {
             data.version !== data.latestVersion && (
-              <div class="rounded-md bg-[rgb(var(--ec-accent-subtle))] p-4 not-prose my-4">
-                <div class="flex">
-                  <div class="flex-shrink-0">
-                    <svg class="h-5 w-5 text-[rgb(var(--ec-accent))]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                      <path
-                        fill-rule="evenodd"
-                        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
-                        clip-rule="evenodd"
-                      />
-                    </svg>
-                  </div>
-                  <div class="ml-3">
-                    <h3 class="text-sm font-medium text-[rgb(var(--ec-accent-text))]">New version found</h3>
-                    <div class="mt-2 text-sm text-[rgb(var(--ec-accent-text))]">
-                      <p>
-                        You are looking at a previous version of the service <strong>{data.name}</strong>.{' '}
-                        <a
-                          class="underline hover:text-primary block pt-2"
-                          href={buildUrl(`/docs/${collection}/${data.id}/${data.latestVersion}/graphql/${filename}`)}
-                        >
-                          The latest version of this GraphQL schema is
-                          <span>v{data.latestVersion}</span> &rarr;
-                        </a>
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <Admonition type="warning" title="New version found">
+                <p>
+                  You are looking at a previous version of the service <strong>{data.name}</strong>.{' '}
+                  <a
+                    class="underline block pt-2"
+                    href={buildUrl(`/docs/${collection}/${data.id}/${data.latestVersion}/graphql/${filename}`)}
+                  >
+                    The latest version of this GraphQL schema is
+                    <span>v{data.latestVersion}</span> &rarr;
+                  </a>
+                </p>
+              </Admonition>
             )
           }
         </div>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -349,10 +349,7 @@ if (!hasCurrentFlowEmbed && !hasCurrentPageNodeGraph) {
                     )
                   }
                   <div class="flex items-center gap-2">
-                    <h2
-                      id="doc-page-header"
-                      class={`text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))] ${props.data.deprecated && hasDeprecated ? 'text-red-500' : ''}`}
-                    >
+                    <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">
                       {props.data.name}
                       {props.data.latestVersion !== props.data.version && <span>(v{props.data.version})</span>}
                     </h2>
@@ -485,35 +482,19 @@ if (!hasCurrentFlowEmbed && !hasCurrentPageNodeGraph) {
         <div data-pagefind-ignore>
           {
             props.data.version !== props.data.latestVersion && (
-              <div class="rounded-md bg-[rgb(var(--ec-accent-subtle))] p-4 not-prose my-4">
-                <div class="flex">
-                  <div class="flex-shrink-0">
-                    <svg class="h-5 w-5 text-[rgb(var(--ec-accent))]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                      <path
-                        fill-rule="evenodd"
-                        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
-                        clip-rule="evenodd"
-                      />
-                    </svg>
-                  </div>
-                  <div class="ml-3">
-                    <h3 class="text-sm font-medium text-[rgb(var(--ec-accent-text))]">New version found</h3>
-                    <div class="mt-2 text-sm text-[rgb(var(--ec-accent-text))]">
-                      <p>
-                        You are looking at a previous version of the {props.collection.slice(0, props.collection.length - 1)}{' '}
-                        <strong>{props.data.name}</strong>.{' '}
-                        <a
-                          class="underline hover:text-primary block pt-2"
-                          href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.latestVersion}`)}
-                        >
-                          The latest version of this {props.collection.slice(0, props.collection.length - 1)} is
-                          <span>v{props.data.latestVersion}</span> &rarr;
-                        </a>
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <Admonition type="warning" title="New version found">
+                <p>
+                  You are looking at a previous version of the {props.collection.slice(0, props.collection.length - 1)}{' '}
+                  <strong>{props.data.name}</strong>.{' '}
+                  <a
+                    class="underline block pt-2"
+                    href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.latestVersion}`)}
+                  >
+                    The latest version of this {props.collection.slice(0, props.collection.length - 1)} is
+                    <span>v{props.data.latestVersion}</span> &rarr;
+                  </a>
+                </p>
+              </Admonition>
             )
           }
         </div>

package/eventcatalog/src/styles/tailwind.css

@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @plugin "@tailwindcss/typography";
 
@@ -24,23 +24,41 @@
   --animate-contentShow: contentShow 200ms ease-out;
 
   @keyframes progress-bar {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
   }
 
   @keyframes progress-bar-reverse {
-    0% { transform: translateX(100%); }
-    100% { transform: translateX(-100%); }
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
   }
 
   @keyframes overlayShow {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
 
   @keyframes contentShow {
-    from { opacity: 0; transform: scale(0.96); }
-    to { opacity: 1; transform: scale(1); }
+    from {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
   }
 }
 
@@ -49,20 +67,20 @@
  * at runtime (e.g. `bg-${color}-50`). Tailwind v4 can't detect these from source
  * scanning, so we explicitly declare them here.
  *
- * Colors used: orange, blue, green, emerald, amber, violet, pink, purple, gray, yellow, teal
+ * Colors used: orange, blue, green, emerald, amber, violet, pink, purple, gray, yellow, teal, cyan, indigo
  * Used in: SchemaListItem, Grids/components, SchemaExplorer, MessageGrid
  */
-@source inline("bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{50,100}");
-@source inline("bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500/{10,20}");
-@source inline("text-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{400,500,600,700}");
-@source inline("border-l-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500");
+@source inline("bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{50,100}");
+@source inline("bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-500/{10,20}");
+@source inline("text-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{400,500,600,700}");
+@source inline("border-l-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-500");
 @source inline("ring-2");
-@source inline("ring-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500");
+@source inline("ring-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-500");
 
 /* Border color variants for MessageGrid cards */
-@source inline("border-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{200,300}");
-@source inline("{dark:,}border-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500/{30,50}");
-@source inline("{hover:,dark:hover:,}border-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal}-{300,400,500,500/50}");
+@source inline("border-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{200,300}");
+@source inline("{dark:,}border-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-500/{30,50}");
+@source inline("{hover:,dark:hover:,}border-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{300,400,500,500/50}");
 
 /* Explicit safelist classes used in various components */
 @source inline("bg-{blue,orange}-600");
@@ -72,13 +90,13 @@
 @source inline("text-[5px] text-[9px] min-h-[100px]");
 
 /* Gradient classes for dynamic colors */
-@source inline("from-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{100,200,300,400,500,600,700}");
-@source inline("to-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{100,200,300,400,500,600,700}");
+@source inline("from-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{100,200,300,400,500,600,700}");
+@source inline("to-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{100,200,300,400,500,600,700}");
 
 /* Dark variant safelist for dynamic colors */
-@source inline("{dark:,}bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{100,200,400,500}");
-@source inline("{dark:,}bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500/{20,30}");
-@source inline("{dark:,}text-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{100,300,400,500,800}");
-@source inline("{dark:,group-hover:,}text-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{100,300,400,500,600,800}");
-@source inline("{dark:,}ring-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500/30");
-@source inline("{group-hover:,dark:group-hover:,}text-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{400,600}");
+@source inline("{dark:,}bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{100,200,400,500}");
+@source inline("{dark:,}bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-500/{20,30}");
+@source inline("{dark:,}text-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{100,300,400,500,800}");
+@source inline("{dark:,group-hover:,}text-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{100,300,400,500,600,800}");
+@source inline("{dark:,}ring-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-500/30");
+@source inline("{group-hover:,dark:group-hover:,}text-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{400,600}");

package/eventcatalog/src/styles/theme.css

@@ -108,6 +108,8 @@
   --ec-badge-design-text: 15 118 110; /* teal-700 */
   --ec-badge-channel-bg: 224 231 255; /* indigo-100 */
   --ec-badge-channel-text: 67 56 202; /* indigo-700 */
+  --ec-badge-container-bg: 224 231 255; /* indigo-100 */
+  --ec-badge-container-text: 67 56 202; /* indigo-700 */
   --ec-badge-data-product-bg: 219 234 254; /* blue-100 */
   --ec-badge-data-product-text: 30 64 175; /* blue-800 */
   --ec-badge-default-bg: 243 244 246; /* gray-100 */
@@ -214,6 +216,8 @@
   --ec-badge-design-text: 94 234 212; /* teal-300 */
   --ec-badge-channel-bg: 49 46 129 / 0.3; /* indigo-900/30 */
   --ec-badge-channel-text: 165 180 252; /* indigo-300 */
+  --ec-badge-container-bg: 49 46 129 / 0.3; /* indigo-900/30 */
+  --ec-badge-container-text: 165 180 252; /* indigo-300 */
   --ec-badge-data-product-bg: 30 64 175 / 0.3; /* blue-800/30 */
   --ec-badge-data-product-text: 147 197 253; /* blue-300 */
   --ec-badge-default-bg: 63 63 70 / 0.3; /* zinc-700/30 */

package/eventcatalog/src/styles/themes/forest.css

@@ -101,6 +101,8 @@
   --ec-badge-design-text: 22 101 52; /* green-800 */
   --ec-badge-channel-bg: 224 231 255; /* indigo-100 */
   --ec-badge-channel-text: 67 56 202; /* indigo-700 */
+  --ec-badge-container-bg: 224 231 255; /* indigo-100 */
+  --ec-badge-container-text: 67 56 202; /* indigo-700 */
   --ec-badge-data-product-bg: 219 234 254; /* blue-100 */
   --ec-badge-data-product-text: 30 64 175; /* blue-800 */
   --ec-badge-default-bg: 240 253 244; /* green-50 */
@@ -198,6 +200,8 @@
   --ec-badge-design-text: 134 239 172; /* green-300 */
   --ec-badge-channel-bg: 49 46 129 / 0.3; /* indigo-900/30 */
   --ec-badge-channel-text: 165 180 252; /* indigo-300 */
+  --ec-badge-container-bg: 49 46 129 / 0.3; /* indigo-900/30 */
+  --ec-badge-container-text: 165 180 252; /* indigo-300 */
   --ec-badge-data-product-bg: 30 64 175 / 0.3; /* blue-800/30 */
   --ec-badge-data-product-text: 147 197 253; /* blue-300 */
   --ec-badge-default-bg: 55 65 81 / 0.3; /* gray-700/30 */

package/eventcatalog/src/styles/themes/ocean.css

@@ -101,6 +101,8 @@
   --ec-badge-design-text: 15 118 110; /* teal-700 */
   --ec-badge-channel-bg: 224 231 255; /* indigo-100 */
   --ec-badge-channel-text: 67 56 202; /* indigo-700 */
+  --ec-badge-container-bg: 224 231 255; /* indigo-100 */
+  --ec-badge-container-text: 67 56 202; /* indigo-700 */
   --ec-badge-data-product-bg: 219 234 254; /* blue-100 */
   --ec-badge-data-product-text: 30 64 175; /* blue-800 */
   --ec-badge-default-bg: 240 253 250; /* teal-50 */
@@ -203,6 +205,8 @@
   --ec-badge-design-text: 94 234 212; /* teal-300 */
   --ec-badge-channel-bg: 49 46 129 / 0.3; /* indigo-900/30 */
   --ec-badge-channel-text: 165 180 252; /* indigo-300 */
+  --ec-badge-container-bg: 49 46 129 / 0.3; /* indigo-900/30 */
+  --ec-badge-container-text: 165 180 252; /* indigo-300 */
   --ec-badge-data-product-bg: 30 64 175 / 0.3; /* blue-800/30 */
   --ec-badge-data-product-text: 147 197 253; /* blue-300 */
   --ec-badge-default-bg: 51 65 85 / 0.3; /* slate-700/30 */

package/eventcatalog/src/styles/themes/sapphire.css

@@ -101,6 +101,8 @@
   --ec-badge-design-text: 37 99 235; /* blue-600 */
   --ec-badge-channel-bg: 224 231 255; /* indigo-100 */
   --ec-badge-channel-text: 67 56 202; /* indigo-700 */
+  --ec-badge-container-bg: 224 231 255; /* indigo-100 */
+  --ec-badge-container-text: 67 56 202; /* indigo-700 */
   --ec-badge-data-product-bg: 219 234 254; /* blue-100 */
   --ec-badge-data-product-text: 30 64 175; /* blue-800 */
   --ec-badge-default-bg: 239 246 255; /* blue-50 */
@@ -198,6 +200,8 @@
   --ec-badge-design-text: 147 197 253; /* blue-300 */
   --ec-badge-channel-bg: 49 46 129 / 0.3; /* indigo-900/30 */
   --ec-badge-channel-text: 165 180 252; /* indigo-300 */
+  --ec-badge-container-bg: 49 46 129 / 0.3; /* indigo-900/30 */
+  --ec-badge-container-text: 165 180 252; /* indigo-300 */
   --ec-badge-data-product-bg: 30 64 175 / 0.3; /* blue-800/30 */
   --ec-badge-data-product-text: 147 197 253; /* blue-300 */
   --ec-badge-default-bg: 51 65 85 / 0.3; /* slate-700/30 */

package/eventcatalog/src/styles/themes/sunset.css

@@ -101,6 +101,8 @@
   --ec-badge-design-text: 234 88 12; /* orange-600 */
   --ec-badge-channel-bg: 224 231 255; /* indigo-100 */
   --ec-badge-channel-text: 67 56 202; /* indigo-700 */
+  --ec-badge-container-bg: 224 231 255; /* indigo-100 */
+  --ec-badge-container-text: 67 56 202; /* indigo-700 */
   --ec-badge-data-product-bg: 219 234 254; /* blue-100 */
   --ec-badge-data-product-text: 30 64 175; /* blue-800 */
   --ec-badge-default-bg: 255 247 237; /* orange-50 */
@@ -198,6 +200,8 @@
   --ec-badge-design-text: 253 186 116; /* orange-300 */
   --ec-badge-channel-bg: 49 46 129 / 0.3; /* indigo-900/30 */
   --ec-badge-channel-text: 165 180 252; /* indigo-300 */
+  --ec-badge-container-bg: 49 46 129 / 0.3; /* indigo-900/30 */
+  --ec-badge-container-text: 165 180 252; /* indigo-300 */
   --ec-badge-data-product-bg: 30 64 175 / 0.3; /* blue-800/30 */
   --ec-badge-data-product-text: 147 197 253; /* blue-300 */
   --ec-badge-default-bg: 64 64 64 / 0.3; /* neutral-700/30 */