@gitlab/ui 115.0.0 → 115.1.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 (127) hide show
  1. package/bin/migrate_custom_utils_to_tw.bundled.mjs +172489 -139144
  2. package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js +15 -3
  3. package/dist/components/base/new_dropdowns/constants.js +5 -2
  4. package/dist/components/dashboards/dashboard_layout/grid_layout/grid_layout.js +286 -0
  5. package/dist/components/dashboards/mock_data.js +49 -0
  6. package/dist/index.css +2 -2
  7. package/dist/index.css.map +1 -1
  8. package/dist/tailwind.css +1 -1
  9. package/dist/tailwind.css.map +1 -1
  10. package/dist/tokens/docs/tokens-tailwind-docs.dark.json +7986 -0
  11. package/dist/tokens/docs/tokens-tailwind-docs.json +7986 -0
  12. package/dist/tokens/figma/constants.tokens.json +944 -236
  13. package/dist/tokens/figma/contextual.tokens.json +2721 -418
  14. package/dist/tokens/figma/deprecated.tokens.json +664 -8
  15. package/dist/tokens/figma/semantic.tokens.json +1130 -169
  16. package/dist/tokens/js/tokens.dark.js +1089 -1047
  17. package/dist/tokens/js/tokens.js +1078 -1047
  18. package/dist/tokens/json/tokens.dark.json +9267 -3
  19. package/dist/tokens/json/tokens.json +9267 -3
  20. package/dist/tokens/tailwind/tokens.cjs +76 -407
  21. package/package.json +22 -49
  22. package/src/components/base/accordion/accordion_item.vue +1 -1
  23. package/src/components/base/avatar/avatar.vue +1 -1
  24. package/src/components/base/button/button.vue +1 -1
  25. package/src/components/base/dropdown/dropdown.vue +3 -1
  26. package/src/components/base/filtered_search/filtered_search.vue +1 -1
  27. package/src/components/base/filtered_search/filtered_search_suggestion_list.vue +1 -1
  28. package/src/components/base/filtered_search/filtered_search_token.vue +1 -1
  29. package/src/components/base/filtered_search/filtered_search_token_segment.vue +3 -3
  30. package/src/components/base/form/form_checkbox_tree/models/tree.js +1 -1
  31. package/src/components/base/form/form_date/form_date.vue +1 -1
  32. package/src/components/base/form/form_input/form_input.vue +1 -1
  33. package/src/components/base/form/form_select/form_select.vue +1 -1
  34. package/src/components/base/modal/modal.vue +2 -2
  35. package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue +23 -6
  36. package/src/components/base/new_dropdowns/constants.js +4 -1
  37. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md +1 -2
  38. package/src/components/base/new_dropdowns/listbox/listbox.vue +7 -7
  39. package/src/components/base/pagination/pagination.vue +2 -2
  40. package/src/components/base/path/path.vue +1 -1
  41. package/src/components/base/skeleton_loader/skeleton_loader.vue +9 -9
  42. package/src/components/base/table/table.md +1 -2
  43. package/src/components/base/table_lite/table_lite.md +1 -1
  44. package/src/components/base/tabs/tabs/tabs.vue +1 -1
  45. package/src/components/base/toast/toast.js +2 -2
  46. package/src/components/base/token_selector/token_container.vue +1 -1
  47. package/src/components/base/token_selector/token_selector.vue +2 -2
  48. package/src/components/base/token_selector/token_selector_dropdown.vue +1 -1
  49. package/src/components/charts/area/area.vue +3 -3
  50. package/src/components/charts/bar/bar.vue +2 -2
  51. package/src/components/charts/column/column.vue +2 -2
  52. package/src/components/charts/discrete_scatter/discrete_scatter.vue +2 -2
  53. package/src/components/charts/gauge/gauge.vue +1 -1
  54. package/src/components/charts/heatmap/heatmap.vue +2 -2
  55. package/src/components/charts/heatmap/index.js +1 -0
  56. package/src/components/charts/legend/legend.vue +1 -1
  57. package/src/components/charts/line/line.vue +3 -3
  58. package/src/components/charts/sparkline/sparkline.vue +1 -1
  59. package/src/components/charts/stacked_column/stacked_column.vue +1 -1
  60. package/src/components/dashboards/dashboard_layout/grid_layout/grid_layout.scss +1 -0
  61. package/src/components/dashboards/dashboard_layout/grid_layout/grid_layout.vue +247 -0
  62. package/src/components/dashboards/mock_data.js +40 -0
  63. package/src/components/mixins/tooltip_mixin.js +1 -1
  64. package/src/components/utilities/intersection_observer/intersection_observer.vue +1 -1
  65. package/src/components/utilities/intersperse/intersperse.vue +2 -2
  66. package/src/components/utilities/sprintf/sprintf.md +1 -1
  67. package/src/components/utilities/sprintf/sprintf.vue +1 -1
  68. package/src/components/utilities/truncate/truncate.vue +2 -2
  69. package/src/config.js +1 -1
  70. package/src/directives/outside/outside.js +4 -4
  71. package/src/directives/tooltip/tooltip.js +1 -1
  72. package/src/scss/components.scss +1 -0
  73. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +7986 -0
  74. package/src/tokens/build/docs/tokens-tailwind-docs.json +7986 -0
  75. package/src/tokens/build/figma/constants.tokens.json +944 -236
  76. package/src/tokens/build/figma/contextual.tokens.json +2721 -418
  77. package/src/tokens/build/figma/deprecated.tokens.json +664 -8
  78. package/src/tokens/build/figma/semantic.tokens.json +1130 -169
  79. package/src/tokens/build/json/tokens.dark.json +9267 -3
  80. package/src/tokens/build/json/tokens.json +9267 -3
  81. package/src/tokens/constant/color.alpha.tokens.json +60 -15
  82. package/src/tokens/constant/color.tokens.json +844 -211
  83. package/src/tokens/constant/line_height.tokens.json +40 -10
  84. package/src/tokens/contextual/alert.tokens.json +119 -19
  85. package/src/tokens/contextual/avatar.tokens.json +90 -14
  86. package/src/tokens/contextual/badge.tokens.json +728 -112
  87. package/src/tokens/contextual/banner.tokens.json +19 -3
  88. package/src/tokens/contextual/breadcrumb.tokens.json +6 -1
  89. package/src/tokens/contextual/broadcast.tokens.json +301 -81
  90. package/src/tokens/contextual/button.tokens.json +793 -120
  91. package/src/tokens/contextual/chart.tokens.json +42 -7
  92. package/src/tokens/contextual/datepicker.tokens.json +13 -2
  93. package/src/tokens/contextual/dropdown.tokens.json +142 -21
  94. package/src/tokens/contextual/filtered-search.tokens.json +42 -6
  95. package/src/tokens/contextual/illustration.tokens.json +195 -33
  96. package/src/tokens/contextual/label.tokens.json +81 -12
  97. package/src/tokens/contextual/link.tokens.json +26 -4
  98. package/src/tokens/contextual/progress-bar.tokens.json +35 -5
  99. package/src/tokens/contextual/skeleton-loader.tokens.json +12 -2
  100. package/src/tokens/contextual/spinner.tokens.json +24 -4
  101. package/src/tokens/contextual/table.tokens.json +14 -2
  102. package/src/tokens/contextual/tabs.tokens.json +7 -1
  103. package/src/tokens/contextual/toggle.tokens.json +54 -9
  104. package/src/tokens/contextual/token-selector.tokens.json +7 -1
  105. package/src/tokens/contextual/token.tokens.json +14 -2
  106. package/src/tokens/deprecated/deprecated.color.data_viz.tokens.json +165 -0
  107. package/src/tokens/deprecated/deprecated.color.theme.tokens.json +216 -0
  108. package/src/tokens/deprecated/deprecated.color.tokens.json +240 -0
  109. package/src/tokens/deprecated/deprecated.color.transparency.tokens.json +39 -0
  110. package/src/tokens/semantic/action.tokens.json +500 -75
  111. package/src/tokens/semantic/background.tokens.json +49 -7
  112. package/src/tokens/semantic/border.tokens.json +30 -5
  113. package/src/tokens/semantic/control.tokens.json +129 -20
  114. package/src/tokens/semantic/feedback.tokens.json +126 -19
  115. package/src/tokens/semantic/focus-ring.tokens.json +12 -2
  116. package/src/tokens/semantic/highlight.tokens.json +26 -4
  117. package/src/tokens/semantic/icon.tokens.json +63 -9
  118. package/src/tokens/semantic/shadow.tokens.json +6 -1
  119. package/src/tokens/semantic/status.tokens.json +120 -18
  120. package/src/tokens/semantic/text.tokens.json +69 -9
  121. package/src/tokens/tokens_tailwind_table.vue +1 -1
  122. package/src/utils/charts/config.js +7 -7
  123. package/src/utils/charts/utils.js +1 -1
  124. package/src/utils/use_mock_intersection_observer.js +1 -1
  125. package/src/utils/utils.js +1 -1
  126. package/tailwind.defaults.js +1 -1
  127. package/translations.js +2 -2
