@eventcatalog/core 3.39.3 → 3.39.4

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.39.3";
+var version = "3.39.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-ABTA6BYL.js";
-import "../chunk-L4F5FCQK.js";
+} from "../chunk-ONQOIF2X.js";
+import "../chunk-WLUQZCIH.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -111,7 +111,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.39.3";
+var version = "3.39.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-5G6OFPTY.js";
-import "../chunk-ABTA6BYL.js";
+} from "../chunk-O2CZERUN.js";
+import "../chunk-ONQOIF2X.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-L4F5FCQK.js";
+import "../chunk-WLUQZCIH.js";
 import "../chunk-5T63CXKU.js";
 export {
   log_build_default as default

package/dist/{chunk-TUEC7QBE.js → chunk-NSR4DZXS.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-L4F5FCQK.js";
+} from "./chunk-WLUQZCIH.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/{chunk-5G6OFPTY.js → chunk-O2CZERUN.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-ABTA6BYL.js";
+} from "./chunk-ONQOIF2X.js";
 import {
   countResources,
   serializeCounts

package/dist/{chunk-ABTA6BYL.js → chunk-ONQOIF2X.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-L4F5FCQK.js";
+} from "./chunk-WLUQZCIH.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-MFYIAZEO.js → chunk-PVOVC2UV.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-TUEC7QBE.js";
+} from "./chunk-NSR4DZXS.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-L4F5FCQK.js → chunk-WLUQZCIH.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "3.39.3";
+var version = "3.39.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "3.39.3";
+var version = "3.39.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-L4F5FCQK.js";
+} from "./chunk-WLUQZCIH.js";
 export {
   VERSION
 };

package/dist/docs/api/03-domain-api.md

@@ -239,20 +239,50 @@ You can store these anywhere in your catalog, and your domain can just reference
 
 ### `badges` {#badges}
 
+<AddedIn version="3.39.4" />
+
 An array of badges that get rendered on the page.
 
 ```md title="Example"
 ---
   badges:
     - content: My badge
-      backgroundColor: blue
-      textColor: blue
+      backgroundColor: green
+      textColor: green
       # Optional icon to display (from https://heroicons.com/)
       # Or the name of the broker (e.g Kafka, EventBridge, etc)
       icon: BoltIcon
 ---
 ```
 
+#### Use named colors
+
+Set `backgroundColor` or `textColor` to a named palette token for automatic light/dark mode adaptation.
+
+Supported names: `slate`, `gray`, `zinc`, `neutral`, `stone`, `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`.
+
+```md title="Named color example"
+---
+  badges:
+    - content: Critical
+      backgroundColor: red
+      textColor: red
+---
+```
+
+#### Use any CSS color
+
+You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`, `hsl()`, `oklch()`, or a CSS variable (`var(--my-color)`).
+
+```md title="CSS color example"
+---
+  badges:
+    - content: Custom
+      backgroundColor: "#6366f1"
+      textColor: "#ffffff"
+---
+```
+
 ### `specifications` {#specifications}
 
 <AddedIn version="2.6.0" />

package/dist/docs/api/04-service-api.md

@@ -220,19 +220,49 @@ An array of [flows](/docs/development/guides/flows/introduction) ids that are as
 
 ### `badges` {#badges}
 
+<AddedIn version="3.39.4" />
+
 An array of badges that get rendered on the page.
 
 ```md title="Example"
 ---
   badges:
     - content: My badge
-      backgroundColor: blue
-      textColor: blue
+      backgroundColor: green
+      textColor: green
       # Optional icon to display (from https://heroicons.com/)
       icon: BoltIcon
 ---
 ```
 
+#### Use named colors
+
+Set `backgroundColor` or `textColor` to a named palette token for automatic light/dark mode adaptation.
+
+Supported names: `slate`, `gray`, `zinc`, `neutral`, `stone`, `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`.
+
+```md title="Named color example"
+---
+  badges:
+    - content: Critical
+      backgroundColor: red
+      textColor: red
+---
+```
+
+#### Use any CSS color
+
+You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`, `hsl()`, `oklch()`, or a CSS variable (`var(--my-color)`).
+
+```md title="CSS color example"
+---
+  badges:
+    - content: Custom
+      backgroundColor: "#6366f1"
+      textColor: "#ffffff"
+---
+```
+
 ### `specifications` {#specifications}
 
 <AddedIn version="2.39.1" />

