@eventcatalog/core 3.0.0 → 3.2.0

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

@@ -0,0 +1,230 @@
+/**
+ * Sapphire Theme for EventCatalog
+ *
+ * A professional, premium theme inspired by sapphire gemstones.
+ * Deep blues with elegant accents for enterprise environments.
+ */
+
+/* Sapphire Light Mode */
+: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 */
+  --ec-header-border: 226 232 240; /* #e2e8f0 slate-200 */
+
+  /* Primary brand color - sapphire blue */
+  --ec-primary: 59 130 246; /* #3b82f6 blue-500 */
+  --ec-primary-hover: 37 99 235; /* #2563eb blue-600 */
+
+  /* Accent colors - sapphire blue */
+  --ec-accent: 59 130 246; /* #3b82f6 (blue-500) */
+  --ec-accent-hover: 37 99 235; /* #2563eb (blue-600) */
+  --ec-accent-subtle: 219 234 254; /* #dbeafe (blue-100) */
+  --ec-accent-text: 30 64 175; /* #1e40af (blue-800) */
+  --ec-accent-gradient-from: 59 130 246; /* #3b82f6 (blue-500) */
+  --ec-accent-gradient-to: 37 99 235; /* #2563eb (blue-600) */
+
+  /* Buttons */
+  --ec-button-bg: 37 99 235; /* #2563eb blue-600 */
+  --ec-button-bg-hover: 29 78 216; /* #1d4ed8 blue-700 */
+  --ec-button-text: 255 255 255; /* #ffffff */
+
+  /* Dropdowns & menus */
+  --ec-dropdown-bg: 255 255 255; /* #ffffff */
+  --ec-dropdown-text: 51 65 85; /* #334155 */
+  --ec-dropdown-hover: 239 246 255; /* #eff6ff blue-50 */
+  --ec-dropdown-border: 226 232 240; /* #e2e8f0 slate-200 */
+
+  /* Icons */
+  --ec-icon-color: 71 85 105; /* #475569 slate-600 */
+  --ec-icon-hover: 37 99 235; /* #2563eb blue-600 */
+
+  /* Sidebar / Vertical Nav */
+  --ec-sidebar-bg: 255 255 255; /* #ffffff */
+  --ec-sidebar-bg-gradient: 239 246 255; /* #eff6ff blue-50 */
+  --ec-sidebar-border: 226 232 240; /* #e2e8f0 slate-200 */
+  --ec-sidebar-text: 71 85 105; /* #475569 slate-600 */
+  --ec-sidebar-active-bg: 37 99 235; /* #2563eb blue-600 */
+  --ec-sidebar-active-text: 255 255 255; /* #ffffff */
+  --ec-sidebar-hover-bg: 37 99 235; /* #2563eb blue-600 */
+
+  /* Nested sidebar content */
+  --ec-content-bg: 255 255 255; /* #ffffff */
+  --ec-content-text: 15 23 42; /* #0f172a */
+  --ec-content-text-muted: 71 85 105; /* #475569 slate-600 */
+  --ec-content-text-secondary: 100 116 139; /* #64748b slate-500 */
+  --ec-content-border: 226 232 240; /* #e2e8f0 slate-200 */
+  --ec-content-hover: 248 250 252; /* #f8fafc slate-50 */
+  --ec-content-active: 219 234 254; /* #dbeafe blue-100 */
+
+  /* Input fields */
+  --ec-input-bg: 255 255 255; /* #ffffff */
+  --ec-input-border: 203 213 225; /* #cbd5e1 slate-300 */
+  --ec-input-text: 15 23 42; /* #0f172a */
+  --ec-input-placeholder: 148 163 184; /* #94a3b8 */
+
+  /* Group headers */
+  --ec-group-icon-bg: 219 234 254; /* #dbeafe blue-100 */
+  --ec-group-icon-text: 30 64 175; /* #1e40af blue-800 */
+
+  /* Main content/docs area */
+  --ec-page-bg: 255 255 255; /* #ffffff */
+  --ec-page-text: 15 23 42; /* #0f172a */
+  --ec-page-text-muted: 71 85 105; /* #475569 slate-600 */
+  --ec-page-border: 226 232 240; /* #e2e8f0 slate-200 */
+
+  /* Card/elevated surfaces */
+  --ec-card-bg: 255 255 255; /* #ffffff */
+
+  /* Code blocks */
+  --ec-code-bg: 250 250 250; /* #fafafa */
+
+  /* Badge colors - sapphire theme */
+  --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: 219 234 254; /* blue-100 */
+  --ec-badge-command-text: 30 64 175; /* blue-800 */
+  --ec-badge-query-bg: 207 250 254; /* cyan-100 */
+  --ec-badge-query-text: 21 94 117; /* cyan-800 */
+  --ec-badge-message-bg: 224 231 255; /* indigo-100 */
+  --ec-badge-message-text: 67 56 202; /* indigo-700 */
+  --ec-badge-design-bg: 219 234 254; /* blue-100 */
+  --ec-badge-design-text: 37 99 235; /* blue-600 */
+  --ec-badge-channel-bg: 224 231 255; /* indigo-100 */
+  --ec-badge-channel-text: 67 56 202; /* indigo-700 */
+  --ec-badge-default-bg: 239 246 255; /* blue-50 */
+  --ec-badge-default-text: 71 85 105; /* slate-600 */
+}
+
+/* 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 */
+  --ec-header-text: 226 232 240; /* #e2e8f0 */
+  --ec-header-border: 30 41 59; /* #1e293b slate-800 */
+
+  /* Accent colors - sapphire blue for dark */
+  --ec-accent: 96 165 250; /* #60a5fa (blue-400) */
+  --ec-accent-hover: 59 130 246; /* #3b82f6 (blue-500) */
+  --ec-accent-subtle: 30 64 175 / 0.3; /* blue-800/30 */
+  --ec-accent-text: 147 197 253; /* #93c5fd (blue-300) */
+  --ec-accent-gradient-from: 96 165 250; /* #60a5fa (blue-400) */
+  --ec-accent-gradient-to: 59 130 246; /* #3b82f6 (blue-500) */
+
+  /* Buttons */
+  --ec-button-bg: 59 130 246; /* #3b82f6 blue-500 */
+  --ec-button-bg-hover: 96 165 250; /* #60a5fa blue-400 */
+  --ec-button-text: 255 255 255; /* #ffffff */
+
+  /* Dropdowns & menus */
+  --ec-dropdown-bg: 15 23 42; /* #0f172a */
+  --ec-dropdown-text: 203 213 225; /* #cbd5e1 */
+  --ec-dropdown-hover: 30 41 59; /* #1e293b */
+  --ec-dropdown-border: 51 65 85; /* #334155 */
+
+  /* Icons */
+  --ec-icon-color: 148 163 184; /* #94a3b8 */
+  --ec-icon-hover: 147 197 253; /* #93c5fd blue-300 */
+
+  /* Sidebar / Vertical Nav */
+  --ec-sidebar-bg: 2 6 23; /* #020617 slate-950 */
+  --ec-sidebar-bg-gradient: 2 6 23; /* #020617 */
+  --ec-sidebar-border: 30 41 59; /* #1e293b */
+  --ec-sidebar-text: 148 163 184; /* #94a3b8 */
+  --ec-sidebar-active-bg: 59 130 246; /* #3b82f6 blue-500 */
+  --ec-sidebar-active-text: 255 255 255; /* #ffffff */
+  --ec-sidebar-hover-bg: 30 41 59; /* #1e293b */
+
+  /* Nested sidebar content */
+  --ec-content-bg: 2 6 23; /* #020617 */
+  --ec-content-text: 226 232 240; /* #e2e8f0 */
+  --ec-content-text-muted: 148 163 184; /* #94a3b8 */
+  --ec-content-text-secondary: 148 163 184; /* #94a3b8 */
+  --ec-content-border: 30 41 59; /* #1e293b */
+  --ec-content-hover: 15 23 42; /* #0f172a */
+  --ec-content-active: 30 41 59; /* #1e293b */
+
+  /* Input fields */
+  --ec-input-bg: 15 23 42; /* #0f172a */
+  --ec-input-border: 51 65 85; /* #334155 */
+  --ec-input-text: 226 232 240; /* #e2e8f0 */
+  --ec-input-placeholder: 100 116 139; /* #64748b */
+
+  /* Group headers */
+  --ec-group-icon-bg: 30 41 59; /* #1e293b */
+  --ec-group-icon-text: 147 197 253; /* #93c5fd blue-300 */
+
+  /* Main content/docs area */
+  --ec-page-bg: 2 6 23; /* #020617 */
+  --ec-page-text: 226 232 240; /* #e2e8f0 */
+  --ec-page-text-muted: 148 163 184; /* #94a3b8 */
+  --ec-page-border: 30 41 59; /* #1e293b */
+
+  /* Card/elevated surfaces */
+  --ec-card-bg: 2 6 23; /* #020617 */
+
+  /* Code blocks */
+  --ec-code-bg: 15 23 42; /* #0f172a */
+
+  /* Badge colors - sapphire dark */
+  --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: 30 64 175 / 0.3; /* blue-800/30 */
+  --ec-badge-command-text: 147 197 253; /* blue-300 */
+  --ec-badge-query-bg: 21 94 117 / 0.3; /* cyan-800/30 */
+  --ec-badge-query-text: 103 232 249; /* cyan-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: 30 64 175 / 0.3; /* blue-800/30 */
+  --ec-badge-design-text: 147 197 253; /* blue-300 */
+  --ec-badge-channel-bg: 49 46 129 / 0.3; /* indigo-900/30 */
+  --ec-badge-channel-text: 165 180 252; /* indigo-300 */
+  --ec-badge-default-bg: 51 65 85 / 0.3; /* slate-700/30 */
+  --ec-badge-default-text: 203 213 225; /* slate-300 */
+}
+
+/* Sapphire theme prose overrides */
+: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 */
+  --tw-prose-links: rgb(96 165 250); /* blue-400 */
+  --tw-prose-bold: rgb(226 232 240); /* slate-200 */
+  --tw-prose-counters: rgb(100 116 139); /* slate-500 */
+  --tw-prose-bullets: rgb(71 85 105); /* slate-600 */
+  --tw-prose-hr: rgb(30 41 59); /* slate-800 */
+  --tw-prose-quotes: rgb(226 232 240); /* slate-200 */
+  --tw-prose-quote-borders: rgb(51 65 85); /* slate-700 */
+  --tw-prose-captions: rgb(100 116 139); /* slate-500 */
+  --tw-prose-code: rgb(226 232 240); /* slate-200 */
+  --tw-prose-pre-code: rgb(148 163 184); /* slate-400 */
+  --tw-prose-pre-bg: rgb(15 23 42); /* slate-900 */
+  --tw-prose-th-borders: rgb(51 65 85); /* slate-700 */
+  --tw-prose-td-borders: rgb(30 41 59); /* slate-800 */
+}
+
+: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 {
+  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 {
+  color: rgb(96 165 250); /* blue-400 */
+}
+
+:root[data-catalog-theme="sapphire"][data-theme="dark"] .prose a:hover {
+  color: rgb(147 197 253); /* blue-300 */
+}

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

@@ -0,0 +1,230 @@
+/**
+ * Sunset Theme for EventCatalog
+ *
+ * A warm, inviting theme inspired by golden sunsets.
+ * Rich oranges and ambers with a cozy, energetic feel.
+ */
+
+/* Sunset Light Mode */
+:root[data-catalog-theme="sunset"],
+:root[data-catalog-theme="sunset"][data-theme="light"] {
+  /* Header - clean white */
+  --ec-header-bg: 255 255 255; /* #ffffff */
+  --ec-header-text: 23 23 23; /* #171717 neutral-900 */
+  --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 */
+
+  /* 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) */
+
+  /* Buttons */
+  --ec-button-bg: 234 88 12; /* #ea580c orange-600 */
+  --ec-button-bg-hover: 194 65 12; /* #c2410c orange-700 */
+  --ec-button-text: 255 255 255; /* #ffffff */
+
+  /* Dropdowns & menus */
+  --ec-dropdown-bg: 255 255 255; /* #ffffff */
+  --ec-dropdown-text: 64 64 64; /* #404040 neutral-700 */
+  --ec-dropdown-hover: 255 247 237; /* #fff7ed orange-50 */
+  --ec-dropdown-border: 229 229 229; /* #e5e5e5 neutral-200 */
+
+  /* Icons */
+  --ec-icon-color: 82 82 82; /* #525252 neutral-600 */
+  --ec-icon-hover: 234 88 12; /* #ea580c orange-600 */
+
+  /* Sidebar / Vertical Nav */
+  --ec-sidebar-bg: 255 255 255; /* #ffffff */
+  --ec-sidebar-bg-gradient: 255 247 237; /* #fff7ed orange-50 */
+  --ec-sidebar-border: 229 229 229; /* #e5e5e5 neutral-200 */
+  --ec-sidebar-text: 82 82 82; /* #525252 neutral-600 */
+  --ec-sidebar-active-bg: 234 88 12; /* #ea580c orange-600 */
+  --ec-sidebar-active-text: 255 255 255; /* #ffffff */
+  --ec-sidebar-hover-bg: 234 88 12; /* #ea580c orange-600 */
+
+  /* Nested sidebar content */
+  --ec-content-bg: 255 255 255; /* #ffffff */
+  --ec-content-text: 23 23 23; /* #171717 neutral-900 */
+  --ec-content-text-muted: 82 82 82; /* #525252 neutral-600 */
+  --ec-content-text-secondary: 115 115 115; /* #737373 neutral-500 */
+  --ec-content-border: 229 229 229; /* #e5e5e5 neutral-200 */
+  --ec-content-hover: 250 250 250; /* #fafafa neutral-50 */
+  --ec-content-active: 255 237 213; /* #ffedd5 orange-100 */
+
+  /* Input fields */
+  --ec-input-bg: 255 255 255; /* #ffffff */
+  --ec-input-border: 212 212 212; /* #d4d4d4 neutral-300 */
+  --ec-input-text: 23 23 23; /* #171717 neutral-900 */
+  --ec-input-placeholder: 163 163 163; /* #a3a3a3 neutral-400 */
+
+  /* Group headers */
+  --ec-group-icon-bg: 255 237 213; /* #ffedd5 orange-100 */
+  --ec-group-icon-text: 154 52 18; /* #9a3412 orange-800 */
+
+  /* Main content/docs area */
+  --ec-page-bg: 255 255 255; /* #ffffff */
+  --ec-page-text: 23 23 23; /* #171717 neutral-900 */
+  --ec-page-text-muted: 82 82 82; /* #525252 neutral-600 */
+  --ec-page-border: 229 229 229; /* #e5e5e5 neutral-200 */
+
+  /* Card/elevated surfaces */
+  --ec-card-bg: 255 255 255; /* #ffffff */
+
+  /* Code blocks */
+  --ec-code-bg: 250 250 250; /* #fafafa */
+
+  /* Badge colors - sunset theme */
+  --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: 255 237 213; /* orange-100 */
+  --ec-badge-event-text: 154 52 18; /* orange-800 */
+  --ec-badge-command-bg: 219 234 254; /* blue-100 */
+  --ec-badge-command-text: 30 64 175; /* blue-800 */
+  --ec-badge-query-bg: 207 250 254; /* cyan-100 */
+  --ec-badge-query-text: 21 94 117; /* cyan-800 */
+  --ec-badge-message-bg: 224 231 255; /* indigo-100 */
+  --ec-badge-message-text: 67 56 202; /* indigo-700 */
+  --ec-badge-design-bg: 255 237 213; /* orange-100 */
+  --ec-badge-design-text: 234 88 12; /* orange-600 */
+  --ec-badge-channel-bg: 224 231 255; /* indigo-100 */
+  --ec-badge-channel-text: 67 56 202; /* indigo-700 */
+  --ec-badge-default-bg: 255 247 237; /* orange-50 */
+  --ec-badge-default-text: 82 82 82; /* neutral-600 */
+}
+
+/* Sunset Dark Mode */
+:root[data-catalog-theme="sunset"][data-theme="dark"] {
+  /* Header - warm dark */
+  --ec-header-bg: 23 23 23; /* #171717 neutral-900 */
+  --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) */
+
+  /* Buttons */
+  --ec-button-bg: 249 115 22; /* #f97316 orange-500 */
+  --ec-button-bg-hover: 251 146 60; /* #fb923c orange-400 */
+  --ec-button-text: 255 255 255; /* #ffffff */
+
+  /* Dropdowns & menus */
+  --ec-dropdown-bg: 23 23 23; /* #171717 */
+  --ec-dropdown-text: 212 212 212; /* #d4d4d4 */
+  --ec-dropdown-hover: 38 38 38; /* #262626 */
+  --ec-dropdown-border: 64 64 64; /* #404040 */
+
+  /* Icons */
+  --ec-icon-color: 163 163 163; /* #a3a3a3 */
+  --ec-icon-hover: 253 186 116; /* #fdba74 orange-300 */
+
+  /* Sidebar / Vertical Nav */
+  --ec-sidebar-bg: 10 10 10; /* #0a0a0a neutral-950 */
+  --ec-sidebar-bg-gradient: 10 10 10; /* #0a0a0a */
+  --ec-sidebar-border: 38 38 38; /* #262626 */
+  --ec-sidebar-text: 163 163 163; /* #a3a3a3 */
+  --ec-sidebar-active-bg: 249 115 22; /* #f97316 orange-500 */
+  --ec-sidebar-active-text: 255 255 255; /* #ffffff */
+  --ec-sidebar-hover-bg: 38 38 38; /* #262626 */
+
+  /* Nested sidebar content */
+  --ec-content-bg: 10 10 10; /* #0a0a0a */
+  --ec-content-text: 245 245 245; /* #f5f5f5 */
+  --ec-content-text-muted: 163 163 163; /* #a3a3a3 */
+  --ec-content-text-secondary: 163 163 163; /* #a3a3a3 */
+  --ec-content-border: 38 38 38; /* #262626 */
+  --ec-content-hover: 23 23 23; /* #171717 */
+  --ec-content-active: 38 38 38; /* #262626 */
+
+  /* Input fields */
+  --ec-input-bg: 23 23 23; /* #171717 */
+  --ec-input-border: 64 64 64; /* #404040 */
+  --ec-input-text: 245 245 245; /* #f5f5f5 */
+  --ec-input-placeholder: 115 115 115; /* #737373 */
+
+  /* Group headers */
+  --ec-group-icon-bg: 38 38 38; /* #262626 */
+  --ec-group-icon-text: 253 186 116; /* #fdba74 orange-300 */
+
+  /* Main content/docs area */
+  --ec-page-bg: 10 10 10; /* #0a0a0a */
+  --ec-page-text: 245 245 245; /* #f5f5f5 */
+  --ec-page-text-muted: 163 163 163; /* #a3a3a3 */
+  --ec-page-border: 38 38 38; /* #262626 */
+
+  /* Card/elevated surfaces */
+  --ec-card-bg: 10 10 10; /* #0a0a0a */
+
+  /* Code blocks */
+  --ec-code-bg: 23 23 23; /* #171717 */
+
+  /* Badge colors - sunset dark */
+  --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: 124 45 18 / 0.3; /* orange-900/30 */
+  --ec-badge-event-text: 253 186 116; /* orange-300 */
+  --ec-badge-command-bg: 30 64 175 / 0.3; /* blue-800/30 */
+  --ec-badge-command-text: 147 197 253; /* blue-300 */
+  --ec-badge-query-bg: 21 94 117 / 0.3; /* cyan-800/30 */
+  --ec-badge-query-text: 103 232 249; /* cyan-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: 124 45 18 / 0.3; /* orange-900/30 */
+  --ec-badge-design-text: 253 186 116; /* orange-300 */
+  --ec-badge-channel-bg: 49 46 129 / 0.3; /* indigo-900/30 */
+  --ec-badge-channel-text: 165 180 252; /* indigo-300 */
+  --ec-badge-default-bg: 64 64 64 / 0.3; /* neutral-700/30 */
+  --ec-badge-default-text: 212 212 212; /* neutral-300 */
+}
+
+/* Sunset theme prose overrides */
+:root[data-catalog-theme="sunset"][data-theme="dark"] .prose {
+  --tw-prose-body: rgb(163 163 163); /* neutral-400 */
+  --tw-prose-headings: rgb(245 245 245); /* neutral-100 */
+  --tw-prose-lead: rgb(115 115 115); /* neutral-500 */
+  --tw-prose-links: rgb(251 146 60); /* orange-400 */
+  --tw-prose-bold: rgb(245 245 245); /* neutral-100 */
+  --tw-prose-counters: rgb(115 115 115); /* neutral-500 */
+  --tw-prose-bullets: rgb(82 82 82); /* neutral-600 */
+  --tw-prose-hr: rgb(38 38 38); /* neutral-800 */
+  --tw-prose-quotes: rgb(245 245 245); /* neutral-100 */
+  --tw-prose-quote-borders: rgb(64 64 64); /* neutral-700 */
+  --tw-prose-captions: rgb(115 115 115); /* neutral-500 */
+  --tw-prose-code: rgb(245 245 245); /* neutral-100 */
+  --tw-prose-pre-code: rgb(163 163 163); /* neutral-400 */
+  --tw-prose-pre-bg: rgb(23 23 23); /* neutral-900 */
+  --tw-prose-th-borders: rgb(64 64 64); /* neutral-700 */
+  --tw-prose-td-borders: rgb(38 38 38); /* neutral-800 */
+}
+
+:root[data-catalog-theme="sunset"][data-theme="dark"] .prose code {
+  background-color: rgb(38 38 38); /* neutral-800 */
+}
+
+:root[data-catalog-theme="sunset"][data-theme="dark"] .prose pre {
+  background-color: rgb(23 23 23); /* neutral-900 */
+  border: 1px solid rgb(38 38 38); /* neutral-800 */
+}
+
+:root[data-catalog-theme="sunset"][data-theme="dark"] .prose a {
+  color: rgb(251 146 60); /* orange-400 */
+}
+
+:root[data-catalog-theme="sunset"][data-theme="dark"] .prose a:hover {
+  color: rgb(253 186 116); /* orange-300 */
+}

