next(docs-style): Header search styling (#810)

Co-authored-by: Pavla Novotná <pavla.novotna@pslib.cz>

sites/docs/src/lib/components/demo-code-tabs.svelte

@@ -30,7 +30,7 @@
 			{#each items as item}
 				<Tabs.Trigger
 					value={item.value}
-					class="flex select-none border-b-2 border-b-transparent text-sm data-[state=active]:border-accent"
+					class="flex select-none border-b-2 border-b-transparent text-sm text-foreground-alt data-[state=active]:border-foreground-alt  data-[state=active]:text-foreground"
 				>
 					<span class="px-4 py-2">
 						{item.label}

sites/docs/src/lib/components/navigation/sidebar-nav-items.svelte

@@ -7,7 +7,7 @@
 </script>
 
 {#if items.length}
-	<div class="grid grid-flow-row auto-rows-max gap-0.5 pl-4 text-sm">
+	<div class="grid grid-flow-row auto-rows-max gap-[1px] pl-4 text-sm">
 		{#each items as item, index (index)}
 			{#if item.href}
 				<a

sites/docs/src/lib/components/search.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import MagnifyingGlass from "phosphor-svelte/lib/MagnifyingGlass";
 	import { onMount } from "svelte";
 	import { Command, Dialog } from "bits-ui";
 	import {
@@ -44,14 +45,23 @@
 	}}
 >
 	<Dialog.Trigger
-		class="relative inline-flex h-10 items-center justify-center gap-3 whitespace-nowrap rounded-[9px] bg-foreground/5 px-4 text-sm font-medium text-foreground text-foreground/80 ring-offset-background transition-colors hover:bg-dark-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+		class="relative inline-flex h-10 items-center justify-between gap-3 whitespace-nowrap rounded-[9px] bg-muted px-3 text-sm font-normal text-muted-foreground ring-offset-background transition-colors hover:bg-dark-10 focus-visible:outline-none  focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background md:w-72"
 	>
-		Search Docs
-		<kbd
-			class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex"
-		>
-			<span class="text-xs">⌘</span>K
-		</kbd>
+		<span class="flex items-center gap-2">
+			<MagnifyingGlass class="size-5" aria-label="Sun" />Search Docs ...
+		</span>
+		<span class="flex items-center gap-[1px]">
+			<kbd
+				class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-background-alt px-1.5 font-mono text-[10px] font-medium opacity-100 shadow-kbd sm:flex"
+			>
+				<span class="text-xs">⌘</span>
+			</kbd>
+			<kbd
+				class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-background-alt px-1.5 font-mono text-[10px] font-medium opacity-100 shadow-kbd sm:flex"
+			>
+				K
+			</kbd>
+		</span>
 	</Dialog.Trigger>
 	<Dialog.Portal>
 		<Dialog.Overlay

sites/docs/src/lib/components/site-header.svelte

@@ -15,15 +15,17 @@
 		<div class="flex h-[70px] items-center justify-between gap-3">
 			<div class="flex items-center gap-1.5">
 				<MobileNav />
+
 				<a
 					href="/"
-					class="ml-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+					class="ml-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background md:mr-[125px]"
 				>
 					<Logo />
 				</a>
-			</div>
-			<div class="flex items-center justify-end gap-2.5">
+
 				<Search />
+			</div>
+			<div class="flex items-center justify-end">
 				<Button.Root
 					href={siteConfig.links.github}
 					target="_blank"