@gitlab/ui 122.13.0 → 123.0.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 (41) hide show
  1. package/dist/components/base/avatar/avatar.js +22 -12
  2. package/dist/components/base/avatar/utils.js +17 -0
  3. package/dist/components/base/avatar_labeled/avatar_labeled.js +83 -2
  4. package/dist/index.css +2 -2
  5. package/dist/index.css.map +1 -1
  6. package/dist/tailwind.css +1 -1
  7. package/dist/tailwind.css.map +1 -1
  8. package/dist/tokens/build/js/tokens.dark.js +8 -1
  9. package/dist/tokens/build/js/tokens.js +8 -1
  10. package/dist/tokens/css/tokens.css +7 -0
  11. package/dist/tokens/css/tokens.dark.css +7 -0
  12. package/dist/tokens/docs/tokens-tailwind-docs.dark.json +177 -0
  13. package/dist/tokens/docs/tokens-tailwind-docs.json +177 -0
  14. package/dist/tokens/figma/constants.tokens.json +51 -0
  15. package/dist/tokens/js/tokens.dark.js +7 -0
  16. package/dist/tokens/js/tokens.js +7 -0
  17. package/dist/tokens/json/tokens.dark.json +170 -0
  18. package/dist/tokens/json/tokens.json +170 -0
  19. package/dist/tokens/scss/_tokens.dark.scss +7 -0
  20. package/dist/tokens/scss/_tokens.scss +7 -0
  21. package/dist/tokens/scss/_tokens_custom_properties.scss +7 -0
  22. package/dist/tokens/tailwind/tokens.cjs +2 -0
  23. package/package.json +2 -5
  24. package/src/components/base/avatar/avatar.vue +22 -16
  25. package/src/components/base/avatar/utils.js +19 -0
  26. package/src/components/base/avatar_labeled/avatar_labeled.vue +83 -2
  27. package/src/tokens/build/css/tokens.css +7 -0
  28. package/src/tokens/build/css/tokens.dark.css +7 -0
  29. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +177 -0
  30. package/src/tokens/build/docs/tokens-tailwind-docs.json +177 -0
  31. package/src/tokens/build/figma/constants.tokens.json +51 -0
  32. package/src/tokens/build/js/tokens.dark.js +7 -0
  33. package/src/tokens/build/js/tokens.js +7 -0
  34. package/src/tokens/build/json/tokens.dark.json +170 -0
  35. package/src/tokens/build/json/tokens.json +170 -0
  36. package/src/tokens/build/scss/_tokens.dark.scss +7 -0
  37. package/src/tokens/build/scss/_tokens.scss +7 -0
  38. package/src/tokens/build/scss/_tokens_custom_properties.scss +7 -0
  39. package/src/tokens/build/tailwind/tokens.cjs +10 -0
  40. package/src/tokens/constant/zindex.tokens.json +53 -0
  41. package/tailwind.defaults.js +2 -9
package/src/tokens/build/json/tokens.json CHANGED
@@ -7472,6 +7472,176 @@
7472
7472
  ]
7473
7473
  }
7474
7474
  },
