@putdotio/design 1.3.0 → 1.5.0

package/dist/tokens.js

@@ -148,6 +148,22 @@ export const tokens = {
     "originalValue": "{component.alias.destructiveForeground}",
     "description": "Text or icon color on destructive command backgrounds."
   },
+  "component.button.info.background": {
+    "cssName": "--button-info-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 56.1%)",
+    "originalValue": "{color.neutral.light.solid}",
+    "description": "Neutral solid command background in light mode."
+  },
+  "component.button.info.backgroundDark": {
+    "cssName": "--button-info-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 43.9%)",
+    "originalValue": "{color.neutral.dark.solid}",
+    "description": "Neutral solid command background in dark mode."
+  },
   "component.button.info.backgroundHover": {
     "cssName": "--button-info-bg-hover",
     "type": "color",
@@ -164,40 +180,175 @@ export const tokens = {
     "originalValue": "{color.neutral.dark.solidHover}",
     "description": "Neutral solid command hover background in dark mode."
   },
+  "component.button.info.foreground": {
+    "cssName": "--button-info-fg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 0%)",
+    "originalValue": "{component.alias.solidForeground}",
+    "description": "Label on the neutral solid — mode-aware for AA contrast on the gray fill."
+  },
+  "component.button.info.foregroundDark": {
+    "cssName": "--button-info-fg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 100%)",
+    "originalValue": "{component.alias.solidForegroundDark}",
+    "description": "Label on the neutral solid in dark mode."
+  },
+  "component.button.default.background": {
+    "cssName": "--button-default-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}",
+    "description": "Quiet default button fill in light mode."
+  },
+  "component.button.default.backgroundDark": {
+    "cssName": "--button-default-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}",
+    "description": "Quiet default button fill in dark mode."
+  },
+  "component.button.default.backgroundHover": {
+    "cssName": "--button-default-bg-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.light.componentBgHover}",
+    "description": "Default button hover fill in light mode."
+  },
+  "component.button.default.backgroundHoverDark": {
+    "cssName": "--button-default-bg-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 15.8%)",
+    "originalValue": "{color.neutral.dark.componentBgHover}",
+    "description": "Default button hover fill in dark mode."
+  },
+  "component.button.default.foreground": {
+    "cssName": "--button-default-fg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "{color.neutral.light.text}",
+    "description": "Default button label in light mode."
+  },
+  "component.button.default.foregroundDark": {
+    "cssName": "--button-default-fg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.dark.text}",
+    "description": "Default button label in dark mode."
+  },
   "component.input.background": {
     "cssName": "--input-bg",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 100%)",
-    "originalValue": "{surface.light.appBg}"
+    "originalValue": "{component.field.background}"
   },
   "component.input.backgroundDark": {
     "cssName": "--input-bg",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 8.5%)",
-    "originalValue": "{surface.dark.appBg}"
+    "originalValue": "{component.field.backgroundDark}"
   },
   "component.input.border": {
     "cssName": "--input-border",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 85.8%)",
-    "originalValue": "{color.neutral.light.border}"
+    "originalValue": "{component.field.border}"
   },
   "component.input.borderDark": {
     "cssName": "--input-border",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 24.3%)",