package/dist/docs/api/05-command-api.md

@@ -142,20 +142,50 @@ An array of user ids that own the command.
 
 ### `badges` {#badges}
 
+<AddedIn version="3.39.4" />
+
 An array of badges that get rendered on the page.
 
 ```md title="Example"
 ---
   badges:
     - content: My badge
-      backgroundColor: blue
-      textColor: blue
+      backgroundColor: green
+      textColor: green
       # Optional icon to display (from https://heroicons.com/)
       # Or the name of the broker (e.g Kafka, EventBridge, etc)
       icon: BoltIcon
 ---
 ```
 
+#### Use named colors
+
+Set `backgroundColor` or `textColor` to a named palette token for automatic light/dark mode adaptation.
+
+Supported names: `slate`, `gray`, `zinc`, `neutral`, `stone`, `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`.
+
+```md title="Named color example"
+---
+  badges:
+    - content: Critical
+      backgroundColor: red
+      textColor: red
+---
+```
+
+#### Use any CSS color
+
+You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`, `hsl()`, `oklch()`, or a CSS variable (`var(--my-color)`).
+
+```md title="CSS color example"
+---
+  badges:
+    - content: Custom
+      backgroundColor: "#6366f1"
+      textColor: "#ffffff"
+---
+```
+
 ### `schemaPath` {#schemaPath}
 
 Path to the schema of the message.

package/dist/docs/api/06-event-api.md

@@ -141,20 +141,50 @@ An array of user ids that own the event.
 
 ### `badges` {#badges}
 
+<AddedIn version="3.39.4" />
+
 An array of badges that get rendered on the page.
 
 ```md title="Example"
 ---
   badges:
     - content: My badge
-      backgroundColor: blue
-      textColor: blue
+      backgroundColor: green
+      textColor: green
       # Optional icon to display (from https://heroicons.com/)
       # Or the name of the broker (e.g Kafka, EventBridge, etc)
       icon: BoltIcon
 ---
 ```
 
+#### Use named colors
+
+Set `backgroundColor` or `textColor` to a named palette token for automatic light/dark mode adaptation.
+
+Supported names: `slate`, `gray`, `zinc`, `neutral`, `stone`, `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`.
+
+```md title="Named color example"
+---
+  badges:
+    - content: Critical
+      backgroundColor: red
+      textColor: red
+---
+```
+
+#### Use any CSS color
+
+You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`, `hsl()`, `oklch()`, or a CSS variable (`var(--my-color)`).
+
+```md title="CSS color example"
+---
+  badges:
+    - content: Custom
+      backgroundColor: "#6366f1"
+      textColor: "#ffffff"
+---
+```
+
 ### `schemaPath` {#schemaPath}
 
 Path to the schema of the message.

package/dist/docs/api/06-query-api.md

@@ -139,20 +139,50 @@ An array of user ids that own the query.
 
 ### `badges` {#badges}
 
+<AddedIn version="3.39.4" />
+
 An array of badges that get rendered on the page.
 
 ```md title="Example"
 ---
   badges:
     - content: My badge
-      backgroundColor: blue
-      textColor: blue
+      backgroundColor: green
+      textColor: green
       # Optional icon to display (from https://heroicons.com/)
       # Or the name of the broker (e.g Kafka, EventBridge, etc)
       icon: BoltIcon
 ---
 ```
 
