@gitlab/ui 86.14.4 → 87.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/index.css +2 -2
  3. package/dist/index.css.map +1 -1
  4. package/dist/tokens/build/js/tokens.dark.js +40 -98
  5. package/dist/tokens/build/js/tokens.js +40 -98
  6. package/dist/tokens/css/tokens.css +39 -97
  7. package/dist/tokens/css/tokens.dark.css +39 -97
  8. package/dist/tokens/js/tokens.dark.js +39 -97
  9. package/dist/tokens/js/tokens.js +39 -97
  10. package/dist/tokens/json/tokens.dark.json +378 -1896
  11. package/dist/tokens/json/tokens.json +380 -1898
  12. package/dist/tokens/scss/_tokens.dark.scss +39 -97
  13. package/dist/tokens/scss/_tokens.scss +39 -97
  14. package/dist/tokens/scss/_tokens_custom_properties.scss +15 -73
  15. package/package.json +2 -2
  16. package/src/components/base/broadcast_message/broadcast_message.scss +1 -1
  17. package/src/components/base/button/button.scss +2 -2
  18. package/src/components/base/card/card.scss +4 -4
  19. package/src/components/base/carousel/carousel.scss +1 -2
  20. package/src/components/base/datepicker/datepicker.scss +1 -1
  21. package/src/components/base/daterange_picker/daterange_picker.scss +1 -1
  22. package/src/components/base/drawer/drawer.scss +5 -8
  23. package/src/components/base/dropdown/dropdown.scss +6 -13
  24. package/src/components/base/dropdown/dropdown_divider.scss +1 -3
  25. package/src/components/base/dropdown/dropdown_item.scss +2 -2
  26. package/src/components/base/filtered_search/filtered_search.scss +2 -2
  27. package/src/components/base/filtered_search/filtered_search_suggestion_list.scss +1 -1
  28. package/src/components/base/filtered_search/filtered_search_term.scss +1 -1
  29. package/src/components/base/filtered_search/filtered_search_token_segment.scss +1 -1
  30. package/src/components/base/form/form_input/form_input.scss +1 -1
  31. package/src/components/base/form/form_select/form_select.scss +1 -1
  32. package/src/components/base/label/label.scss +1 -1
  33. package/src/components/base/loading_icon/loading_icon.scss +1 -1
  34. package/src/components/base/modal/modal.scss +3 -3
  35. package/src/components/base/new_dropdowns/dropdown.scss +1 -3
  36. package/src/components/base/new_dropdowns/dropdown_item.scss +3 -3
  37. package/src/components/base/new_dropdowns/listbox/listbox.scss +1 -1
  38. package/src/components/base/pagination/pagination.scss +3 -3
  39. package/src/components/base/path/path.scss +1 -1
  40. package/src/components/base/popover/popover.scss +2 -4
  41. package/src/components/base/search_box_by_click/search_box_by_click.scss +1 -1
  42. package/src/components/base/search_box_by_type/search_box_by_type.scss +1 -1
  43. package/src/components/base/table/table.scss +4 -9
  44. package/src/components/base/tabs/tabs/tabs.scss +2 -5
  45. package/src/components/base/toggle/toggle.scss +1 -1
  46. package/src/components/base/tooltip/tooltip.scss +5 -5
  47. package/src/components/experimental/duo/chat/duo_chat.scss +2 -6
  48. package/src/components/shared_components/clear_icon_button/clear_icon_button.scss +1 -1
  49. package/src/tokens/action.tokens.json +101 -654
  50. package/src/tokens/build/css/tokens.css +39 -97
  51. package/src/tokens/build/css/tokens.dark.css +39 -97
  52. package/src/tokens/build/js/tokens.dark.js +39 -97
  53. package/src/tokens/build/js/tokens.js +39 -97
  54. package/src/tokens/build/json/tokens.dark.json +378 -1896
  55. package/src/tokens/build/json/tokens.json +380 -1898
  56. package/src/tokens/build/scss/_tokens.dark.scss +39 -97
  57. package/src/tokens/build/scss/_tokens.scss +39 -97
  58. package/src/tokens/build/scss/_tokens_custom_properties.scss +15 -73
