@putdotio/design 2.0.2 → 3.0.0

package/DESIGN.md

@@ -66,6 +66,18 @@ put.io is a content-agnostic cloud file product. The interface should feel premi
 
 The canonical source for tokens is DTCG-compatible JSON in `tokens/`. Generated artifacts in `dist/` and `system/tokens.css` are outputs. This file explains how to use those tokens.
 
+## Binding Tiers
+
+A web-rendered mock is never a native spec. Every surface binds to the system at one of five tiers, and every specimen card in `system/preview/` declares its tier in a strip above the artboard (`system/preview/_tier.css`; if the wording here changes, change that file in the same PR).
+
+- **Tier 0 — Foundations.** The token graph. Binds every tier, values only, never a component recipe.
+- **Tier 1 — www · app · auth.** The full design system: the component library and `system/components.css` recipes. The recipes are the contract here, and only here.
+- **Tier 2 — iOS · iPadOS · tvOS · watchOS · Android · Android TV.** Tokens only. Every component, composition, and page comes from the platform's human interface guidelines; the cards document how a stock control receives put.io tokens, never how to rebuild one.
+- **Tier 3 — Roku.** Tier-2 token inheritance, plus room for put.io conventions in custom SceneGraph components.
+- **Tier 4 — tv.put.io · Tizen · webOS.** The design system as on web, restrained to a generic, calm, list-first 10-foot interface.
+
+A tier-1/3/4 card is a Component — put.io owns the recipe. A tier-2 card is an Element — the platform owns the control. Per-platform binding contracts live in `platforms/<platform>/DESIGN.md`. One rule holds on every tier: every file-type icon is brand yellow, Phosphor, never a text glyph.
+
 ## Colors
 
 Yellow `#FDCE45` is the resting `--yellow-solid` brand value in both light and dark modes. Use it for the put.io brand mark, primary action fill, folder/file emphasis, progress, and focus affordances. Use `--yellow-solid-hover` for primary button hover feedback; do not invent alternate yellows, gradient yellow into a different accent, or use yellow as foreground text on light surfaces.
@@ -104,6 +116,18 @@ TV is the exception: every 10-foot surface — list rows, buttons, sheets, cards
 
 ## Components
 
