@gitlab/ui 123.6.1 → 123.8.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 (55) hide show
  1. package/dist/components/base/filtered_search/filtered_search.js +1 -1
  2. package/dist/components/base/filtered_search/filtered_search_suggestion.js +1 -1
  3. package/dist/components/base/filtered_search/filtered_search_suggestion_list.js +2 -1
  4. package/dist/components/base/filtered_search/filtered_search_term.js +10 -1
  5. package/dist/components/base/filtered_search/filtered_search_token.js +1 -1
  6. package/dist/components/base/filtered_search/filtered_search_token_segment.js +5 -1
  7. package/dist/index.css +2 -2
  8. package/dist/index.css.map +1 -1
  9. package/dist/tailwind.css +1 -1
  10. package/dist/tailwind.css.map +1 -1
  11. package/dist/tokens/build/js/tokens.dark.js +13 -1
  12. package/dist/tokens/build/js/tokens.js +13 -1
  13. package/dist/tokens/css/tokens.css +12 -0
  14. package/dist/tokens/css/tokens.dark.css +41 -29
  15. package/dist/tokens/docs/tokens-tailwind-docs.dark.json +1759 -4206
  16. package/dist/tokens/docs/tokens-tailwind-docs.json +1759 -4206
  17. package/dist/tokens/figma/constants.tokens.json +376 -72
  18. package/dist/tokens/figma/semantic.tokens.json +13 -0
  19. package/dist/tokens/js/tokens.dark.js +39 -0
  20. package/dist/tokens/js/tokens.js +39 -0
  21. package/dist/tokens/json/tokens.dark.json +986 -2102
  22. package/dist/tokens/json/tokens.json +986 -2102
  23. package/dist/tokens/scss/_tokens.dark.scss +41 -29
  24. package/dist/tokens/scss/_tokens.scss +12 -0
  25. package/dist/tokens/scss/_tokens_custom_properties.scss +12 -0
  26. package/dist/tokens/tailwind/tokens.cjs +8 -0
  27. package/package.json +2 -2
  28. package/src/components/base/filtered_search/filtered_search.vue +1 -1
  29. package/src/components/base/filtered_search/filtered_search_suggestion.vue +0 -2
  30. package/src/components/base/filtered_search/filtered_search_suggestion_list.vue +2 -0
  31. package/src/components/base/filtered_search/filtered_search_term.vue +12 -1
  32. package/src/components/base/filtered_search/filtered_search_token.vue +1 -1
  33. package/src/components/base/filtered_search/filtered_search_token_segment.vue +36 -15
  34. package/src/scss/variables.scss +0 -3
  35. package/src/tokens/build/css/tokens.css +12 -0
  36. package/src/tokens/build/css/tokens.dark.css +41 -29
  37. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +1759 -4206
  38. package/src/tokens/build/docs/tokens-tailwind-docs.json +1759 -4206
  39. package/src/tokens/build/figma/constants.tokens.json +376 -72
  40. package/src/tokens/build/figma/semantic.tokens.json +13 -0
  41. package/src/tokens/build/js/tokens.dark.js +39 -0
  42. package/src/tokens/build/js/tokens.js +39 -0
  43. package/src/tokens/build/json/tokens.dark.json +986 -2102
  44. package/src/tokens/build/json/tokens.json +986 -2102
  45. package/src/tokens/build/scss/_tokens.dark.scss +41 -29
  46. package/src/tokens/build/scss/_tokens.scss +12 -0
  47. package/src/tokens/build/scss/_tokens_custom_properties.scss +12 -0
  48. package/src/tokens/build/tailwind/tokens.cjs +34 -0
  49. package/src/tokens/constant/border.tokens.json +4 -10
  50. package/src/tokens/constant/font.tokens.json +136 -0
  51. package/src/tokens/constant/line_height.tokens.json +70 -20
  52. package/src/tokens/constant/shadow.tokens.json +44 -11
  53. package/src/tokens/constant/spacing_scale.tokens.json +124 -31
  54. package/src/tokens/semantic/font.tokens.json +15 -0
  55. package/tailwind.defaults.js +8 -21
