@putdotio/design 3.6.3 → 3.8.0

package/dist/tokens.flat.json

@@ -455,35 +455,45 @@
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 100%)",
-    "originalValue": "{component.field.background}"
+    "originalValue": "{component.field.background}",
+    "description": "Deprecated alias. Use --field-bg (component.field.background).",
+    "deprecated": true
   },
   "component.input.backgroundDark": {
     "cssName": "--input-bg",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 8.5%)",
-    "originalValue": "{component.field.backgroundDark}"
+    "originalValue": "{component.field.backgroundDark}",
+    "description": "Deprecated alias. Use --field-bg (component.field.backgroundDark).",
+    "deprecated": true
   },
   "component.input.border": {
     "cssName": "--input-border",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 85.8%)",
-    "originalValue": "{component.field.border}"
+    "originalValue": "{component.field.border}",
+    "description": "Deprecated alias. Use --field-border (component.field.border).",
+    "deprecated": true
   },
   "component.input.borderDark": {
     "cssName": "--input-border",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 24.3%)",
-    "originalValue": "{component.field.borderDark}"
+    "originalValue": "{component.field.borderDark}",
+    "description": "Deprecated alias. Use --field-border (component.field.borderDark).",
+    "deprecated": true
   },
   "component.input.radius": {
     "cssName": "--input-radius",
     "type": "dimension",
     "mode": "global",
     "value": "6px",
-    "originalValue": "{component.field.radius}"
+    "originalValue": "{component.field.radius}",
+    "description": "Deprecated alias. Use --field-radius (component.field.radius).",
+    "deprecated": true
   },
   "component.input.borderHover": {
     "cssName": "--input-border-hover",
@@ -491,70 +501,89 @@
     "mode": "light",
     "value": "hsl(0, 0%, 78.0%)",
     "originalValue": "{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).",
+    "deprecated": true
   },
   "component.input.borderHoverDark": {
     "cssName": "--input-border-hover",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 31.2%)",
-    "originalValue": "{component.field.borderHoverDark}"
+    "originalValue": "{component.field.borderHoverDark}",
+    "description": "Deprecated alias. Use --field-border-hover (component.field.borderHoverDark).",
+    "deprecated": true
   },
   "component.input.borderFocus": {
     "cssName": "--input-border-focus",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 78.0%)",
-    "originalValue": "{component.field.borderFocus}"
+    "originalValue": "{component.field.borderFocus}",
+    "description": "Deprecated alias. Use --field-border-focus (component.field.borderFocus).",
+    "deprecated": true
   },
   "component.input.borderFocusDark": {
     "cssName": "--input-border-focus",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 31.2%)",
-    "originalValue": "{component.field.borderFocusDark}"
+    "originalValue": "{component.field.borderFocusDark}",
+    "description": "Deprecated alias. Use --field-border-focus (component.field.borderFocusDark).",
+    "deprecated": true
   },
   "component.input.ring": {
     "cssName": "--input-ring",
     "type": "string",
     "mode": "light",
     "value": "0 0 0 1px hsl(0, 0%, 78.0%)",
-    "originalValue": "{component.field.ring}"
+    "originalValue": "{component.field.ring}",
+    "description": "Deprecated alias. Use --field-ring (component.field.ring).",
+    "deprecated": true
   },
   "component.input.ringDark": {
     "cssName": "--input-ring",
     "type": "string",
     "mode": "dark",
     "value": "0 0 0 1px hsl(0, 0%, 31.2%)",
-    "originalValue": "{component.field.ringDark}"
+    "originalValue": "{component.field.ringDark}",
+    "description": "Deprecated alias. Use --field-ring (component.field.ringDark).",
+    "deprecated": true
   },
   "component.input.text": {
     "cssName": "--input-text",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 9.0%)",
-    "originalValue": "{component.field.text}"
+    "originalValue": "{component.field.text}",
+    "description": "Deprecated alias. Use --field-text (component.field.text).",
+    "deprecated": true
   },
   "component.input.textDark": {
     "cssName": "--input-text",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 93.0%)",
-    "originalValue": "{component.field.textDark}"
+    "originalValue": "{component.field.textDark}",
+    "description": "Deprecated alias. Use --field-text (component.field.textDark).",
+    "deprecated": true
   },
   "component.input.placeholder": {
     "cssName": "--input-placeholder",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 43.5%)",
-    "originalValue": "{component.field.placeholder}"
+    "originalValue": "{component.field.placeholder}",
+    "description": "Deprecated alias. Use --field-placeholder (component.field.placeholder).",
+    "deprecated": true
   },
   "component.input.placeholderDark": {
     "cssName": "--input-placeholder",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 62.8%)",
