@putdotio/design 1.3.0 → 1.4.0

package/DESIGN.md

@@ -24,17 +24,17 @@ typography:
   ui:
     family: "\"GT America\", sans-serif"
     weight: 400
-    size: "0.875rem"
+    size: "1rem"
     lineHeight: 1.45
   display:
     family: "\"GT America\", sans-serif"
     weight: 900
-    size: "6rem"
+    size: "96px"
     lineHeight: 1.1
   mono:
     family: "\"Berkeley Mono\", \"GT America Mono\", monospace"
     weight: 400
-    size: "0.8125rem"
+    size: "0.875rem"
     lineHeight: 1.45
 rounded:
   sm: "4px"
@@ -78,12 +78,16 @@ Use GT America for product UI and display. Use GT America Mono for compact produ
 
 Body UI text should stay readable and dense. Use medium weight for labels and controls, bold weight only where the hierarchy earns it, and black weight for deliberate display moments.
 
+The root font-size is responsive like the product: 14px, stepping to 15px at the `--bp-lg` breakpoint. Body, labels, and inputs sit at `--fs-base` (1rem, equal to the root); captions and button labels sit at `--fs-sm` (0.875rem). The display tiers (`--fs-2xl`, `--fs-3xl`, `--fs-display`) are fixed pixel sizes and do not scale with the root.
+
 ## Layout & Spacing
 
 put.io layouts are file-browser layouts first: lists, rows, columns, sidebars, toolbars, and sheets. Prefer whitespace and subtle dividers before card-heavy composition.
 
 The spacing scale is intentionally steep: `4, 8, 16, 32, 64, 128, 256, 512`. Use it consistently rather than tuning one-off gaps.
 
+Stacking uses the token scale — `--z-dropdown` (1000), `--z-sticky` (1100), `--z-modal` (1300), `--z-notification` (1400), `--z-tooltip` (1500) — gapped for platform chrome; never invent z-index numbers. Breakpoints (`--bp-sm`/`--bp-md`/`--bp-lg` = 640/768/1280px) mirror the product's responsive tiers; CSS media queries cannot read custom properties, so write the literal pixels in `@media` and keep them in sync with the tokens.
+
 ## Elevation & Depth
 
 Elevation should clarify interaction, not decorate. Use borders and soft shadows for popovers, modals, menus, TV focus, and draggable/drop targets. Avoid decorative glow except where it is part of a focused TV state.
@@ -108,6 +112,6 @@ Do use Phosphor-style inline SVG for forward-looking icon guidance and no emoji
 
 Do keep `DESIGN.md`, `tokens/`, `dist/`, and `system/tokens.css` in agreement.
 
-Don't publish private research, local file paths, internal project links, screenshots, team photos, account data, discount strategy, or auth-gated workspace URLs in the public design repo.
+Don't publish private material in this public repo — the enumerated list lives in the repo's `docs/DISTRIBUTION.md` (Public Safety).
 
-Don't generate Swift, Kotlin, Android XML, or Roku outputs from this repo until a consuming platform repo asks for an adapter.
+Don't generate platform-native outputs (Swift, Kotlin, Android XML, Roku) from this repo — platform repos own their adapters. Policy in the repo's `docs/DISTRIBUTION.md`.

package/dist/css/tokens.css

@@ -15,7 +15,12 @@
   --button-success-bg-hover: hsl(151, 58%, 37%);
   --button-danger-bg: hsl(358, 75%, 59%);
   --button-danger-bg-hover: hsl(357, 66%, 53%);
+  --button-info-bg: hsl(0, 0%, 56.1%);
   --button-info-bg-hover: hsl(0, 0%, 52.3%);
+  --button-info-fg: hsl(0, 0%, 0%);
+  --button-default-bg: hsl(0, 0%, 95.1%);
+  --button-default-bg-hover: hsl(0, 0%, 93.0%);
+  --button-default-fg: hsl(0, 0%, 9.0%);
   --input-bg: hsl(0, 0%, 100%);
   --input-border: hsl(0, 0%, 85.8%);
   --field-bg: hsl(0, 0%, 100%);
