@putdotio/design 2.0.2 → 3.1.0

package/dist/tokens.dtcg.json

@@ -1813,6 +1813,27 @@
             "mode": "dark"
           }
         }
+      },
+      "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.",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-badge-bg",
+            "mode": "global"
+          }
+        }
+      },
+      "badgeForeground": {
+        "$type": "color",
+        "$value": "{component.alias.destructiveForeground}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-badge-fg",
+            "mode": "global"
+          }
+        }
       }
     },
     "menu": {
@@ -2324,139 +2345,979 @@
           }
         }
       }
-    }
-  },
-  "context": {
-    "tv": {
-      "text": {
-        "$description": "TV uses two semantic text roles. The tertiary name remains as a deprecated alias of secondary so existing consumers keep working; TV text is solid.",
-        "primary": {
-          "$type": "color",
-          "$value": "{color.neutral.dark.text}",
-          "$description": "Row titles, modal option labels, and button labels.",
-          "$extensions": {
-            "putio": {
-              "cssName": "text-1",
-              "mode": "tv"
-            }
+    },
+    "avatar": {
+      "yellow": {
+        "$type": "color",
+        "$value": "{color.brand.yellow}",
+        "$description": "Initial-on-color avatar palette. Fixed in both modes; the chip carries its own contrast.",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-yellow",
+            "mode": "global"
           }
-        },
-        "secondary": {
-          "$type": "color",
-          "$value": "{color.neutral.dark.textSecondary}",
-          "$description": "Row sublines, modal titles, section headers, and accessories.",
-          "$extensions": {
-            "putio": {
-              "cssName": "text-2",
-              "mode": "tv"
-            }
+        }
+      },
+      "green": {
+        "$type": "color",
+        "$value": "hsl(151, 55%, 33%)",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-green",
+            "mode": "global"
           }
-        },
-        "tertiary": {
-          "$type": "color",
-          "$value": "{context.tv.text.secondary}",
-          "$description": "Deprecated compatibility alias. Use context.tv.text.secondary.",
-          "$extensions": {
-            "putio": {
-              "cssName": "text-3",
-              "mode": "tv",
-              "deprecated": true
-            }
+        }
+      },
+      "red": {
+        "$type": "color",
+        "$value": "hsl(358, 55%, 46%)",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-red",
+            "mode": "global"
           }
         }
       },
-      "channelArt": {
-        "production": {
-          "posterBackground": {
-            "$type": "color",
-            "$value": "hsl(0, 0%, 20%)",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-production-poster-bg",
-                "mode": "tv"
-              }
-            }
-          },
-          "splashBackground": {
-            "$type": "color",
-            "$value": "{color.neutral.dark.bg}",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-production-splash-bg",
-                "mode": "tv"
-              }
-            }
+      "blue": {
+        "$type": "color",
+        "$value": "hsl(211, 55%, 46%)",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-blue",
+            "mode": "global"
           }
-        },
-        "development": {
-          "background": {
-            "$type": "color",
-            "$value": "hsl(206.7, 78.8%, 52%)",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-development-bg",
-                "mode": "tv"
-              }
-            }
-          },
-          "accent": {
-            "$type": "color",
-            "$value": "hsl(206.3, 100%, 81.2%)",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-development-accent",
-                "mode": "tv"
-              }
-            }
-          },
-          "grid": {
-            "$type": "color",
-            "$value": "hsla(0, 0%, 100%, 0.18)",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-development-grid",
-                "mode": "tv"
-              }
-            }
+        }
+      },
+      "purple": {
+        "$type": "color",
+        "$value": "hsl(280, 48%, 46%)",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-purple",
+            "mode": "global"
           }