package/src/tokens/semantic/action.tokens.json CHANGED
@@ -8,7 +8,13 @@
8
8
  "dark": "{color.neutral.500}"
9
9
  },
10
10
  "$type": "color",
11
- "$description": "Used for the foreground of a disabled action."
11
+ "$description": "Used for the foreground of a disabled action.",
12
+ "$extensions": {
13
+ "com.figma.scope": [
14
+ "SHAPE_FILL",
15
+ "TEXT_FILL"
16
+ ]
17
+ }
12
18
  }
13
19
  },
14
20
  "background": {
@@ -18,7 +24,13 @@
18
24
  "dark": "{color.neutral.900}"
19
25
  },
20
26
  "$type": "color",
21
- "$description": "Used for the background of a disabled action."
27
+ "$description": "Used for the background of a disabled action.",
28
+ "$extensions": {
29
+ "com.figma.scope": [
30
+ "FRAME_FILL",
31
+ "SHAPE_FILL"
32
+ ]
33
+ }
22
34
  }
23
35
  },
24
36
  "border": {
@@ -28,7 +40,12 @@
28
40
  "dark": "{color.neutral.800}"
29
41
  },
30
42
  "$type": "color",
31
- "$description": "Used for the border of a disabled action."
43
+ "$description": "Used for the border of a disabled action.",
44
+ "$extensions": {
45
+ "com.figma.scope": [
46
+ "STROKE_COLOR"
47
+ ]
48
+ }
32
49
  }
33
50
  }
34
51
  },
@@ -41,22 +58,46 @@
41
58
  "dark": "{color.neutral.950}"
42
59
  },
43
60
  "$type": "color",
44
- "$description": "Used for the foreground of a selected action in the default state."
61
+ "$description": "Used for the foreground of a selected action in the default state.",
62
+ "$extensions": {
63
+ "com.figma.scope": [
64
+ "SHAPE_FILL",
65
+ "TEXT_FILL"
66
+ ]
67
+ }
45
68
  },
46
69
  "hover": {
47
70
  "$value": "{action.selected.foreground.color.default}",
48
71
  "$type": "color",
49
- "$description": "Used for the foreground of a selected action in the hover state."
72
+ "$description": "Used for the foreground of a selected action in the hover state.",
73
+ "$extensions": {
74
+ "com.figma.scope": [
75
+ "SHAPE_FILL",
76
+ "TEXT_FILL"
77
+ ]
78
+ }
50
79
  },
