@gitlab/ui 91.14.0 → 92.0.0

package/src/components/base/popover/popover.scss

@@ -10,7 +10,7 @@ $gl-popover-max-width: $grid-size * 35;
 
   &,
   .popover-header {
-    background-color: var(--gl-popover-background-color);
+    background-color: var(--gl-background-color-overlap);
   }
 
   .popover-body {
@@ -23,52 +23,52 @@ $gl-popover-max-width: $grid-size * 35;
     */
     > .arrow::before {
       bottom: 1px;
-      border-top-color: var(--gl-popover-background-color);
+      border-top-color: var(--gl-background-color-overlap);
     }
 
     > .arrow::after {
       bottom: 2px;
-      border-top-color: var(--gl-popover-background-color);
+      border-top-color: var(--gl-background-color-overlap);
     }
   }
 
   &.bs-popover-bottom {
     > .arrow::before {
       top: 1px;
-      border-bottom-color: var(--gl-popover-background-color);
+      border-bottom-color: var(--gl-background-color-overlap);
     }
 
     > .arrow::after {
       top: 2px;
-      border-bottom-color: var(--gl-popover-background-color);
+      border-bottom-color: var(--gl-background-color-overlap);
     }
 
     > .popover-header::before {
-      border-color: var(--gl-popover-background-color);
+      border-color: var(--gl-background-color-overlap);
     }
   }
 
   &.bs-popover-right {
     > .arrow::before {
       left: 1px;
-      border-right-color: var(--gl-popover-background-color);
+      border-right-color: var(--gl-background-color-overlap);
     }
 
     > .arrow::after {
       left: 2px;
-      border-right-color: var(--gl-popover-background-color);
+      border-right-color: var(--gl-background-color-overlap);
     }
   }
 
   &.bs-popover-left {
     > .arrow::before {
       right: 1px;
-      border-left-color: var(--gl-popover-background-color);
+      border-left-color: var(--gl-background-color-overlap);
     }
 
     > .arrow::after {
       right: 2px;
-      border-left-color: var(--gl-popover-background-color);
+      border-left-color: var(--gl-background-color-overlap);
     }
   }
 

package/src/components/base/toast/toast.scss

