@putdotio/design 1.3.0 → 1.5.0

package/DESIGN.md

@@ -24,17 +24,17 @@ typography:
   ui:
     family: "\"GT America\", sans-serif"
     weight: 400
-    size: "0.875rem"
+    size: "1rem"
     lineHeight: 1.45
   display:
     family: "\"GT America\", sans-serif"
     weight: 900
-    size: "6rem"
+    size: "96px"
     lineHeight: 1.1
   mono:
-    family: "\"Berkeley Mono\", \"GT America Mono\", monospace"
+    family: "\"Berkeley Mono\", monospace"
     weight: 400
-    size: "0.8125rem"
+    size: "0.875rem"
     lineHeight: 1.45
 rounded:
   sm: "4px"
@@ -74,23 +74,31 @@ Dark app surfaces are the default product mode, but the token contract includes
 
 ## Typography
 
-Use GT America for product UI and display. Use GT America Mono for compact product numerics where it matches the app. Use Berkeley Mono for code, logs, identifiers, hashes, and raw technical strings.
+Use GT America for product UI and display. Berkeley Mono is the single mono face: numerics, timestamps, file sizes, ETAs, counts, code, logs, identifiers, hashes, magnet URIs, and filenames. Its tabular figures keep metadata columns aligned, so pair it with `font-variant-numeric: tabular-nums` wherever numbers sit in a column.
+
+The mono role is web and mobile only. TV surfaces have no mono face — 10-foot numerics render in GT America with tabular figures.
 
 Body UI text should stay readable and dense. Use medium weight for labels and controls, bold weight only where the hierarchy earns it, and black weight for deliberate display moments.
 
+The root font-size is responsive like the product: 14px, stepping to 15px at the `--bp-lg` breakpoint. Body, labels, and inputs sit at `--fs-base` (1rem, equal to the root); captions and button labels sit at `--fs-sm` (0.875rem). The display tiers (`--fs-2xl`, `--fs-3xl`, `--fs-display`) are fixed pixel sizes and do not scale with the root.
+
 ## Layout & Spacing
 
 put.io layouts are file-browser layouts first: lists, rows, columns, sidebars, toolbars, and sheets. Prefer whitespace and subtle dividers before card-heavy composition.
 
 The spacing scale is intentionally steep: `4, 8, 16, 32, 64, 128, 256, 512`. Use it consistently rather than tuning one-off gaps.
 
+Stacking uses the token scale — `--z-dropdown` (1000), `--z-sticky` (1100), `--z-modal` (1300), `--z-notification` (1400), `--z-tooltip` (1500) — gapped for platform chrome; never invent z-index numbers. Breakpoints (`--bp-sm`/`--bp-md`/`--bp-lg` = 640/768/1280px) mirror the product's responsive tiers; CSS media queries cannot read custom properties, so write the literal pixels in `@media` and keep them in sync with the tokens.
+
 ## Elevation & Depth
 
 Elevation should clarify interaction, not decorate. Use borders and soft shadows for popovers, modals, menus, TV focus, and draggable/drop targets. Avoid decorative glow except where it is part of a focused TV state.
 
 ## Shapes
 
-The default radius is `6px`. Use `4px` for tight controls, `8px` or `10px` for larger panels, and pill radius for segmented controls, badges, and TV action pills.
+The default radius is `6px`. Use `4px` for tight controls, `8px` or `10px` for larger panels, and pill radius for segmented controls and badges.
+
+TV is the exception: every 10-foot surface — list rows, buttons, sheets, cards, code tiles, keys — uses the single `--radius-tv` (`12px`). TV has one radius, not a scale; the only other radii on a TV surface are intentional pills and circles.
 
 ## Components
 
