npm - @eventcatalog/core - Versions diffs - 3.0.0 → 3.2.0 - Mend

@eventcatalog/core 3.0.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (109) hide show

package/eventcatalog/src/pages/studio.astro CHANGED Viewed

@@ -48,23 +48,27 @@ const hasResources = resourcesToShow.length > 0;
   </head>
   <body>
     <VerticalSideBarLayout title="EventCatalog Studio" showNestedSideBar={false}>
-      <div class="min-h-[calc(100vh-60px)] bg-white">
+      <div class="min-h-[calc(100vh-60px)] bg-[rgb(var(--ec-page-bg))]">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
           {/* Hero Section */}
           <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
             <div>
-              <div class="inline-flex items-center px-3 py-1.5 rounded-full bg-gray-100 text-gray-700 font-medium text-xs mb-6">
+              <div
+                class="inline-flex items-center px-3 py-1.5 rounded-full bg-[rgb(var(--ec-content-hover))] text-[rgb(var(--ec-page-text))] font-medium text-xs mb-6"
+              >
                 Visual Design Tool
               </div>
-              <h1 class="text-4xl font-bold text-gray-900 tracking-tight mb-4">Turn your resources into designs</h1>
-              <p class="text-lg text-gray-600 mb-8">
+              <h1 class="text-4xl font-bold text-[rgb(var(--ec-page-text))] tracking-tight mb-4">
+                Turn your resources into designs
+              </h1>
+              <p class="text-lg text-[rgb(var(--ec-page-text-muted))] mb-8">
                 Transform your documented messages, services, and domains into architecture diagrams. Drag, drop, and design with
                 what you already have.
               </p>
               <div class="flex flex-col sm:flex-row gap-3 mb-4">
                 <button
                   id="design-button"
-                  class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-gray-900 hover:bg-gray-800 transition-colors duration-150"
+                  class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-[rgb(var(--ec-button-text))] bg-[rgb(var(--ec-button-bg))] hover:bg-[rgb(var(--ec-button-bg-hover))] transition-colors duration-150"
                 >
                   <SquareDashedMousePointerIcon className="w-4 h-4 mr-2" />
                   Open Studio
@@ -73,7 +77,7 @@ const hasResources = resourcesToShow.length > 0;
                   href="https://www.eventcatalog.dev/docs/development/components/designs"
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-150"
+                  class="inline-flex items-center justify-center px-6 py-3 border border-[rgb(var(--ec-page-border))] text-base font-medium rounded-lg text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] hover:bg-[rgb(var(--ec-content-hover))] transition-colors duration-150"
                 >
                   Learn more
                   <ExternalLink className="w-4 h-4 ml-2" />
@@ -82,8 +86,9 @@ const hasResources = resourcesToShow.length > 0;
               {
                 totalResources > 0 && (
-                  <p class="text-sm text-gray-500">
-                    <span class="font-medium text-gray-700">{totalResources}</span> resources available to design with
+                  <p class="text-sm text-[rgb(var(--ec-page-text-muted))]">
+                    <span class="font-medium text-[rgb(var(--ec-page-text))]">{totalResources}</span> resources available to
+                    design with
                   </p>
                 )
               }
@@ -100,7 +105,7 @@ const hasResources = resourcesToShow.length > 0;
                         if (resource.type === 'event') {
                           return (
                             <div
-                              class="animate-float-in flex items-center gap-2 text-sm text-gray-700 px-4 py-2.5 bg-orange-50 rounded-lg border border-orange-200 shadow-sm"
+                              class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-page-text))] px-4 py-2.5 bg-orange-50 dark:bg-orange-500/10 rounded-lg border border-orange-200 dark:border-orange-500/30 shadow-sm"
                               style={`animation-delay: ${resource.index * 0.3}s;`}
                             >
                               <BoltIcon className="w-4 h-4 text-orange-500" />
@@ -110,7 +115,7 @@ const hasResources = resourcesToShow.length > 0;
                         } else if (resource.type === 'service') {
                           return (
                             <div
-                              class="animate-float-in flex items-center gap-2 text-sm text-gray-700 px-4 py-2.5 bg-pink-50 rounded-lg border border-pink-200 shadow-sm"
+                              class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-page-text))] px-4 py-2.5 bg-pink-50 dark:bg-pink-500/10 rounded-lg border border-pink-200 dark:border-pink-500/30 shadow-sm"
                               style={`animation-delay: ${resource.index * 0.3}s;`}
                             >
                               <ServerIcon className="w-4 h-4 text-pink-500" />
