@putdotio/design 5.0.0 → 5.1.0

package/DESIGN.md

@@ -74,7 +74,7 @@ A web mock is never a native spec. Every surface binds at one tier, and every ca
 - **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.
 
-Tier 1, 3, and 4 cards are Components (put.io owns the recipe); tier 2 cards are Elements (the platform owns the control). Per-platform contracts: `platforms/<platform>/DESIGN.md`. On every tier, file-type icons are brand-yellow Phosphor icons.
+Tier 1, 3, and 4 cards are Components (put.io owns the recipe); tier 2 cards are Elements (the platform owns the control). Per-platform contracts: `platforms/<platform>/DESIGN.md`, or the app repository it points to. On every tier, file-type icons are brand-yellow Phosphor icons.
 
 ## Colors
 
@@ -116,7 +116,7 @@ Default radius `6px`; `4px` for tight controls, `8px` or `10px` for panels, pill
 - **Primary:** `--button-primary-bg`, hover `--button-primary-bg-hover`, label `--button-primary-fg`. At most one per action group.
 - **Secondary:** `--button-default-bg` plus a `--border` border; hover steps both (`--button-default-bg-hover`, `--border-hover`).
 - **Ghost:** text only, `--button-ghost-fg`; hover adds `--button-ghost-bg-hover` and lifts the label to `--button-ghost-fg-hover`. Use it for anything quieter than secondary: header `Sign in`, toolbar actions, `Cancel` beside a confirm, icon-only buttons.
-- **Disabled:** colour drops to `--solid` at full opacity: filled variants take a `--solid` fill with `--solid-foreground` labels; quiet ones take `--solid` text. A finished action stays filled with `data-state="success"` on `.btn-success`.
+- **Disabled:** submit buttons are never disabled at rest; the submit validates. A filled button is disabled only while its action runs (with a spinner) or once it is done, so it keeps its own fill and label at full opacity; a finished 2FA “Verified” is a `.btn-success` with `data-state="success"`. Secondary and quiet buttons drop their text to `--solid` at full opacity.
 - **Focus:** `--shadow-focus`, a 2px `--bg` gap then a 2px `--solid-hover` ring, at least 3:1 against the page and panels in both modes.
 - A bordered button always fills (secondary). Border-only buttons read smaller beside solid fills and vanish on dark.
 - Four sizes share one box per size across tiers: default 36px, `md` 32px, `sm` 28px, `xs` 24px. Read `--button-height*`, `--button-padding-x*`, `--button-label-size*`, `--button-tracking*`, `--button-icon-size`, `--button-gap`.
@@ -127,6 +127,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.
+- A field's own link sits at the end of its label row: `.label-action`, placed after the field so Tab reaches the field first. It is `--fs-caption`, `--text-secondary` (hover `--text`), no underline, on the label's baseline.
 - 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` (`8px` gap) spaces a control and its feedback.
@@ -134,16 +135,17 @@ Default radius `6px`; `4px` for tight controls, `8px` or `10px` for panels, pill
 
 ### 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-note`, `.auth-links`, `.auth-footer`.
