@putdotio/design 3.8.0 → 3.9.0

package/DESIGN.md

@@ -126,7 +126,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.
-- Fields read `--field-bg`, `--field-border`, and `--field-ring` (focus). `aria-invalid="true"` turns border and text red; the fill stays.
+- 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.
 - 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.
@@ -138,7 +138,7 @@ Default radius `6px`; `4px` for tight controls, `8px` or `10px` for panels, pill
 - One left-aligned column, up to `340px`, is centred horizontally and vertically.
 - A quiet centred footer links Terms of Service, Privacy Policy, and Help in muted `--fs-sm`.
 - One title per screen: `22px`, medium, `-0.01em` tracking. No subtitles, taglines, or marketing lines; copy stays short.
-- Fields are filled: the page points `--field-bg` at `--bg-secondary` and `--field-border` at `--line`. Fields and buttons in the column are `44px`.
+- Fields are the standard filled field. Fields and buttons in the column are `44px`.
 - 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/tokens.css

@@ -25,21 +25,21 @@
   --button-ghost-fg: hsl(0, 0%, 43.5%);
   --button-ghost-fg-hover: hsl(0, 0%, 9.0%);
   --button-ghost-bg-hover: hsl(0, 0%, 93.0%);
-  --input-bg: hsl(0, 0%, 100%); /* deprecated: use --field-bg */
-  --input-border: hsl(0, 0%, 85.8%); /* deprecated: use --field-border */
+  --input-bg: hsl(0, 0%, 97.3%); /* deprecated: use --field-bg */
+  --input-border: hsl(0, 0%, 88.7%); /* deprecated: use --field-border */
   --input-border-hover: hsl(0, 0%, 78.0%); /* deprecated: use --field-border-hover */
-  --input-border-focus: hsl(0, 0%, 78.0%); /* deprecated: use --field-border-focus */
-  --input-ring: 0 0 0 1px hsl(0, 0%, 78.0%); /* deprecated: use --field-ring */
+  --input-border-focus: hsl(0, 0%, 52.3%); /* deprecated: use --field-border-focus */
+  --input-ring: 0 0 0 1px hsl(0, 0%, 52.3%); /* deprecated: use --field-ring */
   --input-text: hsl(0, 0%, 9.0%); /* deprecated: use --field-text */
   --input-placeholder: hsl(0, 0%, 43.5%); /* deprecated: use --field-placeholder */
-  --field-bg: hsl(0, 0%, 100%);
-  --field-bg-disabled: hsl(0, 0%, 97.3%);
-  --field-border: hsl(0, 0%, 85.8%);
+  --field-bg: hsl(0, 0%, 97.3%);
+  --field-bg-disabled: hsl(0, 0%, 95.1%);
+  --field-border: hsl(0, 0%, 88.7%);
   --field-border-hover: hsl(0, 0%, 78.0%);
-  --field-border-focus: hsl(0, 0%, 78.0%);
+  --field-border-focus: hsl(0, 0%, 52.3%);
   --field-text: hsl(0, 0%, 9.0%);
   --field-placeholder: hsl(0, 0%, 43.5%);
-  --field-ring: 0 0 0 1px hsl(0, 0%, 78.0%);
+  --field-ring: 0 0 0 1px hsl(0, 0%, 52.3%);
   --panel-bg: hsl(0, 0%, 95.1%);
   --panel-border: hsl(0, 0%, 88.7%);
   --panel-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.08);
@@ -58,7 +58,7 @@
   --card-foreground: hsl(0, 0%, 9.0%);
   --popover: hsl(0, 0%, 95.1%);
   --popover-foreground: hsl(0, 0%, 9.0%);
-  --input: hsl(0, 0%, 85.8%);
+  --input: hsl(0, 0%, 88.7%);
   --file-row-bg: hsla(0, 0%, 0%, 0);
   --file-row-bg-hover: hsl(0, 0%, 97.3%);
   --file-row-bg-active: hsl(0, 0%, 97.3%);
@@ -333,21 +333,21 @@
   --button-ghost-fg: hsl(0, 0%, 62.8%);
   --button-ghost-fg-hover: hsl(0, 0%, 93.0%);
   --button-ghost-bg-hover: hsl(0, 0%, 15.8%);
