@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
package/src/tokens/build/css/tokens.css CHANGED
@@ -4,14 +4,14 @@
4
4
 
5
5
  :root, .gl-light-scope {
6
6
  --gl-border-radius-full: 9999px;
7
- --gl-color-alpha-0: transparent;
8
- --gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
9
- --gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
10
- --gl-color-alpha-dark-6: rgba(05, 05, 06, 0.06);
11
- --gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
12
- --gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
13
- --gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
14
- --gl-color-alpha-dark-40: rgba(05, 05, 06, 0.4);
7
+ --gl-color-alpha-0: rgba(0, 0, 0, 0);
8
+ --gl-color-alpha-dark-2: rgba(5, 5, 6, 0.02);
9
+ --gl-color-alpha-dark-4: rgba(5, 5, 6, 0.04);
10
+ --gl-color-alpha-dark-6: rgba(5, 5, 6, 0.06);
11
+ --gl-color-alpha-dark-8: rgba(5, 5, 6, 0.08);
12
+ --gl-color-alpha-dark-16: rgba(5, 5, 6, 0.16);
13
+ --gl-color-alpha-dark-24: rgba(5, 5, 6, 0.24);
14
+ --gl-color-alpha-dark-40: rgba(5, 5, 6, 0.4);
15
15
  --gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
16
16
  --gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
17
17
  --gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
@@ -316,13 +316,13 @@
316
316
  --gl-zindex-4: 4;
317
317
  --gl-zindex-200: 200;
318
318
  --gl-zindex-9999: 9999;
319
- --gl-avatar-fallback-background-color-red: #fcb5aa3d; /** Red background for avatar fallback with no particular meaning. */
320
- --gl-avatar-fallback-background-color-purple: #cbbbf23d; /** Purple background for avatar fallback with no particular meaning. */
321
- --gl-avatar-fallback-background-color-blue: #9dc7f13d; /** Blue background for avatar fallback with no particular meaning. */
322
- --gl-avatar-fallback-background-color-green: #91d4a83d; /** Green background for avatar fallback with no particular meaning. */
323
- --gl-avatar-fallback-background-color-orange: #e9be743d; /** Orange background for avatar fallback with no particular meaning. */
324
- --gl-avatar-fallback-background-color-neutral: #bfbfc33d; /** Neutral background for avatar fallback with no particular meaning. */
325
- --gl-chart-threshold-area-color: rgba(221,43,14,0.1); /** Used in charts to delineate a threshold area in a chart. */
319
+ --gl-avatar-fallback-background-color-red: rgba(252, 181, 170, 0.23921568627450981); /** Red background for avatar fallback with no particular meaning. */
320
+ --gl-avatar-fallback-background-color-purple: rgba(203, 187, 242, 0.23921568627450981); /** Purple background for avatar fallback with no particular meaning. */
321
+ --gl-avatar-fallback-background-color-blue: rgba(157, 199, 241, 0.23921568627450981); /** Blue background for avatar fallback with no particular meaning. */
322
+ --gl-avatar-fallback-background-color-green: rgba(145, 212, 168, 0.23921568627450981); /** Green background for avatar fallback with no particular meaning. */
323
+ --gl-avatar-fallback-background-color-orange: rgba(233, 190, 116, 0.23921568627450981); /** Orange background for avatar fallback with no particular meaning. */
324
+ --gl-avatar-fallback-background-color-neutral: rgba(191, 191, 195, 0.23921568627450981); /** Neutral background for avatar fallback with no particular meaning. */
325
+ --gl-chart-threshold-area-color: rgba(221, 43, 14, 0.1); /** Used in charts to delineate a threshold area in a chart. */
326
326
  --gl-illustration-stroke-color-default: #171321; /** Default stroke color to define shape and provide essential detail. */
327
327
  --gl-illustration-stroke-width-default: 2; /** Default stroke width to define shape and provide essential detail. */
328
328
  --gl-illustration-fill-color-default: #fff; /** Default fill color for an element where specific meaning or emphasis is not required. */
@@ -562,12 +562,12 @@
562
562
  --brand-gray-03: #74717a; /** Use color.brand-gray.03 instead. */
563
563
  --brand-gray-04: #45424d; /** Use color.brand-gray.04 instead. */
564
564
  --brand-gray-05: #2b2838; /** Use color.brand-gray.05 instead. */
565
- --t-gray-a-16: rgba(05, 05, 06, 0.16); /** Use color.alpha.dark.16 instead. */
566
- --t-gray-a-24: rgba(05, 05, 06, 0.24); /** Use color.alpha.dark.24 instead. */
567
- --t-gray-a-02: rgba(05, 05, 06, 0.02); /** Use color.alpha.dark.2 instead. */
568
- --t-gray-a-04: rgba(05, 05, 06, 0.04); /** Use color.alpha.dark.4 instead. */
569
- --t-gray-a-06: rgba(05, 05, 06, 0.06); /** Use color.alpha.dark.6 instead. */
570
- --t-gray-a-08: rgba(05, 05, 06, 0.08); /** Use color.alpha.dark.8 instead. */
565
+ --t-gray-a-16: rgba(5, 5, 6, 0.16); /** Use color.alpha.dark.16 instead. */
566
+ --t-gray-a-24: rgba(5, 5, 6, 0.24); /** Use color.alpha.dark.24 instead. */
567
+ --t-gray-a-02: rgba(5, 5, 6, 0.02); /** Use color.alpha.dark.2 instead. */
568
+ --t-gray-a-04: rgba(5, 5, 6, 0.04); /** Use color.alpha.dark.4 instead. */
569
+ --t-gray-a-06: rgba(5, 5, 6, 0.06); /** Use color.alpha.dark.6 instead. */
570
+ --t-gray-a-08: rgba(5, 5, 6, 0.08); /** Use color.alpha.dark.8 instead. */
571
571
  --t-white-a-16: rgba(255, 255, 255, 0.16); /** Use color.alpha.light.16 instead. */
572
572
  --t-white-a-24: rgba(255, 255, 255, 0.24); /** Use color.alpha.light.24 instead. */
573
573
  --t-white-a-36: rgba(255, 255, 255, 0.36); /** Use color.alpha.light.36 instead. */
@@ -575,13 +575,13 @@
575
575
  --t-white-a-04: rgba(255, 255, 255, 0.04); /** Use color.alpha.light.4 instead. */
576
576
  --t-white-a-06: rgba(255, 255, 255, 0.06); /** Use color.alpha.light.6 instead. */
577
577
  --t-white-a-08: rgba(255, 255, 255, 0.08); /** Use color.alpha.light.8 instead. */
578
- --gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); /** Used for the background of a neutral action in the default state. */
578
+ --gl-action-neutral-background-color-default: rgba(164, 163, 168, 0); /** Used for the background of a neutral action in the default state. */
579
579
  --gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); /** Used for the background of a neutral action in the hover state. */
