@gitlab/ui 85.12.1 → 85.13.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 (39) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/components/base/skeleton_loader/skeleton_loader.js +3 -3
  3. package/dist/components/experimental/duo/chat/constants.js +2 -1
  4. package/dist/components/experimental/duo/chat/duo_chat.js +5 -2
  5. package/dist/index.css +2 -2
  6. package/dist/index.css.map +1 -1
  7. package/dist/tokens/build/js/tokens.dark.js +34 -1
  8. package/dist/tokens/build/js/tokens.js +34 -1
  9. package/dist/tokens/css/tokens.css +33 -0
  10. package/dist/tokens/css/tokens.dark.css +33 -0
  11. package/dist/tokens/js/tokens.dark.js +33 -0
  12. package/dist/tokens/js/tokens.js +33 -0
  13. package/dist/tokens/json/tokens.dark.json +827 -0
  14. package/dist/tokens/json/tokens.json +827 -0
  15. package/dist/tokens/scss/_tokens.dark.scss +33 -0
  16. package/dist/tokens/scss/_tokens.scss +33 -0
  17. package/dist/tokens/scss/_tokens_custom_properties.scss +33 -0
  18. package/dist/utility_classes.css +1 -1
  19. package/dist/utility_classes.css.map +1 -1
  20. package/package.json +1 -2
  21. package/src/components/base/form/form_checkbox/form_checkbox.scss +55 -36
  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.md +11 -1
  26. package/src/components/experimental/duo/chat/duo_chat.vue +5 -2
  27. package/src/scss/mixins.scss +4 -3
  28. package/src/scss/variables.scss +5 -4
  29. package/src/tokens/action.tokens.json +261 -0
  30. package/src/tokens/build/css/tokens.css +33 -0
  31. package/src/tokens/build/css/tokens.dark.css +33 -0
  32. package/src/tokens/build/js/tokens.dark.js +33 -0
  33. package/src/tokens/build/js/tokens.js +33 -0
  34. package/src/tokens/build/json/tokens.dark.json +827 -0
  35. package/src/tokens/build/json/tokens.json +827 -0
  36. package/src/tokens/build/scss/_tokens.dark.scss +33 -0
  37. package/src/tokens/build/scss/_tokens.scss +33 -0
  38. package/src/tokens/build/scss/_tokens_custom_properties.scss +33 -0
  39. package/src/tokens/control.tokens.json +26 -0
package/dist/tokens/scss/_tokens.dark.scss CHANGED
@@ -504,6 +504,9 @@ $gl-control-indicator-color-selected: $gl-color-neutral-900; // Used for checkbo
504
504
  $gl-control-placeholder-color: $gl-color-neutral-500; // Used for placeholder text within inputs.
505
505
  $gl-control-text-color-valid: $gl-color-green-400; // Used for the helper text when the input is valid.
506
506
  $gl-control-text-color-error: $gl-color-red-400; // Used for the helper text when the input is invalid.
507
+ $gl-control-border-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
508
+ $gl-control-border-color-selected-hover: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
509
+ $gl-control-border-color-selected-default: $gl-color-blue-400; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
507
510
  $gl-control-border-color-error: $gl-color-red-400; // Used for invalid form control (input, textarea) border.
508
511
  $gl-control-border-color-disabled: $gl-color-neutral-800; // Used for disabled form control (input, radio button, checkbox, textarea) border.
509
512
  $gl-control-border-color-focus: $gl-color-neutral-50; // Used for form control (input, radio button, checkbox, textarea) border on focus.
@@ -537,6 +540,36 @@ $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disa
537
540
  $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
538
541
  $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
539
542
  $gl-background-color-default: $gl-color-neutral-950; // Used for the default background color.
