fix(ui,ui-preset): Code component styles (#6357)

.changeset/happy-zoos-smile.md

@@ -0,0 +1,6 @@
+---
+"@medusajs/ui-preset": patch
+"@medusajs/ui": patch
+---
+
+fix(ui,ui-preset): Fixes an issue where the color styles of two code components was broken

packages/design-system/ui-preset/src/theme/extension/theme.ts

@@ -310,7 +310,6 @@ export const theme = {
     },
     "boxShadow": {
       "elevation-card-hover": "var(--elevation-card-hover)",
-      "elevation-modal": "var(--elevation-modal)",
       "buttons-inverted": "var(--buttons-inverted)",
       "elevation-card-rest": "var(--elevation-card-rest)",
       "buttons-neutral-focus": "var(--buttons-neutral-focus)",
@@ -329,7 +328,9 @@ export const theme = {
       "details-switch-background": "var(--details-switch-background)",
       "elevation-tooltip": "var(--elevation-tooltip)",
       "borders-interactive-with-shadow": "var(--borders-interactive-with-shadow)",
-      "elevation-flyout": "var(--elevation-flyout)"
+      "elevation-flyout": "var(--elevation-flyout)",
+      "details-commandbar": "var(--details-commandbar)",
+      "elevation-modal": "var(--elevation-modal)"
     }
   }
 }

packages/design-system/ui-preset/src/theme/tokens/effects.ts

