@putdotio/design 1.1.0 → 1.2.1

package/DESIGN.md

@@ -10,16 +10,16 @@ colors:
     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%)"
+    success: "hsl(151, 55%, 41.5%)"
+    danger: "hsl(358, 75%, 59%)"
   light:
     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%)"
     border: "hsl(0, 0%, 85.8%)"
-    success: "hsl(151, 55.0%, 41.5%)"
-    danger: "hsl(358, 75.0%, 59.0%)"
+    success: "hsl(151, 55%, 41.5%)"
+    danger: "hsl(358, 75%, 59%)"
 typography:
   ui:
     family: "\"GT America\", sans-serif"
@@ -64,11 +64,11 @@ components:
 
 put.io is a content-agnostic cloud file product. The interface should feel premium because the file browser is useful, fast, quiet, and honest about the data it has. Design for raw filenames, folders, transfers, storage, playback controls, and settings without pretending that structured media metadata is always available.
 
-The canonical source for tokens is DTCG-compatible JSON in `tokens/`. Generated artifacts in `dist/` and `system/tokens.css` are outputs. This file is the human and agent-readable contract that explains how to use those tokens.
+The canonical source for tokens is DTCG-compatible JSON in `tokens/`. Generated artifacts in `dist/` and `system/tokens.css` are outputs. This file explains how to use those tokens.
 
 ## Colors
 
-Yellow `#FDCE45` is sacred. Use it for the put.io brand mark, primary action fill, folder/file emphasis, progress, and focus affordances. Do not tint it into a new brand color, gradient it into a different accent, or use it as foreground text on light surfaces.
+Yellow `#FDCE45` is the resting `--yellow-solid` brand value in both light and dark modes. Use it for the put.io brand mark, primary action fill, folder/file emphasis, progress, and focus affordances. Use `--yellow-solid-hover` for primary button hover feedback; do not invent alternate yellows, gradient yellow into a different accent, or use yellow as foreground text on light surfaces.
 
 Dark app surfaces are the default product mode, but the token contract includes both dark and light palettes. Light surfaces are allowed for landing, docs, and narrow product states where readability is stronger. Semantic red, green, and neutral scales should come from tokens rather than one-off CSS values.
 
@@ -94,7 +94,7 @@ The default radius is `6px`. Use `4px` for tight controls, `8px` or `10px` for l
 
 ## Components
 
-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.
+Buttons use yellow only for primary commands. Primary buttons use `--button-primary-bg` at rest and `--button-primary-bg-hover` on hover so the CTA never feels inert. 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.
 
@@ -108,6 +108,6 @@ Do use Phosphor-style inline SVG for forward-looking icon guidance and no emoji
 
 Do keep `DESIGN.md`, `tokens/`, `dist/`, and `system/tokens.css` in agreement.
 
-Don't publish private research, local file paths, Claude project links, screenshots, team photos, account data, discount strategy, or auth-gated workspace URLs in the public design repo.
+Don't publish private research, local file paths, internal project links, screenshots, team photos, account data, discount strategy, or auth-gated workspace URLs in the public design repo.
 
 Don't generate Swift, Kotlin, Android XML, or Roku outputs from this repo until a consuming platform repo asks for an adapter.

package/README.md

@@ -50,7 +50,7 @@ Package entrypoints:
 - Flat token metadata: [`dist/tokens.flat.json`](dist/tokens.flat.json)
 - Figma-safe subset: [`dist/figma/putio.tokens.json`](dist/figma/putio.tokens.json)
 - Brand assets: [`system/assets`](system/assets) via `@putdotio/design/assets/<file>`
-- Human and AI design contract: [`DESIGN.md`](DESIGN.md)
+- Design contract: [`DESIGN.md`](DESIGN.md)
 
 ## Commands
 

package/dist/css/tokens.css

@@ -2,14 +2,20 @@
    put.io design tokens
    Do not edit directly. Generated from DTCG token JSON in tokens/.
 