51
80
  "focus": {
52
81
  "$value": "{action.selected.foreground.color.hover}",
53
82
  "$type": "color",
54
- "$description": "Used for the foreground of a selected action in the focus state."
83
+ "$description": "Used for the foreground of a selected action in the focus state.",
84
+ "$extensions": {
85
+ "com.figma.scope": [
86
+ "SHAPE_FILL",
87
+ "TEXT_FILL"
88
+ ]
89
+ }
55
90
  },
56
91
  "active": {
57
92
  "$value": "{action.selected.foreground.color.focus}",
58
93
  "$type": "color",
59
- "$description": "Used for the foreground of a selected action in the active state."
94
+ "$description": "Used for the foreground of a selected action in the active state.",
95
+ "$extensions": {
96
+ "com.figma.scope": [
97
+ "SHAPE_FILL",
98
+ "TEXT_FILL"
99
+ ]
100
+ }
60
101
  }
61
102
  }
62
103
  },
@@ -68,7 +109,13 @@
68
109
  "dark": "{color.blue.300}"
69
110
  },
70
111
  "$type": "color",
71
- "$description": "Used for the background of a selected action in the default state."
112
+ "$description": "Used for the background of a selected action in the default state.",
113
+ "$extensions": {
114
+ "com.figma.scope": [
115
+ "FRAME_FILL",
116
+ "SHAPE_FILL"
117
+ ]
118
+ }
72
119
  },
73
120
  "hover": {
74
121
  "$value": {
@@ -76,12 +123,24 @@
76
123
  "dark": "{color.blue.200}"
77
124
  },
78
125
  "$type": "color",
79
- "$description": "Used for the background of a selected action in the hover state."
126
+ "$description": "Used for the background of a selected action in the hover state.",
127
+ "$extensions": {
128
+ "com.figma.scope": [
129
+ "FRAME_FILL",
130
+ "SHAPE_FILL"
131
+ ]
132
+ }
80
133
  },
81
134
  "focus": {
82
135
  "$value": "{action.selected.background.color.hover}",
83
136
  "$type": "color",
84
- "$description": "Used for the background of a selected action in the focus state."
137
+ "$description": "Used for the background of a selected action in the focus state.",
138
+ "$extensions": {
139
+ "com.figma.scope": [
140
+ "FRAME_FILL",
141
+ "SHAPE_FILL"
142
+ ]
143
+ }
85
144
  },
86
145
  "active": {
87
146
  "$value": {
@@ -89,7 +148,13 @@
89
148
  "dark": "{color.blue.100}"
90
149
  },
91
150
  "$type": "color",
92
- "$description": "Used for the background of a selected action in the active state."
151
+ "$description": "Used for the background of a selected action in the active state.",
152
+ "$extensions": {
153
+ "com.figma.scope": [
154
+ "FRAME_FILL",
155
+ "SHAPE_FILL"
156
+ ]
157
+ }
93
158
  }
94
159
  }
95
160
  },
@@ -98,22 +163,42 @@
98
163
  "default": {
99
164
  "$value": "{action.selected.background.color.default}",
100
165
  "$type": "color",
101
- "$description": "Used for the border of a selected action in the default state."
166
+ "$description": "Used for the border of a selected action in the default state.",
167
+ "$extensions": {
168
+ "com.figma.scope": [
169
+ "STROKE_COLOR"
170
+ ]
171
+ }
102
172
  },
103
173
  "hover": {
104
174
  "$value": "{action.selected.background.color.hover}",
105
175
  "$type": "color",
106
- "$description": "Used for the border of a selected action in the hover state."
176
+ "$description": "Used for the border of a selected action in the hover state.",
177
+ "$extensions": {
178
+ "com.figma.scope": [
179
+ "STROKE_COLOR"
180
+ ]
181
+ }
107
182
  },
108
183
  "focus": {
109
184
  "$value": "{action.selected.background.color.focus}",
110
185
  "$type": "color",
111
- "$description": "Used for the border of a selected action in the focus state."
186
+ "$description": "Used for the border of a selected action in the focus state.",
187
+ "$extensions": {
188
+ "com.figma.scope": [
189
+ "STROKE_COLOR"
190
+ ]
191
+ }
112
192
  },
113
193
  "active": {
114
194
  "$value": "{action.selected.background.color.active}",
115
195
  "$type": "color",
116
- "$description": "Used for the border of a selected action in the active state."
196
+ "$description": "Used for the border of a selected action in the active state.",
197
+ "$extensions": {
198
+ "com.figma.scope": [
199
+ "STROKE_COLOR"
200
+ ]
201
+ }
117
202
  }
118
203
  }
119
204
  }
@@ -127,22 +212,46 @@
127
212
  "dark": "{color.neutral.50}"
128
213
  },
129
214
  "$type": "color",
130
- "$description": "Used for the foreground of a neutral action in the default state."
215
+ "$description": "Used for the foreground of a neutral action in the default state.",
216
+ "$extensions": {
217
+ "com.figma.scope": [
218
+ "SHAPE_FILL",
219
+ "TEXT_FILL"
220
+ ]
221
+ }
131
222
  },
132
223
  "hover": {
133
224
  "$value": "{action.neutral.foreground.color.default}",
134
225
  "$type": "color",
135
- "$description": "Used for the foreground of a neutral action in the hover state."
226
+ "$description": "Used for the foreground of a neutral action in the hover state.",
227
+ "$extensions": {
228
+ "com.figma.scope": [
229
+ "SHAPE_FILL",
230
+ "TEXT_FILL"
231
+ ]
232
+ }
136
233
  },