-    "originalValue": "{component.field.placeholderDark}"
+    "originalValue": "{component.field.placeholderDark}",
+    "description": "Deprecated alias. Use --field-placeholder (component.field.placeholderDark).",
+    "deprecated": true
   },
   "component.field.background": {
     "cssName": "--field-bg",
@@ -781,14 +810,18 @@
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 43.5%)",
-    "originalValue": "{color.neutral.light.textSecondary}"
+    "originalValue": "{color.neutral.light.textSecondary}",
+    "description": "Deprecated alias. Use --text-secondary (color.neutral.light.textSecondary).",
+    "deprecated": true
   },
   "component.alias.foregroundMutedDark": {
     "cssName": "--foreground-muted",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 62.8%)",
-    "originalValue": "{color.neutral.dark.textSecondary}"
+    "originalValue": "{color.neutral.dark.textSecondary}",
+    "description": "Deprecated alias. Use --text-secondary (color.neutral.dark.textSecondary).",
+    "deprecated": true
   },
   "component.alias.primary": {
     "cssName": "--primary",
@@ -2131,7 +2164,7 @@
     "mode": "tv",
     "value": "hsl(0, 0%, 62.8%)",
     "originalValue": "{context.tv.text.secondary}",
-    "description": "Deprecated compatibility alias. Use context.tv.text.secondary.",
+    "description": "Deprecated alias. Use --text-2 (context.tv.text.secondary).",
     "deprecated": true
   },
   "context.tv.channelArt.production.posterBackground": {
@@ -3201,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",
@@ -3524,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

@@ -457,35 +457,45 @@ export const tokens = {
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 100%)",
-    "originalValue": "{component.field.background}"
+    "originalValue": "{component.field.background}",
+    "description": "Deprecated alias. Use --field-bg (component.field.background).",
+    "deprecated": true
   },
   "component.input.backgroundDark": {
     "cssName": "--input-bg",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 8.5%)",
-    "originalValue": "{component.field.backgroundDark}"
+    "originalValue": "{component.field.backgroundDark}",
+    "description": "Deprecated alias. Use --field-bg (component.field.backgroundDark).",
+    "deprecated": true
   },
   "component.input.border": {
     "cssName": "--input-border",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 85.8%)",
-    "originalValue": "{component.field.border}"
+    "originalValue": "{component.field.border}",
+    "description": "Deprecated alias. Use --field-border (component.field.border).",
+    "deprecated": true
   },
   "component.input.borderDark": {
     "cssName": "--input-border",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 24.3%)",
-    "originalValue": "{component.field.borderDark}"
+    "originalValue": "{component.field.borderDark}",
+    "description": "Deprecated alias. Use --field-border (component.field.borderDark).",
+    "deprecated": true
   },
   "component.input.radius": {
     "cssName": "--input-radius",
     "type": "dimension",
     "mode": "global",
     "value": "6px",
-    "originalValue": "{component.field.radius}"
+    "originalValue": "{component.field.radius}",
+    "description": "Deprecated alias. Use --field-radius (component.field.radius).",
+    "deprecated": true
   },
   "component.input.borderHover": {
     "cssName": "--input-border-hover",
@@ -493,70 +503,89 @@ export const tokens = {
     "mode": "light",
     "value": "hsl(0, 0%, 78.0%)",
     "originalValue": "{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).",
+    "deprecated": true
   },
   "component.input.borderHoverDark": {
     "cssName": "--input-border-hover",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 31.2%)",
-    "originalValue": "{component.field.borderHoverDark}"
+    "originalValue": "{component.field.borderHoverDark}",
+    "description": "Deprecated alias. Use --field-border-hover (component.field.borderHoverDark).",
+    "deprecated": true
   },
   "component.input.borderFocus": {
     "cssName": "--input-border-focus",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 78.0%)",
-    "originalValue": "{component.field.borderFocus}"
+    "originalValue": "{component.field.borderFocus}",
+    "description": "Deprecated alias. Use --field-border-focus (component.field.borderFocus).",
+    "deprecated": true
   },
   "component.input.borderFocusDark": {
     "cssName": "--input-border-focus",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 31.2%)",
-    "originalValue": "{component.field.borderFocusDark}"
+    "originalValue": "{component.field.borderFocusDark}",
+    "description": "Deprecated alias. Use --field-border-focus (component.field.borderFocusDark).",
+    "deprecated": true
   },
   "component.input.ring": {
     "cssName": "--input-ring",
     "type": "string",
     "mode": "light",
     "value": "0 0 0 1px hsl(0, 0%, 78.0%)",
-    "originalValue": "{component.field.ring}"
+    "originalValue": "{component.field.ring}",
+    "description": "Deprecated alias. Use --field-ring (component.field.ring).",
+    "deprecated": true
   },
   "component.input.ringDark": {
     "cssName": "--input-ring",
     "type": "string",
     "mode": "dark",
     "value": "0 0 0 1px hsl(0, 0%, 31.2%)",
-    "originalValue": "{component.field.ringDark}"
+    "originalValue": "{component.field.ringDark}",
+    "description": "Deprecated alias. Use --field-ring (component.field.ringDark).",
+    "deprecated": true
   },
   "component.input.text": {
     "cssName": "--input-text",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 9.0%)",