-   Brand constant: Yellow #FDCE45 (sacred - never changes)
+   Brand constant: Yellow #FDCE45 in both light and dark modes.
    Canonical source: DTCG-compatible JSON in tokens/
    ============================================================ */
 
 /* -- Light (default) ------------------------------------------------ */
 :root {
+  --button-primary-bg-hover: hsl(45, 89%, 58%);
   --button-secondary-bg: hsl(0, 0%, 95.1%);
   --button-secondary-fg: hsl(0, 0%, 9.0%);
+  --button-success-bg: hsl(151, 55%, 41.5%);
+  --button-success-bg-hover: hsl(151, 58%, 37%);
+  --button-danger-bg: hsl(358, 75%, 59%);
+  --button-danger-bg-hover: hsl(357, 66%, 53%);
+  --button-info-bg-hover: hsl(0, 0%, 52.3%);
   --input-bg: hsl(0, 0%, 100%);
   --input-border: hsl(0, 0%, 85.8%);
   --field-bg: hsl(0, 0%, 100%);
@@ -26,8 +32,10 @@
   --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%);
+  --success: hsl(151, 55%, 41.5%);
+  --destructive: hsl(358, 75%, 59%);
+  --invert-foreground: hsl(0, 0%, 100%);
+  --solid-foreground: hsl(0, 0%, 0%);
   --muted: hsl(0, 0%, 97.3%);
   --muted-foreground: hsl(0, 0%, 43.5%);
   --accent: hsl(0, 0%, 95.1%);
@@ -37,10 +45,10 @@
   --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: hsla(0, 0%, 0%, 0);
   --file-row-bg-hover: hsl(0, 0%, 97.3%);
   --notification-info-bg: hsl(0, 0%, 97.3%);
-  --notification-danger-bg: hsl(360, 100%, 96.8%);
+  --notification-danger-bg: hsl(2, 100%, 96%);
   --bg: hsl(0, 0%, 99.0%);
   --bg-secondary: hsl(0, 0%, 97.3%);
   --component-bg: hsl(0, 0%, 95.1%);
@@ -53,49 +61,50 @@
   --solid-hover: hsl(0, 0%, 52.3%);
   --text-secondary: hsl(0, 0%, 43.5%);
   --text: hsl(0, 0%, 9.0%);