137
234
  "focus": {
138
235
  "$value": "{action.neutral.foreground.color.default}",
139
236
  "$type": "color",
140
- "$description": "Used for the foreground of a neutral action in the focus state."
237
+ "$description": "Used for the foreground of a neutral action in the focus state.",
238
+ "$extensions": {
239
+ "com.figma.scope": [
240
+ "SHAPE_FILL",
241
+ "TEXT_FILL"
242
+ ]
243
+ }
141
244
  },
142
245
  "active": {
143
246
  "$value": "{action.neutral.foreground.color.default}",
144
247
  "$type": "color",
145
- "$description": "Used for the foreground of a neutral action in the active state."
248
+ "$description": "Used for the foreground of a neutral action in the active state.",
249
+ "$extensions": {
250
+ "com.figma.scope": [
251
+ "SHAPE_FILL",
252
+ "TEXT_FILL"
253
+ ]
254
+ }
146
255
  }
147
256
  }
148
257
  },
@@ -154,7 +263,13 @@
154
263
  "dark": "rgba(137, 136, 141, 0.0)"
155
264
  },
156
265
  "$type": "color",
157
- "$description": "Used for the background of a neutral action in the default state."
266
+ "$description": "Used for the background of a neutral action in the default state.",
267
+ "$extensions": {
268
+ "com.figma.scope": [
269
+ "FRAME_FILL",
270
+ "SHAPE_FILL"
271
+ ]
272
+ }
158
273
  },
159
274
  "hover": {
160
275
  "$value": {
@@ -162,12 +277,24 @@
162
277
  "dark": "rgba(137, 136, 141, 0.4)"
163
278
  },
164
279
  "$type": "color",
165
- "$description": "Used for the background of a neutral action in the hover state."
280
+ "$description": "Used for the background of a neutral action in the hover state.",
281
+ "$extensions": {
282
+ "com.figma.scope": [
283
+ "FRAME_FILL",
284
+ "SHAPE_FILL"
285
+ ]
286
+ }
166
287
  },
167
288
  "focus": {
168
289
  "$value": "{action.neutral.background.color.hover}",
169
290
  "$type": "color",
170
- "$description": "Used for the background of a neutral action in the focus state."
291
+ "$description": "Used for the background of a neutral action in the focus state.",
292
+ "$extensions": {
293
+ "com.figma.scope": [
294
+ "FRAME_FILL",
295
+ "SHAPE_FILL"
296
+ ]
297
+ }
171
298
  },
172
299
  "active": {
173
300
  "$value": {
@@ -175,7 +302,13 @@
175
302
  "dark": "rgba(137, 136, 141, 0.16)"
176
303
  },
177
304
  "$type": "color",
178
- "$description": "Used for the background of a neutral action in the active state."
305
+ "$description": "Used for the background of a neutral action in the active state.",
306
+ "$extensions": {
307
+ "com.figma.scope": [
308
+ "FRAME_FILL",
309
+ "SHAPE_FILL"
310
+ ]
311
+ }
179
312
  }
180
313
  }
181
314
  },
@@ -184,22 +317,42 @@
184
317
  "default": {
185
318
  "$value": "{color.alpha.0}",
186
319
  "$type": "color",
187
- "$description": "Used for the border of a neutral action in the default state."
320
+ "$description": "Used for the border of a neutral action in the default state.",
321
+ "$extensions": {
322
+ "com.figma.scope": [
323
+ "STROKE_COLOR"
324
+ ]
325
+ }
188
326
  },
189
327
  "hover": {
190
328
  "$value": "{action.neutral.border.color.default}",
191
329
  "$type": "color",
192
- "$description": "Used for the border of a neutral action in the hover state."
330
+ "$description": "Used for the border of a neutral action in the hover state.",
331
+ "$extensions": {
332
+ "com.figma.scope": [
333
+ "STROKE_COLOR"
334
+ ]
335
+ }
193
336
  },
194
337
  "focus": {
195
338
  "$value": "{action.neutral.border.color.default}",
196
339
  "$type": "color",
197
- "$description": "Used for the border of a neutral action in the focus state."
340
+ "$description": "Used for the border of a neutral action in the focus state.",
341
+ "$extensions": {
342
+ "com.figma.scope": [
343
+ "STROKE_COLOR"
344
+ ]
345
+ }
198
346
  },
199
347
  "active": {
200
348
  "$value": "{action.neutral.border.color.default}",
201
349
  "$type": "color",
202
- "$description": "Used for the border of a neutral action in the active state."
350
+ "$description": "Used for the border of a neutral action in the active state.",
351
+ "$extensions": {
352
+ "com.figma.scope": [
353
+ "STROKE_COLOR"
354
+ ]
355
+ }
203
356
  }
204
357
  }
205
358
  }
@@ -213,7 +366,13 @@
213
366
  "dark": "{color.blue.200}"
214
367
  },
215
368
  "$type": "color",
216
- "$description": "Used for the foreground of a confirm (positive) action in the default state."
369
+ "$description": "Used for the foreground of a confirm (positive) action in the default state.",
370
+ "$extensions": {
371
+ "com.figma.scope": [
372
+ "SHAPE_FILL",
373
+ "TEXT_FILL"
374
+ ]
375
+ }
217
376
  },
218
377
  "hover": {
219
378
  "$value": {
@@ -221,12 +380,24 @@
221
380
  "dark": "{color.blue.100}"
222
381
  },
223
382
  "$type": "color",
224
- "$description": "Used for the foreground of a confirm (positive) action in the hover state."
383
+ "$description": "Used for the foreground of a confirm (positive) action in the hover state.",
384
+ "$extensions": {
385
+ "com.figma.scope": [
386
+ "SHAPE_FILL",
387
+ "TEXT_FILL"
388
+ ]
389
+ }
225
390
  },
