@putdotio/design 1.3.0 → 1.5.0

package/tokens/context.tokens.json

@@ -2,52 +2,12 @@
   "$description": "Shared TV context tokens. Consuming TV repos generate their own platform artifacts from these values.",
   "context": {
     "tv": {
-      "surface": {
-        "0": {
-          "$type": "color",
-          "$value": "hsl(0, 0%, 0%)",
-          "$extensions": {
-            "putio": {
-              "cssName": "surf-0",
-              "mode": "tv"
-            }
-          }
-        },
-        "1": {
-          "$type": "color",
-          "$value": "hsl(0, 0%, 3.9%)",
-          "$extensions": {
-            "putio": {
-              "cssName": "surf-1",
-              "mode": "tv"
-            }
-          }
-        },
-        "2": {
-          "$type": "color",
-          "$value": "hsl(0, 0%, 8.6%)",
-          "$extensions": {
-            "putio": {
-              "cssName": "surf-2",
-              "mode": "tv"
-            }
-          }
-        },
-        "3": {
-          "$type": "color",
-          "$value": "hsl(0, 0%, 12.2%)",
-          "$extensions": {
-            "putio": {
-              "cssName": "surf-3",
-              "mode": "tv"
-            }
-          }
-        }
-      },
       "text": {
+        "$description": "TV uses two semantic text roles. The tertiary name remains as a deprecated alias of secondary so existing consumers keep working; TV text is solid.",
         "primary": {
           "$type": "color",
-          "$value": "hsl(0, 0%, 95.7%)",
+          "$value": "{color.neutral.dark.text}",
+          "$description": "Row titles, modal option labels, and button labels.",
           "$extensions": {
             "putio": {
               "cssName": "text-1",
@@ -57,7 +17,8 @@
         },
         "secondary": {
           "$type": "color",
-          "$value": "hsla(0, 0%, 95.7%, 0.62)",
+          "$value": "{color.neutral.dark.textSecondary}",
+          "$description": "Row sublines, modal titles, section headers, and accessories.",
           "$extensions": {
             "putio": {
               "cssName": "text-2",
@@ -67,85 +28,13 @@
         },
         "tertiary": {
           "$type": "color",
-          "$value": "hsla(0, 0%, 95.7%, 0.38)",
+          "$value": "{context.tv.text.secondary}",
+          "$description": "Deprecated compatibility alias. Use context.tv.text.secondary.",
           "$extensions": {
             "putio": {
               "cssName": "text-3",
-              "mode": "tv"
-            }
-          }
-        }
-      },
-      "glass": {
-        "1": {
-          "$type": "color",
-          "$value": "hsla(0, 0%, 100%, 0.06)",
-          "$extensions": {
-            "putio": {
-              "cssName": "glass-1-bg",
-              "mode": "tv"
-            }
-          }
-        },
-        "2": {
-          "$type": "color",
-          "$value": "hsla(0, 0%, 100%, 0.10)",
-          "$extensions": {
-            "putio": {
-              "cssName": "glass-2-bg",
-              "mode": "tv"
-            }
-          }
-        },
-        "3": {
-          "$type": "color",
-          "$value": "hsla(0, 0%, 100%, 0.14)",
-          "$extensions": {
-            "putio": {
-              "cssName": "glass-3-bg",
-              "mode": "tv"
-            }
-          }
-        },
-        "border": {
-          "$type": "color",
-          "$value": "hsla(0, 0%, 100%, 0.12)",
-          "$extensions": {
-            "putio": {
-              "cssName": "glass-border",
-              "mode": "tv"
-            }
-          }
-        },
-        "borderStrong": {
-          "$type": "color",
-          "$value": "hsla(0, 0%, 100%, 0.22)",
-          "$extensions": {
-            "putio": {
-              "cssName": "glass-border-strong",
-              "mode": "tv"
-            }
-          }
-        }
-      },
-      "focus": {
-        "ring": {
-          "$type": "color",
-          "$value": "hsla(44.7, 97.9%, 63.1%, 0.18)",
-          "$extensions": {
-            "putio": {
-              "cssName": "focus-ring",
-              "mode": "tv"
-            }
-          }
-        },
-        "liftShadow": {
-          "$type": "string",
-          "$value": "0 14px 30px hsla(0, 0%, 0%, 0.45)",
-          "$extensions": {
-            "putio": {
-              "cssName": "focus-shadow",
-              "mode": "tv"
+              "mode": "tv",
+              "deprecated": true
             }
           }
         }
@@ -239,5 +128,132 @@
         }
       }
     }
+  },
+  "tv": {
+    "$description": "The portable 10-foot scale. These mode \"tv\" tokens are graph data for platform adapters and are not emitted into web CSS; preview support CSS declares matching --tv-* properties under .tv. TV has no mono face, and its z-order is distinct from the web stack.",
+    "text": {
+      "heading": {
+        "$type": "dimension",
+        "$value": "64px",
+        "$description": "text.heading · GTAmerica-Md.",
+        "$extensions": { "putio": { "cssName": "tv-text-heading", "mode": "tv" } }
+      },
+      "label": {
+        "$type": "dimension",
+        "$value": "48px",
+        "$description": "text.label · GTAmerica-Md. Screen titles, and the file-row icon size.",
+        "$extensions": { "putio": { "cssName": "tv-text-label", "mode": "tv" } }
+      },
+      "body": {
+        "$type": "dimension",
+        "$value": "36px",
+        "$description": "text.body · GTAmerica-Rg. The file-row title.",
+        "$extensions": { "putio": { "cssName": "tv-text-body", "mode": "tv" } }
+      },
+      "caption": {
+        "$type": "dimension",
+        "$value": "32px",
+        "$description": "text.caption · GTAmerica-Rg. Row subline and button icons. TV has no mono face — the size subline renders in GT America with tabular figures, so the Berkeley Mono numeric rule is web and mobile only.",
+        "$extensions": { "putio": { "cssName": "tv-text-caption", "mode": "tv" } }
+      },
+      "smol": {
+        "$type": "dimension",
+        "$value": "24px",
+        "$description": "text.smol · GTAmerica-Rg. Button labels, rendered uppercase.",
+        "$extensions": { "putio": { "cssName": "tv-text-smol", "mode": "tv" } }
+      }
+    },
+    "fontWeight": {
+      "regular": {
+        "$type": "fontWeight",
+        "$value": "400",
+        "$description": "GTAmerica-Rg.",
+        "$extensions": { "putio": { "cssName": "tv-fw-regular", "mode": "tv" } }
+      },
+      "medium": {
+        "$type": "fontWeight",
+        "$value": "500",
+        "$description": "GTAmerica-Md.",
+        "$extensions": { "putio": { "cssName": "tv-fw-medium", "mode": "tv" } }
+      }
+    },
+    "space": {
+      "xxs": {
+        "$type": "dimension",
+        "$value": "4px",
+        "$extensions": { "putio": { "cssName": "tv-space-xxs", "mode": "tv" } }
+      },
+      "xs": {
+        "$type": "dimension",
+        "$value": "8px",
+        "$extensions": { "putio": { "cssName": "tv-space-xs", "mode": "tv" } }
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "16px",
+        "$description": "Button padding at size=\"sm\".",
+        "$extensions": { "putio": { "cssName": "tv-space-sm", "mode": "tv" } }
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "32px",
+        "$description": "The workhorse step: uniform list-row padding, row gap, and header padding-bottom.",
+        "$extensions": { "putio": { "cssName": "tv-space-md", "mode": "tv" } }
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "64px",
+        "$extensions": { "putio": { "cssName": "tv-space-lg", "mode": "tv" } }
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "128px",
+        "$extensions": { "putio": { "cssName": "tv-space-xl", "mode": "tv" } }
+      },
+      "xxl": {
+        "$type": "dimension",
+        "$value": "256px",
+        "$extensions": { "putio": { "cssName": "tv-space-xxl", "mode": "tv" } }
+      }
+    },
+    "overscan": {
+      "x": {
+        "$type": "number",
+        "$value": 0.04,
+        "$description": "Horizontal safe-area ratio. Platform adapters multiply this value by viewport width.",
+        "$extensions": { "putio": { "cssName": "tv-overscan-x", "mode": "tv", "basis": "viewport-width" } }
+      },
+      "y": {
+        "$type": "number",
+        "$value": 0.02,
+        "$description": "Vertical safe-area ratio. Platform adapters multiply this value by viewport height.",
+        "$extensions": { "putio": { "cssName": "tv-overscan-y", "mode": "tv", "basis": "viewport-height" } }
+      }
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.tv}",
+      "$description": "radii.default — one radius for every 10-foot surface.",
+      "$extensions": { "putio": { "cssName": "tv-radius", "mode": "tv" } }
+    },
+    "z": {
+      "$description": "zIndices. NOT the web --z-* order: on TV, overlay sits ABOVE toast. Emit the two scales separately and never fold TV into the web stack order.",
+      "modal": {
+        "$type": "number",
+        "$value": 100,
+        "$extensions": { "putio": { "cssName": "tv-z-modal", "mode": "tv", "category": "other" } }
+      },
+      "toast": {
+        "$type": "number",
+        "$value": 200,
+        "$extensions": { "putio": { "cssName": "tv-z-toast", "mode": "tv", "category": "other" } }
+      },
+      "overlay": {
+        "$type": "number",
+        "$value": 300,
+        "$description": "Above toast — the opposite of the web scale, where --z-notification (1400) sits above --z-modal (1300).",
+        "$extensions": { "putio": { "cssName": "tv-z-overlay", "mode": "tv", "category": "other" } }
+      }
+    }
   }
 }

package/tokens/foundation.css

@@ -3,7 +3,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;
@@ -15,6 +15,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 {
@@ -29,14 +36,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);
@@ -45,7 +52,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);
@@ -53,7 +60,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);
@@ -61,7 +68,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);
@@ -82,26 +89,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;
 }
 
