@eventcatalog/core 3.0.0 → 3.2.0

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

@@ -114,14 +114,14 @@ const AvroField = ({ field, level, expand, showRequired }: AvroFieldProps) => {
   }, [expand]);
 
   return (
-    <div className={`avro-field-container mb-2 border-l border-gray-200 ${indentClass}`}>
+    <div className={`avro-field-container mb-2 border-l border-[rgb(var(--ec-page-border))] ${indentClass}`}>
       <div className="flex space-x-2">
         {/* Collapse/Expand button */}
         <div className="flex-shrink-0 w-4 pt-0.5">
           {hasNested ? (
             <button
               onClick={() => setIsExpanded(!isExpanded)}
-              className="avro-field-toggle text-gray-500 hover:text-gray-700 w-4 text-center"
+              className="avro-field-toggle text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] w-4 text-center"
               aria-expanded={isExpanded}
             >
               <span className="font-mono text-xs">{isExpanded ? '▼' : '▶'}</span>
@@ -132,19 +132,21 @@ const AvroField = ({ field, level, expand, showRequired }: AvroFieldProps) => {
         {/* Field details */}
         <div className="flex-grow min-w-0">
           <div className="flex flex-wrap items-baseline gap-x-1.5 gap-y-1">
-            <span className="avro-field-name font-semibold text-gray-800 text-sm">{field.name}</span>
-            <span className="text-purple-600 font-mono text-xs">{formatAvroType(field.type)}</span>
-            {showRequired && isRequired && <span className="text-red-600 text-xs ml-auto flex-shrink-0">required</span>}
+            <span className="avro-field-name font-semibold text-[rgb(var(--ec-page-text))] text-sm">{field.name}</span>
+            <span className="text-[rgb(var(--ec-accent))] font-mono text-xs">{formatAvroType(field.type)}</span>
+            {showRequired && isRequired && (
+              <span className="text-red-600 dark:text-red-400 text-xs ml-auto flex-shrink-0">required</span>
+            )}
           </div>
 
-          {field.doc && <p className="text-gray-600 text-xs mt-1">{field.doc}</p>}
+          {field.doc && <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-1">{field.doc}</p>}
 
           {/* Show enum values if present */}
           {field.type?.type === 'enum' && field.type.symbols && (
-            <div className="text-xs text-gray-500 mt-1">
+            <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-1">
               Values:{' '}
               {field.type.symbols.map((s: string) => (
-                <code key={s} className="bg-gray-100 px-1 rounded mx-0.5">
+                <code key={s} className="bg-[rgb(var(--ec-content-hover))] px-1 rounded mx-0.5 text-[rgb(var(--ec-page-text))]">
                   {s}
                 </code>
               ))}
@@ -303,7 +305,7 @@ export default function AvroSchemaViewer({
 
   if (!schema || schema.type !== 'record') {
     return (
-      <div className="flex items-center justify-center p-8 text-gray-500">
+      <div className="flex items-center justify-center p-8 text-[rgb(var(--ec-page-text-muted))]">
         <p className="text-sm">Invalid Avro schema format</p>
       </div>
     );
@@ -318,12 +320,12 @@ export default function AvroSchemaViewer({
 
   return (
     <div
-      className={`${heightClass} ${overflowClass} flex flex-col bg-white border border-gray-100 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-sm`}
       style={containerStyle}
     >
       {/* Toolbar */}
       {searchBool && (
-        <div className="flex-shrink-0 bg-white pt-4 px-4 pb-3 border-b border-gray-100 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-sm">
           <div className="flex flex-col sm:flex-row gap-3">
             <div className="flex-1 relative">
               <input
@@ -332,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-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 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-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-transparent"
                 onKeyDown={(e) => {
                   if (e.key === 'Enter') {
                     e.preventDefault();
@@ -348,7 +350,7 @@ export default function AvroSchemaViewer({
                 <button
                   onClick={handlePrevMatch}
                   disabled={currentMatches.length === 0 || currentMatchIndex <= 0}
-                  className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed"
+                  className="p-1 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed"
                   title="Previous match"
                 >
                   <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -358,7 +360,7 @@ export default function AvroSchemaViewer({
                 <button
                   onClick={handleNextMatch}
                   disabled={currentMatches.length === 0 || currentMatchIndex >= currentMatches.length - 1}
-                  className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed"
+                  className="p-1 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed"
                   title="Next match"
                 >
                   <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -371,7 +373,7 @@ export default function AvroSchemaViewer({
               {onOpenFullscreen && (
                 <button
                   onClick={onOpenFullscreen}
-                  className="px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500"
+                  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))]"
                   title="Open in fullscreen"
                 >
                   <svg
@@ -392,23 +394,23 @@ export default function AvroSchemaViewer({
               )}
               <button
                 onClick={handleExpandAll}
-                className="px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500"
+                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))]"
               >
                 Expand All
               </button>
               <button
                 onClick={handleCollapseAll}
-                className="px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500"
+                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))]"
               >
                 Collapse All
               </button>
-              <div className="text-xs text-gray-500">
+              <div className="text-xs text-[rgb(var(--ec-page-text-muted))]">
                 {totalFields} {totalFields === 1 ? 'field' : 'fields'}
               </div>
             </div>
           </div>
           {searchQuery && (
-            <div className="mt-2 text-xs text-gray-600">
+            <div className="mt-2 text-xs text-[rgb(var(--ec-page-text-muted))]">
               {currentMatches.length > 0
                 ? `${currentMatchIndex + 1} of ${currentMatches.length} ${currentMatches.length === 1 ? 'match' : 'matches'}`
                 : 'No fields found'}
@@ -420,11 +422,13 @@ export default function AvroSchemaViewer({
       {/* Schema info */}
       <div className="px-4 pt-4">
         <div className="flex items-baseline gap-2 mb-2">
-          <span className="text-sm font-medium text-gray-600">Record:</span>
-          <span className="font-mono text-sm text-blue-600">{schema.name}</span>
-          {schema.namespace && <span className="font-mono text-xs text-gray-500">({schema.namespace})</span>}
+          <span className="text-sm font-medium text-[rgb(var(--ec-page-text-muted))]">Record:</span>
+          <span className="font-mono text-sm text-blue-600 dark:text-blue-400">{schema.name}</span>
+          {schema.namespace && (
+            <span className="font-mono text-xs text-[rgb(var(--ec-page-text-muted))]">({schema.namespace})</span>
+          )}
         </div>
-        {schema.doc && <p className="text-gray-600 text-xs mb-4">{schema.doc}</p>}
+        {schema.doc && <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mb-4">{schema.doc}</p>}
       </div>
 
       {/* Fields */}
@@ -434,14 +438,14 @@ export default function AvroSchemaViewer({
             <AvroField key={field.name} field={field} level={0} expand={expandAll} showRequired={showRequiredBool} />
           ))
         ) : (
-          <div className="text-center py-8 text-gray-400">
+          <div className="text-center py-8 text-[rgb(var(--ec-icon-color))]">
             <p className="text-sm">No fields defined</p>
           </div>
         )}
 
         {searchQuery && currentMatches.length === 0 && (
           <div className="text-center py-8">
-            <div className="text-gray-400 text-sm">
+            <div className="text-[rgb(var(--ec-icon-color))] text-sm">
               <svg className="mx-auto h-12 w-12 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"

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

@@ -55,12 +55,12 @@ export default function DiffViewer({ diffs, onOpenFullscreen, apiAccessEnabled =
           ))}
         </div>
       ) : (
-        <div className="bg-white border border-purple-200 rounded-lg p-8">
+        <div className="bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-accent)/0.3)] rounded-lg p-8">
           <div className="flex flex-col items-center text-center max-w-md mx-auto">
             <div className="flex-shrink-0 mb-4">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                className="h-16 w-16 text-purple-600"
+                className="h-16 w-16 text-[rgb(var(--ec-accent))]"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -82,7 +82,7 @@ export default function DiffViewer({ diffs, onOpenFullscreen, apiAccessEnabled =
               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-md 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-md hover:bg-[rgb(var(--ec-accent-hover))] transition-colors"
             >
               Start 14-day free trial
               <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">

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

@@ -225,7 +225,7 @@ const SchemaProperty = ({ name, details, isRequired, level, isListItem = false,
   const indentationClass = `pl-${level * 3}`;
 
   return (
-    <div className={`property-container mb-1.5 border-l border-gray-100 relative ${indentationClass}`}>
+    <div className={`property-container mb-1.5 border-l border-[rgb(var(--ec-page-border))] relative ${indentationClass}`}>
       <div className="flex items-start space-x-1.5">
         {isCollapsible ? (
           <button
@@ -233,7 +233,7 @@ const SchemaProperty = ({ name, details, isRequired, level, isListItem = false,
             aria-expanded={isExpanded}
             aria-controls={contentId}
             onClick={() => setIsExpanded(!isExpanded)}
-            className="property-toggle text-gray-500 hover:text-gray-700 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-none 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>
@@ -245,13 +245,15 @@ const SchemaProperty = ({ name, details, isRequired, level, isListItem = false,
         <div className="flex-grow">
           <div className="flex justify-between items-baseline">
             <div>
-              <span className="font-semibold text-gray-800 text-sm">{name}</span>
-              <span className="ml-1.5 text-purple-600 font-mono text-xs">
+              <span className="font-semibold text-[rgb(var(--ec-page-text))] text-sm">{name}</span>
+              <span className="ml-1.5 text-[rgb(var(--ec-accent))] font-mono text-xs">
                 {details.type}
                 {details.type === 'array' && details.items?.type ? `[${details.items.type}]` : ''}
                 {details.format ? `<${details.format}>` : ''}
-                {details._refPath && <span className="text-blue-600 ml-1">→ {details._refName || details._refPath}</span>}
-                {details._refNotFound && <span className="text-red-600 ml-1">❌ ref not found</span>}
+                {details._refPath && (
+                  <span className="text-blue-600 dark:text-blue-400 ml-1">→ {details._refName || details._refPath}</span>
+                )}
+                {details._refNotFound && <span className="text-red-600 dark:text-red-400 ml-1">❌ ref not found</span>}
                 {details.const !== undefined && (
                   <span>
                     constant: <code>{details.const}</code>
@@ -259,38 +261,53 @@ const SchemaProperty = ({ name, details, isRequired, level, isListItem = false,
                 )}
               </span>
             </div>
-            {isRequired && <span className="text-red-600 text-xs ml-3 flex-shrink-0">required</span>}
+            {isRequired && <span className="text-red-600 dark:text-red-400 text-xs ml-3 flex-shrink-0">required</span>}
           </div>
 
-          {details.description && <p className="text-gray-500 text-xs mt-0.5">{details.description}</p>}
+          {details.description && <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-0.5">{details.description}</p>}
           {details.title && details.title !== details.description && (
-            <p className="text-gray-500 text-xs mt-0.5 italic">Title: {details.title}</p>
+            <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-0.5 italic">Title: {details.title}</p>
           )}
 
-          <div className="text-xs text-gray-500 mt-0.5 space-y-0">
+          <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-0.5 space-y-0">
             {details.pattern && (
               <div>
-                Match pattern: <code className="bg-gray-100 px-1 rounded text-gray-800 font-thin py-0.5">{details.pattern}</code>
+                Match pattern:{' '}
+                <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                  {details.pattern}
+                </code>
               </div>
             )}
             {details.minimum !== undefined && (
               <div>
-                Minimum: <code className="bg-gray-100 px-1 rounded text-gray-800 font-thin py-0.5">{details.minimum}</code>
+                Minimum:{' '}
+                <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                  {details.minimum}
+                </code>
               </div>
             )}
             {details.maximum !== undefined && (
               <div>
-                Maximum: <code className="bg-gray-100 px-1 rounded text-gray-800 font-thin py-0.5">{details.maximum}</code>
+                Maximum:{' '}
+                <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                  {details.maximum}
+                </code>
               </div>
             )}
             {details.minLength !== undefined && (
               <div>
-                Min length: <code className="bg-gray-100 px-1 rounded text-gray-800 font-thin py-0.5">{details.minLength}</code>
+                Min length:{' '}
+                <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                  {details.minLength}
+                </code>
               </div>
             )}
             {details.maxLength !== undefined && (
               <div>
-                Max length: <code className="bg-gray-100 px-1 rounded text-gray-800 font-thin py-0.5">{details.maxLength}</code>
+                Max length:{' '}
+                <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                  {details.maxLength}
+                </code>
               </div>
             )}
             {details.enum && (
@@ -299,7 +316,9 @@ const SchemaProperty = ({ name, details, isRequired, level, isListItem = false,
                 {details.enum.map((val: any, idx: number) => (
                   <span key={idx} className="text-xs">
                     {' '}
-                    <code className="bg-gray-100 px-1 rounded text-gray-800 font-thin py-0.5">{val}</code>
+                    <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                      {val}
+                    </code>
                   </span>
                 ))}
               </div>
@@ -322,8 +341,8 @@ const SchemaProperty = ({ name, details, isRequired, level, isListItem = false,
                 ))}
 
               {hasArrayItemProperties && (
-                <div className="mt-1 border-l border-dashed border-gray-400 pl-3 ml-1.5">
-                  <span className="text-xs italic text-gray-500 block mb-1">Item Details:</span>
+                <div className="mt-1 border-l border-dashed border-[rgb(var(--ec-page-border))] pl-3 ml-1.5">
+                  <span className="text-xs italic text-[rgb(var(--ec-page-text-muted))] block mb-1">Item Details:</span>
                   {details.items.properties &&
                     Object.entries(details.items.properties).map(([itemPropName, itemPropDetails]: [string, any]) => (
                       <SchemaProperty
@@ -337,7 +356,7 @@ const SchemaProperty = ({ name, details, isRequired, level, isListItem = false,
                       />
                     ))}
                   {(details.items.allOf || details.items.oneOf || details.items.$ref) && !details.items.properties && (
-                    <div className="text-xs text-gray-500 mt-1">
+                    <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-1">
                       Complex array item schema detected. The properties should be processed by the parent SchemaViewer.
                     </div>
                   )}
@@ -514,7 +533,7 @@ export default function JSONSchemaViewer({
 
   if (!schema) {
     return (
-      <div className="flex items-center justify-center h-full text-gray-500 p-8">
+      <div className="flex items-center justify-center h-full text-[rgb(var(--ec-page-text-muted))] p-8">
         <p className="text-sm">Unable to parse JSON schema</p>
       </div>
     );
@@ -534,12 +553,12 @@ export default function JSONSchemaViewer({
   return (
     <div
       id={id}
-      className={`${heightClass} ${overflowClass} flex flex-col bg-white border border-gray-100 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-sm`}
       style={containerStyle}
     >
       {/* Toolbar */}
       {searchBool && (
-        <div className="flex-shrink-0 bg-white pt-4 px-4 mb-4 pb-3 border-b border-gray-100 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-sm">
           <div className="flex flex-col sm:flex-row gap-3">
             <div className="flex-1 relative">
               <input
@@ -548,7 +567,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-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 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-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-transparent"
                 onKeyDown={(e) => {
                   if (e.key === 'Enter') {
                     e.preventDefault();
@@ -564,7 +583,7 @@ export default function JSONSchemaViewer({
                 <button
                   onClick={handlePrevMatch}
                   disabled={currentMatches.length === 0 || currentMatchIndex <= 0}
-                  className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed"
+                  className="p-1 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed"
                   title="Previous match"
                 >
                   <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -574,7 +593,7 @@ export default function JSONSchemaViewer({
                 <button
                   onClick={handleNextMatch}
                   disabled={currentMatches.length === 0 || currentMatchIndex >= currentMatches.length - 1}
-                  className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed"
+                  className="p-1 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed"
                   title="Next match"
                 >
                   <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -587,7 +606,7 @@ export default function JSONSchemaViewer({
               {onOpenFullscreen && (
                 <button
                   onClick={onOpenFullscreen}
-                  className="px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500"
+                  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))]"
                   title="Open in fullscreen"
                 >
                   <svg
@@ -608,23 +627,23 @@ export default function JSONSchemaViewer({
               )}
               <button
                 onClick={handleExpandAll}
-                className="px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500"
+                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))]"
               >
                 Expand All
               </button>
               <button
                 onClick={handleCollapseAll}
-                className="px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500"
+                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))]"
               >
                 Collapse All
               </button>
-              <div className="text-xs text-gray-500">
+              <div className="text-xs text-[rgb(var(--ec-page-text-muted))]">
                 {totalProperties} {totalProperties === 1 ? 'property' : 'properties'}
               </div>
             </div>
           </div>
           {searchQuery && (
-            <div className="mt-2 text-xs text-gray-600">
+            <div className="mt-2 text-xs text-[rgb(var(--ec-page-text-muted))]">
               {currentMatches.length > 0
                 ? `${currentMatchIndex + 1} of ${currentMatches.length} ${currentMatches.length === 1 ? 'match' : 'matches'}`
                 : 'No properties found'}
@@ -636,26 +655,26 @@ export default function JSONSchemaViewer({
       {/* Content */}
       <div className="flex-1 px-4 pb-4 overflow-auto">
         {isRootArray && (
-          <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-md">
+          <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800 rounded-md">
             <div className="flex items-center space-x-2">
-              <span className="text-blue-600 font-medium text-sm">Array Schema</span>
-              <span className="text-blue-500 font-mono text-xs">array[object]</span>
+              <span className="text-blue-600 dark:text-blue-400 font-medium text-sm">Array Schema</span>
+              <span className="text-blue-500 dark:text-blue-400 font-mono text-xs">array[object]</span>
             </div>
-            <p className="text-blue-700 text-xs mt-1">
+            <p className="text-blue-700 dark:text-blue-300 text-xs mt-1">
               This schema defines an array of objects. Each item in the array has the properties shown below.
             </p>
           </div>
         )}
-        {description && <p className="text-gray-600 text-xs mb-5">{description}</p>}
+        {description && <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mb-5">{description}</p>}
 
         {variants && (
           <div className="mb-4">
             <div className="flex items-center space-x-2">
-              <span className="text-sm text-gray-600">(one of)</span>
+              <span className="text-sm text-[rgb(var(--ec-page-text-muted))]">(one of)</span>
               <select
                 value={selectedVariantIndex}
                 onChange={(e) => setSelectedVariantIndex(parseInt(e.target.value))}
-                className="form-select text-sm border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+                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)]"
               >
                 {variants.map((variant: any, index: number) => (
                   <option key={index} value={index}>
@@ -683,16 +702,16 @@ export default function JSONSchemaViewer({
             ))}
           </div>
         ) : !isRootArray ? (
-          <p className="text-gray-500 text-sm">Schema does not contain any properties.</p>
+          <p className="text-[rgb(var(--ec-page-text-muted))] text-sm">Schema does not contain any properties.</p>
         ) : (
           <div className="text-center py-8">
-            <div className="text-gray-500 text-sm">
+            <div className="text-[rgb(var(--ec-page-text-muted))] text-sm">
               <p>
                 This array contains items of type:{' '}
-                <span className="font-mono text-blue-600">{processedSchema.items?.type || 'unknown'}</span>
+                <span className="font-mono text-blue-600 dark:text-blue-400">{processedSchema.items?.type || 'unknown'}</span>
               </p>
               {processedSchema.items?.description && (
-                <p className="text-xs mt-2 text-gray-600">{processedSchema.items.description}</p>
+                <p className="text-xs mt-2 text-[rgb(var(--ec-page-text-muted))]">{processedSchema.items.description}</p>
               )}
             </div>
           </div>
@@ -700,7 +719,7 @@ export default function JSONSchemaViewer({
 
         {searchQuery && currentMatches.length === 0 && (
           <div className="text-center py-8">
-            <div className="text-gray-400 text-sm">
+            <div className="text-[rgb(var(--ec-page-text-muted))] text-sm">
               <svg className="mx-auto h-12 w-12 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"

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

@@ -14,23 +14,27 @@ export default function OwnersSection({ message, isExpanded, onToggle }: OwnersS
   if (owners.length === 0) return null;
 
   return (
-    <div className="flex-shrink-0 border-b border-gray-200">
+    <div className="flex-shrink-0 border-b border-[rgb(var(--ec-page-border))]">
       <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-1.5 text-left hover:bg-[rgb(var(--ec-content-hover))] transition-colors"
       >
         <div className="flex items-center gap-2">
-          <UserIcon className="h-4 w-4 text-gray-600" />
-          <span className="text-xs font-semibold text-gray-900">Owners</span>
-          <span className="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700">
+          <UserIcon className="h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" />
+          <span className="text-xs font-semibold text-[rgb(var(--ec-page-text))]">Owners</span>
+          <span className="inline-flex items-center rounded-full bg-[rgb(var(--ec-content-hover))] px-2 py-0.5 text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">
             {owners.length}
           </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-4 w-4 text-[rgb(var(--ec-page-text-muted))]" />
+        ) : (
+          <ChevronDownIcon className="h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" />
+        )}
       </button>
 
       {isExpanded && (
-        <div className="px-4 pb-2 bg-gray-50">
+        <div className="px-4 pb-2 bg-[rgb(var(--ec-content-hover))]">
           <div className="flex flex-wrap gap-2">
             {owners.map((owner: Owner, idx: number) => {
               const Icon = owner.type === 'users' ? UserIcon : UserGroupIcon;
@@ -38,10 +42,10 @@ 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-gray-700 bg-white border border-gray-200 rounded-full hover:border-gray-300 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-sm transition-all"
                   title={owner.name}
                 >
-                  <div className="flex items-center justify-center w-5 h-5 bg-gradient-to-b from-purple-500 to-purple-600 rounded-full">
+                  <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">
                     <Icon className="h-3 w-3 text-white" />
                   </div>
                   <span className="font-medium">{owner.name}</span>

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

@@ -10,12 +10,12 @@ export default function Pagination({ currentPage, totalPages, onPageChange }: Pa
   if (totalPages <= 1) return null;
 
   return (
-    <div className="flex-shrink-0 border-t border-gray-100 px-3 py-1.5 bg-gray-50/50">
+    <div className="flex-shrink-0 border-t border-[rgb(var(--ec-page-border))] px-3 py-1.5 bg-[rgb(var(--ec-content-hover))]">
       <div className="flex items-center justify-between">
         <button
           onClick={() => onPageChange(Math.max(1, currentPage - 1))}
           disabled={currentPage === 1}
-          className="inline-flex items-center gap-0.5 px-1.5 py-1 text-xs font-medium text-gray-500 hover:text-gray-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+          className="inline-flex items-center gap-0.5 px-1.5 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
         >
           <ChevronLeftIcon className="h-3.5 w-3.5" />
           Prev
@@ -37,7 +37,9 @@ export default function Pagination({ currentPage, totalPages, onPageChange }: Pa
                 key={pageNum}
                 onClick={() => onPageChange(pageNum)}
                 className={`w-6 h-6 text-[11px] font-medium rounded transition-all tabular-nums ${
-                  currentPage === pageNum ? 'bg-gray-900 text-white' : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700'
+                  currentPage === pageNum
+                    ? 'bg-[rgb(var(--ec-accent))] text-white'
+                    : 'text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))]'
                 }`}
               >
                 {pageNum}
@@ -48,7 +50,7 @@ export default function Pagination({ currentPage, totalPages, onPageChange }: Pa
         <button
           onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
           disabled={currentPage === totalPages}
-          className="inline-flex items-center gap-0.5 px-1.5 py-1 text-xs font-medium text-gray-500 hover:text-gray-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+          className="inline-flex items-center gap-0.5 px-1.5 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
         >
           Next
           <ChevronRightIcon className="h-3.5 w-3.5" />