@wordpress/theme 0.3.1-next.6deb34194.0 → 0.4.1-next.738bb1424.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 (105) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/README.md +114 -40
  3. package/build/color-ramps/{index.js → index.cjs} +8 -8
  4. package/build/color-ramps/lib/{color-utils.js → color-utils.cjs} +2 -2
  5. package/build/color-ramps/lib/{constants.js → constants.cjs} +2 -2
  6. package/build/color-ramps/lib/{default-ramps.js → default-ramps.cjs} +1 -1
  7. package/build/color-ramps/lib/{find-color-with-constraints.js → find-color-with-constraints.cjs} +6 -6
  8. package/build/color-ramps/lib/{index.js → index.cjs} +6 -6
  9. package/build/color-ramps/lib/{ramp-configs.js → ramp-configs.cjs} +1 -1
  10. package/build/color-ramps/lib/{register-color-spaces.js → register-color-spaces.cjs} +1 -1
  11. package/build/color-ramps/lib/{taper-chroma.js → taper-chroma.cjs} +2 -2
  12. package/build/color-ramps/lib/{types.js → types.cjs} +1 -1
  13. package/build/color-ramps/lib/{utils.js → utils.cjs} +4 -4
  14. package/build/{context.js → context.cjs} +1 -1
  15. package/build/{index.js → index.cjs} +2 -2
  16. package/build/index.cjs.map +7 -0
  17. package/build/{lock-unlock.js → lock-unlock.cjs} +1 -1
  18. package/build/prebuilt/js/{design-tokens.js → design-tokens.cjs} +18 -2
  19. package/build/prebuilt/js/design-tokens.cjs.map +7 -0
  20. package/build/prebuilt/ts/{color-tokens.js → color-tokens.cjs} +36 -14
  21. package/build/prebuilt/ts/color-tokens.cjs.map +7 -0
  22. package/build/{token-id.js → prebuilt/ts/token-types.cjs} +4 -16
  23. package/build/prebuilt/ts/token-types.cjs.map +7 -0
  24. package/build/{private-apis.js → private-apis.cjs} +4 -4
  25. package/build/{theme-provider.js → theme-provider.cjs} +3 -3
  26. package/build/{types.js → types.cjs} +1 -1
  27. package/build/{use-theme-provider-styles.js → use-theme-provider-styles.cjs} +6 -6
  28. package/build-module/color-ramps/index.js +7 -7
  29. package/build-module/color-ramps/lib/color-utils.js +1 -1
  30. package/build-module/color-ramps/lib/constants.js +1 -1
  31. package/build-module/color-ramps/lib/find-color-with-constraints.js +5 -5
  32. package/build-module/color-ramps/lib/index.js +5 -5
  33. package/build-module/color-ramps/lib/taper-chroma.js +1 -1
  34. package/build-module/color-ramps/lib/utils.js +3 -3
  35. package/build-module/index.js +1 -1
  36. package/build-module/index.js.map +2 -2
  37. package/build-module/prebuilt/js/design-tokens.js +17 -1
  38. package/build-module/prebuilt/js/design-tokens.js.map +2 -2
  39. package/build-module/prebuilt/ts/color-tokens.js +35 -13
  40. package/build-module/prebuilt/ts/color-tokens.js.map +2 -2
  41. package/build-module/prebuilt/ts/token-types.js +1 -0
  42. package/build-module/prebuilt/ts/token-types.js.map +7 -0
  43. package/build-module/private-apis.js +3 -3
  44. package/build-module/theme-provider.js +2 -2
  45. package/build-module/use-theme-provider-styles.js +4 -4
  46. package/build-types/index.d.ts +2 -0
  47. package/build-types/index.d.ts.map +1 -1
  48. package/build-types/prebuilt/ts/color-tokens.d.ts.map +1 -1
  49. package/build-types/prebuilt/ts/token-types.d.ts +49 -0
  50. package/build-types/prebuilt/ts/token-types.d.ts.map +1 -0
  51. package/package.json +15 -7
  52. package/src/index.ts +2 -1
  53. package/src/prebuilt/css/design-tokens.css +18 -2
  54. package/src/prebuilt/js/design-tokens.js +17 -1
  55. package/src/prebuilt/ts/color-tokens.ts +31 -9
  56. package/src/prebuilt/ts/token-types.ts +125 -0
  57. package/bin/generate-default-ramps/index.ts +0 -49
  58. package/bin/generate-primitive-tokens/index.ts +0 -120
  59. package/bin/terrazzo-plugin-ds-tokens-docs/index.ts +0 -84
  60. package/bin/terrazzo-plugin-figma-ds-token-manager/index.ts +0 -217
  61. package/bin/terrazzo-plugin-figma-ds-token-manager/lib.ts +0 -1
  62. package/bin/terrazzo-plugin-inline-alias-values/index.ts +0 -113
  63. package/bin/terrazzo-plugin-known-wpds-css-variables/index.ts +0 -52
  64. package/build/index.js.map +0 -7
  65. package/build/prebuilt/js/design-tokens.js.map +0 -7
  66. package/build/prebuilt/json/figma.json +0 -787
  67. package/build/prebuilt/ts/color-tokens.js.map +0 -7
  68. package/build/token-id.js.map +0 -7
  69. package/build-module/prebuilt/json/figma.json +0 -787
  70. package/build-module/token-id.js +0 -6
  71. package/build-module/token-id.js.map +0 -7
  72. package/build-types/token-id.d.ts +0 -9
  73. package/build-types/token-id.d.ts.map +0 -1
  74. package/docs/ds-tokens.md +0 -160
  75. package/src/prebuilt/json/figma.json +0 -787
  76. package/src/test/token-id.test.ts +0 -12
  77. package/src/token-id.ts +0 -9
  78. package/terrazzo.config.ts +0 -126
  79. package/tokens/border.json +0 -56
  80. package/tokens/color.json +0 -1029
  81. package/tokens/dimension.json +0 -171
  82. package/tokens/elevation.json +0 -201
  83. package/tokens/typography.json +0 -93
  84. package/tsconfig.bin.json +0 -13
  85. package/tsconfig.bin.tsbuildinfo +0 -1
  86. package/tsconfig.json +0 -11
  87. package/tsconfig.src.json +0 -9
  88. package/tsconfig.src.tsbuildinfo +0 -1
  89. /package/build/color-ramps/{index.js.map → index.cjs.map} +0 -0
  90. /package/build/color-ramps/lib/{color-utils.js.map → color-utils.cjs.map} +0 -0
  91. /package/build/color-ramps/lib/{constants.js.map → constants.cjs.map} +0 -0
  92. /package/build/color-ramps/lib/{default-ramps.js.map → default-ramps.cjs.map} +0 -0
  93. /package/build/color-ramps/lib/{find-color-with-constraints.js.map → find-color-with-constraints.cjs.map} +0 -0
  94. /package/build/color-ramps/lib/{index.js.map → index.cjs.map} +0 -0
  95. /package/build/color-ramps/lib/{ramp-configs.js.map → ramp-configs.cjs.map} +0 -0
  96. /package/build/color-ramps/lib/{register-color-spaces.js.map → register-color-spaces.cjs.map} +0 -0
  97. /package/build/color-ramps/lib/{taper-chroma.js.map → taper-chroma.cjs.map} +0 -0
  98. /package/build/color-ramps/lib/{types.js.map → types.cjs.map} +0 -0
  99. /package/build/color-ramps/lib/{utils.js.map → utils.cjs.map} +0 -0
  100. /package/build/{context.js.map → context.cjs.map} +0 -0
  101. /package/build/{lock-unlock.js.map → lock-unlock.cjs.map} +0 -0
  102. /package/build/{private-apis.js.map → private-apis.cjs.map} +0 -0
  103. /package/build/{theme-provider.js.map → theme-provider.cjs.map} +0 -0
  104. /package/build/{types.js.map → types.cjs.map} +0 -0
  105. /package/build/{use-theme-provider-styles.js.map → use-theme-provider-styles.cjs.map} +0 -0
