@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/contextual/banner.tokens.json CHANGED
@@ -8,7 +8,12 @@
8
8
  "dark": "{color.blue.700}"
9
9
  },
10
10
  "$type": "color",
11
- "$description": "Used for the border of an info banner."
11
+ "$description": "Used for the border of an info banner.",
12
+ "$extensions": {
13
+ "com.figma.scope": [
14
+ "STROKE_COLOR"
15
+ ]
16
+ }
12
17
  }
13
18
  }
14
19
  },
@@ -20,7 +25,13 @@
20
25
  "dark": "{color.purple.950}"
21
26
  },
22
27
  "$type": "color",
23
- "$description": "Used for the background of a promo banner."
28
+ "$description": "Used for the background of a promo banner.",
29
+ "$extensions": {
30
+ "com.figma.scope": [
31
+ "FRAME_FILL",
32
+ "SHAPE_FILL"
33
+ ]
34
+ }
24
35
  }
25
36
  },
26
37
  "border": {
@@ -30,7 +41,12 @@
30
41
  "dark": "{color.purple.700}"
31
42
  },
32
43
  "$type": "color",
33
- "$description": "Used for the border of a promo banner."
44
+ "$description": "Used for the border of a promo banner.",
45
+ "$extensions": {
46
+ "com.figma.scope": [
47
+ "STROKE_COLOR"
48
+ ]
49
+ }
34
50
  }
35
51
  }
36
52
  }
package/src/tokens/contextual/breadcrumb.tokens.json CHANGED
@@ -4,7 +4,12 @@
4
4
  "color": {
5
5
  "$value": "{color.neutral.400}",
6
6
  "$type": "color",
7
- "$description": "Used for the breadcrumb level separator."
7
+ "$description": "Used for the breadcrumb level separator.",
8
+ "$extensions": {
9
+ "com.figma.scope": [
10
+ "STROKE_COLOR"
11
+ ]
12
+ }
8
13
  }
9
14
  }
10
15
  }
package/src/tokens/contextual/broadcast.tokens.json CHANGED
@@ -6,52 +6,112 @@
6
6
  "blue": {
7
7
  "$value": "{color.theme-blue.700}",
8
8
  "$type": "color",
9
- "$description": "Used for the background for the blue banner type."
9
+ "$description": "Used for the background for the blue banner type.",
10
+ "$extensions": {
11
+ "com.figma.scope": [
12
+ "FRAME_FILL",
13
+ "SHAPE_FILL"
14
+ ]
15
+ }
10
16
  },
11
17
  "dark": {
12
18
  "$value": "{color.neutral.500}",
13
19
  "$type": "color",
14
- "$description": "Used for the background for the dark banner type."
20
+ "$description": "Used for the background for the dark banner type.",
21
+ "$extensions": {
22
+ "com.figma.scope": [
23
+ "FRAME_FILL",
24
+ "SHAPE_FILL"
25
+ ]
26
+ }
15
27
  },
16
28
  "green": {
17
29
  "$value": "{color.theme-green.700}",
18
30
  "$type": "color",
19
- "$description": "Used for the background for the green banner type."
31
+ "$description": "Used for the background for the green banner type.",
32
+ "$extensions": {
33
+ "com.figma.scope": [
34
+ "FRAME_FILL",
35
+ "SHAPE_FILL"
36
+ ]
37
+ }
20
38
  },
21
39
  "indigo": {
22
40
  "$value": "{color.theme-indigo.700}",
23
41
  "$type": "color",
24
- "$description": "Used for the background for the indigo banner type."
42
+ "$description": "Used for the background for the indigo banner type.",
43
+ "$extensions": {
44
+ "com.figma.scope": [
45
+ "FRAME_FILL",
46
+ "SHAPE_FILL"
47
+ ]
48
+ }
25
49
  },
