docs: update design + colors (#7593)

Update design and colors in docs to match those in Figma

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

@@ -1,7 +1,11 @@
 import clsx from "clsx"
 import React from "react"
 
-export type ButtonVariants = "primary" | "secondary" | "clear"
+export type ButtonVariants =
+  | "primary"
+  | "secondary"
+  | "transparent"
+  | "transparent-clear"
 
 export type ButtonType = "default" | "icon"
 
@@ -24,39 +28,54 @@ export const Button = ({
 }: ButtonProps) => {
   const variantClasses = {
     primary: [
-      "py-[5px] px-docs_0.75 rounded-docs_sm cursor-pointer",
-      "bg-button-inverted bg-medusa-button-inverted dark:bg-button-inverted-dark",
-      "hover:bg-medusa-button-inverted-hover hover:bg-no-image hover:no-underline",
-      "active:bg-medusa-button-inverted-pressed active:bg-no-image",
-      "focus:bg-medusa-button-inverted-pressed focus:bg-no-image",
-      "shadow-button-colored active:shadow-button-colored-focused focus:shadow-button-colored-focused transition-shadow",
-      "dark:shadow-button-colored-dark dark:active:shadow-button-colored-focused-dark dark:focus:shadow-button-colored-focused-dark",
-      "disabled:!bg-no-image disabled:bg-medusa-bg-disabled",
-      "disabled:cursor-not-allowed disabled:border-medusa-border-base",
-      "text-compact-small-plus text-medusa-fg-on-inverted",
-      "[&_a]:text-medusa-fg-on-inverted",
+      "px-[10px] py-[6px] rounded-docs_sm cursor-pointer",
+      "bg-medusa-button-inverted",
+      "hover:bg-medusa-button-inverted-hover hover:no-underline",
+      "active:bg-medusa-button-inverted-pressed",
+      "focus:bg-medusa-button-inverted",
+      "shadow-button-inverted focus:shadow-button-inverted-focused transition-shadow",
+      "dark:shadow-button-inverted-dark dark:focus:shadow-button-inverted-focused-dark",
+      "disabled:bg-medusa-bg-disabled disabled:shadow-button-neutral dark:disabled:shadow-button-neutral-dark",
+      "disabled:cursor-not-allowed",
+      "text-compact-small-plus text-medusa-contrast-fg-primary",
+      "[&_a]:text-medusa-contrast-fg-primary",
       "disabled:text-medusa-fg-disabled",
       "[&_a]:disabled:text-medusa-fg-disabled",
-      "border border-medusa-border-loud",
       "select-none",
     ],
     secondary: [
-      "py-[5px] px-docs_0.75 rounded-docs_sm cursor-pointer",
-      "bg-button-neutral bg-medusa-button-neutral dark:bg-button-neutral-dark",
-      "hover:bg-medusa-button-neutral-hover hover:bg-no-image hover:no-underline",
-      "active:bg-medusa-button-neutral-pressed active:bg-no-image",
-      "focus:bg-medusa-button-neutral-pressed focus:bg-no-image",
-      "disabled:!bg-no-image disabled:bg-medusa-bg-disabled",
-      "disabled:cursor-not-allowed",
-      "border border-solid border-medusa-border-base",
+      "px-[10px] py-[6px] rounded-docs_sm cursor-pointer",
+      "bg-medusa-button-neutral",
+      "hover:bg-medusa-button-neutral-hover hover:no-underline",
+      "active:bg-medusa-button-neutral-pressed",
+      "focus:bg-medusa-button-neutral",
+      "disabled:bg-medusa-bg-disabled disabled:shadow-button-neutral dark:disabled:shadow-button-neutral-dark",
+      "disabled:cursor-not-allowed disabled:text-medusa-fg-disabled",
       "text-compact-small-plus text-medusa-fg-base",
       "[&_a]:text-medusa-fg-base",
-      "shadow-button-neutral focus:shadow-button-neutral-focused active:shadow-button-neutral-focused transition-shadow",
-      "dark:shadow-button-neutral dark:focus:shadow-button-neutral-focused dark:active:shadow-button-neutral-focused",
+      "shadow-button-neutral focus:shadow-button-neutral-focused active:shadow-button-neutral transition-shadow",
+      "dark:shadow-button-neutral dark:focus:shadow-button-neutral-focused dark:active:shadow-button-neutral",
       "select-none",
     ],
-    clear: [
-      "bg-transparent shadow-none border-0 outline-none cursor-pointer text-fg-medusa-subtle",
+    transparent: [
+      "px-[10px] py-[6px] rounded-docs_sm cursor-pointer",
+      "bg-transparent shadow-none border-0 outline-none",
+      "text-compact-small-plus text-medusa-fg-base",
+      "hover:bg-medusa-button-transparent-hover",
+      "active:bg-medusa-button-transparent-pressed",
+      "focus:bg-medusa-bg-base focus:shadow-button-neutral-focused dark:focus:shadow-button-neutral-focused-dark",
+      "disabled:bg-transparent disabled:shadow-button-neutral dark:disabled:shadow-button-neutral-dark",
+      "disabled:cursor-not-allowed disabled:text-medusa-fg-disabled",
+    ],
+    transparentClear: [
+      "px-[10px] py-[6px] rounded-docs_sm cursor-pointer",
+      "bg-transparent shadow-none border-0 outline-none",
+      "text-compact-small-plus text-medusa-fg-muted",
+      "hover:bg-medusa-button-transparent-hover",
+      "active:bg-medusa-button-transparent-pressed",
+      "focus:bg-medusa-bg-base focus:shadow-button-neutral-focused dark:focus:shadow-button-neutral-focused-dark",
+      "disabled:bg-transparent disabled:shadow-button-neutral dark:disabled:shadow-button-neutral-dark",
+      "disabled:cursor-not-allowed disabled:text-medusa-fg-disabled",
     ],
   }
 
@@ -66,7 +85,8 @@ export const Button = ({
         "inline-flex flex-row justify-center items-center gap-[6px]",
         variant === "primary" && variantClasses.primary,
         variant === "secondary" && variantClasses.secondary,
-        variant === "clear" && variantClasses.clear,
+        variant === "transparent" && variantClasses.transparent,
+        variant === "transparent-clear" && variantClasses.transparentClear,
         buttonType === "icon" && "!px-docs_0.25",
         className
       )}