@eventcatalog/core 3.0.0 → 3.2.0

package/eventcatalog/src/layouts/DiscoverLayout.astro

@@ -107,10 +107,10 @@ const tabs = [
 ---
 
 <VerticalSideBarLayout title={`Explore | ${title}`} showNestedSideBar={false}>
-  <main class="ml-0">
+  <main class="ml-0 bg-[rgb(var(--ec-page-bg))] min-h-content">
     <div id="discover-collection-tabs">
       <div class="hidden sm:block">
-        <div class="border-b border-gray-200">
+        <div class="border-b border-[rgb(var(--ec-page-border))]">
           <nav class="flex space-x-8 -mb-0.5 pl-6" aria-label="Tabs">
             {
               tabs
@@ -118,11 +118,16 @@ const tabs = [
                 .map((tab) => (
                   <a
                     href={tab.href}
-                    class={` text-black  group inline-flex items-center py-4 px-1 text-sm font-light ${tab.isActive ? `border-${tab.activeColor}-500 border-b-[2px] text-${tab.activeColor}-500` : 'opacity-80'} ${!tab.enabled ? 'disabled' : ''}`}
+                    class:list={[
+                      'group inline-flex items-center py-4 px-1 text-sm font-light text-[rgb(var(--ec-page-text))]',
+                      tab.isActive && 'border-b-[2px] border-[rgb(var(--ec-accent))] text-[rgb(var(--ec-accent))]',
+                      !tab.isActive && 'opacity-70 hover:opacity-100',
+                      !tab.enabled && 'disabled',
+                    ]}
                     aria-current="page"
                   >
                     <tab.icon
-                      className={`w-6 h-6 -ml-0.5 mr-2  ${tab.isActive ? `text-${tab.activeColor}-500` : 'text-gray-500'}`}
+                      className={`w-6 h-6 -ml-0.5 mr-2 ${tab.isActive ? 'text-[rgb(var(--ec-accent))]' : 'text-[rgb(var(--ec-icon-color))]'}`}
                     />
                     <span>{tab.label}</span>
                   </a>
@@ -138,14 +143,14 @@ const tabs = [
       <div>
         <div class="sm:flex sm:items-end py-4 pb-4" id="discover-title">
           <div class="sm:flex-auto space-y-2">
-            <h1 class="text-4xl font-semibold text-gray-900 capitalize">{title}</h1>
-            <p class="text-md text-gray-700">{subtitle}</p>
+            <h1 class="text-4xl font-semibold text-[rgb(var(--ec-page-text))] capitalize">{title}</h1>
+            <p class="text-md text-[rgb(var(--ec-page-text-muted))]">{subtitle}</p>
           </div>
           <div class="flex gap-4">
-            <div class="p-4 border border-gray-200 rounded-md">
+            <div class="p-4 border border-[rgb(var(--ec-page-border))] rounded-md bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
               <Checkbox id={checkboxLatestId} name={checkboxLatestId} label="Show latest version only" checked />
             </div>
-            <div class="p-4 border border-gray-200 rounded-md">
+            <div class="p-4 border border-[rgb(var(--ec-page-border))] rounded-md bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
               <Checkbox id={checkboxDraftsId} name={checkboxDraftsId} label="Show drafts only" />
             </div>
           </div>

package/eventcatalog/src/layouts/Footer.astro

@@ -4,14 +4,14 @@ import { showEventCatalogBranding } from '@utils/feature';
 const { className } = Astro.props;
 ---
 
-<footer class={`relative py-4 space-y-8 border-t border-gray-300 ${className}`}>
+<footer class={`relative py-4 space-y-8 border-t border-[rgb(var(--ec-page-border))] ${className}`}>
   {
     showEventCatalogBranding() && (
-      <div class="flex justify-between items-center py-8 text-gray-500 text-sm font-light">
+      <div class="flex justify-between items-center py-8 text-[rgb(var(--ec-page-text-muted))] text-sm font-light">
         <div class="flex space-x-5">
           <a href="https://github.com/event-catalog/eventcatalog" target="_blank" aria-label="View EventCatalog on GitHub">
             <svg
-              class="w-5 h-5 bg-gray-400 hover:bg-primary dark:hover:bg-gray-400"
+              class="w-5 h-5 bg-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-accent))]"
               style={`mask-image: url("${buildUrl('/icons/github.svg', true)}"); mask-repeat: no-repeat; mask-position: center center;`}
               aria-hidden="true"
             />
@@ -19,7 +19,7 @@ const { className } = Astro.props;
           <a href="https://x.com/event_catalog" target="_blank" aria-label="Follow EventCatalog on X (Twitter)">
             <span class="sr-only">X (Twitter)</span>
             <svg
-              class="w-5 h-5 bg-gray-400 hover:bg-primary dark:hover:bg-gray-400"
+              class="w-5 h-5 bg-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-accent))]"
               style={`mask-image: url("${buildUrl('/icons/x-twitter.svg', true)}"); mask-repeat: no-repeat; mask-position: center center;`}
               aria-hidden="true"
             />
@@ -27,7 +27,7 @@ const { className } = Astro.props;
           <a href="https://www.youtube.com/@event-catalog" target="_blank" aria-label="Watch EventCatalog on YouTube">
             <span class="sr-only">YouTube</span>
             <svg
-              class="w-5 h-5 bg-gray-400 hover:bg-primary dark:hover:bg-gray-400"
+              class="w-5 h-5 bg-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-accent))]"
               style={`mask-image: url("${buildUrl('/icons/youtube.svg', true)}"); mask-repeat: no-repeat; mask-position: center center;`}
               aria-hidden="true"
             />
@@ -35,7 +35,7 @@ const { className } = Astro.props;
         </div>
         <a
           target="_blank"
-          class="hover:text-primary hover:underline text-gray-400 font-light not-prose"
+          class="hover:text-[rgb(var(--ec-accent))] hover:underline text-[rgb(var(--ec-icon-color))] font-light not-prose"
           href="https://eventcatalog.dev"
         >
           Powered by EventCatalog

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -27,6 +27,18 @@ import '@fontsource/inter';
 import '@fontsource/inter/400.css'; // Specify weight
 import '@fontsource/inter/700.css'; // Specify weight
 
+// Theme CSS variables (must load before user styles)
+import '../styles/theme.css';
+
+// Theme files - imported so they're available, applied via data-catalog-theme attribute
+import '../styles/themes/ocean.css';
+import '../styles/themes/sapphire.css';
+import '../styles/themes/sunset.css';
+import '../styles/themes/forest.css';
+
+// Get configured theme (default, ocean, etc.)
+const catalogTheme = config.theme || 'default';
+
 import { ClientRouter } from 'astro:transitions';
 
 import { getCommands } from '@utils/collections/commands';
@@ -39,7 +51,7 @@ import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/collections/queries';
 import { hasLandingPageForDocs } from '@utils/pages';
 
-import { isEventCatalogUpgradeEnabled, isEmbedEnabled } from '@utils/feature';
+import { isEventCatalogUpgradeEnabled, isEmbedEnabled, isCustomStylesEnabled } from '@utils/feature';
 
 const catalogHasDefaultLandingPageForDocs = await hasLandingPageForDocs();
 const customDocs = await getCollection('customPages');
@@ -63,9 +75,11 @@ if (!catalogHasDefaultLandingPageForDocs) {
 }
 
 // Try and load any custom styles if they exist
-try {
-  await import('../../eventcatalog.styles.css');
-} catch (error) {}
+if (isCustomStylesEnabled()) {
+  try {
+    await import('../../eventcatalog.styles.css');
+  } catch (error) {}
+}
 
 const currentPath = Astro.url.pathname;
 
@@ -173,8 +187,35 @@ const canPageBeEmbedded = isEmbedEnabled();
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" data-catalog-theme={catalogTheme}>
   <head>
+    <!-- Inline script to prevent flash of wrong theme -->
+    <script is:inline define:vars={{ catalogTheme }}>
+      (function () {
+        function getSystemTheme() {
+          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+          }
+          return 'light';
+        }
+
+        function applyTheme() {
+          // Check localStorage first, fall back to system preference
+          const stored = localStorage.getItem('eventcatalog-theme');
+          const theme = stored === 'light' || stored === 'dark' ? stored : getSystemTheme();
+          document.documentElement.setAttribute('data-theme', theme);
+          // Also ensure catalog theme is set (for page transitions)
+          document.documentElement.setAttribute('data-catalog-theme', catalogTheme);
+        }
+
+        // Apply on initial load
+        applyTheme();
+
+        // Apply after Astro page transitions
+        document.addEventListener('astro:after-swap', applyTheme);
+        document.addEventListener('astro:page-load', applyTheme);
+      })();
+    </script>
     <SEO title={`EventCatalog | ${title}`} description={description} ogTitle={title} />
     <style is:global>
       .sidebar-transition {
@@ -233,7 +274,7 @@ const canPageBeEmbedded = isEmbedEnabled();
       <div class="flex">
         <aside class="flex" id="eventcatalog-vertical-nav">
           <div
-            class="fixed flex flex-col items-center w-14 h-screen py-3 bg-white bg-gradient-to-b from-white to-gray-100 border-r border-gray-200 z-20 shadow-md justify-between"
+            class="fixed flex flex-col items-center w-14 h-screen py-3 bg-[rgb(var(--ec-sidebar-bg))] bg-gradient-to-b from-[rgb(var(--ec-sidebar-bg))] to-[rgb(var(--ec-sidebar-bg-gradient))] border-r border-[rgb(var(--ec-sidebar-border))] z-20 shadow-md justify-between"
           >
             <nav class="flex flex-col h-[calc(100vh-70px)] justify-between">
               <div class="flex flex-col items-center flex-1 space-y-6">
@@ -246,7 +287,9 @@ const canPageBeEmbedded = isEmbedEnabled();
                         href={item.href}
                         aria-label={item.label}
                         class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${
-                          item.current ? 'text-white bg-gray-900' : 'hover:bg-gray-800 hover:text-white text-gray-700'
+                          item.current
+                            ? 'text-[rgb(var(--ec-sidebar-active-text))] bg-[rgb(var(--ec-sidebar-active-bg))]'
+                            : 'hover:bg-[rgb(var(--ec-sidebar-hover-bg))] hover:text-[rgb(var(--ec-sidebar-active-text))] text-[rgb(var(--ec-sidebar-text))]'
                         }`}
                       >
                         <div class="has-tooltip">
@@ -263,7 +306,7 @@ const canPageBeEmbedded = isEmbedEnabled();
                   })
                 }
 
-                <hr class="w-8 border-t border-gray-200" />
+                <hr class="w-8 border-t border-[rgb(var(--ec-sidebar-border))]" />
 
                 {
                   studioNavigationItem.length > 0 && (
@@ -272,7 +315,7 @@ const canPageBeEmbedded = isEmbedEnabled();
                       data-role="nav-item"
                       href={studioNavigationItem[0].href}
                       aria-label={studioNavigationItem[0].label}
-                      class={`p-1.5 inline-block pt-1 pb-1 mt-0 mb-0 transition-colors duration-200 rounded-lg relative ${studioNavigationItem[0].current ? 'text-white bg-gray-900' : 'hover:bg-gray-800 hover:text-white text-gray-700'}`}
+                      class={`p-1.5 inline-block pt-1 pb-1 mt-0 mb-0 transition-colors duration-200 rounded-lg relative ${studioNavigationItem[0].current ? 'text-[rgb(var(--ec-sidebar-active-text))] bg-[rgb(var(--ec-sidebar-active-bg))]' : 'hover:bg-[rgb(var(--ec-sidebar-hover-bg))] hover:text-[rgb(var(--ec-sidebar-active-text))] text-[rgb(var(--ec-sidebar-text))]'}`}
                     >
                       <div class="has-tooltip">
                         <span
@@ -287,7 +330,7 @@ const canPageBeEmbedded = isEmbedEnabled();
                   )
                 }
 
-                {studioNavigationItem.length > 0 && <hr class="w-8 border-t border-gray-200" />}
+                {studioNavigationItem.length > 0 && <hr class="w-8 border-t border-[rgb(var(--ec-sidebar-border))]" />}
 
                 {
                   premiumFeatures.map((item) => (
@@ -297,7 +340,9 @@ const canPageBeEmbedded = isEmbedEnabled();
                       href={item.href}
                       aria-label={item.label}
                       class={`p-1.5 inline-block transition-colors duration-200 rounded-lg mb-8 relative ${
-                        item.current ? 'text-white bg-gray-900' : 'hover:bg-gray-800 hover:text-white text-gray-700'
+                        item.current
+                          ? 'text-[rgb(var(--ec-sidebar-active-text))] bg-[rgb(var(--ec-sidebar-active-bg))]'
+                          : 'hover:bg-[rgb(var(--ec-sidebar-hover-bg))] hover:text-[rgb(var(--ec-sidebar-active-text))] text-[rgb(var(--ec-sidebar-text))]'
                       }`}
                     >
                       <div class="has-tooltip">
@@ -328,7 +373,7 @@ const canPageBeEmbedded = isEmbedEnabled();
                       data-role="nav-item"
                       href={buildUrl('/plans')}
                       aria-label="Upgrade EventCatalog"
-                      class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${currentPath.includes('/pro') ? 'text-white bg-gray-900' : 'bg-gray-200 hover:bg-gray-800 hover:text-white text-gray-700'}`}
+                      class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${currentPath.includes('/pro') ? 'text-[rgb(var(--ec-sidebar-active-text))] bg-[rgb(var(--ec-sidebar-active-bg))]' : 'bg-[rgb(var(--ec-sidebar-bg-gradient))] hover:bg-[rgb(var(--ec-sidebar-hover-bg))] hover:text-[rgb(var(--ec-sidebar-active-text))] text-[rgb(var(--ec-sidebar-text))]'}`}
                     >
                       <div class="has-tooltip">
                         <span
@@ -348,12 +393,15 @@ const canPageBeEmbedded = isEmbedEnabled();
 
           {
             showNestedSideBar && (
-              <SideNav id="sidebar" class={`sidebar-transition h-content bg-white  border-r border-gray-100 w-[320px] ml-14`} />
+              <SideNav
+                id="sidebar"
+                class={`sidebar-transition h-content bg-[rgb(var(--ec-sidebar-bg))] border-r border-[rgb(var(--ec-sidebar-border))] w-[320px] ml-14`}
+              />
             )
           }
         </aside>
         <main
-          class={`sidebar-transition w-full max-h-content overflow-y-auto ${showNestedSideBar ? 'ml-0' : 'ml-14'}`}
+          class={`sidebar-transition w-full max-h-content overflow-y-auto bg-[rgb(var(--ec-page-bg))] ${showNestedSideBar ? 'ml-0' : 'ml-14'}`}
           id="content"
         >
           <slot />