@@ -1,73 +1,123 @@
1
1
  {
2
2
  "line-height": {
3
3
  "12": {
4
- "$value": "0.75rem",
4
+ "$value": {
5
+ "value": 0.75,
6
+ "unit": "rem"
7
+ },
5
8
  "$type": "dimension",
6
9
  "$extensions": {
7
- "com.figma.scope": []
10
+ "com.figma.scope": [
11
+ "LINE_HEIGHT"
12
+ ]
8
13
  }
9
14
  },
10
15
  "16": {
11
- "$value": "1rem",
16
+ "$value": {
17
+ "value": 1,
18
+ "unit": "rem"
19
+ },
12
20
  "$type": "dimension",
13
21
  "$extensions": {
14
- "com.figma.scope": []
22
+ "com.figma.scope": [
23
+ "LINE_HEIGHT"
24
+ ]
15
25
  }
16
26
  },
17
27
  "20": {
18
- "$value": "1.25rem",
28
+ "$value": {
29
+ "value": 1.25,
30
+ "unit": "rem"
31
+ },
19
32
  "$type": "dimension",
20
33
  "$extensions": {
21
- "com.figma.scope": []
34
+ "com.figma.scope": [
35
+ "LINE_HEIGHT"
36
+ ]
22
37
  }
23
38
  },
24
39
  "24": {
25
- "$value": "1.5rem",
40
+ "$value": {
41
+ "value": 1.5,
42
+ "unit": "rem"
43
+ },
26
44
  "$type": "dimension",
27
45
  "$extensions": {
28
- "com.figma.scope": []
46
+ "com.figma.scope": [
47
+ "LINE_HEIGHT"
48
+ ]
29
49
  }
30
50
  },
31
51
  "28": {
32
- "$value": "1.75rem",
52
+ "$value": {
53
+ "value": 1.75,
54
+ "unit": "rem"
55
+ },
33
56
  "$type": "dimension",
34
57
  "$extensions": {
35
- "com.figma.scope": []
58
+ "com.figma.scope": [
59
+ "LINE_HEIGHT"
60
+ ]
36
61
  }
37
62
  },
38
63
  "32": {
39
- "$value": "2rem",
64
+ "$value": {
65
+ "value": 2,
66
+ "unit": "rem"
67
+ },
40
68
  "$type": "dimension",
41
69
  "$extensions": {
42
- "com.figma.scope": []
70
+ "com.figma.scope": [
71
+ "LINE_HEIGHT"
72
+ ]
43
73
  }
44
74
  },
45
75
  "36": {
46
- "$value": "2.25rem",
76
+ "$value": {
77
+ "value": 2.25,
78
+ "unit": "rem"
79
+ },
47
80
  "$type": "dimension",
48
81
  "$extensions": {
49
- "com.figma.scope": []
82
+ "com.figma.scope": [
83
+ "LINE_HEIGHT"
84
+ ]
50
85
  }
51
86
  },
52
87
  "42": {
53
- "$value": "2.625rem",
88
+ "$value": {
89
+ "value": 2.625,
90
+ "unit": "rem"
91
+ },
54
92
  "$type": "dimension",
55
93
  "$extensions": {
56
- "com.figma.scope": []
94
+ "com.figma.scope": [
95
+ "LINE_HEIGHT"
96
+ ]
57
97
  }
58
98
  },
59
99
  "44": {
60
- "$value": "2.75rem",
100
+ "$value": {
101
+ "value": 2.75,
102
+ "unit": "rem"
103
+ },
61
104
  "$type": "dimension",
62
105
  "$extensions": {
63
- "com.figma.scope": []
106
+ "com.figma.scope": [
107
+ "LINE_HEIGHT"
108
+ ]
64
109
  }
65
110
  },
66
111
  "52": {
67
- "$value": "3.25rem",
112
+ "$value": {
113
+ "value": 3.25,
114
+ "unit": "rem"
115
+ },
68
116
  "$type": "dimension",
69
117
  "$extensions": {
70
- "com.figma.scope": []
118
+ "com.figma.scope": [
119
+ "LINE_HEIGHT"
120
+ ]
71
121
  }
72
122
  }
73
123
  }
@@ -6,14 +6,23 @@
6
6
  "color": "{shadow.color.default}",
7
7
  "offsetX": 0,
8
8
  "offsetY": 0,
9
- "blur": "2px",
9
+ "blur": {
10
+ "value": 2,
11
+ "unit": "px"
12
+ },
10
13
  "spread": 0
11
14
  },
12
15
  {
13
16
  "color": "{shadow.color.default}",
14
17
  "offsetX": 0,
15
- "offsetY": "1px",
16
- "blur": "4px",
18
+ "offsetY": {
19
+ "value": 1,
20
+ "unit": "px"
21
+ },
22
+ "blur": {
23
+ "value": 4,
24
+ "unit": "px"
25
+ },
17
26
  "spread": 0
18
27
  }
19
28
  ],
@@ -29,21 +38,33 @@
29
38
  "color": "{shadow.color.default}",
30
39
  "offsetX": 0,
31
40
  "offsetY": 0,
