@eventcatalog/core 3.29.2 → 3.31.1

package/eventcatalog/src/styles/theme.css

@@ -17,19 +17,19 @@
   /* 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) */
+  --ec-header-border: 229 229 229; /* #e5e5e5 (neutral-200) */
 
   /* Primary brand color */
-  --ec-primary: 168 85 247; /* #a855f7 */
-  --ec-primary-hover: 147 51 234; /* #9333ea */
+  --ec-primary: 126 34 206; /* #7e22ce (purple-700) */
+  --ec-primary-hover: 107 33 168; /* #6b21a8 (purple-800) */
 
   /* 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) */
+  --ec-accent: 126 34 206; /* #7e22ce (purple-700) */
+  --ec-accent-hover: 107 33 168; /* #6b21a8 (purple-800) */
+  --ec-accent-subtle: 233 213 255; /* #e9d5ff (purple-200) */
+  --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) */
 
   /* Buttons */
   --ec-button-bg: 15 23 42; /* #0f172a */
@@ -49,18 +49,23 @@
   /* 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-border: 229 229 229; /* #e5e5e5 (neutral-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 */
 
+  /* Rail / inset-panel surface (5% off the sidebar bg). Use for navigation rails,
+     filter panels, and any inset surface that should sit slightly off the page. */
+  --ec-rail-bg: 250 250 250; /* #fafafa - 2% darker than white */
+  --ec-rail-active-bg: 218 218 218; /* ~10% darker than rail bg */
+
   /* 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-border: 229 229 229; /* #e5e5e5 (neutral-200) */
   --ec-content-hover: 248 250 252; /* #f8fafc (slate-50) */
   --ec-content-active: 245 243 255; /* #f5f3ff (violet-50) */
 
@@ -71,14 +76,14 @@
   --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) */
+  --ec-group-icon-bg: 233 213 255; /* #e9d5ff (purple-200) */
+  --ec-group-icon-text: 88 28 135; /* #581c87 (purple-900) */
 
   /* 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 */
+  --ec-page-border: 229 229 229; /* #e5e5e5 (neutral-200) */
 
   /* Card/elevated surfaces */
   --ec-card-bg: 255 255 255; /* #ffffff */
@@ -117,17 +122,21 @@
    */
 
   /* Header - deep black with cool border */
-  --ec-header-bg: 13 17 23; /* #0d1117 - GitHub dark bg */
+  --ec-header-bg: 9 13 13; /* #090d0d */
   --ec-header-text: 240 246 252; /* #f0f6fc - soft white */
-  --ec-header-border: 33 38 45; /* #21262d - subtle border */
+  --ec-header-border: 38 41 47; /* #26292f - lifted ~20% */
+
+  /* Primary brand color */
+  --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: 192 132 252; /* #c084fc (purple-400) */
-  --ec-accent-hover: 168 85 247; /* #a855f7 (purple-500) */
+  --ec-accent: 147 51 234; /* #9333ea (purple-600) */
+  --ec-accent-hover: 126 34 206; /* #7e22ce (purple-700) */
   --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) */
+  --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) */
 
   /* Buttons - accent color for better visibility */
   --ec-button-bg: 147 51 234; /* #9333ea - purple-600 */
@@ -144,21 +153,25 @@
   --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 */
+  /* Sidebar / Vertical Nav (icon bar) */
+  --ec-sidebar-bg: 9 13 13; /* #090d0d - matches page bg */
+  --ec-sidebar-bg-gradient: 9 13 13; /* #090d0d */
+  --ec-sidebar-border: 51 57 65; /* #333941 - lifted ~20% */
   --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 */
 
+  /* Rail / inset-panel surface (~2% lifted from the page bg) */
+  --ec-rail-bg: 15 19 19; /* ~2% lighter than #090d0d */
+  --ec-rail-active-bg: 35 38 38; /* ~10% lifted off rail bg */
+
   /* Nested sidebar content */
