@eventcatalog/core 3.0.0 → 3.2.0

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

@@ -224,7 +224,7 @@ export default function StepWalkthrough({
           <select
             value={selectedPathIndex}
             onChange={(e: React.ChangeEvent<HTMLSelectElement>) => handlePathSelection(parseInt(e.target.value))}
-            className="w-full px-3 py-2 text-xs border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+            className="w-full px-3 py-2 text-xs border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-[rgb(var(--ec-accent))]"
           >
             {availablePaths.map((path, index) => {
               // @ts-ignore
@@ -256,7 +256,7 @@ export default function StepWalkthrough({
             <div className="flex-1"></div>
             <button
               onClick={handleNextStep}
-              className="flex items-center justify-center px-6 py-2 text-xs font-medium bg-purple-600 text-white rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-colors"
+              className="flex items-center justify-center px-6 py-2 text-xs font-medium bg-[rgb(var(--ec-accent))] text-white rounded-md hover:bg-[rgb(var(--ec-accent-hover))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 transition-colors"
             >
               Start
             </button>
@@ -266,7 +266,7 @@ export default function StepWalkthrough({
           <>
             <button
               onClick={handlePreviousStep}
-              className="flex items-center justify-center px-4 py-2 text-xs font-medium bg-purple-600 text-white rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-colors"
+              className="flex items-center justify-center px-4 py-2 text-xs font-medium bg-[rgb(var(--ec-accent))] text-white rounded-md hover:bg-[rgb(var(--ec-accent-hover))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 transition-colors"
             >
               <ChevronLeftIcon className="w-4 h-4 mr-1" />
               Previous
@@ -275,7 +275,7 @@ export default function StepWalkthrough({
             {availablePaths.length > 0 ? (
               <button
                 onClick={handleNextStep}
-                className="flex items-center justify-center px-4 py-2 text-xs font-medium bg-purple-600 text-white rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-colors"
+                className="flex items-center justify-center px-4 py-2 text-xs font-medium bg-[rgb(var(--ec-accent))] text-white rounded-md hover:bg-[rgb(var(--ec-accent-hover))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 transition-colors"
               >
                 Next
                 <ChevronRightIcon className="w-4 h-4 ml-1" />

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

@@ -55,7 +55,7 @@ const StudioModal: React.FC<StudioModalProps> = ({ isOpen, onClose }) => {
             Import your diagram into{' '}
             <a
               href="https://eventcatalog.studio"
-              className="text-purple-600 hover:text-purple-700 underline"
+              className="text-[rgb(var(--ec-accent))] hover:text-[rgb(var(--ec-accent-hover))] underline"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -90,7 +90,7 @@ const StudioModal: React.FC<StudioModalProps> = ({ isOpen, onClose }) => {
               </button>
             </div>
 
-            <div className="bg-purple-50 rounded-lg p-4 border border-purple-200">
+            <div className="bg-[rgb(var(--ec-accent-subtle))] rounded-lg p-4 border border-[rgb(var(--ec-accent)/0.3)]">
               <h4 className="text-sm font-bold text-gray-900 mb-2">Step 2: Open EventCatalog Studio</h4>
               <p className="text-xs text-gray-600 mb-3">
                 Go to EventCatalog Studio and import your design using the "Import from EventCatalog" button.
@@ -98,7 +98,7 @@ const StudioModal: React.FC<StudioModalProps> = ({ isOpen, onClose }) => {
 
               <button
                 onClick={handleOpenStudio}
-                className="w-full flex items-center justify-center space-x-2 px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-md hover:bg-purple-700 transition-colors"
+                className="w-full flex items-center justify-center space-x-2 px-4 py-2 bg-[rgb(var(--ec-accent))] text-white text-sm font-medium rounded-md hover:bg-[rgb(var(--ec-accent-hover))] transition-colors"
               >
                 <ExternalLinkIcon className="w-4 h-4" />
                 <span>Open EventCatalog Studio</span>
@@ -113,7 +113,7 @@ const StudioModal: React.FC<StudioModalProps> = ({ isOpen, onClose }) => {
             <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-purple-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-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 transition-colors"
                 onClick={onClose}
               >
                 Close

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

@@ -214,7 +214,7 @@ const VisualiserSearch = forwardRef<VisualiserSearchRef, VisualiserSearchProps>(
             onChange={handleSearchChange}
             onKeyDown={handleSearchKeyDown}
             onFocus={handleSearchFocus}
-            className="w-full px-4 py-2 pr-10 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            className="w-full px-4 py-2 pr-10 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-transparent"
           />
           {searchQuery && (
             <button
@@ -238,7 +238,7 @@ const VisualiserSearch = forwardRef<VisualiserSearchRef, VisualiserSearchProps>(
                   key={node.id}
                   onClick={() => handleSuggestionClick(node)}
                   className={`px-4 py-2 cursor-pointer flex items-center justify-between hover:bg-gray-100 ${
-                    index === selectedSuggestionIndex ? 'bg-purple-50' : ''
+                    index === selectedSuggestionIndex ? 'bg-[rgb(var(--ec-accent-subtle))]' : ''
                   }`}
                 >
                   <span className="text-sm font-medium text-gray-900">{nodeName}</span>

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

@@ -42,7 +42,7 @@ export default function ApiAccessSection({
           <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-purple-50 px-1.5 py-0.5 text-[10px] font-medium text-purple-600 border border-purple-100">
+            <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>
@@ -119,7 +119,7 @@ export default function ApiAccessSection({
               </div>
             </div>
           ) : (
-            <div className="flex items-center justify-between gap-3 bg-gradient-to-r from-purple-50 to-indigo-50 border border-purple-100 rounded-md px-3 py-2.5">
+            <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>
@@ -128,7 +128,7 @@ export default function ApiAccessSection({
                 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-purple-600 rounded-md hover:bg-purple-700 transition-colors"
+                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">

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

@@ -26,8 +26,8 @@ export default function ApiContentViewer({ message, onCopy, copiedId, apiAccessE
     return (
       <div className="h-full flex items-center justify-center p-8">
         <div className="max-w-md text-center">
-          <div className="flex items-center justify-center w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-purple-100 to-indigo-100 border border-purple-200">
-            <LockClosedIcon className="h-8 w-8 text-purple-600" />
+          <div className="flex items-center justify-center w-16 h-16 mx-auto mb-4 rounded-2xl bg-[rgb(var(--ec-accent-subtle))] border border-[rgb(var(--ec-accent)/0.3)]">
+            <LockClosedIcon className="h-8 w-8 text-[rgb(var(--ec-accent))]" />
           </div>
           <h3 className="text-lg font-semibold text-gray-900 mb-2">API Access</h3>
           <p className="text-sm text-gray-600 mb-6">
@@ -38,7 +38,7 @@ export default function ApiContentViewer({ message, onCopy, copiedId, apiAccessE
             href="https://eventcatalog.cloud"
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors"
+            className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-[rgb(var(--ec-accent))] rounded-lg hover:bg-[rgb(var(--ec-accent-hover))] transition-colors"
           >
             Upgrade to Scale
             <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">