@putdotio/design 3.8.0 → 3.10.0

package/DESIGN.md

@@ -89,7 +89,7 @@ Tier 1, 3, and 4 cards are Components (put.io owns the recipe); tier 2 cards are
 - Berkeley Mono is the one mono face: numerics, timestamps, sizes, ETAs, counts, code, logs, identifiers, hashes, magnet URIs, filenames. Columns of numbers add `font-variant-numeric: tabular-nums`.
 - TV product UI has no mono face (a debug overlay may use the platform's system monospace): 10-foot numerics use GT America `tnum`. Platforms without OpenType feature selection (Roku: `Font` takes only `uri` and `size`) get proportional figures, so budget timecodes for reflow (`1` is 399/1000 em, `0` is 636).
 - GT America is Latin only (523 codepoints, Western and Central European plus Turkish, no dingbats such as `✓` `▶` `★`). Symbols are icons. Text that can hold a filename keeps a fallback family; web falls back per glyph, while one-font-per-label platforms must ship a fallback or render `.notdef` boxes.
-- Root font-size is 14px, 15px from `--bp-lg`. Body, labels, inputs: `--fs-base`. Captions, button labels: `--fs-sm`. `--fs-2xl`, `--fs-3xl`, `--fs-display` are fixed pixels.
+- Root font-size is 14px, 15px from `--bp-lg`. Body, labels, inputs: `--fs-base`. Captions, button labels: `--fs-sm`. Screen titles and one-time-code digits: `--fs-title`, the fixed-pixel sibling of H2's `--fs-lg`, which scales with the root. Titles sit on a 30px line with `--tracking-snug`; the code separator is 18px. `--fs-title`, `--fs-2xl`, `--fs-3xl`, `--fs-display` are fixed pixels.
 
 ## Layout & Spacing
 
@@ -126,7 +126,7 @@ Default radius `6px`; `4px` for tight controls, `8px` or `10px` for panels, pill
 ### Rows, fields, and panels
 
 - File rows are the core component: raw names, compact metadata, obvious hover and focus at the same row height.
-- Fields read `--field-bg`, `--field-border`, and `--field-ring` (focus). `aria-invalid="true"` turns border and text red; the fill stays.
+- Fields read `--field-bg`, `--field-border`, and `--field-ring` (focus). They are filled: `--bg-secondary` on a `--line` border, so they read on the page as well as in panels. Hover steps the border to `--border-hover`; focus steps it to `--solid-hover` with a matching 1px ring, at least 3:1 against the fill, the page, and panels in both modes (WCAG 1.4.11). Disabled fields take `--component-bg`. `--bg-secondary` is the field fill, so fields never sit on it. `aria-invalid="true"` turns border and text red; the fill stays.
 - Raised panels read `--panel-*`.
 - Feedback uses `.form-callout`: `--alert-*` colours, `data-state` `info`, `success`, or `error`; `.inline` drops surface and border. It holds a message only. `.form-group` (`6px` gap) spaces a control and its feedback.
 - Every field and form error eases in through `.form-reveal`: `grid-template-rows` `0fr` to `1fr` plus opacity, over `--dur-reveal` (`180ms`) with `--ease-out`, so whatever sits below slides instead of jumping. A field error sits under its field inside `.form-group`, where the row absorbs the group gap; a form error sits above the submit button. `data-state="open"` shows it. Keep the `role="alert"` message mounted and rendered; empty it once a closed row has collapsed. An `aria-invalid` field or code fades its border red over the same `--dur-reveal`. Under `prefers-reduced-motion` nothing animates.
@@ -137,8 +137,8 @@ Default radius `6px`; `4px` for tight controls, `8px` or `10px` for panels, pill
 - The logo sits top-left in the header, in a `30.33px` box (26px ink × 7/6). The top right stays empty by default.
 - One left-aligned column, up to `340px`, is centred horizontally and vertically.
 - A quiet centred footer links Terms of Service, Privacy Policy, and Help in muted `--fs-sm`.
-- One title per screen: `22px`, medium, `-0.01em` tracking. No subtitles, taglines, or marketing lines; copy stays short.
-- Fields are filled: the page points `--field-bg` at `--bg-secondary` and `--field-border` at `--line`. Fields and buttons in the column are `44px`.
+- One title per screen: `--fs-title` (`22px`), medium, `--tracking-snug` (`-0.01em`). No subtitles, taglines, or marketing lines; copy stays short.
+- Fields are the standard filled field. Fields and buttons in the column are `44px`.
 - Labels are small, muted, and above the field.
 - The primary button is full-width yellow. Secondary actions sit under the form as muted text links: “Forgot password?”, “New to put.io? Sign up”, “Wrong account? Sign out”.
 - Tab order runs fields, submit, then secondary links; DOM order follows visual order, with no positive `tabindex`. Two-factor runs the code, Verify, then its links. The reveal-password toggle takes `tabindex="-1"` and keeps its accessible name: keyboard-only users can't toggle visibility, screen-reader users still can in browse mode. No link leaves the tab order.

package/dist/css/tokens.css

@@ -25,21 +25,21 @@
   --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%); /* deprecated: use --field-bg */
-  --input-border: hsl(0, 0%, 85.8%); /* deprecated: use --field-border */
+  --input-bg: hsl(0, 0%, 97.3%); /* deprecated: use --field-bg */
+  --input-border: hsl(0, 0%, 88.7%); /* deprecated: use --field-border */
   --input-border-hover: hsl(0, 0%, 78.0%); /* deprecated: use --field-border-hover */
-  --input-border-focus: hsl(0, 0%, 78.0%); /* deprecated: use --field-border-focus */
-  --input-ring: 0 0 0 1px hsl(0, 0%, 78.0%); /* deprecated: use --field-ring */
+  --input-border-focus: hsl(0, 0%, 52.3%); /* deprecated: use --field-border-focus */
+  --input-ring: 0 0 0 1px hsl(0, 0%, 52.3%); /* deprecated: use --field-ring */
   --input-text: hsl(0, 0%, 9.0%); /* deprecated: use --field-text */
   --input-placeholder: hsl(0, 0%, 43.5%); /* deprecated: use --field-placeholder */