32
- "blur": "1px",
41
+ "blur": {
42
+ "value": 1,
43
+ "unit": "px"
44
+ },
33
45
  "spread": 0
34
46
  },
35
47
  {
36
48
  "color": "{shadow.color.default}",
37
49
  "offsetX": 0,
38
50
  "offsetY": 0,
39
- "blur": "2px",
51
+ "blur": {
52
+ "value": 2,
53
+ "unit": "px"
54
+ },
40
55
  "spread": 0
41
56
  },
42
57
  {
43
58
  "color": "{shadow.color.default}",
44
59
  "offsetX": 0,
45
- "offsetY": "2px",
46
- "blur": "8px",
60
+ "offsetY": {
61
+ "value": 2,
62
+ "unit": "px"
63
+ },
64
+ "blur": {
65
+ "value": 8,
66
+ "unit": "px"
67
+ },
47
68
  "spread": 0
48
69
  }
49
70
  ],
@@ -59,21 +80,33 @@
59
80
  "color": "{shadow.color.default}",
60
81
  "offsetX": 0,
61
82
  "offsetY": 0,
62
- "blur": "2px",
83
+ "blur": {
84
+ "value": 2,
85
+ "unit": "px"
86
+ },
63
87
  "spread": 0
64
88
  },
65
89
  {
66
90
  "color": "{shadow.color.default}",
67
91
  "offsetX": 0,
68
92
  "offsetY": 0,
69
- "blur": "2px",
93
+ "blur": {
94
+ "value": 2,
95
+ "unit": "px"
96
+ },
70
97
  "spread": 0
71
98
  },
72
99
  {
73
100
  "color": "{shadow.color.default}",
74
101
  "offsetX": 0,
75
- "offsetY": "4px",
76
- "blur": "12px",
102
+ "offsetY": {
103
+ "value": 4,
104
+ "unit": "px"
105
+ },
106
+ "blur": {
107
+ "value": 12,
108
+ "unit": "px"
109
+ },
77
110
  "spread": 0
78
111
  }
79
112
  ],
@@ -8,217 +8,310 @@
8
8
  }
9
9
  },
10
10
  "px": {
11
- "$value": "1px",
11
+ "$value": {
12
+ "value": 1,
13
+ "unit": "px"
14
+ },
12
15
  "$type": "dimension",
13
16
  "$extensions": {
14
17
  "com.figma.scope": []
15
18
  }
16
19
  },
17
20
  "1": {
18
- "$value": "0.125rem",
21
+ "$value": {
22
+ "value": 0.125,
23
+ "unit": "rem"
24
+ },
19
25
  "$type": "dimension",
20
26
  "$extensions": {
21
27
  "com.figma.scope": []
22
28
  }
23
29
  },
24
30
  "2": {
25
- "$value": "0.25rem",
31
+ "$value": {
32
+ "value": 0.25,
33
+ "unit": "rem"
34
+ },
26
35
  "$type": "dimension",
27
36
  "$extensions": {
28
37
  "com.figma.scope": []
29
38
  }
30
39
  },
31
40
  "2-5": {
32
- "$value": "0.375rem",
41
+ "$value": {
42
+ "value": 0.375,
43
+ "unit": "rem"
44
+ },
33
45
  "$type": "dimension",
34
46
  "$extensions": {
35
47
  "com.figma.scope": []
36
48
  }
37
49
  },
38
50
  "3": {
39
- "$value": "0.5rem",
51
+ "$value": {
52
+ "value": 0.5,
53
+ "unit": "rem"
54
+ },
40
55
  "$type": "dimension",
41
56
  "$extensions": {
42
57
  "com.figma.scope": []
43
58
  }
44
59
  },
45
60
  "4": {
46
- "$value": "0.75rem",
61
+ "$value": {
62
+ "value": 0.75,
63
+ "unit": "rem"
64
+ },
47
65
  "$type": "dimension",
48
66
  "$extensions": {
49
67
  "com.figma.scope": []
50
68
  }
51
69
  },
52
70
  "5": {
53
- "$value": "1rem",
71
+ "$value": {
72
+ "value": 1,
73
+ "unit": "rem"
74
+ },
54
75
  "$type": "dimension",
55
76
  "$extensions": {
56
77
  "com.figma.scope": []
57
78
  }
58
79
  },
59
80
  "6": {
60
- "$value": "1.5rem",
81
+ "$value": {
82
+ "value": 1.5,
83
+ "unit": "rem"
84
+ },
61
85
  "$type": "dimension",
62
86
  "$extensions": {
63
87
  "com.figma.scope": []
64
88
  }
65
89
  },
