docs: update design + colors (#7593)

Update design and colors in docs to match those in Figma

www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx

@@ -47,7 +47,7 @@ export const SearchModalOpener = ({
   return (
     <>
       {isMobile && (
-        <Button variant="clear" onClick={handleOpen}>
+        <Button variant="transparent" onClick={handleOpen}>
           <MagnifyingGlass className="text-medusa-fg-muted" />
         </Button>
       )}

www/packages/docs-ui/src/components/Search/Suggestions/index.tsx

@@ -30,13 +30,13 @@ export const SearchSuggestions = ({ suggestions }: SearchSuggestionsProps) => {
               onClick={() => setCommand(command)}
               key={index}
               tabIndex={index}
-              className="gap-docs_0.75"
+              className="justify-between"
             >
-              <>
+              <span className="flex gap-docs_0.75">
                 {command.icon}
                 <span>{command.title}</span>
-                {command.badge && <Badge {...command.badge} />}
-              </>
+              </span>
+              {command.badge && <Badge {...command.badge} />}
             </SearchSuggestionItem>
           ))}
         </>

www/packages/docs-ui/src/components/Search/index.tsx

@@ -122,7 +122,7 @@ export const Search = ({
             formRef={searchBoxRef}
           />
           <Button
-            variant="clear"
+            variant="transparent"
             className={clsx(
               "bg-medusa-bg-base block md:hidden",
               "border-0 border-solid",