-  --field-bg: hsl(0, 0%, 100%);
-  --field-bg-disabled: hsl(0, 0%, 97.3%);
-  --field-border: hsl(0, 0%, 85.8%);
+  --field-bg: hsl(0, 0%, 97.3%);
+  --field-bg-disabled: hsl(0, 0%, 95.1%);
+  --field-border: hsl(0, 0%, 88.7%);
   --field-border-hover: hsl(0, 0%, 78.0%);
-  --field-border-focus: hsl(0, 0%, 78.0%);
+  --field-border-focus: hsl(0, 0%, 52.3%);
   --field-text: hsl(0, 0%, 9.0%);
   --field-placeholder: hsl(0, 0%, 43.5%);
-  --field-ring: 0 0 0 1px hsl(0, 0%, 78.0%);
+  --field-ring: 0 0 0 1px hsl(0, 0%, 52.3%);
   --panel-bg: hsl(0, 0%, 95.1%);
   --panel-border: hsl(0, 0%, 88.7%);
   --panel-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.08);
@@ -58,7 +58,7 @@
   --card-foreground: hsl(0, 0%, 9.0%);
   --popover: hsl(0, 0%, 95.1%);
   --popover-foreground: hsl(0, 0%, 9.0%);
-  --input: hsl(0, 0%, 85.8%);
+  --input: hsl(0, 0%, 88.7%);
   --file-row-bg: hsla(0, 0%, 0%, 0);
   --file-row-bg-hover: hsl(0, 0%, 97.3%);
   --file-row-bg-active: hsl(0, 0%, 97.3%);
@@ -265,6 +265,7 @@
   --fs-base: 1rem;
   --fs-md: 1.125rem;
   --fs-lg: 1.5rem;
+  --fs-title: 22px;
   --fs-xl: 2rem;
   --fs-2xl: 48px;
   --fs-3xl: 64px;
@@ -279,6 +280,7 @@
   --fw-bold: 700;
   --fw-black: 900;
   --tracking-tight: -0.02em;
+  --tracking-snug: -0.01em;
   --tracking-normal: 0;
   --tracking-wide: 0.02em;
   --tracking-uppercase: 0.08em;
@@ -333,21 +335,21 @@
   --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%); /* deprecated: use --field-bg */
-  --input-border: hsl(0, 0%, 24.3%); /* deprecated: use --field-border */
+  --input-bg: hsl(0, 0%, 11.0%); /* deprecated: use --field-bg */
+  --input-border: hsl(0, 0%, 20.5%); /* deprecated: use --field-border */
   --input-border-hover: hsl(0, 0%, 31.2%); /* deprecated: use --field-border-hover */
-  --input-border-focus: hsl(0, 0%, 31.2%); /* deprecated: use --field-border-focus */
-  --input-ring: 0 0 0 1px hsl(0, 0%, 31.2%); /* deprecated: use --field-ring */
+  --input-border-focus: hsl(0, 0%, 49.4%); /* deprecated: use --field-border-focus */
+  --input-ring: 0 0 0 1px hsl(0, 0%, 49.4%); /* deprecated: use --field-ring */
   --input-text: hsl(0, 0%, 93.0%); /* deprecated: use --field-text */
   --input-placeholder: hsl(0, 0%, 62.8%); /* deprecated: use --field-placeholder */
-  --field-bg: hsl(0, 0%, 8.5%);
-  --field-bg-disabled: hsl(0, 0%, 11.0%);
-  --field-border: hsl(0, 0%, 24.3%);
+  --field-bg: hsl(0, 0%, 11.0%);
+  --field-bg-disabled: hsl(0, 0%, 13.6%);
+  --field-border: hsl(0, 0%, 20.5%);
   --field-border-hover: hsl(0, 0%, 31.2%);
-  --field-border-focus: hsl(0, 0%, 31.2%);
+  --field-border-focus: hsl(0, 0%, 49.4%);
   --field-text: hsl(0, 0%, 93.0%);
   --field-placeholder: hsl(0, 0%, 62.8%);
-  --field-ring: 0 0 0 1px hsl(0, 0%, 31.2%);
+  --field-ring: 0 0 0 1px hsl(0, 0%, 49.4%);
   --panel-bg: hsl(0, 0%, 13.6%);
   --panel-border: hsl(0, 0%, 20.5%);
   --panel-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.5);
@@ -366,7 +368,7 @@
   --card-foreground: hsl(0, 0%, 93.0%);
   --popover: hsl(0, 0%, 13.6%);
   --popover-foreground: hsl(0, 0%, 93.0%);
-  --input: hsl(0, 0%, 24.3%);
+  --input: hsl(0, 0%, 20.5%);
   --file-row-bg: hsla(0, 0%, 0%, 0);
   --file-row-bg-hover: hsl(0, 0%, 11.0%);
   --file-row-bg-active: hsl(0, 0%, 11.0%);

package/dist/figma/putio.tokens.json

@@ -218,12 +218,12 @@
     "input": {
       "background": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 100%)",
+        "$value": "hsl(0, 0%, 97.3%)",
         "$description": "Deprecated alias. Use --field-bg (component.field.background)."
       },
       "border": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 85.8%)",
+        "$value": "hsl(0, 0%, 88.7%)",
         "$description": "Deprecated alias. Use --field-border (component.field.border)."
       },
       "radius": {
@@ -238,7 +238,7 @@
       },
       "borderFocus": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 78.0%)",
+        "$value": "hsl(0, 0%, 52.3%)",
         "$description": "Deprecated alias. Use --field-border-focus (component.field.borderFocus)."
       },
       "text": {
@@ -912,6 +912,11 @@
         "$value": "1.5rem",
         "$description": "Heading."
       },
+      "title": {
+        "$type": "dimension",
+        "$value": "22px",
+        "$description": "Screen titles and one-time-code digits. The fixed-pixel sibling of fontSize.lg (H2), which scales with the root."
+      },
       "xl": {
         "$type": "dimension",
         "$value": "2rem",
@@ -979,6 +984,11 @@
         "$type": "dimension",
         "$value": "-0.02em"
       },
