@putdotio/design 3.11.0 → 4.0.0

package/DESIGN.md

@@ -70,7 +70,7 @@ A web mock is never a native spec. Every surface binds at one tier, and every ca
 
 - **Tier 0: Foundations.** The token graph. Values only; binds every tier.
 - **Tier 1: www · app · auth.** The full system: tokens plus the `system/components.css` recipes, which are the contract here only.
-- **Tier 2: iOS · iPadOS · tvOS · watchOS · Android · Android TV.** Tokens only. Components and pages come from the platform's guidelines; cards show how a stock control takes put.io tokens. The shipped tvOS and Android TV app draws its own components with Lucide icons: documented drift.
+- **Tier 2: iOS · iPadOS · tvOS · watchOS · Android · Android TV.** Tokens only. Components and pages come from the platform's guidelines; cards show how a stock control takes put.io tokens. The shipped tvOS and Android TV app draws its own components with Phosphor icons; the components are documented drift.
 - **Tier 3: Roku.** Tier 2, plus put.io conventions in custom SceneGraph components.
 - **Tier 4: tv.put.io · Tizen · webOS.** The web system, restrained to a calm, list-first 10-foot interface.
 
@@ -94,7 +94,7 @@ Tier 1, 3, and 4 cards are Components (put.io owns the recipe); tier 2 cards are
 ## Layout & Spacing
 
 - Layouts are file-browser layouts: lists, rows, columns, sidebars, toolbars, sheets. Whitespace and dividers come before cards.
-- Spacing steps: `4, 8, 16, 32, 64, 128, 256, 512`. Every gap is one of them.
+- Spacing follows Tailwind's 4px unit: `--space-N` is N × 4px, as `p-N` is. Named steps: `--space-1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 16, 32, 64, 128` (4–512px). On web, every padding, margin and gap is a multiple of 4px; 1px and 2px stay for hairline nudges. TV and Roku keep their 3px FHD grid; native platforms keep their own metrics.
 - z-index: `--z-dropdown` 1000, `--z-sticky` 1100, `--z-modal` 1300, `--z-notification` 1400, `--z-tooltip` 1500.
 - Breakpoints `--bp-sm`/`--bp-md`/`--bp-lg` are 640/768/1280px; `@media` takes the literal pixels.
 
@@ -128,17 +128,17 @@ Default radius `6px`; `4px` for tight controls, `8px` or `10px` for panels, pill
 - 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). 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.