+#### Use named colors
+
+Set `backgroundColor` or `textColor` to a named palette token for automatic light/dark mode adaptation.
+
+Supported names: `slate`, `gray`, `zinc`, `neutral`, `stone`, `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`.
+
+```md title="Named color example"
+---
+  badges:
+    - content: Critical
+      backgroundColor: red
+      textColor: red
+---
+```
+
+#### Use any CSS color
+
+You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`, `hsl()`, `oklch()`, or a CSS variable (`var(--my-color)`).
+
+```md title="CSS color example"
+---
+  badges:
+    - content: Custom
+      backgroundColor: "#6366f1"
+      textColor: "#ffffff"
+---
+```
+
 ### `schemaPath` {#schemaPath}
 
 Path to the schema of the message.

package/dist/docs/api/08-channel-api.md

@@ -207,20 +207,50 @@ An array of user ids that own the channel.
 
 ### `badges` {#badges}
 
+<AddedIn version="3.39.4" />
+
 An array of badges that get rendered on the page.
 
 ```md title="Example"
 ---
   badges:
     - content: My badge
-      backgroundColor: blue
-      textColor: blue
+      backgroundColor: green
+      textColor: green
       # Optional icon to display (from https://heroicons.com/)
       # Or the name of the broker (e.g Kafka, EventBridge, etc)
       icon: BoltIcon
 ---
 ```
 
+#### Use named colors
+
+Set `backgroundColor` or `textColor` to a named palette token for automatic light/dark mode adaptation.
+
+Supported names: `slate`, `gray`, `zinc`, `neutral`, `stone`, `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`.
+
+```md title="Named color example"
+---
+  badges:
+    - content: Critical
+      backgroundColor: red
+      textColor: red
+---
+```
+
+#### Use any CSS color
+
+You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`, `hsl()`, `oklch()`, or a CSS variable (`var(--my-color)`).
+
+```md title="CSS color example"
+---
+  badges:
+    - content: Custom
+      backgroundColor: "#6366f1"
+      textColor: "#ffffff"
+---
+```
+
 ### `repository` {#repository}
 
 <AddedIn version="2.11.2" />

package/dist/docs/api/09-flow-api.md

@@ -316,20 +316,50 @@ Short summary of your flow, shown on flow summary pages.
 
 ### `badges` {#badges}
 
+<AddedIn version="3.39.4" />
+
 An array of badges that get rendered on the page.
 
 ```md title="Example"
 ---
   badges:
     - content: My badge
-      backgroundColor: blue
-      textColor: blue
+      backgroundColor: green
+      textColor: green
       # Optional icon to display (from https://heroicons.com/)
       # Or the name of the broker (e.g Kafka, EventBridge, etc)
       icon: BoltIcon
 ---
 ```
 
+#### Use named colors
+
+Set `backgroundColor` or `textColor` to a named palette token for automatic light/dark mode adaptation.
+
+Supported names: `slate`, `gray`, `zinc`, `neutral`, `stone`, `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`.
+
+```md title="Named color example"
+---
+  badges:
+    - content: Critical
+      backgroundColor: red
+      textColor: red
+---
+```
+
+#### Use any CSS color
+
+You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`, `hsl()`, `oklch()`, or a CSS variable (`var(--my-color)`).
+
+```md title="CSS color example"
+---
+  badges:
+    - content: Custom
+      backgroundColor: "#6366f1"
+      textColor: "#ffffff"
+---
+```
+
 ### `editUrl` {#editUrl}
 
 <AddedIn version="2.49.4" />

package/dist/docs/api/10-entity-api.md

@@ -190,19 +190,49 @@ Each property can have the following fields:
 
 ### `badges` {#badges}
 
+<AddedIn version="3.39.4" />
+
 An array of badges that get rendered on the page.
 
 ```md title="Example"
 ---
   badges:
     - content: Core Entity
-      backgroundColor: blue
-      textColor: blue
+      backgroundColor: green
+      textColor: green
       # Optional icon to display (from https://heroicons.com/)
       icon: BoltIcon
 ---
 ```
 
+#### Use named colors
+
+Set `backgroundColor` or `textColor` to a named palette token for automatic light/dark mode adaptation.
+
+Supported names: `slate`, `gray`, `zinc`, `neutral`, `stone`, `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`.
+
+```md title="Named color example"
+---
+  badges:
+    - content: Critical
+      backgroundColor: red
+      textColor: red
+---
+```
+
+#### Use any CSS color
+
+You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`, `hsl()`, `oklch()`, or a CSS variable (`var(--my-color)`).
+
+```md title="CSS color example"
+---
+  badges:
+    - content: Custom
+      backgroundColor: "#6366f1"
+      textColor: "#ffffff"
+---
+```
+
 
 ### `editUrl` {#editUrl}
 

