@gitlab/ui 85.12.0 → 85.12.2

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/CHANGELOG.md +14 -0
  2. package/dist/components/base/badge/badge.js +1 -1
  3. package/dist/components/base/skeleton_loader/skeleton_loader.js +3 -3
  4. package/dist/components/experimental/duo/chat/constants.js +2 -1
  5. package/dist/components/experimental/duo/chat/duo_chat.js +2 -2
  6. package/dist/index.css +2 -2
  7. package/dist/index.css.map +1 -1
  8. package/dist/tokens/build/js/tokens.dark.js +31 -1
  9. package/dist/tokens/build/js/tokens.js +31 -1
  10. package/dist/tokens/css/tokens.css +30 -0
  11. package/dist/tokens/css/tokens.dark.css +30 -0
  12. package/dist/tokens/js/tokens.dark.js +30 -0
  13. package/dist/tokens/js/tokens.js +30 -0
  14. package/dist/tokens/json/tokens.dark.json +753 -0
  15. package/dist/tokens/json/tokens.json +753 -0
  16. package/dist/tokens/scss/_tokens.dark.scss +30 -0
  17. package/dist/tokens/scss/_tokens.scss +30 -0
  18. package/dist/tokens/scss/_tokens_custom_properties.scss +30 -0
  19. package/package.json +1 -1
  20. package/src/components/base/badge/badge.scss +5 -2
  21. package/src/components/base/badge/badge.vue +5 -2
  22. package/src/components/base/skeleton_loader/skeleton_loader.scss +2 -2
  23. package/src/components/base/skeleton_loader/skeleton_loader.vue +3 -3
  24. package/src/components/experimental/duo/chat/constants.js +1 -0
  25. package/src/components/experimental/duo/chat/duo_chat.vue +2 -2
  26. package/src/tokens/action.tokens.json +261 -0
  27. package/src/tokens/build/css/tokens.css +30 -0
  28. package/src/tokens/build/css/tokens.dark.css +30 -0
  29. package/src/tokens/build/js/tokens.dark.js +30 -0
  30. package/src/tokens/build/js/tokens.js +30 -0
  31. package/src/tokens/build/json/tokens.dark.json +753 -0
  32. package/src/tokens/build/json/tokens.json +753 -0
  33. package/src/tokens/build/scss/_tokens.dark.scss +30 -0
  34. package/src/tokens/build/scss/_tokens.scss +30 -0
  35. package/src/tokens/build/scss/_tokens_custom_properties.scss +30 -0
package/src/tokens/build/scss/_tokens.dark.scss CHANGED
@@ -537,6 +537,36 @@ $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disa
537
537
  $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
538
538
  $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
539
539
  $gl-background-color-default: $gl-color-neutral-950; // Used for the default background color.
