@gitlab/ui 122.8.0 → 122.9.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 (86) hide show
  1. package/README.md +5 -2
  2. package/dist/components/base/breadcrumb/breadcrumb.js +1 -1
  3. package/dist/components/base/search_box_by_click/search_box_by_click.js +1 -1
  4. package/dist/components/dashboards/dashboard_panel/dashboard_panel.js +1 -1
  5. package/dist/components/regions/dashboard_skeleton/dashboard_skeleton.js +1 -1
  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/build/js/tokens.dark.js +24 -6
  11. package/dist/tokens/build/js/tokens.js +24 -6
  12. package/dist/tokens/css/tokens.css +23 -5
  13. package/dist/tokens/css/tokens.dark.css +23 -5
  14. package/dist/tokens/docs/tokens-tailwind-docs.dark.json +354 -0
  15. package/dist/tokens/docs/tokens-tailwind-docs.json +354 -0
  16. package/dist/tokens/figma/constants.tokens.json +94 -0
  17. package/dist/tokens/figma/contextual.tokens.json +78 -0
  18. package/dist/tokens/figma/semantic.tokens.json +34 -0
  19. package/dist/tokens/js/tokens.dark.js +23 -5
  20. package/dist/tokens/js/tokens.js +23 -5
  21. package/dist/tokens/json/tokens.dark.json +746 -171
  22. package/dist/tokens/json/tokens.json +746 -171
  23. package/dist/tokens/scss/_tokens.dark.scss +23 -5
  24. package/dist/tokens/scss/_tokens.scss +23 -5
  25. package/dist/tokens/scss/_tokens_custom_properties.scss +23 -5
  26. package/dist/tokens/tailwind/tokens.cjs +2 -0
  27. package/package.json +1 -1
  28. package/src/components/base/alert/alert.scss +1 -1
  29. package/src/components/base/avatar/avatar.scss +3 -3
  30. package/src/components/base/avatars_inline/avatars_inline.scss +1 -1
  31. package/src/components/base/breadcrumb/breadcrumb.scss +1 -1
  32. package/src/components/base/breadcrumb/breadcrumb.vue +1 -1
  33. package/src/components/base/broadcast_message/broadcast_message.scss +1 -1
  34. package/src/components/base/button/button.scss +1 -1
  35. package/src/components/base/card/card.scss +5 -5
  36. package/src/components/base/datepicker/datepicker.scss +3 -3
  37. package/src/components/base/dropdown/dropdown.scss +1 -1
  38. package/src/components/base/filtered_search/filtered_search.scss +1 -1
  39. package/src/components/base/filtered_search/filtered_search_suggestion_list.scss +1 -1
  40. package/src/components/base/form/form_input/form_input.scss +1 -0
  41. package/src/components/base/form/form_select/form_select.scss +1 -0
  42. package/src/components/base/form/input_group_text/input_group_text.scss +6 -5
  43. package/src/components/base/keyset_pagination/keyset_pagination.scss +1 -1
  44. package/src/components/base/link/link.scss +1 -1
  45. package/src/components/base/markdown/markdown.scss +3 -3
  46. package/src/components/base/modal/modal.scss +5 -5
  47. package/src/components/base/new_dropdowns/dropdown.scss +1 -1
  48. package/src/components/base/new_dropdowns/dropdown_item.scss +1 -1
  49. package/src/components/base/pagination/pagination.scss +2 -2
  50. package/src/components/base/path/path.scss +2 -2
  51. package/src/components/base/search_box_by_click/search_box_by_click.vue +1 -1
  52. package/src/components/base/tabs/tabs/tabs.scss +1 -1
  53. package/src/components/base/toast/toast.scss +1 -1
  54. package/src/components/base/token/token.scss +1 -1
  55. package/src/components/base/tooltip/tooltip.scss +1 -1
  56. package/src/components/charts/single_stat/single_stat.scss +1 -1
  57. package/src/components/dashboards/dashboard_panel/dashboard_panel.vue +2 -2
  58. package/src/components/regions/dashboard_skeleton/dashboard_skeleton.vue +1 -1
  59. package/src/scss/mixins.scss +2 -2
  60. package/src/scss/variables.scss +0 -1
  61. package/src/tokens/build/css/tokens.css +23 -5
  62. package/src/tokens/build/css/tokens.dark.css +23 -5
  63. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +354 -0
  64. package/src/tokens/build/docs/tokens-tailwind-docs.json +354 -0
  65. package/src/tokens/build/figma/constants.tokens.json +94 -0
  66. package/src/tokens/build/figma/contextual.tokens.json +78 -0
  67. package/src/tokens/build/figma/semantic.tokens.json +34 -0
  68. package/src/tokens/build/js/tokens.dark.js +23 -5
  69. package/src/tokens/build/js/tokens.js +23 -5
  70. package/src/tokens/build/json/tokens.dark.json +746 -171
  71. package/src/tokens/build/json/tokens.json +746 -171
  72. package/src/tokens/build/scss/_tokens.dark.scss +23 -5
  73. package/src/tokens/build/scss/_tokens.scss +23 -5
  74. package/src/tokens/build/scss/_tokens_custom_properties.scss +23 -5
  75. package/src/tokens/build/tailwind/tokens.cjs +14 -0
  76. package/src/tokens/constant/border.tokens.json +96 -0
  77. package/src/tokens/contextual/alert.tokens.json +12 -0
  78. package/src/tokens/contextual/broadcast.tokens.json +10 -0
  79. package/src/tokens/contextual/button.tokens.json +12 -0
  80. package/src/tokens/contextual/card.tokens.json +16 -0
  81. package/src/tokens/contextual/dropdown.tokens.json +10 -0
  82. package/src/tokens/contextual/modal.tokens.json +16 -0
  83. package/src/tokens/semantic/action.tokens.json +12 -0
  84. package/src/tokens/semantic/border.tokens.json +12 -0
  85. package/src/tokens/semantic/control.tokens.json +10 -0
  86. package/tailwind.defaults.js +2 -3