226
391
  "focus": {
227
392
  "$value": "{action.confirm.foreground.color.hover}",
228
393
  "$type": "color",
229
- "$description": "Used for the foreground of a confirm (positive) action in the focus state."
394
+ "$description": "Used for the foreground of a confirm (positive) action in the focus state.",
395
+ "$extensions": {
396
+ "com.figma.scope": [
397
+ "SHAPE_FILL",
398
+ "TEXT_FILL"
399
+ ]
400
+ }
230
401
  },
231
402
  "active": {
232
403
  "$value": {
@@ -234,7 +405,13 @@
234
405
  "dark": "{color.blue.100}"
235
406
  },
236
407
  "$type": "color",
237
- "$description": "Used for the foreground of a confirm (positive) action in the active state."
408
+ "$description": "Used for the foreground of a confirm (positive) action in the active state.",
409
+ "$extensions": {
410
+ "com.figma.scope": [
411
+ "SHAPE_FILL",
412
+ "TEXT_FILL"
413
+ ]
414
+ }
238
415
  }
239
416
  }
240
417
  },
@@ -246,7 +423,13 @@
246
423
  "dark": "rgba(66, 143, 220, 0.0)"
247
424
  },
248
425
  "$type": "color",
249
- "$description": "Used for the background of a confirm (positive) action in the default state."
426
+ "$description": "Used for the background of a confirm (positive) action in the default state.",
427
+ "$extensions": {
428
+ "com.figma.scope": [
429
+ "FRAME_FILL",
430
+ "SHAPE_FILL"
431
+ ]
432
+ }
250
433
  },
251
434
  "hover": {
252
435
  "$value": {
@@ -254,12 +437,24 @@
254
437
  "dark": "rgba(66, 143, 220, 0.4)"
255
438
  },
256
439
  "$type": "color",
257
- "$description": "Used for the background of a confirm (positive) action in the hover state."
440
+ "$description": "Used for the background of a confirm (positive) action in the hover state.",
441
+ "$extensions": {
442
+ "com.figma.scope": [
443
+ "FRAME_FILL",
444
+ "SHAPE_FILL"
445
+ ]
446
+ }
258
447
  },
259
448
  "focus": {
260
449
  "$value": "{action.confirm.background.color.hover}",
261
450
  "$type": "color",
262
- "$description": "Used for the background of a confirm (positive) action in the focus state."
451
+ "$description": "Used for the background of a confirm (positive) action in the focus state.",
452
+ "$extensions": {
453
+ "com.figma.scope": [
454
+ "FRAME_FILL",
455
+ "SHAPE_FILL"
456
+ ]
457
+ }
263
458
  },
264
459
  "active": {
265
460
  "$value": {
@@ -267,7 +462,13 @@
267
462
  "dark": "rgba(66, 143, 220, 0.16)"
268
463
  },
269
464
  "$type": "color",
270
- "$description": "Used for the background of a confirm (positive) action in the active state."
465
+ "$description": "Used for the background of a confirm (positive) action in the active state.",
466
+ "$extensions": {
467
+ "com.figma.scope": [
468
+ "FRAME_FILL",
469
+ "SHAPE_FILL"
470
+ ]
471
+ }
271
472
  }
272
473
  }
273
474
  },
@@ -276,22 +477,42 @@
276
477
  "default": {
277
478
  "$value": "{color.alpha.0}",
278
479
  "$type": "color",
279
- "$description": "Used for the border of a confirm action in the default state."
480
+ "$description": "Used for the border of a confirm action in the default state.",
481
+ "$extensions": {
482
+ "com.figma.scope": [
483
+ "STROKE_COLOR"
484
+ ]
485
+ }
280
486
  },
281
487
  "hover": {
282
488
  "$value": "{action.confirm.border.color.default}",
283
489
  "$type": "color",
284
- "$description": "Used for the border of a confirm action in the hover state."
490
+ "$description": "Used for the border of a confirm action in the hover state.",
491
+ "$extensions": {
492
+ "com.figma.scope": [
493
+ "STROKE_COLOR"
494
+ ]
495
+ }
285
496
  },
286
497
  "focus": {
287
498
  "$value": "{action.confirm.border.color.default}",
288
499
  "$type": "color",
289
- "$description": "Used for the border of a confirm action in the focus state."
500
+ "$description": "Used for the border of a confirm action in the focus state.",
501
+ "$extensions": {
502
+ "com.figma.scope": [
503
+ "STROKE_COLOR"
504
+ ]
505
+ }
290
506
  },
291
507
  "active": {
292
508
  "$value": "{action.confirm.border.color.default}",
293
509
  "$type": "color",
294
- "$description": "Used for the border of a confirm action in the active state."
510
+ "$description": "Used for the border of a confirm action in the active state.",
511
+ "$extensions": {
512
+ "com.figma.scope": [
513
+ "STROKE_COLOR"
514
+ ]
515
+ }
295
516
  }
296
517
  }
297
518
  }
@@ -305,7 +526,13 @@
305
526
  "dark": "{color.red.200}"
306
527
  },
307
528
  "$type": "color",
308
- "$description": "Used for the foreground of a danger (destructive) action in the default state."
529
+ "$description": "Used for the foreground of a danger (destructive) action in the default state.",
530
+ "$extensions": {
531
+ "com.figma.scope": [
532
+ "SHAPE_FILL",
533
+ "TEXT_FILL"
534
+ ]
535
+ }
309
536
  },
