@putdotio/design 3.7.0 → 3.9.0

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",
@@ -3234,9 +3234,18 @@
   "elevation.focus": {
     "cssName": "--shadow-focus",
     "type": "string",
-    "mode": "global",
-    "value": "0 0 0 3px hsla(47, 100%, 65%, 0.35)",
-    "originalValue": "0 0 0 3px {elevation.focusColor}"
+    "mode": "light",
+    "value": "0 0 0 2px hsl(0, 0%, 99.0%), 0 0 0 4px hsl(0, 0%, 52.3%)",
+    "originalValue": "0 0 0 2px {color.neutral.light.bg}, 0 0 0 4px {color.neutral.light.solidHover}",
+    "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."
+  },
+  "elevation.focusDark": {
+    "cssName": "--shadow-focus",
+    "type": "string",
+    "mode": "dark",
+    "value": "0 0 0 2px hsl(0, 0%, 8.5%), 0 0 0 4px hsl(0, 0%, 49.4%)",
+    "originalValue": "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."
   },
   "typography.fontFamily.sans": {
     "cssName": "--font-sans",
@@ -3557,6 +3566,13 @@
     "value": "120ms",
     "originalValue": "120ms"
   },
+  "motion.duration.reveal": {
+    "cssName": "--dur-reveal",
+    "type": "duration",
+    "mode": "global",
+    "value": "180ms",
+    "originalValue": "180ms"
+  },
   "motion.duration.base": {
     "cssName": "--dur-base",
     "type": "duration",

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",
@@ -3236,9 +3236,18 @@ export const tokens = {
   "elevation.focus": {
     "cssName": "--shadow-focus",
     "type": "string",
-    "mode": "global",
-    "value": "0 0 0 3px hsla(47, 100%, 65%, 0.35)",
-    "originalValue": "0 0 0 3px {elevation.focusColor}"
+    "mode": "light",
+    "value": "0 0 0 2px hsl(0, 0%, 99.0%), 0 0 0 4px hsl(0, 0%, 52.3%)",
+    "originalValue": "0 0 0 2px {color.neutral.light.bg}, 0 0 0 4px {color.neutral.light.solidHover}",
+    "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."
+  },
+  "elevation.focusDark": {
+    "cssName": "--shadow-focus",
+    "type": "string",
+    "mode": "dark",
+    "value": "0 0 0 2px hsl(0, 0%, 8.5%), 0 0 0 4px hsl(0, 0%, 49.4%)",
+    "originalValue": "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."
   },
   "typography.fontFamily.sans": {
     "cssName": "--font-sans",
@@ -3559,6 +3568,13 @@ export const tokens = {
     "value": "120ms",
     "originalValue": "120ms"
   },
+  "motion.duration.reveal": {
+    "cssName": "--dur-reveal",
+    "type": "duration",
+    "mode": "global",
+    "value": "180ms",
+    "originalValue": "180ms"
+  },
   "motion.duration.base": {
     "cssName": "--dur-base",
     "type": "duration",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@putdotio/design",
-  "version": "3.7.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

@@ -83,7 +83,7 @@ its cards use itself.
 
 ## Core rules
 
-- **Yellow** follows [Colors](../DESIGN.md#colors). Guide specifics: `--yellow-solid-hover` is the hover peer with one value in both modes, and button focus-visible rings use `--shadow-focus` (the yellow at 35% alpha, `--shadow-focus-color`). Form fields focus with the neutral `--field-ring` instead.
+- **Yellow** follows [Colors](../DESIGN.md#colors). Guide specifics: `--yellow-solid-hover` is the hover peer with one value in both modes, and button focus-visible rings use `--shadow-focus`: a 2px `--bg` gap, then a 2px `--solid-hover` ring, at least 3:1 against the page and panels. `--shadow-focus-color` (the yellow at 35% alpha) stays only as shadcn's `--ring`. Form fields focus with `--field-ring` instead.
 - **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()`.
@@ -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`                                          |
 
@@ -172,10 +172,8 @@ directly.
 
 shadcn marks parts of compound components with `data-slot="card-header"`,
 `data-slot="card-title"`, and so on. put.io does the same on the folder picker
-(`data-slot="modal" / "modal-header" / "modal-body" / "modal-footer"`) and the
-auth cards in `web-p00c-auth-signin.html` and `web-p00d-auth-signup.html`
-(`data-slot="auth" / "auth-header" / "auth-body"`), so external CSS can target
-one part without nested class chains.
+(`data-slot="modal" / "modal-header" / "modal-body" / "modal-footer"`), so
+external CSS can target one part without nested class chains.
 
 ## Design variants