@@ -2,7 +2,6 @@ export const effects = {
   "dark": {
     "--details-switch-background-focus": "0px 0px 0px 1px rgba(27, 27, 31, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8), 0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)",
     "--buttons-neutral-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
-    "--elevation-modal": "0px 0px 0px 1px rgba(23, 23, 23, 1) inset, 0px 0px 0px 2px rgba(46, 48, 53, 0.4) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)",
     "--elevation-card-hover": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 8px 0px rgba(0, 0, 0, 0.4)",
     "--borders-focus": "0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
     "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
@@ -20,11 +19,12 @@ export const effects = {
     "--buttons-danger-focus": "0px 1px 0px 0px rgba(190, 18, 60, 0.04), 0px -1px 0px 0px rgba(190, 18, 60, 0.04), 0px 0px 0px 1px rgba(190, 18, 60, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
     "--borders-base": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4)",
     "--borders-error": "0px 0px 0px 1px rgba(244, 63, 94, 1), 0px 0px 0px 4px rgba(225, 29, 72, 0.25)",
-    "--buttons-inverted-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)"
+    "--buttons-inverted-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
+    "--details-commandbar": "0px 0px 0px 1px rgba(228, 228, 233, 1) inset, 0px 0px 0px 1.5px rgba(46, 48, 53, 0.2) inset, 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)",
+    "--elevation-modal": "0px 0px 0px 1px rgba(23, 23, 23, 1) inset, 0px 0px 0px 1.5px rgba(46, 48, 53, 0.6) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)"
   },
   "light": {
     "--elevation-card-hover": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 8px 0px rgba(3, 7, 18, 0.1)",
-    "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 2px rgba(229, 231, 235, 0.4) inset, 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 16px 32px 0px rgba(3, 7, 18, 0.08), 0px 2px 24px 0px rgba(3, 7, 18, 0.08)",
     "--buttons-inverted": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(3, 7, 18, 0.4), 0px 0px 0px 1px rgba(3, 7, 18, 0.8)",
     "--elevation-card-rest": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
     "--buttons-neutral-focus": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
@@ -43,6 +43,8 @@ export const effects = {
     "--details-switch-background": "0px 1px 1px 0px rgba(3, 7, 18, 0.04) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.06) inset, 0px 0px 8px 0px rgba(3, 7, 18, 0.02) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
     "--elevation-tooltip": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 4px 8px 0px rgba(3, 7, 18, 0.08)",
     "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1)",
-    "--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)"
+    "--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)",
+    "--details-commandbar": "0px 0px 0px 1px rgba(27, 27, 31, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset, 0px 16px 32px 0px rgba(3, 7, 18, 0.16), 0px 2px 24px 0px rgba(3, 7, 18, 0.08)",
+    "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 1.5px rgba(229, 231, 235, 0.6) inset, 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 16px 32px 0px rgba(3, 7, 18, 0.08), 0px 2px 24px 0px rgba(3, 7, 18, 0.08)"
   }
 }

packages/design-system/ui-preset/src/theme/tokens/typography.ts

@@ -131,18 +131,6 @@ export const typography = {
     "fontWeight": "400",
     "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
   },
-  ".code-body": {
-    "fontSize": "0.8125rem",
-    "lineHeight": "1.5rem",
-    "fontWeight": "400",
-    "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
-  },
-  ".code-label": {
-    "fontSize": "0.8125rem",
-    "lineHeight": "1.25rem",
-    "fontWeight": "400",
-    "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
-  },
   ".txt-compact-xlarge-plus": {
     "fontSize": "1.125rem",
     "lineHeight": "1.25rem",
@@ -190,5 +178,17 @@ export const typography = {
     "lineHeight": "1.75rem",
     "fontWeight": "500",
     "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".code-body": {
+    "fontSize": "0.75rem",
+    "lineHeight": "1.375rem",
+    "fontWeight": "400",
+    "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
+  },
+  ".code-label": {
+    "fontSize": "0.75rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "400",
+    "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
   }
 }

packages/design-system/ui/src/components/code-block/code-block.stories.tsx

@@ -41,7 +41,9 @@ export const Default: Story = {
         <CodeBlock snippets={snippets}>
           <CodeBlock.Header>
             <CodeBlock.Header.Meta>
-              <Label weight={"plus"}>/product-detail.js</Label>
+              <Label size="small" weight={"plus"}>
+                /product-detail.js
+              </Label>
             </CodeBlock.Header.Meta>
           </CodeBlock.Header>
           <CodeBlock.Body />

packages/design-system/ui/src/components/code-block/code-block.tsx

@@ -101,7 +101,7 @@ const HeaderComponent = ({
   return (
     <div
       className={clx(
-        "border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3",
+        "border-b-ui-code-border bg-ui-code-bg-subtle flex items-center gap-2 border-b px-4 py-3",
         className
       )}
       {...props}
@@ -110,9 +110,9 @@ const HeaderComponent = ({
         snippets.map((snippet) => (
           <div
             className={clx(
-              "text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all",
+              "text-ui-code-fg-subtle txt-compact-small-plus transition-fg cursor-pointer rounded-full border border-transparent px-3 py-2",
               {
-                "text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default":
+                "text-ui-code-fg-base border-ui-code-border bg-ui-code-bg-base cursor-default":
                   active.label === snippet.label,
               }
             )}
@@ -137,7 +137,10 @@ const Meta = ({
 }: React.HTMLAttributes<HTMLDivElement>) => {
   return (
     <div
-      className={clx("text-ui-code-text-subtle ml-auto", className)}
+      className={clx(
+        "txt-compact-small text-ui-code-fg-subtle ml-auto",
+        className
+      )}
       {...props}
     />
   )
@@ -165,7 +168,7 @@ const Body = ({
       {!active.hideCopy && (
         <Copy
           content={active.code}
-          className="text-ui-code-icon absolute right-4 top-4"
+          className="text-ui-code-fg-muted absolute right-4 top-4"
         />
       )}
       <div className="max-w-[90%]">
@@ -237,12 +240,9 @@ const Body = ({
         >
           {({ style, tokens, getLineProps, getTokenProps }) => (
             <pre
-              className={clx(
+              className={clx("code-body whitespace-pre-wrap bg-transparent", {
-                "txt-compact-small whitespace-pre-wrap bg-transparent font-mono",
+                "grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
-                {
+              })}
-                  "grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
-                }
-              )}
               style={{
                 ...style,
                 background: "transparent",
@@ -253,7 +253,7 @@ const Body = ({
                   {tokens.map((_, i) => (
                     <span
                       key={i}
-                      className="text-ui-code-text-subtle tabular-nums"
+                      className="text-ui-code-fg-subtle tabular-nums"
                     >
                       {i + 1}
                     </span>

packages/design-system/ui/src/components/command/command.stories.tsx

@@ -1,7 +1,7 @@
-import React from "react"
 import type { Meta, StoryObj } from "@storybook/react"
-import { Command } from "./command"
+import React from "react"
 import { Badge } from "../badge"
+import { Command } from "./command"
 
 const meta: Meta<typeof Command> = {
   title: "Components/Command",
@@ -20,7 +20,9 @@ export const Default: Story = {
     return (
       <div className="w-[500px]">
         <Command>
-          <Badge color="green">Get</Badge>
+          <Badge className="dark" size="small" color="green">
+            Get
+          </Badge>
           <code>localhost:9000/store/products</code>
           <Command.Copy content="localhost:9000/store/products" />
         </Command>

packages/design-system/ui/src/components/command/command.tsx

@@ -14,8 +14,8 @@ const CommandComponent = ({
   return (
     <div
       className={clx(
-        "bg-ui-code-bg-header border-ui-code-border flex items-center rounded-lg border px-3 py-2",
+        "bg-ui-code-bg-base border-ui-code-border flex items-center rounded-lg border px-3 py-2",
-        "[&>code]:text-ui-code-text-base [&>code]:txt-compact-small [&>code]:mx-3 [&>code]:font-mono [&>code]:leading-6",
+        "[&>code]:text-ui-code-fg-base [&>code]:code-body [&>code]:mx-3",
         className
       )}
       {...props}
@@ -24,6 +24,20 @@ const CommandComponent = ({
 }
 CommandComponent.displayName = "Command"
 
-const Command = Object.assign(CommandComponent, { Copy })
+const CommandCopy = React.forwardRef<
+  React.ElementRef<typeof Copy>,
+  React.ComponentPropsWithoutRef<typeof Copy>
+>(({ className, ...props }, ref) => {
+  return (
+    <Copy
+      {...props}
+      ref={ref}
+      className={clx("!text-ui-code-fg-muted ml-auto", className)}
+    />
+  )
+})
+CommandCopy.displayName = "Command.Copy"
+
+const Command = Object.assign(CommandComponent, { Copy: CommandCopy })
 
 export { Command }