@eventcatalog/core 3.18.4 → 3.19.0

package/eventcatalog/src/components/MDX/Accordion/AccordionGroup.astro

@@ -2,7 +2,7 @@
 
 ---
 
-<div class="accordian-group border border-gray-200 rounded-md shadow-sm accordion my-2">
+<div class="accordian-group border border-gray-200 rounded-md shadow-xs accordion my-2">
   <slot />
 </div>
 

package/eventcatalog/src/components/MDX/Attachments.astro

@@ -105,7 +105,7 @@ const sortedGroups = Object.entries(groupedAttachments).sort(([a], [b]) => {
                     href={attachment.url}
                     target={isExternal ? '_blank' : '_self'}
                     rel={isExternal ? 'noopener noreferrer' : undefined}
-                    class="group block bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg p-4 transition-all duration-200 hover:shadow-md hover:border-[rgb(var(--ec-accent)/0.5)] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2"
+                    class="group block bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg p-4 transition-all duration-200 hover:shadow-md hover:border-[rgb(var(--ec-accent)/0.5)] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2"
                   >
                     <div class="flex items-start gap-3">
                       <div class="flex-shrink-0 p-2 bg-[rgb(var(--ec-content-hover))] rounded-lg group-hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors duration-200">

package/eventcatalog/src/components/MDX/EntityPropertiesTable/EntityPropertiesTable.astro

@@ -41,7 +41,7 @@ const isComponentEnabled = collection === 'entities';
 {
   isComponentEnabled && properties && properties.length > 0 ? (
     <div class="overflow-x-auto relative not-prose">
-      <table class="w-full text-sm text-left text-[rgb(var(--ec-page-text-muted))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-sm">
+      <table class="w-full text-sm text-left text-[rgb(var(--ec-page-text-muted))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-xs">
         <thead class="text-xs text-[rgb(var(--ec-page-text))] uppercase bg-[rgb(var(--ec-content-hover))]">
           <tr>
             <th scope="col" class="py-3 px-6">

package/eventcatalog/src/components/MDX/MessageTable/MessageTable.client.tsx

@@ -284,7 +284,7 @@ const MessageTable = (props: MessageTableProps) => {
         <div className="overflow-x-auto">
           <div className="inline-block min-w-full py-2 align-middle">
             <div className="max-w-full overflow-hidden">
-              <table className="min-w-full table-fixed divide-y divide-[rgb(var(--ec-page-border))] rounded-sm bg-[rgb(var(--ec-page-bg))]">
+              <table className="min-w-full table-fixed divide-y divide-[rgb(var(--ec-page-border))] rounded-xs bg-[rgb(var(--ec-page-bg))]">
                 <thead>
                   <tr>
                     <th
@@ -373,7 +373,7 @@ const MessageTable = (props: MessageTableProps) => {
                 </p>
               </div>
               <div>
-                <nav className="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
+                <nav className="isolate inline-flex -space-x-px rounded-md shadow-xs" aria-label="Pagination">
                   <button
                     onClick={() => setCurrentPage(currentPage - 1)}
                     disabled={currentPage === 1}

package/eventcatalog/src/components/MDX/NodeGraph/NodeGraphPortal.tsx

@@ -1,7 +1,7 @@
 const NodeGraphPortal = (props: any) => {
   return (
     <div
-      className="h-[30em] my-6 mb-12 w-full relative !border !border-[rgb(var(--ec-page-border))] rounded-md overflow-hidden"
+      className="h-[30em] my-6 mb-12 w-full relative border! border-[rgb(var(--ec-page-border))]! rounded-md overflow-hidden"
       id={`${props.id}-portal`}
       style={{
         maxHeight: props.maxHeight ? `${props.maxHeight}em` : `30em`,

package/eventcatalog/src/components/MDX/RemoteFile.astro

@@ -141,7 +141,7 @@ if (renderAs === 'auto') {
     <div class="remote-file-content">
       {finalRenderAs === 'schema' ? (
         <div class="not-prose my-4">
-          {title && <h2 class="text-3xl font-bold mb-2 !mt-0">{title}</h2>}
+          {title && <h2 class="text-3xl font-bold mb-2 mt-0!">{title}</h2>}
           <JSONSchemaViewer client:load schema={processedData} maxHeight={maxHeight} expand={false} search={true} />
         </div>
       ) : (

package/eventcatalog/src/components/MDX/ResourceGroupTable/ResourceGroupTable.client.tsx

@@ -290,7 +290,7 @@ const ResourceGroupTable = (props: ResourceGroupTableProps) => {
         <div className="overflow-x-auto">
           <div className="inline-block min-w-full py-2 align-middle">
             <div className="max-w-full overflow-hidden">
-              <table className="min-w-full table-fixed divide-y divide-[rgb(var(--ec-page-border))] rounded-sm bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
+              <table className="min-w-full table-fixed divide-y divide-[rgb(var(--ec-page-border))] rounded-xs bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
                 <thead>
                   <tr>
                     <th
@@ -387,7 +387,7 @@ const ResourceGroupTable = (props: ResourceGroupTableProps) => {
                 </p>
               </div>
               <div>
-                <nav className="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
+                <nav className="isolate inline-flex -space-x-px rounded-md shadow-xs" aria-label="Pagination">
                   <button
                     onClick={() => setCurrentPage(currentPage - 1)}
                     disabled={currentPage === 1}

package/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewerRoot.astro

@@ -76,7 +76,7 @@ try {
                 data-expand={schema.expand ? 'true' : 'false'}
                 data-search={schema.search !== false ? 'true' : 'false'}
               >
-                {schema.title && <h2 class="text-2xl font-bold mb-2 !mt-0">{schema.title}</h2>}
+                {schema.title && <h2 class="text-2xl font-bold mb-2 mt-0!">{schema.title}</h2>}
 
                 {/* Render AvroSchemaViewer for Avro schemas */}
                 {schema.isAvroSchema ? (

package/eventcatalog/src/components/MDX/Tabs/Tabs.astro

@@ -41,7 +41,7 @@ const tabsId = Math.random().toString(36).substring(2, 9);
       {
         tabItems.map((item) => (
           <button
-            class="whitespace-nowrap py-4 px-1 border-b-2 px-6 font-bold text-sm border-transparent text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] hover:border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))] focus:outline-none tab-button"
+            class="whitespace-nowrap py-4 px-1 border-b-2 px-6 font-bold text-sm border-transparent text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] hover:border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))] focus:outline-hidden tab-button"
             data-tab={item.id}
             aria-selected="false"
           >

package/eventcatalog/src/components/MDX/Tiles/Tile.astro

@@ -28,7 +28,7 @@ function startsWithProtocol(str: string) {
   <a
     href={startsWithProtocol(href) ? href : buildUrl(href)}
     target={openWindow ? '_blank' : '_self'}
-    class="tile-card block relative bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl p-8 h-48 transition-all duration-300 ease-out hover:border-[rgb(var(--ec-accent)/0.5)] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 overflow-hidden"
+    class="tile-card block relative bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl p-8 h-48 transition-all duration-300 ease-out hover:border-[rgb(var(--ec-accent)/0.5)] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 overflow-hidden"
   >
     <!-- Icon centered in card with grid background -->
     <div class="relative h-full flex items-center justify-center">

package/eventcatalog/src/components/SchemaExplorer/AvroSchemaViewer.tsx

@@ -320,12 +320,12 @@ export default function AvroSchemaViewer({
 
   return (
     <div
-      className={`${heightClass} ${overflowClass} flex flex-col bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-md shadow-sm`}
+      className={`${heightClass} ${overflowClass} flex flex-col bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-md shadow-xs`}
       style={containerStyle}
     >
       {/* Toolbar */}
       {searchBool && (
-        <div className="flex-shrink-0 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] pt-4 px-4 pb-3 border-b border-[rgb(var(--ec-page-border))] shadow-sm">
+        <div className="flex-shrink-0 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] pt-4 px-4 pb-3 border-b border-[rgb(var(--ec-page-border))] shadow-xs">
           <div className="flex flex-col sm:flex-row gap-3">
             <div className="flex-1 relative">
               <input
@@ -334,7 +334,7 @@ export default function AvroSchemaViewer({
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 placeholder="Search fields..."
-                className="w-full px-3 py-1.5 pr-20 text-sm border border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-input-placeholder))] rounded-md focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-transparent"
+                className="w-full px-3 py-1.5 pr-20 text-sm border border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-input-placeholder))] rounded-md focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-transparent"
                 onKeyDown={(e) => {
                   if (e.key === 'Enter') {
                     e.preventDefault();
@@ -373,7 +373,7 @@ export default function AvroSchemaViewer({
               {onOpenFullscreen && (
                 <button
                   onClick={onOpenFullscreen}
-                  className="px-3 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-content-hover))] rounded-md hover:bg-[rgb(var(--ec-content-active))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
+                  className="px-3 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-content-hover))] rounded-md hover:bg-[rgb(var(--ec-content-active))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
                   title="Open in fullscreen"
                 >
                   <svg
@@ -394,13 +394,13 @@ export default function AvroSchemaViewer({
               )}
               <button
                 onClick={handleExpandAll}
-                className="px-3 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-content-hover))] rounded-md hover:bg-[rgb(var(--ec-content-active))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
+                className="px-3 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-content-hover))] rounded-md hover:bg-[rgb(var(--ec-content-active))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
               >
                 Expand All
               </button>
               <button
                 onClick={handleCollapseAll}
-                className="px-3 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-content-hover))] rounded-md hover:bg-[rgb(var(--ec-content-active))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
+                className="px-3 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-content-hover))] rounded-md hover:bg-[rgb(var(--ec-content-active))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
               >
                 Collapse All
               </button>

package/eventcatalog/src/components/SchemaExplorer/JSONSchemaViewer.tsx

@@ -228,7 +228,7 @@ const NestedVariantSelector = ({
           <select
             value={selectedIndex}
             onChange={(e) => setSelectedIndex(parseInt(e.target.value))}
-            className="form-select text-xs border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] rounded-md shadow-sm focus:border-[rgb(var(--ec-accent))] focus:ring focus:ring-[rgb(var(--ec-accent)/0.2)] py-1"
+            className="form-select text-xs border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] rounded-md shadow-xs focus:border-[rgb(var(--ec-accent))] focus:ring focus:ring-[rgb(var(--ec-accent)/0.2)] py-1"
           >
             {variants.map((variant: any, index: number) => (
               <option key={index} value={index}>
@@ -293,7 +293,7 @@ const SchemaProperty = ({ name, details, isRequired, level, isListItem = false,
             aria-expanded={isExpanded}
             aria-controls={contentId}
             onClick={() => setIsExpanded(!isExpanded)}
-            className="property-toggle text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] pt-0.5 focus:outline-none w-3 text-center flex-shrink-0"
+            className="property-toggle text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] pt-0.5 focus:outline-hidden w-3 text-center flex-shrink-0"
           >
             <span className={`icon-collapsed font-mono text-xs ${isExpanded ? 'hidden' : ''}`}>&gt;</span>
             <span className={`icon-expanded font-mono text-xs ${!isExpanded ? 'hidden' : ''}`}>v</span>
@@ -396,7 +396,7 @@ const SchemaProperty = ({ name, details, isRequired, level, isListItem = false,
                     <select
                       value={selectedVariantIndex}
                       onChange={(e) => setSelectedVariantIndex(parseInt(e.target.value))}
-                      className="form-select text-xs border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] rounded-md shadow-sm focus:border-[rgb(var(--ec-accent))] focus:ring focus:ring-[rgb(var(--ec-accent)/0.2)] py-1"
+                      className="form-select text-xs border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] rounded-md shadow-xs focus:border-[rgb(var(--ec-accent))] focus:ring focus:ring-[rgb(var(--ec-accent)/0.2)] py-1"
                     >
                       {details.variants.map((variant: any, index: number) => (
                         <option key={index} value={index}>
@@ -667,12 +667,12 @@ export default function JSONSchemaViewer({
   return (
     <div
       id={id}
-      className={`${heightClass} ${overflowClass} flex flex-col bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-md shadow-sm`}
+      className={`${heightClass} ${overflowClass} flex flex-col bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-md shadow-xs`}
       style={containerStyle}
     >
       {/* Toolbar */}
       {searchBool && (
-        <div className="flex-shrink-0 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] pt-4 px-4 mb-4 pb-3 border-b border-[rgb(var(--ec-page-border))] shadow-sm">
+        <div className="flex-shrink-0 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] pt-4 px-4 mb-4 pb-3 border-b border-[rgb(var(--ec-page-border))] shadow-xs">
           <div className="flex flex-col sm:flex-row gap-3">
             <div className="flex-1 relative">
               <input
@@ -681,7 +681,7 @@ export default function JSONSchemaViewer({
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 placeholder="Search properties..."
-                className="w-full px-3 py-1.5 pr-20 text-sm border border-[rgb(var(--ec-input-border))] rounded-md bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-input-placeholder))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-transparent"
+                className="w-full px-3 py-1.5 pr-20 text-sm border border-[rgb(var(--ec-input-border))] rounded-md bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-input-placeholder))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-transparent"
                 onKeyDown={(e) => {
                   if (e.key === 'Enter') {
                     e.preventDefault();
@@ -720,7 +720,7 @@ export default function JSONSchemaViewer({
               {onOpenFullscreen && (
                 <button
                   onClick={onOpenFullscreen}
-                  className="px-3 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-content-hover))] rounded-md hover:bg-[rgb(var(--ec-content-active))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
+                  className="px-3 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-content-hover))] rounded-md hover:bg-[rgb(var(--ec-content-active))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
                   title="Open in fullscreen"
                 >
                   <svg
@@ -741,13 +741,13 @@ export default function JSONSchemaViewer({
               )}
               <button
                 onClick={handleExpandAll}
-                className="px-3 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-content-hover))] rounded-md hover:bg-[rgb(var(--ec-content-active))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
+                className="px-3 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-content-hover))] rounded-md hover:bg-[rgb(var(--ec-content-active))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
               >
                 Expand All
               </button>
               <button
                 onClick={handleCollapseAll}
-                className="px-3 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-content-hover))] rounded-md hover:bg-[rgb(var(--ec-content-active))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
+                className="px-3 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-content-hover))] rounded-md hover:bg-[rgb(var(--ec-content-active))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
               >
                 Collapse All
               </button>
@@ -790,7 +790,7 @@ export default function JSONSchemaViewer({
               <select
                 value={selectedVariantIndex}
                 onChange={(e) => setSelectedVariantIndex(parseInt(e.target.value))}
-                className="form-select text-sm border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] rounded-md shadow-sm focus:border-[rgb(var(--ec-accent))] focus:ring focus:ring-[rgb(var(--ec-accent)/0.2)] flex-1 sm:flex-initial"
+                className="form-select text-sm border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] rounded-md shadow-xs focus:border-[rgb(var(--ec-accent))] focus:ring focus:ring-[rgb(var(--ec-accent)/0.2)] flex-1 sm:flex-initial"
               >
                 {variants.map((variant: any, index: number) => (
                   <option key={index} value={index}>

package/eventcatalog/src/components/SchemaExplorer/OwnersSection.tsx

@@ -42,7 +42,7 @@ export default function OwnersSection({ message, isExpanded, onToggle }: OwnersS
                 <a
                   key={`${owner.id}-${idx}`}
                   href={owner.href}
-                  className="inline-flex items-center gap-1.5 pl-1 pr-3 py-1 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-full hover:border-[rgb(var(--ec-accent))] hover:shadow-sm transition-all"
+                  className="inline-flex items-center gap-1.5 pl-1 pr-3 py-1 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-full hover:border-[rgb(var(--ec-accent))] hover:shadow-xs transition-all"
                   title={owner.name}
                 >
                   <div className="flex items-center justify-center w-5 h-5 bg-gradient-to-b from-[rgb(var(--ec-accent-gradient-from))] to-[rgb(var(--ec-accent-gradient-to))] rounded-full">

package/eventcatalog/src/components/SchemaExplorer/ProducersConsumersSection.tsx

@@ -54,7 +54,7 @@ export default function ProducersConsumersSection({ message, isExpanded, onToggl
                   <a
                     key={`${producer.id}-${idx}`}
                     href={buildUrl(`/docs/services/${producer.id}/${producer.version}`)}
-                    className="inline-flex items-center gap-1.5 pl-1 pr-3 py-1 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-full hover:border-pink-400 dark:hover:border-pink-500 hover:shadow-sm transition-all"
+                    className="inline-flex items-center gap-1.5 pl-1 pr-3 py-1 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-full hover:border-pink-400 dark:hover:border-pink-500 hover:shadow-xs transition-all"
                     title={`View ${producer.id}`}
                   >
                     <div className="flex items-center justify-center w-5 h-5 bg-gradient-to-b from-pink-500 to-pink-600 rounded-full">
@@ -75,7 +75,7 @@ export default function ProducersConsumersSection({ message, isExpanded, onToggl
                   <a
                     key={`${consumer.id}-${idx}`}
                     href={buildUrl(`/docs/services/${consumer.id}/${consumer.version}`)}
-                    className="inline-flex items-center gap-1.5 pl-1 pr-3 py-1 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-full hover:border-pink-400 dark:hover:border-pink-500 hover:shadow-sm transition-all"
+                    className="inline-flex items-center gap-1.5 pl-1 pr-3 py-1 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-full hover:border-pink-400 dark:hover:border-pink-500 hover:shadow-xs transition-all"
                     title={`View ${consumer.id}`}
                   >
                     <div className="flex items-center justify-center w-5 h-5 bg-gradient-to-b from-pink-500 to-pink-600 rounded-full">

package/eventcatalog/src/components/SchemaExplorer/SchemaCodeModal.tsx

@@ -20,7 +20,7 @@ export default function SchemaCodeModal({ isOpen, onOpenChange, message, onCopy,
     <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" />
-        <Dialog.Content className="fixed inset-4 md:inset-8 rounded-lg bg-white shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100] flex flex-col">
+        <Dialog.Content className="fixed inset-4 md:inset-8 rounded-lg bg-white shadow-xl focus:outline-hidden data-[state=open]:animate-contentShow z-[100] flex flex-col">
           {/* Header */}
           <div className="flex items-center justify-between p-6 border-b border-gray-200 flex-shrink-0">
             <div className="flex items-center gap-3">
@@ -80,7 +80,7 @@ export default function SchemaCodeModal({ isOpen, onOpenChange, message, onCopy,
             <Dialog.Close asChild>
               <button
                 type="button"
-                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
               >
                 Close
               </button>

package/eventcatalog/src/components/SchemaExplorer/SchemaContentViewer.tsx

@@ -94,7 +94,7 @@ export default function SchemaContentViewer({
             return (
               <a
                 href={specUrl}
-                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] rounded-md transition-colors shadow-sm"
+                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] rounded-md transition-colors shadow-xs"
                 title="View full specification"
               >
                 <svg
@@ -118,7 +118,7 @@ export default function SchemaContentViewer({
         {onOpenFullscreen && (
           <button
             onClick={onOpenFullscreen}
-            className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] rounded-md transition-colors shadow-sm"
+            className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] rounded-md transition-colors shadow-xs"
             title="Open in fullscreen"
           >
             <ArrowsPointingOutIcon className="h-3.5 w-3.5" />
@@ -127,7 +127,7 @@ export default function SchemaContentViewer({
         )}
         <button
           onClick={onCopy}
-          className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] rounded-md transition-colors shadow-sm"
+          className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] rounded-md transition-colors shadow-xs"
           title="Copy code"
         >
           <ClipboardDocumentIcon className="h-3.5 w-3.5" />

package/eventcatalog/src/components/SchemaExplorer/SchemaDetailsHeader.tsx

@@ -70,7 +70,7 @@ export default function SchemaDetailsHeader({
                       <select
                         value={selectedVersion || message.data.version}
                         onChange={(e) => onVersionChange(e.target.value)}
-                        className="appearance-none text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))] rounded-md pl-2.5 pr-7 py-1 focus:outline-none focus:ring-1 focus:ring-[rgb(var(--ec-accent))] focus:border-[rgb(var(--ec-accent))] cursor-pointer hover:bg-[rgb(var(--ec-input-bg))] transition-colors"
+                        className="appearance-none text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))] rounded-md pl-2.5 pr-7 py-1 focus:outline-hidden focus:ring-1 focus:ring-[rgb(var(--ec-accent))] focus:border-[rgb(var(--ec-accent))] cursor-pointer hover:bg-[rgb(var(--ec-input-bg))] transition-colors"
                       >
                         {availableVersions.map((v) => (
                           <option key={v.data.version} value={v.data.version}>
@@ -127,7 +127,7 @@ export default function SchemaDetailsHeader({
             onClick={() => onViewModeChange('code')}
             className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded transition-all ${
               schemaViewMode === 'code'
-                ? 'bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] shadow-sm'
+                ? 'bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] shadow-xs'
                 : 'text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]'
             }`}
             title="View raw code"
@@ -140,7 +140,7 @@ export default function SchemaDetailsHeader({
               onClick={() => onViewModeChange('schema')}
               className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded transition-all ${
                 schemaViewMode === 'schema'
-                  ? 'bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] shadow-sm'
+                  ? 'bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] shadow-xs'
                   : 'text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]'
               }`}
               title="View as schema"
@@ -154,7 +154,7 @@ export default function SchemaDetailsHeader({
               onClick={() => onViewModeChange('diff')}
               className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded transition-all ${
                 schemaViewMode === 'diff'
-                  ? 'bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] shadow-sm'
+                  ? 'bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] shadow-xs'
                   : 'text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]'
               }`}
               title="View version diffs"
@@ -176,7 +176,7 @@ export default function SchemaDetailsHeader({
             onClick={() => onViewModeChange('api')}
             className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded transition-all ${
               schemaViewMode === 'api'
-                ? 'bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] shadow-sm'
+                ? 'bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] shadow-xs'
                 : 'text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]'
             }`}
             title="API access"

package/eventcatalog/src/components/SchemaExplorer/SchemaExplorer.tsx

@@ -357,7 +357,7 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
       {/* Split View - Full Height */}
       <div className="flex-1 flex gap-4 overflow-hidden">
         {/* Left: Schema List */}
-        <div className="w-[320px] flex-shrink-0 flex flex-col bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg overflow-hidden shadow-sm">
+        <div className="w-[320px] flex-shrink-0 flex flex-col bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg overflow-hidden shadow-xs">
           {/* Search Header */}
           <div className="flex-shrink-0 p-3 border-b border-[rgb(var(--ec-page-border))]">
             {/* Search + Format Filter Row */}
@@ -372,7 +372,7 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
                   placeholder="Search schemas..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-input-bg))] py-2 pl-9 pr-8 text-sm text-[rgb(var(--ec-page-text))] placeholder:text-[rgb(var(--ec-icon-color))] focus:border-[rgb(var(--ec-accent))] focus:outline-none focus:ring-1 focus:ring-[rgb(var(--ec-accent)/0.3)] transition-all"
+                  className="w-full rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-input-bg))] py-2 pl-9 pr-8 text-sm text-[rgb(var(--ec-page-text))] placeholder:text-[rgb(var(--ec-icon-color))] focus:border-[rgb(var(--ec-accent))] focus:outline-hidden focus:ring-1 focus:ring-[rgb(var(--ec-accent)/0.3)] transition-all"
                 />
                 {searchQuery && (
                   <button onClick={() => setSearchQuery('')} className="absolute inset-y-0 right-0 flex items-center pr-2.5">
@@ -385,7 +385,7 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
                 <select
                   value={selectedSchemaType}
                   onChange={(e) => setSelectedSchemaType(e.target.value)}
-                  className="flex-shrink-0 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-input-bg))] border border-[rgb(var(--ec-page-border))] rounded-md px-2 py-2 focus:outline-none focus:ring-1 focus:ring-[rgb(var(--ec-accent)/0.3)] focus:border-[rgb(var(--ec-accent))] cursor-pointer hover:bg-[rgb(var(--ec-content-hover))] transition-colors"
+                  className="flex-shrink-0 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-input-bg))] border border-[rgb(var(--ec-page-border))] rounded-md px-2 py-2 focus:outline-hidden focus:ring-1 focus:ring-[rgb(var(--ec-accent)/0.3)] focus:border-[rgb(var(--ec-accent))] cursor-pointer hover:bg-[rgb(var(--ec-content-hover))] transition-colors"
                 >
                   <option value="all">All formats</option>
                   {schemaTypes.map((type) => {

package/eventcatalog/src/components/SchemaExplorer/SchemaViewerModal.tsx

@@ -27,7 +27,7 @@ export default function SchemaViewerModal({
     <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" />
-        <Dialog.Content className="fixed inset-4 md:inset-8 rounded-lg bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100] flex flex-col">
+        <Dialog.Content className="fixed inset-4 md:inset-8 rounded-lg bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] shadow-xl focus:outline-hidden data-[state=open]:animate-contentShow z-[100] flex flex-col">
           {/* Header */}
           <div className="flex items-center justify-between p-6 border-b border-[rgb(var(--ec-page-border))] flex-shrink-0">
             <div className="flex items-center gap-3">
@@ -64,7 +64,7 @@ export default function SchemaViewerModal({
             <Dialog.Close asChild>
               <button
                 type="button"
-                className="px-4 py-2 text-sm font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 transition-colors"
+                className="px-4 py-2 text-sm font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 transition-colors"
               >
                 Close
               </button>

package/eventcatalog/src/components/SchemaExplorer/VersionHistoryModal.tsx

@@ -22,7 +22,7 @@ export default function VersionHistoryModal({
     <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" />
-        <Dialog.Content className="fixed inset-4 md:inset-8 rounded-lg bg-white shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100] flex flex-col">
+        <Dialog.Content className="fixed inset-4 md:inset-8 rounded-lg bg-white shadow-xl focus:outline-hidden data-[state=open]:animate-contentShow z-[100] flex flex-col">
           {/* Header */}
           <div className="flex items-center justify-between p-6 border-b border-gray-200 flex-shrink-0">
             <div className="flex items-center gap-3">
@@ -59,7 +59,7 @@ export default function VersionHistoryModal({
             <Dialog.Close asChild>
               <button
                 type="button"
-                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
               >
                 Close
               </button>

package/eventcatalog/src/components/Search/Search.astro

@@ -11,7 +11,7 @@ import SearchModal from './SearchModal.tsx';
       name="search"
       placeholder="Search EventCatalog"
       autocomplete="off"
-      class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 !pl-10 text-[rgb(var(--ec-header-text))] bg-[rgb(var(--ec-dropdown-bg))] shadow-sm ring-1 ring-inset ring-[rgb(var(--ec-dropdown-border))] placeholder:text-[rgb(var(--ec-icon-color))] font-light sm:text-sm sm:leading-6"
+      class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 pl-10! text-[rgb(var(--ec-header-text))] bg-[rgb(var(--ec-dropdown-bg))] shadow-xs ring-1 ring-inset ring-[rgb(var(--ec-dropdown-border))] placeholder:text-[rgb(var(--ec-icon-color))] font-light sm:text-sm sm:leading-6"
     />
     <MagnifyingGlassIcon className="absolute inset-y-0 left-0 h-9 w-8 flex items-center pl-4 text-[rgb(var(--ec-icon-color))]" />
     <div class="absolute inset-y-0 right-0 flex py-1.5 pr-6">

package/eventcatalog/src/components/Search/SearchModal.tsx

@@ -387,7 +387,7 @@ export default function SearchModal() {
                   />
                   <Combobox.Input
                     ref={inputRef}
-                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-[rgb(var(--ec-page-text))] placeholder:text-[rgb(var(--ec-icon-color))] focus:ring-0 sm:text-sm focus:outline-none"
+                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-[rgb(var(--ec-page-text))] placeholder:text-[rgb(var(--ec-icon-color))] focus:ring-0 sm:text-sm focus:outline-hidden"
                     placeholder="Search..."
                     onChange={(event) => setQuery(event.target.value)}
                     value={query}

package/eventcatalog/src/components/SideNav/NestedSideBar/SearchBar.tsx

@@ -190,7 +190,7 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
               placeholder="Search resources..."
               value={searchQuery}
               onChange={(e) => handleSearchChange(e.target.value)}
-              className="w-full !pl-9 !pr-8 !py-2 !text-sm !bg-[rgb(var(--ec-input-bg))] !border !border-[rgb(var(--ec-input-border))] !rounded-lg focus:!outline-none focus:!ring-2 focus:!ring-[rgb(var(--ec-accent))] focus:!border-transparent !text-[rgb(var(--ec-input-text))] placeholder:!text-[rgb(var(--ec-input-placeholder))]"
+              className="w-full pl-9! pr-8! py-2! text-sm! bg-[rgb(var(--ec-input-bg))]! border! border-[rgb(var(--ec-input-border))]! rounded-lg! focus:outline-hidden! focus:ring-2! focus:ring-[rgb(var(--ec-accent))]! focus:border-transparent! text-[rgb(var(--ec-input-text))]! placeholder:text-[rgb(var(--ec-input-placeholder))]!"
             />
             {searchQuery && (
               <button

package/eventcatalog/src/components/SideNav/NestedSideBar/index.tsx

@@ -910,7 +910,7 @@ export default function NestedSideBar() {
       'group flex items-center justify-between w-full px-3 py-1.5 rounded-lg cursor-pointer text-left transition-colors hover:bg-[rgb(var(--ec-content-hover))] active:bg-[rgb(var(--ec-content-hover))]';
     const parentClasses = itemHasChildren ? 'font-medium' : '';
     const activeClasses = isActive
-      ? 'bg-[rgb(var(--ec-accent-subtle))] hover:bg-[rgb(var(--ec-accent-subtle))] !rounded-none'
+      ? 'bg-[rgb(var(--ec-accent-subtle))] hover:bg-[rgb(var(--ec-accent-subtle))] rounded-none!'
       : '';
 
     // Leaf item with href → render as link
@@ -1122,7 +1122,7 @@ export default function NestedSideBar() {
                         onClick={() => navigateToFavorite(fav)}
                         className={cn(
                           'group flex items-center justify-between w-full px-3 py-1.5 rounded-lg cursor-pointer text-left transition-colors hover:bg-amber-500/10 active:bg-amber-500/20',
-                          isActive && 'bg-[rgb(var(--ec-accent-subtle))] hover:bg-[rgb(var(--ec-accent-subtle))] !rounded-none'
+                          isActive && 'bg-[rgb(var(--ec-accent-subtle))] hover:bg-[rgb(var(--ec-accent-subtle))] rounded-none!'
                         )}
                       >
                         <div className="flex items-center gap-2.5 min-w-0 flex-1">

package/eventcatalog/src/components/Studio/StudioPageModal.tsx

@@ -52,7 +52,7 @@ const StudioPageModal: React.FC = () => {
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100]">
+        <Dialog.Content className="fixed top-1/2 left-1/2 w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl focus:outline-hidden data-[state=open]:animate-contentShow z-[100]">
           <Dialog.Title className="text-lg font-semibold text-gray-900 mb-3">Open EventCatalog Studio</Dialog.Title>
 
           <Dialog.Description className="text-sm text-gray-600 mb-6">
@@ -134,7 +134,7 @@ const StudioPageModal: React.FC = () => {
             <Dialog.Close asChild>
               <button
                 type="button"
-                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
                 onClick={() => setIsOpen(false)}
               >
                 Close

package/eventcatalog/src/components/Tables/Discover/DiscoverTable.tsx

@@ -441,7 +441,7 @@ export function DiscoverTable<T extends DiscoverTableData>({
           value={globalFilter}
           onChange={(value) => setGlobalFilter(String(value))}
           placeholder={`Search ${collectionLabel.toLowerCase()}...`}
-          className="w-full px-3 py-2 text-sm bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] border border-[rgb(var(--ec-page-border))] rounded-lg placeholder:text-[rgb(var(--ec-input-placeholder))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.2)] focus:border-[rgb(var(--ec-accent))] transition-colors"
+          className="w-full px-3 py-2 text-sm bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] border border-[rgb(var(--ec-page-border))] rounded-lg placeholder:text-[rgb(var(--ec-input-placeholder))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.2)] focus:border-[rgb(var(--ec-accent))] transition-colors"
         />
 
         {/* Message Filters Section */}
@@ -695,7 +695,7 @@ export function DiscoverTable<T extends DiscoverTableData>({
               value={tableFilter}
               onChange={(e) => setTableFilter(e.target.value)}
               placeholder="Filter..."
-              className="pl-9 pr-3 py-1.5 text-sm w-48 bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] border border-[rgb(var(--ec-page-border))] rounded-lg placeholder:text-[rgb(var(--ec-input-placeholder))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.2)] focus:border-[rgb(var(--ec-accent))] transition-colors"
+              className="pl-9 pr-3 py-1.5 text-sm w-48 bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] border border-[rgb(var(--ec-page-border))] rounded-lg placeholder:text-[rgb(var(--ec-input-placeholder))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.2)] focus:border-[rgb(var(--ec-accent))] transition-colors"
             />
             {tableFilter && (
               <button
@@ -709,7 +709,7 @@ export function DiscoverTable<T extends DiscoverTableData>({
         </div>
 
         {/* Table */}
-        <div className="rounded-xl border border-[rgb(var(--ec-page-border))] overflow-hidden shadow-sm">
+        <div className="rounded-xl border border-[rgb(var(--ec-page-border))] overflow-hidden shadow-xs">
           <table className="min-w-full divide-y divide-[rgb(var(--ec-page-border))]">
             <thead className="bg-[rgb(var(--ec-content-hover))] sticky top-0 z-10 border-b-2 border-[rgb(var(--ec-page-border))]">
               {table.getHeaderGroups().map((headerGroup, index) => (
@@ -822,7 +822,7 @@ export function DiscoverTable<T extends DiscoverTableData>({
               onChange={(e) => {
                 table.setPageSize(Number(e.target.value));
               }}
-              className="px-3 py-2 text-sm text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg hover:border-[rgb(var(--ec-icon-color))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.2)] transition-colors"
+              className="px-3 py-2 text-sm text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg hover:border-[rgb(var(--ec-icon-color))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.2)] transition-colors"
             >
               {[10, 20, 30, 40, 50].map((pageSize) => (
                 <option key={pageSize} value={pageSize}>

package/eventcatalog/src/components/Tables/Table.tsx

@@ -353,7 +353,7 @@ export const Table = <T extends TCollectionTypes>({
             onChange={(e) => {
               table.setPageSize(Number(e.target.value));
             }}
-            className="px-3 py-2 text-sm text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg hover:border-[rgb(var(--ec-icon-color))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.2)] transition-colors"
+            className="px-3 py-2 text-sm text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg hover:border-[rgb(var(--ec-icon-color))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.2)] transition-colors"
           >
             {[10, 20, 30, 40, 50].map((pageSize) => (
               <option key={pageSize} value={pageSize}>
@@ -428,7 +428,7 @@ function Filter<T extends TCollectionTypes>({ column }: { column: Column<TData<T
         value={(columnFilterValue ?? '') as string}
         onChange={(value) => column.setFilterValue(value)}
         placeholder={!column?.columnDef?.meta?.filterVariant ? `Search (${uniqueCount})...` : 'Search...'}
-        className="w-full px-3 py-2 text-sm bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] border border-[rgb(var(--ec-input-border))] rounded-lg placeholder:text-[rgb(var(--ec-input-placeholder))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.2)] focus:border-[rgb(var(--ec-accent))] transition-colors"
+        className="w-full px-3 py-2 text-sm bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] border border-[rgb(var(--ec-input-border))] rounded-lg placeholder:text-[rgb(var(--ec-input-placeholder))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.2)] focus:border-[rgb(var(--ec-accent))] transition-colors"
         list={column.id + 'list'}
       />
     </div>