@gitlab/ui 66.10.0 → 66.11.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 +16 -0
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/dist/tokens/css/tokens.css +11 -1
  5. package/dist/tokens/css/tokens.dark.css +1 -1
  6. package/dist/tokens/js/tokens.dark.js +1 -1
  7. package/dist/tokens/js/tokens.js +11 -1
  8. package/dist/tokens/json/tokens.dark.grouped.json +12 -0
  9. package/dist/tokens/json/tokens.dark.json +752 -270
  10. package/dist/tokens/json/tokens.grouped.json +12 -0
  11. package/dist/tokens/json/tokens.json +752 -270
  12. package/dist/tokens/scss/_tokens.dark.scss +1 -1
  13. package/dist/tokens/scss/_tokens.scss +11 -1
  14. package/dist/utils/charts/theme.js +2 -2
  15. package/package.json +3 -3
  16. package/src/components/base/avatar/avatar.scss +7 -12
  17. package/src/scss/storybook_dark_mode.scss +8 -2
  18. package/src/tokens/color.dark.tokens.json +138 -69
  19. package/src/tokens/color.tokens.json +270 -135
  20. package/src/tokens/line_height.tokens.json +74 -0
  21. package/src/utils/charts/theme.js +2 -2
package/dist/tokens/scss/_tokens.dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 19 Sep 2023 13:42:54 GMT
3
+ // Generated on Wed, 20 Sep 2023 19:33:35 GMT
4
4
 
5
5
  $red-950: #fff4f3;
6
6
  $red-900: #fcf1ef;
package/dist/tokens/scss/_tokens.scss CHANGED
@@ -1,7 +1,17 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 19 Sep 2023 13:42:54 GMT
3
+ // Generated on Wed, 20 Sep 2023 19:33:35 GMT
4
4
 
5
+ $gl-line-height-52: 3.25rem;
6
+ $gl-line-height-44: 2.75rem;
7
+ $gl-line-height-42: 2.625rem;
8
+ $gl-line-height-36: 2.25rem;
9
+ $gl-line-height-32: 2rem;
10
+ $gl-line-height-28: 1.75rem;
11
+ $gl-line-height-24: 1.5rem;
12
+ $gl-line-height-20: 1.25rem;
13
+ $gl-line-height-16: 1rem;
14
+ $gl-line-height-12: 0.75rem;
5
15
  $brand-gray-05: #2b2838 !default;
6
16
  $brand-gray-04: #45424d !default;
7
17
  $brand-gray-03: #74717a !default;