@@ -19,7 +19,6 @@
   }
 
   .gl-toast {
-    color: color-yiq($toast-background-color);
     @apply gl-rounded-base;
     @include gl-font-base;
     @include gl-py-5;
@@ -28,6 +27,8 @@
     @include gl-display-flex;
     @include gl-align-items-center;
     @include gl-justify-content-space-between;
+    background-color: var(--gl-feedback-strong-background-color);
+    color: var(--gl-feedback-strong-text-color);
   }
 
   .toast-body {

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue

@@ -2,8 +2,8 @@
 import debounce from 'lodash/debounce';
 import { translate } from '../../../../../../../utils/i18n';
 import GlCard from '../../../../../../base/card/card.vue';
-import { categoriesValidator, contextItemsValidator } from '../utils';
 import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
+import { categoriesValidator, contextItemsValidator, wrapIndex } from '../utils';
 import GlDuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items.vue';
 import GlDuoChatContextItemMenuSearchItems from './duo_chat_context_item_menu_search_items.vue';
 
@@ -67,15 +67,18 @@ export default {
   },
   data() {
     return {
-      activeIndex: 0,
-      searchQuery: '',
       selectedCategory: null,
+      searchQuery: '',
+      activeIndex: 0,
     };
   },
   computed: {
     showCategorySelection() {
       return this.open && !this.selectedCategory;
     },
+    allResultsAreDisabled() {
+      return this.results.every((result) => !result.isEnabled);
+    },
   },
   watch: {
     open(isOpen) {
@@ -86,13 +89,22 @@ export default {
     searchQuery(query) {
       this.debouncedSearch(query);
     },
+    results(newResults) {
+      const firstEnabledIndex = newResults.findIndex((result) => result.isEnabled);
+      this.activeIndex = firstEnabledIndex >= 0 ? firstEnabledIndex : 0;
+    },
   },
   methods: {
     selectCategory(category) {
-      this.activeIndex = 0;
       this.searchQuery = '';
       this.selectedCategory = category;
 
+      this.$emit('search', {
+        category: category.value,
+        query: '',
+      });
+    },
+    debouncedSearch: debounce(function search(query) {
       /**
        * Emitted when a search should be performed.
        * @property {Object} filter
@@ -100,10 +112,10 @@ export default {
        * @property {string} filter.query - The search query
        */
       this.$emit('search', {
-        category: category.value,
-        query: '',
+        category: this.selectedCategory.value,
+        query,
       });
-    },
+    }, SEARCH_DEBOUNCE_MS),
     selectItem(item) {
       if (!item.isEnabled) {
         return;
@@ -131,16 +143,76 @@ export default {
        */
       this.$emit('remove', item);
     },
-    debouncedSearch: debounce(function search(query) {
-      this.$emit('search', {
-        category: this.selectedCategory.value,
-        query,
-      });
-    }, SEARCH_DEBOUNCE_MS),
     resetSelection() {
       this.selectedCategory = null;
+      this.searchQuery = '';
       this.activeIndex = 0;
     },
+    async scrollActiveItemIntoView() {
+      await this.$nextTick();
+
+      const activeItem = document.getElementById(`dropdown-item-${this.activeIndex}`);
+      if (activeItem) {
+        activeItem.scrollIntoView({ block: 'nearest', inline: 'start' });
+      }
+    },
+    handleKeyUp(e) {
+      switch (e.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+          e.preventDefault();
+          this.moveActiveIndex(e.key === 'ArrowDown' ? 1 : -1);
+          this.scrollActiveItemIntoView();
+          break;
+        case 'Enter':
+          e.preventDefault();
+          if (this.showCategorySelection) {
+            this.selectCategory(this.categories[this.activeIndex]);
+            return;
+          }
+          if (!this.results.length) {
+            return;
+          }
+          this.selectItem(this.results[this.activeIndex]);
+          break;
+        case 'Escape':
+          e.preventDefault();
+          if (this.showCategorySelection) {
+            this.$emit('close');
+            return;
+          }
+
+          this.selectedCategory = null;
+          break;
+        default:
+          break;
+      }
+    },
+    moveActiveIndex(step) {
+      if (this.showCategorySelection) {
+        // Categories cannot be disabled, so just loop to the next/prev one
+        this.activeIndex = wrapIndex(this.activeIndex, step, this.categories.length);
+        return;
+      }
+
+      // Return early if there are no results or all results are disabled
+      if (!this.results.length || this.allResultsAreDisabled) {
+        return;
+      }
+
+      // contextItems CAN be disabled, so loop to next/prev but ensure we don't land on a disabled one
+      let newIndex = this.activeIndex;
+      do {
+        newIndex = wrapIndex(newIndex, step, this.results.length);
+
+        if (newIndex === this.activeIndex) {
+          // If we've looped through all items and found no enabled ones, keep the current index
+          return;
+        }
+      } while (!this.results[newIndex].isEnabled);
+
+      this.activeIndex = newIndex;
+    },
   },
   i18n: {
     selectedContextItemsTitle: translate(
@@ -184,6 +256,7 @@ export default {
         :error="error"
         :results="results"
         @select="selectItem"
+        @keyup="handleKeyUp"
         @active-index-change="activeIndex = $event"
       />
     </gl-card>

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items.vue

@@ -83,11 +83,17 @@ export default {
       this.$emit('select', contextItem);
       this.userInitiatedSearch = false;
     },
+    handleKeyUp(e) {
+      this.$emit('keyup', e);
+    },
     setActiveIndex(index) {
       if (this.results[index]?.isEnabled) {
         this.$emit('active-index-change', index);
       }
     },
+    isActiveItem(contextItem, index) {
+      return index === this.activeIndex && contextItem.isEnabled;
+    },
   },
   i18n: {
     emptyStateMessage: translate('GlDuoChatContextItemMenu.emptyStateMessage', 'No results found'),
@@ -120,7 +126,7 @@ export default {
           :id="`dropdown-item-${index}`"
           :key="contextItem.id"
           :class="{
-            'active-command': index === activeIndex,
+            'active-command': isActiveItem(contextItem, index),
             'gl-cursor-not-allowed [&>button]:focus-within:!gl-shadow-none': !contextItem.isEnabled,
           }"
           :tabindex="!contextItem.isEnabled ? -1 : undefined"
@@ -146,6 +152,7 @@ export default {
       autofocus
       data-testid="context-menu-search-input"
       @input="$emit('update:searchQuery', $event)"
+      @keyup="handleKeyUp"
     />
   </div>
 </template>

package/src/components/experimental/duo/chat/components/duo_chat_context/utils.js

@@ -39,3 +39,14 @@ export function formatMergeRequestId(iid) {
 
   return `!${iid}`;
 }
+
+/**
+ * Calculates a new index within a range. If the new index would fall out of bounds, wraps to the start/end of the range.
+ * @param {number} currentIndex - The starting index.
+ * @param {number} step - The number of steps to move (positive or negative).
+ * @param {number} totalLength - The total number of items in the range.
+ * @returns {number} The new index.
+ */
+export function wrapIndex(currentIndex, step, totalLength) {
+  return (currentIndex + step + totalLength) % totalLength;
+}

package/src/scss/variables.scss

@@ -232,7 +232,6 @@ $focus-ring-outline: $outline-width solid var(--gl-focus-ring-outer-color);
 // Toasts
 $toast-max-width: px-to-rem(586px);
 $toast-padding-right: px-to-rem(42px);
-$toast-background-color: #303030;
 
 // Chart tooltip
 $chart-tooltip-max-width: px-to-rem(512px);

package/src/tokens/build/css/tokens.css

@@ -478,7 +478,7 @@
   --gl-feedback-strong-link-color: var(--gl-color-blue-300); /* Used for a link on a strong feedback background. */
   --gl-feedback-strong-icon-color: var(--gl-color-neutral-0); /* Used for an icon on a strong feedback background. */
   --gl-feedback-strong-text-color: var(--gl-color-neutral-0); /* Used for text on a strong feedback background. */
-  --gl-feedback-strong-background-color: var(--gl-color-neutral-950); /* Used for a background associated with strong feedback like a tooltip or toast message. */
+  --gl-feedback-strong-background-color: var(--gl-color-neutral-800); /* Used for a background associated with strong feedback like a tooltip or toast message. */
   --gl-control-indicator-color-disabled: var(--gl-color-neutral-500); /* Used for disabled checkbox and radio button state indicators. */
   --gl-control-indicator-color-selected: var(--gl-color-neutral-0); /* Used for checkbox and radio button state indicators. */
   --gl-control-border-color-selected-focus: var(--gl-color-blue-700); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
@@ -503,7 +503,6 @@
   --gl-spinner-track-color-default: var(--gl-color-neutral-100); /* Used for the static track (background) of a loading spinner. */
   --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-50); /* Used for the animated shimmer effect in a skeleton loader. */
   --gl-skeleton-loader-background-color: var(--gl-color-neutral-100); /* Used for the skeleton loader background color. */
-  --gl-popover-background-color: var(--gl-color-neutral-0); /* Used for the background color of popover. */
   --gl-link-mention-background-color-current: var(--gl-color-orange-100); /* Used for the mention link background when referencing the current user. */
   --gl-link-mention-background-color-default: var(--gl-color-blue-100); /* Used for the mention link default background. */
   --gl-link-mention-text-color-current: var(--gl-color-orange-800); /* Used for the mention link text color when referencing the current user. */

package/src/tokens/build/css/tokens.dark.css

@@ -477,8 +477,8 @@
   --gl-feedback-neutral-background-color: var(--gl-color-neutral-900); /* Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-strong-link-color: var(--gl-color-blue-700); /* Used for a link on a strong feedback background. */
   --gl-feedback-strong-icon-color: var(--gl-color-neutral-900); /* Used for an icon on a strong feedback background. */
-  --gl-feedback-strong-text-color: var(--gl-color-neutral-900); /* Used for text on a strong feedback background. */
-  --gl-feedback-strong-background-color: var(--gl-color-neutral-10); /* Used for a background associated with strong feedback like a tooltip or toast message. */
+  --gl-feedback-strong-text-color: var(--gl-color-neutral-0); /* Used for text on a strong feedback background. */
+  --gl-feedback-strong-background-color: var(--gl-color-neutral-800); /* Used for a background associated with strong feedback like a tooltip or toast message. */
   --gl-control-indicator-color-disabled: var(--gl-color-neutral-400); /* Used for disabled checkbox and radio button state indicators. */
   --gl-control-indicator-color-selected: var(--gl-color-neutral-950); /* Used for checkbox and radio button state indicators. */
   --gl-control-border-color-selected-focus: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
@@ -503,7 +503,6 @@
   --gl-spinner-track-color-default: var(--gl-color-neutral-800); /* Used for the static track (background) of a loading spinner. */
   --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-700); /* Used for the animated shimmer effect in a skeleton loader. */
   --gl-skeleton-loader-background-color: var(--gl-color-neutral-800); /* Used for the skeleton loader background color. */
-  --gl-popover-background-color: var(--gl-color-neutral-900); /* Used for the background color of popover. */
   --gl-link-mention-background-color-current: var(--gl-color-orange-800); /* Used for the mention link background when referencing the current user. */
   --gl-link-mention-background-color-default: var(--gl-color-blue-800); /* Used for the mention link default background. */
   --gl-link-mention-text-color-current: var(--gl-color-orange-100); /* Used for the mention link text color when referencing the current user. */

package/src/tokens/build/js/tokens.dark.js

@@ -643,7 +643,6 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#9dc7f1'; // Used for the men
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#f5d9a8'; // Used for the mention link text color when referencing the current user.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#064787'; // Used for the mention link default background.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#703800'; // Used for the mention link background when referencing the current user.
-export const GL_POPOVER_BACKGROUND_COLOR = '#28272d'; // Used for the background color of popover.
 export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#3a383f'; // Used for the skeleton loader background color.
 export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#4c4b51'; // Used for the animated shimmer effect in a skeleton loader.
 export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#3a383f'; // Used for the static track (background) of a loading spinner.
@@ -838,8 +837,8 @@ export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)'; // Use color.alpha.ligh
 export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)'; // Use color.alpha.light.4 instead.
 export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)'; // Use color.alpha.light.6 instead.
 export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)'; // Use color.alpha.light.8 instead.
-export const GL_FEEDBACK_STRONG_BACKGROUND_COLOR = '#fbfafd'; // Used for a background associated with strong feedback like a tooltip or toast message.
-export const GL_FEEDBACK_STRONG_TEXT_COLOR = '#28272d'; // Used for text on a strong feedback background.
+export const GL_FEEDBACK_STRONG_BACKGROUND_COLOR = '#3a383f'; // Used for a background associated with strong feedback like a tooltip or toast message.
+export const GL_FEEDBACK_STRONG_TEXT_COLOR = '#fff'; // Used for text on a strong feedback background.
 export const GL_FEEDBACK_STRONG_ICON_COLOR = '#28272d'; // Used for an icon on a strong feedback background.
 export const GL_FEEDBACK_STRONG_LINK_COLOR = '#0b5cad'; // Used for a link on a strong feedback background.
 export const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#28272d'; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.

package/src/tokens/build/js/tokens.js

@@ -643,7 +643,6 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#0b5cad'; // Used for the men
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#703800'; // Used for the mention link text color when referencing the current user.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#cbe2f9'; // Used for the mention link default background.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#f5d9a8'; // Used for the mention link background when referencing the current user.
-export const GL_POPOVER_BACKGROUND_COLOR = '#fff'; // Used for the background color of popover.
 export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#dcdcde'; // Used for the skeleton loader background color.
 export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#ececef'; // Used for the animated shimmer effect in a skeleton loader.
 export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#dcdcde'; // Used for the static track (background) of a loading spinner.
@@ -838,7 +837,7 @@ export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)'; // Use color.alpha.ligh
 export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)'; // Use color.alpha.light.4 instead.
 export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)'; // Use color.alpha.light.6 instead.
 export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)'; // Use color.alpha.light.8 instead.
