@pearpages/pulp-tokens 0.2.1 → 0.3.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 (28) hide show
  1. package/README.md +2 -0
  2. package/dist/native.cjs +379 -0
  3. package/dist/native.d.ts +14 -0
  4. package/dist/native.js +383 -0
  5. package/dist/theme.css +57 -0
  6. package/dist/tokens.css +129 -4
  7. package/dist/tokens.json +1828 -339
  8. package/package.json +7 -1
  9. package/tokens/component/avatar.json +26 -0
  10. package/tokens/component/badge.json +6 -1
  11. package/tokens/component/button.json +22 -0
  12. package/tokens/component/chip.json +49 -0
  13. package/tokens/component/combobox.json +5 -0
  14. package/tokens/component/date-picker.json +1 -1
  15. package/tokens/component/dialog.json +92 -23
  16. package/tokens/component/divider.json +13 -0
  17. package/tokens/component/empty-state.json +15 -0
  18. package/tokens/component/link.json +45 -0
  19. package/tokens/component/menu.json +1 -1
  20. package/tokens/component/picker.json +5 -0
  21. package/tokens/component/popover.json +1 -1
  22. package/tokens/component/segmented-control.json +49 -0
  23. package/tokens/component/sheet.json +40 -3
  24. package/tokens/component/text-field.json +16 -0
  25. package/tokens/primitives/bitepals.json +9 -0
  26. package/tokens/primitives/pulp.json +14 -2
  27. package/tokens/semantic/bitepals.json +27 -0
  28. package/tokens/semantic/pulp.json +27 -0
package/README.md CHANGED
@@ -53,6 +53,8 @@ only remaps primitives onto semantic names, so switching brand never touches a c
53
53
  | --- | --- |
54
54
  | `@pearpages/pulp-tokens/tokens.css` | every brand's custom properties, in `@layer tokens` |
55
55
  | `@pearpages/pulp-tokens/tokens.json` | resolved tokens per brand, `{ pulp: [...], bitepals: [...] }`; each entry has `name`, `path`, `type`, `tier`, `css`, `value`. For tooling |
56
+ | `@pearpages/pulp-tokens/theme.css` | Tailwind v4: an `@theme inline reference` block over the semantic colours, radii, shadows and font families, so `bg-surface-base` or `rounded-control` read pulp's variables. Import it after `tailwindcss` and `tokens.css` |
57
+ | `@pearpages/pulp-tokens/native` | React Native / NativeWind and Tailwind v3: per brand `{ colors, radius, space, themeVars: { light, dark } }`. Names are `var(--…)` references for the config; `themeVars` are resolved hex and px for `vars()`. ESM and `require` |
56
58
  | `tokens/` | the DTCG source files |
57
59
 
58
60
  ## License
