@eventcatalog/core 3.36.5 → 3.38.0

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 */

package/eventcatalog/src/utils/collection-colors.ts

@@ -0,0 +1,76 @@
+export type CollectionColor =
+  | 'orange'
+  | 'blue'
+  | 'green'
+  | 'pink'
+  | 'yellow'
+  | 'teal'
+  | 'purple'
+  | 'red'
+  | 'gray'
+  | 'cyan'
+  | 'indigo';
+
+export const getColorForCollection = (collection: string): CollectionColor => {
+  switch (collection) {
+    case 'events':
+      return 'orange';
+    case 'commands':
+      return 'blue';
+    case 'queries':
+      return 'green';
+    case 'flows':
+      return 'teal';
+    case 'teams':
+      return 'gray';
+    case 'users':
+      return 'gray';
+    case 'channels':
+      return 'purple';
+    case 'ubiquitousLanguages':
+      return 'green';
+    case 'entities':
+      return 'purple';
+    case 'domains':
+      return 'yellow';
+    case 'services':
+      return 'pink';
+    case 'data-products':
+      return 'cyan';
+    case 'containers':
+      return 'indigo';
+    default:
+      return 'gray';
+  }
+};
+
+export const tailwind500RgbByColor: Record<CollectionColor, string> = {
+  orange: '249 115 22',
+  blue: '59 130 246',
+  green: '34 197 94',
+  pink: '236 72 153',
+  yellow: '234 179 8',
+  teal: '20 184 166',
+  purple: '168 85 247',
+  red: '239 68 68',
+  gray: '107 114 128',
+  cyan: '6 182 212',
+  indigo: '99 102 241',
+};
+
+export const collectionTextColorClassByColor: Record<CollectionColor, 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',
+  indigo: 'text-indigo-500',
+};
+
+export const getCollectionTextColorClass = (color: string, fallback = 'text-gray-500'): string =>
+  collectionTextColorClassByColor[color as CollectionColor] || fallback;

package/eventcatalog/src/utils/collections/icons.ts

@@ -13,6 +13,7 @@ import {
   CubeIcon,
 } from '@heroicons/react/24/outline';
 import { BookText, Box, DatabaseIcon } from 'lucide-react';
+import { getColorForCollection } from '@utils/collection-colors';
 
 export const getIconForCollection = (collection: string) => {
   switch (collection) {
@@ -53,33 +54,5 @@ export const getIconForCollection = (collection: string) => {
 
 export const getColorAndIconForCollection = (collection: string) => {
   const icon = getIconForCollection(collection);
-
-  switch (collection) {
-    case 'events':
-      return { color: 'orange', Icon: icon };
-    case 'commands':
-      return { color: 'blue', Icon: icon };
-    case 'queries':
-      return { color: 'green', Icon: icon };
-    case 'flows':
-      return { color: 'teal', Icon: icon };
-    case 'teams':
-      return { color: 'red', Icon: icon };
-    case 'users':
-      return { color: 'gray', Icon: icon };
-    case 'channels':
-      return { color: 'purple', Icon: icon };
-    case 'ubiquitousLanguages':
-      return { color: 'green', Icon: icon };
-    case 'entities':
-      return { color: 'purple', Icon: icon };
-    case 'domains':
-      return { color: 'yellow', Icon: icon };
-    case 'services':
-      return { color: 'pink', Icon: icon };
-    case 'data-products':
-      return { color: 'cyan', Icon: icon };
-    default:
-      return { color: 'gray', Icon: icon };
-  }
+  return { color: getColorForCollection(collection), Icon: icon };
 };

package/eventcatalog/src/utils/resource-reference-colors.ts

@@ -0,0 +1,49 @@
+import { getColorForCollection, tailwind500RgbByColor, type CollectionColor } from './collection-colors';
+import { resourceToCollectionMap } from './collections/util';
+
+export type ResourceReferenceType =
+  | 'entity'
+  | 'service'
+  | 'event'
+  | 'command'
+  | 'query'
+  | 'domain'
+  | 'flow'
+  | 'channel'
+  | 'diagram'
+  | 'container'
+  | 'user'
+  | 'team'
+  | 'doc'
+  | 'data-product';
+
+const resourceTypeToCollection = {
+  ...resourceToCollectionMap,
+  doc: 'customPages',
+} as Record<ResourceReferenceType, string>;
+
+export const getResourceReferenceColorName = (type: string): CollectionColor => {
+  const collection = resourceTypeToCollection[type as ResourceReferenceType] || '';
+  return getColorForCollection(collection);
+};
+
+export const getResourceReferenceStyle = (type: string): string => {
+  if (type === 'doc') {
+    return [
+      '--ec-resource-ref-bg: rgb(var(--ec-accent) / 0.12)',
+      '--ec-resource-ref-color: rgb(var(--ec-accent))',
+      'color: var(--ec-resource-ref-color)',
+      'text-decoration-color: var(--ec-resource-ref-color)',
+    ].join('; ');
+  }
+
+  const color = getResourceReferenceColorName(type);
+  const rgb = tailwind500RgbByColor[color];
+
+  return [
+    `--ec-resource-ref-bg: rgb(${rgb} / 0.12)`,
+    `--ec-resource-ref-color: rgb(${rgb})`,
+    'color: var(--ec-resource-ref-color)',
+    'text-decoration-color: var(--ec-resource-ref-color)',
+  ].join('; ');
+};

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "3.36.5",
+  "version": "3.38.0",
   "publishConfig": {
     "access": "public"
   },
@@ -107,8 +107,8 @@
     "uuid": "^10.0.0",
     "zod": "^4.3.6",
     "@eventcatalog/linter": "1.0.23",
-    "@eventcatalog/sdk": "2.21.1",
-    "@eventcatalog/visualiser": "^3.20.3"
+    "@eventcatalog/visualiser": "^3.21.0",
+    "@eventcatalog/sdk": "2.21.1"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",