docs: update design + colors (#7593)

Update design and colors in docs to match those in Figma

www/packages/docs-ui/src/components/CodeBlock/Header/index.tsx

@@ -5,6 +5,7 @@ import clsx from "clsx"
 import { CodeBlockStyle } from ".."
 import { useColorMode } from "@/providers"
 import { Badge, BadgeVariant } from "@/components"
+import { CodeBlockActions, CodeBlockActionsProps } from "../Actions"
 
 export type CodeBlockHeaderMeta = {
   badgeLabel?: string
@@ -12,73 +13,69 @@ export type CodeBlockHeaderMeta = {
 }
 
 type CodeBlockHeaderProps = {
-  children?: React.ReactNode
   title?: string
   blockStyle?: CodeBlockStyle
+  actionsProps: CodeBlockActionsProps
 } & CodeBlockHeaderMeta
 
 export const CodeBlockHeader = ({
-  children,
   title,
   blockStyle = "loud",
   badgeLabel,
+  actionsProps,
   badgeColor,
 }: CodeBlockHeaderProps) => {
   const { colorMode } = useColorMode()
 
-  const borderColor = useMemo(
+  const bgColor = useMemo(
     () =>
       clsx(
-        blockStyle === "loud" && [
-          colorMode === "light" && "border-medusa-code-border",
-          colorMode === "dark" && "border-medusa-border-base",
-        ],
+        blockStyle === "loud" && "bg-medusa-contrast-bg-base",
         blockStyle === "subtle" && [
-          colorMode === "light" && "border-medusa-border-base",
-          colorMode === "dark" && "border-medusa-code-border",
+          colorMode === "light" && "bg-medusa-bg-component",
+          colorMode === "dark" && "bg-medusa-code-bg-header",
         ]
       ),
     [blockStyle, colorMode]
   )
+  const titleColor = useMemo(
+    () =>
+      clsx(
+        blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
+        blockStyle === "subtle" && [
+          colorMode === "light" && "text-medusa-fg-subtle",
+          colorMode === "dark" && "text-medusa-contrast-fg-secondary",
+        ]
+      ),
+    [blockStyle, colorMode]
+  )
+
   return (
     <div
       className={clsx(
-        "py-docs_0.75 rounded-t-docs_DEFAULT px-docs_1 mb-0",
-        "flex gap-docs_2 items-start justify-between",
-        blockStyle === "loud" && [
-          colorMode === "light" && "bg-medusa-code-bg-header",
-          colorMode === "dark" && "bg-medusa-bg-base",
-        ],
+        "py-docs_0.5 px-docs_1 mb-0",
+        "rounded-t-docs_lg relative",
         blockStyle === "subtle" && [
-          colorMode === "light" && "bg-medusa-bg-component",
-          colorMode === "dark" && "bg-medusa-code-bg-header",
+          "border border-solid border-b-0",
+          colorMode === "light" && "border-medusa-border-base",
+          colorMode === "dark" && "border-medusa-code-border",
         ],
-        borderColor && `border border-b-0 ${borderColor}`
+        bgColor
       )}
     >
-      {children}
-      {title && (
-        <div
-          className={clsx(
-            "txt-compact-small-plus",
-            blockStyle === "loud" && [
-              colorMode === "light" && "text-medusa-code-text-subtle",
-              colorMode === "dark" && "text-medusa-fg-muted",
-            ],
-            blockStyle === "subtle" && [
-              colorMode === "light" && "text-medusa-fg-subtle",
-              colorMode === "dark" && "text-medusa-code-text-subtle",
-            ]
-          )}
-        >
-          {title}
-        </div>
-      )}
-      {badgeLabel && (
-        <Badge variant={badgeColor || "orange"} className="font-base">
-          {badgeLabel}
-        </Badge>
-      )}
+      <div className={clsx("xs:max-w-[83%]", "flex gap-docs_0.75 items-start")}>
+        {badgeLabel && (
+          <Badge variant={badgeColor || "code"} className="font-base">
+            {badgeLabel}
+          </Badge>
+        )}
+        {title && (
+          <div className={clsx("text-compact-x-small font-base", titleColor)}>
+            {title}
+          </div>
+        )}
+      </div>
+      <CodeBlockActions {...actionsProps} />
     </div>
   )
 }