@putdotio/design 3.9.0 → 3.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/DESIGN.md +2 -2
  2. package/README.md +14 -0
  3. package/dist/css/tailwind.css +298 -0
  4. package/dist/css/tokens.css +2 -0
  5. package/dist/figma/putio.tokens.json +10 -0
  6. package/dist/tokens.d.ts +1 -1
  7. package/dist/tokens.dtcg.json +24 -0
  8. package/dist/tokens.flat.json +16 -0
  9. package/dist/tokens.js +16 -0
  10. package/package.json +4 -2
  11. package/system/README.md +35 -0
  12. package/system/components.css +3 -3
  13. package/tokens/primitives.tokens.json +24 -0
package/DESIGN.md CHANGED
@@ -89,7 +89,7 @@ Tier 1, 3, and 4 cards are Components (put.io owns the recipe); tier 2 cards are
89
89
  - Berkeley Mono is the one mono face: numerics, timestamps, sizes, ETAs, counts, code, logs, identifiers, hashes, magnet URIs, filenames. Columns of numbers add `font-variant-numeric: tabular-nums`.
90
90
  - TV product UI has no mono face (a debug overlay may use the platform's system monospace): 10-foot numerics use GT America `tnum`. Platforms without OpenType feature selection (Roku: `Font` takes only `uri` and `size`) get proportional figures, so budget timecodes for reflow (`1` is 399/1000 em, `0` is 636).
91
91
  - GT America is Latin only (523 codepoints, Western and Central European plus Turkish, no dingbats such as `✓` `▶` `★`). Symbols are icons. Text that can hold a filename keeps a fallback family; web falls back per glyph, while one-font-per-label platforms must ship a fallback or render `.notdef` boxes.
92
- - Root font-size is 14px, 15px from `--bp-lg`. Body, labels, inputs: `--fs-base`. Captions, button labels: `--fs-sm`. `--fs-2xl`, `--fs-3xl`, `--fs-display` are fixed pixels.
92
+ - Root font-size is 14px, 15px from `--bp-lg`. Body, labels, inputs: `--fs-base`. Captions, button labels: `--fs-sm`. Screen titles and one-time-code digits: `--fs-title`, the fixed-pixel sibling of H2's `--fs-lg`, which scales with the root. Titles sit on a 30px line with `--tracking-snug`; the code separator is 18px. `--fs-title`, `--fs-2xl`, `--fs-3xl`, `--fs-display` are fixed pixels.
93
93
 
94
94
  ## Layout & Spacing
95
95
 
@@ -137,7 +137,7 @@ Default radius `6px`; `4px` for tight controls, `8px` or `10px` for panels, pill
137
137
  - The logo sits top-left in the header, in a `30.33px` box (26px ink × 7/6). The top right stays empty by default.
138
138
  - One left-aligned column, up to `340px`, is centred horizontally and vertically.
139
139
  - A quiet centred footer links Terms of Service, Privacy Policy, and Help in muted `--fs-sm`.
140
- - One title per screen: `22px`, medium, `-0.01em` tracking. No subtitles, taglines, or marketing lines; copy stays short.
140
+ - One title per screen: `--fs-title` (`22px`), medium, `--tracking-snug` (`-0.01em`). No subtitles, taglines, or marketing lines; copy stays short.
141
141
  - Fields are the standard filled field. Fields and buttons in the column are `44px`.
142
142
  - Labels are small, muted, and above the field.
143
143
  - The primary button is full-width yellow. Secondary actions sit under the form as muted text links: “Forgot password?”, “New to put.io? Sign up”, “Wrong account? Sign out”.
package/README.md CHANGED
@@ -37,12 +37,26 @@ component recipes:
37
37
  Component recipes consume semantic aliases such as `--field-*`, `--panel-*`,
38
38
  `--primary`, `--success`, and `--destructive`, not palette tokens.
39
39
 
40
+ Tailwind v4 apps add the theme after Tailwind and the tokens. `layer(base)`
41
+ keeps the token file's element styles below utilities:
42
+
43
+ ```css
44
+ @import "tailwindcss";
45
+ @import "@putdotio/design/css" layer(base);
46
+ @import "@putdotio/design/tailwind";
47
+ ```
48
+
49
+ Utilities then read the tokens: `bg-bg` is `var(--bg)`, `rounded-sm` is
50
+ `var(--radius-sm)`, `text-lg` is `var(--fs-lg)`. The full mapping:
51
+ [Tailwind v4 theme](system/README.md#tailwind-v4-theme).
52
+
40
53
  Package entrypoints, from `exports` in [package.json](package.json):
41
54
 
42
55
  | Subpath | File |
43
56
  | -------------------------------- | ----------------------------------------------------------------------------------- |
44
57
  | `@putdotio/design/css` | [`dist/css/tokens.css`](dist/css/tokens.css) |
45
58
  | `@putdotio/design/components` | [`system/components.css`](system/components.css) |
59
+ | `@putdotio/design/tailwind` | [`dist/css/tailwind.css`](dist/css/tailwind.css) |
46
60
  | `@putdotio/design/tokens` | [`dist/tokens.flat.json`](dist/tokens.flat.json) |
47
61
  | `@putdotio/design/tokens/meta` | [`dist/tokens.js`](dist/tokens.js), typed by [`dist/tokens.d.ts`](dist/tokens.d.ts) |
48
62
  | `@putdotio/design/tokens/dtcg` | [`dist/tokens.dtcg.json`](dist/tokens.dtcg.json) |
package/dist/css/tailwind.css ADDED
@@ -0,0 +1,298 @@
1
+ /* ============================================================
2
+ put.io Tailwind v4 theme
3
+ Do not edit directly. Generated from DTCG token JSON in tokens/.
4
+
5
+ Import after "tailwindcss" and @putdotio/design/css.
6
+ ============================================================ */
7
+
8
+ /* inline: utilities read the put.io custom property where they apply,
9
+ so .dark keeps working.
10
+ reference: Tailwind emits none of these keys as variables, so a key that
11
+ shares a token's name, such as --radius-sm, never redeclares it. */
12
+ @theme inline reference {
13
+ --color-button-primary-bg: var(--button-primary-bg);
14
+ --color-button-primary-bg-hover: var(--button-primary-bg-hover);
15
+ --color-button-primary-fg: var(--button-primary-fg);
16
+ --color-button-secondary-bg: var(--button-secondary-bg);
17
+ --color-button-secondary-fg: var(--button-secondary-fg);
18
+ --color-button-secondary-bg-hover: var(--button-secondary-bg-hover);
19
+ --color-button-success-bg: var(--button-success-bg);
20
+ --color-button-success-bg-hover: var(--button-success-bg-hover);
21
+ --color-button-success-fg: var(--button-success-fg);
22
+ --color-button-danger-bg: var(--button-danger-bg);
23
+ --color-button-danger-bg-hover: var(--button-danger-bg-hover);
24
+ --color-button-danger-fg: var(--button-danger-fg);
25
+ --color-button-info-bg: var(--button-info-bg);
26
+ --color-button-info-bg-hover: var(--button-info-bg-hover);
27
+ --color-button-info-fg: var(--button-info-fg);
28
+ --color-button-default-bg: var(--button-default-bg);
29
+ --color-button-default-bg-hover: var(--button-default-bg-hover);
30
+ --color-button-default-fg: var(--button-default-fg);
31
+ --color-button-ghost-bg: var(--button-ghost-bg);
32
+ --color-button-ghost-fg: var(--button-ghost-fg);
33
+ --color-button-ghost-fg-hover: var(--button-ghost-fg-hover);
34
+ --color-button-ghost-bg-hover: var(--button-ghost-bg-hover);
35
+ --color-input-bg: var(--input-bg);
36
+ --color-input-border: var(--input-border);
37
+ --color-input-border-hover: var(--input-border-hover);
38
+ --color-input-border-focus: var(--input-border-focus);
39
+ --color-input-text: var(--input-text);
40
+ --color-input-placeholder: var(--input-placeholder);
41
+ --color-field-bg: var(--field-bg);
42
+ --color-field-bg-disabled: var(--field-bg-disabled);
43
+ --color-field-border: var(--field-border);
44
+ --color-field-border-hover: var(--field-border-hover);
45
+ --color-field-border-focus: var(--field-border-focus);
46
+ --color-field-text: var(--field-text);
47
+ --color-field-placeholder: var(--field-placeholder);
48
+ --color-panel-bg: var(--panel-bg);
49
+ --color-panel-border: var(--panel-border);
50
+ --color-background: var(--background);
51
+ --color-foreground: var(--foreground);
52
+ --color-foreground-muted: var(--foreground-muted);
53
+ --color-primary: var(--primary);
54
+ --color-primary-foreground: var(--primary-foreground);
55
+ --color-success: var(--success);
56
+ --color-success-foreground: var(--success-foreground);
57
+ --color-destructive: var(--destructive);
58
+ --color-destructive-foreground: var(--destructive-foreground);
59
+ --color-invert-foreground: var(--invert-foreground);
60
+ --color-solid-foreground: var(--solid-foreground);
61
+ --color-muted: var(--muted);
62
+ --color-muted-foreground: var(--muted-foreground);
63
+ --color-accent: var(--accent);
64
+ --color-accent-foreground: var(--accent-foreground);
65
+ --color-card: var(--card);
66
+ --color-card-foreground: var(--card-foreground);
67
+ --color-popover: var(--popover);
68
+ --color-popover-foreground: var(--popover-foreground);
69
+ --color-input: var(--input);
70
+ --color-ring: var(--ring);
71
+ --color-file-row-bg: var(--file-row-bg);
72
+ --color-file-row-bg-hover: var(--file-row-bg-hover);
73
+ --color-file-row-bg-active: var(--file-row-bg-active);
74
+ --color-file-row-border: var(--file-row-border);
75
+ --color-file-row-icon: var(--file-row-icon);
76
+ --color-notification-info-bg: var(--notification-info-bg);
77
+ --color-notification-danger-bg: var(--notification-danger-bg);
78
+ --color-notification-bg: var(--notification-bg);
79
+ --color-notification-border: var(--notification-border);
80
+ --color-notification-fg: var(--notification-fg);
81
+ --color-notification-icon: var(--notification-icon);
82
+ --color-notification-success-bg: var(--notification-success-bg);
83
+ --color-notification-success-border: var(--notification-success-border);
84
+ --color-notification-success-fg: var(--notification-success-fg);
85
+ --color-notification-danger-border: var(--notification-danger-border);
86
+ --color-notification-danger-fg: var(--notification-danger-fg);
87
+ --color-notification-badge-bg: var(--notification-badge-bg);
88
+ --color-notification-badge-fg: var(--notification-badge-fg);
89
+ --color-menu-bg: var(--menu-bg);
90
+ --color-menu-border: var(--menu-border);
91
+ --color-menu-item-bg-hover: var(--menu-item-bg-hover);
92
+ --color-menu-item-text: var(--menu-item-text);
93
+ --color-menu-item-icon: var(--menu-item-icon);
94
+ --color-menu-item-shortcut: var(--menu-item-shortcut);
95
+ --color-menu-item-danger-text: var(--menu-item-danger-text);
96
+ --color-menu-item-danger-bg-hover: var(--menu-item-danger-bg-hover);
97
+ --color-menu-separator: var(--menu-separator);
98
+ --color-menu-label: var(--menu-label);
99
+ --color-palette-bg: var(--palette-bg);
100
+ --color-palette-border: var(--palette-border);
101
+ --color-palette-scrim: var(--palette-scrim);
102
+ --color-palette-item-bg-active: var(--palette-item-bg-active);
103
+ --color-palette-group-label: var(--palette-group-label);
104
+ --color-palette-item-meta: var(--palette-item-meta);
105
+ --color-sheet-bg: var(--sheet-bg);
106
+ --color-sheet-border: var(--sheet-border);
107
+ --color-sheet-scrim: var(--sheet-scrim);
108
+ --color-avatar-yellow: var(--avatar-yellow);
109
+ --color-avatar-green: var(--avatar-green);
110
+ --color-avatar-red: var(--avatar-red);
111
+ --color-avatar-blue: var(--avatar-blue);
112
+ --color-avatar-purple: var(--avatar-purple);
113
+ --color-avatar-teal: var(--avatar-teal);
114
+ --color-avatar-orange: var(--avatar-orange);
115
+ --color-avatar-fg: var(--avatar-fg);
116
+ --color-avatar-fg-warm: var(--avatar-fg-warm);
117
+ --color-alert-info-bg: var(--alert-info-bg);
118
+ --color-alert-info-border: var(--alert-info-border);
119
+ --color-alert-info-text: var(--alert-info-text);
120
+ --color-alert-info-body: var(--alert-info-body);
121
+ --color-alert-info-icon: var(--alert-info-icon);
122
+ --color-alert-brand-bg: var(--alert-brand-bg);
123
+ --color-alert-brand-border: var(--alert-brand-border);
124
+ --color-alert-brand-text: var(--alert-brand-text);
125
+ --color-alert-brand-body: var(--alert-brand-body);
126
+ --color-alert-brand-icon: var(--alert-brand-icon);
127
+ --color-alert-success-bg: var(--alert-success-bg);
128
+ --color-alert-success-border: var(--alert-success-border);
129
+ --color-alert-success-text: var(--alert-success-text);
130
+ --color-alert-success-body: var(--alert-success-body);
131
+ --color-alert-success-icon: var(--alert-success-icon);
132
+ --color-alert-danger-bg: var(--alert-danger-bg);
133
+ --color-alert-danger-border: var(--alert-danger-border);
134
+ --color-alert-danger-text: var(--alert-danger-text);
135
+ --color-alert-danger-body: var(--alert-danger-body);
136
+ --color-alert-danger-icon: var(--alert-danger-icon);
137
+ --color-slider-track: var(--slider-track);
138
+ --color-slider-buffer: var(--slider-buffer);
139
+ --color-slider-fill: var(--slider-fill);
140
+ --color-slider-knob: var(--slider-knob);
141
+ --color-slider-fill-disabled: var(--slider-fill-disabled);
142
+ --color-pagination-item-text: var(--pagination-item-text);
143
+ --color-pagination-item-text-active: var(--pagination-item-text-active);
144
+ --color-pagination-item-bg-hover: var(--pagination-item-bg-hover);
145
+ --color-pagination-item-bg-active: var(--pagination-item-bg-active);
146
+ --color-pagination-item-border-active: var(--pagination-item-border-active);
147
+ --color-yellow-solid: var(--yellow-solid);
148
+ --color-bg: var(--bg);
149
+ --color-bg-secondary: var(--bg-secondary);
150
+ --color-component-bg: var(--component-bg);
151
+ --color-component-bg-hover: var(--component-bg-hover);
152
+ --color-component-bg-active: var(--component-bg-active);
153
+ --color-line: var(--line);
154
+ --color-border: var(--border);
155
+ --color-border-hover: var(--border-hover);
156
+ --color-solid: var(--solid);
157
+ --color-solid-hover: var(--solid-hover);
158
+ --color-text-secondary: var(--text-secondary);
159
+ --color-text: var(--text);
160
+ --color-green-bg: var(--green-bg);
161
+ --color-green-bg-secondary: var(--green-bg-secondary);
162
+ --color-green-component-bg: var(--green-component-bg);
163
+ --color-green-component-bg-hover: var(--green-component-bg-hover);
164
+ --color-green-component-bg-active: var(--green-component-bg-active);
165
+ --color-green-line: var(--green-line);
166
+ --color-green-border: var(--green-border);
167
+ --color-green-border-hover: var(--green-border-hover);
168
+ --color-green-solid: var(--green-solid);
169
+ --color-green-solid-hover: var(--green-solid-hover);
170
+ --color-green-text-secondary: var(--green-text-secondary);
171
+ --color-green-text: var(--green-text);
172
+ --color-red-bg: var(--red-bg);
173
+ --color-red-bg-secondary: var(--red-bg-secondary);
174
+ --color-red-component-bg: var(--red-component-bg);
175
+ --color-red-component-bg-hover: var(--red-component-bg-hover);
176
+ --color-red-component-bg-active: var(--red-component-bg-active);
177
+ --color-red-line: var(--red-line);
178
+ --color-red-border: var(--red-border);
179
+ --color-red-border-hover: var(--red-border-hover);
180
+ --color-red-solid: var(--red-solid);
181
+ --color-red-solid-hover: var(--red-solid-hover);
182
+ --color-red-text-secondary: var(--red-text-secondary);
183
+ --color-red-text: var(--red-text);
184
+ --color-yellow-bg: var(--yellow-bg);
185
+ --color-yellow-bg-secondary: var(--yellow-bg-secondary);
186
+ --color-yellow-component-bg: var(--yellow-component-bg);
187
+ --color-yellow-component-bg-hover: var(--yellow-component-bg-hover);
188
+ --color-yellow-component-bg-active: var(--yellow-component-bg-active);
189
+ --color-yellow-line: var(--yellow-line);
190
+ --color-yellow-border: var(--yellow-border);
191
+ --color-yellow-border-hover: var(--yellow-border-hover);
192
+ --color-yellow-solid-hover: var(--yellow-solid-hover);
193
+ --color-yellow-text-secondary: var(--yellow-text-secondary);
194
+ --color-yellow-text: var(--yellow-text);
195
+ --color-lime-3: var(--lime-3);
196
+ --color-shadow-color: var(--shadow-color);
197
+ --color-shadow: var(--shadow);
198
+ --color-shadow-focus-color: var(--shadow-focus-color);
199
+ --color-html-bg: var(--html-bg);
200
+ --color-app-bg: var(--app-bg);
201
+ --color-nav-bg: var(--nav-bg);
202
+ --color-nav-item-bg: var(--nav-item-bg);
203
+ --color-nav-item-bg-hover: var(--nav-item-bg-hover);
204
+ --color-nav-item-bg-active: var(--nav-item-bg-active);
205
+ --color-list-item-bg: var(--list-item-bg);
206
+ --color-list-item-bg-hover: var(--list-item-bg-hover);
207
+ --color-list-item-bg-active: var(--list-item-bg-active);
208
+ --color-list-item-border: var(--list-item-border);
209
+ --color-segmented-control-bg: var(--segmented-control-bg);
210
+ --color-segmented-control-bg-active: var(--segmented-control-bg-active);
211
+ --color-transfer-list-item-completing-bg: var(--transfer-list-item-completing-bg);
212
+ --color-transfer-list-item-downloading-bg: var(--transfer-list-item-downloading-bg);
213
+ --color-transfer-list-item-finished-bg: var(--transfer-list-item-finished-bg);
214
+ --color-transfer-list-item-passive-bg: var(--transfer-list-item-passive-bg);
215
+ --color-hi-contrast: var(--hi-contrast);
216
+ --color-lo-contrast: var(--lo-contrast);
217
+ --color-overlay-inline: var(--overlay-inline);
218
+ --color-overlay-full: var(--overlay-full);
219
+
220
+ --font-sans: var(--font-sans);
221
+ --font-display: var(--font-display);
222
+ --font-mono: var(--font-mono);
223
+
224
+ --font-weight-regular: var(--fw-regular);
225
+ --font-weight-medium: var(--fw-medium);
226
+ --font-weight-bold: var(--fw-bold);
227
+ --font-weight-black: var(--fw-black);
228
+
229
+ --text-xs: var(--fs-xs);
230
+ --text-xs--line-height: initial;
231
+ --text-sm: var(--fs-sm);
232
+ --text-sm--line-height: initial;
233
+ --text-base: var(--fs-base);
234
+ --text-base--line-height: initial;
235
+ --text-md: var(--fs-md);
236
+ --text-md--line-height: initial;
237
+ --text-lg: var(--fs-lg);
238
+ --text-lg--line-height: initial;
239
+ --text-title: var(--fs-title);
240
+ --text-title--line-height: initial;
241
+ --text-xl: var(--fs-xl);
242
+ --text-xl--line-height: initial;
243
+ --text-2xl: var(--fs-2xl);
244
+ --text-2xl--line-height: initial;
245
+ --text-3xl: var(--fs-3xl);
246
+ --text-3xl--line-height: initial;
247
+ --text-4xl: var(--fs-4xl);
248
+ --text-4xl--line-height: initial;
249
+ --text-display: var(--fs-display);
250
+ --text-display--line-height: initial;
251
+
252
+ --leading-tight: var(--lh-tight);
253
+ --leading-snug: var(--lh-snug);
254
+ --leading-normal: var(--lh-normal);
255
+ --leading-loose: var(--lh-loose);
256
+
257
+ --tracking-button: var(--button-tracking);
258
+ --tracking-button-md: var(--button-tracking-md);
259
+ --tracking-button-sm: var(--button-tracking-sm);
260
+ --tracking-button-xs: var(--button-tracking-xs);
261
+ --tracking-tight: var(--tracking-tight);
262
+ --tracking-snug: var(--tracking-snug);
263
+ --tracking-normal: var(--tracking-normal);
264
+ --tracking-wide: var(--tracking-wide);
265
+ --tracking-uppercase: var(--tracking-uppercase);
266
+
267
+ --radius-button: var(--button-radius);
268
+ --radius-input: var(--input-radius);
269
+ --radius-field: var(--field-radius);
270
+ --radius-panel: var(--panel-radius);
271
+ --radius-menu: var(--menu-radius);
272
+ --radius-alert: var(--alert-radius);
273
+ --radius-sm: var(--radius-sm);
274
+ --radius: var(--radius);
275
+ --radius-md: var(--radius-md);
276
+ --radius-lg: var(--radius-lg);
277
+ --radius-pill: var(--radius-pill);
278
+ --radius-tv: var(--radius-tv);
279
+
280
+ --shadow-input-ring: var(--input-ring);
281
+ --shadow-field-ring: var(--field-ring);
282
+ --shadow-panel: var(--panel-shadow);
283
+ --shadow-menu: var(--menu-shadow);
284
+ --shadow-palette: var(--palette-shadow);
285
+ --shadow-sheet: var(--sheet-shadow);
286
+ --shadow-sm: var(--shadow-sm);
287
+ --shadow-md: var(--shadow-md);
288
+ --shadow-lg: var(--shadow-lg);
289
+ --shadow-focus: var(--shadow-focus);
290
+
291
+ --ease-out: var(--ease-out);
292
+ --ease-in-out: var(--ease-in-out);
293
+
294
+ --transition-duration-fast: var(--dur-fast);
295
+ --transition-duration-reveal: var(--dur-reveal);
296
+ --transition-duration-base: var(--dur-base);
297
+ --transition-duration-slow: var(--dur-slow);
298
+ }
package/dist/css/tokens.css CHANGED
@@ -265,6 +265,7 @@
265
265
  --fs-base: 1rem;
266
266
  --fs-md: 1.125rem;
267
267
  --fs-lg: 1.5rem;
268
+ --fs-title: 22px;
268
269
  --fs-xl: 2rem;
269
270
  --fs-2xl: 48px;
270
271
  --fs-3xl: 64px;
@@ -279,6 +280,7 @@
279
280
  --fw-bold: 700;
280
281
  --fw-black: 900;
281
282
  --tracking-tight: -0.02em;
283
+ --tracking-snug: -0.01em;
282
284
  --tracking-normal: 0;
283
285
  --tracking-wide: 0.02em;
284
286
  --tracking-uppercase: 0.08em;
package/dist/figma/putio.tokens.json CHANGED
@@ -912,6 +912,11 @@
912
912
  "$value": "1.5rem",
913
913
  "$description": "Heading."
914
914
  },
915
+ "title": {
916
+ "$type": "dimension",
917
+ "$value": "22px",
918
+ "$description": "Screen titles and one-time-code digits. The fixed-pixel sibling of fontSize.lg (H2), which scales with the root."
919
+ },
915
920
  "xl": {
916
921
  "$type": "dimension",
917
922
  "$value": "2rem",
@@ -979,6 +984,11 @@
979
984
  "$type": "dimension",
980
985
  "$value": "-0.02em"
981
986
  },
987
+ "snug": {
988
+ "$type": "dimension",
989
+ "$value": "-0.01em",
990
+ "$description": "Slight negative tracking for screen titles."
991
+ },
982
992
  "normal": {
983
993
  "$type": "number",
984
994
  "$value": "0"
package/dist/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  // Do not edit directly. Generated from tokens/**/*.tokens.json.
2
2
 
3
- export type PutioTokenName = "component.button.primary.background" | "component.button.primary.backgroundHover" | "component.button.primary.backgroundHoverDark" | "component.button.primary.foreground" | "component.button.primary.radius" | "component.button.secondary.background" | "component.button.secondary.backgroundDark" | "component.button.secondary.foreground" | "component.button.secondary.foregroundDark" | "component.button.secondary.backgroundHover" | "component.button.secondary.backgroundHoverDark" | "component.button.success.background" | "component.button.success.backgroundDark" | "component.button.success.backgroundHover" | "component.button.success.backgroundHoverDark" | "component.button.success.foreground" | "component.button.danger.background" | "component.button.danger.backgroundDark" | "component.button.danger.backgroundHover" | "component.button.danger.backgroundHoverDark" | "component.button.danger.foreground" | "component.button.info.background" | "component.button.info.backgroundDark" | "component.button.info.backgroundHover" | "component.button.info.backgroundHoverDark" | "component.button.info.foreground" | "component.button.info.foregroundDark" | "component.button.default.background" | "component.button.default.backgroundDark" | "component.button.default.backgroundHover" | "component.button.default.backgroundHoverDark" | "component.button.default.foreground" | "component.button.default.foregroundDark" | "component.button.ghost.background" | "component.button.ghost.foreground" | "component.button.ghost.foregroundDark" | "component.button.ghost.foregroundHover" | "component.button.ghost.foregroundHoverDark" | "component.button.ghost.backgroundHover" | "component.button.ghost.backgroundHoverDark" | "component.button.height" | "component.button.heightMd" | "component.button.heightSm" | "component.button.heightXs" | "component.button.paddingX" | "component.button.paddingXXs" | "component.button.labelSize" | "component.button.labelSizeXs" | "component.button.tracking" | "component.button.trackingMd" | "component.button.trackingSm" | "component.button.trackingXs" | "component.button.iconSize" | "component.button.gap" | "component.nav.height" | "component.nav.heightCompact" | "component.nav.ctaHeight" | "component.input.background" | "component.input.backgroundDark" | "component.input.border" | "component.input.borderDark" | "component.input.radius" | "component.input.borderHover" | "component.input.borderHoverDark" | "component.input.borderFocus" | "component.input.borderFocusDark" | "component.input.ring" | "component.input.ringDark" | "component.input.text" | "component.input.textDark" | "component.input.placeholder" | "component.input.placeholderDark" | "component.field.background" | "component.field.backgroundDark" | "component.field.backgroundDisabled" | "component.field.backgroundDisabledDark" | "component.field.border" | "component.field.borderDark" | "component.field.borderHover" | "component.field.borderHoverDark" | "component.field.borderFocus" | "component.field.borderFocusDark" | "component.field.text" | "component.field.textDark" | "component.field.placeholder" | "component.field.placeholderDark" | "component.field.radius" | "component.field.ring" | "component.field.ringDark" | "component.panel.background" | "component.panel.backgroundDark" | "component.panel.border" | "component.panel.borderDark" | "component.panel.radius" | "component.panel.shadow" | "component.panel.shadowDark" | "component.alias.background" | "component.alias.backgroundDark" | "component.alias.foreground" | "component.alias.foregroundDark" | "component.alias.foregroundMuted" | "component.alias.foregroundMutedDark" | "component.alias.primary" | "component.alias.primaryForeground" | "component.alias.success" | "component.alias.successDark" | "component.alias.successForeground" | "component.alias.destructive" | "component.alias.destructiveDark" | "component.alias.destructiveForeground" | "component.alias.invertForeground" | "component.alias.invertForegroundDark" | "component.alias.solidForeground" | "component.alias.solidForegroundDark" | "component.alias.muted" | "component.alias.mutedDark" | "component.alias.mutedForeground" | "component.alias.mutedForegroundDark" | "component.alias.accent" | "component.alias.accentDark" | "component.alias.accentForeground" | "component.alias.accentForegroundDark" | "component.alias.card" | "component.alias.cardDark" | "component.alias.cardForeground" | "component.alias.cardForegroundDark" | "component.alias.popover" | "component.alias.popoverDark" | "component.alias.popoverForeground" | "component.alias.popoverForegroundDark" | "component.alias.input" | "component.alias.inputDark" | "component.alias.ring" | "component.fileRow.background" | "component.fileRow.backgroundDark" | "component.fileRow.hoverBackground" | "component.fileRow.hoverBackgroundDark" | "component.fileRow.activeBackground" | "component.fileRow.activeBackgroundDark" | "component.fileRow.border" | "component.fileRow.borderDark" | "component.fileRow.icon" | "component.notification.infoBackground" | "component.notification.infoBackgroundDark" | "component.notification.dangerBackground" | "component.notification.dangerBackgroundDark" | "component.notification.background" | "component.notification.backgroundDark" | "component.notification.border" | "component.notification.borderDark" | "component.notification.foreground" | "component.notification.foregroundDark" | "component.notification.icon" | "component.notification.iconDark" | "component.notification.successBackground" | "component.notification.successBackgroundDark" | "component.notification.successBorder" | "component.notification.successBorderDark" | "component.notification.successForeground" | "component.notification.successForegroundDark" | "component.notification.dangerBorder" | "component.notification.dangerBorderDark" | "component.notification.dangerForeground" | "component.notification.dangerForegroundDark" | "component.notification.badgeBackground" | "component.notification.badgeForeground" | "component.menu.background" | "component.menu.backgroundDark" | "component.menu.border" | "component.menu.borderDark" | "component.menu.radius" | "component.menu.shadow" | "component.menu.shadowDark" | "component.menu.itemBackgroundHover" | "component.menu.itemBackgroundHoverDark" | "component.menu.itemText" | "component.menu.itemTextDark" | "component.menu.itemIcon" | "component.menu.itemIconDark" | "component.menu.itemShortcut" | "component.menu.itemShortcutDark" | "component.menu.itemDangerText" | "component.menu.itemDangerTextDark" | "component.menu.itemDangerBackgroundHover" | "component.menu.itemDangerBackgroundHoverDark" | "component.menu.itemHeight" | "component.menu.separator" | "component.menu.separatorDark" | "component.menu.label" | "component.menu.labelDark" | "component.palette.background" | "component.palette.backgroundDark" | "component.palette.border" | "component.palette.borderDark" | "component.palette.shadow" | "component.palette.shadowDark" | "component.palette.scrim" | "component.palette.scrimDark" | "component.palette.width" | "component.palette.inputHeight" | "component.palette.itemHeight" | "component.palette.itemBackgroundActive" | "component.palette.itemBackgroundActiveDark" | "component.palette.groupLabel" | "component.palette.groupLabelDark" | "component.palette.itemMeta" | "component.palette.itemMetaDark" | "component.sheet.background" | "component.sheet.backgroundDark" | "component.sheet.border" | "component.sheet.borderDark" | "component.sheet.shadow" | "component.sheet.shadowDark" | "component.sheet.scrim" | "component.sheet.scrimDark" | "component.sheet.width" | "component.avatar.yellow" | "component.avatar.green" | "component.avatar.red" | "component.avatar.blue" | "component.avatar.purple" | "component.avatar.teal" | "component.avatar.orange" | "component.avatar.foreground" | "component.avatar.foregroundWarm" | "component.alert.radius" | "component.alert.infoBackground" | "component.alert.infoBackgroundDark" | "component.alert.infoBorder" | "component.alert.infoBorderDark" | "component.alert.infoText" | "component.alert.infoTextDark" | "component.alert.infoBody" | "component.alert.infoBodyDark" | "component.alert.infoIcon" | "component.alert.infoIconDark" | "component.alert.brandBackground" | "component.alert.brandBackgroundDark" | "component.alert.brandBorder" | "component.alert.brandBorderDark" | "component.alert.brandText" | "component.alert.brandTextDark" | "component.alert.brandBody" | "component.alert.brandBodyDark" | "component.alert.brandIcon" | "component.alert.brandIconDark" | "component.alert.successBackground" | "component.alert.successBackgroundDark" | "component.alert.successBorder" | "component.alert.successBorderDark" | "component.alert.successText" | "component.alert.successTextDark" | "component.alert.successBody" | "component.alert.successBodyDark" | "component.alert.successIcon" | "component.alert.successIconDark" | "component.alert.dangerBackground" | "component.alert.dangerBackgroundDark" | "component.alert.dangerBorder" | "component.alert.dangerBorderDark" | "component.alert.dangerText" | "component.alert.dangerTextDark" | "component.alert.dangerBody" | "component.alert.dangerBodyDark" | "component.alert.dangerIcon" | "component.alert.dangerIconDark" | "component.slider.track" | "component.slider.trackDark" | "component.slider.buffer" | "component.slider.bufferDark" | "component.slider.fill" | "component.slider.knob" | "component.slider.fillDisabled" | "component.slider.fillDisabledDark" | "component.slider.trackHeight" | "component.slider.knobSize" | "component.slider.hitHeight" | "component.pagination.itemSize" | "component.pagination.itemText" | "component.pagination.itemTextDark" | "component.pagination.itemTextActive" | "component.pagination.itemTextActiveDark" | "component.pagination.itemBackgroundHover" | "component.pagination.itemBackgroundHoverDark" | "component.pagination.itemBackgroundActive" | "component.pagination.itemBackgroundActiveDark" | "component.pagination.itemBorderActive" | "component.pagination.itemBorderActiveDark" | "context.tv.text.primary" | "context.tv.text.secondary" | "context.tv.text.tertiary" | "context.tv.channelArt.production.posterBackground" | "context.tv.channelArt.production.splashBackground" | "context.tv.channelArt.development.background" | "context.tv.channelArt.development.accent" | "context.tv.channelArt.development.grid" | "context.tv.channelArt.nightly.background" | "context.tv.channelArt.nightly.accent" | "context.tv.channelArt.nightly.star" | "context.tv.channelArt.nightly.moon" | "context.tv.channelArt.nightly.moonCrater" | "context.tv.channelArt.lab.background" | "context.tv.channelArt.lab.foreground" | "context.tv.channelArt.lab.accent" | "tv.video.background" | "tv.video.heroScrimTop" | "tv.video.heroScrimBottom" | "tv.video.textOnVideo" | "tv.text.heading" | "tv.text.label" | "tv.text.body" | "tv.text.caption" | "tv.text.smol" | "tv.fontWeight.regular" | "tv.fontWeight.medium" | "tv.space.xxs" | "tv.space.xs" | "tv.space.sm" | "tv.space.md" | "tv.space.lg" | "tv.space.xl" | "tv.space.xxl" | "tv.overscan.x" | "tv.overscan.y" | "tv.radius" | "tv.focus.borderWidth" | "tv.focus.row.background" | "tv.focus.row.backgroundFocused" | "tv.focus.control.background" | "tv.focus.control.backgroundFocused" | "tv.focus.control.border" | "tv.focus.control.borderFocused" | "tv.z.modal" | "tv.z.toast" | "tv.z.overlay" | "color.brand.yellow" | "color.neutral.light.bg" | "color.neutral.light.bgSecondary" | "color.neutral.light.componentBg" | "color.neutral.light.componentBgHover" | "color.neutral.light.componentBgActive" | "color.neutral.light.line" | "color.neutral.light.border" | "color.neutral.light.borderHover" | "color.neutral.light.solid" | "color.neutral.light.solidHover" | "color.neutral.light.textSecondary" | "color.neutral.light.text" | "color.neutral.dark.bg" | "color.neutral.dark.bgSecondary" | "color.neutral.dark.componentBg" | "color.neutral.dark.componentBgHover" | "color.neutral.dark.componentBgActive" | "color.neutral.dark.line" | "color.neutral.dark.border" | "color.neutral.dark.borderHover" | "color.neutral.dark.solid" | "color.neutral.dark.solidHover" | "color.neutral.dark.textSecondary" | "color.neutral.dark.text" | "color.green.light.bg" | "color.green.light.bgSecondary" | "color.green.light.componentBg" | "color.green.light.componentBgHover" | "color.green.light.componentBgActive" | "color.green.light.line" | "color.green.light.border" | "color.green.light.borderHover" | "color.green.light.solid" | "color.green.light.solidHover" | "color.green.light.textSecondary" | "color.green.light.text" | "color.green.dark.bg" | "color.green.dark.bgSecondary" | "color.green.dark.componentBg" | "color.green.dark.componentBgHover" | "color.green.dark.componentBgActive" | "color.green.dark.line" | "color.green.dark.border" | "color.green.dark.borderHover" | "color.green.dark.solid" | "color.green.dark.solidHover" | "color.green.dark.textSecondary" | "color.green.dark.text" | "color.red.light.bg" | "color.red.light.bgSecondary" | "color.red.light.componentBg" | "color.red.light.componentBgHover" | "color.red.light.componentBgActive" | "color.red.light.line" | "color.red.light.border" | "color.red.light.borderHover" | "color.red.light.solid" | "color.red.light.solidHover" | "color.red.light.textSecondary" | "color.red.light.text" | "color.red.dark.bg" | "color.red.dark.bgSecondary" | "color.red.dark.componentBg" | "color.red.dark.componentBgHover" | "color.red.dark.componentBgActive" | "color.red.dark.line" | "color.red.dark.border" | "color.red.dark.borderHover" | "color.red.dark.solid" | "color.red.dark.solidHover" | "color.red.dark.textSecondary" | "color.red.dark.text" | "color.yellow.light.bg" | "color.yellow.light.bgSecondary" | "color.yellow.light.componentBg" | "color.yellow.light.componentBgHover" | "color.yellow.light.componentBgActive" | "color.yellow.light.line" | "color.yellow.light.border" | "color.yellow.light.borderHover" | "color.yellow.light.solidHover" | "color.yellow.light.textSecondary" | "color.yellow.light.text" | "color.yellow.dark.bg" | "color.yellow.dark.bgSecondary" | "color.yellow.dark.componentBg" | "color.yellow.dark.componentBgHover" | "color.yellow.dark.componentBgActive" | "color.yellow.dark.line" | "color.yellow.dark.border" | "color.yellow.dark.borderHover" | "color.yellow.dark.solidHover" | "color.yellow.dark.textSecondary" | "color.yellow.dark.text" | "color.transfer.light.lime3" | "color.transfer.dark.lime3" | "elevation.shadowColor" | "elevation.color" | "elevation.sm" | "elevation.md" | "elevation.lg" | "elevation.focusColor" | "elevation.focus" | "elevation.focusDark" | "typography.fontFamily.sans" | "typography.fontFamily.display" | "typography.fontFamily.mono" | "typography.fontSize.xs" | "typography.fontSize.sm" | "typography.fontSize.base" | "typography.fontSize.md" | "typography.fontSize.lg" | "typography.fontSize.xl" | "typography.fontSize.2xl" | "typography.fontSize.3xl" | "typography.fontSize.4xl" | "typography.fontSize.display" | "typography.lineHeight.tight" | "typography.lineHeight.snug" | "typography.lineHeight.normal" | "typography.lineHeight.loose" | "typography.fontWeight.regular" | "typography.fontWeight.medium" | "typography.fontWeight.bold" | "typography.fontWeight.black" | "typography.letterSpacing.tight" | "typography.letterSpacing.normal" | "typography.letterSpacing.wide" | "typography.letterSpacing.uppercase" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "radius.sm" | "radius.default" | "radius.md" | "radius.lg" | "radius.pill" | "radius.tv" | "border.width" | "motion.easing.out" | "motion.easing.inOut" | "motion.duration.fast" | "motion.duration.reveal" | "motion.duration.base" | "motion.duration.slow" | "z.dropdown" | "z.sticky" | "z.modal" | "z.notification" | "z.tooltip" | "breakpoint.sm" | "breakpoint.md" | "breakpoint.lg" | "surface.light.htmlBg" | "surface.light.appBg" | "surface.light.navBg" | "surface.light.navItemBg" | "surface.light.navItemBgHover" | "surface.light.navItemBgActive" | "surface.light.listItemBg" | "surface.light.listItemBgHover" | "surface.light.listItemBgActive" | "surface.light.listItemBorder" | "surface.light.segmentedControlBg" | "surface.light.segmentedControlBgActive" | "surface.light.transferListItemCompletingBg" | "surface.light.transferListItemDownloadingBg" | "surface.light.transferListItemFinishedBg" | "surface.light.transferListItemPassiveBg" | "surface.light.hiContrast" | "surface.light.loContrast" | "surface.light.transparent" | "surface.light.overlayInline" | "surface.light.overlayFull" | "surface.dark.htmlBg" | "surface.dark.appBg" | "surface.dark.navBg" | "surface.dark.navItemBg" | "surface.dark.navItemBgHover" | "surface.dark.navItemBgActive" | "surface.dark.listItemBg" | "surface.dark.listItemBgHover" | "surface.dark.listItemBgActive" | "surface.dark.listItemBorder" | "surface.dark.segmentedControlBg" | "surface.dark.segmentedControlBgActive" | "surface.dark.transferListItemCompletingBg" | "surface.dark.transferListItemDownloadingBg" | "surface.dark.transferListItemFinishedBg" | "surface.dark.transferListItemPassiveBg" | "surface.dark.hiContrast" | "surface.dark.loContrast" | "surface.dark.overlayInline" | "surface.dark.overlayFull" | "surface.dark.shadowColor" | "surface.dark.shadow" | "surface.dark.shadowSm" | "surface.dark.shadowMd" | "surface.dark.shadowLg";
3
+ export type PutioTokenName = "component.button.primary.background" | "component.button.primary.backgroundHover" | "component.button.primary.backgroundHoverDark" | "component.button.primary.foreground" | "component.button.primary.radius" | "component.button.secondary.background" | "component.button.secondary.backgroundDark" | "component.button.secondary.foreground" | "component.button.secondary.foregroundDark" | "component.button.secondary.backgroundHover" | "component.button.secondary.backgroundHoverDark" | "component.button.success.background" | "component.button.success.backgroundDark" | "component.button.success.backgroundHover" | "component.button.success.backgroundHoverDark" | "component.button.success.foreground" | "component.button.danger.background" | "component.button.danger.backgroundDark" | "component.button.danger.backgroundHover" | "component.button.danger.backgroundHoverDark" | "component.button.danger.foreground" | "component.button.info.background" | "component.button.info.backgroundDark" | "component.button.info.backgroundHover" | "component.button.info.backgroundHoverDark" | "component.button.info.foreground" | "component.button.info.foregroundDark" | "component.button.default.background" | "component.button.default.backgroundDark" | "component.button.default.backgroundHover" | "component.button.default.backgroundHoverDark" | "component.button.default.foreground" | "component.button.default.foregroundDark" | "component.button.ghost.background" | "component.button.ghost.foreground" | "component.button.ghost.foregroundDark" | "component.button.ghost.foregroundHover" | "component.button.ghost.foregroundHoverDark" | "component.button.ghost.backgroundHover" | "component.button.ghost.backgroundHoverDark" | "component.button.height" | "component.button.heightMd" | "component.button.heightSm" | "component.button.heightXs" | "component.button.paddingX" | "component.button.paddingXXs" | "component.button.labelSize" | "component.button.labelSizeXs" | "component.button.tracking" | "component.button.trackingMd" | "component.button.trackingSm" | "component.button.trackingXs" | "component.button.iconSize" | "component.button.gap" | "component.nav.height" | "component.nav.heightCompact" | "component.nav.ctaHeight" | "component.input.background" | "component.input.backgroundDark" | "component.input.border" | "component.input.borderDark" | "component.input.radius" | "component.input.borderHover" | "component.input.borderHoverDark" | "component.input.borderFocus" | "component.input.borderFocusDark" | "component.input.ring" | "component.input.ringDark" | "component.input.text" | "component.input.textDark" | "component.input.placeholder" | "component.input.placeholderDark" | "component.field.background" | "component.field.backgroundDark" | "component.field.backgroundDisabled" | "component.field.backgroundDisabledDark" | "component.field.border" | "component.field.borderDark" | "component.field.borderHover" | "component.field.borderHoverDark" | "component.field.borderFocus" | "component.field.borderFocusDark" | "component.field.text" | "component.field.textDark" | "component.field.placeholder" | "component.field.placeholderDark" | "component.field.radius" | "component.field.ring" | "component.field.ringDark" | "component.panel.background" | "component.panel.backgroundDark" | "component.panel.border" | "component.panel.borderDark" | "component.panel.radius" | "component.panel.shadow" | "component.panel.shadowDark" | "component.alias.background" | "component.alias.backgroundDark" | "component.alias.foreground" | "component.alias.foregroundDark" | "component.alias.foregroundMuted" | "component.alias.foregroundMutedDark" | "component.alias.primary" | "component.alias.primaryForeground" | "component.alias.success" | "component.alias.successDark" | "component.alias.successForeground" | "component.alias.destructive" | "component.alias.destructiveDark" | "component.alias.destructiveForeground" | "component.alias.invertForeground" | "component.alias.invertForegroundDark" | "component.alias.solidForeground" | "component.alias.solidForegroundDark" | "component.alias.muted" | "component.alias.mutedDark" | "component.alias.mutedForeground" | "component.alias.mutedForegroundDark" | "component.alias.accent" | "component.alias.accentDark" | "component.alias.accentForeground" | "component.alias.accentForegroundDark" | "component.alias.card" | "component.alias.cardDark" | "component.alias.cardForeground" | "component.alias.cardForegroundDark" | "component.alias.popover" | "component.alias.popoverDark" | "component.alias.popoverForeground" | "component.alias.popoverForegroundDark" | "component.alias.input" | "component.alias.inputDark" | "component.alias.ring" | "component.fileRow.background" | "component.fileRow.backgroundDark" | "component.fileRow.hoverBackground" | "component.fileRow.hoverBackgroundDark" | "component.fileRow.activeBackground" | "component.fileRow.activeBackgroundDark" | "component.fileRow.border" | "component.fileRow.borderDark" | "component.fileRow.icon" | "component.notification.infoBackground" | "component.notification.infoBackgroundDark" | "component.notification.dangerBackground" | "component.notification.dangerBackgroundDark" | "component.notification.background" | "component.notification.backgroundDark" | "component.notification.border" | "component.notification.borderDark" | "component.notification.foreground" | "component.notification.foregroundDark" | "component.notification.icon" | "component.notification.iconDark" | "component.notification.successBackground" | "component.notification.successBackgroundDark" | "component.notification.successBorder" | "component.notification.successBorderDark" | "component.notification.successForeground" | "component.notification.successForegroundDark" | "component.notification.dangerBorder" | "component.notification.dangerBorderDark" | "component.notification.dangerForeground" | "component.notification.dangerForegroundDark" | "component.notification.badgeBackground" | "component.notification.badgeForeground" | "component.menu.background" | "component.menu.backgroundDark" | "component.menu.border" | "component.menu.borderDark" | "component.menu.radius" | "component.menu.shadow" | "component.menu.shadowDark" | "component.menu.itemBackgroundHover" | "component.menu.itemBackgroundHoverDark" | "component.menu.itemText" | "component.menu.itemTextDark" | "component.menu.itemIcon" | "component.menu.itemIconDark" | "component.menu.itemShortcut" | "component.menu.itemShortcutDark" | "component.menu.itemDangerText" | "component.menu.itemDangerTextDark" | "component.menu.itemDangerBackgroundHover" | "component.menu.itemDangerBackgroundHoverDark" | "component.menu.itemHeight" | "component.menu.separator" | "component.menu.separatorDark" | "component.menu.label" | "component.menu.labelDark" | "component.palette.background" | "component.palette.backgroundDark" | "component.palette.border" | "component.palette.borderDark" | "component.palette.shadow" | "component.palette.shadowDark" | "component.palette.scrim" | "component.palette.scrimDark" | "component.palette.width" | "component.palette.inputHeight" | "component.palette.itemHeight" | "component.palette.itemBackgroundActive" | "component.palette.itemBackgroundActiveDark" | "component.palette.groupLabel" | "component.palette.groupLabelDark" | "component.palette.itemMeta" | "component.palette.itemMetaDark" | "component.sheet.background" | "component.sheet.backgroundDark" | "component.sheet.border" | "component.sheet.borderDark" | "component.sheet.shadow" | "component.sheet.shadowDark" | "component.sheet.scrim" | "component.sheet.scrimDark" | "component.sheet.width" | "component.avatar.yellow" | "component.avatar.green" | "component.avatar.red" | "component.avatar.blue" | "component.avatar.purple" | "component.avatar.teal" | "component.avatar.orange" | "component.avatar.foreground" | "component.avatar.foregroundWarm" | "component.alert.radius" | "component.alert.infoBackground" | "component.alert.infoBackgroundDark" | "component.alert.infoBorder" | "component.alert.infoBorderDark" | "component.alert.infoText" | "component.alert.infoTextDark" | "component.alert.infoBody" | "component.alert.infoBodyDark" | "component.alert.infoIcon" | "component.alert.infoIconDark" | "component.alert.brandBackground" | "component.alert.brandBackgroundDark" | "component.alert.brandBorder" | "component.alert.brandBorderDark" | "component.alert.brandText" | "component.alert.brandTextDark" | "component.alert.brandBody" | "component.alert.brandBodyDark" | "component.alert.brandIcon" | "component.alert.brandIconDark" | "component.alert.successBackground" | "component.alert.successBackgroundDark" | "component.alert.successBorder" | "component.alert.successBorderDark" | "component.alert.successText" | "component.alert.successTextDark" | "component.alert.successBody" | "component.alert.successBodyDark" | "component.alert.successIcon" | "component.alert.successIconDark" | "component.alert.dangerBackground" | "component.alert.dangerBackgroundDark" | "component.alert.dangerBorder" | "component.alert.dangerBorderDark" | "component.alert.dangerText" | "component.alert.dangerTextDark" | "component.alert.dangerBody" | "component.alert.dangerBodyDark" | "component.alert.dangerIcon" | "component.alert.dangerIconDark" | "component.slider.track" | "component.slider.trackDark" | "component.slider.buffer" | "component.slider.bufferDark" | "component.slider.fill" | "component.slider.knob" | "component.slider.fillDisabled" | "component.slider.fillDisabledDark" | "component.slider.trackHeight" | "component.slider.knobSize" | "component.slider.hitHeight" | "component.pagination.itemSize" | "component.pagination.itemText" | "component.pagination.itemTextDark" | "component.pagination.itemTextActive" | "component.pagination.itemTextActiveDark" | "component.pagination.itemBackgroundHover" | "component.pagination.itemBackgroundHoverDark" | "component.pagination.itemBackgroundActive" | "component.pagination.itemBackgroundActiveDark" | "component.pagination.itemBorderActive" | "component.pagination.itemBorderActiveDark" | "context.tv.text.primary" | "context.tv.text.secondary" | "context.tv.text.tertiary" | "context.tv.channelArt.production.posterBackground" | "context.tv.channelArt.production.splashBackground" | "context.tv.channelArt.development.background" | "context.tv.channelArt.development.accent" | "context.tv.channelArt.development.grid" | "context.tv.channelArt.nightly.background" | "context.tv.channelArt.nightly.accent" | "context.tv.channelArt.nightly.star" | "context.tv.channelArt.nightly.moon" | "context.tv.channelArt.nightly.moonCrater" | "context.tv.channelArt.lab.background" | "context.tv.channelArt.lab.foreground" | "context.tv.channelArt.lab.accent" | "tv.video.background" | "tv.video.heroScrimTop" | "tv.video.heroScrimBottom" | "tv.video.textOnVideo" | "tv.text.heading" | "tv.text.label" | "tv.text.body" | "tv.text.caption" | "tv.text.smol" | "tv.fontWeight.regular" | "tv.fontWeight.medium" | "tv.space.xxs" | "tv.space.xs" | "tv.space.sm" | "tv.space.md" | "tv.space.lg" | "tv.space.xl" | "tv.space.xxl" | "tv.overscan.x" | "tv.overscan.y" | "tv.radius" | "tv.focus.borderWidth" | "tv.focus.row.background" | "tv.focus.row.backgroundFocused" | "tv.focus.control.background" | "tv.focus.control.backgroundFocused" | "tv.focus.control.border" | "tv.focus.control.borderFocused" | "tv.z.modal" | "tv.z.toast" | "tv.z.overlay" | "color.brand.yellow" | "color.neutral.light.bg" | "color.neutral.light.bgSecondary" | "color.neutral.light.componentBg" | "color.neutral.light.componentBgHover" | "color.neutral.light.componentBgActive" | "color.neutral.light.line" | "color.neutral.light.border" | "color.neutral.light.borderHover" | "color.neutral.light.solid" | "color.neutral.light.solidHover" | "color.neutral.light.textSecondary" | "color.neutral.light.text" | "color.neutral.dark.bg" | "color.neutral.dark.bgSecondary" | "color.neutral.dark.componentBg" | "color.neutral.dark.componentBgHover" | "color.neutral.dark.componentBgActive" | "color.neutral.dark.line" | "color.neutral.dark.border" | "color.neutral.dark.borderHover" | "color.neutral.dark.solid" | "color.neutral.dark.solidHover" | "color.neutral.dark.textSecondary" | "color.neutral.dark.text" | "color.green.light.bg" | "color.green.light.bgSecondary" | "color.green.light.componentBg" | "color.green.light.componentBgHover" | "color.green.light.componentBgActive" | "color.green.light.line" | "color.green.light.border" | "color.green.light.borderHover" | "color.green.light.solid" | "color.green.light.solidHover" | "color.green.light.textSecondary" | "color.green.light.text" | "color.green.dark.bg" | "color.green.dark.bgSecondary" | "color.green.dark.componentBg" | "color.green.dark.componentBgHover" | "color.green.dark.componentBgActive" | "color.green.dark.line" | "color.green.dark.border" | "color.green.dark.borderHover" | "color.green.dark.solid" | "color.green.dark.solidHover" | "color.green.dark.textSecondary" | "color.green.dark.text" | "color.red.light.bg" | "color.red.light.bgSecondary" | "color.red.light.componentBg" | "color.red.light.componentBgHover" | "color.red.light.componentBgActive" | "color.red.light.line" | "color.red.light.border" | "color.red.light.borderHover" | "color.red.light.solid" | "color.red.light.solidHover" | "color.red.light.textSecondary" | "color.red.light.text" | "color.red.dark.bg" | "color.red.dark.bgSecondary" | "color.red.dark.componentBg" | "color.red.dark.componentBgHover" | "color.red.dark.componentBgActive" | "color.red.dark.line" | "color.red.dark.border" | "color.red.dark.borderHover" | "color.red.dark.solid" | "color.red.dark.solidHover" | "color.red.dark.textSecondary" | "color.red.dark.text" | "color.yellow.light.bg" | "color.yellow.light.bgSecondary" | "color.yellow.light.componentBg" | "color.yellow.light.componentBgHover" | "color.yellow.light.componentBgActive" | "color.yellow.light.line" | "color.yellow.light.border" | "color.yellow.light.borderHover" | "color.yellow.light.solidHover" | "color.yellow.light.textSecondary" | "color.yellow.light.text" | "color.yellow.dark.bg" | "color.yellow.dark.bgSecondary" | "color.yellow.dark.componentBg" | "color.yellow.dark.componentBgHover" | "color.yellow.dark.componentBgActive" | "color.yellow.dark.line" | "color.yellow.dark.border" | "color.yellow.dark.borderHover" | "color.yellow.dark.solidHover" | "color.yellow.dark.textSecondary" | "color.yellow.dark.text" | "color.transfer.light.lime3" | "color.transfer.dark.lime3" | "elevation.shadowColor" | "elevation.color" | "elevation.sm" | "elevation.md" | "elevation.lg" | "elevation.focusColor" | "elevation.focus" | "elevation.focusDark" | "typography.fontFamily.sans" | "typography.fontFamily.display" | "typography.fontFamily.mono" | "typography.fontSize.xs" | "typography.fontSize.sm" | "typography.fontSize.base" | "typography.fontSize.md" | "typography.fontSize.lg" | "typography.fontSize.title" | "typography.fontSize.xl" | "typography.fontSize.2xl" | "typography.fontSize.3xl" | "typography.fontSize.4xl" | "typography.fontSize.display" | "typography.lineHeight.tight" | "typography.lineHeight.snug" | "typography.lineHeight.normal" | "typography.lineHeight.loose" | "typography.fontWeight.regular" | "typography.fontWeight.medium" | "typography.fontWeight.bold" | "typography.fontWeight.black" | "typography.letterSpacing.tight" | "typography.letterSpacing.snug" | "typography.letterSpacing.normal" | "typography.letterSpacing.wide" | "typography.letterSpacing.uppercase" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "radius.sm" | "radius.default" | "radius.md" | "radius.lg" | "radius.pill" | "radius.tv" | "border.width" | "motion.easing.out" | "motion.easing.inOut" | "motion.duration.fast" | "motion.duration.reveal" | "motion.duration.base" | "motion.duration.slow" | "z.dropdown" | "z.sticky" | "z.modal" | "z.notification" | "z.tooltip" | "breakpoint.sm" | "breakpoint.md" | "breakpoint.lg" | "surface.light.htmlBg" | "surface.light.appBg" | "surface.light.navBg" | "surface.light.navItemBg" | "surface.light.navItemBgHover" | "surface.light.navItemBgActive" | "surface.light.listItemBg" | "surface.light.listItemBgHover" | "surface.light.listItemBgActive" | "surface.light.listItemBorder" | "surface.light.segmentedControlBg" | "surface.light.segmentedControlBgActive" | "surface.light.transferListItemCompletingBg" | "surface.light.transferListItemDownloadingBg" | "surface.light.transferListItemFinishedBg" | "surface.light.transferListItemPassiveBg" | "surface.light.hiContrast" | "surface.light.loContrast" | "surface.light.transparent" | "surface.light.overlayInline" | "surface.light.overlayFull" | "surface.dark.htmlBg" | "surface.dark.appBg" | "surface.dark.navBg" | "surface.dark.navItemBg" | "surface.dark.navItemBgHover" | "surface.dark.navItemBgActive" | "surface.dark.listItemBg" | "surface.dark.listItemBgHover" | "surface.dark.listItemBgActive" | "surface.dark.listItemBorder" | "surface.dark.segmentedControlBg" | "surface.dark.segmentedControlBgActive" | "surface.dark.transferListItemCompletingBg" | "surface.dark.transferListItemDownloadingBg" | "surface.dark.transferListItemFinishedBg" | "surface.dark.transferListItemPassiveBg" | "surface.dark.hiContrast" | "surface.dark.loContrast" | "surface.dark.overlayInline" | "surface.dark.overlayFull" | "surface.dark.shadowColor" | "surface.dark.shadow" | "surface.dark.shadowSm" | "surface.dark.shadowMd" | "surface.dark.shadowLg";
4
4
 
5
5
  export type PutioToken = {
6
6
  readonly cssName: string;
package/dist/tokens.dtcg.json CHANGED
@@ -4866,6 +4866,18 @@
4866
4866
  }
4867
4867
  }
4868
4868
  },