-    "originalValue": "{color.neutral.dark.border}"
+    "originalValue": "{component.field.borderDark}"
   },
   "component.input.radius": {
     "cssName": "--input-radius",
     "type": "dimension",
     "mode": "global",
     "value": "6px",
-    "originalValue": "{radius.default}"
+    "originalValue": "{component.field.radius}"
+  },
+  "component.input.borderHover": {
+    "cssName": "--input-border-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 78.0%)",
+    "originalValue": "{component.field.borderHover}",
+    "description": "shadcn-friendly alias of --field-border-hover. Always aliases the field token so the two name systems cannot drift."
+  },
+  "component.input.borderHoverDark": {
+    "cssName": "--input-border-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 31.2%)",
+    "originalValue": "{component.field.borderHoverDark}"
+  },
+  "component.input.borderFocus": {
+    "cssName": "--input-border-focus",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 78.0%)",
+    "originalValue": "{component.field.borderFocus}"
+  },
+  "component.input.borderFocusDark": {
+    "cssName": "--input-border-focus",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 31.2%)",
+    "originalValue": "{component.field.borderFocusDark}"
+  },
+  "component.input.ring": {
+    "cssName": "--input-ring",
+    "type": "string",
+    "mode": "light",
+    "value": "0 0 0 1px hsl(0, 0%, 78.0%)",
+    "originalValue": "{component.field.ring}"
+  },
+  "component.input.ringDark": {
+    "cssName": "--input-ring",
+    "type": "string",
+    "mode": "dark",
+    "value": "0 0 0 1px hsl(0, 0%, 31.2%)",
+    "originalValue": "{component.field.ringDark}"
+  },
+  "component.input.text": {
+    "cssName": "--input-text",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "{component.field.text}"
+  },
+  "component.input.textDark": {
+    "cssName": "--input-text",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{component.field.textDark}"
+  },
+  "component.input.placeholder": {
+    "cssName": "--input-placeholder",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "{component.field.placeholder}"
+  },
+  "component.input.placeholderDark": {
+    "cssName": "--input-placeholder",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{component.field.placeholderDark}"
   },
   "component.field.background": {
     "cssName": "--field-bg",
@@ -311,6 +462,14 @@ export const tokens = {
     "originalValue": "{color.neutral.dark.textSecondary}",
     "description": "Dark-mode form-control placeholder color."
   },
+  "component.field.radius": {
+    "cssName": "--field-radius",
+    "type": "dimension",
+    "mode": "global",
+    "value": "6px",
+    "originalValue": "{radius.default}",
+    "description": "Shared form-control radius."
+  },
   "component.field.ring": {
     "cssName": "--field-ring",
     "type": "string",
@@ -658,152 +817,590 @@ export const tokens = {
     "value": "hsla(0, 0%, 0%, 0)",
     "originalValue": "{surface.dark.listItemBg}"
   },
-  "component.fileRow.hoverBackground": {
-    "cssName": "--file-row-bg-hover",
+  "component.fileRow.hoverBackground": {
+    "cssName": "--file-row-bg-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "{surface.light.listItemBgHover}"
+  },
+  "component.fileRow.hoverBackgroundDark": {
+    "cssName": "--file-row-bg-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 11.0%)",
+    "originalValue": "{surface.dark.listItemBgHover}"
+  },
+  "component.fileRow.activeBackground": {
+    "cssName": "--file-row-bg-active",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "{surface.light.listItemBgActive}"
+  },
+  "component.fileRow.activeBackgroundDark": {
+    "cssName": "--file-row-bg-active",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 11.0%)",
+    "originalValue": "{surface.dark.listItemBgActive}"
+  },
+  "component.fileRow.border": {
+    "cssName": "--file-row-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 90.9%)",
+    "originalValue": "{surface.light.listItemBorder}",
+    "description": "Row divider. File lists divide with a hairline, never zebra stripes or per-row cards."
+  },
+  "component.fileRow.borderDark": {
+    "cssName": "--file-row-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 17.9%)",
+    "originalValue": "{surface.dark.listItemBorder}"
+  },
+  "component.fileRow.icon": {
+    "cssName": "--file-row-icon",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(44.7, 97.9%, 63.1%)",
+    "originalValue": "{color.brand.yellow}",
+    "description": "Every file kind takes this, not just the folder — folder, video, audio, image, archive, generic file alike. Utility and chrome icons stay neutral."
+  },
+  "component.notification.infoBackground": {
+    "cssName": "--notification-info-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "{color.neutral.light.bgSecondary}"
+  },
+  "component.notification.infoBackgroundDark": {
+    "cssName": "--notification-info-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}"
+  },
+  "component.notification.dangerBackground": {
+    "cssName": "--notification-danger-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(2, 100%, 96%)",
+    "originalValue": "{color.red.light.componentBg}"
+  },
+  "component.notification.dangerBackgroundDark": {
+    "cssName": "--notification-danger-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 55%, 15%)",
+    "originalValue": "{color.red.dark.componentBg}"
+  },
+  "component.notification.background": {
+    "cssName": "--notification-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}",
+    "description": "Default toast / inline notification surface."
+  },
+  "component.notification.backgroundDark": {
+    "cssName": "--notification-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}"
+  },
+  "component.notification.border": {
+    "cssName": "--notification-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{color.neutral.light.line}"
+  },
+  "component.notification.borderDark": {
+    "cssName": "--notification-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{color.neutral.dark.line}"
+  },
+  "component.notification.foreground": {
+    "cssName": "--notification-fg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "{color.neutral.light.text}"
+  },
+  "component.notification.foregroundDark": {
+    "cssName": "--notification-fg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.dark.text}"
+  },
+  "component.notification.icon": {
+    "cssName": "--notification-icon",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "{color.neutral.light.textSecondary}"
+  },
+  "component.notification.iconDark": {
+    "cssName": "--notification-icon",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}"
+  },
+  "component.notification.successBackground": {
+    "cssName": "--notification-success-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(140, 41%, 97%)",
+    "originalValue": "{color.green.light.bgSecondary}"
+  },
+  "component.notification.successBackgroundDark": {
+    "cssName": "--notification-success-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(149, 21%, 9%)",
+    "originalValue": "{color.green.dark.bgSecondary}"
+  },
+  "component.notification.successBorder": {
+    "cssName": "--notification-success-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(140, 39%, 68%)",
+    "originalValue": "{color.green.light.border}"
+  },
+  "component.notification.successBorderDark": {
+    "cssName": "--notification-success-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(146, 41%, 29%)",
+    "originalValue": "{color.green.dark.border}"
+  },
+  "component.notification.successForeground": {
+    "cssName": "--notification-success-fg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(146, 35%, 17%)",
+    "originalValue": "{color.green.light.text}"
+  },
+  "component.notification.successForegroundDark": {
+    "cssName": "--notification-success-fg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(142, 71%, 82%)",
+    "originalValue": "{color.green.dark.text}"
+  },
+  "component.notification.dangerBorder": {
+    "cssName": "--notification-danger-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(2, 81%, 80%)",
+    "originalValue": "{color.red.light.border}"
+  },
+  "component.notification.dangerBorderDark": {
+    "cssName": "--notification-danger-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 46%, 38%)",
+    "originalValue": "{color.red.dark.border}"
+  },
+  "component.notification.dangerForeground": {
+    "cssName": "--notification-danger-fg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(358, 62%, 24%)",
+    "originalValue": "{color.red.light.text}"
+  },
+  "component.notification.dangerForegroundDark": {
+    "cssName": "--notification-danger-fg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(5, 100%, 91%)",
+    "originalValue": "{color.red.dark.text}"
+  },
+  "component.menu.background": {
+    "cssName": "--menu-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}",
+    "description": "Floating menu surface."
+  },
+  "component.menu.backgroundDark": {
+    "cssName": "--menu-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}"
+  },
+  "component.menu.border": {
+    "cssName": "--menu-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{color.neutral.light.line}"
+  },
+  "component.menu.borderDark": {
+    "cssName": "--menu-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{color.neutral.dark.line}"
+  },
+  "component.menu.radius": {
+    "cssName": "--menu-radius",
+    "type": "dimension",
+    "mode": "global",
+    "value": "8px",
+    "originalValue": "{radius.md}"
+  },
+  "component.menu.shadow": {
+    "cssName": "--menu-shadow",
+    "type": "string",
+    "mode": "light",
+    "value": "0 16px 40px hsla(0, 0%, 0%, 0.12)",
+    "originalValue": "{elevation.lg}"
+  },
+  "component.menu.shadowDark": {
+    "cssName": "--menu-shadow",
+    "type": "string",
+    "mode": "dark",
+    "value": "0 16px 40px hsla(0, 0%, 0%, 0.6)",
+    "originalValue": "{surface.dark.shadowLg}"
+  },
+  "component.menu.itemBackgroundHover": {
+    "cssName": "--menu-item-bg-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.light.componentBgHover}"
+  },
+  "component.menu.itemBackgroundHoverDark": {
+    "cssName": "--menu-item-bg-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 15.8%)",
+    "originalValue": "{color.neutral.dark.componentBgHover}"
+  },
+  "component.menu.itemText": {
+    "cssName": "--menu-item-text",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "{color.neutral.light.text}"
+  },
+  "component.menu.itemTextDark": {
+    "cssName": "--menu-item-text",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.dark.text}"
+  },
+  "component.menu.itemIcon": {
+    "cssName": "--menu-item-icon",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "{color.neutral.light.textSecondary}"
+  },
+  "component.menu.itemIconDark": {
+    "cssName": "--menu-item-icon",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}"
+  },
+  "component.menu.itemShortcut": {
+    "cssName": "--menu-item-shortcut",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "{color.neutral.light.textSecondary}"
+  },
+  "component.menu.itemShortcutDark": {
+    "cssName": "--menu-item-shortcut",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}"
+  },
+  "component.menu.itemDangerText": {
+    "cssName": "--menu-item-danger-text",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(355, 64%, 49%)",
+    "originalValue": "{color.red.light.textSecondary}"
+  },
+  "component.menu.itemDangerTextDark": {
+    "cssName": "--menu-item-danger-text",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(2, 100%, 77%)",
+    "originalValue": "{color.red.dark.textSecondary}"
+  },
+  "component.menu.itemDangerBackgroundHover": {
+    "cssName": "--menu-item-danger-bg-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(2, 100%, 96%)",
+    "originalValue": "{color.red.light.componentBg}"
+  },
+  "component.menu.itemDangerBackgroundHoverDark": {
+    "cssName": "--menu-item-danger-bg-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 55%, 15%)",
+    "originalValue": "{color.red.dark.componentBg}"
+  },
+  "component.menu.itemHeight": {
+    "cssName": "--menu-item-height",
+    "type": "dimension",
+    "mode": "global",
+    "value": "32px",
+    "originalValue": "32px"
+  },
+  "component.menu.separator": {
+    "cssName": "--menu-separator",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{color.neutral.light.line}"
+  },
+  "component.menu.separatorDark": {
+    "cssName": "--menu-separator",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{color.neutral.dark.line}"
+  },
+  "component.menu.label": {
+    "cssName": "--menu-label",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "{color.neutral.light.textSecondary}"
+  },
+  "component.menu.labelDark": {
+    "cssName": "--menu-label",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}"
+  },
+  "component.palette.background": {
+    "cssName": "--palette-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}",
+    "description": "Command palette surface."
+  },
+  "component.palette.backgroundDark": {
+    "cssName": "--palette-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}"
+  },
+  "component.palette.border": {
+    "cssName": "--palette-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{color.neutral.light.line}"
+  },
+  "component.palette.borderDark": {
+    "cssName": "--palette-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{color.neutral.dark.line}"
+  },
+  "component.palette.shadow": {
+    "cssName": "--palette-shadow",
+    "type": "string",
+    "mode": "light",
+    "value": "0 16px 40px hsla(0, 0%, 0%, 0.12)",
+    "originalValue": "{elevation.lg}"
+  },
+  "component.palette.shadowDark": {
+    "cssName": "--palette-shadow",
+    "type": "string",
+    "mode": "dark",
+    "value": "0 16px 40px hsla(0, 0%, 0%, 0.6)",
+    "originalValue": "{surface.dark.shadowLg}"
+  },
+  "component.palette.scrim": {
+    "cssName": "--palette-scrim",
+    "type": "color",
+    "mode": "light",
+    "value": "hsla(0, 0%, 0%, 0.439)",
+    "originalValue": "{surface.light.overlayFull}"
+  },
+  "component.palette.scrimDark": {
+    "cssName": "--palette-scrim",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsla(0, 0%, 0%, 0.565)",
+    "originalValue": "{surface.dark.overlayFull}"
+  },
+  "component.palette.width": {
+    "cssName": "--palette-width",
+    "type": "dimension",
+    "mode": "global",
+    "value": "560px",
+    "originalValue": "560px"
+  },
+  "component.palette.inputHeight": {
+    "cssName": "--palette-input-height",
+    "type": "dimension",
+    "mode": "global",
+    "value": "48px",
+    "originalValue": "48px"
+  },
+  "component.palette.itemHeight": {
+    "cssName": "--palette-item-height",
+    "type": "dimension",
+    "mode": "global",
+    "value": "36px",
+    "originalValue": "36px"
+  },
+  "component.palette.itemBackgroundActive": {
+    "cssName": "--palette-item-bg-active",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.light.componentBgHover}"
+  },
+  "component.palette.itemBackgroundActiveDark": {
+    "cssName": "--palette-item-bg-active",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 15.8%)",
+    "originalValue": "{color.neutral.dark.componentBgHover}"
+  },
+  "component.palette.groupLabel": {
+    "cssName": "--palette-group-label",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "{color.neutral.light.textSecondary}"
+  },
+  "component.palette.groupLabelDark": {
+    "cssName": "--palette-group-label",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}"
+  },
+  "component.palette.itemMeta": {
+    "cssName": "--palette-item-meta",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 97.3%)",
-    "originalValue": "{surface.light.listItemBgHover}"
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "{color.neutral.light.textSecondary}"
   },