310
537
  "hover": {
311
538
  "$value": {
@@ -313,12 +540,24 @@
313
540
  "dark": "{color.red.100}"
314
541
  },
315
542
  "$type": "color",
316
- "$description": "Used for the foreground of a danger (destructive) action in the hover state."
543
+ "$description": "Used for the foreground of a danger (destructive) action in the hover state.",
544
+ "$extensions": {
545
+ "com.figma.scope": [
546
+ "SHAPE_FILL",
547
+ "TEXT_FILL"
548
+ ]
549
+ }
317
550
  },
318
551
  "focus": {
319
552
  "$value": "{action.danger.foreground.color.hover}",
320
553
  "$type": "color",
321
- "$description": "Used for the foreground of a danger (destructive) action in the focus state."
554
+ "$description": "Used for the foreground of a danger (destructive) action in the focus state.",
555
+ "$extensions": {
556
+ "com.figma.scope": [
557
+ "SHAPE_FILL",
558
+ "TEXT_FILL"
559
+ ]
560
+ }
322
561
  },
323
562
  "active": {
324
563
  "$value": {
@@ -326,7 +565,13 @@
326
565
  "dark": "{color.red.100}"
327
566
  },
328
567
  "$type": "color",
329
- "$description": "Used for the foreground of a danger (destructive) action in the active state."
568
+ "$description": "Used for the foreground of a danger (destructive) action in the active state.",
569
+ "$extensions": {
570
+ "com.figma.scope": [
571
+ "SHAPE_FILL",
572
+ "TEXT_FILL"
573
+ ]
574
+ }
330
575
  }
331
576
  }
332
577
  },
@@ -338,7 +583,13 @@
338
583
  "dark": "rgba(236, 89, 65, 0.0)"
339
584
  },
340
585
  "$type": "color",
341
- "$description": "Used for the background of a danger (destructive) action in the default state."
586
+ "$description": "Used for the background of a danger (destructive) action in the default state.",
587
+ "$extensions": {
588
+ "com.figma.scope": [
589
+ "FRAME_FILL",
590
+ "SHAPE_FILL"
591
+ ]
592
+ }
342
593
  },
343
594
  "hover": {
344
595
  "$value": {
@@ -346,12 +597,24 @@
346
597
  "dark": "rgba(236, 89, 65, 0.4)"
347
598
  },
348
599
  "$type": "color",
349
- "$description": "Used for the background of a danger (destructive) action in the hover state."
600
+ "$description": "Used for the background of a danger (destructive) action in the hover state.",
601
+ "$extensions": {
602
+ "com.figma.scope": [
603
+ "FRAME_FILL",
604
+ "SHAPE_FILL"
605
+ ]
606
+ }
350
607
  },
351
608
  "focus": {
352
609
  "$value": "{action.danger.background.color.hover}",
353
610
  "$type": "color",
354
- "$description": "Used for the background of a danger (destructive) action in the focus state."
611
+ "$description": "Used for the background of a danger (destructive) action in the focus state.",
612
+ "$extensions": {
613
+ "com.figma.scope": [
614
+ "FRAME_FILL",
615
+ "SHAPE_FILL"
616
+ ]
617
+ }
355
618
  },
356
619
  "active": {
357
620
  "$value": {
@@ -359,7 +622,13 @@
359
622
  "dark": "rgba(236, 89, 65, 0.16)"
360
623
  },
361
624
  "$type": "color",
362
- "$description": "Used for the background of a danger (destructive) action in the active state."
625
+ "$description": "Used for the background of a danger (destructive) action in the active state.",
626
+ "$extensions": {
627
+ "com.figma.scope": [
628
+ "FRAME_FILL",
629
+ "SHAPE_FILL"
630
+ ]
631
+ }
363
632
  }
364
633
  }
365
634
  },
@@ -368,22 +637,42 @@
368
637
  "default": {
369
638
  "$value": "{color.alpha.0}",
370
639
  "$type": "color",
371
- "$description": "Used for the border of a danger action in the default state."
640
+ "$description": "Used for the border of a danger action in the default state.",
641
+ "$extensions": {
642
+ "com.figma.scope": [
643
+ "STROKE_COLOR"
644
+ ]
645
+ }
372
646
  },
373
647
  "hover": {
374
648
  "$value": "{action.danger.border.color.default}",
375
649
  "$type": "color",
376
- "$description": "Used for the border of a danger action in the hover state."
650
+ "$description": "Used for the border of a danger action in the hover state.",
651
+ "$extensions": {
652
+ "com.figma.scope": [
653
+ "STROKE_COLOR"
654
+ ]
655
+ }
377
656
  },
378
657
  "focus": {
379
658
  "$value": "{action.danger.border.color.default}",
380
659
  "$type": "color",
381
- "$description": "Used for the border of a danger action in the focus state."
660
+ "$description": "Used for the border of a danger action in the focus state.",
661
+ "$extensions": {
662
+ "com.figma.scope": [
663
+ "STROKE_COLOR"
664
+ ]
665
+ }
382
666
  },
383
667
  "active": {
384
668
  "$value": "{action.danger.border.color.default}",
385
669
  "$type": "color",
386
- "$description": "Used for the border of a danger action in the active state."
670
+ "$description": "Used for the border of a danger action in the active state.",
671
+ "$extensions": {
672
+ "com.figma.scope": [
673
+ "STROKE_COLOR"
674
+ ]
675
+ }
387
676
  }
388
677
  }
389
678
  }
@@ -398,7 +687,13 @@
398
687
  "dark": "{color.blue.300}"
399
688
  },
400
689
  "$type": "color",
401
- "$description": "Used for the background of a strong confirm action in the default state."
690
+ "$description": "Used for the background of a strong confirm action in the default state.",
691
+ "$extensions": {
692
+ "com.figma.scope": [
693
+ "FRAME_FILL",
694
+ "SHAPE_FILL"
695
+ ]
696
+ }
402
697
  },