-  --input-bg: hsl(0, 0%, 8.5%); /* deprecated: use --field-bg */
-  --input-border: hsl(0, 0%, 24.3%); /* deprecated: use --field-border */
+  --input-bg: hsl(0, 0%, 11.0%); /* deprecated: use --field-bg */
+  --input-border: hsl(0, 0%, 20.5%); /* deprecated: use --field-border */
   --input-border-hover: hsl(0, 0%, 31.2%); /* deprecated: use --field-border-hover */
-  --input-border-focus: hsl(0, 0%, 31.2%); /* deprecated: use --field-border-focus */
-  --input-ring: 0 0 0 1px hsl(0, 0%, 31.2%); /* deprecated: use --field-ring */
+  --input-border-focus: hsl(0, 0%, 49.4%); /* deprecated: use --field-border-focus */
+  --input-ring: 0 0 0 1px hsl(0, 0%, 49.4%); /* deprecated: use --field-ring */
   --input-text: hsl(0, 0%, 93.0%); /* deprecated: use --field-text */
   --input-placeholder: hsl(0, 0%, 62.8%); /* deprecated: use --field-placeholder */
-  --field-bg: hsl(0, 0%, 8.5%);
-  --field-bg-disabled: hsl(0, 0%, 11.0%);
-  --field-border: hsl(0, 0%, 24.3%);
+  --field-bg: hsl(0, 0%, 11.0%);
+  --field-bg-disabled: hsl(0, 0%, 13.6%);
+  --field-border: hsl(0, 0%, 20.5%);
   --field-border-hover: hsl(0, 0%, 31.2%);
-  --field-border-focus: hsl(0, 0%, 31.2%);
+  --field-border-focus: hsl(0, 0%, 49.4%);
   --field-text: hsl(0, 0%, 93.0%);
   --field-placeholder: hsl(0, 0%, 62.8%);
-  --field-ring: 0 0 0 1px hsl(0, 0%, 31.2%);
+  --field-ring: 0 0 0 1px hsl(0, 0%, 49.4%);
   --panel-bg: hsl(0, 0%, 13.6%);
   --panel-border: hsl(0, 0%, 20.5%);
   --panel-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.5);
@@ -366,7 +366,7 @@
   --card-foreground: hsl(0, 0%, 93.0%);
   --popover: hsl(0, 0%, 13.6%);
   --popover-foreground: hsl(0, 0%, 93.0%);
-  --input: hsl(0, 0%, 24.3%);
+  --input: hsl(0, 0%, 20.5%);
   --file-row-bg: hsla(0, 0%, 0%, 0);
   --file-row-bg-hover: hsl(0, 0%, 11.0%);
   --file-row-bg-active: hsl(0, 0%, 11.0%);

package/dist/figma/putio.tokens.json

@@ -218,12 +218,12 @@
     "input": {
       "background": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 100%)",
+        "$value": "hsl(0, 0%, 97.3%)",
         "$description": "Deprecated alias. Use --field-bg (component.field.background)."
       },
       "border": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 85.8%)",
+        "$value": "hsl(0, 0%, 88.7%)",
         "$description": "Deprecated alias. Use --field-border (component.field.border)."
       },
       "radius": {
@@ -238,7 +238,7 @@
       },
       "borderFocus": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 78.0%)",
+        "$value": "hsl(0, 0%, 52.3%)",
         "$description": "Deprecated alias. Use --field-border-focus (component.field.borderFocus)."
       },
       "text": {

package/dist/tokens.dtcg.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/dist/tokens.flat.json

@@ -454,7 +454,7 @@
     "cssName": "--input-bg",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 100%)",
+    "value": "hsl(0, 0%, 97.3%)",
     "originalValue": "{component.field.background}",
     "description": "Deprecated alias. Use --field-bg (component.field.background).",
     "deprecated": true
@@ -463,7 +463,7 @@
     "cssName": "--input-bg",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 8.5%)",
+    "value": "hsl(0, 0%, 11.0%)",
     "originalValue": "{component.field.backgroundDark}",
     "description": "Deprecated alias. Use --field-bg (component.field.backgroundDark).",
     "deprecated": true
@@ -472,7 +472,7 @@
     "cssName": "--input-border",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 85.8%)",
+    "value": "hsl(0, 0%, 88.7%)",
     "originalValue": "{component.field.border}",
     "description": "Deprecated alias. Use --field-border (component.field.border).",
     "deprecated": true
@@ -481,7 +481,7 @@
     "cssName": "--input-border",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 24.3%)",
