docs: update colors and typography (#8604)

www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx

@@ -39,7 +39,7 @@ const SecurityDescription = ({
         {getSecuritySchemaTypeName(securitySchema)}
       </p>
       {(securitySchema.type === "http" || securitySchema.type === "apiKey") && (
-        <p className={clsx("bg-docs-bg-surface", "p-1")}>
+        <p className={clsx("bg-medusa-bg-subtle", "p-1")}>
           <strong>
             {securitySchema.type === "http"
               ? "HTTP Authorization Scheme"

www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx

@@ -12,7 +12,7 @@ const TagsOperationParametersNested = ({
       {...props}
       className={clsx(
         props.className,
-        "bg-docs-bg-surface px-1 pt-1",
+        "bg-medusa-bg-subtle px-1 pt-1",
         "border-medusa-border-base my-1 rounded-sm border"
       )}
     >

www/apps/ui/src/components/component-example.tsx

@@ -44,7 +44,7 @@ export function ComponentExample({
           >
             <div
               className={clx(
-                "bg-docs-bg border-medusa-border-base flex max-h-[400px] min-h-[400px]",
+                "bg-medusa-bg-base border-medusa-border-base flex max-h-[400px] min-h-[400px]",
                 "w-full items-center justify-center overflow-auto rounded-md border px-10 py-5"
               )}
             >