@putdotio/design 3.7.0 → 3.9.0

package/system/components.css

@@ -147,11 +147,24 @@ button i { font-size: var(--button-icon-size); line-height: 1; display: inline-f
 .btn-ghost:disabled { opacity: 1; color: var(--solid); background: transparent; }
 
 /* States */
-/* Disabled buttons freeze their resting fill at reduced opacity and ignore
-   hover entirely — hover styles above are gated on :not(:disabled), so there
-   is no need to (and we must not) reset background to `inherit` here, which
-   would strip a disabled primary/danger button of its color on hover. */
+/* 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"). */
 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);
+}
+.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); }
 
 /* Loading state — hides label, paints a CSS spinner over the button */
@@ -211,8 +224,9 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 
      .card  = focal, elevated component surface. Sits ON --bg,
               uses --component-bg so it reads as raised in dark
-              and contained in light. Auth card, modal, settings
-              card, anything the user's attention should go TO.
+              and contained in light. Modal, settings card,
+              anything the user's attention should go TO. Auth
+              pages take neither: see .auth-page.
 
      .panel = quiet inline reference container. Sits ON --bg,
               uses --bg-secondary so it stays recessive but
@@ -251,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
 
@@ -298,17 +313,20 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 }
 /* Invalid — border + text only, no surface fill.
    Step convention: rest = step 7 (--red-border),
-   focus/hover = step 8 (--red-border-hover). */
+   hover = step 8 (--red-border-hover), focus = step 9 (--red-solid),
+   which holds 3:1 against the field fill.
+   The border fades in over --dur-reveal, in step with .form-reveal. */
 .field[aria-invalid="true"] {
   border-color: var(--red-border);
+  transition-duration: var(--dur-reveal);
 }
 .field[aria-invalid="true"]:hover {
   border-color: var(--red-border-hover);
 }
 .field[aria-invalid="true"]:focus,
 .field[aria-invalid="true"]:focus-visible {
-  border-color: var(--red-border-hover);
-  box-shadow: 0 0 0 1px var(--red-border-hover);
+  border-color: var(--red-solid);
+  box-shadow: 0 0 0 1px var(--red-solid);
 }
 /* Loading / async-validating — suppress focus ring so the spinner
    reads as the dominant signal. */
@@ -407,6 +425,38 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   font-size: var(--fs-sm);
 }
 
+/* ===========================================================
+   Form reveal — eases a field or form error in without a layout jump.
+
+   Every field error uses it: under its field inside .form-group, or
+   as a form's one message above the submit button. The row animates
+   its height through grid-template-rows (0fr → 1fr) with opacity, so
+   whatever sits below slides instead of jumping. Markup:
+   .form-reveal > div > .form-callout.inline[data-state="error"]; the
+   inner div clips, so spacing on the message collapses with it. Keep
+   the message (role="alert") mounted and rendered, so screen readers
+   hear new text: set its text and data-state="open" together; on
+   close, set data-state="closed" and empty the message once the row
+   has collapsed (transitionend), so it does not snap and a closed row
+   says nothing. The token base collapses the transition under
+   prefers-reduced-motion.
+   =========================================================== */
+.form-reveal {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows var(--dur-reveal) var(--ease-out),
+    opacity var(--dur-reveal) var(--ease-out);
+}
+.form-reveal > * { min-height: 0; overflow: hidden; }
+.form-reveal .form-callout { margin: 0; }
+.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; }
+
 /* ===========================================================
    One-time password — one real input, six visual slots.
 
@@ -483,10 +533,11 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 .otp:has(.otp-input[aria-invalid="true"]) .otp-slot {
   border-color: var(--red-border);
   color: var(--red-text-secondary);
+  transition-duration: var(--dur-reveal);
 }
 .otp:has(.otp-input[aria-invalid="true"]):focus-within .otp-slot[data-state="active"] {
-  border-color: var(--red-border-hover);
-  box-shadow: 0 0 0 1px var(--red-border-hover);
+  border-color: var(--red-solid);
+  box-shadow: 0 0 0 1px var(--red-solid);
 }
 .otp[data-state="success"] .otp-slot {
   border-color: var(--green-border);
@@ -512,6 +563,93 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   cursor: not-allowed;
 }
 
+/* ===========================================================
+   Auth page — sign in, sign up, password reset, two-factor.
+
+   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;
+   the title is the only heading. Under 640px the gutters drop to 24px so the logo lines
+   up with the column.
+   =========================================================== */
+.auth-page {
+  box-sizing: border-box;
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  color: var(--text);
+}
+.auth-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 28px 32px;
+}
+.auth-logo { display: block; height: 30.33px; width: auto; }
+.auth-main {
+  flex: 1 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 24px 48px;
+}
+.auth-column {
+  width: 100%;
+  max-width: 340px;
+  display: flex;
+  flex-direction: column;
+}
+.auth-title {
+  margin: 0 0 28px;
+  font-size: 22px;
+  line-height: 30px;
+  font-weight: var(--fw-medium);
+  letter-spacing: -0.01em;
+  color: var(--text);
+}
+.auth-column .form-stack { gap: 16px; }
+.auth-column .label {
+  font-size: var(--fs-sm);
+  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;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px 16px;
+  color: var(--text-secondary);
+  font-size: var(--fs-base);
+}
+/* A prompt's link reads as text ("New to put.io? Sign up"); a bare
+   action link ("Use a recovery code") stays muted. */
+.auth-links p { margin: 0; }
+.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-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px 16px;
+  padding: 24px 32px 28px;
+  font-size: var(--fs-sm);
+}
+.auth-footer a { color: var(--text-secondary); text-decoration: none; }
+.auth-footer a:hover { color: var(--text); }
+@media (max-width: 640px) {
+  .auth-header { padding: 24px; }
+  .auth-footer { padding: 24px; }
+}
+
 /* Floating-menu surface — one recipe for dropdowns, context menus,
    submenus, and on-player popovers. Cards keep their item styles local.
    Consumed by web-c09-menu.html and web-p06-player.html — it looks unused

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

@@ -86,11 +86,24 @@
     },
     "focus": {
       "$type": "string",
-      "$value": "0 0 0 3px {elevation.focusColor}",
+      "$value": "0 0 0 2px {color.neutral.light.bg}, 0 0 0 4px {color.neutral.light.solidHover}",
       "$extensions": {
         "putio": {
           "cssName": "shadow-focus",
-          "mode": "global",
+          "mode": "light",
+          "figma": false
+        }
+      },
+      "$description": "Button, link, and nav focus: a 2px page-coloured gap, then a 2px opaque ring at least 3:1 against the page and panels."
+    },
+    "focusDark": {
+      "$type": "string",
+      "$value": "0 0 0 2px {color.neutral.dark.bg}, 0 0 0 4px {color.neutral.dark.solidHover}",
+      "$description": "Dark-mode button, link, and nav focus ring.",
+      "$extensions": {
+        "putio": {
+          "cssName": "shadow-focus",
+          "mode": "dark",
           "figma": false
         }
       }
@@ -613,6 +626,17 @@
           }
         }
       },
+      "reveal": {
+        "$type": "duration",
+        "$value": "180ms",
+        "$extensions": {
+          "putio": {
+            "cssName": "dur-reveal",
+            "mode": "global",
+            "figma": true
+          }
+        }
+      },
       "base": {
         "$type": "duration",
         "$value": "200ms",