@@ -120,7 +125,7 @@ const hasResources = resourcesToShow.length > 0;
                         } else if (resource.type === 'channel') {
                           return (
                             <div
-                              class="animate-float-in flex items-center gap-2 text-sm text-gray-700 px-4 py-2.5 bg-indigo-50 rounded-lg border border-indigo-200 shadow-sm"
+                              class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-page-text))] px-4 py-2.5 bg-indigo-50 dark:bg-indigo-500/10 rounded-lg border border-indigo-200 dark:border-indigo-500/30 shadow-sm"
                               style={`animation-delay: ${resource.index * 0.3}s;`}
                             >
                               <ArrowLeftRightIcon className="w-4 h-4 text-indigo-500" />
@@ -133,21 +138,21 @@ const hasResources = resourcesToShow.length > 0;
                   ) : (
                     <div class="absolute left-0 top-1/2 -translate-y-1/2 space-y-2.5">
                       <div
-                        class="animate-float-in flex items-center gap-2 text-sm text-gray-400 px-4 py-2.5 bg-gray-50 rounded-lg border border-gray-200 border-dashed"
+                        class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-icon-color))] px-4 py-2.5 bg-[rgb(var(--ec-content-hover))] rounded-lg border border-[rgb(var(--ec-page-border))] border-dashed"
                         style="animation-delay: 0s;"
                       >
                         <BoltIcon className="w-4 h-4" />
                         <span>Your events</span>
                       </div>
                       <div
-                        class="animate-float-in flex items-center gap-2 text-sm text-gray-400 px-4 py-2.5 bg-gray-50 rounded-lg border border-gray-200 border-dashed"
+                        class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-icon-color))] px-4 py-2.5 bg-[rgb(var(--ec-content-hover))] rounded-lg border border-[rgb(var(--ec-page-border))] border-dashed"
                         style="animation-delay: 0.3s;"
                       >
                         <ServerIcon className="w-4 h-4" />
                         <span>Your services</span>
                       </div>
                       <div
-                        class="animate-float-in flex items-center gap-2 text-sm text-gray-400 px-4 py-2.5 bg-gray-50 rounded-lg border border-gray-200 border-dashed"
+                        class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-icon-color))] px-4 py-2.5 bg-[rgb(var(--ec-content-hover))] rounded-lg border border-[rgb(var(--ec-page-border))] border-dashed"
                         style="animation-delay: 0.6s;"
                       >
                         <ArrowLeftRightIcon className="w-4 h-4" />
@@ -159,7 +164,12 @@ const hasResources = resourcesToShow.length > 0;
                 {/* Arrow indicator */}
                 <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-                  <svg class="w-10 h-10 text-gray-300 animate-pulse" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                  <svg
+                    class="w-10 h-10 text-[rgb(var(--ec-icon-color))] animate-pulse"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                  >
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                   </svg>
                 </div>
@@ -169,7 +179,7 @@ const hasResources = resourcesToShow.length > 0;
                   <img
                     src="/studio-bg.png"
                     alt="Studio Design Preview"
-                    class="rounded-xl shadow-lg border border-gray-200 w-56 h-auto"
+                    class="rounded-xl shadow-lg border border-[rgb(var(--ec-page-border))] w-56 h-auto"
                   />
                 </div>
               </div>
@@ -179,54 +189,72 @@ const hasResources = resourcesToShow.length > 0;
           {/* Features Section */}
           <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
             <div
-              class="group bg-white rounded-xl p-6 border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all duration-200"
+              class="group bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] rounded-xl p-6 border border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent))] hover:shadow-md transition-all duration-200"
             >
               <div
-                class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gray-200 transition-colors"
+                class="w-10 h-10 bg-[rgb(var(--ec-content-hover))] rounded-lg flex items-center justify-center mb-4 group-hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
               >