+- 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-note`, `.auth-actions`, `.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 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-ui`.
-- Text is one size: everything except the title and fields is `--fs-ui`. That covers labels, hints, `.auth-note` lines, errors, the link row, and the footer. Fields take `--fs-field`.
+- A quiet centred footer links Terms of Service, Privacy Policy, and Help in muted `--fs-caption`, separated by middots, 16px above the page bottom.
+- Text is one size: labels, hints, `.auth-note` lines, errors, and the link row take `--fs-ui`. The footer and a label's own action take `--fs-caption`; fields take `--fs-field`.
 - One title per screen: `--fs-title` (`22px`), medium, `--tracking-snug` (`-0.01em`). No subtitles, taglines, or marketing lines; copy stays short.
 - 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.
+- The primary button is full-width yellow. “Forgot password?” is the Password field's `.label-action`. Other secondary actions sit under the form in `.auth-links`: a bare link stays muted (“Use a recovery code”, “← Back to sign in”); a prompt's link (“New to put.io? Sign up”, “Wrong account? Sign out”) is `--text`, medium, and underlines only on hover. Two items split to the edges; a lone link or prompt centres.
+- Buttons outside a form sit in `.auth-actions`, 16px below what precedes them; a description `.auth-note` right before them leaves 28px. A back link leads with Phosphor's arrow-left as inline SVG. A legal line under the submit button centres on it.
+- Tab order runs fields (each followed by its label action), 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.
 - Form errors: one message in a `.form-reveal` row right above the submit button, in red `--fs-ui` text, 8px under the fields. Invalid fields turn red. Auth forms never use the boxed `.form-callout`.
 - Copy: “Sign in”, “Sign up”, and “That username or password doesn't look right.”
 - auth.put.io still ships the older card layout: drift.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@putdotio/design",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Public put.io design tokens, brand assets, and design-system guidance.",
   "license": "MIT",
   "type": "module",
@@ -69,7 +69,7 @@
     "dev": "node scripts/serve-system.ts",
     "tokens:build": "node scripts/build-tokens.ts",
     "tokens:check": "node scripts/build-tokens.ts && node scripts/check-component-css.ts && node scripts/check-tailwind-theme.ts && node scripts/verify-design-system.ts",
-    "artifact": "node scripts/build-artifact.ts && node scripts/build-canvases.ts",
+    "artifact": "node scripts/build-artifact.ts",
     "test:config": "node --test tests/playwright-config.test.mjs",
     "typecheck:scripts": "tsc --noEmit --ignoreConfig --skipLibCheck --module ESNext --moduleResolution Bundler --target ES2022 --strict --types node scripts/*.ts playwright.config.ts tests/e2e/*.ts sst.config.ts infra/*.ts",
     "html:check": "html-validate \"system/**/*.html\"",

package/system/README.md

@@ -87,6 +87,7 @@ its cards use itself.
 - **Yellow as text on light** uses `--yellow-text-secondary` (≈5:1, AA); `--yellow-solid` is fill-only on light backgrounds.
 - **Labels on yellow** use `--primary-foreground`, a warm dark that passes AA on the yellow fill.
 - **One design, two modes.** Light and dark are the same markup and components with different token values. Toggle `.dark` on `<html>`; one page serves both modes. Components consume semantic tokens (`--bg`, `--text`, `--border`, `--accent`, …) instead of raw `#hex` or `hsl()`.
