@putdotio/design 1.4.0 → 1.5.0

package/DESIGN.md

@@ -32,7 +32,7 @@ typography:
     size: "96px"
     lineHeight: 1.1
   mono:
-    family: "\"Berkeley Mono\", \"GT America Mono\", monospace"
+    family: "\"Berkeley Mono\", monospace"
     weight: 400
     size: "0.875rem"
     lineHeight: 1.45
@@ -74,7 +74,9 @@ Dark app surfaces are the default product mode, but the token contract includes
 
 ## Typography
 
-Use GT America for product UI and display. Use GT America Mono for compact product numerics where it matches the app. Use Berkeley Mono for code, logs, identifiers, hashes, and raw technical strings.
+Use GT America for product UI and display. Berkeley Mono is the single mono face: numerics, timestamps, file sizes, ETAs, counts, code, logs, identifiers, hashes, magnet URIs, and filenames. Its tabular figures keep metadata columns aligned, so pair it with `font-variant-numeric: tabular-nums` wherever numbers sit in a column.
+
+The mono role is web and mobile only. TV surfaces have no mono face — 10-foot numerics render in GT America with tabular figures.
 
 Body UI text should stay readable and dense. Use medium weight for labels and controls, bold weight only where the hierarchy earns it, and black weight for deliberate display moments.
 
@@ -94,7 +96,9 @@ Elevation should clarify interaction, not decorate. Use borders and soft shadows
 
 ## Shapes
 
-The default radius is `6px`. Use `4px` for tight controls, `8px` or `10px` for larger panels, and pill radius for segmented controls, badges, and TV action pills.
+The default radius is `6px`. Use `4px` for tight controls, `8px` or `10px` for larger panels, and pill radius for segmented controls and badges.
+
+TV is the exception: every 10-foot surface — list rows, buttons, sheets, cards, code tiles, keys — uses the single `--radius-tv` (`12px`). TV has one radius, not a scale; the only other radii on a TV surface are intentional pills and circles.
 
 ## Components
 