package/dist/docs/api/12-data-product-api.md

@@ -204,6 +204,8 @@ owners:
 
 ### `badges`
 
+<AddedIn version="3.39.4" />
+
 - Type: `array`
 
 Array of badges to display on the data product page.
@@ -225,8 +227,18 @@ Badge properties:
 | Property | Type | Required | Description |
 | -------- | ---- | -------- | ----------- |
 | `content` | `string` | Yes | Text content of the badge |
-| `backgroundColor` | `string` | Yes | Background color |
-| `textColor` | `string` | Yes | Text color |
+| `backgroundColor` | `string` | Yes | Background color (named token or CSS value) |
+| `textColor` | `string` | Yes | Text color (named token or CSS value) |
+
+#### Use named colors
+
+Set `backgroundColor` or `textColor` to a named palette token for automatic light/dark mode adaptation.
+
+Supported names: `slate`, `gray`, `zinc`, `neutral`, `stone`, `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`.
+
+#### Use any CSS color
+
+You can also pass any valid CSS color value directly: hex (`#ff0000`), `rgb()`, `hsl()`, `oklch()`, or a CSS variable (`var(--my-color)`).
 
 ### `repository`
 

package/dist/eventcatalog.cjs

@@ -114,7 +114,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.39.3";
+var version = "3.39.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -13,8 +13,8 @@ import {
 } from "./chunk-K3ZVEX2Y.js";
 import {
   log_build_default
-} from "./chunk-5G6OFPTY.js";
-import "./chunk-ABTA6BYL.js";
+} from "./chunk-O2CZERUN.js";
+import "./chunk-ONQOIF2X.js";
 import "./chunk-4UVFXLPI.js";
 import {
   catalogToAstro
@@ -28,13 +28,13 @@ import {
 } from "./chunk-ULZYHF3V.js";
 import {
   generate
-} from "./chunk-MFYIAZEO.js";
+} from "./chunk-PVOVC2UV.js";
 import {
   logger
-} from "./chunk-TUEC7QBE.js";
+} from "./chunk-NSR4DZXS.js";
 import {
   VERSION
-} from "./chunk-L4F5FCQK.js";
+} from "./chunk-WLUQZCIH.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/generate.cjs

@@ -78,7 +78,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.39.3";
+var version = "3.39.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-MFYIAZEO.js";
-import "./chunk-TUEC7QBE.js";
-import "./chunk-L4F5FCQK.js";
+} from "./chunk-PVOVC2UV.js";
+import "./chunk-NSR4DZXS.js";
+import "./chunk-WLUQZCIH.js";
 import "./chunk-5T63CXKU.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.39.3";
+var version = "3.39.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-TUEC7QBE.js";
-import "../chunk-L4F5FCQK.js";
+} from "../chunk-NSR4DZXS.js";
+import "../chunk-WLUQZCIH.js";
 export {
   logger
 };

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

@@ -5,6 +5,7 @@ import { ArrowDownIcon, ArrowUpIcon, EllipsisVerticalIcon, StarIcon } from '@her
 import { buildUrl } from '@utils/url-builder';
 import { getColorAndIconForCollection } from '@utils/collections/icons';
 import { getCollectionTextColorClass } from '@utils/collection-colors';
+import { getBadgeReactStyle } from '@utils/badge-styles';
 import { isIconPath, resolveIconUrl } from '@utils/icon';
 import { useStore } from '@nanostores/react';
 import { favoritesStore, toggleFavorite, type FavoriteItem } from '../../../stores/favorites-store';
@@ -28,6 +29,7 @@ const BadgesCell = ({ badges }: { badges: Array<{ content: string; backgroundCol
         <span
           key={`${badge.content}-${index}`}
           className="inline-flex items-center px-2 py-0.5 text-[11px] font-normal rounded-md max-w-[140px] truncate border border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text-muted))] bg-transparent"
+          style={getBadgeReactStyle(badge)}
           title={badge.content}
         >
           {badge.content}