Update colors

README.md

@@ -83,7 +83,6 @@
 
 Visit [surrealdb.com/docs](https://surrealdb.com/docs/surrealdb/) to get started with SurrealDB. 
 
-
 ## Learn SurrealDB
 
 - SurrealDB University: https://surrealdb.com/learn/fundamentals

src/components/Check.astro

@@ -3,6 +3,6 @@ import { Icon } from 'astro-icon/components';
 ---
 
 <div class="flex items-center gap-2">
-	<Icon name="fa6-solid:check" class="w-2.5 flex-shrink-0 text-surreal-pink" />
+	<Icon name="fa6-solid:check" class="w-2.5 flex-shrink-0 text-surreal-energy" />
 	<slot />
 </div>

src/components/Dropdown/Dropdown.astro

@@ -25,7 +25,7 @@ const id = Array.from({ length: 8 }, () => Math.random().toString(36)[2]).join(
 	<input type="checkbox" id={id} class="dropdown-toggle hidden" />
     <label for={id} class="block relative">
 		<slot />
-		<div class={cn("dropdown-dropdown absolute z-10 pt-3 min-w-full transition-transform origin-top", align === 'right' ? 'right-0' : 'left-0')}>
+		<div class={cn("dropdown-dropdown absolute z-20 pt-3 min-w-full transition-transform origin-top", align === 'right' ? 'right-0' : 'left-0')}>
 			<div class={cn("bg-background-secondary p-2 rounded-lg border-border border min-w-full shadow-lg shadow-background", dropdownClass)}>
 				<slot name="dropdown" />
 			</div>

src/components/Dropdown/DropdownItem.astro

@@ -22,40 +22,57 @@ const hasCustomIcon = Astro.slots.has('icon');
 const hasAnyIcon = hasCustomIcon || iconName || icon;
 ---
 
-<Element 
+<Element
 	class={cn(
-		"group flex items-center gap-3 py-2 px-3 rounded-lg w-full transition-colors hover:bg-code cursor-pointer", 
-		dataUrl && "copy-markdown-item"
-	)} 
-	href={href} 
+		"group flex items-center gap-3 py-2 px-3 rounded-lg w-full transition-colors hover:bg-code cursor-pointer",
+		dataUrl && "copy-markdown-item",
+	)}
+	href={href}
 	data-url={dataUrl}
 	target={external ? "_blank" : undefined}
 	rel={external ? "noopener noreferrer" : undefined}
 >
-	{hasAnyIcon && (
-		<div class="flex-shrink-0 w-8 h-8 rounded-lg bg-background flex items-center justify-center border border-border group-hover:border-surreal-pink/50 transition-colors">
-			{hasCustomIcon ? (
-				<div class="w-4 h-4 text-text/70 group-hover:text-text transition-colors [&>svg]:w-full [&>svg]:h-full">
-					<slot name="icon" />
-				</div>
-			) : iconName ? (
-				<Icon name={iconName} class="w-4 h-4 text-text/70 group-hover:text-text transition-colors" />
-			) : icon ? (
-				<Image src={icon} alt={title} class="size-4" />
-			) : null}
-		</div>
-	)}
+	{
+		hasAnyIcon && (
+			<div class="flex-shrink-0 w-8 h-8 rounded-lg bg-background flex items-center justify-center border border-border group-hover:border-surreal-energy/50 transition-colors">
+				{hasCustomIcon ? (
+					<div class="w-4 h-4 text-text/70 group-hover:text-text transition-colors [&>svg]:w-full [&>svg]:h-full">
+						<slot name="icon" />
+					</div>
+				) : iconName ? (
+					<Icon
+						name={iconName}
+						class="w-4 h-4 text-text/70 group-hover:text-text transition-colors"
+					/>
+				) : icon ? (
+					<Image src={icon} alt={title} class="size-4" />
+				) : null}
+			</div>
+		)
+	}
 	<div class="flex flex-col flex-1 min-w-0">
-		<span class={cn("text-sm text-text/80 group-hover:text-text transition-colors", active && "text-surreal-pink")}>
+		<span
+			class={cn(
+				"text-sm text-text/80 group-hover:text-text transition-colors",
+				active && "text-surreal-energy",
+			)}
+		>
 			{title}
 		</span>
