@putdotio/design 1.0.0 → 1.1.0

package/DESIGN.md

@@ -3,17 +3,17 @@ version: "0.1.0"
 name: "put.io Design System"
 description: "Public token and guidance contract for put.io product surfaces."
 colors:
-  brand: "#FDCE45"
+  brand: "hsl(44.7, 97.9%, 63.1%)"
   dark:
     app-bg: "hsl(0, 0%, 8.5%)"
-    page-bg: "black"
+    page-bg: "hsl(0, 0%, 0%)"
     text: "hsl(0, 0%, 93.0%)"
     text-muted: "hsl(0, 0%, 62.8%)"
     border: "hsl(0, 0%, 24.3%)"
     success: "hsl(151, 55.0%, 41.5%)"
     danger: "hsl(358, 75.0%, 59.0%)"
   light:
-    app-bg: "white"
+    app-bg: "hsl(0, 0%, 100%)"
     page-bg: "hsl(0, 0%, 97.3%)"
     text: "hsl(0, 0%, 9.0%)"
     text-muted: "hsl(0, 0%, 43.5%)"
@@ -96,6 +96,8 @@ The default radius is `6px`. Use `4px` for tight controls, `8px` or `10px` for l
 
 Buttons use yellow only for primary commands. Secondary buttons should feel quiet and tokenized against the active surface. File rows are the core component: preserve raw names, keep metadata compact, and make hover/focus states obvious without inflating row height.
 
+Form fields use the shared `--field-*` aliases: `--field-bg` for the fill, `--field-border` for the resting border, and `--field-ring` for focus. Invalid fields opt in with `aria-invalid="true"` and use red border/text only; do not add red fill. Raised panels use the shared `--panel-*` aliases instead of auth- or screen-specific panel variables.
+
 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.
 
 ## Do's and Don'ts

package/README.md

@@ -5,7 +5,7 @@
 
   <h1>put.io design</h1>
 
-  <p>Public design tokens and design-system guidance for <a href="https://put.io">put.io</a>.</p>
+  <p>Public design tokens, brand assets, and design-system guidance for <a href="https://put.io">put.io</a>.</p>
 
   <p>
     <a href="https://www.npmjs.com/package/@putdotio/design" style="text-decoration:none;"><img src="https://img.shields.io/npm/v/%40putdotio%2Fdesign?style=flat&label=npm&logo=npm&colorA=000000&colorB=000000" alt="npm version"></a>