26
50
  "light": {
27
51
  "$value": "{color.neutral.50}",
28
52
  "$type": "color",
29
- "$description": "Used for the background for the light banner type."
53
+ "$description": "Used for the background for the light banner type.",
54
+ "$extensions": {
55
+ "com.figma.scope": [
56
+ "FRAME_FILL",
57
+ "SHAPE_FILL"
58
+ ]
59
+ }
30
60
  },
31
61
  "lightblue": {
32
62
  "$value": "{color.theme-blue.500}",
33
63
  "$type": "color",
34
- "$description": "Used for the background for the lightblue banner type."
64
+ "$description": "Used for the background for the lightblue banner type.",
65
+ "$extensions": {
66
+ "com.figma.scope": [
67
+ "FRAME_FILL",
68
+ "SHAPE_FILL"
69
+ ]
70
+ }
35
71
  },
36
72
  "lightgreen": {
37
73
  "$value": "{color.theme-green.500}",
38
74
  "$type": "color",
39
- "$description": "Used for the background for the lightgreen banner type."
75
+ "$description": "Used for the background for the lightgreen banner type.",
76
+ "$extensions": {
77
+ "com.figma.scope": [
78
+ "FRAME_FILL",
79
+ "SHAPE_FILL"
80
+ ]
81
+ }
40
82
  },
41
83
  "lightindigo": {
42
84
  "$value": "{color.theme-indigo.500}",
43
85
  "$type": "color",
44
- "$description": "Used for the background for the lightindigo banner type."
86
+ "$description": "Used for the background for the lightindigo banner type.",
87
+ "$extensions": {
88
+ "com.figma.scope": [
89
+ "FRAME_FILL",
90
+ "SHAPE_FILL"
91
+ ]
92
+ }
45
93
  },
46
94
  "lightred": {
47
95
  "$value": "{color.theme-red.500}",
48
96
  "$type": "color",
49
- "$description": "Used for the background for the lightred banner type."
97
+ "$description": "Used for the background for the lightred banner type.",
98
+ "$extensions": {
99
+ "com.figma.scope": [
100
+ "FRAME_FILL",
101
+ "SHAPE_FILL"
102
+ ]
103
+ }
50
104
  },
51
105
  "red": {
52
106
  "$value": "{color.theme-red.700}",
53
107
  "$type": "color",
54
- "$description": "Used for the background for the red banner type."
108
+ "$description": "Used for the background for the red banner type.",
109
+ "$extensions": {
110
+ "com.figma.scope": [
111
+ "FRAME_FILL",
112
+ "SHAPE_FILL"
113
+ ]
114
+ }
55
115
  }
56
116
  }
57
117
  },
@@ -60,52 +120,102 @@
60
120
  "blue": {
61
121
  "$value": "{color.theme-blue.900}",
62
122
  "$type": "color",
63
- "$description": "Used for the border for the blue banner type."
123
+ "$description": "Used for the border for the blue banner type.",
124
+ "$extensions": {
125
+ "com.figma.scope": [
126
+ "STROKE_COLOR"
127
+ ]
128
+ }
64
129
  },
65
130
  "dark": {
66
131
  "$value": "{color.neutral.700}",
67
132
  "$type": "color",
68
- "$description": "Used for the border for the dark banner type."
133
+ "$description": "Used for the border for the dark banner type.",
134
+ "$extensions": {
135
+ "com.figma.scope": [
136
+ "STROKE_COLOR"
137
+ ]
138
+ }
69
139
  },
70
140
  "green": {
71
141
  "$value": "{color.theme-green.900}",
72
142
  "$type": "color",
73
- "$description": "Used for the border for the green banner type."
143
+ "$description": "Used for the border for the green banner type.",
144
+ "$extensions": {
145
+ "com.figma.scope": [
146
+ "STROKE_COLOR"
147
+ ]
148
+ }
74
149
  },
75
150
  "indigo": {
76
151
  "$value": "{color.theme-indigo.900}",
77
152
  "$type": "color",
78
- "$description": "Used for the border for the indigo banner type."
153
+ "$description": "Used for the border for the indigo banner type.",
154
+ "$extensions": {
155
+ "com.figma.scope": [
156
+ "STROKE_COLOR"
157
+ ]
158
+ }
79
159
  },