@@ -144,15 +149,15 @@
   --font-ui-mono: "GT America Mono", monospace;
   --font-mono: "Berkeley Mono", "GT America Mono", monospace;
   --fs-xs: 0.75rem;
-  --fs-sm: 0.8125rem;
-  --fs-base: 0.875rem;
-  --fs-md: 1rem;
-  --fs-lg: 1.125rem;
-  --fs-xl: 1.5rem;
-  --fs-2xl: 2rem;
-  --fs-3xl: 3rem;
-  --fs-4xl: 4rem;
-  --fs-display: 6rem;
+  --fs-sm: 0.875rem;
+  --fs-base: 1rem;
+  --fs-md: 1.125rem;
+  --fs-lg: 1.5rem;
+  --fs-xl: 2rem;
+  --fs-2xl: 48px;
+  --fs-3xl: 64px;
+  --fs-4xl: 64px;
+  --fs-display: 96px;
   --lh-tight: 1.1;
   --lh-snug: 1.25;
   --lh-normal: 1.45;
@@ -185,6 +190,14 @@
   --dur-fast: 120ms;
   --dur-base: 200ms;
   --dur-slow: 320ms;
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-modal: 1300;
+  --z-notification: 1400;
+  --z-tooltip: 1500;
+  --bp-sm: 640px;
+  --bp-md: 768px;
+  --bp-lg: 1280px;
 }
 
 /* -- Dark (.dark) --------------------------------------------------- */
@@ -196,7 +209,12 @@
   --button-success-bg-hover: hsl(151, 68%, 35%);
   --button-danger-bg: hsl(358, 75%, 59%);
   --button-danger-bg-hover: hsl(357, 67%, 53%);
+  --button-info-bg: hsl(0, 0%, 43.9%);
   --button-info-bg-hover: hsl(0, 0%, 49.4%);
+  --button-info-fg: hsl(0, 0%, 100%);
+  --button-default-bg: hsl(0, 0%, 13.6%);
+  --button-default-bg-hover: hsl(0, 0%, 15.8%);
+  --button-default-fg: hsl(0, 0%, 93.0%);
   --input-bg: hsl(0, 0%, 8.5%);
   --input-border: hsl(0, 0%, 24.3%);
   --field-bg: hsl(0, 0%, 8.5%);
