@handamade/psi-tokens 0.5.0 → 0.6.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.
package/dist/acme.css CHANGED
@@ -36,6 +36,7 @@
36
36
  --psi-fill-tint-success: oklch(from var(--psi-fg-success) l c h / 0.12);
37
37
  --psi-fill-tint-warning: oklch(from var(--psi-fg-warning) l c h / 0.12);
38
38
  --psi-fill-tint-danger: oklch(from var(--psi-fg-danger) l c h / 0.12);
39
+ --psi-fill-static-white: var(--psi-fg-static-white);
39
40
  --psi-border-faint: oklch(from var(--psi-fg-primary) l c h / 0.08);
40
41
  --psi-border-neutral: oklch(from var(--psi-fg-primary) l c h / 0.15);
41
42
  --psi-border-strong: oklch(from var(--psi-fg-primary) l c h / 0.3);
@@ -43,5 +44,7 @@
43
44
  --psi-scrim-soft: oklch(from var(--psi-bg-primary) l c h / 0.25);
44
45
  --psi-scrim-medium: oklch(from var(--psi-bg-primary) l c h / 0.35);
45
46
  --psi-scrim-heavy: oklch(from var(--psi-bg-primary) l c h / 0.82);
47
+ --psi-bg-inverted: var(--psi-fg-primary);
48
+ --psi-fg-on-inverted: var(--psi-bg-primary);
46
49
  }
47
50
  }
@@ -3,7 +3,7 @@
3
3
  --psi-switch-fg: var(--psi-fg-primary);
4
4
  --psi-switch-track-bg: var(--psi-fill-neutral4);
5
5
  --psi-switch-track-bg-checked: var(--psi-fill-accent);
6
- --psi-switch-thumb-bg: var(--psi-fg-static-white);
6
+ --psi-switch-thumb-bg: var(--psi-fill-static-white);
7
7
  --psi-switch-focus-ring: var(--psi-border-focus);
8
8
  }
9
9
  }
@@ -1,6 +1,6 @@
1
1
  @layer psi.components {
2
2
  :where(:root, [data-psi-theme]) {
3
- --psi-tooltip-bg: var(--psi-fg-primary);
4
- --psi-tooltip-fg: var(--psi-bg-primary);
3
+ --psi-tooltip-bg: var(--psi-bg-inverted);
4
+ --psi-tooltip-fg: var(--psi-fg-on-inverted);
5
5
  }
6
6
  }
@@ -127,7 +127,7 @@
127
127
  --psi-switch-fg: var(--psi-fg-primary);
128
128
  --psi-switch-track-bg: var(--psi-fill-neutral4);
129
129
  --psi-switch-track-bg-checked: var(--psi-fill-accent);
130
- --psi-switch-thumb-bg: var(--psi-fg-static-white);
130
+ --psi-switch-thumb-bg: var(--psi-fill-static-white);
131
131
  --psi-switch-focus-ring: var(--psi-border-focus);
132
132
  }
133
133
  }
@@ -160,7 +160,7 @@
160
160
 
161
161
  @layer psi.components {
162
162
  :where(:root, [data-psi-theme]) {
163
- --psi-tooltip-bg: var(--psi-fg-primary);
164
- --psi-tooltip-fg: var(--psi-bg-primary);
163
+ --psi-tooltip-bg: var(--psi-bg-inverted);
164
+ --psi-tooltip-fg: var(--psi-fg-on-inverted);
165
165
  }
166
166
  }
package/dist/dark.css CHANGED
@@ -36,6 +36,7 @@
36
36
  --psi-fill-tint-success: oklch(from var(--psi-fg-success) l c h / 0.15);
37
37
  --psi-fill-tint-warning: oklch(from var(--psi-fg-warning) l c h / 0.15);
38
38
  --psi-fill-tint-danger: oklch(from var(--psi-fg-danger) l c h / 0.15);
39
+ --psi-fill-static-white: var(--psi-fg-static-white);
39
40
  --psi-border-faint: oklch(from var(--psi-fg-primary) l c h / 0.08);
40
41
  --psi-border-neutral: oklch(from var(--psi-fg-primary) l c h / 0.15);
41
42
  --psi-border-strong: oklch(from var(--psi-fg-primary) l c h / 0.3);
