feat(tokens): add form and panel design aliases

Add portable field, panel, and action token aliases with hsl brand output.

Update form/auth previews, docs, smoke checks, and e2e expectations for the refreshed design-system contract.

Author: altaywtf

AGENTS.md

@@ -22,7 +22,8 @@ Use `pnpm tokens:build` after editing `tokens/**/*.tokens.json`.
 
 - `tokens/**/*.tokens.json` is the source of truth.
 - Generated artifacts live in `dist/` and `system/tokens.css`.
-- Yellow `#FDCE45` is sacred.
+- Yellow `#FDCE45` is sacred; CSS emits it as `hsl(44.7, 97.9%, 63.1%)`.
+- Shared form and panel chrome lives in `--field-*` and `--panel-*` aliases.
 - Icons use Phosphor-style inline SVG. No emoji as UI icons.
 - TV surfaces are file browsers: list-first, focus-first, not poster grids.
 - Keep public docs generic. Private research, local paths, account data, team photos, and unreleased plans stay out.

CONTRIBUTING.md

@@ -27,7 +27,7 @@ Use `pnpm verify:full` before large guide, token, package, or deploy changes.
 ## Development Notes
 
 - Edit token sources in `tokens/**/*.tokens.json`.
-- Run `pnpm tokens:build` after token changes.
+- Run `pnpm tokens:build` after token changes; run `pnpm tokens:check` when reviewing generated drift.
 - Keep examples public-safe and content-agnostic.
 - Use raw filename examples from [Agent guide](AGENTS.md).
 - Put deploy and package details in [Distribution](docs/DISTRIBUTION.md).

DESIGN.md

@@ -3,17 +3,17 @@ version: "0.1.0"
 name: "put.io Design System"
 description: "Public token and guidance contract for put.io product surfaces."
 colors:
-  brand: "#FDCE45"
+  brand: "hsl(44.7, 97.9%, 63.1%)"
   dark:
     app-bg: "hsl(0, 0%, 8.5%)"
-    page-bg: "black"
+    page-bg: "hsl(0, 0%, 0%)"
     text: "hsl(0, 0%, 93.0%)"
     text-muted: "hsl(0, 0%, 62.8%)"
     border: "hsl(0, 0%, 24.3%)"
     success: "hsl(151, 55.0%, 41.5%)"
     danger: "hsl(358, 75.0%, 59.0%)"
   light:
-    app-bg: "white"
+    app-bg: "hsl(0, 0%, 100%)"
     page-bg: "hsl(0, 0%, 97.3%)"
     text: "hsl(0, 0%, 9.0%)"
     text-muted: "hsl(0, 0%, 43.5%)"
@@ -96,6 +96,8 @@ The default radius is `6px`. Use `4px` for tight controls, `8px` or `10px` for l
 
 Buttons use yellow only for primary commands. Secondary buttons should feel quiet and tokenized against the active surface. File rows are the core component: preserve raw names, keep metadata compact, and make hover/focus states obvious without inflating row height.
 
+Form fields use the shared `--field-*` aliases: `--field-bg` for the fill, `--field-border` for the resting border, and `--field-ring` for focus. Invalid fields opt in with `aria-invalid="true"` and use red border/text only; do not add red fill. Raised panels use the shared `--panel-*` aliases instead of auth- or screen-specific panel variables.
+
 TV components are list-first and focus-first. A TV app is still a file browser, not a poster wall. Roku, native Apple, Android, and web TV repos should consume the generic tokens and generate their own platform bindings.
 
 ## Do's and Don'ts

README.md

@@ -22,7 +22,7 @@ This repo owns the public contract behind it: DTCG token sources, generated
 CSS/JSON/TypeScript artifacts, brand assets, preview cards, and deployable
 static guidance.
 
-## Use
+## Install
 
 Token sources live in [`tokens`](tokens). Generated package artifacts live in
 [`dist`](dist). Package-safe brand assets live in [`system/assets`](system/assets).