4869
+ "title": {
4870
+ "$type": "dimension",
4871
+ "$value": "22px",
4872
+ "$description": "Screen titles and one-time-code digits. The fixed-pixel sibling of fontSize.lg (H2), which scales with the root.",
4873
+ "$extensions": {
4874
+ "putio": {
4875
+ "cssName": "fs-title",
4876
+ "mode": "global",
4877
+ "figma": true
4878
+ }
4879
+ }
4880
+ },
4869
4881
  "xl": {
4870
4882
  "$type": "dimension",
4871
4883
  "$value": "2rem",
@@ -5031,6 +5043,18 @@
5031
5043
  }
5032
5044
  }
5033
5045
  },
5046
+ "snug": {
5047
+ "$type": "dimension",
5048
+ "$value": "-0.01em",
5049
+ "$description": "Slight negative tracking for screen titles.",
5050
+ "$extensions": {
5051
+ "putio": {
5052
+ "cssName": "tracking-snug",
5053
+ "mode": "global",
5054
+ "figma": true
5055
+ }
5056
+ }
5057
+ },
5034
5058
  "normal": {
5035
5059
  "$type": "number",
5036
5060
  "$value": "0",
package/dist/tokens.flat.json CHANGED
@@ -3308,6 +3308,14 @@
3308
3308
  "originalValue": "1.5rem",
3309
3309
  "description": "Heading."
3310
3310
  },