-                <svg class="w-5 h-5 text-gray-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <svg
+                  class="w-5 h-5 text-[rgb(var(--ec-page-text))]"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
                   <rect width="8" height="8" x="3" y="3" rx="2"></rect>
                   <path d="M7 11v4a2 2 0 0 0 2 2h4"></path>
                   <rect width="8" height="8" x="13" y="13" rx="2"></rect>
                 </svg>
               </div>
-              <h3 class="text-base font-semibold text-gray-900 mb-2">Real Resources</h3>
-              <p class="text-sm text-gray-600 leading-relaxed">
+              <h3 class="text-base font-semibold text-[rgb(var(--ec-page-text))] mb-2">Real Resources</h3>
+              <p class="text-sm text-[rgb(var(--ec-page-text-muted))] leading-relaxed">
                 Drag and drop messages, services, and domains from your catalog. No more copying names or keeping things in sync.
               </p>
             </div>
             <div
-              class="group bg-white rounded-xl p-6 border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all duration-200"
+              class="group bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] rounded-xl p-6 border border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent))] hover:shadow-md transition-all duration-200"
             >
               <div
-                class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gray-200 transition-colors"
+                class="w-10 h-10 bg-[rgb(var(--ec-content-hover))] rounded-lg flex items-center justify-center mb-4 group-hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
               >
-                <svg class="w-5 h-5 text-gray-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <svg
+                  class="w-5 h-5 text-[rgb(var(--ec-page-text))]"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
                   <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                   <polyline points="17 21 17 13 7 13 7 21"></polyline>
                   <polyline points="7 3 7 8 15 8"></polyline>
                 </svg>
               </div>
-              <h3 class="text-base font-semibold text-gray-900 mb-2">Save & Version</h3>
-              <p class="text-sm text-gray-600 leading-relaxed">
+              <h3 class="text-base font-semibold text-[rgb(var(--ec-page-text))] mb-2">Save & Version</h3>
+              <p class="text-sm text-[rgb(var(--ec-page-text-muted))] leading-relaxed">
                 Save designs locally and store in Git. All designs and data is owned by you.
               </p>
             </div>
             <div
-              class="group bg-white rounded-xl p-6 border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all duration-200"
+              class="group bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] rounded-xl p-6 border border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent))] hover:shadow-md transition-all duration-200"
             >
               <div
-                class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gray-200 transition-colors"
+                class="w-10 h-10 bg-[rgb(var(--ec-content-hover))] rounded-lg flex items-center justify-center mb-4 group-hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
               >
-                <svg class="w-5 h-5 text-gray-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <svg
+                  class="w-5 h-5 text-[rgb(var(--ec-page-text))]"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
                   <polyline points="16 18 22 12 16 6"></polyline>
                   <polyline points="8 6 2 12 8 18"></polyline>
                 </svg>
               </div>
-              <h3 class="text-base font-semibold text-gray-900 mb-2">Embed Anywhere</h3>
-              <p class="text-sm text-gray-600 leading-relaxed">
+              <h3 class="text-base font-semibold text-[rgb(var(--ec-page-text))] mb-2">Embed Anywhere</h3>
+              <p class="text-sm text-[rgb(var(--ec-page-text-muted))] leading-relaxed">
                 Drop diagrams directly into documentation pages. One source of truth for your architecture.
               </p>
             </div>

package/eventcatalog/src/remark-plugins/directives.ts CHANGED Viewed