-        },
-        "lab": {
-          "background": {
-            "$type": "color",
-            "$value": "hsl(120, 20%, 4.9%)",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-lab-bg",
-                "mode": "tv"
-              }
-            }
-          },
-          "foreground": {
-            "$type": "color",
-            "$value": "hsl(111.1, 100%, 94.7%)",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-lab-fg",
-                "mode": "tv"
-              }
-            }
-          },
-          "accent": {
-            "$type": "color",
-            "$value": "hsl(110.6, 100%, 53.9%)",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-lab-accent",
-                "mode": "tv"
-              }
-            }
+        }
+      },
+      "teal": {
+        "$type": "color",
+        "$value": "hsl(168, 55%, 33%)",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-teal",
+            "mode": "global"
+          }
+        }
+      },
+      "orange": {
+        "$type": "color",
+        "$value": "hsl(28, 80%, 55%)",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-orange",
+            "mode": "global"
+          }
+        }
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{component.alias.destructiveForeground}",
+        "$description": "White initials — every palette entry except yellow and orange.",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-fg",
+            "mode": "global"
+          }
+        }
+      },
+      "foregroundWarm": {
+        "$type": "color",
+        "$value": "{component.alias.primaryForeground}",
+        "$description": "Warm dark initials on yellow and orange.",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-fg-warm",
+            "mode": "global"
           }
         }
       }