+    "value": "hsl(0, 0%, 20.5%)",
     "originalValue": "{component.field.borderDark}",
     "description": "Deprecated alias. Use --field-border (component.field.borderDark).",
     "deprecated": true
@@ -517,7 +517,7 @@
     "cssName": "--input-border-focus",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 78.0%)",
+    "value": "hsl(0, 0%, 52.3%)",
     "originalValue": "{component.field.borderFocus}",
     "description": "Deprecated alias. Use --field-border-focus (component.field.borderFocus).",
     "deprecated": true
@@ -526,7 +526,7 @@
     "cssName": "--input-border-focus",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 31.2%)",
+    "value": "hsl(0, 0%, 49.4%)",
     "originalValue": "{component.field.borderFocusDark}",
     "description": "Deprecated alias. Use --field-border-focus (component.field.borderFocusDark).",
     "deprecated": true
@@ -535,7 +535,7 @@
     "cssName": "--input-ring",
     "type": "string",
     "mode": "light",
-    "value": "0 0 0 1px hsl(0, 0%, 78.0%)",
+    "value": "0 0 0 1px hsl(0, 0%, 52.3%)",
     "originalValue": "{component.field.ring}",
     "description": "Deprecated alias. Use --field-ring (component.field.ring).",
     "deprecated": true
@@ -544,7 +544,7 @@
     "cssName": "--input-ring",
     "type": "string",
     "mode": "dark",
-    "value": "0 0 0 1px hsl(0, 0%, 31.2%)",
+    "value": "0 0 0 1px hsl(0, 0%, 49.4%)",
     "originalValue": "{component.field.ringDark}",
     "description": "Deprecated alias. Use --field-ring (component.field.ringDark).",
     "deprecated": true
@@ -589,48 +589,48 @@
     "cssName": "--field-bg",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 100%)",
-    "originalValue": "{surface.light.appBg}",
-    "description": "Form-control fill. Fields stay on the app background surface, even inside a raised panel."
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "{color.neutral.light.bgSecondary}",
+    "description": "Form-control fill. Fields are filled so they read on the page background as well as inside panels."
   },
   "component.field.backgroundDark": {
     "cssName": "--field-bg",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 8.5%)",
-    "originalValue": "{surface.dark.appBg}",
+    "value": "hsl(0, 0%, 11.0%)",
+    "originalValue": "{color.neutral.dark.bgSecondary}",
     "description": "Dark-mode form-control fill."
   },
   "component.field.backgroundDisabled": {
     "cssName": "--field-bg-disabled",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 97.3%)",
-    "originalValue": "{color.neutral.light.bgSecondary}",
-    "description": "Disabled form-control fill."
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}",
+    "description": "Disabled form-control fill, a step off the resting fill."
   },
   "component.field.backgroundDisabledDark": {
     "cssName": "--field-bg-disabled",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 11.0%)",
-    "originalValue": "{color.neutral.dark.bgSecondary}",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}",
     "description": "Dark-mode disabled form-control fill."
   },
   "component.field.border": {
     "cssName": "--field-border",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 85.8%)",
-    "originalValue": "{color.neutral.light.border}",
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{color.neutral.light.line}",
     "description": "Resting form-control border."
   },
   "component.field.borderDark": {
     "cssName": "--field-border",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 24.3%)",
-    "originalValue": "{color.neutral.dark.border}",
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{color.neutral.dark.line}",
     "description": "Dark-mode resting form-control border."
   },
   "component.field.borderHover": {
@@ -653,17 +653,17 @@
     "cssName": "--field-border-focus",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 78.0%)",
-    "originalValue": "{color.neutral.light.borderHover}",
-    "description": "Focused form-control border. Focus matches hover and does not use the yellow focus shadow."
+    "value": "hsl(0, 0%, 52.3%)",
+    "originalValue": "{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."
   },
   "component.field.borderFocusDark": {
     "cssName": "--field-border-focus",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 31.2%)",
