@putdotio/design 5.0.0 → 5.0.1

package/DESIGN.md

@@ -137,12 +137,12 @@ Default radius `6px`; `4px` for tight controls, `8px` or `10px` for panels, pill
 - 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`.
 - 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`.
+- A quiet centred footer links Terms of Service, Privacy Policy, and Help in muted `--fs-ui`, separated by middots.
 - 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`.
 - 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”.
+- 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”. Two links split to the edges; a lone link or prompt centres. 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, 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.”

package/package.json

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

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

@@ -632,6 +632,8 @@ 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; }
 .auth-links {
   margin: 24px 0 0;
   display: flex;
@@ -649,6 +651,12 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 .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); }
+/* 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;
@@ -659,6 +667,19 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 }
 .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; }