@@ -1,4 +1,487 @@
1
1
  {
2
+ "border": {
3
+ "radius": {
4
+ "none": {
5
+ "key": "{border.radius.none}",
6
+ "$value": "0",
7
+ "$type": "dimension",
8
+ "$description": "",
9
+ "$extensions": {
10
+ "com.figma.scope": [
11
+ "CORNER_RADIUS"
12
+ ]
13
+ },
14
+ "filePath": "src/tokens/constant/border.tokens.json",
15
+ "isSource": true,
16
+ "original": {
17
+ "$value": "{spacing-scale.0}",
18
+ "$type": "dimension",
19
+ "$description": "",
20
+ "$extensions": {
21
+ "com.figma.scope": [
22
+ "CORNER_RADIUS"
23
+ ]
24
+ },
25
+ "key": "{border.radius.none}"
26
+ },
27
+ "name": "BORDER_RADIUS_NONE",
28
+ "attributes": {},
29
+ "path": [
30
+ "border",
31
+ "radius",
32
+ "none"
33
+ ]
34
+ },
35
+ "xs": {
36
+ "key": "{border.radius.xs}",
37
+ "$value": "1px",
38
+ "$type": "dimension",
39
+ "$description": "",
40
+ "$extensions": {
41
+ "com.figma.scope": [
42
+ "CORNER_RADIUS"
43
+ ]
44
+ },
45
+ "filePath": "src/tokens/constant/border.tokens.json",
46
+ "isSource": true,
47
+ "original": {
48
+ "$value": "{spacing-scale.px}",
49
+ "$type": "dimension",
50
+ "$description": "",
51
+ "$extensions": {
52
+ "com.figma.scope": [
53
+ "CORNER_RADIUS"
54
+ ]
55
+ },
56
+ "key": "{border.radius.xs}"
57
+ },
58
+ "name": "BORDER_RADIUS_XS",
59
+ "attributes": {},
60
+ "path": [
61
+ "border",
62
+ "radius",
63
+ "xs"
64
+ ]
65
+ },
66
+ "sm": {
67
+ "key": "{border.radius.sm}",
68
+ "$value": "0.125rem",
69
+ "$type": "dimension",
70
+ "$description": "",
71
+ "$extensions": {
72
+ "com.figma.scope": [
73
+ "CORNER_RADIUS"
74
+ ]
75
+ },
76
+ "filePath": "src/tokens/constant/border.tokens.json",
77
+ "isSource": true,
78
+ "original": {
79
+ "$value": "{spacing-scale.1}",
80
+ "$type": "dimension",
81
+ "$description": "",
82
+ "$extensions": {
83
+ "com.figma.scope": [
84
+ "CORNER_RADIUS"
85
+ ]
86
+ },
87
+ "key": "{border.radius.sm}"
88
+ },
89
+ "name": "BORDER_RADIUS_SM",
90
+ "attributes": {},
91
+ "path": [
92
+ "border",
93
+ "radius",
94
+ "sm"
95
+ ]
96
+ },
97
+ "md": {
98
+ "key": "{border.radius.md}",
99
+ "$value": "0.25rem",
100
+ "$type": "dimension",
101
+ "$description": "",
102
+ "$extensions": {
103
+ "com.figma.scope": [
104
+ "CORNER_RADIUS"
105
+ ]
106
+ },
107
+ "filePath": "src/tokens/constant/border.tokens.json",
108
+ "isSource": true,
109
+ "original": {
110
+ "$value": "{spacing-scale.2}",
111
+ "$type": "dimension",
112
+ "$description": "",
113
+ "$extensions": {
114
+ "com.figma.scope": [
115
+ "CORNER_RADIUS"
116
+ ]
117
+ },
118
+ "key": "{border.radius.md}"
119
+ },
120
+ "name": "BORDER_RADIUS_MD",
121
+ "attributes": {},
122
+ "path": [
123
+ "border",
124
+ "radius",
125
+ "md"
126
+ ]
127
+ },
128
+ "lg": {
129
+ "key": "{border.radius.lg}",
130
+ "$value": "0.5rem",
131
+ "$type": "dimension",
132
+ "$description": "",
133
+ "$extensions": {
134
+ "com.figma.scope": [
135
+ "CORNER_RADIUS"
136
+ ]
137
+ },
138
+ "filePath": "src/tokens/constant/border.tokens.json",
139
+ "isSource": true,
140
+ "original": {
141
+ "$value": "{spacing-scale.3}",
142
+ "$type": "dimension",
143
+ "$description": "",
144
+ "$extensions": {
145
+ "com.figma.scope": [
146
+ "CORNER_RADIUS"
147
+ ]
148
+ },
149
+ "key": "{border.radius.lg}"
150
+ },
151
+ "name": "BORDER_RADIUS_LG",
152
+ "attributes": {},
153
+ "path": [
154
+ "border",
155
+ "radius",
156
+ "lg"
157
+ ]
158
+ },
159
+ "xl": {
160
+ "key": "{border.radius.xl}",
161
+ "$value": "0.75rem",
162
+ "$type": "dimension",
163
+ "$description": "",
164
+ "$extensions": {
165
+ "com.figma.scope": [
166
+ "CORNER_RADIUS"
167
+ ]
168
+ },
169
+ "filePath": "src/tokens/constant/border.tokens.json",
170
+ "isSource": true,
171
+ "original": {
172
+ "$value": "{spacing-scale.4}",
173
+ "$type": "dimension",
174
+ "$description": "",
175
+ "$extensions": {
176
+ "com.figma.scope": [
177
+ "CORNER_RADIUS"
178
+ ]
179
+ },
180
+ "key": "{border.radius.xl}"
181
+ },
182
+ "name": "BORDER_RADIUS_XL",
183
+ "attributes": {},
184
+ "path": [
185
+ "border",
186
+ "radius",
187
+ "xl"
188
+ ]
189
+ },
190
+ "2xl": {
191
+ "key": "{border.radius.2xl}",
192
+ "$value": "1rem",
193
+ "$type": "dimension",
194
+ "$description": "",
195
+ "$extensions": {
196
+ "com.figma.scope": [
197
+ "CORNER_RADIUS"
198
+ ]
199
+ },
200
+ "filePath": "src/tokens/constant/border.tokens.json",
201
+ "isSource": true,
202
+ "original": {
203
+ "$value": "{spacing-scale.5}",
204
+ "$type": "dimension",
205
+ "$description": "",
206
+ "$extensions": {
207
+ "com.figma.scope": [
208
+ "CORNER_RADIUS"
209
+ ]
210
+ },
211
+ "key": "{border.radius.2xl}"
212
+ },
213
+ "name": "BORDER_RADIUS_2XL",
214
+ "attributes": {},
215
+ "path": [
216
+ "border",
217
+ "radius",
218
+ "2xl"
219
+ ]
220
+ },
221
+ "3xl": {
222
+ "key": "{border.radius.3xl}",
223
+ "$value": "1.5rem",
224
+ "$type": "dimension",
225
+ "$description": "",
226
+ "$extensions": {
227
+ "com.figma.scope": [
228
+ "CORNER_RADIUS"
229
+ ]
230
+ },
231
+ "filePath": "src/tokens/constant/border.tokens.json",
232
+ "isSource": true,
233
+ "original": {
234
+ "$value": "{spacing-scale.6}",
235
+ "$type": "dimension",
236
+ "$description": "",
237
+ "$extensions": {
238
+ "com.figma.scope": [
239
+ "CORNER_RADIUS"
240
+ ]
241
+ },
242
+ "key": "{border.radius.3xl}"
243
+ },
244
+ "name": "BORDER_RADIUS_3XL",
245
+ "attributes": {},
246
+ "path": [
247
+ "border",
248
+ "radius",
249
+ "3xl"
250
+ ]
251
+ },
252
+ "full": {
253
+ "key": "{border.radius.full}",
254
+ "$value": "9999px",
255
+ "$type": "dimension",
256
+ "$description": "",
257
+ "$extensions": {
258
+ "com.figma.scope": [
259
+ "CORNER_RADIUS"
260
+ ]
261
+ },
262
+ "filePath": "src/tokens/constant/border.tokens.json",
263
+ "isSource": true,
264
+ "original": {
265
+ "$value": "9999px",
266
+ "$type": "dimension",
267
+ "$description": "",
268
+ "$extensions": {
269
+ "com.figma.scope": [
270
+ "CORNER_RADIUS"
271
+ ]
272
+ },
273
+ "key": "{border.radius.full}"
274
+ },
275
+ "name": "BORDER_RADIUS_FULL",
276
+ "attributes": {},
277
+ "path": [
278
+ "border",
279
+ "radius",
280
+ "full"
281
+ ]
282
+ },
283
+ "default": {
284
+ "key": "{border.radius.default}",
285
+ "$value": "0.25rem",
286
+ "$type": "dimension",
287
+ "$description": "",
288
+ "$extensions": {
289
+ "com.figma.scope": [
290
+ "CORNER_RADIUS"
291
+ ]
292
+ },
293
+ "filePath": "src/tokens/semantic/border.tokens.json",
294
+ "isSource": true,
295
+ "original": {
296
+ "$value": "{border.radius.md}",
297
+ "$type": "dimension",
298
+ "$description": "",
299
+ "$extensions": {
300
+ "com.figma.scope": [
301
+ "CORNER_RADIUS"
302
+ ]
303
+ },
304
+ "key": "{border.radius.default}"
305
+ },
306
+ "name": "BORDER_RADIUS_DEFAULT",
307
+ "attributes": {},
308
+ "path": [
309
+ "border",
310
+ "radius",
311
+ "default"
312
+ ]
313
+ }
314
+ },
315
+ "color": {
316
+ "default": {
317
+ "key": "{border.color.default}",
318
+ "$value": "#dcdcde",
319
+ "$type": "color",
320
+ "$description": "Used for the default border color.",
321
+ "$extensions": {
322
+ "com.figma.scope": [
323
+ "STROKE_COLOR"
324
+ ]
325
+ },
326
+ "filePath": "src/tokens/semantic/border.tokens.json",
327
+ "isSource": true,
328
+ "original": {
329
+ "$value": {
330
+ "default": "{color.neutral.100}",
331
+ "dark": "{color.neutral.700}"
332
+ },
333
+ "$type": "color",
334
+ "$description": "Used for the default border color.",
335
+ "$extensions": {
336
+ "com.figma.scope": [
337
+ "STROKE_COLOR"
338
+ ]
339
+ },
340
+ "key": "{border.color.default}"
341
+ },
342
+ "name": "BORDER_COLOR_DEFAULT",
343
+ "attributes": {},
344
+ "path": [
345
+ "border",
346
+ "color",
347
+ "default"
348
+ ]
349
+ },
350
+ "subtle": {
351
+ "key": "{border.color.subtle}",
352
+ "$value": "#ececef",
353
+ "$type": "color",
354
+ "$description": "Used for a subtle border in combination with the default background.",
355
+ "$extensions": {
356
+ "com.figma.scope": [
357
+ "STROKE_COLOR"
358
+ ]
359
+ },
360
+ "filePath": "src/tokens/semantic/border.tokens.json",
361
+ "isSource": true,
362
+ "original": {
363
+ "$value": {
364
+ "default": "{color.neutral.50}",
365
+ "dark": "{color.neutral.800}"
366
+ },
367
+ "$type": "color",
368
+ "$description": "Used for a subtle border in combination with the default background.",
369
+ "$extensions": {
370
+ "com.figma.scope": [
371
+ "STROKE_COLOR"
372
+ ]
373
+ },
374
+ "key": "{border.color.subtle}"
375
+ },
376
+ "name": "BORDER_COLOR_SUBTLE",
377
+ "attributes": {},
378
+ "path": [
379
+ "border",
380
+ "color",
381
+ "subtle"
382
+ ]
383
+ },
384
+ "strong": {
385
+ "key": "{border.color.strong}",
386
+ "$value": "#bfbfc3",
387
+ "$type": "color",
388
+ "$description": "Used for a distinct border that emphasizes an edge or boundaries.",
389
+ "$extensions": {
390
+ "com.figma.scope": [
391
+ "STROKE_COLOR"
392
+ ]
393
+ },
394
+ "filePath": "src/tokens/semantic/border.tokens.json",
395
+ "isSource": true,
396
+ "original": {
397
+ "$value": {
398
+ "default": "{color.neutral.200}",
399
+ "dark": "{color.neutral.600}"
400
+ },
401
+ "$type": "color",
402
+ "$description": "Used for a distinct border that emphasizes an edge or boundaries.",
403
+ "$extensions": {
404
+ "com.figma.scope": [
405
+ "STROKE_COLOR"
406
+ ]
407
+ },
408
+ "key": "{border.color.strong}"
409
+ },
410
+ "name": "BORDER_COLOR_STRONG",
411
+ "attributes": {},
412
+ "path": [
413
+ "border",
414
+ "color",
415
+ "strong"
416
+ ]
417
+ },
418
+ "section": {
419
+ "key": "{border.color.section}",
420
+ "$value": "#dcdcde",
421
+ "$type": "color",
422
+ "$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
423
+ "$extensions": {
424
+ "com.figma.scope": [
425
+ "STROKE_COLOR"
426
+ ]
427
+ },
428
+ "filePath": "src/tokens/semantic/border.tokens.json",
429
+ "isSource": true,
430
+ "original": {
431
+ "$value": {
432
+ "default": "{border.color.default}",
433
+ "dark": "{background.color.default}"
434
+ },
435
+ "$type": "color",
436
+ "$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
437
+ "$extensions": {
438
+ "com.figma.scope": [
439
+ "STROKE_COLOR"
440
+ ]
441
+ },
442
+ "key": "{border.color.section}"
443
+ },
444
+ "name": "BORDER_COLOR_SECTION",
445
+ "attributes": {},
446
+ "path": [
447
+ "border",
448
+ "color",
449
+ "section"
450
+ ]
451
+ },
452
+ "transparent": {
453
+ "key": "{border.color.transparent}",
454
+ "$value": "transparent",
455
+ "$type": "color",
456
+ "$description": "Used when a border needs to be present, but not visibly perceived.",
457
+ "$extensions": {
458
+ "com.figma.scope": [
459
+ "ALL_SCOPES"
460
+ ]
461
+ },
462
+ "filePath": "src/tokens/semantic/border.tokens.json",
463
+ "isSource": true,
464
+ "original": {
465
+ "$value": "{color.alpha.0}",
466
+ "$type": "color",
467
+ "$description": "Used when a border needs to be present, but not visibly perceived.",
468
+ "$extensions": {
469
+ "com.figma.scope": [
470
+ "ALL_SCOPES"
471
+ ]
472
+ },
473
+ "key": "{border.color.transparent}"
474
+ },
475
+ "name": "BORDER_COLOR_TRANSPARENT",
476
+ "attributes": {},
477
+ "path": [
478
+ "border",
479
+ "color",
480
+ "transparent"
481
+ ]
482
+ }
483
+ }
484
+ },
2
485
  "color": {
3
486
  "alpha": {
4
487
  "0": {
@@ -6724,6 +7207,39 @@
6724
7207
  }
6725
7208
  },
6726
7209
  "alert": {
7210
+ "border": {
7211
+ "radius": {
7212
+ "key": "{alert.border.radius}",
7213
+ "$value": "0.25rem",
7214
+ "$type": "dimension",
7215
+ "$description": "Used for alert border radius.",
7216
+ "$extensions": {
7217
+ "com.figma.scope": [
7218
+ "CORNER_RADIUS"
7219
+ ]
7220
+ },
7221
+ "filePath": "src/tokens/contextual/alert.tokens.json",
7222
+ "isSource": true,
7223
+ "original": {
7224
+ "$value": "{border.radius.default}",
7225
+ "$type": "dimension",
7226
+ "$description": "Used for alert border radius.",
7227
+ "$extensions": {
7228
+ "com.figma.scope": [
7229
+ "CORNER_RADIUS"
7230
+ ]
7231
+ },
7232
+ "key": "{alert.border.radius}"
7233
+ },
7234
+ "name": "ALERT_BORDER_RADIUS",
7235
+ "attributes": {},
7236
+ "path": [
7237
+ "alert",
7238
+ "border",
7239
+ "radius"
7240
+ ]
7241
+ }
7242
+ },
6727
7243
  "neutral": {
6728
7244
  "title": {
6729
7245
  "color": {
@@ -12969,6 +13485,38 @@
12969
13485
  "red"
12970
13486
  ]
12971
13487
  }
13488
+ },
13489
+ "radius": {
13490
+ "key": "{broadcast.banner.border.radius}",
13491
+ "$value": "0.25rem",
13492
+ "$type": "dimension",
13493
+ "$description": "Used for broadcast banner border radius.",
13494
+ "$extensions": {
13495
+ "com.figma.scope": [
13496
+ "CORNER_RADIUS"
13497
+ ]
13498
+ },
13499
+ "filePath": "src/tokens/contextual/broadcast.tokens.json",
13500
+ "isSource": true,
13501
+ "original": {
13502
+ "$value": "{border.radius.default}",
13503
+ "$type": "dimension",
13504
+ "$description": "Used for broadcast banner border radius.",
13505
+ "$extensions": {
13506
+ "com.figma.scope": [
13507
+ "CORNER_RADIUS"
13508
+ ]
13509
+ },
13510
+ "key": "{broadcast.banner.border.radius}"
13511
+ },
13512
+ "name": "BROADCAST_BANNER_BORDER_RADIUS",
13513
+ "attributes": {},
13514
+ "path": [
13515
+ "broadcast",
13516
+ "banner",
13517
+ "border",
13518
+ "radius"
13519
+ ]
12972
13520
  }
12973
13521
  },
12974
13522
  "icon": {
@@ -13662,6 +14210,39 @@
13662
14210
  }
13663
14211
  },
13664
14212
  "button": {
14213
+ "border": {
14214
+ "radius": {
14215
+ "key": "{button.border.radius}",
14216
+ "$value": "0.25rem",
14217
+ "$type": "dimension",
14218
+ "$description": "Used for button border radius.",
14219
+ "$extensions": {
14220
+ "com.figma.scope": [
14221
+ "CORNER_RADIUS"
14222
+ ]
14223
+ },
14224
+ "filePath": "src/tokens/contextual/button.tokens.json",
14225
+ "isSource": true,
14226
+ "original": {
14227
+ "$value": "{action.border.radius}",
14228
+ "$type": "dimension",
14229
+ "$description": "Used for button border radius.",
14230
+ "$extensions": {
14231
+ "com.figma.scope": [
14232
+ "CORNER_RADIUS"
14233
+ ]
14234
+ },
14235
+ "key": "{button.border.radius}"
14236
+ },
14237
+ "name": "BUTTON_BORDER_RADIUS",
14238
+ "attributes": {},
14239
+ "path": [
14240
+ "button",
14241
+ "border",
14242
+ "radius"
14243
+ ]
14244
+ }
14245
+ },
13665
14246
  "default": {
13666
14247
  "primary": {
13667
14248
  "foreground": {
@@ -18155,6 +18736,41 @@
18155
18736
  }
18156
18737
  }
18157
18738
  },
18739
+ "card": {
18740
+ "border": {
18741
+ "radius": {
18742
+ "key": "{card.border.radius}",
18743
+ "$value": "0.25rem",
18744
+ "$type": "dimension",
18745
+ "$description": "Used for card border radius.",
18746
+ "$extensions": {
18747
+ "com.figma.scope": [
18748
+ "CORNER_RADIUS"
18749
+ ]
18750
+ },
18751
+ "filePath": "src/tokens/contextual/card.tokens.json",
18752
+ "isSource": true,
18753
+ "original": {
18754
+ "$value": "{border.radius.default}",
18755
+ "$type": "dimension",
18756
+ "$description": "Used for card border radius.",
18757
+ "$extensions": {
18758
+ "com.figma.scope": [
18759
+ "CORNER_RADIUS"
18760
+ ]
18761
+ },
18762
+ "key": "{card.border.radius}"
18763
+ },
18764
+ "name": "CARD_BORDER_RADIUS",
18765
+ "attributes": {},
18766
+ "path": [
18767
+ "card",
18768
+ "border",
18769
+ "radius"
18770
+ ]
18771
+ }
18772
+ }
18773
+ },
18158
18774
  "chart": {
18159
18775
  "axis": {
18160
18776
  "pointer": {
@@ -18563,6 +19179,37 @@
18563
19179
  "border",
18564
19180
  "color"
18565
19181
  ]
19182
+ },
19183
+ "radius": {
19184
+ "key": "{dropdown.border.radius}",
19185
+ "$value": "0.5rem",
19186
+ "$type": "dimension",
19187
+ "$description": "Used for the border radius of a dropdown.",
19188
+ "$extensions": {
19189
+ "com.figma.scope": [
19190
+ "CORNER_RADIUS"
19191
+ ]
19192
+ },
19193
+ "filePath": "src/tokens/contextual/dropdown.tokens.json",
19194
+ "isSource": true,
19195
+ "original": {
19196
+ "$value": "{border.radius.lg}",
19197
+ "$type": "dimension",
19198
+ "$description": "Used for the border radius of a dropdown.",
19199
+ "$extensions": {
19200
+ "com.figma.scope": [
19201
+ "CORNER_RADIUS"
19202
+ ]
19203
+ },
19204
+ "key": "{dropdown.border.radius}"
19205
+ },
19206
+ "name": "DROPDOWN_BORDER_RADIUS",
19207
+ "attributes": {},
19208
+ "path": [
19209
+ "dropdown",
19210
+ "border",
19211
+ "radius"
19212
+ ]
18566
19213
  }
18567
19214
  },
18568
19215
  "divider": {
@@ -21438,6 +22085,41 @@
21438
22085
  }
21439
22086
  }
21440
22087
  },
