@putdotio/design 1.5.0 → 2.0.0

package/DESIGN.md

@@ -76,7 +76,9 @@ Dark app surfaces are the default product mode, but the token contract includes
 
 Use GT America for product UI and display. Berkeley Mono is the single mono face: numerics, timestamps, file sizes, ETAs, counts, code, logs, identifiers, hashes, magnet URIs, and filenames. Its tabular figures keep metadata columns aligned, so pair it with `font-variant-numeric: tabular-nums` wherever numbers sit in a column.
 
-The mono role is web and mobile only. TV surfaces have no mono face — 10-foot numerics render in GT America with tabular figures.
+The mono role is web and mobile only. TV surfaces have no mono face — 10-foot numerics render in GT America, and should ask for its tabular figures wherever a number ticks or sits in a column. GT America Standard carries `tnum`, so any platform that can select OpenType features can honour this: web through `font-variant-numeric: tabular-nums`, React Native through the same font feature settings. Platforms that cannot select features get the default proportional figures, where `1` is 399/1000 em against `0` at 636, so a running timecode visibly reflows. Roku is the current example — its SceneGraph `Font` node accepts only a `uri` and a `size` — so budget 10-foot numeric layouts for proportional figures rather than assuming the columns line up.
+
+GT America is a Latin face: 523 codepoints covering Western and Central European Latin plus Turkish, with no Cyrillic, Greek, CJK, Arabic, Hebrew, Thai, or Hangul, and no dingbats — no `U+2713 ✓`, `U+2714`, `U+25B6 ▶`, or `U+2605 ★`. Two rules follow. Symbols are always icons, never text glyphs, because a checkmark typed as text renders as nothing. And because put.io shows raw filenames, user content routinely arrives outside that coverage: keep a fallback family behind GT America for any text that can hold a filename. Web gets this for free — `"GT America", sans-serif` falls back per glyph — so the gap is invisible there and shows up on platforms that resolve one font per label with no per-glyph fallback, where uncovered characters become `.notdef` boxes. Treat a platform's fallback story for content text as part of adopting the face, not an afterthought.
 
 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.
 
@@ -102,7 +104,15 @@ TV is the exception: every 10-foot surface — list rows, buttons, sheets, cards
 
 ## Components
 
-Buttons use yellow only for primary commands. Primary buttons use `--button-primary-bg` at rest and `--button-primary-bg-hover` on hover so the CTA never feels inert. 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.
+Buttons have three tiers on one axis: emphasis. **Primary** is the brand fill — `--button-primary-bg` at rest, `--button-primary-bg-hover` on hover so the CTA never feels inert, label `--button-primary-fg`. Yellow is reserved for primary commands, and an action group carries at most one. **Secondary** is a quiet fill: `--button-default-bg` (aliased as `--button-secondary-bg`) plus a border at `--border`, with hover stepping both (`--button-default-bg-hover`, `--border-hover`). Because it fills, it reads to a hard edge exactly like the primary, so the two compare safely side by side. **Ghost** is text only — no fill, no border. `--button-ghost-fg` at rest; hover paints `--button-ghost-bg-hover` behind the label and lifts it to `--button-ghost-fg-hover`. The label lift is mandatory: the faint fill is never the only hover cue. Disabled drops the colour to `--solid` at full opacity rather than fading the box. Use ghost for anything quieter than a filled secondary — a header `Log in`, toolbar text actions, `Cancel` beside a filled confirm. An icon-only ghost is the quiet icon button, on the same tokens.
+
+Outline is not a tier. The system ships no transparent-background bordered button, and consumers must not hand-roll one. The pairing rule behind that: never place a border-only button in the same action group as a solid fill. At identical box heights the outlined shape reads smaller, because a solid resolves to a hard edge while a low-contrast hairline resolves to a soft one, and the eye compares the two extents differently. It is worst on dark surfaces, where a 15%-white hairline is barely visible at all. If a bordered treatment must sit near a fill, it must itself fill — the secondary tier — and carry its border at `--border`-step contrast, never a sub-20% hairline on transparent.
+
+Button geometry is tokenized so every tier and variant of a given size shares an identical box; tiers change colour only, which makes cross-variant comparison safe by construction. There are four sizes and no others. The default is `36px` tall with `12px` of horizontal padding, an `--fs-sm` uppercase label and `1px` of tracking; `md` is `32px` at `0.8px` tracking, `sm` is `28px` at `0.6px`, and `xs` is `24px` with `8px` padding, an `--fs-xs` label and `0.3px` tracking. Read them from `--button-height` (`-md`, `-sm`, `-xs`), `--button-padding-x` (`-xs`), `--button-label-size` (`-xs`), `--button-tracking` (`-md`, `-sm`, `-xs`), `--button-icon-size` and `--button-gap` rather than restating the numbers. Every button token aliases the neutral scale, which carries both modes, so a dark bar on a light page is a `.dark`-scoped region and never hand-picked dark literals. The sticky site top bar is `--nav-height` (`56px`), or `--nav-height-compact` (`52px`) on narrow viewports, and its CTA is the `md` box via `--nav-cta-height`.
+
+TV needs no carve-out here: TV buttons keep the `tv` scale box and `--radius-tv`, and TV focus restores a visible box (`--component-bg-active` plus a border step), so the ghost tier stays legible in the 10-foot focus model.
+
+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.
 

package/dist/css/tokens.css

@@ -11,6 +11,7 @@
   --button-primary-bg-hover: hsl(45, 89%, 58%);
   --button-secondary-bg: hsl(0, 0%, 95.1%);
   --button-secondary-fg: hsl(0, 0%, 9.0%);
+  --button-secondary-bg-hover: hsl(0, 0%, 93.0%);
   --button-success-bg: hsl(151, 55%, 41.5%);
   --button-success-bg-hover: hsl(151, 58%, 37%);
   --button-danger-bg: hsl(358, 75%, 59%);
@@ -21,6 +22,9 @@
   --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%);