-    "originalValue": "{color.neutral.dark.borderHover}",
-    "description": "Dark-mode focused form-control border. Focus matches hover and does not use the yellow focus shadow."
+    "value": "hsl(0, 0%, 49.4%)",
+    "originalValue": "{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."
   },
   "component.field.text": {
     "cssName": "--field-text",
@@ -709,17 +709,17 @@
     "cssName": "--field-ring",
     "type": "string",
     "mode": "light",
-    "value": "0 0 0 1px hsl(0, 0%, 78.0%)",
-    "originalValue": "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 hsl(0, 0%, 52.3%)",
+    "originalValue": "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."
   },
   "component.field.ringDark": {
     "cssName": "--field-ring",
     "type": "string",
     "mode": "dark",
-    "value": "0 0 0 1px hsl(0, 0%, 31.2%)",
-    "originalValue": "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 hsl(0, 0%, 49.4%)",
+    "originalValue": "0 0 0 1px {color.neutral.dark.solidHover}",
+    "description": "Dark-mode quiet field focus ring. Buttons, links, and nav focus with --shadow-focus instead."
   },
   "component.panel.background": {
     "cssName": "--panel-bg",
@@ -1025,15 +1025,15 @@
     "cssName": "--input",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 85.8%)",
-    "originalValue": "{color.neutral.light.border}"
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{component.field.border}"
   },
   "component.alias.inputDark": {
     "cssName": "--input",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 24.3%)",
-    "originalValue": "{color.neutral.dark.border}"
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{component.field.borderDark}"
   },
   "component.alias.ring": {
     "cssName": "--ring",

package/dist/tokens.js

@@ -456,7 +456,7 @@ export const tokens = {
     "cssName": "--input-bg",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 100%)",
+    "value": "hsl(0, 0%, 97.3%)",
     "originalValue": "{component.field.background}",
     "description": "Deprecated alias. Use --field-bg (component.field.background).",
     "deprecated": true
@@ -465,7 +465,7 @@ export const tokens = {
     "cssName": "--input-bg",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 8.5%)",
+    "value": "hsl(0, 0%, 11.0%)",
     "originalValue": "{component.field.backgroundDark}",
     "description": "Deprecated alias. Use --field-bg (component.field.backgroundDark).",
     "deprecated": true
@@ -474,7 +474,7 @@ export const tokens = {
     "cssName": "--input-border",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 85.8%)",
+    "value": "hsl(0, 0%, 88.7%)",
     "originalValue": "{component.field.border}",
     "description": "Deprecated alias. Use --field-border (component.field.border).",
     "deprecated": true
@@ -483,7 +483,7 @@ export const tokens = {
     "cssName": "--input-border",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 24.3%)",
+    "value": "hsl(0, 0%, 20.5%)",
     "originalValue": "{component.field.borderDark}",
     "description": "Deprecated alias. Use --field-border (component.field.borderDark).",
     "deprecated": true
@@ -519,7 +519,7 @@ export const tokens = {
     "cssName": "--input-border-focus",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 78.0%)",
+    "value": "hsl(0, 0%, 52.3%)",
     "originalValue": "{component.field.borderFocus}",
     "description": "Deprecated alias. Use --field-border-focus (component.field.borderFocus).",
     "deprecated": true
@@ -528,7 +528,7 @@ export const tokens = {
     "cssName": "--input-border-focus",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 31.2%)",
+    "value": "hsl(0, 0%, 49.4%)",
     "originalValue": "{component.field.borderFocusDark}",
     "description": "Deprecated alias. Use --field-border-focus (component.field.borderFocusDark).",
     "deprecated": true
@@ -537,7 +537,7 @@ export const tokens = {
     "cssName": "--input-ring",
     "type": "string",
     "mode": "light",
-    "value": "0 0 0 1px hsl(0, 0%, 78.0%)",
+    "value": "0 0 0 1px hsl(0, 0%, 52.3%)",
     "originalValue": "{component.field.ring}",
     "description": "Deprecated alias. Use --field-ring (component.field.ring).",
     "deprecated": true
@@ -546,7 +546,7 @@ export const tokens = {
     "cssName": "--input-ring",
     "type": "string",
     "mode": "dark",
-    "value": "0 0 0 1px hsl(0, 0%, 31.2%)",
+    "value": "0 0 0 1px hsl(0, 0%, 49.4%)",
     "originalValue": "{component.field.ringDark}",
     "description": "Deprecated alias. Use --field-ring (component.field.ringDark).",
     "deprecated": true
@@ -591,48 +591,48 @@ export const tokens = {
     "cssName": "--field-bg",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 100%)",
-    "originalValue": "{surface.light.appBg}",
-    "description": "Form-control fill. Fields stay on the app background surface, even inside a raised panel."
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "{color.neutral.light.bgSecondary}",
+    "description": "Form-control fill. Fields are filled so they read on the page background as well as inside panels."
   },
   "component.field.backgroundDark": {
     "cssName": "--field-bg",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 8.5%)",
-    "originalValue": "{surface.dark.appBg}",
+    "value": "hsl(0, 0%, 11.0%)",
+    "originalValue": "{color.neutral.dark.bgSecondary}",
     "description": "Dark-mode form-control fill."
   },
   "component.field.backgroundDisabled": {
     "cssName": "--field-bg-disabled",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 97.3%)",
-    "originalValue": "{color.neutral.light.bgSecondary}",
-    "description": "Disabled form-control fill."
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}",
+    "description": "Disabled form-control fill, a step off the resting fill."
   },
   "component.field.backgroundDisabledDark": {
     "cssName": "--field-bg-disabled",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 11.0%)",