package/tokens/color.json DELETED
@@ -1,1029 +0,0 @@
1
- {
2
- "color": {
3
- "$type": "color",
4
- "primitive": {
5
- "primary": {
6
- "bgFill1": {
7
- "$value": "#3858e9"
8
- },
9
- "fgFill": {
10
- "$value": "#eff0f2"
11
- },
12
- "bgFill2": {
13
- "$value": "#2e49d9"
14
- },
15
- "surface2": {
16
- "$value": "#f6f8fd"
17
- },
18
- "surface6": {
19
- "$value": "#c7d2ed"
20
- },
21
- "surface5": {
22
- "$value": "#dbe2f4"
23
- },
24
- "surface4": {
25
- "$value": "#e6eaf4"
26
- },
27
- "surface3": {
28
- "$value": "#fff"
29
- },
30
- "fgSurface4": {
31
- "$value": "#0b0070"
32
- },
33
- "fgSurface3": {
34
- "$value": "#3858e9"
35
- },
36
- "fgSurface2": {
37
- "$value": "#5b82ff"
38
- },
39
- "fgSurface1": {
40
- "$value": "#85a9ff"
41
- },
42
- "stroke3": {
43
- "$value": "#3858e9"
44
- },
45
- "stroke4": {
46
- "$value": "#2337c8"
47
- },
48
- "stroke2": {
49
- "$value": "#9caacc"
50
- },
51
- "stroke1": {
52
- "$value": "#a3b1d4"
53
- },
54
- "bgFillDark": {
55
- "$value": "#1a1e27"
56
- },
57
- "fgFillDark": {
58
- "$value": "#eff0f2"
59
- },
60
- "bgFillInverted2": {
61
- "$value": "#1a1e27"
62
- },
63
- "bgFillInverted1": {
64
- "$value": "#13009f"
65
- },
66
- "fgFillInverted": {
67
- "$value": "#eff0f2"
68
- },
69
- "surface1": {
70
- "$value": "#ecf0f9"
71
- }
72
- },
73
- "info": {
74
- "bgFill1": {
75
- "$value": "#0090ff"
76
- },
77
- "fgFill": {
78
- "$value": "#1a1f24"
79
- },
80
- "bgFill2": {
81
- "$value": "#007fed"
82
- },
83
- "surface2": {
84
- "$value": "#f3f9ff"
85
- },
86
- "surface6": {
87
- "$value": "#bcd5f1"
88
- },
89
- "surface5": {
90
- "$value": "#d3e4f7"
91
- },
92
- "surface4": {
93
- "$value": "#deebfa"
94
- },
95
- "surface3": {
96
- "$value": "#fff"
97
- },
98
- "fgSurface4": {
99
- "$value": "#001b4f"
100
- },
101
- "fgSurface3": {
102
- "$value": "#006bd7"
103
- },
104
- "fgSurface2": {
105
- "$value": "#008bfa"
106
- },
107
- "fgSurface1": {
108
- "$value": "#58b0ff"
109
- },
110
- "stroke3": {
111
- "$value": "#006bd7"
112
- },
113
- "stroke4": {
114
- "$value": "#004fa9"
115
- },
116
- "stroke2": {
117
- "$value": "#95b5d9"
118
- },
119
- "stroke1": {
120
- "$value": "#9fbcdc"
121
- },
122
- "bgFillDark": {
123
- "$value": "#1a1f24"
124
- },
125
- "fgFillDark": {
126
- "$value": "#eef0f3"
127
- },
128
- "bgFillInverted2": {
129
- "$value": "#1a1f24"
130
- },
131
- "bgFillInverted1": {
132
- "$value": "#002a69"
133
- },
134
- "fgFillInverted": {
135
- "$value": "#eef0f3"
136
- },
137
- "surface1": {
138
- "$value": "#e4f1ff"
139
- }
140
- },
141
- "success": {
142
- "bgFill1": {
143
- "$value": "#4ab866"
144
- },
145
- "fgFill": {
146
- "$value": "#1b1f1c"
147
- },
148
- "bgFill2": {
149
- "$value": "#37a756"
150
- },
151
- "surface2": {
152
- "$value": "#eaffed"
153
- },
154
- "surface6": {
155
- "$value": "#88e89b"
156
- },
157
- "surface5": {
158
- "$value": "#aff3bb"
159
- },
160
- "surface4": {
161
- "$value": "#c5f7cc"
162
- },
163
- "surface3": {
164
- "$value": "#fff"
165
- },
166
- "fgSurface4": {
167
- "$value": "#002900"
168
- },
169
- "fgSurface3": {
170
- "$value": "#007f30"
171
- },
172
- "fgSurface2": {
173
- "$value": "#2b9e4e"
174
- },
175
- "fgSurface1": {
176
- "$value": "#53c16e"
177
- },
178
- "stroke3": {
179
- "$value": "#007f30"
180
- },
181
- "stroke4": {
182
- "$value": "#006013"
183
- },
184
- "stroke2": {
185
- "$value": "#84c08e"
186
- },
187
- "stroke1": {
188
- "$value": "#8ac894"
189
- },
190
- "bgFillDark": {
191
- "$value": "#1b1f1c"
192
- },
193
- "fgFillDark": {
194
- "$value": "#eaf3eb"
195
- },
196
- "bgFillInverted2": {
197
- "$value": "#1b1f1c"
198
- },
199
- "bgFillInverted1": {
200
- "$value": "#003701"
201
- },
202
- "fgFillInverted": {
203
- "$value": "#eaf3eb"
204
- },
205
- "surface1": {
206
- "$value": "#cbfdd2"
207
- }
208
- },
209
- "warning": {
210
- "bgFill1": {
211
- "$value": "#f0b849"
212
- },
213
- "fgFill": {
214
- "$value": "#1f1e1b"
215
- },
216
- "bgFill2": {
217
- "$value": "#dda633"
218
- },
219
- "surface2": {
220
- "$value": "#fff7e0"
221
- },
222
- "surface6": {
223
- "$value": "#f4cc84"
224
- },
225
- "surface5": {
226
- "$value": "#faddac"
227
- },
228
- "surface4": {
229
- "$value": "#fde6bd"
230
- },
231
- "surface3": {
232
- "$value": "#fff"
233
- },
234
- "fgSurface4": {
235
- "$value": "#2e1900"
236
- },
237
- "fgSurface3": {
238
- "$value": "#926300"
239
- },
240
- "fgSurface2": {
241
- "$value": "#b47f00"
242
- },
243
- "fgSurface1": {
244
- "$value": "#d7a02a"
245
- },
246
- "stroke3": {
247
- "$value": "#926300"
248
- },
249
- "stroke4": {
250
- "$value": "#6f4900"
251
- },
252
- "stroke2": {
253
- "$value": "#c7ad7e"
254
- },
255
- "stroke1": {
256
- "$value": "#d0b381"
257
- },
258
- "bgFillDark": {
259
- "$value": "#1f1e1b"
260
- },
261
- "fgFillDark": {
262
- "$value": "#f7efe2"
263
- },
264
- "bgFillInverted2": {
265
- "$value": "#1f1e1b"
266
- },
267
- "bgFillInverted1": {
268
- "$value": "#422800"
269
- },
270
- "fgFillInverted": {
271
- "$value": "#f7efe2"
272
- },
273
- "surface1": {
274
- "$value": "#ffecc4"
275
- }
276
- },
277
- "error": {
278
- "bgFill1": {
279
- "$value": "#cc1818"
280
- },
281
- "fgFill": {
282
- "$value": "#f2efef"
283
- },
284
- "bgFill2": {
285
- "$value": "#b90000"
286
- },
287
- "surface2": {
288
- "$value": "#fff6f4"
289
- },
290
- "surface6": {
291
- "$value": "#f3c8c2"
292
- },
293
- "surface5": {
294
- "$value": "#f8dcd7"
295
- },
296
- "surface4": {
297
- "$value": "#f6e6e3"
298
- },
299
- "surface3": {
300
- "$value": "#fff"
301
- },
302
- "fgSurface4": {
303
- "$value": "#470000"
304
- },
305
- "fgSurface3": {
306
- "$value": "#cc1818"
307
- },
308
- "fgSurface2": {
309
- "$value": "#f74c40"
310
- },
311
- "fgSurface1": {
312
- "$value": "#ff8879"
313
- },
314
- "stroke3": {
315
- "$value": "#cc1818"
316
- },
317
- "stroke4": {
318
- "$value": "#9d0000"
319
- },
320
- "stroke2": {
321
- "$value": "#d39c95"
322
- },
323
- "stroke1": {
324
- "$value": "#daa39b"
325
- },
326
- "bgFillDark": {
327
- "$value": "#231c1b"
328
- },
329
- "fgFillDark": {
330
- "$value": "#f2efef"
331
- },
332
- "bgFillInverted2": {
333
- "$value": "#231c1b"
334
- },
335
- "bgFillInverted1": {
336
- "$value": "#640000"
337
- },
338
- "fgFillInverted": {
339
- "$value": "#f2efef"
340
- },
341
- "surface1": {
342
- "$value": "#fcece9"
343
- }
344
- },
345
- "bg": {
346
- "surface2": {
347
- "$value": "#f8f8f8"
348
- },
349
- "bgFill1": {
350
- "$value": "#555"
351
- },
352
- "fgFill": {
353
- "$value": "#f0f0f0"
354
- },
355
- "bgFill2": {
356
- "$value": "#484848"
357
- },
358
- "surface6": {
359
- "$value": "#d2d2d2"
360
- },
361
- "surface5": {
362
- "$value": "#e2e2e2"
363
- },
364
- "surface4": {
365
- "$value": "#eaeaea"
366
- },
367
- "surface3": {
368
- "$value": "#fff"
369
- },
370
- "fgSurface4": {
371
- "$value": "#1e1e1e"
372
- },
373
- "fgSurface3": {
374
- "$value": "#6d6d6d"
375
- },
376
- "fgSurface2": {
377
- "$value": "#8a8a8a"
378
- },
379
- "fgSurface1": {
380
- "$value": "#aaa"
381
- },
382
- "stroke3": {
383
- "$value": "#8a8a8a"
384
- },
385
- "stroke4": {
386
- "$value": "#6c6c6c"
387
- },
388
- "stroke2": {
389
- "$value": "#d8d8d8"
390
- },
391
- "stroke1": {
392
- "$value": "#e0e0e0"
393
- },
394
- "bgFillDark": {
395
- "$value": "#1e1e1e"
396
- },
397
- "fgFillDark": {
398
- "$value": "#f0f0f0"
399
- },
400
- "bgFillInverted2": {
401
- "$value": "#1e1e1e"
402
- },
403
- "bgFillInverted1": {
404
- "$value": "#2d2d2d"
405
- },
406
- "fgFillInverted": {
407
- "$value": "#f0f0f0"
408
- },
409
- "surface1": {
410
- "$value": "#f0f0f0"
411
- }
412
- },
413
- "caution": {
414
- "bgFill1": {
415
- "$value": "#f0d149"
416
- },
417
- "fgFill": {
418
- "$value": "#1f1e1b"
419
- },
420
- "bgFill2": {
421
- "$value": "#dcbe2f"
422
- },
423
- "surface2": {
424
- "$value": "#fff9c9"
425
- },
426
- "surface6": {
427
- "$value": "#e8d172"
428
- },
429
- "surface5": {
430
- "$value": "#f7e18a"
431
- },
432
- "surface4": {
433
- "$value": "#fee994"
434
- },
435
- "surface3": {
436
- "$value": "#fff"
437
- },
438
- "fgSurface4": {
439
- "$value": "#281d00"
440
- },
441
- "fgSurface3": {
442
- "$value": "#826a00"
443
- },
444
- "fgSurface2": {
445
- "$value": "#a48600"
446
- },
447
- "fgSurface1": {
448
- "$value": "#c6a800"
449
- },
450
- "stroke3": {
451
- "$value": "#826a00"
452
- },
453
- "stroke4": {
454
- "$value": "#624f00"
455
- },
456
- "stroke2": {
457
- "$value": "#bdb17e"
458
- },
459
- "stroke1": {
460
- "$value": "#c5b883"
461
- },
462
- "bgFillDark": {
463
- "$value": "#1f1e1b"
464
- },
465
- "fgFillDark": {
466
- "$value": "#fdf1bf"
467
- },
468
- "bgFillInverted2": {
469
- "$value": "#1f1e1b"
470
- },
471
- "bgFillInverted1": {
472
- "$value": "#392c00"
473
- },
474
- "fgFillInverted": {
475
- "$value": "#fdf1bf"
476
- },
477
- "surface1": {
478
- "$value": "#ffef9b"
479
- }
480
- }
481
- },
482
- "semantic": {
483
- "bg-surface": {
484
- "neutral": {
485
- "normal": {
486
- "resting": {
487
- "$value": "{color.primitive.bg.surface2}",
488
- "$description": "Background color for surfaces with normal emphasis."
489
- }
490
- },
491
- "strong": {
492
- "resting": {
493
- "$value": "{color.primitive.bg.surface3}",
494
- "$description": "Background color for surfaces with strong emphasis."
495
- }
496
- },
497
- "weak": {
498
- "resting": {
499
- "$value": "{color.primitive.bg.surface1}",
500
- "$description": "Background color for surfaces with weak emphasis."
501
- }
502
- }
503
- },
504
- "brand": {
505
- "normal": {
506
- "resting": {
507
- "$value": "{color.primitive.primary.surface1}",
508
- "$description": "Background color for surfaces with brand tone and normal emphasis."
509
- }
510
- }
511
- },
512
- "success": {
513
- "normal": {
514
- "resting": {
515
- "$value": "{color.primitive.success.surface4}",
516
- "$description": "Background color for surfaces with success tone and normal emphasis."
517
- }
518
- },
519
- "weak": {
520
- "resting": {
521
- "$value": "{color.primitive.success.surface2}",
522
- "$description": "Background color for surfaces with success tone and weak emphasis."
523
- }
524
- }
525
- },
526
- "info": {
527
- "normal": {
528
- "resting": {
529
- "$value": "{color.primitive.info.surface4}",
530
- "$description": "Background color for surfaces with info tone and normal emphasis."
531
- }
532
- },
533
- "weak": {
534
- "resting": {
535
- "$value": "{color.primitive.info.surface2}",
536
- "$description": "Background color for surfaces with info tone and weak emphasis."
537
- }
538
- }
539
- },
540
- "warning": {
541
- "normal": {
542
- "resting": {
543
- "$value": "{color.primitive.warning.surface4}",
544
- "$description": "Background color for surfaces with warning tone and normal emphasis."
545
- }
546
- },
547
- "weak": {
548
- "resting": {
549
- "$value": "{color.primitive.warning.surface2}",
550
- "$description": "Background color for surfaces with warning tone and weak emphasis."
551
- }
552
- }
553
- },
554
- "caution": {
555
- "normal": {
556
- "resting": {
557
- "$value": "{color.primitive.caution.surface4}",
558
- "$description": "Background color for surfaces with caution tone and normal emphasis."
559
- }
560
- },
561
- "weak": {
562
- "resting": {
563
- "$value": "{color.primitive.caution.surface2}",
564
- "$description": "Background color for surfaces with caution tone and weak emphasis."
565
- }
566
- }
567
- },
568
- "error": {
569
- "normal": {
570
- "resting": {
571
- "$value": "{color.primitive.error.surface4}",
572
- "$description": "Background color for surfaces with error tone and normal emphasis."
573
- }
574
- },
575
- "weak": {
576
- "resting": {
577
- "$value": "{color.primitive.error.surface2}",
578
- "$description": "Background color for surfaces with error tone and weak emphasis."
579
- }
580
- }
581
- }
582
- },
583
- "bg-interactive": {
584
- "neutral": {
585
- "normal": {
586
- "resting": {
587
- "$value": "transparent",
588
- "$description": "Background color for interactive elements with neutral tone and normal emphasis."
589
- },
590
- "active": {
591
- "$value": "{color.primitive.bg.surface4}",
592
- "$description": "Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active."
593
- },
594
- "disabled": {
595
- "$value": "{color.primitive.bg.surface5}",
596
- "$description": "Background color for interactive elements with neutral tone and normal emphasis, in their disabled state."
597
- }
598
- },
599
- "strong": {
600
- "resting": {
601
- "$value": "{color.primitive.bg.bgFillInverted1}",
602
- "$description": "Background color for interactive elements with neutral tone and strong emphasis."
603
- },
604
- "active": {
605
- "$value": "{color.primitive.bg.bgFillInverted2}",
606
- "$description": "Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active."
607
- },
608
- "disabled": {
609
- "$value": "{color.primitive.bg.surface6}",
610
- "$description": "Background color for interactive elements with neutral tone and strong emphasis, in their disabled state."
611
- }
612
- },
613
- "weak": {
614
- "resting": {
615
- "$value": "transparent",
616
- "$description": "Background color for interactive elements with neutral tone and weak emphasis."
617
- },
618
- "active": {
619
- "$value": "{color.primitive.bg.surface4}",
620
- "$description": "Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active."
621
- },
622
- "disabled": {
623
- "$value": "{color.primitive.bg.surface5}",
624
- "$description": "Background color for interactive elements with neutral tone and weak emphasis, in their disabled state."
625
- }
626
- }
627
- },
628
- "brand": {
629
- "normal": {
630
- "resting": {
631
- "$value": "transparent",
632
- "$description": "Background color for interactive elements with brand tone and normal emphasis."
633
- },
634
- "active": {
635
- "$value": "{color.primitive.primary.surface2}",
636
- "$description": "Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active."
637
- },
638
- "disabled": {
639
- "$value": "{color.primitive.bg.surface5}",
640
- "$description": "Background color for interactive elements with brand tone and normal emphasis, in their disabled state."
641
- }
642
- },
643
- "strong": {
644
- "resting": {
645
- "$value": "{color.primitive.primary.bgFill1}",
646
- "$description": "Background color for interactive elements with brand tone and strong emphasis."
647
- },
648
- "active": {
649
- "$value": "{color.primitive.primary.bgFill2}",
650
- "$description": "Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active."
651
- },
652
- "disabled": {
653
- "$value": "{color.primitive.bg.surface6}",
654
- "$description": "Background color for interactive elements with brand tone and strong emphasis, in their disabled state."
655
- }
656
- },
657
- "weak": {
658
- "resting": {
659
- "$value": "transparent",
660
- "$description": "Background color for interactive elements with brand tone and weak emphasis."
661
- },
662
- "active": {
663
- "$value": "{color.primitive.primary.surface4}",
664
- "$description": "Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active."
665
- },
666
- "disabled": {
667
- "$value": "{color.primitive.bg.surface5}",
668
- "$description": "Background color for interactive elements with brand tone and weak emphasis, in their disabled state."
669
- }
670
- }
671
- }
672
- },
673
- "bg-track": {
674
- "neutral": {
675
- "weak": {
676
- "resting": {
677
- "$value": "{color.primitive.bg.stroke1}",
678
- "$description": "Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track)."
679
- }
680
- },
681
- "normal": {
682
- "resting": {
683
- "$value": "{color.primitive.bg.stroke2}",
684
- "$description": "Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track)."
685
- }
686
- }
687
- }
688
- },
689
- "bg-thumb": {
690
- "neutral": {
691
- "weak": {
692
- "resting": {
693
- "$value": "{color.primitive.bg.stroke3}",
694
- "$description": "Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb)."
695
- },
696
- "active": {
697
- "$value": "{color.primitive.bg.stroke4}",
698
- "$description": "Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active."
699
- }
700
- }
701
- },
702
- "brand": {
703
- "normal": {
704
- "resting": {
705
- "$value": "{color.primitive.primary.stroke3}",
706
- "$description": "Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track)."
707
- },
708
- "active": {
709
- "$value": "{color.primitive.primary.stroke3}",
710
- "$description": "Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active."
711
- },
712
- "disabled": {
713
- "$value": "{color.primitive.bg.stroke2}",
714
- "$description": "Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state."
715
- }
716
- }
717
- }
718
- },
719
- "fg-content": {
720
- "neutral": {
721
- "normal": {
722
- "resting": {
723
- "$value": "{color.primitive.bg.fgSurface4}",
724
- "$description": "Foreground color for content like text with normal emphasis."
725
- }
726
- },
727
- "weak": {
728
- "resting": {
729
- "$value": "{color.primitive.bg.fgSurface3}",
730
- "$description": "Foreground color for content like text with weak emphasis."
731
- }
732
- }
733
- },
734
- "success": {
735
- "normal": {
736
- "resting": {
737
- "$value": "{color.primitive.success.fgSurface4}",
738
- "$description": "Foreground color for content like text with success tone and normal emphasis."
739
- }
740
- },
741
- "weak": {
742
- "resting": {
743
- "$value": "{color.primitive.success.fgSurface3}",
744
- "$description": "Foreground color for content like text with success tone and weak emphasis."
745
- }
746
- }
747
- },
748
- "info": {
749
- "normal": {
750
- "resting": {
751
- "$value": "{color.primitive.info.fgSurface4}",
752
- "$description": "Foreground color for content like text with info tone and normal emphasis."
753
- }
754
- },
755
- "weak": {
756
- "resting": {
757
- "$value": "{color.primitive.info.fgSurface3}",
758
- "$description": "Foreground color for content like text with info tone and weak emphasis."
759
- }
760
- }
761
- },
762
- "warning": {
763
- "normal": {
764
- "resting": {
765
- "$value": "{color.primitive.warning.fgSurface4}",
766
- "$description": "Foreground color for content like text with warning tone and normal emphasis."
767
- }
768
- },
769
- "weak": {
770
- "resting": {
771
- "$value": "{color.primitive.warning.fgSurface3}",
772
- "$description": "Foreground color for content like text with warning tone and weak emphasis."
773
- }
774
- }
775
- },
776
- "caution": {
777
- "normal": {
778
- "resting": {
779
- "$value": "{color.primitive.caution.fgSurface4}",
780
- "$description": "Foreground color for content like text with caution tone and normal emphasis."
781
- }
782
- },
783
- "weak": {
784
- "resting": {
785
- "$value": "{color.primitive.caution.fgSurface3}",
786
- "$description": "Foreground color for content like text with caution tone and weak emphasis."
787
- }
788
- }
789
- },
790
- "error": {
791
- "normal": {
792
- "resting": {
793
- "$value": "{color.primitive.error.fgSurface4}",
794
- "$description": "Foreground color for content like text with error tone and normal emphasis."
795
- }
796
- },
797
- "weak": {
798
- "resting": {
799
- "$value": "{color.primitive.error.fgSurface3}",
800
- "$description": "Foreground color for content like text with error tone and weak emphasis."
801
- }
802
- }
803
- }
804
- },
805
- "fg-interactive": {
806
- "neutral": {
807
- "normal": {
808
- "resting": {
809
- "$value": "{color.primitive.bg.fgSurface4}",
810
- "$description": "Foreground color for interactive elements with neutral tone and normal emphasis."
811
- },
812
- "active": {
813
- "$value": "{color.primitive.bg.fgSurface4}",
814
- "$description": "Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active."
815
- },
816
- "disabled": {
817
- "$value": "{color.primitive.bg.fgSurface2}",
818
- "$description": "Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state."
819
- }
820
- },
821
- "strong": {
822
- "resting": {
823
- "$value": "{color.primitive.bg.fgFillInverted}",
824
- "$description": "Foreground color for interactive elements with neutral tone and strong emphasis."
825
- },
826
- "active": {
827
- "$value": "{color.primitive.bg.fgFillInverted}",
828
- "$description": "Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active."
829
- },
830
- "disabled": {
831
- "$value": "{color.primitive.bg.fgSurface3}",
832
- "$description": "Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state."
833
- }
834
- },
835
- "weak": {
836
- "resting": {
837
- "$value": "{color.primitive.bg.fgSurface3}",
838
- "$description": "Foreground color for interactive elements with neutral tone and weak emphasis."
839
- },
840
- "disabled": {
841
- "$value": "{color.primitive.bg.fgSurface2}",
842
- "$description": "Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state."
843
- }
844
- }
845
- },
846
- "brand": {
847
- "normal": {
848
- "resting": {
849
- "$value": "{color.primitive.primary.fgSurface3}",
850
- "$description": "Foreground color for interactive elements with brand tone and normal emphasis."
851
- },
852
- "active": {
853
- "$value": "{color.primitive.primary.fgSurface3}",
854
- "$description": "Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active."
855
- },
856
- "disabled": {
857
- "$value": "{color.primitive.bg.fgSurface2}",
858
- "$description": "Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state."
859
- }
860
- },
861
- "strong": {
862
- "resting": {
863
- "$value": "{color.primitive.primary.fgFill}",
864
- "$description": "Foreground color for interactive elements with brand tone and strong emphasis."
865
- },
866
- "active": {
867
- "$value": "{color.primitive.primary.fgFill}",
868
- "$description": "Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active."
869
- },
870
- "disabled": {
871
- "$value": "{color.primitive.bg.fgSurface3}",
872
- "$description": "Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state."
873
- }
874
- }
875
- }
876
- },
877
- "stroke-surface": {
878
- "neutral": {
879
- "normal": {
880
- "resting": {
881
- "$value": "{color.primitive.bg.stroke2}",
882
- "$description": "Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis."
883
- }
884
- },
885
- "weak": {
886
- "resting": {
887
- "$value": "{color.primitive.bg.stroke1}",
888
- "$description": "Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis."
889
- }
890
- },
891
- "strong": {
892
- "resting": {
893
- "$value": "{color.primitive.bg.stroke3}",
894
- "$description": "Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis."
895
- }
896
- }
897
- },
898
- "brand": {
899
- "normal": {
900
- "resting": {
901
- "$value": "{color.primitive.primary.stroke1}",
902
- "$description": "Decorative stroke color used to define brand-toned surface boundaries with normal emphasis."
903
- }
904
- },
905
- "strong": {
906
- "resting": {
907
- "$value": "{color.primitive.primary.stroke3}",
908
- "$description": "Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis."
909
- }
910
- }
911
- },
912
- "success": {
913
- "normal": {
914
- "resting": {
915
- "$value": "{color.primitive.success.stroke1}",
916
- "$description": "Decorative stroke color used to define success-toned surface boundaries with normal emphasis."
917
- }
918
- },
919
- "strong": {
920
- "resting": {
921
- "$value": "{color.primitive.success.stroke3}",
922
- "$description": "Decorative stroke color used to define success-toned surface boundaries with strong emphasis."
923
- }
924
- }
925
- },
926
- "info": {
927
- "normal": {
928
- "resting": {
929
- "$value": "{color.primitive.info.stroke1}",
930
- "$description": "Decorative stroke color used to define info-toned surface boundaries with normal emphasis."
931
- }
932
- },
933
- "strong": {
934
- "resting": {
935
- "$value": "{color.primitive.info.stroke3}",
936
- "$description": "Decorative stroke color used to define info-toned surface boundaries with strong emphasis."
937
- }
938
- }
939
- },
940
- "warning": {
941
- "normal": {
942
- "resting": {
943
- "$value": "{color.primitive.warning.stroke1}",
944
- "$description": "Decorative stroke color used to define warning-toned surface boundaries with normal emphasis."
945
- }
946
- },
947
- "strong": {
948
- "resting": {
949
- "$value": "{color.primitive.warning.stroke3}",
950
- "$description": "Decorative stroke color used to define warning-toned surface boundaries with strong emphasis."
951
- }
952
- }
953
- },
954
- "error": {
955
- "normal": {
956
- "resting": {
957
- "$value": "{color.primitive.error.stroke1}",
958
- "$description": "Decorative stroke color used to define error-toned surface boundaries with normal emphasis."
959
- }
960
- },
961
- "strong": {
962
- "resting": {
963
- "$value": "{color.primitive.error.stroke3}",
964
- "$description": "Decorative stroke color used to define error-toned surface boundaries with strong emphasis."
965
- }
966
- }
967
- }
968
- },
969
- "stroke-interactive": {
970
- "neutral": {
971
- "normal": {
972
- "resting": {
973
- "$value": "{color.primitive.bg.stroke3}",
974
- "$description": "Accessible stroke color used for interactive neutrally-toned elements with normal emphasis."
975
- },
976
- "active": {
977
- "$value": "{color.primitive.bg.stroke4}",
978
- "$description": "Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active."
979
- },
980
- "disabled": {
981
- "$value": "{color.primitive.bg.stroke2}",
982
- "$description": "Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state."
983
- }
984
- },
985
- "strong": {
986
- "resting": {
987
- "$value": "{color.primitive.bg.stroke4}",
988
- "$description": "Accessible stroke color used for interactive neutrally-toned elements with strong emphasis."
989
- }
990
- }
991
- },
992
- "brand": {
993
- "normal": {
994
- "resting": {
995
- "$value": "{color.primitive.primary.stroke3}",
996
- "$description": "Accessible stroke color used for interactive brand-toned elements with normal emphasis."
997
- },
998
- "active": {
999
- "$value": "{color.primitive.primary.stroke4}",
1000
- "$description": "Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active."
1001
- },
1002
- "disabled": {
1003
- "$value": "{color.primitive.bg.stroke2}",
1004
- "$description": "Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state."
1005
- }
1006
- }
1007
- },
1008
- "error": {
1009
- "strong": {
1010
- "resting": {
1011
- "$value": "{color.primitive.error.stroke3}",
1012
- "$description": "Accessible stroke color used for interactive error-toned elements with strong emphasis."
1013
- }
1014
- }
1015
- }
1016
- },
1017
- "stroke-focus": {
1018
- "brand": {
1019
- "normal": {
1020
- "resting": {
1021
- "$value": "{color.primitive.primary.stroke3}",
1022
- "$description": "Accessible stroke color applied to focus rings."
1023
- }
1024
- }
1025
- }
1026
- }
1027
- }
1028
- }
1029
- }