package/src/tokens/action.tokens.json CHANGED
@@ -1,8 +1,18 @@
1
1
  {
2
2
  "action": {
3
- "background": {
4
- "color": {
5
- "disabled": {
3
+ "disabled": {
4
+ "foreground": {
5
+ "color": {
6
+ "$value": {
7
+ "default": "{color.neutral.400}",
8
+ "dark": "{color.neutral.500}"
9
+ },
10
+ "$type": "color",
11
+ "$description": "Used for the foreground of a disabled action."
12
+ }
13
+ },
14
+ "background": {
15
+ "color": {
6
16
  "$value": {
7
17
  "default": "{color.neutral.50}",
8
18
  "dark": "{color.neutral.900}"
@@ -10,11 +20,9 @@
10
20
  "$type": "color",
11
21
  "$description": "Used for the background of a disabled action."
12
22
  }
13
- }
14
- },
15
- "border": {
16
- "color": {
17
- "disabled": {
23
+ },
24
+ "border": {
25
+ "color": {
18
26
  "$value": {
19
27
  "default": "{color.neutral.100}",
20
28
  "dark": "{color.neutral.800}"
@@ -24,410 +32,94 @@
24
32
  }
25
33
  }
26
34
  },
27
- "text": {
28
- "color": {
29
- "disabled": {
30
- "$value": {
31
- "default": "{color.neutral.500}",
32
- "dark": "{color.neutral.400}"
33
- },
34
- "$type": "color",
35
- "$description": "Used for the text of a disabled action."
36
- }
37
- }
38
- },
39
- "icon": {
40
- "color": {
41
- "disabled": {
42
- "$value": {
43
- "default": "{color.neutral.400}",
44
- "dark": "{color.neutral.500}"
45
- },
46
- "$type": "color",
47
- "$description": "Used for the icon of a disabled action."
48
- }
49
- }
50
- },
51
35
  "neutral": {
52
- "background": {
53
- "color": {
54
- "default": {
55
- "$value": {
56
- "default": "{color.neutral.0}",
57
- "dark": "{color.neutral.900}"
58
- },
59
- "$type": "color",
60
- "$description": "Used for the background of an outlined neutral action in the default state."
61
- },
62
- "hover": {
63
- "$value": {
64
- "default": "{color.neutral.50}",
65
- "dark": "{color.neutral.900}"
66
- },
67
- "$type": "color",
68
- "$description": "Used for the background of an outlined neutral action in the hover state."
69
- },
70
- "focus": {
71
- "$value": {
72
- "default": "{color.neutral.50}",
73
- "dark": "{color.neutral.900}"
74
- },
75
- "$type": "color",
76
- "$description": "Used for the background of an outlined neutral action in the focus state."
77
- },
78
- "active": {
79
- "$value": {
80
- "default": "{color.neutral.100}",
81
- "dark": "{color.neutral.800}"
82
- },
83
- "$type": "color",
84
- "$description": "Used for the background of an outlined neutral action in the active state."
85
- },
86
- "subtle": {
87
- "default": {
88
- "$value": "{color.alpha.0}",
89
- "$type": "color",
90
- "$description": "Used for the background of a borderless, subtle neutral action in the default state."
91
- },
92
- "hover": {
93
- "$value": {
94
- "default": "{color.neutral.50}",
95
- "dark": "{color.neutral.900}"
96
- },
97
- "$type": "color",
98
- "$description": "Used for the background of a borderless, subtle neutral action in the hover state."
99
- },
100
- "focus": {
101
- "$value": {
102
- "default": "{color.neutral.50}",
103
- "dark": "{color.neutral.900}"
104
- },
105
- "$type": "color",
106
- "$description": "Used for the background of a borderless, subtle neutral action in the focus state."
107
- },
108
- "active": {
109
- "$value": {
110
- "default": "{color.neutral.100}",
111
- "dark": "{color.neutral.800}"
112
- },
113
- "$type": "color",
114
- "$description": "Used for the background of a borderless, subtle neutral action in the active state."
115
- }
116
- },
117
- "strong": {
118
- "default": {
119
- "$value": {
120
- "default": "{color.neutral.500}",
121
- "dark": "{color.neutral.400}"
122
- },
123
- "$type": "color",
124
- "$description": "Used for the background of a solid, strong neutral action in the default state."
125
- },
126
- "hover": {
127
- "$value": {
128
- "default": "{color.neutral.600}",
129
- "dark": "{color.neutral.300}"
130
- },
131
- "$type": "color",
132
- "$description": "Used for the background of a solid, strong neutral action in the hover state."
133
- },
134
- "focus": {
135
- "$value": {
136
- "default": "{color.neutral.600}",
137
- "dark": "{color.neutral.300}"
138
- },
139
- "$type": "color",
140
- "$description": "Used for the background of a solid, strong neutral action in the focus state."
141
- },
142
- "active": {
143
- "$value": {
144
- "default": "{color.neutral.700}",
145
- "dark": "{color.neutral.200}"
146
- },
147
- "$type": "color",
148
- "$description": "Used for the background of a solid, strong neutral action in the active state."
149
- }
150
- }
151
- }
152
- },
153
- "border": {
36
+ "foreground": {
154
37
  "color": {
155
38
  "default": {
156
39
  "$value": {
157
- "default": "{color.neutral.200}",
158
- "dark": "{color.neutral.700}"
40
+ "default": "{color.neutral.900}",
41
+ "dark": "{color.neutral.50}"
159
42
  },
160
43
  "$type": "color",
161
- "$description": "Used for the border of an outlined neutral action in the default state."
44
+ "$description": "Used for the foreground of outlined and borderless neutral actions."
162
45
  },
163
46
  "hover": {
164
- "$value": {
165
- "default": "{color.neutral.400}",
166
- "dark": "{color.neutral.500}"
167
- },
47
+ "$value": "{action.neutral.foreground.color.default}",
168
48
  "$type": "color",
169
- "$description": "Used for the border of an outlined neutral action in the hover state."
49
+ "$description": "Used for the foreground of a neutral action in the hover state."
170
50
  },
171
51
  "focus": {
172
- "$value": {
173
- "default": "{color.neutral.400}",
174
- "dark": "{color.neutral.500}"
175
- },
52
+ "$value": "{action.neutral.foreground.color.default}",
176
53
  "$type": "color",
177
- "$description": "Used for the border of an outlined neutral action in the focus state."
54
+ "$description": "Used for the foreground of a neutral action in the focus state."
178
55
  },
179
56
  "active": {
180
- "$value": {
181
- "default": "{color.neutral.600}",
182
- "dark": "{color.neutral.300}"
183
- },
57
+ "$value": "{action.neutral.foreground.color.default}",
184
58
  "$type": "color",
185
- "$description": "Used for the border of an outlined neutral action in the active state."
186
- },
187
- "selected": {
188
- "$value": {
189
- "default": "{color.neutral.300}",
190
- "dark": "{color.neutral.700}"
191
- },
192
- "$type": "color",
193
- "$description": "Used for the border of a outlined neutral action when in a selected or current state."
194
- },
195
- "strong": {
196
- "default": {
197
- "$value": {
198
- "default": "{color.neutral.600}",
199
- "dark": "{color.neutral.300}"
200
- },
201
- "$type": "color",
202
- "$description": "Used for the border of a solid, strong neutral action in the default state."
203
- },
204
- "hover": {
205
- "$value": {
206
- "default": "{color.neutral.800}",
207
- "dark": "{color.neutral.100}"
208
- },
209
- "$type": "color",
210
- "$description": "Used for the border of a solid, strong neutral action in the hover state."
211
- },
212
- "focus": {
213
- "$value": {
214
- "default": "{color.neutral.800}",
215
- "dark": "{color.neutral.100}"
216
- },
217
- "$type": "color",
218
- "$description": "Used for the border of a solid, strong neutral action in the focus state."
219
- },
220
- "active": {
221
- "$value": {
222
- "default": "{color.neutral.900}",
223
- "dark": "{color.neutral.50}"
224
- },
225
- "$type": "color",
226
- "$description": "Used for the border of a solid, strong neutral action in the active state."
227
- }
59
+ "$description": "Used for the foreground of a neutral action in the active state."
228
60
  }
229
61
  }
230
62
  },
231
- "text": {
63
+ "background": {
232
64
  "color": {
233
65
  "default": {
234
66
  "$value": {
235
- "default": "{color.neutral.900}",
236
- "dark": "{color.neutral.50}"
67
+ "default": "rgba(164, 163, 168, 0.0)",
68
+ "dark": "rgba(137, 136, 141, 0.0)"
237
69
  },
238
70
  "$type": "color",
239
- "$description": "Used for the text of outlined and borderless neutral actions."
71
+ "$description": "Used for the background of a neutral action in the default state."
240
72
  },
241
73
  "hover": {
242
74
  "$value": {
243
- "default": "{color.neutral.900}",
244
- "dark": "{color.neutral.50}"
75
+ "default": "rgba(164, 163, 168, 0.16)",
76
+ "dark": "rgba(137, 136, 141, 0.4)"
245
77
  },
246
78
  "$type": "color",
247
- "$description": "Used for the text of a neutral action in the hover state."
79
+ "$description": "Used for the background of a neutral action in the hover state."
248
80
  },
249
81
  "focus": {
250
- "$value": {
251
- "default": "{color.neutral.900}",
252
- "dark": "{color.neutral.50}"
253
- },
82
+ "$value": "{action.neutral.background.color.hover}",
254
83
  "$type": "color",
255
- "$description": "Used for the text of a neutral action in the focus state."
84
+ "$description": "Used for the background of a neutral action in the focus state."
256
85
  },
257
86
  "active": {
258
87
  "$value": {
259
- "default": "{color.neutral.900}",
260
- "dark": "{color.neutral.50}"
261
- },
262
- "$type": "color",
263
- "$description": "Used for the text of a neutral action in the active state."
264
- },
265
- "strong": {
266
- "$value": {
267
- "default": "{color.neutral.0}",
268
- "dark": "{color.neutral.900}"
88
+ "default": "rgba(83, 81, 88, 0.24)",
89
+ "dark": "rgba(137, 136, 141, 0.16)"
269
90
  },
270
91
  "$type": "color",
271
- "$description": "Used for the text on a solid, strong neutral action background."
92
+ "$description": "Used for the background of a neutral action in the active state."
272
93
  }
273
94
  }
274
95
  },
275
- "icon": {
96
+ "border": {
276
97
  "color": {
277
98
  "default": {
278
- "$value": {
279
- "default": "{color.neutral.500}",
280
- "dark": "{color.neutral.400}"
281
- },
99
+ "$value": "{color.alpha.0}",
282
100
  "$type": "color",
283
- "$description": "Used for the icon of outlined and borderless neutral actions."
101
+ "$description": "Used for the border of a neutral action in the default state."
284
102
  },
285
103
  "hover": {
286
- "$value": {
287
- "default": "{color.neutral.700}",
288
- "dark": "{color.neutral.200}"
289
- },
104
+ "$value": "{action.neutral.border.color.default}",
290
105
  "$type": "color",
291
- "$description": "Used for the icon of outlined and borderless neutral actions in the hover state."
106
+ "$description": "Used for the border of a neutral action in the hover state."
292
107
  },
293
108
  "focus": {
294
- "$value": {
295
- "default": "{color.neutral.700}",
296
- "dark": "{color.neutral.200}"
297
- },
109
+ "$value": "{action.neutral.border.color.default}",
298
110
  "$type": "color",
299
- "$description": "Used for the icon of outlined and borderless neutral actions in the focus state."
111
+ "$description": "Used for the border of a neutral action in the focus state."
300
112
  },
301
113
  "active": {
302
- "$value": {
303
- "default": "{color.neutral.900}",
304
- "dark": "{color.neutral.50}"
305
- },
306
- "$type": "color",
307
- "$description": "Used for the icon of outlined and borderless neutral actions in the active state."
308
- },
309
- "strong": {
310
- "$value": {
311
- "default": "{color.neutral.0}",
312
- "dark": "{color.neutral.900}"
313
- },
114
+ "$value": "{action.neutral.border.color.default}",
314
115
  "$type": "color",
315
- "$description": "Used for the icon on a solid, strong neutral action background."
116
+ "$description": "Used for the border of a neutral action in the active state."
316
117
  }
317
118
  }
318
119
  }
319
120
  },
320
121
  "confirm": {
321
- "background": {
322
- "color": {
323
- "default": {
324
- "$value": {
325
- "default": "{color.neutral.0}",
326
- "dark": "{color.neutral.900}"
327
- },
328
- "$type": "color",
329
- "$description": "Used for the background of an outlined confirm (positive) action in the default state."
330
- },
331
- "hover": {
332
- "$value": {
333
- "default": "{color.blue.50}",
334
- "dark": "{color.blue.900}"
335
- },
336
- "$type": "color",
337
- "$description": "Used for the background of an outlined confirm (positive) action in the hover state."
338
- },
339
- "focus": {
340
- "$value": {
341
- "default": "{color.blue.50}",
342
- "dark": "{color.blue.900}"
343
- },
344
- "$type": "color",
345
- "$description": "Used for the background of an outlined confirm (positive) action in the focus state."
346
- },
347
- "active": {
348
- "$value": {
349
- "default": "{color.blue.100}",
350
- "dark": "{color.blue.800}"
351
- },
352
- "$type": "color",
353
- "$description": "Used for the background of an outlined confirm (positive) action in the active state."
354
- },
355
- "subtle": {
356
- "default": {
357
- "$value": "{color.alpha.0}",
358
- "$type": "color",
359
- "$description": "Used for the background of a borderless, subtle confirm (positive) action in the default state."
360
- },
361
- "hover": {
362
- "$value": {
363
- "default": "{color.blue.50}",
364
- "dark": "{color.blue.900}"
365
- },
366
- "$type": "color",
367
- "$description": "Used for the background of a borderless, subtle confirm (positive) action in the hover state."
368
- },
369
- "focus": {
370
- "$value": {
371
- "default": "{color.blue.50}",
372
- "dark": "{color.blue.900}"
373
- },
374
- "$type": "color",
375
- "$description": "Used for the background of a borderless, subtle confirm (positive) action in the focus state."
376
- },
377
- "active": {
378
- "$value": {
379
- "default": "{color.blue.100}",
380
- "dark": "{color.blue.800}"
381
- },
382
- "$type": "color",
383
- "$description": "Used for the background of a borderless, subtle confirm (positive) action in the active state."
384
- }
385
- },
386
- "strong": {
387
- "default": {
388
- "$value": {
389
- "default": "{color.blue.500}",
390
- "dark": "{color.blue.400}"
391
- },
392
- "$type": "color",
393
- "$description": "Used for the background of a solid, strong confirm (positive) action in the default state."
394
- },
395
- "hover": {
396
- "$value": {
397
- "default": "{color.blue.600}",
398
- "dark": "{color.blue.300}"
399
- },
400
- "$type": "color",
401
- "$description": "Used for the background of a solid, strong confirm (positive) action in the hover state."
402
- },
403
- "focus": {
404
- "$value": {
405
- "default": "{color.blue.600}",
406
- "dark": "{color.blue.300}"
407
- },
408
- "$type": "color",
409
- "$description": "Used for the background of a solid, strong confirm (positive) action in the focus state."
410
- },
411
- "active": {
412
- "$value": {
413
- "default": "{color.blue.700}",
414
- "dark": "{color.blue.200}"
415
- },
416
- "$type": "color",
417
- "$description": "Used for the background of a solid, strong confirm (positive) action in the active state."
418
- },
419
- "selected": {
420
- "$value": {
421
- "default": "{color.blue.500}",
422
- "dark": "{color.blue.400}"
423
- },
424
- "$type": "color",
425
- "$description": "Used for the background of a solid, strong confirm (positive) action when in a selected or current state."
426
- }
427
- }
428
- }
429
- },
430
- "border": {
122
+ "foreground": {
431
123
  "color": {
432
124
  "default": {
433
125
  "$value": {
@@ -435,7 +127,7 @@
435
127
  "dark": "{color.blue.400}"
436
128
  },
437
129
  "$type": "color",
438
- "$description": "Used for the border of an outlined confirm (positive) action in the default state."
130
+ "$description": "Used for the foreground of a confirm (positive) action in the default state."
439
131
  },
440
132
  "hover": {
441
133
  "$value": {
@@ -443,15 +135,12 @@
443
135
  "dark": "{color.blue.200}"
444
136
  },
445
137
  "$type": "color",
446
- "$description": "Used for the border of an outlined confirm (positive) action in the hover state."
138
+ "$description": "Used for the foreground of a confirm (positive) action in the hover state."
447
139
  },
448
140
  "focus": {
449
- "$value": {
450
- "default": "{color.blue.700}",
451
- "dark": "{color.blue.200}"
452
- },
141
+ "$value": "{action.confirm.foreground.color.hover}",
453
142
  "$type": "color",
454
- "$description": "Used for the border of an outlined confirm (positive) action in the focus state."
143
+ "$description": "Used for the foreground of a confirm (positive) action in the focus state."
455
144
  },
456
145
  "active": {
457
146
  "$value": {
@@ -459,244 +148,70 @@
459
148
  "dark": "{color.blue.50}"
460
149
  },
461
150
  "$type": "color",
462
- "$description": "Used for the border of an outlined confirm (positive) action in the active state."
463
- },
464
- "strong": {
465
- "default": {
466
- "$value": {
467
- "default": "{color.blue.600}",
468
- "dark": "{color.blue.300}"
469
- },
470
- "$type": "color",
471
- "$description": "Used for the border of a solid, strong confirm (positive) action in the default state."
472
- },
473
- "hover": {
474
- "$value": {
475
- "default": "{color.blue.800}",
476
- "dark": "{color.blue.100}"
477
- },
478
- "$type": "color",
479
- "$description": "Used for the border of a solid, strong confirm (positive) action in the hover state."
480
- },
481
- "focus": {
482
- "$value": {
483
- "default": "{color.blue.800}",
484
- "dark": "{color.blue.100}"
485
- },
486
- "$type": "color",
487
- "$description": "Used for the border of a solid, strong confirm (positive) action in the focus state."
488
- },
489
- "active": {
490
- "$value": {
491
- "default": "{color.blue.900}",
492
- "dark": "{color.blue.50}"
493
- },
494
- "$type": "color",
495
- "$description": "Used for the border of a solid, strong confirm (positive) action in the active state."
496
- },
497
- "selected": {
498
- "$value": {
499
- "default": "{color.blue.600}",
500
- "dark": "{color.blue.300}"
501
- },
502
- "$type": "color",
503
- "$description": "Used for the border of a solid, strong confirm (positive) action when in a selected or current state."
504
- }
151
+ "$description": "Used for the foreground of a confirm (positive) action in the active state."
505
152
  }
506
153
  }
507
154
  },
508
- "text": {
155
+ "background": {
509
156
  "color": {
510
157
  "default": {
511
158
  "$value": {
512
- "default": "{color.blue.500}",
513
- "dark": "{color.blue.400}"
159
+ "default": "rgba(99, 166, 233, 0.0)",
160
+ "dark": "rgba(66, 143, 220, 0.0)"
514
161
  },
515
162
  "$type": "color",
516
- "$description": "Used for the text of a confirm (positive) action in the default state."
163
+ "$description": "Used for the background of a confirm (positive) action in the default state."
517
164
  },
518
165
  "hover": {
519
166
  "$value": {
520
- "default": "{color.blue.700}",
521
- "dark": "{color.blue.200}"
167
+ "default": "rgba(99, 166, 233, 0.16)",
168
+ "dark": "rgba(66, 143, 220, 0.4)"
522
169
  },
523
170
  "$type": "color",
524
- "$description": "Used for the text of a confirm (positive) action in the hover state."
171
+ "$description": "Used for the background of a confirm (positive) action in the hover state."
525
172
  },
526
173
  "focus": {
527
- "$value": {
528
- "default": "{color.blue.700}",
529
- "dark": "{color.blue.200}"
530
- },
174
+ "$value": "{action.confirm.background.color.hover}",
531
175
  "$type": "color",
532
- "$description": "Used for the text of a confirm (positive) action in the focus state."
176
+ "$description": "Used for the background of a confirm (positive) action in the focus state."
533
177
  },
534
178
  "active": {
535
179
  "$value": {
536
- "default": "{color.blue.900}",
537
- "dark": "{color.blue.50}"
538
- },
539
- "$type": "color",
540
- "$description": "Used for the text of a confirm (positive) action in the active state."
541
- },
542
- "strong": {
543
- "$value": {
544
- "default": "{color.neutral.0}",
545
- "dark": "{color.neutral.900}"
180
+ "default": "rgba(11, 92, 173, 0.24)",
181
+ "dark": "rgba(66, 143, 220, 0.16)"
546
182
  },
547
183
  "$type": "color",
548
- "$description": "Used for the text on a solid, strong confirm (positive) action background."
184
+ "$description": "Used for the background of a confirm (positive) action in the active state."
549
185
  }
550
186
  }
551
187
  },
552
- "icon": {
188
+ "border": {
553
189
  "color": {
554
190
  "default": {
555
- "$value": {
556
- "default": "{color.blue.500}",
557
- "dark": "{color.blue.400}"
558
- },
191
+ "$value": "{color.alpha.0}",
559
192
  "$type": "color",
560
- "$description": "Used for the icon of a confirm (positive) action in the default state."
193
+ "$description": "Used for the border of a confirm action in the default state."
561
194
  },
562
195
  "hover": {
563
- "$value": {
564
- "default": "{color.blue.700}",
565
- "dark": "{color.blue.200}"
566
- },
196
+ "$value": "{action.confirm.border.color.default}",
567
197
  "$type": "color",
568
- "$description": "Used for the icon of a confirm (positive) action in the hover state."
198
+ "$description": "Used for the border of a confirm action in the hover state."
569
199
  },
570
200
  "focus": {
571
- "$value": {
572
- "default": "{color.blue.700}",
573
- "dark": "{color.blue.200}"
574
- },
201
+ "$value": "{action.confirm.border.color.default}",
575
202
  "$type": "color",
576
- "$description": "Used for the icon of a confirm (positive) action in the focus state."
203
+ "$description": "Used for the border of a confirm action in the focus state."
577
204
  },
578
205
  "active": {
579
- "$value": {
580
- "default": "{color.blue.900}",
581
- "dark": "{color.blue.50}"
582
- },
583
- "$type": "color",
584
- "$description": "Used for the icon of a confirm (positive) action in the active state."
585
- },
586
- "strong": {
587
- "$value": {
588
- "default": "{color.neutral.0}",
589
- "dark": "{color.neutral.900}"
590
- },
206
+ "$value": "{action.confirm.border.color.default}",
591
207
  "$type": "color",
592
- "$description": "Used for the icon on a solid, strong confirm (positive) action background."
208
+ "$description": "Used for the border of a confirm action in the active state."
593
209
  }
594
210
  }
595
211
  }
596
212
  },
597
213
  "danger": {
598
- "background": {
599
- "color": {
600
- "default": {
601
- "$value": {
602
- "default": "{color.neutral.0}",
603
- "dark": "{color.neutral.900}"
604
- },
605
- "$type": "color",
606
- "$description": "Used for the background of an outlined danger (destructive) action in the default state."
607
- },
608
- "hover": {
609
- "$value": {
610
- "default": "{color.red.50}",
611
- "dark": "{color.red.900}"
612
- },
613
- "$type": "color",
614
- "$description": "Used for the background of an outlined danger (destructive) action in the hover state."
615
- },
616
- "focus": {
617
- "$value": {
618
- "default": "{color.red.50}",
619
- "dark": "{color.red.900}"
620
- },
621
- "$type": "color",
622
- "$description": "Used for the background of an outlined danger (destructive) action in the focus state."
623
- },
624
- "active": {
625
- "$value": {
626
- "default": "{color.red.100}",
627
- "dark": "{color.red.800}"
628
- },
629
- "$type": "color",
630
- "$description": "Used for the background of an outlined danger (destructive) action in the active state."
631
- },
632
- "subtle": {
633
- "default": {
634
- "$value": "{color.alpha.0}",
635
- "$type": "color",
636
- "$description": "Used for the background of a borderless, subtle danger (destructive) action in the default state."
637
- },
638
- "hover": {
639
- "$value": {
640
- "default": "{color.red.50}",
641
- "dark": "{color.red.900}"
642
- },
643
- "$type": "color",
644
- "$description": "Used for the background of a borderless, subtle danger (destructive) action in the hover state."
645
- },
646
- "focus": {
647
- "$value": {
648
- "default": "{color.red.50}",
649
- "dark": "{color.red.900}"
650
- },
651
- "$type": "color",
652
- "$description": "Used for the background of a borderless, subtle danger (destructive) action in the focus state."
653
- },
654
- "active": {
655
- "$value": {
656
- "default": "{color.red.100}",
657
- "dark": "{color.red.800}"
658
- },
659
- "$type": "color",
660
- "$description": "Used for the background of a borderless, subtle danger (destructive) action in the active state."
661
- }
662
- },
663
- "strong": {
664
- "default": {
665
- "$value": {
666
- "default": "{color.red.500}",
667
- "dark": "{color.red.400}"
668
- },
669
- "$type": "color",
670
- "$description": "Used for the background of a solid, strong danger (destructive) action in the default state."
671
- },
672
- "hover": {
673
- "$value": {
674
- "default": "{color.red.600}",
675
- "dark": "{color.red.300}"
676
- },
677
- "$type": "color",
678
- "$description": "Used for the background of a solid, strong danger (destructive) action in the hover state."
679
- },
680
- "focus": {
681
- "$value": {
682
- "default": "{color.red.600}",
683
- "dark": "{color.red.300}"
684
- },
685
- "$type": "color",
686
- "$description": "Used for the background of a solid, strong danger (destructive) action in the focus state."
687
- },
688
- "active": {
689
- "$value": {
690
- "default": "{color.red.800}",
691
- "dark": "{color.red.100}"
692
- },
693
- "$type": "color",
694
- "$description": "Used for the background of a solid, strong danger (destructive) action in the active state."
695
- }
696
- }
697
- }
698
- },
699
- "border": {
214
+ "foreground": {
700
215
  "color": {
701
216
  "default": {
702
217
  "$value": {
@@ -704,7 +219,7 @@
704
219
  "dark": "{color.red.400}"
705
220
  },
706
221
  "$type": "color",
707
- "$description": "Used for the border of an outlined danger (destructive) action in the default state."
222
+ "$description": "Used for the foreground of a danger (destructive) action in the default state."
708
223
  },
709
224
  "hover": {
710
225
  "$value": {
@@ -712,15 +227,12 @@
712
227
  "dark": "{color.red.200}"
713
228
  },
714
229
  "$type": "color",
715
- "$description": "Used for the border of an outlined danger (destructive) action in the hover state."
230
+ "$description": "Used for the foreground of a danger (destructive) action in the hover state."
716
231
  },
717
232
  "focus": {
718
- "$value": {
719
- "default": "{color.red.700}",
720
- "dark": "{color.red.200}"
721
- },
233
+ "$value": "{action.danger.foreground.color.hover}",
722
234
  "$type": "color",
723
- "$description": "Used for the border of an outlined danger (destructive) action in the focus state."
235
+ "$description": "Used for the foreground of a danger (destructive) action in the focus state."
724
236
  },
725
237
  "active": {
726
238
  "$value": {
@@ -728,129 +240,64 @@
728
240
  "dark": "{color.red.50}"
729
241
  },
730
242
  "$type": "color",
731
- "$description": "Used for the border of an outlined danger (destructive) action in the active state."
732
- },
733
- "strong": {
734
- "default": {
735
- "$value": {
736
- "default": "{color.red.600}",
737
- "dark": "{color.red.300}"
738
- },
739
- "$type": "color",
740
- "$description": "Used for the border of a solid, strong danger (destructive) action in the default state."
741
- },
742
- "hover": {
743
- "$value": {
744
- "default": "{color.red.800}",
745
- "dark": "{color.red.100}"
746
- },
747
- "$type": "color",
748
- "$description": "Used for the border of a solid, strong danger (destructive) action in the hover state."
749
- },
750
- "focus": {
751
- "$value": {
752
- "default": "{color.red.800}",
753
- "dark": "{color.red.100}"
754
- },
755
- "$type": "color",
756
- "$description": "Used for the border of a solid, strong danger (destructive) action in the focus state."
757
- },
758
- "active": {
759
- "$value": {
760
- "default": "{color.red.900}",
761
- "dark": "{color.red.50}"
762
- },
763
- "$type": "color",
764
- "$description": "Used for the border of a solid, strong danger (destructive) action in the active state."
765
- }
243
+ "$description": "Used for the foreground of a danger (destructive) action in the active state."
766
244
  }
767
245
  }
768
246
  },
769
- "text": {
247
+ "background": {
770
248
  "color": {
771
249
  "default": {
772
250
  "$value": {
773
- "default": "{color.red.500}",
774
- "dark": "{color.red.400}"
251
+ "default": "rgba(245, 127, 108, 0.0)",
252
+ "dark": "rgba(236, 89, 65, 0.0)"
775
253
  },
776
254
  "$type": "color",
777
- "$description": "Used for the text of a danger (destructive) action in the default state."
255
+ "$description": "Used for the background of a danger (destructive) action in the default state."
778
256
  },
779
257
  "hover": {
780
258
  "$value": {
781
- "default": "{color.red.700}",
782
- "dark": "{color.red.200}"
259
+ "default": "rgba(245, 127, 108, 0.16)",
260
+ "dark": "rgba(236, 89, 65, 0.4)"
783
261
  },
784
262
  "$type": "color",
785
- "$description": "Used for the text of a danger (destructive) action in the hover state."
263
+ "$description": "Used for the background of a danger (destructive) action in the hover state."
786
264
  },
787
265
  "focus": {
788
- "$value": {
789
- "default": "{color.red.700}",
790
- "dark": "{color.red.200}"
791
- },
266
+ "$value": "{action.danger.background.color.hover}",
792
267
  "$type": "color",
793
- "$description": "Used for the text of a danger (destructive) action in the focus state."
268
+ "$description": "Used for the background of a danger (destructive) action in the focus state."
794
269
  },
795
270
  "active": {
796
271
  "$value": {
797
- "default": "{color.red.900}",
798
- "dark": "{color.red.50}"
272
+ "default": "rgba(174, 24, 0, 0.24)",
273
+ "dark": "rgba(236, 89, 65, 0.16)"
799
274
  },
800
275
  "$type": "color",
801
- "$description": "Used for the text of a danger (destructive) action in the active state."
802
- },
803
- "strong": {
804
- "$value": {
805
- "default": "{color.neutral.0}",
806
- "dark": "{color.neutral.900}"
807
- },
808
- "$type": "color",
809
- "$description": "Used for the text on a solid, strong danger (destructive) action background."
276
+ "$description": "Used for the background of a danger (destructive) action in the active state."
810
277
  }
811
278
  }
812
279
  },
813
- "icon": {
280
+ "border": {
814
281
  "color": {
815
282
  "default": {
816
- "$value": {
817
- "default": "{color.red.500}",
818
- "dark": "{color.red.400}"
819
- },
283
+ "$value": "{color.alpha.0}",
820
284
  "$type": "color",
821
- "$description": "Used for the icon of a danger (destructive) action in the default state."
285
+ "$description": "Used for the border of a danger action in the default state."
822
286
  },
823
287
  "hover": {
824
- "$value": {
825
- "default": "{color.red.700}",
826
- "dark": "{color.red.200}"
827
- },
288
+ "$value": "{action.danger.border.color.default}",
828
289
  "$type": "color",
829
- "$description": "Used for the icon of a danger (destructive) action in the hover state."
290
+ "$description": "Used for the border of a danger action in the hover state."
830
291
  },
831
292
  "focus": {
832
- "$value": {
833
- "default": "{color.red.700}",
834
- "dark": "{color.red.200}"
835
- },
293
+ "$value": "{action.danger.border.color.default}",
836
294
  "$type": "color",
837
- "$description": "Used for the icon of a danger (destructive) action in the focus state."
295
+ "$description": "Used for the border of a danger action in the focus state."
838
296
  },
839
297
  "active": {
840
- "$value": {
841
- "default": "{color.red.900}",
842
- "dark": "{color.red.50}"
843
- },
844
- "$type": "color",
845
- "$description": "Used for the icon of a danger (destructive) action in the active state."
846
- },
847
- "strong": {
848
- "$value": {
849
- "default": "{color.neutral.0}",
850
- "dark": "{color.neutral.900}"
851
- },
298
+ "$value": "{action.danger.border.color.default}",
852
299
  "$type": "color",
853
- "$description": "Used for the icon on a solid, strong danger (destructive) action background."
300
+ "$description": "Used for the border of a danger action in the active state."
854
301
  }
855
302
  }
856
303
  }