580
580
  --gl-action-neutral-background-color-active: rgba(83, 81, 88, 0.24); /** Used for the background of a neutral action in the active state. */
581
- --gl-action-confirm-background-color-default: rgba(99, 166, 233, 0.0); /** Used for the background of a confirm (positive) action in the default state. */
581
+ --gl-action-confirm-background-color-default: rgba(99, 166, 233, 0); /** Used for the background of a confirm (positive) action in the default state. */
582
582
  --gl-action-confirm-background-color-hover: rgba(99, 166, 233, 0.16); /** Used for the background of a confirm (positive) action in the hover state. */
583
583
  --gl-action-confirm-background-color-active: rgba(11, 92, 173, 0.24); /** Used for the background of a confirm (positive) action in the active state. */
584
- --gl-action-danger-background-color-default: rgba(245, 127, 108, 0.0); /** Used for the background of a danger (destructive) action in the default state. */
584
+ --gl-action-danger-background-color-default: rgba(245, 127, 108, 0); /** Used for the background of a danger (destructive) action in the default state. */
585
585
  --gl-action-danger-background-color-hover: rgba(245, 127, 108, 0.16); /** Used for the background of a danger (destructive) action in the hover state. */
586
586
  --gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); /** Used for the background of a danger (destructive) action in the active state. */
587
587
  --gl-letter-spacing-heading: -0.01em;
package/src/tokens/build/css/tokens.dark.css CHANGED
@@ -4,14 +4,14 @@
4
4
 