-		{description && (
-			<span class="text-xs text-text/50 group-hover:text-text/60 transition-colors truncate">
-				{description}
-			</span>
-		)}
+		{
+			description && (
+				<span class="text-xs text-text/50 group-hover:text-text/60 transition-colors truncate">
+					{description}
+				</span>
+			)
+		}
 	</div>
-	{external && (
-		<Icon name="fa6-solid:arrow-up-right-from-square" class="w-3 h-3 flex-shrink-0 text-text/40 group-hover:text-text/60 transition-colors" />
-	)}
-</Element>
+	{
+		external && (
+			<Icon
+				name="fa6-solid:arrow-up-right-from-square"
+				class="w-3 h-3 flex-shrink-0 text-text/40 group-hover:text-text/60 transition-colors"
+			/>
+		)
+	}
+</Element>

src/components/LabsPreview.astro

@@ -271,7 +271,7 @@ function buildSeeMoreUrl(
 
 <style>
     .labs-preview {
-        @apply border border-border rounded-lg p-6 hover:border-surreal-pink/50 transition-colors;
+        @apply border border-border rounded-lg p-6 hover:border-surreal-energy/50 transition-colors;
     }
 
     .labs-preview__badge {
@@ -318,7 +318,7 @@ function buildSeeMoreUrl(
                                         <p class="text-faint text-xs font-medium mb-1">
                                             {category}
                                         </p>
-                                        <h3 class="text-lg font-semibold text-bwr group-hover:text-surreal-pink transition-colors line-clamp-2 mb-2 !mt-0">
+                                        <h3 class="text-lg font-semibold text-bwr group-hover:text-surreal-energy transition-colors line-clamp-2 mb-2 !mt-0">
                                             {item.title}
                                         </h3>
                                     </div>
@@ -382,7 +382,7 @@ function buildSeeMoreUrl(
             <div class="mt-4 text-center">
                 <a
                     href={buildSeeMoreUrl(topics, languages)}
-                    class="text-surreal-pink hover:underline text-sm font-medium"
+                    class="text-surreal-energy hover:underline text-sm font-medium"
                 >
                     See more ({totalFilteredCount - limit} more)
                 </a>

src/components/PageHeadings.tsx

@@ -82,8 +82,8 @@ function Heading({ depth, text, slug }: HeadingProps) {
                 >
                     <span
                         class={cn(
-                            'text-text transition-all duration-300 group-hover:text-hover',
-                            active() && 'text-hover/100'
+                            'text-text transition-all duration-300 group-hover:text-surreal-energy',
+                            active() && 'text-surreal-energy'
                         )}
                     >
                         {text}
@@ -96,8 +96,8 @@ function Heading({ depth, text, slug }: HeadingProps) {
                 >
                     <span
                         class={cn(
-                            'text-text transition-all duration-300 group-hover:text-hover',
-                            active() && 'text-hover/100'
+                            'text-text transition-all duration-300 group-hover:text-surreal-energy',
+                            active() && 'text-surreal-energy'
                         )}
                     >
                         {text}

src/components/RailroadDiagram.astro

@@ -54,7 +54,7 @@ if (svgMarkup) {
     :root svg.railroad-diagram { 
       background: rgba(var(--color-code),1) !important;
       background-color: rgba(var(--color-code),1) !important;
-      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08), 0 0 0 2px rgba(var(--color-surreal-pink),0.15);
+      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08), 0 0 0 2px rgba(var(--color-surreal-energy),0.15);
       border-radius: 6px;
     }
     :root svg.railroad-diagram path { stroke: rgba(var(--color-text), 0.85) !important; fill: transparent !important; }
@@ -90,15 +90,15 @@ if (svgMarkup) {
     /* Default all boxes (non-terminals) */
     :root svg.railroad-diagram g rect { fill: rgba(var(--color-background-secondary), 1) !important; stroke: rgba(var(--color-border), 1) !important; }
     /* Terminals have rounded corners in this library -> exclude the background rect */
-    :root svg.railroad-diagram g rect[rx]:not(.background) { fill: rgba(var(--color-surreal-pink), 0.15) !important; stroke: rgba(var(--color-surreal-pink), 0.7) !important; }
+    :root svg.railroad-diagram g rect[rx]:not(.background) { fill: rgba(var(--color-surreal-energy), 0.15) !important; stroke: rgba(var(--color-surreal-energy), 0.7) !important; }
     /* Basic bottom scroll indicator */
     .rr-bottom-indicator { display: none; gap: 8px; align-items: center; margin-top: 6px; }
     .rr-track { position: relative; height: 6px; flex: 1 1 auto; background: rgba(0,0,0,0.08); border-radius: 9999px; overflow: hidden; }
-    .rr-thumb { position: absolute; top: 0; left: 0; height: 100%; width: 25%; background: rgba(var(--color-surreal-pink), 0.6); border-radius: 9999px; transition: left .08s linear, width .08s linear; }
+    .rr-thumb { position: absolute; top: 0; left: 0; height: 100%; width: 25%; background: rgba(var(--color-surreal-energy), 0.6); border-radius: 9999px; transition: left .08s linear, width .08s linear; }
     .rr-label { font-size: 12px; color: rgba(var(--color-text), 0.7); white-space: nowrap; }
     @media (prefers-color-scheme: dark) {
       .rr-track { background: rgba(255,255,255,0.12); }
-      .rr-thumb { background: rgba(var(--color-surreal-pink), 0.7); }
+      .rr-thumb { background: rgba(var(--color-surreal-energy), 0.7); }
       .rr-label { color: rgba(255,255,255,0.75); }
     }
     .rr-scroll.is-scrollable + .rr-bottom-indicator { display: flex; }

src/components/RenderDoc.astro

@@ -331,15 +331,15 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
 							<div class="page-header-actions flex items-center gap-2">
 								<a
 									href={`https://github.com/surrealdb/docs.surrealdb.com/edit/main/src/content/${collection}/${entry.id}`}
-									class="flex items-center gap-2 px-2 sm:px-3 py-1.5 rounded-lg border border-border hover:border-surreal-pink transition-colors text-sm"
+									class="flex items-center gap-2 px-2 sm:px-3 py-1.5 rounded-lg border border-border hover:border-surreal-energy hover:text-surreal-energy transition-colors text-sm"
 								>
 									<Icon name="fa6-solid:pencil" class="w-3.5 h-3.5" />
 									<span class="hidden sm:inline">Edit page</span>
 								</a>
 								<div class="page-actions-dropdown">
 									<Dropdown align="right" >
 										<div
-											class="flex items-center gap-1 sm:gap-2 px-2 sm:px-3 py-1.5 rounded-lg border border-border hover:border-surreal-pink transition-colors text-sm cursor-pointer select-none"
+											class="flex items-center gap-1 sm:gap-2 px-2 sm:px-3 py-1.5 rounded-lg border border-border hover:border-surreal-energy transition-colors text-sm cursor-pointer select-none"
 										>
 											<Icon name="fa6-solid:copy" class="w-3.5 h-3.5" />
 											<span class="hidden sm:inline">Copy page</span>
@@ -388,7 +388,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
 									prev && (
 										<a
 											href={prev.href}
-											class="text-faint hover:border-surreal-pink flex items-center gap-2.5 border border-border rounded-lg py-3 px-6 w-1/2 min-h-20"
+											class="text-faint hover:border-surreal-energy flex items-center gap-2.5 border border-border rounded-lg py-3 px-6 w-1/2 min-h-20"
 										>
 											<Icon
 												name="fa6-solid:chevron-left"
@@ -402,7 +402,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
 									next && (
 										<a
 											href={next.href}
-											class="text-faint hover:border-surreal-pink flex items-center gap-2.5 border border-border rounded-lg py-3 px-6 w-1/2 min-h-20 justify-end"
+											class="text-faint hover:border-surreal-energy flex items-center gap-2.5 border border-border rounded-lg py-3 px-6 w-1/2 min-h-20 justify-end"
 										>
 											<span>{next.title}</span>
 											<Icon
@@ -462,7 +462,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
 								</h3>
 								<div class="flex gap-2">
 									<button
-										class="feedback-btn feedback-positive p-2 rounded-lg border border-border hover:border-surreal-pink transition-colors"
+										class="feedback-btn feedback-positive p-2 rounded-lg border border-border hover:border-surreal-energy transition-colors"
 										data-feedback="positive"
 									>
 										<Icon
@@ -471,7 +471,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
 										/>
 									</button>
 									<button
-										class="feedback-btn feedback-negative p-2 rounded-lg border border-border hover:border-surreal-pink transition-colors"
+										class="feedback-btn feedback-negative p-2 rounded-lg border border-border hover:border-surreal-energy transition-colors"
 										data-feedback="negative"
 									>
 										<Icon
@@ -556,7 +556,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
 										></textarea>
 										<div class="flex gap-2 mt-3">
 											<button
-												class="feedback-submit bg-surreal-pink text-white px-3 py-1 rounded text-xs hover:bg-surreal-pink/80 transition-colors"
+												class="feedback-submit bg-surreal-energy text-white px-3 py-1 rounded text-xs hover:bg-surreal-energy/80 transition-colors"
 											>
 												Submit
 											</button>
@@ -631,7 +631,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
 										></textarea>
 										<div class="flex gap-2 mt-3">
 											<button
-												class="feedback-submit bg-surreal-pink text-white px-3 py-1 rounded text-xs hover:bg-surreal-pink/80 transition-colors"
+												class="feedback-submit bg-surreal-energy text-white px-3 py-1 rounded text-xs hover:bg-surreal-energy/80 transition-colors"
 											>
 												Submit
 											</button>
@@ -648,7 +648,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
 								<div class="flex gap-2 mt-2">
 									<a
 										href={`https://github.com/surrealdb/docs.surrealdb.com/edit/main/src/content/${collection}/${entry.id}`}
-										class="flex items-center gap-1.5 px-2 py-1 rounded text-xs border border-border hover:border-surreal-pink transition-colors"
+										class="flex items-center gap-1.5 px-2 py-1 rounded text-xs border border-border hover:border-surreal-energy hover:text-surreal-energy transition-colors"
 									>
 										<Icon
 											name="fa6-solid:pencil"
@@ -658,7 +658,7 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
 									</a>
 									<a
 										href="https://github.com/surrealdb/docs.surrealdb.com/issues/new"
-										class="flex items-center gap-1.5 px-2 py-1 rounded text-xs border border-border hover:border-surreal-pink transition-colors"
+										class="flex items-center gap-1.5 px-2 py-1 rounded text-xs border border-border hover:border-surreal-energy hover:text-surreal-energy transition-colors"
 									>
 										<Icon
 											name="fa6-brands:github"
@@ -824,11 +824,11 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
 				// Add visual feedback to buttons
 				feedbackBtns.forEach((b) =>
 					b.classList.remove(
-						"border-surreal-pink",
-						"bg-surreal-pink/10",
+						"border-surreal-energy",
+						"bg-surreal-energy/10",
 					),
 				);
-				btn.classList.add("border-surreal-pink", "bg-surreal-pink/10");
+				btn.classList.add("border-surreal-energy", "bg-surreal-energy/10");
 			});
 		});
 
@@ -843,8 +843,8 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
 				// Reset button states
 				feedbackBtns.forEach((b) =>
 					b.classList.remove(
-						"border-surreal-pink",
-						"bg-surreal-pink/10",
+						"border-surreal-energy",
+						"bg-surreal-energy/10",
 					),
 				);
 
@@ -927,8 +927,8 @@ const claudeUrl = `https://claude.ai/new?q=Read%20from%20${encodedUrl}%20so%20I%
 						negativeForm?.classList.add("hidden");
 						feedbackBtns.forEach((b) =>
 							b.classList.remove(
-								"border-surreal-pink",
-								"bg-surreal-pink/10",
+								"border-surreal-energy",
+								"bg-surreal-energy/10",
 							),
 						);
 						btn.textContent = "Submit";

src/components/Search.astro

@@ -11,11 +11,11 @@ interface Props {
         @apply block px-6 py-4 hover:bg-bwr/10;
 
         & :global(h3) {
-            @apply text-2xl;
+            @apply text-2xl group-hover:text-surreal-energy;
         }
 
         & :global(span) {
-            @apply text-surreal-pink text-xs pb-1 block;
+            @apply text-surreal-energy text-xs pb-1 block;
         }
 
         & :global(p) {
@@ -27,6 +27,10 @@ interface Props {
         }
     }
 
+	search-dialog :global(.docs-search-result:hover h3) {
+		@apply !text-surreal-energy;
+	}
+
     search-dialog :global(.docs-search-message) {
         @apply w-full h-full flex items-center justify-center text-lg text-text/50;
     }
@@ -48,7 +52,7 @@ interface Props {
 		border: 3px solid;
 		animation: prixClipFix 1s linear infinite alternate-reverse;
 
-		@apply border-surreal-pink
+		@apply border-surreal-energy;
 	}
 
     @keyframes rotate {