@@ -120,16 +127,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); }
@@ -141,3 +138,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;
+  }
+}

package/tokens/primitives.tokens.json

@@ -30,7 +30,8 @@
     },
     "color": {
       "$type": "color",
-      "$value": "hsl(0, 0%, 78.0%)",
+      "$value": "{elevation.shadowColor}",
+      "$description": "Compat name kept for existing web consumers — alias of elevation.shadowColor so the two can never drift.",
       "$extensions": {
         "putio": {
           "cssName": "shadow",
@@ -110,7 +111,7 @@
       },
       "display": {
         "$type": "fontFamily",
-        "$value": "\"GT America\", sans-serif",
+        "$value": "{typography.fontFamily.sans}",
         "$extensions": {
           "putio": {
             "cssName": "font-display",
@@ -119,20 +120,10 @@
           }
         }
       },
-      "uiMono": {
-        "$type": "fontFamily",
-        "$value": "\"GT America Mono\", monospace",
-        "$extensions": {
-          "putio": {
-            "cssName": "font-ui-mono",
-            "mode": "global",
-            "figma": true
-          }
-        }
-      },
       "mono": {
         "$type": "fontFamily",
-        "$value": "\"Berkeley Mono\", \"GT America Mono\", monospace",
+        "$value": "\"Berkeley Mono\", monospace",
+        "$description": "The single mono face: numerics, timestamps, file sizes, ETAs, counts, code, logs, magnet URIs, identifiers, and filenames. Web and mobile only — TV has no mono face.",
         "$extensions": {
           "putio": {
             "cssName": "font-mono",
@@ -156,7 +147,8 @@
       },
       "sm": {
         "$type": "dimension",
-        "$value": "0.8125rem",
+        "$value": "0.875rem",
+        "$description": "Caption and button labels — production fontSize 0.",
         "$extensions": {
           "putio": {
             "cssName": "fs-sm",
@@ -167,7 +159,8 @@
       },
       "base": {
         "$type": "dimension",
-        "$value": "0.875rem",
+        "$value": "1rem",
+        "$description": "Body, labels, inputs — production fontSize 1; equals the responsive root (14px, 15px at >= breakpoint.lg).",
         "$extensions": {
           "putio": {
             "cssName": "fs-base",
@@ -178,7 +171,8 @@
       },
       "md": {
         "$type": "dimension",
-        "$value": "1rem",
+        "$value": "1.125rem",
+        "$description": "Subheading.",
         "$extensions": {
           "putio": {
             "cssName": "fs-md",
@@ -189,7 +183,8 @@
       },
       "lg": {
         "$type": "dimension",
-        "$value": "1.125rem",
+        "$value": "1.5rem",
+        "$description": "Heading.",
         "$extensions": {
           "putio": {
             "cssName": "fs-lg",
@@ -200,7 +195,8 @@
       },
       "xl": {
         "$type": "dimension",
-        "$value": "1.5rem",
+        "$value": "2rem",
+        "$description": "Page title.",
         "$extensions": {
           "putio": {
             "cssName": "fs-xl",
@@ -211,7 +207,8 @@
       },
       "2xl": {
         "$type": "dimension",
-        "$value": "2rem",
+        "$value": "48px",
+        "$description": "Fixed display tier — does not scale with the responsive root.",
         "$extensions": {
           "putio": {
             "cssName": "fs-2xl",
@@ -222,7 +219,8 @@
       },
       "3xl": {
         "$type": "dimension",
-        "$value": "3rem",
+        "$value": "64px",
+        "$description": "Fixed display tier — does not scale with the responsive root.",
         "$extensions": {
           "putio": {
             "cssName": "fs-3xl",
@@ -233,7 +231,8 @@
       },
       "4xl": {
         "$type": "dimension",
-        "$value": "4rem",
+        "$value": "{typography.fontSize.3xl}",
+        "$description": "Compatibility alias for the former 4xl tier; new surfaces should use fontSize.3xl or fontSize.display.",
         "$extensions": {
           "putio": {
             "cssName": "fs-4xl",
@@ -244,7 +243,8 @@
       },
       "display": {
         "$type": "dimension",
-        "$value": "6rem",
+        "$value": "96px",
+        "$description": "Fixed display tier for brand display moments.",
         "$extensions": {
           "putio": {
             "cssName": "fs-display",
@@ -549,6 +549,18 @@
           "figma": true
         }
       }
+    },
+    "tv": {
+      "$type": "dimension",
+      "$value": "12px",
+      "$description": "The corner radius for every 10-foot surface — list rows, buttons, sheets, cards, code tiles, and keys. TV uses one radius, not a scale; the only other radii on TV are intentional pills and circles.",
+      "$extensions": {
+        "putio": {
+          "cssName": "radius-tv",
+          "mode": "global",
+          "figma": true
+        }
+      }
     }
   },
   "border": {
@@ -624,5 +636,108 @@
         }
       }
     }
+  },
+  "z": {
+    "$description": "Stacking scale. Gapped for platform chrome — never invent z-index numbers in apps.",
+    "dropdown": {
+      "$type": "number",
+      "$value": 1000,
+      "$extensions": {
+        "putio": {
+          "cssName": "z-dropdown",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    },
+    "sticky": {
+      "$type": "number",
+      "$value": 1100,
+      "$extensions": {
+        "putio": {
+          "cssName": "z-sticky",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    },
+    "modal": {
+      "$type": "number",
+      "$value": 1300,
+      "$extensions": {
+        "putio": {
+          "cssName": "z-modal",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    },
+    "notification": {
+      "$type": "number",
+      "$value": 1400,
+      "$extensions": {
+        "putio": {
+          "cssName": "z-notification",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    },
+    "tooltip": {
+      "$type": "number",
+      "$value": 1500,
+      "$extensions": {
+        "putio": {
+          "cssName": "z-tooltip",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    }
+  },
+  "breakpoint": {
+    "$description": "Responsive breakpoints, lifted from app.put.io's BREAKPOINTS. Generator-facing: CSS media queries cannot read custom properties, so emitters bind these as Tailwind screens, StyleX consts, or documented literals.",
+    "sm": {
+      "$type": "dimension",
+      "$value": "640px",
+      "$extensions": {
+        "putio": {
+          "cssName": "bp-sm",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": "768px",
+      "$extensions": {
+        "putio": {
+          "cssName": "bp-md",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": "1280px",
+      "$description": "The root font-size steps from 14px to 15px at this width.",
+      "$extensions": {
+        "putio": {
+          "cssName": "bp-lg",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    }
   }
 }