543
+ $gl-action-danger-icon-color-strong: $gl-color-neutral-900; // Used for the icon on a solid, strong danger (destructive) action background.
544
+ $gl-action-danger-icon-color-active: $gl-color-red-50; // Used for the icon of a danger (destructive) action in the active state.
545
+ $gl-action-danger-icon-color-focus: $gl-color-red-200; // Used for the icon of a danger (destructive) action in the focus state.
546
+ $gl-action-danger-icon-color-hover: $gl-color-red-200; // Used for the icon of a danger (destructive) action in the hover state.
547
+ $gl-action-danger-icon-color-default: $gl-color-red-400; // Used for the icon of a danger (destructive) action in the default state.
548
+ $gl-action-danger-text-color-strong: $gl-color-neutral-900; // Used for the text on a solid, strong danger (destructive) action background.
549
+ $gl-action-danger-text-color-active: $gl-color-red-50; // Used for the text of a danger (destructive) action in the active state.
550
+ $gl-action-danger-text-color-focus: $gl-color-red-200; // Used for the text of a danger (destructive) action in the focus state.
551
+ $gl-action-danger-text-color-hover: $gl-color-red-200; // Used for the text of a danger (destructive) action in the hover state.
552
+ $gl-action-danger-text-color-default: $gl-color-red-400; // Used for the text of a danger (destructive) action in the default state.
553
+ $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.
554
+ $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.
555
+ $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.
556
+ $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.
557
+ $gl-action-danger-border-color-active: $gl-color-red-50; // Used for the border of an outlined danger (destructive) action in the active state.
558
+ $gl-action-danger-border-color-focus: $gl-color-red-200; // Used for the border of an outlined danger (destructive) action in the focus state.
559
+ $gl-action-danger-border-color-hover: $gl-color-red-200; // Used for the border of an outlined danger (destructive) action in the hover state.
560
+ $gl-action-danger-border-color-default: $gl-color-red-400; // Used for the border of an outlined danger (destructive) action in the default state.
561
+ $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.
562
+ $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.
563
+ $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.
564
+ $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.
565
+ $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.
566
+ $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.
567
+ $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.
568
+ $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.
569
+ $gl-action-danger-background-color-active: $gl-color-red-800; // Used for the background of an outlined danger (destructive) action in the active state.
570
+ $gl-action-danger-background-color-focus: $gl-color-red-900; // Used for the background of an outlined danger (destructive) action in the focus state.
571
+ $gl-action-danger-background-color-hover: $gl-color-red-900; // Used for the background of an outlined danger (destructive) action in the hover state.
572
+ $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
573
  $gl-action-confirm-icon-color-strong: $gl-color-neutral-900; // Used for the icon on a solid, strong confirm (positive) action background.
541
574
  $gl-action-confirm-icon-color-active: $gl-color-blue-50; // Used for the icon of a confirm (positive) action in the active state.
542
575
  $gl-action-confirm-icon-color-focus: $gl-color-blue-200; // Used for the icon of a confirm (positive) action in the focus state.
package/dist/tokens/scss/_tokens.scss CHANGED
@@ -504,6 +504,9 @@ $gl-control-indicator-color-selected: $gl-color-neutral-0; // Used for checkbox
504
504
  $gl-control-placeholder-color: $gl-color-neutral-400; // Used for placeholder text within inputs.
505
505
  $gl-control-text-color-valid: $gl-color-green-500; // Used for the helper text when the input is valid.
506
506
  $gl-control-text-color-error: $gl-color-red-500; // Used for the helper text when the input is invalid.
507
+ $gl-control-border-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
508
+ $gl-control-border-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
509
+ $gl-control-border-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
507
510
  $gl-control-border-color-error: $gl-color-red-500; // Used for invalid form control (input, textarea) border.
508
511
  $gl-control-border-color-disabled: $gl-color-neutral-100; // Used for disabled form control (input, radio button, checkbox, textarea) border.
509
512
  $gl-control-border-color-focus: $gl-color-neutral-900; // Used for form control (input, radio button, checkbox, textarea) border on focus.
@@ -537,6 +540,36 @@ $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disab
537
540
  $gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
538
541
  $gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.
539
542
  $gl-background-color-default: $gl-color-neutral-0; // Used for the default background color.
