@gitlab/ui 98.1.2 → 98.3.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.
- package/CHANGELOG.md +17 -0
- package/dist/components/base/datepicker/datepicker.js +1 -1
- package/dist/components/charts/area/area.js +1 -1
- package/dist/components/charts/bar/bar.js +1 -1
- package/dist/components/charts/column/column.js +1 -1
- package/dist/components/charts/discrete_scatter/discrete_scatter.js +1 -1
- package/dist/components/charts/legend/legend.js +4 -3
- package/dist/components/charts/line/line.js +1 -1
- package/dist/components/charts/stacked_column/stacked_column.js +1 -1
- package/dist/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items_loading.js +1 -1
- package/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/tailwind.css +1 -1
- package/dist/tailwind.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +84 -84
- package/dist/tokens/css/tokens.css +1 -1
- package/dist/tokens/css/tokens.dark.css +46 -46
- package/dist/tokens/js/tokens.dark.js +84 -84
- package/dist/tokens/json/tokens.dark.json +147 -132
- package/dist/tokens/json/tokens.json +63 -48
- package/dist/tokens/scss/_tokens.dark.scss +46 -46
- package/dist/tokens/scss/_tokens.scss +1 -1
- package/dist/vendor/bootstrap-vue/src/mixins/dropdown.js +1 -1
- package/package.json +1 -1
- package/src/components/base/datepicker/datepicker.vue +1 -1
- package/src/components/base/form/input_group_text/input_group_text.scss +7 -0
- package/src/components/charts/area/area.vue +1 -1
- package/src/components/charts/bar/bar.vue +1 -1
- package/src/components/charts/column/column.vue +1 -1
- package/src/components/charts/discrete_scatter/discrete_scatter.vue +1 -1
- package/src/components/charts/legend/legend.vue +4 -3
- package/src/components/charts/line/line.vue +1 -1
- package/src/components/charts/stacked_column/stacked_column.vue +1 -1
- package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items_loading.vue +1 -1
- package/src/scss/components.scss +1 -0
- package/src/tokens/action.tokens.json +21 -12
- package/src/tokens/build/css/tokens.css +1 -1
- package/src/tokens/build/css/tokens.dark.css +46 -46
- package/src/tokens/build/js/tokens.dark.js +84 -84
- package/src/tokens/build/json/tokens.dark.json +147 -132
- package/src/tokens/build/json/tokens.json +63 -48
- package/src/tokens/build/scss/_tokens.dark.scss +46 -46
- package/src/tokens/build/scss/_tokens.scss +1 -1
- package/src/tokens/contextual/button.tokens.json +42 -36
- package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown.spec.js +2 -2
- package/src/vendor/bootstrap-vue/src/mixins/dropdown.js +1 -1
|
@@ -645,7 +645,7 @@
|
|
|
645
645
|
"original": {
|
|
646
646
|
"value": {
|
|
647
647
|
"default": "{color.blue.500}",
|
|
648
|
-
"dark": "{color.blue.
|
|
648
|
+
"dark": "{color.blue.200}"
|
|
649
649
|
},
|
|
650
650
|
"$type": "color",
|
|
651
651
|
"comment": "Used for the foreground of a confirm (positive) action in the default state."
|
|
@@ -669,7 +669,7 @@
|
|
|
669
669
|
"original": {
|
|
670
670
|
"value": {
|
|
671
671
|
"default": "{color.blue.700}",
|
|
672
|
-
"dark": "{color.blue.
|
|
672
|
+
"dark": "{color.blue.100}"
|
|
673
673
|
},
|
|
674
674
|
"$type": "color",
|
|
675
675
|
"comment": "Used for the foreground of a confirm (positive) action in the hover state."
|
|
@@ -714,7 +714,7 @@
|
|
|
714
714
|
"original": {
|
|
715
715
|
"value": {
|
|
716
716
|
"default": "{color.blue.900}",
|
|
717
|
-
"dark": "{color.blue.
|
|
717
|
+
"dark": "{color.blue.100}"
|
|
718
718
|
},
|
|
719
719
|
"$type": "color",
|
|
720
720
|
"comment": "Used for the foreground of a confirm (positive) action in the active state."
|
|
@@ -929,7 +929,7 @@
|
|
|
929
929
|
"original": {
|
|
930
930
|
"value": {
|
|
931
931
|
"default": "{color.red.500}",
|
|
932
|
-
"dark": "{color.red.
|
|
932
|
+
"dark": "{color.red.200}"
|
|
933
933
|
},
|
|
934
934
|
"$type": "color",
|
|
935
935
|
"comment": "Used for the foreground of a danger (destructive) action in the default state."
|
|
@@ -953,7 +953,7 @@
|
|
|
953
953
|
"original": {
|
|
954
954
|
"value": {
|
|
955
955
|
"default": "{color.red.700}",
|
|
956
|
-
"dark": "{color.red.
|
|
956
|
+
"dark": "{color.red.100}"
|
|
957
957
|
},
|
|
958
958
|
"$type": "color",
|
|
959
959
|
"comment": "Used for the foreground of a danger (destructive) action in the hover state."
|
|
@@ -998,7 +998,7 @@
|
|
|
998
998
|
"original": {
|
|
999
999
|
"value": {
|
|
1000
1000
|
"default": "{color.red.900}",
|
|
1001
|
-
"dark": "{color.red.
|
|
1001
|
+
"dark": "{color.red.100}"
|
|
1002
1002
|
},
|
|
1003
1003
|
"$type": "color",
|
|
1004
1004
|
"comment": "Used for the foreground of a danger (destructive) action in the active state."
|
|
@@ -1214,7 +1214,7 @@
|
|
|
1214
1214
|
"original": {
|
|
1215
1215
|
"value": {
|
|
1216
1216
|
"default": "{color.blue.500}",
|
|
1217
|
-
"dark": "{color.blue.
|
|
1217
|
+
"dark": "{color.blue.300}"
|
|
1218
1218
|
},
|
|
1219
1219
|
"$type": "color",
|
|
1220
1220
|
"comment": "Used for the background of a strong confirm action in the default state."
|
|
@@ -1239,7 +1239,7 @@
|
|
|
1239
1239
|
"original": {
|
|
1240
1240
|
"value": {
|
|
1241
1241
|
"default": "{color.blue.600}",
|
|
1242
|
-
"dark": "{color.blue.
|
|
1242
|
+
"dark": "{color.blue.200}"
|
|
1243
1243
|
},
|
|
1244
1244
|
"$type": "color",
|
|
1245
1245
|
"comment": "Used for the background of a strong confirm action in the hover state."
|
|
@@ -1286,7 +1286,7 @@
|
|
|
1286
1286
|
"original": {
|
|
1287
1287
|
"value": {
|
|
1288
1288
|
"default": "{color.blue.700}",
|
|
1289
|
-
"dark": "{color.blue.
|
|
1289
|
+
"dark": "{color.blue.400}"
|
|
1290
1290
|
},
|
|
1291
1291
|
"$type": "color",
|
|
1292
1292
|
"comment": "Used for the background of a strong confirm action in the active state."
|
|
@@ -1628,7 +1628,10 @@
|
|
|
1628
1628
|
"filePath": "src/tokens/action.tokens.json",
|
|
1629
1629
|
"isSource": true,
|
|
1630
1630
|
"original": {
|
|
1631
|
-
"value":
|
|
1631
|
+
"value": {
|
|
1632
|
+
"default": "{action.strong.neutral.foreground.color.default}",
|
|
1633
|
+
"dark": "{color.neutral.0}"
|
|
1634
|
+
},
|
|
1632
1635
|
"$type": "color",
|
|
1633
1636
|
"comment": "Used for the foreground of a strong neutral action in the hover state."
|
|
1634
1637
|
},
|
|
@@ -1650,7 +1653,10 @@
|
|
|
1650
1653
|
"filePath": "src/tokens/action.tokens.json",
|
|
1651
1654
|
"isSource": true,
|
|
1652
1655
|
"original": {
|
|
1653
|
-
"value":
|
|
1656
|
+
"value": {
|
|
1657
|
+
"default": "{action.strong.neutral.foreground.color.hover}",
|
|
1658
|
+
"dark": "{color.neutral.0}"
|
|
1659
|
+
},
|
|
1654
1660
|
"$type": "color",
|
|
1655
1661
|
"comment": "Used for the foreground of a strong neutral action in the focus state."
|
|
1656
1662
|
},
|
|
@@ -1672,7 +1678,10 @@
|
|
|
1672
1678
|
"filePath": "src/tokens/action.tokens.json",
|
|
1673
1679
|
"isSource": true,
|
|
1674
1680
|
"original": {
|
|
1675
|
-
"value":
|
|
1681
|
+
"value": {
|
|
1682
|
+
"default": "{action.strong.neutral.foreground.color.focus}",
|
|
1683
|
+
"dark": "{color.neutral.0}"
|
|
1684
|
+
},
|
|
1676
1685
|
"$type": "color",
|
|
1677
1686
|
"comment": "Used for the foreground of a strong neutral action in the active state."
|
|
1678
1687
|
},
|
|
@@ -10935,7 +10944,7 @@
|
|
|
10935
10944
|
"original": {
|
|
10936
10945
|
"value": {
|
|
10937
10946
|
"default": "{color.neutral.0}",
|
|
10938
|
-
"dark": "
|
|
10947
|
+
"dark": "rgba(137, 136, 141, 0.4)"
|
|
10939
10948
|
},
|
|
10940
10949
|
"$type": "color",
|
|
10941
10950
|
"comment": "Used for the background of an default primary button in the default state."
|
|
@@ -10960,7 +10969,7 @@
|
|
|
10960
10969
|
"original": {
|
|
10961
10970
|
"value": {
|
|
10962
10971
|
"default": "{color.neutral.50}",
|
|
10963
|
-
"dark": "
|
|
10972
|
+
"dark": "rgba(137, 136, 141, 0.64)"
|
|
10964
10973
|
},
|
|
10965
10974
|
"$type": "color",
|
|
10966
10975
|
"comment": "Used for the background of an default primary button in the hover state."
|
|
@@ -11007,7 +11016,7 @@
|
|
|
11007
11016
|
"original": {
|
|
11008
11017
|
"value": {
|
|
11009
11018
|
"default": "{color.neutral.100}",
|
|
11010
|
-
"dark": "
|
|
11019
|
+
"dark": "rgba(137, 136, 141, 0.32)"
|
|
11011
11020
|
},
|
|
11012
11021
|
"$type": "color",
|
|
11013
11022
|
"comment": "Used for the background of an default primary button in the active state."
|
|
@@ -11036,7 +11045,7 @@
|
|
|
11036
11045
|
"original": {
|
|
11037
11046
|
"value": {
|
|
11038
11047
|
"default": "{color.neutral.200}",
|
|
11039
|
-
"dark": "{color.
|
|
11048
|
+
"dark": "{color.alpha.0}"
|
|
11040
11049
|
},
|
|
11041
11050
|
"$type": "color",
|
|
11042
11051
|
"comment": "Used for the border of an default primary button in the default state."
|
|
@@ -11061,7 +11070,7 @@
|
|
|
11061
11070
|
"original": {
|
|
11062
11071
|
"value": {
|
|
11063
11072
|
"default": "{color.neutral.400}",
|
|
11064
|
-
"dark": "{color.
|
|
11073
|
+
"dark": "{color.alpha.0}"
|
|
11065
11074
|
},
|
|
11066
11075
|
"$type": "color",
|
|
11067
11076
|
"comment": "Used for the border of an default primary button in the hover state."
|
|
@@ -11108,7 +11117,7 @@
|
|
|
11108
11117
|
"original": {
|
|
11109
11118
|
"value": {
|
|
11110
11119
|
"default": "{color.neutral.600}",
|
|
11111
|
-
"dark": "{color.
|
|
11120
|
+
"dark": "{color.alpha.0}"
|
|
11112
11121
|
},
|
|
11113
11122
|
"$type": "color",
|
|
11114
11123
|
"comment": "Used for the border of an default primary button in the active state."
|
|
@@ -11417,7 +11426,10 @@
|
|
|
11417
11426
|
"filePath": "src/tokens/contextual/button.tokens.json",
|
|
11418
11427
|
"isSource": true,
|
|
11419
11428
|
"original": {
|
|
11420
|
-
"value":
|
|
11429
|
+
"value": {
|
|
11430
|
+
"default": "{color.neutral.0}",
|
|
11431
|
+
"dark": "{color.neutral.950}"
|
|
11432
|
+
},
|
|
11421
11433
|
"$type": "color",
|
|
11422
11434
|
"comment": "Used for the foreground of a confirm (positive) primary button in the default state."
|
|
11423
11435
|
},
|
|
@@ -11603,7 +11615,7 @@
|
|
|
11603
11615
|
"original": {
|
|
11604
11616
|
"value": {
|
|
11605
11617
|
"default": "{color.blue.600}",
|
|
11606
|
-
"dark": "{color.
|
|
11618
|
+
"dark": "{color.alpha.0}"
|
|
11607
11619
|
},
|
|
11608
11620
|
"$type": "color",
|
|
11609
11621
|
"comment": "Used for the border of a confirm (positive) primary button in the default state."
|
|
@@ -11628,7 +11640,7 @@
|
|
|
11628
11640
|
"original": {
|
|
11629
11641
|
"value": {
|
|
11630
11642
|
"default": "{color.blue.800}",
|
|
11631
|
-
"dark": "{color.
|
|
11643
|
+
"dark": "{color.alpha.0}"
|
|
11632
11644
|
},
|
|
11633
11645
|
"$type": "color",
|
|
11634
11646
|
"comment": "Used for the border of a confirm (positive) primary button in the hover state."
|
|
@@ -11675,7 +11687,7 @@
|
|
|
11675
11687
|
"original": {
|
|
11676
11688
|
"value": {
|
|
11677
11689
|
"default": "{color.blue.900}",
|
|
11678
|
-
"dark": "{color.
|
|
11690
|
+
"dark": "{color.alpha.0}"
|
|
11679
11691
|
},
|
|
11680
11692
|
"$type": "color",
|
|
11681
11693
|
"comment": "Used for the border of a confirm (positive) primary button in the active state."
|
|
@@ -11706,7 +11718,7 @@
|
|
|
11706
11718
|
"original": {
|
|
11707
11719
|
"value": {
|
|
11708
11720
|
"default": "{color.blue.500}",
|
|
11709
|
-
"dark": "{color.blue.
|
|
11721
|
+
"dark": "{color.blue.100}"
|
|
11710
11722
|
},
|
|
11711
11723
|
"$type": "color",
|
|
11712
11724
|
"comment": "Used for the foreground of a confirm (positive) button in the default state."
|
|
@@ -11731,7 +11743,7 @@
|
|
|
11731
11743
|
"original": {
|
|
11732
11744
|
"value": {
|
|
11733
11745
|
"default": "{color.blue.700}",
|
|
11734
|
-
"dark": "{color.blue.
|
|
11746
|
+
"dark": "{color.blue.100}"
|
|
11735
11747
|
},
|
|
11736
11748
|
"$type": "color",
|
|
11737
11749
|
"comment": "Used for the foreground of a confirm (positive) button in the hover state."
|
|
@@ -11778,7 +11790,7 @@
|
|
|
11778
11790
|
"original": {
|
|
11779
11791
|
"value": {
|
|
11780
11792
|
"default": "{color.blue.900}",
|
|
11781
|
-
"dark": "{color.blue.
|
|
11793
|
+
"dark": "{color.blue.100}"
|
|
11782
11794
|
},
|
|
11783
11795
|
"$type": "color",
|
|
11784
11796
|
"comment": "Used for the foreground of a confirm (positive) button in the active state."
|
|
@@ -11807,7 +11819,7 @@
|
|
|
11807
11819
|
"original": {
|
|
11808
11820
|
"value": {
|
|
11809
11821
|
"default": "{color.neutral.0}",
|
|
11810
|
-
"dark": "
|
|
11822
|
+
"dark": "rgba(66, 143, 220, 0.4)"
|
|
11811
11823
|
},
|
|
11812
11824
|
"$type": "color",
|
|
11813
11825
|
"comment": "Used for the background of an outlined confirm (positive) button in the default state."
|
|
@@ -11832,7 +11844,7 @@
|
|
|
11832
11844
|
"original": {
|
|
11833
11845
|
"value": {
|
|
11834
11846
|
"default": "{color.blue.50}",
|
|
11835
|
-
"dark": "
|
|
11847
|
+
"dark": "rgba(66, 143, 220, 0.64)"
|
|
11836
11848
|
},
|
|
11837
11849
|
"$type": "color",
|
|
11838
11850
|
"comment": "Used for the background of an outlined confirm (positive) button in the hover state."
|
|
@@ -11879,7 +11891,7 @@
|
|
|
11879
11891
|
"original": {
|
|
11880
11892
|
"value": {
|
|
11881
11893
|
"default": "{color.blue.100}",
|
|
11882
|
-
"dark": "
|
|
11894
|
+
"dark": "rgba(66, 143, 220, 0.32)"
|
|
11883
11895
|
},
|
|
11884
11896
|
"$type": "color",
|
|
11885
11897
|
"comment": "Used for the background of an outlined confirm (positive) button in the active state."
|
|
@@ -11908,7 +11920,7 @@
|
|
|
11908
11920
|
"original": {
|
|
11909
11921
|
"value": {
|
|
11910
11922
|
"default": "{color.blue.500}",
|
|
11911
|
-
"dark": "{color.
|
|
11923
|
+
"dark": "{color.alpha.0}"
|
|
11912
11924
|
},
|
|
11913
11925
|
"$type": "color",
|
|
11914
11926
|
"comment": "Used for the border of an outlined confirm (positive) button in the default state."
|
|
@@ -11933,7 +11945,7 @@
|
|
|
11933
11945
|
"original": {
|
|
11934
11946
|
"value": {
|
|
11935
11947
|
"default": "{color.blue.700}",
|
|
11936
|
-
"dark": "{color.
|
|
11948
|
+
"dark": "{color.alpha.0}"
|
|
11937
11949
|
},
|
|
11938
11950
|
"$type": "color",
|
|
11939
11951
|
"comment": "Used for the border of an outlined confirm (positive) button in the hover state."
|
|
@@ -11980,7 +11992,7 @@
|
|
|
11980
11992
|
"original": {
|
|
11981
11993
|
"value": {
|
|
11982
11994
|
"default": "{color.blue.900}",
|
|
11983
|
-
"dark": "{color.
|
|
11995
|
+
"dark": "{color.alpha.0}"
|
|
11984
11996
|
},
|
|
11985
11997
|
"$type": "color",
|
|
11986
11998
|
"comment": "Used for the border of an outlined confirm (positive) button in the active state."
|
|
@@ -12289,7 +12301,10 @@
|
|
|
12289
12301
|
"filePath": "src/tokens/contextual/button.tokens.json",
|
|
12290
12302
|
"isSource": true,
|
|
12291
12303
|
"original": {
|
|
12292
|
-
"value":
|
|
12304
|
+
"value": {
|
|
12305
|
+
"default": "{color.neutral.0}",
|
|
12306
|
+
"dark": "{color.neutral.950}"
|
|
12307
|
+
},
|
|
12293
12308
|
"$type": "color",
|
|
12294
12309
|
"comment": "Used for the foreground of a danger (destructive) primary button in the default state."
|
|
12295
12310
|
},
|
|
@@ -12383,7 +12398,7 @@
|
|
|
12383
12398
|
"original": {
|
|
12384
12399
|
"value": {
|
|
12385
12400
|
"default": "{color.red.500}",
|
|
12386
|
-
"dark": "{color.red.
|
|
12401
|
+
"dark": "{color.red.300}"
|
|
12387
12402
|
},
|
|
12388
12403
|
"$type": "color",
|
|
12389
12404
|
"comment": "Used for the background of a danger (destructive) primary button in the default state."
|
|
@@ -12408,7 +12423,7 @@
|
|
|
12408
12423
|
"original": {
|
|
12409
12424
|
"value": {
|
|
12410
12425
|
"default": "{color.red.600}",
|
|
12411
|
-
"dark": "{color.red.
|
|
12426
|
+
"dark": "{color.red.200}"
|
|
12412
12427
|
},
|
|
12413
12428
|
"$type": "color",
|
|
12414
12429
|
"comment": "Used for the background of a danger (destructive) primary button in the hover state."
|
|
@@ -12455,7 +12470,7 @@
|
|
|
12455
12470
|
"original": {
|
|
12456
12471
|
"value": {
|
|
12457
12472
|
"default": "{color.red.800}",
|
|
12458
|
-
"dark": "{color.red.
|
|
12473
|
+
"dark": "{color.red.400}"
|
|
12459
12474
|
},
|
|
12460
12475
|
"$type": "color",
|
|
12461
12476
|
"comment": "Used for the background of a danger (destructive) primary button in the active state."
|
|
@@ -12484,7 +12499,7 @@
|
|
|
12484
12499
|
"original": {
|
|
12485
12500
|
"value": {
|
|
12486
12501
|
"default": "{color.red.600}",
|
|
12487
|
-
"dark": "{color.
|
|
12502
|
+
"dark": "{color.alpha.0}"
|
|
12488
12503
|
},
|
|
12489
12504
|
"$type": "color",
|
|
12490
12505
|
"comment": "Used for the border of a danger (destructive) primary button in the default state."
|
|
@@ -12509,7 +12524,7 @@
|
|
|
12509
12524
|
"original": {
|
|
12510
12525
|
"value": {
|
|
12511
12526
|
"default": "{color.red.800}",
|
|
12512
|
-
"dark": "{color.
|
|
12527
|
+
"dark": "{color.alpha.0}"
|
|
12513
12528
|
},
|
|
12514
12529
|
"$type": "color",
|
|
12515
12530
|
"comment": "Used for the border of a danger (destructive) primary button in the hover state."
|
|
@@ -12556,7 +12571,7 @@
|
|
|
12556
12571
|
"original": {
|
|
12557
12572
|
"value": {
|
|
12558
12573
|
"default": "{color.red.900}",
|
|
12559
|
-
"dark": "{color.
|
|
12574
|
+
"dark": "{color.alpha.0}"
|
|
12560
12575
|
},
|
|
12561
12576
|
"$type": "color",
|
|
12562
12577
|
"comment": "Used for the border of a danger (destructive) primary button in the active state."
|
|
@@ -12587,7 +12602,7 @@
|
|
|
12587
12602
|
"original": {
|
|
12588
12603
|
"value": {
|
|
12589
12604
|
"default": "{color.red.500}",
|
|
12590
|
-
"dark": "{color.red.
|
|
12605
|
+
"dark": "{color.red.100}"
|
|
12591
12606
|
},
|
|
12592
12607
|
"$type": "color",
|
|
12593
12608
|
"comment": "Used for the foreground of a danger (destructive) button in the default state."
|
|
@@ -12612,7 +12627,7 @@
|
|
|
12612
12627
|
"original": {
|
|
12613
12628
|
"value": {
|
|
12614
12629
|
"default": "{color.red.700}",
|
|
12615
|
-
"dark": "{color.red.
|
|
12630
|
+
"dark": "{color.red.50}"
|
|
12616
12631
|
},
|
|
12617
12632
|
"$type": "color",
|
|
12618
12633
|
"comment": "Used for the foreground of a danger (destructive) button in the hover state."
|
|
@@ -12688,7 +12703,7 @@
|
|
|
12688
12703
|
"original": {
|
|
12689
12704
|
"value": {
|
|
12690
12705
|
"default": "{color.neutral.0}",
|
|
12691
|
-
"dark": "
|
|
12706
|
+
"dark": "rgba(236, 89, 65, 0.40)"
|
|
12692
12707
|
},
|
|
12693
12708
|
"$type": "color",
|
|
12694
12709
|
"comment": "Used for the background of an outlined danger (destructive) button in the default state."
|
|
@@ -12713,7 +12728,7 @@
|
|
|
12713
12728
|
"original": {
|
|
12714
12729
|
"value": {
|
|
12715
12730
|
"default": "{color.red.50}",
|
|
12716
|
-
"dark": "
|
|
12731
|
+
"dark": "rgba(236, 89, 65, 0.64)"
|
|
12717
12732
|
},
|
|
12718
12733
|
"$type": "color",
|
|
12719
12734
|
"comment": "Used for the background of an outlined danger (destructive) button in the hover state."
|
|
@@ -12760,7 +12775,7 @@
|
|
|
12760
12775
|
"original": {
|
|
12761
12776
|
"value": {
|
|
12762
12777
|
"default": "{color.red.100}",
|
|
12763
|
-
"dark": "
|
|
12778
|
+
"dark": "rgba(236, 89, 65, 0.32)"
|
|
12764
12779
|
},
|
|
12765
12780
|
"$type": "color",
|
|
12766
12781
|
"comment": "Used for the background of an outlined danger (destructive) button in the active state."
|
|
@@ -12789,7 +12804,7 @@
|
|
|
12789
12804
|
"original": {
|
|
12790
12805
|
"value": {
|
|
12791
12806
|
"default": "{color.red.500}",
|
|
12792
|
-
"dark": "{color.
|
|
12807
|
+
"dark": "{color.alpha.0}"
|
|
12793
12808
|
},
|
|
12794
12809
|
"$type": "color",
|
|
12795
12810
|
"comment": "Used for the border of an outlined danger (destructive) button in the default state."
|
|
@@ -12814,7 +12829,7 @@
|
|
|
12814
12829
|
"original": {
|
|
12815
12830
|
"value": {
|
|
12816
12831
|
"default": "{color.red.700}",
|
|
12817
|
-
"dark": "{color.
|
|
12832
|
+
"dark": "{color.alpha.0}"
|
|
12818
12833
|
},
|
|
12819
12834
|
"$type": "color",
|
|
12820
12835
|
"comment": "Used for the border of an outlined danger (destructive) button in the hover state."
|
|
@@ -12861,7 +12876,7 @@
|
|
|
12861
12876
|
"original": {
|
|
12862
12877
|
"value": {
|
|
12863
12878
|
"default": "{color.red.900}",
|
|
12864
|
-
"dark": "{color.
|
|
12879
|
+
"dark": "{color.alpha.0}"
|
|
12865
12880
|
},
|
|
12866
12881
|
"$type": "color",
|
|
12867
12882
|
"comment": "Used for the border of an outlined danger (destructive) button in the active state."
|
|
@@ -13653,7 +13668,7 @@
|
|
|
13653
13668
|
"original": {
|
|
13654
13669
|
"value": {
|
|
13655
13670
|
"default": "{color.neutral.10}",
|
|
13656
|
-
"dark": "
|
|
13671
|
+
"dark": "rgba(137, 136, 141, 0.16)"
|
|
13657
13672
|
},
|
|
13658
13673
|
"$type": "color",
|
|
13659
13674
|
"comment": "Used for the background of a disabled button."
|
|
@@ -13678,7 +13693,7 @@
|
|
|
13678
13693
|
"original": {
|
|
13679
13694
|
"value": {
|
|
13680
13695
|
"default": "{color.neutral.100}",
|
|
13681
|
-
"dark": "{color.
|
|
13696
|
+
"dark": "{color.alpha.0}"
|
|
13682
13697
|
},
|
|
13683
13698
|
"$type": "color",
|
|
13684
13699
|
"comment": "Used for the border of a disabled button."
|
|
@@ -536,8 +536,8 @@ $gl-dropdown-option-background-color-unselected-default: $gl-action-neutral-back
|
|
|
536
536
|
$gl-dropdown-option-indicator-color-selected-active: $gl-color-neutral-100; // Used for the dropdown selected option indicator in the active state.
|
|
537
537
|
$gl-dropdown-border-color: $gl-color-neutral-700; // Used for the border of a dropdown.
|
|
538
538
|
$gl-datepicker-background-color: $gl-color-neutral-900; // Used for the background color of datepicker.
|
|
539
|
-
$gl-button-disabled-border-color: $gl-color-
|
|
540
|
-
$gl-button-disabled-background-color:
|
|
539
|
+
$gl-button-disabled-border-color: $gl-color-alpha-0; // Used for the border of a disabled button.
|
|
540
|
+
$gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); // Used for the background of a disabled button.
|
|
541
541
|
$gl-button-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled button.
|
|
542
542
|
$gl-button-selected-border-color-active: $gl-color-neutral-300; // Used for the border of a selected button in the active state.
|
|
543
543
|
$gl-button-selected-border-color-hover: $gl-color-neutral-500; // Used for the border of a selected button in the hover state.
|
|
@@ -546,46 +546,47 @@ $gl-button-dashed-border-color-active: $gl-color-neutral-300; // Used for the bo
|
|
|
546
546
|
$gl-button-danger-tertiary-background-color-active: $gl-action-danger-background-color-active; // Used for the background of a borderless, tertiary danger (destructive) button in the active state.
|
|
547
547
|
$gl-button-danger-tertiary-background-color-hover: $gl-action-danger-background-color-hover; // Used for the background of a borderless, tertiary danger (destructive) button in the hover state.
|
|
548
548
|
$gl-button-danger-tertiary-background-color-default: $gl-action-danger-background-color-default; // Used for the background of a borderless, tertiary danger (destructive) button in the default state.
|
|
549
|
-
$gl-button-danger-secondary-border-color-active: $gl-color-
|
|
550
|
-
$gl-button-danger-secondary-border-color-hover: $gl-color-
|
|
551
|
-
$gl-button-danger-secondary-border-color-default: $gl-color-
|
|
552
|
-
$gl-button-danger-secondary-background-color-active:
|
|
553
|
-
$gl-button-danger-secondary-background-color-hover:
|
|
554
|
-
$gl-button-danger-secondary-background-color-default:
|
|
549
|
+
$gl-button-danger-secondary-border-color-active: $gl-color-alpha-0; // Used for the border of an outlined danger (destructive) button in the active state.
|
|
550
|
+
$gl-button-danger-secondary-border-color-hover: $gl-color-alpha-0; // Used for the border of an outlined danger (destructive) button in the hover state.
|
|
551
|
+
$gl-button-danger-secondary-border-color-default: $gl-color-alpha-0; // Used for the border of an outlined danger (destructive) button in the default state.
|
|
552
|
+
$gl-button-danger-secondary-background-color-active: rgba(236, 89, 65, 0.32); // Used for the background of an outlined danger (destructive) button in the active state.
|
|
553
|
+
$gl-button-danger-secondary-background-color-hover: rgba(236, 89, 65, 0.64); // Used for the background of an outlined danger (destructive) button in the hover state.
|
|
554
|
+
$gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.40); // Used for the background of an outlined danger (destructive) button in the default state.
|
|
555
555
|
$gl-button-danger-secondary-foreground-color-active: $gl-color-red-50; // Used for the foreground of a danger (destructive) button in the active state.
|
|
556
|
-
$gl-button-danger-secondary-foreground-color-hover: $gl-color-red-
|
|
557
|
-
$gl-button-danger-secondary-foreground-color-default: $gl-color-red-
|
|
558
|
-
$gl-button-danger-primary-border-color-active: $gl-color-
|
|
559
|
-
$gl-button-danger-primary-border-color-hover: $gl-color-
|
|
560
|
-
$gl-button-danger-primary-border-color-default: $gl-color-
|
|
561
|
-
$gl-button-danger-primary-background-color-active: $gl-color-red-
|
|
562
|
-
$gl-button-danger-primary-background-color-hover: $gl-color-red-
|
|
563
|
-
$gl-button-danger-primary-background-color-default: $gl-color-red-
|
|
564
|
-
$gl-button-danger-primary-foreground-color-default: $gl-color-neutral-
|
|
556
|
+
$gl-button-danger-secondary-foreground-color-hover: $gl-color-red-50; // Used for the foreground of a danger (destructive) button in the hover state.
|
|
557
|
+
$gl-button-danger-secondary-foreground-color-default: $gl-color-red-100; // Used for the foreground of a danger (destructive) button in the default state.
|
|
558
|
+
$gl-button-danger-primary-border-color-active: $gl-color-alpha-0; // Used for the border of a danger (destructive) primary button in the active state.
|
|
559
|
+
$gl-button-danger-primary-border-color-hover: $gl-color-alpha-0; // Used for the border of a danger (destructive) primary button in the hover state.
|
|
560
|
+
$gl-button-danger-primary-border-color-default: $gl-color-alpha-0; // Used for the border of a danger (destructive) primary button in the default state.
|
|
561
|
+
$gl-button-danger-primary-background-color-active: $gl-color-red-400; // Used for the background of a danger (destructive) primary button in the active state.
|
|
562
|
+
$gl-button-danger-primary-background-color-hover: $gl-color-red-200; // Used for the background of a danger (destructive) primary button in the hover state.
|
|
563
|
+
$gl-button-danger-primary-background-color-default: $gl-color-red-300; // Used for the background of a danger (destructive) primary button in the default state.
|
|
564
|
+
$gl-button-danger-primary-foreground-color-default: $gl-color-neutral-950; // Used for the foreground of a danger (destructive) primary button in the default state.
|
|
565
565
|
$gl-button-confirm-tertiary-background-color-active: $gl-action-confirm-background-color-active; // Used for the background of a borderless, tertiary confirm (positive) button in the active state.
|
|
566
566
|
$gl-button-confirm-tertiary-background-color-hover: $gl-action-confirm-background-color-hover; // Used for the background of a borderless, tertiary confirm (positive) button in the hover state.
|
|
567
567
|
$gl-button-confirm-tertiary-background-color-default: $gl-action-confirm-background-color-default; // Used for the background of a borderless, tertiary confirm (positive) button in the default state.
|
|
568
|
-
$gl-button-confirm-secondary-border-color-active: $gl-color-
|
|
569
|
-
$gl-button-confirm-secondary-border-color-hover: $gl-color-
|
|
570
|
-
$gl-button-confirm-secondary-border-color-default: $gl-color-
|
|
571
|
-
$gl-button-confirm-secondary-background-color-active:
|
|
572
|
-
$gl-button-confirm-secondary-background-color-hover:
|
|
573
|
-
$gl-button-confirm-secondary-background-color-default:
|
|
574
|
-
$gl-button-confirm-secondary-foreground-color-active: $gl-color-blue-
|
|
575
|
-
$gl-button-confirm-secondary-foreground-color-hover: $gl-color-blue-
|
|
576
|
-
$gl-button-confirm-secondary-foreground-color-default: $gl-color-blue-
|
|
577
|
-
$gl-button-confirm-primary-border-color-active: $gl-color-
|
|
578
|
-
$gl-button-confirm-primary-border-color-hover: $gl-color-
|
|
579
|
-
$gl-button-confirm-primary-border-color-default: $gl-color-
|
|
568
|
+
$gl-button-confirm-secondary-border-color-active: $gl-color-alpha-0; // Used for the border of an outlined confirm (positive) button in the active state.
|
|
569
|
+
$gl-button-confirm-secondary-border-color-hover: $gl-color-alpha-0; // Used for the border of an outlined confirm (positive) button in the hover state.
|
|
570
|
+
$gl-button-confirm-secondary-border-color-default: $gl-color-alpha-0; // Used for the border of an outlined confirm (positive) button in the default state.
|
|
571
|
+
$gl-button-confirm-secondary-background-color-active: rgba(66, 143, 220, 0.32); // Used for the background of an outlined confirm (positive) button in the active state.
|
|
572
|
+
$gl-button-confirm-secondary-background-color-hover: rgba(66, 143, 220, 0.64); // Used for the background of an outlined confirm (positive) button in the hover state.
|
|
573
|
+
$gl-button-confirm-secondary-background-color-default: rgba(66, 143, 220, 0.4); // Used for the background of an outlined confirm (positive) button in the default state.
|
|
574
|
+
$gl-button-confirm-secondary-foreground-color-active: $gl-color-blue-100; // Used for the foreground of a confirm (positive) button in the active state.
|
|
575
|
+
$gl-button-confirm-secondary-foreground-color-hover: $gl-color-blue-100; // Used for the foreground of a confirm (positive) button in the hover state.
|
|
576
|
+
$gl-button-confirm-secondary-foreground-color-default: $gl-color-blue-100; // Used for the foreground of a confirm (positive) button in the default state.
|
|
577
|
+
$gl-button-confirm-primary-border-color-active: $gl-color-alpha-0; // Used for the border of a confirm (positive) primary button in the active state.
|
|
578
|
+
$gl-button-confirm-primary-border-color-hover: $gl-color-alpha-0; // Used for the border of a confirm (positive) primary button in the hover state.
|
|
579
|
+
$gl-button-confirm-primary-border-color-default: $gl-color-alpha-0; // Used for the border of a confirm (positive) primary button in the default state.
|
|
580
|
+
$gl-button-confirm-primary-foreground-color-default: $gl-color-neutral-950; // Used for the foreground of a confirm (positive) primary button in the default state.
|
|
580
581
|
$gl-button-default-tertiary-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default borderless, tertiary button in the active state.
|
|
581
582
|
$gl-button-default-tertiary-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default borderless, tertiary button in the hover state.
|
|
582
583
|
$gl-button-default-tertiary-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default borderless, tertiary button in the default state.
|
|
583
|
-
$gl-button-default-primary-border-color-active: $gl-color-
|
|
584
|
-
$gl-button-default-primary-border-color-hover: $gl-color-
|
|
585
|
-
$gl-button-default-primary-border-color-default: $gl-color-
|
|
586
|
-
$gl-button-default-primary-background-color-active:
|
|
587
|
-
$gl-button-default-primary-background-color-hover:
|
|
588
|
-
$gl-button-default-primary-background-color-default:
|
|
584
|
+
$gl-button-default-primary-border-color-active: $gl-color-alpha-0; // Used for the border of an default primary button in the active state.
|
|
585
|
+
$gl-button-default-primary-border-color-hover: $gl-color-alpha-0; // Used for the border of an default primary button in the hover state.
|
|
586
|
+
$gl-button-default-primary-border-color-default: $gl-color-alpha-0; // Used for the border of an default primary button in the default state.
|
|
587
|
+
$gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); // Used for the background of an default primary button in the active state.
|
|
588
|
+
$gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); // Used for the background of an default primary button in the hover state.
|
|
589
|
+
$gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); // Used for the background of an default primary button in the default state.
|
|
589
590
|
$gl-button-default-primary-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a default primary button in the default state.
|
|
590
591
|
$gl-broadcast-banner-text-color-red: $gl-color-neutral-0; // Used for the text for the red banner type.
|
|
591
592
|
$gl-broadcast-banner-text-color-lightred: $gl-color-neutral-0; // Used for the text for the lightred banner type.
|
|
@@ -751,19 +752,19 @@ $gl-action-strong-neutral-background-color-hover: $gl-color-neutral-600; // Used
|
|
|
751
752
|
$gl-action-strong-neutral-background-color-default: $gl-color-neutral-700; // Used for the background of a strong neutral action in the default state.
|
|
752
753
|
$gl-action-strong-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a strong confirm action in the default state.
|
|
753
754
|
$gl-action-strong-confirm-foreground-color-default: $gl-color-neutral-950; // Used for the foreground of a strong confirm action in the default state.
|
|
754
|
-
$gl-action-strong-confirm-background-color-active: $gl-color-blue-
|
|
755
|
-
$gl-action-strong-confirm-background-color-hover: $gl-color-blue-
|
|
756
|
-
$gl-action-strong-confirm-background-color-default: $gl-color-blue-
|
|
755
|
+
$gl-action-strong-confirm-background-color-active: $gl-color-blue-400; // Used for the background of a strong confirm action in the active state.
|
|
756
|
+
$gl-action-strong-confirm-background-color-hover: $gl-color-blue-200; // Used for the background of a strong confirm action in the hover state.
|
|
757
|
+
$gl-action-strong-confirm-background-color-default: $gl-color-blue-300; // Used for the background of a strong confirm action in the default state.
|
|
757
758
|
$gl-action-danger-border-color-default: $gl-color-alpha-0; // Used for the border of a danger action in the default state.
|
|
758
759
|
$gl-action-danger-background-color-focus: $gl-action-danger-background-color-hover; // Used for the background of a danger (destructive) action in the focus state.
|
|
759
|
-
$gl-action-danger-foreground-color-active: $gl-color-red-
|
|
760
|
-
$gl-action-danger-foreground-color-hover: $gl-color-red-
|
|
761
|
-
$gl-action-danger-foreground-color-default: $gl-color-red-
|
|
760
|
+
$gl-action-danger-foreground-color-active: $gl-color-red-100; // Used for the foreground of a danger (destructive) action in the active state.
|
|
761
|
+
$gl-action-danger-foreground-color-hover: $gl-color-red-100; // Used for the foreground of a danger (destructive) action in the hover state.
|
|
762
|
+
$gl-action-danger-foreground-color-default: $gl-color-red-200; // Used for the foreground of a danger (destructive) action in the default state.
|
|
762
763
|
$gl-action-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a confirm action in the default state.
|
|
763
764
|
$gl-action-confirm-background-color-focus: $gl-action-confirm-background-color-hover; // Used for the background of a confirm (positive) action in the focus state.
|
|
764
|
-
$gl-action-confirm-foreground-color-active: $gl-color-blue-
|
|
765
|
-
$gl-action-confirm-foreground-color-hover: $gl-color-blue-
|
|
766
|
-
$gl-action-confirm-foreground-color-default: $gl-color-blue-
|
|
765
|
+
$gl-action-confirm-foreground-color-active: $gl-color-blue-100; // Used for the foreground of a confirm (positive) action in the active state.
|
|
766
|
+
$gl-action-confirm-foreground-color-hover: $gl-color-blue-100; // Used for the foreground of a confirm (positive) action in the hover state.
|
|
767
|
+
$gl-action-confirm-foreground-color-default: $gl-color-blue-200; // Used for the foreground of a confirm (positive) action in the default state.
|
|
767
768
|
$gl-action-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral action in the default state.
|
|
768
769
|
$gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
|
|
769
770
|
$gl-action-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a neutral action in the default state.
|
|
@@ -833,7 +834,6 @@ $gl-button-confirm-primary-border-color-focus: $gl-button-confirm-primary-border
|
|
|
833
834
|
$gl-button-confirm-primary-background-color-active: $gl-action-strong-confirm-background-color-active; // Used for the background of a confirm (positive) primary button in the active state.
|
|
834
835
|
$gl-button-confirm-primary-background-color-hover: $gl-action-strong-confirm-background-color-hover; // Used for the background of a confirm (positive) primary button in the hover state.
|
|
835
836
|
$gl-button-confirm-primary-background-color-default: $gl-action-strong-confirm-background-color-default; // Used for the background of a confirm (positive) primary button in the default state.
|
|
836
|
-
$gl-button-confirm-primary-foreground-color-default: $gl-action-strong-confirm-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the default state.
|
|
837
837
|
$gl-button-default-tertiary-border-color-default: $gl-action-neutral-border-color-default; // Used for the border of a default borderless, tertiary button in the default state.
|
|
838
838
|
$gl-button-default-tertiary-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default borderless, tertiary button in the focus state.
|
|
839
839
|
$gl-button-default-tertiary-foreground-color-default: $gl-action-neutral-foreground-color-default; // Used for the foreground of a default borderless, tertiary button in the default state.
|
|
@@ -875,7 +875,7 @@ $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Us
|
|
|
875
875
|
$gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
|
|
876
876
|
$gl-border-color-section: $gl-background-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
|
|
877
877
|
$gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
|
|
878
|
-
$gl-action-strong-neutral-foreground-color-hover: $gl-
|
|
878
|
+
$gl-action-strong-neutral-foreground-color-hover: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the hover state.
|
|
879
879
|
$gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.
|
|
880
880
|
$gl-action-strong-confirm-border-color-hover: $gl-action-strong-confirm-border-color-default; // Used for the border of a strong confirm action in the hover state.
|
|
881
881
|
$gl-action-strong-confirm-foreground-color-hover: $gl-action-strong-confirm-foreground-color-default; // Used for the foreground of a strong confirm action in the hover state.
|
|
@@ -577,6 +577,7 @@ $gl-button-confirm-secondary-foreground-color-default: $gl-color-blue-500; // Us
|
|
|
577
577
|
$gl-button-confirm-primary-border-color-active: $gl-color-blue-900; // Used for the border of a confirm (positive) primary button in the active state.
|
|
578
578
|
$gl-button-confirm-primary-border-color-hover: $gl-color-blue-800; // Used for the border of a confirm (positive) primary button in the hover state.
|
|
579
579
|
$gl-button-confirm-primary-border-color-default: $gl-color-blue-600; // Used for the border of a confirm (positive) primary button in the default state.
|
|
580
|
+
$gl-button-confirm-primary-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a confirm (positive) primary button in the default state.
|
|
580
581
|
$gl-button-default-tertiary-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default borderless, tertiary button in the active state.
|
|
581
582
|
$gl-button-default-tertiary-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default borderless, tertiary button in the hover state.
|
|
582
583
|
$gl-button-default-tertiary-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default borderless, tertiary button in the default state.
|
|
@@ -833,7 +834,6 @@ $gl-button-confirm-primary-border-color-focus: $gl-button-confirm-primary-border
|
|
|
833
834
|
$gl-button-confirm-primary-background-color-active: $gl-action-strong-confirm-background-color-active; // Used for the background of a confirm (positive) primary button in the active state.
|
|
834
835
|
$gl-button-confirm-primary-background-color-hover: $gl-action-strong-confirm-background-color-hover; // Used for the background of a confirm (positive) primary button in the hover state.
|
|
835
836
|
$gl-button-confirm-primary-background-color-default: $gl-action-strong-confirm-background-color-default; // Used for the background of a confirm (positive) primary button in the default state.
|
|
836
|
-
$gl-button-confirm-primary-foreground-color-default: $gl-action-strong-confirm-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the default state.
|
|
837
837
|
$gl-button-default-tertiary-border-color-default: $gl-action-neutral-border-color-default; // Used for the border of a default borderless, tertiary button in the default state.
|
|
838
838
|
$gl-button-default-tertiary-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default borderless, tertiary button in the focus state.
|
|
839
839
|
$gl-button-default-tertiary-foreground-color-default: $gl-action-neutral-foreground-color-default; // Used for the foreground of a default borderless, tertiary button in the default state.
|
|
@@ -94,7 +94,7 @@ const dropdownMixin = extend({
|
|
|
94
94
|
// Position `static` is needed to allow menu to "breakout" of the `scrollParent`
|
|
95
95
|
// boundaries when boundary is anything other than `scrollParent`
|
|
96
96
|
// See: https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
|
|
97
|
-
return this.boundary !== 'scrollParent' ? '
|
|
97
|
+
return this.boundary !== 'scrollParent' ? 'gl-static' : '';
|
|
98
98
|
}
|
|
99
99
|
},
|
|
100
100
|
watch: {
|