@gitlab/ui 128.0.0 → 128.2.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 (43) hide show
  1. package/dist/components/base/color_mode_toggle/color_mode_toggle.js +92 -0
  2. package/dist/components/base/form/form_checkbox/form_checkbox.js +0 -3
  3. package/dist/components/base/form/form_checkbox/form_checkbox_group.js +132 -3
  4. package/dist/components/index.js +1 -0
  5. package/dist/index.css +1 -1
  6. package/dist/index.css.map +1 -1
  7. package/dist/tokens/build/js/tokens.dark.js +127 -127
  8. package/dist/tokens/build/js/tokens.js +110 -110
  9. package/dist/vendor/bootstrap-vue/src/constants/components.js +1 -3
  10. package/dist/vendor/bootstrap-vue/src/mixins/form-radio-check-group.js +1 -2
  11. package/package.json +4 -4
  12. package/src/components/base/color_mode_toggle/color_mode_toggle.vue +65 -0
  13. package/src/components/index.js +1 -0
  14. package/src/tokens/build/css/tokens.css +24 -24
  15. package/src/tokens/build/css/tokens.dark.css +26 -26
  16. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +82 -82
  17. package/src/tokens/build/docs/tokens-tailwind-docs.json +81 -81
  18. package/src/tokens/build/figma/constants.tokens.json +2245 -226
  19. package/src/tokens/build/figma/contextual.tokens.json +753 -77
  20. package/src/tokens/build/figma/deprecated.tokens.json +4151 -420
  21. package/src/tokens/build/figma/semantic.tokens.json +171 -19
  22. package/src/tokens/build/js/tokens.dark.js +130 -127
  23. package/src/tokens/build/js/tokens.js +113 -110
  24. package/src/tokens/build/json/tokens.dark.json +161 -161
  25. package/src/tokens/build/json/tokens.json +142 -142
  26. package/src/tokens/build/scss/_tokens.dark.scss +26 -26
  27. package/src/tokens/build/scss/_tokens.scss +24 -24
  28. package/src/tokens/constant/color.alpha.tokens.json +135 -15
  29. package/src/tokens/constant/color.tokens.json +2110 -211
  30. package/src/tokens/contextual/avatar.tokens.json +54 -6
  31. package/src/tokens/contextual/button.tokens.json +90 -10
  32. package/src/tokens/contextual/chart.tokens.json +9 -1
  33. package/src/tokens/contextual/illustration.tokens.json +600 -60
  34. package/src/tokens/deprecated/deprecated.color.data_viz.tokens.json +1100 -110
  35. package/src/tokens/deprecated/deprecated.color.theme.tokens.json +1440 -144
  36. package/src/tokens/deprecated/deprecated.color.tokens.json +1490 -149
  37. package/src/tokens/deprecated/deprecated.color.transparency.tokens.json +147 -43
  38. package/src/tokens/semantic/action.tokens.json +162 -18
  39. package/src/tokens/semantic/background.tokens.json +9 -1
  40. package/translations.js +2 -0
  41. package/dist/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox-group.js +0 -37
  42. package/dist/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox.js +0 -134
  43. package/dist/vendor/bootstrap-vue/src/components/form-checkbox/index.js +0 -2
