@eventcatalog/core 3.18.5 → 3.19.0

package/eventcatalog/src/enterprise/auth/unauthorized.astro

@@ -37,7 +37,7 @@ import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
         <div class="flex flex-col sm:flex-row gap-4 justify-center">
           <button
             onclick="history.back()"
-            class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-xs hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
@@ -47,7 +47,7 @@ import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 
           <a
             href="/dashboard"
-            class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-xs hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path

package/eventcatalog/src/enterprise/plans/index.astro

@@ -100,7 +100,7 @@ import {
       <div class="mb-16">
         <h2 class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mb-8">Why upgrade EventCatalog?</h2>
         <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
             <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-4">
               <ScrollText className="w-6 h-6 text-purple-600 dark:text-purple-400" />
             </div>
@@ -110,7 +110,7 @@ import {
             </p>
           </div>
 
-          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
             <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-4">
               <Users className="w-6 h-6 text-purple-600 dark:text-purple-400" />
             </div>
@@ -120,7 +120,7 @@ import {
             </p>
           </div>
 
-          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
             <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-4">
               <Component className="w-6 h-6 text-purple-600 dark:text-purple-400" />
             </div>
@@ -149,7 +149,7 @@ import {
 
           <div class="grid grid-cols-1 md:grid-cols-4 gap-8 relative">
             {/* Stage 1 */}
-            <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))] relative">
+            <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))] relative">
               <div
                 class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
               >
@@ -162,7 +162,7 @@ import {
             </div>
 
             {/* Stage 2 */}
-            <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))] relative">
+            <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))] relative">
               <div
                 class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
               >
@@ -175,7 +175,7 @@ import {
             </div>
 
             {/* Stage 3 */}
-            <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))] relative">
+            <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))] relative">
               <div
                 class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
               >
@@ -188,7 +188,7 @@ import {
             </div>
 
             {/* Stage 4 */}
-            <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))] relative">
+            <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))] relative">
               <div
                 class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
               >
