@putdotio/design 1.4.0 → 1.5.0

package/dist/tokens.js

@@ -249,35 +249,106 @@ export const tokens = {
     "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",
@@ -391,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",
@@ -752,12 +831,42 @@ export const tokens = {
     "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}"
+    "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",
@@ -787,103 +896,511 @@ export const tokens = {
     "value": "hsl(0, 55%, 15%)",
     "originalValue": "{color.red.dark.componentBg}"
   },
-  "context.tv.surface.0": {
-    "cssName": "--surf-0",
+  "component.notification.background": {
+    "cssName": "--notification-bg",
     "type": "color",
-    "mode": "tv",
-    "value": "hsl(0, 0%, 0%)",
-    "originalValue": "hsl(0, 0%, 0%)"
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}",
+    "description": "Default toast / inline notification surface."
   },
-  "context.tv.surface.1": {
-    "cssName": "--surf-1",
+  "component.notification.backgroundDark": {
+    "cssName": "--notification-bg",
     "type": "color",
-    "mode": "tv",
-    "value": "hsl(0, 0%, 3.9%)",
-    "originalValue": "hsl(0, 0%, 3.9%)"
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}"
   },
-  "context.tv.surface.2": {
-    "cssName": "--surf-2",
+  "component.notification.border": {
+    "cssName": "--notification-border",
     "type": "color",
-    "mode": "tv",
-    "value": "hsl(0, 0%, 8.6%)",
-    "originalValue": "hsl(0, 0%, 8.6%)"
+    "mode": "light",
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{color.neutral.light.line}"
   },
-  "context.tv.surface.3": {
-    "cssName": "--surf-3",
+  "component.notification.borderDark": {
+    "cssName": "--notification-border",
     "type": "color",
-    "mode": "tv",
-    "value": "hsl(0, 0%, 12.2%)",
-    "originalValue": "hsl(0, 0%, 12.2%)"
+    "mode": "dark",
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{color.neutral.dark.line}"
   },
-  "context.tv.text.primary": {
-    "cssName": "--text-1",
+  "component.notification.foreground": {
+    "cssName": "--notification-fg",
     "type": "color",
-    "mode": "tv",
-    "value": "hsl(0, 0%, 95.7%)",
-    "originalValue": "hsl(0, 0%, 95.7%)"
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "{color.neutral.light.text}"
   },
-  "context.tv.text.secondary": {
-    "cssName": "--text-2",
+  "component.notification.foregroundDark": {
+    "cssName": "--notification-fg",
     "type": "color",
-    "mode": "tv",
-    "value": "hsla(0, 0%, 95.7%, 0.62)",
-    "originalValue": "hsla(0, 0%, 95.7%, 0.62)"
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.dark.text}"
   },
-  "context.tv.text.tertiary": {
-    "cssName": "--text-3",
+  "component.notification.icon": {
+    "cssName": "--notification-icon",
     "type": "color",
-    "mode": "tv",
-    "value": "hsla(0, 0%, 95.7%, 0.38)",
-    "originalValue": "hsla(0, 0%, 95.7%, 0.38)"
+    "mode": "light",
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "{color.neutral.light.textSecondary}"
   },
-  "context.tv.glass.1": {
-    "cssName": "--glass-1-bg",
+  "component.notification.iconDark": {
+    "cssName": "--notification-icon",
     "type": "color",
-    "mode": "tv",
-    "value": "hsla(0, 0%, 100%, 0.06)",
-    "originalValue": "hsla(0, 0%, 100%, 0.06)"
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}"
   },
-  "context.tv.glass.2": {
-    "cssName": "--glass-2-bg",
+  "component.notification.successBackground": {
+    "cssName": "--notification-success-bg",
     "type": "color",
-    "mode": "tv",
-    "value": "hsla(0, 0%, 100%, 0.10)",
-    "originalValue": "hsla(0, 0%, 100%, 0.10)"
+    "mode": "light",
+    "value": "hsl(140, 41%, 97%)",
+    "originalValue": "{color.green.light.bgSecondary}"
   },
-  "context.tv.glass.3": {
-    "cssName": "--glass-3-bg",
+  "component.notification.successBackgroundDark": {
+    "cssName": "--notification-success-bg",
     "type": "color",
-    "mode": "tv",
-    "value": "hsla(0, 0%, 100%, 0.14)",
-    "originalValue": "hsla(0, 0%, 100%, 0.14)"
+    "mode": "dark",
+    "value": "hsl(149, 21%, 9%)",
+    "originalValue": "{color.green.dark.bgSecondary}"
   },
-  "context.tv.glass.border": {
-    "cssName": "--glass-border",
+  "component.notification.successBorder": {
+    "cssName": "--notification-success-border",
     "type": "color",
-    "mode": "tv",
-    "value": "hsla(0, 0%, 100%, 0.12)",
-    "originalValue": "hsla(0, 0%, 100%, 0.12)"
+    "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}"
   },
-  "context.tv.glass.borderStrong": {
-    "cssName": "--glass-border-strong",
+  "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%, 43.5%)",
+    "originalValue": "{color.neutral.light.textSecondary}"
+  },
+  "component.palette.itemMetaDark": {
+    "cssName": "--palette-item-meta",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}"
+  },
+  "component.sheet.background": {
+    "cssName": "--sheet-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}",
+    "description": "Right-side detail panel surface."
+  },
+  "component.sheet.backgroundDark": {
+    "cssName": "--sheet-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}"
+  },
+  "component.sheet.border": {
+    "cssName": "--sheet-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{color.neutral.light.line}"
+  },
+  "component.sheet.borderDark": {
+    "cssName": "--sheet-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{color.neutral.dark.line}"
+  },
+  "component.sheet.shadow": {
+    "cssName": "--sheet-shadow",
+    "type": "string",
+    "mode": "light",
+    "value": "0 16px 40px hsla(0, 0%, 0%, 0.12)",
+    "originalValue": "{elevation.lg}"
+  },
+  "component.sheet.shadowDark": {
+    "cssName": "--sheet-shadow",
+    "type": "string",
+    "mode": "dark",
+    "value": "0 16px 40px hsla(0, 0%, 0%, 0.6)",
+    "originalValue": "{surface.dark.shadowLg}"
+  },
+  "component.sheet.scrim": {
+    "cssName": "--sheet-scrim",
+    "type": "color",
+    "mode": "light",
+    "value": "hsla(0, 0%, 0%, 0.439)",
+    "originalValue": "{surface.light.overlayFull}"
+  },
+  "component.sheet.scrimDark": {
+    "cssName": "--sheet-scrim",
+    "type": "color",
+    "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": "hsla(0, 0%, 100%, 0.22)",
-    "originalValue": "hsla(0, 0%, 100%, 0.22)"
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.dark.text}",
+    "description": "Row titles, modal option labels, and button labels."
   },
-  "context.tv.focus.ring": {
-    "cssName": "--focus-ring",
+  "context.tv.text.secondary": {
+    "cssName": "--text-2",
     "type": "color",
     "mode": "tv",
-    "value": "hsla(44.7, 97.9%, 63.1%, 0.18)",
-    "originalValue": "hsla(44.7, 97.9%, 63.1%, 0.18)"
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}",
+    "description": "Row sublines, modal titles, section headers, and accessories."
   },
-  "context.tv.focus.liftShadow": {
-    "cssName": "--focus-shadow",
-    "type": "string",
+  "context.tv.text.tertiary": {
+    "cssName": "--text-3",
+    "type": "color",
     "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",
@@ -941,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",
@@ -1687,19 +2359,13 @@ export const tokens = {
     "value": "\"GT America\", sans-serif",
     "originalValue": "{typography.fontFamily.sans}"
   },
-  "typography.fontFamily.uiMono": {
-    "cssName": "--font-ui-mono",
-    "type": "fontFamily",
-    "mode": "global",
-    "value": "\"GT America Mono\", monospace",
-    "originalValue": "\"GT America Mono\", monospace"
-  },
   "typography.fontFamily.mono": {
     "cssName": "--font-mono",
     "type": "fontFamily",
     "mode": "global",
-    "value": "\"Berkeley Mono\", \"GT America Mono\", monospace",
-    "originalValue": "\"Berkeley Mono\", {typography.fontFamily.uiMono}"
+    "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",
@@ -1962,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",