-  --green-bg: hsl(136, 50.0%, 98.9%);
-  --green-bg-secondary: hsl(138, 62.5%, 96.9%);
-  --green-component-bg: hsl(139, 55.2%, 94.5%);
-  --green-component-bg-hover: hsl(140, 48.7%, 91.0%);
-  --green-component-bg-active: hsl(141, 43.7%, 86.0%);
-  --green-line: hsl(143, 40.3%, 79.0%);
-  --green-border: hsl(146, 38.5%, 69.0%);
-  --green-border-hover: hsl(151, 40.2%, 54.1%);
-  --green-solid: hsl(151, 55.0%, 41.5%);
-  --green-solid-hover: hsl(152, 57.5%, 37.6%);
-  --green-text-secondary: hsl(153, 67.0%, 28.5%);
-  --green-text: hsl(155, 40.0%, 14.0%);
-  --red-bg: hsl(359, 100%, 99.4%);
-  --red-bg-secondary: hsl(359, 100%, 98.6%);
-  --red-component-bg: hsl(360, 100%, 96.8%);
-  --red-component-bg-hover: hsl(360, 97.9%, 94.8%);
-  --red-component-bg-active: hsl(360, 90.2%, 91.9%);
-  --red-line: hsl(360, 81.7%, 87.8%);
-  --red-border: hsl(359, 74.2%, 81.7%);
-  --red-border-hover: hsl(359, 69.5%, 74.3%);
-  --red-solid: hsl(358, 75.0%, 59.0%);
-  --red-solid-hover: hsl(358, 69.4%, 55.2%);
-  --red-text-secondary: hsl(358, 65.0%, 48.7%);
-  --red-text: hsl(354, 50.0%, 14.6%);
-  --yellow-bg: hsl(60, 54.0%, 98.5%);
-  --yellow-bg-secondary: hsl(52, 100%, 95.5%);
-  --yellow-component-bg: hsl(55, 100%, 90.9%);
-  --yellow-component-bg-hover: hsl(54, 100%, 86.6%);
-  --yellow-component-bg-active: hsl(52, 97.9%, 82.0%);
-  --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: hsl(44.7, 97.9%, 63.1%);
-  --yellow-text-secondary: hsl(42, 100%, 29.0%);
-  --yellow-text: hsl(40, 55.0%, 13.5%);
+  --green-bg: hsl(140, 60%, 99%);
+  --green-bg-secondary: hsl(140, 41%, 97%);
+  --green-component-bg: hsl(135, 53%, 93%);
+  --green-component-bg-hover: hsl(138, 58%, 89%);
+  --green-component-bg-active: hsl(140, 50%, 84%);
+  --green-line: hsl(141, 47%, 77%);
+  --green-border: hsl(140, 39%, 68%);
+  --green-border-hover: hsl(146, 39%, 55%);
+  --green-solid: hsl(151, 55%, 41.5%);
+  --green-solid-hover: hsl(151, 58%, 37%);
+  --green-text-secondary: hsl(155, 100%, 25%);
+  --green-text: hsl(146, 35%, 17%);
+  --red-bg: hsl(0, 100%, 99%);
+  --red-bg-secondary: hsl(0, 100%, 98%);
+  --red-component-bg: hsl(2, 100%, 96%);
+  --red-component-bg-hover: hsl(4, 100%, 93%);
+  --red-component-bg-active: hsl(3, 100%, 89%);
+  --red-line: hsl(3, 97%, 86%);
+  --red-border: hsl(2, 81%, 80%);
+  --red-border-hover: hsl(2, 71%, 73%);
+  --red-solid: hsl(358, 75%, 59%);
+  --red-solid-hover: hsl(357, 66%, 53%);
+  --red-text-secondary: hsl(355, 64%, 49%);
+  --red-text: hsl(358, 62%, 24%);
+  --yellow-bg: hsl(45, 60%, 99%);
+  --yellow-bg-secondary: hsl(53, 100%, 96%);
+  --yellow-component-bg: hsl(52, 100%, 88%);
+  --yellow-component-bg-hover: hsl(50, 100%, 82%);
+  --yellow-component-bg-active: hsl(48, 100%, 76%);
+  --yellow-line: hsl(46, 87%, 73%);
+  --yellow-border: hsl(45, 67%, 67%);
+  --yellow-border-hover: hsl(44, 58%, 56%);
+  --yellow-solid-hover: hsl(45, 89%, 58%);
+  --yellow-text-secondary: hsl(46, 100%, 27%);
+  --yellow-text: hsl(43, 32%, 21%);
   --lime-3: hsl(85, 76.0%, 92.3%);
+  --shadow-focus: 0 0 0 2px hsla(47, 100%, 65%, 0.35), 0 0 0 3.5px hsl(0, 0%, 9.0%);
   --html-bg: hsl(0, 0%, 97.3%);
   --app-bg: hsl(0, 0%, 100%);
   --nav-bg: hsl(0, 0%, 100%);
-  --nav-item-bg: transparent;
+  --nav-item-bg: hsla(0, 0%, 0%, 0);
   --nav-item-bg-hover: hsl(0, 0%, 95.1%);
   --nav-item-bg-active: hsl(0, 0%, 95.1%);
-  --list-item-bg: transparent;
+  --list-item-bg: hsla(0, 0%, 0%, 0);
   --list-item-bg-hover: hsl(0, 0%, 97.3%);
   --list-item-bg-active: hsl(0, 0%, 97.3%);
   --list-item-border: hsl(0, 0%, 90.9%);
@@ -107,19 +116,20 @@
   --transfer-list-item-passive-bg: hsl(0, 0%, 99.0%);
   --hi-contrast: hsl(0, 0%, 9.0%);
   --lo-contrast: hsl(0, 0%, 99.0%);
-  --transparent: transparent;
+  --transparent: hsla(0, 0%, 0%, 0);
   --overlay-inline: hsla(0, 0%, 0%, 0.047);
   --overlay-full: hsla(0, 0%, 0%, 0.439);
   --button-primary-bg: hsl(44.7, 97.9%, 63.1%);