@@ -310,7 +328,7 @@ html {
   background: var(--html-bg);
   color: var(--text);
   font-family: var(--font-sans);
-  font-size: 15px;        /* 14–15 responsive base, per app convention */
+  font-size: 14px;  /* app.put.io root: fontSize ["14px","14px","15px"] — 15px at ≥ --bp-lg (media query below) */
   line-height: var(--lh-normal);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -322,6 +340,13 @@ body {
   margin: 0;
 }
 
+/* Root steps up on desktop, matching app.put.io's responsive base.
+   14px/15px literals must stay in sync with --bp-lg (media queries
+   can't read custom properties). */
+@media (min-width: 1280px) {
+  html { font-size: 15px; }
+}
+
 /* -- Semantic type ------------------------------------------------- */
 
 .h-display, h1.display {
@@ -343,7 +368,7 @@ body {
 
 h1, .h1 {
   font-family: var(--font-sans);
-  font-size: var(--fs-3xl);
+  font-size: var(--fs-xl);
   font-weight: var(--fw-bold);
   line-height: var(--lh-tight);
   letter-spacing: var(--tracking-tight);
@@ -352,7 +377,7 @@ h1, .h1 {
 
 h2, .h2 {
   font-family: var(--font-sans);
-  font-size: var(--fs-2xl);
+  font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
   line-height: var(--lh-tight);
   margin: 0 0 var(--space-3);
@@ -360,7 +385,7 @@ h2, .h2 {
 
 h3, .h3 {
   font-family: var(--font-sans);
-  font-size: var(--fs-xl);
+  font-size: var(--fs-md);
   font-weight: var(--fw-medium);
   line-height: var(--lh-snug);
   margin: 0 0 var(--space-2);
@@ -368,7 +393,7 @@ h3, .h3 {
 
 h4, .h4 {
   font-family: var(--font-sans);
-  font-size: var(--fs-lg);
+  font-size: var(--fs-base);
   font-weight: var(--fw-medium);
   line-height: var(--lh-snug);
   margin: 0 0 var(--space-2);
@@ -389,26 +414,26 @@ p, .body {
 }
 
 .lead {
-  font-size: var(--fs-lg);
+  font-size: var(--fs-md);
   font-weight: var(--fw-regular);
   line-height: var(--lh-normal);
   color: var(--text-secondary);
 }
 
 small, .caption {
-  font-size: var(--fs-xs);
+  font-size: var(--fs-sm);  /* production caption = fontSize 0 */
   color: var(--text-secondary);
 }
 
 .label {
-  font-size: var(--fs-sm);
+  font-size: var(--fs-base);  /* production label = fontSize 1, medium */
   font-weight: var(--fw-medium);
   color: var(--text);
 }
 
 .button-text {
   font-weight: var(--fw-medium);
-  font-size: var(--fs-base);
+  font-size: var(--fs-sm);  /* production button = fontSize 0 */
   letter-spacing: 0;
 }
 
@@ -427,16 +452,6 @@ a {
 }
 a:hover { text-decoration-color: currentColor; }
 
-/* -- Component-role aliases --------------------------------------- */
-/* Button default + info variants — live aliases; the DTCG layer doesn't define these two. */
-:root {
-  --button-default-bg:        var(--component-bg);
-  --button-default-bg-hover:  var(--component-bg-hover);
-  --button-default-fg:        var(--text);
-  --button-info-bg:           var(--solid);
-  --button-info-fg:           var(--solid-foreground);
-}
-
 /* -- Utility classes ---------------------------------------------- */
 .fg-1      { color: var(--text); }
 .fg-2      { color: var(--text-secondary); }
@@ -448,3 +463,16 @@ a:hover { text-decoration-color: currentColor; }
 .bg-2           { background: var(--bg-secondary); }
 .bg-component   { background: var(--component-bg); }
 .bg-yellow      { background: var(--yellow-solid); color: var(--primary-foreground); }
+
+/* -- Reduced motion ------------------------------------------------ */
+/* Honor the OS "reduce motion" setting: collapse transitions/animations
+   to near-instant and stop looping/auto-scrolling effects. Components
+   should not rely on motion to convey state. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

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."
         }
       }
     },
@@ -342,7 +369,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",
@@ -375,39 +403,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": {

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.field.background" | "component.field.backgroundDark" | "component.field.backgroundDisabled" | "component.field.backgroundDisabledDark" | "component.field.border" | "component.field.borderDark" | "component.field.borderHover" | "component.field.borderHoverDark" | "component.field.borderFocus" | "component.field.borderFocusDark" | "component.field.text" | "component.field.textDark" | "component.field.placeholder" | "component.field.placeholderDark" | "component.field.ring" | "component.field.ringDark" | "component.panel.background" | "component.panel.backgroundDark" | "component.panel.border" | "component.panel.borderDark" | "component.panel.radius" | "component.panel.shadow" | "component.panel.shadowDark" | "component.alias.background" | "component.alias.backgroundDark" | "component.alias.foreground" | "component.alias.foregroundDark" | "component.alias.foregroundMuted" | "component.alias.foregroundMutedDark" | "component.alias.primary" | "component.alias.primaryForeground" | "component.alias.success" | "component.alias.successDark" | "component.alias.successForeground" | "component.alias.destructive" | "component.alias.destructiveDark" | "component.alias.destructiveForeground" | "component.alias.invertForeground" | "component.alias.invertForegroundDark" | "component.alias.solidForeground" | "component.alias.solidForegroundDark" | "component.alias.muted" | "component.alias.mutedDark" | "component.alias.mutedForeground" | "component.alias.mutedForegroundDark" | "component.alias.accent" | "component.alias.accentDark" | "component.alias.accentForeground" | "component.alias.accentForegroundDark" | "component.alias.card" | "component.alias.cardDark" | "component.alias.cardForeground" | "component.alias.cardForegroundDark" | "component.alias.popover" | "component.alias.popoverDark" | "component.alias.popoverForeground" | "component.alias.popoverForegroundDark" | "component.alias.input" | "component.alias.inputDark" | "component.alias.ring" | "component.fileRow.background" | "component.fileRow.backgroundDark" | "component.fileRow.hoverBackground" | "component.fileRow.hoverBackgroundDark" | "component.fileRow.icon" | "component.notification.infoBackground" | "component.notification.infoBackgroundDark" | "component.notification.dangerBackground" | "component.notification.dangerBackgroundDark" | "context.tv.surface.0" | "context.tv.surface.1" | "context.tv.surface.2" | "context.tv.surface.3" | "context.tv.text.primary" | "context.tv.text.secondary" | "context.tv.text.tertiary" | "context.tv.glass.1" | "context.tv.glass.2" | "context.tv.glass.3" | "context.tv.glass.border" | "context.tv.glass.borderStrong" | "context.tv.focus.ring" | "context.tv.focus.liftShadow" | "context.tv.channelArt.production.posterBackground" | "context.tv.channelArt.production.splashBackground" | "context.tv.channelArt.development.background" | "context.tv.channelArt.development.accent" | "context.tv.channelArt.development.grid" | "context.tv.channelArt.lab.background" | "context.tv.channelArt.lab.foreground" | "context.tv.channelArt.lab.accent" | "color.brand.yellow" | "color.neutral.light.bg" | "color.neutral.light.bgSecondary" | "color.neutral.light.componentBg" | "color.neutral.light.componentBgHover" | "color.neutral.light.componentBgActive" | "color.neutral.light.line" | "color.neutral.light.border" | "color.neutral.light.borderHover" | "color.neutral.light.solid" | "color.neutral.light.solidHover" | "color.neutral.light.textSecondary" | "color.neutral.light.text" | "color.neutral.dark.bg" | "color.neutral.dark.bgSecondary" | "color.neutral.dark.componentBg" | "color.neutral.dark.componentBgHover" | "color.neutral.dark.componentBgActive" | "color.neutral.dark.line" | "color.neutral.dark.border" | "color.neutral.dark.borderHover" | "color.neutral.dark.solid" | "color.neutral.dark.solidHover" | "color.neutral.dark.textSecondary" | "color.neutral.dark.text" | "color.green.light.bg" | "color.green.light.bgSecondary" | "color.green.light.componentBg" | "color.green.light.componentBgHover" | "color.green.light.componentBgActive" | "color.green.light.line" | "color.green.light.border" | "color.green.light.borderHover" | "color.green.light.solid" | "color.green.light.solidHover" | "color.green.light.textSecondary" | "color.green.light.text" | "color.green.dark.bg" | "color.green.dark.bgSecondary" | "color.green.dark.componentBg" | "color.green.dark.componentBgHover" | "color.green.dark.componentBgActive" | "color.green.dark.line" | "color.green.dark.border" | "color.green.dark.borderHover" | "color.green.dark.solid" | "color.green.dark.solidHover" | "color.green.dark.textSecondary" | "color.green.dark.text" | "color.red.light.bg" | "color.red.light.bgSecondary" | "color.red.light.componentBg" | "color.red.light.componentBgHover" | "color.red.light.componentBgActive" | "color.red.light.line" | "color.red.light.border" | "color.red.light.borderHover" | "color.red.light.solid" | "color.red.light.solidHover" | "color.red.light.textSecondary" | "color.red.light.text" | "color.red.dark.bg" | "color.red.dark.bgSecondary" | "color.red.dark.componentBg" | "color.red.dark.componentBgHover" | "color.red.dark.componentBgActive" | "color.red.dark.line" | "color.red.dark.border" | "color.red.dark.borderHover" | "color.red.dark.solid" | "color.red.dark.solidHover" | "color.red.dark.textSecondary" | "color.red.dark.text" | "color.yellow.light.bg" | "color.yellow.light.bgSecondary" | "color.yellow.light.componentBg" | "color.yellow.light.componentBgHover" | "color.yellow.light.componentBgActive" | "color.yellow.light.line" | "color.yellow.light.border" | "color.yellow.light.borderHover" | "color.yellow.light.solidHover" | "color.yellow.light.textSecondary" | "color.yellow.light.text" | "color.yellow.dark.bg" | "color.yellow.dark.bgSecondary" | "color.yellow.dark.componentBg" | "color.yellow.dark.componentBgHover" | "color.yellow.dark.componentBgActive" | "color.yellow.dark.line" | "color.yellow.dark.border" | "color.yellow.dark.borderHover" | "color.yellow.dark.solidHover" | "color.yellow.dark.textSecondary" | "color.yellow.dark.text" | "color.transfer.light.lime3" | "color.transfer.dark.lime3" | "elevation.shadowColor" | "elevation.color" | "elevation.sm" | "elevation.md" | "elevation.lg" | "elevation.focusColor" | "elevation.focus" | "typography.fontFamily.sans" | "typography.fontFamily.display" | "typography.fontFamily.uiMono" | "typography.fontFamily.mono" | "typography.fontSize.xs" | "typography.fontSize.sm" | "typography.fontSize.base" | "typography.fontSize.md" | "typography.fontSize.lg" | "typography.fontSize.xl" | "typography.fontSize.2xl" | "typography.fontSize.3xl" | "typography.fontSize.4xl" | "typography.fontSize.display" | "typography.lineHeight.tight" | "typography.lineHeight.snug" | "typography.lineHeight.normal" | "typography.lineHeight.loose" | "typography.fontWeight.regular" | "typography.fontWeight.medium" | "typography.fontWeight.bold" | "typography.fontWeight.black" | "typography.letterSpacing.tight" | "typography.letterSpacing.normal" | "typography.letterSpacing.wide" | "typography.letterSpacing.uppercase" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "radius.sm" | "radius.default" | "radius.md" | "radius.lg" | "radius.pill" | "border.width" | "motion.easing.out" | "motion.easing.inOut" | "motion.duration.fast" | "motion.duration.base" | "motion.duration.slow" | "z.dropdown" | "z.sticky" | "z.modal" | "z.notification" | "z.tooltip" | "breakpoint.sm" | "breakpoint.md" | "breakpoint.lg" | "surface.light.htmlBg" | "surface.light.appBg" | "surface.light.navBg" | "surface.light.navItemBg" | "surface.light.navItemBgHover" | "surface.light.navItemBgActive" | "surface.light.listItemBg" | "surface.light.listItemBgHover" | "surface.light.listItemBgActive" | "surface.light.listItemBorder" | "surface.light.segmentedControlBg" | "surface.light.segmentedControlBgActive" | "surface.light.transferListItemCompletingBg" | "surface.light.transferListItemDownloadingBg" | "surface.light.transferListItemFinishedBg" | "surface.light.transferListItemPassiveBg" | "surface.light.hiContrast" | "surface.light.loContrast" | "surface.light.transparent" | "surface.light.overlayInline" | "surface.light.overlayFull" | "surface.dark.htmlBg" | "surface.dark.appBg" | "surface.dark.navBg" | "surface.dark.navItemBg" | "surface.dark.navItemBgHover" | "surface.dark.navItemBgActive" | "surface.dark.listItemBg" | "surface.dark.listItemBgHover" | "surface.dark.listItemBgActive" | "surface.dark.listItemBorder" | "surface.dark.segmentedControlBg" | "surface.dark.segmentedControlBgActive" | "surface.dark.transferListItemCompletingBg" | "surface.dark.transferListItemDownloadingBg" | "surface.dark.transferListItemFinishedBg" | "surface.dark.transferListItemPassiveBg" | "surface.dark.hiContrast" | "surface.dark.loContrast" | "surface.dark.overlayInline" | "surface.dark.overlayFull" | "surface.dark.shadowColor" | "surface.dark.shadow" | "surface.dark.shadowSm" | "surface.dark.shadowMd" | "surface.dark.shadowLg";
 
 export type PutioToken = {
   readonly cssName: string;