@@ -18,22 +18,38 @@
 
 Live guide: [design.put.io](https://design.put.io)
 
-This repo owns the public contract behind it: DTCG token sources, generated CSS/JSON/TypeScript artifacts, preview cards, and deployable static guidance.
+This repo owns the public contract behind it: DTCG token sources, generated
+CSS/JSON/TypeScript artifacts, brand assets, preview cards, and deployable
+static guidance.
 
-## Use
+## Install
 
-Token sources live in [`tokens`](tokens). Generated package artifacts live in [`dist`](dist).
+Token sources live in [`tokens`](tokens). Generated package artifacts live in
+[`dist`](dist). Package-safe brand assets live in [`system/assets`](system/assets).
 
 ```bash
 npm install @putdotio/design
 ```
 
-Common entrypoints:
+## Use
+
+Import the generated CSS when a web surface needs put.io custom properties:
+
+```css
+@import "@putdotio/design/css";
+```
+
+Component recipes should consume semantic aliases such as `--field-*`,
+`--panel-*`, `--primary`, `--success`, and `--destructive` instead of reaching
+into palette tokens directly.
+
+Package entrypoints:
 
 - CSS custom properties: [`dist/css/tokens.css`](dist/css/tokens.css)
 - DTCG token tree: [`dist/tokens.dtcg.json`](dist/tokens.dtcg.json)
 - Flat token metadata: [`dist/tokens.flat.json`](dist/tokens.flat.json)
 - Figma-safe subset: [`dist/figma/putio.tokens.json`](dist/figma/putio.tokens.json)
+- Brand assets: [`system/assets`](system/assets) via `@putdotio/design/assets/<file>`
 - Human and AI design contract: [`DESIGN.md`](DESIGN.md)
 
 ## Commands
@@ -56,6 +72,11 @@ Use `pnpm tokens:build` after token edits.
 - [Security](SECURITY.md)
 - [Agent guide](AGENTS.md)
 
+## Contributing
+
+See [Contributing](CONTRIBUTING.md) for local setup, validation, and pull
+request expectations.
+
 ## License
 
 [MIT](LICENSE)

package/dist/css/tokens.css

@@ -10,8 +10,33 @@
 :root {
   --button-secondary-bg: hsl(0, 0%, 95.1%);
   --button-secondary-fg: hsl(0, 0%, 9.0%);
-  --input-bg: white;
+  --input-bg: hsl(0, 0%, 100%);
   --input-border: hsl(0, 0%, 85.8%);
+  --field-bg: hsl(0, 0%, 100%);
+  --field-bg-disabled: hsl(0, 0%, 97.3%);
+  --field-border: hsl(0, 0%, 85.8%);
+  --field-border-hover: hsl(0, 0%, 78.0%);
+  --field-border-focus: hsl(0, 0%, 78.0%);
+  --field-text: hsl(0, 0%, 9.0%);
+  --field-placeholder: hsl(0, 0%, 43.5%);
+  --field-ring: 0 0 0 1px hsl(0, 0%, 78.0%);
+  --panel-bg: hsl(0, 0%, 95.1%);
+  --panel-border: hsl(0, 0%, 88.7%);
+  --panel-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.08);
+  --background: hsl(0, 0%, 99.0%);
+  --foreground: hsl(0, 0%, 9.0%);
+  --foreground-muted: hsl(0, 0%, 43.5%);
+  --success: hsl(153, 67.0%, 28.5%);
+  --destructive: hsl(358, 65.0%, 48.7%);
+  --muted: hsl(0, 0%, 97.3%);
+  --muted-foreground: hsl(0, 0%, 43.5%);
+  --accent: hsl(0, 0%, 95.1%);
+  --accent-foreground: hsl(0, 0%, 9.0%);
+  --card: hsl(0, 0%, 95.1%);
+  --card-foreground: hsl(0, 0%, 9.0%);
+  --popover: hsl(0, 0%, 95.1%);
+  --popover-foreground: hsl(0, 0%, 9.0%);
+  --input: hsl(0, 0%, 85.8%);
   --file-row-bg: transparent;
   --file-row-bg-hover: hsl(0, 0%, 97.3%);
   --notification-info-bg: hsl(0, 0%, 97.3%);
@@ -60,13 +85,13 @@
   --yellow-line: hsl(50, 89.4%, 76.1%);
   --yellow-border: hsl(47, 80.4%, 68.0%);
   --yellow-border-hover: hsl(48, 100%, 46.1%);
-  --yellow-solid-hover: #FDCE45;
+  --yellow-solid-hover: hsl(44.7, 97.9%, 63.1%);
   --yellow-text-secondary: hsl(42, 100%, 29.0%);
   --yellow-text: hsl(40, 55.0%, 13.5%);
   --lime-3: hsl(85, 76.0%, 92.3%);
   --html-bg: hsl(0, 0%, 97.3%);
-  --app-bg: white;
-  --nav-bg: white;
+  --app-bg: hsl(0, 0%, 100%);
+  --nav-bg: hsl(0, 0%, 100%);
   --nav-item-bg: transparent;
   --nav-item-bg-hover: hsl(0, 0%, 95.1%);
   --nav-item-bg-active: hsl(0, 0%, 95.1%);
@@ -75,7 +100,7 @@
   --list-item-bg-active: hsl(0, 0%, 97.3%);
   --list-item-border: hsl(0, 0%, 90.9%);
   --segmented-control-bg: hsl(0, 0%, 95.1%);
-  --segmented-control-bg-active: white;
+  --segmented-control-bg-active: hsl(0, 0%, 100%);
   --transfer-list-item-completing-bg: hsl(85, 76.0%, 92.3%);
   --transfer-list-item-downloading-bg: hsl(85, 76.0%, 92.3%);
   --transfer-list-item-finished-bg: hsl(0, 0%, 97.3%);
@@ -85,19 +110,26 @@
   --transparent: transparent;
   --overlay-inline: hsla(0, 0%, 0%, 0.047);
   --overlay-full: hsla(0, 0%, 0%, 0.439);
-  --button-primary-bg: #FDCE45;
-  --button-primary-fg: #0A0A0A;
+  --button-primary-bg: hsl(44.7, 97.9%, 63.1%);
+  --button-primary-fg: hsl(0, 0%, 4.0%);
   --button-radius: 6px;
   --input-radius: 6px;
-  --file-row-icon: #FDCE45;
-  --yellow-solid: #FDCE45;
+  --panel-radius: 10px;
+  --primary: hsl(44.7, 97.9%, 63.1%);
+  --primary-foreground: hsl(0, 0%, 0%);
+  --success-foreground: hsl(0, 0%, 100%);
+  --destructive-foreground: hsl(0, 0%, 100%);
+  --solid-foreground: hsl(0, 0%, 100%);
+  --ring: hsla(47, 100%, 65%, 0.35);
+  --file-row-icon: hsl(44.7, 97.9%, 63.1%);
+  --yellow-solid: hsl(44.7, 97.9%, 63.1%);
   --shadow-color: hsl(0, 0%, 78.0%);
   --shadow: hsl(0, 0%, 78.0%);
   --shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05);
   --shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.08);
   --shadow-lg: 0 16px 40px hsla(0, 0%, 0%, 0.12);
   --shadow-focus-color: hsla(47, 100%, 65%, 0.35);
