@putdotio/design 3.10.0 → 3.11.1

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 (6) hide show
  1. package/DESIGN.md +3 -3
  2. package/README.md +14 -0
  3. package/dist/css/tailwind.css +298 -0
  4. package/package.json +4 -2
  5. package/system/README.md +35 -0
  6. package/system/components.css +5 -4
package/DESIGN.md CHANGED
@@ -70,7 +70,7 @@ A web mock is never a native spec. Every surface binds at one tier, and every ca
70
70
 
71
71
  - **Tier 0: Foundations.** The token graph. Values only; binds every tier.
72
72
  - **Tier 1: www · app · auth.** The full system: tokens plus the `system/components.css` recipes, which are the contract here only.
73
- - **Tier 2: iOS · iPadOS · tvOS · watchOS · Android · Android TV.** Tokens only. Components and pages come from the platform's guidelines; cards show how a stock control takes put.io tokens. The shipped tvOS and Android TV app draws its own components with Lucide icons: documented drift.
73
+ - **Tier 2: iOS · iPadOS · tvOS · watchOS · Android · Android TV.** Tokens only. Components and pages come from the platform's guidelines; cards show how a stock control takes put.io tokens. The shipped tvOS and Android TV app draws its own components with Phosphor icons; the components are documented drift.
74
74
  - **Tier 3: Roku.** Tier 2, plus put.io conventions in custom SceneGraph components.
75
75
  - **Tier 4: tv.put.io · Tizen · webOS.** The web system, restrained to a calm, list-first 10-foot interface.
76
76
 
@@ -135,10 +135,10 @@ Default radius `6px`; `4px` for tight controls, `8px` or `10px` for panels, pill
135
135
 
136
136
  - Sign in, sign up, password reset, and two-factor pages have no card or panel: the form sits on `--bg`. Recipe: `.auth-page`, `.auth-header`, `.auth-main`, `.auth-column`, `.auth-title`, `.auth-links`, `.auth-footer`.
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
- - One left-aligned column, up to `340px`, is centred horizontally and vertically.
138
+ - One left-aligned column, up to `340px`, is centred horizontally and optically centred vertically: the form's middle sits near 45% of the viewport height, never below the true middle.
139
139
  - A quiet centred footer links Terms of Service, Privacy Policy, and Help in muted `--fs-sm`.
140
140
  - One title per screen: `--fs-title` (`22px`), medium, `--tracking-snug` (`-0.01em`). No subtitles, taglines, or marketing lines; copy stays short.
141
- - Fields are the standard filled field. Fields and buttons in the column are `44px`.
141
+ - Fields and buttons keep the standard 36px box: the filled field and a full-width default-size primary.
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”.
144
144
  - Tab order runs fields, submit, then secondary links; DOM order follows visual order, with no positive `tabindex`. Two-factor runs the code, Verify, then its links. The reveal-password toggle takes `tabindex="-1"` and keeps its accessible name: keyboard-only users can't toggle visibility, screen-reader users still can in browse mode. No link leaves the tab order.
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@putdotio/design",
3
- "version": "3.10.0",
3
+ "version": "3.11.1",
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
@@ -568,7 +568,8 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
568
568
 
569
569
  Card-less: the form sits on the page background. Logo top-left
570
570
  in .auth-header, one left-aligned 340px column centred in
571
- .auth-main, a quiet link row in .auth-footer. Controls are 44px;
571
+ .auth-main, a quiet link row in .auth-footer. Controls keep the
572
+ standard 36px box;
572
573
  the title is the only heading. Under 640px the gutters drop to 24px so the logo lines
573
574
  up with the column.
574
575
  =========================================================== */
@@ -593,7 +594,9 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
593
594
  display: flex;
594
595
  align-items: center;
595
596
  justify-content: center;
596
- padding: 24px 24px 48px;
597
+ /* Optical centre: the extra bottom padding lifts the form so its middle
598
+ sits near 45% of the viewport height, never below the true middle. */
599
+ padding: 24px 24px max(48px, 10vh);
597
600
  }
598
601
  .auth-column {
599
602
  width: 100%;
@@ -615,9 +618,7 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
615
618
  font-weight: var(--fw-regular);
616
619
  color: var(--text-secondary);
617
620
  }
618
- .auth-column .field { height: 44px; }
619
621
  .auth-column form > .form-reveal .form-callout { padding-top: 12px; font-size: var(--fs-base); }
620
- .auth-column .btn-block { height: 44px; }
621
622
  .auth-column form > .form-reveal + .btn-block { margin-top: 16px; }
622
623
  .auth-links {
623
624
  margin: 24px 0 0;