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

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",
-        "[&>code]:text-ui-code-text-base [&>code]:txt-compact-small [&>code]:mx-3 [&>code]:font-mono [&>code]:leading-6",
+        "bg-ui-code-bg-base border-ui-code-border flex items-center rounded-lg border px-3 py-2",
+        "[&>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 }