80
160
  "light": {
81
161
  "$value": "{color.neutral.100}",
82
162
  "$type": "color",
83
- "$description": "Used for the border for the light banner type."
163
+ "$description": "Used for the border for the light banner type.",
164
+ "$extensions": {
165
+ "com.figma.scope": [
166
+ "STROKE_COLOR"
167
+ ]
168
+ }
84
169
  },
85
170
  "lightblue": {
86
171
  "$value": "{color.theme-blue.700}",
87
172
  "$type": "color",
88
- "$description": "Used for the border for the lightblue banner type."
173
+ "$description": "Used for the border for the lightblue banner type.",
174
+ "$extensions": {
175
+ "com.figma.scope": [
176
+ "STROKE_COLOR"
177
+ ]
178
+ }
89
179
  },
90
180
  "lightgreen": {
91
181
  "$value": "{color.theme-green.700}",
92
182
  "$type": "color",
93
- "$description": "Used for the border for the lightgreen banner type."
183
+ "$description": "Used for the border for the lightgreen banner type.",
184
+ "$extensions": {
185
+ "com.figma.scope": [
186
+ "STROKE_COLOR"
187
+ ]
188
+ }
94
189
  },
95
190
  "lightindigo": {
96
191
  "$value": "{color.theme-indigo.700}",
97
192
  "$type": "color",
98
- "$description": "Used for the border for the lightindigo banner type."
193
+ "$description": "Used for the border for the lightindigo banner type.",
194
+ "$extensions": {
195
+ "com.figma.scope": [
196
+ "STROKE_COLOR"
197
+ ]
198
+ }
99
199
  },
100
200
  "lightred": {
101
201
  "$value": "{color.theme-red.700}",
102
202
  "$type": "color",
103
- "$description": "Used for the border for the lightred banner type."
203
+ "$description": "Used for the border for the lightred banner type.",
204
+ "$extensions": {
205
+ "com.figma.scope": [
206
+ "STROKE_COLOR"
207
+ ]
208
+ }
104
209
  },
105
210
  "red": {
106
211
  "$value": "{color.theme-red.900}",
107
212
  "$type": "color",
108
- "$description": "Used for the border for the red banner type."
213
+ "$description": "Used for the border for the red banner type.",
214
+ "$extensions": {
215
+ "com.figma.scope": [
216
+ "STROKE_COLOR"
217
+ ]
218
+ }
109
219
  }
110
220
  }
111
221
  },
@@ -114,108 +224,218 @@
114
224
  "blue": {
115
225
  "$value": "{color.neutral.0}",
116
226
  "$type": "color",
117
- "$description": "Used for the icon for the blue banner type."
227
+ "$description": "Used for the icon for the blue banner type.",
228
+ "$extensions": {
229
+ "com.figma.scope": [
230
+ "SHAPE_FILL",
231
+ "TEXT_FILL"
232
+ ]
233
+ }
118
234
  },
119
235
  "dark": {
120
236
  "$value": "{color.neutral.0}",
121
237
  "$type": "color",
122
- "$description": "Used for the icon for the dark banner type."
238
+ "$description": "Used for the icon for the dark banner type.",
239
+ "$extensions": {
240
+ "com.figma.scope": [
241
+ "SHAPE_FILL",
242
+ "TEXT_FILL"
243
+ ]
244
+ }
123
245
  },
124
246
  "green": {
125
247
  "$value": "{color.neutral.0}",
126
248
  "$type": "color",
127
- "$description": "Used for the icon for the green banner type."
249
+ "$description": "Used for the icon for the green banner type.",
250
+ "$extensions": {
251
+ "com.figma.scope": [
252
+ "SHAPE_FILL",
253
+ "TEXT_FILL"
254
+ ]
255
+ }
128
256
  },