540
+ $gl-action-danger-icon-color-strong: $gl-color-neutral-900; // Used for the icon on a solid, strong danger (destructive) action background.
541
+ $gl-action-danger-icon-color-active: $gl-color-red-50; // Used for the icon of a danger (destructive) action in the active state.
542
+ $gl-action-danger-icon-color-focus: $gl-color-red-200; // Used for the icon of a danger (destructive) action in the focus state.
543
+ $gl-action-danger-icon-color-hover: $gl-color-red-200; // Used for the icon of a danger (destructive) action in the hover state.
544
+ $gl-action-danger-icon-color-default: $gl-color-red-400; // Used for the icon of a danger (destructive) action in the default state.
545
+ $gl-action-danger-text-color-strong: $gl-color-neutral-900; // Used for the text on a solid, strong danger (destructive) action background.
546
+ $gl-action-danger-text-color-active: $gl-color-red-50; // Used for the text of a danger (destructive) action in the active state.
547
+ $gl-action-danger-text-color-focus: $gl-color-red-200; // Used for the text of a danger (destructive) action in the focus state.
548
+ $gl-action-danger-text-color-hover: $gl-color-red-200; // Used for the text of a danger (destructive) action in the hover state.
549
+ $gl-action-danger-text-color-default: $gl-color-red-400; // Used for the text of a danger (destructive) action in the default state.
550
+ $gl-action-danger-border-color-strong-active: $gl-color-red-50; // Used for the border of a solid, strong danger (destructive) action in the active state.
551
+ $gl-action-danger-border-color-strong-focus: $gl-color-red-100; // Used for the border of a solid, strong danger (destructive) action in the focus state.
552
+ $gl-action-danger-border-color-strong-hover: $gl-color-red-100; // Used for the border of a solid, strong danger (destructive) action in the hover state.
553
+ $gl-action-danger-border-color-strong-default: $gl-color-red-300; // Used for the border of a solid, strong danger (destructive) action in the default state.
554
+ $gl-action-danger-border-color-active: $gl-color-red-50; // Used for the border of an outlined danger (destructive) action in the active state.
555
+ $gl-action-danger-border-color-focus: $gl-color-red-200; // Used for the border of an outlined danger (destructive) action in the focus state.
556
+ $gl-action-danger-border-color-hover: $gl-color-red-200; // Used for the border of an outlined danger (destructive) action in the hover state.
557
+ $gl-action-danger-border-color-default: $gl-color-red-400; // Used for the border of an outlined danger (destructive) action in the default state.
558
+ $gl-action-danger-background-color-strong-active: $gl-color-red-100; // Used for the background of a solid, strong danger (destructive) action in the active state.
559
+ $gl-action-danger-background-color-strong-focus: $gl-color-red-300; // Used for the background of a solid, strong danger (destructive) action in the focus state.
560
+ $gl-action-danger-background-color-strong-hover: $gl-color-red-300; // Used for the background of a solid, strong danger (destructive) action in the hover state.
561
+ $gl-action-danger-background-color-strong-default: $gl-color-red-400; // Used for the background of a solid, strong danger (destructive) action in the default state.
562
+ $gl-action-danger-background-color-subtle-active: $gl-color-red-800; // Used for the background of a borderless, subtle danger (destructive) action in the active state.
563
+ $gl-action-danger-background-color-subtle-focus: $gl-color-red-900; // Used for the background of a borderless, subtle danger (destructive) action in the focus state.
564
+ $gl-action-danger-background-color-subtle-hover: $gl-color-red-900; // Used for the background of a borderless, subtle danger (destructive) action in the hover state.
565
+ $gl-action-danger-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle danger (destructive) action in the default state.
566
+ $gl-action-danger-background-color-active: $gl-color-red-800; // Used for the background of an outlined danger (destructive) action in the active state.
567
+ $gl-action-danger-background-color-focus: $gl-color-red-900; // Used for the background of an outlined danger (destructive) action in the focus state.
568
+ $gl-action-danger-background-color-hover: $gl-color-red-900; // Used for the background of an outlined danger (destructive) action in the hover state.
569
+ $gl-action-danger-background-color-default: $gl-color-neutral-900; // Used for the background of an outlined danger (destructive) action in the default state.
540
570
  $gl-action-confirm-icon-color-strong: $gl-color-neutral-900; // Used for the icon on a solid, strong confirm (positive) action background.
541
571
  $gl-action-confirm-icon-color-active: $gl-color-blue-50; // Used for the icon of a confirm (positive) action in the active state.
542
572
  $gl-action-confirm-icon-color-focus: $gl-color-blue-200; // Used for the icon of a confirm (positive) action in the focus state.
package/src/tokens/build/scss/_tokens.scss CHANGED
@@ -537,6 +537,36 @@ $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disab
537
537
  $gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
538
538
  $gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.
539
539
  $gl-background-color-default: $gl-color-neutral-0; // Used for the default background color.