package/dist/utils/charts/theme.js CHANGED
@@ -24,7 +24,7 @@ const axes = {
24
24
  axisLabel: {
25
25
  margin: 8,
26
26
  show: true,
27
- color: GRAY_600,
27
+ color: `var(--gray-600, ${GRAY_600})`,
28
28
  hideOverlap: true
29
29
  },
30
30
  axisLine: {
@@ -69,7 +69,7 @@ const createTheme = function () {
69
69
  color: colorPaletteDefault,
70
70
  backgroundColor: 'transparent',
71
71
  textStyle: {
72
- color: GRAY_900
72
+ color: `var(--gl-text-color, ${GRAY_900})`
73
73
  },
74
74
  markLine: {
75
75
  silent: true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "66.10.0",
3
+ "version": "66.11.0",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -88,8 +88,8 @@
88
88
  },
89
89
  "devDependencies": {
90
90
  "@arkweid/lefthook": "0.7.7",
91
- "@babel/core": "^7.22.19",
92
- "@babel/preset-env": "^7.22.15",
91
+ "@babel/core": "^7.22.20",
92
+ "@babel/preset-env": "^7.22.20",
93
93
  "@babel/preset-react": "^7.22.15",
94
94
  "@gitlab/eslint-plugin": "19.0.0",
95
95
  "@gitlab/fonts": "^1.2.0",
package/src/components/base/avatar/avatar.scss CHANGED
@@ -8,53 +8,48 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
8
8
  @include gl-border-gray-a-08;
9
9
  @include gl-overflow-hidden;
10
10
  @include gl-flex-shrink-0;
11
+ @include gl-line-height-ratio-1000;
11
12
  }
12
13
 
13
14
  @mixin gl-avatar-s16 {
14
15
  @include gl-w-5;
15
16
  @include gl-h-5;
16
- @include gl-font-sm;
17
- @include gl-line-height-normal;
17
+ font-size: map-get($gl-font-sizes, 100);
18
18
  @include gl-rounded-small;
19
19
  }
20
20
 
21
21
  @mixin gl-avatar-s24 {
22
22
  @include gl-w-6;
23
23
  @include gl-h-6;
24
- @include gl-font-sm;
25
- @include gl-line-height-normal;
24
+ font-size: map-get($gl-font-sizes, 400);
26
25
  @include gl-rounded-base;
27
26
  }
28
27
 
29
28
  @mixin gl-avatar-s32 {
30
29
  @include gl-w-7;
31
30
  @include gl-h-7;
32
- @include gl-font-base;
33
- @include gl-line-height-normal;
31
+ font-size: map-get($gl-font-sizes, 500);
34
32
  @include gl-rounded-base;
35
33
  }
36
34
 
37
35
  @mixin gl-avatar-s48 {
38
36
  @include gl-w-9;
39
37
  @include gl-h-9;
40
- @include gl-font-size-h2;
41
- @include gl-line-height-24;
38
+ font-size: map-get($gl-font-sizes, 600);
42
39
  @include gl-rounded-lg;
43
40
  }
44
41
 
45
42
  @mixin gl-avatar-s64 {
46
43
  @include gl-w-11;
47
44
  @include gl-h-11;
48
- @include gl-font-size-h-display;
49
- @include gl-line-height-32;
45
+ font-size: map-get($gl-font-sizes, 700);
50
46
  @include gl-rounded-lg;
51
47
  }
52
48
 
53
49
  @mixin gl-avatar-s96 {
54
50
  @include gl-w-13;
55
51
  @include gl-h-13;
56
- @include gl-font-size-h-display-xl;
57
- @include gl-line-height-52;
52
+ font-size: map-get($gl-font-sizes, 800);
58
53
  @include gl-rounded-lg;
59
54
  }
60
55
 
package/src/scss/storybook_dark_mode.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import 'variables';
2
+
1
3
  // conditional overrides for dark mode for use in storybook.
2
4
  // Because we only use application.css from gitlab (and not
3
5
  // application_dark), we need to override some base rules so
@@ -9,7 +11,11 @@
9
11
 
10
12
  .gl-dark {
11
13
  --color-body-bg: #1f1f1f;
12
- --color-body-text: #fff;
14
+
15
+ // Note that we are assigning variables with different values due to the way GitLab inverts variables in dark mode.
16
+ // e.g. text color is usually $gray-900, but in dark mode $gray-900 variable gets inverted to $gray-50
17
+ --gl-text-color: #{$gray-50};
18
+ --gray-600: #{$gray-300};
13
19
 
14
20
  color-scheme: dark;
15
21
 
@@ -18,6 +24,6 @@
18
24
  // We can delete these once $body-bg and $body-color
19
25
  // variables in variables.scss are updated to use CSS custom properties
20
26
  background-color: var(--color-body-bg);
21
- color: var(--color-body-text);
27
+ color: var(--gl-text-color);
22
28
  }
23
29
  }
package/src/tokens/color.dark.tokens.json CHANGED
@@ -2,358 +2,427 @@
2
2
  "black": {
3
3
  "$value": "#fff",
4
4
  "$type": "color",
5
- "themeable": false
5
+ "themeable": false,
6
+ "prefix": false
6
7
  },
7
8
  "white": {
8
9
  "$value": "{gray.50}",
9
10
  "$type": "color",
10
- "themeable": false
11
+ "themeable": false,
12
+ "prefix": false
11
13
  },
12
14
  "blue": {
13
15
  "50": {
14
16
  "$value": "#033464",
15
17
  "$type": "color",
16
- "themeable": false
18
+ "themeable": false,
19
+ "prefix": false
17
20
  },
18
21
  "100": {
19
22
  "$value": "#064787",
20
23
  "$type": "color",
21
- "themeable": false
24
+ "themeable": false,
25
+ "prefix": false
22
26
  },
23
27
  "200": {
24
28
  "$value": "#0b5cad",
25
29
  "$type": "color",
26
- "themeable": false
30
+ "themeable": false,
31
+ "prefix": false
27
32
  },
28
33
  "300": {
29
34
  "$value": "#1068bf",
30
35
  "$type": "color",
31
- "themeable": false
36
+ "themeable": false,
37
+ "prefix": false
32
38
  },
33
39
  "400": {
34
40
  "$value": "#1f75cb",
35
41
  "$type": "color",
36
- "themeable": false
42
+ "themeable": false,
43
+ "prefix": false
37
44
  },
38
45
  "500": {
39
46
  "$value": "#428fdc",
40
47
  "$type": "color",
41
- "themeable": false
48
+ "themeable": false,
49
+ "prefix": false
42
50
  },
43
51
  "600": {
44
52
  "$value": "#63a6e9",
45
53
  "$type": "color",
46
- "themeable": false
54
+ "themeable": false,
55
+ "prefix": false
47
56
  },
48
57
  "700": {
49
58
  "$value": "#9dc7f1",
50
59
  "$type": "color",
51
- "themeable": false
60
+ "themeable": false,
61
+ "prefix": false
52
62
  },
53
63
  "800": {
54
64
  "$value": "#cbe2f9",
55
65
  "$type": "color",
56
- "themeable": false
66
+ "themeable": false,
67
+ "prefix": false
57
68
  },
58
69
  "900": {
59
70
  "$value": "#e9f3fc",
60
71
  "$type": "color",
61
- "themeable": false
72
+ "themeable": false,
73
+ "prefix": false
62
74
  },
63
75
  "950": {
64
76
  "$value": "#f2f9ff",
65
77
  "$type": "color",
66
- "themeable": false
78
+ "themeable": false,
79
+ "prefix": false
67
80
  }
68
81
  },
69
82
  "gray": {
70
83
  "10": {
71
84
  "$value": "#1f1e24",
72
85
  "$type": "color",
73
- "themeable": false
86
+ "themeable": false,
87
+ "prefix": false
74
88
  },
75
89
  "50": {
76
90
  "$value": "#333238",
77
91
  "$type": "color",
78
- "themeable": false
92
+ "themeable": false,
93
+ "prefix": false
79
94
  },
80
95
  "100": {
81
96
  "$value": "#434248",
82
97
  "$type": "color",
83
- "themeable": false
98
+ "themeable": false,
99
+ "prefix": false
84
100
  },
85
101
  "200": {
86
102
  "$value": "#535158",
87
103
  "$type": "color",
88
- "themeable": false
104
+ "themeable": false,
105
+ "prefix": false
89
106
  },
90
107
  "300": {
91
108
  "$value": "#626168",
92
109
  "$type": "color",
93
- "themeable": false
110
+ "themeable": false,
111
+ "prefix": false
94
112
  },
95
113
  "400": {
96
114
  "$value": "#737278",
97
115
  "$type": "color",
98
- "themeable": false
116
+ "themeable": false,
117
+ "prefix": false
99
118
  },
100
119
  "500": {
101
120
  "$value": "#89888d",
102
121
  "$type": "color",
103
- "themeable": false
122
+ "themeable": false,
123
+ "prefix": false
104
124
  },
105
125
  "600": {
106
126
  "$value": "#a4a3a8",
107
127
  "$type": "color",
108
- "themeable": false
128
+ "themeable": false,
129
+ "prefix": false
109
130
  },
110
131
  "700": {
111
132
  "$value": "#bfbfc3",
112
133
  "$type": "color",
113
- "themeable": false
134
+ "themeable": false,
135
+ "prefix": false
114
136
  },
115
137
  "800": {
116
138
  "$value": "#dcdcde",
117
139
  "$type": "color",
118
- "themeable": false
140
+ "themeable": false,
141
+ "prefix": false
119
142
  },
120
143
  "900": {
121
144
  "$value": "#ececef",
122
145
  "$type": "color",
123
- "themeable": false
146
+ "themeable": false,
147
+ "prefix": false
124
148
  },
125
149
  "950": {
126
150
  "$value": "#fbfafd",
127
151
  "$type": "color",
128
- "themeable": false
152
+ "themeable": false,
153
+ "prefix": false
129
154
  }
130
155
  },
131
156
  "green": {
132
157
  "50": {
133
158
  "$value": "#0a4020",
134
159
  "$type": "color",
135
- "themeable": false
160
+ "themeable": false,
161
+ "prefix": false
136
162
  },
137
163
  "100": {
138
164
  "$value": "#0d532a",
139
165
  "$type": "color",
140
- "themeable": false
166
+ "themeable": false,
167
+ "prefix": false
141
168
  },
142
169
  "200": {
143
170
  "$value": "#24663b",
144
171
  "$type": "color",
145
- "themeable": false
172
+ "themeable": false,
173
+ "prefix": false
146
174
  },
147
175
  "300": {
148
176
  "$value": "#217645",
149
177
  "$type": "color",
150
- "themeable": false
178
+ "themeable": false,
179
+ "prefix": false
151
180
  },
152
181
  "400": {
153
182
  "$value": "#108548",
154
183
  "$type": "color",
155
- "themeable": false
184
+ "themeable": false,
185
+ "prefix": false
156
186
  },
157
187
  "500": {
158
188
  "$value": "#2da160",
159
189
  "$type": "color",
160
- "themeable": false
190
+ "themeable": false,
191
+ "prefix": false
161
192
  },
162
193
  "600": {
163
194
  "$value": "#52b87a",
164
195
  "$type": "color",
165
- "themeable": false
196
+ "themeable": false,
197
+ "prefix": false
166
198
  },
167
199
  "700": {
168
200
  "$value": "#91d4a8",
169
201
  "$type": "color",
170
- "themeable": false
202
+ "themeable": false,
203
+ "prefix": false
171
204
  },
172
205
  "800": {
173
206
  "$value": "#c3e6cd",
174
207
  "$type": "color",
175
- "themeable": false
208
+ "themeable": false,
209
+ "prefix": false
176
210
  },
177
211
  "900": {
178
212
  "$value": "#ecf4ee",
179
213
  "$type": "color",
180
- "themeable": false
214
+ "themeable": false,
215
+ "prefix": false
181
216
  },
182
217
  "950": {
183
218
  "$value": "#f1fdf6",
184
219
  "$type": "color",
185
- "themeable": false
220
+ "themeable": false,
221
+ "prefix": false
186
222
  }
187
223
  },
188
224
  "orange": {
189
225
  "50": {
190
226
  "$value": "#5c2900",
191
227
  "$type": "color",
192
- "themeable": false
228
+ "themeable": false,
229
+ "prefix": false
193
230
  },
194
231
  "100": {
195
232
  "$value": "#703800",
196
233
  "$type": "color",
197
- "themeable": false
234
+ "themeable": false,
235
+ "prefix": false
198
236
  },
199
237
  "200": {
200
238
  "$value": "#8f4700",
201
239
  "$type": "color",
202
- "themeable": false
240
+ "themeable": false,
241
+ "prefix": false
203
242
  },
204
243
  "300": {
205
244
  "$value": "#9e5400",
206
245
  "$type": "color",
207
- "themeable": false
246
+ "themeable": false,
247
+ "prefix": false
208
248
  },
209
249
  "400": {
210
250
  "$value": "#ab6100",
211
251
  "$type": "color",
212
- "themeable": false
252
+ "themeable": false,
253
+ "prefix": false
213
254
  },
214
255
  "500": {
215
256
  "$value": "#c17d10",
216
257
  "$type": "color",
217
- "themeable": false
258
+ "themeable": false,
259
+ "prefix": false
218
260
  },
219
261
  "600": {
220
262
  "$value": "#d99530",
221
263
  "$type": "color",
222
- "themeable": false
264
+ "themeable": false,
265
+ "prefix": false
223
266
  },
224
267
  "700": {
225
268
  "$value": "#e9be74",
226
269
  "$type": "color",
227
- "themeable": false
270
+ "themeable": false,
271
+ "prefix": false
228
272
  },
229
273
  "800": {
230
274
  "$value": "#f5d9a8",
231
275
  "$type": "color",
232
- "themeable": false
276
+ "themeable": false,
277
+ "prefix": false
233
278
  },
234
279
  "900": {
235
280
  "$value": "#fdf1dd",
236
281
  "$type": "color",
237
- "themeable": false
282
+ "themeable": false,
283
+ "prefix": false
238
284
  },
239
285
  "950": {
240
286
  "$value": "#fff4e1",
241
287
  "$type": "color",
242
- "themeable": false
288
+ "themeable": false,
289
+ "prefix": false
243
290
  }
244
291
  },
245
292
  "purple": {
246
293
  "50": {
247
294
  "$value": "#232150",
248
295
  "$type": "color",
249
- "themeable": false
296
+ "themeable": false,
297
+ "prefix": false
250
298
  },
251
299
  "100": {
252
300
  "$value": "#2f2a6b",
253
301
  "$type": "color",
254
- "themeable": false
302
+ "themeable": false,
303
+ "prefix": false
255
304
  },
256
305
  "200": {
257
306
  "$value": "#453894",
258
307
  "$type": "color",
259
- "themeable": false
308
+ "themeable": false,
309
+ "prefix": false
260
310
  },
261
311
  "300": {
262
312
  "$value": "#5943b6",
263
313
  "$type": "color",
264
- "themeable": false
314
+ "themeable": false,
315
+ "prefix": false
265
316
  },
266
317
  "400": {
267
318
  "$value": "#694cc0",
268
319
  "$type": "color",
269
- "themeable": false
320
+ "themeable": false,
321
+ "prefix": false
270
322
  },
271
323
  "500": {
272
324
  "$value": "#7b58cf",
273
325
  "$type": "color",
274
- "themeable": false
326
+ "themeable": false,
327
+ "prefix": false
275
328
  },
276
329
  "600": {
277
330
  "$value": "#9475db",
278
331
  "$type": "color",
279
- "themeable": false
332
+ "themeable": false,
333
+ "prefix": false
280
334
  },
281
335
  "700": {
282
336
  "$value": "#ac93e6",
283
337
  "$type": "color",
284
- "themeable": false
338
+ "themeable": false,
339
+ "prefix": false
285
340
  },
286
341
  "800": {
287
342
  "$value": "#cbbbf2",
288
343
  "$type": "color",
289
- "themeable": false
344
+ "themeable": false,
345
+ "prefix": false
290
346
  },
291
347
  "900": {
292
348
  "$value": "#e1d8f9",
293
349
  "$type": "color",
294
- "themeable": false
350
+ "themeable": false,
351
+ "prefix": false
295
352
  },
296
353
  "950": {
297
354
  "$value": "#f4f0ff",
298
355
  "$type": "color",
299
- "themeable": false
356
+ "themeable": false,
357
+ "prefix": false
300
358
  }
301
359
  },
302
360
  "red": {
303
361
  "50": {
304
362
  "$value": "#660e00",
305
363
  "$type": "color",
306
- "themeable": false
364
+ "themeable": false,
365
+ "prefix": false
307
366
  },
308
367
  "100": {
309
368
  "$value": "#8d1300",
310
369
  "$type": "color",
311
- "themeable": false
370
+ "themeable": false,
371
+ "prefix": false
312
372
  },
313
373
  "200": {
314
374
  "$value": "#ae1800",
315
375
  "$type": "color",
316
- "themeable": false
376
+ "themeable": false,
377
+ "prefix": false
317
378
  },
318
379
  "300": {
319
380
  "$value": "#c91c00",
320
381
  "$type": "color",
321
- "themeable": false
382
+ "themeable": false,
383
+ "prefix": false
322
384
  },
323
385
  "400": {
324
386
  "$value": "#dd2b0e",
325
387
  "$type": "color",
326
- "themeable": false
388
+ "themeable": false,
389
+ "prefix": false
327
390
  },
328
391
  "500": {
329
392
  "$value": "#ec5941",
330
393
  "$type": "color",
331
- "themeable": false
394
+ "themeable": false,
395
+ "prefix": false
332
396
  },
333
397
  "600": {
334
398
  "$value": "#f57f6c",
335
399
  "$type": "color",
336
- "themeable": false
400
+ "themeable": false,
401
+ "prefix": false
337
402
  },
338
403
  "700": {
339
404
  "$value": "#fcb5aa",
340
405
  "$type": "color",
341
- "themeable": false
406
+ "themeable": false,
407
+ "prefix": false
342
408
  },
343
409
  "800": {
344
410
  "$value": "#fdd4cd",
345
411
  "$type": "color",
346
- "themeable": false
412
+ "themeable": false,
413
+ "prefix": false
347
414
  },
348
415
  "900": {
349
416
  "$value": "#fcf1ef",
350
417
  "$type": "color",
351
- "themeable": false
418
+ "themeable": false,
419
+ "prefix": false
352
420
  },
353
421
  "950": {
354
422
  "$value": "#fff4f3",
355
423
  "$type": "color",
356
- "themeable": false
424
+ "themeable": false,
425
+ "prefix": false
357
426
  }
358
427
  }
359
428
  }