543
+ $gl-action-danger-icon-color-strong: $gl-color-neutral-0; // Used for the icon on a solid, strong danger (destructive) action background.
544
+ $gl-action-danger-icon-color-active: $gl-color-red-900; // Used for the icon of a danger (destructive) action in the active state.
545
+ $gl-action-danger-icon-color-focus: $gl-color-red-700; // Used for the icon of a danger (destructive) action in the focus state.
546
+ $gl-action-danger-icon-color-hover: $gl-color-red-700; // Used for the icon of a danger (destructive) action in the hover state.
547
+ $gl-action-danger-icon-color-default: $gl-color-red-500; // Used for the icon of a danger (destructive) action in the default state.
548
+ $gl-action-danger-text-color-strong: $gl-color-neutral-0; // Used for the text on a solid, strong danger (destructive) action background.
549
+ $gl-action-danger-text-color-active: $gl-color-red-900; // Used for the text of a danger (destructive) action in the active state.
550
+ $gl-action-danger-text-color-focus: $gl-color-red-700; // Used for the text of a danger (destructive) action in the focus state.
551
+ $gl-action-danger-text-color-hover: $gl-color-red-700; // Used for the text of a danger (destructive) action in the hover state.
552
+ $gl-action-danger-text-color-default: $gl-color-red-500; // Used for the text of a danger (destructive) action in the default state.
553
+ $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.
554
+ $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.
555
+ $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.
556
+ $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.
557
+ $gl-action-danger-border-color-active: $gl-color-red-900; // Used for the border of an outlined danger (destructive) action in the active state.
558
+ $gl-action-danger-border-color-focus: $gl-color-red-700; // Used for the border of an outlined danger (destructive) action in the focus state.
559
+ $gl-action-danger-border-color-hover: $gl-color-red-700; // Used for the border of an outlined danger (destructive) action in the hover state.
560
+ $gl-action-danger-border-color-default: $gl-color-red-500; // Used for the border of an outlined danger (destructive) action in the default state.
561
+ $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.
562
+ $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.
563
+ $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.
564
+ $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.
565
+ $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.
566
+ $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.
567
+ $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.
568
+ $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.
569
+ $gl-action-danger-background-color-active: $gl-color-red-100; // Used for the background of an outlined danger (destructive) action in the active state.
570
+ $gl-action-danger-background-color-focus: $gl-color-red-50; // Used for the background of an outlined danger (destructive) action in the focus state.
571
+ $gl-action-danger-background-color-hover: $gl-color-red-50; // Used for the background of an outlined danger (destructive) action in the hover state.
572
+ $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
573
  $gl-action-confirm-icon-color-strong: $gl-color-neutral-0; // Used for the icon on a solid, strong confirm (positive) action background.
541
574
  $gl-action-confirm-icon-color-active: $gl-color-blue-900; // Used for the icon of a confirm (positive) action in the active state.
542
575
  $gl-action-confirm-icon-color-focus: $gl-color-blue-700; // Used for the icon of a confirm (positive) action in the focus state.
package/dist/tokens/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);
@@ -478,6 +508,9 @@ $gl-control-border-color-hover: var(--gl-control-border-color-hover);
478
508
  $gl-control-border-color-focus: var(--gl-control-border-color-focus);
479
509
  $gl-control-border-color-disabled: var(--gl-control-border-color-disabled);
480
510
  $gl-control-border-color-error: var(--gl-control-border-color-error);
511
+ $gl-control-border-color-selected-default: var(--gl-control-border-color-selected-default);
512
+ $gl-control-border-color-selected-hover: var(--gl-control-border-color-selected-hover);
513
+ $gl-control-border-color-selected-focus: var(--gl-control-border-color-selected-focus);
481
514
  $gl-control-text-color-error: var(--gl-control-text-color-error);
482
515
  $gl-control-text-color-valid: var(--gl-control-text-color-valid);
483
516
  $gl-control-placeholder-color: var(--gl-control-placeholder-color);