22088
+ "modal": {
22089
+ "border": {
22090
+ "radius": {
22091
+ "key": "{modal.border.radius}",
22092
+ "$value": "0.25rem",
22093
+ "$type": "dimension",
22094
+ "$description": "Used for modal border radius.",
22095
+ "$extensions": {
22096
+ "com.figma.scope": [
22097
+ "CORNER_RADIUS"
22098
+ ]
22099
+ },
22100
+ "filePath": "src/tokens/contextual/modal.tokens.json",
22101
+ "isSource": true,
22102
+ "original": {
22103
+ "$value": "{border.radius.default}",
22104
+ "$type": "dimension",
22105
+ "$description": "Used for modal border radius.",
22106
+ "$extensions": {
22107
+ "com.figma.scope": [
22108
+ "CORNER_RADIUS"
22109
+ ]
22110
+ },
22111
+ "key": "{modal.border.radius}"
22112
+ },
22113
+ "name": "MODAL_BORDER_RADIUS",
22114
+ "attributes": {},
22115
+ "path": [
22116
+ "modal",
22117
+ "border",
22118
+ "radius"
22119
+ ]
22120
+ }
22121
+ }
22122
+ },
21441
22123
  "progress-bar": {
21442
22124
  "indicator": {
21443
22125
  "color": {
@@ -29826,6 +30508,39 @@
29826
30508
  }
29827
30509
  },
29828
30510
  "action": {
30511
+ "border": {
30512
+ "radius": {
30513
+ "key": "{action.border.radius}",
30514
+ "$value": "0.25rem",
30515
+ "$type": "dimension",
30516
+ "$description": "Used for the border radius of an action.",
30517
+ "$extensions": {
30518
+ "com.figma.scope": [
30519
+ "CORNER_RADIUS"
30520
+ ]
30521
+ },
30522
+ "filePath": "src/tokens/semantic/action.tokens.json",
30523
+ "isSource": true,
30524
+ "original": {
30525
+ "$value": "{border.radius.default}",
30526
+ "$type": "dimension",
30527
+ "$description": "Used for the border radius of an action.",
30528
+ "$extensions": {
30529
+ "com.figma.scope": [
30530
+ "CORNER_RADIUS"
30531
+ ]
30532
+ },
30533
+ "key": "{action.border.radius}"
30534
+ },
30535
+ "name": "ACTION_BORDER_RADIUS",
30536
+ "attributes": {},
30537
+ "path": [
30538
+ "action",
30539
+ "border",
30540
+ "radius"
30541
+ ]
30542
+ }
30543
+ },
29829
30544
  "disabled": {
29830
30545
  "foreground": {
29831
30546
  "color": {
@@ -32875,177 +33590,6 @@
32875
33590
  }
32876
33591
  }
32877
33592
  },
32878
- "border": {
32879
- "color": {
32880
- "default": {
32881
- "key": "{border.color.default}",
32882
- "$value": "#dcdcde",
32883
- "$type": "color",
32884
- "$description": "Used for the default border color.",
32885
- "$extensions": {
32886
- "com.figma.scope": [
32887
- "STROKE_COLOR"
32888
- ]
32889
- },
32890
- "filePath": "src/tokens/semantic/border.tokens.json",
32891
- "isSource": true,
32892
- "original": {
32893
- "$value": {
32894
- "default": "{color.neutral.100}",
32895
- "dark": "{color.neutral.700}"
32896
- },
32897
- "$type": "color",
32898
- "$description": "Used for the default border color.",
32899
- "$extensions": {
32900
- "com.figma.scope": [
32901
- "STROKE_COLOR"
32902
- ]
32903
- },
32904
- "key": "{border.color.default}"
32905
- },
32906
- "name": "BORDER_COLOR_DEFAULT",
32907
- "attributes": {},
32908
- "path": [
32909
- "border",
32910
- "color",
32911
- "default"
32912
- ]
32913
- },
32914
- "subtle": {
32915
- "key": "{border.color.subtle}",
32916
- "$value": "#ececef",
32917
- "$type": "color",
32918
- "$description": "Used for a subtle border in combination with the default background.",
32919
- "$extensions": {
32920
- "com.figma.scope": [
32921
- "STROKE_COLOR"
32922
- ]
32923
- },
32924
- "filePath": "src/tokens/semantic/border.tokens.json",
32925
- "isSource": true,
32926
- "original": {
32927
- "$value": {
32928
- "default": "{color.neutral.50}",
32929
- "dark": "{color.neutral.800}"
32930
- },
32931
- "$type": "color",
32932
- "$description": "Used for a subtle border in combination with the default background.",
32933
- "$extensions": {
32934
- "com.figma.scope": [
32935
- "STROKE_COLOR"
32936
- ]
32937
- },
32938
- "key": "{border.color.subtle}"
32939
- },
32940
- "name": "BORDER_COLOR_SUBTLE",
32941
- "attributes": {},
32942
- "path": [
32943
- "border",
32944
- "color",
32945
- "subtle"
32946
- ]
32947
- },
32948
- "strong": {
32949
- "key": "{border.color.strong}",
32950
- "$value": "#bfbfc3",
32951
- "$type": "color",
32952
- "$description": "Used for a distinct border that emphasizes an edge or boundaries.",
32953
- "$extensions": {
32954
- "com.figma.scope": [
32955
- "STROKE_COLOR"
32956
- ]
32957
- },
32958
- "filePath": "src/tokens/semantic/border.tokens.json",
32959
- "isSource": true,
32960
- "original": {
32961
- "$value": {
32962
- "default": "{color.neutral.200}",
32963
- "dark": "{color.neutral.600}"
32964
- },
32965
- "$type": "color",
32966
- "$description": "Used for a distinct border that emphasizes an edge or boundaries.",
32967
- "$extensions": {
32968
- "com.figma.scope": [
32969
- "STROKE_COLOR"
32970
- ]
32971
- },
32972
- "key": "{border.color.strong}"
32973
- },
32974
- "name": "BORDER_COLOR_STRONG",
32975
- "attributes": {},
32976
- "path": [
32977
- "border",
32978
- "color",
32979
- "strong"
32980
- ]
32981
- },
32982
- "section": {
32983
- "key": "{border.color.section}",
32984
- "$value": "#dcdcde",
32985
- "$type": "color",
32986
- "$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
32987
- "$extensions": {
32988
- "com.figma.scope": [
32989
- "STROKE_COLOR"
32990
- ]
32991
- },
32992
- "filePath": "src/tokens/semantic/border.tokens.json",
32993
- "isSource": true,
32994
- "original": {
32995
- "$value": {
32996
- "default": "{border.color.default}",
32997
- "dark": "{background.color.default}"
32998
- },
32999
- "$type": "color",
33000
- "$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
33001
- "$extensions": {
33002
- "com.figma.scope": [
33003
- "STROKE_COLOR"
33004
- ]
33005
- },
33006
- "key": "{border.color.section}"
33007
- },
33008
- "name": "BORDER_COLOR_SECTION",
33009
- "attributes": {},
33010
- "path": [
33011
- "border",
33012
- "color",
33013
- "section"
33014
- ]
33015
- },
33016
- "transparent": {
33017
- "key": "{border.color.transparent}",
33018
- "$value": "transparent",
33019
- "$type": "color",
33020
- "$description": "Used when a border needs to be present, but not visibly perceived.",
33021
- "$extensions": {
33022
- "com.figma.scope": [
33023
- "ALL_SCOPES"
33024
- ]
33025
- },
33026
- "filePath": "src/tokens/semantic/border.tokens.json",
33027
- "isSource": true,
33028
- "original": {
33029
- "$value": "{color.alpha.0}",
33030
- "$type": "color",
33031
- "$description": "Used when a border needs to be present, but not visibly perceived.",
33032
- "$extensions": {
33033
- "com.figma.scope": [
33034
- "ALL_SCOPES"
33035
- ]
33036
- },
33037
- "key": "{border.color.transparent}"
33038
- },
33039
- "name": "BORDER_COLOR_TRANSPARENT",
33040
- "attributes": {},
33041
- "path": [
33042
- "border",
33043
- "color",
33044
- "transparent"
33045
- ]
33046
- }
33047
- }
33048
- },
33049
33593
  "control": {
33050
33594
  "background": {
33051
33595
  "color": {
@@ -33602,6 +34146,37 @@
33602
34146
  ]
33603
34147
  }
33604
34148
  }
34149
+ },
34150
+ "radius": {
34151
+ "key": "{control.border.radius}",
34152
+ "$value": "0.25rem",
34153
+ "$type": "dimension",
34154
+ "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
34155
+ "$extensions": {
34156
+ "com.figma.scope": [
34157
+ "CORNER_RADIUS"
34158
+ ]
34159
+ },
34160
+ "filePath": "src/tokens/semantic/control.tokens.json",
34161
+ "isSource": true,
34162
+ "original": {
34163
+ "$value": "{border.radius.default}",
34164
+ "$type": "dimension",
34165
+ "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
34166
+ "$extensions": {
34167
+ "com.figma.scope": [
34168
+ "CORNER_RADIUS"
34169
+ ]
34170
+ },
34171
+ "key": "{control.border.radius}"
34172
+ },
34173
+ "name": "CONTROL_BORDER_RADIUS",
34174
+ "attributes": {},
34175
+ "path": [
34176
+ "control",
34177
+ "border",
34178
+ "radius"
34179
+ ]
33605
34180
  }
33606
34181
  },
33607
34182
  "text": {