@putdotio/design 1.5.1 → 2.0.0

package/DESIGN.md

@@ -104,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": {