+The component recipes below and in `system/components.css` are the **web
+binding** of the token graph, and they bind the web surfaces in full. The other
+tiers inherit differently: native apps (SwiftUI, Compose) consume the token
+*values* and build every component from their platform's human interface
+guidelines — stock controls themed with these tokens, never re-drawn web
+recipes (first adopter: `DESIGN.md` in
+[putio-ios](https://github.com/putdotio/putio-ios)); Roku inherits the tokens
+with more room for put.io conventions in custom SceneGraph components; the
+web-based TV app applies this system restrained to the product's generic
+list-first 10-foot interface, which every TV surface — including the native
+ones, within their platform conventions — treats as the shared family look.
+
 Buttons have three tiers on one axis: emphasis. **Primary** is the brand fill — `--button-primary-bg` at rest, `--button-primary-bg-hover` on hover so the CTA never feels inert, label `--button-primary-fg`. Yellow is reserved for primary commands, and an action group carries at most one. **Secondary** is a quiet fill: `--button-default-bg` (aliased as `--button-secondary-bg`) plus a border at `--border`, with hover stepping both (`--button-default-bg-hover`, `--border-hover`). Because it fills, it reads to a hard edge exactly like the primary, so the two compare safely side by side. **Ghost** is text only — no fill, no border. `--button-ghost-fg` at rest; hover paints `--button-ghost-bg-hover` behind the label and lifts it to `--button-ghost-fg-hover`. The label lift is mandatory: the faint fill is never the only hover cue. Disabled drops the colour to `--solid` at full opacity rather than fading the box. Use ghost for anything quieter than a filled secondary — a header `Log in`, toolbar text actions, `Cancel` beside a filled confirm. An icon-only ghost is the quiet icon button, on the same tokens.
 
 Outline is not a tier. The system ships no transparent-background bordered button, and consumers must not hand-roll one. The pairing rule behind that: never place a border-only button in the same action group as a solid fill. At identical box heights the outlined shape reads smaller, because a solid resolves to a hard edge while a low-contrast hairline resolves to a soft one, and the eye compares the two extents differently. It is worst on dark surfaces, where a 15%-white hairline is barely visible at all. If a bordered treatment must sit near a fill, it must itself fill — the secondary tier — and carry its border at `--border`-step contrast, never a sub-20% hairline on transparent.
@@ -118,7 +142,7 @@ 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.
+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. These focus and material rules bind the web TV and Roku surfaces; a native TV binding follows its platform's own control conventions where the platform owns focus — Apple tvOS buttons use the system focus treatment (adopted 2026-08) while non-control TV surfaces stay solid everywhere.
 
 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. Cite the `tv` group by its graph path, never as `--tv-*`: those names are read from the DTCG artifacts by platform adapters and are deliberately absent from `dist/css/tokens.css`, so CSS-variable syntax would promise a `var()` that resolves to nothing.
 

package/dist/css/tokens.css

@@ -96,6 +96,34 @@
   --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);
+  --alert-info-bg: hsl(0, 0%, 97.3%);
+  --alert-info-border: hsl(0, 0%, 88.7%);
+  --alert-info-text: hsl(0, 0%, 9.0%);
+  --alert-info-body: hsl(0, 0%, 43.5%);
+  --alert-info-icon: hsl(0, 0%, 43.5%);
+  --alert-brand-bg: hsl(52, 100%, 88%);
+  --alert-brand-border: hsl(45, 67%, 67%);
+  --alert-brand-text: hsl(43, 32%, 21%);
+  --alert-brand-body: hsl(46, 100%, 27%);
+  --alert-brand-icon: hsl(46, 100%, 27%);
+  --alert-success-bg: hsl(135, 53%, 93%);
+  --alert-success-border: hsl(140, 39%, 68%);
+  --alert-success-text: hsl(146, 35%, 17%);
+  --alert-success-body: hsl(155, 100%, 25%);
+  --alert-success-icon: hsl(155, 100%, 25%);
+  --alert-danger-bg: hsl(2, 100%, 96%);
+  --alert-danger-border: hsl(2, 81%, 80%);
+  --alert-danger-text: hsl(358, 62%, 24%);
+  --alert-danger-body: hsl(355, 64%, 49%);
+  --alert-danger-icon: hsl(355, 64%, 49%);
+  --slider-track: hsl(0, 0%, 90.9%);
+  --slider-buffer: hsl(0, 0%, 85.8%);
+  --slider-fill-disabled: hsl(0, 0%, 43.5%);
+  --pagination-item-text: hsl(0, 0%, 43.5%);
+  --pagination-item-text-active: hsl(0, 0%, 9.0%);
+  --pagination-item-bg-hover: hsl(0, 0%, 93.0%);
+  --pagination-item-bg-active: hsl(0, 0%, 90.9%);
+  --pagination-item-border-active: hsl(0, 0%, 85.8%);
   --bg: hsl(0, 0%, 99.0%);
   --bg-secondary: hsl(0, 0%, 97.3%);
   --component-bg: hsl(0, 0%, 95.1%);
@@ -197,12 +225,30 @@
   --destructive-foreground: hsl(0, 0%, 100%);
   --ring: hsla(47, 100%, 65%, 0.35);
   --file-row-icon: hsl(44.7, 97.9%, 63.1%);
+  --notification-badge-bg: hsl(358, 70%, 45%);
+  --notification-badge-fg: hsl(0, 0%, 100%);
   --menu-radius: 8px;
   --menu-item-height: 32px;
   --palette-width: 560px;
   --palette-input-height: 48px;
   --palette-item-height: 36px;
   --sheet-width: 380px;
+  --avatar-yellow: hsl(44.7, 97.9%, 63.1%);
+  --avatar-green: hsl(151, 55%, 33%);
+  --avatar-red: hsl(358, 55%, 46%);
+  --avatar-blue: hsl(211, 55%, 46%);
+  --avatar-purple: hsl(280, 48%, 46%);
+  --avatar-teal: hsl(168, 55%, 33%);
+  --avatar-orange: hsl(28, 80%, 55%);
+  --avatar-fg: hsl(0, 0%, 100%);
+  --avatar-fg-warm: hsl(38, 65%, 10%);
+  --alert-radius: 6px;
+  --slider-fill: hsl(44.7, 97.9%, 63.1%);
+  --slider-knob: hsl(44.7, 97.9%, 63.1%);
+  --slider-track-height: 4px;
+  --slider-knob-size: 14px;
+  --slider-hit-height: 20px;
+  --pagination-item-size: 30px;
   --yellow-solid: hsl(44.7, 97.9%, 63.1%);
   --shadow-color: hsl(0, 0%, 78.0%);
   --shadow: hsl(0, 0%, 78.0%);
@@ -357,6 +403,34 @@
   --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);
