@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.
@@ -5,185 +5,468 @@
5
5
  "primary": {
6
6
  "$type": "color",
7
7
  "$value": "#eceff2",
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": "#f6f9fc",
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": "#222f3c",
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": "#222f3c",
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": "#222f3cb3",
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": "#222f3c80",
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": "#222f3c4d",
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": "#eceff2",
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": "#1a222b",
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": "#0053c9",
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": "#00703e",
65
- "$description": "slot(success) → L set(0.48), C cap(0.1187)"
154
+ "$description": "slot(success) → L set(0.48), C cap(0.1187)",
155
+ "$extensions": {
156
+ "psi": {
157
+ "scopes": [
158
+ "text"
159
+ ]
160
+ }
161
+ }
66
162
  },
67
163
  "warning": {
68
164
  "$type": "color",
69
165
  "$value": "#7e5400",
70
- "$description": "slot(warning) → L set(0.48), C cap(0.1013)"
166
+ "$description": "slot(warning) → L set(0.48), C cap(0.1013)",
167
+ "$extensions": {
168
+ "psi": {
169
+ "scopes": [
170
+ "text"
171
+ ]
172
+ }
173
+ }
71
174
  },
72
175
  "danger": {
73
176
  "$type": "color",
74
177
  "$value": "#b1001b",
75
- "$description": "slot(danger) → L set(0.48), C cap(0.1946)"
178
+ "$description": "slot(danger) → L set(0.48), C cap(0.1946)",
179
+ "$extensions": {
180
+ "psi": {
181
+ "scopes": [
182
+ "text",
183
+ "border"
184
+ ]
185
+ }
186
+ }
187
+ },
188
+ "on-inverted": {
189
+ "$type": "color",
190
+ "$value": "#eceff2",
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": "#f2f4f6",
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": "#eceff2",
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": "#e6e9ed",
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": "#e0e4e8",
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": "#e0e4e9",
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": "#dadfe4",
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": "#1368e9",
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": "#007e46",
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": "#e79d00",
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": "#d40924",
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": "#0053c91f",
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": "#00703e1f",
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": "#7e54001f",
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": "#b1001b1f",
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": "#222f3c14",
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": "#222f3c26",
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": "#222f3c4d",
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": "#0053c9",
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": "#eceff240",
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": "#eceff259",
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": "#eceff2d1",
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": {
package/dist/ember.css CHANGED
@@ -17,7 +17,7 @@
17
17
  --psi-fg-primary-inverted: oklch(from var(--psi-palette-emberInk) 0.15 c h);
18
18
  --psi-fg-static-white: oklch(from var(--psi-palette-emberCanvas) 1 0 h);
19
19
  --psi-fg-static-black: oklch(from var(--psi-palette-emberInk) 0.25 min(c, 0.03) h);
20
- --psi-fg-on-accent: var(--psi-fg-static-black);
20
+ --psi-fg-on-accent: oklch(from var(--psi-fg-static-black) 0.14 c h);
21
21
  --psi-fg-accent: oklch(from var(--psi-palette-emberAccent) 0.75 min(c, 0.156) h);
22
22
  --psi-fg-success: oklch(from var(--psi-palette-emberEmerald) 0.75 min(c, 0.23) h);
23
23
  --psi-fg-warning: oklch(from var(--psi-palette-emberAmber) 0.75 min(c, 0.1582) h);
@@ -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,6 +44,8 @@
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
  --psi-font-sans: "Archivo", system-ui, sans-serif;
47
50
  --psi-font-serif: "IBM Plex Serif", Georgia, serif;
48
51
  --psi-font-mono: "IBM Plex Mono", "Courier New", monospace;
package/dist/light.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
  }