@@ -43,5 +44,7 @@
43
44
  --psi-scrim-soft: oklch(from var(--psi-bg-primary) l c h / 0.25);
44
45
  --psi-scrim-medium: oklch(from var(--psi-bg-primary) l c h / 0.35);
45
46
  --psi-scrim-heavy: oklch(from var(--psi-bg-primary) l c h / 0.82);
47
+ --psi-bg-inverted: var(--psi-fg-primary);
48
+ --psi-fg-on-inverted: var(--psi-bg-primary);
46
49
  }
47
50
  }
@@ -5,185 +5,468 @@
5
5
  "primary": {
6
6
  "$type": "color",
7
7
  "$value": "#f5f1ea",
8
- "$description": "slot(canvas)"
8
+ "$description": "slot(canvas)",
9
+ "$extensions": {
10
+ "psi": {
11
+ "scopes": [
12
+ "surface"
13
+ ]
14
+ }
15
+ }
9
16
  },
10
17
  "secondary": {
11
18
  "$type": "color",
12
19
  "$value": "#fffbf5",
13
- "$description": "slot(canvas) → L delta(0.03)"
20
+ "$description": "slot(canvas) → L delta(0.03)",
21
+ "$extensions": {
22
+ "psi": {
23
+ "scopes": [
24
+ "surface"
25
+ ]
26
+ }
27
+ }
28
+ },
29
+ "inverted": {
30
+ "$type": "color",
31
+ "$value": "#3c2825",
32
+ "$description": "ref(fgPrimary)",
33
+ "$extensions": {
34
+ "psi": {
35
+ "scopes": [
36
+ "surface"
37
+ ]
38
+ }
39
+ }
14
40
  }
15
41
  },