+  --button-ghost-fg: hsl(0, 0%, 43.5%);
+  --button-ghost-fg-hover: hsl(0, 0%, 9.0%);
+  --button-ghost-bg-hover: hsl(0, 0%, 93.0%);
   --input-bg: hsl(0, 0%, 100%);
   --input-border: hsl(0, 0%, 85.8%);
   --input-border-hover: hsl(0, 0%, 78.0%);
@@ -166,6 +170,24 @@
   --button-radius: 6px;
   --button-success-fg: hsl(0, 0%, 100%);
   --button-danger-fg: hsl(0, 0%, 100%);
+  --button-ghost-bg: hsla(0, 0%, 0%, 0);
+  --button-height: 36px;
+  --button-height-md: 32px;
+  --button-height-sm: 28px;
+  --button-height-xs: 24px;
+  --button-padding-x: 12px;
+  --button-padding-x-xs: 8px;
+  --button-label-size: 0.875rem;
+  --button-label-size-xs: 0.75rem;
+  --button-tracking: 1px;
+  --button-tracking-md: 0.8px;
+  --button-tracking-sm: 0.6px;
+  --button-tracking-xs: 0.3px;
+  --button-icon-size: 14px;
+  --button-gap: 8px;
+  --nav-height: 56px;
+  --nav-height-compact: 52px;
+  --nav-cta-height: 32px;
   --input-radius: 6px;
   --field-radius: 6px;
   --panel-radius: 10px;
@@ -250,6 +272,7 @@
   --button-primary-bg-hover: hsl(45, 89%, 58%);
   --button-secondary-bg: hsl(0, 0%, 13.6%);
   --button-secondary-fg: hsl(0, 0%, 93.0%);
+  --button-secondary-bg-hover: hsl(0, 0%, 15.8%);
   --button-success-bg: hsl(151, 55%, 41.5%);
   --button-success-bg-hover: hsl(151, 68%, 35%);
   --button-danger-bg: hsl(358, 75%, 59%);
@@ -260,6 +283,9 @@
   --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%);
+  --button-ghost-fg: hsl(0, 0%, 62.8%);
+  --button-ghost-fg-hover: hsl(0, 0%, 93.0%);
+  --button-ghost-bg-hover: hsl(0, 0%, 15.8%);
   --input-bg: hsl(0, 0%, 8.5%);
   --input-border: hsl(0, 0%, 24.3%);
   --input-border-hover: hsl(0, 0%, 31.2%);

package/dist/figma/putio.tokens.json

@@ -30,6 +30,11 @@
         "foreground": {
           "$type": "color",
           "$value": "hsl(0, 0%, 9.0%)"
+        },
+        "backgroundHover": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 93.0%)",
+          "$description": "Secondary quiet-fill hover in light mode."
         }
       },
       "success": {
@@ -99,6 +104,115 @@
           "$value": "hsl(0, 0%, 9.0%)",
           "$description": "Default button label in light mode."
         }