@@ -31,7 +31,19 @@ Token sources live in [`tokens`](tokens). Generated package artifacts live in
 npm install @putdotio/design
 ```
 
-Common entrypoints:
+## Use
+
+Import the generated CSS when a web surface needs put.io custom properties:
+
+```css
+@import "@putdotio/design/css";
+```
+
+Component recipes should consume semantic aliases such as `--field-*`,
+`--panel-*`, `--primary`, `--success`, and `--destructive` instead of reaching
+into palette tokens directly.
+
+Package entrypoints:
 
 - CSS custom properties: [`dist/css/tokens.css`](dist/css/tokens.css)
 - DTCG token tree: [`dist/tokens.dtcg.json`](dist/tokens.dtcg.json)
@@ -60,6 +72,11 @@ Use `pnpm tokens:build` after token edits.
 - [Security](SECURITY.md)
 - [Agent guide](AGENTS.md)
 
+## Contributing
+
+See [Contributing](CONTRIBUTING.md) for local setup, validation, and pull
+request expectations.
+
 ## License
 
 [MIT](LICENSE)

dist/css/tokens.css

@@ -10,8 +10,33 @@
 :root {
   --button-secondary-bg: hsl(0, 0%, 95.1%);
   --button-secondary-fg: hsl(0, 0%, 9.0%);
-  --input-bg: white;
+  --input-bg: hsl(0, 0%, 100%);
   --input-border: hsl(0, 0%, 85.8%);
+  --field-bg: hsl(0, 0%, 100%);
+  --field-bg-disabled: hsl(0, 0%, 97.3%);
+  --field-border: hsl(0, 0%, 85.8%);
+  --field-border-hover: hsl(0, 0%, 78.0%);
+  --field-border-focus: hsl(0, 0%, 78.0%);
+  --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%);
+  --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);
+  --background: hsl(0, 0%, 99.0%);
+  --foreground: hsl(0, 0%, 9.0%);
+  --foreground-muted: hsl(0, 0%, 43.5%);
+  --success: hsl(153, 67.0%, 28.5%);
+  --destructive: hsl(358, 65.0%, 48.7%);
+  --muted: hsl(0, 0%, 97.3%);
+  --muted-foreground: hsl(0, 0%, 43.5%);
+  --accent: hsl(0, 0%, 95.1%);
+  --accent-foreground: hsl(0, 0%, 9.0%);
+  --card: hsl(0, 0%, 95.1%);
+  --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%);
   --file-row-bg: transparent;
   --file-row-bg-hover: hsl(0, 0%, 97.3%);
   --notification-info-bg: hsl(0, 0%, 97.3%);
@@ -60,13 +85,13 @@
   --yellow-line: hsl(50, 89.4%, 76.1%);
   --yellow-border: hsl(47, 80.4%, 68.0%);
   --yellow-border-hover: hsl(48, 100%, 46.1%);
-  --yellow-solid-hover: #FDCE45;
+  --yellow-solid-hover: hsl(44.7, 97.9%, 63.1%);
   --yellow-text-secondary: hsl(42, 100%, 29.0%);
   --yellow-text: hsl(40, 55.0%, 13.5%);
   --lime-3: hsl(85, 76.0%, 92.3%);
   --html-bg: hsl(0, 0%, 97.3%);
-  --app-bg: white;
-  --nav-bg: white;
+  --app-bg: hsl(0, 0%, 100%);
+  --nav-bg: hsl(0, 0%, 100%);
   --nav-item-bg: transparent;
   --nav-item-bg-hover: hsl(0, 0%, 95.1%);
   --nav-item-bg-active: hsl(0, 0%, 95.1%);
@@ -75,7 +100,7 @@
   --list-item-bg-active: hsl(0, 0%, 97.3%);
   --list-item-border: hsl(0, 0%, 90.9%);
   --segmented-control-bg: hsl(0, 0%, 95.1%);
-  --segmented-control-bg-active: white;
+  --segmented-control-bg-active: hsl(0, 0%, 100%);
   --transfer-list-item-completing-bg: hsl(85, 76.0%, 92.3%);
   --transfer-list-item-downloading-bg: hsl(85, 76.0%, 92.3%);
   --transfer-list-item-finished-bg: hsl(0, 0%, 97.3%);
@@ -85,19 +110,26 @@
   --transparent: transparent;
   --overlay-inline: hsla(0, 0%, 0%, 0.047);
   --overlay-full: hsla(0, 0%, 0%, 0.439);
-  --button-primary-bg: #FDCE45;
-  --button-primary-fg: #0A0A0A;
+  --button-primary-bg: hsl(44.7, 97.9%, 63.1%);
+  --button-primary-fg: hsl(0, 0%, 4.0%);
   --button-radius: 6px;
   --input-radius: 6px;
-  --file-row-icon: #FDCE45;
-  --yellow-solid: #FDCE45;
+  --panel-radius: 10px;
+  --primary: hsl(44.7, 97.9%, 63.1%);
+  --primary-foreground: hsl(0, 0%, 0%);
+  --success-foreground: hsl(0, 0%, 100%);
+  --destructive-foreground: hsl(0, 0%, 100%);
+  --solid-foreground: hsl(0, 0%, 100%);
+  --ring: hsla(47, 100%, 65%, 0.35);
+  --file-row-icon: hsl(44.7, 97.9%, 63.1%);
+  --yellow-solid: hsl(44.7, 97.9%, 63.1%);
   --shadow-color: hsl(0, 0%, 78.0%);
   --shadow: hsl(0, 0%, 78.0%);
   --shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05);
   --shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.08);
   --shadow-lg: 0 16px 40px hsla(0, 0%, 0%, 0.12);
   --shadow-focus-color: hsla(47, 100%, 65%, 0.35);
-  --shadow-focus: 0 0 0 3px var(--shadow-focus-color);
+  --shadow-focus: 0 0 0 3px hsla(47, 100%, 65%, 0.35);
   --font-sans: "GT America", sans-serif;
   --font-display: "GT America", sans-serif;
   --font-ui-mono: "GT America Mono", monospace;
@@ -150,8 +182,33 @@
 .dark {
   --button-secondary-bg: hsl(0, 0%, 13.6%);
   --button-secondary-fg: hsl(0, 0%, 93.0%);
-  --input-bg: hsl(0, 0%, 13.6%);
+  --input-bg: hsl(0, 0%, 8.5%);
   --input-border: hsl(0, 0%, 24.3%);
+  --field-bg: hsl(0, 0%, 8.5%);
+  --field-bg-disabled: hsl(0, 0%, 11.0%);
+  --field-border: hsl(0, 0%, 24.3%);
+  --field-border-hover: hsl(0, 0%, 31.2%);
+  --field-border-focus: hsl(0, 0%, 31.2%);
+  --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%);
+  --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);
+  --background: hsl(0, 0%, 8.5%);
+  --foreground: hsl(0, 0%, 93.0%);
+  --foreground-muted: hsl(0, 0%, 62.8%);
+  --success: hsl(151, 51.7%, 28.4%);
+  --destructive: hsl(358, 65.0%, 40.4%);
+  --muted: hsl(0, 0%, 11.0%);
+  --muted-foreground: hsl(0, 0%, 62.8%);
+  --accent: hsl(0, 0%, 13.6%);
+  --accent-foreground: hsl(0, 0%, 93.0%);
+  --card: hsl(0, 0%, 13.6%);
+  --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%);
   --file-row-bg: transparent;
   --file-row-bg-hover: hsl(0, 0%, 11.0%);
   --notification-info-bg: hsl(0, 0%, 13.6%);
@@ -200,11 +257,11 @@
   --yellow-line: hsl(49, 100%, 14.3%);
   --yellow-border: hsl(49, 90.3%, 18.4%);
   --yellow-border-hover: hsl(50, 100%, 22.0%);
-  --yellow-solid-hover: #FDCE45;
+  --yellow-solid-hover: hsl(44.7, 97.9%, 63.1%);
   --yellow-text-secondary: hsl(48, 100%, 47.0%);
   --yellow-text: hsl(53, 100%, 91.0%);
   --lime-3: hsl(85, 45%, 12%);
-  --html-bg: black;
+  --html-bg: hsl(0, 0%, 0%);
   --app-bg: hsl(0, 0%, 8.5%);
   --nav-bg: hsl(0, 0%, 8.5%);
   --nav-item-bg: transparent;
@@ -224,8 +281,8 @@
   --lo-contrast: hsl(0, 0%, 8.5%);
   --overlay-inline: hsla(0, 0%, 0%, 0.439);
   --overlay-full: hsla(0, 0%, 0%, 0.565);
-  --shadow-color: black;
-  --shadow: black;
+  --shadow-color: hsl(0, 0%, 0%);
+  --shadow: hsl(0, 0%, 0%);
   --shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.4);
   --shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.5);
   --shadow-lg: 0 16px 40px hsla(0, 0%, 0%, 0.6);
@@ -363,4 +420,4 @@ a:hover { text-decoration-color: currentColor; }
 .bg-1           { background: var(--bg); }
 .bg-2           { background: var(--bg-secondary); }
 .bg-component   { background: var(--component-bg); }
-.bg-yellow      { background: var(--yellow-solid); color: #000; }
+.bg-yellow      { background: var(--yellow-solid); color: var(--primary-foreground); }

dist/figma/putio.tokens.json

@@ -4,12 +4,12 @@
       "primary": {
         "background": {
           "$type": "color",
-          "$value": "#FDCE45",
+          "$value": "hsl(44.7, 97.9%, 63.1%)",
           "$description": "Primary command background."
         },
         "foreground": {
           "$type": "color",
-          "$value": "#0A0A0A",
+          "$value": "hsl(0, 0%, 4.0%)",
           "$description": "Text or icon color on the yellow primary button."
         },
         "radius": {
@@ -31,7 +31,7 @@
     "input": {
       "background": {
         "$type": "color",
-        "$value": "white"
+        "$value": "hsl(0, 0%, 100%)"
       },
       "border": {
         "$type": "color",
@@ -53,7 +53,7 @@
       },
       "icon": {
         "$type": "color",
-        "$value": "#FDCE45"
+        "$value": "hsl(44.7, 97.9%, 63.1%)"
       }
     },
     "notification": {
@@ -71,8 +71,8 @@
     "brand": {
       "yellow": {
         "$type": "color",
-        "$value": "#FDCE45",
-        "$description": "Sacred put.io brand yellow. Do not change or tint."
+        "$value": "hsl(44.7, 97.9%, 63.1%)",
+        "$description": "Sacred put.io brand yellow (canonical hex #FDCE45). Do not change or tint."
       }
     },
     "neutral": {
@@ -267,7 +267,7 @@
         },
         "solidHover": {
           "$type": "color",
-          "$value": "#FDCE45"
+          "$value": "hsl(44.7, 97.9%, 63.1%)"
         },
         "textSecondary": {
           "$type": "color",
@@ -508,11 +508,11 @@
       },
       "appBg": {
         "$type": "color",
-        "$value": "white"
+        "$value": "hsl(0, 0%, 100%)"
       },
       "navBg": {
         "$type": "color",
-        "$value": "white"
+        "$value": "hsl(0, 0%, 100%)"
       },
       "navItemBg": {
         "$type": "color",
@@ -548,7 +548,7 @@
       },
       "segmentedControlBgActive": {
         "$type": "color",
-        "$value": "white"
+        "$value": "hsl(0, 0%, 100%)"
       },
       "transferListItemCompletingBg": {
         "$type": "color",