3311
+ "typography.fontSize.title": {
3312
+ "cssName": "--fs-title",
3313
+ "type": "dimension",
3314
+ "mode": "global",
3315
+ "value": "22px",
3316
+ "originalValue": "22px",
3317
+ "description": "Screen titles and one-time-code digits. The fixed-pixel sibling of fontSize.lg (H2), which scales with the root."
3318
+ },
3311
3319
  "typography.fontSize.xl": {
3312
3320
  "cssName": "--fs-xl",
3313
3321
  "type": "dimension",
@@ -3411,6 +3419,14 @@
3411
3419
  "value": "-0.02em",
3412
3420
  "originalValue": "-0.02em"
3413
3421
  },
3422
+ "typography.letterSpacing.snug": {
3423
+ "cssName": "--tracking-snug",
3424
+ "type": "dimension",
3425
+ "mode": "global",
3426
+ "value": "-0.01em",
3427
+ "originalValue": "-0.01em",
3428
+ "description": "Slight negative tracking for screen titles."
3429
+ },
3414
3430
  "typography.letterSpacing.normal": {
3415
3431
  "cssName": "--tracking-normal",
3416
3432
  "type": "number",
package/dist/tokens.js CHANGED
@@ -3310,6 +3310,14 @@ export const tokens = {
3310
3310
  "originalValue": "1.5rem",
3311
3311
  "description": "Heading."
3312
3312
  },
3313
+ "typography.fontSize.title": {
3314
+ "cssName": "--fs-title",
3315
+ "type": "dimension",
3316
+ "mode": "global",
3317
+ "value": "22px",
3318
+ "originalValue": "22px",
3319
+ "description": "Screen titles and one-time-code digits. The fixed-pixel sibling of fontSize.lg (H2), which scales with the root."
3320
+ },
3313
3321
  "typography.fontSize.xl": {
3314
3322
  "cssName": "--fs-xl",
3315
3323
  "type": "dimension",
@@ -3413,6 +3421,14 @@ export const tokens = {
3413
3421
  "value": "-0.02em",
3414
3422
  "originalValue": "-0.02em"
3415
3423
  },
3424
+ "typography.letterSpacing.snug": {
3425
+ "cssName": "--tracking-snug",
3426
+ "type": "dimension",
3427
+ "mode": "global",
3428
+ "value": "-0.01em",
3429
+ "originalValue": "-0.01em",
3430
+ "description": "Slight negative tracking for screen titles."
3431
+ },
3416
3432
  "typography.letterSpacing.normal": {
3417
3433
  "cssName": "--tracking-normal",
3418
3434
  "type": "number",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@putdotio/design",
3
- "version": "3.9.0",
3
+ "version": "3.11.0",
4
4
  "description": "Public put.io design tokens, brand assets, and design-system guidance.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -55,6 +55,7 @@
55
55
  "./assets/*": "./system/assets/*",
56
56
  "./css": "./dist/css/tokens.css",
57
57
  "./components": "./system/components.css",
58
+ "./tailwind": "./dist/css/tailwind.css",
58
59
  "./tokens": "./dist/tokens.flat.json",
59
60
  "./tokens/meta": {
60
61
  "types": "./dist/tokens.d.ts",
@@ -67,7 +68,7 @@
67
68
  "scripts": {
68
69
  "dev": "node scripts/serve-system.ts",
69
70
  "tokens:build": "node scripts/build-tokens.ts",
70
- "tokens:check": "node scripts/build-tokens.ts && node scripts/check-component-css.ts && node scripts/verify-design-system.ts",
71
+ "tokens:check": "node scripts/build-tokens.ts && node scripts/check-component-css.ts && node scripts/check-tailwind-theme.ts && node scripts/verify-design-system.ts",
71
72
  "artifact": "node scripts/build-artifact.ts && node scripts/build-canvases.ts",
72
73
  "test:config": "node --test tests/playwright-config.test.mjs",
73
74
  "typecheck:scripts": "tsc --noEmit --ignoreConfig --skipLibCheck --module ESNext --moduleResolution Bundler --target ES2022 --strict --types node scripts/*.ts playwright.config.ts tests/e2e/*.ts sst.config.ts infra/*.ts",
@@ -88,6 +89,7 @@
88
89
  "oxfmt": "0.74.0",
89
90
  "sst": "^4.14.3",
90
91
  "style-dictionary": "^5.4.1",
92
+ "tailwindcss": "^4.3.3",
91
93
  "typescript": "^7.0.2",
92
94
  "yaml": "^2.9.0"
93
95
  },
package/system/README.md CHANGED
@@ -157,6 +157,41 @@ put.io components use the long descriptive names (`--component-bg-hover`,
157
157
  `--yellow-text-secondary`) because they name the role exactly; shadcn-imported
158
158
  code keeps the short names.
159
159
 
160
+ ### Tailwind v4 theme
161
+
162
+ `@putdotio/design/tailwind` ([`dist/css/tailwind.css`](../dist/css/tailwind.css))
163
+ maps the tokens into Tailwind v4 theme keys. The build derives each key from the
164
+ token's type and CSS name, so new tokens join their namespace without a hand
165
+ list. Import it after `tailwindcss` and `@putdotio/design/css`; the
166
+ [README](../README.md#use) shows the import lines.
167
+
168
+ | Tailwind key | put.io token | Example utilities |
169
+ | ------------------------- | ---------------------------------------------------------- | ----------------------------------------------- |
170
+ | `--color-<name>` | every color token `--<name>` | `bg-bg`, `text-muted-foreground` |
171
+ | `--font-*` | `--font-*` | `font-sans`, `font-mono` |
172
+ | `--font-weight-*` | `--fw-*` | `font-regular`, `font-bold` |
173
+ | `--text-*` | `--fs-*` | `text-sm`, `text-display` |
174
+ | `--leading-*` | `--lh-*` | `leading-tight` |
175
+ | `--tracking-*` | `--tracking-*`, `--button-tracking*` | `tracking-tight`, `tracking-button` |
176
+ | `--radius`, `--radius-*` | `--radius`, `--radius-*`, `--<component>-radius` | `rounded`, `rounded-sm`, `rounded-panel` |
177
+ | `--shadow-*` | `--shadow-*`, `--<component>-shadow`, `--<component>-ring` | `shadow-sm`, `shadow-menu`, `shadow-field-ring` |
178
+ | `--ease-*` | `--ease-*` | `ease-out` |
179
+ | `--transition-duration-*` | `--dur-*` | `duration-base` |
180
+
181
+ - The block is `@theme inline reference`. Utilities read the put.io custom
182
+ property where they apply, so `.dark` works. Tailwind declares none of the
183
+ keys, so `--radius-sm` or `--font-sans` stays the token instead of a
184
+ self-reference. In custom CSS, read the put.io name (`var(--bg)`), not
185
+ `var(--color-bg)`.
186
+ - shadcn class names such as `bg-primary`, `border-input`, and
187
+ `text-muted-foreground` resolve through the aliases above.
188
+ - `text-*` sizes set no line height; the document's `--lh-normal` applies until
189
+ a `leading-*` utility sets one.
190
+ - TV tokens, z-indexes, breakpoints, and spacing stay out. Deprecated tokens stay in until a major release removes them.
191
+ Spacing utilities keep Tailwind's linear `--spacing` scale, not the
192
+ `--space-*` steps. Tailwind defaults that put.io does not define, such as
193
+ `rounded-xl`, stay available.
194
+
160
195
  ### State via `data-state`, not class flags
161
196
 
162
197
  Base UI / headless primitives set
package/system/components.css CHANGED
@@ -507,7 +507,7 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
507
507
  background: var(--field-bg);
508
508
  color: var(--field-text);
509
509
  font-family: var(--font-mono);
510
- font-size: 22px;
510
+ font-size: var(--fs-title);
511
511
  font-variant-numeric: tabular-nums;
512
512
  line-height: 1;
513
513
  pointer-events: none;
@@ -603,10 +603,10 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
603
603
  }
604
604
  .auth-title {
605
605
  margin: 0 0 28px;
606
- font-size: 22px;
606
+ font-size: var(--fs-title);
607
607
  line-height: 30px;
608
608
  font-weight: var(--fw-medium);
609
- letter-spacing: -0.01em;
609
+ letter-spacing: var(--tracking-snug);
610
610
  color: var(--text);
611
611
  }
612
612
  .auth-column .form-stack { gap: 16px; }
package/tokens/primitives.tokens.json CHANGED
@@ -206,6 +206,18 @@
206
206
  }
207
207
  }
208
208
  },
209
+ "title": {
210
+ "$type": "dimension",
211
+ "$value": "22px",
212
+ "$description": "Screen titles and one-time-code digits. The fixed-pixel sibling of fontSize.lg (H2), which scales with the root.",
213
+ "$extensions": {
214
+ "putio": {
215
+ "cssName": "fs-title",
216
+ "mode": "global",
217
+ "figma": true
218
+ }
219
+ }
220
+ },
209
221
  "xl": {
210
222
  "$type": "dimension",
211
223
  "$value": "2rem",
@@ -371,6 +383,18 @@
371
383
  }
372
384
  }
373
385
  },
386
+ "snug": {
387
+ "$type": "dimension",
388
+ "$value": "-0.01em",
389
+ "$description": "Slight negative tracking for screen titles.",
390
+ "$extensions": {
391
+ "putio": {
392
+ "cssName": "tracking-snug",
393
+ "mode": "global",
394
+ "figma": true
395
+ }
396
+ }
397
+ },
374
398
  "normal": {
375
399
  "$type": "number",
376
400
  "$value": "0",