5
5
  :root.gl-dark, .gl-dark-scope {
6
6
  --gl-border-radius-full: 9999px;
7
- --gl-color-alpha-0: transparent;
8
- --gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
9
- --gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
10
- --gl-color-alpha-dark-6: rgba(05, 05, 06, 0.06);
11
- --gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
12
- --gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
13
- --gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
14
- --gl-color-alpha-dark-40: rgba(05, 05, 06, 0.4);
7
+ --gl-color-alpha-0: rgba(0, 0, 0, 0);
8
+ --gl-color-alpha-dark-2: rgba(5, 5, 6, 0.02);
9
+ --gl-color-alpha-dark-4: rgba(5, 5, 6, 0.04);
10
+ --gl-color-alpha-dark-6: rgba(5, 5, 6, 0.06);
11
+ --gl-color-alpha-dark-8: rgba(5, 5, 6, 0.08);
12
+ --gl-color-alpha-dark-16: rgba(5, 5, 6, 0.16);
13
+ --gl-color-alpha-dark-24: rgba(5, 5, 6, 0.24);
14
+ --gl-color-alpha-dark-40: rgba(5, 5, 6, 0.4);
15
15
  --gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
16
16
  --gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
17
17
  --gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
@@ -316,23 +316,23 @@
316
316
  --gl-zindex-4: 4;
317
317
  --gl-zindex-200: 200;
318
318
  --gl-zindex-9999: 9999;
319
- --gl-avatar-fallback-background-color-red: #fcb5aa3d; /** Red background for avatar fallback with no particular meaning. */
320
- --gl-avatar-fallback-background-color-purple: #cbbbf23d; /** Purple background for avatar fallback with no particular meaning. */
321
- --gl-avatar-fallback-background-color-blue: #9dc7f13d; /** Blue background for avatar fallback with no particular meaning. */
322
- --gl-avatar-fallback-background-color-green: #91d4a83d; /** Green background for avatar fallback with no particular meaning. */
323
- --gl-avatar-fallback-background-color-orange: #e9be743d; /** Orange background for avatar fallback with no particular meaning. */
324
- --gl-avatar-fallback-background-color-neutral: #bfbfc33d; /** Neutral background for avatar fallback with no particular meaning. */
319
+ --gl-avatar-fallback-background-color-red: rgba(252, 181, 170, 0.23921568627450981); /** Red background for avatar fallback with no particular meaning. */
320
+ --gl-avatar-fallback-background-color-purple: rgba(203, 187, 242, 0.23921568627450981); /** Purple background for avatar fallback with no particular meaning. */
321
+ --gl-avatar-fallback-background-color-blue: rgba(157, 199, 241, 0.23921568627450981); /** Blue background for avatar fallback with no particular meaning. */
322
+ --gl-avatar-fallback-background-color-green: rgba(145, 212, 168, 0.23921568627450981); /** Green background for avatar fallback with no particular meaning. */
323
+ --gl-avatar-fallback-background-color-orange: rgba(233, 190, 116, 0.23921568627450981); /** Orange background for avatar fallback with no particular meaning. */
324
+ --gl-avatar-fallback-background-color-neutral: rgba(191, 191, 195, 0.23921568627450981); /** Neutral background for avatar fallback with no particular meaning. */
325
325
  --gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); /** Used for the background of an default primary button in the default state. */
326
326
  --gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); /** Used for the background of an default primary button in the hover state. */
327
327
  --gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); /** Used for the background of an default primary button in the active state. */
328
328
  --gl-button-confirm-secondary-background-color-default: rgba(66, 143, 220, 0.4); /** Used for the background of an outlined confirm (positive) button in the default state. */
329
329
  --gl-button-confirm-secondary-background-color-hover: rgba(66, 143, 220, 0.64); /** Used for the background of an outlined confirm (positive) button in the hover state. */
330
330
  --gl-button-confirm-secondary-background-color-active: rgba(66, 143, 220, 0.32); /** Used for the background of an outlined confirm (positive) button in the active state. */
331
- --gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.40); /** Used for the background of an outlined danger (destructive) button in the default state. */
331
+ --gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.4); /** Used for the background of an outlined danger (destructive) button in the default state. */
332
332
  --gl-button-danger-secondary-background-color-hover: rgba(236, 89, 65, 0.64); /** Used for the background of an outlined danger (destructive) button in the hover state. */
333
333
  --gl-button-danger-secondary-background-color-active: rgba(236, 89, 65, 0.32); /** Used for the background of an outlined danger (destructive) button in the active state. */
334
334
  --gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); /** Used for the background of a disabled button. */
335
- --gl-chart-threshold-area-color: rgba(221,43,14,0.1); /** Used in charts to delineate a threshold area in a chart. */
335
+ --gl-chart-threshold-area-color: rgba(221, 43, 14, 0.1); /** Used in charts to delineate a threshold area in a chart. */
336
336
  --gl-illustration-stroke-color-default: #e3e3e8; /** Default stroke color to define shape and provide essential detail. */
337
337
  --gl-illustration-stroke-width-default: 1.5; /** Default stroke width to define shape and provide essential detail. */
338
338
  --gl-illustration-fill-color-default: #423f4f; /** Default fill color for an element where specific meaning or emphasis is not required. */