+- Feedback uses `.form-callout`: `--alert-*` colours, `data-state` `info`, `success`, or `error`; `.inline` drops surface and border. It holds a message only. `.form-group` (`8px` 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.
 
 ### Auth
 
 - Sign in, sign up, password reset, and two-factor pages have no card or panel: the form sits on `--bg`. Recipe: `.auth-page`, `.auth-header`, `.auth-main`, `.auth-column`, `.auth-title`, `.auth-links`, `.auth-footer`.
 - 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.
+- One left-aligned column, up to `340px`, is centred horizontally and optically centred vertically: the form's middle sits near 45% of the viewport height, never below the true middle.
 - A quiet centred footer links Terms of Service, Privacy Policy, and Help in muted `--fs-sm`.
 - 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`.
+- Fields and buttons keep the standard 36px box: the filled field and a full-width default-size primary.
 - 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/tailwind.css

@@ -10,6 +10,8 @@
    reference: Tailwind emits none of these keys as variables, so a key that
    shares a token's name, such as --radius-sm, never redeclares it. */
 @theme inline reference {
+  --spacing: var(--space-1);
+
   --color-button-primary-bg: var(--button-primary-bg);
   --color-button-primary-bg-hover: var(--button-primary-bg-hover);
   --color-button-primary-fg: var(--button-primary-fg);

package/dist/css/tokens.css

@@ -287,12 +287,18 @@
   --space-0: 0;
   --space-1: 4px;
   --space-2: 8px;
-  --space-3: 16px;
-  --space-4: 32px;
-  --space-5: 64px;
-  --space-6: 128px;
-  --space-7: 256px;
-  --space-8: 512px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-32: 128px;
+  --space-64: 256px;
+  --space-128: 512px;
   --radius-sm: 4px;
   --radius: 6px;
   --radius-md: 8px;
@@ -559,7 +565,7 @@ h1, .h1 {
   font-weight: var(--fw-bold);
   line-height: var(--lh-tight);
   letter-spacing: var(--tracking-tight);
-  margin: 0 0 var(--space-3);
+  margin: 0 0 var(--space-4);
 }
 
 h2, .h2 {
@@ -567,7 +573,7 @@ h2, .h2 {
   font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
   line-height: var(--lh-tight);
-  margin: 0 0 var(--space-3);
+  margin: 0 0 var(--space-4);
 }
 
 h3, .h3 {
@@ -597,7 +603,7 @@ p, .body {
   font-size: var(--fs-base);
   font-weight: var(--fw-regular);
   line-height: var(--lh-normal);
-  margin: 0 0 var(--space-3);
+  margin: 0 0 var(--space-4);
 }
 
 .lead {

package/dist/figma/putio.tokens.json

@@ -1010,7 +1010,8 @@
     },
     "1": {
       "$type": "dimension",
-      "$value": "4px"
+      "$value": "4px",
+      "$description": "Tailwind's spacing unit: --space-N is N × 4px, as p-N is."
     },
     "2": {
       "$type": "dimension",
@@ -1018,25 +1019,49 @@
     },
     "3": {
       "$type": "dimension",
-      "$value": "16px"
+      "$value": "12px"
     },
     "4": {
       "$type": "dimension",
-      "$value": "32px"
+      "$value": "16px"
     },
     "5": {
       "$type": "dimension",
-      "$value": "64px"
+      "$value": "20px"
     },
     "6": {
       "$type": "dimension",
-      "$value": "128px"
+      "$value": "24px"
     },
     "7": {
       "$type": "dimension",
-      "$value": "256px"
+      "$value": "28px"
     },
     "8": {
+      "$type": "dimension",
+      "$value": "32px"
+    },
+    "10": {
+      "$type": "dimension",
+      "$value": "40px"
+    },
+    "12": {
+      "$type": "dimension",
+      "$value": "48px"
+    },
+    "16": {
+      "$type": "dimension",
+      "$value": "64px"
+    },
+    "32": {
+      "$type": "dimension",
+      "$value": "128px"
+    },
+    "64": {
+      "$type": "dimension",
+      "$value": "256px"
+    },
+    "128": {
       "$type": "dimension",
       "$value": "512px"
     }

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.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 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" | "spacing.10" | "spacing.12" | "spacing.16" | "spacing.32" | "spacing.64" | "spacing.128" | "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

@@ -5111,7 +5111,8 @@
           "mode": "global",
           "figma": true
         }
-      }
+      },
+      "$description": "Tailwind's spacing unit: --space-N is N × 4px, as p-N is."
     },
     "2": {
       "$type": "dimension",
@@ -5126,7 +5127,7 @@
     },
     "3": {
       "$type": "dimension",
-      "$value": "16px",
+      "$value": "12px",
       "$extensions": {
         "putio": {
           "cssName": "space-3",
@@ -5137,7 +5138,7 @@
     },
     "4": {
       "$type": "dimension",
-      "$value": "32px",
+      "$value": "16px",
       "$extensions": {
         "putio": {
           "cssName": "space-4",
@@ -5148,7 +5149,7 @@
     },
     "5": {
       "$type": "dimension",
-      "$value": "64px",
+      "$value": "20px",
       "$extensions": {
         "putio": {
           "cssName": "space-5",
@@ -5159,7 +5160,7 @@
     },
     "6": {
       "$type": "dimension",
-      "$value": "128px",
+      "$value": "24px",
       "$extensions": {
         "putio": {
           "cssName": "space-6",
@@ -5170,7 +5171,7 @@
     },
     "7": {
       "$type": "dimension",
-      "$value": "256px",
+      "$value": "28px",
       "$extensions": {
         "putio": {
           "cssName": "space-7",
@@ -5181,7 +5182,7 @@
     },
     "8": {
       "$type": "dimension",
-      "$value": "512px",
+      "$value": "32px",
       "$extensions": {
         "putio": {
           "cssName": "space-8",
@@ -5189,6 +5190,72 @@
           "figma": true
         }
       }
+    },
+    "10": {
+      "$type": "dimension",
+      "$value": "40px",
+      "$extensions": {
+        "putio": {
+          "cssName": "space-10",
+          "mode": "global",
+          "figma": true
+        }
+      }
+    },
+    "12": {
+      "$type": "dimension",
+      "$value": "48px",
+      "$extensions": {
+        "putio": {
+          "cssName": "space-12",
+          "mode": "global",
+          "figma": true
+        }
+      }
+    },
+    "16": {
+      "$type": "dimension",
+      "$value": "64px",
+      "$extensions": {
+        "putio": {
+          "cssName": "space-16",
+          "mode": "global",
+          "figma": true
+        }
+      }
+    },
+    "32": {
+      "$type": "dimension",
+      "$value": "128px",
+      "$extensions": {
+        "putio": {
+          "cssName": "space-32",
+          "mode": "global",
+          "figma": true
+        }
+      }
+    },
+    "64": {
+      "$type": "dimension",
+      "$value": "256px",
+      "$extensions": {
+        "putio": {
+          "cssName": "space-64",
+          "mode": "global",
+          "figma": true
+        }
+      }
+    },
+    "128": {
+      "$type": "dimension",
+      "$value": "512px",
+      "$extensions": {
+        "putio": {
+          "cssName": "space-128",
+          "mode": "global",
+          "figma": true
+        }
+      }
     }
   },
   "radius": {

package/dist/tokens.flat.json

@@ -3460,7 +3460,8 @@
     "type": "dimension",
     "mode": "global",
     "value": "4px",
-    "originalValue": "4px"
+    "originalValue": "4px",
+    "description": "Tailwind's spacing unit: --space-N is N × 4px, as p-N is."
   },
   "spacing.2": {
     "cssName": "--space-2",
@@ -3473,41 +3474,83 @@
     "cssName": "--space-3",
     "type": "dimension",
     "mode": "global",
-    "value": "16px",
-    "originalValue": "16px"
+    "value": "12px",
+    "originalValue": "12px"
   },
   "spacing.4": {
     "cssName": "--space-4",
     "type": "dimension",
     "mode": "global",
-    "value": "32px",
-    "originalValue": "32px"
+    "value": "16px",
+    "originalValue": "16px"
   },
   "spacing.5": {
     "cssName": "--space-5",
     "type": "dimension",
     "mode": "global",
-    "value": "64px",
-    "originalValue": "64px"
+    "value": "20px",
+    "originalValue": "20px"
   },
   "spacing.6": {
     "cssName": "--space-6",
     "type": "dimension",
     "mode": "global",
-    "value": "128px",
-    "originalValue": "128px"
+    "value": "24px",
+    "originalValue": "24px"
   },
   "spacing.7": {
     "cssName": "--space-7",
     "type": "dimension",
     "mode": "global",
-    "value": "256px",
-    "originalValue": "256px"
+    "value": "28px",
+    "originalValue": "28px"
   },
   "spacing.8": {
     "cssName": "--space-8",
     "type": "dimension",
     "mode": "global",
+    "value": "32px",
+    "originalValue": "32px"
+  },
+  "spacing.10": {
+    "cssName": "--space-10",
+    "type": "dimension",
+    "mode": "global",
+    "value": "40px",
+    "originalValue": "40px"
+  },
+  "spacing.12": {
+    "cssName": "--space-12",
+    "type": "dimension",
+    "mode": "global",
+    "value": "48px",
+    "originalValue": "48px"
+  },
+  "spacing.16": {
+    "cssName": "--space-16",
+    "type": "dimension",
+    "mode": "global",
+    "value": "64px",
+    "originalValue": "64px"
+  },
+  "spacing.32": {
+    "cssName": "--space-32",
+    "type": "dimension",
+    "mode": "global",
+    "value": "128px",
+    "originalValue": "128px"
+  },
+  "spacing.64": {
+    "cssName": "--space-64",
+    "type": "dimension",
+    "mode": "global",
+    "value": "256px",
+    "originalValue": "256px"
+  },
+  "spacing.128": {
+    "cssName": "--space-128",
+    "type": "dimension",
+    "mode": "global",
     "value": "512px",
     "originalValue": "512px"
   },

package/dist/tokens.js

@@ -3462,7 +3462,8 @@ export const tokens = {
     "type": "dimension",
     "mode": "global",
     "value": "4px",
-    "originalValue": "4px"
+    "originalValue": "4px",
+    "description": "Tailwind's spacing unit: --space-N is N × 4px, as p-N is."
   },
   "spacing.2": {
     "cssName": "--space-2",
@@ -3475,41 +3476,83 @@ export const tokens = {
     "cssName": "--space-3",
     "type": "dimension",
     "mode": "global",
-    "value": "16px",
-    "originalValue": "16px"
+    "value": "12px",
+    "originalValue": "12px"
   },
   "spacing.4": {
     "cssName": "--space-4",
     "type": "dimension",
     "mode": "global",
-    "value": "32px",
-    "originalValue": "32px"
+    "value": "16px",
+    "originalValue": "16px"
   },
   "spacing.5": {
     "cssName": "--space-5",
     "type": "dimension",
     "mode": "global",
-    "value": "64px",
-    "originalValue": "64px"
+    "value": "20px",
+    "originalValue": "20px"
   },
   "spacing.6": {
     "cssName": "--space-6",
     "type": "dimension",
     "mode": "global",
-    "value": "128px",
-    "originalValue": "128px"
+    "value": "24px",
+    "originalValue": "24px"
   },
   "spacing.7": {
     "cssName": "--space-7",
     "type": "dimension",
     "mode": "global",
-    "value": "256px",
-    "originalValue": "256px"
+    "value": "28px",
+    "originalValue": "28px"
   },
   "spacing.8": {
     "cssName": "--space-8",
     "type": "dimension",
     "mode": "global",
+    "value": "32px",
+    "originalValue": "32px"
+  },
+  "spacing.10": {
+    "cssName": "--space-10",
+    "type": "dimension",
+    "mode": "global",
+    "value": "40px",
+    "originalValue": "40px"
+  },
+  "spacing.12": {
+    "cssName": "--space-12",
+    "type": "dimension",
+    "mode": "global",
+    "value": "48px",
+    "originalValue": "48px"
+  },
+  "spacing.16": {
+    "cssName": "--space-16",
+    "type": "dimension",
+    "mode": "global",
+    "value": "64px",
+    "originalValue": "64px"
+  },
+  "spacing.32": {
+    "cssName": "--space-32",
+    "type": "dimension",
+    "mode": "global",
+    "value": "128px",
+    "originalValue": "128px"
+  },
+  "spacing.64": {
+    "cssName": "--space-64",
+    "type": "dimension",
+    "mode": "global",
+    "value": "256px",
+    "originalValue": "256px"
+  },
+  "spacing.128": {
+    "cssName": "--space-128",
+    "type": "dimension",
+    "mode": "global",
     "value": "512px",
     "originalValue": "512px"
   },

package/package.json

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

package/system/README.md

@@ -187,9 +187,9 @@ list. Import it after `tailwindcss` and `@putdotio/design/css`; the
   `text-muted-foreground` resolve through the aliases above.
 - `text-*` sizes set no line height; the document's `--lh-normal` applies until
   a `leading-*` utility sets one.
-- TV tokens, z-indexes, breakpoints, and spacing stay out. Deprecated tokens stay in until a major release removes them.
-  Spacing utilities keep Tailwind's linear `--spacing` scale, not the
-  `--space-*` steps. Tailwind defaults that put.io does not define, such as
+- TV tokens, z-indexes and breakpoints stay out. Deprecated tokens stay in until a major release removes them.
+- `--spacing` is `var(--space-1)`, so `p-4` is 16px at any root size and equals
+  `--space-4`. Tailwind defaults that put.io does not define, such as
   `rounded-xl`, stay available.
 
 ### State via `data-state`, not class flags

package/system/components.css

@@ -204,8 +204,8 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
    each preview card. 11 files used to duplicate this verbatim.
    =========================================================== */
 .head {
-  display: flex; align-items: baseline; gap: 14px;
-  padding-bottom: 10px;
+  display: flex; align-items: baseline; gap: 16px;
+  padding-bottom: 8px;
   border-bottom: 1px solid var(--line);
 }
 .head .ix {
@@ -254,8 +254,8 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   border-radius: var(--panel-radius);
   overflow: hidden;
 }
-.panel-pad     { padding: 14px 16px; }
-.panel-pad-lg  { padding: 18px 20px; }
+.panel-pad     { padding: 16px; }
+.panel-pad-lg  { padding: 16px 20px; }
 
 /* ===========================================================
    Field primitives — production parity with app.put.io forms.
@@ -344,15 +344,15 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 .form-stack {
   display: flex;
   flex-direction: column;
-  gap: 14px;       /* between label-group rows (label + field + helper) */
+  gap: 16px;       /* between label-group rows (label + field + helper) */
 }
-.form-stack.tight { gap: 10px; }
+.form-stack.tight { gap: 8px; }
 .form-stack.loose { gap: 20px; }
 
 .form-group {
   display: flex;
   flex-direction: column;
-  gap: 6px;        /* label ↔ field ↔ helper/error */
+  gap: 8px;        /* label ↔ field ↔ helper/error */
 }
 .form-group .label { margin-bottom: 0; }   /* gap owns the rhythm now */
 .form-group .hint  { margin-top: 0; }
@@ -390,7 +390,7 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   display: flex;
   align-items: start;
   gap: 8px;
-  padding: 8px 10px;
+  padding: 8px;
   border: 1px solid var(--alert-info-border);
   border-radius: var(--alert-radius);
   background: var(--alert-info-bg);
@@ -454,8 +454,8 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 .form-reveal[data-state="open"] { grid-template-rows: 1fr; opacity: 1; }
 /* Inside a .form-group the row absorbs the group gap, so a closed row
    adds no space and an open one sits the usual 6px under its field. */
-.form-group > .form-reveal { margin-top: -6px; }
-.form-group > .form-reveal .form-callout { padding-top: 6px; }
+.form-group > .form-reveal { margin-top: -8px; }
+.form-group > .form-reveal .form-callout { padding-top: 8px; }
 
 /* ===========================================================
    One-time password — one real input, six visual slots.
@@ -568,7 +568,8 @@ 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. Controls are 44px;
+   .auth-main, a quiet link row in .auth-footer. Controls keep the
+   standard 36px box;
    the title is the only heading. Under 640px the gutters drop to 24px so the logo lines
    up with the column.
    =========================================================== */
@@ -593,7 +594,9 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 24px 24px 48px;
+  /* Optical centre: the extra bottom padding lifts the form so its middle
+     sits near 45% of the viewport height, never below the true middle. */
+  padding: 24px 24px max(48px, 10vh);
 }
 .auth-column {
   width: 100%;
@@ -615,9 +618,7 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   font-weight: var(--fw-regular);
   color: var(--text-secondary);
 }
-.auth-column .field { height: 44px; }
 .auth-column form > .form-reveal .form-callout { padding-top: 12px; font-size: var(--fs-base); }
-.auth-column .btn-block { height: 44px; }
 .auth-column form > .form-reveal + .btn-block { margin-top: 16px; }
 .auth-links {
   margin: 24px 0 0;
@@ -668,7 +669,7 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   display: flex; flex-direction: column; gap: 1px;
 }
 .menu-pop .menu-label {
-  padding: 6px 10px 4px;
+  padding: 8px 8px 4px;
   font-family: var(--font-mono); font-size: 10.5px;
   letter-spacing: 0.06em; text-transform: uppercase;
   /* --menu-label, not the generic --text-secondary. Same value in both modes

package/tokens/foundation.css

@@ -47,7 +47,7 @@ h1, .h1 {
   font-weight: var(--fw-bold);
   line-height: var(--lh-tight);
   letter-spacing: var(--tracking-tight);
-  margin: 0 0 var(--space-3);
+  margin: 0 0 var(--space-4);
 }
 
 h2, .h2 {
@@ -55,7 +55,7 @@ h2, .h2 {
   font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
   line-height: var(--lh-tight);
-  margin: 0 0 var(--space-3);
+  margin: 0 0 var(--space-4);
 }
 
 h3, .h3 {
@@ -85,7 +85,7 @@ p, .body {
   font-size: var(--fs-base);
   font-weight: var(--fw-regular);
   line-height: var(--lh-normal);
-  margin: 0 0 var(--space-3);
+  margin: 0 0 var(--space-4);
 }
 
 .lead {

package/tokens/primitives.tokens.json

@@ -451,7 +451,8 @@
           "mode": "global",
           "figma": true
         }
-      }
+      },
+      "$description": "Tailwind's spacing unit: --space-N is N × 4px, as p-N is."
     },
     "2": {
       "$type": "dimension",
@@ -466,7 +467,7 @@
     },
     "3": {
       "$type": "dimension",
-      "$value": "16px",
+      "$value": "12px",
       "$extensions": {
         "putio": {
           "cssName": "space-3",
@@ -477,7 +478,7 @@
     },
     "4": {
       "$type": "dimension",
-      "$value": "32px",
+      "$value": "16px",
       "$extensions": {
         "putio": {
           "cssName": "space-4",
@@ -488,7 +489,7 @@
     },
     "5": {
       "$type": "dimension",
-      "$value": "64px",
+      "$value": "20px",
       "$extensions": {
         "putio": {
           "cssName": "space-5",
@@ -499,7 +500,7 @@
     },
     "6": {
       "$type": "dimension",
-      "$value": "128px",
+      "$value": "24px",
       "$extensions": {
         "putio": {
           "cssName": "space-6",
@@ -510,7 +511,7 @@
     },
     "7": {
       "$type": "dimension",
-      "$value": "256px",
+      "$value": "28px",
       "$extensions": {
         "putio": {
           "cssName": "space-7",
@@ -521,7 +522,7 @@
     },
     "8": {
       "$type": "dimension",
-      "$value": "512px",
+      "$value": "32px",
       "$extensions": {
         "putio": {
           "cssName": "space-8",
@@ -529,6 +530,72 @@
           "figma": true
         }
       }
+    },
+    "10": {
+      "$type": "dimension",
+      "$value": "40px",
+      "$extensions": {
+        "putio": {
+          "cssName": "space-10",
+          "mode": "global",
+          "figma": true
+        }
+      }
+    },
+    "12": {
+      "$type": "dimension",
+      "$value": "48px",
+      "$extensions": {
+        "putio": {
+          "cssName": "space-12",
+          "mode": "global",
+          "figma": true
+        }
+      }
+    },
+    "16": {
+      "$type": "dimension",
+      "$value": "64px",
+      "$extensions": {
+        "putio": {
+          "cssName": "space-16",
+          "mode": "global",
+          "figma": true
+        }
+      }
+    },
+    "32": {
+      "$type": "dimension",
+      "$value": "128px",
+      "$extensions": {
+        "putio": {
+          "cssName": "space-32",
+          "mode": "global",
+          "figma": true
+        }
+      }
+    },
+    "64": {
+      "$type": "dimension",
+      "$value": "256px",
+      "$extensions": {
+        "putio": {
+          "cssName": "space-64",
+          "mode": "global",
+          "figma": true
+        }
+      }
+    },
+    "128": {
+      "$type": "dimension",
+      "$value": "512px",
+      "$extensions": {
+        "putio": {
+          "cssName": "space-128",
+          "mode": "global",
+          "figma": true
+        }
+      }
     }
   },
   "radius": {