16
42
  "fg": {
17
43
  "primary": {
18
44
  "$type": "color",
19
45
  "$value": "#3c2825",
20
- "$description": "slot(ink) → L set(0.3), C set(0.03)"
46
+ "$description": "slot(ink) → L set(0.3), C set(0.03)",
47
+ "$extensions": {
48
+ "psi": {
49
+ "scopes": [
50
+ "text"
51
+ ]
52
+ }
53
+ }
21
54
  },
22
55
  "secondary": {
23
56
  "$type": "color",
24
57
  "$value": "#3c2825b3",
25
- "$description": "ref(fgPrimary) → alpha(0.7)"
58
+ "$description": "ref(fgPrimary) → alpha(0.7)",
59
+ "$extensions": {
60
+ "psi": {
61
+ "scopes": [
62
+ "text"
63
+ ]
64
+ }
65
+ }
26
66
  },
27
67
  "tertiary": {
28
68
  "$type": "color",
29
69
  "$value": "#3c282580",
30
- "$description": "ref(fgPrimary) → alpha(0.5)"
70
+ "$description": "ref(fgPrimary) → alpha(0.5)",
71
+ "$extensions": {
72
+ "psi": {
73
+ "scopes": [
74
+ "text"
75
+ ]
76
+ }
77
+ }
31
78
  },
32
79
  "quaternary": {
33
80
  "$type": "color",
34
81
  "$value": "#3c28254d",
35
- "$description": "ref(fgPrimary) → alpha(0.3)"
82
+ "$description": "ref(fgPrimary) → alpha(0.3)",
83
+ "$extensions": {
84
+ "psi": {
85
+ "scopes": [
86
+ "text"
87
+ ]
88
+ }
89
+ }
36
90
  },
37
91
  "primary-inverted": {
38
92
  "$type": "color",
39
93
  "$value": "#f5f1ea",
40
- "$description": "slot(canvas)"
94
+ "$description": "slot(canvas)",
95
+ "$extensions": {
96
+ "psi": {
97
+ "scopes": [
98
+ "text"
99
+ ]
100
+ }
101
+ }
41
102
  },
42
103
  "static-white": {
43
104
  "$type": "color",
44
105
  "$value": "#ffffff",
45
- "$description": "slot(canvas) → L set(1), C set(0)"
106
+ "$description": "slot(canvas) → L set(1), C set(0)",
107
+ "$extensions": {
108
+ "psi": {
109
+ "scopes": [
110
+ "text"
111
+ ]
112
+ }
113
+ }
46
114
  },
47
115
  "static-black": {
48
116
  "$type": "color",
49
117
  "$value": "#281f1d",
50
- "$description": "slot(ink) → L set(0.25), C cap(0.03)"
118
+ "$description": "slot(ink) → L set(0.25), C cap(0.03)",
119
+ "$extensions": {
120
+ "psi": {
121
+ "scopes": [
122
+ "text"
123
+ ]
124
+ }
125
+ }
51
126
  },
52
127
  "on-accent": {
53
128
  "$type": "color",
54
129
  "$value": "#ffffff",
55
- "$description": "ref(fgStaticWhite)"
130
+ "$description": "ref(fgStaticWhite)",
131
+ "$extensions": {
132
+ "psi": {
133
+ "scopes": [
134
+ "text"
135
+ ]
136
+ }
137
+ }
56
138
  },
57
139
  "accent": {
58
140
  "$type": "color",
59
141
  "$value": "#b10b00",
60
- "$description": "slot(accent) → L set(0.48), C cap(0.23)"
142
+ "$description": "slot(accent) → L set(0.48), C cap(0.23)",
143
+ "$extensions": {
144
+ "psi": {
145
+ "scopes": [
146
+ "text"
147
+ ]
148
+ }
149
+ }
61
150
  },
62
151
  "success": {
63
152
  "$type": "color",
64
153
  "$value": "#007048",
65
- "$description": "slot(success) → L set(0.48), C cap(0.1086)"
154
+ "$description": "slot(success) → L set(0.48), C cap(0.1086)",
155
+ "$extensions": {
156
+ "psi": {
157
+ "scopes": [
158
+ "text"
159
+ ]
160
+ }
161
+ }
66
162
  },
67
163
  "warning": {
68
164
  "$type": "color",
69
165
  "$value": "#775800",
70
- "$description": "slot(warning) → L set(0.48), C cap(0.0984)"
166
+ "$description": "slot(warning) → L set(0.48), C cap(0.0984)",
167
+ "$extensions": {
168
+ "psi": {
169
+ "scopes": [
170
+ "text"
171
+ ]
172
+ }
173
+ }
71
174
  },
72
175
  "danger": {
73
176
  "$type": "color",
74
177
  "$value": "#af0039",
75
- "$description": "slot(danger) → L set(0.48), C cap(0.1919)"
178
+ "$description": "slot(danger) → L set(0.48), C cap(0.1919)",
179
+ "$extensions": {
180
+ "psi": {
181
+ "scopes": [
182
+ "text",
183
+ "border"
184
+ ]
185
+ }
186
+ }
187
+ },
188
+ "on-inverted": {
189
+ "$type": "color",
190
+ "$value": "#f5f1ea",
191
+ "$description": "ref(bgPrimary)",
192
+ "$extensions": {
193
+ "psi": {
194
+ "scopes": [
195
+ "text"
196
+ ]
197
+ }
198
+ }
76
199
  }
77
200
  },
