docs: update design + colors (#7593)

Update design and colors in docs to match those in Figma

www/apps/ui/src/components/package-install.tsx

@@ -1,5 +1,5 @@
 import { clx } from "@medusajs/ui"
-import { LegacyCodeTabs } from "docs-ui"
+import { CodeBlock, CodeTab, CodeTabs } from "docs-ui"
 
 type PackageInstallProps = {
   packageName: string
@@ -20,15 +20,20 @@ const PackageInstall = ({
   const npm = `npm install ${pkg} ${devDependency ? "--save-dev" : "--save"}`
   const pnpm = `pnpm add ${devDependency ? "-D " : ""}${pkg}`
 
+  const tabs = [
+    { code: { lang: "bash", source: npm }, label: "npm", value: "npm" },
+    { code: { lang: "bash", source: yarn }, label: "yarn", value: "yarn" },
+    { code: { lang: "bash", source: pnpm }, label: "pnpm", value: "pnpm" },
+  ]
+
   return (
-    <LegacyCodeTabs
-      tabs={[
-        { code: { lang: "bash", source: npm }, label: "npm", value: "npm" },
-        { code: { lang: "bash", source: yarn }, label: "yarn", value: "yarn" },
-        { code: { lang: "bash", source: pnpm }, label: "pnpm", value: "pnpm" },
-      ]}
-      className={clx("my-4", className)}
-    />
+    <CodeTabs group="npm2yarn" className={clx("my-4", className)}>
+      {tabs.map((tab, index) => (
+        <CodeTab label={tab.label} value={tab.value} key={index}>
+          <CodeBlock {...tab.code} />
+        </CodeTab>
+      ))}
+    </CodeTabs>
   )
 }
 

www/apps/ui/src/providers/search.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import {
-  AiAssistantCommandIcon,
+  AiAssistantIcon,
   AiAssistantProvider,
   SearchProvider as UiSearchProvider,
   searchFiltersV1,
@@ -40,7 +40,7 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
       commands={[
         {
           name: "ai-assistant",
-          icon: <AiAssistantCommandIcon />,
+          icon: <AiAssistantIcon />,
           component: (
             <AiAssistantProvider
               apiUrl={process.env.NEXT_PUBLIC_AI_ASSISTANT_URL || "temp"}
@@ -53,7 +53,8 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
           ),
           title: "AI Assistant",
           badge: {
-            variant: "purple",
+            variant: "blue",
+            badgeType: "shaded",
             children: "Beta",
           },
         },

www/apps/ui/src/styles/globals.css

@@ -15,7 +15,7 @@
   }
 
   pre *::selection {
-    @apply !bg-medusa-code-text-highlight;
+    @apply !bg-medusa-contrast-bg-highlight;
   }
 
   body {