@eventcatalog/core 4.12.3 → 5.0.0-beta.0

package/eventcatalog/src/pages/visualiser/systems/[id]/[version]/context/index.astro

@@ -1,7 +1,5 @@
 ---
-import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
-import VisualiserLayout from '@layouts/VisualiserLayout.astro';
-import { ClientRouter } from 'astro:transitions';
+import { buildUrl } from '@utils/url-builder';
 
 import { Page } from './_index.data';
 
@@ -11,39 +9,6 @@ export const getStaticPaths = Page.getStaticPaths;
 // Get data
 const props = await Page.getData(Astro);
 
-const {
-  data: { id },
-} = props;
+// The System Context diagram is now level 1 of the system's visualiser page
+return Astro.redirect(buildUrl(`/visualiser/systems/${props.data.id}/${props.data.version}?level=1`));
 ---
-
-<VisualiserLayout title={`Visualiser | ${props.data.name} - System Context`} description={props.data.summary}>
-  <div id="system-context-map-page" class="p-2">
-    <div
-      class="system-context-map-viewport h-[calc(100vh-5rem)] w-full relative border border-[rgb(var(--ec-page-border))]"
-      id={`${id}-portal`}
-      transition:name="visualiser-graph"
-    >
-    </div>
-    <NodeGraph
-      id={id}
-      collection="systems-context"
-      title={`${props.data.name} (v${props.data.version}) - System Context`}
-      mode="full"
-      linkTo="visualiser"
-      version={props.data.version}
-      linksToVisualiser={false}
-    />
-  </div>
-  <ClientRouter />
-</VisualiserLayout>
-
-<style is:global>
-  html[data-embedded='true'] #system-context-map-page {
-    box-sizing: border-box;
-    height: 100vh;
-  }
-
-  html[data-embedded='true'] #system-context-map-page .system-context-map-viewport {
-    height: 100%;
-  }
-</style>

package/eventcatalog/src/pages/visualiser/systems/[id]/[version]/index.astro

@@ -0,0 +1,56 @@
+---
+import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
+import VisualiserLayout from '@layouts/VisualiserLayout.astro';
+import { buildUrl } from '@utils/url-builder';
+import { ClientRouter } from 'astro:transitions';
+
+import { Page } from './_index.data';
+
+export const prerender = Page.prerender;
+export const getStaticPaths = Page.getStaticPaths;
+
+// Get data
+const props = await Page.getData(Astro);
+
+const {
+  data: { id },
+} = props;
+---
+
+<VisualiserLayout title={`Visualiser | ${props.data.name} (systems)`} description={props.data.summary}>
+  <div id="system-visualiser-page" class="p-2">
+    <div
+      class="system-visualiser-viewport h-[calc(100vh-5rem)] w-full relative border border-[rgb(var(--ec-page-border))]"
+      id={`${id}-portal`}
+      transition:name="visualiser-graph"
+    >
+    </div>
+    <NodeGraph
+      id={id}
+      collection="systems-levels"
+      overview={{ label: 'system context' }}
+      title={`${props.data.name} (v${props.data.version})`}
+      mode="full"
+      linkTo="visualiser"
+      version={props.data.version}
+      linksToVisualiser={false}
+      zoomOnScroll={true}
+      href={{
+        label: `Open documentation for ${props.data.name} v${props.data.version}`,
+        url: buildUrl(`/docs/systems/${props.data.id}/${props.data.version}`),
+      }}
+    />
+  </div>
+  <ClientRouter />
+</VisualiserLayout>
+
+<style is:global>
+  html[data-embedded='true'] #system-visualiser-page {
+    box-sizing: border-box;
+    height: 100vh;
+  }
+
+  html[data-embedded='true'] #system-visualiser-page .system-visualiser-viewport {
+    height: 100%;
+  }
+</style>

package/eventcatalog/src/pages/visualiser/systems/[id]/[version].mermaid.ts