+  --alert-info-bg: hsl(0, 0%, 11.0%);
+  --alert-info-border: hsl(0, 0%, 20.5%);
+  --alert-info-text: hsl(0, 0%, 93.0%);
+  --alert-info-body: hsl(0, 0%, 62.8%);
+  --alert-info-icon: hsl(0, 0%, 62.8%);
+  --alert-brand-bg: hsl(45, 70%, 9%);
+  --alert-brand-border: hsl(45, 53%, 26%);
+  --alert-brand-text: hsl(46, 89%, 86%);
+  --alert-brand-body: hsl(45, 100%, 64%);
+  --alert-brand-icon: hsl(45, 100%, 64%);
+  --alert-success-bg: hsl(151, 35%, 13%);
+  --alert-success-border: hsl(146, 41%, 29%);
+  --alert-success-text: hsl(142, 71%, 82%);
+  --alert-success-body: hsl(146, 56%, 60%);
+  --alert-success-icon: hsl(146, 56%, 60%);
+  --alert-danger-bg: hsl(0, 55%, 15%);
+  --alert-danger-border: hsl(0, 46%, 38%);
+  --alert-danger-text: hsl(5, 100%, 91%);
+  --alert-danger-body: hsl(2, 100%, 77%);
+  --alert-danger-icon: hsl(2, 100%, 77%);
+  --slider-track: hsl(0, 0%, 17.9%);
+  --slider-buffer: hsl(0, 0%, 24.3%);
+  --slider-fill-disabled: hsl(0, 0%, 62.8%);
+  --pagination-item-text: hsl(0, 0%, 62.8%);
+  --pagination-item-text-active: hsl(0, 0%, 93.0%);
+  --pagination-item-bg-hover: hsl(0, 0%, 15.8%);
+  --pagination-item-bg-active: hsl(0, 0%, 17.9%);
+  --pagination-item-border-active: hsl(0, 0%, 24.3%);
   --bg: hsl(0, 0%, 8.5%);
   --bg-secondary: hsl(0, 0%, 11.0%);
   --component-bg: hsl(0, 0%, 13.6%);

package/dist/figma/putio.tokens.json

@@ -315,6 +315,15 @@
       "dangerForeground": {
         "$type": "color",
         "$value": "hsl(358, 62%, 24%)"
+      },
+      "badgeBackground": {
+        "$type": "color",
+        "$value": "hsl(358, 70%, 45%)",
+        "$description": "Unread count disc — darkened red so white numerals clear AA at 9px. Fixed in both modes."
+      },
+      "badgeForeground": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 100%)"
       }
     },
     "menu": {
@@ -426,6 +435,197 @@
         "$value": "380px",
         "$description": "Fixed on web. Touch surfaces use a bottom sheet instead."
       }