-  --shadow-focus: 0 0 0 3px var(--shadow-focus-color);
+  --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;
@@ -150,8 +182,33 @@
 .dark {
   --button-secondary-bg: hsl(0, 0%, 13.6%);
   --button-secondary-fg: hsl(0, 0%, 93.0%);
-  --input-bg: hsl(0, 0%, 13.6%);
+  --input-bg: hsl(0, 0%, 8.5%);
   --input-border: hsl(0, 0%, 24.3%);
+  --field-bg: hsl(0, 0%, 8.5%);
+  --field-bg-disabled: hsl(0, 0%, 11.0%);
+  --field-border: hsl(0, 0%, 24.3%);
+  --field-border-hover: hsl(0, 0%, 31.2%);
+  --field-border-focus: hsl(0, 0%, 31.2%);
+  --field-text: hsl(0, 0%, 93.0%);
+  --field-placeholder: hsl(0, 0%, 62.8%);
+  --field-ring: 0 0 0 1px hsl(0, 0%, 31.2%);
+  --panel-bg: hsl(0, 0%, 13.6%);
+  --panel-border: hsl(0, 0%, 20.5%);
+  --panel-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.5);
+  --background: hsl(0, 0%, 8.5%);
+  --foreground: hsl(0, 0%, 93.0%);
+  --foreground-muted: hsl(0, 0%, 62.8%);
+  --success: hsl(151, 51.7%, 28.4%);
+  --destructive: hsl(358, 65.0%, 40.4%);
+  --muted: hsl(0, 0%, 11.0%);
+  --muted-foreground: hsl(0, 0%, 62.8%);
+  --accent: hsl(0, 0%, 13.6%);
+  --accent-foreground: hsl(0, 0%, 93.0%);
+  --card: hsl(0, 0%, 13.6%);
+  --card-foreground: hsl(0, 0%, 93.0%);
+  --popover: hsl(0, 0%, 13.6%);
+  --popover-foreground: hsl(0, 0%, 93.0%);
+  --input: hsl(0, 0%, 24.3%);
   --file-row-bg: transparent;
   --file-row-bg-hover: hsl(0, 0%, 11.0%);
   --notification-info-bg: hsl(0, 0%, 13.6%);
@@ -200,11 +257,11 @@
   --yellow-line: hsl(49, 100%, 14.3%);
   --yellow-border: hsl(49, 90.3%, 18.4%);
   --yellow-border-hover: hsl(50, 100%, 22.0%);
-  --yellow-solid-hover: #FDCE45;
+  --yellow-solid-hover: hsl(44.7, 97.9%, 63.1%);
   --yellow-text-secondary: hsl(48, 100%, 47.0%);
   --yellow-text: hsl(53, 100%, 91.0%);
   --lime-3: hsl(85, 45%, 12%);