+      "snug": {
+        "$type": "dimension",
+        "$value": "-0.01em",
+        "$description": "Slight negative tracking for screen titles."
+      },
       "normal": {
         "$type": "number",
         "$value": "0"

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.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.notification.badgeBackground" | "component.notification.badgeForeground" | "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" | "component.avatar.yellow" | "component.avatar.green" | "component.avatar.red" | "component.avatar.blue" | "component.avatar.purple" | "component.avatar.teal" | "component.avatar.orange" | "component.avatar.foreground" | "component.avatar.foregroundWarm" | "component.alert.radius" | "component.alert.infoBackground" | "component.alert.infoBackgroundDark" | "component.alert.infoBorder" | "component.alert.infoBorderDark" | "component.alert.infoText" | "component.alert.infoTextDark" | "component.alert.infoBody" | "component.alert.infoBodyDark" | "component.alert.infoIcon" | "component.alert.infoIconDark" | "component.alert.brandBackground" | "component.alert.brandBackgroundDark" | "component.alert.brandBorder" | "component.alert.brandBorderDark" | "component.alert.brandText" | "component.alert.brandTextDark" | "component.alert.brandBody" | "component.alert.brandBodyDark" | "component.alert.brandIcon" | "component.alert.brandIconDark" | "component.alert.successBackground" | "component.alert.successBackgroundDark" | "component.alert.successBorder" | "component.alert.successBorderDark" | "component.alert.successText" | "component.alert.successTextDark" | "component.alert.successBody" | "component.alert.successBodyDark" | "component.alert.successIcon" | "component.alert.successIconDark" | "component.alert.dangerBackground" | "component.alert.dangerBackgroundDark" | "component.alert.dangerBorder" | "component.alert.dangerBorderDark" | "component.alert.dangerText" | "component.alert.dangerTextDark" | "component.alert.dangerBody" | "component.alert.dangerBodyDark" | "component.alert.dangerIcon" | "component.alert.dangerIconDark" | "component.slider.track" | "component.slider.trackDark" | "component.slider.buffer" | "component.slider.bufferDark" | "component.slider.fill" | "component.slider.knob" | "component.slider.fillDisabled" | "component.slider.fillDisabledDark" | "component.slider.trackHeight" | "component.slider.knobSize" | "component.slider.hitHeight" | "component.pagination.itemSize" | "component.pagination.itemText" | "component.pagination.itemTextDark" | "component.pagination.itemTextActive" | "component.pagination.itemTextActiveDark" | "component.pagination.itemBackgroundHover" | "component.pagination.itemBackgroundHoverDark" | "component.pagination.itemBackgroundActive" | "component.pagination.itemBackgroundActiveDark" | "component.pagination.itemBorderActive" | "component.pagination.itemBorderActiveDark" | "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.nightly.background" | "context.tv.channelArt.nightly.accent" | "context.tv.channelArt.nightly.star" | "context.tv.channelArt.nightly.moon" | "context.tv.channelArt.nightly.moonCrater" | "context.tv.channelArt.lab.background" | "context.tv.channelArt.lab.foreground" | "context.tv.channelArt.lab.accent" | "tv.video.background" | "tv.video.heroScrimTop" | "tv.video.heroScrimBottom" | "tv.video.textOnVideo" | "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.focus.borderWidth" | "tv.focus.row.background" | "tv.focus.row.backgroundFocused" | "tv.focus.control.background" | "tv.focus.control.backgroundFocused" | "tv.focus.control.border" | "tv.focus.control.borderFocused" | "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" | "elevation.focusDark" | "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.reveal" | "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.notification.badgeBackground" | "component.notification.badgeForeground" | "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" | "component.avatar.yellow" | "component.avatar.green" | "component.avatar.red" | "component.avatar.blue" | "component.avatar.purple" | "component.avatar.teal" | "component.avatar.orange" | "component.avatar.foreground" | "component.avatar.foregroundWarm" | "component.alert.radius" | "component.alert.infoBackground" | "component.alert.infoBackgroundDark" | "component.alert.infoBorder" | "component.alert.infoBorderDark" | "component.alert.infoText" | "component.alert.infoTextDark" | "component.alert.infoBody" | "component.alert.infoBodyDark" | "component.alert.infoIcon" | "component.alert.infoIconDark" | "component.alert.brandBackground" | "component.alert.brandBackgroundDark" | "component.alert.brandBorder" | "component.alert.brandBorderDark" | "component.alert.brandText" | "component.alert.brandTextDark" | "component.alert.brandBody" | "component.alert.brandBodyDark" | "component.alert.brandIcon" | "component.alert.brandIconDark" | "component.alert.successBackground" | "component.alert.successBackgroundDark" | "component.alert.successBorder" | "component.alert.successBorderDark" | "component.alert.successText" | "component.alert.successTextDark" | "component.alert.successBody" | "component.alert.successBodyDark" | "component.alert.successIcon" | "component.alert.successIconDark" | "component.alert.dangerBackground" | "component.alert.dangerBackgroundDark" | "component.alert.dangerBorder" | "component.alert.dangerBorderDark" | "component.alert.dangerText" | "component.alert.dangerTextDark" | "component.alert.dangerBody" | "component.alert.dangerBodyDark" | "component.alert.dangerIcon" | "component.alert.dangerIconDark" | "component.slider.track" | "component.slider.trackDark" | "component.slider.buffer" | "component.slider.bufferDark" | "component.slider.fill" | "component.slider.knob" | "component.slider.fillDisabled" | "component.slider.fillDisabledDark" | "component.slider.trackHeight" | "component.slider.knobSize" | "component.slider.hitHeight" | "component.pagination.itemSize" | "component.pagination.itemText" | "component.pagination.itemTextDark" | "component.pagination.itemTextActive" | "component.pagination.itemTextActiveDark" | "component.pagination.itemBackgroundHover" | "component.pagination.itemBackgroundHoverDark" | "component.pagination.itemBackgroundActive" | "component.pagination.itemBackgroundActiveDark" | "component.pagination.itemBorderActive" | "component.pagination.itemBorderActiveDark" | "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.nightly.background" | "context.tv.channelArt.nightly.accent" | "context.tv.channelArt.nightly.star" | "context.tv.channelArt.nightly.moon" | "context.tv.channelArt.nightly.moonCrater" | "context.tv.channelArt.lab.background" | "context.tv.channelArt.lab.foreground" | "context.tv.channelArt.lab.accent" | "tv.video.background" | "tv.video.heroScrimTop" | "tv.video.heroScrimBottom" | "tv.video.textOnVideo" | "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.focus.borderWidth" | "tv.focus.row.background" | "tv.focus.row.backgroundFocused" | "tv.focus.control.background" | "tv.focus.control.backgroundFocused" | "tv.focus.control.border" | "tv.focus.control.borderFocused" | "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" | "elevation.focusDark" | "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.title" | "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.snug" | "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.reveal" | "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

@@ -828,8 +828,8 @@
     "field": {
       "background": {
         "$type": "color",
-        "$value": "{surface.light.appBg}",
-        "$description": "Form-control fill. Fields stay on the app background surface, even inside a raised panel.",
+        "$value": "{color.neutral.light.bgSecondary}",
+        "$description": "Form-control fill. Fields are filled so they read on the page background as well as inside panels.",
         "$extensions": {
           "putio": {
             "cssName": "field-bg",
@@ -840,7 +840,7 @@
       },
       "backgroundDark": {
         "$type": "color",
-        "$value": "{surface.dark.appBg}",
+        "$value": "{color.neutral.dark.bgSecondary}",
         "$description": "Dark-mode form-control fill.",
         "$extensions": {
           "putio": {
@@ -852,8 +852,8 @@
       },
       "backgroundDisabled": {
         "$type": "color",
-        "$value": "{color.neutral.light.bgSecondary}",
-        "$description": "Disabled form-control fill.",
+        "$value": "{color.neutral.light.componentBg}",
+        "$description": "Disabled form-control fill, a step off the resting fill.",
         "$extensions": {
           "putio": {
             "cssName": "field-bg-disabled",
@@ -864,7 +864,7 @@
       },
       "backgroundDisabledDark": {
         "$type": "color",
-        "$value": "{color.neutral.dark.bgSecondary}",
+        "$value": "{color.neutral.dark.componentBg}",
         "$description": "Dark-mode disabled form-control fill.",
         "$extensions": {
           "putio": {
@@ -876,7 +876,7 @@
       },
       "border": {
         "$type": "color",
-        "$value": "{color.neutral.light.border}",
+        "$value": "{color.neutral.light.line}",
         "$description": "Resting form-control border.",
         "$extensions": {
           "putio": {
@@ -888,7 +888,7 @@
       },
       "borderDark": {
         "$type": "color",
-        "$value": "{color.neutral.dark.border}",
+        "$value": "{color.neutral.dark.line}",
         "$description": "Dark-mode resting form-control border.",
         "$extensions": {
           "putio": {
@@ -924,8 +924,8 @@
       },
       "borderFocus": {
         "$type": "color",
-        "$value": "{color.neutral.light.borderHover}",
-        "$description": "Focused form-control border. Focus matches hover and does not use the yellow focus shadow.",
+        "$value": "{color.neutral.light.solidHover}",
+        "$description": "Focused form-control border, a step past hover; at least 3:1 against the fill, the page, and panels. Does not use the yellow focus shadow.",
         "$extensions": {
           "putio": {
             "cssName": "field-border-focus",
@@ -936,8 +936,8 @@
       },
       "borderFocusDark": {
         "$type": "color",
-        "$value": "{color.neutral.dark.borderHover}",
-        "$description": "Dark-mode focused form-control border. Focus matches hover and does not use the yellow focus shadow.",
+        "$value": "{color.neutral.dark.solidHover}",
+        "$description": "Dark-mode focused form-control border, a step past hover; at least 3:1 against the fill, the page, and panels.",
         "$extensions": {
           "putio": {
             "cssName": "field-border-focus",
@@ -1008,8 +1008,8 @@
       },
       "ring": {
         "$type": "string",
-        "$value": "0 0 0 1px {color.neutral.light.borderHover}",
-        "$description": "Quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus.",
+        "$value": "0 0 0 1px {color.neutral.light.solidHover}",
+        "$description": "Quiet field focus ring in the focus border colour. Buttons, links, and nav focus with --shadow-focus instead.",
         "$extensions": {
           "putio": {
             "cssName": "field-ring",
@@ -1020,8 +1020,8 @@
       },
       "ringDark": {
         "$type": "string",
-        "$value": "0 0 0 1px {color.neutral.dark.borderHover}",
-        "$description": "Dark-mode quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus.",
+        "$value": "0 0 0 1px {color.neutral.dark.solidHover}",
+        "$description": "Dark-mode quiet field focus ring. Buttons, links, and nav focus with --shadow-focus instead.",
         "$extensions": {
           "putio": {
             "cssName": "field-ring",
@@ -1500,7 +1500,7 @@
       },
       "input": {
         "$type": "color",
-        "$value": "{color.neutral.light.border}",
+        "$value": "{component.field.border}",
         "$extensions": {
           "putio": {
             "cssName": "input",
@@ -1511,7 +1511,7 @@
       },
       "inputDark": {
         "$type": "color",
-        "$value": "{color.neutral.dark.border}",
+        "$value": "{component.field.borderDark}",
         "$extensions": {
           "putio": {
             "cssName": "input",
@@ -4866,6 +4866,18 @@
           }
         }
       },
+      "title": {
+        "$type": "dimension",
+        "$value": "22px",
+        "$description": "Screen titles and one-time-code digits. The fixed-pixel sibling of fontSize.lg (H2), which scales with the root.",
+        "$extensions": {
+          "putio": {
+            "cssName": "fs-title",
+            "mode": "global",
+            "figma": true
+          }
+        }
+      },
       "xl": {
         "$type": "dimension",
         "$value": "2rem",
@@ -5031,6 +5043,18 @@
           }
         }
       },
+      "snug": {
+        "$type": "dimension",
+        "$value": "-0.01em",
+        "$description": "Slight negative tracking for screen titles.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tracking-snug",
+            "mode": "global",
+            "figma": true
+          }
+        }
+      },
       "normal": {
         "$type": "number",
         "$value": "0",

package/dist/tokens.flat.json

@@ -454,7 +454,7 @@
     "cssName": "--input-bg",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 100%)",
+    "value": "hsl(0, 0%, 97.3%)",
     "originalValue": "{component.field.background}",
     "description": "Deprecated alias. Use --field-bg (component.field.background).",
     "deprecated": true
@@ -463,7 +463,7 @@
     "cssName": "--input-bg",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 8.5%)",
+    "value": "hsl(0, 0%, 11.0%)",
     "originalValue": "{component.field.backgroundDark}",
     "description": "Deprecated alias. Use --field-bg (component.field.backgroundDark).",
     "deprecated": true
@@ -472,7 +472,7 @@
     "cssName": "--input-border",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 85.8%)",
+    "value": "hsl(0, 0%, 88.7%)",
     "originalValue": "{component.field.border}",
     "description": "Deprecated alias. Use --field-border (component.field.border).",
     "deprecated": true
@@ -481,7 +481,7 @@
     "cssName": "--input-border",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 24.3%)",
+    "value": "hsl(0, 0%, 20.5%)",
     "originalValue": "{component.field.borderDark}",
     "description": "Deprecated alias. Use --field-border (component.field.borderDark).",
     "deprecated": true
@@ -517,7 +517,7 @@
     "cssName": "--input-border-focus",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 78.0%)",
+    "value": "hsl(0, 0%, 52.3%)",
     "originalValue": "{component.field.borderFocus}",
     "description": "Deprecated alias. Use --field-border-focus (component.field.borderFocus).",
     "deprecated": true
@@ -526,7 +526,7 @@
     "cssName": "--input-border-focus",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 31.2%)",
+    "value": "hsl(0, 0%, 49.4%)",
     "originalValue": "{component.field.borderFocusDark}",
     "description": "Deprecated alias. Use --field-border-focus (component.field.borderFocusDark).",
     "deprecated": true
@@ -535,7 +535,7 @@
     "cssName": "--input-ring",
     "type": "string",
     "mode": "light",
-    "value": "0 0 0 1px hsl(0, 0%, 78.0%)",
+    "value": "0 0 0 1px hsl(0, 0%, 52.3%)",
     "originalValue": "{component.field.ring}",
     "description": "Deprecated alias. Use --field-ring (component.field.ring).",
     "deprecated": true
@@ -544,7 +544,7 @@
     "cssName": "--input-ring",
     "type": "string",
     "mode": "dark",
-    "value": "0 0 0 1px hsl(0, 0%, 31.2%)",
+    "value": "0 0 0 1px hsl(0, 0%, 49.4%)",
     "originalValue": "{component.field.ringDark}",
     "description": "Deprecated alias. Use --field-ring (component.field.ringDark).",
     "deprecated": true
@@ -589,48 +589,48 @@
     "cssName": "--field-bg",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 100%)",
-    "originalValue": "{surface.light.appBg}",
-    "description": "Form-control fill. Fields stay on the app background surface, even inside a raised panel."
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "{color.neutral.light.bgSecondary}",
+    "description": "Form-control fill. Fields are filled so they read on the page background as well as inside panels."
   },
   "component.field.backgroundDark": {
     "cssName": "--field-bg",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 8.5%)",
-    "originalValue": "{surface.dark.appBg}",
+    "value": "hsl(0, 0%, 11.0%)",
+    "originalValue": "{color.neutral.dark.bgSecondary}",
     "description": "Dark-mode form-control fill."
   },
   "component.field.backgroundDisabled": {
     "cssName": "--field-bg-disabled",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 97.3%)",
-    "originalValue": "{color.neutral.light.bgSecondary}",
-    "description": "Disabled form-control fill."
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}",
+    "description": "Disabled form-control fill, a step off the resting fill."
   },
   "component.field.backgroundDisabledDark": {
     "cssName": "--field-bg-disabled",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 11.0%)",
-    "originalValue": "{color.neutral.dark.bgSecondary}",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}",
     "description": "Dark-mode disabled form-control fill."
   },
   "component.field.border": {
     "cssName": "--field-border",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 85.8%)",
-    "originalValue": "{color.neutral.light.border}",
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{color.neutral.light.line}",
     "description": "Resting form-control border."
   },
   "component.field.borderDark": {
     "cssName": "--field-border",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 24.3%)",
-    "originalValue": "{color.neutral.dark.border}",
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{color.neutral.dark.line}",
     "description": "Dark-mode resting form-control border."
   },
   "component.field.borderHover": {
@@ -653,17 +653,17 @@
     "cssName": "--field-border-focus",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 78.0%)",
-    "originalValue": "{color.neutral.light.borderHover}",
-    "description": "Focused form-control border. Focus matches hover and does not use the yellow focus shadow."
+    "value": "hsl(0, 0%, 52.3%)",
+    "originalValue": "{color.neutral.light.solidHover}",
+    "description": "Focused form-control border, a step past hover; at least 3:1 against the fill, the page, and panels. Does not use the yellow focus shadow."
   },
   "component.field.borderFocusDark": {
     "cssName": "--field-border-focus",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 31.2%)",
-    "originalValue": "{color.neutral.dark.borderHover}",
-    "description": "Dark-mode focused form-control border. Focus matches hover and does not use the yellow focus shadow."
+    "value": "hsl(0, 0%, 49.4%)",
+    "originalValue": "{color.neutral.dark.solidHover}",
+    "description": "Dark-mode focused form-control border, a step past hover; at least 3:1 against the fill, the page, and panels."
   },
   "component.field.text": {
     "cssName": "--field-text",
@@ -709,17 +709,17 @@
     "cssName": "--field-ring",
     "type": "string",
     "mode": "light",
-    "value": "0 0 0 1px hsl(0, 0%, 78.0%)",
-    "originalValue": "0 0 0 1px {color.neutral.light.borderHover}",
-    "description": "Quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus."
+    "value": "0 0 0 1px hsl(0, 0%, 52.3%)",
+    "originalValue": "0 0 0 1px {color.neutral.light.solidHover}",
+    "description": "Quiet field focus ring in the focus border colour. Buttons, links, and nav focus with --shadow-focus instead."
   },
   "component.field.ringDark": {
     "cssName": "--field-ring",
     "type": "string",
     "mode": "dark",
-    "value": "0 0 0 1px hsl(0, 0%, 31.2%)",
-    "originalValue": "0 0 0 1px {color.neutral.dark.borderHover}",
-    "description": "Dark-mode quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus."
+    "value": "0 0 0 1px hsl(0, 0%, 49.4%)",
+    "originalValue": "0 0 0 1px {color.neutral.dark.solidHover}",
+    "description": "Dark-mode quiet field focus ring. Buttons, links, and nav focus with --shadow-focus instead."
   },
   "component.panel.background": {
     "cssName": "--panel-bg",
@@ -1025,15 +1025,15 @@
     "cssName": "--input",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 85.8%)",
-    "originalValue": "{color.neutral.light.border}"
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{component.field.border}"
   },
   "component.alias.inputDark": {
     "cssName": "--input",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 24.3%)",
-    "originalValue": "{color.neutral.dark.border}"
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{component.field.borderDark}"
   },
   "component.alias.ring": {
     "cssName": "--ring",
@@ -3308,6 +3308,14 @@
     "originalValue": "1.5rem",
     "description": "Heading."
   },
+  "typography.fontSize.title": {
+    "cssName": "--fs-title",
+    "type": "dimension",
+    "mode": "global",
+    "value": "22px",
+    "originalValue": "22px",
+    "description": "Screen titles and one-time-code digits. The fixed-pixel sibling of fontSize.lg (H2), which scales with the root."
+  },
   "typography.fontSize.xl": {
     "cssName": "--fs-xl",
     "type": "dimension",
@@ -3411,6 +3419,14 @@
     "value": "-0.02em",
     "originalValue": "-0.02em"
   },
+  "typography.letterSpacing.snug": {
+    "cssName": "--tracking-snug",
+    "type": "dimension",
+    "mode": "global",
+    "value": "-0.01em",
+    "originalValue": "-0.01em",
+    "description": "Slight negative tracking for screen titles."
+  },
   "typography.letterSpacing.normal": {
     "cssName": "--tracking-normal",
     "type": "number",

package/dist/tokens.js

@@ -456,7 +456,7 @@ export const tokens = {
     "cssName": "--input-bg",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 100%)",
+    "value": "hsl(0, 0%, 97.3%)",
     "originalValue": "{component.field.background}",
     "description": "Deprecated alias. Use --field-bg (component.field.background).",
     "deprecated": true
@@ -465,7 +465,7 @@ export const tokens = {
     "cssName": "--input-bg",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 8.5%)",
+    "value": "hsl(0, 0%, 11.0%)",
     "originalValue": "{component.field.backgroundDark}",
     "description": "Deprecated alias. Use --field-bg (component.field.backgroundDark).",
     "deprecated": true
@@ -474,7 +474,7 @@ export const tokens = {
     "cssName": "--input-border",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 85.8%)",
+    "value": "hsl(0, 0%, 88.7%)",
     "originalValue": "{component.field.border}",
     "description": "Deprecated alias. Use --field-border (component.field.border).",
     "deprecated": true
@@ -483,7 +483,7 @@ export const tokens = {
     "cssName": "--input-border",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 24.3%)",
+    "value": "hsl(0, 0%, 20.5%)",
     "originalValue": "{component.field.borderDark}",
     "description": "Deprecated alias. Use --field-border (component.field.borderDark).",
     "deprecated": true
@@ -519,7 +519,7 @@ export const tokens = {
     "cssName": "--input-border-focus",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 78.0%)",
+    "value": "hsl(0, 0%, 52.3%)",
     "originalValue": "{component.field.borderFocus}",
     "description": "Deprecated alias. Use --field-border-focus (component.field.borderFocus).",
     "deprecated": true
@@ -528,7 +528,7 @@ export const tokens = {
     "cssName": "--input-border-focus",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 31.2%)",
+    "value": "hsl(0, 0%, 49.4%)",
     "originalValue": "{component.field.borderFocusDark}",
     "description": "Deprecated alias. Use --field-border-focus (component.field.borderFocusDark).",
     "deprecated": true
@@ -537,7 +537,7 @@ export const tokens = {
     "cssName": "--input-ring",
     "type": "string",
     "mode": "light",
-    "value": "0 0 0 1px hsl(0, 0%, 78.0%)",
+    "value": "0 0 0 1px hsl(0, 0%, 52.3%)",
     "originalValue": "{component.field.ring}",
     "description": "Deprecated alias. Use --field-ring (component.field.ring).",
     "deprecated": true
@@ -546,7 +546,7 @@ export const tokens = {
     "cssName": "--input-ring",
     "type": "string",
     "mode": "dark",
-    "value": "0 0 0 1px hsl(0, 0%, 31.2%)",
+    "value": "0 0 0 1px hsl(0, 0%, 49.4%)",
     "originalValue": "{component.field.ringDark}",
     "description": "Deprecated alias. Use --field-ring (component.field.ringDark).",
     "deprecated": true
@@ -591,48 +591,48 @@ export const tokens = {
     "cssName": "--field-bg",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 100%)",
-    "originalValue": "{surface.light.appBg}",
-    "description": "Form-control fill. Fields stay on the app background surface, even inside a raised panel."
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "{color.neutral.light.bgSecondary}",
+    "description": "Form-control fill. Fields are filled so they read on the page background as well as inside panels."
   },
   "component.field.backgroundDark": {
     "cssName": "--field-bg",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 8.5%)",
-    "originalValue": "{surface.dark.appBg}",
+    "value": "hsl(0, 0%, 11.0%)",
+    "originalValue": "{color.neutral.dark.bgSecondary}",
     "description": "Dark-mode form-control fill."
   },
   "component.field.backgroundDisabled": {
     "cssName": "--field-bg-disabled",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 97.3%)",
-    "originalValue": "{color.neutral.light.bgSecondary}",
-    "description": "Disabled form-control fill."
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}",
+    "description": "Disabled form-control fill, a step off the resting fill."
   },
   "component.field.backgroundDisabledDark": {
     "cssName": "--field-bg-disabled",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 11.0%)",
-    "originalValue": "{color.neutral.dark.bgSecondary}",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}",
     "description": "Dark-mode disabled form-control fill."
   },
   "component.field.border": {
     "cssName": "--field-border",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 85.8%)",
