@gitlab/ui 98.0.0 → 98.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 (21) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/dist/tokens/build/js/tokens.dark.js +84 -84
  5. package/dist/tokens/css/tokens.css +1 -1
  6. package/dist/tokens/css/tokens.dark.css +47 -47
  7. package/dist/tokens/js/tokens.dark.js +84 -84
  8. package/dist/tokens/json/tokens.dark.json +148 -133
  9. package/dist/tokens/json/tokens.json +64 -49
  10. package/dist/tokens/scss/_tokens.dark.scss +47 -47
  11. package/dist/tokens/scss/_tokens.scss +1 -1
  12. package/package.json +1 -1
  13. package/src/tokens/action.tokens.json +21 -12
  14. package/src/tokens/build/css/tokens.css +1 -1
  15. package/src/tokens/build/css/tokens.dark.css +47 -47
  16. package/src/tokens/build/js/tokens.dark.js +84 -84
  17. package/src/tokens/build/json/tokens.dark.json +148 -133
  18. package/src/tokens/build/json/tokens.json +64 -49
  19. package/src/tokens/build/scss/_tokens.dark.scss +47 -47
  20. package/src/tokens/build/scss/_tokens.scss +1 -1
  21. package/src/tokens/contextual/button.tokens.json +43 -37
package/src/tokens/contextual/button.tokens.json CHANGED
@@ -34,7 +34,7 @@
34
34
  "default": {
35
35
  "$value": {
36
36
  "default": "{color.neutral.0}",
37
- "dark": "{color.neutral.900}"
37
+ "dark": "rgba(137, 136, 141, 0.4)"
38
38
  },
39
39
  "$type": "color",
40
40
  "$description": "Used for the background of an default primary button in the default state."
@@ -42,7 +42,7 @@
42
42
  "hover": {
43
43
  "$value": {
44
44
  "default": "{color.neutral.50}",
45
- "dark": "{color.neutral.900}"
45
+ "dark": "rgba(137, 136, 141, 0.64)"
46
46
  },
47
47
  "$type": "color",
48
48
  "$description": "Used for the background of an default primary button in the hover state."
@@ -55,7 +55,7 @@
55
55
  "active": {
56
56
  "$value": {
57
57
  "default": "{color.neutral.100}",
58
- "dark": "{color.neutral.800}"
58
+ "dark": "rgba(137, 136, 141, 0.32)"
59
59
  },
60
60
  "$type": "color",
61
61
  "$description": "Used for the background of an default primary button in the active state."
@@ -67,7 +67,7 @@
67
67
  "default": {
68
68
  "$value": {
69
69
  "default": "{color.neutral.200}",
70
- "dark": "{color.neutral.700}"
70
+ "dark": "{color.alpha.0}"
71
71
  },
72
72
  "$type": "color",
73
73
  "$description": "Used for the border of an default primary button in the default state."
@@ -75,7 +75,7 @@
75
75
  "hover": {
76
76
  "$value": {
77
77
  "default": "{color.neutral.400}",
78
- "dark": "{color.neutral.500}"
78
+ "dark": "{color.alpha.0}"
79
79
  },
80
80
  "$type": "color",
81
81
  "$description": "Used for the border of an default primary button in the hover state."
@@ -88,7 +88,7 @@
88
88
  "active": {
89
89
  "$value": {
90
90
  "default": "{color.neutral.600}",
91
- "dark": "{color.neutral.300}"
91
+ "dark": "{color.alpha.0}"
92
92
  },
93
93
  "$type": "color",
94
94
  "$description": "Used for the border of an default primary button in the active state."
@@ -176,7 +176,10 @@
176
176
  "foreground": {
177
177
  "color": {
178
178
  "default": {
179
- "$value": "{action.strong.confirm.foreground.color.default}",
179
+ "$value": {
180
+ "default": "{color.neutral.0}",
181
+ "dark": "{color.neutral.950}"
182
+ },
180
183
  "$type": "color",
181
184
  "$description": "Used for the foreground of a confirm (positive) primary button in the default state."
182
185
  },
@@ -226,7 +229,7 @@
226
229
  "default": {
227
230
  "$value": {
228
231
  "default": "{color.blue.600}",
229
- "dark": "{color.blue.300}"
232
+ "dark": "{color.alpha.0}"
230
233
  },
231
234
  "$type": "color",
232
235
  "$description": "Used for the border of a confirm (positive) primary button in the default state."
@@ -234,7 +237,7 @@
234
237
  "hover": {
235
238
  "$value": {
236
239
  "default": "{color.blue.800}",
237
- "dark": "{color.blue.100}"
240
+ "dark": "{color.alpha.0}"
238
241
  },
239
242
  "$type": "color",
240
243
  "$description": "Used for the border of a confirm (positive) primary button in the hover state."
@@ -247,7 +250,7 @@
247
250
  "active": {
248
251
  "$value": {
249
252
  "default": "{color.blue.900}",
250
- "dark": "{color.blue.50}"
253
+ "dark": "{color.alpha.0}"
251
254
  },
252
255
  "$type": "color",
253
256
  "$description": "Used for the border of a confirm (positive) primary button in the active state."
@@ -261,7 +264,7 @@
261
264
  "default": {
262
265
  "$value": {
263
266
  "default": "{color.blue.500}",
264
- "dark": "{color.blue.400}"
267
+ "dark": "{color.blue.100}"
265
268
  },
266
269
  "$type": "color",
267
270
  "$description": "Used for the foreground of a confirm (positive) button in the default state."
@@ -269,7 +272,7 @@
269
272
  "hover": {
270
273
  "$value": {
271
274
  "default": "{color.blue.700}",
272
- "dark": "{color.blue.200}"
275
+ "dark": "{color.blue.100}"
273
276
  },
274
277
  "$type": "color",
275
278
  "$description": "Used for the foreground of a confirm (positive) button in the hover state."
@@ -282,7 +285,7 @@
282
285
  "active": {
283
286
  "$value": {
284
287
  "default": "{color.blue.900}",
285
- "dark": "{color.blue.50}"
288
+ "dark": "{color.blue.100}"
286
289
  },
287
290
  "$type": "color",
288
291
  "$description": "Used for the foreground of a confirm (positive) button in the active state."
@@ -294,7 +297,7 @@
294
297
  "default": {
295
298
  "$value": {
296
299
  "default": "{color.neutral.0}",
297
- "dark": "{color.neutral.900}"
300
+ "dark": "rgba(66, 143, 220, 0.4)"
298
301
  },
299
302
  "$type": "color",
300
303
  "$description": "Used for the background of an outlined confirm (positive) button in the default state."
@@ -302,7 +305,7 @@
302
305
  "hover": {
303
306
  "$value": {
304
307
  "default": "{color.blue.50}",
305
- "dark": "{color.blue.900}"
308
+ "dark": "rgba(66, 143, 220, 0.64)"
306
309
  },
307
310
  "$type": "color",
308
311
  "$description": "Used for the background of an outlined confirm (positive) button in the hover state."
@@ -315,7 +318,7 @@
315
318
  "active": {
316
319
  "$value": {
317
320
  "default": "{color.blue.100}",
318
- "dark": "{color.blue.800}"
321
+ "dark": "rgba(66, 143, 220, 0.32)"
319
322
  },
320
323
  "$type": "color",
321
324
  "$description": "Used for the background of an outlined confirm (positive) button in the active state."
@@ -327,7 +330,7 @@
327
330
  "default": {
328
331
  "$value": {
329
332
  "default": "{color.blue.500}",
330
- "dark": "{color.blue.400}"
333
+ "dark": "{color.alpha.0}"
331
334
  },
332
335
  "$type": "color",
333
336
  "$description": "Used for the border of an outlined confirm (positive) button in the default state."
@@ -335,7 +338,7 @@
335
338
  "hover": {
336
339
  "$value": {
337
340
  "default": "{color.blue.700}",
338
- "dark": "{color.blue.200}"
341
+ "dark": "{color.alpha.0}"
339
342
  },
340
343
  "$type": "color",
341
344
  "$description": "Used for the border of an outlined confirm (positive) button in the hover state."
@@ -348,7 +351,7 @@
348
351
  "active": {
349
352
  "$value": {
350
353
  "default": "{color.blue.900}",
351
- "dark": "{color.blue.50}"
354
+ "dark": "{color.alpha.0}"
352
355
  },
353
356
  "$type": "color",
354
357
  "$description": "Used for the border of an outlined confirm (positive) button in the active state."
@@ -436,7 +439,10 @@
436
439
  "foreground": {
437
440
  "color": {
438
441
  "default": {
439
- "$value": "{color.neutral.0}",
442
+ "$value": {
443
+ "default": "{color.neutral.0}",
444
+ "dark": "{color.neutral.950}"
445
+ },
440
446
  "$type": "color",
441
447
  "$description": "Used for the foreground of a danger (destructive) primary button in the default state."
442
448
  },
@@ -462,7 +468,7 @@
462
468
  "default": {
463
469
  "$value": {
464
470
  "default": "{color.red.500}",
465
- "dark": "{color.red.400}"
471
+ "dark": "{color.red.300}"
466
472
  },
467
473
  "$type": "color",
468
474
  "$description": "Used for the background of a danger (destructive) primary button in the default state."
@@ -470,7 +476,7 @@
470
476
  "hover": {
471
477
  "$value": {
472
478
  "default": "{color.red.600}",
473
- "dark": "{color.red.300}"
479
+ "dark": "{color.red.200}"
474
480
  },
475
481
  "$type": "color",
476
482
  "$description": "Used for the background of a danger (destructive) primary button in the hover state."
@@ -483,7 +489,7 @@
483
489
  "active": {
484
490
  "$value": {
485
491
  "default": "{color.red.800}",
486
- "dark": "{color.red.100}"
492
+ "dark": "{color.red.400}"
487
493
  },
488
494
  "$type": "color",
489
495
  "$description": "Used for the background of a danger (destructive) primary button in the active state."
@@ -495,7 +501,7 @@
495
501
  "default": {
496
502
  "$value": {
497
503
  "default": "{color.red.600}",
498
- "dark": "{color.red.300}"
504
+ "dark": "{color.alpha.0}"
499
505
  },
500
506
  "$type": "color",
501
507
  "$description": "Used for the border of a danger (destructive) primary button in the default state."
@@ -503,7 +509,7 @@
503
509
  "hover": {
504
510
  "$value": {
505
511
  "default": "{color.red.800}",
506
- "dark": "{color.red.100}"
512
+ "dark": "{color.alpha.0}"
507
513
  },
508
514
  "$type": "color",
509
515
  "$description": "Used for the border of a danger (destructive) primary button in the hover state."
@@ -516,7 +522,7 @@
516
522
  "active": {
517
523
  "$value": {
518
524
  "default": "{color.red.900}",
519
- "dark": "{color.red.50}"
525
+ "dark": "{color.alpha.0}"
520
526
  },
521
527
  "$type": "color",
522
528
  "$description": "Used for the border of a danger (destructive) primary button in the active state."
@@ -530,7 +536,7 @@
530
536
  "default": {
531
537
  "$value": {
532
538
  "default": "{color.red.500}",
533
- "dark": "{color.red.400}"
539
+ "dark": "{color.red.100}"
534
540
  },
535
541
  "$type": "color",
536
542
  "$description": "Used for the foreground of a danger (destructive) button in the default state."
@@ -538,7 +544,7 @@
538
544
  "hover": {
539
545
  "$value": {
540
546
  "default": "{color.red.700}",
541
- "dark": "{color.red.200}"
547
+ "dark": "{color.red.50}"
542
548
  },
543
549
  "$type": "color",
544
550
  "$description": "Used for the foreground of a danger (destructive) button in the hover state."
@@ -551,7 +557,7 @@
551
557
  "active": {
552
558
  "$value": {
553
559
  "default": "{color.red.900}",
554
- "dark": "{color.red.50}"
560
+ "dark": "{button.danger.secondary.foreground.color.focus}"
555
561
  },
556
562
  "$type": "color",
557
563
  "$description": "Used for the foreground of a danger (destructive) button in the active state."
@@ -563,7 +569,7 @@
563
569
  "default": {
564
570
  "$value": {
565
571
  "default": "{color.neutral.0}",
566
- "dark": "{color.neutral.900}"
572
+ "dark": "rgba(236, 89, 65, 0.40)"
567
573
  },
568
574
  "$type": "color",
569
575
  "$description": "Used for the background of an outlined danger (destructive) button in the default state."
@@ -571,7 +577,7 @@
571
577
  "hover": {
572
578
  "$value": {
573
579
  "default": "{color.red.50}",
574
- "dark": "{color.red.900}"
580
+ "dark": "rgba(236, 89, 65, 0.64)"
575
581
  },
576
582
  "$type": "color",
577
583
  "$description": "Used for the background of an outlined danger (destructive) button in the hover state."
@@ -584,7 +590,7 @@
584
590
  "active": {
585
591
  "$value": {
586
592
  "default": "{color.red.100}",
587
- "dark": "{color.red.800}"
593
+ "dark": "rgba(236, 89, 65, 0.32)"
588
594
  },
589
595
  "$type": "color",
590
596
  "$description": "Used for the background of an outlined danger (destructive) button in the active state."
@@ -596,7 +602,7 @@
596
602
  "default": {
597
603
  "$value": {
598
604
  "default": "{color.red.500}",
599
- "dark": "{color.red.400}"
605
+ "dark": "{color.alpha.0}"
600
606
  },
601
607
  "$type": "color",
602
608
  "$description": "Used for the border of an outlined danger (destructive) button in the default state."
@@ -604,7 +610,7 @@
604
610
  "hover": {
605
611
  "$value": {
606
612
  "default": "{color.red.700}",
607
- "dark": "{color.red.200}"
613
+ "dark": "{color.alpha.0}"
608
614
  },
609
615
  "$type": "color",
610
616
  "$description": "Used for the border of an outlined danger (destructive) button in the hover state."
@@ -617,7 +623,7 @@
617
623
  "active": {
618
624
  "$value": {
619
625
  "default": "{color.red.900}",
620
- "dark": "{color.red.50}"
626
+ "dark": "{color.alpha.0}"
621
627
  },
622
628
  "$type": "color",
623
629
  "$description": "Used for the border of an outlined danger (destructive) button in the active state."
@@ -853,7 +859,7 @@
853
859
  "color": {
854
860
  "$value": {
855
861
  "default": "{color.neutral.10}",
856
- "dark": "{color.neutral.950}"
862
+ "dark": "rgba(137, 136, 141, 0.16)"
857
863
  },
858
864
  "$type": "color",
859
865
  "$description": "Used for the background of a disabled button."
@@ -863,7 +869,7 @@
863
869
  "color": {
864
870
  "$value": {
865
871
  "default": "{color.neutral.100}",
866
- "dark": "{color.neutral.800}"
872
+ "dark": "{color.alpha.0}"
867
873
  },
868
874
  "$type": "color",
869
875
  "$description": "Used for the border of a disabled button."