540
+ $gl-action-danger-icon-color-strong: $gl-color-neutral-0; // Used for the icon on a solid, strong danger (destructive) action background.
541
+ $gl-action-danger-icon-color-active: $gl-color-red-900; // Used for the icon of a danger (destructive) action in the active state.
542
+ $gl-action-danger-icon-color-focus: $gl-color-red-700; // Used for the icon of a danger (destructive) action in the focus state.
543
+ $gl-action-danger-icon-color-hover: $gl-color-red-700; // Used for the icon of a danger (destructive) action in the hover state.
544
+ $gl-action-danger-icon-color-default: $gl-color-red-500; // Used for the icon of a danger (destructive) action in the default state.
545
+ $gl-action-danger-text-color-strong: $gl-color-neutral-0; // Used for the text on a solid, strong danger (destructive) action background.
546
+ $gl-action-danger-text-color-active: $gl-color-red-900; // Used for the text of a danger (destructive) action in the active state.
547
+ $gl-action-danger-text-color-focus: $gl-color-red-700; // Used for the text of a danger (destructive) action in the focus state.
548
+ $gl-action-danger-text-color-hover: $gl-color-red-700; // Used for the text of a danger (destructive) action in the hover state.
549
+ $gl-action-danger-text-color-default: $gl-color-red-500; // Used for the text of a danger (destructive) action in the default state.
550
+ $gl-action-danger-border-color-strong-active: $gl-color-red-900; // Used for the border of a solid, strong danger (destructive) action in the active state.
551
+ $gl-action-danger-border-color-strong-focus: $gl-color-red-800; // Used for the border of a solid, strong danger (destructive) action in the focus state.
552
+ $gl-action-danger-border-color-strong-hover: $gl-color-red-800; // Used for the border of a solid, strong danger (destructive) action in the hover state.
553
+ $gl-action-danger-border-color-strong-default: $gl-color-red-600; // Used for the border of a solid, strong danger (destructive) action in the default state.
554
+ $gl-action-danger-border-color-active: $gl-color-red-900; // Used for the border of an outlined danger (destructive) action in the active state.
555
+ $gl-action-danger-border-color-focus: $gl-color-red-700; // Used for the border of an outlined danger (destructive) action in the focus state.
556
+ $gl-action-danger-border-color-hover: $gl-color-red-700; // Used for the border of an outlined danger (destructive) action in the hover state.
557
+ $gl-action-danger-border-color-default: $gl-color-red-500; // Used for the border of an outlined danger (destructive) action in the default state.
558
+ $gl-action-danger-background-color-strong-active: $gl-color-red-800; // Used for the background of a solid, strong danger (destructive) action in the active state.
559
+ $gl-action-danger-background-color-strong-focus: $gl-color-red-600; // Used for the background of a solid, strong danger (destructive) action in the focus state.
560
+ $gl-action-danger-background-color-strong-hover: $gl-color-red-600; // Used for the background of a solid, strong danger (destructive) action in the hover state.
561
+ $gl-action-danger-background-color-strong-default: $gl-color-red-500; // Used for the background of a solid, strong danger (destructive) action in the default state.
562
+ $gl-action-danger-background-color-subtle-active: $gl-color-red-100; // Used for the background of a borderless, subtle danger (destructive) action in the active state.
563
+ $gl-action-danger-background-color-subtle-focus: $gl-color-red-50; // Used for the background of a borderless, subtle danger (destructive) action in the focus state.
564
+ $gl-action-danger-background-color-subtle-hover: $gl-color-red-50; // Used for the background of a borderless, subtle danger (destructive) action in the hover state.
565
+ $gl-action-danger-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle danger (destructive) action in the default state.
566
+ $gl-action-danger-background-color-active: $gl-color-red-100; // Used for the background of an outlined danger (destructive) action in the active state.
567
+ $gl-action-danger-background-color-focus: $gl-color-red-50; // Used for the background of an outlined danger (destructive) action in the focus state.
568
+ $gl-action-danger-background-color-hover: $gl-color-red-50; // Used for the background of an outlined danger (destructive) action in the hover state.
569
+ $gl-action-danger-background-color-default: $gl-color-neutral-0; // Used for the background of an outlined danger (destructive) action in the default state.
540
570
  $gl-action-confirm-icon-color-strong: $gl-color-neutral-0; // Used for the icon on a solid, strong confirm (positive) action background.
