@servicetitan/hammer-token 2.5.1 → 3.0.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 (147) hide show
  1. package/CHANGELOG.md +50 -0
  2. package/README.md +332 -0
  3. package/build/web/core/component-variables.scss +1088 -131
  4. package/build/web/core/component.d.ts +558 -0
  5. package/build/web/core/component.js +6685 -249
  6. package/build/web/core/component.scss +557 -69
  7. package/build/web/core/css-utils/a2-border.css +47 -45
  8. package/build/web/core/css-utils/a2-color.css +443 -227
  9. package/build/web/core/css-utils/a2-font.css +0 -2
  10. package/build/web/core/css-utils/a2-spacing.css +476 -478
  11. package/build/web/core/css-utils/a2-utils.css +992 -772
  12. package/build/web/core/css-utils/border.css +47 -45
  13. package/build/web/core/css-utils/color.css +443 -227
  14. package/build/web/core/css-utils/font.css +0 -2
  15. package/build/web/core/css-utils/spacing.css +476 -478
  16. package/build/web/core/css-utils/utils.css +992 -772
  17. package/build/web/core/index.d.ts +6 -0
  18. package/build/web/core/index.js +1 -1
  19. package/build/web/core/primitive-variables.scss +148 -65
  20. package/build/web/core/primitive.d.ts +209 -0
  21. package/build/web/core/primitive.js +779 -61
  22. package/build/web/core/primitive.scss +207 -124
  23. package/build/web/core/semantic-variables.scss +363 -245
  24. package/build/web/core/semantic.d.ts +221 -0
  25. package/build/web/core/semantic.js +1592 -347
  26. package/build/web/core/semantic.scss +219 -140
  27. package/build/web/index.d.ts +3 -4
  28. package/build/web/index.js +0 -1
  29. package/build/web/types.d.ts +17 -0
  30. package/config.js +121 -497
  31. package/eslint.config.mjs +11 -1
  32. package/package.json +15 -5
  33. package/src/global/primitive/breakpoint.tokens.json +54 -0
  34. package/src/global/primitive/color.tokens.json +1092 -0
  35. package/src/global/primitive/duration.tokens.json +44 -0
  36. package/src/global/primitive/font.tokens.json +151 -0
  37. package/src/global/primitive/radius.tokens.json +94 -0
  38. package/src/global/primitive/size.tokens.json +174 -0
  39. package/src/global/primitive/transition.tokens.json +32 -0
  40. package/src/theme/core/background.tokens.json +1312 -0
  41. package/src/theme/core/border.tokens.json +192 -0
  42. package/src/theme/core/chart.tokens.json +982 -0
  43. package/src/theme/core/component/ai-mark.tokens.json +20 -0
  44. package/src/theme/core/component/alert.tokens.json +261 -0
  45. package/src/theme/core/component/announcement.tokens.json +460 -0
  46. package/src/theme/core/component/avatar.tokens.json +137 -0
  47. package/src/theme/core/component/badge.tokens.json +42 -0
  48. package/src/theme/core/component/breadcrumb.tokens.json +42 -0
  49. package/src/theme/core/component/button-toggle.tokens.json +428 -0
  50. package/src/theme/core/component/button.tokens.json +941 -0
  51. package/src/theme/core/component/calendar.tokens.json +391 -0
  52. package/src/theme/core/component/card.tokens.json +107 -0
  53. package/src/theme/core/component/checkbox.tokens.json +631 -0
  54. package/src/theme/core/component/chip.tokens.json +169 -0
  55. package/src/theme/core/component/combobox.tokens.json +269 -0
  56. package/src/theme/core/component/details.tokens.json +152 -0
  57. package/src/theme/core/component/dialog.tokens.json +87 -0
  58. package/src/theme/core/component/divider.tokens.json +23 -0
  59. package/src/theme/core/component/dnd.tokens.json +208 -0
  60. package/src/theme/core/component/drawer.tokens.json +61 -0
  61. package/src/theme/core/component/drilldown.tokens.json +61 -0
  62. package/src/theme/core/component/edit-card.tokens.json +381 -0
  63. package/src/theme/core/component/field-label.tokens.json +42 -0
  64. package/src/theme/core/component/field-message.tokens.json +74 -0
  65. package/src/theme/core/component/icon.tokens.json +42 -0
  66. package/src/theme/core/component/link.tokens.json +108 -0
  67. package/src/theme/core/component/list-view.tokens.json +82 -0
  68. package/src/theme/core/component/listbox.tokens.json +283 -0
  69. package/src/theme/core/component/menu.tokens.json +230 -0
  70. package/src/theme/core/component/overflow.tokens.json +84 -0
  71. package/src/theme/core/component/page.tokens.json +377 -0
  72. package/src/theme/core/component/pagination.tokens.json +63 -0
  73. package/src/theme/core/component/popover.tokens.json +122 -0
  74. package/src/theme/core/component/progress-bar.tokens.json +133 -0
  75. package/src/theme/core/component/radio.tokens.json +631 -0
  76. package/src/theme/core/component/segmented-control.tokens.json +175 -0
  77. package/src/theme/core/component/select-card.tokens.json +943 -0
  78. package/src/theme/core/component/side-nav.tokens.json +349 -0
  79. package/src/theme/core/component/skeleton.tokens.json +42 -0
  80. package/src/theme/core/component/spinner.tokens.json +96 -0
  81. package/src/theme/core/component/status-icon.tokens.json +164 -0
  82. package/src/theme/core/component/stepper.tokens.json +484 -0
  83. package/src/theme/core/component/switch.tokens.json +285 -0
  84. package/src/theme/core/component/tab.tokens.json +192 -0
  85. package/src/theme/core/component/text-field.tokens.json +160 -0
  86. package/src/theme/core/component/text.tokens.json +59 -0
  87. package/src/theme/core/component/toast.tokens.json +343 -0
  88. package/src/theme/core/component/toolbar.tokens.json +114 -0
  89. package/src/theme/core/component/tooltip.tokens.json +61 -0
  90. package/src/theme/core/focus.tokens.json +56 -0
  91. package/src/theme/core/foreground.tokens.json +416 -0
  92. package/src/theme/core/gradient.tokens.json +41 -0
  93. package/src/theme/core/opacity.tokens.json +25 -0
  94. package/src/theme/core/shadow.tokens.json +81 -0
  95. package/src/theme/core/status.tokens.json +74 -0
  96. package/src/theme/core/typography.tokens.json +163 -0
  97. package/src/utils/__tests__/css-utils-format-utils.test.js +312 -0
  98. package/src/utils/__tests__/sd-build-configs.test.js +306 -0
  99. package/src/utils/__tests__/sd-formats.test.js +950 -0
  100. package/src/utils/__tests__/sd-transforms.test.js +336 -0
  101. package/src/utils/__tests__/token-helpers.test.js +1160 -0
  102. package/src/utils/copy-css-utils-cli.js +13 -1
  103. package/src/utils/css-utils-format-utils.js +105 -176
  104. package/src/utils/figma/__tests__/sync-gradient.test.js +561 -0
  105. package/src/utils/figma/__tests__/token-conversion.test.js +117 -0
  106. package/src/utils/figma/__tests__/token-resolution.test.js +231 -0
  107. package/src/utils/figma/auth.js +355 -0
  108. package/src/utils/figma/constants.js +22 -0
  109. package/src/utils/figma/errors.js +80 -0
  110. package/src/utils/figma/figma-api.js +1069 -0
  111. package/src/utils/figma/get-token.js +348 -0
  112. package/src/utils/figma/sync-components.js +909 -0
  113. package/src/utils/figma/sync-main.js +692 -0
  114. package/src/utils/figma/sync-orchestration.js +683 -0
  115. package/src/utils/figma/sync-primitives.js +230 -0
  116. package/src/utils/figma/sync-semantic.js +1056 -0
  117. package/src/utils/figma/token-conversion.js +340 -0
  118. package/src/utils/figma/token-parsing.js +186 -0
  119. package/src/utils/figma/token-resolution.js +569 -0
  120. package/src/utils/figma/utils.js +199 -0
  121. package/src/utils/sd-build-configs.js +305 -0
  122. package/src/utils/sd-formats.js +965 -0
  123. package/src/utils/sd-transforms.js +165 -0
  124. package/src/utils/token-helpers.js +848 -0
  125. package/tsconfig.json +18 -0
  126. package/vitest.config.js +17 -0
  127. package/.turbo/turbo-build.log +0 -37
  128. package/build/web/core/raw.js +0 -234
  129. package/src/global/primitive/breakpoint.js +0 -19
  130. package/src/global/primitive/color.js +0 -231
  131. package/src/global/primitive/duration.js +0 -16
  132. package/src/global/primitive/font.js +0 -60
  133. package/src/global/primitive/radius.js +0 -31
  134. package/src/global/primitive/size.js +0 -55
  135. package/src/global/primitive/transition.js +0 -16
  136. package/src/theme/core/background.js +0 -170
  137. package/src/theme/core/border.js +0 -103
  138. package/src/theme/core/charts.js +0 -464
  139. package/src/theme/core/component/button.js +0 -708
  140. package/src/theme/core/component/checkbox.js +0 -405
  141. package/src/theme/core/focus.js +0 -35
  142. package/src/theme/core/foreground.js +0 -148
  143. package/src/theme/core/overlay.js +0 -137
  144. package/src/theme/core/shadow.js +0 -29
  145. package/src/theme/core/status.js +0 -49
  146. package/src/theme/core/typography.js +0 -82
  147. package/type/types.ts +0 -344