66
90
  "7": {
67
- "$value": "2rem",
91
+ "$value": {
92
+ "value": 2,
93
+ "unit": "rem"
94
+ },
68
95
  "$type": "dimension",
69
96
  "$extensions": {
70
97
  "com.figma.scope": []
71
98
  }
72
99
  },
73
100
  "8": {
74
- "$value": "2.5rem",
101
+ "$value": {
102
+ "value": 2.5,
103
+ "unit": "rem"
104
+ },
75
105
  "$type": "dimension",
76
106
  "$extensions": {
77
107
  "com.figma.scope": []
78
108
  }
79
109
  },
80
110
  "9": {
81
- "$value": "3rem",
111
+ "$value": {
112
+ "value": 3,
113
+ "unit": "rem"
114
+ },
82
115
  "$type": "dimension",
83
116
  "$extensions": {
84
117
  "com.figma.scope": []
85
118
  }
86
119
  },
87
120
  "10": {
88
- "$value": "3.5rem",
121
+ "$value": {
122
+ "value": 3.5,
123
+ "unit": "rem"
124
+ },
89
125
  "$type": "dimension",
90
126
  "$extensions": {
91
127
  "com.figma.scope": []
92
128
  }
93
129
  },
94
130
  "11": {
95
- "$value": "4rem",
131
+ "$value": {
132
+ "value": 4,
133
+ "unit": "rem"
134
+ },
96
135
  "$type": "dimension",
97
136
  "$extensions": {
98
137
  "com.figma.scope": []
99
138
  }
100
139
  },
101
140
  "11-5": {
102
- "$value": "4.5rem",
141
+ "$value": {
142
+ "value": 4.5,
143
+ "unit": "rem"
144
+ },
103
145
  "$type": "dimension",
104
146
  "$extensions": {
105
147
  "com.figma.scope": []
106
148
  }
107
149
  },
108
150
  "12": {
109
- "$value": "5rem",
151
+ "$value": {
152
+ "value": 5,
153
+ "unit": "rem"
154
+ },
110
155
  "$type": "dimension",
111
156
  "$extensions": {
112
157
  "com.figma.scope": []
113
158
  }
114
159
  },
115
160
  "13": {
116
- "$value": "6rem",
161
+ "$value": {
162
+ "value": 6,
163
+ "unit": "rem"
164
+ },
117
165
  "$type": "dimension",
118
166
  "$extensions": {
119
167
  "com.figma.scope": []
120
168
  }
121
169
  },
122
170
  "15": {
123
- "$value": "7.5rem",
171
+ "$value": {
172
+ "value": 7.5,
173
+ "unit": "rem"
174
+ },
124
175
  "$type": "dimension",
125
176
  "$extensions": {
126
177
  "com.figma.scope": []
127
178
  }
128
179
  },
129
180
  "18": {
130
- "$value": "9rem",
181
+ "$value": {
182
+ "value": 9,
183
+ "unit": "rem"
184
+ },
131
185
  "$type": "dimension",
132
186
  "$extensions": {
133
187
  "com.figma.scope": []
134
188
  }
135
189
  },
136
190
  "20": {
137
- "$value": "10rem",
191
+ "$value": {
192
+ "value": 10,
193
+ "unit": "rem"
194
+ },
138
195
  "$type": "dimension",
139
196
  "$extensions": {
140
197
  "com.figma.scope": []
141
198
  }
142
199
  },
143
200
  "26": {
144
- "$value": "13rem",
201
+ "$value": {
202
+ "value": 13,
203
+ "unit": "rem"
204
+ },
145
205
  "$type": "dimension",
146
206
  "$extensions": {
147
207
  "com.figma.scope": []
148
208
  }
149
209
  },
150
210
  "28": {
151
- "$value": "14rem",
211
+ "$value": {
212
+ "value": 14,
213
+ "unit": "rem"
214
+ },
152
215
  "$type": "dimension",
153
216
  "$extensions": {
154
217
  "com.figma.scope": []
155
218
  }
156
219
  },
157
220
  "30": {
158
- "$value": "15rem",
221
+ "$value": {
222
+ "value": 15,
223
+ "unit": "rem"
224
+ },
159
225
  "$type": "dimension",
160
226
  "$extensions": {
161
227
  "com.figma.scope": []
162
228
  }
163
229
  },
164
230
  "31": {
165
- "$value": "15.5rem",
231
+ "$value": {
232
+ "value": 15.5,
233
+ "unit": "rem"
234
+ },
166
235
  "$type": "dimension",
167
236
  "$extensions": {
168
237
  "com.figma.scope": []
169
238
  }
170
239
  },