-    }
-  },
-  "tv": {
-    "$description": "The portable 10-foot scale. These mode \"tv\" tokens are graph data for platform adapters and are not emitted into web CSS; preview support CSS declares matching --tv-* properties under .tv. TV has no mono face, and its z-order is distinct from the web stack.",
+    },
+    "alert": {
+      "radius": {
+        "$type": "dimension",
+        "$value": "{radius.default}",
+        "$description": "Inline, in-page messaging. Persists until the condition clears — a toast does not.",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-radius",
+            "mode": "global"
+          }
+        }
+      },
+      "infoBackground": {
+        "$type": "color",
+        "$value": "{color.neutral.light.bgSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-bg",
+            "mode": "light"
+          }
+        }
+      },
+      "infoBackgroundDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.bgSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-bg",
+            "mode": "dark"
+          }
+        }
+      },
+      "infoBorder": {
+        "$type": "color",
+        "$value": "{color.neutral.light.line}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-border",
+            "mode": "light"
+          }
+        }
+      },
+      "infoBorderDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.line}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-border",
+            "mode": "dark"
+          }
+        }
+      },
+      "infoText": {
+        "$type": "color",
+        "$value": "{color.neutral.light.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-text",
+            "mode": "light"
+          }
+        }
+      },
+      "infoTextDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-text",
+            "mode": "dark"
+          }
+        }
+      },
+      "infoBody": {
+        "$type": "color",
+        "$value": "{color.neutral.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-body",
+            "mode": "light"
+          }
+        }
+      },
+      "infoBodyDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-body",
+            "mode": "dark"
+          }
+        }
+      },
+      "infoIcon": {
+        "$type": "color",
+        "$value": "{color.neutral.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-icon",
+            "mode": "light"
+          }
+        }
+      },
+      "infoIconDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-icon",
+            "mode": "dark"
+          }
+        }
+      },
+      "brandBackground": {
+        "$type": "color",
+        "$value": "{color.yellow.light.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-bg",
+            "mode": "light"
+          }
+        }
+      },
+      "brandBackgroundDark": {
+        "$type": "color",
+        "$value": "{color.yellow.dark.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-bg",
+            "mode": "dark"
+          }
+        }
+      },
+      "brandBorder": {
+        "$type": "color",
+        "$value": "{color.yellow.light.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-border",
+            "mode": "light"
+          }
+        }
+      },
+      "brandBorderDark": {
+        "$type": "color",
+        "$value": "{color.yellow.dark.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-border",
+            "mode": "dark"
+          }
+        }
+      },
+      "brandText": {
+        "$type": "color",
+        "$value": "{color.yellow.light.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-text",
+            "mode": "light"
+          }
+        }
+      },
+      "brandTextDark": {
+        "$type": "color",
+        "$value": "{color.yellow.dark.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-text",
+            "mode": "dark"
+          }
+        }
+      },
+      "brandBody": {
+        "$type": "color",
+        "$value": "{color.yellow.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-body",
+            "mode": "light"
+          }
+        }
+      },
+      "brandBodyDark": {
+        "$type": "color",
+        "$value": "{color.yellow.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-body",
+            "mode": "dark"
+          }
+        }
+      },
+      "brandIcon": {
+        "$type": "color",
+        "$value": "{color.yellow.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-icon",
+            "mode": "light"
+          }
+        }
+      },
+      "brandIconDark": {
+        "$type": "color",
+        "$value": "{color.yellow.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-icon",
+            "mode": "dark"
+          }
+        }
+      },
+      "successBackground": {
+        "$type": "color",
+        "$value": "{color.green.light.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-bg",
+            "mode": "light"
+          }
+        }
+      },
+      "successBackgroundDark": {
+        "$type": "color",
+        "$value": "{color.green.dark.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-bg",
+            "mode": "dark"
+          }
+        }
+      },
+      "successBorder": {
+        "$type": "color",
+        "$value": "{color.green.light.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-border",
+            "mode": "light"
+          }
+        }
+      },
+      "successBorderDark": {
+        "$type": "color",
+        "$value": "{color.green.dark.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-border",
+            "mode": "dark"
+          }
+        }
+      },
+      "successText": {
+        "$type": "color",
+        "$value": "{color.green.light.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-text",
+            "mode": "light"
+          }
+        }
+      },
+      "successTextDark": {
+        "$type": "color",
+        "$value": "{color.green.dark.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-text",
+            "mode": "dark"
+          }
+        }
+      },
+      "successBody": {
+        "$type": "color",
+        "$value": "{color.green.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-body",
+            "mode": "light"
+          }
+        }
+      },
+      "successBodyDark": {
+        "$type": "color",
+        "$value": "{color.green.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-body",
+            "mode": "dark"
+          }
+        }
+      },
+      "successIcon": {
+        "$type": "color",
+        "$value": "{color.green.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-icon",
+            "mode": "light"
+          }
+        }
+      },
+      "successIconDark": {
+        "$type": "color",
+        "$value": "{color.green.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-icon",
+            "mode": "dark"
+          }
+        }
+      },
+      "dangerBackground": {
+        "$type": "color",
+        "$value": "{color.red.light.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-bg",
+            "mode": "light"
+          }
+        }
+      },
+      "dangerBackgroundDark": {
+        "$type": "color",
+        "$value": "{color.red.dark.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-bg",
+            "mode": "dark"
+          }
+        }
+      },
+      "dangerBorder": {
+        "$type": "color",
+        "$value": "{color.red.light.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-border",
+            "mode": "light"
+          }
+        }
+      },
+      "dangerBorderDark": {
+        "$type": "color",
+        "$value": "{color.red.dark.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-border",
+            "mode": "dark"
+          }
+        }
+      },
+      "dangerText": {
+        "$type": "color",
+        "$value": "{color.red.light.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-text",
+            "mode": "light"
+          }
+        }
+      },
+      "dangerTextDark": {
+        "$type": "color",
+        "$value": "{color.red.dark.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-text",
+            "mode": "dark"
+          }
+        }
+      },
+      "dangerBody": {
+        "$type": "color",
+        "$value": "{color.red.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-body",
+            "mode": "light"
+          }
+        }
+      },
+      "dangerBodyDark": {
+        "$type": "color",
+        "$value": "{color.red.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-body",
+            "mode": "dark"
+          }
+        }
+      },
+      "dangerIcon": {
+        "$type": "color",
+        "$value": "{color.red.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-icon",
+            "mode": "light"
+          }
+        }
+      },
+      "dangerIconDark": {
+        "$type": "color",
+        "$value": "{color.red.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-icon",
+            "mode": "dark"
+          }
+        }
+      }
+    },
+    "slider": {
+      "track": {
+        "$type": "color",
+        "$value": "{color.neutral.light.componentBgActive}",
+        "$description": "Seek, volume, stepped numeric. The buffered band is what makes it a scrubber.",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-track",
+            "mode": "light"
+          }
+        }
+      },
+      "trackDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.componentBgActive}",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-track",
+            "mode": "dark"
+          }
+        }
+      },
+      "buffer": {
+        "$type": "color",
+        "$value": "{color.neutral.light.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-buffer",
+            "mode": "light"
+          }
+        }
+      },
+      "bufferDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-buffer",
+            "mode": "dark"
+          }
+        }
+      },
+      "fill": {
+        "$type": "color",
+        "$value": "{color.brand.yellow}",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-fill",
+            "mode": "global"
+          }
+        }
+      },
+      "knob": {
+        "$type": "color",
+        "$value": "{color.brand.yellow}",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-knob",
+            "mode": "global"
+          }
+        }
+      },
+      "fillDisabled": {
+        "$type": "color",
+        "$value": "{color.neutral.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-fill-disabled",
+            "mode": "light"
+          }
+        }
+      },
+      "fillDisabledDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-fill-disabled",
+            "mode": "dark"
+          }
+        }
+      },
+      "trackHeight": {
+        "$type": "dimension",
+        "$value": "4px",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-track-height",
+            "mode": "global"
+          }
+        }
+      },
+      "knobSize": {
+        "$type": "dimension",
+        "$value": "14px",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-knob-size",
+            "mode": "global"
+          }
+        }
+      },
+      "hitHeight": {
+        "$type": "dimension",
+        "$value": "20px",
+        "$description": "44px on touch — the knob grows, the track does not.",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-hit-height",
+            "mode": "global"
+          }
+        }
+      }
+    },
+    "pagination": {
+      "itemSize": {
+        "$type": "dimension",
+        "$value": "30px",
+        "$description": "Numbered paging. Load-more and infinite scroll carry no chrome of their own.",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-size",
+            "mode": "global"
+          }
+        }
+      },
+      "itemText": {
+        "$type": "color",
+        "$value": "{color.neutral.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-text",
+            "mode": "light"
+          }
+        }
+      },
+      "itemTextDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-text",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemTextActive": {
+        "$type": "color",
+        "$value": "{color.neutral.light.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-text-active",
+            "mode": "light"
+          }
+        }
+      },
+      "itemTextActiveDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-text-active",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemBackgroundHover": {
+        "$type": "color",
+        "$value": "{color.neutral.light.componentBgHover}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-bg-hover",
+            "mode": "light"
+          }
+        }
+      },
+      "itemBackgroundHoverDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.componentBgHover}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-bg-hover",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemBackgroundActive": {
+        "$type": "color",
+        "$value": "{color.neutral.light.componentBgActive}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-bg-active",
+            "mode": "light"
+          }
+        }
+      },
+      "itemBackgroundActiveDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.componentBgActive}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-bg-active",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemBorderActive": {
+        "$type": "color",
+        "$value": "{color.neutral.light.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-border-active",
+            "mode": "light"
+          }
+        }
+      },
+      "itemBorderActiveDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-border-active",
+            "mode": "dark"
+          }
+        }
+      }
+    }
+  },
+  "context": {
+    "tv": {
+      "text": {
+        "$description": "TV uses two semantic text roles. The tertiary name remains as a deprecated alias of secondary so existing consumers keep working; TV text is solid.",
+        "primary": {
+          "$type": "color",
+          "$value": "{color.neutral.dark.text}",
+          "$description": "Row titles, modal option labels, and button labels.",
+          "$extensions": {
+            "putio": {
+              "cssName": "text-1",
+              "mode": "tv"
+            }
+          }
+        },
+        "secondary": {
+          "$type": "color",
+          "$value": "{color.neutral.dark.textSecondary}",
+          "$description": "Row sublines, modal titles, section headers, and accessories.",
+          "$extensions": {
+            "putio": {
+              "cssName": "text-2",
+              "mode": "tv"
+            }
+          }
+        },
+        "tertiary": {
+          "$type": "color",
+          "$value": "{context.tv.text.secondary}",
+          "$description": "Deprecated compatibility alias. Use context.tv.text.secondary.",
+          "$extensions": {
+            "putio": {
+              "cssName": "text-3",
+              "mode": "tv",
+              "deprecated": true
+            }
+          }
+        }
+      },
+      "channelArt": {
+        "production": {
+          "posterBackground": {
+            "$type": "color",
+            "$value": "hsl(0, 0%, 20%)",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-production-poster-bg",
+                "mode": "tv"
+              }
+            }
+          },
+          "splashBackground": {
+            "$type": "color",
+            "$value": "{color.neutral.dark.bg}",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-production-splash-bg",
+                "mode": "tv"
+              }
+            }
+          }
+        },
+        "development": {
+          "background": {
+            "$type": "color",
+            "$value": "hsl(206.7, 78.8%, 52%)",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-development-bg",
+                "mode": "tv"
+              }
+            }
+          },
+          "accent": {
+            "$type": "color",
+            "$value": "hsl(206.3, 100%, 81.2%)",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-development-accent",
+                "mode": "tv"
+              }
+            }
+          },
+          "grid": {
+            "$type": "color",
+            "$value": "hsla(0, 0%, 100%, 0.18)",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-development-grid",
+                "mode": "tv"
+              }
+            }
+          }
+        },
+        "nightly": {
+          "$description": "Nightly/staging store-art flavor: TestFlight, Play internal/closed tracks, and staging TV sideloads. True-black sky with scattered stars; the mark stays exactly as production draws it, so the surface alone carries the flavor.",
+          "background": {
+            "$type": "color",
+            "$value": "hsl(0, 0%, 2%)",
+            "$description": "True black, one step past production charcoal; carries the star field so a staging build is unmistakable next to the shipping app.",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-nightly-bg",
+                "mode": "tv"
+              }
+            }
+          },
+          "accent": {
+            "$type": "color",
+            "$value": "{color.brand.yellow}",
+            "$description": "Unlike dev, nightly does not recolor the mark: the accent is the brand yellow and the retro wordmark keeps its yellow drop-shadow. Present so emitters can express the flavor as a complete set rather than a special case.",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-nightly-accent",
+                "mode": "tv"
+              }
+            }
+          },
+          "star": {
+            "$type": "color",
+            "$value": "hsl(0, 0%, 100%)",
+            "$description": "Star colour. Stars are scattered, never gridded: three sizes at roughly 36%, 62%, and 95% opacity with the faint ones dominating. Static — never animated, blurred, or glowing.",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-nightly-star",
+                "mode": "tv"
+              }
+            }
+          },
+          "moon": {
+            "$type": "color",
+            "$value": "{color.brand.yellow}",
+            "$description": "Full moon disc in the brand yellow, placed top-left. Its own token so a platform can place the moon without hard-coding the brand value.",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-nightly-moon",
+                "mode": "tv"
+              }
+            }
+          },
+          "moonCrater": {
+            "$type": "color",
+            "$value": "hsl(45, 82%, 56%)",
+            "$description": "Craters one step darker than the moon disc. Low contrast on purpose: texture at icon size, not holes.",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-nightly-moon-crater",
+                "mode": "tv"
+              }
+            }
+          }
+        },
+        "lab": {
+          "background": {
+            "$type": "color",
+            "$value": "hsl(120, 20%, 4.9%)",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-lab-bg",
+                "mode": "tv"
+              }
+            }
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "hsl(111.1, 100%, 94.7%)",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-lab-fg",
+                "mode": "tv"
+              }
+            }
+          },
+          "accent": {
+            "$type": "color",
+            "$value": "hsl(110.6, 100%, 53.9%)",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-lab-accent",
+                "mode": "tv"
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "tv": {
+    "$description": "The portable 10-foot scale. These mode \"tv\" tokens are graph data for platform adapters and are not emitted into web CSS; preview support CSS declares matching --tv-* properties under .tv. TV has no mono face, and its z-order is distinct from the web stack.",
+    "video": {
+      "$description": "On-video and hero-art plate colors. Fixed values by design: the video underneath does not change with the theme.",
+      "background": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 0%)",
+        "$description": "Letterbox / video plate. True black, not the app background.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-video-bg",
+            "mode": "tv"
+          }
+        }
+      },
+      "heroScrimTop": {
+        "$type": "color",
+        "$value": "hsl(30, 18.2%, 8.6%)",
+        "$description": "Top stop of the warm-black wash behind hero/poster art.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-hero-scrim-top",
+            "mode": "tv"
+          }
+        }
+      },
+      "heroScrimBottom": {
+        "$type": "color",
+        "$value": "hsl(30, 25%, 1.6%)",
+        "$description": "Bottom stop of the hero wash. Near-black but warm — never pure black, which reads blue next to the art.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-hero-scrim-bottom",
+            "mode": "tv"
+          }
+        }
+      },
+      "textOnVideo": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 100%)",
+        "$description": "Player chrome over video — always white, never a theme token.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-text-on-video",
+            "mode": "tv"
+          }
+        }
+      }
+    },
     "text": {
       "heading": {
         "$type": "dimension",