docs: update design + colors (#7593)

Update design and colors in docs to match those in Figma

www/packages/docs-ui/src/components/AiAssistant/CommandIcon/index.tsx

@@ -1,24 +0,0 @@
-import { SparklesSolid } from "@medusajs/icons"
-import clsx from "clsx"
-import React from "react"
-
-export type AiAssistantCommandIconProps =
-  React.AllHTMLAttributes<HTMLSpanElement>
-
-export const AiAssistantCommandIcon = ({
-  className,
-  ...props
-}: AiAssistantCommandIconProps) => {
-  return (
-    <span
-      className={clsx(
-        "bg-button-inverted bg-medusa-button-inverted dark:bg-button-inverted-dark",
-        "rounded-md p-[2px] text-medusa-fg-on-inverted flex",
-        className
-      )}
-      {...props}
-    >
-      <SparklesSolid />
-    </span>
-  )
-}

www/packages/docs-ui/src/components/AiAssistant/ThreadItem/Actions/index.tsx

@@ -75,7 +75,7 @@ export const AiAssistantThreadItemActions = ({
 const ActionButton = ({ children, className, ...props }: ButtonProps) => {
   return (
     <Button
-      variant="clear"
+      variant="transparent"
       className={clsx(
         "text-medusa-fg-muted hover:text-medusa-fg-subtle",
         "hover:bg-medusa-bg-subtle-hover",

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

@@ -2,7 +2,6 @@
 
 import React, { useState, useEffect, useCallback, useMemo, useRef } from "react"
 import {
-  AiAssistantCommandIcon,
   Badge,
   Button,
   InputText,
@@ -12,6 +11,7 @@ import {
   SearchHitGroupName,
   Tooltip,
   Link,
+  AiAssistantIcon,
 } from "@/components"
 import { useAiAssistant, useSearch } from "@/providers"
 import { ArrowUturnLeft, XMarkMini } from "@medusajs/icons"
@@ -300,7 +300,7 @@ export const AiAssistant = () => {
         )}
       >
         <Button
-          variant="clear"
+          variant="transparent"
           onClick={() => setCommand(null)}
           className="text-medusa-fg-subtle p-[5px]"
         >
@@ -320,7 +320,7 @@ export const AiAssistant = () => {
           disabled={loading}
         />
         <Button
-          variant="clear"
+          variant="transparent"
           onClick={() => {
             setQuestion("")
             inputRef.current?.focus()
@@ -395,7 +395,7 @@ export const AiAssistant = () => {
               "flex items-center gap-docs_0.75 text-compact-small-plus"
             )}
           >
-            <AiAssistantCommandIcon />
+            <AiAssistantIcon />
             <span className="text-medusa-fg-subtle">Medusa AI Assistant</span>
             <Badge variant="purple">Beta</Badge>
           </div>