@putdotio/design 3.10.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 (4) hide show
  1. package/README.md +14 -0
  2. package/dist/css/tailwind.css +298 -0
  3. package/package.json +4 -2
  4. package/system/README.md +35 -0
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.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