78
201
  "fill": {
79
202
  "neutral1": {
80
203
  "$type": "color",
81
204
  "$value": "#faf7f0",
82
- "$description": "slot(canvas) → L delta(0.016), C delta(-0.001)"
205
+ "$description": "slot(canvas) → L delta(0.016), C delta(-0.001)",
206
+ "$extensions": {
207
+ "psi": {
208
+ "scopes": [
209
+ "surface"
210
+ ]
211
+ }
212
+ }
83
213
  },
84
214
  "neutral2": {
85
215
  "$type": "color",
86
216
  "$value": "#f5f1ea",
87
- "$description": "slot(canvas)"
217
+ "$description": "slot(canvas)",
218
+ "$extensions": {
219
+ "psi": {
220
+ "scopes": [
221
+ "surface"
222
+ ]
223
+ }
224
+ }
88
225
  },
89
226
  "neutral3": {
90
227
  "$type": "color",
91
228
  "$value": "#f0ebe4",
92
- "$description": "slot(canvas) → L delta(-0.017), C delta(0.001)"
229
+ "$description": "slot(canvas) → L delta(-0.017), C delta(0.001)",
230
+ "$extensions": {
231
+ "psi": {
232
+ "scopes": [
233
+ "surface"
234
+ ]
235
+ }
236
+ }
93
237
  },
94
238
  "neutral4": {
95
239
  "$type": "color",
96
240
  "$value": "#ebe6de",
97
- "$description": "slot(canvas) → L delta(-0.034), C delta(0.002)"
241
+ "$description": "slot(canvas) → L delta(-0.034), C delta(0.002)",
242
+ "$extensions": {
243
+ "psi": {
244
+ "scopes": [
245
+ "surface"
246
+ ]
247
+ }
248
+ }
98
249
  },
99
250
  "neutral5": {
100
251
  "$type": "color",
101
252
  "$value": "#ece6de",
102
- "$description": "slot(canvas) → L delta(-0.032), C delta(0.003)"
253
+ "$description": "slot(canvas) → L delta(-0.032), C delta(0.003)",
254
+ "$extensions": {
255
+ "psi": {
256
+ "scopes": [
257
+ "surface"
258
+ ]
259
+ }
260
+ }
103
261
  },
104
262
  "neutral6": {
105
263
  "$type": "color",
106
264
  "$value": "#e7e1d8",
107
- "$description": "slot(canvas) → L delta(-0.048), C delta(0.004)"
265
+ "$description": "slot(canvas) → L delta(-0.048), C delta(0.004)",
266
+ "$extensions": {
267
+ "psi": {
268
+ "scopes": [
269
+ "surface"
270
+ ]
271
+ }
272
+ }
108
273
  },
109
274
  "accent": {
110
275
  "$type": "color",
111
276
  "$value": "#cc2a1b",
112
- "$description": "slot(accent)"
277
+ "$description": "slot(accent)",
278
+ "$extensions": {
279
+ "psi": {
280
+ "scopes": [
281
+ "surface",
282
+ "border"
283
+ ]
284
+ }
285
+ }
113
286
  },
114
287
  "success": {
115
288
  "$type": "color",
116
289
  "$value": "#007d51",
117
- "$description": "slot(success) → C cap(0.1285)"
290
+ "$description": "slot(success) → C cap(0.1285)",
291
+ "$extensions": {
292
+ "psi": {
293
+ "scopes": [
294
+ "surface"
295
+ ]
296
+ }
297
+ }
118
298
  },
119
299
  "warning": {
120
300
  "$type": "color",
121
301
  "$value": "#e3ae28",
122
- "$description": "slot(warning)"
302
+ "$description": "slot(warning)",
303
+ "$extensions": {
304
+ "psi": {
305
+ "scopes": [
306
+ "surface"
307
+ ]
308
+ }
309
+ }
123
310
  },
124
311
  "danger": {
125
312
  "$type": "color",
126
313
  "$value": "#d20046",
127
- "$description": "slot(danger)"
314
+ "$description": "slot(danger)",
315
+ "$extensions": {
316
+ "psi": {
317
+ "scopes": [
318
+ "surface"
319
+ ]
320
+ }
321
+ }
128
322
  },
129
323
  "tint-accent": {
130
324
  "$type": "color",
131
325
  "$value": "#b10b001f",
132
- "$description": "ref(fgAccent) → alpha(0.12)"
326
+ "$description": "ref(fgAccent) → alpha(0.12)",
327
+ "$extensions": {
328
+ "psi": {
329
+ "scopes": [
330
+ "surface"
331
+ ]
332
+ }
333
+ }
133
334
  },
134
335
  "tint-success": {
135
336
  "$type": "color",
136
337
  "$value": "#0070481f",
137
- "$description": "ref(fgSuccess) → alpha(0.12)"
338
+ "$description": "ref(fgSuccess) → alpha(0.12)",
339
+ "$extensions": {
340
+ "psi": {
341
+ "scopes": [
342
+ "surface"
343
+ ]
344
+ }
345
+ }
138
346
  },
139
347
  "tint-warning": {
140
348
  "$type": "color",
141
349
  "$value": "#7758001f",
142
- "$description": "ref(fgWarning) → alpha(0.12)"
350
+ "$description": "ref(fgWarning) → alpha(0.12)",
351
+ "$extensions": {
352
+ "psi": {
353
+ "scopes": [
354
+ "surface"
355
+ ]
356
+ }
357
+ }
143
358
  },
144
359
  "tint-danger": {
145
360
  "$type": "color",
146
361
  "$value": "#af00391f",
147
- "$description": "ref(fgDanger) → alpha(0.12)"
362
+ "$description": "ref(fgDanger) → alpha(0.12)",
363
+ "$extensions": {
364
+ "psi": {
365
+ "scopes": [
366
+ "surface"
367
+ ]
368
+ }
369
+ }
370
+ },
371
+ "static-white": {
372
+ "$type": "color",
373
+ "$value": "#ffffff",
374
+ "$description": "ref(fgStaticWhite)",
375
+ "$extensions": {
376
+ "psi": {
377
+ "scopes": [
378
+ "surface"
379
+ ]
380
+ }
381
+ }
148
382
  }
149
383
  },
