@putdotio/design 3.6.3 → 3.7.0

package/dist/css/tokens.css

@@ -25,13 +25,13 @@
   --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%);
-  --input-border: hsl(0, 0%, 85.8%);
-  --input-border-hover: hsl(0, 0%, 78.0%);
-  --input-border-focus: hsl(0, 0%, 78.0%);
-  --input-ring: 0 0 0 1px hsl(0, 0%, 78.0%);
-  --input-text: hsl(0, 0%, 9.0%);
-  --input-placeholder: hsl(0, 0%, 43.5%);
+  --input-bg: hsl(0, 0%, 100%); /* deprecated: use --field-bg */
+  --input-border: hsl(0, 0%, 85.8%); /* 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-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%);
@@ -45,7 +45,7 @@
   --panel-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.08);
   --background: hsl(0, 0%, 99.0%);
   --foreground: hsl(0, 0%, 9.0%);
-  --foreground-muted: hsl(0, 0%, 43.5%);
+  --foreground-muted: hsl(0, 0%, 43.5%); /* deprecated: use --text-secondary */
   --success: hsl(151, 55%, 41.5%);
   --destructive: hsl(358, 75%, 59%);
   --invert-foreground: hsl(0, 0%, 100%);
@@ -216,7 +216,7 @@
   --nav-height: 56px;
   --nav-height-compact: 52px;
   --nav-cta-height: 32px;
-  --input-radius: 6px;
+  --input-radius: 6px; /* deprecated: use --field-radius */
   --field-radius: 6px;
   --panel-radius: 10px;
   --primary: hsl(44.7, 97.9%, 63.1%);
@@ -332,13 +332,13 @@
   --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%);
-  --input-border: hsl(0, 0%, 24.3%);
-  --input-border-hover: hsl(0, 0%, 31.2%);
-  --input-border-focus: hsl(0, 0%, 31.2%);
-  --input-ring: 0 0 0 1px hsl(0, 0%, 31.2%);
-  --input-text: hsl(0, 0%, 93.0%);
-  --input-placeholder: hsl(0, 0%, 62.8%);
+  --input-bg: hsl(0, 0%, 8.5%); /* deprecated: use --field-bg */
+  --input-border: hsl(0, 0%, 24.3%); /* 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-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%);
@@ -352,7 +352,7 @@
   --panel-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.5);
   --background: hsl(0, 0%, 8.5%);
   --foreground: hsl(0, 0%, 93.0%);
-  --foreground-muted: hsl(0, 0%, 62.8%);
+  --foreground-muted: hsl(0, 0%, 62.8%); /* deprecated: use --text-secondary */
   --success: hsl(151, 55%, 41.5%);
   --destructive: hsl(358, 75%, 59%);
   --invert-foreground: hsl(0, 0%, 8.5%);

package/dist/figma/putio.tokens.json

@@ -218,32 +218,38 @@
     "input": {
       "background": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 100%)"
+        "$value": "hsl(0, 0%, 100%)",
+        "$description": "Deprecated alias. Use --field-bg (component.field.background)."
       },
       "border": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 85.8%)"
+        "$value": "hsl(0, 0%, 85.8%)",
+        "$description": "Deprecated alias. Use --field-border (component.field.border)."
       },
       "radius": {
         "$type": "dimension",
-        "$value": "6px"
+        "$value": "6px",
+        "$description": "Deprecated alias. Use --field-radius (component.field.radius)."
       },
       "borderHover": {
         "$type": "color",
         "$value": "hsl(0, 0%, 78.0%)",
-        "$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)."
       },
       "borderFocus": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 78.0%)"
+        "$value": "hsl(0, 0%, 78.0%)",
+        "$description": "Deprecated alias. Use --field-border-focus (component.field.borderFocus)."
       },
       "text": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 9.0%)"
+        "$value": "hsl(0, 0%, 9.0%)",
+        "$description": "Deprecated alias. Use --field-text (component.field.text)."
       },
       "placeholder": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 43.5%)"
+        "$value": "hsl(0, 0%, 43.5%)",
+        "$description": "Deprecated alias. Use --field-placeholder (component.field.placeholder)."
       }
     },
     "fileRow": {

package/dist/tokens.dtcg.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
           }
         }
       },
@@ -3111,7 +3145,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/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": {

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": {

package/package.json

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

@@ -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

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