@eventcatalog/core 3.39.3 → 3.39.4

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

@@ -1,5 +1,6 @@
 import { createColumnHelper } from '@tanstack/react-table';
 import { useState } from 'react';
+import { getBadgeReactStyle } from '@utils/badge-styles';
 import { filterByBadge } from '../filters/custom-filters';
 import type { TCollectionTypes, TData } from '../Table';
 import type { TableConfiguration } from '@types';
@@ -27,6 +28,7 @@ export const createBadgesColumn = <T extends { data: Pick<TData<U>['data'], 'bad
             <span
               key={`${badge.id}-${index}`}
               className="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-md border border-[rgb(var(--ec-accent)/0.5)] text-[rgb(var(--ec-page-text))] bg-transparent"
+              style={getBadgeReactStyle(badge)}
               title={badge.content}
             >
               {badge.content}

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

@@ -9,6 +9,7 @@ import { buildUrl } from '@utils/url-builder';
 import { AlignLeftIcon, HistoryIcon } from 'lucide-react';
 import { isEventCatalogChatEnabled, isResourceDocsEnabled } from '@utils/feature';
 import { getIcon } from '@utils/badges';
+import { getBadgeStyle } from '@utils/badge-styles';
 import { collectionToResourceMap } from '@utils/collections/util';
 
 import { Page } from './_index.data';
@@ -83,13 +84,12 @@ const pagefindAttributes =
                   <span
                     class={`
                       inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
-                      bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
+                      ${badge.backgroundColor ? 'bg-[rgb(var(--ec-content-hover))]' : 'bg-transparent'} border border-[rgb(var(--ec-page-border))]
                       text-[rgb(var(--ec-page-text))]
                     `}
+                    style={getBadgeStyle(badge)}
                   >
-                    {badge.iconComponent && (
-                      <badge.iconComponent className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />
-                    )}
+                    {badge.iconComponent && <badge.iconComponent className="w-4 h-4 flex-shrink-0" />}
                     <span>{badge.content}</span>
                   </span>
                 ))}

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

@@ -9,6 +9,7 @@ import { buildUrl } from '@utils/url-builder';
 import { AlignLeftIcon, HistoryIcon } from 'lucide-react';
 import { isEventCatalogChatEnabled, isResourceDocsEnabled } from '@utils/feature';
 import { getIcon } from '@utils/badges';
+import { getBadgeStyle } from '@utils/badge-styles';
 import { collectionToResourceMap } from '@utils/collections/util';
 
 import { Page } from './_index.data';
@@ -76,13 +77,12 @@ const pagefindAttributes =
                     <span
                       class={`
                         inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
-                        bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
+                        ${badge.backgroundColor ? 'bg-[rgb(var(--ec-content-hover))]' : 'bg-transparent'} border border-[rgb(var(--ec-page-border))]
                         text-[rgb(var(--ec-page-text))]
                       `}
+                      style={getBadgeStyle(badge)}
                     >
-                      {badge.iconComponent && (
-                        <badge.iconComponent className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />
-                      )}
+                      {badge.iconComponent && <badge.iconComponent className="w-4 h-4 flex-shrink-0" />}
                       <span>{badge.content}</span>
                     </span>
                   ))}

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

@@ -15,6 +15,7 @@ import mdxComponents from '@components/MDX/components';
 import 'diff2html/bundles/css/diff2html.min.css';
 
 import { buildUrl } from '@utils/url-builder';
+import { getBadgeStyle } from '@utils/badge-styles';
 import { getPreviousVersion } from '@utils/collections/util';
 import { getDiffsForCurrentAndPreviousVersion } from '@utils/file-diffs';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
