@putdotio/design 1.4.0 → 1.5.1

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,11 @@ 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, and should ask for its tabular figures wherever a number ticks or sits in a column. GT America Standard carries `tnum`, so any platform that can select OpenType features can honour this: web through `font-variant-numeric: tabular-nums`, React Native through the same font feature settings. Platforms that cannot select features get the default proportional figures, where `1` is 399/1000 em against `0` at 636, so a running timecode visibly reflows. Roku is the current example — its SceneGraph `Font` node accepts only a `uri` and a `size` — so budget 10-foot numeric layouts for proportional figures rather than assuming the columns line up.
+
+GT America is a Latin face: 523 codepoints covering Western and Central European Latin plus Turkish, with no Cyrillic, Greek, CJK, Arabic, Hebrew, Thai, or Hangul, and no dingbats — no `U+2713 ✓`, `U+2714`, `U+25B6 ▶`, or `U+2605 ★`. Two rules follow. Symbols are always icons, never text glyphs, because a checkmark typed as text renders as nothing. And because put.io shows raw filenames, user content routinely arrives outside that coverage: keep a fallback family behind GT America for any text that can hold a filename. Web gets this for free — `"GT America", sans-serif` falls back per glyph — so the gap is invisible there and shows up on platforms that resolve one font per label with no per-glyph fallback, where uncovered characters become `.notdef` boxes. Treat a platform's fallback story for content text as part of adopting the face, not an afterthought.
 
 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 +98,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 +110,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>>;