package/src/theme/core/component/select-card.tokens.json ADDED
@@ -0,0 +1,943 @@
1
+ {
2
+ "select-card": {
3
+ "unchecked": {
4
+ "foreground": {
5
+ "color": {
6
+ "$type": "color",
7
+ "$value": "{foreground.color.primary}",
8
+ "$extensions": {
9
+ "appearance": {
10
+ "light": {
11
+ "$type": "color",
12
+ "$value": "{foreground.color.primary}"
13
+ },
14
+ "dark": {
15
+ "$type": "color",
16
+ "$value": "{foreground.color.primary}"
17
+ }
18
+ },
19
+ "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
20
+ }
21
+ },
22
+ "color-hover": {
23
+ "$type": "color",
24
+ "$value": "{foreground.color.primary-hover}",
25
+ "$extensions": {
26
+ "appearance": {
27
+ "light": {
28
+ "$type": "color",
29
+ "$value": "{foreground.color.primary-hover}"
30
+ },
31
+ "dark": {
32
+ "$type": "color",
33
+ "$value": "{foreground.color.primary-hover}"
34
+ }
35
+ },
36
+ "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
37
+ }
38
+ },
39
+ "color-active": {
40
+ "$type": "color",
41
+ "$value": "{foreground.color.primary-active}",
42
+ "$extensions": {
43
+ "appearance": {
44
+ "light": {
45
+ "$type": "color",
46
+ "$value": "{foreground.color.primary-active}"
47
+ },
48
+ "dark": {
49
+ "$type": "color",
50
+ "$value": "{foreground.color.primary-active}"
51
+ }
52
+ },
53
+ "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
54
+ }
55
+ }
56
+ },
57
+ "default": {
58
+ "background": {
59
+ "color": {
60
+ "$type": "color",
61
+ "$value": "{background.color.default}",
62
+ "$extensions": {
63
+ "appearance": {
64
+ "light": {
65
+ "$type": "color",
66
+ "$value": "{background.color.default}"
67
+ },
68
+ "dark": {
69
+ "$type": "color",
70
+ "$value": "{background.color.default}"
71
+ }
72
+ },
73
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
74
+ }
75
+ },
76
+ "color-hover": {
77
+ "$type": "color",
78
+ "$value": "{background.color.default-hover}",
79
+ "$extensions": {
80
+ "appearance": {
81
+ "light": {
82
+ "$type": "color",
83
+ "$value": "{background.color.default-hover}"
84
+ },
85
+ "dark": {
86
+ "$type": "color",
87
+ "$value": "{background.color.default-hover}"
88
+ }
89
+ },
90
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
91
+ }
92
+ },
93
+ "color-active": {
94
+ "$type": "color",
95
+ "$value": "{background.color.default-active}",
96
+ "$extensions": {
97
+ "appearance": {
98
+ "light": {
99
+ "$type": "color",
100
+ "$value": "{background.color.default-active}"
101
+ },
102
+ "dark": {
103
+ "$type": "color",
104
+ "$value": "{background.color.default-active}"
105
+ }
106
+ },
107
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
108
+ }
109
+ }
110
+ }
111
+ },
112
+ "strong": {
113
+ "background": {
114
+ "color": {
115
+ "$type": "color",
116
+ "$value": "{background.color.strong}",
117
+ "$extensions": {
118
+ "appearance": {
119
+ "light": {
120
+ "$type": "color",
121
+ "$value": "{background.color.strong}"
122
+ },
123
+ "dark": {
124
+ "$type": "color",
125
+ "$value": "{background.color.strong}"
126
+ }
127
+ },
128
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
129
+ }
130
+ },
131
+ "color-hover": {
132
+ "$type": "color",
133
+ "$value": "{background.color.strong-hover}",
134
+ "$extensions": {
135
+ "appearance": {
136
+ "light": {
137
+ "$type": "color",
138
+ "$value": "{background.color.strong-hover}"
139
+ },
140
+ "dark": {
141
+ "$type": "color",
142
+ "$value": "{background.color.strong-hover}"
143
+ }
144
+ },
145
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
146
+ }
147
+ },
148
+ "color-active": {
149
+ "$type": "color",
150
+ "$value": "{background.color.strong-active}",
151
+ "$extensions": {
152
+ "appearance": {
153
+ "light": {
154
+ "$type": "color",
155
+ "$value": "{background.color.strong-active}"
156
+ },
157
+ "dark": {
158
+ "$type": "color",
159
+ "$value": "{background.color.strong-active}"
160
+ }
161
+ },
162
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
163
+ }
164
+ }
165
+ }
166
+ },
167
+ "stronger": {
168
+ "background": {
169
+ "color": {
170
+ "$type": "color",
171
+ "$value": "{background.color.stronger}",
172
+ "$extensions": {
173
+ "appearance": {
174
+ "light": {
175
+ "$type": "color",
176
+ "$value": "{background.color.stronger}"
177
+ },
178
+ "dark": {
179
+ "$type": "color",
180
+ "$value": "{background.color.stronger}"
181
+ }
182
+ },
183
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
184
+ }
185
+ },
186
+ "color-hover": {
187
+ "$type": "color",
188
+ "$value": "{background.color.stronger-hover}",
189
+ "$extensions": {
190
+ "appearance": {
191
+ "light": {
192
+ "$type": "color",
193
+ "$value": "{background.color.stronger-hover}"
194
+ },
195
+ "dark": {
196
+ "$type": "color",
197
+ "$value": "{background.color.stronger-hover}"
198
+ }
199
+ },
200
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
201
+ }
202
+ },
203
+ "color-active": {
204
+ "$type": "color",
205
+ "$value": "{background.color.stronger-active}",
206
+ "$extensions": {
207
+ "appearance": {
208
+ "light": {
209
+ "$type": "color",
210
+ "$value": "{background.color.stronger-active}"
211
+ },
212
+ "dark": {
213
+ "$type": "color",
214
+ "$value": "{background.color.stronger-active}"
215
+ }
216
+ },
217
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
218
+ }
219
+ }
220
+ }
221
+ },
222
+ "icon": {
223
+ "color": {
224
+ "$type": "color",
225
+ "$value": "{foreground.color.default}",
226
+ "$extensions": {
227
+ "appearance": {
228
+ "light": {
229
+ "$type": "color",
230
+ "$value": "{foreground.color.default}"
231
+ },
232
+ "dark": {
233
+ "$type": "color",
234
+ "$value": "{foreground.color.default}"
235
+ }
236
+ },
237
+ "com.figma.scopes": ["SHAPE_FILL"]
238
+ }
239
+ },
240
+ "color-disabled": {
241
+ "$type": "color",
242
+ "$value": "{foreground.color.subdued}",
243
+ "$extensions": {
244
+ "appearance": {
245
+ "light": {
246
+ "$type": "color",
247
+ "$value": "{foreground.color.subdued}"
248
+ },
249
+ "dark": {
250
+ "$type": "color",
251
+ "$value": "{foreground.color.subdued}"
252
+ }
253
+ },
254
+ "com.figma.scopes": ["SHAPE_FILL"]
255
+ }
256
+ }
257
+ },
258
+ "border": {
259
+ "color": {
260
+ "$type": "color",
261
+ "$value": "{border.color.subdued}",
262
+ "$extensions": {
263
+ "appearance": {
264
+ "light": {
265
+ "$type": "color",
266
+ "$value": "{border.color.subdued}"
267
+ },
268
+ "dark": {
269
+ "$type": "color",
270
+ "$value": "{border.color.subdued}"
271
+ }
272
+ },
273
+ "com.figma.scopes": ["STROKE_COLOR", "SHAPE_FILL", "FRAME_FILL"]
274
+ }
275
+ }
276
+ },
277
+ "focus-ring": {
278
+ "color": {
279
+ "$type": "color",
280
+ "$value": "{focus.ring.color.default}",
281
+ "$extensions": {
282
+ "appearance": {
283
+ "light": {
284
+ "$type": "color",
285
+ "$value": "{focus.ring.color.default}"
286
+ },
287
+ "dark": {
288
+ "$type": "color",
289
+ "$value": "{focus.ring.color.default}"
290
+ }
291
+ },
292
+ "com.figma.scopes": ["STROKE_COLOR"]
293
+ }
294
+ }
295
+ },
296
+ "shadow": {
297
+ "color": {
298
+ "$type": "color",
299
+ "$value": "{shadow.color.default}",
300
+ "$extensions": {
301
+ "appearance": {
302
+ "light": {
303
+ "$type": "color",
304
+ "$value": "{shadow.color.default}"
305
+ },
306
+ "dark": {
307
+ "$type": "color",
308
+ "$value": "{shadow.color.default}"
309
+ }
310
+ },
311
+ "com.figma.scopes": ["EFFECT_COLOR", "FRAME_FILL", "SHAPE_FILL"]
312
+ }
313
+ }
314
+ }
315
+ },
316
+ "checked": {
317
+ "foreground": {
318
+ "color": {
319
+ "$type": "color",
320
+ "$value": "{foreground.color.primary}",
321
+ "$extensions": {
322
+ "appearance": {
323
+ "light": {
324
+ "$type": "color",
325
+ "$value": "{foreground.color.primary}"
326
+ },
327
+ "dark": {
328
+ "$type": "color",
329
+ "$value": "{foreground.color.primary}"
330
+ }
331
+ },
332
+ "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
333
+ }
334
+ },
335
+ "color-hover": {
336
+ "$type": "color",
337
+ "$value": "{foreground.color.primary-hover}",
338
+ "$extensions": {
339
+ "appearance": {
340
+ "light": {
341
+ "$type": "color",
342
+ "$value": "{foreground.color.primary-hover}"
343
+ },
344
+ "dark": {
345
+ "$type": "color",
346
+ "$value": "{foreground.color.primary-hover}"
347
+ }
348
+ },
349
+ "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
350
+ }
351
+ },
352
+ "color-active": {
353
+ "$type": "color",
354
+ "$value": "{foreground.color.primary-active}",
355
+ "$extensions": {
356
+ "appearance": {
357
+ "light": {
358
+ "$type": "color",
359
+ "$value": "{foreground.color.primary-active}"
360
+ },
361
+ "dark": {
362
+ "$type": "color",
363
+ "$value": "{foreground.color.primary-active}"
364
+ }
365
+ },
366
+ "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
367
+ }
368
+ }
369
+ },
370
+ "default": {
371
+ "background": {
372
+ "color": {
373
+ "$type": "color",
374
+ "$value": "{background.color.default}",
375
+ "$extensions": {
376
+ "appearance": {
377
+ "light": {
378
+ "$type": "color",
379
+ "$value": "{background.color.default}"
380
+ },
381
+ "dark": {
382
+ "$type": "color",
383
+ "$value": "{background.color.default}"
384
+ }
385
+ },
386
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
387
+ }
388
+ },
389
+ "color-hover": {
390
+ "$type": "color",
391
+ "$value": "{background.color.default-hover}",
392
+ "$extensions": {
393
+ "appearance": {
394
+ "light": {
395
+ "$type": "color",
396
+ "$value": "{background.color.default-hover}"
397
+ },
398
+ "dark": {
399
+ "$type": "color",
400
+ "$value": "{background.color.default-hover}"
401
+ }
402
+ },
403
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
404
+ }
405
+ },
406
+ "color-active": {
407
+ "$type": "color",
408
+ "$value": "{background.color.default-active}",
409
+ "$extensions": {
410
+ "appearance": {
411
+ "light": {
412
+ "$type": "color",
413
+ "$value": "{background.color.default-active}"
414
+ },
415
+ "dark": {
416
+ "$type": "color",
417
+ "$value": "{background.color.default-active}"
418
+ }
419
+ },
420
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
421
+ }
422
+ }
423
+ }
424
+ },
425
+ "strong": {
426
+ "background": {
427
+ "color": {
428
+ "$type": "color",
429
+ "$value": "{background.color.strong}",
430
+ "$extensions": {
431
+ "appearance": {
432
+ "light": {
433
+ "$type": "color",
434
+ "$value": "{background.color.strong}"
435
+ },
436
+ "dark": {
437
+ "$type": "color",
438
+ "$value": "{background.color.strong}"
439
+ }
440
+ },
441
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
442
+ }
443
+ },
444
+ "color-hover": {
445
+ "$type": "color",
446
+ "$value": "{background.color.strong-hover}",
447
+ "$extensions": {
448
+ "appearance": {
449
+ "light": {
450
+ "$type": "color",
451
+ "$value": "{background.color.strong-hover}"
452
+ },
453
+ "dark": {
454
+ "$type": "color",
455
+ "$value": "{background.color.strong-hover}"
456
+ }
457
+ },
458
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
459
+ }
460
+ },
461
+ "color-active": {
462
+ "$type": "color",
463
+ "$value": "{background.color.strong-active}",
464
+ "$extensions": {
465
+ "appearance": {
466
+ "light": {
467
+ "$type": "color",
468
+ "$value": "{background.color.strong-active}"
469
+ },
470
+ "dark": {
471
+ "$type": "color",
472
+ "$value": "{background.color.strong-active}"
473
+ }
474
+ },
475
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
476
+ }
477
+ }
478
+ }
479
+ },
480
+ "stronger": {
481
+ "background": {
482
+ "color": {
483
+ "$type": "color",
484
+ "$value": "{background.color.stronger}",
485
+ "$extensions": {
486
+ "appearance": {
487
+ "light": {
488
+ "$type": "color",
489
+ "$value": "{background.color.stronger}"
490
+ },
491
+ "dark": {
492
+ "$type": "color",
493
+ "$value": "{background.color.stronger}"
494
+ }
495
+ },
496
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
497
+ }
498
+ },
499
+ "color-hover": {
500
+ "$type": "color",
501
+ "$value": "{background.color.stronger-hover}",
502
+ "$extensions": {
503
+ "appearance": {
504
+ "light": {
505
+ "$type": "color",
506
+ "$value": "{background.color.stronger-hover}"
507
+ },
508
+ "dark": {
509
+ "$type": "color",
510
+ "$value": "{background.color.stronger-hover}"
511
+ }
512
+ },
513
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
514
+ }
515
+ },
516
+ "color-active": {
517
+ "$type": "color",
518
+ "$value": "{background.color.stronger-active}",
519
+ "$extensions": {
520
+ "appearance": {
521
+ "light": {
522
+ "$type": "color",
523
+ "$value": "{background.color.stronger-active}"
524
+ },
525
+ "dark": {
526
+ "$type": "color",
527
+ "$value": "{background.color.stronger-active}"
528
+ }
529
+ },
530
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
531
+ }
532
+ }
533
+ }
534
+ },
535
+ "icon": {
536
+ "color": {
537
+ "$type": "color",
538
+ "$value": "{foreground.color.primary}",
539
+ "$extensions": {
540
+ "appearance": {
541
+ "light": {
542
+ "$type": "color",
543
+ "$value": "{foreground.color.primary}"
544
+ },
545
+ "dark": {
546
+ "$type": "color",
547
+ "$value": "{foreground.color.primary}"
548
+ }
549
+ },
550
+ "com.figma.scopes": ["SHAPE_FILL"]
551
+ }
552
+ },
553
+ "color-disabled": {
554
+ "$type": "color",
555
+ "$value": "{foreground.color.subdued}",
556
+ "$extensions": {
557
+ "appearance": {
558
+ "light": {
559
+ "$type": "color",
560
+ "$value": "{foreground.color.subdued}"
561
+ },
562
+ "dark": {
563
+ "$type": "color",
564
+ "$value": "{foreground.color.subdued}"
565
+ }
566
+ },
567
+ "com.figma.scopes": ["SHAPE_FILL"]
568
+ }
569
+ }
570
+ },
571
+ "border": {
572
+ "color": {
573
+ "$type": "color",
574
+ "$value": "{border.color.strong}",
575
+ "$extensions": {
576
+ "appearance": {
577
+ "light": {
578
+ "$type": "color",
579
+ "$value": "{border.color.strong}"
580
+ },
581
+ "dark": {
582
+ "$type": "color",
583
+ "$value": "{border.color.strong}"
584
+ }
585
+ },
586
+ "com.figma.scopes": ["STROKE_COLOR", "SHAPE_FILL", "FRAME_FILL"]
587
+ }
588
+ }
589
+ },
590
+ "focus-ring": {
591
+ "color": {
592
+ "$type": "color",
593
+ "$value": "{focus.ring.color.default}",
594
+ "$extensions": {
595
+ "appearance": {
596
+ "light": {
597
+ "$type": "color",
598
+ "$value": "{focus.ring.color.default}"
599
+ },
600
+ "dark": {
601
+ "$type": "color",
602
+ "$value": "{focus.ring.color.default}"
603
+ }
604
+ },
605
+ "com.figma.scopes": ["STROKE_COLOR"]
606
+ }
607
+ }
608
+ },
609
+ "shadow": {
610
+ "color": {
611
+ "$type": "color",
612
+ "$value": "{shadow.color.default}",
613
+ "$extensions": {
614
+ "appearance": {
615
+ "light": {
616
+ "$type": "color",
617
+ "$value": "{shadow.color.default}"
618
+ },
619
+ "dark": {
620
+ "$type": "color",
621
+ "$value": "{shadow.color.default}"
622
+ }
623
+ },
624
+ "com.figma.scopes": ["EFFECT_COLOR", "FRAME_FILL", "SHAPE_FILL"]
625
+ }
626
+ }
627
+ }
628
+ },
629
+ "checked-error": {
630
+ "foreground": {
631
+ "color": {
632
+ "$type": "color",
633
+ "$value": "{foreground.color.primary}",
634
+ "$extensions": {
635
+ "appearance": {
636
+ "light": {
637
+ "$type": "color",
638
+ "$value": "{foreground.color.primary}"
639
+ },
640
+ "dark": {
641
+ "$type": "color",
642
+ "$value": "{foreground.color.primary}"
643
+ }
644
+ },
645
+ "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
646
+ }
647
+ },
648
+ "color-hover": {
649
+ "$type": "color",
650
+ "$value": "{foreground.color.primary-hover}",
651
+ "$extensions": {
652
+ "appearance": {
653
+ "light": {
654
+ "$type": "color",
655
+ "$value": "{foreground.color.primary-hover}"
656
+ },
657
+ "dark": {
658
+ "$type": "color",
659
+ "$value": "{foreground.color.primary-hover}"
660
+ }
661
+ },
662
+ "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
663
+ }
664
+ },
665
+ "color-active": {
666
+ "$type": "color",
667
+ "$value": "{foreground.color.primary-active}",
668
+ "$extensions": {
669
+ "appearance": {
670
+ "light": {
671
+ "$type": "color",
672
+ "$value": "{foreground.color.primary-active}"
673
+ },
674
+ "dark": {
675
+ "$type": "color",
676
+ "$value": "{foreground.color.primary-active}"
677
+ }
678
+ },
679
+ "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
680
+ }
681
+ }
682
+ },
683
+ "default": {
684
+ "background": {
685
+ "color": {
686
+ "$type": "color",
687
+ "$value": "{background.color.default}",
688
+ "$extensions": {
689
+ "appearance": {
690
+ "light": {
691
+ "$type": "color",
692
+ "$value": "{background.color.default}"
693
+ },
694
+ "dark": {
695
+ "$type": "color",
696
+ "$value": "{background.color.default}"
697
+ }
698
+ },
699
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
700
+ }
701
+ },
702
+ "color-hover": {
703
+ "$type": "color",
704
+ "$value": "{background.color.default-hover}",
705
+ "$extensions": {
706
+ "appearance": {
707
+ "light": {
708
+ "$type": "color",
709
+ "$value": "{background.color.default-hover}"
710
+ },
711
+ "dark": {
712
+ "$type": "color",
713
+ "$value": "{background.color.default-hover}"
714
+ }
715
+ },
716
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
717
+ }
718
+ },
719
+ "color-active": {
720
+ "$type": "color",
721
+ "$value": "{background.color.default-active}",
722
+ "$extensions": {
723
+ "appearance": {
724
+ "light": {
725
+ "$type": "color",
726
+ "$value": "{background.color.default-active}"
727
+ },
728
+ "dark": {
729
+ "$type": "color",
730
+ "$value": "{background.color.default-active}"
731
+ }
732
+ },
733
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
734
+ }
735
+ }
736
+ }
737
+ },
738
+ "strong": {
739
+ "background": {
740
+ "color": {
741
+ "$type": "color",
742
+ "$value": "{background.color.strong}",
743
+ "$extensions": {
744
+ "appearance": {
745
+ "light": {
746
+ "$type": "color",
747
+ "$value": "{background.color.strong}"
748
+ },
749
+ "dark": {
750
+ "$type": "color",
751
+ "$value": "{background.color.strong}"
752
+ }
753
+ },
754
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
755
+ }
756
+ },
757
+ "color-hover": {
758
+ "$type": "color",
759
+ "$value": "{background.color.strong-hover}",
760
+ "$extensions": {
761
+ "appearance": {
762
+ "light": {
763
+ "$type": "color",
764
+ "$value": "{background.color.strong-hover}"
765
+ },
766
+ "dark": {
767
+ "$type": "color",
768
+ "$value": "{background.color.strong-hover}"
769
+ }
770
+ },
771
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
772
+ }
773
+ },
774
+ "color-active": {
775
+ "$type": "color",
776
+ "$value": "{background.color.strong-active}",
777
+ "$extensions": {
778
+ "appearance": {
779
+ "light": {
780
+ "$type": "color",
781
+ "$value": "{background.color.strong-active}"
782
+ },
783
+ "dark": {
784
+ "$type": "color",
785
+ "$value": "{background.color.strong-active}"
786
+ }
787
+ },
788
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
789
+ }
790
+ }
791
+ }
792
+ },
793
+ "stronger": {
794
+ "background": {
795
+ "color": {
796
+ "$type": "color",
797
+ "$value": "{background.color.stronger}",
798
+ "$extensions": {
799
+ "appearance": {
800
+ "light": {
801
+ "$type": "color",
802
+ "$value": "{background.color.stronger}"
803
+ },
804
+ "dark": {
805
+ "$type": "color",
806
+ "$value": "{background.color.stronger}"
807
+ }
808
+ },
809
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
810
+ }
811
+ },
812
+ "color-hover": {
813
+ "$type": "color",
814
+ "$value": "{background.color.stronger-hover}",
815
+ "$extensions": {
816
+ "appearance": {
817
+ "light": {
818
+ "$type": "color",
819
+ "$value": "{background.color.stronger-hover}"
820
+ },
821
+ "dark": {
822
+ "$type": "color",
823
+ "$value": "{background.color.stronger-hover}"
824
+ }
825
+ },
826
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
827
+ }
828
+ },
829
+ "color-active": {
830
+ "$type": "color",
831
+ "$value": "{background.color.stronger-active}",
832
+ "$extensions": {
833
+ "appearance": {
834
+ "light": {
835
+ "$type": "color",
836
+ "$value": "{background.color.stronger-active}"
837
+ },
838
+ "dark": {
839
+ "$type": "color",
840
+ "$value": "{background.color.stronger-active}"
841
+ }
842
+ },
843
+ "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
844
+ }
845
+ }
846
+ }
847
+ },
848
+ "icon": {
849
+ "color": {
850
+ "$type": "color",
851
+ "$value": "{foreground.color.danger}",
852
+ "$extensions": {
853
+ "appearance": {
854
+ "light": {
855
+ "$type": "color",
856
+ "$value": "{foreground.color.danger}"
857
+ },
858
+ "dark": {
859
+ "$type": "color",
860
+ "$value": "{foreground.color.danger}"
861
+ }
862
+ },
863
+ "com.figma.scopes": ["SHAPE_FILL"]
864
+ }
865
+ },
866
+ "color-disabled": {
867
+ "$type": "color",
868
+ "$value": "{foreground.color.subdued}",
869
+ "$extensions": {
870
+ "appearance": {
871
+ "light": {
872
+ "$type": "color",
873
+ "$value": "{foreground.color.subdued}"
874
+ },
875
+ "dark": {
876
+ "$type": "color",
877
+ "$value": "{foreground.color.subdued}"
878
+ }
879
+ },
880
+ "com.figma.scopes": ["SHAPE_FILL"]
881
+ }
882
+ }
883
+ },
884
+ "border": {
885
+ "color": {
886
+ "$type": "color",
887
+ "$value": "{border.color.danger}",
888
+ "$extensions": {
889
+ "appearance": {
890
+ "light": {
891
+ "$type": "color",
892
+ "$value": "{border.color.danger}"
893
+ },
894
+ "dark": {
895
+ "$type": "color",
896
+ "$value": "{border.color.danger}"
897
+ }
898
+ },
899
+ "com.figma.scopes": ["STROKE_COLOR", "SHAPE_FILL", "FRAME_FILL"]
900
+ }
901
+ }
902
+ },
903
+ "focus-ring": {
904
+ "color": {
905
+ "$type": "color",
906
+ "$value": "{focus.ring.color.danger}",
907
+ "$extensions": {
908
+ "appearance": {
909
+ "light": {
910
+ "$type": "color",
911
+ "$value": "{focus.ring.color.danger}"
912
+ },
913
+ "dark": {
914
+ "$type": "color",
915
+ "$value": "{focus.ring.color.danger}"
916
+ }
917
+ },
918
+ "com.figma.scopes": ["STROKE_COLOR"]
919
+ }
920
+ }
921
+ },
922
+ "shadow": {
923
+ "color": {
924
+ "$type": "color",
925
+ "$value": "{shadow.color.default}",
926
+ "$extensions": {
927
+ "appearance": {
928
+ "light": {
929
+ "$type": "color",
930
+ "$value": "{shadow.color.default}"
931
+ },
932
+ "dark": {
933
+ "$type": "color",
934
+ "$value": "{shadow.color.default}"
935
+ }
936
+ },
937
+ "com.figma.scopes": ["EFFECT_COLOR", "FRAME_FILL", "SHAPE_FILL"]
938
+ }
939
+ }
940
+ }
941
+ }
942
+ }
943
+ }