7475
+ "zindex": {
7476
+ "0": {
7477
+ "key": "{zindex.0}",
7478
+ "$value": "0",
7479
+ "$type": "number",
7480
+ "$extensions": {
7481
+ "com.figma.scope": []
7482
+ },
7483
+ "filePath": "src/tokens/constant/zindex.tokens.json",
7484
+ "isSource": true,
7485
+ "original": {
7486
+ "$value": "0",
7487
+ "$type": "number",
7488
+ "$extensions": {
7489
+ "com.figma.scope": []
7490
+ },
7491
+ "key": "{zindex.0}"
7492
+ },
7493
+ "name": "ZINDEX_0",
7494
+ "attributes": {},
7495
+ "path": [
7496
+ "zindex",
7497
+ "0"
7498
+ ]
7499
+ },
7500
+ "1": {
7501
+ "key": "{zindex.1}",
7502
+ "$value": "1",
7503
+ "$type": "number",
7504
+ "$extensions": {
7505
+ "com.figma.scope": []
7506
+ },
7507
+ "filePath": "src/tokens/constant/zindex.tokens.json",
7508
+ "isSource": true,
7509
+ "original": {
7510
+ "$value": "1",
7511
+ "$type": "number",
7512
+ "$extensions": {
7513
+ "com.figma.scope": []
7514
+ },
7515
+ "key": "{zindex.1}"
7516
+ },
7517
+ "name": "ZINDEX_1",
7518
+ "attributes": {},
7519
+ "path": [
7520
+ "zindex",
7521
+ "1"
7522
+ ]
7523
+ },
7524
+ "2": {
7525
+ "key": "{zindex.2}",
7526
+ "$value": "2",
7527
+ "$type": "number",
7528
+ "$extensions": {
7529
+ "com.figma.scope": []
7530
+ },
7531
+ "filePath": "src/tokens/constant/zindex.tokens.json",
7532
+ "isSource": true,
7533
+ "original": {
7534
+ "$value": "2",
7535
+ "$type": "number",
7536
+ "$extensions": {
7537
+ "com.figma.scope": []
7538
+ },
7539
+ "key": "{zindex.2}"
7540
+ },
7541
+ "name": "ZINDEX_2",
7542
+ "attributes": {},
7543
+ "path": [
7544
+ "zindex",
7545
+ "2"
7546
+ ]
7547
+ },
7548
+ "3": {
7549
+ "key": "{zindex.3}",
7550
+ "$value": "3",
7551
+ "$type": "number",
7552
+ "$extensions": {
7553
+ "com.figma.scope": []
7554
+ },
7555
+ "filePath": "src/tokens/constant/zindex.tokens.json",
7556
+ "isSource": true,
7557
+ "original": {
7558
+ "$value": "3",
7559
+ "$type": "number",
7560
+ "$extensions": {
7561
+ "com.figma.scope": []
7562
+ },
7563
+ "key": "{zindex.3}"
7564
+ },
7565
+ "name": "ZINDEX_3",
7566
+ "attributes": {},
7567
+ "path": [
7568
+ "zindex",
7569
+ "3"
7570
+ ]
7571
+ },
7572
+ "4": {
7573
+ "key": "{zindex.4}",
7574
+ "$value": "4",
7575
+ "$type": "number",
7576
+ "$extensions": {
7577
+ "com.figma.scope": []
7578
+ },
7579
+ "filePath": "src/tokens/constant/zindex.tokens.json",
7580
+ "isSource": true,
7581
+ "original": {
7582
+ "$value": "4",
7583
+ "$type": "number",
7584
+ "$extensions": {
7585
+ "com.figma.scope": []
7586
+ },
7587
+ "key": "{zindex.4}"
7588
+ },
7589
+ "name": "ZINDEX_4",
7590
+ "attributes": {},
7591
+ "path": [
7592
+ "zindex",
7593
+ "4"
7594
+ ]
7595
+ },
7596
+ "200": {
7597
+ "key": "{zindex.200}",
7598
+ "$value": "200",
7599
+ "$type": "number",
7600
+ "$extensions": {
7601
+ "com.figma.scope": []
7602
+ },
7603
+ "filePath": "src/tokens/constant/zindex.tokens.json",
7604
+ "isSource": true,
7605
+ "original": {
7606
+ "$value": "200",
7607
+ "$type": "number",
7608
+ "$extensions": {
7609
+ "com.figma.scope": []
7610
+ },
7611
+ "key": "{zindex.200}"
7612
+ },
7613
+ "name": "ZINDEX_200",
7614
+ "attributes": {},
7615
+ "path": [
7616
+ "zindex",
7617
+ "200"
7618
+ ]
7619
+ },
7620
+ "9999": {
7621
+ "key": "{zindex.9999}",
7622
+ "$value": "9999",
7623
+ "$type": "number",
7624
+ "$extensions": {
7625
+ "com.figma.scope": []
7626
+ },
7627
+ "filePath": "src/tokens/constant/zindex.tokens.json",
7628
+ "isSource": true,
7629
+ "original": {
7630
+ "$value": "9999",
7631
+ "$type": "number",
7632
+ "$extensions": {
7633
+ "com.figma.scope": []
7634
+ },
7635
+ "key": "{zindex.9999}"
7636
+ },
7637
+ "name": "ZINDEX_9999",
7638
+ "attributes": {},
7639
+ "path": [
7640
+ "zindex",
7641
+ "9999"
7642
+ ]
7643
+ }
7644
+ },
7475
7645
  "alert": {
7476
7646
  "border": {
7477
7647
  "radius": {
package/src/tokens/build/scss/_tokens.dark.scss CHANGED
@@ -281,6 +281,13 @@ $gl-spacing-scale-88: 44rem;
281
281
  $gl-spacing-scale-px: 1px;
282
282
  $gl-spacing-scale-2-5: 0.375rem;
283
283
  $gl-spacing-scale-11-5: 4.5rem;
284
+ $gl-zindex-0: 0;
285
+ $gl-zindex-1: 1;
286
+ $gl-zindex-2: 2;
287
+ $gl-zindex-3: 3;
288
+ $gl-zindex-4: 4;
289
+ $gl-zindex-200: 200;
290
+ $gl-zindex-9999: 9999;
284
291
  $gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
285
292
  $gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
286
293
  $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.
package/src/tokens/build/scss/_tokens.scss CHANGED
@@ -281,6 +281,13 @@ $gl-spacing-scale-88: 44rem;
281
281
  $gl-spacing-scale-px: 1px;
282
282
  $gl-spacing-scale-2-5: 0.375rem;
283
283
  $gl-spacing-scale-11-5: 4.5rem;
284
+ $gl-zindex-0: 0;
285
+ $gl-zindex-1: 1;
286
+ $gl-zindex-2: 2;
287
+ $gl-zindex-3: 3;
288
+ $gl-zindex-4: 4;
289
+ $gl-zindex-200: 200;
290
+ $gl-zindex-9999: 9999;
284
291
  $gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
285
292
  $gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
286
293
  $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.
package/src/tokens/build/scss/_tokens_custom_properties.scss CHANGED
@@ -296,6 +296,13 @@ $gl-spacing-scale-88: var(--gl-spacing-scale-88);
296
296
  $gl-spacing-scale-px: var(--gl-spacing-scale-px);
297
297
  $gl-spacing-scale-2-5: var(--gl-spacing-scale-2-5);
298
298
  $gl-spacing-scale-11-5: var(--gl-spacing-scale-11-5);
299
+ $gl-zindex-0: var(--gl-zindex-0);
300
+ $gl-zindex-1: var(--gl-zindex-1);
301
+ $gl-zindex-2: var(--gl-zindex-2);
302
+ $gl-zindex-3: var(--gl-zindex-3);
303
+ $gl-zindex-4: var(--gl-zindex-4);
304
+ $gl-zindex-200: var(--gl-zindex-200);
305
+ $gl-zindex-9999: var(--gl-zindex-9999);
299
306
  $gl-alert-border-radius: var(--gl-alert-border-radius);
300
307
  $gl-alert-neutral-title-color: var(--gl-alert-neutral-title-color);
301
308
  $gl-alert-neutral-background-color: var(--gl-alert-neutral-background-color);
package/src/tokens/build/tailwind/tokens.cjs CHANGED
@@ -412,6 +412,15 @@ const opacity = {
412
412
  9: 'var(--gl-opacity-9, .9)',
413
413
  10: 'var(--gl-opacity-10, 1)',
414
414
  };
415
+ const zindexes = {
416
+ 0: 'var(--gl-zindex-0, 0)',
417
+ 1: 'var(--gl-zindex-1, 1)',
418
+ 2: 'var(--gl-zindex-2, 2)',
419
+ 3: 'var(--gl-zindex-3, 3)',
420
+ 4: 'var(--gl-zindex-4, 4)',
421
+ 200: 'var(--gl-zindex-200, 200)',
422
+ 9999: 'var(--gl-zindex-9999, 9999)',
423
+ };
415
424
 
416
425
  const colors = {
417
426
  inherit: 'inherit',
@@ -496,4 +505,5 @@ module.exports = {
496
505
  spacing: spacingScale,
497
506
  borderRadius,
498
507
  opacity,
508
+ zIndex: zindexes,
499
509
  };
package/src/tokens/constant/zindex.tokens.json ADDED
@@ -0,0 +1,53 @@
1
+ {
2
+ "zindex": {
3
+ "0": {
4
+ "$value": "0",
5
+ "$type": "number",
6
+ "$extensions": {
7
+ "com.figma.scope": []
8
+ }
9
+ },
10
+ "1": {
11
+ "$value": "1",
12
+ "$type": "number",
13
+ "$extensions": {
14
+ "com.figma.scope": []
15
+ }
16
+ },
17
+ "2": {
18
+ "$value": "2",
19
+ "$type": "number",
20
+ "$extensions": {
21
+ "com.figma.scope": []
22
+ }
23
+ },
24
+ "3": {
25
+ "$value": "3",
26
+ "$type": "number",
27
+ "$extensions": {
28
+ "com.figma.scope": []
29
+ }
30
+ },
31
+ "4": {
32
+ "$value": "4",
33
+ "$type": "number",
34
+ "$extensions": {
35
+ "com.figma.scope": []
36
+ }
37
+ },
38
+ "200": {
39
+ "$value": "200",
40
+ "$type": "number",
41
+ "$extensions": {
42
+ "com.figma.scope": []
43
+ }
44
+ },
45
+ "9999": {
46
+ "$value": "9999",
47
+ "$type": "number",
48
+ "$extensions": {
49
+ "com.figma.scope": []
50
+ }
51
+ }
52
+ }
53
+ }
package/tailwind.defaults.js CHANGED
@@ -11,6 +11,7 @@ const {
11
11
  spacing,
12
12
  borderRadius,
13
13
  opacity,
14
+ zIndex,
14
15
  } = require('./src/tokens/build/tailwind/tokens.cjs');
15
16
 
16
17
  const buildCQs = Boolean(process.env.USE_TAILWIND_CONTAINER_QUERIES);
@@ -583,15 +584,7 @@ module.exports = {
583
584
  ease: 'ease',
584
585
  linear: 'linear',
585
586
  },
586
- zIndex: {
587
- 0: '0',
588
- 1: '1',
589
- 2: '2',
590
- 3: '3',
591
- 4: '4',
592
- 200: '200',
593
- 9999: '9999',
594
- },
587
+ zIndex,
595
588
  extend: {
596
589
  borderWidth: {
597
590
  1: '1px',