@putdotio/design 3.6.3 → 3.8.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
@@ -298,17 +312,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 +424,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 +532,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 +562,100 @@ 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. The page re-points
+   --field-bg / --field-border, so .field and .otp-slot render filled
+   without a variant. Controls are 44px; the title is the only
+   heading. Under 640px the gutters drop to 24px so the logo lines
+   up with the column.
+   =========================================================== */
+.auth-page {
+  --field-bg: var(--bg-secondary);
+  --field-border: var(--line);
+  /* Focus a step past hover, so it holds 3:1 against the filled field. */
+  --field-border-focus: var(--solid-hover);
+  --field-ring: 0 0 0 1px var(--solid-hover);
+  box-sizing: border-box;
+  min-height: 100dvh;
+  display: flex;
+  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

@@ -643,154 +643,184 @@
       }
     },
     "input": {
+      "$description": "Deprecated shadcn-shaped aliases of component.field. shadcn reads only --input (component.alias.input); author against --field-*.",
       "background": {
         "$type": "color",
         "$value": "{component.field.background}",
+        "$description": "Deprecated alias. Use --field-bg (component.field.background).",
         "$extensions": {
           "putio": {
             "cssName": "input-bg",
-            "mode": "light"
+            "mode": "light",
+            "deprecated": true
           }
         }
       },
       "backgroundDark": {
         "$type": "color",
         "$value": "{component.field.backgroundDark}",
+        "$description": "Deprecated alias. Use --field-bg (component.field.backgroundDark).",
         "$extensions": {
           "putio": {
             "cssName": "input-bg",
-            "mode": "dark"
+            "mode": "dark",
+            "deprecated": true
           }
         }
       },
       "border": {
         "$type": "color",
         "$value": "{component.field.border}",
+        "$description": "Deprecated alias. Use --field-border (component.field.border).",
         "$extensions": {
           "putio": {
             "cssName": "input-border",
-            "mode": "light"
+            "mode": "light",
+            "deprecated": true
           }
         }
       },
       "borderDark": {
         "$type": "color",
         "$value": "{component.field.borderDark}",
+        "$description": "Deprecated alias. Use --field-border (component.field.borderDark).",
         "$extensions": {
           "putio": {
             "cssName": "input-border",
-            "mode": "dark"
+            "mode": "dark",
+            "deprecated": true
           }
         }
       },
       "radius": {
         "$type": "dimension",
         "$value": "{component.field.radius}",
+        "$description": "Deprecated alias. Use --field-radius (component.field.radius).",
         "$extensions": {
           "putio": {
             "cssName": "input-radius",
-            "mode": "global"
+            "mode": "global",
+            "deprecated": true
           }
         }
       },
       "borderHover": {
         "$type": "color",
         "$value": "{component.field.borderHover}",
-        "$description": "shadcn-friendly alias of --field-border-hover. Always aliases the field token so the two name systems cannot drift.",
+        "$description": "Deprecated alias. Use --field-border-hover (component.field.borderHover).",
         "$extensions": {
           "putio": {
             "cssName": "input-border-hover",
-            "mode": "light"
+            "mode": "light",
+            "deprecated": true
           }
         }
       },
       "borderHoverDark": {
         "$type": "color",
         "$value": "{component.field.borderHoverDark}",
+        "$description": "Deprecated alias. Use --field-border-hover (component.field.borderHoverDark).",
         "$extensions": {
           "putio": {
             "cssName": "input-border-hover",
-            "mode": "dark"
+            "mode": "dark",
+            "deprecated": true
           }
         }
       },
       "borderFocus": {
         "$type": "color",
         "$value": "{component.field.borderFocus}",
+        "$description": "Deprecated alias. Use --field-border-focus (component.field.borderFocus).",
         "$extensions": {
           "putio": {
             "cssName": "input-border-focus",
-            "mode": "light"
+            "mode": "light",
+            "deprecated": true
           }
         }
       },
       "borderFocusDark": {
         "$type": "color",
         "$value": "{component.field.borderFocusDark}",
+        "$description": "Deprecated alias. Use --field-border-focus (component.field.borderFocusDark).",
         "$extensions": {
           "putio": {
             "cssName": "input-border-focus",
-            "mode": "dark"
+            "mode": "dark",
+            "deprecated": true
           }
         }
       },
       "ring": {
         "$type": "string",
         "$value": "{component.field.ring}",
+        "$description": "Deprecated alias. Use --field-ring (component.field.ring).",
         "$extensions": {
           "putio": {
             "cssName": "input-ring",
-            "mode": "light"
+            "mode": "light",
+            "deprecated": true
           }
         }
       },
       "ringDark": {
         "$type": "string",
         "$value": "{component.field.ringDark}",
+        "$description": "Deprecated alias. Use --field-ring (component.field.ringDark).",
         "$extensions": {
           "putio": {
             "cssName": "input-ring",
-            "mode": "dark"
+            "mode": "dark",
+            "deprecated": true
           }
         }
       },
       "text": {
         "$type": "color",
         "$value": "{component.field.text}",
+        "$description": "Deprecated alias. Use --field-text (component.field.text).",
         "$extensions": {
           "putio": {
             "cssName": "input-text",
-            "mode": "light"
+            "mode": "light",
+            "deprecated": true
           }
         }
       },
       "textDark": {
         "$type": "color",
         "$value": "{component.field.textDark}",
+        "$description": "Deprecated alias. Use --field-text (component.field.textDark).",
         "$extensions": {
           "putio": {
             "cssName": "input-text",
-            "mode": "dark"
+            "mode": "dark",
+            "deprecated": true
           }
         }
       },
       "placeholder": {
         "$type": "color",
         "$value": "{component.field.placeholder}",
+        "$description": "Deprecated alias. Use --field-placeholder (component.field.placeholder).",
         "$extensions": {
           "putio": {
             "cssName": "input-placeholder",
-            "mode": "light"
+            "mode": "light",
+            "deprecated": true
           }
         }
       },
       "placeholderDark": {
         "$type": "color",
         "$value": "{component.field.placeholderDark}",
+        "$description": "Deprecated alias. Use --field-placeholder (component.field.placeholderDark).",
         "$extensions": {
           "putio": {
             "cssName": "input-placeholder",
-            "mode": "dark"
+            "mode": "dark",
+            "deprecated": true
           }
         }
       }
@@ -1135,22 +1165,26 @@
       "foregroundMuted": {
         "$type": "color",
         "$value": "{color.neutral.light.textSecondary}",
+        "$description": "Deprecated alias. Use --text-secondary (color.neutral.light.textSecondary).",
         "$extensions": {
           "putio": {
             "cssName": "foreground-muted",
             "mode": "light",
-            "figma": false
+            "figma": false,
+            "deprecated": true
           }
         }
       },
       "foregroundMutedDark": {
         "$type": "color",
         "$value": "{color.neutral.dark.textSecondary}",
+        "$description": "Deprecated alias. Use --text-secondary (color.neutral.dark.textSecondary).",
         "$extensions": {
           "putio": {
             "cssName": "foreground-muted",
             "mode": "dark",
-            "figma": false
+            "figma": false,
+            "deprecated": true
           }
         }
       },

package/tokens/context.tokens.json

@@ -29,7 +29,7 @@
         "tertiary": {
           "$type": "color",
           "$value": "{context.tv.text.secondary}",
-          "$description": "Deprecated compatibility alias. Use context.tv.text.secondary.",
+          "$description": "Deprecated alias. Use --text-2 (context.tv.text.secondary).",
           "$extensions": {
             "putio": {
               "cssName": "text-3",

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",