@eventcatalog/core 3.0.0 → 3.2.0

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

@@ -25,26 +25,32 @@ export default function SchemaListItem({ message, isSelected, versions, onClick,
       ref={itemRef}
       onClick={onClick}
       className={`w-full text-left px-3 py-2 transition-all duration-75 group border-l-2 ${
-        isSelected ? `bg-${color}-50 border-l-${color}-500` : 'hover:bg-gray-50 border-l-transparent'
+        isSelected
+          ? `bg-${color}-50 dark:bg-${color}-500/10 border-l-${color}-500`
+          : 'hover:bg-[rgb(var(--ec-content-hover))] border-l-transparent'
       }`}
     >
       <div className="flex items-center gap-2.5">
         {/* Collection Icon */}
         <div
           className={`flex-shrink-0 flex items-center justify-center w-7 h-7 rounded-md ${
-            isSelected ? `bg-${color}-100` : `bg-${color}-100/60`
+            isSelected ? `bg-${color}-100 dark:bg-${color}-500/20` : `bg-${color}-100/60 dark:bg-${color}-500/10`
           }`}
         >
-          <Icon className={`h-3.5 w-3.5 text-${color}-600`} />
+          <Icon className={`h-3.5 w-3.5 text-${color}-600 dark:text-${color}-400`} />
         </div>
 
         <div className="flex-1 min-w-0">
           {/* Name row with version */}
           <div className="flex items-center gap-1.5">
-            <span className={`text-[13px] font-semibold truncate ${isSelected ? 'text-gray-900' : 'text-gray-700'}`}>
+            <span
+              className={`text-[13px] font-semibold truncate ${isSelected ? 'text-[rgb(var(--ec-page-text))]' : 'text-[rgb(var(--ec-page-text))]'}`}
+            >
               {message.data.name}
             </span>
-            <span className={`text-[10px] tabular-nums flex-shrink-0 ${isSelected ? 'text-gray-500' : 'text-gray-400'}`}>
+            <span
+              className={`text-[10px] tabular-nums flex-shrink-0 ${isSelected ? 'text-[rgb(var(--ec-page-text-muted))]' : 'text-[rgb(var(--ec-icon-color))]'}`}
+            >
               v{message.data.version}
             </span>
           </div>
@@ -52,7 +58,9 @@ export default function SchemaListItem({ message, isSelected, versions, onClick,
           {/* Meta row */}
           <div className="flex items-center gap-1.5 mt-0.5">
             {/* Schema Format */}
-            <span className={`inline-flex items-center gap-1 text-[10px] ${isSelected ? 'text-gray-600' : 'text-gray-500'}`}>
+            <span
+              className={`inline-flex items-center gap-1 text-[10px] ${isSelected ? 'text-[rgb(var(--ec-page-text-muted))]' : 'text-[rgb(var(--ec-page-text-muted))]'}`}
+            >
               {hasSchemaIcon && (
                 <img src={buildUrl(`/icons/${iconName}.svg`, true)} alt={`${ext} icon`} className="h-3 w-3 opacity-70" />
               )}
@@ -61,7 +69,11 @@ export default function SchemaListItem({ message, isSelected, versions, onClick,
 
             {/* Versions count */}
             {hasMultipleVersions && (
-              <span className={`text-[10px] ${isSelected ? 'text-gray-500' : 'text-gray-400'}`}>· {versions.length}v</span>
+              <span
+                className={`text-[10px] ${isSelected ? 'text-[rgb(var(--ec-page-text-muted))]' : 'text-[rgb(var(--ec-icon-color))]'}`}
+              >
+                · {versions.length}v
+              </span>
             )}
           </div>
         </div>

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

@@ -27,14 +27,14 @@ export default function SchemaViewerModal({
     <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" />
-        <Dialog.Content className="fixed inset-4 md:inset-8 rounded-lg bg-white shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100] flex flex-col">
+        <Dialog.Content className="fixed inset-4 md:inset-8 rounded-lg bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100] flex flex-col">
           {/* Header */}
-          <div className="flex items-center justify-between p-6 border-b border-gray-200 flex-shrink-0">
+          <div className="flex items-center justify-between p-6 border-b border-[rgb(var(--ec-page-border))] flex-shrink-0">
             <div className="flex items-center gap-3">
-              <ArrowsPointingOutIcon className="h-6 w-6 text-gray-500" />
+              <ArrowsPointingOutIcon className="h-6 w-6 text-[rgb(var(--ec-icon-color))]" />
               <div>
-                <Dialog.Title className="text-xl font-semibold text-gray-900">{message.data.name}</Dialog.Title>
-                <Dialog.Description className="text-sm text-gray-600 mt-1">
+                <Dialog.Title className="text-xl font-semibold text-[rgb(var(--ec-page-text))]">{message.data.name}</Dialog.Title>
+                <Dialog.Description className="text-sm text-[rgb(var(--ec-page-text-muted))] mt-1">
                   v{message.data.version} · {isAvro ? 'Avro' : 'JSON'} Schema
                 </Dialog.Description>
               </div>
@@ -42,7 +42,7 @@ export default function SchemaViewerModal({
             <Dialog.Close asChild>
               <button
                 type="button"
-                className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
+                className="p-2 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))] rounded-md transition-colors"
                 aria-label="Close"
               >
                 <XMarkIcon className="h-6 w-6" />
@@ -60,11 +60,11 @@ export default function SchemaViewerModal({
           </div>
 
           {/* Footer */}
-          <div className="flex justify-end p-4 border-t border-gray-200 flex-shrink-0">
+          <div className="flex justify-end p-4 border-t border-[rgb(var(--ec-page-border))] flex-shrink-0">
             <Dialog.Close asChild>
               <button
                 type="button"
-                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
+                className="px-4 py-2 text-sm font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 transition-colors"
               >
                 Close
               </button>

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

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

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

@@ -46,21 +46,22 @@ const typeIcons: any = {
 };
 
 const typeColors: any = {
-  Domain: 'text-orange-500 bg-orange-50 ring-orange-200',
-  Service: 'text-pink-500 bg-pink-50 ring-pink-200',
-  Event: 'text-orange-500 bg-orange-50 ring-orange-200',
-  Command: 'text-blue-500 bg-blue-50 ring-blue-200',
-  Query: 'text-green-500 bg-green-50 ring-green-200',
-  Entity: 'text-purple-500 bg-purple-50 ring-purple-200',
-  Channel: 'text-indigo-500 bg-indigo-50 ring-indigo-200',
-  Team: 'text-teal-500 bg-teal-50 ring-teal-200',
-  User: 'text-cyan-500 bg-cyan-50 ring-cyan-200',
-  Language: 'text-amber-500 bg-amber-50 ring-amber-200',
-  OpenAPI: 'text-emerald-500 bg-emerald-50 ring-emerald-200',
-  AsyncAPI: 'text-violet-500 bg-violet-50 ring-violet-200',
-  Design: 'text-gray-500 bg-gray-50 ring-gray-200',
-  Container: 'text-indigo-500 bg-indigo-50 ring-indigo-200',
-  default: 'text-gray-500 bg-gray-50 ring-gray-200',
+  Domain: 'text-orange-500 dark:text-orange-400 bg-orange-50 dark:bg-orange-500/10 ring-orange-200 dark:ring-orange-500/30',
+  Service: 'text-pink-500 dark:text-pink-400 bg-pink-50 dark:bg-pink-500/10 ring-pink-200 dark:ring-pink-500/30',
+  Event: 'text-orange-500 dark:text-orange-400 bg-orange-50 dark:bg-orange-500/10 ring-orange-200 dark:ring-orange-500/30',
+  Command: 'text-blue-500 dark:text-blue-400 bg-blue-50 dark:bg-blue-500/10 ring-blue-200 dark:ring-blue-500/30',
+  Query: 'text-green-500 dark:text-green-400 bg-green-50 dark:bg-green-500/10 ring-green-200 dark:ring-green-500/30',
+  Entity: 'text-purple-500 dark:text-purple-400 bg-purple-50 dark:bg-purple-500/10 ring-purple-200 dark:ring-purple-500/30',
+  Channel: 'text-indigo-500 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-500/10 ring-indigo-200 dark:ring-indigo-500/30',
+  Team: 'text-teal-500 dark:text-teal-400 bg-teal-50 dark:bg-teal-500/10 ring-teal-200 dark:ring-teal-500/30',
+  User: 'text-cyan-500 dark:text-cyan-400 bg-cyan-50 dark:bg-cyan-500/10 ring-cyan-200 dark:ring-cyan-500/30',
+  Language: 'text-amber-500 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10 ring-amber-200 dark:ring-amber-500/30',
+  OpenAPI:
+    'text-emerald-500 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10 ring-emerald-200 dark:ring-emerald-500/30',
+  AsyncAPI: 'text-violet-500 dark:text-violet-400 bg-violet-50 dark:bg-violet-500/10 ring-violet-200 dark:ring-violet-500/30',
+  Design: 'text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-500/10 ring-gray-200 dark:ring-gray-500/30',
+  Container: 'text-indigo-500 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-500/10 ring-indigo-200 dark:ring-indigo-500/30',
+  default: 'text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-500/10 ring-gray-200 dark:ring-gray-500/30',
 };
 
 function classNames(...classes: (string | boolean | undefined)[]) {
@@ -294,7 +295,7 @@ export default function SearchModal() {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity backdrop-blur-sm" />
+          <div className="fixed inset-0 bg-black/40 dark:bg-black/60 transition-opacity backdrop-blur-sm" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 w-screen overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -307,7 +308,7 @@ export default function SearchModal() {
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="mx-auto max-w-2xl transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+            <Dialog.Panel className="mx-auto max-w-2xl transform divide-y divide-[rgb(var(--ec-page-border))] overflow-hidden rounded-xl bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] shadow-2xl ring-1 ring-black/10 dark:ring-white/10 transition-all">
               <Combobox
                 onChange={(item: any) => {
                   if (item?.url) {
@@ -316,14 +317,14 @@ export default function SearchModal() {
                   }
                 }}
               >
-                <div className="relative border-b border-gray-100">
+                <div className="relative border-b border-[rgb(var(--ec-page-border))]">
                   <MagnifyingGlassIcon
-                    className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-gray-400"
+                    className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-[rgb(var(--ec-icon-color))]"
                     aria-hidden="true"
                   />
                   <Combobox.Input
                     ref={inputRef}
-                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm focus:outline-none"
+                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-[rgb(var(--ec-page-text))] placeholder:text-[rgb(var(--ec-icon-color))] focus:ring-0 sm:text-sm focus:outline-none"
                     placeholder="Search..."
                     onChange={(event) => setQuery(event.target.value)}
                     value={query}
@@ -333,14 +334,16 @@ export default function SearchModal() {
                 </div>
 
                 {/* Filter Tabs */}
-                <div className="flex items-center gap-2 px-4 py-3 overflow-x-auto no-scrollbar border-b border-gray-100">
+                <div className="flex items-center gap-2 px-4 py-3 overflow-x-auto no-scrollbar border-b border-[rgb(var(--ec-page-border))]">
                   {filters.map((tab) => (
                     <button
                       key={tab.id}
                       onClick={() => setActiveFilter(tab.id)}
                       className={classNames(
                         'px-3 py-1 text-xs font-medium rounded-full transition-colors whitespace-nowrap',
-                        activeFilter === tab.id ? 'bg-purple-100 text-purple-700' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                        activeFilter === tab.id
+                          ? 'bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent-text))]'
+                          : 'bg-[rgb(var(--ec-content-hover))] text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-content-active))]'
                       )}
                     >
                       {tab.name}
@@ -352,7 +355,7 @@ export default function SearchModal() {
                   <>
                     {query === '' && favorites.length > 0 && (
                       <div className="px-6 pt-3 pb-2">
-                        <p className="text-xs text-gray-500">Favourites</p>
+                        <p className="text-xs text-[rgb(var(--ec-page-text-muted))]">Favourites</p>
                       </div>
                     )}
                     <Combobox.Options static className="max-h-96 scroll-py-3 overflow-y-auto p-3">
@@ -367,7 +370,10 @@ export default function SearchModal() {
                             key={item.id}
                             value={item}
                             className={({ active }) =>
-                              classNames('flex cursor-default select-none rounded-xl p-3 group', active && 'bg-gray-100')
+                              classNames(
+                                'flex cursor-default select-none rounded-xl p-3 group',
+                                active && 'bg-[rgb(var(--ec-content-active))]'
+                              )
                             }
                           >
                             {({ active }) => (
@@ -381,17 +387,30 @@ export default function SearchModal() {
                                   <Icon className="h-6 w-6" aria-hidden="true" />
                                 </div>
                                 <div className="ml-4 flex-auto min-w-0">
-                                  <p className={classNames('text-sm font-medium', active ? 'text-gray-900' : 'text-gray-700')}>
+                                  <p
+                                    className={classNames(
+                                      'text-sm font-medium',
+                                      active ? 'text-[rgb(var(--ec-page-text))]' : 'text-[rgb(var(--ec-page-text))]'
+                                    )}
+                                  >
                                     {item.name}
                                   </p>
                                   <div className="flex items-center gap-2">
                                     <p
-                                      className={classNames('text-sm flex-shrink-0', active ? 'text-gray-700' : 'text-gray-500')}
+                                      className={classNames(
+                                        'text-sm flex-shrink-0',
+                                        active ? 'text-[rgb(var(--ec-page-text))]' : 'text-[rgb(var(--ec-page-text-muted))]'
+                                      )}
                                     >
                                       {item.type}
                                     </p>
                                     {item.rawNode.summary && (
-                                      <p className={classNames('text-sm truncate', active ? 'text-gray-600' : 'text-gray-400')}>
+                                      <p
+                                        className={classNames(
+                                          'text-sm truncate',
+                                          active ? 'text-[rgb(var(--ec-page-text-muted))]' : 'text-[rgb(var(--ec-icon-color))]'
+                                        )}
+                                      >
                                         • {item.rawNode.summary}
                                       </p>
                                     )}
@@ -408,12 +427,14 @@ export default function SearchModal() {
                                       'p-1 rounded-md transition-colors mr-2',
                                       isFavorite
                                         ? 'text-amber-400 hover:text-amber-500'
-                                        : 'text-gray-300 opacity-0 group-hover:opacity-100 hover:text-amber-400'
+                                        : 'text-[rgb(var(--ec-icon-color))] opacity-0 group-hover:opacity-100 hover:text-amber-400'
                                     )}
                                   >
                                     {isFavorite ? <StarIconSolid className="h-5 w-5" /> : <StarIcon className="h-5 w-5" />}
                                   </button>
-                                  {active && <ArrowRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />}
+                                  {active && (
+                                    <ArrowRightIcon className="h-5 w-5 text-[rgb(var(--ec-icon-color))]" aria-hidden="true" />
+                                  )}
                                 </div>
                               </>
                             )}
@@ -426,22 +447,30 @@ export default function SearchModal() {
 
                 {query !== '' && filteredItems.length === 0 && (
                   <div className="py-14 px-6 text-center text-sm sm:px-14">
-                    <ExclamationCircleIcon type="outline" name="exclamation-circle" className="mx-auto h-6 w-6 text-gray-400" />
-                    <p className="mt-4 font-semibold text-gray-900">No results found</p>
-                    <p className="mt-2 text-gray-500">No components found for this search term. Please try again.</p>
+                    <ExclamationCircleIcon
+                      type="outline"
+                      name="exclamation-circle"
+                      className="mx-auto h-6 w-6 text-[rgb(var(--ec-icon-color))]"
+                    />
+                    <p className="mt-4 font-semibold text-[rgb(var(--ec-page-text))]">No results found</p>
+                    <p className="mt-2 text-[rgb(var(--ec-page-text-muted))]">
+                      No components found for this search term. Please try again.
+                    </p>
                   </div>
                 )}
 
                 {query === '' && filteredItems.length === 0 && (
                   <div className="py-14 px-6 text-center text-sm sm:px-14">
-                    <MagnifyingGlassIcon className="mx-auto h-6 w-6 text-gray-400" />
-                    <p className="mt-4 font-semibold text-gray-900">Search for anything</p>
-                    <p className="mt-2 text-gray-500">Search for domains, services, events, commands, queries and more.</p>
+                    <MagnifyingGlassIcon className="mx-auto h-6 w-6 text-[rgb(var(--ec-icon-color))]" />
+                    <p className="mt-4 font-semibold text-[rgb(var(--ec-page-text))]">Search for anything</p>
+                    <p className="mt-2 text-[rgb(var(--ec-page-text-muted))]">
+                      Search for domains, services, events, commands, queries and more.
+                    </p>
                   </div>
                 )}
 
                 {/* Footer */}
-                <div className="flex flex-wrap items-center bg-gray-50 py-2.5 px-4 text-xs text-gray-500 border-t border-gray-100">
+                <div className="flex flex-wrap items-center bg-[rgb(var(--ec-content-hover))] py-2.5 px-4 text-xs text-[rgb(var(--ec-page-text-muted))] border-t border-[rgb(var(--ec-page-border))]">
                   <div className="flex items-center mr-4">
                     <ArrowUturnLeftIcon className="h-3 w-3 mr-1" />
                     to select

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

@@ -27,7 +27,7 @@ const getBadgeClasses = (badge: string): string => {
     service: 'bg-green-100 text-green-700',
     event: 'bg-amber-100 text-amber-700',
     command: 'bg-pink-100 text-pink-700',
-    query: 'bg-purple-100 text-purple-700',
+    query: 'bg-green-100 text-green-700',
     message: 'bg-indigo-100 text-indigo-700',
     design: 'bg-teal-100 text-teal-700',
     channel: 'bg-indigo-100 text-indigo-700',
@@ -163,21 +163,21 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
   return (
     <>
       {/* Search Input */}
-      <div className="px-3 py-2 bg-white border-b border-gray-200">
+      <div className="px-3 py-2 bg-[rgb(var(--ec-content-bg))] border-b border-[rgb(var(--ec-content-border))]">
         <div className="flex gap-2">
           <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[rgb(var(--ec-input-placeholder))]" />
             <input
               type="text"
               placeholder="Search resources..."
               value={searchQuery}
               onChange={(e) => handleSearchChange(e.target.value)}
-              className="w-full pl-9 pr-8 py-2 text-sm bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent placeholder:text-gray-400"
+              className="w-full pl-9 pr-8 py-2 text-sm bg-[rgb(var(--ec-input-bg))] border border-[rgb(var(--ec-input-border))] rounded-lg focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-transparent text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-input-placeholder))]"
             />
             {searchQuery && (
               <button
                 onClick={clearSearch}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))]"
                 aria-label="Clear search"
               >
                 <X className="w-4 h-4" aria-hidden="true" />
@@ -191,15 +191,15 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
               className={cn(
                 'flex items-center justify-center w-10 h-10 rounded-lg border transition-colors',
                 searchFilters.size > 0
-                  ? 'bg-purple-50 border-purple-200 text-purple-600'
-                  : 'bg-gray-50 border-gray-200 text-gray-400 hover:text-gray-600 hover:bg-gray-100'
+                  ? 'bg-[rgb(var(--ec-accent)/0.1)] border-[rgb(var(--ec-accent)/0.3)] text-[rgb(var(--ec-accent))]'
+                  : 'bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))] hover:bg-[rgb(var(--ec-content-hover))]'
               )}
               aria-label="Filter search results"
               aria-expanded={showFilterDropdown}
             >
               <SlidersHorizontal className="w-4 h-4" aria-hidden="true" />
               {searchFilters.size > 0 && (
-                <span className="absolute -top-1 -right-1 w-4 h-4 bg-purple-600 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
+                <span className="absolute -top-1 -right-1 w-4 h-4 bg-[rgb(var(--ec-accent))] text-white text-[10px] font-bold rounded-full flex items-center justify-center">
                   {searchFilters.size}
                 </span>
               )}
@@ -209,9 +209,11 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
             {showFilterDropdown && (
               <>
                 <div className="fixed inset-0 z-20" onClick={() => setShowFilterDropdown(false)} />
-                <div className="absolute right-0 top-full mt-1 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-30">
+                <div className="absolute right-0 top-full mt-1 w-48 bg-[rgb(var(--ec-dropdown-bg))] rounded-lg shadow-lg border border-[rgb(var(--ec-dropdown-border))] z-30">
                   <div className="p-2">
-                    <div className="text-[10px] font-medium text-gray-400 uppercase tracking-wide px-2 py-1">Filter by type</div>
+                    <div className="text-[10px] font-medium text-[rgb(var(--ec-content-text-muted))] uppercase tracking-wide px-2 py-1">
+                      Filter by type
+                    </div>
                     <div className="flex flex-col gap-0.5 mt-1">
                       {filterTypes.map((filter) => {
                         const isActive = searchFilters.has(filter.key);
@@ -222,27 +224,29 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
                             onClick={() => toggleSearchFilter(filter.key)}
                             className={cn(
                               'flex items-center justify-between px-2 py-1.5 rounded text-sm transition-colors',
-                              isActive ? 'bg-purple-50 text-purple-700' : 'text-gray-600 hover:bg-gray-100'
+                              isActive
+                                ? 'bg-[rgb(var(--ec-accent)/0.1)] text-[rgb(var(--ec-accent))]'
+                                : 'text-[rgb(var(--ec-dropdown-text))] hover:bg-[rgb(var(--ec-dropdown-hover))]'
                             )}
                           >
                             <span className="flex items-center gap-2">
                               <Icon className="w-3 h-3" />
                               {filter.label}
                             </span>
-                            {isActive && <span className="text-purple-600">✓</span>}
+                            {isActive && <span className="text-[rgb(var(--ec-accent))]">✓</span>}
                           </button>
                         );
                       })}
                     </div>
                     {searchFilters.size > 0 && (
                       <>
-                        <div className="border-t border-gray-100 my-2" />
+                        <div className="border-t border-[rgb(var(--ec-content-border))] my-2" />
                         <button
                           onClick={() => {
                             setSearchFilters(new Set());
                             setShowFilterDropdown(false);
                           }}
-                          className="w-full px-2 py-1.5 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded text-left"
+                          className="w-full px-2 py-1.5 text-sm text-[rgb(var(--ec-content-text-muted))] hover:text-[rgb(var(--ec-content-text))] hover:bg-[rgb(var(--ec-dropdown-hover))] rounded text-left"
                         >
                           Reset filters
                         </button>
@@ -258,9 +262,9 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
 
       {/* Search Results */}
       {showSearchResults && (
-        <div className="flex-1 overflow-y-auto bg-white border-b border-gray-200">
+        <div className="flex-1 overflow-y-auto bg-[rgb(var(--ec-content-bg))] border-b border-[rgb(var(--ec-content-border))]">
           <div className="px-3 py-2">
-            <div className="text-[10px] font-medium text-gray-400 uppercase tracking-wide mb-2">
+            <div className="text-[10px] font-medium text-[rgb(var(--ec-content-text-muted))] uppercase tracking-wide mb-2">
               {results.length > 0 ? `${results.length} result${results.length > 1 ? 's' : ''}` : 'No results'}
             </div>
             {results.length > 0 && (
@@ -269,11 +273,15 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
                   <button
                     key={nodeKey}
                     onClick={() => handleSelectResult(nodeKey, node)}
-                    className="group flex items-center justify-between w-full px-3 py-2 rounded-lg cursor-pointer text-left transition-colors hover:bg-gray-100"
+                    className="group flex items-center justify-between w-full px-3 py-2 rounded-lg cursor-pointer text-left transition-colors hover:bg-[rgb(var(--ec-content-hover))]"
                   >
                     <div className="flex flex-col min-w-0 flex-1">
-                      <span className="text-sm text-gray-900 truncate">{node.title}</span>
-                      {matchType === 'id' && <span className="text-xs text-gray-400 truncate">ID: {nodeKey.split(':')[2]}</span>}
+                      <span className="text-sm text-[rgb(var(--ec-content-text))] truncate">{node.title}</span>
+                      {matchType === 'id' && (
+                        <span className="text-xs text-[rgb(var(--ec-content-text-muted))] truncate">
+                          ID: {nodeKey.split(':')[2]}
+                        </span>
+                      )}
                     </div>
                     <div className="flex items-center gap-2 flex-shrink-0">
                       {node.badge && (
@@ -287,7 +295,7 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
                         </span>
                       )}
                       {node.pages && node.pages.length > 0 && (
-                        <ChevronRight className="w-4 h-4 text-gray-400 group-hover:text-purple-500" />
+                        <ChevronRight className="w-4 h-4 text-[rgb(var(--ec-icon-color))] group-hover:text-[rgb(var(--ec-accent))]" />
                       )}
                     </div>
                   </button>
@@ -295,7 +303,9 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
               </div>
             )}
             {results.length === 0 && searchQuery.trim() && (
-              <div className="text-sm text-gray-500 py-4 text-center">No resources found for "{searchQuery}"</div>
+              <div className="text-sm text-[rgb(var(--ec-content-text-muted))] py-4 text-center">
+                No resources found for "{searchQuery}"
+              </div>
             )}
           </div>
         </div>