@putdotio/design 1.3.0 → 1.5.0

package/dist/figma/putio.tokens.json

@@ -67,10 +67,37 @@
         }
       },
       "info": {
+        "background": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 56.1%)",
+          "$description": "Neutral solid command background in light mode."
+        },
         "backgroundHover": {
           "$type": "color",
           "$value": "hsl(0, 0%, 52.3%)",
           "$description": "Neutral solid command hover background in light mode."
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 0%)",
+          "$description": "Label on the neutral solid — mode-aware for AA contrast on the gray fill."
+        }
+      },
+      "default": {
+        "background": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 95.1%)",
+          "$description": "Quiet default button fill in light mode."
+        },
+        "backgroundHover": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 93.0%)",
+          "$description": "Default button hover fill in light mode."
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 9.0%)",
+          "$description": "Default button label in light mode."
         }
       }
     },
@@ -86,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": {
@@ -97,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": {
@@ -110,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."
       }
     }
   },
@@ -342,7 +543,8 @@
     },
     "color": {
       "$type": "color",
-      "$value": "hsl(0, 0%, 78.0%)"
+      "$value": "hsl(0, 0%, 78.0%)",
+      "$description": "Compat name kept for existing web consumers — alias of elevation.shadowColor so the two can never drift."
     },
     "focusColor": {
       "$type": "color",
@@ -359,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": {
@@ -375,39 +574,48 @@
       },
       "sm": {
         "$type": "dimension",
-        "$value": "0.8125rem"
+        "$value": "0.875rem",
+        "$description": "Caption and button labels — production fontSize 0."
       },
       "base": {
         "$type": "dimension",
-        "$value": "0.875rem"
+        "$value": "1rem",
+        "$description": "Body, labels, inputs — production fontSize 1; equals the responsive root (14px, 15px at >= breakpoint.lg)."
       },
       "md": {
         "$type": "dimension",
-        "$value": "1rem"
+        "$value": "1.125rem",
+        "$description": "Subheading."
       },
       "lg": {
         "$type": "dimension",
-        "$value": "1.125rem"
+        "$value": "1.5rem",
+        "$description": "Heading."
       },
       "xl": {
         "$type": "dimension",
-        "$value": "1.5rem"
+        "$value": "2rem",
+        "$description": "Page title."
       },
       "2xl": {
         "$type": "dimension",
-        "$value": "2rem"
+        "$value": "48px",
+        "$description": "Fixed display tier — does not scale with the responsive root."
       },
       "3xl": {
         "$type": "dimension",
-        "$value": "3rem"
+        "$value": "64px",
+        "$description": "Fixed display tier — does not scale with the responsive root."
       },
       "4xl": {
         "$type": "dimension",
-        "$value": "4rem"
+        "$value": "64px",
+        "$description": "Compatibility alias for the former 4xl tier; new surfaces should use fontSize.3xl or fontSize.display."
       },
       "display": {
         "$type": "dimension",
-        "$value": "6rem"
+        "$value": "96px",
+        "$description": "Fixed display tier for brand display moments."
       }
     },
     "lineHeight": {
@@ -523,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.backgroundHover" | "component.button.info.backgroundHoverDark" | "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" | "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>>;