@@ -0,0 +1,20 @@
+/**
+ * API endpoint to return mermaid diagram code for a systems visualiser page
+ * URL: /visualiser/systems/{id}/{version}.mermaid
+ *
+ * Lives next to the systems Diagram page, which would otherwise handle these requests
+ * before the generic visualiser/[type]/[id]/[version].mermaid route.
+ */
+import type { APIRoute, GetStaticPaths } from 'astro';
+import { isAuthEnabled } from '@utils/feature';
+import { createMermaidDiagramResponse, getMermaidDiagramPaths } from '../../_mermaid-route';
+
+// Prerender static pages when auth is disabled, use SSR when auth is enabled
+export const prerender = !isAuthEnabled();
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const paths = await getMermaidDiagramPaths(['systems']);
+  return paths.map(({ id, version }) => ({ params: { id, version } }));
+};
+
+export const GET: APIRoute = async ({ params }) => createMermaidDiagramResponse({ ...params, type: 'systems' });

package/eventcatalog/src/stores/sidebar-store/builders/agent.ts

@@ -126,7 +126,7 @@ export const buildAgentSections = (
           pages: [
             {
               type: 'item',
-              title: 'Map',
+              title: 'Diagram',
               href: buildUrl(`/visualiser/agents/${agent.data.id}/${agent.data.version}`),
             },
           ].filter(Boolean) as ChildRef[],

package/eventcatalog/src/stores/sidebar-store/builders/container.ts

@@ -122,7 +122,7 @@ export const buildContainerSections = (
           pages: [
             {
               type: 'item',
-              title: 'Map',
+              title: 'Diagram',
               href: buildUrl(`/visualiser/containers/${container.data.id}/${container.data.version}`),
             },
           ],

package/eventcatalog/src/stores/sidebar-store/builders/data-product.ts

@@ -155,7 +155,7 @@ export const buildDataProductSections = (
           pages: [
             {
               type: 'item',
-              title: 'Map',
+              title: 'Diagram',
               href: buildUrl(`/visualiser/data-products/${dataProduct.data.id}/${dataProduct.data.version}`),
             },
           ],

package/eventcatalog/src/stores/sidebar-store/builders/domain.ts

@@ -94,15 +94,6 @@ export const buildDomainSections = (
   const systemsInDomain = domain.data.systems || [];
   const renderSystems = systemsInDomain.length > 0 && shouldRenderSideBarSection(domain, 'systems');
 
-  // The domain's System Diagram only has something to show when at least one of
-  // its systems takes part in a context graph (declares relationships or actors). This
-  // mirrors the guard that generates the visualiser page, so we never link to a page
-  // that wasn't generated.
-  const hasSystemContext = systemsInDomain.some((system: any) => {
-    const data = system?.data || system;
-    return (data?.relationships || []).length > 0 || (data?.actors || []).length > 0;
-  });
-
   const subDomains = domain.data.domains || [];
   const renderSubDomains = subDomains.length > 0 && shouldRenderSideBarSection(domain, 'subdomains');
 
@@ -153,16 +144,6 @@ export const buildDomainSections = (
     sendsMessages.length > 0 ||
     receivesMessages.length > 0;
 
-  // The Resource Diagram renders the domain's services, agents, data products and
-  // subdomains (see domains-node-graph). Only link to it when there's something to
-  // draw — otherwise the visualiser page is empty.
-  const hasResourceDiagram =
-    servicesInDomain.length > 0 ||
-    externalSystemsInDomain.length > 0 ||
-    agentsInDomain.length > 0 ||
-    dataProductsInDomain.length > 0 ||
-    subDomains.length > 0;
-
   // Diagrams
   const domainDiagrams = domain.data.diagrams || [];
   const diagramNavItems = buildDiagramNavItems(domainDiagrams, context.diagrams);
@@ -268,19 +249,13 @@ export const buildDomainSections = (
           title: 'Overview',
           href: buildUrl(`/architecture/domains/${domain.data.id}/${domain.data.version}`),
         },
-        renderSystems &&
-          renderVisualiser &&
-          hasSystemContext && {
-            type: 'item',
-            title: 'System Diagram',
-            href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}/systems-context`),
-          },
-        renderVisualiser &&
-          hasResourceDiagram && {
-            type: 'item',
-            title: 'Resource Diagram',
-            href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}`),
-          },
+        // The domain's diagram, with levels from the domains it talks to down to
+        // its messages
+        renderVisualiser && {
+          type: 'item',
+          title: 'Diagram',
+          href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}`),
+        },
         renderEntities &&
           renderVisualiser && {
             type: 'item',

package/eventcatalog/src/stores/sidebar-store/builders/entity.ts

@@ -97,7 +97,7 @@ export const buildEntitySections = (
           icon: 'Workflow',
           pages: entityMapTargets.map((target) => ({
             type: 'item',
-            title: entityMapTargets.length === 1 ? 'Entity Map' : `${target.label} Entity Map`,
+            title: entityMapTargets.length === 1 ? 'Entity Diagram' : `${target.label} Entity Diagram`,
             href: target.href,
           })),
         }

package/eventcatalog/src/stores/sidebar-store/builders/message.ts

@@ -153,7 +153,7 @@ export const buildMessageSections = (
           pages: [
             {
               type: 'item',
-              title: 'Map',
+              title: 'Diagram',
               href: buildUrl(`/visualiser/${collection}/${message.data.id}/${message.data.version}`),
             },
             ...(hasTriggerPaths

package/eventcatalog/src/stores/sidebar-store/builders/service.ts

@@ -146,21 +146,15 @@ export const buildServiceSections = (
         },
         renderVisualiser && {
           type: 'item',
-          title: 'Map',
+          title: 'Diagram',
           href: buildUrl(`/visualiser/services/${service.data.id}/${service.data.version}`),
         },
         renderVisualiser &&
           renderEntities && {
             type: 'item',
-            title: 'Entity Map',
+            title: 'Entity Diagram',
             href: buildUrl(`/visualiser/services/${service.data.id}/${service.data.version}/entity-map`),
           },
-        renderVisualiser &&
-          hasDataStores && {
-            type: 'item',
-            title: 'Data Dependency Graph',
-            href: buildUrl(`/visualiser/services/${service.data.id}/${service.data.version}/data`),
-          },
       ].filter(Boolean) as ChildRef[],
     },
     diagrams: hasDiagrams

package/eventcatalog/src/stores/sidebar-store/builders/system.ts

@@ -83,11 +83,6 @@ export const buildSystemSections = (
   const diagramNavItems = buildDiagramNavItems(systemDiagrams, context.diagrams);
   const hasDiagrams = diagramNavItems.length > 0 && shouldRenderSideBarSection(system, 'diagrams');
 
-  // A system that declares relationships to other systems, or actors, can be the starting
-  // point of a Context Diagram. (Systems that are only referenced by others still get a
-  // context page; here we surface the link from systems that declare something themselves.)
-  const hasRelationships = (system.data.relationships || []).length > 0 || (system.data.actors || []).length > 0;
-
   const renderOwners = owners.length > 0 && shouldRenderSideBarSection(system, 'owners');
   const renderRepository = system.data.repository && shouldRenderSideBarSection(system, 'repository');
   const hasAttachments = system.data.attachments && system.data.attachments.length > 0;
@@ -165,15 +160,10 @@ export const buildSystemSections = (
           title: 'Overview',
           href: buildUrl(`/architecture/systems/${system.data.id}/${system.data.version}`),
         },
-        renderVisualiser &&
-          hasRelationships && {
-            type: 'item',
-            title: 'Context Diagram',
-            href: buildUrl(`/visualiser/systems/${system.data.id}/${system.data.version}/context`),
-          },
+        // The system's diagram, with levels from its context down to its messages
         renderVisualiser && {
           type: 'item',
-          title: 'Resource Diagram',
+          title: 'Diagram',
           href: buildUrl(`/visualiser/systems/${system.data.id}/${system.data.version}`),
         },
       ].filter(Boolean) as ChildRef[],

package/eventcatalog/src/stores/sidebar-store/custom-sidebar.ts

@@ -73,12 +73,6 @@ type EntryLike = { collection: string; data: Record<string, any> };
 
 export type CustomSidebarContext = {
   resourceDocs?: ResourceDocEntry[];
-  /**
-   * Whether the resource-docs feature is available on this plan. When explicitly false
-   * (community mode) `[[doc|…]]` refs render nothing — the pages they'd link to don't
-   * exist — instead of failing the build. Missing docs still fail when the feature is on.
-   */
-  resourceDocsEnabled?: boolean;
   domains?: EntryLike[];
   services?: EntryLike[];
   systems?: EntryLike[];
@@ -237,8 +231,6 @@ const resolveDocPage = (
   context: CustomSidebarContext,
   spec: SidebarSpec
 ): NavNode | null => {
-  if (context.resourceDocsEnabled === false) return null;
-
   const [docType, ...rest] = ref.id.split('/');
   const docId = rest.join('/');
 
@@ -608,7 +600,6 @@ export const resolveSidebarPages = <K extends string>(
  */
 export const toCustomSidebarContext = (context: {
   resourceDocs?: ResourceDocEntry[];
-  resourceDocsEnabled?: boolean;
   domains?: unknown[];
   services?: unknown[];
   systems?: unknown[];
@@ -626,7 +617,6 @@ export const toCustomSidebarContext = (context: {
   schemas?: unknown[];
 }): CustomSidebarContext => ({
   resourceDocs: context.resourceDocs,
-  resourceDocsEnabled: context.resourceDocsEnabled,
   domains: context.domains as EntryLike[] | undefined,
   services: context.services as EntryLike[] | undefined,
   systems: context.systems as EntryLike[] | undefined,

package/eventcatalog/src/stores/sidebar-store/state.ts

@@ -41,7 +41,7 @@ import {
   shouldRenderSideBarSection,
   withArchitectureDecisionsSection,
 } from './builders/shared';
-import { isArchitectureGraphEnabled, isChangelogEnabled, isResourceDocsEnabled } from '@utils/feature';
+import { isArchitectureGraphEnabled, isChangelogEnabled } from '@utils/feature';
 import { collectMessageIdsWithFieldUsage } from '@utils/collections/field-usage';
 
 export type { NavigationData, NavNode, ChildRef };
@@ -335,7 +335,6 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
   const messages = [...allEvents, ...allCommands, ...allQueries];
 
   const context = {
-    resourceDocsEnabled: isResourceDocsEnabled(),
     agents,
     services,
     domains,
@@ -659,7 +658,6 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
   );
 
   const dataProductContext = {
-    resourceDocsEnabled: isResourceDocsEnabled(),
     events,
     commands,
     queries,
@@ -818,7 +816,7 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
               pages: [
                 {
                   type: 'item',
-                  title: 'Map',
+                  title: 'Diagram',
                   href: buildUrl(`/visualiser/${channel.collection}/${channel.data.id}/${channel.data.version}`),
                 },
               ],
@@ -879,7 +877,7 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
               ? [
                   {
                     type: 'item' as const,
-                    title: 'System Context Map',
+                    title: 'System Context Diagram',
                     href: buildUrl('/visualiser/system-context-map'),
                   },
                 ]
@@ -1172,7 +1170,7 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
       pages: [
         {
           type: 'item',
-          title: 'System Context Map',
+          title: 'System Context Diagram',
           href: buildUrl('/visualiser/system-context-map'),
         },
       ],

package/eventcatalog/src/styles/theme.css

@@ -13,7 +13,7 @@
 
 /* Default/Light theme */
 :root,
-:root[data-theme="light"] {
+:root[data-theme='light'] {
   /* Header */
   --ec-header-bg: 255 255 255; /* #ffffff */
   --ec-header-text: 15 23 42; /* #0f172a (slate-900) */
@@ -30,6 +30,9 @@
   --ec-accent-text: 88 28 135; /* #581c87 (purple-900) */
   --ec-accent-gradient-from: 126 34 206; /* #7e22ce (purple-700) */
   --ec-accent-gradient-to: 88 28 135; /* #581c87 (purple-900) */
+  /* Resolved on :root for every theme, so the visualiser (which overrides
+     --ec-accent with its own palette) can still use the catalog's accent */
+  --ec-catalog-accent: var(--ec-accent);
 
   /* Buttons */
   --ec-button-bg: 15 23 42; /* #0f172a */
@@ -163,7 +166,7 @@
 }
 
 /* Dark theme */
-:root[data-theme="dark"] {
+:root[data-theme='dark'] {
   /*
    * Modern dark theme inspired by Mintlify
    * Uses deep blacks with subtle cool undertones for a refined look
@@ -178,13 +181,14 @@
   --ec-primary: 147 51 234; /* #9333ea (purple-600) */
   --ec-primary-hover: 126 34 206; /* #7e22ce (purple-700) */
 
-  /* Accent colors - used for selections, highlights, interactive elements */
-  --ec-accent: 147 51 234; /* #9333ea (purple-600) */
-  --ec-accent-hover: 126 34 206; /* #7e22ce (purple-700) */
+  /* Accent colors - used for selections, highlights, interactive elements.
+     A light shade, like the other themes use in dark mode, so accent text is readable on dark surfaces */
+  --ec-accent: 192 132 252; /* #c084fc (purple-400) */
+  --ec-accent-hover: 168 85 247; /* #a855f7 (purple-500) */
   --ec-accent-subtle: 88 28 135 / 0.3; /* purple-900/30 */
-  --ec-accent-text: 192 132 252; /* #c084fc (purple-400) */
-  --ec-accent-gradient-from: 147 51 234; /* #9333ea (purple-600) */
-  --ec-accent-gradient-to: 126 34 206; /* #7e22ce (purple-700) */
+  --ec-accent-text: 216 180 254; /* #d8b4fe (purple-300) */
+  --ec-accent-gradient-from: 192 132 252; /* #c084fc (purple-400) */
+  --ec-accent-gradient-to: 168 85 247; /* #a855f7 (purple-500) */
 
   /* Buttons - accent color for better visibility */
   --ec-button-bg: 147 51 234; /* #9333ea - purple-600 */
@@ -317,7 +321,7 @@
 }
 
 /* Dark mode prose overrides for documentation content */
-:root[data-theme="dark"] .prose {
+:root[data-theme='dark'] .prose {
   --tw-prose-body: rgb(139 148 158); /* #8b949e - muted body text */
   --tw-prose-headings: rgb(201 209 217); /* #c9d1d9 - soft white headings */
   --tw-prose-lead: rgb(110 118 129); /* #6e7681 */
@@ -341,44 +345,44 @@
  * light-theme Tailwind colors. Keep that content readable without changing
  * the appearance of other custom prose elements.
  */
-:root[data-theme="dark"] .prose .rounded-full.text-gray-900.border-gray-300 {
+:root[data-theme='dark'] .prose .rounded-full.text-gray-900.border-gray-300 {
   color: rgb(var(--ec-page-text));
   border-color: rgb(var(--ec-page-border));
 }
 
-:root[data-theme="dark"] .prose code {
+:root[data-theme='dark'] .prose code {
   background-color: rgb(33 38 45); /* #21262d */
   border-radius: 0.25rem;
   padding: 0.125rem 0.375rem;
 }
 
-:root[data-theme="dark"] .prose pre {
+:root[data-theme='dark'] .prose pre {
   background-color: rgb(22 27 34); /* #161b22 */
   border: 1px solid rgb(33 38 45); /* #21262d */
 }
 
-:root[data-theme="dark"] .prose a {
+:root[data-theme='dark'] .prose a {
   color: rgb(168 85 247); /* purple-500 */
 }
 
-:root[data-theme="dark"] .prose a:hover {
+:root[data-theme='dark'] .prose a:hover {
   color: rgb(192 132 252); /* purple-400 */
 }
 
-:root[data-theme="dark"] .prose strong {
+:root[data-theme='dark'] .prose strong {
   color: rgb(240 246 252); /* #f0f6fc */
 }
 
-:root[data-theme="dark"] .prose table th {
+:root[data-theme='dark'] .prose table th {
   color: rgb(240 246 252); /* #f0f6fc */
 }
 
-:root[data-theme="dark"] .prose table td {
+:root[data-theme='dark'] .prose table td {
   border-color: rgb(33 38 45); /* #21262d */
 }
 
 /* Invert dark SVG icons in dark mode so they stay visible */
-:root[data-theme="dark"] .ec-themed-icon {
+:root[data-theme='dark'] .ec-themed-icon {
   filter: invert(1);
 }
 

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

@@ -6,8 +6,8 @@
  */
 
 /* Forest Light Mode */
-:root[data-catalog-theme="forest"],
-:root[data-catalog-theme="forest"][data-theme="light"] {
+:root[data-catalog-theme='forest'],
+:root[data-catalog-theme='forest'][data-theme='light'] {
   /* Header - clean white */
   --ec-header-bg: 255 255 255; /* #ffffff */
   --ec-header-text: 20 20 20; /* #141414 */
@@ -110,7 +110,7 @@
 }
 
 /* Forest Dark Mode */
-:root[data-catalog-theme="forest"][data-theme="dark"] {
+:root[data-catalog-theme='forest'][data-theme='dark'] {
   /* Header - deep forest dark */
   --ec-header-bg: 3 7 18; /* #030712 gray-950 */
   --ec-header-text: 243 244 246; /* #f3f4f6 gray-100 */
@@ -209,7 +209,7 @@
 }
 
 /* Forest theme prose overrides */
-:root[data-catalog-theme="forest"][data-theme="dark"] .prose {
+:root[data-catalog-theme='forest'][data-theme='dark'] .prose {
   --tw-prose-body: rgb(156 163 175); /* gray-400 */
   --tw-prose-headings: rgb(243 244 246); /* gray-100 */
   --tw-prose-lead: rgb(107 114 128); /* gray-500 */
@@ -228,19 +228,19 @@
   --tw-prose-td-borders: rgb(31 41 55); /* gray-800 */
 }
 
-:root[data-catalog-theme="forest"][data-theme="dark"] .prose code {
+:root[data-catalog-theme='forest'][data-theme='dark'] .prose code {
   background-color: rgb(31 41 55); /* gray-800 */
 }
 
-:root[data-catalog-theme="forest"][data-theme="dark"] .prose pre {
+:root[data-catalog-theme='forest'][data-theme='dark'] .prose pre {
   background-color: rgb(17 24 39); /* gray-900 */
   border: 1px solid rgb(31 41 55); /* gray-800 */
 }
 
-:root[data-catalog-theme="forest"][data-theme="dark"] .prose a {
+:root[data-catalog-theme='forest'][data-theme='dark'] .prose a {
   color: rgb(74 222 128); /* green-400 */
 }
 
-:root[data-catalog-theme="forest"][data-theme="dark"] .prose a:hover {
+:root[data-catalog-theme='forest'][data-theme='dark'] .prose a:hover {
   color: rgb(134 239 172); /* green-300 */
 }

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

@@ -6,8 +6,8 @@
  */
 
 /* Ocean Light Mode */
-:root[data-catalog-theme="ocean"],
-:root[data-catalog-theme="ocean"][data-theme="light"] {
+:root[data-catalog-theme='ocean'],
+:root[data-catalog-theme='ocean'][data-theme='light'] {
   /* Header - light with subtle teal tint */
   --ec-header-bg: 255 255 255; /* #ffffff */
   --ec-header-text: 15 23 42; /* #0f172a */
@@ -110,7 +110,7 @@
 }
 
 /* Ocean Dark Mode */
-:root[data-catalog-theme="ocean"][data-theme="dark"] {
+:root[data-catalog-theme='ocean'][data-theme='dark'] {
   /*
    * Unified dark background - all major surfaces share the same deep ocean color
    * Creates a seamless, immersive dark experience
@@ -214,7 +214,7 @@
 }
 
 /* Ocean theme prose overrides */
-:root[data-catalog-theme="ocean"][data-theme="dark"] .prose {
+:root[data-catalog-theme='ocean'][data-theme='dark'] .prose {
   --tw-prose-body: rgb(148 163 184); /* slate-400 */
   --tw-prose-headings: rgb(226 232 240); /* slate-200 */
   --tw-prose-lead: rgb(100 116 139); /* slate-500 */
@@ -233,19 +233,19 @@
   --tw-prose-td-borders: rgb(30 41 59); /* slate-800 */
 }
 
-:root[data-catalog-theme="ocean"][data-theme="dark"] .prose code {
+:root[data-catalog-theme='ocean'][data-theme='dark'] .prose code {
   background-color: rgb(30 41 59); /* slate-800 */
 }
 
-:root[data-catalog-theme="ocean"][data-theme="dark"] .prose pre {
+:root[data-catalog-theme='ocean'][data-theme='dark'] .prose pre {
   background-color: rgb(15 23 42); /* slate-900 */
   border: 1px solid rgb(30 41 59); /* slate-800 */
 }
 
-:root[data-catalog-theme="ocean"][data-theme="dark"] .prose a {
+:root[data-catalog-theme='ocean'][data-theme='dark'] .prose a {
   color: rgb(45 212 191); /* teal-400 */
 }
 
-:root[data-catalog-theme="ocean"][data-theme="dark"] .prose a:hover {
+:root[data-catalog-theme='ocean'][data-theme='dark'] .prose a:hover {
   color: rgb(94 234 212); /* teal-300 */
 }

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

@@ -6,8 +6,8 @@
  */
 
 /* Sapphire Light Mode */
-:root[data-catalog-theme="sapphire"],
-:root[data-catalog-theme="sapphire"][data-theme="light"] {
+:root[data-catalog-theme='sapphire'],
+:root[data-catalog-theme='sapphire'][data-theme='light'] {
   /* Header - clean white with subtle blue tint */
   --ec-header-bg: 255 255 255; /* #ffffff */
   --ec-header-text: 15 23 42; /* #0f172a */
@@ -110,7 +110,7 @@
 }
 
 /* Sapphire Dark Mode */
-:root[data-catalog-theme="sapphire"][data-theme="dark"] {
+:root[data-catalog-theme='sapphire'][data-theme='dark'] {
   /* Header - matches page bg for unified look */
   --ec-header-bg: 2 6 23; /* #020617 slate-950 - matches page bg */
   --ec-header-text: 226 232 240; /* #e2e8f0 */
@@ -209,7 +209,7 @@
 }
 
 /* Sapphire theme prose overrides */
-:root[data-catalog-theme="sapphire"][data-theme="dark"] .prose {
+:root[data-catalog-theme='sapphire'][data-theme='dark'] .prose {
   --tw-prose-body: rgb(148 163 184); /* slate-400 */
   --tw-prose-headings: rgb(226 232 240); /* slate-200 */
   --tw-prose-lead: rgb(100 116 139); /* slate-500 */
@@ -228,19 +228,19 @@
   --tw-prose-td-borders: rgb(30 41 59); /* slate-800 */
 }
 
-:root[data-catalog-theme="sapphire"][data-theme="dark"] .prose code {
+:root[data-catalog-theme='sapphire'][data-theme='dark'] .prose code {
   background-color: rgb(30 41 59); /* slate-800 */
 }
 
-:root[data-catalog-theme="sapphire"][data-theme="dark"] .prose pre {
+:root[data-catalog-theme='sapphire'][data-theme='dark'] .prose pre {
   background-color: rgb(15 23 42); /* slate-900 */
   border: 1px solid rgb(30 41 59); /* slate-800 */
 }
 
-:root[data-catalog-theme="sapphire"][data-theme="dark"] .prose a {
+:root[data-catalog-theme='sapphire'][data-theme='dark'] .prose a {
   color: rgb(96 165 250); /* blue-400 */
 }
 
-:root[data-catalog-theme="sapphire"][data-theme="dark"] .prose a:hover {
+:root[data-catalog-theme='sapphire'][data-theme='dark'] .prose a:hover {
   color: rgb(147 197 253); /* blue-300 */
 }