docs: update design + colors (#7593)

Update design and colors in docs to match those in Figma

www/apps/api-reference/app/globals.css

@@ -44,7 +44,7 @@
   }
 
   pre *::selection {
-    @apply !bg-medusa-code-text-highlight;
+    @apply !bg-medusa-contrast-bg-highlight;
   }
 
   body[data-modal="opened"] {

www/apps/api-reference/components/Tags/Operation/CodeSection/RequestSamples/index.tsx

@@ -1,5 +1,5 @@
 import type { Code } from "@/types/openapi"
-import { LegacyCodeTabs } from "docs-ui"
+import { CodeBlock, CodeTab, CodeTabs } from "docs-ui"
 import slugify from "slugify"
 
 export type TagOperationCodeSectionRequestSamplesProps = {
@@ -12,18 +12,17 @@ const TagOperationCodeSectionRequestSamples = ({
   return (
     <div>
       <h3>Request samples</h3>
-      <LegacyCodeTabs
-        tabs={codeSamples.map((codeSample) => ({
-          label: codeSample.label,
-          value: slugify(codeSample.label),
-          code: {
-            ...codeSample,
-            collapsed: true,
-            className: "!mb-0",
-          },
-        }))}
-        className="mt-2 !mb-0"
-      />
+      <CodeTabs className="mt-2 !mb-0" group="request-examples">
+        {codeSamples.map((codeSample, index) => (
+          <CodeTab
+            key={index}
+            label={codeSample.label}
+            value={slugify(codeSample.label)}
+          >
+            <CodeBlock {...codeSample} collapsed={true} className="!mb-0" />
+          </CodeTab>
+        ))}
+      </CodeTabs>
     </div>
   )
 }

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 {