package/eventcatalog/src/utils/feature.ts

@@ -63,3 +63,7 @@ export const isAuthEnabled = () => {
 export const isSSR = () => config?.output === 'server';
 export const isRSSEnabled = () => config?.rss?.enabled ?? false;
 export const isVisualiserEnabled = () => config?.visualiser?.enabled ?? true;
+
+export const isCustomStylesEnabled = () => {
+  return isEventCatalogStarterEnabled() || isEventCatalogScaleEnabled();
+};

package/eventcatalog/tailwind.config.mjs

@@ -6,6 +6,7 @@ const theme = config.theme || {};
 
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: ['selector', '[data-theme="dark"]'],
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
     extend: {
@@ -51,11 +52,13 @@ export default {
     },
   },
   safelist: [
-    { pattern: /border-.*-(200|400|500)/ },
-    { pattern: /bg-.*-(100|200|400|500)/ },
+    { pattern: /border-.*-(200|400|500)/, variants: ['dark', 'hover', 'dark:hover'] },
+    { pattern: /bg-.*-(100|200|400|500)/, variants: ['dark'] },
+    { pattern: /bg-.*-500\/(10|20)/, variants: ['dark'] },
     { pattern: /from-.*-(100|200|300|400|500|600|700)/ },
     { pattern: /to-.*-(100|200|300|400|500|600|700)/ },
-    { pattern: /text-.*-(400|500|800)/ },
+    { pattern: /text-.*-(300|400|500|800)/, variants: ['dark', 'group-hover', 'dark:group-hover'] },
+    { pattern: /ring-.*-500\/30/, variants: ['dark'] },
     'border-blue-200',
     'border-green-300',
     'bg-blue-600',

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -20,7 +20,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ai-sdk/react": "^2.0.60",
+    "@ai-sdk/react": "^3.0.17",
     "@astrojs/markdown-remark": "^6.3.10",
     "@astrojs/mdx": "^4.3.13",
     "@astrojs/node": "^9.5.1",
@@ -53,8 +53,8 @@
     "@tanstack/react-query": "^5.74.3",
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
-    "ai": "^5.0.60",
-    "astro": "^5.16.6",
+    "ai": "^6.0.17",
+    "astro": "^5.16.7",
     "astro-compress": "^2.3.8",
     "astro-expressive-code": "^0.41.3",
     "astro-seo": "^0.8.4",
@@ -94,7 +94,7 @@
     "rehype-slug": "^6.0.0",
     "remark-comment": "^1.0.0",
     "remark-directive": "^3.0.0",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.1",
     "rimraf": "^5.0.7",
     "semver": "7.6.3",
     "shelljs": "^0.9.0",
@@ -103,7 +103,8 @@
     "typescript": "^5.4.5",
     "unist-util-visit": "^5.0.0",
     "update-notifier": "^7.3.1",
-    "uuid": "^10.0.0"
+    "uuid": "^10.0.0",
+    "zod": "^3.25.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.6",