+      },
+      "ghost": {
+        "background": {
+          "$type": "color",
+          "$value": "hsla(0, 0%, 0%, 0)",
+          "$description": "Ghost tier rests with no fill and no border."
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 43.5%)",
+          "$description": "Ghost label at rest in light mode."
+        },
+        "foregroundHover": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 9.0%)",
+          "$description": "Ghost label on hover in light mode. The lift is mandatory."
+        },
+        "backgroundHover": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 93.0%)",
+          "$description": "Shared quiet-fill hover step in light mode."
+        }
+      },
+      "height": {
+        "$type": "dimension",
+        "$value": "36px",
+        "$description": "Default (lg) button box."
+      },
+      "heightMd": {
+        "$type": "dimension",
+        "$value": "32px",
+        "$description": "Medium button box. The site top-bar CTA size."
+      },
+      "heightSm": {
+        "$type": "dimension",
+        "$value": "28px",
+        "$description": "Small button box."
+      },
+      "heightXs": {
+        "$type": "dimension",
+        "$value": "24px",
+        "$description": "Extra-small button box."
+      },
+      "paddingX": {
+        "$type": "dimension",
+        "$value": "12px",
+        "$description": "Horizontal padding for lg, md and sm."
+      },
+      "paddingXXs": {
+        "$type": "dimension",
+        "$value": "8px",
+        "$description": "Horizontal padding at xs."
+      },
+      "labelSize": {
+        "$type": "dimension",
+        "$value": "0.875rem",
+        "$description": "Uppercase label size."
+      },
+      "labelSizeXs": {
+        "$type": "dimension",
+        "$value": "0.75rem",
+        "$description": "Uppercase label size at xs."
+      },
+      "tracking": {
+        "$type": "dimension",
+        "$value": "1px",
+        "$description": "Letter-spacing at lg."
+      },
+      "trackingMd": {
+        "$type": "dimension",
+        "$value": "0.8px",
+        "$description": "Letter-spacing at md."
+      },
+      "trackingSm": {
+        "$type": "dimension",
+        "$value": "0.6px",
+        "$description": "Letter-spacing at sm."
+      },
+      "trackingXs": {
+        "$type": "dimension",
+        "$value": "0.3px",
+        "$description": "Letter-spacing at xs."
+      },
+      "iconSize": {
+        "$type": "dimension",
+        "$value": "14px",
+        "$description": "Glyph size inside a button."
+      },
+      "gap": {
+        "$type": "dimension",
+        "$value": "8px",
+        "$description": "Gap between glyph and label."
+      }
+    },
+    "nav": {
+      "height": {
+        "$type": "dimension",
+        "$value": "56px",
+        "$description": "Sticky top bar height."
+      },
+      "heightCompact": {
+        "$type": "dimension",
+        "$value": "52px",
+        "$description": "Sticky top bar height on narrow viewports."
+      },
+      "ctaHeight": {
+        "$type": "dimension",
+        "$value": "32px",
+        "$description": "The top-bar CTA box. Always the md button."
       }
     },
     "input": {

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.background" | "component.button.info.backgroundDark" | "component.button.info.backgroundHover" | "component.button.info.backgroundHoverDark" | "component.button.info.foreground" | "component.button.info.foregroundDark" | "component.button.default.background" | "component.button.default.backgroundDark" | "component.button.default.backgroundHover" | "component.button.default.backgroundHoverDark" | "component.button.default.foreground" | "component.button.default.foregroundDark" | "component.input.background" | "component.input.backgroundDark" | "component.input.border" | "component.input.borderDark" | "component.input.radius" | "component.input.borderHover" | "component.input.borderHoverDark" | "component.input.borderFocus" | "component.input.borderFocusDark" | "component.input.ring" | "component.input.ringDark" | "component.input.text" | "component.input.textDark" | "component.input.placeholder" | "component.input.placeholderDark" | "component.field.background" | "component.field.backgroundDark" | "component.field.backgroundDisabled" | "component.field.backgroundDisabledDark" | "component.field.border" | "component.field.borderDark" | "component.field.borderHover" | "component.field.borderHoverDark" | "component.field.borderFocus" | "component.field.borderFocusDark" | "component.field.text" | "component.field.textDark" | "component.field.placeholder" | "component.field.placeholderDark" | "component.field.radius" | "component.field.ring" | "component.field.ringDark" | "component.panel.background" | "component.panel.backgroundDark" | "component.panel.border" | "component.panel.borderDark" | "component.panel.radius" | "component.panel.shadow" | "component.panel.shadowDark" | "component.alias.background" | "component.alias.backgroundDark" | "component.alias.foreground" | "component.alias.foregroundDark" | "component.alias.foregroundMuted" | "component.alias.foregroundMutedDark" | "component.alias.primary" | "component.alias.primaryForeground" | "component.alias.success" | "component.alias.successDark" | "component.alias.successForeground" | "component.alias.destructive" | "component.alias.destructiveDark" | "component.alias.destructiveForeground" | "component.alias.invertForeground" | "component.alias.invertForegroundDark" | "component.alias.solidForeground" | "component.alias.solidForegroundDark" | "component.alias.muted" | "component.alias.mutedDark" | "component.alias.mutedForeground" | "component.alias.mutedForegroundDark" | "component.alias.accent" | "component.alias.accentDark" | "component.alias.accentForeground" | "component.alias.accentForegroundDark" | "component.alias.card" | "component.alias.cardDark" | "component.alias.cardForeground" | "component.alias.cardForegroundDark" | "component.alias.popover" | "component.alias.popoverDark" | "component.alias.popoverForeground" | "component.alias.popoverForegroundDark" | "component.alias.input" | "component.alias.inputDark" | "component.alias.ring" | "component.fileRow.background" | "component.fileRow.backgroundDark" | "component.fileRow.hoverBackground" | "component.fileRow.hoverBackgroundDark" | "component.fileRow.activeBackground" | "component.fileRow.activeBackgroundDark" | "component.fileRow.border" | "component.fileRow.borderDark" | "component.fileRow.icon" | "component.notification.infoBackground" | "component.notification.infoBackgroundDark" | "component.notification.dangerBackground" | "component.notification.dangerBackgroundDark" | "component.notification.background" | "component.notification.backgroundDark" | "component.notification.border" | "component.notification.borderDark" | "component.notification.foreground" | "component.notification.foregroundDark" | "component.notification.icon" | "component.notification.iconDark" | "component.notification.successBackground" | "component.notification.successBackgroundDark" | "component.notification.successBorder" | "component.notification.successBorderDark" | "component.notification.successForeground" | "component.notification.successForegroundDark" | "component.notification.dangerBorder" | "component.notification.dangerBorderDark" | "component.notification.dangerForeground" | "component.notification.dangerForegroundDark" | "component.menu.background" | "component.menu.backgroundDark" | "component.menu.border" | "component.menu.borderDark" | "component.menu.radius" | "component.menu.shadow" | "component.menu.shadowDark" | "component.menu.itemBackgroundHover" | "component.menu.itemBackgroundHoverDark" | "component.menu.itemText" | "component.menu.itemTextDark" | "component.menu.itemIcon" | "component.menu.itemIconDark" | "component.menu.itemShortcut" | "component.menu.itemShortcutDark" | "component.menu.itemDangerText" | "component.menu.itemDangerTextDark" | "component.menu.itemDangerBackgroundHover" | "component.menu.itemDangerBackgroundHoverDark" | "component.menu.itemHeight" | "component.menu.separator" | "component.menu.separatorDark" | "component.menu.label" | "component.menu.labelDark" | "component.palette.background" | "component.palette.backgroundDark" | "component.palette.border" | "component.palette.borderDark" | "component.palette.shadow" | "component.palette.shadowDark" | "component.palette.scrim" | "component.palette.scrimDark" | "component.palette.width" | "component.palette.inputHeight" | "component.palette.itemHeight" | "component.palette.itemBackgroundActive" | "component.palette.itemBackgroundActiveDark" | "component.palette.groupLabel" | "component.palette.groupLabelDark" | "component.palette.itemMeta" | "component.palette.itemMetaDark" | "component.sheet.background" | "component.sheet.backgroundDark" | "component.sheet.border" | "component.sheet.borderDark" | "component.sheet.shadow" | "component.sheet.shadowDark" | "component.sheet.scrim" | "component.sheet.scrimDark" | "component.sheet.width" | "context.tv.text.primary" | "context.tv.text.secondary" | "context.tv.text.tertiary" | "context.tv.channelArt.production.posterBackground" | "context.tv.channelArt.production.splashBackground" | "context.tv.channelArt.development.background" | "context.tv.channelArt.development.accent" | "context.tv.channelArt.development.grid" | "context.tv.channelArt.lab.background" | "context.tv.channelArt.lab.foreground" | "context.tv.channelArt.lab.accent" | "tv.text.heading" | "tv.text.label" | "tv.text.body" | "tv.text.caption" | "tv.text.smol" | "tv.fontWeight.regular" | "tv.fontWeight.medium" | "tv.space.xxs" | "tv.space.xs" | "tv.space.sm" | "tv.space.md" | "tv.space.lg" | "tv.space.xl" | "tv.space.xxl" | "tv.overscan.x" | "tv.overscan.y" | "tv.radius" | "tv.z.modal" | "tv.z.toast" | "tv.z.overlay" | "color.brand.yellow" | "color.neutral.light.bg" | "color.neutral.light.bgSecondary" | "color.neutral.light.componentBg" | "color.neutral.light.componentBgHover" | "color.neutral.light.componentBgActive" | "color.neutral.light.line" | "color.neutral.light.border" | "color.neutral.light.borderHover" | "color.neutral.light.solid" | "color.neutral.light.solidHover" | "color.neutral.light.textSecondary" | "color.neutral.light.text" | "color.neutral.dark.bg" | "color.neutral.dark.bgSecondary" | "color.neutral.dark.componentBg" | "color.neutral.dark.componentBgHover" | "color.neutral.dark.componentBgActive" | "color.neutral.dark.line" | "color.neutral.dark.border" | "color.neutral.dark.borderHover" | "color.neutral.dark.solid" | "color.neutral.dark.solidHover" | "color.neutral.dark.textSecondary" | "color.neutral.dark.text" | "color.green.light.bg" | "color.green.light.bgSecondary" | "color.green.light.componentBg" | "color.green.light.componentBgHover" | "color.green.light.componentBgActive" | "color.green.light.line" | "color.green.light.border" | "color.green.light.borderHover" | "color.green.light.solid" | "color.green.light.solidHover" | "color.green.light.textSecondary" | "color.green.light.text" | "color.green.dark.bg" | "color.green.dark.bgSecondary" | "color.green.dark.componentBg" | "color.green.dark.componentBgHover" | "color.green.dark.componentBgActive" | "color.green.dark.line" | "color.green.dark.border" | "color.green.dark.borderHover" | "color.green.dark.solid" | "color.green.dark.solidHover" | "color.green.dark.textSecondary" | "color.green.dark.text" | "color.red.light.bg" | "color.red.light.bgSecondary" | "color.red.light.componentBg" | "color.red.light.componentBgHover" | "color.red.light.componentBgActive" | "color.red.light.line" | "color.red.light.border" | "color.red.light.borderHover" | "color.red.light.solid" | "color.red.light.solidHover" | "color.red.light.textSecondary" | "color.red.light.text" | "color.red.dark.bg" | "color.red.dark.bgSecondary" | "color.red.dark.componentBg" | "color.red.dark.componentBgHover" | "color.red.dark.componentBgActive" | "color.red.dark.line" | "color.red.dark.border" | "color.red.dark.borderHover" | "color.red.dark.solid" | "color.red.dark.solidHover" | "color.red.dark.textSecondary" | "color.red.dark.text" | "color.yellow.light.bg" | "color.yellow.light.bgSecondary" | "color.yellow.light.componentBg" | "color.yellow.light.componentBgHover" | "color.yellow.light.componentBgActive" | "color.yellow.light.line" | "color.yellow.light.border" | "color.yellow.light.borderHover" | "color.yellow.light.solidHover" | "color.yellow.light.textSecondary" | "color.yellow.light.text" | "color.yellow.dark.bg" | "color.yellow.dark.bgSecondary" | "color.yellow.dark.componentBg" | "color.yellow.dark.componentBgHover" | "color.yellow.dark.componentBgActive" | "color.yellow.dark.line" | "color.yellow.dark.border" | "color.yellow.dark.borderHover" | "color.yellow.dark.solidHover" | "color.yellow.dark.textSecondary" | "color.yellow.dark.text" | "color.transfer.light.lime3" | "color.transfer.dark.lime3" | "elevation.shadowColor" | "elevation.color" | "elevation.sm" | "elevation.md" | "elevation.lg" | "elevation.focusColor" | "elevation.focus" | "typography.fontFamily.sans" | "typography.fontFamily.display" | "typography.fontFamily.mono" | "typography.fontSize.xs" | "typography.fontSize.sm" | "typography.fontSize.base" | "typography.fontSize.md" | "typography.fontSize.lg" | "typography.fontSize.xl" | "typography.fontSize.2xl" | "typography.fontSize.3xl" | "typography.fontSize.4xl" | "typography.fontSize.display" | "typography.lineHeight.tight" | "typography.lineHeight.snug" | "typography.lineHeight.normal" | "typography.lineHeight.loose" | "typography.fontWeight.regular" | "typography.fontWeight.medium" | "typography.fontWeight.bold" | "typography.fontWeight.black" | "typography.letterSpacing.tight" | "typography.letterSpacing.normal" | "typography.letterSpacing.wide" | "typography.letterSpacing.uppercase" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "radius.sm" | "radius.default" | "radius.md" | "radius.lg" | "radius.pill" | "radius.tv" | "border.width" | "motion.easing.out" | "motion.easing.inOut" | "motion.duration.fast" | "motion.duration.base" | "motion.duration.slow" | "z.dropdown" | "z.sticky" | "z.modal" | "z.notification" | "z.tooltip" | "breakpoint.sm" | "breakpoint.md" | "breakpoint.lg" | "surface.light.htmlBg" | "surface.light.appBg" | "surface.light.navBg" | "surface.light.navItemBg" | "surface.light.navItemBgHover" | "surface.light.navItemBgActive" | "surface.light.listItemBg" | "surface.light.listItemBgHover" | "surface.light.listItemBgActive" | "surface.light.listItemBorder" | "surface.light.segmentedControlBg" | "surface.light.segmentedControlBgActive" | "surface.light.transferListItemCompletingBg" | "surface.light.transferListItemDownloadingBg" | "surface.light.transferListItemFinishedBg" | "surface.light.transferListItemPassiveBg" | "surface.light.hiContrast" | "surface.light.loContrast" | "surface.light.transparent" | "surface.light.overlayInline" | "surface.light.overlayFull" | "surface.dark.htmlBg" | "surface.dark.appBg" | "surface.dark.navBg" | "surface.dark.navItemBg" | "surface.dark.navItemBgHover" | "surface.dark.navItemBgActive" | "surface.dark.listItemBg" | "surface.dark.listItemBgHover" | "surface.dark.listItemBgActive" | "surface.dark.listItemBorder" | "surface.dark.segmentedControlBg" | "surface.dark.segmentedControlBgActive" | "surface.dark.transferListItemCompletingBg" | "surface.dark.transferListItemDownloadingBg" | "surface.dark.transferListItemFinishedBg" | "surface.dark.transferListItemPassiveBg" | "surface.dark.hiContrast" | "surface.dark.loContrast" | "surface.dark.overlayInline" | "surface.dark.overlayFull" | "surface.dark.shadowColor" | "surface.dark.shadow" | "surface.dark.shadowSm" | "surface.dark.shadowMd" | "surface.dark.shadowLg";
+export type PutioTokenName = "component.button.primary.background" | "component.button.primary.backgroundHover" | "component.button.primary.backgroundHoverDark" | "component.button.primary.foreground" | "component.button.primary.radius" | "component.button.secondary.background" | "component.button.secondary.backgroundDark" | "component.button.secondary.foreground" | "component.button.secondary.foregroundDark" | "component.button.secondary.backgroundHover" | "component.button.secondary.backgroundHoverDark" | "component.button.success.background" | "component.button.success.backgroundDark" | "component.button.success.backgroundHover" | "component.button.success.backgroundHoverDark" | "component.button.success.foreground" | "component.button.danger.background" | "component.button.danger.backgroundDark" | "component.button.danger.backgroundHover" | "component.button.danger.backgroundHoverDark" | "component.button.danger.foreground" | "component.button.info.background" | "component.button.info.backgroundDark" | "component.button.info.backgroundHover" | "component.button.info.backgroundHoverDark" | "component.button.info.foreground" | "component.button.info.foregroundDark" | "component.button.default.background" | "component.button.default.backgroundDark" | "component.button.default.backgroundHover" | "component.button.default.backgroundHoverDark" | "component.button.default.foreground" | "component.button.default.foregroundDark" | "component.button.ghost.background" | "component.button.ghost.foreground" | "component.button.ghost.foregroundDark" | "component.button.ghost.foregroundHover" | "component.button.ghost.foregroundHoverDark" | "component.button.ghost.backgroundHover" | "component.button.ghost.backgroundHoverDark" | "component.button.height" | "component.button.heightMd" | "component.button.heightSm" | "component.button.heightXs" | "component.button.paddingX" | "component.button.paddingXXs" | "component.button.labelSize" | "component.button.labelSizeXs" | "component.button.tracking" | "component.button.trackingMd" | "component.button.trackingSm" | "component.button.trackingXs" | "component.button.iconSize" | "component.button.gap" | "component.nav.height" | "component.nav.heightCompact" | "component.nav.ctaHeight" | "component.input.background" | "component.input.backgroundDark" | "component.input.border" | "component.input.borderDark" | "component.input.radius" | "component.input.borderHover" | "component.input.borderHoverDark" | "component.input.borderFocus" | "component.input.borderFocusDark" | "component.input.ring" | "component.input.ringDark" | "component.input.text" | "component.input.textDark" | "component.input.placeholder" | "component.input.placeholderDark" | "component.field.background" | "component.field.backgroundDark" | "component.field.backgroundDisabled" | "component.field.backgroundDisabledDark" | "component.field.border" | "component.field.borderDark" | "component.field.borderHover" | "component.field.borderHoverDark" | "component.field.borderFocus" | "component.field.borderFocusDark" | "component.field.text" | "component.field.textDark" | "component.field.placeholder" | "component.field.placeholderDark" | "component.field.radius" | "component.field.ring" | "component.field.ringDark" | "component.panel.background" | "component.panel.backgroundDark" | "component.panel.border" | "component.panel.borderDark" | "component.panel.radius" | "component.panel.shadow" | "component.panel.shadowDark" | "component.alias.background" | "component.alias.backgroundDark" | "component.alias.foreground" | "component.alias.foregroundDark" | "component.alias.foregroundMuted" | "component.alias.foregroundMutedDark" | "component.alias.primary" | "component.alias.primaryForeground" | "component.alias.success" | "component.alias.successDark" | "component.alias.successForeground" | "component.alias.destructive" | "component.alias.destructiveDark" | "component.alias.destructiveForeground" | "component.alias.invertForeground" | "component.alias.invertForegroundDark" | "component.alias.solidForeground" | "component.alias.solidForegroundDark" | "component.alias.muted" | "component.alias.mutedDark" | "component.alias.mutedForeground" | "component.alias.mutedForegroundDark" | "component.alias.accent" | "component.alias.accentDark" | "component.alias.accentForeground" | "component.alias.accentForegroundDark" | "component.alias.card" | "component.alias.cardDark" | "component.alias.cardForeground" | "component.alias.cardForegroundDark" | "component.alias.popover" | "component.alias.popoverDark" | "component.alias.popoverForeground" | "component.alias.popoverForegroundDark" | "component.alias.input" | "component.alias.inputDark" | "component.alias.ring" | "component.fileRow.background" | "component.fileRow.backgroundDark" | "component.fileRow.hoverBackground" | "component.fileRow.hoverBackgroundDark" | "component.fileRow.activeBackground" | "component.fileRow.activeBackgroundDark" | "component.fileRow.border" | "component.fileRow.borderDark" | "component.fileRow.icon" | "component.notification.infoBackground" | "component.notification.infoBackgroundDark" | "component.notification.dangerBackground" | "component.notification.dangerBackgroundDark" | "component.notification.background" | "component.notification.backgroundDark" | "component.notification.border" | "component.notification.borderDark" | "component.notification.foreground" | "component.notification.foregroundDark" | "component.notification.icon" | "component.notification.iconDark" | "component.notification.successBackground" | "component.notification.successBackgroundDark" | "component.notification.successBorder" | "component.notification.successBorderDark" | "component.notification.successForeground" | "component.notification.successForegroundDark" | "component.notification.dangerBorder" | "component.notification.dangerBorderDark" | "component.notification.dangerForeground" | "component.notification.dangerForegroundDark" | "component.menu.background" | "component.menu.backgroundDark" | "component.menu.border" | "component.menu.borderDark" | "component.menu.radius" | "component.menu.shadow" | "component.menu.shadowDark" | "component.menu.itemBackgroundHover" | "component.menu.itemBackgroundHoverDark" | "component.menu.itemText" | "component.menu.itemTextDark" | "component.menu.itemIcon" | "component.menu.itemIconDark" | "component.menu.itemShortcut" | "component.menu.itemShortcutDark" | "component.menu.itemDangerText" | "component.menu.itemDangerTextDark" | "component.menu.itemDangerBackgroundHover" | "component.menu.itemDangerBackgroundHoverDark" | "component.menu.itemHeight" | "component.menu.separator" | "component.menu.separatorDark" | "component.menu.label" | "component.menu.labelDark" | "component.palette.background" | "component.palette.backgroundDark" | "component.palette.border" | "component.palette.borderDark" | "component.palette.shadow" | "component.palette.shadowDark" | "component.palette.scrim" | "component.palette.scrimDark" | "component.palette.width" | "component.palette.inputHeight" | "component.palette.itemHeight" | "component.palette.itemBackgroundActive" | "component.palette.itemBackgroundActiveDark" | "component.palette.groupLabel" | "component.palette.groupLabelDark" | "component.palette.itemMeta" | "component.palette.itemMetaDark" | "component.sheet.background" | "component.sheet.backgroundDark" | "component.sheet.border" | "component.sheet.borderDark" | "component.sheet.shadow" | "component.sheet.shadowDark" | "component.sheet.scrim" | "component.sheet.scrimDark" | "component.sheet.width" | "context.tv.text.primary" | "context.tv.text.secondary" | "context.tv.text.tertiary" | "context.tv.channelArt.production.posterBackground" | "context.tv.channelArt.production.splashBackground" | "context.tv.channelArt.development.background" | "context.tv.channelArt.development.accent" | "context.tv.channelArt.development.grid" | "context.tv.channelArt.lab.background" | "context.tv.channelArt.lab.foreground" | "context.tv.channelArt.lab.accent" | "tv.text.heading" | "tv.text.label" | "tv.text.body" | "tv.text.caption" | "tv.text.smol" | "tv.fontWeight.regular" | "tv.fontWeight.medium" | "tv.space.xxs" | "tv.space.xs" | "tv.space.sm" | "tv.space.md" | "tv.space.lg" | "tv.space.xl" | "tv.space.xxl" | "tv.overscan.x" | "tv.overscan.y" | "tv.radius" | "tv.z.modal" | "tv.z.toast" | "tv.z.overlay" | "color.brand.yellow" | "color.neutral.light.bg" | "color.neutral.light.bgSecondary" | "color.neutral.light.componentBg" | "color.neutral.light.componentBgHover" | "color.neutral.light.componentBgActive" | "color.neutral.light.line" | "color.neutral.light.border" | "color.neutral.light.borderHover" | "color.neutral.light.solid" | "color.neutral.light.solidHover" | "color.neutral.light.textSecondary" | "color.neutral.light.text" | "color.neutral.dark.bg" | "color.neutral.dark.bgSecondary" | "color.neutral.dark.componentBg" | "color.neutral.dark.componentBgHover" | "color.neutral.dark.componentBgActive" | "color.neutral.dark.line" | "color.neutral.dark.border" | "color.neutral.dark.borderHover" | "color.neutral.dark.solid" | "color.neutral.dark.solidHover" | "color.neutral.dark.textSecondary" | "color.neutral.dark.text" | "color.green.light.bg" | "color.green.light.bgSecondary" | "color.green.light.componentBg" | "color.green.light.componentBgHover" | "color.green.light.componentBgActive" | "color.green.light.line" | "color.green.light.border" | "color.green.light.borderHover" | "color.green.light.solid" | "color.green.light.solidHover" | "color.green.light.textSecondary" | "color.green.light.text" | "color.green.dark.bg" | "color.green.dark.bgSecondary" | "color.green.dark.componentBg" | "color.green.dark.componentBgHover" | "color.green.dark.componentBgActive" | "color.green.dark.line" | "color.green.dark.border" | "color.green.dark.borderHover" | "color.green.dark.solid" | "color.green.dark.solidHover" | "color.green.dark.textSecondary" | "color.green.dark.text" | "color.red.light.bg" | "color.red.light.bgSecondary" | "color.red.light.componentBg" | "color.red.light.componentBgHover" | "color.red.light.componentBgActive" | "color.red.light.line" | "color.red.light.border" | "color.red.light.borderHover" | "color.red.light.solid" | "color.red.light.solidHover" | "color.red.light.textSecondary" | "color.red.light.text" | "color.red.dark.bg" | "color.red.dark.bgSecondary" | "color.red.dark.componentBg" | "color.red.dark.componentBgHover" | "color.red.dark.componentBgActive" | "color.red.dark.line" | "color.red.dark.border" | "color.red.dark.borderHover" | "color.red.dark.solid" | "color.red.dark.solidHover" | "color.red.dark.textSecondary" | "color.red.dark.text" | "color.yellow.light.bg" | "color.yellow.light.bgSecondary" | "color.yellow.light.componentBg" | "color.yellow.light.componentBgHover" | "color.yellow.light.componentBgActive" | "color.yellow.light.line" | "color.yellow.light.border" | "color.yellow.light.borderHover" | "color.yellow.light.solidHover" | "color.yellow.light.textSecondary" | "color.yellow.light.text" | "color.yellow.dark.bg" | "color.yellow.dark.bgSecondary" | "color.yellow.dark.componentBg" | "color.yellow.dark.componentBgHover" | "color.yellow.dark.componentBgActive" | "color.yellow.dark.line" | "color.yellow.dark.border" | "color.yellow.dark.borderHover" | "color.yellow.dark.solidHover" | "color.yellow.dark.textSecondary" | "color.yellow.dark.text" | "color.transfer.light.lime3" | "color.transfer.dark.lime3" | "elevation.shadowColor" | "elevation.color" | "elevation.sm" | "elevation.md" | "elevation.lg" | "elevation.focusColor" | "elevation.focus" | "typography.fontFamily.sans" | "typography.fontFamily.display" | "typography.fontFamily.mono" | "typography.fontSize.xs" | "typography.fontSize.sm" | "typography.fontSize.base" | "typography.fontSize.md" | "typography.fontSize.lg" | "typography.fontSize.xl" | "typography.fontSize.2xl" | "typography.fontSize.3xl" | "typography.fontSize.4xl" | "typography.fontSize.display" | "typography.lineHeight.tight" | "typography.lineHeight.snug" | "typography.lineHeight.normal" | "typography.lineHeight.loose" | "typography.fontWeight.regular" | "typography.fontWeight.medium" | "typography.fontWeight.bold" | "typography.fontWeight.black" | "typography.letterSpacing.tight" | "typography.letterSpacing.normal" | "typography.letterSpacing.wide" | "typography.letterSpacing.uppercase" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "radius.sm" | "radius.default" | "radius.md" | "radius.lg" | "radius.pill" | "radius.tv" | "border.width" | "motion.easing.out" | "motion.easing.inOut" | "motion.duration.fast" | "motion.duration.base" | "motion.duration.slow" | "z.dropdown" | "z.sticky" | "z.modal" | "z.notification" | "z.tooltip" | "breakpoint.sm" | "breakpoint.md" | "breakpoint.lg" | "surface.light.htmlBg" | "surface.light.appBg" | "surface.light.navBg" | "surface.light.navItemBg" | "surface.light.navItemBgHover" | "surface.light.navItemBgActive" | "surface.light.listItemBg" | "surface.light.listItemBgHover" | "surface.light.listItemBgActive" | "surface.light.listItemBorder" | "surface.light.segmentedControlBg" | "surface.light.segmentedControlBgActive" | "surface.light.transferListItemCompletingBg" | "surface.light.transferListItemDownloadingBg" | "surface.light.transferListItemFinishedBg" | "surface.light.transferListItemPassiveBg" | "surface.light.hiContrast" | "surface.light.loContrast" | "surface.light.transparent" | "surface.light.overlayInline" | "surface.light.overlayFull" | "surface.dark.htmlBg" | "surface.dark.appBg" | "surface.dark.navBg" | "surface.dark.navItemBg" | "surface.dark.navItemBgHover" | "surface.dark.navItemBgActive" | "surface.dark.listItemBg" | "surface.dark.listItemBgHover" | "surface.dark.listItemBgActive" | "surface.dark.listItemBorder" | "surface.dark.segmentedControlBg" | "surface.dark.segmentedControlBgActive" | "surface.dark.transferListItemCompletingBg" | "surface.dark.transferListItemDownloadingBg" | "surface.dark.transferListItemFinishedBg" | "surface.dark.transferListItemPassiveBg" | "surface.dark.hiContrast" | "surface.dark.loContrast" | "surface.dark.overlayInline" | "surface.dark.overlayFull" | "surface.dark.shadowColor" | "surface.dark.shadow" | "surface.dark.shadowSm" | "surface.dark.shadowMd" | "surface.dark.shadowLg";
 
 export type PutioToken = {
   readonly cssName: string;

package/dist/tokens.dtcg.json

@@ -98,6 +98,28 @@
               "mode": "dark"
             }
           }
