fix(dashboard): JSON view (#8038)

* updated json view

* cleanup

* cleanup

packages/admin-next/dashboard/src/components/common/json-view-section/json-view-section.tsx

@@ -1,4 +1,10 @@
-import { ArrowsPointingOut, XMarkMini } from "@medusajs/icons"
+import {
+  ArrowsPointingOut,
+  Check,
+  SquareTwoStack,
+  TriangleDownMini,
+  XMarkMini,
+} from "@medusajs/icons"
 import {
   Badge,
   Container,
@@ -8,29 +14,27 @@ import {
   Kbd,
 } from "@medusajs/ui"
 import Primitive from "@uiw/react-json-view"
-import { CSSProperties, Suspense } from "react"
+import { CSSProperties, MouseEvent, Suspense, useState } from "react"
-import { useTranslation } from "react-i18next"
+import { Trans, useTranslation } from "react-i18next"
 
 type JsonViewSectionProps = {
   data: object
-  root?: string
   title?: string
 }
 
-// TODO: Fix the positioning of the copy btn
+export const JsonViewSection = ({ data }: JsonViewSectionProps) => {
-export const JsonViewSection = ({
-  data,
-  root,
-  title = "JSON",
-}: JsonViewSectionProps) => {
   const { t } = useTranslation()
   const numberOfKeys = Object.keys(data).length
 
   return (
     <Container className="flex items-center justify-between px-6 py-4">
       <div className="flex items-center gap-x-4">
-        <Heading level="h2">{title}</Heading>
+        <Heading level="h2">{t("json.header")}</Heading>
-        <Badge size="2xsmall">{numberOfKeys} keys</Badge>
+        <Badge size="2xsmall">
+          {t("json.numberOfKeys", {
+            count: numberOfKeys,
+          })}
+        </Badge>
       </div>
       <Drawer>
         <Drawer.Trigger asChild>
@@ -42,86 +46,153 @@ export const JsonViewSection = ({
             <ArrowsPointingOut />
           </IconButton>
         </Drawer.Trigger>
-        <Drawer.Content className="border-ui-code-border bg-ui-code-bg-base text-ui-code-fg-subtle dark overflow-hidden border shadow-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]">
+        <Drawer.Content className="bg-ui-contrast-bg-base text-ui-code-fg-subtle !shadow-elevation-commandbar overflow-hidden border border-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]">
-          <div className="bg-ui-code-bg-base border-ui-code-border flex items-center justify-between border-b px-6 py-4">
+          <div className="bg-ui-code-bg-base flex items-center justify-between px-6 py-4">
             <div className="flex items-center gap-x-4">
-              <Heading className="text-ui-code-fg-base">{title}</Heading>
+              <Drawer.Title asChild>
-              <Badge size="2xsmall">{numberOfKeys} keys</Badge>
+                <Heading className="text-ui-contrast-fg-primary">
+                  <Trans
+                    i18nKey="json.drawer.header"
+                    count={numberOfKeys}
+                    components={[
+                      <span key="count-span" className="text-ui-fg-subtle" />,
+                    ]}
+                  />
+                </Heading>
+              </Drawer.Title>
+              <Drawer.Description className="sr-only">
+                {t("json.drawer.description")}
+              </Drawer.Description>
             </div>
             <div className="flex items-center gap-x-2">
-              <Kbd>esc</Kbd>
+              <Kbd className="bg-ui-contrast-bg-subtle border-ui-contrast-border-base text-ui-contrast-fg-secondary">
+                esc
+              </Kbd>
               <Drawer.Close asChild>
                 <IconButton
                   size="small"
                   variant="transparent"
-                  className="text-ui-fg-subtle"
+                  className="text-ui-contrast-fg-secondary hover:text-ui-contrast-fg-primary hover:bg-ui-contrast-bg-base-hover active:bg-ui-contrast-bg-base-pressed focus-visible:bg-ui-contrast-bg-base-hover focus-visible:shadow-borders-interactive-with-active"
                 >
                   <XMarkMini />
                 </IconButton>
               </Drawer.Close>
             </div>
           </div>
-          <Drawer.Body className="overflow-auto p-4">
+          <Drawer.Body className="flex flex-1 flex-col overflow-hidden px-[5px] py-0 pb-[5px]">
-            <Suspense fallback={<div>Loading...</div>}>
+            <div className="bg-ui-contrast-bg-subtle flex-1 overflow-auto rounded-b-[4px] rounded-t-lg p-3">
-              <Primitive
+              <Suspense
-                value={data}
+                fallback={<div className="flex size-full flex-col"></div>}
-                displayDataTypes={false}
-                keyName={root}
-                style={
-                  {
-                    "--w-rjv-font-family": "Roboto Mono, monospace",
-                    "--w-rjv-line-color": "var(--code-border)",
-                    "--w-rjv-curlybraces-color": "rgb(255,255,255)",
-                    "--w-rjv-key-string": "rgb(247,208,25)",
-                    "--w-rjv-info-color": "var(--code-fg-muted)",
-                    "--w-rjv-type-string-color": "rgb(73,209,110)",
-                    "--w-rjv-quotes-string-color": "rgb(73,209,110)",
-                    "--w-rjv-type-boolean-color": "rgb(187,77,96)",
-                    "--w-rjv-type-int-color": "rgb(247,208,25)",
-                    "--w-rjv-type-float-color": "rgb(247,208,25)",
-                    "--w-rjv-type-bigint-color": "rgb(247,208,25)",
-                    "--w-rjv-key-number": "rgb(247,208,25)",
-                    "--w-rjv-arrow-color": "rgb(255,255,255)",
-                    "--w-rjv-copied-color": "var(--code-fg-subtle)",
-                    "--w-rjv-copied-success-color": "var(--code-fg-base)",
-                    "--w-rjv-colon-color": "rgb(255,255,255)",
-                  } as CSSProperties
-                }
-                collapsed={1}
               >
-                <Primitive.Quote render={() => <span />} />
+                <Primitive
-                <Primitive.Null
+                  value={data}
-                  render={() => (
+                  displayDataTypes={false}
-                    <span className="text-ui-tag-red-text">null</span>
+                  style={
-                  )}
+                    {
-                />
+                      "--w-rjv-font-family": "Roboto Mono, monospace",
-                <Primitive.Undefined
+                      "--w-rjv-line-color": "var(--contrast-border-base)",
-                  render={() => (
+                      "--w-rjv-curlybraces-color":
-                    <span className="text-ui-code-fg-muted">undefined</span>
+                        "var(--contrast-fg-secondary)",
-                  )}
+                      "--w-rjv-brackets-color": "var(--contrast-fg-secondary)",
-                />
+                      "--w-rjv-key-string": "var(--contrast-fg-primary)",
-                <Primitive.CountInfo
+                      "--w-rjv-info-color": "var(--contrast-fg-secondary)",
-                  render={(_props, { value }) => {
+                      "--w-rjv-type-string-color": "var(--tag-green-icon)",
-                    return (
+                      "--w-rjv-quotes-string-color": "var(--tag-green-icon)",
-                      <span className="text-ui-tag-neutral-text ml-2">
+                      "--w-rjv-type-boolean-color": "var(--tag-orange-icon)",
-                        {t("general.items", {
+                      "--w-rjv-type-int-color": "var(--tag-orange-icon)",
-                          count: Object.keys(value as object).length,
+                      "--w-rjv-type-float-color": "var(--tag-orange-icon)",
-                        })}
+                      "--w-rjv-type-bigint-color": "var(--tag-orange-icon)",
-                      </span>
+                      "--w-rjv-key-number": "var(--contrast-fg-secondary)",
-                    )
+                      "--w-rjv-arrow-color": "var(--contrast-fg-secondary)",
-                  }}
+                      "--w-rjv-copied-color": "var(--contrast-fg-secondary)",
-                />
+                      "--w-rjv-copied-success-color":
-                {/* <Primitive.Arrow>
+                        "var(--contrast-fg-primary)",
-                  <TriangleDownMini className="text-ui-code-fg-subtle -ml-[3px]" />
+                      "--w-rjv-colon-color": "var(--contrast-fg-primary)",
-                </Primitive.Arrow> */}
+                      "--w-rjv-ellipsis-color": "var(--contrast-fg-secondary)",
-                <Primitive.Colon>
+                    } as CSSProperties
-                  <span className="mr-1">:</span>
+                  }
-                </Primitive.Colon>
+                  collapsed={1}
-              </Primitive>
+                >
-            </Suspense>
+                  <Primitive.Quote render={() => <span />} />
+                  <Primitive.Null
+                    render={() => (
+                      <span className="text-ui-tag-red-icon">null</span>
+                    )}
+                  />
+                  <Primitive.Undefined
+                    render={() => (
+                      <span className="text-ui-tag-blue-icon">undefined</span>
+                    )}
+                  />
+                  <Primitive.CountInfo
+                    render={(_props, { value }) => {
+                      return (
+                        <span className="text-ui-contrast-fg-secondary ml-2">
+                          {t("general.items", {
+                            count: Object.keys(value as object).length,
+                          })}
+                        </span>
+                      )
+                    }}
+                  />
+                  <Primitive.Arrow>
+                    <TriangleDownMini className="text-ui-contrast-fg-secondary -ml-[0.5px]" />
+                  </Primitive.Arrow>
+                  <Primitive.Colon>
+                    <span className="mr-1">:</span>
+                  </Primitive.Colon>
+                  <Primitive.Copied
+                    render={({ style }, { value }) => {
+                      return <Copied style={style} value={value} />
+                    }}
+                  />
+                </Primitive>
+              </Suspense>
+            </div>
           </Drawer.Body>
         </Drawer.Content>
       </Drawer>
     </Container>
   )
 }
+
+type CopiedProps = {
+  style?: CSSProperties
+  value: object | undefined
+}
+
+const Copied = ({ style, value }: CopiedProps) => {
+  const [copied, setCopied] = useState(false)
+
+  const handler = (e: MouseEvent<HTMLSpanElement>) => {
+    e.stopPropagation()
+    setCopied(true)
+
+    if (typeof value === "string") {
+      navigator.clipboard.writeText(value)
+    } else {
+      const json = JSON.stringify(value, null, 2)
+      navigator.clipboard.writeText(json)
+    }
+
+    setTimeout(() => {
+      setCopied(false)
+    }, 2000)
+  }
+
+  const styl = { whiteSpace: "nowrap", width: "20px" }
+
+  if (copied) {
+    return (
+      <span style={{ ...style, ...styl }}>
+        <Check className="text-ui-contrast-fg-primary" />
+      </span>
+    )
+  }
+
+  return (
+    <span style={{ ...style, ...styl }} onClick={handler}>
+      <SquareTwoStack className="text-ui-contrast-fg-secondary" />
+    </span>
+  )
+}

packages/admin-next/dashboard/src/i18n/translations/en.json

@@ -52,6 +52,16 @@
     "includesTaxTooltip": "Prices in this column are tax inclusive.",
     "excludesTaxTooltip": "Prices in this column are tax exclusive."
   },
+  "json": {
+    "header": "JSON",
+    "numberOfKeys_one": "{{count}} key",
+    "numberOfKeys_other": "{{count}} keys",
+    "drawer": {
+      "header_one": "JSON <0>· {{count}} key</0>",
+      "header_other": "JSON <0>· {{count}} keys</0>",
+      "description": "View the JSON data for this object."
+    }
+  },
   "validation": {
     "mustBeInt": "The value must be a whole number.",
     "mustBePositive": "The value must be a positive number."

packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx

@@ -62,7 +62,7 @@ export const ProductDetail = () => {
             )
           })}
           <div className="hidden xl:block">
-            <JsonViewSection data={product} root="product" />
+            <JsonViewSection data={product} />
           </div>
         </div>
         <div className="flex w-full max-w-[100%] flex-col gap-y-3 xl:mt-0 xl:max-w-[400px]">

packages/admin-next/dashboard/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-payload-section/workflow-execution-payload-section.tsx

@@ -20,5 +20,5 @@ export const WorkflowExecutionPayloadSection = ({
     payload = { input: payload }
   }
 
-  return <JsonViewSection title="Payload" data={payload as object} />
+  return <JsonViewSection data={payload as object} />
 }

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

@@ -3,75 +3,44 @@ export const theme = {
     "colors": {
       "ui": {
         "tag": {
-          "green": {
+          "neutral": {
-            "bg": {
+            "border": {
-              "DEFAULT": "var(--tag-green-bg)",
+              "DEFAULT": "var(--tag-neutral-border)"
-              "hover": {
-                "DEFAULT": "var(--tag-green-bg-hover)"
-              }
             },
             "icon": {
-              "DEFAULT": "var(--tag-green-icon)"
+              "DEFAULT": "var(--tag-neutral-icon)"
-            },
-            "border": {
-              "DEFAULT": "var(--tag-green-border)"
             },
             "text": {
-              "DEFAULT": "var(--tag-green-text)"
+              "DEFAULT": "var(--tag-neutral-text)"
+            },
+            "bg": {
+              "hover": {
+                "DEFAULT": "var(--tag-neutral-bg-hover)"
+              },
+              "DEFAULT": "var(--tag-neutral-bg)"
             }
           },
           "red": {
+            "text": {
+              "DEFAULT": "var(--tag-red-text)"
+            },
             "bg": {
               "DEFAULT": "var(--tag-red-bg)",
               "hover": {
                 "DEFAULT": "var(--tag-red-bg-hover)"
               }
             },
-            "icon": {
-              "DEFAULT": "var(--tag-red-icon)"
-            },
-            "text": {
-              "DEFAULT": "var(--tag-red-text)"
-            },
             "border": {
               "DEFAULT": "var(--tag-red-border)"
-            }
-          },
-          "orange": {
-            "bg": {
-              "DEFAULT": "var(--tag-orange-bg)",
-              "hover": {
-                "DEFAULT": "var(--tag-orange-bg-hover)"
-              }
             },
             "icon": {
-              "DEFAULT": "var(--tag-orange-icon)"
+              "DEFAULT": "var(--tag-red-icon)"
-            },
-            "text": {
-              "DEFAULT": "var(--tag-orange-text)"
-            },
-            "border": {
-              "DEFAULT": "var(--tag-orange-border)"
-            }
-          },
-          "purple": {
-            "bg": {
-              "hover": {
-                "DEFAULT": "var(--tag-purple-bg-hover)"
-              },
-              "DEFAULT": "var(--tag-purple-bg)"
-            },
-            "text": {
-              "DEFAULT": "var(--tag-purple-text)"
-            },
-            "icon": {
-              "DEFAULT": "var(--tag-purple-icon)"
-            },
-            "border": {
-              "DEFAULT": "var(--tag-purple-border)"
             }
           },
           "blue": {
+            "text": {
+              "DEFAULT": "var(--tag-blue-text)"
+            },
             "border": {
               "DEFAULT": "var(--tag-blue-border)"
             },
@@ -83,93 +52,93 @@ export const theme = {
             },
             "icon": {
               "DEFAULT": "var(--tag-blue-icon)"
-            },
-            "text": {
-              "DEFAULT": "var(--tag-blue-text)"
             }
           },
-          "neutral": {
+          "orange": {
-            "border": {
-              "DEFAULT": "var(--tag-neutral-border)"
-            },
             "text": {
-              "DEFAULT": "var(--tag-neutral-text)"
+              "DEFAULT": "var(--tag-orange-text)"
             },
-            "bg": {
+            "border": {
-              "DEFAULT": "var(--tag-neutral-bg)",
+              "DEFAULT": "var(--tag-orange-border)"
-              "hover": {
-                "DEFAULT": "var(--tag-neutral-bg-hover)"
-              }
             },
             "icon": {
-              "DEFAULT": "var(--tag-neutral-icon)"
+              "DEFAULT": "var(--tag-orange-icon)"
-            }
-          }
-        },
-        "border": {
-          "interactive": {
-            "DEFAULT": "var(--border-interactive)"
-          },
-          "error": {
-            "DEFAULT": "var(--border-error)"
-          },
-          "danger": {
-            "DEFAULT": "var(--border-danger)"
-          },
-          "strong": {
-            "DEFAULT": "var(--border-strong)"
-          },
-          "base": {
-            "DEFAULT": "var(--border-base)"
-          },
-          "transparent": {
-            "DEFAULT": "var(--border-transparent)"
-          },
-          "menu": {
-            "bot": {
-              "DEFAULT": "var(--border-menu-bot)"
             },
-            "top": {
+            "bg": {
-              "DEFAULT": "var(--border-menu-top)"
+              "hover": {
+                "DEFAULT": "var(--tag-orange-bg-hover)"
+              },
+              "DEFAULT": "var(--tag-orange-bg)"
+            }
+          },
+          "green": {
+            "icon": {
+              "DEFAULT": "var(--tag-green-icon)"
+            },
+            "border": {
+              "DEFAULT": "var(--tag-green-border)"
+            },
+            "text": {
+              "DEFAULT": "var(--tag-green-text)"
+            },
+            "bg": {
+              "hover": {
+                "DEFAULT": "var(--tag-green-bg-hover)"
+              },
+              "DEFAULT": "var(--tag-green-bg)"
+            }
+          },
+          "purple": {
+            "bg": {
+              "DEFAULT": "var(--tag-purple-bg)",
+              "hover": {
+                "DEFAULT": "var(--tag-purple-bg-hover)"
+              }
+            },
+            "text": {
+              "DEFAULT": "var(--tag-purple-text)"
+            },
+            "icon": {
+              "DEFAULT": "var(--tag-purple-icon)"
+            },
+            "border": {
+              "DEFAULT": "var(--tag-purple-border)"
             }
           }
         },
         "bg": {
-          "highlight": {
+          "switch": {
-            "DEFAULT": "var(--bg-highlight)",
+            "off": {
-            "hover": {
+              "hover": {
-              "DEFAULT": "var(--bg-highlight-hover)"
+                "DEFAULT": "var(--bg-switch-off-hover)"
+              },
+              "DEFAULT": "var(--bg-switch-off)"
             }
           },
-          "interactive": {
+          "subtle": {
-            "DEFAULT": "var(--bg-interactive)"
+            "hover": {
+              "DEFAULT": "var(--bg-subtle-hover)"
+            },
+            "DEFAULT": "var(--bg-subtle)",
+            "pressed": {
+              "DEFAULT": "var(--bg-subtle-pressed)"
+            }
           },
           "overlay": {
             "DEFAULT": "var(--bg-overlay)"
           },
-          "switch": {
-            "off": {
-              "DEFAULT": "var(--bg-switch-off)",
-              "hover": {
-                "DEFAULT": "var(--bg-switch-off-hover)"
-              }
-            }
-          },
           "field": {
+            "component": {
+              "hover": {
+                "DEFAULT": "var(--bg-field-component-hover)"
+              },
+              "DEFAULT": "var(--bg-field-component)"
+            },
             "DEFAULT": "var(--bg-field)",
             "hover": {
               "DEFAULT": "var(--bg-field-hover)"
-            },
-            "component": {
-              "DEFAULT": "var(--bg-field-component)",
-              "hover": {
-                "DEFAULT": "var(--bg-field-component-hover)"
-              }
             }
           },
-          "disabled": {
-            "DEFAULT": "var(--bg-disabled)"
-          },
           "base": {
             "pressed": {
               "DEFAULT": "var(--bg-base-pressed)"
@@ -179,6 +148,12 @@ export const theme = {
             },
             "DEFAULT": "var(--bg-base)"
           },
+          "highlight": {
+            "DEFAULT": "var(--bg-highlight)",
+            "hover": {
+              "DEFAULT": "var(--bg-highlight-hover)"
+            }
+          },
           "component": {
             "pressed": {
               "DEFAULT": "var(--bg-component-pressed)"
@@ -188,86 +163,61 @@ export const theme = {
               "DEFAULT": "var(--bg-component-hover)"
             }
           },
-          "subtle": {
-            "DEFAULT": "var(--bg-subtle)",
-            "pressed": {
-              "DEFAULT": "var(--bg-subtle-pressed)"
-            },
-            "hover": {
-              "DEFAULT": "var(--bg-subtle-hover)"
-            }
-          }
-        },
-        "fg": {
-          "on": {
-            "inverted": {
-              "DEFAULT": "var(--fg-on-inverted)"
-            },
-            "color": {
-              "DEFAULT": "var(--fg-on-color)"
-            }
-          },
           "interactive": {
-            "hover": {
+            "DEFAULT": "var(--bg-interactive)"
-              "DEFAULT": "var(--fg-interactive-hover)"
-            },
-            "DEFAULT": "var(--fg-interactive)"
-          },
-          "error": {
-            "DEFAULT": "var(--fg-error)"
-          },
-          "muted": {
-            "DEFAULT": "var(--fg-muted)"
           },
           "disabled": {
-            "DEFAULT": "var(--fg-disabled)"
+            "DEFAULT": "var(--bg-disabled)"
-          },
-          "base": {
-            "DEFAULT": "var(--fg-base)"
-          },
-          "subtle": {
-            "DEFAULT": "var(--fg-subtle)"
           }
         },
-        "button": {
+        "border": {
-          "danger": {
+          "menu": {
-            "DEFAULT": "var(--button-danger)",
+            "bot": {
-            "pressed": {
+              "DEFAULT": "var(--border-menu-bot)"
-              "DEFAULT": "var(--button-danger-pressed)"
             },
-            "hover": {
+            "top": {
-              "DEFAULT": "var(--button-danger-hover)"
+              "DEFAULT": "var(--border-menu-top)"
             }
           },
+          "strong": {
+            "DEFAULT": "var(--border-strong)"
+          },
+          "interactive": {
+            "DEFAULT": "var(--border-interactive)"
+          },
+          "base": {
+            "DEFAULT": "var(--border-base)"
+          },
+          "danger": {
+            "DEFAULT": "var(--border-danger)"
+          },
+          "error": {
+            "DEFAULT": "var(--border-error)"
+          },
           "transparent": {
-            "DEFAULT": "var(--button-transparent)",
+            "DEFAULT": "var(--border-transparent)"
-            "hover": {
-              "DEFAULT": "var(--button-transparent-hover)"
-            },
-            "pressed": {
-              "DEFAULT": "var(--button-transparent-pressed)"
-            }
-          },
-          "neutral": {
-            "DEFAULT": "var(--button-neutral)",
-            "hover": {
-              "DEFAULT": "var(--button-neutral-hover)"
-            },
-            "pressed": {
-              "DEFAULT": "var(--button-neutral-pressed)"
-            }
-          },
-          "inverted": {
-            "DEFAULT": "var(--button-inverted)",
-            "pressed": {
-              "DEFAULT": "var(--button-inverted-pressed)"
-            },
-            "hover": {
-              "DEFAULT": "var(--button-inverted-hover)"
-            }
           }
         },
         "contrast": {
+          "border": {
+            "top": {
+              "DEFAULT": "var(--contrast-border-top)"
+            },
+            "base": {
+              "DEFAULT": "var(--contrast-border-base)"
+            },
+            "bot": {
+              "DEFAULT": "var(--contrast-border-bot)"
+            }
+          },
+          "fg": {
+            "primary": {
+              "DEFAULT": "var(--contrast-fg-primary)"
+            },
+            "secondary": {
+              "DEFAULT": "var(--contrast-fg-secondary)"
+            }
+          },
           "bg": {
             "base": {
               "pressed": {
@@ -280,50 +230,76 @@ export const theme = {
             },
             "subtle": {
               "DEFAULT": "var(--contrast-bg-subtle)"
-            },
-            "highlight": {
-              "DEFAULT": "var(--contrast-bg-highlight)"
-            },
-            "alpha": {
-              "DEFAULT": "var(--contrast-bg-alpha)"
-            }
-          },
-          "fg": {
-            "primary": {
-              "DEFAULT": "var(--contrast-fg-primary)"
-            },
-            "secondary": {
-              "DEFAULT": "var(--contrast-fg-secondary)"
-            }
-          },
-          "border": {
-            "base": {
-              "DEFAULT": "var(--contrast-border-base)"
             }
           }
         },
-        "code": {
+        "fg": {
-          "fg": {
+          "disabled": {
-            "subtle": {
+            "DEFAULT": "var(--fg-disabled)"
-              "DEFAULT": "var(--code-fg-subtle)"
+          },
+          "base": {
+            "DEFAULT": "var(--fg-base)"
+          },
+          "muted": {
+            "DEFAULT": "var(--fg-muted)"
+          },
+          "on": {
+            "color": {
+              "DEFAULT": "var(--fg-on-color)"
             },
-            "muted": {
+            "inverted": {
-              "DEFAULT": "var(--code-fg-muted)"
+              "DEFAULT": "var(--fg-on-inverted)"
-            },
-            "base": {
-              "DEFAULT": "var(--code-fg-base)"
             }
           },
-          "bg": {
+          "interactive": {
-            "base": {
+            "hover": {
-              "DEFAULT": "var(--code-bg-base)"
+              "DEFAULT": "var(--fg-interactive-hover)"
             },
-            "subtle": {
+            "DEFAULT": "var(--fg-interactive)"
-              "DEFAULT": "var(--code-bg-subtle)"
+          },
+          "error": {
+            "DEFAULT": "var(--fg-error)"
+          },
+          "subtle": {
+            "DEFAULT": "var(--fg-subtle)"
+          }
+        },
+        "button": {
+          "inverted": {
+            "pressed": {
+              "DEFAULT": "var(--button-inverted-pressed)"
+            },
+            "hover": {
+              "DEFAULT": "var(--button-inverted-hover)"
+            },
+            "DEFAULT": "var(--button-inverted)"
+          },
+          "transparent": {
+            "DEFAULT": "var(--button-transparent)",
+            "hover": {
+              "DEFAULT": "var(--button-transparent-hover)"
+            },
+            "pressed": {
+              "DEFAULT": "var(--button-transparent-pressed)"
             }
           },
-          "border": {
+          "danger": {
-            "DEFAULT": "var(--code-border)"
+            "pressed": {
+              "DEFAULT": "var(--button-danger-pressed)"
+            },
+            "DEFAULT": "var(--button-danger)",
+            "hover": {
+              "DEFAULT": "var(--button-danger-hover)"
+            }
+          },
+          "neutral": {
+            "DEFAULT": "var(--button-neutral)",
+            "hover": {
+              "DEFAULT": "var(--button-neutral-hover)"
+            },
+            "pressed": {
+              "DEFAULT": "var(--button-neutral-pressed)"
+            }
           }
         }
       }
@@ -345,13 +321,13 @@ export const theme = {
       "borders-base": "var(--borders-base)",
       "elevation-card-rest": "var(--elevation-card-rest)",
       "buttons-neutral-focus": "var(--buttons-neutral-focus)",
-      "details-code-block": "var(--details-code-block)",
       "details-switch-background-focus": "var(--details-switch-background-focus)",
       "details-switch-background": "var(--details-switch-background)",
       "elevation-flyout": "var(--elevation-flyout)",
       "elevation-tooltip": "var(--elevation-tooltip)",
       "elevation-modal": "var(--elevation-modal)",
-      "details-commandbar": "var(--details-commandbar)"
+      "elevation-commandbar": "var(--elevation-commandbar)",
+      "elevation-code-block": "var(--elevation-code-block)"
     }
   }
 }

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

@@ -1,194 +1,182 @@
 export const colors = {
   "dark": {
-    "--fg-on-color": "rgba(255, 255, 255, 1)",
-    "--border-danger": "rgba(190, 18, 60, 1)",
-    "--border-interactive": "rgba(96, 165, 250, 1)",
-    "--fg-interactive-hover": "rgba(147, 197, 253, 1)",
-    "--fg-error": "rgba(251, 113, 133, 1)",
-    "--bg-interactive": "rgba(96, 165, 250, 1)",
-    "--border-error": "rgba(251, 113, 133, 1)",
-    "--button-danger": "rgba(159, 18, 57, 1)",
-    "--fg-interactive": "rgba(96, 165, 250, 1)",
-    "--tag-red-border": "rgba(136, 19, 55, 1)",
-    "--tag-red-bg": "rgba(76, 5, 25, 1)",
-    "--tag-blue-text": "rgba(147, 197, 253, 1)",
-    "--tag-orange-text": "rgba(253, 186, 116, 1)",
-    "--tag-green-text": "rgba(52, 211, 153, 1)",
-    "--tag-orange-border": "rgba(124, 45, 18, 1)",
-    "--tag-green-border": "rgba(6, 78, 59, 1)",
-    "--tag-red-text": "rgba(253, 164, 175, 1)",
-    "--tag-green-bg-hover": "rgba(6, 78, 59, 1)",
-    "--tag-purple-bg-hover": "rgba(76, 29, 149, 1)",
-    "--tag-red-bg-hover": "rgba(136, 19, 55, 1)",
-    "--border-transparent": "rgba(255, 255, 255, 0)",
-    "--tag-orange-icon": "rgba(251, 146, 60, 1)",
-    "--tag-purple-bg": "rgba(46, 16, 101, 1)",
-    "--tag-blue-bg": "rgba(23, 37, 84, 1)",
-    "--tag-green-bg": "rgba(2, 44, 34, 1)",
-    "--tag-blue-border": "rgba(30, 58, 138, 1)",
-    "--tag-purple-border": "rgba(91, 33, 182, 1)",
-    "--tag-blue-bg-hover": "rgba(30, 42, 138, 1)",
-    "--tag-orange-bg": "rgba(67, 20, 7, 1)",
-    "--tag-orange-bg-hover": "rgba(120, 53, 15, 1)",
-    "--tag-blue-icon": "rgba(96, 165, 250, 1)",
-    "--tag-red-icon": "rgba(251, 113, 133, 1)",
-    "--tag-purple-icon": "rgba(167, 139, 250, 1)",
-    "--tag-purple-text": "rgba(196, 181, 253, 1)",
-    "--tag-green-icon": "rgba(16, 185, 129, 1)",
     "--button-danger-pressed": "rgba(225, 29, 72, 1)",
-    "--button-danger-hover": "rgba(190, 18, 60, 1)",
+    "--bg-subtle-hover": "rgba(24, 24, 27, 1)",
-    "--button-transparent": "rgba(255, 255, 255, 0)",
+    "--bg-overlay": "rgba(9, 9, 11, 0.72)",
-    "--code-bg-base": "rgba(9, 9, 11, 1)",
+    "--fg-on-inverted": "rgba(9, 9, 11, 1)",
+    "--bg-base-pressed": "rgba(63, 63, 70, 1)",
+    "--button-transparent-pressed": "rgba(63, 63, 70, 1)",
+    "--bg-component-hover": "rgba(255, 255, 255, 0.1)",
+    "--border-menu-top": "rgba(24, 24, 27, 1)",
     "--button-neutral": "rgba(39, 39, 42, 1)",
+    "--border-interactive": "rgba(96, 165, 250, 1)",
     "--button-transparent-hover": "rgba(39, 39, 42, 1)",
-    "--code-fg-subtle": "rgba(161, 161, 170, 1)",
-    "--tag-neutral-bg-hover": "rgba(63, 63, 70, 1)",
     "--contrast-border-base": "rgba(82, 82, 91, 1)",
+    "--tag-orange-border": "rgba(124, 45, 18, 1)",
+    "--tag-blue-text": "rgba(147, 197, 253, 1)",
     "--button-neutral-pressed": "rgba(82, 82, 91, 1)",
-    "--tag-neutral-bg": "rgba(255, 255, 255, 0.08)",
     "--bg-highlight": "rgba(23, 37, 84, 1)",
-    "--code-fg-base": "rgba(250, 250, 250, 1)",
     "--tag-neutral-icon": "rgba(113, 113, 122, 1)",
     "--bg-switch-off-hover": "rgba(82, 82, 91, 1)",
     "--bg-base": "rgba(24, 24, 27, 1)",
+    "--fg-on-color": "rgba(255, 255, 255, 1)",
     "--button-inverted-pressed": "rgba(161, 161, 170, 1)",
+    "--fg-interactive-hover": "rgba(147, 197, 253, 1)",
+    "--fg-error": "rgba(251, 113, 133, 1)",
     "--button-neutral-hover": "rgba(63, 63, 70, 1)",
     "--bg-switch-off": "rgba(63, 63, 70, 1)",
+    "--border-strong": "rgba(255, 255, 255, 0.16)",
+    "--border-error": "rgba(251, 113, 133, 1)",
     "--fg-subtle": "rgba(161, 161, 170, 1)",
     "--bg-highlight-hover": "rgba(30, 58, 138, 1)",
     "--button-inverted": "rgba(82, 82, 91, 1)",
+    "--tag-orange-text": "rgba(253, 186, 116, 1)",
     "--fg-base": "rgba(244, 244, 245, 1)",
-    "--code-border": "rgba(39, 39, 42, 1)",
+    "--bg-field-component": "rgba(24, 24, 27, 1)",
-    "--contrast-bg-subtle": "rgba(39, 39, 42, 1)",
-    "--contrast-bg-base-hover": "rgba(82, 82, 91, 1)",
-    "--bg-base-hover": "rgba(39, 39, 42, 1)",
-    "--bg-subtle-hover": "rgba(24, 24, 27, 1)",
     "--fg-disabled": "rgba(82, 82, 91, 1)",
     "--bg-subtle": "rgba(9, 9, 11, 1)",
     "--tag-neutral-border": "rgba(63, 63, 70, 1)",
-    "--bg-subtle-pressed": "rgba(63, 63, 70, 1)",
+    "--bg-field-component-hover": "rgba(9, 9, 11, 0.24)",
+    "--button-danger": "rgba(159, 18, 57, 1)",
+    "--tag-blue-border": "rgba(30, 58, 138, 1)",
     "--tag-neutral-text": "rgba(212, 212, 216, 1)",
     "--fg-muted": "rgba(161, 161, 170, 1)",
-    "--bg-overlay": "rgba(9, 9, 11, 0.72)",
+    "--tag-purple-border": "rgba(91, 33, 182, 1)",
+    "--tag-green-text": "rgba(52, 211, 153, 1)",
     "--button-inverted-hover": "rgba(113, 113, 122, 1)",
-    "--fg-on-inverted": "rgba(9, 9, 11, 1)",
-    "--code-bg-subtle": "rgba(24, 24, 27, 1)",
-    "--bg-component": "rgba(39, 39, 42, 1)",
-    "--bg-base-pressed": "rgba(63, 63, 70, 1)",
-    "--bg-disabled": "rgba(39, 39, 42, 1)",
-    "--contrast-bg-highlight": "rgba(82, 82, 91, 1)",
-    "--button-transparent-pressed": "rgba(63, 63, 70, 1)",
-    "--code-fg-muted": "rgba(82, 82, 91, 1)",
-    "--contrast-fg-secondary": "rgba(161, 161, 170, 1)",
-    "--contrast-bg-base-pressed": "rgba(113, 113, 122, 1)",
-    "--contrast-fg-primary": "rgba(250, 250, 250, 1)",
-    "--contrast-bg-base": "rgba(63, 63, 70, 1)",
     "--bg-component-pressed": "rgba(255, 255, 255, 0.16)",
-    "--bg-component-hover": "rgba(255, 255, 255, 0.1)",
+    "--contrast-border-top": "rgba(24, 24, 27, 1)",
+    "--contrast-border-bot": "rgba(255, 255, 255, 0.08)",
+    "--contrast-fg-secondary": "rgba(161, 161, 170, 1)",
+    "--tag-blue-icon": "rgba(96, 165, 250, 1)",
+    "--contrast-bg-base-pressed": "rgba(113, 113, 122, 1)",
     "--bg-field": "rgba(255, 255, 255, 0.04)",
-    "--bg-field-component": "rgba(24, 24, 27, 1)",
+    "--tag-neutral-bg": "rgba(255, 255, 255, 0.08)",
-    "--bg-field-component-hover": "rgba(9, 9, 11, 0.24)",
+    "--tag-green-border": "rgba(6, 78, 59, 1)",
+    "--contrast-fg-primary": "rgba(250, 250, 250, 1)",
+    "--tag-red-icon": "rgba(251, 113, 133, 1)",
+    "--tag-red-text": "rgba(253, 164, 175, 1)",
+    "--tag-purple-icon": "rgba(167, 139, 250, 1)",
+    "--bg-interactive": "rgba(96, 165, 250, 1)",
     "--bg-field-hover": "rgba(255, 255, 255, 0.08)",
-    "--border-base": "rgba(255, 255, 255, 0.08)",
+    "--border-transparent": "rgba(255, 255, 255, 0)",
-    "--border-strong": "rgba(255, 255, 255, 0.16)",
+    "--contrast-bg-base": "rgba(63, 63, 70, 1)",
-    "--contrast-bg-alpha": "rgba(63, 63, 70, 0.9)",
+    "--tag-orange-icon": "rgba(251, 146, 60, 1)",
+    "--tag-purple-bg": "rgba(46, 16, 101, 1)",
+    "--contrast-bg-subtle": "rgba(39, 39, 42, 1)",
+    "--contrast-bg-base-hover": "rgba(82, 82, 91, 1)",
+    "--bg-base-hover": "rgba(39, 39, 42, 1)",
+    "--tag-blue-bg": "rgba(23, 37, 84, 1)",
+    "--tag-green-bg": "rgba(2, 44, 34, 1)",
+    "--tag-purple-text": "rgba(196, 181, 253, 1)",
+    "--bg-subtle-pressed": "rgba(63, 63, 70, 1)",
+    "--tag-red-border": "rgba(136, 19, 55, 1)",
+    "--border-danger": "rgba(190, 18, 60, 1)",
+    "--tag-green-icon": "rgba(16, 185, 129, 1)",
+    "--tag-red-bg": "rgba(76, 5, 25, 1)",
+    "--fg-interactive": "rgba(96, 165, 250, 1)",
+    "--tag-orange-bg": "rgba(67, 20, 7, 1)",
+    "--button-danger-hover": "rgba(190, 18, 60, 1)",
+    "--bg-component": "rgba(39, 39, 42, 1)",
+    "--bg-disabled": "rgba(39, 39, 42, 1)",
+    "--button-transparent": "rgba(255, 255, 255, 0)",
     "--border-menu-bot": "rgba(255, 255, 255, 0.08)",
-    "--border-menu-top": "rgba(24, 24, 27, 1)"
+    "--border-base": "rgba(255, 255, 255, 0.1)",
+    "--tag-purple-bg-hover": "rgba(91, 33, 182, 1)",
+    "--tag-orange-bg-hover": "rgba(124, 45, 18, 1)",
+    "--tag-neutral-bg-hover": "rgba(63, 63, 70, 1)",
+    "--tag-blue-bg-hover": "rgba(30, 58, 138, 1)",
+    "--tag-red-bg-hover": "rgba(136, 19, 55, 1)",
+    "--tag-green-bg-hover": "rgba(6, 78, 59, 1)"
   },
   "light": {
-    "--tag-green-bg": "rgba(209, 250, 229, 1)",
+    "--tag-neutral-border": "rgba(228, 228, 231, 1)",
-    "--border-interactive": "rgba(59, 130, 246, 1)",
+    "--tag-neutral-icon": "rgba(161, 161, 170, 1)",
-    "--bg-highlight": "rgba(239, 246, 255, 1)",
+    "--bg-switch-off-hover": "rgba(212, 212, 216, 1)",
-    "--tag-red-bg": "rgba(255, 228, 230, 1)",
+    "--border-menu-bot": "rgba(255, 255, 255, 1)",
-    "--tag-orange-bg": "rgba(255, 237, 213, 1)",
+    "--border-menu-top": "rgba(228, 228, 231, 1)",
-    "--tag-green-icon": "rgba(16, 185, 129, 1)",
+    "--bg-subtle-hover": "rgba(244, 244, 245, 1)",
-    "--tag-purple-bg-hover": "rgba(221, 214, 254, 1)",
+    "--contrast-border-top": "rgba(9, 9, 11, 1)",
-    "--tag-blue-border": "rgba(191, 219, 254, 1)",
+    "--bg-overlay": "rgba(9, 9, 11, 0.4)",
-    "--tag-orange-icon": "rgba(249, 115, 22, 1)",
+    "--contrast-fg-primary": "rgba(255, 255, 255, 0.88)",
-    "--tag-purple-bg": "rgba(237, 233, 254, 1)",
+    "--bg-switch-off": "rgba(228, 228, 231, 1)",
-    "--tag-purple-text": "rgba(91, 33, 182, 1)",
+    "--contrast-bg-base-pressed": "rgba(63, 63, 70, 1)",
-    "--tag-blue-bg": "rgba(219, 234, 254, 1)",
+    "--bg-field-component-hover": "rgba(250, 250, 250, 1)",
-    "--tag-blue-icon": "rgba(59, 130, 246, 1)",
+    "--bg-base-pressed": "rgba(228, 228, 231, 1)",
-    "--border-error": "rgba(225, 29, 72, 1)",
+    "--tag-neutral-text": "rgba(82, 82, 91, 1)",
-    "--fg-on-inverted": "rgba(255, 255, 255, 1)",
-    "--fg-on-color": "rgba(255, 255, 255, 1)",
-    "--fg-interactive-hover": "rgba(37, 99, 235, 1)",
-    "--fg-interactive": "rgba(59, 130, 246, 1)",
-    "--fg-error": "rgba(225, 29, 72, 1)",
-    "--border-danger": "rgba(190, 18, 60, 1)",
-    "--fg-muted": "rgba(161, 161, 170, 1)",
-    "--tag-green-bg-hover": "rgba(167, 243, 208, 1)",
-    "--tag-blue-bg-hover": "rgba(191, 219, 254, 1)",
-    "--tag-red-icon": "rgba(244, 63, 94, 1)",
-    "--tag-red-bg-hover": "rgba(254, 205, 211, 1)",
     "--tag-red-text": "rgba(159, 18, 57, 1)",
-    "--tag-purple-icon": "rgba(139, 92, 246, 1)",
+    "--contrast-bg-base": "rgba(24, 24, 27, 1)",
+    "--fg-disabled": "rgba(212, 212, 216, 1)",
+    "--border-strong": "rgba(212, 212, 216, 1)",
+    "--contrast-border-base": "rgba(255, 255, 255, 0.15)",
+    "--bg-field": "rgba(250, 250, 250, 1)",
     "--tag-blue-text": "rgba(30, 64, 175, 1)",
-    "--tag-orange-bg-hover": "rgba(253, 230, 138, 1)",
+    "--fg-base": "rgba(9, 9, 11, 1)",
-    "--tag-purple-border": "rgba(221, 214, 254, 1)",
+    "--button-inverted-pressed": "rgba(82, 82, 91, 1)",
+    "--border-interactive": "rgba(59, 130, 246, 1)",
+    "--bg-base-hover": "rgba(244, 244, 245, 1)",
+    "--contrast-bg-subtle": "rgba(39, 39, 42, 1)",
+    "--bg-highlight": "rgba(239, 246, 255, 1)",
+    "--contrast-fg-secondary": "rgba(255, 255, 255, 0.56)",
+    "--fg-muted": "rgba(161, 161, 170, 1)",
+    "--tag-red-bg": "rgba(255, 228, 230, 1)",
+    "--button-transparent": "rgba(255, 255, 255, 0)",
+    "--button-danger-pressed": "rgba(159, 18, 57, 1)",
+    "--fg-on-color": "rgba(255, 255, 255, 1)",
+    "--button-inverted-hover": "rgba(63, 63, 70, 1)",
+    "--bg-field-component": "rgba(255, 255, 255, 1)",
     "--tag-orange-text": "rgba(154, 52, 18, 1)",
+    "--tag-green-icon": "rgba(16, 185, 129, 1)",
+    "--border-base": "rgba(228, 228, 231, 1)",
+    "--bg-base": "rgba(255, 255, 255, 1)",
     "--tag-orange-border": "rgba(254, 215, 170, 1)",
     "--tag-red-border": "rgba(254, 205, 211, 1)",
     "--tag-green-border": "rgba(167, 243, 208, 1)",
     "--tag-green-text": "rgba(6, 95, 70, 1)",
-    "--button-danger": "rgba(225, 29, 72, 1)",
-    "--button-danger-pressed": "rgba(159, 18, 57, 1)",
-    "--button-danger-hover": "rgba(190, 18, 60, 1)",
-    "--bg-interactive": "rgba(59, 130, 246, 1)",
-    "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
-    "--button-transparent": "rgba(255, 255, 255, 0)",
-    "--bg-overlay": "rgba(9, 9, 11, 0.4)",
-    "--tag-neutral-border": "rgba(228, 228, 231, 1)",
-    "--bg-switch-off": "rgba(228, 228, 231, 1)",
-    "--contrast-bg-base-pressed": "rgba(63, 63, 70, 1)",
-    "--tag-neutral-text": "rgba(82, 82, 91, 1)",
-    "--button-transparent-hover": "rgba(244, 244, 245, 1)",
-    "--contrast-bg-base": "rgba(24, 24, 27, 1)",
-    "--fg-disabled": "rgba(212, 212, 216, 1)",
-    "--bg-field": "rgba(250, 250, 250, 1)",
-    "--border-strong": "rgba(212, 212, 216, 1)",
-    "--bg-field-hover": "rgba(244, 244, 245, 1)",
-    "--fg-base": "rgba(9, 9, 11, 1)",
-    "--contrast-bg-subtle": "rgba(39, 39, 42, 1)",
-    "--code-fg-subtle": "rgba(161, 161, 170, 1)",
-    "--tag-neutral-bg": "rgba(244, 244, 245, 1)",
-    "--button-transparent-pressed": "rgba(228, 228, 231, 1)",
-    "--tag-neutral-bg-hover": "rgba(228, 228, 231, 1)",
-    "--code-fg-muted": "rgba(113, 113, 122, 1)",
-    "--contrast-bg-highlight": "rgba(63, 63, 70, 1)",
-    "--tag-neutral-icon": "rgba(161, 161, 170, 1)",
-    "--border-base": "rgba(228, 228, 231, 1)",
-    "--code-bg-base": "rgba(24, 24, 27, 1)",
     "--button-neutral": "rgba(255, 255, 255, 1)",
-    "--code-bg-subtle": "rgba(39, 39, 42, 1)",
+    "--tag-blue-border": "rgba(191, 219, 254, 1)",
+    "--fg-interactive-hover": "rgba(37, 99, 235, 1)",
+    "--tag-orange-icon": "rgba(249, 115, 22, 1)",
     "--button-neutral-hover": "rgba(244, 244, 245, 1)",
-    "--contrast-bg-base-hover": "rgba(39, 39, 42, 1)",
+    "--fg-interactive": "rgba(59, 130, 246, 1)",
-    "--bg-switch-off-hover": "rgba(212, 212, 216, 1)",
-    "--code-fg-base": "rgba(250, 250, 250, 1)",
-    "--bg-disabled": "rgba(244, 244, 245, 1)",
-    "--code-border": "rgba(63, 63, 70, 1)",
-    "--fg-subtle": "rgba(82, 82, 91, 1)",
-    "--button-neutral-pressed": "rgba(228, 228, 231, 1)",
-    "--border-transparent": "rgba(255, 255, 255, 0)",
-    "--button-inverted": "rgba(39, 39, 42, 1)",
-    "--button-inverted-pressed": "rgba(82, 82, 91, 1)",
-    "--button-inverted-hover": "rgba(63, 63, 70, 1)",
-    "--bg-field-component": "rgba(255, 255, 255, 1)",
-    "--bg-field-component-hover": "rgba(250, 250, 250, 1)",
-    "--contrast-bg-alpha": "rgba(9, 9, 11, 0.8)",
-    "--contrast-fg-primary": "rgba(255, 255, 255, 0.88)",
-    "--contrast-fg-secondary": "rgba(255, 255, 255, 0.56)",
-    "--contrast-border-base": "rgba(255, 255, 255, 0.15)",
-    "--border-menu-bot": "rgba(255, 255, 255, 1)",
-    "--border-menu-top": "rgba(228, 228, 231, 1)",
-    "--bg-base-pressed": "rgba(228, 228, 231, 1)",
-    "--bg-base-hover": "rgba(244, 244, 245, 1)",
-    "--bg-base": "rgba(255, 255, 255, 1)",
     "--bg-component-pressed": "rgba(228, 228, 231, 1)",
+    "--tag-purple-bg": "rgba(237, 233, 254, 1)",
+    "--contrast-bg-base-hover": "rgba(39, 39, 42, 1)",
     "--bg-component": "rgba(250, 250, 250, 1)",
     "--bg-subtle": "rgba(250, 250, 250, 1)",
+    "--tag-purple-text": "rgba(91, 33, 182, 1)",
+    "--contrast-border-bot": "rgba(255, 255, 255, 0.1)",
+    "--button-inverted": "rgba(39, 39, 42, 1)",
+    "--tag-red-icon": "rgba(244, 63, 94, 1)",
+    "--button-transparent-hover": "rgba(244, 244, 245, 1)",
+    "--button-neutral-pressed": "rgba(228, 228, 231, 1)",
+    "--tag-purple-icon": "rgba(167, 139, 250, 1)",
+    "--bg-field-hover": "rgba(244, 244, 245, 1)",
+    "--fg-on-inverted": "rgba(255, 255, 255, 1)",
+    "--bg-interactive": "rgba(59, 130, 246, 1)",
+    "--border-danger": "rgba(190, 18, 60, 1)",
+    "--button-transparent-pressed": "rgba(228, 228, 231, 1)",
+    "--tag-purple-border": "rgba(221, 214, 254, 1)",
+    "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
+    "--border-error": "rgba(225, 29, 72, 1)",
+    "--button-danger": "rgba(225, 29, 72, 1)",
+    "--tag-blue-bg": "rgba(219, 234, 254, 1)",
+    "--border-transparent": "rgba(255, 255, 255, 0)",
+    "--button-danger-hover": "rgba(190, 18, 60, 1)",
     "--bg-subtle-pressed": "rgba(228, 228, 231, 1)",
+    "--fg-error": "rgba(225, 29, 72, 1)",
     "--bg-component-hover": "rgba(244, 244, 245, 1)",
-    "--bg-subtle-hover": "rgba(244, 244, 245, 1)"
+    "--bg-disabled": "rgba(244, 244, 245, 1)",
+    "--tag-blue-icon": "rgba(96, 165, 250, 1)",
+    "--fg-subtle": "rgba(82, 82, 91, 1)",
+    "--tag-orange-bg-hover": "rgba(254, 215, 170, 1)",
+    "--tag-green-bg-hover": "rgba(167, 243, 208, 1)",
+    "--tag-red-bg-hover": "rgba(254, 205, 211, 1)",
+    "--tag-purple-bg-hover": "rgba(221, 214, 254, 1)",
+    "--tag-neutral-bg-hover": "rgba(228, 228, 231, 1)",
+    "--tag-blue-bg-hover": "rgba(191, 219, 254, 1)",
+    "--tag-green-bg": "rgba(209, 250, 229, 1)",
+    "--tag-neutral-bg": "rgba(244, 244, 245, 1)",
+    "--tag-orange-bg": "rgba(255, 237, 213, 1)"
   }
 }

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

@@ -6,13 +6,12 @@ export const effects = {
     "--borders-interactive-with-active": "0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.25)",
     "--borders-focus": "0px 0px 0px 1px rgba(24, 24, 27, 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(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
-    "--details-code-block": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.1) inset",
+    "--elevation-commandbar": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.1) inset, 0px 8px 16px 0px rgba(0, 0, 0, 0.32), 0px 16px 32px 0px rgba(0, 0, 0, 0.32)",
-    "--details-commandbar": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.1) inset, 0px 8px 16px 0px rgba(0, 0, 0, 0.32), 0px 16px 32px 0px rgba(0, 0, 0, 0.32)",
     "--details-switch-background-focus": "0px 0px 0px 1px rgba(24, 24, 27, 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.75px rgba(255, 255, 255, 0.12) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset",
     "--buttons-danger": "0px -1px 0px 0px rgba(255, 255, 255, 0.16), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(159, 18, 57, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
     "--buttons-neutral": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
     "--buttons-danger-focus": "0px -1px 0px 0px rgba(255, 255, 255, 0.16), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(159, 18, 57, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
-    "--borders-base": "0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(24, 24, 27, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
+    "--borders-base": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(24, 24, 27, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
     "--details-switch-background": "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.75px rgba(255, 255, 255, 0.12) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset",
     "--buttons-neutral-focus": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
     "--buttons-inverted-focus": "0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
@@ -22,7 +21,8 @@ export const effects = {
     "--elevation-modal": "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.32), 0px 16px 32px 0px rgba(0, 0, 0, 0.32)",
     "--elevation-card-hover": "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48)",
     "--borders-error": "0px 0px 0px 1px rgba(244, 63, 94, 1), 0px 0px 0px 3px rgba(225, 29, 72, 0.25)",
-    "--buttons-inverted": "0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)"
+    "--buttons-inverted": "0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
+    "--elevation-code-block": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.1) inset"
   },
   "light": {
     "--borders-interactive-with-active": "0px 0px 0px 1px rgba(59, 130, 246, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.2)",
@@ -41,12 +41,12 @@ export const effects = {
     "--borders-base": "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)",
     "--elevation-card-rest": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
     "--buttons-neutral-focus": "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
-    "--details-code-block": "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset",
     "--details-switch-background-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.04) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 0px 0.75px rgba(0, 0, 0, 0.06) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.02) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
     "--details-switch-background": "0px 1px 1px 0px rgba(0, 0, 0, 0.04) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 0px 0.75px rgba(0, 0, 0, 0.06) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.02) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
     "--elevation-flyout": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08)",
     "--elevation-tooltip": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08)",
     "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 1.5px rgba(228, 228, 231, 0.6) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08)",
-    "--details-commandbar": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.3) inset, 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08)"
+    "--elevation-commandbar": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.3) inset, 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08)",
+    "--elevation-code-block": "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset"
   }
 }

packages/design-system/ui/package.json

@@ -91,7 +91,6 @@
     "@radix-ui/react-popover": "1.1.1",
     "@radix-ui/react-portal": "1.1.1",
     "@radix-ui/react-radio-group": "1.2.0",
-    "@radix-ui/react-scroll-area": "1.1.0",
     "@radix-ui/react-select": "2.1.1",
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-switch": "1.1.0",

yarn.lock

@@ -5230,7 +5230,6 @@ __metadata:
     "@radix-ui/react-popover": 1.1.1
     "@radix-ui/react-portal": 1.1.1
     "@radix-ui/react-radio-group": 1.2.0
-    "@radix-ui/react-scroll-area": 1.1.0
     "@radix-ui/react-select": 2.1.1
     "@radix-ui/react-slot": 1.1.0
     "@radix-ui/react-switch": 1.1.0
@@ -6913,33 +6912,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-scroll-area@npm:1.1.0":
-  version: 1.1.0
-  resolution: "@radix-ui/react-scroll-area@npm:1.1.0"
-  dependencies:
-    "@radix-ui/number": 1.1.0
-    "@radix-ui/primitive": 1.1.0
-    "@radix-ui/react-compose-refs": 1.1.0
-    "@radix-ui/react-context": 1.1.0
-    "@radix-ui/react-direction": 1.1.0
-    "@radix-ui/react-presence": 1.1.0
-    "@radix-ui/react-primitive": 2.0.0
-    "@radix-ui/react-use-callback-ref": 1.1.0
-    "@radix-ui/react-use-layout-effect": 1.1.0
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 46063b17f06bd2fe20ceaceb2fb0c1cd1b2767045d6d721904bc3f5d6726704a77eaf63997a514ca8f43d973da0c6446d7ca04057d9983cb0d46f4be8c01c9f5
-  languageName: node
-  linkType: hard
-
 "@radix-ui/react-select@npm:2.1.1":
   version: 2.1.1
   resolution: "@radix-ui/react-select@npm:2.1.1"