@@ -71,27 +72,29 @@ const logListPromise = logsToRender.map(async (log, index) => {
 
 const logList = await Promise.all(logListPromise);
 
+const createResourceBadge = (content: string, icon: any) => ({ content, icon, textColor: 'gray' });
+
 const getBadge = () => {
   if (props.collection === 'services') {
-    return { badgeType: 'service', content: 'Service', icon: ServerIcon };
+    return createResourceBadge('Service', ServerIcon);
   }
   if (props.collection === 'events') {
-    return { badgeType: 'event', content: 'Event', icon: BoltIcon };
+    return createResourceBadge('Event', BoltIcon);
   }
   if (props.collection === 'commands') {
-    return { badgeType: 'command', content: 'Command', icon: ChatBubbleLeftIcon };
+    return createResourceBadge('Command', ChatBubbleLeftIcon);
   }
   if (props.collection === 'queries') {
-    return { badgeType: 'query', content: 'Query', icon: MagnifyingGlassIcon };
+    return createResourceBadge('Query', MagnifyingGlassIcon);
   }
   if (props.collection === 'domains') {
-    return { badgeType: 'domain', content: 'Domain', icon: RectangleGroupIcon };
+    return createResourceBadge('Domain', RectangleGroupIcon);
   }
   if (props.collection === 'containers') {
-    return { badgeType: 'default', content: 'Container', icon: DatabaseIcon };
+    return createResourceBadge('Container', DatabaseIcon);
   }
   if (props.collection === 'flows') {
-    return { badgeType: 'design', content: 'Flow', icon: QueueListIcon };
+    return createResourceBadge('Flow', QueueListIcon);
   }
 };
 
@@ -141,8 +144,8 @@ const badges = [getBadge()];
             <div class="flex flex-wrap py-2 pt-4">
               {badges.map((badge: any) => (
                 <span
-                  class="text-sm font-medium px-2 py-1 rounded-md mr-2 space-x-1 flex items-center"
-                  style={`background-color: rgb(var(--ec-badge-${badge.badgeType}-bg)); color: rgb(var(--ec-badge-${badge.badgeType}-text));`}
+                  class="text-sm font-medium px-2 py-1 rounded-md mr-2 space-x-1 flex items-center bg-transparent border border-[rgb(var(--ec-page-border))]"
+                  style={getBadgeStyle(badge)}
                 >
                   {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1" />}
                   <span>{badge.content}</span>
@@ -192,7 +195,10 @@ const badges = [getBadge()];
                   {log.badges && (
                     <div class="flex flex-wrap">
                       {log.badges.map((badge: any) => (
-                        <span class="text-sm font-medium px-2 py-1 rounded-md mr-2 space-x-1 flex items-center bg-[rgb(var(--ec-badge-default-bg))] text-[rgb(var(--ec-badge-default-text))]">
+                        <span
+                          class="text-sm font-medium px-2 py-1 rounded-md mr-2 space-x-1 flex items-center bg-[rgb(var(--ec-badge-default-bg))] text-[rgb(var(--ec-badge-default-text))]"
+                          style={getBadgeStyle(badge)}
+                        >
                           {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1" />}
                           <span>{badge.content}</span>
                         </span>

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

@@ -7,6 +7,7 @@ import Footer from '@layouts/Footer.astro';
 import { Page } from './_[filename].data';
 import { getAbsoluteFilePathForAstroFile } from '@utils/files';
 import { buildUrl, buildEditUrlForResource } from '@utils/url-builder';
+import { getBadgeStyle } from '@utils/badge-styles';
 import Admonition from '@components/MDX/Admonition';
 
 import { ServerIcon } from '@heroicons/react/24/outline';
@@ -36,14 +37,13 @@ if (isRemote) {
 const pageTitle = `${collection} | ${data.name} | GraphQL Schema`.replace(/^\w/, (c) => c.toUpperCase());
 
 const getServiceBadge = () => {
-  return [{ backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon }];
+  return [{ textColor: 'gray', content: 'Service', icon: ServerIcon }];
 };
 
 const getGraphQLBadge = () => {
   return [
     {
-      backgroundColor: 'purple',
-      textColor: 'purple',
+      textColor: 'gray',
       content: 'GraphQL Schema',
       iconURL: buildUrl('/icons/graphql.svg', true),
       id: 'graphql-schema-badge',
@@ -88,13 +88,14 @@ const pagefindAttributes =
                         id={badge.id || ''}
                         class={`
                           inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
-                          bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
+                          ${badge.backgroundColor ? 'bg-[rgb(var(--ec-content-hover))]' : 'bg-transparent'} border border-[rgb(var(--ec-page-border))]
                           text-[rgb(var(--ec-page-text))]
                           shadow-xs
                           ${badge.class ? badge.class : ''}
                         `}
+                        style={getBadgeStyle(badge)}
                       >
-                        {badge.icon && <badge.icon className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />}
+                        {badge.icon && <badge.icon className="w-4 h-4 flex-shrink-0" />}
                         {badge.iconURL && <img src={badge.iconURL} class="w-4 h-4 flex-shrink-0 opacity-80" alt="" />}
                         <span>{badge.content}</span>
                       </span>

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

@@ -34,6 +34,7 @@ import { getSpecificationsForService } from '@utils/collections/services';
 import { resourceToCollectionMap, collectionToResourceMap, getDeprecatedDetails } from '@utils/collections/util';
 import { getSchemasFromResource } from '@utils/collections/schemas';
 import { getIcon } from '@utils/badges';
+import { getBadgeStyle } from '@utils/badge-styles';
 import { buildUrl, buildEditUrlForResource } from '@utils/url-builder';
 import { isIconPath, resolveIconUrl } from '@utils/icon';
 import {
@@ -72,102 +73,71 @@ const getContentBadges = () =>
     icon: badge.icon ? getIcon(badge.icon) : null,
   }));
 
+const createResourceBadge = (content: string, icon: any) => ({ content, icon, textColor: 'gray' });
+
 const getBadge = () => {
   if (props.collection === 'services') {
-    return [{ backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon }];
+    return [createResourceBadge('Service', ServerIcon)];
   }
   if (props.collection === 'events') {
-    return [{ backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: BoltIcon }];
+    return [createResourceBadge('Event', BoltIcon)];
   }
   if (props.collection === 'commands') {
-    return [{ backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: ChatBubbleLeftIcon }];
+    return [createResourceBadge('Command', ChatBubbleLeftIcon)];
   }
   if (props.collection === 'queries') {
-    return [{ backgroundColor: 'green', textColor: 'green', content: 'Query', icon: MagnifyingGlassIcon }];
+    return [createResourceBadge('Query', MagnifyingGlassIcon)];
   }
   if (props.collection === 'domains') {
-    return [
-      {
-        backgroundColor: 'yellow',
-        textColor: 'yellow',
-        content: 'Domain',
-        icon: RectangleGroupIcon,
-      },
-    ];
+    return [createResourceBadge('Domain', RectangleGroupIcon)];
   }
 
   if (props.collection === 'flows') {
-    return [{ backgroundColor: 'teal', textColor: 'teal', content: 'Flow', icon: QueueListIcon }];
+    return [createResourceBadge('Flow', QueueListIcon)];
   }
 
   if (props.collection === 'channels') {
-    return [{ backgroundColor: 'teal', textColor: 'teal', content: 'Channel', icon: ArrowsRightLeftIcon }];
+    return [createResourceBadge('Channel', ArrowsRightLeftIcon)];
   }
 
   if (props.collection === 'containers') {
     const badges = [];
     const content = props.data.container_type?.charAt(0).toUpperCase() + props.data.container_type?.slice(1) || 'Database';
 
-    badges.push({ backgroundColor: 'blue', textColor: 'blue', content: content, icon: DatabaseIcon });
+    badges.push(createResourceBadge(content, DatabaseIcon));
 
     if (props.data?.technology) {
-      badges.push({
-        backgroundColor: 'indigo',
-        textColor: 'indigo',
-        content: `${props.data.technology}`,
-        icon: DatabaseZapIcon,
-      });
+      badges.push(createResourceBadge(`${props.data.technology}`, DatabaseZapIcon));
     }
 
     if (props.data?.residency) {
-      badges.push({
-        backgroundColor: 'red',
-        textColor: 'red',
-        content: `Residency: ${props.data.residency}`,
-        icon: MapIcon,
-      });
+      badges.push(createResourceBadge(`Residency: ${props.data.residency}`, MapIcon));
     }
 
     if (props.data?.retention) {
-      badges.push({
-        backgroundColor: 'green',
-        textColor: 'green',
-        content: `Retention: ${props.data.retention}`,
-        icon: ClockIcon,
-      });
+      badges.push(createResourceBadge(`Retention: ${props.data.retention}`, ClockIcon));
     }
 
     if (props.data?.access_mode) {
-      badges.push({
-        backgroundColor: 'green',
-        textColor: 'green',
-        content: `Access Mode: ${props.data.access_mode}`,
-        icon: ShieldCheckIcon,
-      });
+      badges.push(createResourceBadge(`Access Mode: ${props.data.access_mode}`, ShieldCheckIcon));
     }
 
     return badges;
   }
 
   if (props.collection === 'entities') {
-    const entityBadges = [{ backgroundColor: 'purple', textColor: 'purple', content: 'Entity', icon: Box, class: 'text-gray' }];
+    const entityBadges = [createResourceBadge('Entity', Box)];
     if (props.data.aggregateRoot) {
-      entityBadges.push({
-        backgroundColor: 'purple',
-        textColor: 'purple',
-        content: '(Aggregate Root)',
-        icon: Boxes,
-        class: 'text-gray',
-      });
+      entityBadges.push(createResourceBadge('(Aggregate Root)', Boxes));
     }
     return entityBadges;
   }
 
   if (props.collection === 'data-products') {
-    return [{ backgroundColor: 'indigo', textColor: 'indigo', content: 'Data Product', icon: Package }];
+    return [createResourceBadge('Data Product', Package)];
   }
 
-  return [{ backgroundColor: 'teal', textColor: 'teal', content: '', icon: QueueListIcon, class: 'text-gray' }];
+  return [createResourceBadge('', QueueListIcon)];
 };
 
 const getSpecificationBadges = () => {
@@ -412,13 +382,14 @@ if (!hasCurrentFlowEmbed && !hasCurrentPageNodeGraph) {
                         id={badge.id || ''}
                         class={`
                           inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
-                          bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
+                          ${badge.backgroundColor ? 'bg-[rgb(var(--ec-content-hover))]' : 'bg-transparent'} border border-[rgb(var(--ec-page-border))]
                           text-[rgb(var(--ec-page-text))]
                           shadow-xs
                           ${badge.class ? badge.class : ''}
                         `}
+                        style={getBadgeStyle(badge)}
                       >
-                        {badge.icon && <badge.icon className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />}
+                        {badge.icon && <badge.icon className="w-4 h-4 flex-shrink-0" />}
                         {badge.iconURL && <img src={badge.iconURL} class="w-4 h-4 flex-shrink-0 opacity-80" alt="" />}
                         <span>{badge.content}</span>
                       </span>

package/eventcatalog/src/styles/theme.css

@@ -114,6 +114,52 @@
   --ec-badge-data-product-text: 30 64 175; /* blue-800 */
   --ec-badge-default-bg: 243 244 246; /* gray-100 */
   --ec-badge-default-text: 75 85 99; /* gray-600 */
+
+  /* User-defined badge colors - light mode */
+  --ec-badge-color-slate-background: 248 250 252;
+  --ec-badge-color-slate-text: 71 85 105;
+  --ec-badge-color-gray-background: 249 250 251;
+  --ec-badge-color-gray-text: 75 85 99;
+  --ec-badge-color-zinc-background: 250 250 250;
+  --ec-badge-color-zinc-text: 82 82 91;
+  --ec-badge-color-neutral-background: 250 250 250;
+  --ec-badge-color-neutral-text: 82 82 82;
+  --ec-badge-color-stone-background: 250 250 249;
+  --ec-badge-color-stone-text: 87 83 78;
+  --ec-badge-color-red-background: 254 242 242;
+  --ec-badge-color-red-text: 185 28 28;
+  --ec-badge-color-orange-background: 255 247 237;
+  --ec-badge-color-orange-text: 194 65 12;
+  --ec-badge-color-amber-background: 255 251 235;
+  --ec-badge-color-amber-text: 180 83 9;
+  --ec-badge-color-yellow-background: 254 252 232;
+  --ec-badge-color-yellow-text: 161 98 7;
+  --ec-badge-color-lime-background: 247 254 231;
+  --ec-badge-color-lime-text: 77 124 15;
+  --ec-badge-color-green-background: 240 253 244;
+  --ec-badge-color-green-text: 21 128 61;
+  --ec-badge-color-emerald-background: 236 253 245;
+  --ec-badge-color-emerald-text: 4 120 87;
+  --ec-badge-color-teal-background: 240 253 250;
+  --ec-badge-color-teal-text: 15 118 110;
+  --ec-badge-color-cyan-background: 236 254 255;
+  --ec-badge-color-cyan-text: 14 116 144;
+  --ec-badge-color-sky-background: 240 249 255;
+  --ec-badge-color-sky-text: 3 105 161;
+  --ec-badge-color-blue-background: 239 246 255;
+  --ec-badge-color-blue-text: 29 78 216;
+  --ec-badge-color-indigo-background: 238 242 255;
+  --ec-badge-color-indigo-text: 67 56 202;
+  --ec-badge-color-violet-background: 245 243 255;
+  --ec-badge-color-violet-text: 109 40 217;
+  --ec-badge-color-purple-background: 250 245 255;
+  --ec-badge-color-purple-text: 126 34 206;
+  --ec-badge-color-fuchsia-background: 253 244 255;
+  --ec-badge-color-fuchsia-text: 162 28 175;
+  --ec-badge-color-pink-background: 253 242 248;
+  --ec-badge-color-pink-text: 190 24 93;
+  --ec-badge-color-rose-background: 255 241 242;
+  --ec-badge-color-rose-text: 190 18 60;
 }
 
 /* Dark theme */
@@ -222,6 +268,52 @@
   --ec-badge-data-product-text: 147 197 253; /* blue-300 */
   --ec-badge-default-bg: 63 63 70 / 0.3; /* zinc-700/30 */
   --ec-badge-default-text: 212 212 216; /* zinc-300 */
+
+  /* User-defined badge colors - dark mode */
+  --ec-badge-color-slate-background: 51 65 85 / 0.28;
+  --ec-badge-color-slate-text: 203 213 225;
+  --ec-badge-color-gray-background: 55 65 81 / 0.28;
+  --ec-badge-color-gray-text: 209 213 219;
+  --ec-badge-color-zinc-background: 63 63 70 / 0.28;
+  --ec-badge-color-zinc-text: 212 212 216;
+  --ec-badge-color-neutral-background: 64 64 64 / 0.28;
+  --ec-badge-color-neutral-text: 212 212 212;
+  --ec-badge-color-stone-background: 68 64 60 / 0.28;
+  --ec-badge-color-stone-text: 214 211 209;
+  --ec-badge-color-red-background: 127 29 29 / 0.28;
+  --ec-badge-color-red-text: 252 165 165;
+  --ec-badge-color-orange-background: 124 45 18 / 0.28;
+  --ec-badge-color-orange-text: 253 186 116;
+  --ec-badge-color-amber-background: 120 53 15 / 0.28;
+  --ec-badge-color-amber-text: 252 211 77;
+  --ec-badge-color-yellow-background: 113 63 18 / 0.28;
+  --ec-badge-color-yellow-text: 253 224 71;
+  --ec-badge-color-lime-background: 54 83 20 / 0.28;
+  --ec-badge-color-lime-text: 190 242 100;
+  --ec-badge-color-green-background: 20 83 45 / 0.28;
+  --ec-badge-color-green-text: 134 239 172;
+  --ec-badge-color-emerald-background: 6 78 59 / 0.28;
+  --ec-badge-color-emerald-text: 110 231 183;
+  --ec-badge-color-teal-background: 17 94 89 / 0.28;
+  --ec-badge-color-teal-text: 94 234 212;
+  --ec-badge-color-cyan-background: 21 94 117 / 0.28;
+  --ec-badge-color-cyan-text: 103 232 249;
+  --ec-badge-color-sky-background: 12 74 110 / 0.28;
+  --ec-badge-color-sky-text: 125 211 252;
+  --ec-badge-color-blue-background: 30 64 175 / 0.28;
+  --ec-badge-color-blue-text: 147 197 253;
+  --ec-badge-color-indigo-background: 49 46 129 / 0.28;
+  --ec-badge-color-indigo-text: 165 180 252;
+  --ec-badge-color-violet-background: 76 29 149 / 0.28;
+  --ec-badge-color-violet-text: 196 181 253;
+  --ec-badge-color-purple-background: 88 28 135 / 0.28;
+  --ec-badge-color-purple-text: 216 180 254;
+  --ec-badge-color-fuchsia-background: 112 26 117 / 0.28;
+  --ec-badge-color-fuchsia-text: 240 171 252;
+  --ec-badge-color-pink-background: 131 24 67 / 0.28;
+  --ec-badge-color-pink-text: 249 168 212;
+  --ec-badge-color-rose-background: 136 19 55 / 0.28;
+  --ec-badge-color-rose-text: 253 164 175;
 }
 
 /* Dark mode prose overrides for documentation content */

package/eventcatalog/src/utils/badge-styles.ts

@@ -0,0 +1,206 @@
+type BadgeColorKind = 'background' | 'text';
+
+type Badge = {
+  backgroundColor?: string;
+  textColor?: string;
+};
+
+const NAMED_BADGE_COLOR_KEYS = new Set([
+  'slate',
+  'gray',
+  'zinc',
+  'neutral',
+  'stone',
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose',
+]);
+
+const CSS_COLOR_VALUE_PATTERN =
+  /^(#[0-9a-f]{3,8}|(?:rgb|rgba|hsl|hsla|oklch|oklab|lab|lch|color)\(.+\)|var\(--[a-z0-9-_]+\)|transparent|currentColor)$/i;
+
+// Common CSS named colors that callers may use directly (e.g. textColor: "white").
+// Palette tokens above take precedence — names like "red" or "blue" resolve to the
+// theme-aware token rather than the raw CSS keyword.
+const CSS_NAMED_COLORS = new Set([
+  'aliceblue',
+  'antiquewhite',
+  'aqua',
+  'aquamarine',
+  'azure',
+  'beige',
+  'bisque',
+  'black',
+  'blanchedalmond',
+  'blueviolet',
+  'brown',
+  'burlywood',
+  'cadetblue',
+  'chartreuse',
+  'chocolate',
+  'coral',
+  'cornflowerblue',
+  'cornsilk',
+  'crimson',
+  'darkblue',
+  'darkcyan',
+  'darkgoldenrod',
+  'darkgray',
+  'darkgreen',
+  'darkgrey',
+  'darkkhaki',
+  'darkmagenta',
+  'darkolivegreen',
+  'darkorange',
+  'darkorchid',
+  'darkred',
+  'darksalmon',
+  'darkseagreen',
+  'darkslateblue',
+  'darkslategray',
+  'darkslategrey',
+  'darkturquoise',
+  'darkviolet',
+  'deeppink',
+  'deepskyblue',
+  'dimgray',
+  'dimgrey',
+  'dodgerblue',
+  'firebrick',
+  'floralwhite',
+  'forestgreen',
+  'gainsboro',
+  'ghostwhite',
+  'gold',
+  'goldenrod',
+  'greenyellow',
+  'grey',
+  'honeydew',
+  'hotpink',
+  'indianred',
+  'ivory',
+  'khaki',
+  'lavender',
+  'lavenderblush',
+  'lawngreen',
+  'lemonchiffon',
+  'lightblue',
+  'lightcoral',
+  'lightcyan',
+  'lightgoldenrodyellow',
+  'lightgray',
+  'lightgreen',
+  'lightgrey',
+  'lightpink',
+  'lightsalmon',
+  'lightseagreen',
+  'lightskyblue',
+  'lightslategray',
+  'lightslategrey',
+  'lightsteelblue',
+  'lightyellow',
+  'limegreen',
+  'linen',
+  'magenta',
+  'maroon',
+  'mediumaquamarine',
+  'mediumblue',
+  'mediumorchid',
+  'mediumpurple',
+  'mediumseagreen',
+  'mediumslateblue',
+  'mediumspringgreen',
+  'mediumturquoise',
+  'mediumvioletred',
+  'midnightblue',
+  'mintcream',
+  'mistyrose',
+  'moccasin',
+  'navajowhite',
+  'navy',
+  'oldlace',
+  'olive',
+  'olivedrab',
+  'orangered',
+  'orchid',
+  'palegoldenrod',
+  'palegreen',
+  'paleturquoise',
+  'palevioletred',
+  'papayawhip',
+  'peachpuff',
+  'peru',
+  'plum',
+  'powderblue',
+  'rebeccapurple',
+  'rosybrown',
+  'royalblue',
+  'saddlebrown',
+  'salmon',
+  'sandybrown',
+  'seagreen',
+  'seashell',
+  'sienna',
+  'silver',
+  'skyblue',
+  'slateblue',
+  'slategray',
+  'slategrey',
+  'snow',
+  'springgreen',
+  'steelblue',
+  'tan',
+  'thistle',
+  'tomato',
+  'turquoise',
+  'wheat',
+  'white',
+  'whitesmoke',
+  'yellowgreen',
+]);
+
+const resolveBadgeColor = (color: string | undefined, kind: BadgeColorKind) => {
+  if (!color) return undefined;
+
+  const value = color.trim();
+  const namedColorKey = value.toLowerCase();
+
+  if (NAMED_BADGE_COLOR_KEYS.has(namedColorKey)) return `rgb(var(--ec-badge-color-${namedColorKey}-${kind}))`;
+  if (CSS_COLOR_VALUE_PATTERN.test(value)) return value;
+  if (CSS_NAMED_COLORS.has(namedColorKey)) return namedColorKey;
+
+  return undefined;
+};
+
+export const getBadgeStyle = (badge: Badge) => {
+  const backgroundColor = resolveBadgeColor(badge.backgroundColor, 'background');
+  const color = resolveBadgeColor(badge.textColor, 'text');
+
+  return [backgroundColor ? `background-color: ${backgroundColor};` : '', color ? `color: ${color};` : '']
+    .filter(Boolean)
+    .join(' ');
+};
+
+export const getBadgeReactStyle = (badge: Badge) => {
+  const backgroundColor = resolveBadgeColor(badge.backgroundColor, 'background');
+  const color = resolveBadgeColor(badge.textColor, 'text');
+
+  return {
+    ...(backgroundColor ? { backgroundColor } : {}),
+    ...(color ? { color } : {}),
+  };
+};

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "3.39.3",
+  "version": "3.39.4",
   "publishConfig": {
     "access": "public"
   },
@@ -106,9 +106,9 @@
     "update-notifier": "^7.3.1",
     "uuid": "^10.0.0",
     "zod": "^4.3.6",
-    "@eventcatalog/linter": "1.0.23",
     "@eventcatalog/sdk": "2.21.1",
-    "@eventcatalog/visualiser": "^3.21.0"
+    "@eventcatalog/visualiser": "^3.21.0",
+    "@eventcatalog/linter": "1.0.23"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",