-    "originalValue": "{color.neutral.dark.bgSecondary}",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}",
     "description": "Dark-mode disabled form-control fill."
   },
   "component.field.border": {
     "cssName": "--field-border",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 85.8%)",
-    "originalValue": "{color.neutral.light.border}",
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{color.neutral.light.line}",
     "description": "Resting form-control border."
   },
   "component.field.borderDark": {
     "cssName": "--field-border",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 24.3%)",
-    "originalValue": "{color.neutral.dark.border}",
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{color.neutral.dark.line}",
     "description": "Dark-mode resting form-control border."
   },
   "component.field.borderHover": {
@@ -655,17 +655,17 @@ export const tokens = {
     "cssName": "--field-border-focus",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 78.0%)",
-    "originalValue": "{color.neutral.light.borderHover}",
-    "description": "Focused form-control border. Focus matches hover and does not use the yellow focus shadow."
+    "value": "hsl(0, 0%, 52.3%)",
+    "originalValue": "{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."
   },
   "component.field.borderFocusDark": {
     "cssName": "--field-border-focus",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 31.2%)",
-    "originalValue": "{color.neutral.dark.borderHover}",
-    "description": "Dark-mode focused form-control border. Focus matches hover and does not use the yellow focus shadow."
+    "value": "hsl(0, 0%, 49.4%)",
+    "originalValue": "{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."
   },
   "component.field.text": {
     "cssName": "--field-text",
@@ -711,17 +711,17 @@ export const tokens = {
     "cssName": "--field-ring",
     "type": "string",
     "mode": "light",
-    "value": "0 0 0 1px hsl(0, 0%, 78.0%)",
-    "originalValue": "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 hsl(0, 0%, 52.3%)",
+    "originalValue": "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."
   },
   "component.field.ringDark": {
     "cssName": "--field-ring",
     "type": "string",
     "mode": "dark",
-    "value": "0 0 0 1px hsl(0, 0%, 31.2%)",
-    "originalValue": "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 hsl(0, 0%, 49.4%)",
+    "originalValue": "0 0 0 1px {color.neutral.dark.solidHover}",
+    "description": "Dark-mode quiet field focus ring. Buttons, links, and nav focus with --shadow-focus instead."
   },
   "component.panel.background": {
     "cssName": "--panel-bg",
@@ -1027,15 +1027,15 @@ export const tokens = {
     "cssName": "--input",
     "type": "color",
     "mode": "light",
-    "value": "hsl(0, 0%, 85.8%)",
-    "originalValue": "{color.neutral.light.border}"
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{component.field.border}"
   },
   "component.alias.inputDark": {
     "cssName": "--input",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 24.3%)",
-    "originalValue": "{color.neutral.dark.border}"
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{component.field.borderDark}"
   },
   "component.alias.ring": {
     "cssName": "--ring",

package/package.json

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

package/system/README.md

@@ -139,7 +139,7 @@ own, so the two name systems cannot drift.
 | `--accent` / `--accent-foreground`           | `--component-bg` / `--text`                                |
 | `--card` / `--card-foreground`               | `--component-bg` / `--text`                                |
 | `--popover` / `--popover-foreground`         | `--component-bg` / `--text`                                |
-| `--input`                                    | `--border`                                                 |
+| `--input`                                    | `--field-border`                                           |
 | `--ring`                                     | `--shadow-focus-color`                                     |
 | `--background` / `--foreground`              | `--bg` / `--text`                                          |
 

package/system/components.css

@@ -265,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
 
@@ -567,18 +568,11 @@ 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. 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
+   .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 {
-  --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;

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