@eventcatalog/core 3.0.0-beta.9 → 3.1.0

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

@@ -37,35 +37,35 @@ const ResourceRow = memo(
     const owners = resource.owners || [];
 
     return (
-      <tr className="group hover:bg-gray-100">
-        <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 relative">
+      <tr className="group hover:bg-[rgb(var(--ec-content-hover))]">
+        <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-[rgb(var(--ec-page-text))] sm:pl-6 relative">
           <a href={url} className="absolute inset-0 z-10" aria-label={`View details for ${resource.name}`} />
           <div className="flex items-center gap-2 relative">
             <Icon className={`h-5 w-5 text-${color}-500`} />
-            <span className="group-hover:text-blue-600 break-all">{resource.name}</span>
+            <span className="group-hover:text-[rgb(var(--ec-accent))] break-all">{resource.name}</span>
           </div>
         </td>
-        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 relative">
+        <td className="whitespace-nowrap px-3 py-4 text-sm text-[rgb(var(--ec-page-text-muted))] relative">
           <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
           <span>v{resource.version}</span>
         </td>
-        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 relative">
+        <td className="whitespace-nowrap px-3 py-4 text-sm text-[rgb(var(--ec-page-text-muted))] relative">
           <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
           <span>{type}</span>
         </td>
-        <td className="px-3 py-4 text-sm text-gray-500 relative">
+        <td className="px-3 py-4 text-sm text-[rgb(var(--ec-page-text-muted))] relative">
           <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
           <span className="line-clamp-2 break-words">{resource.summary || resource.description || '-'}</span>
         </td>
         {showTags && (
-          <td className="px-3 py-4 text-sm text-gray-500 relative">
+          <td className="px-3 py-4 text-sm text-[rgb(var(--ec-page-text-muted))] relative">
             <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
             <div className="flex flex-wrap gap-1">
               {tags.length > 0
                 ? tags.map((tag, index) => (
                     <span
                       key={`${tag}-${index}`}
-                      className="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+                      className="inline-flex items-center rounded-md bg-[rgb(var(--ec-content-hover))] px-2 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] ring-1 ring-inset ring-[rgb(var(--ec-page-border))]"
                     >
                       {tag}
                     </span>
@@ -75,14 +75,14 @@ const ResourceRow = memo(
           </td>
         )}
         {showOwners && (
-          <td className="px-3 py-4 text-sm text-gray-500 relative">
+          <td className="px-3 py-4 text-sm text-[rgb(var(--ec-page-text-muted))] relative">
             <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
             <div className="flex flex-wrap gap-1">
               {owners.length > 0
                 ? owners.map((owner, index) => (
                     <span
                       key={`${owner.id || owner.name}-${index}`}
-                      className="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+                      className="inline-flex items-center rounded-md bg-[rgb(var(--ec-content-hover))] px-2 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] ring-1 ring-inset ring-[rgb(var(--ec-page-border))]"
                     >
                       {owner.name || owner.id}
                     </span>
@@ -119,8 +119,8 @@ const FilterButton = memo(
       }}
       className={`px-3 py-1 rounded-md text-sm font-medium ${
         typeFilter === type
-          ? 'bg-black text-white border border-gray-200 hover:bg-gray-900'
-          : 'bg-white text-black border border-gray-200 hover:bg-gray-100'
+          ? 'bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-button-bg-hover))]'
+          : 'bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))]'
       }`}
     >
       {label} ({count})
@@ -217,13 +217,13 @@ const ResourceGroupTable = (props: ResourceGroupTableProps) => {
 
   return (
     <div className="mx-auto not-prose py-4 space-y-4 my-4">
-      {title && <h2 className="text-2xl font-semibold">{title}</h2>}
-      <div className="flow-root bg-white border-gray-200 border p-4 pb-2 rounded-lg text-gray-900">
+      {title && <h2 className="text-2xl font-semibold text-[rgb(var(--ec-page-text))]">{title}</h2>}
+      <div className="flow-root bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border-[rgb(var(--ec-page-border))] border p-4 pb-2 rounded-lg text-[rgb(var(--ec-page-text))]">
         <div className="space-y-4">
           <h2 className="text-xl font-semibold">
             {subtitle} ({searchTerm || typeFilter ? `${filteredResources.length}/${resources.length}` : resources.length})
           </h2>
-          <span className="text-sm text-gray-700">{description}</span>
+          <span className="text-sm text-[rgb(var(--ec-page-text-muted))]">{description}</span>
 
           {/* Type filter buttons - only shown if there are filter options */}
           {filterButtons.length > 0 && (
@@ -244,7 +244,12 @@ const ResourceGroupTable = (props: ResourceGroupTableProps) => {
 
           <div className="relative">
             <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-              <svg className="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <svg
+                className="h-5 w-5 text-[rgb(var(--ec-icon-color))]"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
                 <path
                   fillRule="evenodd"
                   d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
@@ -260,7 +265,7 @@ const ResourceGroupTable = (props: ResourceGroupTableProps) => {
                 setCurrentPage(1); // Reset to first page when searching
               }}
               placeholder="Search by name, type, description, or tags..."
-              className="block w-full rounded-md border-0 py-1.5 pl-10 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+              className="block w-full rounded-md border-0 py-1.5 pl-10 pr-10 bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] ring-1 ring-inset ring-[rgb(var(--ec-input-border))] placeholder:text-[rgb(var(--ec-input-placeholder))] focus:ring-2 focus:ring-inset focus:ring-[rgb(var(--ec-accent))] sm:text-sm sm:leading-6"
             />
             {searchTerm && (
               <button
@@ -271,7 +276,11 @@ const ResourceGroupTable = (props: ResourceGroupTableProps) => {
                 className="absolute inset-y-0 right-0 flex items-center pr-3"
                 aria-label="Clear search"
               >
-                <svg className="h-5 w-5 text-gray-400 hover:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
+                <svg
+                  className="h-5 w-5 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))]"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
                   <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                 </svg>
               </button>
@@ -281,40 +290,52 @@ 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-gray-300 rounded-sm bg-white">
+              <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)))]">
                 <thead>
                   <tr>
                     <th
                       scope="col"
-                      className={`${showTags || showOwners ? 'w-1/5' : 'w-1/4'} py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6`}
+                      className={`${showTags || showOwners ? 'w-1/5' : 'w-1/4'} py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-[rgb(var(--ec-page-text))] sm:pl-6`}
                     >
                       Name
                     </th>
-                    <th scope="col" className="w-[100px] px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                    <th
+                      scope="col"
+                      className="w-[100px] px-3 py-3.5 text-left text-sm font-semibold text-[rgb(var(--ec-page-text))]"
+                    >
                       Version
                     </th>
-                    <th scope="col" className="w-[100px] py-3.5 pl-3.5 pr-3 text-left text-sm font-semibold text-gray-900">
+                    <th
+                      scope="col"
+                      className="w-[100px] py-3.5 pl-3.5 pr-3 text-left text-sm font-semibold text-[rgb(var(--ec-page-text))]"
+                    >
                       Type
                     </th>
                     <th
                       scope="col"
-                      className={`${showTags && showOwners ? 'w-1/4' : showTags || showOwners ? 'w-1/3' : 'w-1/2'} px-3 py-3.5 text-left text-sm font-semibold text-gray-900`}
+                      className={`${showTags && showOwners ? 'w-1/4' : showTags || showOwners ? 'w-1/3' : 'w-1/2'} px-3 py-3.5 text-left text-sm font-semibold text-[rgb(var(--ec-page-text))]`}
                     >
                       Description
                     </th>
                     {showTags && (
-                      <th scope="col" className="w-1/6 px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                      <th
+                        scope="col"
+                        className="w-1/6 px-3 py-3.5 text-left text-sm font-semibold text-[rgb(var(--ec-page-text))]"
+                      >
                         Tags
                       </th>
                     )}
                     {showOwners && (
-                      <th scope="col" className="w-1/6 px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                      <th
+                        scope="col"
+                        className="w-1/6 px-3 py-3.5 text-left text-sm font-semibold text-[rgb(var(--ec-page-text))]"
+                      >
                         Owners
                       </th>
                     )}
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-gray-200">
+                <tbody className="divide-y divide-[rgb(var(--ec-page-border))]">
                   {paginatedResources.length > 0 ? (
                     paginatedResources.map((resource) => (
                       <ResourceRow
@@ -328,7 +349,7 @@ const ResourceGroupTable = (props: ResourceGroupTableProps) => {
                     <tr>
                       <td
                         colSpan={showTags && showOwners ? 6 : showTags || showOwners ? 5 : 4}
-                        className="text-center py-4 text-sm text-gray-500"
+                        className="text-center py-4 text-sm text-[rgb(var(--ec-page-text-muted))]"
                       >
                         No resources found
                       </td>
@@ -340,26 +361,26 @@ const ResourceGroupTable = (props: ResourceGroupTableProps) => {
           </div>
         </div>
         {totalPages > 1 && (
-          <div className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6 -mt-2">
+          <div className="flex items-center justify-between border-t border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] px-4 py-3 sm:px-6 -mt-2">
             <div className="flex flex-1 justify-between sm:hidden">
               <button
                 onClick={() => setCurrentPage(currentPage - 1)}
                 disabled={currentPage === 1}
-                className={`relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium ${currentPage === 1 ? 'text-gray-300' : 'text-gray-700 hover:bg-gray-50'}`}
+                className={`relative inline-flex items-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] px-4 py-2 text-sm font-medium ${currentPage === 1 ? 'text-[rgb(var(--ec-icon-color))]' : 'text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))]'}`}
               >
                 Previous
               </button>
               <button
                 onClick={() => setCurrentPage(currentPage + 1)}
                 disabled={currentPage === totalPages}
-                className={`relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium ${currentPage === totalPages ? 'text-gray-300' : 'text-gray-700 hover:bg-gray-50'}`}
+                className={`relative ml-3 inline-flex items-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] px-4 py-2 text-sm font-medium ${currentPage === totalPages ? 'text-[rgb(var(--ec-icon-color))]' : 'text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))]'}`}
               >
                 Next
               </button>
             </div>
             <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
               <div>
-                <p className="text-sm text-gray-700">
+                <p className="text-sm text-[rgb(var(--ec-page-text-muted))]">
                   Showing <span className="font-medium">{startIndex + 1}</span> to{' '}
                   <span className="font-medium">{Math.min(startIndex + itemsPerPage, filteredResources.length)}</span> of{' '}
                   <span className="font-medium">{filteredResources.length}</span> results
@@ -370,7 +391,7 @@ const ResourceGroupTable = (props: ResourceGroupTableProps) => {
                   <button
                     onClick={() => setCurrentPage(currentPage - 1)}
                     disabled={currentPage === 1}
-                    className={`relative inline-flex items-center rounded-l-md px-2 py-2 ${currentPage === 1 ? 'text-gray-300' : 'text-gray-400 hover:bg-gray-50'} ring-1 ring-inset ring-gray-300`}
+                    className={`relative inline-flex items-center rounded-l-md px-2 py-2 ${currentPage === 1 ? 'text-[rgb(var(--ec-icon-color))]' : 'text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-content-hover))]'} ring-1 ring-inset ring-[rgb(var(--ec-page-border))]`}
                   >
                     <span className="sr-only">Previous</span>
                     <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -384,7 +405,7 @@ const ResourceGroupTable = (props: ResourceGroupTableProps) => {
                   <button
                     onClick={() => setCurrentPage(currentPage + 1)}
                     disabled={currentPage === totalPages}
-                    className={`relative inline-flex items-center rounded-r-md px-2 py-2 ${currentPage === totalPages ? 'text-gray-300' : 'text-gray-400 hover:bg-gray-50'} ring-1 ring-inset ring-gray-300`}
+                    className={`relative inline-flex items-center rounded-r-md px-2 py-2 ${currentPage === totalPages ? 'text-[rgb(var(--ec-icon-color))]' : 'text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-content-hover))]'} ring-1 ring-inset ring-[rgb(var(--ec-page-border))]`}
                   >
                     <span className="sr-only">Next</span>
                     <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">

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

@@ -43,7 +43,7 @@ try {
 
 {
   !linkHasError && (
-    <a href={href} class="text-purple-500 hover:text-purple-700">
+    <a href={href} class="text-[rgb(var(--ec-accent))] hover:text-[rgb(var(--ec-accent-hover))]">
       {slotHTML}
     </a>
   )

package/eventcatalog/src/components/MDX/Steps/Step.astro

@@ -9,7 +9,7 @@ const { title } = Astro.props;
     </span>
     <h3 class="font-semibold text-lg ml-0">{title}</h3>
   </div>
-  <p class="text-gray-500 text-sm ml-4"><slot /></p>
+  <p class="text-[rgb(var(--ec-page-text-muted))] text-sm ml-4"><slot /></p>
 </li>
 
 <script>
@@ -26,7 +26,7 @@ const { title } = Astro.props;
 
 <style is:global>
   .step a {
-    color: #4b5563;
+    color: rgb(var(--ec-page-text-muted));
     text-decoration: underline;
     &:hover {
       color: #b977f9;

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

@@ -19,9 +19,9 @@ function splitByLi(html: string) {
 const data = splitByLi(html);
 ---
 
-<div class="bg-white text-gray-800 py-10 pb-0 font-sans not-prose">
-  {title && <h2 class="text-2xl font-bold text-gray-800 mb-6">{title}</h2>}
-  <ol class="relative border-l border-gray-200 ml-3">
+<div class="bg-[rgb(var(--ec-page-bg))] text-[rgb(var(--ec-page-text))] py-10 pb-0 font-sans not-prose">
+  {title && <h2 class="text-2xl font-bold text-[rgb(var(--ec-page-text))] mb-6">{title}</h2>}
+  <ol class="relative border-l border-[rgb(var(--ec-page-border))] ml-3">
     {data.map((item: any) => <Fragment set:html={item} />)}
   </ol>
 </div>

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

@@ -32,8 +32,8 @@ const tabItems: TabItem[] = await Promise.all(
 const tabsId = Math.random().toString(36).substring(2, 9);
 ---
 
-<div class="bg-white text-gray-800 pb-10 not-prose" data-tabs-container={tabsId}>
-  {title && <h2 class="text-2xl font-bold text-gray-800 mb-6">{title}</h2>}
+<div class="bg-[rgb(var(--ec-page-bg))] text-[rgb(var(--ec-page-text))] pb-10 not-prose" data-tabs-container={tabsId}>
+  {title && <h2 class="text-2xl font-bold text-[rgb(var(--ec-page-text))] mb-6">{title}</h2>}
 
   {/* Tab List */}
   <div class="">
@@ -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-gray-500 hover:text-gray-700 hover:border-gray-300 hover:bg-gray-100 focus:outline-none"
+            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"
             data-tab={item.id}
             aria-selected="false"
           >
@@ -70,22 +70,19 @@ const tabsId = Math.random().toString(36).substring(2, 9);
     const panels: NodeListOf<HTMLElement> = container.querySelectorAll('[data-tab-content]');
 
     // Show first tab by default
-    tabs[0]?.classList.add('text-purple-600', 'border-purple-600');
-    tabs[0]?.classList.remove('text-gray-500', 'border-transparent');
+    tabs[0]?.classList.add('tab-active');
     panels[0]?.classList.remove('hidden');
 
     tabs.forEach((tab: HTMLButtonElement) => {
       tab.addEventListener('click', () => {
         // Remove active states
         tabs.forEach((t: HTMLButtonElement) => {
-          t.classList.remove('text-purple-600', 'border-purple-600');
-          t.classList.add('text-gray-500', 'border-transparent');
+          t.classList.remove('tab-active');
         });
         panels.forEach((p: HTMLElement) => p.classList.add('hidden'));
 
         // Set active states
-        tab.classList.remove('text-gray-500', 'border-transparent');
-        tab.classList.add('text-purple-600', 'border-purple-600');
+        tab.classList.add('tab-active');
 
         // Show corresponding panel
         const tabId = tab.getAttribute('data-tab');
@@ -103,3 +100,10 @@ const tabsId = Math.random().toString(36).substring(2, 9);
     });
   });
 </script>
+
+<style is:global>
+  .tab-button.tab-active {
+    color: rgb(var(--ec-accent));
+    border-color: rgb(var(--ec-accent));
+  }
+</style>

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

@@ -28,31 +28,43 @@ function startsWithProtocol(str: string) {
   <a
     href={startsWithProtocol(href) ? href : buildUrl(href)}
     target={openWindow ? '_blank' : '_self'}
-    class="block relative bg-white border border-gray-200 rounded-xl p-8 h-48 transition-all duration-300 ease-out hover:border-purple-300 hover:shadow-lg hover:shadow-purple-500/10 focus:outline-none focus:ring-2 focus:ring-purple-500 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-none 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">
       <!-- Squared paper grid behind icon -->
-      <div
-        class="absolute inset-0 opacity-15"
-        style="background-image:
-        linear-gradient(rgba(147, 51, 234, 0.2) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(147, 51, 234, 0.2) 1px, transparent 1px);
-        background-size: 16px 16px;"
-      >
-      </div>
-
-      {IconComponent && <IconComponent className="relative w-16 h-16 text-purple-600 stroke-1" />}
+      <div class="tile-grid absolute inset-0 opacity-15"></div>
+
+      {IconComponent && <IconComponent className="tile-icon relative w-16 h-16 stroke-1" />}
     </div>
   </a>
 
   <!-- Title and description outside card -->
   <div class="mt-4 space-y-0">
-    <h2 class="text-gray-900 text-lg font-semibold">
+    <h2 class="text-[rgb(var(--ec-page-text))] text-lg font-semibold">
       {title}
     </h2>
-    <p class="text-gray-600 text-sm leading-relaxed">
+    <p class="text-[rgb(var(--ec-page-text-muted))] text-sm leading-relaxed">
       {description}
     </p>
   </div>
 </div>
+
+<style>
+  .tile-card:hover {
+    box-shadow:
+      0 10px 15px -3px rgb(var(--ec-accent) / 0.1),
+      0 4px 6px -4px rgb(var(--ec-accent) / 0.1);
+  }
+
+  .tile-grid {
+    background-image:
+      linear-gradient(rgb(var(--ec-accent) / 0.2) 1px, transparent 1px),
+      linear-gradient(90deg, rgb(var(--ec-accent) / 0.2) 1px, transparent 1px);
+    background-size: 16px 16px;
+  }
+
+  .tile-icon {
+    color: rgb(var(--ec-accent));
+  }
+</style>

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

@@ -3,7 +3,7 @@ const { title, columns = 2 } = Astro.props;
 ---
 
 <section class="not-prose my-8">
-  {title && <h2 class="text-2xl font-bold text-gray-800 mb-6">{title}</h2>}
+  {title && <h2 class="text-2xl font-bold text-[rgb(var(--ec-page-text))] mb-6">{title}</h2>}
   <div class={`grid grid-cols-1 md:grid-cols-${columns} gap-6 w-full not-prose`}>
     <slot />
   </div>

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

@@ -1,4 +1,5 @@
-import { ChevronUpIcon, ChevronDownIcon, ClipboardDocumentIcon } from '@heroicons/react/24/outline';
+import { ChevronUpIcon, ChevronDownIcon, ClipboardDocumentIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { CommandLineIcon, LockClosedIcon } from '@heroicons/react/24/solid';
 import type { SchemaItem } from './types';
 
 interface ApiAccessSectionProps {
@@ -27,109 +28,113 @@ export default function ApiAccessSection({
     apiPath = `/api/schemas/${message.collection}/${message.data.id}/${message.data.version}`;
   }
 
-  const curlCommand = typeof window !== 'undefined' ? `curl -X GET "${window.location.origin}${apiPath}"` : '';
+  const fullUrl = typeof window !== 'undefined' ? `${window.location.origin}${apiPath}` : apiPath;
+  const curlCommand = `curl ${fullUrl}`;
+  const isCopied = copiedId === `${message.data.id}-api`;
 
   return (
-    <div className="flex-shrink-0 border-b border-gray-200">
+    <div className="flex-shrink-0 border-b border-gray-100">
       <button
         onClick={onToggle}
-        className="w-full flex items-center justify-between px-4 py-1.5 text-left hover:bg-gray-50 transition-colors"
+        className="w-full flex items-center justify-between px-4 py-2 text-left hover:bg-gray-50/50 transition-colors"
       >
         <div className="flex items-center gap-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-4 w-4 text-gray-600"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-            />
-          </svg>
-          <span className="text-xs font-semibold text-gray-900">API Access</span>
-          <span className="inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-800">
-            Scale
-          </span>
+          <CommandLineIcon className="h-3.5 w-3.5 text-gray-700" />
+          <span className="text-xs font-medium text-gray-700">API</span>
+          {!apiAccessEnabled && (
+            <span className="inline-flex items-center gap-1 rounded bg-[rgb(var(--ec-accent-subtle))] px-1.5 py-0.5 text-[10px] font-medium text-[rgb(var(--ec-accent-text))] border border-[rgb(var(--ec-accent)/0.2)]">
+              <LockClosedIcon className="h-2.5 w-2.5" />
+              Scale
+            </span>
+          )}
         </div>
-        {isExpanded ? <ChevronUpIcon className="h-4 w-4 text-gray-600" /> : <ChevronDownIcon className="h-4 w-4 text-gray-600" />}
+        {isExpanded ? (
+          <ChevronUpIcon className="h-3.5 w-3.5 text-gray-400" />
+        ) : (
+          <ChevronDownIcon className="h-3.5 w-3.5 text-gray-400" />
+        )}
       </button>
 
       {isExpanded && (
-        <div className="px-4 pb-2 bg-gray-50">
+        <div className="px-4 pb-3">
           {apiAccessEnabled ? (
-            <>
-              <p className="text-xs text-gray-600 mb-2">Access this schema programmatically via API</p>
-              <div className="bg-gray-900 rounded-md p-3">
-                <div className="flex items-start justify-between mb-2">
-                  <span className="text-xs text-gray-400 font-mono">GET</span>
-                  <button
-                    onClick={() => onCopy(curlCommand, `${message.data.id}-api`)}
-                    className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-gray-300 hover:text-white transition-colors"
-                    title="Copy curl command"
-                  >
-                    <ClipboardDocumentIcon className="h-3.5 w-3.5" />
-                    {copiedId === `${message.data.id}-api` ? 'Copied!' : 'Copy'}
-                  </button>
-                </div>
-                <code className="block text-xs text-green-400 font-mono break-all">{apiPath}</code>
-                <div className="mt-3 pt-3 border-t border-gray-700">
-                  <p className="text-xs text-gray-400 mb-2">Example:</p>
-                  <code className="block text-xs text-gray-300 font-mono whitespace-pre-wrap break-all">{curlCommand}</code>
-                </div>
+            <div className="space-y-2">
+              {/* Endpoint */}
+              <div className="flex items-center gap-2 bg-gray-900 rounded-md px-3 py-2">
+                <span className="text-[10px] font-semibold text-emerald-400 uppercase tracking-wide">GET</span>
+                <code className="flex-1 text-[11px] text-gray-300 font-mono truncate">{apiPath}</code>
+                <button
+                  onClick={() => onCopy(fullUrl, `${message.data.id}-api`)}
+                  className={`flex-shrink-0 p-1 rounded transition-colors ${
+                    isCopied ? 'text-emerald-400' : 'text-gray-500 hover:text-gray-300'
+                  }`}
+                  title="Copy URL"
+                >
+                  {isCopied ? <CheckIcon className="h-3.5 w-3.5" /> : <ClipboardDocumentIcon className="h-3.5 w-3.5" />}
+                </button>
+              </div>
+
+              {/* Quick copy buttons */}
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => onCopy(curlCommand, `${message.data.id}-curl`)}
+                  className={`inline-flex items-center gap-1.5 px-2 py-1 text-[10px] font-medium rounded border transition-colors ${
+                    copiedId === `${message.data.id}-curl`
+                      ? 'bg-emerald-50 text-emerald-600 border-emerald-200'
+                      : 'text-gray-500 border-gray-200 hover:bg-gray-50 hover:text-gray-700'
+                  }`}
+                >
+                  {copiedId === `${message.data.id}-curl` ? (
+                    <>
+                      <CheckIcon className="h-3 w-3" />
+                      Copied
+                    </>
+                  ) : (
+                    <>
+                      <ClipboardDocumentIcon className="h-3 w-3" />
+                      Copy cURL
+                    </>
+                  )}
+                </button>
+                <button
+                  onClick={() => onCopy(fullUrl, `${message.data.id}-url`)}
+                  className={`inline-flex items-center gap-1.5 px-2 py-1 text-[10px] font-medium rounded border transition-colors ${
+                    copiedId === `${message.data.id}-url`
+                      ? 'bg-emerald-50 text-emerald-600 border-emerald-200'
+                      : 'text-gray-500 border-gray-200 hover:bg-gray-50 hover:text-gray-700'
+                  }`}
+                >
+                  {copiedId === `${message.data.id}-url` ? (
+                    <>
+                      <CheckIcon className="h-3 w-3" />
+                      Copied
+                    </>
+                  ) : (
+                    <>
+                      <ClipboardDocumentIcon className="h-3 w-3" />
+                      Copy URL
+                    </>
+                  )}
+                </button>
               </div>
-            </>
+            </div>
           ) : (
-            <div className="bg-white border border-purple-200 rounded-md p-4">
-              <div className="flex items-start gap-3">
-                <div className="flex-shrink-0">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-5 w-5 text-purple-600"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-                    />
-                  </svg>
-                </div>
-                <div className="flex-1">
-                  <h4 className="text-sm font-semibold text-gray-900 mb-1">Upgrade to Scale</h4>
-                  <p className="text-xs text-gray-600 mb-3">
-                    Access your schemas programmatically via API. Perfect for CI/CD pipelines, automation, and integrations.
-                  </p>
-                  <a
-                    href="https://eventcatalog.cloud"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-purple-600 rounded-md hover:bg-purple-700 transition-colors"
-                  >
-                    Start 14-day free trial
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      className="h-3.5 w-3.5"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                      />
-                    </svg>
-                  </a>
-                </div>
+            <div className="flex items-center justify-between gap-3 bg-[rgb(var(--ec-accent-subtle))] border border-[rgb(var(--ec-accent)/0.2)] rounded-md px-3 py-2.5">
+              <div className="flex-1 min-w-0">
+                <p className="text-xs font-medium text-gray-700">Access schemas via API</p>
+                <p className="text-[10px] text-gray-500 mt-0.5">CI/CD, automation & integrations</p>
               </div>
+              <a
+                href="https://eventcatalog.cloud"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex-shrink-0 inline-flex items-center gap-1 px-2.5 py-1.5 text-[11px] font-medium text-white bg-[rgb(var(--ec-accent))] rounded-md hover:bg-[rgb(var(--ec-accent-hover))] transition-colors"
+              >
+                Try Scale
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                </svg>
+              </a>
             </div>
           )}
         </div>