@@ -1,146 +1,250 @@
1
1
  {
2
2
  "t-gray-a": {
3
- "02": {
4
- "$value": "rgba(05, 05, 06, 0.02)",
3
+ "16": {
4
+ "$value": {
5
+ "colorSpace": "srgb",
6
+ "components": [
7
+ 0.0196078431372549,
8
+ 0.0196078431372549,
9
+ 0.023529411764705882
10
+ ],
11
+ "alpha": 0.16
12
+ },
5
13
  "$type": "color",
6
14
  "$extensions": {
7
15
  "com.figma.scopes": []
8
16
  },
9
- "$description": "Use color.alpha.dark.2 instead.",
17
+ "$description": "Use color.alpha.dark.16 instead.",
10
18
  "themeable": true,
11
19
  "prefix": false,
12
20
  "$deprecated": true
13
21
  },
14
- "04": {
15
- "$value": "rgba(05, 05, 06, 0.04)",
22
+ "24": {
23
+ "$value": {
24
+ "colorSpace": "srgb",
25
+ "components": [
26
+ 0.0196078431372549,
27
+ 0.0196078431372549,
28
+ 0.023529411764705882
29
+ ],
30
+ "alpha": 0.24
31
+ },
16
32
  "$type": "color",
17
33
  "$extensions": {
18
34
  "com.figma.scopes": []
19
35
  },
20
- "$description": "Use color.alpha.dark.4 instead.",
36
+ "$description": "Use color.alpha.dark.24 instead.",
21
37
  "themeable": true,
22
38
  "prefix": false,
23
39
  "$deprecated": true
24
40
  },
25
- "06": {
26
- "$value": "rgba(05, 05, 06, 0.06)",
41
+ "02": {
42
+ "$value": {
43
+ "colorSpace": "srgb",
44
+ "components": [
45
+ 0.0196078431372549,
46
+ 0.0196078431372549,
47
+ 0.023529411764705882
48
+ ],
49
+ "alpha": 0.02
50
+ },
27
51
  "$type": "color",
28
52
  "$extensions": {
29
53
  "com.figma.scopes": []
30
54
  },
31
- "$description": "Use color.alpha.dark.6 instead.",
55
+ "$description": "Use color.alpha.dark.2 instead.",
32
56
  "themeable": true,
33
57
  "prefix": false,
34
58
  "$deprecated": true
35
59
  },
36
- "08": {
37
- "$value": "rgba(05, 05, 06, 0.08)",
60
+ "04": {
61
+ "$value": {
62
+ "colorSpace": "srgb",
63
+ "components": [
64
+ 0.0196078431372549,
65
+ 0.0196078431372549,
66
+ 0.023529411764705882
67
+ ],
68
+ "alpha": 0.04
69
+ },
38
70
  "$type": "color",
39
71
  "$extensions": {
40
72
  "com.figma.scopes": []
41
73
  },
42
- "$description": "Use color.alpha.dark.8 instead.",
74
+ "$description": "Use color.alpha.dark.4 instead.",
43
75
  "themeable": true,
44
76
  "prefix": false,
45
77
  "$deprecated": true
46
78
  },
47
- "16": {
48
- "$value": "rgba(05, 05, 06, 0.16)",
79
+ "06": {
80
+ "$value": {
81
+ "colorSpace": "srgb",
82
+ "components": [
83
+ 0.0196078431372549,
84
+ 0.0196078431372549,
85
+ 0.023529411764705882
86
+ ],
87
+ "alpha": 0.06
88
+ },
49
89
  "$type": "color",
50
90
  "$extensions": {
51
91
  "com.figma.scopes": []
52
92
  },
53
- "$description": "Use color.alpha.dark.16 instead.",
93
+ "$description": "Use color.alpha.dark.6 instead.",
54
94
  "themeable": true,
55
95
  "prefix": false,
56
96
  "$deprecated": true
57
97
  },
58
- "24": {
59
- "$value": "rgba(05, 05, 06, 0.24)",
98
+ "08": {
99
+ "$value": {
100
+ "colorSpace": "srgb",
101
+ "components": [
102
+ 0.0196078431372549,
103
+ 0.0196078431372549,
104
+ 0.023529411764705882
105
+ ],
106
+ "alpha": 0.08
107
+ },
60
108
  "$type": "color",
61
109
  "$extensions": {
62
110
  "com.figma.scopes": []
63
111
  },
64
- "$description": "Use color.alpha.dark.24 instead.",
112
+ "$description": "Use color.alpha.dark.8 instead.",
65
113
  "themeable": true,
66
114
  "prefix": false,
67
115
  "$deprecated": true
68
116
  }
69
117
  },
70
118
  "t-white-a": {
71
- "02": {
72
- "$value": "rgba(255, 255, 255, 0.02)",
119
+ "16": {
120
+ "$value": {
121
+ "colorSpace": "srgb",
122
+ "components": [
123
+ 1,
124
+ 1,
125
+ 1
126
+ ],
127
+ "alpha": 0.16
128
+ },
73
129
  "$type": "color",
74
130
  "$extensions": {
75
131
  "com.figma.scopes": []
76
132
  },
77
- "$description": "Use color.alpha.light.2 instead.",
133
+ "$description": "Use color.alpha.light.16 instead.",
78
134
  "themeable": true,
79
135
  "prefix": false,
80
136
  "$deprecated": true
81
137
  },
82
- "04": {
83
- "$value": "rgba(255, 255, 255, 0.04)",
138
+ "24": {
139
+ "$value": {
140
+ "colorSpace": "srgb",
141
+ "components": [
142
+ 1,
143
+ 1,
144
+ 1
145
+ ],
146
+ "alpha": 0.24
147
+ },
84
148
  "$type": "color",
85
149
  "$extensions": {
86
150
  "com.figma.scopes": []
87
151
  },
88
- "$description": "Use color.alpha.light.4 instead.",
152
+ "$description": "Use color.alpha.light.24 instead.",
89
153
  "themeable": true,
90
154
  "prefix": false,
91
155
  "$deprecated": true
92
156
  },
93
- "06": {
94
- "$value": "rgba(255, 255, 255, 0.06)",
157
+ "36": {
158
+ "$value": {
159
+ "colorSpace": "srgb",
160
+ "components": [
161
+ 1,
162
+ 1,
163
+ 1
164
+ ],
165
+ "alpha": 0.36
166
+ },
95
167
  "$type": "color",
96
168
  "$extensions": {
97
169
  "com.figma.scopes": []
98
170
  },
99
- "$description": "Use color.alpha.light.6 instead.",
171
+ "$description": "Use color.alpha.light.36 instead.",
100
172
  "themeable": true,
101
173
  "prefix": false,
102
174
  "$deprecated": true
103
175
  },
104
- "08": {
105
- "$value": "rgba(255, 255, 255, 0.08)",
176
+ "02": {
177
+ "$value": {
178
+ "colorSpace": "srgb",
179
+ "components": [
180
+ 1,
181
+ 1,
182
+ 1
183
+ ],
184
+ "alpha": 0.02
185
+ },
106
186
  "$type": "color",
107
187
  "$extensions": {
108
- "com.figma.scopes": []
188
+ "com.figma.scope": []
109
189
  },
110
- "$description": "Use color.alpha.light.8 instead.",
190
+ "$description": "Use color.alpha.light.2 instead.",
111
191
  "themeable": true,
112
192
  "prefix": false,
113
193
  "$deprecated": true
114
194
  },
115
- "16": {
116
- "$value": "rgba(255, 255, 255, 0.16)",
195
+ "04": {
196
+ "$value": {
197
+ "colorSpace": "srgb",
198
+ "components": [
199
+ 1,
200
+ 1,
201
+ 1
202
+ ],
203
+ "alpha": 0.04
204
+ },
117
205
  "$type": "color",
118
206
  "$extensions": {
119
- "com.figma.scopes": []
207
+ "com.figma.scope": []
120
208
  },
121
- "$description": "Use color.alpha.light.16 instead.",
209
+ "$description": "Use color.alpha.light.4 instead.",
122
210
  "themeable": true,
123
211
  "prefix": false,
124
212
  "$deprecated": true
125
213
  },
126
- "24": {
127
- "$value": "rgba(255, 255, 255, 0.24)",
214
+ "06": {
215
+ "$value": {
216
+ "colorSpace": "srgb",
217
+ "components": [
218
+ 1,
219
+ 1,
220
+ 1
221
+ ],
222
+ "alpha": 0.06
223
+ },
128
224
  "$type": "color",
129
225
  "$extensions": {
130
- "com.figma.scopes": []
226
+ "com.figma.scope": []
131
227
  },
132
- "$description": "Use color.alpha.light.24 instead.",
228
+ "$description": "Use color.alpha.light.6 instead.",
133
229
  "themeable": true,
134
230
  "prefix": false,
135
231
  "$deprecated": true
136
232
  },
137
- "36": {
138
- "$value": "rgba(255, 255, 255, 0.36)",
233
+ "08": {
234
+ "$value": {
235
+ "colorSpace": "srgb",
236
+ "components": [
237
+ 1,
238
+ 1,
239
+ 1
240
+ ],
241
+ "alpha": 0.08
242
+ },
139
243
  "$type": "color",
140
244
  "$extensions": {
141
- "com.figma.scopes": []
245
+ "com.figma.scope": []
142
246
  },
143
- "$description": "Use color.alpha.light.36 instead.",
247
+ "$description": "Use color.alpha.light.8 instead.",
144
248
  "themeable": true,
145
249
  "prefix": false,
146
250
  "$deprecated": true
@@ -271,8 +271,24 @@
271
271
  "color": {
272
272
  "default": {
273
273
  "$value": {
274
- "default": "rgba(164, 163, 168, 0.0)",
275
- "dark": "rgba(137, 136, 141, 0.0)"
274
+ "default": {
275
+ "colorSpace": "srgb",
276
+ "components": [
277
+ 0.6431372549019608,
278
+ 0.6392156862745098,
279
+ 0.6588235294117647
280
+ ],
281
+ "alpha": 0
282
+ },
283
+ "dark": {
284
+ "colorSpace": "srgb",
285
+ "components": [
286
+ 0.5372549019607843,
287
+ 0.5333333333333333,
288
+ 0.5529411764705883
289
+ ],
290
+ "alpha": 0
291
+ }
276
292
  },
277
293
  "$type": "color",
278
294
  "$description": "Used for the background of a neutral action in the default state.",
@@ -285,8 +301,24 @@
285
301
  },
286
302
  "hover": {
287
303
  "$value": {
288
- "default": "rgba(164, 163, 168, 0.16)",
289
- "dark": "rgba(137, 136, 141, 0.4)"
304
+ "default": {
305
+ "colorSpace": "srgb",
306
+ "components": [
307
+ 0.6431372549019608,
308
+ 0.6392156862745098,
309
+ 0.6588235294117647
310
+ ],
311
+ "alpha": 0.16
312
+ },
313
+ "dark": {
314
+ "colorSpace": "srgb",
315
+ "components": [
316
+ 0.5372549019607843,
317
+ 0.5333333333333333,
318
+ 0.5529411764705883
319
+ ],
320
+ "alpha": 0.4
321
+ }
290
322
  },
291
323
  "$type": "color",
292
324
  "$description": "Used for the background of a neutral action in the hover state.",
@@ -310,8 +342,24 @@
310
342
  },
311
343
  "active": {
312
344
  "$value": {
313
- "default": "rgba(83, 81, 88, 0.24)",
314
- "dark": "rgba(137, 136, 141, 0.16)"
345
+ "default": {
346
+ "colorSpace": "srgb",
347
+ "components": [
348
+ 0.3254901960784314,
349
+ 0.3176470588235294,
350
+ 0.34509803921568627
351
+ ],
352
+ "alpha": 0.24
353
+ },
354
+ "dark": {
355
+ "colorSpace": "srgb",
356
+ "components": [
357
+ 0.5372549019607843,
358
+ 0.5333333333333333,
359
+ 0.5529411764705883
360
+ ],
361
+ "alpha": 0.16
362
+ }
315
363
  },
316
364
  "$type": "color",
317
365
  "$description": "Used for the background of a neutral action in the active state.",
@@ -431,8 +479,24 @@
431
479
  "color": {
432
480
  "default": {
433
481
  "$value": {
434
- "default": "rgba(99, 166, 233, 0.0)",
435
- "dark": "rgba(66, 143, 220, 0.0)"
482
+ "default": {
483
+ "colorSpace": "srgb",
484
+ "components": [
485
+ 0.38823529411764707,
486
+ 0.6509803921568628,
487
+ 0.9137254901960784
488
+ ],
489
+ "alpha": 0
490
+ },
491
+ "dark": {
492
+ "colorSpace": "srgb",
493
+ "components": [
494
+ 0.25882352941176473,
495
+ 0.5607843137254902,
496
+ 0.8627450980392157
497
+ ],
498
+ "alpha": 0
499
+ }
436
500
  },
437
501
  "$type": "color",
438
502
  "$description": "Used for the background of a confirm (positive) action in the default state.",
@@ -445,8 +509,24 @@
445
509
  },
446
510
  "hover": {
447
511
  "$value": {
448
- "default": "rgba(99, 166, 233, 0.16)",
449
- "dark": "rgba(66, 143, 220, 0.4)"
512
+ "default": {
513
+ "colorSpace": "srgb",
514
+ "components": [
515
+ 0.38823529411764707,
516
+ 0.6509803921568628,
517
+ 0.9137254901960784
518
+ ],
519
+ "alpha": 0.16
520
+ },
521
+ "dark": {
522
+ "colorSpace": "srgb",
523
+ "components": [
524
+ 0.25882352941176473,
525
+ 0.5607843137254902,
526
+ 0.8627450980392157
527
+ ],
528
+ "alpha": 0.4
529
+ }
450
530
  },
451
531
  "$type": "color",
452
532
  "$description": "Used for the background of a confirm (positive) action in the hover state.",
@@ -470,8 +550,24 @@
470
550
  },
471
551
  "active": {
472
552
  "$value": {
473
- "default": "rgba(11, 92, 173, 0.24)",
474
- "dark": "rgba(66, 143, 220, 0.16)"
553
+ "default": {
554
+ "colorSpace": "srgb",
555
+ "components": [
556
+ 0.043137254901960784,
557
+ 0.3607843137254902,
558
+ 0.6784313725490196
559
+ ],
560
+ "alpha": 0.24
561
+ },
562
+ "dark": {
563
+ "colorSpace": "srgb",
564
+ "components": [
565
+ 0.25882352941176473,
566
+ 0.5607843137254902,
567
+ 0.8627450980392157
568
+ ],
569
+ "alpha": 0.16
570
+ }
475
571
  },
476
572
  "$type": "color",
477
573
  "$description": "Used for the background of a confirm (positive) action in the active state.",
@@ -591,8 +687,24 @@
591
687
  "color": {
592
688
  "default": {
593
689
  "$value": {
594
- "default": "rgba(245, 127, 108, 0.0)",
595
- "dark": "rgba(236, 89, 65, 0.0)"
690
+ "default": {
691
+ "colorSpace": "srgb",
692
+ "components": [
693
+ 0.9607843137254902,
694
+ 0.4980392156862745,
695
+ 0.4235294117647059
696
+ ],
697
+ "alpha": 0
698
+ },
699
+ "dark": {
700
+ "colorSpace": "srgb",
701
+ "components": [
702
+ 0.9254901960784314,
703
+ 0.34901960784313724,
704
+ 0.2549019607843137
705
+ ],
706
+ "alpha": 0
707
+ }
596
708
  },
597
709
  "$type": "color",
598
710
  "$description": "Used for the background of a danger (destructive) action in the default state.",
@@ -605,8 +717,24 @@
605
717
  },
606
718
  "hover": {
607
719
  "$value": {
608
- "default": "rgba(245, 127, 108, 0.16)",
609
- "dark": "rgba(236, 89, 65, 0.4)"
720
+ "default": {
721
+ "colorSpace": "srgb",
722
+ "components": [
723
+ 0.9607843137254902,
724
+ 0.4980392156862745,
725
+ 0.4235294117647059
726
+ ],
727
+ "alpha": 0.16
728
+ },
729
+ "dark": {
730
+ "colorSpace": "srgb",
731
+ "components": [
732
+ 0.9254901960784314,
733
+ 0.34901960784313724,
734
+ 0.2549019607843137
735
+ ],
736
+ "alpha": 0.4
737
+ }
610
738
  },
611
739
  "$type": "color",
612
740
  "$description": "Used for the background of a danger (destructive) action in the hover state.",
@@ -630,8 +758,24 @@
630
758
  },
631
759
  "active": {
632
760
  "$value": {
633
- "default": "rgba(174, 24, 0, 0.24)",
634
- "dark": "rgba(236, 89, 65, 0.16)"
761
+ "default": {
762
+ "colorSpace": "srgb",
763
+ "components": [
764
+ 0.6823529411764706,
765
+ 0.09411764705882353,
766
+ 0
767
+ ],
768
+ "alpha": 0.24
769
+ },
770
+ "dark": {
771
+ "colorSpace": "srgb",
772
+ "components": [
773
+ 0.9254901960784314,
774
+ 0.34901960784313724,
775
+ 0.2549019607843137
776
+ ],
777
+ "alpha": 0.16
778
+ }
635
779
  },
636
780
  "$type": "color",
637
781
  "$description": "Used for the background of a danger (destructive) action in the active state.",
@@ -88,7 +88,15 @@
88
88
  "overlay": {
89
89
  "$value": {
90
90
  "default": "{color.alpha.dark.24}",
91
- "dark": "rgba(0,0,0,0.64)"
91
+ "dark": {
92
+ "colorSpace": "srgb",
93
+ "components": [
94
+ 0,
95
+ 0,
96
+ 0
97
+ ],
98
+ "alpha": 0.64
99
+ }
92
100
  },
93
101
  "$type": "color",
94
102
  "$description": "Used for an overlay that covers other content.",
package/translations.js CHANGED
@@ -17,6 +17,8 @@ export default {
17
17
  'GlCollapsibleListbox.loadingAnnouncementText.loadingMoreItems': 'Loading more items',
18
18
  'GlCollapsibleListbox.loadingAnnouncementText.searching': 'Searching',
19
19
  'GlCollapsibleListbox.srOnlyResultsLabel': null,
20
+ 'GlColorModeToggle.darkLabel': 'Dark mode',
21
+ 'GlColorModeToggle.lightLabel': 'Light mode',
20
22
  'GlDatepicker.monthLabel': 'Month',
21
23
  'GlDatepicker.yearLabel': 'Year',
22
24
  'GlKeysetPagination.navigationLabel': 'Pagination',
@@ -1,37 +0,0 @@
1
- import { extend } from '../../vue';
2
- import { NAME_FORM_CHECKBOX_GROUP } from '../../constants/components';
3
- import { PROP_TYPE_ARRAY, PROP_TYPE_BOOLEAN } from '../../constants/props';
4
- import { sortKeys } from '../../utils/object';
5
- import { makePropsConfigurable, makeProp } from '../../utils/props';
6
- import { props as props$1, MODEL_PROP_NAME, formRadioCheckGroupMixin } from '../../mixins/form-radio-check-group';
7
-
8
- // --- Props ---
9
-
10
- const props = makePropsConfigurable(sortKeys({
11
- ...props$1,
12
- [MODEL_PROP_NAME]: makeProp(PROP_TYPE_ARRAY, []),
13
- // Custom switch styling
14
- switches: makeProp(PROP_TYPE_BOOLEAN, false)
15
- }), NAME_FORM_CHECKBOX_GROUP);
16
-
17
- // --- Main component ---
18
-
19
- // @vue/component
20
- const BFormCheckboxGroup = /*#__PURE__*/extend({
21
- name: NAME_FORM_CHECKBOX_GROUP,
22
- // Includes render function
23
- mixins: [formRadioCheckGroupMixin],
24
- provide() {
25
- return {
26
- getBvCheckGroup: () => this
27
- };
28
- },
29
- props,
30
- computed: {
31
- isRadioGroup() {
32
- return false;
33
- }
34
- }
35
- });
36
-
37
- export { BFormCheckboxGroup, props };