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