-    "originalValue": "{color.neutral.light.border}",
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{color.neutral.light.line}",
     "description": "Resting form-control border."
   },
   "component.field.borderDark": {
     "cssName": "--field-border",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 24.3%)",
-    "originalValue": "{color.neutral.dark.border}",
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{color.neutral.dark.line}",
     "description": "Dark-mode resting form-control border."
   },
   "component.field.borderHover": {
@@ -655,17 +655,17 @@ export const tokens = {
     "cssName": "--field-border-focus",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 78.0%)",
-    "originalValue": "{color.neutral.light.borderHover}",
-    "description": "Focused form-control border. Focus matches hover and does not use the yellow focus shadow."
+    "value": "hsl(0, 0%, 52.3%)",
+    "originalValue": "{color.neutral.light.solidHover}",
+    "description": "Focused form-control border, a step past hover; at least 3:1 against the fill, the page, and panels. Does not use the yellow focus shadow."
   },
   "component.field.borderFocusDark": {
     "cssName": "--field-border-focus",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 31.2%)",
-    "originalValue": "{color.neutral.dark.borderHover}",
-    "description": "Dark-mode focused form-control border. Focus matches hover and does not use the yellow focus shadow."
+    "value": "hsl(0, 0%, 49.4%)",
+    "originalValue": "{color.neutral.dark.solidHover}",
+    "description": "Dark-mode focused form-control border, a step past hover; at least 3:1 against the fill, the page, and panels."
   },
   "component.field.text": {
     "cssName": "--field-text",
@@ -711,17 +711,17 @@ export const tokens = {
     "cssName": "--field-ring",
     "type": "string",
     "mode": "light",
-    "value": "0 0 0 1px hsl(0, 0%, 78.0%)",
-    "originalValue": "0 0 0 1px {color.neutral.light.borderHover}",
-    "description": "Quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus."
+    "value": "0 0 0 1px hsl(0, 0%, 52.3%)",
+    "originalValue": "0 0 0 1px {color.neutral.light.solidHover}",
+    "description": "Quiet field focus ring in the focus border colour. Buttons, links, and nav focus with --shadow-focus instead."
   },
   "component.field.ringDark": {
     "cssName": "--field-ring",
     "type": "string",
     "mode": "dark",
-    "value": "0 0 0 1px hsl(0, 0%, 31.2%)",
-    "originalValue": "0 0 0 1px {color.neutral.dark.borderHover}",
-    "description": "Dark-mode quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus."
+    "value": "0 0 0 1px hsl(0, 0%, 49.4%)",
+    "originalValue": "0 0 0 1px {color.neutral.dark.solidHover}",
+    "description": "Dark-mode quiet field focus ring. Buttons, links, and nav focus with --shadow-focus instead."
   },
   "component.panel.background": {
     "cssName": "--panel-bg",
@@ -1027,15 +1027,15 @@ export const tokens = {
     "cssName": "--input",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 85.8%)",
-    "originalValue": "{color.neutral.light.border}"
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{component.field.border}"
   },
   "component.alias.inputDark": {
     "cssName": "--input",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 24.3%)",
-    "originalValue": "{color.neutral.dark.border}"
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{component.field.borderDark}"
   },
   "component.alias.ring": {
     "cssName": "--ring",
@@ -3310,6 +3310,14 @@ export const tokens = {
     "originalValue": "1.5rem",
     "description": "Heading."
   },
+  "typography.fontSize.title": {
+    "cssName": "--fs-title",
+    "type": "dimension",
+    "mode": "global",
+    "value": "22px",
+    "originalValue": "22px",
+    "description": "Screen titles and one-time-code digits. The fixed-pixel sibling of fontSize.lg (H2), which scales with the root."
+  },
   "typography.fontSize.xl": {
     "cssName": "--fs-xl",
     "type": "dimension",
@@ -3413,6 +3421,14 @@ export const tokens = {
     "value": "-0.02em",
     "originalValue": "-0.02em"
   },
+  "typography.letterSpacing.snug": {
+    "cssName": "--tracking-snug",
+    "type": "dimension",
+    "mode": "global",
+    "value": "-0.01em",
+    "originalValue": "-0.01em",
+    "description": "Slight negative tracking for screen titles."
+  },
   "typography.letterSpacing.normal": {
     "cssName": "--tracking-normal",
     "type": "number",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@putdotio/design",
-  "version": "3.8.0",
+  "version": "3.10.0",
   "description": "Public put.io design tokens, brand assets, and design-system guidance.",
   "license": "MIT",
   "type": "module",

package/system/README.md

@@ -139,7 +139,7 @@ own, so the two name systems cannot drift.
 | `--accent` / `--accent-foreground`           | `--component-bg` / `--text`                                |
 | `--card` / `--card-foreground`               | `--component-bg` / `--text`                                |
 | `--popover` / `--popover-foreground`         | `--component-bg` / `--text`                                |
-| `--input`                                    | `--border`                                                 |
+| `--input`                                    | `--field-border`                                           |
 | `--ring`                                     | `--shadow-focus-color`                                     |
 | `--background` / `--foreground`              | `--bg` / `--text`                                          |
 

package/system/components.css

@@ -265,11 +265,12 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
    now they all inherit from here. To override per-screen, change
    geometry (height/padding) — not the surface tokens.
 
-   Surface contract:
-     bg            → --field-bg          (= --app-bg)
-     border        → --field-border      (= --border)
-     border:hover  → --field-border-hover
-     focus ring    → --field-ring        (1px border-hover, NOT yellow)
+   Surface contract (filled, so a field reads on any surface):
+     bg            → --field-bg          (= --bg-secondary)
+     border        → --field-border      (= --line)
+     border:hover  → --field-border-hover (= --border-hover)
+     border:focus  → --field-border-focus (= --solid-hover, ≥3:1 on fill, page, panel)
+     focus ring    → --field-ring        (1px in the focus colour, NOT yellow)
      placeholder   → --field-placeholder
      disabled bg   → --field-bg-disabled
 
@@ -506,7 +507,7 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   background: var(--field-bg);
   color: var(--field-text);
   font-family: var(--font-mono);
-  font-size: 22px;
+  font-size: var(--fs-title);
   font-variant-numeric: tabular-nums;
   line-height: 1;
   pointer-events: none;
@@ -567,18 +568,11 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 
    Card-less: the form sits on the page background. Logo top-left
    in .auth-header, one left-aligned 340px column centred in
-   .auth-main, a quiet link row in .auth-footer. The page re-points
-   --field-bg / --field-border, so .field and .otp-slot render filled
-   without a variant. Controls are 44px; the title is the only
-   heading. Under 640px the gutters drop to 24px so the logo lines
+   .auth-main, a quiet link row in .auth-footer. Controls are 44px;
+   the title is the only heading. Under 640px the gutters drop to 24px so the logo lines
    up with the column.
    =========================================================== */
 .auth-page {
-  --field-bg: var(--bg-secondary);
-  --field-border: var(--line);
-  /* Focus a step past hover, so it holds 3:1 against the filled field. */
-  --field-border-focus: var(--solid-hover);
-  --field-ring: 0 0 0 1px var(--solid-hover);
   box-sizing: border-box;
   min-height: 100dvh;
   display: flex;
@@ -609,10 +603,10 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 }
 .auth-title {
   margin: 0 0 28px;
-  font-size: 22px;
+  font-size: var(--fs-title);
   line-height: 30px;
   font-weight: var(--fw-medium);
-  letter-spacing: -0.01em;
+  letter-spacing: var(--tracking-snug);
   color: var(--text);
 }
 .auth-column .form-stack { gap: 16px; }

package/tokens/components.tokens.json

@@ -828,8 +828,8 @@
     "field": {
       "background": {
         "$type": "color",
-        "$value": "{surface.light.appBg}",
-        "$description": "Form-control fill. Fields stay on the app background surface, even inside a raised panel.",
+        "$value": "{color.neutral.light.bgSecondary}",
+        "$description": "Form-control fill. Fields are filled so they read on the page background as well as inside panels.",
         "$extensions": {
           "putio": {
             "cssName": "field-bg",
@@ -840,7 +840,7 @@
       },
       "backgroundDark": {
         "$type": "color",
-        "$value": "{surface.dark.appBg}",
+        "$value": "{color.neutral.dark.bgSecondary}",
         "$description": "Dark-mode form-control fill.",
         "$extensions": {
           "putio": {
@@ -852,8 +852,8 @@
       },
       "backgroundDisabled": {
         "$type": "color",
-        "$value": "{color.neutral.light.bgSecondary}",
-        "$description": "Disabled form-control fill.",
+        "$value": "{color.neutral.light.componentBg}",
+        "$description": "Disabled form-control fill, a step off the resting fill.",
         "$extensions": {
           "putio": {
             "cssName": "field-bg-disabled",
@@ -864,7 +864,7 @@
       },
       "backgroundDisabledDark": {
         "$type": "color",
-        "$value": "{color.neutral.dark.bgSecondary}",
+        "$value": "{color.neutral.dark.componentBg}",
         "$description": "Dark-mode disabled form-control fill.",
         "$extensions": {
           "putio": {
@@ -876,7 +876,7 @@
       },
       "border": {
         "$type": "color",
-        "$value": "{color.neutral.light.border}",
+        "$value": "{color.neutral.light.line}",
         "$description": "Resting form-control border.",
         "$extensions": {
           "putio": {
@@ -888,7 +888,7 @@
       },
       "borderDark": {
         "$type": "color",
-        "$value": "{color.neutral.dark.border}",
+        "$value": "{color.neutral.dark.line}",
         "$description": "Dark-mode resting form-control border.",
         "$extensions": {
           "putio": {
@@ -924,8 +924,8 @@
       },
       "borderFocus": {
         "$type": "color",
-        "$value": "{color.neutral.light.borderHover}",
-        "$description": "Focused form-control border. Focus matches hover and does not use the yellow focus shadow.",
+        "$value": "{color.neutral.light.solidHover}",
+        "$description": "Focused form-control border, a step past hover; at least 3:1 against the fill, the page, and panels. Does not use the yellow focus shadow.",
         "$extensions": {
           "putio": {
             "cssName": "field-border-focus",
@@ -936,8 +936,8 @@
       },
       "borderFocusDark": {
         "$type": "color",
-        "$value": "{color.neutral.dark.borderHover}",
-        "$description": "Dark-mode focused form-control border. Focus matches hover and does not use the yellow focus shadow.",
+        "$value": "{color.neutral.dark.solidHover}",
+        "$description": "Dark-mode focused form-control border, a step past hover; at least 3:1 against the fill, the page, and panels.",
         "$extensions": {
           "putio": {
             "cssName": "field-border-focus",
@@ -1008,8 +1008,8 @@
       },
       "ring": {
         "$type": "string",
-        "$value": "0 0 0 1px {color.neutral.light.borderHover}",
-        "$description": "Quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus.",
+        "$value": "0 0 0 1px {color.neutral.light.solidHover}",
+        "$description": "Quiet field focus ring in the focus border colour. Buttons, links, and nav focus with --shadow-focus instead.",
         "$extensions": {
           "putio": {
             "cssName": "field-ring",
@@ -1020,8 +1020,8 @@
       },
       "ringDark": {
         "$type": "string",
-        "$value": "0 0 0 1px {color.neutral.dark.borderHover}",
-        "$description": "Dark-mode quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus.",
+        "$value": "0 0 0 1px {color.neutral.dark.solidHover}",
+        "$description": "Dark-mode quiet field focus ring. Buttons, links, and nav focus with --shadow-focus instead.",
         "$extensions": {
           "putio": {
             "cssName": "field-ring",
@@ -1500,7 +1500,7 @@
       },
       "input": {
         "$type": "color",
-        "$value": "{color.neutral.light.border}",
+        "$value": "{component.field.border}",
         "$extensions": {
           "putio": {
             "cssName": "input",
@@ -1511,7 +1511,7 @@
       },
       "inputDark": {
         "$type": "color",
-        "$value": "{color.neutral.dark.border}",
+        "$value": "{component.field.borderDark}",
         "$extensions": {
           "putio": {
             "cssName": "input",

package/tokens/primitives.tokens.json

@@ -206,6 +206,18 @@
           }
         }
       },
+      "title": {
+        "$type": "dimension",
+        "$value": "22px",
+        "$description": "Screen titles and one-time-code digits. The fixed-pixel sibling of fontSize.lg (H2), which scales with the root.",
+        "$extensions": {
+          "putio": {
+            "cssName": "fs-title",
+            "mode": "global",
+            "figma": true
+          }
+        }
+      },
       "xl": {
         "$type": "dimension",
         "$value": "2rem",
@@ -371,6 +383,18 @@
           }
         }
       },
+      "snug": {
+        "$type": "dimension",
+        "$value": "-0.01em",
+        "$description": "Slight negative tracking for screen titles.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tracking-snug",
+            "mode": "global",
+            "figma": true
+          }
+        }
+      },
       "normal": {
         "$type": "number",
         "$value": "0",