129
257
  "indigo": {
130
258
  "$value": "{color.neutral.0}",
131
259
  "$type": "color",
132
- "$description": "Used for the icon for the indigo banner type."
260
+ "$description": "Used for the icon for the indigo banner type.",
261
+ "$extensions": {
262
+ "com.figma.scope": [
263
+ "SHAPE_FILL",
264
+ "TEXT_FILL"
265
+ ]
266
+ }
133
267
  },
134
268
  "light": {
135
269
  "$value": "{color.neutral.900}",
136
270
  "$type": "color",
137
- "$description": "Used for the icon for the light banner type."
271
+ "$description": "Used for the icon for the light banner type.",
272
+ "$extensions": {
273
+ "com.figma.scope": [
274
+ "SHAPE_FILL",
275
+ "TEXT_FILL"
276
+ ]
277
+ }
138
278
  },
139
279
  "lightblue": {
140
280
  "$value": "{color.neutral.0}",
141
281
  "$type": "color",
142
- "$description": "Used for the icon for the lightblue banner type."
282
+ "$description": "Used for the icon for the lightblue banner type.",
283
+ "$extensions": {
284
+ "com.figma.scope": [
285
+ "SHAPE_FILL",
286
+ "TEXT_FILL"
287
+ ]
288
+ }
143
289
  },
144
290
  "lightgreen": {
145
291
  "$value": "{color.neutral.0}",
146
292
  "$type": "color",
147
- "$description": "Used for the icon for the lightgreen banner type."
293
+ "$description": "Used for the icon for the lightgreen banner type.",
294
+ "$extensions": {
295
+ "com.figma.scope": [
296
+ "SHAPE_FILL",
297
+ "TEXT_FILL"
298
+ ]
299
+ }
148
300
  },
149
301
  "lightindigo": {
150
302
  "$value": "{color.neutral.0}",
151
303
  "$type": "color",
152
- "$description": "Used for the icon for the lightindigo banner type."
304
+ "$description": "Used for the icon for the lightindigo banner type.",
305
+ "$extensions": {
306
+ "com.figma.scope": [
307
+ "SHAPE_FILL",
308
+ "TEXT_FILL"
309
+ ]
310
+ }
153
311
  },
154
312
  "lightred": {
155
313
  "$value": "{color.neutral.0}",
156
314
  "$type": "color",
157
- "$description": "Used for the icon for the lightred banner type."
315
+ "$description": "Used for the icon for the lightred banner type.",
316
+ "$extensions": {
317
+ "com.figma.scope": [
318
+ "SHAPE_FILL",
319
+ "TEXT_FILL"
320
+ ]
321
+ }
158
322
  },
159
323
  "red": {
160
324
  "$value": "{color.neutral.0}",
161
325
  "$type": "color",
162
- "$description": "Used for the icon for the red banner type."
326
+ "$description": "Used for the icon for the red banner type.",
327
+ "$extensions": {
328
+ "com.figma.scope": [
329
+ "SHAPE_FILL",
330
+ "TEXT_FILL"
331
+ ]
332
+ }
163
333
  }
164
334
  }
165
335
  },