150
384
  "border": {
151
385
  "faint": {
152
386
  "$type": "color",
153
387
  "$value": "#3c282514",
154
- "$description": "ref(fgPrimary) → alpha(0.08)"
388
+ "$description": "ref(fgPrimary) → alpha(0.08)",
389
+ "$extensions": {
390
+ "psi": {
391
+ "scopes": [
392
+ "border"
393
+ ]
394
+ }
395
+ }
155
396
  },
156
397
  "neutral": {
157
398
  "$type": "color",
158
399
  "$value": "#3c282526",
159
- "$description": "ref(fgPrimary) → alpha(0.15)"
400
+ "$description": "ref(fgPrimary) → alpha(0.15)",
401
+ "$extensions": {
402
+ "psi": {
403
+ "scopes": [
404
+ "border"
405
+ ]
406
+ }
407
+ }
160
408
  },
161
409
  "strong": {
162
410
  "$type": "color",
163
411
  "$value": "#3c28254d",
164
- "$description": "ref(fgPrimary) → alpha(0.3)"
412
+ "$description": "ref(fgPrimary) → alpha(0.3)",
413
+ "$extensions": {
414
+ "psi": {
415
+ "scopes": [
416
+ "border"
417
+ ]
418
+ }
419
+ }
165
420
  },
166
421
  "focus": {
167
422
  "$type": "color",
168
423
  "$value": "#b10b00",
169
- "$description": "ref(fgAccent)"
424
+ "$description": "ref(fgAccent)",
425
+ "$extensions": {
426
+ "psi": {
427
+ "scopes": [
428
+ "border"
429
+ ]
430
+ }
431
+ }
170
432
  }
171
433
  },
172
434
  "scrim": {
173
435
  "soft": {
174
436
  "$type": "color",
175
437
  "$value": "#f5f1ea40",
176
- "$description": "ref(bgPrimary) → alpha(0.25)"
438
+ "$description": "ref(bgPrimary) → alpha(0.25)",
439
+ "$extensions": {
440
+ "psi": {
441
+ "scopes": [
442
+ "surface"
443
+ ]
444
+ }
445
+ }
177
446
  },
178
447
  "medium": {
179
448
  "$type": "color",
180
449
  "$value": "#f5f1ea59",
181
- "$description": "ref(bgPrimary) → alpha(0.35)"
450
+ "$description": "ref(bgPrimary) → alpha(0.35)",
451
+ "$extensions": {
452
+ "psi": {
453
+ "scopes": [
454
+ "surface"
455
+ ]
456
+ }
457
+ }
182
458
  },
183
459
  "heavy": {
184
460
  "$type": "color",
185
461
  "$value": "#f5f1ead1",
186
- "$description": "ref(bgPrimary) → alpha(0.82)"
462
+ "$description": "ref(bgPrimary) → alpha(0.82)",
463
+ "$extensions": {
464
+ "psi": {
465
+ "scopes": [
466
+ "surface"
467
+ ]
468
+ }
469
+ }
187
470
  }
188
471
  }
189
472
  },
@@ -256,6 +539,13 @@
256
539
  "144": {
257
540
  "$type": "dimension",
258
541
  "$value": "9rem"
542
+ },
543
+ "$extensions": {
544
+ "psi": {
545
+ "scopes": [
546
+ "gap"
547
+ ]
548
+ }
259
549
  }
260
550
  },
261
551
  "size": {