@@ -100,6 +108,10 @@ Form fields use the shared `--field-*` aliases: `--field-bg` for the fill, `--fi
 
 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.
 
+TV surfaces are solid token colors — no translucent materials and no blur. Focus is expressed as a fill, never a lift: rows go transparent to `--component-bg-active`, and buttons step both their fill and their border. Navigation is a Home hub that pushes full screens onto a stack; there is no tab bar. Menus are centred modals, not popovers anchored to a trigger.
+
+The 10-foot scale lives in the `tv` token group — type steps, spacing ramp, overscan ratios, radius, and z-indices — carried as data for platform adapters rather than emitted into web CSS. Overscan ratios declare their viewport axis: multiply `tv.overscan.x` by viewport width and `tv.overscan.y` by viewport height, then compose screen padding locally with the spacing tokens. Two rules do not cross over: TV has no mono face, and TV stacks `--tv-z-overlay` above `--tv-z-toast`, the reverse of the web `--z-*` order. Emit the two scales separately.
+
 ## Do's and Don'ts
 
 Do show raw filenames such as `The.Wire.S03E04.Back.Burners.1080p.BluRay.x264-DEMAND.mkv`.
@@ -108,6 +120,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, internal project links, screenshots, team photos, account data, discount strategy, or auth-gated workspace URLs in the public design repo.
+Don't publish private material in this public repo — the enumerated list lives in the repo's `docs/DISTRIBUTION.md` (Public Safety).
 
-Don't generate Swift, Kotlin, Android XML, or Roku outputs from this repo until a consuming platform repo asks for an adapter.
+Don't generate platform-native outputs (Swift, Kotlin, Android XML, Roku) from this repo — platform repos own their adapters. Policy in the repo's `docs/DISTRIBUTION.md`.

package/dist/css/tokens.css

@@ -15,9 +15,19 @@
   --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: hsl(0, 0%, 56.1%);
   --button-info-bg-hover: hsl(0, 0%, 52.3%);
+  --button-info-fg: hsl(0, 0%, 0%);
+  --button-default-bg: hsl(0, 0%, 95.1%);
+  --button-default-bg-hover: hsl(0, 0%, 93.0%);
+  --button-default-fg: hsl(0, 0%, 9.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%);
   --field-bg: hsl(0, 0%, 100%);
   --field-bg-disabled: hsl(0, 0%, 97.3%);
   --field-border: hsl(0, 0%, 85.8%);
@@ -47,8 +57,41 @@
   --input: hsl(0, 0%, 85.8%);
   --file-row-bg: hsla(0, 0%, 0%, 0);
   --file-row-bg-hover: hsl(0, 0%, 97.3%);
+  --file-row-bg-active: hsl(0, 0%, 97.3%);
+  --file-row-border: hsl(0, 0%, 90.9%);
   --notification-info-bg: hsl(0, 0%, 97.3%);
   --notification-danger-bg: hsl(2, 100%, 96%);
+  --notification-bg: hsl(0, 0%, 95.1%);
+  --notification-border: hsl(0, 0%, 88.7%);
+  --notification-fg: hsl(0, 0%, 9.0%);
+  --notification-icon: hsl(0, 0%, 43.5%);
+  --notification-success-bg: hsl(140, 41%, 97%);
+  --notification-success-border: hsl(140, 39%, 68%);
+  --notification-success-fg: hsl(146, 35%, 17%);
+  --notification-danger-border: hsl(2, 81%, 80%);
+  --notification-danger-fg: hsl(358, 62%, 24%);
+  --menu-bg: hsl(0, 0%, 95.1%);
+  --menu-border: hsl(0, 0%, 88.7%);
+  --menu-shadow: 0 16px 40px hsla(0, 0%, 0%, 0.12);
+  --menu-item-bg-hover: hsl(0, 0%, 93.0%);
+  --menu-item-text: hsl(0, 0%, 9.0%);
+  --menu-item-icon: hsl(0, 0%, 43.5%);
+  --menu-item-shortcut: hsl(0, 0%, 43.5%);
+  --menu-item-danger-text: hsl(355, 64%, 49%);
+  --menu-item-danger-bg-hover: hsl(2, 100%, 96%);
+  --menu-separator: hsl(0, 0%, 88.7%);
+  --menu-label: hsl(0, 0%, 43.5%);
+  --palette-bg: hsl(0, 0%, 95.1%);
+  --palette-border: hsl(0, 0%, 88.7%);
+  --palette-shadow: 0 16px 40px hsla(0, 0%, 0%, 0.12);
+  --palette-scrim: hsla(0, 0%, 0%, 0.439);
+  --palette-item-bg-active: hsl(0, 0%, 93.0%);
+  --palette-group-label: hsl(0, 0%, 43.5%);
+  --palette-item-meta: hsl(0, 0%, 43.5%);
+  --sheet-bg: hsl(0, 0%, 95.1%);
+  --sheet-border: hsl(0, 0%, 88.7%);
+  --sheet-shadow: 0 16px 40px hsla(0, 0%, 0%, 0.12);
+  --sheet-scrim: hsla(0, 0%, 0%, 0.439);
   --bg: hsl(0, 0%, 99.0%);
   --bg-secondary: hsl(0, 0%, 97.3%);
   --component-bg: hsl(0, 0%, 95.1%);
@@ -124,6 +167,7 @@
   --button-success-fg: hsl(0, 0%, 100%);
   --button-danger-fg: hsl(0, 0%, 100%);
   --input-radius: 6px;
+  --field-radius: 6px;
   --panel-radius: 10px;
   --primary: hsl(44.7, 97.9%, 63.1%);
   --primary-foreground: hsl(38, 65%, 10%);
@@ -131,6 +175,12 @@
   --destructive-foreground: hsl(0, 0%, 100%);
   --ring: hsla(47, 100%, 65%, 0.35);
   --file-row-icon: hsl(44.7, 97.9%, 63.1%);
+  --menu-radius: 8px;
+  --menu-item-height: 32px;
+  --palette-width: 560px;
+  --palette-input-height: 48px;
+  --palette-item-height: 36px;
+  --sheet-width: 380px;
   --yellow-solid: hsl(44.7, 97.9%, 63.1%);
   --shadow-color: hsl(0, 0%, 78.0%);
   --shadow: hsl(0, 0%, 78.0%);
@@ -141,18 +191,17 @@
   --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;
-  --font-mono: "Berkeley Mono", "GT America Mono", monospace;
+  --font-mono: "Berkeley Mono", monospace;
   --fs-xs: 0.75rem;
-  --fs-sm: 0.8125rem;
-  --fs-base: 0.875rem;
-  --fs-md: 1rem;
-  --fs-lg: 1.125rem;
-  --fs-xl: 1.5rem;
-  --fs-2xl: 2rem;
-  --fs-3xl: 3rem;
-  --fs-4xl: 4rem;
-  --fs-display: 6rem;
+  --fs-sm: 0.875rem;
+  --fs-base: 1rem;
+  --fs-md: 1.125rem;
+  --fs-lg: 1.5rem;
+  --fs-xl: 2rem;
+  --fs-2xl: 48px;
+  --fs-3xl: 64px;
+  --fs-4xl: 64px;
+  --fs-display: 96px;
   --lh-tight: 1.1;
   --lh-snug: 1.25;
   --lh-normal: 1.45;
@@ -179,12 +228,21 @@
   --radius-md: 8px;
   --radius-lg: 10px;
   --radius-pill: 999px;
+  --radius-tv: 12px;
   --border-width: 1px;
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
   --dur-fast: 120ms;
   --dur-base: 200ms;
   --dur-slow: 320ms;
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-modal: 1300;
+  --z-notification: 1400;
+  --z-tooltip: 1500;
+  --bp-sm: 640px;
+  --bp-md: 768px;
+  --bp-lg: 1280px;
 }
 
 /* -- Dark (.dark) --------------------------------------------------- */
@@ -196,9 +254,19 @@
   --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: hsl(0, 0%, 43.9%);
   --button-info-bg-hover: hsl(0, 0%, 49.4%);
+  --button-info-fg: hsl(0, 0%, 100%);
+  --button-default-bg: hsl(0, 0%, 13.6%);
+  --button-default-bg-hover: hsl(0, 0%, 15.8%);
+  --button-default-fg: hsl(0, 0%, 93.0%);
   --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%);
   --field-bg: hsl(0, 0%, 8.5%);
   --field-bg-disabled: hsl(0, 0%, 11.0%);
   --field-border: hsl(0, 0%, 24.3%);
@@ -228,8 +296,41 @@
   --input: hsl(0, 0%, 24.3%);
   --file-row-bg: hsla(0, 0%, 0%, 0);
   --file-row-bg-hover: hsl(0, 0%, 11.0%);
+  --file-row-bg-active: hsl(0, 0%, 11.0%);
+  --file-row-border: hsl(0, 0%, 17.9%);
   --notification-info-bg: hsl(0, 0%, 13.6%);
   --notification-danger-bg: hsl(0, 55%, 15%);
+  --notification-bg: hsl(0, 0%, 13.6%);
+  --notification-border: hsl(0, 0%, 20.5%);
+  --notification-fg: hsl(0, 0%, 93.0%);
+  --notification-icon: hsl(0, 0%, 62.8%);
+  --notification-success-bg: hsl(149, 21%, 9%);
+  --notification-success-border: hsl(146, 41%, 29%);
+  --notification-success-fg: hsl(142, 71%, 82%);
+  --notification-danger-border: hsl(0, 46%, 38%);
+  --notification-danger-fg: hsl(5, 100%, 91%);
+  --menu-bg: hsl(0, 0%, 13.6%);
+  --menu-border: hsl(0, 0%, 20.5%);
+  --menu-shadow: 0 16px 40px hsla(0, 0%, 0%, 0.6);
+  --menu-item-bg-hover: hsl(0, 0%, 15.8%);
+  --menu-item-text: hsl(0, 0%, 93.0%);
+  --menu-item-icon: hsl(0, 0%, 62.8%);
+  --menu-item-shortcut: hsl(0, 0%, 62.8%);
+  --menu-item-danger-text: hsl(2, 100%, 77%);
+  --menu-item-danger-bg-hover: hsl(0, 55%, 15%);
+  --menu-separator: hsl(0, 0%, 20.5%);
+  --menu-label: hsl(0, 0%, 62.8%);
+  --palette-bg: hsl(0, 0%, 13.6%);
+  --palette-border: hsl(0, 0%, 20.5%);
+  --palette-shadow: 0 16px 40px hsla(0, 0%, 0%, 0.6);
+  --palette-scrim: hsla(0, 0%, 0%, 0.565);
+  --palette-item-bg-active: hsl(0, 0%, 15.8%);
+  --palette-group-label: hsl(0, 0%, 62.8%);
+  --palette-item-meta: hsl(0, 0%, 62.8%);
+  --sheet-bg: hsl(0, 0%, 13.6%);
+  --sheet-border: hsl(0, 0%, 20.5%);
+  --sheet-shadow: 0 16px 40px hsla(0, 0%, 0%, 0.6);
+  --sheet-scrim: hsla(0, 0%, 0%, 0.565);
   --bg: hsl(0, 0%, 8.5%);
   --bg-secondary: hsl(0, 0%, 11.0%);
   --component-bg: hsl(0, 0%, 13.6%);
@@ -310,7 +411,7 @@ html {
   background: var(--html-bg);
   color: var(--text);
   font-family: var(--font-sans);
-  font-size: 15px;        /* 14–15 responsive base, per app convention */
+  font-size: 14px;  /* app.put.io root: fontSize ["14px","14px","15px"] — 15px at ≥ --bp-lg (media query below) */
   line-height: var(--lh-normal);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -322,6 +423,13 @@ body {
   margin: 0;
 }
 
+/* Root steps up on desktop, matching app.put.io's responsive base.
+   14px/15px literals must stay in sync with --bp-lg (media queries
+   can't read custom properties). */
+@media (min-width: 1280px) {
+  html { font-size: 15px; }
+}
+
 /* -- Semantic type ------------------------------------------------- */
 
 .h-display, h1.display {
@@ -336,14 +444,14 @@ body {
 
 /* Numeric / tabular UI text — transfer speeds, storage sizes, timestamps */
 .num, .tabular {
-  font-family: var(--font-ui-mono);
+  font-family: var(--font-mono);
   font-variant-numeric: tabular-nums;
   font-feature-settings: "tnum";
 }
 
 h1, .h1 {
   font-family: var(--font-sans);
-  font-size: var(--fs-3xl);
+  font-size: var(--fs-xl);
   font-weight: var(--fw-bold);
   line-height: var(--lh-tight);
   letter-spacing: var(--tracking-tight);
@@ -352,7 +460,7 @@ h1, .h1 {
 
 h2, .h2 {
   font-family: var(--font-sans);
-  font-size: var(--fs-2xl);
+  font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
   line-height: var(--lh-tight);
   margin: 0 0 var(--space-3);
@@ -360,7 +468,7 @@ h2, .h2 {
 
 h3, .h3 {
   font-family: var(--font-sans);
-  font-size: var(--fs-xl);
+  font-size: var(--fs-md);
   font-weight: var(--fw-medium);
   line-height: var(--lh-snug);
   margin: 0 0 var(--space-2);
@@ -368,7 +476,7 @@ h3, .h3 {
 
 h4, .h4 {
   font-family: var(--font-sans);
-  font-size: var(--fs-lg);
+  font-size: var(--fs-base);
   font-weight: var(--fw-medium);
   line-height: var(--lh-snug);
   margin: 0 0 var(--space-2);
@@ -389,26 +497,26 @@ p, .body {
 }
 
 .lead {
-  font-size: var(--fs-lg);
+  font-size: var(--fs-md);
   font-weight: var(--fw-regular);
   line-height: var(--lh-normal);
   color: var(--text-secondary);
 }
 
 small, .caption {
-  font-size: var(--fs-xs);
+  font-size: var(--fs-sm);  /* production caption = fontSize 0 */
   color: var(--text-secondary);
 }
 
 .label {
-  font-size: var(--fs-sm);
+  font-size: var(--fs-base);  /* production label = fontSize 1, medium */
   font-weight: var(--fw-medium);
   color: var(--text);
 }
 
 .button-text {
   font-weight: var(--fw-medium);
-  font-size: var(--fs-base);
+  font-size: var(--fs-sm);  /* production button = fontSize 0 */
   letter-spacing: 0;
 }
 
@@ -427,16 +535,6 @@ a {
 }
 a:hover { text-decoration-color: currentColor; }
 
-/* -- Component-role aliases --------------------------------------- */
-/* Button default + info variants — live aliases; the DTCG layer doesn't define these two. */
-:root {
-  --button-default-bg:        var(--component-bg);
-  --button-default-bg-hover:  var(--component-bg-hover);
-  --button-default-fg:        var(--text);
-  --button-info-bg:           var(--solid);
-  --button-info-fg:           var(--solid-foreground);
-}
-
 /* -- Utility classes ---------------------------------------------- */
 .fg-1      { color: var(--text); }
 .fg-2      { color: var(--text-secondary); }
@@ -448,3 +546,16 @@ a:hover { text-decoration-color: currentColor; }
 .bg-2           { background: var(--bg-secondary); }
 .bg-component   { background: var(--component-bg); }
 .bg-yellow      { background: var(--yellow-solid); color: var(--primary-foreground); }
+
+/* -- Reduced motion ------------------------------------------------ */
+/* Honor the OS "reduce motion" setting: collapse transitions/animations
+   to near-instant and stop looping/auto-scrolling effects. Components
+   should not rely on motion to convey state. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}