@gitlab/ui 91.15.0 → 92.1.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

@@ -183,6 +183,11 @@ export default {
           }
 
           this.selectedCategory = null;
+
+          /**
+           * Emitted when the parent GlDuoChat component should refocus on the main prompt input
+           */
+          this.$emit('focus-prompt');
           break;
         default:
           break;

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

@@ -88,6 +88,7 @@ export default {
     <button
       class="gl-flex gl-w-full gl-items-center gl-border-0 gl-bg-transparent gl-p-0 gl-text-left gl-text-xs gl-lowercase gl-text-gray-500"
       data-testid="chat-context-selections-title"
+      type="button"
       @click="toggleCollapse"
     >
       <gl-icon :name="collapseIconName" data-testid="chat-context-collapse-icon" /> {{ title }}

package/src/components/experimental/duo/chat/constants.js

@@ -1,6 +1,7 @@
 export const CHAT_RESET_MESSAGE = '/reset';
 export const CHAT_CLEAN_MESSAGE = '/clean';
 export const CHAT_CLEAR_MESSAGE = '/clear';
+export const CHAT_INCLUDE_MESSAGE = '/include';
 
 export const LOADING_TRANSITION_DURATION = 7500;
 

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -15,7 +15,13 @@ import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/
 import GlDuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
 import GlDuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 import GlDuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation.vue';
-import { CHAT_CLEAN_MESSAGE, CHAT_RESET_MESSAGE, CHAT_CLEAR_MESSAGE } from './constants';
+import {
+  CHAT_CLEAN_MESSAGE,
+  CHAT_RESET_MESSAGE,
+  CHAT_CLEAR_MESSAGE,
+  CHAT_INCLUDE_MESSAGE,
+} from './constants';
+import { INCLUDE_SLASH_COMMAND } from './mock_data';
 
 export const i18n = {
   CHAT_DEFAULT_TITLE: 'GitLab Duo Chat',
@@ -214,6 +220,8 @@ export default {
       activeCommandIndex: 0,
       displaySubmitButton: true,
       compositionJustEnded: false,
+      contextItemsMenuIsOpen: false,
+      contextItemMenuRef: null,
     };
   },
   computed: {
@@ -241,6 +249,9 @@ export default {
     lastMessage() {
       return this.messages?.[this.messages.length - 1];
     },
+    caseInsensitivePrompt() {
+      return this.prompt.toLowerCase().trim();
+    },
     resetDisabled() {
       if (this.isLoading || !this.hasMessages) {
         return true;
@@ -257,20 +268,36 @@ export default {
       );
     },
     filteredSlashCommands() {
-      const caseInsensitivePrompt = this.prompt.toLowerCase();
-      return this.slashCommands.filter((c) =>
-        c.name.toLowerCase().startsWith(caseInsensitivePrompt)
-      );
+      return this.slashCommands
+        .filter((c) => c.name.toLowerCase().startsWith(this.caseInsensitivePrompt))
+        .filter((c) => {
+          if (c.name === CHAT_INCLUDE_MESSAGE) {
+            return this.hasContextItemSelectionMenu;
+          }
+          return true;
+        });
     },
     shouldShowSlashCommands() {
-      if (!this.withSlashCommands) return false;
-      const caseInsensitivePrompt = this.prompt.toLowerCase();
-      const startsWithSlash = caseInsensitivePrompt.startsWith('/');
+      if (!this.withSlashCommands || this.contextItemsMenuIsOpen) return false;
+      const startsWithSlash = this.caseInsensitivePrompt.startsWith('/');
       const startsWithSlashCommand = this.slashCommands.some((c) =>
-        caseInsensitivePrompt.startsWith(c.name)
+        this.caseInsensitivePrompt.startsWith(c.name)
       );
       return startsWithSlash && this.filteredSlashCommands.length && !startsWithSlashCommand;
     },
+    shouldShowContextItemSelectionMenu() {
+      if (!this.hasContextItemSelectionMenu) {
+        return false;
+      }
+
+      const isSlash = this.caseInsensitivePrompt === '/';
+      if (!this.caseInsensitivePrompt || isSlash) {
+        // if user has removed entire command (or whole command except for '/') we should close context item menu and allow slash command menu to show again
+        return false;
+      }
+
+      return INCLUDE_SLASH_COMMAND.name.startsWith(this.caseInsensitivePrompt);
+    },
     inputPlaceholder() {
       if (this.chatPromptPlaceholder) {
         return this.chatPromptPlaceholder;
@@ -280,6 +307,9 @@ export default {
         ? i18n.CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS
         : i18n.CHAT_PROMPT_PLACEHOLDER_DEFAULT;
     },
+    hasContextItemSelectionMenu() {
+      return Boolean(this.contextItemMenuRef);
+    },
   },
   watch: {
     isLoading(newVal) {
@@ -322,28 +352,42 @@ export default {
       this.setPromptAndFocus();
     },
     sendChatPrompt() {
-      if (!this.displaySubmitButton) {
+      if (!this.displaySubmitButton || this.contextItemsMenuIsOpen) {
         return;
       }
       if (this.prompt) {
-        if (this.prompt === CHAT_RESET_MESSAGE && this.resetDisabled) {
+        if (this.caseInsensitivePrompt === CHAT_RESET_MESSAGE && this.resetDisabled) {
+          return;
+        }
+
+        if (
+          this.caseInsensitivePrompt.startsWith(CHAT_INCLUDE_MESSAGE) &&
+          this.hasContextItemSelectionMenu
+        ) {
+          this.contextItemsMenuIsOpen = true;
           return;
         }
+
+        if (
+          ![CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE, CHAT_CLEAR_MESSAGE].includes(
+            this.caseInsensitivePrompt
+          )
+        ) {
+          this.displaySubmitButton = false;
+        }
+
         /**
          * Emitted when a new user prompt should be sent out.
          *
          * @param {String} prompt The user prompt to send.
          */
-
-        if (![CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE, CHAT_CLEAR_MESSAGE].includes(this.prompt)) {
-          this.displaySubmitButton = false;
-        }
         this.$emit('send-chat-prompt', this.prompt.trim());
 
         this.setPromptAndFocus();
       }
     },
     sendPredefinedPrompt(prompt) {
+      this.contextItemsMenuIsOpen = false;
       this.prompt = prompt;
       this.sendChatPrompt();
     },
@@ -379,6 +423,18 @@ export default {
     onInputKeyup(e) {
       const { key } = e;
 
+      if (this.contextItemsMenuIsOpen) {
+        if (!this.shouldShowContextItemSelectionMenu) {
+          this.contextItemsMenuIsOpen = false;
+        }
+        this.contextItemMenuRef?.handleKeyUp(e);
+        return;
+      }
+      if (this.caseInsensitivePrompt === INCLUDE_SLASH_COMMAND.name) {
+        this.contextItemsMenuIsOpen = true;
+        return;
+      }
+
       if (this.shouldShowSlashCommands) {
         e.preventDefault();
 
@@ -426,6 +482,10 @@ export default {
         this.sendChatPrompt();
       } else {
         this.setPromptAndFocus(`${command.name} `);
+
+        if (command.name === CHAT_INCLUDE_MESSAGE && this.hasContextItemSelectionMenu) {
+          this.contextItemsMenuIsOpen = true;
+        }
       }
     },
     onInsertCodeSnippet(e) {
@@ -435,6 +495,13 @@ export default {
        */
       this.$emit('insert-code-snippet', e);
     },
+    closeContextItemsMenuOpen() {
+      this.contextItemsMenuIsOpen = false;
+      this.setPromptAndFocus();
+    },
+    setContextItemsMenuRef(ref) {
+      this.contextItemMenuRef = ref;
+    },
   },
   i18n,
   emptySvg,
@@ -561,6 +628,19 @@ export default {
       :class="{ 'duo-chat-drawer-body-scrim-on-footer': !scrolledToBottom }"
     >
       <gl-form data-testid="chat-prompt-form" @submit.stop.prevent="sendChatPrompt">
+        <div class="gl-relative gl-max-w-full">
+          <!--
+            @slot For integrating `<gl-context-items-menu>` component if pinned-context should be available. The following scopedSlot properties are provided: `isOpen`, `onClose`, `setRef`, `focusPrompt`, which should be passed to the `<gl-context-items-menu>` component when rendering, e.g. `<template #context-items-menu="{ isOpen, onClose, setRef, focusPrompt }">` `<gl-duo-chat-context-item-menu :ref="setRef" :open="isOpen" @close="onClose" @focus-prompt="focusPrompt" ...`
+          -->
+          <slot
+            name="context-items-menu"
+            :is-open="contextItemsMenuIsOpen"
+            :on-close="closeContextItemsMenuOpen"
+            :set-ref="setContextItemsMenuRef"
+            :focus-prompt="focusChatInput"
+          ></slot>
+        </div>
+
         <gl-form-input-group>
           <div
             class="duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-rounded-base gl-bg-white gl-align-top gl-shadow-inner-1-gray-400"

package/src/components/experimental/duo/chat/mock_data.js

@@ -4,6 +4,7 @@ import {
   MESSAGE_MODEL_ROLES,
   CHAT_RESET_MESSAGE,
   CHAT_CLEAN_MESSAGE,
+  CHAT_INCLUDE_MESSAGE,
 } from './constants';
 import { getMockContextItems } from './components/duo_chat_context/mock_context_data';
 
@@ -170,3 +171,8 @@ export const SLASH_COMMANDS = [
     description: 'Explain the selected snippet.',
   },
 ];
+
+export const INCLUDE_SLASH_COMMAND = {
+  name: CHAT_INCLUDE_MESSAGE,
+  description: 'Include additional context in the conversation.',
+};

package/src/index.js

@@ -100,6 +100,7 @@ export { default as GlAccordionItem } from './components/base/accordion/accordio
 export { default as GlExperimentBadge } from './components/experimental/experiment_badge/experiment_badge.vue';
 export { default as GlDuoUserFeedback } from './components/experimental/duo/user_feedback/user_feedback.vue';
 export { default as GlDuoChat } from './components/experimental/duo/chat/duo_chat.vue';
+export { default as GlDuoChatContextItemMenu } from './components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue';
 
 // Utilities
 export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number.vue';

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."
         }