@@ -6,11 +6,11 @@ export function remarkDirectives() {
     visit(tree, (node) => {
       if (node.type === 'containerDirective') {
         const blockTypes = {
-          info: 'bg-blue-50 border-l-4 border-blue-500',
-          warning: 'bg-yellow-50 border-l-4 border-yellow-500',
-          danger: 'bg-red-50 border-l-4 border-red-500',
-          tip: 'bg-green-50 border-l-4 border-green-500',
-          note: 'bg-gray-50 border-l-4 border-gray-500',
+          info: 'bg-blue-50 dark:bg-blue-950/50 border-l-4 border-blue-500 text-blue-700 dark:text-blue-200',
+          warning: 'bg-yellow-50 dark:bg-yellow-950/50 border-l-4 border-yellow-500 text-yellow-700 dark:text-yellow-200',
+          danger: 'bg-red-50 dark:bg-red-950/50 border-l-4 border-red-500 text-red-700 dark:text-red-200',
+          tip: 'bg-green-50 dark:bg-green-950/50 border-l-4 border-green-500 text-green-700 dark:text-green-200',
+          note: 'bg-gray-50 dark:bg-gray-950/50 border-l-4 border-gray-500 text-gray-700 dark:text-gray-200',
         };
         // Lucide icon paths
@@ -116,7 +116,7 @@ export function remarkDirectives() {
           data: {
             hName: 'div',
             hProperties: {
-              class: 'prose prose-md w-full !max-w-none ',
+              class: 'prose prose-md dark:prose-invert w-full !max-w-none prose-p:my-1 prose-p:text-inherit',
             },
           },
           children: contentChildren,

package/eventcatalog/src/remark-plugins/mermaid.ts CHANGED Viewed

@@ -19,8 +19,8 @@ export const mermaid: RemarkPlugin<[]> = () => (tree) => {
     node.type = 'html';
     node.value = `
     <div class="mermaid-block pb-4">
-      <div class="mermaid border border-gray-200 rounded-lg p-1" data-content="${escapeHtml(node.value)}">
-        <p>Loading graph...</p>
+      <div class="mermaid border border-[rgb(var(--ec-page-border))] rounded-lg p-1" data-content="${escapeHtml(node.value)}">
+        <p class="text-[rgb(var(--ec-page-text-muted))]">Loading graph...</p>
       </div>
     </div>
     `;

package/eventcatalog/src/stores/theme-store.ts ADDED Viewed

@@ -0,0 +1,93 @@
+import { atom } from 'nanostores';
+const THEME_KEY = 'eventcatalog-theme';
+export type Theme = 'light' | 'dark';
+export const themeStore = atom<Theme>('light');
+// Get system preference
+const getSystemTheme = (): Theme => {
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return 'light';
+};
+// Apply theme to document via data-theme attribute
+const applyTheme = (theme: Theme) => {
+  if (typeof document !== 'undefined') {
+    document.documentElement.setAttribute('data-theme', theme);
+  }
+};
+// Initialize store from localStorage or system preference
+const initStore = () => {
+  if (typeof window !== 'undefined') {
+    try {
+      const stored = localStorage.getItem(THEME_KEY) as Theme | null;
+      if (stored && (stored === 'light' || stored === 'dark')) {
+        // User has explicitly chosen a theme, use that
+        themeStore.set(stored);
+        applyTheme(stored);
+      } else {
+        // No stored preference, use system preference
+        const systemTheme = getSystemTheme();
+        themeStore.set(systemTheme);
+        applyTheme(systemTheme);
+      }
+    } catch (e) {
+      console.warn('Failed to load theme:', e);
+      const systemTheme = getSystemTheme();
+      applyTheme(systemTheme);
+    }
+  }
+};
+if (typeof window !== 'undefined') {
+  initStore();
+  // Listen for system preference changes
+  if (window.matchMedia) {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+      // Only follow system preference if user hasn't explicitly set a theme
+      const stored = localStorage.getItem(THEME_KEY);
+      if (!stored) {
+        const newTheme = e.matches ? 'dark' : 'light';
+        themeStore.set(newTheme);
+        applyTheme(newTheme);
+      }
+    });
+  }
+  // Listen for storage events (cross-tab sync)
+  window.addEventListener('storage', (e) => {
+    if (e.key === THEME_KEY) {
+      initStore();
+    }
+  });
+  // Listen for custom events (same-tab sync between instances)
+  window.addEventListener('theme-updated', () => {
+    initStore();
+  });
+}
+export const setTheme = (theme: Theme) => {
+  themeStore.set(theme);
+  applyTheme(theme);
+  if (typeof window !== 'undefined') {
+    try {
+      localStorage.setItem(THEME_KEY, theme);
+      // Dispatch event to notify other store instances/components
+      window.dispatchEvent(new CustomEvent('theme-updated'));
+    } catch (e) {
+      console.warn('Failed to save theme:', e);
+    }
+  }
+};
+export const toggleTheme = () => {
+  const current = themeStore.get();
+  setTheme(current === 'light' ? 'dark' : 'light');
+};

package/eventcatalog/src/styles/theme.css ADDED Viewed

@@ -0,0 +1,255 @@
+/**
+ * EventCatalog Theme CSS Variables
+ *
+ * Override these variables in your eventcatalog.styles.css file to customize the theme.
+ * Example:
+ *   :root[data-theme="light"] {
+ *     --ec-header-bg: #1e293b;
+ *     --ec-primary: #3b82f6;
+ *   }
+ *
+ * Supported themes: light, dark (more can be added)
+ */
+/* Default/Light theme */
+:root,
+:root[data-theme="light"] {
+  /* Header */
+  --ec-header-bg: 255 255 255; /* #ffffff */
+  --ec-header-text: 15 23 42; /* #0f172a (slate-900) */
+  --ec-header-border: 226 232 240; /* #e2e8f0 (slate-200) */
+  /* Primary brand color */
+  --ec-primary: 168 85 247; /* #a855f7 */
+  --ec-primary-hover: 147 51 234; /* #9333ea */
+  /* Accent colors - used for selections, highlights, interactive elements */
+  --ec-accent: 168 85 247; /* #a855f7 (purple-500) */
+  --ec-accent-hover: 147 51 234; /* #9333ea (purple-600) */
+  --ec-accent-subtle: 243 232 255; /* #f3e8ff (purple-100) */
+  --ec-accent-text: 107 33 168; /* #6b21a8 (purple-800) */
+  --ec-accent-gradient-from: 168 85 247; /* #a855f7 (purple-500) */
+  --ec-accent-gradient-to: 126 34 206; /* #7e22ce (purple-700) */
+  /* Buttons */
+  --ec-button-bg: 15 23 42; /* #0f172a */
+  --ec-button-bg-hover: 30 41 59; /* #1e293b */
+  --ec-button-text: 255 255 255; /* #ffffff */
+  /* Dropdowns & menus */
+  --ec-dropdown-bg: 255 255 255; /* #ffffff */
+  --ec-dropdown-text: 51 65 85; /* #334155 (slate-700) */
+  --ec-dropdown-hover: 248 250 252; /* #f8fafc (slate-50) */
+  --ec-dropdown-border: 226 232 240; /* #e2e8f0 (slate-200) */
+  /* Icons */
+  --ec-icon-color: 100 116 139; /* #64748b (slate-500) */
+  --ec-icon-hover: 51 65 85; /* #334155 (slate-700) */
+  /* Sidebar / Vertical Nav (icon bar) */
+  --ec-sidebar-bg: 255 255 255; /* #ffffff */
+  --ec-sidebar-bg-gradient: 248 250 252; /* #f8fafc (slate-50) */
+  --ec-sidebar-border: 226 232 240; /* #e2e8f0 (slate-200) */
+  --ec-sidebar-text: 71 85 105; /* #475569 (slate-600) */
+  --ec-sidebar-active-bg: 15 23 42; /* #0f172a */
+  --ec-sidebar-active-text: 255 255 255; /* #ffffff */
+  --ec-sidebar-hover-bg: 15 23 42; /* #0f172a - black on hover like active */
+  /* Nested sidebar content */
+  --ec-content-bg: 255 255 255; /* #ffffff */
+  --ec-content-text: 15 23 42; /* #0f172a (slate-900) */
+  --ec-content-text-muted: 100 116 139; /* #64748b (slate-500) */
+  --ec-content-text-secondary: 71 85 105; /* #475569 (slate-600) */
+  --ec-content-border: 226 232 240; /* #e2e8f0 (slate-200) */
+  --ec-content-hover: 248 250 252; /* #f8fafc (slate-50) */
+  --ec-content-active: 245 243 255; /* #f5f3ff (violet-50) */
+  /* Input fields */
+  --ec-input-bg: 248 250 252; /* #f8fafc (slate-50) */
+  --ec-input-border: 226 232 240; /* #e2e8f0 (slate-200) */
+  --ec-input-text: 15 23 42; /* #0f172a */
+  --ec-input-placeholder: 148 163 184; /* #94a3b8 (slate-400) */
+  /* Group headers */
+  --ec-group-icon-bg: 241 245 249; /* #f1f5f9 (slate-100) */
+  --ec-group-icon-text: 71 85 105; /* #475569 (slate-600) */
+  /* Main content/docs area */
+  --ec-page-bg: 255 255 255; /* #ffffff */
+  --ec-page-text: 15 23 42; /* #0f172a */
+  --ec-page-text-muted: 100 116 139; /* #64748b */
+  --ec-page-border: 226 232 240; /* #e2e8f0 */
+  /* Card/elevated surfaces */
+  --ec-card-bg: 255 255 255; /* #ffffff */
+  /* Code blocks */
+  --ec-code-bg: 250 250 250; /* #fafafa - light for light mode */
+  /* Badge colors - light mode */
+  --ec-badge-domain-bg: 254 249 195; /* yellow-100 */
+  --ec-badge-domain-text: 161 98 7; /* yellow-700 */
+  --ec-badge-service-bg: 252 231 243; /* pink-100 */
+  --ec-badge-service-text: 190 24 93; /* pink-700 */
+  --ec-badge-event-bg: 254 243 199; /* amber-100 */
+  --ec-badge-event-text: 180 83 9; /* amber-700 */
+  --ec-badge-command-bg: 252 231 243; /* pink-100 */
+  --ec-badge-command-text: 190 24 93; /* pink-700 */
+  --ec-badge-query-bg: 243 232 255; /* purple-100 */
+  --ec-badge-query-text: 126 34 206; /* purple-700 */
+  --ec-badge-message-bg: 224 231 255; /* indigo-100 */
+  --ec-badge-message-text: 67 56 202; /* indigo-700 */
+  --ec-badge-design-bg: 204 251 241; /* teal-100 */
+  --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-default-bg: 243 244 246; /* gray-100 */
+  --ec-badge-default-text: 75 85 99; /* gray-600 */
+}
+/* Dark theme */
+:root[data-theme="dark"] {
+  /*
+   * Modern dark theme inspired by Mintlify
+   * Uses deep blacks with subtle cool undertones for a refined look
+   */
+  /* Header - deep black with cool border */
+  --ec-header-bg: 13 17 23; /* #0d1117 - GitHub dark bg */
+  --ec-header-text: 240 246 252; /* #f0f6fc - soft white */
+  --ec-header-border: 33 38 45; /* #21262d - subtle border */
+  /* Accent colors - used for selections, highlights, interactive elements */
+  --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: 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 */
+  --ec-button-bg-hover: 168 85 247; /* #a855f7 - purple-500 */
+  --ec-button-text: 255 255 255; /* #ffffff - white text */
+  /* Dropdowns & menus - elevated surface */
+  --ec-dropdown-bg: 22 27 34; /* #161b22 - slightly elevated */
+  --ec-dropdown-text: 201 209 217; /* #c9d1d9 */
+  --ec-dropdown-hover: 33 38 45; /* #21262d */
+  --ec-dropdown-border: 48 54 61; /* #30363d */
+  /* Icons - muted gray that pops on hover */
+  --ec-icon-color: 139 148 158; /* #8b949e */
+  --ec-icon-hover: 240 246 252; /* #f0f6fc */
+  /* Sidebar / Vertical Nav (icon bar) - darkest surface */
+  --ec-sidebar-bg: 13 17 23; /* #0d1117 */
+  --ec-sidebar-bg-gradient: 22 27 34; /* #161b22 */
+  --ec-sidebar-border: 33 38 45; /* #21262d */
+  --ec-sidebar-text: 139 148 158; /* #8b949e */
+  --ec-sidebar-active-bg: 48 54 61; /* #30363d - subtle highlight */
+  --ec-sidebar-active-text: 240 246 252; /* #f0f6fc */
+  --ec-sidebar-hover-bg: 33 38 45; /* #21262d */
+  /* Nested sidebar content */
+  --ec-content-bg: 13 17 23; /* #0d1117 */
+  --ec-content-text: 201 209 217; /* #c9d1d9 - softer than pure white */
+  --ec-content-text-muted: 139 148 158; /* #8b949e */
+  --ec-content-text-secondary: 139 148 158; /* #8b949e - muted for sidebar children */
+  --ec-content-border: 33 38 45; /* #21262d */
+  --ec-content-hover: 22 27 34; /* #161b22 */
+  --ec-content-active: 33 38 45; /* #21262d */
+  /* Input fields - subtle inset look */
+  --ec-input-bg: 13 17 23; /* #0d1117 */
+  --ec-input-border: 48 54 61; /* #30363d */
+  --ec-input-text: 240 246 252; /* #f0f6fc */
+  --ec-input-placeholder: 110 118 129; /* #6e7681 */
+  /* Group headers */
+  --ec-group-icon-bg: 33 38 45; /* #21262d */
+  --ec-group-icon-text: 201 209 217; /* #c9d1d9 */
+  /* Main content/docs area - base dark surface */
+  --ec-page-bg: 13 17 23; /* #0d1117 */
+  --ec-page-text: 240 246 252; /* #f0f6fc */
+  --ec-page-text-muted: 139 148 158; /* #8b949e */
+  --ec-page-border: 33 38 45; /* #21262d */
+  /* Card/elevated surfaces - for depth */
+  --ec-card-bg: 22 27 34; /* #161b22 */
+  /* Code blocks */
+  --ec-code-bg: 22 27 34; /* #161b22 - elevated dark surface */
+  /* Badge colors - dark mode (subtle with good contrast) */
+  --ec-badge-domain-bg: 113 63 18 / 0.3; /* yellow-900/30 */
+  --ec-badge-domain-text: 253 224 71; /* yellow-300 */
+  --ec-badge-service-bg: 131 24 67 / 0.3; /* pink-900/30 */
+  --ec-badge-service-text: 249 168 212; /* pink-300 */
+  --ec-badge-event-bg: 120 53 15 / 0.3; /* amber-900/30 */
+  --ec-badge-event-text: 252 211 77; /* amber-300 */
+  --ec-badge-command-bg: 131 24 67 / 0.3; /* pink-900/30 */
+  --ec-badge-command-text: 249 168 212; /* pink-300 */
+  --ec-badge-query-bg: 88 28 135 / 0.3; /* purple-900/30 */
+  --ec-badge-query-text: 216 180 254; /* purple-300 */
+  --ec-badge-message-bg: 49 46 129 / 0.3; /* indigo-900/30 */
+  --ec-badge-message-text: 165 180 252; /* indigo-300 */
+  --ec-badge-design-bg: 17 94 89 / 0.3; /* teal-900/30 */
+  --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-default-bg: 63 63 70 / 0.3; /* zinc-700/30 */
+  --ec-badge-default-text: 212 212 216; /* zinc-300 */
+}
+/* Dark mode prose overrides for documentation content */
+: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 */
+  --tw-prose-links: rgb(168 85 247); /* purple-500 */
+  --tw-prose-bold: rgb(201 209 217); /* #c9d1d9 */
+  --tw-prose-counters: rgb(110 118 129); /* #6e7681 */
+  --tw-prose-bullets: rgb(72 79 88); /* #484f58 */
+  --tw-prose-hr: rgb(33 38 45); /* #21262d */
+  --tw-prose-quotes: rgb(201 209 217); /* #c9d1d9 */
+  --tw-prose-quote-borders: rgb(48 54 61); /* #30363d */
+  --tw-prose-captions: rgb(110 118 129); /* #6e7681 */
+  --tw-prose-code: rgb(201 209 217); /* #c9d1d9 */
+  --tw-prose-pre-code: rgb(139 148 158); /* #8b949e */
+  --tw-prose-pre-bg: rgb(22 27 34); /* #161b22 */
+  --tw-prose-th-borders: rgb(48 54 61); /* #30363d */
+  --tw-prose-td-borders: rgb(33 38 45); /* #21262d */
+}
+: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 {
+  background-color: rgb(22 27 34); /* #161b22 */
+  border: 1px solid rgb(33 38 45); /* #21262d */
+}
+:root[data-theme="dark"] .prose a {
+  color: rgb(168 85 247); /* purple-500 */
+}
+:root[data-theme="dark"] .prose a:hover {
+  color: rgb(192 132 252); /* purple-400 */
+}
+:root[data-theme="dark"] .prose strong {
+  color: rgb(240 246 252); /* #f0f6fc */
+}
+:root[data-theme="dark"] .prose table th {
+  color: rgb(240 246 252); /* #f0f6fc */
+}
+:root[data-theme="dark"] .prose table td {
+  border-color: rgb(33 38 45); /* #21262d */
+}