-  --html-bg: black;
+  --html-bg: hsl(0, 0%, 0%);
   --app-bg: hsl(0, 0%, 8.5%);
   --nav-bg: hsl(0, 0%, 8.5%);
   --nav-item-bg: transparent;
@@ -224,8 +281,8 @@
   --lo-contrast: hsl(0, 0%, 8.5%);
   --overlay-inline: hsla(0, 0%, 0%, 0.439);
   --overlay-full: hsla(0, 0%, 0%, 0.565);
-  --shadow-color: black;
-  --shadow: black;
+  --shadow-color: hsl(0, 0%, 0%);
+  --shadow: hsl(0, 0%, 0%);
   --shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.4);
   --shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.5);
   --shadow-lg: 0 16px 40px hsla(0, 0%, 0%, 0.6);
@@ -363,4 +420,4 @@ a:hover { text-decoration-color: currentColor; }
 .bg-1           { background: var(--bg); }
 .bg-2           { background: var(--bg-secondary); }
 .bg-component   { background: var(--component-bg); }
-.bg-yellow      { background: var(--yellow-solid); color: #000; }
+.bg-yellow      { background: var(--yellow-solid); color: var(--primary-foreground); }

package/dist/figma/putio.tokens.json

@@ -4,12 +4,12 @@
       "primary": {
         "background": {
           "$type": "color",
-          "$value": "#FDCE45",
+          "$value": "hsl(44.7, 97.9%, 63.1%)",
           "$description": "Primary command background."
         },
         "foreground": {
           "$type": "color",
-          "$value": "#0A0A0A",
+          "$value": "hsl(0, 0%, 4.0%)",
           "$description": "Text or icon color on the yellow primary button."
         },
         "radius": {
@@ -31,7 +31,7 @@
     "input": {
       "background": {
         "$type": "color",
-        "$value": "white"
+        "$value": "hsl(0, 0%, 100%)"
       },
       "border": {
         "$type": "color",
@@ -53,7 +53,7 @@
       },
       "icon": {
         "$type": "color",
-        "$value": "#FDCE45"
+        "$value": "hsl(44.7, 97.9%, 63.1%)"
       }
     },
     "notification": {
@@ -71,8 +71,8 @@
     "brand": {
       "yellow": {
         "$type": "color",
-        "$value": "#FDCE45",
-        "$description": "Sacred put.io brand yellow. Do not change or tint."
+        "$value": "hsl(44.7, 97.9%, 63.1%)",
+        "$description": "Sacred put.io brand yellow (canonical hex #FDCE45). Do not change or tint."
       }
     },
     "neutral": {
@@ -267,7 +267,7 @@
         },
         "solidHover": {
           "$type": "color",
-          "$value": "#FDCE45"
+          "$value": "hsl(44.7, 97.9%, 63.1%)"
         },
         "textSecondary": {
           "$type": "color",
@@ -508,11 +508,11 @@
       },
       "appBg": {
         "$type": "color",
-        "$value": "white"
+        "$value": "hsl(0, 0%, 100%)"
       },
       "navBg": {
         "$type": "color",
-        "$value": "white"
+        "$value": "hsl(0, 0%, 100%)"
       },
       "navItemBg": {
         "$type": "color",
@@ -548,7 +548,7 @@
       },
       "segmentedControlBgActive": {
         "$type": "color",
-        "$value": "white"
+        "$value": "hsl(0, 0%, 100%)"
       },
       "transferListItemCompletingBg": {
         "$type": "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.foreground" | "component.button.primary.radius" | "component.button.secondary.background" | "component.button.secondary.backgroundDark" | "component.button.secondary.foreground" | "component.button.secondary.foregroundDark" | "component.input.background" | "component.input.backgroundDark" | "component.input.border" | "component.input.borderDark" | "component.input.radius" | "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" | "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.foreground" | "component.button.primary.radius" | "component.button.secondary.background" | "component.button.secondary.backgroundDark" | "component.button.secondary.foreground" | "component.button.secondary.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.solidForeground" | "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 PutioToken = {
   readonly cssName: string;