403
698
  "hover": {
404
699
  "$value": {
@@ -406,12 +701,24 @@
406
701
  "dark": "{color.blue.200}"
407
702
  },
408
703
  "$type": "color",
409
- "$description": "Used for the background of a strong confirm action in the hover state."
704
+ "$description": "Used for the background of a strong confirm action in the hover state.",
705
+ "$extensions": {
706
+ "com.figma.scope": [
707
+ "FRAME_FILL",
708
+ "SHAPE_FILL"
709
+ ]
710
+ }
410
711
  },
411
712
  "focus": {
412
713
  "$value": "{action.strong.confirm.background.color.hover}",
413
714
  "$type": "color",
414
- "$description": "Used for the background of a strong confirm action in the focus state."
715
+ "$description": "Used for the background of a strong confirm action in the focus state.",
716
+ "$extensions": {
717
+ "com.figma.scope": [
718
+ "FRAME_FILL",
719
+ "SHAPE_FILL"
720
+ ]
721
+ }
415
722
  },
416
723
  "active": {
417
724
  "$value": {
@@ -419,7 +726,13 @@
419
726
  "dark": "{color.blue.400}"
420
727
  },
421
728
  "$type": "color",
422
- "$description": "Used for the background of a strong confirm action in the active state."
729
+ "$description": "Used for the background of a strong confirm action in the active state.",
730
+ "$extensions": {
731
+ "com.figma.scope": [
732
+ "FRAME_FILL",
733
+ "SHAPE_FILL"
734
+ ]
735
+ }
423
736
  }
424
737
  }
425
738
  },
@@ -431,22 +744,46 @@
431
744
  "dark": "{color.neutral.950}"
432
745
  },
433
746
  "$type": "color",
434
- "$description": "Used for the foreground of a strong confirm action in the default state."
747
+ "$description": "Used for the foreground of a strong confirm action in the default state.",
748
+ "$extensions": {
749
+ "com.figma.scope": [
750
+ "SHAPE_FILL",
751
+ "TEXT_FILL"
752
+ ]
753
+ }
435
754
  },
436
755
  "hover": {
437
756
  "$value": "{action.strong.confirm.foreground.color.default}",
438
757
  "$type": "color",
439
- "$description": "Used for the foreground of a strong confirm action in the hover state."
758
+ "$description": "Used for the foreground of a strong confirm action in the hover state.",
759
+ "$extensions": {
760
+ "com.figma.scope": [
761
+ "SHAPE_FILL",
762
+ "TEXT_FILL"
763
+ ]
764
+ }
440
765
  },
441
766
  "focus": {
442
767
  "$value": "{action.strong.confirm.foreground.color.hover}",
443
768
  "$type": "color",
444
- "$description": "Used for the foreground of a strong confirm action in the focus state."
769
+ "$description": "Used for the foreground of a strong confirm action in the focus state.",
770
+ "$extensions": {
771
+ "com.figma.scope": [
772
+ "SHAPE_FILL",
773
+ "TEXT_FILL"
774
+ ]
775
+ }
445
776
  },
446
777
  "active": {
447
778
  "$value": "{action.strong.confirm.foreground.color.focus}",
448
779
  "$type": "color",
449
- "$description": "Used for the foreground of a strong confirm action in the active state."
780
+ "$description": "Used for the foreground of a strong confirm action in the active state.",
781
+ "$extensions": {
782
+ "com.figma.scope": [
783
+ "SHAPE_FILL",
784
+ "TEXT_FILL"
785
+ ]
786
+ }
450
787
  }
451
788
  }
452
789
  },
@@ -455,22 +792,42 @@
455
792
  "default": {
456
793
  "$value": "{color.alpha.0}",
457
794
  "$type": "color",
458
- "$description": "Used for the border of a strong confirm action in the default state."
795
+ "$description": "Used for the border of a strong confirm action in the default state.",
796
+ "$extensions": {
797
+ "com.figma.scope": [
798
+ "STROKE_COLOR"
799
+ ]
800
+ }
459
801
  },
460
802
  "hover": {
461
803
  "$value": "{action.strong.confirm.border.color.default}",
462
804
  "$type": "color",
463
- "$description": "Used for the border of a strong confirm action in the hover state."
805
+ "$description": "Used for the border of a strong confirm action in the hover state.",
806
+ "$extensions": {
807
+ "com.figma.scope": [
808
+ "STROKE_COLOR"
809
+ ]
810
+ }
464
811
  },
465
812
  "focus": {
466
813
  "$value": "{action.strong.confirm.border.color.hover}",
467
814
  "$type": "color",
468
- "$description": "Used for the border of a strong confirm action in the focus state."
815
+ "$description": "Used for the border of a strong confirm action in the focus state.",
816
+ "$extensions": {
817
+ "com.figma.scope": [
818
+ "STROKE_COLOR"
819
+ ]
820
+ }
469
821
  },
470
822
  "active": {
471
823
  "$value": "{action.strong.confirm.border.color.focus}",
472
824
  "$type": "color",
473
- "$description": "Used for the border of a strong confirm action in the active state."
825
+ "$description": "Used for the border of a strong confirm action in the active state.",
826
+ "$extensions": {
827
+ "com.figma.scope": [
828
+ "STROKE_COLOR"
829
+ ]
830
+ }
474
831
  }
475
832
  }
476
833
  }
@@ -484,7 +841,13 @@
484
841
  "dark": "{color.neutral.700}"
485
842
  },
486
843
  "$type": "color",