-  --ec-content-bg: 13 17 23; /* #0d1117 */
+  --ec-content-bg: 9 13 13; /* #090d0d - matches page bg */
   --ec-content-text: 201 209 217; /* #c9d1d9 - softer than pure white */
   --ec-content-text-muted: 139 148 158; /* #8b949e */
   --ec-content-text-secondary: 170 178 186; /* #aab2ba - sidebar children text */
-  --ec-content-border: 33 38 45; /* #21262d */
+  --ec-content-border: 51 57 65; /* #333941 - lifted ~20% */
   --ec-content-hover: 22 27 34; /* #161b22 */
   --ec-content-active: 33 38 45; /* #21262d */
 
@@ -170,13 +183,13 @@
 
   /* Group headers */
   --ec-group-icon-bg: 33 38 45; /* #21262d */
-  --ec-group-icon-text: 201 209 217; /* #c9d1d9 */
+  --ec-group-icon-text: 192 132 252; /* #c084fc (purple-400) */
 
   /* Main content/docs area - base dark surface */
-  --ec-page-bg: 13 17 23; /* #0d1117 */
+  --ec-page-bg: 9 13 13; /* #090d0d */
   --ec-page-text: 240 246 252; /* #f0f6fc */
   --ec-page-text-muted: 163 172 182; /* #a3acb6 */
-  --ec-page-border: 33 38 45; /* #21262d */
+  --ec-page-border: 38 41 47; /* #26292f - lifted ~20% */
 
   /* Card/elevated surfaces - for depth */
   --ec-card-bg: 22 27 34; /* #161b22 */
@@ -262,3 +275,55 @@
 :root[data-theme="dark"] .ec-themed-icon {
   filter: invert(1);
 }