541
571
  $gl-action-confirm-icon-color-active: $gl-color-blue-900; // Used for the icon of a confirm (positive) action in the active state.
542
572
  $gl-action-confirm-icon-color-focus: $gl-color-blue-700; // Used for the icon of a confirm (positive) action in the focus state.
package/src/tokens/build/scss/_tokens_custom_properties.scss CHANGED
@@ -70,6 +70,36 @@ $gl-action-confirm-icon-color-hover: var(--gl-action-confirm-icon-color-hover);
70
70
  $gl-action-confirm-icon-color-focus: var(--gl-action-confirm-icon-color-focus);
71
71
  $gl-action-confirm-icon-color-active: var(--gl-action-confirm-icon-color-active);
72
72
  $gl-action-confirm-icon-color-strong: var(--gl-action-confirm-icon-color-strong);
73
+ $gl-action-danger-background-color-default: var(--gl-action-danger-background-color-default);
74
+ $gl-action-danger-background-color-hover: var(--gl-action-danger-background-color-hover);
75
+ $gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-focus);
76
+ $gl-action-danger-background-color-active: var(--gl-action-danger-background-color-active);
77
+ $gl-action-danger-background-color-subtle-default: var(--gl-action-danger-background-color-subtle-default);
78
+ $gl-action-danger-background-color-subtle-hover: var(--gl-action-danger-background-color-subtle-hover);
79
+ $gl-action-danger-background-color-subtle-focus: var(--gl-action-danger-background-color-subtle-focus);
80
+ $gl-action-danger-background-color-subtle-active: var(--gl-action-danger-background-color-subtle-active);
81
+ $gl-action-danger-background-color-strong-default: var(--gl-action-danger-background-color-strong-default);
82
+ $gl-action-danger-background-color-strong-hover: var(--gl-action-danger-background-color-strong-hover);
83
+ $gl-action-danger-background-color-strong-focus: var(--gl-action-danger-background-color-strong-focus);
84
+ $gl-action-danger-background-color-strong-active: var(--gl-action-danger-background-color-strong-active);
85
+ $gl-action-danger-border-color-default: var(--gl-action-danger-border-color-default);
86
+ $gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-hover);
87
+ $gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-focus);
88
+ $gl-action-danger-border-color-active: var(--gl-action-danger-border-color-active);
89
+ $gl-action-danger-border-color-strong-default: var(--gl-action-danger-border-color-strong-default);
90
+ $gl-action-danger-border-color-strong-hover: var(--gl-action-danger-border-color-strong-hover);
91
+ $gl-action-danger-border-color-strong-focus: var(--gl-action-danger-border-color-strong-focus);
92
+ $gl-action-danger-border-color-strong-active: var(--gl-action-danger-border-color-strong-active);
93
+ $gl-action-danger-text-color-default: var(--gl-action-danger-text-color-default);
94
+ $gl-action-danger-text-color-hover: var(--gl-action-danger-text-color-hover);
95
+ $gl-action-danger-text-color-focus: var(--gl-action-danger-text-color-focus);
96
+ $gl-action-danger-text-color-active: var(--gl-action-danger-text-color-active);
97
+ $gl-action-danger-text-color-strong: var(--gl-action-danger-text-color-strong);
98
+ $gl-action-danger-icon-color-default: var(--gl-action-danger-icon-color-default);
99
+ $gl-action-danger-icon-color-hover: var(--gl-action-danger-icon-color-hover);
100
+ $gl-action-danger-icon-color-focus: var(--gl-action-danger-icon-color-focus);
101
+ $gl-action-danger-icon-color-active: var(--gl-action-danger-icon-color-active);
102
+ $gl-action-danger-icon-color-strong: var(--gl-action-danger-icon-color-strong);
73
103
  $gl-background-color-default: var(--gl-background-color-default);
74
104
  $gl-background-color-subtle: var(--gl-background-color-subtle);
75
105
  $gl-background-color-strong: var(--gl-background-color-strong);