@gitlab/ui 122.13.0 → 122.14.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 (35) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.css.map +1 -1
  3. package/dist/tailwind.css +1 -1
  4. package/dist/tailwind.css.map +1 -1
  5. package/dist/tokens/build/js/tokens.dark.js +8 -1
  6. package/dist/tokens/build/js/tokens.js +8 -1
  7. package/dist/tokens/css/tokens.css +7 -0
  8. package/dist/tokens/css/tokens.dark.css +7 -0
  9. package/dist/tokens/docs/tokens-tailwind-docs.dark.json +177 -0
  10. package/dist/tokens/docs/tokens-tailwind-docs.json +177 -0
  11. package/dist/tokens/figma/constants.tokens.json +51 -0
  12. package/dist/tokens/js/tokens.dark.js +7 -0
  13. package/dist/tokens/js/tokens.js +7 -0
  14. package/dist/tokens/json/tokens.dark.json +170 -0
  15. package/dist/tokens/json/tokens.json +170 -0
  16. package/dist/tokens/scss/_tokens.dark.scss +7 -0
  17. package/dist/tokens/scss/_tokens.scss +7 -0
  18. package/dist/tokens/scss/_tokens_custom_properties.scss +7 -0
  19. package/dist/tokens/tailwind/tokens.cjs +2 -0
  20. package/package.json +1 -1
  21. package/src/tokens/build/css/tokens.css +7 -0
  22. package/src/tokens/build/css/tokens.dark.css +7 -0
  23. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +177 -0
  24. package/src/tokens/build/docs/tokens-tailwind-docs.json +177 -0
  25. package/src/tokens/build/figma/constants.tokens.json +51 -0
  26. package/src/tokens/build/js/tokens.dark.js +7 -0
  27. package/src/tokens/build/js/tokens.js +7 -0
  28. package/src/tokens/build/json/tokens.dark.json +170 -0
  29. package/src/tokens/build/json/tokens.json +170 -0
  30. package/src/tokens/build/scss/_tokens.dark.scss +7 -0
  31. package/src/tokens/build/scss/_tokens.scss +7 -0
  32. package/src/tokens/build/scss/_tokens_custom_properties.scss +7 -0
  33. package/src/tokens/build/tailwind/tokens.cjs +10 -0
  34. package/src/tokens/constant/zindex.tokens.json +53 -0
  35. package/tailwind.defaults.js +2 -9
package/src/tokens/build/figma/constants.tokens.json CHANGED
@@ -2101,5 +2101,56 @@
2101
2101
  "com.figma.scope": []
2102
2102
  }
2103
2103
  }
2104
+ },
2105
+ "zindex": {
2106
+ "0": {
2107
+ "$value": "0",
2108
+ "$type": "number",
2109
+ "$extensions": {
2110
+ "com.figma.scope": []
2111
+ }
2112
+ },
2113
+ "1": {
2114
+ "$value": "1",
2115
+ "$type": "number",
2116
+ "$extensions": {
2117
+ "com.figma.scope": []
2118
+ }
2119
+ },
2120
+ "2": {
2121
+ "$value": "2",
2122
+ "$type": "number",
2123
+ "$extensions": {
2124
+ "com.figma.scope": []
2125
+ }
2126
+ },
2127
+ "3": {
2128
+ "$value": "3",
2129
+ "$type": "number",
2130
+ "$extensions": {
2131
+ "com.figma.scope": []
2132
+ }
2133
+ },
2134
+ "4": {
2135
+ "$value": "4",
2136
+ "$type": "number",
2137
+ "$extensions": {
2138
+ "com.figma.scope": []
2139
+ }
2140
+ },
2141
+ "200": {
2142
+ "$value": "200",
2143
+ "$type": "number",
2144
+ "$extensions": {
2145
+ "com.figma.scope": []
2146
+ }
2147
+ },
2148
+ "9999": {
2149
+ "$value": "9999",
2150
+ "$type": "number",
2151
+ "$extensions": {
2152
+ "com.figma.scope": []
2153
+ }
2154
+ }
2104
2155
  }
2105
2156
  }
package/src/tokens/build/js/tokens.dark.js CHANGED
@@ -296,6 +296,13 @@ export const GL_SPACING_SCALE_88 = '44rem';
296
296
  export const GL_SPACING_SCALE_PX = '1px';
297
297
  export const GL_SPACING_SCALE_2_5 = '0.375rem';
298
298
  export const GL_SPACING_SCALE_11_5 = '4.5rem';
299
+ export const GL_ZINDEX_0 = '0';
300
+ export const GL_ZINDEX_1 = '1';
301
+ export const GL_ZINDEX_2 = '2';
302
+ export const GL_ZINDEX_3 = '3';
303
+ export const GL_ZINDEX_4 = '4';
304
+ export const GL_ZINDEX_200 = '200';
305
+ export const GL_ZINDEX_9999 = '9999';
299
306
  export const GL_ALERT_BORDER_RADIUS = '0.25rem';
300
307
  export const GL_ALERT_NEUTRAL_TITLE_COLOR = '#fff';
301
308
  export const GL_ALERT_NEUTRAL_BACKGROUND_COLOR = '#28272d';
package/src/tokens/build/js/tokens.js CHANGED
@@ -296,6 +296,13 @@ export const GL_SPACING_SCALE_88 = '44rem';
296
296
  export const GL_SPACING_SCALE_PX = '1px';
297
297
  export const GL_SPACING_SCALE_2_5 = '0.375rem';
298
298
  export const GL_SPACING_SCALE_11_5 = '4.5rem';
299
+ export const GL_ZINDEX_0 = '0';
300
+ export const GL_ZINDEX_1 = '1';
301
+ export const GL_ZINDEX_2 = '2';
302
+ export const GL_ZINDEX_3 = '3';
303
+ export const GL_ZINDEX_4 = '4';
304
+ export const GL_ZINDEX_200 = '200';
305
+ export const GL_ZINDEX_9999 = '9999';
299
306
  export const GL_ALERT_BORDER_RADIUS = '0.25rem';
300
307
  export const GL_ALERT_NEUTRAL_TITLE_COLOR = '#18171d';
301
308
  export const GL_ALERT_NEUTRAL_BACKGROUND_COLOR = '#ececef';
package/src/tokens/build/json/tokens.dark.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/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',