+
+/*
+ * Expressive Code (code blocks) — match the EventCatalog editor look:
+ * single rounded container, generous padding, no scrollbar gutter when wrapping.
+ */
+.expressive-code {
+  margin: 1rem 0;
+  --ec-codeFontSize: 0.88em;
+}
+
+.expressive-code .frame {
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+.expressive-code .frame pre {
+  border: 1px solid rgb(var(--ec-page-border)) !important;
+  border-radius: 0.5rem !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  scrollbar-width: none !important;
+}
+
+.expressive-code .frame pre > code {
+  padding: 1rem 0 !important;
+  background: var(--code-background);
+}
+
+.expressive-code .frame pre::-webkit-scrollbar,
+.expressive-code .frame pre::-webkit-scrollbar-track,
+.expressive-code .frame pre::-webkit-scrollbar-thumb {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  background: transparent !important;
+}
+
+.expressive-code .frame .copy button {
+  border-radius: 0.375rem;
+}
+
+/* Hide the "Copied!" tooltip and instead swap the copy icon for a checkmark
+   while feedback is active. Reverts back to the copy icon automatically when
+   the feedback element is removed. */
+.expressive-code .frame .copy .feedback {
+  display: none !important;
+}
+
+.expressive-code .frame .copy:has(.feedback) button::after {
+  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
+  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
+}

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

@@ -11,7 +11,7 @@
   /* Header - clean white */
   --ec-header-bg: 255 255 255; /* #ffffff */
   --ec-header-text: 20 20 20; /* #141414 */
-  --ec-header-border: 229 231 235; /* #e5e7eb gray-200 */
+  --ec-header-border: 229 229 229; /* #e5e5e5 (neutral-200) */
 
   /* Primary brand color - deep forest green */
   --ec-primary: 22 101 52; /* #166534 green-800 */
@@ -34,7 +34,7 @@
   --ec-dropdown-bg: 255 255 255; /* #ffffff */
   --ec-dropdown-text: 55 65 81; /* #374151 gray-700 */
   --ec-dropdown-hover: 240 253 244; /* #f0fdf4 green-50 */
-  --ec-dropdown-border: 229 231 235; /* #e5e7eb gray-200 */
+  --ec-dropdown-border: 229 229 229; /* #e5e5e5 (neutral-200) */
 
   /* Icons */
   --ec-icon-color: 75 85 99; /* #4b5563 gray-600 */
@@ -43,18 +43,22 @@
   /* Sidebar / Vertical Nav */
   --ec-sidebar-bg: 255 255 255; /* #ffffff */
   --ec-sidebar-bg-gradient: 240 253 244; /* #f0fdf4 green-50 */
-  --ec-sidebar-border: 229 231 235; /* #e5e7eb gray-200 */
+  --ec-sidebar-border: 229 229 229; /* #e5e5e5 (neutral-200) */
   --ec-sidebar-text: 75 85 99; /* #4b5563 gray-600 */
   --ec-sidebar-active-bg: 22 101 52; /* #166534 green-800 */
   --ec-sidebar-active-text: 255 255 255; /* #ffffff */
   --ec-sidebar-hover-bg: 22 101 52; /* #166534 green-800 */
 
+  /* Rail / inset-panel surface (5% off the sidebar bg) */
+  --ec-rail-bg: 250 250 250; /* #fafafa - 2% darker than white */
+  --ec-rail-active-bg: 218 218 218; /* ~10% darker than rail bg */
+
   /* Nested sidebar content */
   --ec-content-bg: 255 255 255; /* #ffffff */
   --ec-content-text: 17 24 39; /* #111827 gray-900 */
   --ec-content-text-muted: 75 85 99; /* #4b5563 gray-600 */
   --ec-content-text-secondary: 107 114 128; /* #6b7280 gray-500 */
-  --ec-content-border: 229 231 235; /* #e5e7eb gray-200 */
+  --ec-content-border: 229 229 229; /* #e5e5e5 (neutral-200) */
   --ec-content-hover: 249 250 251; /* #f9fafb gray-50 */
   --ec-content-active: 220 252 231; /* #dcfce7 green-100 */
 
@@ -72,7 +76,7 @@
   --ec-page-bg: 255 255 255; /* #ffffff */
   --ec-page-text: 17 24 39; /* #111827 gray-900 */
   --ec-page-text-muted: 75 85 99; /* #4b5563 gray-600 */
-  --ec-page-border: 229 231 235; /* #e5e7eb gray-200 */
+  --ec-page-border: 229 229 229; /* #e5e5e5 (neutral-200) */
 
   /* Card/elevated surfaces */
   --ec-card-bg: 255 255 255; /* #ffffff */
@@ -108,7 +112,7 @@
   /* Header - deep forest dark */
   --ec-header-bg: 3 7 18; /* #030712 gray-950 */
   --ec-header-text: 243 244 246; /* #f3f4f6 gray-100 */
-  --ec-header-border: 17 24 39; /* #111827 gray-900 */
+  --ec-header-border: 31 41 55; /* #1f2937 gray-800 */
 
   /* Accent colors - muted forest green for dark */
   --ec-accent: 74 222 128; /* #4ade80 (green-400) */
@@ -136,18 +140,22 @@
   /* Sidebar / Vertical Nav */
   --ec-sidebar-bg: 3 7 18; /* #030712 gray-950 */
   --ec-sidebar-bg-gradient: 3 7 18; /* #030712 */
-  --ec-sidebar-border: 17 24 39; /* #111827 gray-900 */
+  --ec-sidebar-border: 31 41 55; /* #1f2937 gray-800 */
   --ec-sidebar-text: 156 163 175; /* #9ca3af */
   --ec-sidebar-active-bg: 22 101 52; /* #166534 green-800 */
   --ec-sidebar-active-text: 255 255 255; /* #ffffff */
   --ec-sidebar-hover-bg: 31 41 55; /* #1f2937 */
 
+  /* Rail / inset-panel surface (5% lifted from the sidebar bg) */
+  --ec-rail-bg: 8 12 23; /* ~2% lighter than #030712 */
+  --ec-rail-active-bg: 34 38 49; /* ~10% lifted off rail bg */
+
   /* Nested sidebar content */
   --ec-content-bg: 3 7 18; /* #030712 */
   --ec-content-text: 243 244 246; /* #f3f4f6 */
   --ec-content-text-muted: 156 163 175; /* #9ca3af */
   --ec-content-text-secondary: 156 163 175; /* #9ca3af */
-  --ec-content-border: 17 24 39; /* #111827 gray-900 */
+  --ec-content-border: 31 41 55; /* #1f2937 gray-800 */
   --ec-content-hover: 17 24 39; /* #111827 */
   --ec-content-active: 31 41 55; /* #1f2937 */
 
@@ -165,7 +173,7 @@
   --ec-page-bg: 3 7 18; /* #030712 */
   --ec-page-text: 243 244 246; /* #f3f4f6 */
   --ec-page-text-muted: 156 163 175; /* #9ca3af */
-  --ec-page-border: 17 24 39; /* #111827 gray-900 */
+  --ec-page-border: 31 41 55; /* #1f2937 gray-800 */
 
   /* Card/elevated surfaces */
   --ec-card-bg: 3 7 18; /* #030712 */

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

@@ -49,6 +49,10 @@
   --ec-sidebar-active-text: 255 255 255; /* #ffffff */
   --ec-sidebar-hover-bg: 13 148 136; /* #0d9488 teal-600 - same as active for consistency */
 
+  /* Rail / inset-panel surface (5% off the sidebar bg) */
+  --ec-rail-bg: 250 250 250; /* #fafafa - 2% darker than white */
+  --ec-rail-active-bg: 218 218 218; /* ~10% darker than rail bg */
+
   /* Nested sidebar content */
   --ec-content-bg: 255 255 255; /* #ffffff */
   --ec-content-text: 15 23 42; /* #0f172a */
@@ -110,8 +114,8 @@
    * Creates a seamless, immersive dark experience
    */
 
-  /* Header - slightly elevated from page for visual hierarchy */
-  --ec-header-bg: 15 23 42; /* #0f172a slate-900 - subtle lift */
+  /* 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 */
   --ec-header-border: 30 41 59; /* #1e293b */
 
@@ -147,6 +151,10 @@
   --ec-sidebar-active-text: 2 6 23; /* #020617 */
   --ec-sidebar-hover-bg: 30 41 59; /* #1e293b */
 
+  /* Rail / inset-panel surface (5% lifted from the sidebar bg) */
+  --ec-rail-bg: 7 11 28; /* ~2% lighter than #020617 */
+  --ec-rail-active-bg: 33 37 54; /* ~10% lifted off rail bg */
+
   /* Nested sidebar content - same as page bg */
   --ec-content-bg: 2 6 23; /* #020617 */
   --ec-content-text: 226 232 240; /* #e2e8f0 */

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

@@ -49,6 +49,10 @@
   --ec-sidebar-active-text: 255 255 255; /* #ffffff */
   --ec-sidebar-hover-bg: 37 99 235; /* #2563eb blue-600 */
 
+  /* Rail / inset-panel surface (5% off the sidebar bg) */
+  --ec-rail-bg: 250 250 250; /* #fafafa - 2% darker than white */
+  --ec-rail-active-bg: 218 218 218; /* ~10% darker than rail bg */
+
   /* Nested sidebar content */
   --ec-content-bg: 255 255 255; /* #ffffff */
   --ec-content-text: 15 23 42; /* #0f172a */
@@ -105,8 +109,8 @@
 
 /* Sapphire Dark Mode */
 :root[data-catalog-theme="sapphire"][data-theme="dark"] {
-  /* Header - slightly elevated for visual hierarchy */
-  --ec-header-bg: 15 23 42; /* #0f172a slate-900 */
+  /* 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 */
   --ec-header-border: 30 41 59; /* #1e293b slate-800 */
 
@@ -142,6 +146,10 @@
   --ec-sidebar-active-text: 255 255 255; /* #ffffff */
   --ec-sidebar-hover-bg: 30 41 59; /* #1e293b */
 
+  /* Rail / inset-panel surface (5% lifted from the sidebar bg) */
+  --ec-rail-bg: 7 11 28; /* ~2% lighter than #020617 */
+  --ec-rail-active-bg: 33 37 54; /* ~10% lifted off rail bg */
+
   /* Nested sidebar content */
   --ec-content-bg: 2 6 23; /* #020617 */
   --ec-content-text: 226 232 240; /* #e2e8f0 */

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

@@ -14,16 +14,16 @@
   --ec-header-border: 229 229 229; /* #e5e5e5 neutral-200 */
 
   /* Primary brand color - sunset orange */
-  --ec-primary: 249 115 22; /* #f97316 orange-500 */
-  --ec-primary-hover: 234 88 12; /* #ea580c orange-600 */
+  --ec-primary: 255 106 0; /* #ff6a00 vivid orange */
+  --ec-primary-hover: 232 93 0; /* #e85d00 deeper vivid orange */
 
   /* Accent colors - sunset orange */
-  --ec-accent: 249 115 22; /* #f97316 (orange-500) */
-  --ec-accent-hover: 234 88 12; /* #ea580c (orange-600) */
-  --ec-accent-subtle: 255 237 213; /* #ffedd5 (orange-100) */
-  --ec-accent-text: 154 52 18; /* #9a3412 (orange-800) */
-  --ec-accent-gradient-from: 249 115 22; /* #f97316 (orange-500) */
-  --ec-accent-gradient-to: 234 88 12; /* #ea580c (orange-600) */
+  --ec-accent: 255 106 0; /* #ff6a00 vivid orange */
+  --ec-accent-hover: 232 93 0; /* #e85d00 deeper vivid orange */
+  --ec-accent-subtle: 255 232 209; /* #ffe8d1 (subtle vivid orange) */
+  --ec-accent-text: 122 46 16; /* #7a2e10 burnt orange */
+  --ec-accent-gradient-from: 255 106 0; /* #ff6a00 */
+  --ec-accent-gradient-to: 232 93 0; /* #e85d00 */
 
   /* Buttons */
   --ec-button-bg: 234 88 12; /* #ea580c orange-600 */
@@ -49,6 +49,10 @@
   --ec-sidebar-active-text: 255 255 255; /* #ffffff */
   --ec-sidebar-hover-bg: 234 88 12; /* #ea580c orange-600 */
 
+  /* Rail / inset-panel surface (5% off the sidebar bg) */
+  --ec-rail-bg: 250 250 250; /* #fafafa - 2% darker than white */
+  --ec-rail-active-bg: 218 218 218; /* ~10% darker than rail bg */
+
   /* Nested sidebar content */
   --ec-content-bg: 255 255 255; /* #ffffff */
   --ec-content-text: 23 23 23; /* #171717 neutral-900 */
@@ -105,18 +109,18 @@
 
 /* Sunset Dark Mode */
 :root[data-catalog-theme="sunset"][data-theme="dark"] {
-  /* Header - warm dark */
-  --ec-header-bg: 23 23 23; /* #171717 neutral-900 */
+  /* Header - matches page bg for unified look */
+  --ec-header-bg: 10 10 10; /* #0a0a0a neutral-950 - matches page bg */
   --ec-header-text: 245 245 245; /* #f5f5f5 neutral-100 */
   --ec-header-border: 38 38 38; /* #262626 neutral-800 */
 
   /* Accent colors - sunset orange for dark */
-  --ec-accent: 251 146 60; /* #fb923c (orange-400) */
-  --ec-accent-hover: 249 115 22; /* #f97316 (orange-500) */
-  --ec-accent-subtle: 154 52 18 / 0.3; /* orange-800/30 */
-  --ec-accent-text: 253 186 116; /* #fdba74 (orange-300) */
-  --ec-accent-gradient-from: 251 146 60; /* #fb923c (orange-400) */
-  --ec-accent-gradient-to: 249 115 22; /* #f97316 (orange-500) */
+  --ec-accent: 255 138 61; /* #ff8a3d punchier vivid orange */
+  --ec-accent-hover: 255 106 0; /* #ff6a00 vivid orange */
+  --ec-accent-subtle: 122 46 16 / 0.3; /* burnt orange/30 */
+  --ec-accent-text: 255 119 51; /* #ff7733 deep vivid orange */
+  --ec-accent-gradient-from: 255 138 61; /* #ff8a3d */
+  --ec-accent-gradient-to: 255 106 0; /* #ff6a00 */
 
   /* Buttons */
   --ec-button-bg: 249 115 22; /* #f97316 orange-500 */
@@ -142,6 +146,10 @@
   --ec-sidebar-active-text: 255 255 255; /* #ffffff */
   --ec-sidebar-hover-bg: 38 38 38; /* #262626 */
 
+  /* Rail / inset-panel surface (5% lifted from the sidebar bg) */
+  --ec-rail-bg: 15 15 15; /* ~2% lighter than #0a0a0a */
+  --ec-rail-active-bg: 41 41 41; /* ~10% lifted off rail bg */
+
   /* Nested sidebar content */
   --ec-content-bg: 10 10 10; /* #0a0a0a */
   --ec-content-text: 245 245 245; /* #f5f5f5 */
@@ -159,7 +167,7 @@
 
   /* Group headers */
   --ec-group-icon-bg: 38 38 38; /* #262626 */
-  --ec-group-icon-text: 253 186 116; /* #fdba74 orange-300 */
+  --ec-group-icon-text: 255 119 51; /* #ff7733 deep vivid orange */
 
   /* Main content/docs area */
   --ec-page-bg: 10 10 10; /* #0a0a0a */

package/eventcatalog/src/types/react-syntax-highlighter.d.ts

@@ -1 +1,14 @@
+declare module 'react-syntax-highlighter' {
+  import type { ComponentType } from 'react';
+
+  export interface SyntaxHighlighterProps {
+    [key: string]: any;
+  }
+
+  export const Prism: ComponentType<SyntaxHighlighterProps>;
+  const SyntaxHighlighter: ComponentType<SyntaxHighlighterProps>;
+
+  export default SyntaxHighlighter;
+}
+
 declare module 'react-syntax-highlighter/dist/esm/styles/prism/material-light';

package/eventcatalog/src/utils/eventcatalog-config/config-schema.ts

@@ -0,0 +1,49 @@
+import { z } from 'zod';
+
+export const KNOWN_THEMES = ['default', 'ocean', 'sapphire', 'sunset', 'forest'] as const;
+export type KnownTheme = (typeof KNOWN_THEMES)[number];
+
+const optionalString = (max: number) =>
+  z
+    .string()
+    .max(max)
+    .optional()
+    .transform((v) => (v === undefined || v.trim() === '' ? undefined : v));
+
+const optionalUrl = z
+  .string()
+  .max(2048)
+  .optional()
+  .transform((v) => (v === undefined || v.trim() === '' ? undefined : v))
+  .refine((v) => v === undefined || /^https?:\/\//i.test(v), {
+    message: 'Must be a valid URL starting with http:// or https://',
+  });
+
+export const generalSettingsSchema = z.object({
+  title: z.string().min(1, 'Title is required').max(100),
+  tagline: optionalString(500),
+  organizationName: optionalString(100),
+  homepageLink: optionalUrl,
+  editUrl: optionalUrl,
+  repositoryUrl: optionalUrl,
+  logo: z
+    .object({
+      alt: optionalString(200),
+      text: optionalString(50),
+    })
+    .partial()
+    .optional(),
+  // Allow unknown current theme value (e.g., user hand-edited) so we don't clobber it.
+  theme: z.string().min(1).max(100),
+});
+
+export type GeneralSettings = z.infer<typeof generalSettingsSchema>;
+
+export const aiSettingsSchema = z.object({
+  llmsTxtEnabled: z.boolean(),
+  chatEnabled: z.boolean(),
+});
+
+export type AiSettings = z.infer<typeof aiSettingsSchema>;
+
+export const isKnownTheme = (value: string): value is KnownTheme => (KNOWN_THEMES as readonly string[]).includes(value);