-  --button-primary-fg: hsl(0, 0%, 4.0%);
+  --button-primary-fg: hsl(38, 65%, 10%);
   --button-radius: 6px;
+  --button-success-fg: hsl(0, 0%, 100%);
+  --button-danger-fg: hsl(0, 0%, 100%);
   --input-radius: 6px;
   --panel-radius: 10px;
   --primary: hsl(44.7, 97.9%, 63.1%);
-  --primary-foreground: hsl(0, 0%, 0%);
+  --primary-foreground: hsl(38, 65%, 10%);
   --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%);
@@ -129,7 +139,6 @@
   --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 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;
@@ -180,8 +189,14 @@
 
 /* -- Dark (.dark) --------------------------------------------------- */
 .dark {
+  --button-primary-bg-hover: hsl(45, 89%, 58%);
   --button-secondary-bg: hsl(0, 0%, 13.6%);
   --button-secondary-fg: hsl(0, 0%, 93.0%);
+  --button-success-bg: hsl(151, 55%, 41.5%);
+  --button-success-bg-hover: hsl(151, 68%, 35%);
+  --button-danger-bg: hsl(358, 75%, 59%);
+  --button-danger-bg-hover: hsl(357, 67%, 53%);
+  --button-info-bg-hover: hsl(0, 0%, 49.4%);
   --input-bg: hsl(0, 0%, 8.5%);
   --input-border: hsl(0, 0%, 24.3%);
   --field-bg: hsl(0, 0%, 8.5%);
@@ -198,8 +213,10 @@
   --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%);
+  --success: hsl(151, 55%, 41.5%);
+  --destructive: hsl(358, 75%, 59%);
+  --invert-foreground: hsl(0, 0%, 8.5%);
+  --solid-foreground: hsl(0, 0%, 100%);
   --muted: hsl(0, 0%, 11.0%);
   --muted-foreground: hsl(0, 0%, 62.8%);
   --accent: hsl(0, 0%, 13.6%);
@@ -209,10 +226,10 @@
   --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: hsla(0, 0%, 0%, 0);
   --file-row-bg-hover: hsl(0, 0%, 11.0%);
   --notification-info-bg: hsl(0, 0%, 13.6%);
-  --notification-danger-bg: hsl(356, 43.4%, 16.4%);
+  --notification-danger-bg: hsl(0, 55%, 15%);
   --bg: hsl(0, 0%, 8.5%);
   --bg-secondary: hsl(0, 0%, 11.0%);
   --component-bg: hsl(0, 0%, 13.6%);
@@ -225,49 +242,50 @@
   --solid-hover: hsl(0, 0%, 49.4%);
   --text-secondary: hsl(0, 0%, 62.8%);
   --text: hsl(0, 0%, 93.0%);