487
- "$description": "Used for the background of a strong neutral action in the default state."
844
+ "$description": "Used for the background of a strong neutral action in the default state.",
845
+ "$extensions": {
846
+ "com.figma.scope": [
847
+ "FRAME_FILL",
848
+ "SHAPE_FILL"
849
+ ]
850
+ }
488
851
  },
489
852
  "hover": {
490
853
  "$value": {
@@ -492,12 +855,24 @@
492
855
  "dark": "{color.neutral.600}"
493
856
  },
494
857
  "$type": "color",
495
- "$description": "Used for the background of a strong neutral action in the hover state."
858
+ "$description": "Used for the background of a strong neutral action in the hover state.",
859
+ "$extensions": {
860
+ "com.figma.scope": [
861
+ "FRAME_FILL",
862
+ "SHAPE_FILL"
863
+ ]
864
+ }
496
865
  },
497
866
  "focus": {
498
867
  "$value": "{action.strong.neutral.background.color.hover}",
499
868
  "$type": "color",
500
- "$description": "Used for the background of a strong neutral action in the focus state."
869
+ "$description": "Used for the background of a strong neutral action in the focus state.",
870
+ "$extensions": {
871
+ "com.figma.scope": [
872
+ "FRAME_FILL",
873
+ "SHAPE_FILL"
874
+ ]
875
+ }
501
876
  },
502
877
  "active": {
503
878
  "$value": {
@@ -505,7 +880,13 @@
505
880
  "dark": "{color.neutral.500}"
506
881
  },
507
882
  "$type": "color",
508
- "$description": "Used for the background of a strong neutral action in the active state."
883
+ "$description": "Used for the background of a strong neutral action in the active state.",
884
+ "$extensions": {
885
+ "com.figma.scope": [
886
+ "FRAME_FILL",
887
+ "SHAPE_FILL"
888
+ ]
889
+ }
509
890
  }
510
891
  }
511
892
  },
@@ -517,7 +898,13 @@
517
898
  "dark": "{color.neutral.50}"
518
899
  },
519
900
  "$type": "color",
520
- "$description": "Used for the foreground of a strong neutral action in the default state."
901
+ "$description": "Used for the foreground of a strong neutral action in the default state.",
902
+ "$extensions": {
903
+ "com.figma.scope": [
904
+ "SHAPE_FILL",
905
+ "TEXT_FILL"
906
+ ]
907
+ }
521
908
  },
522
909
  "hover": {
523
910
  "$value": {
@@ -525,7 +912,13 @@
525
912
  "dark": "{color.neutral.0}"
526
913
  },
527
914
  "$type": "color",
528
- "$description": "Used for the foreground of a strong neutral action in the hover state."
915
+ "$description": "Used for the foreground of a strong neutral action in the hover state.",
916
+ "$extensions": {
917
+ "com.figma.scope": [
918
+ "SHAPE_FILL",
919
+ "TEXT_FILL"
920
+ ]
921
+ }
529
922
  },
530
923
  "focus": {
531
924
  "$value": {
@@ -533,7 +926,13 @@
533
926
  "dark": "{color.neutral.0}"
534
927
  },
535
928
  "$type": "color",
536
- "$description": "Used for the foreground of a strong neutral action in the focus state."
929
+ "$description": "Used for the foreground of a strong neutral action in the focus state.",
930
+ "$extensions": {
931
+ "com.figma.scope": [
932
+ "SHAPE_FILL",
933
+ "TEXT_FILL"
934
+ ]
935
+ }
537
936
  },
538
937
  "active": {
539
938
  "$value": {
@@ -541,7 +940,13 @@
541
940
  "dark": "{color.neutral.0}"
542
941
  },
543
942
  "$type": "color",
544
- "$description": "Used for the foreground of a strong neutral action in the active state."
943
+ "$description": "Used for the foreground of a strong neutral action in the active state.",
944
+ "$extensions": {
945
+ "com.figma.scope": [
946
+ "SHAPE_FILL",
947
+ "TEXT_FILL"
948
+ ]
949
+ }
545
950
  }
546
951
  }
547
952
  },
@@ -550,22 +955,42 @@
550
955
  "default": {
551
956
  "$value": "{color.alpha.0}",
552
957
  "$type": "color",
553
- "$description": "Used for the border of a strong neutral action in the default state."
958
+ "$description": "Used for the border of a strong neutral action in the default state.",
959
+ "$extensions": {
960
+ "com.figma.scope": [
961
+ "STROKE_COLOR"
962
+ ]
963
+ }
554
964
  },
555
965
  "hover": {
556
966
  "$value": "{action.strong.neutral.border.color.default}",
557
967
  "$type": "color",
558
- "$description": "Used for the border of a strong neutral action in the hover state."
968
+ "$description": "Used for the border of a strong neutral action in the hover state.",
969
+ "$extensions": {
970
+ "com.figma.scope": [
971
+ "STROKE_COLOR"
972
+ ]
973
+ }
559
974
  },
560
975
  "focus": {
561
976
  "$value": "{action.strong.neutral.border.color.hover}",
562
977
  "$type": "color",
563
- "$description": "Used for the border of a strong neutral action in the focus state."
978
+ "$description": "Used for the border of a strong neutral action in the focus state.",
979
+ "$extensions": {
980
+ "com.figma.scope": [
981
+ "STROKE_COLOR"
982
+ ]
983
+ }
564
984
  },
565
985
  "active": {
566
986
  "$value": "{action.strong.neutral.border.color.focus}",
567
987
  "$type": "color",
568
- "$description": "Used for the border of a strong neutral action in the active state."
988
+ "$description": "Used for the border of a strong neutral action in the active state.",
989
+ "$extensions": {
990
+ "com.figma.scope": [
991
+ "STROKE_COLOR"
992
+ ]
993
+ }
569
994
  }
570
995
  }
571
996
  }