-  "component.fileRow.hoverBackgroundDark": {
-    "cssName": "--file-row-bg-hover",
+  "component.palette.itemMetaDark": {
+    "cssName": "--palette-item-meta",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 11.0%)",
-    "originalValue": "{surface.dark.listItemBgHover}"
-  },
-  "component.fileRow.icon": {
-    "cssName": "--file-row-icon",
-    "type": "color",
-    "mode": "global",
-    "value": "hsl(44.7, 97.9%, 63.1%)",
-    "originalValue": "{color.brand.yellow}"
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}"
   },
-  "component.notification.infoBackground": {
-    "cssName": "--notification-info-bg",
+  "component.sheet.background": {
+    "cssName": "--sheet-bg",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 97.3%)",
-    "originalValue": "{color.neutral.light.bgSecondary}"
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}",
+    "description": "Right-side detail panel surface."
   },
-  "component.notification.infoBackgroundDark": {
-    "cssName": "--notification-info-bg",
+  "component.sheet.backgroundDark": {
+    "cssName": "--sheet-bg",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 13.6%)",
     "originalValue": "{color.neutral.dark.componentBg}"
   },
-  "component.notification.dangerBackground": {
-    "cssName": "--notification-danger-bg",
+  "component.sheet.border": {
+    "cssName": "--sheet-border",
     "type": "color",
     "mode": "light",
-    "value": "hsl(2, 100%, 96%)",
-    "originalValue": "{color.red.light.componentBg}"
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{color.neutral.light.line}"
   },
-  "component.notification.dangerBackgroundDark": {
-    "cssName": "--notification-danger-bg",
+  "component.sheet.borderDark": {
+    "cssName": "--sheet-border",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 55%, 15%)",
-    "originalValue": "{color.red.dark.componentBg}"
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{color.neutral.dark.line}"
   },
-  "context.tv.surface.0": {
-    "cssName": "--surf-0",
-    "type": "color",
-    "mode": "tv",
-    "value": "hsl(0, 0%, 0%)",
-    "originalValue": "hsl(0, 0%, 0%)"
+  "component.sheet.shadow": {
+    "cssName": "--sheet-shadow",
+    "type": "string",
+    "mode": "light",
+    "value": "0 16px 40px hsla(0, 0%, 0%, 0.12)",
+    "originalValue": "{elevation.lg}"
   },
-  "context.tv.surface.1": {
-    "cssName": "--surf-1",
-    "type": "color",
-    "mode": "tv",
-    "value": "hsl(0, 0%, 3.9%)",
-    "originalValue": "hsl(0, 0%, 3.9%)"
+  "component.sheet.shadowDark": {
+    "cssName": "--sheet-shadow",
+    "type": "string",
+    "mode": "dark",
+    "value": "0 16px 40px hsla(0, 0%, 0%, 0.6)",
+    "originalValue": "{surface.dark.shadowLg}"
   },
-  "context.tv.surface.2": {
-    "cssName": "--surf-2",
+  "component.sheet.scrim": {
+    "cssName": "--sheet-scrim",
     "type": "color",
-    "mode": "tv",
-    "value": "hsl(0, 0%, 8.6%)",
-    "originalValue": "hsl(0, 0%, 8.6%)"
+    "mode": "light",
+    "value": "hsla(0, 0%, 0%, 0.439)",
+    "originalValue": "{surface.light.overlayFull}"
   },
-  "context.tv.surface.3": {
-    "cssName": "--surf-3",
+  "component.sheet.scrimDark": {
+    "cssName": "--sheet-scrim",
     "type": "color",
-    "mode": "tv",
-    "value": "hsl(0, 0%, 12.2%)",
-    "originalValue": "hsl(0, 0%, 12.2%)"
+    "mode": "dark",
+    "value": "hsla(0, 0%, 0%, 0.565)",
+    "originalValue": "{surface.dark.overlayFull}"
+  },
+  "component.sheet.width": {
+    "cssName": "--sheet-width",
+    "type": "dimension",
+    "mode": "global",
+    "value": "380px",
+    "originalValue": "380px",
+    "description": "Fixed on web. Touch surfaces use a bottom sheet instead."
   },
   "context.tv.text.primary": {
     "cssName": "--text-1",
     "type": "color",
     "mode": "tv",
-    "value": "hsl(0, 0%, 95.7%)",
-    "originalValue": "hsl(0, 0%, 95.7%)"
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.dark.text}",
+    "description": "Row titles, modal option labels, and button labels."
   },
   "context.tv.text.secondary": {
     "cssName": "--text-2",
     "type": "color",
     "mode": "tv",
-    "value": "hsla(0, 0%, 95.7%, 0.62)",
-    "originalValue": "hsla(0, 0%, 95.7%, 0.62)"
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}",
+    "description": "Row sublines, modal titles, section headers, and accessories."
   },
   "context.tv.text.tertiary": {
     "cssName": "--text-3",
     "type": "color",
     "mode": "tv",
-    "value": "hsla(0, 0%, 95.7%, 0.38)",
-    "originalValue": "hsla(0, 0%, 95.7%, 0.38)"
-  },
-  "context.tv.glass.1": {
-    "cssName": "--glass-1-bg",
-    "type": "color",
-    "mode": "tv",
-    "value": "hsla(0, 0%, 100%, 0.06)",
-    "originalValue": "hsla(0, 0%, 100%, 0.06)"
-  },
-  "context.tv.glass.2": {
-    "cssName": "--glass-2-bg",
-    "type": "color",
-    "mode": "tv",
-    "value": "hsla(0, 0%, 100%, 0.10)",
-    "originalValue": "hsla(0, 0%, 100%, 0.10)"
-  },
-  "context.tv.glass.3": {
-    "cssName": "--glass-3-bg",
-    "type": "color",
-    "mode": "tv",
-    "value": "hsla(0, 0%, 100%, 0.14)",
-    "originalValue": "hsla(0, 0%, 100%, 0.14)"
-  },
-  "context.tv.glass.border": {
-    "cssName": "--glass-border",
-    "type": "color",
-    "mode": "tv",
-    "value": "hsla(0, 0%, 100%, 0.12)",
-    "originalValue": "hsla(0, 0%, 100%, 0.12)"
-  },
-  "context.tv.glass.borderStrong": {
-    "cssName": "--glass-border-strong",
-    "type": "color",
-    "mode": "tv",
-    "value": "hsla(0, 0%, 100%, 0.22)",
-    "originalValue": "hsla(0, 0%, 100%, 0.22)"
-  },
-  "context.tv.focus.ring": {
-    "cssName": "--focus-ring",
-    "type": "color",
-    "mode": "tv",
-    "value": "hsla(44.7, 97.9%, 63.1%, 0.18)",
-    "originalValue": "hsla(44.7, 97.9%, 63.1%, 0.18)"
-  },
-  "context.tv.focus.liftShadow": {
-    "cssName": "--focus-shadow",
-    "type": "string",
-    "mode": "tv",
-    "value": "0 14px 30px hsla(0, 0%, 0%, 0.45)",
-    "originalValue": "0 14px 30px hsla(0, 0%, 0%, 0.45)"
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{context.tv.text.secondary}",
+    "description": "Deprecated compatibility alias. Use context.tv.text.secondary.",
+    "deprecated": true
   },
   "context.tv.channelArt.production.posterBackground": {
     "cssName": "--tv-channel-art-production-poster-bg",
@@ -861,6 +1458,161 @@ export const tokens = {
     "value": "hsl(110.6, 100%, 53.9%)",
     "originalValue": "hsl(110.6, 100%, 53.9%)"
   },
+  "tv.text.heading": {
+    "cssName": "--tv-text-heading",
+    "type": "dimension",
+    "mode": "tv",
+    "value": "64px",
+    "originalValue": "64px",
+    "description": "text.heading · GTAmerica-Md."
+  },
+  "tv.text.label": {
+    "cssName": "--tv-text-label",
+    "type": "dimension",
+    "mode": "tv",
+    "value": "48px",
+    "originalValue": "48px",
+    "description": "text.label · GTAmerica-Md. Screen titles, and the file-row icon size."
+  },
+  "tv.text.body": {
+    "cssName": "--tv-text-body",
+    "type": "dimension",
+    "mode": "tv",
+    "value": "36px",
+    "originalValue": "36px",
+    "description": "text.body · GTAmerica-Rg. The file-row title."
+  },
+  "tv.text.caption": {
+    "cssName": "--tv-text-caption",
+    "type": "dimension",
+    "mode": "tv",
+    "value": "32px",
+    "originalValue": "32px",
+    "description": "text.caption · GTAmerica-Rg. Row subline and button icons. TV has no mono face — the size subline renders in GT America with tabular figures, so the Berkeley Mono numeric rule is web and mobile only."
+  },
+  "tv.text.smol": {
+    "cssName": "--tv-text-smol",
+    "type": "dimension",
+    "mode": "tv",
+    "value": "24px",
+    "originalValue": "24px",
+    "description": "text.smol · GTAmerica-Rg. Button labels, rendered uppercase."
+  },
+  "tv.fontWeight.regular": {
+    "cssName": "--tv-fw-regular",
+    "type": "fontWeight",
+    "mode": "tv",
+    "value": "400",
+    "originalValue": "400",
+    "description": "GTAmerica-Rg."
+  },
+  "tv.fontWeight.medium": {
+    "cssName": "--tv-fw-medium",
+    "type": "fontWeight",
+    "mode": "tv",
+    "value": "500",
+    "originalValue": "500",
+    "description": "GTAmerica-Md."
+  },
+  "tv.space.xxs": {
+    "cssName": "--tv-space-xxs",
+    "type": "dimension",
+    "mode": "tv",
+    "value": "4px",
+    "originalValue": "4px"
+  },
+  "tv.space.xs": {
+    "cssName": "--tv-space-xs",
+    "type": "dimension",
+    "mode": "tv",
+    "value": "8px",
+    "originalValue": "8px"
+  },
+  "tv.space.sm": {
+    "cssName": "--tv-space-sm",
+    "type": "dimension",
+    "mode": "tv",
+    "value": "16px",
+    "originalValue": "16px",
+    "description": "Button padding at size=\"sm\"."
+  },
+  "tv.space.md": {
+    "cssName": "--tv-space-md",
+    "type": "dimension",
+    "mode": "tv",
+    "value": "32px",
+    "originalValue": "32px",
+    "description": "The workhorse step: uniform list-row padding, row gap, and header padding-bottom."
+  },
+  "tv.space.lg": {
+    "cssName": "--tv-space-lg",
+    "type": "dimension",
+    "mode": "tv",
+    "value": "64px",
+    "originalValue": "64px"
+  },
+  "tv.space.xl": {
+    "cssName": "--tv-space-xl",
+    "type": "dimension",
+    "mode": "tv",
+    "value": "128px",
+    "originalValue": "128px"
+  },
+  "tv.space.xxl": {
+    "cssName": "--tv-space-xxl",
+    "type": "dimension",
+    "mode": "tv",
+    "value": "256px",
+    "originalValue": "256px"
+  },
+  "tv.overscan.x": {
+    "cssName": "--tv-overscan-x",
+    "type": "number",
+    "mode": "tv",
+    "value": 0.04,
+    "originalValue": 0.04,
+    "description": "Horizontal safe-area ratio. Platform adapters multiply this value by viewport width.",
+    "basis": "viewport-width"
+  },
+  "tv.overscan.y": {
+    "cssName": "--tv-overscan-y",
+    "type": "number",
+    "mode": "tv",
+    "value": 0.02,
+    "originalValue": 0.02,
+    "description": "Vertical safe-area ratio. Platform adapters multiply this value by viewport height.",
+    "basis": "viewport-height"
+  },
+  "tv.radius": {
+    "cssName": "--tv-radius",
+    "type": "dimension",
+    "mode": "tv",
+    "value": "12px",
+    "originalValue": "{radius.tv}",
+    "description": "radii.default — one radius for every 10-foot surface."
+  },
+  "tv.z.modal": {
+    "cssName": "--tv-z-modal",
+    "type": "number",
+    "mode": "tv",
+    "value": 100,
+    "originalValue": 100
+  },
+  "tv.z.toast": {
+    "cssName": "--tv-z-toast",
+    "type": "number",
+    "mode": "tv",
+    "value": 200,
+    "originalValue": 200
+  },
+  "tv.z.overlay": {
+    "cssName": "--tv-z-overlay",
+    "type": "number",
+    "mode": "tv",
+    "value": 300,
+    "originalValue": 300,
+    "description": "Above toast — the opposite of the web scale, where --z-notification (1400) sits above --z-modal (1300)."
+  },
   "color.brand.yellow": {
     "cssName": "--yellow-solid",
     "type": "color",
@@ -1182,7 +1934,7 @@ export const tokens = {
     "type": "color",
     "mode": "dark",
     "value": "hsl(151, 55%, 41.5%)",
-    "originalValue": "hsl(151, 55%, 41.5%)"
+    "originalValue": "{color.green.light.solid}"
   },
   "color.green.dark.solidHover": {
     "cssName": "--green-solid-hover",
@@ -1350,7 +2102,7 @@ export const tokens = {
     "type": "color",
     "mode": "dark",
     "value": "hsl(358, 75%, 59%)",
-    "originalValue": "hsl(358, 75%, 59%)"
+    "originalValue": "{color.red.light.solid}"
   },
   "color.red.dark.solidHover": {
     "cssName": "--red-solid-hover",
@@ -1512,7 +2264,7 @@ export const tokens = {
     "type": "color",
     "mode": "dark",
     "value": "hsl(45, 89%, 58%)",
-    "originalValue": "hsl(45, 89%, 58%)",
+    "originalValue": "{color.yellow.light.solidHover}",
     "description": "Primary-button hover yellow for dark mode."
   },
   "color.yellow.dark.textSecondary": {
@@ -1555,7 +2307,8 @@ export const tokens = {
     "type": "color",
     "mode": "global",
     "value": "hsl(0, 0%, 78.0%)",
-    "originalValue": "hsl(0, 0%, 78.0%)"
+    "originalValue": "{elevation.shadowColor}",
+    "description": "Compat name kept for existing web consumers — alias of elevation.shadowColor so the two can never drift."
   },
   "elevation.sm": {
     "cssName": "--shadow-sm",
@@ -1604,21 +2357,15 @@ export const tokens = {
     "type": "fontFamily",
     "mode": "global",
     "value": "\"GT America\", sans-serif",
-    "originalValue": "\"GT America\", sans-serif"
-  },
-  "typography.fontFamily.uiMono": {
-    "cssName": "--font-ui-mono",
-    "type": "fontFamily",
-    "mode": "global",
-    "value": "\"GT America Mono\", monospace",
-    "originalValue": "\"GT America Mono\", monospace"
+    "originalValue": "{typography.fontFamily.sans}"
   },
   "typography.fontFamily.mono": {
     "cssName": "--font-mono",
     "type": "fontFamily",
     "mode": "global",
-    "value": "\"Berkeley Mono\", \"GT America Mono\", monospace",
-    "originalValue": "\"Berkeley Mono\", \"GT America Mono\", monospace"
+    "value": "\"Berkeley Mono\", monospace",
+    "originalValue": "\"Berkeley Mono\", monospace",
+    "description": "The single mono face: numerics, timestamps, file sizes, ETAs, counts, code, logs, magnet URIs, identifiers, and filenames. Web and mobile only — TV has no mono face."
   },
   "typography.fontSize.xs": {
     "cssName": "--fs-xs",
@@ -1631,64 +2378,73 @@ export const tokens = {
     "cssName": "--fs-sm",
     "type": "dimension",
     "mode": "global",
-    "value": "0.8125rem",
-    "originalValue": "0.8125rem"
+    "value": "0.875rem",
+    "originalValue": "0.875rem",
+    "description": "Caption and button labels — production fontSize 0."
   },
   "typography.fontSize.base": {
     "cssName": "--fs-base",
     "type": "dimension",
     "mode": "global",
-    "value": "0.875rem",
-    "originalValue": "0.875rem"
+    "value": "1rem",
+    "originalValue": "1rem",
+    "description": "Body, labels, inputs — production fontSize 1; equals the responsive root (14px, 15px at >= breakpoint.lg)."
   },
   "typography.fontSize.md": {
     "cssName": "--fs-md",
     "type": "dimension",
     "mode": "global",
-    "value": "1rem",
-    "originalValue": "1rem"
+    "value": "1.125rem",
+    "originalValue": "1.125rem",
+    "description": "Subheading."
   },
   "typography.fontSize.lg": {
     "cssName": "--fs-lg",
     "type": "dimension",
     "mode": "global",
-    "value": "1.125rem",
-    "originalValue": "1.125rem"
+    "value": "1.5rem",
+    "originalValue": "1.5rem",
+    "description": "Heading."
   },
   "typography.fontSize.xl": {
     "cssName": "--fs-xl",
     "type": "dimension",
     "mode": "global",
-    "value": "1.5rem",
-    "originalValue": "1.5rem"
+    "value": "2rem",
+    "originalValue": "2rem",
+    "description": "Page title."
   },
   "typography.fontSize.2xl": {
     "cssName": "--fs-2xl",
     "type": "dimension",
     "mode": "global",
-    "value": "2rem",
-    "originalValue": "2rem"
+    "value": "48px",
+    "originalValue": "48px",
+    "description": "Fixed display tier — does not scale with the responsive root."
   },
   "typography.fontSize.3xl": {
     "cssName": "--fs-3xl",
     "type": "dimension",
     "mode": "global",
-    "value": "3rem",
-    "originalValue": "3rem"
+    "value": "64px",
+    "originalValue": "64px",
+    "description": "Fixed display tier — does not scale with the responsive root."
   },
   "typography.fontSize.4xl": {
     "cssName": "--fs-4xl",
     "type": "dimension",
     "mode": "global",
-    "value": "4rem",
-    "originalValue": "4rem"
+    "value": "64px",
+    "originalValue": "{typography.fontSize.3xl}",
+    "description": "Compatibility alias for the former 4xl tier; new surfaces should use fontSize.3xl or fontSize.display."
   },
   "typography.fontSize.display": {
     "cssName": "--fs-display",
     "type": "dimension",
     "mode": "global",
-    "value": "6rem",
-    "originalValue": "6rem"
+    "value": "96px",
+    "originalValue": "96px",
+    "description": "Fixed display tier for brand display moments."
   },
   "typography.lineHeight.tight": {
     "cssName": "--lh-tight",
@@ -1872,6 +2628,14 @@ export const tokens = {
     "value": "999px",
     "originalValue": "999px"
   },
+  "radius.tv": {
+    "cssName": "--radius-tv",
+    "type": "dimension",
+    "mode": "global",
+    "value": "12px",
+    "originalValue": "12px",
+    "description": "The corner radius for every 10-foot surface — list rows, buttons, sheets, cards, code tiles, and keys. TV uses one radius, not a scale; the only other radii on TV are intentional pills and circles."
+  },
   "border.width": {
     "cssName": "--border-width",
     "type": "dimension",
@@ -1914,12 +2678,69 @@ export const tokens = {
     "value": "320ms",
     "originalValue": "320ms"
   },
+  "z.dropdown": {
+    "cssName": "--z-dropdown",
+    "type": "number",
+    "mode": "global",
+    "value": 1000,
+    "originalValue": 1000
+  },
+  "z.sticky": {
+    "cssName": "--z-sticky",
+    "type": "number",
+    "mode": "global",
+    "value": 1100,
+    "originalValue": 1100
+  },
+  "z.modal": {
+    "cssName": "--z-modal",
+    "type": "number",
+    "mode": "global",
+    "value": 1300,
+    "originalValue": 1300
+  },
+  "z.notification": {
+    "cssName": "--z-notification",
+    "type": "number",
+    "mode": "global",
+    "value": 1400,
+    "originalValue": 1400
+  },
+  "z.tooltip": {
+    "cssName": "--z-tooltip",
+    "type": "number",
+    "mode": "global",
+    "value": 1500,
+    "originalValue": 1500
+  },
+  "breakpoint.sm": {
+    "cssName": "--bp-sm",
+    "type": "dimension",
+    "mode": "global",
+    "value": "640px",
+    "originalValue": "640px"
+  },
+  "breakpoint.md": {
+    "cssName": "--bp-md",
+    "type": "dimension",
+    "mode": "global",
+    "value": "768px",
+    "originalValue": "768px"
+  },
+  "breakpoint.lg": {
+    "cssName": "--bp-lg",
+    "type": "dimension",
+    "mode": "global",
+    "value": "1280px",
+    "originalValue": "1280px",
+    "description": "The root font-size steps from 14px to 15px at this width."
+  },
   "surface.light.htmlBg": {
     "cssName": "--html-bg",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 97.3%)",
-    "originalValue": "hsl(0, 0%, 97.3%)"
+    "originalValue": "{color.neutral.light.bgSecondary}"
   },
   "surface.light.appBg": {
     "cssName": "--app-bg",
@@ -1933,7 +2754,7 @@ export const tokens = {
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 100%)",
-    "originalValue": "hsl(0, 0%, 100%)"
+    "originalValue": "{surface.light.appBg}"
   },
   "surface.light.navItemBg": {
     "cssName": "--nav-item-bg",
@@ -1947,14 +2768,14 @@ export const tokens = {
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 95.1%)",
-    "originalValue": "hsl(0, 0%, 95.1%)"
+    "originalValue": "{color.neutral.light.componentBg}"
   },
   "surface.light.navItemBgActive": {
     "cssName": "--nav-item-bg-active",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 95.1%)",
-    "originalValue": "hsl(0, 0%, 95.1%)"
+    "originalValue": "{color.neutral.light.componentBg}"
   },
   "surface.light.listItemBg": {
     "cssName": "--list-item-bg",
@@ -1968,14 +2789,14 @@ export const tokens = {
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 97.3%)",
-    "originalValue": "hsl(0, 0%, 97.3%)"
+    "originalValue": "{color.neutral.light.bgSecondary}"
   },
   "surface.light.listItemBgActive": {
     "cssName": "--list-item-bg-active",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 97.3%)",
-    "originalValue": "hsl(0, 0%, 97.3%)"
+    "originalValue": "{color.neutral.light.bgSecondary}"
   },
   "surface.light.listItemBorder": {
     "cssName": "--list-item-border",
@@ -1989,35 +2810,35 @@ export const tokens = {
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 95.1%)",
-    "originalValue": "hsl(0, 0%, 95.1%)"
+    "originalValue": "{color.neutral.light.componentBg}"
   },
   "surface.light.segmentedControlBgActive": {
     "cssName": "--segmented-control-bg-active",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 100%)",
-    "originalValue": "hsl(0, 0%, 100%)"
+    "originalValue": "{surface.light.appBg}"
   },
   "surface.light.transferListItemCompletingBg": {
     "cssName": "--transfer-list-item-completing-bg",
     "type": "color",
     "mode": "light",
     "value": "hsl(85, 76.0%, 92.3%)",
-    "originalValue": "hsl(85, 76.0%, 92.3%)"
+    "originalValue": "{color.transfer.light.lime3}"
   },
   "surface.light.transferListItemDownloadingBg": {
     "cssName": "--transfer-list-item-downloading-bg",
     "type": "color",
     "mode": "light",
     "value": "hsl(85, 76.0%, 92.3%)",
-    "originalValue": "hsl(85, 76.0%, 92.3%)"
+    "originalValue": "{color.transfer.light.lime3}"
   },
   "surface.light.transferListItemFinishedBg": {
     "cssName": "--transfer-list-item-finished-bg",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 97.3%)",
-    "originalValue": "hsl(0, 0%, 97.3%)"
+    "originalValue": "{color.neutral.light.bgSecondary}"
   },
   "surface.light.transferListItemPassiveBg": {
     "cssName": "--transfer-list-item-passive-bg",
@@ -2031,14 +2852,14 @@ export const tokens = {
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 9.0%)",
-    "originalValue": "hsl(0, 0%, 9.0%)"
+    "originalValue": "{color.neutral.light.text}"
   },
   "surface.light.loContrast": {
     "cssName": "--lo-contrast",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 99.0%)",
-    "originalValue": "hsl(0, 0%, 99.0%)"
+    "originalValue": "{color.neutral.light.bg}"
   },
   "surface.light.transparent": {
     "cssName": "--transparent",
@@ -2080,7 +2901,7 @@ export const tokens = {
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 8.5%)",
-    "originalValue": "hsl(0, 0%, 8.5%)"
+    "originalValue": "{surface.dark.appBg}"
   },
   "surface.dark.navItemBg": {
     "cssName": "--nav-item-bg",
@@ -2094,14 +2915,14 @@ export const tokens = {
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 13.6%)",
-    "originalValue": "hsl(0, 0%, 13.6%)"
+    "originalValue": "{color.neutral.dark.componentBg}"
   },
   "surface.dark.navItemBgActive": {
     "cssName": "--nav-item-bg-active",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 13.6%)",
-    "originalValue": "hsl(0, 0%, 13.6%)"
+    "originalValue": "{color.neutral.dark.componentBg}"
   },
   "surface.dark.listItemBg": {
     "cssName": "--list-item-bg",
@@ -2115,14 +2936,14 @@ export const tokens = {
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 11.0%)",
-    "originalValue": "hsl(0, 0%, 11.0%)"
+    "originalValue": "{color.neutral.dark.bgSecondary}"
   },
   "surface.dark.listItemBgActive": {
     "cssName": "--list-item-bg-active",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 11.0%)",
-    "originalValue": "hsl(0, 0%, 11.0%)"
+    "originalValue": "{color.neutral.dark.bgSecondary}"
   },
   "surface.dark.listItemBorder": {
     "cssName": "--list-item-border",
@@ -2136,14 +2957,14 @@ export const tokens = {
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 8.5%)",
-    "originalValue": "hsl(0, 0%, 8.5%)"
+    "originalValue": "{surface.dark.appBg}"
   },
   "surface.dark.segmentedControlBgActive": {
     "cssName": "--segmented-control-bg-active",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 13.6%)",
-    "originalValue": "hsl(0, 0%, 13.6%)"
+    "originalValue": "{color.neutral.dark.componentBg}"
   },
   "surface.dark.transferListItemCompletingBg": {
     "cssName": "--transfer-list-item-completing-bg",
@@ -2164,7 +2985,7 @@ export const tokens = {
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 11.0%)",
-    "originalValue": "hsl(0, 0%, 11.0%)"
+    "originalValue": "{color.neutral.dark.bgSecondary}"
   },
   "surface.dark.transferListItemPassiveBg": {
     "cssName": "--transfer-list-item-passive-bg",
@@ -2178,14 +2999,14 @@ export const tokens = {
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 93.0%)",
-    "originalValue": "hsl(0, 0%, 93.0%)"
+    "originalValue": "{color.neutral.dark.text}"
   },
   "surface.dark.loContrast": {
     "cssName": "--lo-contrast",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 8.5%)",
-    "originalValue": "hsl(0, 0%, 8.5%)"
+    "originalValue": "{color.neutral.dark.bg}"
   },
   "surface.dark.overlayInline": {
     "cssName": "--overlay-inline",
@@ -2213,7 +3034,8 @@ export const tokens = {
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 0%)",
-    "originalValue": "hsl(0, 0%, 0%)"
+    "originalValue": "{surface.dark.shadowColor}",
+    "description": "Compat name kept for existing web consumers — alias of surface.dark.shadowColor so the two can never drift."
   },
   "surface.dark.shadowSm": {
     "cssName": "--shadow-sm",