-  --green-bg: hsl(146, 30.0%, 7.4%);
-  --green-bg-secondary: hsl(155, 44.2%, 8.4%);
-  --green-component-bg: hsl(155, 46.7%, 10.9%);
-  --green-component-bg-hover: hsl(154, 48.4%, 12.9%);
-  --green-component-bg-active: hsl(154, 49.7%, 14.9%);
-  --green-line: hsl(154, 50.9%, 17.6%);
-  --green-border: hsl(153, 51.8%, 21.8%);
-  --green-border-hover: hsl(151, 51.7%, 28.4%);
-  --green-solid: hsl(151, 55.0%, 41.5%);
-  --green-solid-hover: hsl(151, 49.3%, 46.5%);
-  --green-text-secondary: hsl(151, 50.0%, 53.2%);
-  --green-text: hsl(137, 72.0%, 94.0%);
-  --red-bg: hsl(353, 23.0%, 9.8%);
-  --red-bg-secondary: hsl(357, 34.4%, 12.0%);
-  --red-component-bg: hsl(356, 43.4%, 16.4%);
-  --red-component-bg-hover: hsl(356, 47.6%, 19.2%);
-  --red-component-bg-active: hsl(356, 51.1%, 21.9%);
-  --red-line: hsl(356, 55.2%, 25.9%);
-  --red-border: hsl(357, 60.2%, 31.8%);
-  --red-border-hover: hsl(358, 65.0%, 40.4%);
-  --red-solid: hsl(358, 75.0%, 59.0%);
-  --red-solid-hover: hsl(358, 85.3%, 64.0%);
-  --red-text-secondary: hsl(358, 100%, 69.5%);
-  --red-text: hsl(351, 89.0%, 96.0%);
-  --yellow-bg: hsl(45, 100%, 5.5%);
-  --yellow-bg-secondary: hsl(46, 100%, 6.7%);
-  --yellow-component-bg: hsl(45, 100%, 8.7%);
-  --yellow-component-bg-hover: hsl(45, 100%, 10.4%);
-  --yellow-component-bg-active: hsl(47, 100%, 12.1%);
-  --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: hsl(44.7, 97.9%, 63.1%);
-  --yellow-text-secondary: hsl(48, 100%, 47.0%);
-  --yellow-text: hsl(53, 100%, 91.0%);
+  --green-bg: hsl(140, 13%, 6%);
+  --green-bg-secondary: hsl(149, 21%, 9%);
+  --green-component-bg: hsl(151, 35%, 13%);
+  --green-component-bg-hover: hsl(149, 49%, 16%);
+  --green-component-bg-active: hsl(149, 46%, 19%);
+  --green-line: hsl(146, 42%, 24%);
+  --green-border: hsl(146, 41%, 29%);
+  --green-border-hover: hsl(148, 43%, 34%);
+  --green-solid: hsl(151, 55%, 41.5%);
+  --green-solid-hover: hsl(151, 68%, 35%);
+  --green-text-secondary: hsl(146, 56%, 60%);
+  --green-text: hsl(142, 71%, 82%);
+  --red-bg: hsl(8, 13%, 7%);
+  --red-bg-secondary: hsl(4, 28%, 10%);
+  --red-component-bg: hsl(0, 55%, 15%);
+  --red-component-bg-hover: hsl(357, 70%, 19%);
+  --red-component-bg-active: hsl(358, 62%, 24%);
+  --red-line: hsl(359, 52%, 30%);
+  --red-border: hsl(0, 46%, 38%);
+  --red-border-hover: hsl(359, 45%, 49%);
+  --red-solid: hsl(358, 75%, 59%);
+  --red-solid-hover: hsl(357, 67%, 53%);
+  --red-text-secondary: hsl(2, 100%, 77%);
+  --red-text: hsl(5, 100%, 91%);
+  --yellow-bg: hsl(0, 0%, 0%);
+  --yellow-bg-secondary: hsl(38, 35%, 6%);
+  --yellow-component-bg: hsl(45, 70%, 9%);
+  --yellow-component-bg-hover: hsl(44, 100%, 11%);
+  --yellow-component-bg-active: hsl(44, 100%, 14%);
+  --yellow-line: hsl(45, 71%, 19%);
+  --yellow-border: hsl(45, 53%, 26%);
+  --yellow-border-hover: hsl(45, 49%, 34%);
+  --yellow-solid-hover: hsl(45, 89%, 58%);
+  --yellow-text-secondary: hsl(45, 100%, 64%);
+  --yellow-text: hsl(46, 89%, 86%);
   --lime-3: hsl(85, 45%, 12%);
+  --shadow-focus: 0 0 0 2px hsla(47, 100%, 65%, 0.35), 0 0 0 3.5px hsl(0, 0%, 93.0%);
   --html-bg: hsl(0, 0%, 0%);
   --app-bg: hsl(0, 0%, 8.5%);
   --nav-bg: hsl(0, 0%, 8.5%);
-  --nav-item-bg: transparent;
+  --nav-item-bg: hsla(0, 0%, 0%, 0);
   --nav-item-bg-hover: hsl(0, 0%, 13.6%);
   --nav-item-bg-active: hsl(0, 0%, 13.6%);
-  --list-item-bg: transparent;
+  --list-item-bg: hsla(0, 0%, 0%, 0);
   --list-item-bg-hover: hsl(0, 0%, 11.0%);
   --list-item-bg-active: hsl(0, 0%, 11.0%);
   --list-item-border: hsl(0, 0%, 17.9%);