package/dist/native.cjs ADDED
@@ -0,0 +1,379 @@
1
+ // Generated by @pearpages/pulp-tokens from tokens/**.json. Do not edit: run `pnpm build:tokens`.
2
+ module.exports = {
3
+ "pulp": {
4
+ "colors": {
5
+ "surface": {
6
+ "base": "var(--color-surface-base)",
7
+ "raised": "var(--color-surface-raised)",
8
+ "overlay": "var(--color-surface-overlay)",
9
+ "sunken": "var(--color-surface-sunken)",
10
+ "inverse": "var(--color-surface-inverse)"
11
+ },
12
+ "text": {
13
+ "default": "var(--color-text-default)",
14
+ "muted": "var(--color-text-muted)",
15
+ "faint": "var(--color-text-faint)",
16
+ "on-action": "var(--color-text-on-action)",
17
+ "on-inverse": "var(--color-text-on-inverse)"
18
+ },
19
+ "action": {
20
+ "primary": "var(--color-action-primary)",
21
+ "primary-hover": "var(--color-action-primary-hover)",
22
+ "primary-active": "var(--color-action-primary-active)",
23
+ "primary-quiet": "var(--color-action-primary-quiet)",
24
+ "secondary": "var(--color-action-secondary)",
25
+ "secondary-hover": "var(--color-action-secondary-hover)",
26
+ "text": "var(--color-action-text)"
27
+ },
28
+ "border": {
29
+ "default": "var(--color-border-default)",
30
+ "strong": "var(--color-border-strong)",
31
+ "focus": "var(--color-border-focus)"
32
+ },
33
+ "status": {
34
+ "success": "var(--color-status-success)",
35
+ "warning": "var(--color-status-warning)",
36
+ "error": "var(--color-status-error)",
37
+ "error-hover": "var(--color-status-error-hover)",
38
+ "error-active": "var(--color-status-error-active)",
39
+ "info": "var(--color-status-info)",
40
+ "error-text": "var(--color-status-error-text)",
41
+ "success-text": "var(--color-status-success-text)",
42
+ "warning-text": "var(--color-status-warning-text)",
43
+ "info-text": "var(--color-status-info-text)",
44
+ "success-subtle": "var(--color-status-success-subtle)",
45
+ "warning-subtle": "var(--color-status-warning-subtle)",
46
+ "error-subtle": "var(--color-status-error-subtle)",
47
+ "info-subtle": "var(--color-status-info-subtle)",
48
+ "on-success": "var(--color-status-on-success)",
49
+ "on-warning": "var(--color-status-on-warning)",
50
+ "on-error": "var(--color-status-on-error)",
51
+ "on-info": "var(--color-status-on-info)",
52
+ "neutral": "var(--color-status-neutral)",
53
+ "neutral-subtle": "var(--color-status-neutral-subtle)",
54
+ "neutral-text": "var(--color-status-neutral-text)",
55
+ "on-neutral": "var(--color-status-on-neutral)"
56
+ },
57
+ "overlay": {
58
+ "backdrop": "var(--color-overlay-backdrop)"
59
+ }
60
+ },
61
+ "radius": {
62
+ "control": "var(--radius-control)",
63
+ "surface": "var(--radius-surface)",
64
+ "full": "var(--radius-full)"
65
+ },
66
+ "space": {
67
+ "1": "var(--space-1)",
68
+ "2": "var(--space-2)",
69
+ "3": "var(--space-3)",
70
+ "4": "var(--space-4)",
71
+ "5": "var(--space-5)",
72
+ "6": "var(--space-6)",
73
+ "7": "var(--space-7)",
74
+ "8": "var(--space-8)"
75
+ },
76
+ "themeVars": {
77
+ "light": {
78
+ "--color-surface-base": "#f3f4f7",
79
+ "--color-surface-raised": "#ffffff",
80
+ "--color-surface-overlay": "#ffffff",
81
+ "--color-surface-sunken": "#e9ebf1",
82
+ "--color-surface-inverse": "#0c0e14",
83
+ "--color-text-default": "#0c0e14",
84
+ "--color-text-muted": "#5a6072",
85
+ "--color-text-faint": "#666c80",
86
+ "--color-text-on-action": "#ededf2",
87
+ "--color-text-on-inverse": "#f3f4f7",
88
+ "--color-action-primary": "#1e2ed6",
89
+ "--color-action-primary-hover": "#1522a8",
90
+ "--color-action-primary-active": "#101a80",
91
+ "--color-action-primary-quiet": "#e8eafc",
92
+ "--color-action-secondary": "#ededf2",
93
+ "--color-action-secondary-hover": "#e9ebf1",
94
+ "--color-action-text": "#1e2ed6",
95
+ "--color-border-default": "#d5d7de",
96
+ "--color-border-strong": "#adb0bb",
97
+ "--color-border-focus": "#1e2ed6",
98
+ "--color-status-success": "#1a8f5c",
99
+ "--color-status-warning": "#ffb020",
100
+ "--color-status-error": "#d0393e",
101
+ "--color-status-error-hover": "#a52c30",
102
+ "--color-status-error-active": "#86242a",
103
+ "--color-status-info": "#1e2ed6",
104
+ "--color-status-error-text": "#a52c30",
105
+ "--color-status-success-text": "#146e47",
106
+ "--color-status-warning-text": "#8a5a00",
107
+ "--color-status-info-text": "#1e2ed6",
108
+ "--color-status-success-subtle": "#e3f6ec",
109
+ "--color-status-warning-subtle": "#fff3d6",
110
+ "--color-status-error-subtle": "#fbe5e6",
111
+ "--color-status-info-subtle": "#e8eafc",
112
+ "--color-status-on-success": "#0c0e14",
113
+ "--color-status-on-warning": "#0c0e14",
114
+ "--color-status-on-error": "#ffffff",
115
+ "--color-status-on-info": "#ededf2",
116
+ "--color-status-neutral": "#5a6072",
117
+ "--color-status-neutral-subtle": "#ededf2",
118
+ "--color-status-neutral-text": "#5a6072",
119
+ "--color-status-on-neutral": "#ffffff",
120
+ "--color-overlay-backdrop": "#0c0e1499",
121
+ "--radius-control": "3px",
122
+ "--radius-surface": "10px",
123
+ "--radius-full": "9999px",
124
+ "--space-1": "4px",
125
+ "--space-2": "8px",
126
+ "--space-3": "12px",
127
+ "--space-4": "16px",
128
+ "--space-5": "24px",
129
+ "--space-6": "32px",
130
+ "--space-7": "48px",
131
+ "--space-8": "64px"
132
+ },
133
+ "dark": {
134
+ "--color-surface-base": "#090b11",
135
+ "--color-surface-raised": "#11141d",
136
+ "--color-surface-overlay": "#1a1e29",
137
+ "--color-surface-sunken": "#05070b",
138
+ "--color-surface-inverse": "#ededf2",
139
+ "--color-text-default": "#ededf2",
140
+ "--color-text-muted": "#adb0bb",
141
+ "--color-text-faint": "#8f95a8",
142
+ "--color-text-on-action": "#0c0e14",
143
+ "--color-text-on-inverse": "#0c0e14",
144
+ "--color-action-primary": "#8b97ff",
145
+ "--color-action-primary-hover": "#a5aeff",
146
+ "--color-action-primary-active": "#6b7aff",
147
+ "--color-action-primary-quiet": "#10164a",
148
+ "--color-action-secondary": "#262a35",
149
+ "--color-action-secondary-hover": "#4a4f5d",
150
+ "--color-action-text": "#8b97ff",
151
+ "--color-border-default": "#262a35",
152
+ "--color-border-strong": "#4a4f5d",
153
+ "--color-border-focus": "#8b97ff",
154
+ "--color-status-success": "#3ecf8e",
155
+ "--color-status-warning": "#ffb020",
156
+ "--color-status-error": "#ff6b70",
157
+ "--color-status-error-hover": "#ff9699",
158
+ "--color-status-error-active": "#ea5459",
159
+ "--color-status-info": "#8b97ff",
160
+ "--color-status-error-text": "#ff6b70",
161
+ "--color-status-success-text": "#3ecf8e",
162
+ "--color-status-warning-text": "#ffb020",
163
+ "--color-status-info-text": "#8b97ff",
164
+ "--color-status-success-subtle": "#0e2e20",
165
+ "--color-status-warning-subtle": "#3a2800",
166
+ "--color-status-error-subtle": "#3d1113",
167
+ "--color-status-info-subtle": "#10164a",
168
+ "--color-status-on-success": "#0c0e14",
169
+ "--color-status-on-warning": "#0c0e14",
170
+ "--color-status-on-error": "#0c0e14",
171
+ "--color-status-on-info": "#0c0e14",
172
+ "--color-status-neutral": "#adb0bb",
173
+ "--color-status-neutral-subtle": "#262a35",
174
+ "--color-status-neutral-text": "#adb0bb",
175
+ "--color-status-on-neutral": "#0c0e14",
176
+ "--color-overlay-backdrop": "#000000b3",
177
+ "--radius-control": "3px",
178
+ "--radius-surface": "10px",
179
+ "--radius-full": "9999px",
180
+ "--space-1": "4px",
181
+ "--space-2": "8px",
182
+ "--space-3": "12px",
183
+ "--space-4": "16px",
184
+ "--space-5": "24px",
185
+ "--space-6": "32px",
186
+ "--space-7": "48px",
187
+ "--space-8": "64px"
188
+ }
189
+ }
190
+ },
191
+ "bitepals": {
192
+ "colors": {
193
+ "surface": {
194
+ "base": "var(--color-surface-base)",
195
+ "raised": "var(--color-surface-raised)",
196
+ "overlay": "var(--color-surface-overlay)",
197
+ "sunken": "var(--color-surface-sunken)",
198
+ "inverse": "var(--color-surface-inverse)"
199
+ },
200
+ "text": {
201
+ "default": "var(--color-text-default)",
202
+ "muted": "var(--color-text-muted)",
203
+ "faint": "var(--color-text-faint)",
204
+ "on-action": "var(--color-text-on-action)",
205
+ "on-inverse": "var(--color-text-on-inverse)"
206
+ },
207
+ "action": {
208
+ "primary": "var(--color-action-primary)",
209
+ "primary-hover": "var(--color-action-primary-hover)",
210
+ "primary-active": "var(--color-action-primary-active)",
211
+ "primary-quiet": "var(--color-action-primary-quiet)",
212
+ "secondary": "var(--color-action-secondary)",
213
+ "secondary-hover": "var(--color-action-secondary-hover)",
214
+ "text": "var(--color-action-text)"
215
+ },
216
+ "border": {
217
+ "default": "var(--color-border-default)",
218
+ "strong": "var(--color-border-strong)",
219
+ "focus": "var(--color-border-focus)"
220
+ },
221
+ "status": {
222
+ "success": "var(--color-status-success)",
223
+ "warning": "var(--color-status-warning)",
224
+ "error": "var(--color-status-error)",
225
+ "error-hover": "var(--color-status-error-hover)",
226
+ "error-active": "var(--color-status-error-active)",
227
+ "info": "var(--color-status-info)",
228
+ "error-text": "var(--color-status-error-text)",
229
+ "success-text": "var(--color-status-success-text)",
230
+ "warning-text": "var(--color-status-warning-text)",
231
+ "info-text": "var(--color-status-info-text)",
232
+ "success-subtle": "var(--color-status-success-subtle)",
233
+ "warning-subtle": "var(--color-status-warning-subtle)",
234
+ "error-subtle": "var(--color-status-error-subtle)",
235
+ "info-subtle": "var(--color-status-info-subtle)",
236
+ "on-success": "var(--color-status-on-success)",
237
+ "on-warning": "var(--color-status-on-warning)",
238
+ "on-error": "var(--color-status-on-error)",
239
+ "on-info": "var(--color-status-on-info)",
240
+ "neutral": "var(--color-status-neutral)",
241
+ "neutral-subtle": "var(--color-status-neutral-subtle)",
242
+ "neutral-text": "var(--color-status-neutral-text)",
243
+ "on-neutral": "var(--color-status-on-neutral)"
244
+ },
245
+ "overlay": {
246
+ "backdrop": "var(--color-overlay-backdrop)"
247
+ }
248
+ },
249
+ "radius": {
250
+ "control": "var(--radius-control)",
251
+ "surface": "var(--radius-surface)",
252
+ "full": "var(--radius-full)"
253
+ },
254
+ "space": {
255
+ "1": "var(--space-1)",
256
+ "2": "var(--space-2)",
257
+ "3": "var(--space-3)",
258
+ "4": "var(--space-4)",
259
+ "5": "var(--space-5)",
260
+ "6": "var(--space-6)",
261
+ "7": "var(--space-7)",
262
+ "8": "var(--space-8)"
263
+ },
264
+ "themeVars": {
265
+ "light": {
266
+ "--color-surface-base": "#f0e4cf",
267
+ "--color-surface-raised": "#f8eed9",
268
+ "--color-surface-overlay": "#fcf3df",
269
+ "--color-surface-sunken": "#eddcbf",
270
+ "--color-surface-inverse": "#1f2430",
271
+ "--color-text-default": "#1f2430",
272
+ "--color-text-muted": "#3a4152",
273
+ "--color-text-faint": "#5b6475",
274
+ "--color-text-on-action": "#1f2430",
275
+ "--color-text-on-inverse": "#ffffff",
276
+ "--color-action-primary": "#ff6b3d",
277
+ "--color-action-primary-hover": "#ff7a52",
278
+ "--color-action-primary-active": "#ff8b66",
279
+ "--color-action-primary-quiet": "#ffe4d6",
280
+ "--color-action-secondary": "#eddcbf",
281
+ "--color-action-secondary-hover": "#e0cba6",
282
+ "--color-action-text": "#9f3a14",
283
+ "--color-border-default": "#cab38e",
284
+ "--color-border-strong": "#a89178",
285
+ "--color-border-focus": "#ffb08a",
286
+ "--color-status-success": "#22a06b",
287
+ "--color-status-warning": "#d98e04",
288
+ "--color-status-error": "#c43a3a",
289
+ "--color-status-error-hover": "#a83333",
290
+ "--color-status-error-active": "#8a2a2a",
291
+ "--color-status-info": "#2368c9",
292
+ "--color-status-error-text": "#a83333",
293
+ "--color-status-success-text": "#14633f",
294
+ "--color-status-warning-text": "#7a4e00",
295
+ "--color-status-info-text": "#1b5fb8",
296
+ "--color-status-success-subtle": "#dff5ea",
297
+ "--color-status-warning-subtle": "#fff0d2",
298
+ "--color-status-error-subtle": "#fde7e7",
299
+ "--color-status-info-subtle": "#e3efff",
300
+ "--color-status-on-success": "#1f2430",
301
+ "--color-status-on-warning": "#1f2430",
302
+ "--color-status-on-error": "#ffffff",
303
+ "--color-status-on-info": "#ffffff",
304
+ "--color-status-neutral": "#5b6475",
305
+ "--color-status-neutral-subtle": "#eddcbf",
306
+ "--color-status-neutral-text": "#3a4152",
307
+ "--color-status-on-neutral": "#ffffff",
308
+ "--color-overlay-backdrop": "#1f243099",
309
+ "--radius-control": "10px",
310
+ "--radius-surface": "18px",
311
+ "--radius-full": "9999px",
312
+ "--space-1": "4.48px",
313
+ "--space-2": "8.96px",
314
+ "--space-3": "13.44px",
315
+ "--space-4": "17.92px",
316
+ "--space-5": "26.88px",
317
+ "--space-6": "35.84px",
318
+ "--space-7": "53.76px",
319
+ "--space-8": "71.68px"
320
+ },
321
+ "dark": {
322
+ "--color-surface-base": "#11151c",
323
+ "--color-surface-raised": "#171c24",
324
+ "--color-surface-overlay": "#202938",
325
+ "--color-surface-sunken": "#1d2430",
326
+ "--color-surface-inverse": "#f7f4ee",
327
+ "--color-text-default": "#f7f4ee",
328
+ "--color-text-muted": "#d1c5b6",
329
+ "--color-text-faint": "#9d968c",
330
+ "--color-text-on-action": "#1f2430",
331
+ "--color-text-on-inverse": "#1f2430",
332
+ "--color-action-primary": "#ff7a52",
333
+ "--color-action-primary-hover": "#ff8b66",
334
+ "--color-action-primary-active": "#ffb08a",
335
+ "--color-action-primary-quiet": "#4a1d0e",
336
+ "--color-action-secondary": "#1d2430",
337
+ "--color-action-secondary-hover": "#273040",
338
+ "--color-action-text": "#ff8b66",
339
+ "--color-border-default": "#344054",
340
+ "--color-border-strong": "#475467",
341
+ "--color-border-focus": "#ffb08a",
342
+ "--color-status-success": "#32c48d",
343
+ "--color-status-warning": "#f5b83d",
344
+ "--color-status-error": "#ff6b6b",
345
+ "--color-status-error-hover": "#ff9797",
346
+ "--color-status-error-active": "#ee6060",
347
+ "--color-status-info": "#5aa9ff",
348
+ "--color-status-error-text": "#ff6b6b",
349
+ "--color-status-success-text": "#32c48d",
350
+ "--color-status-warning-text": "#f5b83d",
351
+ "--color-status-info-text": "#5aa9ff",
352
+ "--color-status-success-subtle": "#0f3324",
353
+ "--color-status-warning-subtle": "#3d2800",
354
+ "--color-status-error-subtle": "#3f1414",
355
+ "--color-status-info-subtle": "#10284d",
356
+ "--color-status-on-success": "#1f2430",
357
+ "--color-status-on-warning": "#1f2430",
358
+ "--color-status-on-error": "#1f2430",
359
+ "--color-status-on-info": "#1f2430",
360
+ "--color-status-neutral": "#9d968c",
361
+ "--color-status-neutral-subtle": "#273040",
362
+ "--color-status-neutral-text": "#d1c5b6",
363
+ "--color-status-on-neutral": "#1f2430",
364
+ "--color-overlay-backdrop": "#000000b3",
365
+ "--radius-control": "10px",
366
+ "--radius-surface": "18px",
367
+ "--radius-full": "9999px",
368
+ "--space-1": "4.48px",
369
+ "--space-2": "8.96px",
370
+ "--space-3": "13.44px",
371
+ "--space-4": "17.92px",
372
+ "--space-5": "26.88px",
373
+ "--space-6": "35.84px",
374
+ "--space-7": "53.76px",
375
+ "--space-8": "71.68px"
376
+ }
377
+ }
378
+ }
379
+ };
package/dist/native.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ // Generated by @pearpages/pulp-tokens from tokens/**.json. Do not edit: run `pnpm build:tokens`.
2
+ type Nested = { [key: string]: string | Nested };
3
+ export interface NativeBrand {
4
+ /** Semantic colour names as `var(--color-…)` references, nested by path: `colors.surface.base`. */
5
+ colors: Nested;
6
+ radius: Record<string, string>;
7
+ space: Record<string, string>;
8
+ /** What the variables resolve to per scheme (hex, px): NativeWind's `vars(themeVars[scheme])`. */
9
+ themeVars: { light: Record<string, string>; dark: Record<string, string> };
10
+ }
11
+ export declare const pulp: NativeBrand;
12
+ export declare const bitepals: NativeBrand;
13
+ declare const brands: { pulp: NativeBrand; bitepals: NativeBrand };
14
+ export default brands;