-    "originalValue": "{component.field.text}"
+    "originalValue": "{component.field.text}",
+    "description": "Deprecated alias. Use --field-text (component.field.text).",
+    "deprecated": true
   },
   "component.input.textDark": {
     "cssName": "--input-text",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 93.0%)",
-    "originalValue": "{component.field.textDark}"
+    "originalValue": "{component.field.textDark}",
+    "description": "Deprecated alias. Use --field-text (component.field.textDark).",
+    "deprecated": true
   },
   "component.input.placeholder": {
     "cssName": "--input-placeholder",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 43.5%)",
-    "originalValue": "{component.field.placeholder}"
+    "originalValue": "{component.field.placeholder}",
+    "description": "Deprecated alias. Use --field-placeholder (component.field.placeholder).",
+    "deprecated": true
   },
   "component.input.placeholderDark": {
     "cssName": "--input-placeholder",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 62.8%)",
-    "originalValue": "{component.field.placeholderDark}"
+    "originalValue": "{component.field.placeholderDark}",
+    "description": "Deprecated alias. Use --field-placeholder (component.field.placeholderDark).",
+    "deprecated": true
   },
   "component.field.background": {
     "cssName": "--field-bg",
@@ -783,14 +812,18 @@ export const tokens = {
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 43.5%)",
-    "originalValue": "{color.neutral.light.textSecondary}"
+    "originalValue": "{color.neutral.light.textSecondary}",
+    "description": "Deprecated alias. Use --text-secondary (color.neutral.light.textSecondary).",
+    "deprecated": true
   },
   "component.alias.foregroundMutedDark": {
     "cssName": "--foreground-muted",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 62.8%)",
-    "originalValue": "{color.neutral.dark.textSecondary}"
+    "originalValue": "{color.neutral.dark.textSecondary}",
+    "description": "Deprecated alias. Use --text-secondary (color.neutral.dark.textSecondary).",
+    "deprecated": true
   },
   "component.alias.primary": {
     "cssName": "--primary",
@@ -2133,7 +2166,7 @@ export const tokens = {
     "mode": "tv",
     "value": "hsl(0, 0%, 62.8%)",
     "originalValue": "{context.tv.text.secondary}",
-    "description": "Deprecated compatibility alias. Use context.tv.text.secondary.",
+    "description": "Deprecated alias. Use --text-2 (context.tv.text.secondary).",
     "deprecated": true
   },
   "context.tv.channelArt.production.posterBackground": {
@@ -3203,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",
@@ -3526,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.6.3",
+  "version": "3.8.0",
   "description": "Public put.io design tokens, brand assets, and design-system guidance.",
   "license": "MIT",
   "type": "module",
@@ -81,15 +81,15 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.11.3",
-    "@phosphor-icons/web": "2.1.1",
+    "@phosphor-icons/web": "2.1.2",
     "@playwright/test": "^1.60.0",
     "@types/node": "^26.0.0",
     "html-validate": "^11.2.0",
-    "oxfmt": "0.73.0",
+    "oxfmt": "0.74.0",
     "sst": "^4.14.3",
     "style-dictionary": "^5.4.1",
     "typescript": "^7.0.2",
     "yaml": "^2.9.0"
   },
-  "packageManager": "pnpm@12.13.0"
+  "packageManager": "pnpm@12.14.0"
 }

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()`.
@@ -143,10 +143,11 @@ own, so the two name systems cannot drift.
 | `--ring`                                     | `--shadow-focus-color`                                     |
 | `--background` / `--foreground`              | `--bg` / `--text`                                          |
 
-A full `--input-*` set (`-bg`, `-border`, `-border-hover`, `-border-focus`,
-`-ring`, `-text`, `-placeholder`, `-radius`) aliases the matching `--field-*`
-tokens, so shadcn-shaped input code themes without renaming. **Author against
-`--field-*`;** the `--input-*` names are only the alias bridge.
+The `--input-*` set (`-bg`, `-border`, `-border-hover`, `-border-focus`,
+`-ring`, `-text`, `-placeholder`, `-radius`) and `--foreground-muted` are
+[deprecated](../docs/distribution.md#deprecated-tokens): shadcn itself names
+only `--input` and `--muted-foreground`. Each deprecated name aliases its
+replacement; **author against `--field-*` and `--text-secondary`.**
 
 On a solid surface, read the foreground tokens (`--primary-foreground`,
 `--destructive-foreground`, `--success-foreground`), which encode the mode-safe
@@ -171,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