+    },
+    "avatar": {
+      "yellow": {
+        "$type": "color",
+        "$value": "hsl(44.7, 97.9%, 63.1%)",
+        "$description": "Initial-on-color avatar palette. Fixed in both modes; the chip carries its own contrast."
+      },
+      "green": {
+        "$type": "color",
+        "$value": "hsl(151, 55%, 33%)"
+      },
+      "red": {
+        "$type": "color",
+        "$value": "hsl(358, 55%, 46%)"
+      },
+      "blue": {
+        "$type": "color",
+        "$value": "hsl(211, 55%, 46%)"
+      },
+      "purple": {
+        "$type": "color",
+        "$value": "hsl(280, 48%, 46%)"
+      },
+      "teal": {
+        "$type": "color",
+        "$value": "hsl(168, 55%, 33%)"
+      },
+      "orange": {
+        "$type": "color",
+        "$value": "hsl(28, 80%, 55%)"
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 100%)",
+        "$description": "White initials — every palette entry except yellow and orange."
+      },
+      "foregroundWarm": {
+        "$type": "color",
+        "$value": "hsl(38, 65%, 10%)",
+        "$description": "Warm dark initials on yellow and orange."
+      }
+    },
+    "alert": {
+      "radius": {
+        "$type": "dimension",
+        "$value": "6px",
+        "$description": "Inline, in-page messaging. Persists until the condition clears — a toast does not."
+      },
+      "infoBackground": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 97.3%)"
+      },
+      "infoBorder": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 88.7%)"
+      },
+      "infoText": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 9.0%)"
+      },
+      "infoBody": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 43.5%)"
+      },
+      "infoIcon": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 43.5%)"
+      },
+      "brandBackground": {
+        "$type": "color",
+        "$value": "hsl(52, 100%, 88%)"
+      },
+      "brandBorder": {
+        "$type": "color",
+        "$value": "hsl(45, 67%, 67%)"
+      },
+      "brandText": {
+        "$type": "color",
+        "$value": "hsl(43, 32%, 21%)"
+      },
+      "brandBody": {
+        "$type": "color",
+        "$value": "hsl(46, 100%, 27%)"
+      },
+      "brandIcon": {
+        "$type": "color",
+        "$value": "hsl(46, 100%, 27%)"
+      },
+      "successBackground": {
+        "$type": "color",
+        "$value": "hsl(135, 53%, 93%)"
+      },
+      "successBorder": {
+        "$type": "color",
+        "$value": "hsl(140, 39%, 68%)"
+      },
+      "successText": {
+        "$type": "color",
+        "$value": "hsl(146, 35%, 17%)"
+      },
+      "successBody": {
+        "$type": "color",
+        "$value": "hsl(155, 100%, 25%)"
+      },
+      "successIcon": {
+        "$type": "color",
+        "$value": "hsl(155, 100%, 25%)"
+      },
+      "dangerBackground": {
+        "$type": "color",
+        "$value": "hsl(2, 100%, 96%)"
+      },
+      "dangerBorder": {
+        "$type": "color",
+        "$value": "hsl(2, 81%, 80%)"
+      },
+      "dangerText": {
+        "$type": "color",
+        "$value": "hsl(358, 62%, 24%)"
+      },
+      "dangerBody": {
+        "$type": "color",
+        "$value": "hsl(355, 64%, 49%)"
+      },
+      "dangerIcon": {
+        "$type": "color",
+        "$value": "hsl(355, 64%, 49%)"
+      }
+    },
+    "slider": {
+      "track": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 90.9%)",
+        "$description": "Seek, volume, stepped numeric. The buffered band is what makes it a scrubber."
+      },
+      "buffer": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 85.8%)"
+      },
+      "fill": {
+        "$type": "color",
+        "$value": "hsl(44.7, 97.9%, 63.1%)"
+      },
+      "knob": {
+        "$type": "color",
+        "$value": "hsl(44.7, 97.9%, 63.1%)"
+      },
+      "fillDisabled": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 43.5%)"
+      },
+      "trackHeight": {
+        "$type": "dimension",
+        "$value": "4px"
+      },
+      "knobSize": {
+        "$type": "dimension",
+        "$value": "14px"
+      },
+      "hitHeight": {
+        "$type": "dimension",
+        "$value": "20px",
+        "$description": "44px on touch — the knob grows, the track does not."
+      }
+    },
+    "pagination": {
+      "itemSize": {
+        "$type": "dimension",
+        "$value": "30px",
+        "$description": "Numbered paging. Load-more and infinite scroll carry no chrome of their own."
+      },
+      "itemText": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 43.5%)"
+      },
+      "itemTextActive": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 9.0%)"
+      },
+      "itemBackgroundHover": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 93.0%)"
+      },
+      "itemBackgroundActive": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 90.9%)"
+      },
+      "itemBorderActive": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 85.8%)"
+      }
     }
   },
   "color": {

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.secondary.backgroundHover" | "component.button.secondary.backgroundHoverDark" | "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.button.ghost.background" | "component.button.ghost.foreground" | "component.button.ghost.foregroundDark" | "component.button.ghost.foregroundHover" | "component.button.ghost.foregroundHoverDark" | "component.button.ghost.backgroundHover" | "component.button.ghost.backgroundHoverDark" | "component.button.height" | "component.button.heightMd" | "component.button.heightSm" | "component.button.heightXs" | "component.button.paddingX" | "component.button.paddingXXs" | "component.button.labelSize" | "component.button.labelSizeXs" | "component.button.tracking" | "component.button.trackingMd" | "component.button.trackingSm" | "component.button.trackingXs" | "component.button.iconSize" | "component.button.gap" | "component.nav.height" | "component.nav.heightCompact" | "component.nav.ctaHeight" | "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 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.secondary.backgroundHover" | "component.button.secondary.backgroundHoverDark" | "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.button.ghost.background" | "component.button.ghost.foreground" | "component.button.ghost.foregroundDark" | "component.button.ghost.foregroundHover" | "component.button.ghost.foregroundHoverDark" | "component.button.ghost.backgroundHover" | "component.button.ghost.backgroundHoverDark" | "component.button.height" | "component.button.heightMd" | "component.button.heightSm" | "component.button.heightXs" | "component.button.paddingX" | "component.button.paddingXXs" | "component.button.labelSize" | "component.button.labelSizeXs" | "component.button.tracking" | "component.button.trackingMd" | "component.button.trackingSm" | "component.button.trackingXs" | "component.button.iconSize" | "component.button.gap" | "component.nav.height" | "component.nav.heightCompact" | "component.nav.ctaHeight" | "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.notification.badgeBackground" | "component.notification.badgeForeground" | "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" | "component.avatar.yellow" | "component.avatar.green" | "component.avatar.red" | "component.avatar.blue" | "component.avatar.purple" | "component.avatar.teal" | "component.avatar.orange" | "component.avatar.foreground" | "component.avatar.foregroundWarm" | "component.alert.radius" | "component.alert.infoBackground" | "component.alert.infoBackgroundDark" | "component.alert.infoBorder" | "component.alert.infoBorderDark" | "component.alert.infoText" | "component.alert.infoTextDark" | "component.alert.infoBody" | "component.alert.infoBodyDark" | "component.alert.infoIcon" | "component.alert.infoIconDark" | "component.alert.brandBackground" | "component.alert.brandBackgroundDark" | "component.alert.brandBorder" | "component.alert.brandBorderDark" | "component.alert.brandText" | "component.alert.brandTextDark" | "component.alert.brandBody" | "component.alert.brandBodyDark" | "component.alert.brandIcon" | "component.alert.brandIconDark" | "component.alert.successBackground" | "component.alert.successBackgroundDark" | "component.alert.successBorder" | "component.alert.successBorderDark" | "component.alert.successText" | "component.alert.successTextDark" | "component.alert.successBody" | "component.alert.successBodyDark" | "component.alert.successIcon" | "component.alert.successIconDark" | "component.alert.dangerBackground" | "component.alert.dangerBackgroundDark" | "component.alert.dangerBorder" | "component.alert.dangerBorderDark" | "component.alert.dangerText" | "component.alert.dangerTextDark" | "component.alert.dangerBody" | "component.alert.dangerBodyDark" | "component.alert.dangerIcon" | "component.alert.dangerIconDark" | "component.slider.track" | "component.slider.trackDark" | "component.slider.buffer" | "component.slider.bufferDark" | "component.slider.fill" | "component.slider.knob" | "component.slider.fillDisabled" | "component.slider.fillDisabledDark" | "component.slider.trackHeight" | "component.slider.knobSize" | "component.slider.hitHeight" | "component.pagination.itemSize" | "component.pagination.itemText" | "component.pagination.itemTextDark" | "component.pagination.itemTextActive" | "component.pagination.itemTextActiveDark" | "component.pagination.itemBackgroundHover" | "component.pagination.itemBackgroundHoverDark" | "component.pagination.itemBackgroundActive" | "component.pagination.itemBackgroundActiveDark" | "component.pagination.itemBorderActive" | "component.pagination.itemBorderActiveDark" | "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.nightly.background" | "context.tv.channelArt.nightly.accent" | "context.tv.channelArt.nightly.star" | "context.tv.channelArt.nightly.moon" | "context.tv.channelArt.nightly.moonCrater" | "context.tv.channelArt.lab.background" | "context.tv.channelArt.lab.foreground" | "context.tv.channelArt.lab.accent" | "tv.video.background" | "tv.video.heroScrimTop" | "tv.video.heroScrimBottom" | "tv.video.textOnVideo" | "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;