docs: redesign API runner (#8688)

* fix up block style + plain theme color

* initial redesign

* docs: redesign API Runner

* revert yarn.lock changes

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

@@ -221,7 +221,7 @@ export const CodeBlockLine = ({
             key={tokenKey}
             className={clsx(
               tokenClassName,
-              (isTerminal || isTokenHighlighted || isLineHighlighted) &&
+              (isTokenHighlighted || isLineHighlighted) &&
                 "!text-medusa-contrast-fg-primary"
             )}
             {...rest}

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

@@ -272,6 +272,24 @@ export const CodeBlock = ({
     ]
   )
 
+  const codeTheme = useMemo(() => {
+    const prismTheme =
+      blockStyle === "loud" || colorMode === "dark"
+        ? themes.vsDark
+        : themes.vsLight
+
+    return {
+      ...prismTheme,
+      plain: {
+        ...prismTheme,
+        color:
+          colorMode === "light"
+            ? "rgba(255, 255, 255, 0.88)"
+            : "rgba(250, 250, 250, 1)",
+      },
+    }
+  }, [blockStyle, colorMode])
+
   if (!source.length) {
     return <></>
   }
@@ -314,11 +332,7 @@ export const CodeBlock = ({
           )}
         >
           <Highlight
-            theme={
-              blockStyle === "loud" || colorMode === "dark"
-                ? themes.vsDark
-                : themes.vsLight
-            }
+            theme={codeTheme}
             code={source.trim()}
             language={language}
             {...rest}