+- **Text sizes are tokens.** The guide, the web previews, and their shared CSS (`_tier.css`, `_frame.css`, `_element.css`) set text with a role (`--fs-ui`, `--fs-body`, `--fs-caption`, `--fs-field`) or a heading step, per [Typography](../DESIGN.md#typography). Icon glyphs keep px, rules under `.tv` keep the TV grid, and native and TV previews keep platform px. `pnpm verify` fails on any other literal font size.
 - **Wordmarks are optically pre-centred.** All three logo SVGs carry built-in top padding in the viewBox (retro pair `0 -16 376 112`, `logo.svg` `0 -24.44 621.79 176.055`). Flex-centre them as-is, with no `translateY` nudge. Height-set placements size boxes at 7/6 of the ink height.
 
 Icons, fields and panels, and raw filenames follow the root

package/system/components.css

@@ -148,22 +148,14 @@ button i { font-size: var(--button-icon-size); line-height: 1; display: inline-f
 
 /* States */
 /* Bare disabled buttons fade; hover styles above are gated on :not(:disabled).
-   Filled variants instead drop their fill to --solid at full opacity, so a
-   disabled "Verifying…" stays legible. A finished action keeps its success
-   fill with data-state="success" (2FA "Verified"). */
+   Submit buttons are never disabled at rest: the submit validates. A filled
+   button is disabled only while its action runs (with a spinner) or once it
+   is done, so it keeps its own fill and label at full opacity: "Verifying…"
+   stays yellow, a finished 2FA "Verified" stays green with
+   data-state="success". */
 button:disabled { opacity: 0.3; cursor: not-allowed; }
-:is(.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-invert):not(.btn-quiet):disabled {
-  opacity: 1;
-  background: var(--solid);
-  border-color: var(--solid);
-  color: var(--solid-foreground);
-}
+:is(.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-invert):not(.btn-quiet):disabled { opacity: 1; }
 .btn-default:not(.btn-quiet):disabled { opacity: 1; color: var(--solid); }
-.btn-success[data-state="success"]:disabled {
-  background: var(--button-success-bg);
-  border-color: var(--button-success-bg);
-  color: var(--button-success-fg);
-}
 /* An opaque double ring: a --bg gap, then --solid-hover, ≥3:1 on page and panels. */
 button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
 
@@ -360,8 +352,21 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 .form-group .hint  { margin-top: 0; }
 .form-group > .form-callout.inline { margin-top: 0; }
 
-/* Label-row: label on the left, link on the right (e.g. "Forgot your
-   password?"). Sits ABOVE the field, inside a .form-group. */
+/* Label action: a field's own link at the end of its label row (e.g.
+   "Forgot password?"). Place .label-action after the field in the DOM, so
+   Tab reaches the field before its link; the grid lifts it onto the label's
+   row and aligns the two on their baselines. */
+.form-group:has(> .label-action) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: 12px;
+}
+.form-group:has(> .label-action) > * { grid-column: 1 / -1; }
+.form-group:has(> .label-action) > .label { grid-row: 1; grid-column: 1; align-self: baseline; }
+.form-group > .label-action { grid-row: 1; grid-column: 2; align-self: baseline; }
+
+/* Label-row: the older wrapper, label and link before the field. Prefer
+   .label-action, which keeps the link after its field in Tab order. */
 .form-group .label-row {
   display: flex;
   justify-content: space-between;
@@ -369,12 +374,14 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   gap: 12px;
 }
 .form-group .label-row .label { margin-bottom: 0; }
+.form-group > .label-action,
 .form-group .label-row a {
-  font-size: var(--fs-ui);
+  font-size: var(--fs-caption);
   color: var(--text-secondary);
   text-decoration: none;
   white-space: nowrap;
 }
+.form-group > .label-action:hover,
 .form-group .label-row a:hover { color: var(--text); }
 
 /* ===========================================================
@@ -571,9 +578,9 @@ 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 keep the
-   standard 36px box; the title is the only heading. All other text
-   (labels, hints, notes, errors, links, footer) is the UI role, --fs-ui;
-   fields take --fs-field. Under
+   standard 36px box; the title is the only heading. Labels, hints, notes,
+   errors and links take the UI role, --fs-ui; the footer and a label's own
+   action take --fs-caption; fields take --fs-field. Under
    640px the gutters drop to 24px so the logo lines up with the column.
    =========================================================== */
 .auth-page {
@@ -632,6 +639,13 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 .auth-note a { color: var(--text); text-underline-offset: 3px; }
 .auth-column form > .form-reveal .form-callout { padding-top: 8px; }
 .auth-column form > .form-reveal + .btn-block { margin-top: 16px; }
+/* A legal line under the submit button centres on it. */
+.auth-column form > .btn-block + .auth-note { margin-top: 16px; text-align: center; }
+/* Buttons outside a form ("Open mail", "Resend link"): 16px under what
+   precedes them, but a description right before them spaces them like the
+   title does, 28px. */
+.auth-actions { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
+.auth-column > .auth-note + .auth-actions { margin-top: 28px; }
 .auth-links {
   margin: 24px 0 0;
   display: flex;
@@ -642,26 +656,52 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   color: var(--text-secondary);
   font-size: var(--fs-ui);
 }
-/* A prompt's link reads as text ("New to put.io? Sign up"); a bare
-   action link ("Use a recovery code") stays muted. The token base sizes
-   every p at --fs-body, so a prompt inherits the row's size. */
+/* A prompt's link reads as text ("New to put.io? Sign up"): medium, no
+   underline until hover. A bare action link ("Use a recovery code") stays
+   muted. The token base sizes every p at --fs-body, so a prompt inherits
+   the row's size. */
 .auth-links p { margin: 0; font-size: inherit; }
-.auth-links a { color: var(--text); text-underline-offset: 3px; }
-.auth-links > a { color: var(--text-secondary); text-decoration: none; }
-.auth-links > a:hover { color: var(--text); }
+.auth-links a {
+  color: var(--text);
+  font-weight: var(--fw-medium);
+  text-decoration: none;
+  text-underline-offset: 3px;
+}
+.auth-links a:hover { text-decoration: underline; }
+.auth-links > a { color: var(--text-secondary); font-weight: inherit; }
+.auth-links > a:hover { color: var(--text); text-decoration: none; }
+/* Two items split to the edges; a lone link or prompt centres. */
+.auth-links > :only-child { margin-inline: auto; text-align: center; }
+/* A back link leads with Phosphor's arrow-left, an inline SVG (or the icon font). */
+.auth-links > a:has(> :is(svg, i)) { display: inline-flex; align-items: center; gap: 4px; }
+.auth-links > a > svg { width: 16px; height: 16px; flex-shrink: 0; }
+.auth-links > a > i { font-size: 16px; }
 .auth-footer {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px 16px;
-  padding: 24px 32px 28px;
-  font-size: var(--fs-ui);
+  padding: 24px 32px 16px;
+  font-size: var(--fs-caption);
 }
 .auth-footer a { color: var(--text-secondary); text-decoration: none; }
 .auth-footer a:hover { color: var(--text); }
+/* A middot centres in the gap before each link after the first. The empty
+   alt keeps it out of the link's accessible name. */
+.auth-footer > * + * { position: relative; }
+.auth-footer > * + *::before {
+  content: "·";
+  content: "·" / "";
+  position: absolute;
+  right: 100%;
+  width: 16px;
+  text-align: center;
+  color: var(--text-secondary);
+  pointer-events: none;
+}
 @media (max-width: 640px) {
   .auth-header { padding: 24px; }
-  .auth-footer { padding: 24px; }
+  .auth-footer { padding: 24px 24px 16px; }
 }
 
 /* Floating-menu surface — one recipe for dropdowns, context menus,