171
240
  "33": {
172
- "$value": "16.5rem",
241
+ "$value": {
242
+ "value": 16.5,
243
+ "unit": "rem"
244
+ },
173
245
  "$type": "dimension",
174
246
  "$extensions": {
175
247
  "com.figma.scope": []
176
248
  }
177
249
  },
178
250
  "34": {
179
- "$value": "17rem",
251
+ "$value": {
252
+ "value": 17,
253
+ "unit": "rem"
254
+ },
180
255
  "$type": "dimension",
181
256
  "$extensions": {
182
257
  "com.figma.scope": []
183
258
  }
184
259
  },
185
260
  "37": {
186
- "$value": "18.5rem",
261
+ "$value": {
262
+ "value": 18.5,
263
+ "unit": "rem"
264
+ },
187
265
  "$type": "dimension",
188
266
  "$extensions": {
189
267
  "com.figma.scope": []
190
268
  }
191
269
  },
192
270
  "48": {
193
- "$value": "24rem",
271
+ "$value": {
272
+ "value": 24,
273
+ "unit": "rem"
274
+ },
194
275
  "$type": "dimension",
195
276
  "$extensions": {
196
277
  "com.figma.scope": []
197
278
  }
198
279
  },
199
280
  "62": {
200
- "$value": "31rem",
281
+ "$value": {
282
+ "value": 31,
283
+ "unit": "rem"
284
+ },
201
285
  "$type": "dimension",
202
286
  "$extensions": {
203
287
  "com.figma.scope": []
204
288
  }
205
289
  },
206
290
  "75": {
207
- "$value": "37.5rem",
291
+ "$value": {
292
+ "value": 37.5,
293
+ "unit": "rem"
294
+ },
208
295
  "$type": "dimension",
209
296
  "$extensions": {
210
297
  "com.figma.scope": []
211
298
  }
212
299
  },
213
300
  "80": {
214
- "$value": "40rem",
301
+ "$value": {
302
+ "value": 40,
303
+ "unit": "rem"
304
+ },
215
305
  "$type": "dimension",
216
306
  "$extensions": {
217
307
  "com.figma.scope": []
218
308
  }
219
309
  },
220
310
  "88": {
221
- "$value": "44rem",
311
+ "$value": {
312
+ "value": 44,
313
+ "unit": "rem"
314
+ },
222
315
  "$type": "dimension",
223
316
  "$extensions": {
224
317
  "com.figma.scope": []
@@ -0,0 +1,15 @@
1
+ {
2
+ "font": {
3
+ "size": {
4
+ "base": {
5
+ "$value": "{font.size.md}",
6
+ "$type": "dimension",
7
+ "$extensions": {
8
+ "com.figma.scope": [
9
+ "FONT_SIZE"
10
+ ]
11
+ }
12
+ }
13
+ }
14
+ }
15
+ }
@@ -13,6 +13,10 @@ const {
13
13
  opacity,
14
14
  zIndex,
15
15
  boxShadow,
16
+ lineHeight,
17
+ fontFamily,
18
+ fontSize,
19
+ fontWeight,
16
20
  } = require('./src/tokens/build/tailwind/tokens.cjs');
17
21
 
18
22
  const buildCQs = Boolean(process.env.USE_TAILWIND_CONTAINER_QUERIES);
@@ -526,15 +530,9 @@ module.exports = {
526
530
  ],
527
531
  },
528
532
  fill,
529
- fontFamily: {
530
- regular:
531
- 'var(--default-regular-font, "GitLab Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
532
- },
533
+ fontFamily,
533
534
  fontSize: {
534
- xs: '0.625rem',
535
- sm: '0.75rem',
536
- base: '0.875rem',
537
- lg: '1rem',
535
+ ...fontSize,
538
536
  'size-h-display': '1.75rem',
539
537
  'size-h1': '1.4375rem',
540
538
  'size-h2': '1.1875rem',
@@ -542,24 +540,13 @@ module.exports = {
542
540
  'size-h2-xl': '1.4375rem',
543
541
  'size-reset': 'inherit',
544
542
  },
545
- fontWeight: {
546
- 100: 100,
547
- 300: 300,
548
- normal: 400,
549
- semibold: 500,
550
- bold: 600,
551
- },
543
+ fontWeight,
552
544
  lineHeight: {
553
545
  reset: 'inherit',
554
546
  0: '0',
555
547
  1: '1',
556
548
  normal: '1rem',
557
- 20: '1.25rem',
558
- 24: '1.5rem',
559
- 28: '1.75rem',
560
- 32: '2rem',
561
- 36: '2.25rem',
562
- 42: '2.625rem',
549
+ ...lineHeight,
563
550
  },
564
551
  opacity,
565
552
  outlineColor,