166
336
  "text": {
167
337
  "color": {
168
- "blue": {
169
- "$value": "{color.neutral.0}",
170
- "$type": "color",
171
- "$description": "Used for the text for the blue banner type."
172
- },
173
- "dark": {
174
- "$value": "{color.neutral.0}",
175
- "$type": "color",
176
- "$description": "Used for the text for the dark banner type."
177
- },
178
- "green": {
179
- "$value": "{color.neutral.0}",
180
- "$type": "color",
181
- "$description": "Used for the text for the green banner type."
182
- },
183
- "indigo": {
184
- "$value": "{color.neutral.0}",
185
- "$type": "color",
186
- "$description": "Used for the text for the indigo banner type."
187
- },
188
- "light": {
189
- "$value": "{color.neutral.900}",
190
- "$type": "color",
191
- "$description": "Used for the text for the light banner type."
192
- },
193
- "lightblue": {
194
- "$value": "{color.neutral.0}",
195
- "$type": "color",
196
- "$description": "Used for the text for the lightblue banner type."
197
- },
198
- "lightgreen": {
199
- "$value": "{color.neutral.0}",
200
- "$type": "color",
201
- "$description": "Used for the text for the lightgreen banner type."
202
- },
203
- "lightindigo": {
204
- "$value": "{color.neutral.0}",
205
- "$type": "color",
206
- "$description": "Used for the text for the lightindigo banner type."
207
- },
208
- "lightred": {
209
- "$value": "{color.neutral.0}",
210
- "$type": "color",
211
- "$description": "Used for the text for the lightred banner type."
212
- },
213
- "red": {
214
- "$value": "{color.neutral.0}",
215
- "$type": "color",
216
- "$description": "Used for the text for the red banner type."
217
- }
218
- }
338
+ "blue": {
339
+ "$value": "{color.neutral.0}",
340
+ "$type": "color",
341
+ "$description": "Used for the text for the blue banner type.",
342
+ "$extensions": {
343
+ "com.figma.scope": [
344
+ "TEXT_FILL"
345
+ ]
346
+ }
347
+ },
348
+ "dark": {
349
+ "$value": "{color.neutral.0}",
350
+ "$type": "color",
351
+ "$description": "Used for the text for the dark banner type.",
352
+ "$extensions": {
353
+ "com.figma.scope": [
354
+ "TEXT_FILL"
355
+ ]
356
+ }
357
+ },
358
+ "green": {
359
+ "$value": "{color.neutral.0}",
360
+ "$type": "color",
361
+ "$description": "Used for the text for the green banner type.",
362
+ "$extensions": {
363
+ "com.figma.scope": [
364
+ "TEXT_FILL"
365
+ ]
366
+ }
367
+ },
368
+ "indigo": {
369
+ "$value": "{color.neutral.0}",
370
+ "$type": "color",
371
+ "$description": "Used for the text for the indigo banner type.",
372
+ "$extensions": {
373
+ "com.figma.scope": [
374
+ "TEXT_FILL"
375
+ ]
376
+ }
377
+ },
378
+ "light": {
379
+ "$value": "{color.neutral.900}",
380
+ "$type": "color",
381
+ "$description": "Used for the text for the light banner type.",
382
+ "$extensions": {
383
+ "com.figma.scope": [
384
+ "TEXT_FILL"
385
+ ]
386
+ }
387
+ },
388
+ "lightblue": {
389
+ "$value": "{color.neutral.0}",
390
+ "$type": "color",
391
+ "$description": "Used for the text for the lightblue banner type.",
392
+ "$extensions": {
393
+ "com.figma.scope": [
394
+ "TEXT_FILL"
395
+ ]
396
+ }
397
+ },
398
+ "lightgreen": {
399
+ "$value": "{color.neutral.0}",
400
+ "$type": "color",
401
+ "$description": "Used for the text for the lightgreen banner type.",
402
+ "$extensions": {
403
+ "com.figma.scope": [
404
+ "TEXT_FILL"
405
+ ]
406
+ }
407
+ },
408
+ "lightindigo": {
409
+ "$value": "{color.neutral.0}",
410
+ "$type": "color",
411
+ "$description": "Used for the text for the lightindigo banner type.",
412
+ "$extensions": {
413
+ "com.figma.scope": [
414
+ "TEXT_FILL"
415
+ ]
416
+ }
417
+ },
418
+ "lightred": {
419
+ "$value": "{color.neutral.0}",
420
+ "$type": "color",
421
+ "$description": "Used for the text for the lightred banner type.",
422
+ "$extensions": {
423
+ "com.figma.scope": [
424
+ "TEXT_FILL"
425
+ ]
426
+ }
427
+ },
428
+ "red": {
429
+ "$value": "{color.neutral.0}",
430
+ "$type": "color",
431
+ "$description": "Used for the text for the red banner type.",
432
+ "$extensions": {
433
+ "com.figma.scope": [
434
+ "TEXT_FILL"
435
+ ]
436
+ }
437
+ }
438
+ }
219
439
  }
220
440
  }
221
441
  }