@@ -572,12 +572,12 @@
572
572
  --brand-gray-03: #74717a; /** Use color.brand-gray.03 instead. */
573
573
  --brand-gray-04: #45424d; /** Use color.brand-gray.04 instead. */
574
574
  --brand-gray-05: #2b2838; /** Use color.brand-gray.05 instead. */
575
- --t-gray-a-16: rgba(05, 05, 06, 0.16); /** Use color.alpha.dark.16 instead. */
576
- --t-gray-a-24: rgba(05, 05, 06, 0.24); /** Use color.alpha.dark.24 instead. */
577
- --t-gray-a-02: rgba(05, 05, 06, 0.02); /** Use color.alpha.dark.2 instead. */
578
- --t-gray-a-04: rgba(05, 05, 06, 0.04); /** Use color.alpha.dark.4 instead. */
579
- --t-gray-a-06: rgba(05, 05, 06, 0.06); /** Use color.alpha.dark.6 instead. */
580
- --t-gray-a-08: rgba(05, 05, 06, 0.08); /** Use color.alpha.dark.8 instead. */
575
+ --t-gray-a-16: rgba(5, 5, 6, 0.16); /** Use color.alpha.dark.16 instead. */
576
+ --t-gray-a-24: rgba(5, 5, 6, 0.24); /** Use color.alpha.dark.24 instead. */
577
+ --t-gray-a-02: rgba(5, 5, 6, 0.02); /** Use color.alpha.dark.2 instead. */
578
+ --t-gray-a-04: rgba(5, 5, 6, 0.04); /** Use color.alpha.dark.4 instead. */
579
+ --t-gray-a-06: rgba(5, 5, 6, 0.06); /** Use color.alpha.dark.6 instead. */
580
+ --t-gray-a-08: rgba(5, 5, 6, 0.08); /** Use color.alpha.dark.8 instead. */
581
581
  --t-white-a-16: rgba(255, 255, 255, 0.16); /** Use color.alpha.light.16 instead. */
582
582
  --t-white-a-24: rgba(255, 255, 255, 0.24); /** Use color.alpha.light.24 instead. */
583
583
  --t-white-a-36: rgba(255, 255, 255, 0.36); /** Use color.alpha.light.36 instead. */
@@ -585,16 +585,16 @@
585
585
  --t-white-a-04: rgba(255, 255, 255, 0.04); /** Use color.alpha.light.4 instead. */
586
586
  --t-white-a-06: rgba(255, 255, 255, 0.06); /** Use color.alpha.light.6 instead. */
587
587
  --t-white-a-08: rgba(255, 255, 255, 0.08); /** Use color.alpha.light.8 instead. */
588
- --gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); /** Used for the background of a neutral action in the default state. */
588
+ --gl-action-neutral-background-color-default: rgba(137, 136, 141, 0); /** Used for the background of a neutral action in the default state. */
589
589
  --gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); /** Used for the background of a neutral action in the hover state. */
590
590
  --gl-action-neutral-background-color-active: rgba(137, 136, 141, 0.16); /** Used for the background of a neutral action in the active state. */
591
- --gl-action-confirm-background-color-default: rgba(66, 143, 220, 0.0); /** Used for the background of a confirm (positive) action in the default state. */
591
+ --gl-action-confirm-background-color-default: rgba(66, 143, 220, 0); /** Used for the background of a confirm (positive) action in the default state. */
592
592
  --gl-action-confirm-background-color-hover: rgba(66, 143, 220, 0.4); /** Used for the background of a confirm (positive) action in the hover state. */
593
593
  --gl-action-confirm-background-color-active: rgba(66, 143, 220, 0.16); /** Used for the background of a confirm (positive) action in the active state. */
594
- --gl-action-danger-background-color-default: rgba(236, 89, 65, 0.0); /** Used for the background of a danger (destructive) action in the default state. */
594
+ --gl-action-danger-background-color-default: rgba(236, 89, 65, 0); /** Used for the background of a danger (destructive) action in the default state. */
595
595
  --gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); /** Used for the background of a danger (destructive) action in the hover state. */
596
596
  --gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); /** Used for the background of a danger (destructive) action in the active state. */
597
- --gl-background-color-overlay: rgba(0,0,0,0.64); /** Used for an overlay that covers other content. */
597
+ --gl-background-color-overlay: rgba(0, 0, 0, 0.64); /** Used for an overlay that covers other content. */
598
598
  --gl-letter-spacing-heading: -0.01em;
599
599
  --gl-heading-3-letter-spacing: inherit;
600
600
  --gl-heading-4-letter-spacing: inherit;