-export const GL_FEEDBACK_STRONG_BACKGROUND_COLOR = '#18171d'; // Used for a background associated with strong feedback like a tooltip or toast message.
+export const GL_FEEDBACK_STRONG_BACKGROUND_COLOR = '#3a383f'; // Used for a background associated with strong feedback like a tooltip or toast message.
 export const GL_FEEDBACK_STRONG_TEXT_COLOR = '#fff'; // Used for text on a strong feedback background.
 export const GL_FEEDBACK_STRONG_ICON_COLOR = '#fff'; // Used for an icon on a strong feedback background.
 export const GL_FEEDBACK_STRONG_LINK_COLOR = '#63a6e9'; // Used for a link on a strong feedback background.

package/src/tokens/build/json/tokens.dark.json

@@ -14161,32 +14161,6 @@
       }
     }
   },
-  "popover": {
-    "background": {
-      "color": {
-        "value": "#28272d",
-        "$type": "color",
-        "comment": "Used for the background color of popover.",
-        "filePath": "src/tokens/contextual/popover.tokens.json",
-        "isSource": true,
-        "original": {
-          "value": {
-            "default": "{color.neutral.0}",
-            "dark": "{color.neutral.900}"
-          },
-          "$type": "color",
-          "comment": "Used for the background color of popover."
-        },
-        "name": "POPOVER_BACKGROUND_COLOR",
-        "attributes": {},
-        "path": [
-          "popover",
-          "background",
-          "color"
-        ]
-      }
-    }
-  },
   "skeleton-loader": {
     "background": {
       "color": {
@@ -19121,16 +19095,13 @@
     "strong": {
       "background": {
         "color": {
-          "value": "#fbfafd",
+          "value": "#3a383f",
           "$type": "color",
           "comment": "Used for a background associated with strong feedback like a tooltip or toast message.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
-            "value": {
-              "default": "{color.neutral.950}",
-              "dark": "{color.neutral.10}"
-            },
+            "value": "{color.neutral.800}",
             "$type": "color",
             "comment": "Used for a background associated with strong feedback like a tooltip or toast message."
           },
@@ -19146,16 +19117,13 @@
       },
       "text": {
         "color": {
-          "value": "#28272d",
+          "value": "#fff",
           "$type": "color",
           "comment": "Used for text on a strong feedback background.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
-            "value": {
-              "default": "{color.neutral.0}",
-              "dark": "{color.neutral.900}"
-            },
+            "value": "{color.neutral.0}",
             "$type": "color",
             "comment": "Used for text on a strong feedback background."
           },

package/src/tokens/build/json/tokens.json

@@ -14161,32 +14161,6 @@
       }
     }
   },
-  "popover": {
-    "background": {
-      "color": {
-        "value": "#fff",
-        "$type": "color",
-        "comment": "Used for the background color of popover.",
-        "filePath": "src/tokens/contextual/popover.tokens.json",
-        "isSource": true,
-        "original": {
-          "value": {
-            "default": "{color.neutral.0}",
-            "dark": "{color.neutral.900}"
-          },
-          "$type": "color",
-          "comment": "Used for the background color of popover."
-        },
-        "name": "POPOVER_BACKGROUND_COLOR",
-        "attributes": {},
-        "path": [
-          "popover",
-          "background",
-          "color"
-        ]
-      }
-    }
-  },
   "skeleton-loader": {
     "background": {
       "color": {
@@ -19121,16 +19095,13 @@
     "strong": {
       "background": {
         "color": {
-          "value": "#18171d",
+          "value": "#3a383f",
           "$type": "color",
           "comment": "Used for a background associated with strong feedback like a tooltip or toast message.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
-            "value": {
-              "default": "{color.neutral.950}",
-              "dark": "{color.neutral.10}"
-            },
+            "value": "{color.neutral.800}",
             "$type": "color",
             "comment": "Used for a background associated with strong feedback like a tooltip or toast message."
           },
@@ -19152,10 +19123,7 @@
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
-            "value": {
-              "default": "{color.neutral.0}",
-              "dark": "{color.neutral.900}"
-            },
+            "value": "{color.neutral.0}",
             "$type": "color",
             "comment": "Used for text on a strong feedback background."
           },

package/src/tokens/build/scss/_tokens.dark.scss

@@ -475,8 +475,8 @@ $gl-feedback-neutral-text-color: $gl-color-neutral-200; // Used for the text of
 $gl-feedback-neutral-background-color: $gl-color-neutral-900; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-strong-link-color: $gl-color-blue-700; // Used for a link on a strong feedback background.
 $gl-feedback-strong-icon-color: $gl-color-neutral-900; // Used for an icon on a strong feedback background.
-$gl-feedback-strong-text-color: $gl-color-neutral-900; // Used for text on a strong feedback background.
-$gl-feedback-strong-background-color: $gl-color-neutral-10; // Used for a background associated with strong feedback like a tooltip or toast message.
+$gl-feedback-strong-text-color: $gl-color-neutral-0; // Used for text on a strong feedback background.
+$gl-feedback-strong-background-color: $gl-color-neutral-800; // Used for a background associated with strong feedback like a tooltip or toast message.
 $gl-control-indicator-color-disabled: $gl-color-neutral-400; // Used for disabled checkbox and radio button state indicators.
 $gl-control-indicator-color-selected: $gl-color-neutral-950; // Used for checkbox and radio button state indicators.
 $gl-control-border-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
@@ -501,7 +501,6 @@ $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static tra
 $gl-spinner-track-color-default: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner.
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-700; // Used for the animated shimmer effect in a skeleton loader.
 $gl-skeleton-loader-background-color: $gl-color-neutral-800; // Used for the skeleton loader background color.
-$gl-popover-background-color: $gl-color-neutral-900; // Used for the background color of popover.
 $gl-link-mention-background-color-current: $gl-color-orange-800; // Used for the mention link background when referencing the current user.
 $gl-link-mention-background-color-default: $gl-color-blue-800; // Used for the mention link default background.
 $gl-link-mention-text-color-current: $gl-color-orange-100; // Used for the mention link text color when referencing the current user.

package/src/tokens/build/scss/_tokens.scss

@@ -476,7 +476,7 @@ $gl-feedback-neutral-background-color: $gl-color-neutral-50; // Used for the bac
 $gl-feedback-strong-link-color: $gl-color-blue-300; // Used for a link on a strong feedback background.
 $gl-feedback-strong-icon-color: $gl-color-neutral-0; // Used for an icon on a strong feedback background.
 $gl-feedback-strong-text-color: $gl-color-neutral-0; // Used for text on a strong feedback background.
-$gl-feedback-strong-background-color: $gl-color-neutral-950; // Used for a background associated with strong feedback like a tooltip or toast message.
+$gl-feedback-strong-background-color: $gl-color-neutral-800; // Used for a background associated with strong feedback like a tooltip or toast message.
 $gl-control-indicator-color-disabled: $gl-color-neutral-500; // Used for disabled checkbox and radio button state indicators.
 $gl-control-indicator-color-selected: $gl-color-neutral-0; // Used for checkbox and radio button state indicators.
 $gl-control-border-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
@@ -501,7 +501,6 @@ $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static tra
 $gl-spinner-track-color-default: $gl-color-neutral-100; // Used for the static track (background) of a loading spinner.
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-50; // Used for the animated shimmer effect in a skeleton loader.
 $gl-skeleton-loader-background-color: $gl-color-neutral-100; // Used for the skeleton loader background color.
-$gl-popover-background-color: $gl-color-neutral-0; // Used for the background color of popover.
 $gl-link-mention-background-color-current: $gl-color-orange-100; // Used for the mention link background when referencing the current user.
 $gl-link-mention-background-color-default: $gl-color-blue-100; // Used for the mention link default background.
 $gl-link-mention-text-color-current: $gl-color-orange-800; // Used for the mention link text color when referencing the current user.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -643,7 +643,6 @@ $gl-link-mention-text-color-default: var(--gl-link-mention-text-color-default);
 $gl-link-mention-text-color-current: var(--gl-link-mention-text-color-current);
 $gl-link-mention-background-color-default: var(--gl-link-mention-background-color-default);
 $gl-link-mention-background-color-current: var(--gl-link-mention-background-color-current);
-$gl-popover-background-color: var(--gl-popover-background-color);
 $gl-skeleton-loader-background-color: var(--gl-skeleton-loader-background-color);
 $gl-skeleton-loader-shimmer-color: var(--gl-skeleton-loader-shimmer-color);
 $gl-spinner-track-color-default: var(--gl-spinner-track-color-default);

package/src/tokens/feedback.tokens.json

@@ -3,20 +3,14 @@
     "strong": {
       "background": {
         "color": {
-          "$value": {
-            "default": "{color.neutral.950}",
-            "dark": "{color.neutral.10}"
-          },
+          "$value": "{color.neutral.800}",
           "$type": "color",
           "$description": "Used for a background associated with strong feedback like a tooltip or toast message."
         }
       },
       "text": {
         "color": {
-          "$value": {
-            "default": "{color.neutral.0}",
-            "dark": "{color.neutral.900}"
-          },
+          "$value": "{color.neutral.0}",
           "$type": "color",
           "$description": "Used for text on a strong feedback background."
         }

package/src/tokens/contextual/popover.tokens.json

@@ -1,14 +0,0 @@
-{
-  "popover": {
-    "background": {
-      "color": {
-        "$value": {
-          "default": "{color.neutral.0}",
-          "dark": "{color.neutral.900}"
-        },
-        "$type": "color",
-        "$description": "Used for the background color of popover."
-      }
-    }
-  }
-}