@@ -215,7 +215,7 @@ import {
       <div class="mb-16">
         <h2 class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mb-8">Save time with EventCatalog</h2>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
             <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
               <ScrollText className="w-6 h-6 text-blue-600 dark:text-blue-400" />
             </div>
@@ -225,7 +225,7 @@ import {
             </p>
           </div>
 
-          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
             <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mb-4">
               <Bot className="w-6 h-6 text-green-600 dark:text-green-400" />
             </div>
@@ -235,7 +235,7 @@ import {
             </p>
           </div>
 
-          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
             <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-4">
               <Component className="w-6 h-6 text-purple-600 dark:text-purple-400" />
             </div>
@@ -245,7 +245,7 @@ import {
             </p>
           </div>
 
-          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
             <div class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center mb-4">
               <Code className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
             </div>
@@ -255,7 +255,7 @@ import {
             </p>
           </div>
 
-          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
             <div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-900/30 rounded-lg flex items-center justify-center mb-4">
               <Cpu className="w-6 h-6 text-yellow-600 dark:text-yellow-400" />
             </div>
@@ -265,7 +265,7 @@ import {
             </p>
           </div>
 
-          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
             <div class="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center mb-4">
               <LifeBuoy className="w-6 h-6 text-red-600 dark:text-red-400" />
             </div>
@@ -281,7 +281,7 @@ import {
       <div class="mt-16">
         <h2 class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mb-8">Questions about EventCatalog?</h2>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
             <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Request a Demo</h3>
             <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">
               See EventCatalog in action with a personalized demo from our team.
@@ -295,7 +295,7 @@ import {
             </a>
           </div>
 
-          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+          <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
             <h3 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Join the community</h3>
             <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">Join our growing community on Discord. Over 1000+ members.</p>
             <a

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -27,6 +27,9 @@ import '@fontsource/inter';
 import '@fontsource/inter/400.css'; // Specify weight
 import '@fontsource/inter/700.css'; // Specify weight
 
+// Tailwind CSS v4 (CSS-first config)
+import '../styles/tailwind.css';
+
 // Theme CSS variables (must load before user styles)
 import '../styles/theme.css';
 

package/eventcatalog/src/layouts/VisualiserLayout.astro

@@ -95,7 +95,7 @@ const getColor = (collection: string) => {
       <main class="flex-1 h-full w-full relative">
         <!-- <button
           id="fullscreen-toggle"
-          class="absolute top-[1em] z-40 left-5 bg-white hover:bg-gray-100/50 border border-gray-200 hover:text-primary text-gray-800 font-semibold py-2 px-4 rounded-lg transition duration-300 ease-in-out flex items-center space-x-2 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
+          class="absolute top-[1em] z-40 left-5 bg-white hover:bg-gray-100/50 border border-gray-200 hover:text-primary text-gray-800 font-semibold py-2 px-4 rounded-lg transition duration-300 ease-in-out flex items-center space-x-2 focus:outline-hidden focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
         >
           <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path

package/eventcatalog/src/pages/diagrams/[id]/[version]/index.astro

@@ -67,7 +67,7 @@ const chatQuery = `Tell me about the "${props.data.name}" diagram (version ${pro
                 id="compare-btn"
                 type="button"
                 data-scale-enabled={scaleEnabled}
-                class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 text-sm font-medium text-[rgb(var(--ec-dropdown-text))] bg-[rgb(var(--ec-dropdown-bg))] border border-[rgb(var(--ec-dropdown-border))] rounded-md shadow-sm hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-none focus:ring-1 focus:ring-[rgb(var(--ec-accent))] transition-colors"
+                class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 text-sm font-medium text-[rgb(var(--ec-dropdown-text))] bg-[rgb(var(--ec-dropdown-bg))] border border-[rgb(var(--ec-dropdown-border))] rounded-md shadow-xs hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:ring-1 focus:ring-[rgb(var(--ec-accent))] transition-colors"
               >
                 <GitCompare className="w-4 h-4" />
                 Compare diagram versions

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/changelog/index.astro

@@ -199,7 +199,7 @@ const badges = [getBadge()];
                       ))}
                     </div>
                   )}
-                  <div class="prose prose-md !max-w-none py-2">
+                  <div class="prose prose-md max-w-none! py-2">
                     <log.Content components={mdxComponents(props)} />
                   </div>
                   {log.diffs && log.diffs.map((diff) => <div class="bg-white rounded-lg p-2 my-2" set:html={diff} />)}

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/graphql/[filename].astro

@@ -89,7 +89,7 @@ const pagefindAttributes =
                       class={`
                         inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
                         bg-${badge.backgroundColor || 'white'}-50 border border-${badge.backgroundColor || 'gray'}-200
-                        text-${badge.textColor || 'gray'}-700 shadow-sm
+                        text-${badge.textColor || 'gray'}-700 shadow-xs
                         transition-all duration-200 ease-out
                         ${badge.class ? badge.class : ''}
                       `}

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -359,7 +359,7 @@ nodeGraphs.push({
                           inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
                           bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
                           text-[rgb(var(--ec-page-text))]
-                          shadow-sm
+                          shadow-xs
                           ${badge.class ? badge.class : ''}
                         `}
                       >

package/eventcatalog/src/pages/docs/[type]/[id]/language/[dictionaryId]/index.astro

@@ -84,7 +84,7 @@ const badges = [
                       <span
                         class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
                           bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
-                          text-[rgb(var(--ec-page-text))] shadow-sm"
+                          text-[rgb(var(--ec-page-text))] shadow-xs"
                       >
                         {badge.icon && <badge.icon className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />}
                         {badge.iconURL && <img src={badge.iconURL} class="w-4 h-4 flex-shrink-0 opacity-80" alt="" />}

package/eventcatalog/src/pages/docs/custom/feature.astro

@@ -72,7 +72,7 @@ import { BookOpenIcon, FileText } from 'lucide-react';
 
       {/* Features Section */}
       <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
           <div class="w-12 h-12 bg-[rgb(var(--ec-accent-subtle))] rounded-lg flex items-center justify-center mb-4">
             <svg class="w-6 h-6 text-[rgb(var(--ec-accent))]" viewBox="0 0 24 24" fill="currentColor">
               <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"></path>
@@ -84,7 +84,7 @@ import { BookOpenIcon, FileText } from 'lucide-react';
           </p>
         </div>
 
-        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
           <div class="w-12 h-12 bg-[rgb(var(--ec-accent-subtle))] rounded-lg flex items-center justify-center mb-4">
             <svg class="w-6 h-6 text-[rgb(var(--ec-accent))]" viewBox="0 0 24 24" fill="currentColor">
               <path
@@ -98,7 +98,7 @@ import { BookOpenIcon, FileText } from 'lucide-react';
           </p>
         </div>
 
-        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
           <div class="w-12 h-12 bg-[rgb(var(--ec-accent-subtle))] rounded-lg flex items-center justify-center mb-4">
             <svg class="w-6 h-6 text-[rgb(var(--ec-accent))]" viewBox="0 0 24 24" fill="currentColor">
               <path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"
@@ -111,7 +111,7 @@ import { BookOpenIcon, FileText } from 'lucide-react';
           </p>
         </div>
 
-        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
           <div class="w-12 h-12 bg-[rgb(var(--ec-accent-subtle))] rounded-lg flex items-center justify-center mb-4">
             <svg class="w-6 h-6 text-[rgb(var(--ec-accent))]" viewBox="0 0 24 24" fill="currentColor">
               <path
@@ -125,7 +125,7 @@ import { BookOpenIcon, FileText } from 'lucide-react';
           </p>
         </div>
 
-        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
           <div class="w-12 h-12 bg-[rgb(var(--ec-accent-subtle))] rounded-lg flex items-center justify-center mb-4">
             <svg class="w-6 h-6 text-[rgb(var(--ec-accent))]" viewBox="0 0 24 24" fill="currentColor">
               <path d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"></path>
@@ -137,7 +137,7 @@ import { BookOpenIcon, FileText } from 'lucide-react';
           </p>
         </div>
 
-        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
+        <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-xs border border-[rgb(var(--ec-page-border))]">
           <div class="w-12 h-12 bg-[rgb(var(--ec-accent-subtle))] rounded-lg flex items-center justify-center mb-4">
             <svg class="w-6 h-6 text-[rgb(var(--ec-accent))]" viewBox="0 0 24 24" fill="currentColor">
               <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"></path>

package/eventcatalog/src/pages/docs/custom/index.astro

@@ -107,7 +107,7 @@ if (!isCustomDocsEnabled()) {
             <div class="flex flex-wrap items-center gap-3 mb-3">
               <h1 class="text-4xl font-semibold text-gray-900 font-inter">Custom Documentation</h1>
               <div
-                class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent-text))] border border-[rgb(var(--ec-accent)/0.3)] shadow-sm"
+                class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent-text))] border border-[rgb(var(--ec-accent)/0.3)] shadow-xs"
               >
                 Pro feature
               </div>
@@ -128,7 +128,7 @@ if (!isCustomDocsEnabled()) {
               !isCustomDocsEnabled() && (
                 <a
                   href="https://www.eventcatalog.dev/pro/trial"
-                  class="inline-flex items-center justify-center px-5 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-[rgb(var(--ec-accent-gradient-from))] to-[rgb(var(--ec-accent-gradient-to))] hover:opacity-90 shadow-sm"
+                  class="inline-flex items-center justify-center px-5 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-[rgb(var(--ec-accent-gradient-from))] to-[rgb(var(--ec-accent-gradient-to))] hover:opacity-90 shadow-xs"
                 >
                   Start 14-day trial
                 </a>
@@ -145,7 +145,7 @@ if (!isCustomDocsEnabled()) {
       </p>
 
       <div class="space-y-10 mb-12">
-        <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+        <div class="bg-white p-6 rounded-lg shadow-xs border border-gray-200">
           <div class="flex items-start gap-4">
             <div
               class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1"
@@ -160,7 +160,7 @@ if (!isCustomDocsEnabled()) {
           </div>
         </div>
 
-        <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+        <div class="bg-white p-6 rounded-lg shadow-xs border border-gray-200">
           <div class="flex items-start gap-4">
             <div
               class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1"
@@ -175,7 +175,7 @@ if (!isCustomDocsEnabled()) {
           </div>
         </div>
 
-        <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+        <div class="bg-white p-6 rounded-lg shadow-xs border border-gray-200">
           <div class="flex items-start gap-4">
             <div
               class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1"
@@ -210,7 +210,7 @@ if (!isCustomDocsEnabled()) {
           </div>
         </div>
 
-        <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+        <div class="bg-white p-6 rounded-lg shadow-xs border border-gray-200">
           <div class="flex items-start gap-4">
             <div
               class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1"

package/eventcatalog/src/pages/index.astro

@@ -52,7 +52,7 @@ if (config.landingPage) {
       <main class="flex sm:px-8 docs-layout h-full">
         <div class="flex docs-layout w-full">
           <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
-            <div class="w-full !max-w-none">
+            <div class="w-full max-w-none!">
               <CustomContent components={customHomepageComponents} />
             </div>
             <Footer />

package/eventcatalog/src/pages/schemas/explorer/index.astro

@@ -16,7 +16,7 @@ const apiAccessEnabled = isEventCatalogScaleEnabled();
   <main class="flex sm:pl-8 pr-4 docs-layout h-[calc(100vh-var(--header-height,0px)-64px)] bg-[rgb(var(--ec-page-bg))]">
     <div class="flex docs-layout w-full h-full">
       <div class="w-full lg:mr-2 py-6 flex flex-col h-full">
-        <div class="w-full !max-w-none h-full flex flex-col overflow-hidden">
+        <div class="w-full max-w-none! h-full flex flex-col overflow-hidden">
           <SchemaExplorer client:load schemas={schemas as any} apiAccessEnabled={apiAccessEnabled} />
         </div>
       </div>

package/eventcatalog/src/pages/studio.astro

@@ -105,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-[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"
+                              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-xs"
                               style={`animation-delay: ${resource.index * 0.3}s;`}
                             >
                               <BoltIcon className="w-4 h-4 text-orange-500" />
@@ -115,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-[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"
+                              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-xs"
                               style={`animation-delay: ${resource.index * 0.3}s;`}
                             >
                               <ServerIcon className="w-4 h-4 text-pink-500" />
@@ -125,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-[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"
+                              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-xs"
                               style={`animation-delay: ${resource.index * 0.3}s;`}
                             >
                               <ArrowLeftRightIcon className="w-4 h-4 text-indigo-500" />

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

@@ -116,7 +116,7 @@ export function remarkDirectives() {
           data: {
             hName: 'div',
             hProperties: {
-              class: 'prose prose-md dark:prose-invert w-full !max-w-none prose-p:my-1 prose-p:text-inherit',
+              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/styles/tailwind.css

@@ -0,0 +1,84 @@
+@import "tailwindcss";
+
+@plugin "@tailwindcss/typography";
+
+/* Dark mode uses data-theme attribute, not prefers-color-scheme */
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@theme {
+  --font-sans: 'Inter', sans-serif;
+
+  --breakpoint-xxl: 1990px;
+
+  --color-primary: #a855f7;
+  --color-secondary-light: #ff9980;
+  --color-secondary: #ff6633;
+  --color-secondary-dark: #cc3300;
+
+  --spacing-header: 4rem;
+  --spacing-content: calc(100vh - 4rem);
+
+  --animate-progress-bar: progress-bar 2s linear infinite;
+  --animate-progress-bar-reverse: progress-bar-reverse 2s linear infinite;
+  --animate-overlayShow: overlayShow 200ms ease-out;
+  --animate-contentShow: contentShow 200ms ease-out;
+
+  @keyframes progress-bar {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+
+  @keyframes progress-bar-reverse {
+    0% { transform: translateX(100%); }
+    100% { transform: translateX(-100%); }
+  }
+
+  @keyframes overlayShow {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes contentShow {
+    from { opacity: 0; transform: scale(0.96); }
+    to { opacity: 1; transform: scale(1); }
+  }
+}
+
+/*
+ * Safelist: dynamic color classes used in components that construct class names
+ * at runtime (e.g. `bg-${color}-50`). Tailwind v4 can't detect these from source
+ * scanning, so we explicitly declare them here.
+ *
+ * Colors used: orange, blue, green, emerald, amber, violet, pink, purple, gray
+ * Used in: SchemaListItem, Grids/components, SchemaExplorer, MessageGrid
+ */
+@source inline("bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{50,100}");
+@source inline("bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500/{10,20}");
+@source inline("text-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{400,500,600,700}");
+@source inline("border-l-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500");
+@source inline("ring-2");
+@source inline("ring-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500");
+
+/* Border color variants for MessageGrid cards */
+@source inline("border-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{200,300}");
+@source inline("{dark:,}border-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500/{30,50}");
+@source inline("{hover:,dark:hover:,}border-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{300,500/50}");
+
+/* Explicit safelist classes used in various components */
+@source inline("bg-{blue,orange}-600");
+@source inline("bg-{red,yellow,pink,green,blue,indigo}-50");
+@source inline("bg-{yellow,pink,green,blue,indigo}-100");
+@source inline("border-l-{red,yellow,blue}-500");
+@source inline("text-[5px] text-[9px] min-h-[100px]");
+
+/* Gradient classes for dynamic colors */
+@source inline("from-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{100,200,300,400,500,600,700}");
+@source inline("to-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{100,200,300,400,500,600,700}");
+
+/* Dark variant safelist for dynamic colors */
+@source inline("{dark:,}bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{100,200,400,500}");
+@source inline("{dark:,}bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500/{20,30}");
+@source inline("{dark:,}text-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{100,300,400,500,800}");
+@source inline("{dark:,group-hover:,}text-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{100,300,400,500,600,800}");
+@source inline("{dark:,}ring-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-500/30");
+@source inline("{group-hover:,dark:group-hover:,}text-{orange,blue,green,emerald,amber,violet,pink,purple,gray}-{400,600}");

package/eventcatalog/src/utils/icon-map.ts

@@ -0,0 +1,76 @@
+/**
+ * Shared icon map for dynamic lucide-react icon lookups.
+ *
+ * Components that need to resolve icon names from data (sidebar, pill lists, etc.)
+ * should import from this map instead of using `import * as LucideIcons from 'lucide-react'`.
+ * Wildcard imports force Vite to parse 500+ icon modules on first load, adding seconds
+ * to dev server startup time.
+ *
+ * If a user-specified icon name isn't in this map, it won't render.
+ * Add new entries here when new icon names are introduced in sidebar builders,
+ * content schemas, or other dynamic icon contexts.
+ */
+import {
+  ArrowDownToLine,
+  ArrowRightLeft,
+  ArrowUpFromLine,
+  BookOpen,
+  BookText,
+  Box,
+  Boxes,
+  Code,
+  Database,
+  File,
+  FileCheck,
+  FileCode,
+  FileImage,
+  FileJson,
+  Globe,
+  Mail,
+  Package,
+  Search,
+  Server,
+  ShoppingCart,
+  SquareMousePointer,
+  Telescope,
+  Terminal,
+  Truck,
+  User,
+  Users,
+  Waypoints,
+  Workflow,
+  Zap,
+  type LucideIcon,
+} from 'lucide-react';
+
+export const LUCIDE_ICON_MAP: Record<string, LucideIcon> = {
+  ArrowDownToLine,
+  ArrowRightLeft,
+  ArrowUpFromLine,
+  BookOpen,
+  BookText,
+  Box,
+  Boxes,
+  Code,
+  Database,
+  File,
+  FileCheck,
+  FileCode,
+  FileImage,
+  FileJson,
+  Globe,
+  Mail,
+  Package,
+  Search,
+  Server,
+  ShoppingCart,
+  SquareMousePointer,
+  Telescope,
+  Terminal,
+  Truck,
+  User,
+  Users,
+  Waypoints,
+  Workflow,
+  Zap,
+};

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "3.18.5",
+  "version": "3.19.0",
   "publishConfig": {
     "access": "public"
   },
@@ -26,7 +26,7 @@
     "@astrojs/node": "^9.5.4",
     "@astrojs/react": "^4.4.2",
     "@astrojs/rss": "^4.0.15",
-    "@astrojs/tailwind": "^6.0.2",
+    "@tailwindcss/vite": "^4.1.5",
     "@asyncapi/avro-schema-parser": "3.0.24",
     "@asyncapi/parser": "3.6.0",
     "@asyncapi/react-component": "3.0.2",
@@ -46,7 +46,7 @@
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@scalar/api-reference-react": "^0.4.37",
-    "@tailwindcss/typography": "^0.5.13",
+    "@tailwindcss/typography": "^0.5.16",
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
     "ai": "^6.0.17",
@@ -95,15 +95,15 @@
     "semver": "7.6.3",
     "shelljs": "^0.9.0",
     "svg-pan-zoom": "^3.6.2",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.1.5",
     "typescript": "^5.4.5",
     "unist-util-visit": "^5.0.0",
     "update-notifier": "^7.3.1",
     "uuid": "^10.0.0",
     "zod": "^3.25.0",
-    "@eventcatalog/sdk": "2.15.1",
+    "@eventcatalog/linter": "1.0.8",
     "@eventcatalog/visualiser": "^3.15.1",
-    "@eventcatalog/linter": "1.0.8"
+    "@eventcatalog/sdk": "2.15.1"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.6",
@@ -126,7 +126,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
     "tsup": "^8.1.0",
-    "vite": "^7.1.7",
+    "vite": "^7.1.11",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "2.1.9"
   },