@@ -104,6 +108,10 @@ Form fields use the shared `--field-*` aliases: `--field-bg` for the fill, `--fi
 
 TV components are list-first and focus-first. A TV app is still a file browser, not a poster wall. Roku, native Apple, Android, and web TV repos should consume the generic tokens and generate their own platform bindings.
 
+TV surfaces are solid token colors — no translucent materials and no blur. Focus is expressed as a fill, never a lift: rows go transparent to `--component-bg-active`, and buttons step both their fill and their border. Navigation is a Home hub that pushes full screens onto a stack; there is no tab bar. Menus are centred modals, not popovers anchored to a trigger.
+
+The 10-foot scale lives in the `tv` token group — type steps, spacing ramp, overscan ratios, radius, and z-indices — carried as data for platform adapters rather than emitted into web CSS. Overscan ratios declare their viewport axis: multiply `tv.overscan.x` by viewport width and `tv.overscan.y` by viewport height, then compose screen padding locally with the spacing tokens. Two rules do not cross over: TV has no mono face, and TV stacks `--tv-z-overlay` above `--tv-z-toast`, the reverse of the web `--z-*` order. Emit the two scales separately.
+
 ## Do's and Don'ts
 
 Do show raw filenames such as `The.Wire.S03E04.Back.Burners.1080p.BluRay.x264-DEMAND.mkv`.

package/dist/css/tokens.css

@@ -23,6 +23,11 @@
   --button-default-fg: hsl(0, 0%, 9.0%);
   --input-bg: hsl(0, 0%, 100%);
   --input-border: hsl(0, 0%, 85.8%);
+  --input-border-hover: hsl(0, 0%, 78.0%);
+  --input-border-focus: hsl(0, 0%, 78.0%);
+  --input-ring: 0 0 0 1px hsl(0, 0%, 78.0%);
+  --input-text: hsl(0, 0%, 9.0%);
+  --input-placeholder: hsl(0, 0%, 43.5%);
   --field-bg: hsl(0, 0%, 100%);
   --field-bg-disabled: hsl(0, 0%, 97.3%);
   --field-border: hsl(0, 0%, 85.8%);
@@ -52,8 +57,41 @@
   --input: hsl(0, 0%, 85.8%);
   --file-row-bg: hsla(0, 0%, 0%, 0);
   --file-row-bg-hover: hsl(0, 0%, 97.3%);
+  --file-row-bg-active: hsl(0, 0%, 97.3%);
+  --file-row-border: hsl(0, 0%, 90.9%);
   --notification-info-bg: hsl(0, 0%, 97.3%);
   --notification-danger-bg: hsl(2, 100%, 96%);
+  --notification-bg: hsl(0, 0%, 95.1%);
+  --notification-border: hsl(0, 0%, 88.7%);
+  --notification-fg: hsl(0, 0%, 9.0%);
+  --notification-icon: hsl(0, 0%, 43.5%);
+  --notification-success-bg: hsl(140, 41%, 97%);
+  --notification-success-border: hsl(140, 39%, 68%);
+  --notification-success-fg: hsl(146, 35%, 17%);
+  --notification-danger-border: hsl(2, 81%, 80%);
+  --notification-danger-fg: hsl(358, 62%, 24%);
+  --menu-bg: hsl(0, 0%, 95.1%);
+  --menu-border: hsl(0, 0%, 88.7%);
+  --menu-shadow: 0 16px 40px hsla(0, 0%, 0%, 0.12);
+  --menu-item-bg-hover: hsl(0, 0%, 93.0%);
+  --menu-item-text: hsl(0, 0%, 9.0%);
+  --menu-item-icon: hsl(0, 0%, 43.5%);
+  --menu-item-shortcut: hsl(0, 0%, 43.5%);
+  --menu-item-danger-text: hsl(355, 64%, 49%);
+  --menu-item-danger-bg-hover: hsl(2, 100%, 96%);
+  --menu-separator: hsl(0, 0%, 88.7%);
+  --menu-label: hsl(0, 0%, 43.5%);
+  --palette-bg: hsl(0, 0%, 95.1%);
+  --palette-border: hsl(0, 0%, 88.7%);
+  --palette-shadow: 0 16px 40px hsla(0, 0%, 0%, 0.12);
+  --palette-scrim: hsla(0, 0%, 0%, 0.439);
+  --palette-item-bg-active: hsl(0, 0%, 93.0%);
+  --palette-group-label: hsl(0, 0%, 43.5%);
+  --palette-item-meta: hsl(0, 0%, 43.5%);
+  --sheet-bg: hsl(0, 0%, 95.1%);
+  --sheet-border: hsl(0, 0%, 88.7%);
+  --sheet-shadow: 0 16px 40px hsla(0, 0%, 0%, 0.12);
+  --sheet-scrim: hsla(0, 0%, 0%, 0.439);
   --bg: hsl(0, 0%, 99.0%);
   --bg-secondary: hsl(0, 0%, 97.3%);
   --component-bg: hsl(0, 0%, 95.1%);
@@ -129,6 +167,7 @@
   --button-success-fg: hsl(0, 0%, 100%);
   --button-danger-fg: hsl(0, 0%, 100%);
   --input-radius: 6px;
+  --field-radius: 6px;
   --panel-radius: 10px;
   --primary: hsl(44.7, 97.9%, 63.1%);
   --primary-foreground: hsl(38, 65%, 10%);
@@ -136,6 +175,12 @@
   --destructive-foreground: hsl(0, 0%, 100%);
   --ring: hsla(47, 100%, 65%, 0.35);
   --file-row-icon: hsl(44.7, 97.9%, 63.1%);
+  --menu-radius: 8px;
+  --menu-item-height: 32px;
+  --palette-width: 560px;
+  --palette-input-height: 48px;
+  --palette-item-height: 36px;
+  --sheet-width: 380px;
   --yellow-solid: hsl(44.7, 97.9%, 63.1%);
   --shadow-color: hsl(0, 0%, 78.0%);
   --shadow: hsl(0, 0%, 78.0%);
@@ -146,8 +191,7 @@
   --shadow-focus: 0 0 0 3px hsla(47, 100%, 65%, 0.35);
   --font-sans: "GT America", sans-serif;
   --font-display: "GT America", sans-serif;
-  --font-ui-mono: "GT America Mono", monospace;
-  --font-mono: "Berkeley Mono", "GT America Mono", monospace;
+  --font-mono: "Berkeley Mono", monospace;
   --fs-xs: 0.75rem;
   --fs-sm: 0.875rem;
   --fs-base: 1rem;
@@ -184,6 +228,7 @@
   --radius-md: 8px;
   --radius-lg: 10px;
   --radius-pill: 999px;
+  --radius-tv: 12px;
   --border-width: 1px;
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
@@ -217,6 +262,11 @@
   --button-default-fg: hsl(0, 0%, 93.0%);
   --input-bg: hsl(0, 0%, 8.5%);
   --input-border: hsl(0, 0%, 24.3%);
+  --input-border-hover: hsl(0, 0%, 31.2%);
+  --input-border-focus: hsl(0, 0%, 31.2%);
+  --input-ring: 0 0 0 1px hsl(0, 0%, 31.2%);
+  --input-text: hsl(0, 0%, 93.0%);
+  --input-placeholder: hsl(0, 0%, 62.8%);
   --field-bg: hsl(0, 0%, 8.5%);
   --field-bg-disabled: hsl(0, 0%, 11.0%);
   --field-border: hsl(0, 0%, 24.3%);
@@ -246,8 +296,41 @@
   --input: hsl(0, 0%, 24.3%);
   --file-row-bg: hsla(0, 0%, 0%, 0);
   --file-row-bg-hover: hsl(0, 0%, 11.0%);
+  --file-row-bg-active: hsl(0, 0%, 11.0%);
+  --file-row-border: hsl(0, 0%, 17.9%);
   --notification-info-bg: hsl(0, 0%, 13.6%);
   --notification-danger-bg: hsl(0, 55%, 15%);
+  --notification-bg: hsl(0, 0%, 13.6%);
+  --notification-border: hsl(0, 0%, 20.5%);
+  --notification-fg: hsl(0, 0%, 93.0%);
+  --notification-icon: hsl(0, 0%, 62.8%);
+  --notification-success-bg: hsl(149, 21%, 9%);
+  --notification-success-border: hsl(146, 41%, 29%);
+  --notification-success-fg: hsl(142, 71%, 82%);
+  --notification-danger-border: hsl(0, 46%, 38%);
+  --notification-danger-fg: hsl(5, 100%, 91%);
+  --menu-bg: hsl(0, 0%, 13.6%);
+  --menu-border: hsl(0, 0%, 20.5%);
+  --menu-shadow: 0 16px 40px hsla(0, 0%, 0%, 0.6);
+  --menu-item-bg-hover: hsl(0, 0%, 15.8%);
+  --menu-item-text: hsl(0, 0%, 93.0%);
+  --menu-item-icon: hsl(0, 0%, 62.8%);
+  --menu-item-shortcut: hsl(0, 0%, 62.8%);
+  --menu-item-danger-text: hsl(2, 100%, 77%);
+  --menu-item-danger-bg-hover: hsl(0, 55%, 15%);
+  --menu-separator: hsl(0, 0%, 20.5%);
+  --menu-label: hsl(0, 0%, 62.8%);
+  --palette-bg: hsl(0, 0%, 13.6%);
+  --palette-border: hsl(0, 0%, 20.5%);
+  --palette-shadow: 0 16px 40px hsla(0, 0%, 0%, 0.6);
+  --palette-scrim: hsla(0, 0%, 0%, 0.565);
+  --palette-item-bg-active: hsl(0, 0%, 15.8%);
+  --palette-group-label: hsl(0, 0%, 62.8%);
+  --palette-item-meta: hsl(0, 0%, 62.8%);
+  --sheet-bg: hsl(0, 0%, 13.6%);
+  --sheet-border: hsl(0, 0%, 20.5%);
+  --sheet-shadow: 0 16px 40px hsla(0, 0%, 0%, 0.6);
+  --sheet-scrim: hsla(0, 0%, 0%, 0.565);
   --bg: hsl(0, 0%, 8.5%);
   --bg-secondary: hsl(0, 0%, 11.0%);
   --component-bg: hsl(0, 0%, 13.6%);
@@ -361,7 +444,7 @@ body {
 
 /* Numeric / tabular UI text — transfer speeds, storage sizes, timestamps */
 .num, .tabular {
-  font-family: var(--font-ui-mono);
+  font-family: var(--font-mono);
   font-variant-numeric: tabular-nums;
   font-feature-settings: "tnum";
 }

package/dist/figma/putio.tokens.json

@@ -113,6 +113,23 @@
       "radius": {
         "$type": "dimension",
         "$value": "6px"
+      },
+      "borderHover": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 78.0%)",
+        "$description": "shadcn-friendly alias of --field-border-hover. Always aliases the field token so the two name systems cannot drift."
+      },
+      "borderFocus": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 78.0%)"
+      },
+      "text": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 9.0%)"
+      },
+      "placeholder": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 43.5%)"
       }
     },
     "fileRow": {
@@ -124,9 +141,19 @@
         "$type": "color",
         "$value": "hsl(0, 0%, 97.3%)"
       },
+      "activeBackground": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 97.3%)"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 90.9%)",
+        "$description": "Row divider. File lists divide with a hairline, never zebra stripes or per-row cards."
+      },
       "icon": {
         "$type": "color",
-        "$value": "hsl(44.7, 97.9%, 63.1%)"
+        "$value": "hsl(44.7, 97.9%, 63.1%)",
+        "$description": "Every file kind takes this, not just the folder — folder, video, audio, image, archive, generic file alike. Utility and chrome icons stay neutral."
       }
     },
     "notification": {
@@ -137,6 +164,153 @@
       "dangerBackground": {
         "$type": "color",
         "$value": "hsl(2, 100%, 96%)"
+      },
+      "background": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 95.1%)",
+        "$description": "Default toast / inline notification surface."
+      },
+      "border": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 88.7%)"
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 9.0%)"
+      },
+      "icon": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 43.5%)"
+      },
+      "successBackground": {
+        "$type": "color",
+        "$value": "hsl(140, 41%, 97%)"
+      },
+      "successBorder": {
+        "$type": "color",
+        "$value": "hsl(140, 39%, 68%)"
+      },
+      "successForeground": {
+        "$type": "color",
+        "$value": "hsl(146, 35%, 17%)"
+      },
+      "dangerBorder": {
+        "$type": "color",
+        "$value": "hsl(2, 81%, 80%)"
+      },
+      "dangerForeground": {
+        "$type": "color",
+        "$value": "hsl(358, 62%, 24%)"
+      }
+    },
+    "menu": {
+      "background": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 95.1%)",
+        "$description": "Floating menu surface."
+      },
+      "border": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 88.7%)"
+      },
+      "radius": {
+        "$type": "dimension",
+        "$value": "8px"
+      },
+      "itemBackgroundHover": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 93.0%)"
+      },
+      "itemText": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 9.0%)"
+      },
+      "itemIcon": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 43.5%)"
+      },
+      "itemShortcut": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 43.5%)"
+      },
+      "itemDangerText": {
+        "$type": "color",
+        "$value": "hsl(355, 64%, 49%)"
+      },
+      "itemDangerBackgroundHover": {
+        "$type": "color",
+        "$value": "hsl(2, 100%, 96%)"
+      },
+      "itemHeight": {
+        "$type": "dimension",
+        "$value": "32px"
+      },
+      "separator": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 88.7%)"
+      },
+      "label": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 43.5%)"
+      }
+    },
+    "palette": {
+      "background": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 95.1%)",
+        "$description": "Command palette surface."
+      },
+      "border": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 88.7%)"
+      },
+      "scrim": {
+        "$type": "color",
+        "$value": "hsla(0, 0%, 0%, 0.439)"
+      },
+      "width": {
+        "$type": "dimension",
+        "$value": "560px"
+      },
+      "inputHeight": {
+        "$type": "dimension",
+        "$value": "48px"
+      },
+      "itemHeight": {
+        "$type": "dimension",
+        "$value": "36px"
+      },
+      "itemBackgroundActive": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 93.0%)"
+      },
+      "groupLabel": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 43.5%)"
+      },
+      "itemMeta": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 43.5%)"
+      }
+    },
+    "sheet": {
+      "background": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 95.1%)",
+        "$description": "Right-side detail panel surface."
+      },
+      "border": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 88.7%)"
+      },
+      "scrim": {
+        "$type": "color",
+        "$value": "hsla(0, 0%, 0%, 0.439)"
+      },
+      "width": {
+        "$type": "dimension",
+        "$value": "380px",
+        "$description": "Fixed on web. Touch surfaces use a bottom sheet instead."
       }
     }
   },
@@ -387,13 +561,10 @@
         "$type": "fontFamily",
         "$value": "\"GT America\", sans-serif"
       },
-      "uiMono": {
-        "$type": "fontFamily",
-        "$value": "\"GT America Mono\", monospace"
-      },
       "mono": {
         "$type": "fontFamily",
-        "$value": "\"Berkeley Mono\", \"GT America Mono\", monospace"
+        "$value": "\"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."
       }
     },
     "fontSize": {
@@ -560,6 +731,11 @@
     "pill": {
       "$type": "dimension",
       "$value": "999px"
+    },
+    "tv": {
+      "$type": "dimension",
+      "$value": "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": {

package/dist/tokens.d.ts

@@ -1,6 +1,6 @@
 // Do not edit directly. Generated from tokens/**/*.tokens.json.
 
-export type PutioTokenName = "component.button.primary.background" | "component.button.primary.backgroundHover" | "component.button.primary.backgroundHoverDark" | "component.button.primary.foreground" | "component.button.primary.radius" | "component.button.secondary.background" | "component.button.secondary.backgroundDark" | "component.button.secondary.foreground" | "component.button.secondary.foregroundDark" | "component.button.success.background" | "component.button.success.backgroundDark" | "component.button.success.backgroundHover" | "component.button.success.backgroundHoverDark" | "component.button.success.foreground" | "component.button.danger.background" | "component.button.danger.backgroundDark" | "component.button.danger.backgroundHover" | "component.button.danger.backgroundHoverDark" | "component.button.danger.foreground" | "component.button.info.background" | "component.button.info.backgroundDark" | "component.button.info.backgroundHover" | "component.button.info.backgroundHoverDark" | "component.button.info.foreground" | "component.button.info.foregroundDark" | "component.button.default.background" | "component.button.default.backgroundDark" | "component.button.default.backgroundHover" | "component.button.default.backgroundHoverDark" | "component.button.default.foreground" | "component.button.default.foregroundDark" | "component.input.background" | "component.input.backgroundDark" | "component.input.border" | "component.input.borderDark" | "component.input.radius" | "component.field.background" | "component.field.backgroundDark" | "component.field.backgroundDisabled" | "component.field.backgroundDisabledDark" | "component.field.border" | "component.field.borderDark" | "component.field.borderHover" | "component.field.borderHoverDark" | "component.field.borderFocus" | "component.field.borderFocusDark" | "component.field.text" | "component.field.textDark" | "component.field.placeholder" | "component.field.placeholderDark" | "component.field.ring" | "component.field.ringDark" | "component.panel.background" | "component.panel.backgroundDark" | "component.panel.border" | "component.panel.borderDark" | "component.panel.radius" | "component.panel.shadow" | "component.panel.shadowDark" | "component.alias.background" | "component.alias.backgroundDark" | "component.alias.foreground" | "component.alias.foregroundDark" | "component.alias.foregroundMuted" | "component.alias.foregroundMutedDark" | "component.alias.primary" | "component.alias.primaryForeground" | "component.alias.success" | "component.alias.successDark" | "component.alias.successForeground" | "component.alias.destructive" | "component.alias.destructiveDark" | "component.alias.destructiveForeground" | "component.alias.invertForeground" | "component.alias.invertForegroundDark" | "component.alias.solidForeground" | "component.alias.solidForegroundDark" | "component.alias.muted" | "component.alias.mutedDark" | "component.alias.mutedForeground" | "component.alias.mutedForegroundDark" | "component.alias.accent" | "component.alias.accentDark" | "component.alias.accentForeground" | "component.alias.accentForegroundDark" | "component.alias.card" | "component.alias.cardDark" | "component.alias.cardForeground" | "component.alias.cardForegroundDark" | "component.alias.popover" | "component.alias.popoverDark" | "component.alias.popoverForeground" | "component.alias.popoverForegroundDark" | "component.alias.input" | "component.alias.inputDark" | "component.alias.ring" | "component.fileRow.background" | "component.fileRow.backgroundDark" | "component.fileRow.hoverBackground" | "component.fileRow.hoverBackgroundDark" | "component.fileRow.icon" | "component.notification.infoBackground" | "component.notification.infoBackgroundDark" | "component.notification.dangerBackground" | "component.notification.dangerBackgroundDark" | "context.tv.surface.0" | "context.tv.surface.1" | "context.tv.surface.2" | "context.tv.surface.3" | "context.tv.text.primary" | "context.tv.text.secondary" | "context.tv.text.tertiary" | "context.tv.glass.1" | "context.tv.glass.2" | "context.tv.glass.3" | "context.tv.glass.border" | "context.tv.glass.borderStrong" | "context.tv.focus.ring" | "context.tv.focus.liftShadow" | "context.tv.channelArt.production.posterBackground" | "context.tv.channelArt.production.splashBackground" | "context.tv.channelArt.development.background" | "context.tv.channelArt.development.accent" | "context.tv.channelArt.development.grid" | "context.tv.channelArt.lab.background" | "context.tv.channelArt.lab.foreground" | "context.tv.channelArt.lab.accent" | "color.brand.yellow" | "color.neutral.light.bg" | "color.neutral.light.bgSecondary" | "color.neutral.light.componentBg" | "color.neutral.light.componentBgHover" | "color.neutral.light.componentBgActive" | "color.neutral.light.line" | "color.neutral.light.border" | "color.neutral.light.borderHover" | "color.neutral.light.solid" | "color.neutral.light.solidHover" | "color.neutral.light.textSecondary" | "color.neutral.light.text" | "color.neutral.dark.bg" | "color.neutral.dark.bgSecondary" | "color.neutral.dark.componentBg" | "color.neutral.dark.componentBgHover" | "color.neutral.dark.componentBgActive" | "color.neutral.dark.line" | "color.neutral.dark.border" | "color.neutral.dark.borderHover" | "color.neutral.dark.solid" | "color.neutral.dark.solidHover" | "color.neutral.dark.textSecondary" | "color.neutral.dark.text" | "color.green.light.bg" | "color.green.light.bgSecondary" | "color.green.light.componentBg" | "color.green.light.componentBgHover" | "color.green.light.componentBgActive" | "color.green.light.line" | "color.green.light.border" | "color.green.light.borderHover" | "color.green.light.solid" | "color.green.light.solidHover" | "color.green.light.textSecondary" | "color.green.light.text" | "color.green.dark.bg" | "color.green.dark.bgSecondary" | "color.green.dark.componentBg" | "color.green.dark.componentBgHover" | "color.green.dark.componentBgActive" | "color.green.dark.line" | "color.green.dark.border" | "color.green.dark.borderHover" | "color.green.dark.solid" | "color.green.dark.solidHover" | "color.green.dark.textSecondary" | "color.green.dark.text" | "color.red.light.bg" | "color.red.light.bgSecondary" | "color.red.light.componentBg" | "color.red.light.componentBgHover" | "color.red.light.componentBgActive" | "color.red.light.line" | "color.red.light.border" | "color.red.light.borderHover" | "color.red.light.solid" | "color.red.light.solidHover" | "color.red.light.textSecondary" | "color.red.light.text" | "color.red.dark.bg" | "color.red.dark.bgSecondary" | "color.red.dark.componentBg" | "color.red.dark.componentBgHover" | "color.red.dark.componentBgActive" | "color.red.dark.line" | "color.red.dark.border" | "color.red.dark.borderHover" | "color.red.dark.solid" | "color.red.dark.solidHover" | "color.red.dark.textSecondary" | "color.red.dark.text" | "color.yellow.light.bg" | "color.yellow.light.bgSecondary" | "color.yellow.light.componentBg" | "color.yellow.light.componentBgHover" | "color.yellow.light.componentBgActive" | "color.yellow.light.line" | "color.yellow.light.border" | "color.yellow.light.borderHover" | "color.yellow.light.solidHover" | "color.yellow.light.textSecondary" | "color.yellow.light.text" | "color.yellow.dark.bg" | "color.yellow.dark.bgSecondary" | "color.yellow.dark.componentBg" | "color.yellow.dark.componentBgHover" | "color.yellow.dark.componentBgActive" | "color.yellow.dark.line" | "color.yellow.dark.border" | "color.yellow.dark.borderHover" | "color.yellow.dark.solidHover" | "color.yellow.dark.textSecondary" | "color.yellow.dark.text" | "color.transfer.light.lime3" | "color.transfer.dark.lime3" | "elevation.shadowColor" | "elevation.color" | "elevation.sm" | "elevation.md" | "elevation.lg" | "elevation.focusColor" | "elevation.focus" | "typography.fontFamily.sans" | "typography.fontFamily.display" | "typography.fontFamily.uiMono" | "typography.fontFamily.mono" | "typography.fontSize.xs" | "typography.fontSize.sm" | "typography.fontSize.base" | "typography.fontSize.md" | "typography.fontSize.lg" | "typography.fontSize.xl" | "typography.fontSize.2xl" | "typography.fontSize.3xl" | "typography.fontSize.4xl" | "typography.fontSize.display" | "typography.lineHeight.tight" | "typography.lineHeight.snug" | "typography.lineHeight.normal" | "typography.lineHeight.loose" | "typography.fontWeight.regular" | "typography.fontWeight.medium" | "typography.fontWeight.bold" | "typography.fontWeight.black" | "typography.letterSpacing.tight" | "typography.letterSpacing.normal" | "typography.letterSpacing.wide" | "typography.letterSpacing.uppercase" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "radius.sm" | "radius.default" | "radius.md" | "radius.lg" | "radius.pill" | "border.width" | "motion.easing.out" | "motion.easing.inOut" | "motion.duration.fast" | "motion.duration.base" | "motion.duration.slow" | "z.dropdown" | "z.sticky" | "z.modal" | "z.notification" | "z.tooltip" | "breakpoint.sm" | "breakpoint.md" | "breakpoint.lg" | "surface.light.htmlBg" | "surface.light.appBg" | "surface.light.navBg" | "surface.light.navItemBg" | "surface.light.navItemBgHover" | "surface.light.navItemBgActive" | "surface.light.listItemBg" | "surface.light.listItemBgHover" | "surface.light.listItemBgActive" | "surface.light.listItemBorder" | "surface.light.segmentedControlBg" | "surface.light.segmentedControlBgActive" | "surface.light.transferListItemCompletingBg" | "surface.light.transferListItemDownloadingBg" | "surface.light.transferListItemFinishedBg" | "surface.light.transferListItemPassiveBg" | "surface.light.hiContrast" | "surface.light.loContrast" | "surface.light.transparent" | "surface.light.overlayInline" | "surface.light.overlayFull" | "surface.dark.htmlBg" | "surface.dark.appBg" | "surface.dark.navBg" | "surface.dark.navItemBg" | "surface.dark.navItemBgHover" | "surface.dark.navItemBgActive" | "surface.dark.listItemBg" | "surface.dark.listItemBgHover" | "surface.dark.listItemBgActive" | "surface.dark.listItemBorder" | "surface.dark.segmentedControlBg" | "surface.dark.segmentedControlBgActive" | "surface.dark.transferListItemCompletingBg" | "surface.dark.transferListItemDownloadingBg" | "surface.dark.transferListItemFinishedBg" | "surface.dark.transferListItemPassiveBg" | "surface.dark.hiContrast" | "surface.dark.loContrast" | "surface.dark.overlayInline" | "surface.dark.overlayFull" | "surface.dark.shadowColor" | "surface.dark.shadow" | "surface.dark.shadowSm" | "surface.dark.shadowMd" | "surface.dark.shadowLg";
+export type PutioTokenName = "component.button.primary.background" | "component.button.primary.backgroundHover" | "component.button.primary.backgroundHoverDark" | "component.button.primary.foreground" | "component.button.primary.radius" | "component.button.secondary.background" | "component.button.secondary.backgroundDark" | "component.button.secondary.foreground" | "component.button.secondary.foregroundDark" | "component.button.success.background" | "component.button.success.backgroundDark" | "component.button.success.backgroundHover" | "component.button.success.backgroundHoverDark" | "component.button.success.foreground" | "component.button.danger.background" | "component.button.danger.backgroundDark" | "component.button.danger.backgroundHover" | "component.button.danger.backgroundHoverDark" | "component.button.danger.foreground" | "component.button.info.background" | "component.button.info.backgroundDark" | "component.button.info.backgroundHover" | "component.button.info.backgroundHoverDark" | "component.button.info.foreground" | "component.button.info.foregroundDark" | "component.button.default.background" | "component.button.default.backgroundDark" | "component.button.default.backgroundHover" | "component.button.default.backgroundHoverDark" | "component.button.default.foreground" | "component.button.default.foregroundDark" | "component.input.background" | "component.input.backgroundDark" | "component.input.border" | "component.input.borderDark" | "component.input.radius" | "component.input.borderHover" | "component.input.borderHoverDark" | "component.input.borderFocus" | "component.input.borderFocusDark" | "component.input.ring" | "component.input.ringDark" | "component.input.text" | "component.input.textDark" | "component.input.placeholder" | "component.input.placeholderDark" | "component.field.background" | "component.field.backgroundDark" | "component.field.backgroundDisabled" | "component.field.backgroundDisabledDark" | "component.field.border" | "component.field.borderDark" | "component.field.borderHover" | "component.field.borderHoverDark" | "component.field.borderFocus" | "component.field.borderFocusDark" | "component.field.text" | "component.field.textDark" | "component.field.placeholder" | "component.field.placeholderDark" | "component.field.radius" | "component.field.ring" | "component.field.ringDark" | "component.panel.background" | "component.panel.backgroundDark" | "component.panel.border" | "component.panel.borderDark" | "component.panel.radius" | "component.panel.shadow" | "component.panel.shadowDark" | "component.alias.background" | "component.alias.backgroundDark" | "component.alias.foreground" | "component.alias.foregroundDark" | "component.alias.foregroundMuted" | "component.alias.foregroundMutedDark" | "component.alias.primary" | "component.alias.primaryForeground" | "component.alias.success" | "component.alias.successDark" | "component.alias.successForeground" | "component.alias.destructive" | "component.alias.destructiveDark" | "component.alias.destructiveForeground" | "component.alias.invertForeground" | "component.alias.invertForegroundDark" | "component.alias.solidForeground" | "component.alias.solidForegroundDark" | "component.alias.muted" | "component.alias.mutedDark" | "component.alias.mutedForeground" | "component.alias.mutedForegroundDark" | "component.alias.accent" | "component.alias.accentDark" | "component.alias.accentForeground" | "component.alias.accentForegroundDark" | "component.alias.card" | "component.alias.cardDark" | "component.alias.cardForeground" | "component.alias.cardForegroundDark" | "component.alias.popover" | "component.alias.popoverDark" | "component.alias.popoverForeground" | "component.alias.popoverForegroundDark" | "component.alias.input" | "component.alias.inputDark" | "component.alias.ring" | "component.fileRow.background" | "component.fileRow.backgroundDark" | "component.fileRow.hoverBackground" | "component.fileRow.hoverBackgroundDark" | "component.fileRow.activeBackground" | "component.fileRow.activeBackgroundDark" | "component.fileRow.border" | "component.fileRow.borderDark" | "component.fileRow.icon" | "component.notification.infoBackground" | "component.notification.infoBackgroundDark" | "component.notification.dangerBackground" | "component.notification.dangerBackgroundDark" | "component.notification.background" | "component.notification.backgroundDark" | "component.notification.border" | "component.notification.borderDark" | "component.notification.foreground" | "component.notification.foregroundDark" | "component.notification.icon" | "component.notification.iconDark" | "component.notification.successBackground" | "component.notification.successBackgroundDark" | "component.notification.successBorder" | "component.notification.successBorderDark" | "component.notification.successForeground" | "component.notification.successForegroundDark" | "component.notification.dangerBorder" | "component.notification.dangerBorderDark" | "component.notification.dangerForeground" | "component.notification.dangerForegroundDark" | "component.menu.background" | "component.menu.backgroundDark" | "component.menu.border" | "component.menu.borderDark" | "component.menu.radius" | "component.menu.shadow" | "component.menu.shadowDark" | "component.menu.itemBackgroundHover" | "component.menu.itemBackgroundHoverDark" | "component.menu.itemText" | "component.menu.itemTextDark" | "component.menu.itemIcon" | "component.menu.itemIconDark" | "component.menu.itemShortcut" | "component.menu.itemShortcutDark" | "component.menu.itemDangerText" | "component.menu.itemDangerTextDark" | "component.menu.itemDangerBackgroundHover" | "component.menu.itemDangerBackgroundHoverDark" | "component.menu.itemHeight" | "component.menu.separator" | "component.menu.separatorDark" | "component.menu.label" | "component.menu.labelDark" | "component.palette.background" | "component.palette.backgroundDark" | "component.palette.border" | "component.palette.borderDark" | "component.palette.shadow" | "component.palette.shadowDark" | "component.palette.scrim" | "component.palette.scrimDark" | "component.palette.width" | "component.palette.inputHeight" | "component.palette.itemHeight" | "component.palette.itemBackgroundActive" | "component.palette.itemBackgroundActiveDark" | "component.palette.groupLabel" | "component.palette.groupLabelDark" | "component.palette.itemMeta" | "component.palette.itemMetaDark" | "component.sheet.background" | "component.sheet.backgroundDark" | "component.sheet.border" | "component.sheet.borderDark" | "component.sheet.shadow" | "component.sheet.shadowDark" | "component.sheet.scrim" | "component.sheet.scrimDark" | "component.sheet.width" | "context.tv.text.primary" | "context.tv.text.secondary" | "context.tv.text.tertiary" | "context.tv.channelArt.production.posterBackground" | "context.tv.channelArt.production.splashBackground" | "context.tv.channelArt.development.background" | "context.tv.channelArt.development.accent" | "context.tv.channelArt.development.grid" | "context.tv.channelArt.lab.background" | "context.tv.channelArt.lab.foreground" | "context.tv.channelArt.lab.accent" | "tv.text.heading" | "tv.text.label" | "tv.text.body" | "tv.text.caption" | "tv.text.smol" | "tv.fontWeight.regular" | "tv.fontWeight.medium" | "tv.space.xxs" | "tv.space.xs" | "tv.space.sm" | "tv.space.md" | "tv.space.lg" | "tv.space.xl" | "tv.space.xxl" | "tv.overscan.x" | "tv.overscan.y" | "tv.radius" | "tv.z.modal" | "tv.z.toast" | "tv.z.overlay" | "color.brand.yellow" | "color.neutral.light.bg" | "color.neutral.light.bgSecondary" | "color.neutral.light.componentBg" | "color.neutral.light.componentBgHover" | "color.neutral.light.componentBgActive" | "color.neutral.light.line" | "color.neutral.light.border" | "color.neutral.light.borderHover" | "color.neutral.light.solid" | "color.neutral.light.solidHover" | "color.neutral.light.textSecondary" | "color.neutral.light.text" | "color.neutral.dark.bg" | "color.neutral.dark.bgSecondary" | "color.neutral.dark.componentBg" | "color.neutral.dark.componentBgHover" | "color.neutral.dark.componentBgActive" | "color.neutral.dark.line" | "color.neutral.dark.border" | "color.neutral.dark.borderHover" | "color.neutral.dark.solid" | "color.neutral.dark.solidHover" | "color.neutral.dark.textSecondary" | "color.neutral.dark.text" | "color.green.light.bg" | "color.green.light.bgSecondary" | "color.green.light.componentBg" | "color.green.light.componentBgHover" | "color.green.light.componentBgActive" | "color.green.light.line" | "color.green.light.border" | "color.green.light.borderHover" | "color.green.light.solid" | "color.green.light.solidHover" | "color.green.light.textSecondary" | "color.green.light.text" | "color.green.dark.bg" | "color.green.dark.bgSecondary" | "color.green.dark.componentBg" | "color.green.dark.componentBgHover" | "color.green.dark.componentBgActive" | "color.green.dark.line" | "color.green.dark.border" | "color.green.dark.borderHover" | "color.green.dark.solid" | "color.green.dark.solidHover" | "color.green.dark.textSecondary" | "color.green.dark.text" | "color.red.light.bg" | "color.red.light.bgSecondary" | "color.red.light.componentBg" | "color.red.light.componentBgHover" | "color.red.light.componentBgActive" | "color.red.light.line" | "color.red.light.border" | "color.red.light.borderHover" | "color.red.light.solid" | "color.red.light.solidHover" | "color.red.light.textSecondary" | "color.red.light.text" | "color.red.dark.bg" | "color.red.dark.bgSecondary" | "color.red.dark.componentBg" | "color.red.dark.componentBgHover" | "color.red.dark.componentBgActive" | "color.red.dark.line" | "color.red.dark.border" | "color.red.dark.borderHover" | "color.red.dark.solid" | "color.red.dark.solidHover" | "color.red.dark.textSecondary" | "color.red.dark.text" | "color.yellow.light.bg" | "color.yellow.light.bgSecondary" | "color.yellow.light.componentBg" | "color.yellow.light.componentBgHover" | "color.yellow.light.componentBgActive" | "color.yellow.light.line" | "color.yellow.light.border" | "color.yellow.light.borderHover" | "color.yellow.light.solidHover" | "color.yellow.light.textSecondary" | "color.yellow.light.text" | "color.yellow.dark.bg" | "color.yellow.dark.bgSecondary" | "color.yellow.dark.componentBg" | "color.yellow.dark.componentBgHover" | "color.yellow.dark.componentBgActive" | "color.yellow.dark.line" | "color.yellow.dark.border" | "color.yellow.dark.borderHover" | "color.yellow.dark.solidHover" | "color.yellow.dark.textSecondary" | "color.yellow.dark.text" | "color.transfer.light.lime3" | "color.transfer.dark.lime3" | "elevation.shadowColor" | "elevation.color" | "elevation.sm" | "elevation.md" | "elevation.lg" | "elevation.focusColor" | "elevation.focus" | "typography.fontFamily.sans" | "typography.fontFamily.display" | "typography.fontFamily.mono" | "typography.fontSize.xs" | "typography.fontSize.sm" | "typography.fontSize.base" | "typography.fontSize.md" | "typography.fontSize.lg" | "typography.fontSize.xl" | "typography.fontSize.2xl" | "typography.fontSize.3xl" | "typography.fontSize.4xl" | "typography.fontSize.display" | "typography.lineHeight.tight" | "typography.lineHeight.snug" | "typography.lineHeight.normal" | "typography.lineHeight.loose" | "typography.fontWeight.regular" | "typography.fontWeight.medium" | "typography.fontWeight.bold" | "typography.fontWeight.black" | "typography.letterSpacing.tight" | "typography.letterSpacing.normal" | "typography.letterSpacing.wide" | "typography.letterSpacing.uppercase" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "radius.sm" | "radius.default" | "radius.md" | "radius.lg" | "radius.pill" | "radius.tv" | "border.width" | "motion.easing.out" | "motion.easing.inOut" | "motion.duration.fast" | "motion.duration.base" | "motion.duration.slow" | "z.dropdown" | "z.sticky" | "z.modal" | "z.notification" | "z.tooltip" | "breakpoint.sm" | "breakpoint.md" | "breakpoint.lg" | "surface.light.htmlBg" | "surface.light.appBg" | "surface.light.navBg" | "surface.light.navItemBg" | "surface.light.navItemBgHover" | "surface.light.navItemBgActive" | "surface.light.listItemBg" | "surface.light.listItemBgHover" | "surface.light.listItemBgActive" | "surface.light.listItemBorder" | "surface.light.segmentedControlBg" | "surface.light.segmentedControlBgActive" | "surface.light.transferListItemCompletingBg" | "surface.light.transferListItemDownloadingBg" | "surface.light.transferListItemFinishedBg" | "surface.light.transferListItemPassiveBg" | "surface.light.hiContrast" | "surface.light.loContrast" | "surface.light.transparent" | "surface.light.overlayInline" | "surface.light.overlayFull" | "surface.dark.htmlBg" | "surface.dark.appBg" | "surface.dark.navBg" | "surface.dark.navItemBg" | "surface.dark.navItemBgHover" | "surface.dark.navItemBgActive" | "surface.dark.listItemBg" | "surface.dark.listItemBgHover" | "surface.dark.listItemBgActive" | "surface.dark.listItemBorder" | "surface.dark.segmentedControlBg" | "surface.dark.segmentedControlBgActive" | "surface.dark.transferListItemCompletingBg" | "surface.dark.transferListItemDownloadingBg" | "surface.dark.transferListItemFinishedBg" | "surface.dark.transferListItemPassiveBg" | "surface.dark.hiContrast" | "surface.dark.loContrast" | "surface.dark.overlayInline" | "surface.dark.overlayFull" | "surface.dark.shadowColor" | "surface.dark.shadow" | "surface.dark.shadowSm" | "surface.dark.shadowMd" | "surface.dark.shadowLg";
 
 export type PutioToken = {
   readonly cssName: string;
@@ -9,6 +9,8 @@ export type PutioToken = {
   readonly value: string | number;
   readonly originalValue: string | number;
   readonly description?: string;
+  readonly basis?: "viewport-width" | "viewport-height";
+  readonly deprecated?: boolean;
 };
 
 export declare const tokens: Readonly<Record<PutioTokenName, PutioToken>>;