+        },
+        "backgroundHover": {
+          "$type": "color",
+          "$value": "{color.neutral.light.componentBgHover}",
+          "$description": "Secondary quiet-fill hover in light mode.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-secondary-bg-hover",
+              "mode": "light"
+            }
+          }
+        },
+        "backgroundHoverDark": {
+          "$type": "color",
+          "$value": "{color.neutral.dark.componentBgHover}",
+          "$description": "Secondary quiet-fill hover in dark mode.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-secondary-bg-hover",
+              "mode": "dark"
+            }
+          }
         }
       },
       "success": {
@@ -349,6 +371,275 @@
             }
           }
         }
+      },
+      "ghost": {
+        "background": {
+          "$type": "color",
+          "$value": "hsla(0, 0%, 0%, 0)",
+          "$description": "Ghost tier rests with no fill and no border.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-ghost-bg",
+              "mode": "global"
+            }
+          }
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.neutral.light.textSecondary}",
+          "$description": "Ghost label at rest in light mode.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-ghost-fg",
+              "mode": "light"
+            }
+          }
+        },
+        "foregroundDark": {
+          "$type": "color",
+          "$value": "{color.neutral.dark.textSecondary}",
+          "$description": "Ghost label at rest in dark mode.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-ghost-fg",
+              "mode": "dark"
+            }
+          }
+        },
+        "foregroundHover": {
+          "$type": "color",
+          "$value": "{color.neutral.light.text}",
+          "$description": "Ghost label on hover in light mode. The lift is mandatory.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-ghost-fg-hover",
+              "mode": "light"
+            }
+          }
+        },
+        "foregroundHoverDark": {
+          "$type": "color",
+          "$value": "{color.neutral.dark.text}",
+          "$description": "Ghost label on hover in dark mode. The lift is mandatory.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-ghost-fg-hover",
+              "mode": "dark"
+            }
+          }
+        },
+        "backgroundHover": {
+          "$type": "color",
+          "$value": "{color.neutral.light.componentBgHover}",
+          "$description": "Shared quiet-fill hover step in light mode.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-ghost-bg-hover",
+              "mode": "light"
+            }
+          }
+        },
+        "backgroundHoverDark": {
+          "$type": "color",
+          "$value": "{color.neutral.dark.componentBgHover}",
+          "$description": "Shared quiet-fill hover step in dark mode.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-ghost-bg-hover",
+              "mode": "dark"
+            }
+          }
+        }
+      },
+      "height": {
+        "$type": "dimension",
+        "$value": "36px",
+        "$description": "Default (lg) button box.",
+        "$extensions": {
+          "putio": {
+            "cssName": "button-height",
+            "mode": "global"
+          }
+        }
+      },
+      "heightMd": {
+        "$type": "dimension",
+        "$value": "32px",
+        "$description": "Medium button box. The site top-bar CTA size.",
+        "$extensions": {
+          "putio": {
+            "cssName": "button-height-md",
+            "mode": "global"
+          }
+        }
+      },
+      "heightSm": {
+        "$type": "dimension",
+        "$value": "28px",
+        "$description": "Small button box.",
+        "$extensions": {
+          "putio": {
+            "cssName": "button-height-sm",
+            "mode": "global"
+          }
+        }
+      },
+      "heightXs": {
+        "$type": "dimension",
+        "$value": "24px",
+        "$description": "Extra-small button box.",
+        "$extensions": {
+          "putio": {
+            "cssName": "button-height-xs",
+            "mode": "global"
+          }
+        }
+      },
+      "paddingX": {
+        "$type": "dimension",
+        "$value": "12px",
+        "$description": "Horizontal padding for lg, md and sm.",
+        "$extensions": {
+          "putio": {
+            "cssName": "button-padding-x",
+            "mode": "global"
+          }
+        }
+      },
+      "paddingXXs": {
+        "$type": "dimension",
+        "$value": "8px",
+        "$description": "Horizontal padding at xs.",
+        "$extensions": {
+          "putio": {
+            "cssName": "button-padding-x-xs",
+            "mode": "global"
+          }
+        }
+      },
+      "labelSize": {
+        "$type": "dimension",
+        "$value": "{typography.fontSize.sm}",
+        "$description": "Uppercase label size.",
+        "$extensions": {
+          "putio": {
+            "cssName": "button-label-size",
+            "mode": "global"
+          }
+        }
+      },
+      "labelSizeXs": {
+        "$type": "dimension",
+        "$value": "{typography.fontSize.xs}",
+        "$description": "Uppercase label size at xs.",
+        "$extensions": {
+          "putio": {
+            "cssName": "button-label-size-xs",
+            "mode": "global"
+          }
+        }
+      },
+      "tracking": {
+        "$type": "dimension",
+        "$value": "1px",
+        "$description": "Letter-spacing at lg.",
+        "$extensions": {
+          "putio": {
+            "cssName": "button-tracking",
+            "mode": "global"
+          }
+        }
+      },
+      "trackingMd": {
+        "$type": "dimension",
+        "$value": "0.8px",
+        "$description": "Letter-spacing at md.",
+        "$extensions": {
+          "putio": {
+            "cssName": "button-tracking-md",
+            "mode": "global"
+          }
+        }
+      },
+      "trackingSm": {
+        "$type": "dimension",
+        "$value": "0.6px",
+        "$description": "Letter-spacing at sm.",
+        "$extensions": {
+          "putio": {
+            "cssName": "button-tracking-sm",
+            "mode": "global"
+          }
+        }
+      },
+      "trackingXs": {
+        "$type": "dimension",
+        "$value": "0.3px",
+        "$description": "Letter-spacing at xs.",
+        "$extensions": {
+          "putio": {
+            "cssName": "button-tracking-xs",
+            "mode": "global"
+          }
+        }
+      },
+      "iconSize": {
+        "$type": "dimension",
+        "$value": "14px",
+        "$description": "Glyph size inside a button.",
+        "$extensions": {
+          "putio": {
+            "cssName": "button-icon-size",
+            "mode": "global"
+          }
+        }
+      },
+      "gap": {
+        "$type": "dimension",
+        "$value": "8px",
+        "$description": "Gap between glyph and label.",
+        "$extensions": {
+          "putio": {
+            "cssName": "button-gap",
+            "mode": "global"
+          }
+        }
+      }
+    },
+    "nav": {
+      "$description": "Sticky site/marketing top bar. Colours live in semantic surface.*.nav*.",
+      "height": {
+        "$type": "dimension",
+        "$value": "56px",
+        "$description": "Sticky top bar height.",
+        "$extensions": {
+          "putio": {
+            "cssName": "nav-height",
+            "mode": "global"
+          }
+        }
+      },
+      "heightCompact": {
+        "$type": "dimension",
+        "$value": "52px",
+        "$description": "Sticky top bar height on narrow viewports.",
+        "$extensions": {
+          "putio": {
+            "cssName": "nav-height-compact",
+            "mode": "global"
+          }
+        }
+      },
+      "ctaHeight": {
+        "$type": "dimension",
+        "$value": "{component.button.heightMd}",
+        "$description": "The top-bar CTA box. Always the md button.",
+        "$extensions": {
+          "putio": {
+            "cssName": "nav-cta-height",
+            "mode": "global"
+          }
+        }
       }
     },
     "input": {
@@ -2203,7 +2494,7 @@
       "caption": {
         "$type": "dimension",
         "$value": "32px",
-        "$description": "text.caption · GTAmerica-Rg. Row subline and button icons. TV has no mono face — the size subline renders in GT America with tabular figures, so the Berkeley Mono numeric rule is web and mobile only.",
+        "$description": "text.caption · GTAmerica-Rg. Row subline and button icons. TV has no mono face, so the Berkeley Mono numeric rule is web and mobile only: the size subline renders in GT America, asking for its tnum tabular figures where the platform can select OpenType features and accepting proportional figures where it cannot.",
         "$extensions": {
           "putio": {
             "cssName": "tv-text-caption",