@eventcatalog/core 3.0.0-beta.9 → 3.1.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/collections/channels.ts

@@ -122,8 +122,6 @@ export const getChannels = async ({ getAllVersions = true }: Props = {}): Promis
         },
         catalog: {
           path: path.join(channel.collection, channel.id.replace('/index.mdx', '')),
-          absoluteFilePath: path.join(PROJECT_DIR, channel.collection, channel.id.replace('/index.mdx', '/index.md')),
-          astroContentFilePath: path.join(process.cwd(), 'src', 'content', channel.collection, channel.id),
           filePath: path.join(process.cwd(), 'src', 'catalog-files', channel.collection, channel.id.replace('/index.mdx', '')),
           publicPath: path.join('/generated', channel.collection, channelFolderName),
           type: 'event',

package/eventcatalog/src/utils/collections/commands.ts

@@ -112,8 +112,6 @@ export const getCommands = async ({ getAllVersions = true, hydrateServices = tru
         },
         catalog: {
           path: path.join(command.collection, command.id.replace('/index.mdx', '')),
-          absoluteFilePath: path.join(PROJECT_DIR, command.collection, command.id.replace('/index.mdx', '/index.md')),
-          astroContentFilePath: path.join(process.cwd(), 'src', 'content', command.collection, command.id),
           filePath: path.join(process.cwd(), 'src', 'catalog-files', command.collection, command.id.replace('/index.mdx', '')),
           publicPath: path.join('/generated', command.collection, commandFolderName),
           type: 'command',

package/eventcatalog/src/utils/collections/containers.ts

@@ -94,8 +94,6 @@ export const getContainers = async ({ getAllVersions = true }: Props = {}): Prom
         },
         catalog: {
           path: path.join(container.collection, container.id.replace('/index.mdx', '')),
-          absoluteFilePath: path.join(PROJECT_DIR, container.collection, container.id.replace('/index.mdx', '/index.md')),
-          astroContentFilePath: path.join(process.cwd(), 'src', 'content', container.collection, container.id),
           filePath: path.join(
             process.cwd(),
             'src',

package/eventcatalog/src/utils/collections/domains.ts

@@ -213,8 +213,6 @@ export const getDomains = async ({
         },
         catalog: {
           path: path.join(domain.collection, domain.id.replace('/index.mdx', '')),
-          absoluteFilePath: path.join(PROJECT_DIR, domain.collection, domain.id.replace('/index.mdx', '/index.md')),
-          astroContentFilePath: path.join(process.cwd(), 'src', 'content', domain.collection, domain.id),
           filePath: path.join(process.cwd(), 'src', 'catalog-files', domain.collection, domain.id.replace('/index.mdx', '')),
           publicPath: path.join('/generated', domain.collection, domainFolderName),
           type: 'service',

package/eventcatalog/src/utils/collections/entities.ts

@@ -94,8 +94,6 @@ export const getEntities = async ({ getAllVersions = true }: Props = {}): Promis
         },
         catalog: {
           path: path.join(entity.collection, entity.id.replace('/index.mdx', '')),
-          absoluteFilePath: path.join(PROJECT_DIR, entity.collection, entity.id.replace('/index.mdx', '/index.md')),
-          astroContentFilePath: path.join(process.cwd(), 'src', 'content', entity.collection, entity.id),
           filePath: path.join(process.cwd(), 'src', 'catalog-files', entity.collection, entity.id.replace('/index.mdx', '')),
           publicPath: path.join('/generated', entity.collection, entityFolderName),
           type: 'entity',

package/eventcatalog/src/utils/collections/events.ts

@@ -114,8 +114,6 @@ export const getEvents = async ({ getAllVersions = true, hydrateServices = true
         },
         catalog: {
           path: path.join(event.collection, event.id.replace('/index.mdx', '')),
-          absoluteFilePath: path.join(PROJECT_DIR, event.collection, event.id.replace('/index.mdx', '/index.md')),
-          astroContentFilePath: path.join(process.cwd(), 'src', 'content', event.collection, event.id),
           filePath: path.join(process.cwd(), 'src', 'catalog-files', event.collection, event.id.replace('/index.mdx', '')),
           publicPath: path.join('/generated', event.collection, eventFolderName),
           type: 'event',

package/eventcatalog/src/utils/collections/flows.ts

@@ -76,8 +76,6 @@ export const getFlows = async ({ getAllVersions = true }: Props = {}): Promise<F
       },
       catalog: {
         path: path.join(flow.collection, flow.id.replace('/index.mdx', '')),
-        absoluteFilePath: path.join(PROJECT_DIR, flow.collection, flow.id.replace('/index.mdx', '/index.md')),
-        astroContentFilePath: path.join(process.cwd(), 'src', 'content', flow.collection, flow.id),
         filePath: path.join(process.cwd(), 'src', 'catalog-files', flow.collection, flow.id.replace('/index.mdx', '')),
         publicPath: path.join('/generated', flow.collection),
         type: 'flow',

package/eventcatalog/src/utils/collections/queries.ts

@@ -107,8 +107,6 @@ export const getQueries = async ({ getAllVersions = true, hydrateServices = true
         },
         catalog: {
           path: path.join(query.collection, query.id.replace('/index.mdx', '')),
-          absoluteFilePath: path.join(PROJECT_DIR, query.collection, query.id.replace('/index.mdx', '/index.md')),
-          astroContentFilePath: path.join(process.cwd(), 'src', 'content', query.collection, query.id),
           filePath: path.join(process.cwd(), 'src', 'catalog-files', query.collection, query.id.replace('/index.mdx', '')),
           publicPath: path.join('/generated', query.collection, queryFolderName),
           type: 'event', // Kept as 'event' to match original file, though likely should be 'query'

package/eventcatalog/src/utils/collections/schemas.ts

@@ -2,6 +2,7 @@ import type { CollectionEntry } from 'astro:content';
 import type { PageTypes } from '@types';
 import path from 'path';
 import { buildUrl } from '@utils/url-builder';
+import { getAbsoluteFilePathForAstroFile } from '@utils/files';
 
 export type Schema = {
   url: string;
@@ -13,12 +14,23 @@ export const getSchemaURL = (resource: CollectionEntry<PageTypes>) => {
   const publicPath = resource?.catalog?.publicPath;
   const schemaFilePath = resource?.data?.schemaPath;
 
-  if (!publicPath || !schemaFilePath) {
+  // No schema file path, return an empty string
+  if (!schemaFilePath) {
+    return;
+  }
+
+  if (!publicPath) {
+    // Then we try and get the absolute file path from the resource
+    const absoluteFilePath = getAbsoluteFilePathForAstroFile(resource.filePath ?? '', schemaFilePath ?? '');
+    if (absoluteFilePath) {
+      return absoluteFilePath;
+    }
+    // Can't find the schema file, return an empty string
     return;
   }
 
   // new URL
-  return path.join(publicPath, schemaFilePath);
+  return path.join(publicPath, schemaFilePath ?? '');
 };
 
 export const getSchemaFormatFromURL = (url: string) => {
@@ -42,18 +54,44 @@ export const getSchemasFromResource = (resource: CollectionEntry<PageTypes>): Sc
     const openapiPath = Array.isArray(specifications)
       ? specifications.find((spec) => spec.type === 'openapi')?.path
       : specifications?.openapiPath;
+    const graphqlPath = Array.isArray(specifications)
+      ? specifications.find((spec) => spec.type === 'graphql')?.path
+      : specifications?.graphqlPath;
     // @ts-ignore
-    const publicPath = resource?.catalog?.publicPath;
+    let publicPath = resource?.catalog?.publicPath;
     const schemas = [];
 
     if (asyncapiPath) {
-      const asyncapiUrl = path.join(publicPath, asyncapiPath);
-      schemas.push({ url: buildUrl(asyncapiUrl), format: 'asyncapi' });
+      if (!publicPath) {
+        // We try and get the absoulate file path from the resource
+        const absoluteFilePath = getAbsoluteFilePathForAstroFile(resource.filePath ?? '', asyncapiPath ?? '');
+        schemas.push({ url: buildUrl(absoluteFilePath), format: 'asyncapi' });
+      } else {
+        // The resource has the public path, so we can use it to build the URL
+        schemas.push({ url: buildUrl(path.join(publicPath, asyncapiPath)), format: 'asyncapi' });
+      }
     }
 
     if (openapiPath) {
-      const openapiUrl = path.join(publicPath, openapiPath);
-      schemas.push({ url: buildUrl(openapiUrl), format: 'openapi' });
+      if (!publicPath) {
+        // We try and get the absoulate file path from the resource
+        const absoluteFilePath = getAbsoluteFilePathForAstroFile(resource.filePath ?? '', openapiPath ?? '');
+        schemas.push({ url: buildUrl(absoluteFilePath), format: 'openapi' });
+      } else {
+        // The resource has the public path, so we can use it to build the URL
+        schemas.push({ url: buildUrl(path.join(publicPath, openapiPath)), format: 'openapi' });
+      }
+    }
+
+    if (graphqlPath) {
+      if (!publicPath) {
+        // We try and get the absoulate file path from the resource
+        const absoluteFilePath = getAbsoluteFilePathForAstroFile(resource.filePath ?? '', graphqlPath ?? '');
+        schemas.push({ url: buildUrl(absoluteFilePath), format: 'graphql' });
+      } else {
+        // The resource has the public path, so we can use it to build the URL
+        schemas.push({ url: buildUrl(path.join(publicPath, graphqlPath)), format: 'graphql' });
+      }
     }
 
     return schemas;

package/eventcatalog/src/utils/collections/services.ts

@@ -118,8 +118,6 @@ export const getServices = async ({ getAllVersions = true, returnBody = false }:
         catalog: {
           // TODO: avoid use string replace at path due to win32
           path: path.join(service.collection, service.id.replace('/index.mdx', '')),
-          absoluteFilePath: path.join(PROJECT_DIR, service.collection, service.id.replace('/index.mdx', '/index.md')),
-          astroContentFilePath: path.join(process.cwd(), 'src', 'content', service.collection, service.id),
           filePath: path.join(process.cwd(), 'src', 'catalog-files', service.collection, service.id.replace('/index.mdx', '')),
           // service will be MySerive-0.0.1 remove the version
           publicPath: path.join('/generated', service.collection, serviceFolderName),