@gitlab/ui 87.6.0 → 87.7.0

package/dist/tokens/scss/_tokens.dark.scss

@@ -510,16 +510,21 @@ $gl-icon-color-strong: $gl-color-neutral-10; // Used for an icon with the highes
 $gl-icon-color-subtle: $gl-color-neutral-300; // Used for a static or decorational icon. Can be paired with subtle text.
 $gl-icon-color-default: $gl-color-neutral-100; // Used for the default icon color. Can be paired with default text.
 $gl-focus-ring-outer-color: $gl-color-blue-400; // Used for the outer color portion of the focus ring.
-$gl-feedback-danger-icon-color: $gl-color-red-300; // Used for an icon associated with danger or critical feedback.
-$gl-feedback-danger-background-color: $gl-color-red-900; // Used for a background associated with danger or critical feedback.
-$gl-feedback-warning-icon-color: $gl-color-orange-300; // Used for an icon associated with warning feedback or confidential content.
-$gl-feedback-warning-background-color: $gl-color-orange-900; // Used for a background associated with warning feedback or to let a user know about confidential content.
-$gl-feedback-success-icon-color: $gl-color-green-300; // Used for an icon associated with successful feedback or a new section.
-$gl-feedback-success-background-color: $gl-color-green-900; // Used for a background associated with successful feedback or a new section resulting from a user action.
-$gl-feedback-info-icon-color: $gl-color-blue-300; // Used for an icon associated with informational feedback.
-$gl-feedback-info-background-color: $gl-color-blue-900; // Used for a background associated with informational feedback or a highlighted section resulting from a user action.
-$gl-feedback-neutral-icon-color: $gl-color-neutral-300; // Used for an icon associated with a neutral feedback section.
-$gl-feedback-neutral-background-color: $gl-color-neutral-900; // Used for a background associated with neutral feedback.
+$gl-feedback-danger-icon-color: $gl-color-red-300; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+$gl-feedback-danger-text-color: $gl-color-red-200; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+$gl-feedback-danger-background-color: $gl-color-red-900; // Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+$gl-feedback-warning-icon-color: $gl-color-orange-300; // Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.
+$gl-feedback-warning-text-color: $gl-color-orange-200; // Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.
+$gl-feedback-warning-background-color: $gl-color-orange-900; // Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.
+$gl-feedback-success-icon-color: $gl-color-green-300; // Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.
+$gl-feedback-success-text-color: $gl-color-green-200; // Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.
+$gl-feedback-success-background-color: $gl-color-green-900; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.
+$gl-feedback-info-icon-color: $gl-color-blue-300; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-info-text-color: $gl-color-blue-200; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-info-background-color: $gl-color-blue-900; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-neutral-icon-color: $gl-color-neutral-300; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
+$gl-feedback-neutral-text-color: $gl-color-neutral-200; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
+$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-link-color-strong: $gl-color-blue-700; // Used for a link on a strong feedback background.
 $gl-feedback-icon-color-strong: $gl-color-neutral-900; // Used for an icon on a strong feedback background.
 $gl-feedback-text-color-strong: $gl-color-neutral-900; // Used for text on a strong feedback background.

package/dist/tokens/scss/_tokens.scss

@@ -510,16 +510,21 @@ $gl-icon-color-strong: $gl-color-neutral-900; // Used for an icon with the highe
 $gl-icon-color-subtle: $gl-color-neutral-500; // Used for a static or decorational icon. Can be paired with subtle text.
 $gl-icon-color-default: $gl-color-neutral-700; // Used for the default icon color. Can be paired with default text.
 $gl-focus-ring-outer-color: $gl-color-blue-500; // Used for the outer color portion of the focus ring.
-$gl-feedback-danger-icon-color: $gl-color-red-600; // Used for an icon associated with danger or critical feedback.
-$gl-feedback-danger-background-color: $gl-color-red-50; // Used for a background associated with danger or critical feedback.
-$gl-feedback-warning-icon-color: $gl-color-orange-600; // Used for an icon associated with warning feedback or confidential content.
-$gl-feedback-warning-background-color: $gl-color-orange-50; // Used for a background associated with warning feedback or to let a user know about confidential content.
-$gl-feedback-success-icon-color: $gl-color-green-600; // Used for an icon associated with successful feedback or a new section.
-$gl-feedback-success-background-color: $gl-color-green-50; // Used for a background associated with successful feedback or a new section resulting from a user action.
-$gl-feedback-info-icon-color: $gl-color-blue-600; // Used for an icon associated with informational feedback.
-$gl-feedback-info-background-color: $gl-color-blue-50; // Used for a background associated with informational feedback or a highlighted section resulting from a user action.
-$gl-feedback-neutral-icon-color: $gl-color-neutral-600; // Used for an icon associated with a neutral feedback section.
-$gl-feedback-neutral-background-color: $gl-color-neutral-50; // Used for a background associated with neutral feedback.
+$gl-feedback-danger-icon-color: $gl-color-red-600; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+$gl-feedback-danger-text-color: $gl-color-red-700; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+$gl-feedback-danger-background-color: $gl-color-red-50; // Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+$gl-feedback-warning-icon-color: $gl-color-orange-600; // Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.
+$gl-feedback-warning-text-color: $gl-color-orange-700; // Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.
+$gl-feedback-warning-background-color: $gl-color-orange-50; // Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.
+$gl-feedback-success-icon-color: $gl-color-green-600; // Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.
+$gl-feedback-success-text-color: $gl-color-green-700; // Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.
+$gl-feedback-success-background-color: $gl-color-green-50; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.
+$gl-feedback-info-icon-color: $gl-color-blue-600; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-info-text-color: $gl-color-blue-700; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-info-background-color: $gl-color-blue-50; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-neutral-icon-color: $gl-color-neutral-600; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
+$gl-feedback-neutral-text-color: $gl-color-neutral-700; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
+$gl-feedback-neutral-background-color: $gl-color-neutral-50; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-link-color-strong: $gl-color-blue-300; // Used for a link on a strong feedback background.
 $gl-feedback-icon-color-strong: $gl-color-neutral-0; // Used for an icon on a strong feedback background.
 $gl-feedback-text-color-strong: $gl-color-neutral-0; // Used for text on a strong feedback background.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -496,14 +496,19 @@ $gl-feedback-text-color-strong: var(--gl-feedback-text-color-strong);
 $gl-feedback-icon-color-strong: var(--gl-feedback-icon-color-strong);
 $gl-feedback-link-color-strong: var(--gl-feedback-link-color-strong);
 $gl-feedback-neutral-background-color: var(--gl-feedback-neutral-background-color);
+$gl-feedback-neutral-text-color: var(--gl-feedback-neutral-text-color);
 $gl-feedback-neutral-icon-color: var(--gl-feedback-neutral-icon-color);
 $gl-feedback-info-background-color: var(--gl-feedback-info-background-color);
+$gl-feedback-info-text-color: var(--gl-feedback-info-text-color);
 $gl-feedback-info-icon-color: var(--gl-feedback-info-icon-color);
 $gl-feedback-success-background-color: var(--gl-feedback-success-background-color);
+$gl-feedback-success-text-color: var(--gl-feedback-success-text-color);
 $gl-feedback-success-icon-color: var(--gl-feedback-success-icon-color);
 $gl-feedback-warning-background-color: var(--gl-feedback-warning-background-color);
+$gl-feedback-warning-text-color: var(--gl-feedback-warning-text-color);
 $gl-feedback-warning-icon-color: var(--gl-feedback-warning-icon-color);
 $gl-feedback-danger-background-color: var(--gl-feedback-danger-background-color);
+$gl-feedback-danger-text-color: var(--gl-feedback-danger-text-color);
 $gl-feedback-danger-icon-color: var(--gl-feedback-danger-icon-color);
 $gl-focus-ring-outer-color: var(--gl-focus-ring-outer-color);
 $gl-focus-ring-inner-color: var(--gl-focus-ring-inner-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "87.6.0",
+  "version": "87.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -3,6 +3,7 @@
 import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';
 import { stopEvent, filterVisible } from '../../../../utils/utils';
+import { glDropdownConfig } from '../../../../config';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
@@ -235,7 +236,9 @@ export default {
     improvedHideHeuristics: {
       type: Boolean,
       required: false,
-      default: false,
+      default() {
+        return Boolean(glDropdownConfig.useImprovedHideHeuristics);
+      },
     },
   },
   data() {

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -4,6 +4,7 @@ import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';
 import isNil from 'lodash/isNil';
 import { stopEvent } from '../../../../utils/utils';
+import { glDropdownConfig } from '../../../../config';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
@@ -356,7 +357,9 @@ export default {
     improvedHideHeuristics: {
       type: Boolean,
       required: false,
-      default: false,
+      default() {
+        return Boolean(glDropdownConfig.useImprovedHideHeuristics);
+      },
     },
   },
   data() {

package/src/config.js

@@ -39,6 +39,8 @@ try {
 
 export const i18n = translationKeys;
 
+export const glDropdownConfig = {};
+
 let configured = false;
 
 /**
@@ -47,9 +49,9 @@ let configured = false;
  * @typedef {object} GitLabUIConfiguration
  * @template TValue=string
  * @property {undefined | Object} translations Generic translations for component labels to fall back to.
- * @property {boolean} disableTranslations Whether translation capabilities should be disabled. Suppresses the warning about missing translations.
+ * @property {boolean} [useImprovedHideHeuristics] Temporary flag to enable improved hide heuristics for dropdowns.
  */
-const setConfigs = ({ translations } = {}) => {
+const setConfigs = ({ translations, useImprovedHideHeuristics } = {}) => {
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
       throw new Error('GitLab UI can only be configured once!');
@@ -87,6 +89,23 @@ const setConfigs = ({ translations } = {}) => {
 
     Object.assign(i18n, translations);
   }
+
+  // Temporary flag to enable the improved hide heuristics feature.
+  // This flag allows the feature to be opt-in during the rollout phase,
+  // giving us the flexibility to test and validate its impact on user experience.
+
+  // The global variable `useImprovedHideHeuristics` is set to a boolean value
+  // to indicate whether the improved hide heuristics should be used.
+
+  // Future Plan:
+  // Once the improved hide heuristics feature is validated and stable,
+  // we will remove this temporary flag and make the feature the default behavior.
+  // At that point, there will be no need for opt-in or opt-out mechanisms for this feature.
+  if (typeof useImprovedHideHeuristics === 'boolean') {
+    Object.assign(glDropdownConfig, {
+      useImprovedHideHeuristics,
+    });
+  }
 };
 
 export default setConfigs;

package/src/index.js

@@ -39,6 +39,7 @@ export { default as GlDashboardSkeleton } from './components/regions/dashboard_s
 export { default as GlEmptyState } from './components/regions/empty_state/empty_state.vue';
 export { default as GlForm } from './components/base/form/form.vue';
 export { default as GlFormCharacterCount } from './components/base/form/form_character_count/form_character_count.vue';
+export { default as GlFormDate } from './components/base/form/form_date/form_date.vue';
 export { default as GlFormInput } from './components/base/form/form_input/form_input.vue';
 export { default as GlFormInputGroup } from './components/base/form/form_input_group/form_input_group.vue';
 export { default as GlFormRadio } from './components/base/form/form_radio/form_radio.vue';

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

@@ -512,16 +512,21 @@
   --gl-icon-color-subtle: var(--gl-color-neutral-500); /* Used for a static or decorational icon. Can be paired with subtle text. */
   --gl-icon-color-default: var(--gl-color-neutral-700); /* Used for the default icon color. Can be paired with default text. */
   --gl-focus-ring-outer-color: var(--gl-color-blue-500); /* Used for the outer color portion of the focus ring. */
-  --gl-feedback-danger-icon-color: var(--gl-color-red-600); /* Used for an icon associated with danger or critical feedback. */
-  --gl-feedback-danger-background-color: var(--gl-color-red-50); /* Used for a background associated with danger or critical feedback. */
-  --gl-feedback-warning-icon-color: var(--gl-color-orange-600); /* Used for an icon associated with warning feedback or confidential content. */
-  --gl-feedback-warning-background-color: var(--gl-color-orange-50); /* Used for a background associated with warning feedback or to let a user know about confidential content. */
-  --gl-feedback-success-icon-color: var(--gl-color-green-600); /* Used for an icon associated with successful feedback or a new section. */
-  --gl-feedback-success-background-color: var(--gl-color-green-50); /* Used for a background associated with successful feedback or a new section resulting from a user action. */
-  --gl-feedback-info-icon-color: var(--gl-color-blue-600); /* Used for an icon associated with informational feedback. */
-  --gl-feedback-info-background-color: var(--gl-color-blue-50); /* Used for a background associated with informational feedback or a highlighted section resulting from a user action. */
-  --gl-feedback-neutral-icon-color: var(--gl-color-neutral-600); /* Used for an icon associated with a neutral feedback section. */
-  --gl-feedback-neutral-background-color: var(--gl-color-neutral-50); /* Used for a background associated with neutral feedback. */
+  --gl-feedback-danger-icon-color: var(--gl-color-red-600); /* Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
+  --gl-feedback-danger-text-color: var(--gl-color-red-700); /* Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
+  --gl-feedback-danger-background-color: var(--gl-color-red-50); /* Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
+  --gl-feedback-warning-icon-color: var(--gl-color-orange-600); /* Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information. */
+  --gl-feedback-warning-text-color: var(--gl-color-orange-700); /* Used for the text of a warning feedback item when notifying about a potential issue or sensitive information. */
+  --gl-feedback-warning-background-color: var(--gl-color-orange-50); /* Used for the background of a warning feedback item when notifying about a potential issue or sensitive information. */
+  --gl-feedback-success-icon-color: var(--gl-color-green-600); /* Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action. */
+  --gl-feedback-success-text-color: var(--gl-color-green-700); /* Used for the text of a success feedback item when confirming the successful completion of a user-initiated action. */
+  --gl-feedback-success-background-color: var(--gl-color-green-50); /* Used for the background of a success feedback item when confirming the successful completion of a user-initiated action. */
+  --gl-feedback-info-icon-color: var(--gl-color-blue-600); /* Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
+  --gl-feedback-info-text-color: var(--gl-color-blue-700); /* Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
+  --gl-feedback-info-background-color: var(--gl-color-blue-50); /* Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
+  --gl-feedback-neutral-icon-color: var(--gl-color-neutral-600); /* Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */
+  --gl-feedback-neutral-text-color: var(--gl-color-neutral-700); /* Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. */
+  --gl-feedback-neutral-background-color: var(--gl-color-neutral-50); /* Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-link-color-strong: var(--gl-color-blue-300); /* Used for a link on a strong feedback background. */
   --gl-feedback-icon-color-strong: var(--gl-color-neutral-0); /* Used for an icon on a strong feedback background. */
   --gl-feedback-text-color-strong: var(--gl-color-neutral-0); /* Used for text on a strong feedback background. */

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

@@ -512,16 +512,21 @@
   --gl-icon-color-subtle: var(--gl-color-neutral-300); /* Used for a static or decorational icon. Can be paired with subtle text. */
   --gl-icon-color-default: var(--gl-color-neutral-100); /* Used for the default icon color. Can be paired with default text. */
   --gl-focus-ring-outer-color: var(--gl-color-blue-400); /* Used for the outer color portion of the focus ring. */
-  --gl-feedback-danger-icon-color: var(--gl-color-red-300); /* Used for an icon associated with danger or critical feedback. */
-  --gl-feedback-danger-background-color: var(--gl-color-red-900); /* Used for a background associated with danger or critical feedback. */
-  --gl-feedback-warning-icon-color: var(--gl-color-orange-300); /* Used for an icon associated with warning feedback or confidential content. */
-  --gl-feedback-warning-background-color: var(--gl-color-orange-900); /* Used for a background associated with warning feedback or to let a user know about confidential content. */
-  --gl-feedback-success-icon-color: var(--gl-color-green-300); /* Used for an icon associated with successful feedback or a new section. */
-  --gl-feedback-success-background-color: var(--gl-color-green-900); /* Used for a background associated with successful feedback or a new section resulting from a user action. */
-  --gl-feedback-info-icon-color: var(--gl-color-blue-300); /* Used for an icon associated with informational feedback. */
-  --gl-feedback-info-background-color: var(--gl-color-blue-900); /* Used for a background associated with informational feedback or a highlighted section resulting from a user action. */
-  --gl-feedback-neutral-icon-color: var(--gl-color-neutral-300); /* Used for an icon associated with a neutral feedback section. */
-  --gl-feedback-neutral-background-color: var(--gl-color-neutral-900); /* Used for a background associated with neutral feedback. */
+  --gl-feedback-danger-icon-color: var(--gl-color-red-300); /* Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
+  --gl-feedback-danger-text-color: var(--gl-color-red-200); /* Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
+  --gl-feedback-danger-background-color: var(--gl-color-red-900); /* Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
+  --gl-feedback-warning-icon-color: var(--gl-color-orange-300); /* Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information. */
+  --gl-feedback-warning-text-color: var(--gl-color-orange-200); /* Used for the text of a warning feedback item when notifying about a potential issue or sensitive information. */
+  --gl-feedback-warning-background-color: var(--gl-color-orange-900); /* Used for the background of a warning feedback item when notifying about a potential issue or sensitive information. */
+  --gl-feedback-success-icon-color: var(--gl-color-green-300); /* Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action. */
+  --gl-feedback-success-text-color: var(--gl-color-green-200); /* Used for the text of a success feedback item when confirming the successful completion of a user-initiated action. */
+  --gl-feedback-success-background-color: var(--gl-color-green-900); /* Used for the background of a success feedback item when confirming the successful completion of a user-initiated action. */
+  --gl-feedback-info-icon-color: var(--gl-color-blue-300); /* Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
+  --gl-feedback-info-text-color: var(--gl-color-blue-200); /* Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
+  --gl-feedback-info-background-color: var(--gl-color-blue-900); /* Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
+  --gl-feedback-neutral-icon-color: var(--gl-color-neutral-300); /* Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */
+  --gl-feedback-neutral-text-color: var(--gl-color-neutral-200); /* Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. */
+  --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-link-color-strong: var(--gl-color-blue-700); /* Used for a link on a strong feedback background. */
   --gl-feedback-icon-color-strong: var(--gl-color-neutral-900); /* Used for an icon on a strong feedback background. */
   --gl-feedback-text-color-strong: var(--gl-color-neutral-900); /* Used for text on a strong feedback background. */

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

@@ -495,16 +495,21 @@ export const GL_FEEDBACK_BACKGROUND_COLOR_STRONG = '#fbfafd'; // Used for a back
 export const GL_FEEDBACK_TEXT_COLOR_STRONG = '#28272d'; // Used for text on a strong feedback background.
 export const GL_FEEDBACK_ICON_COLOR_STRONG = '#28272d'; // Used for an icon on a strong feedback background.
 export const GL_FEEDBACK_LINK_COLOR_STRONG = '#0b5cad'; // Used for a link on a strong feedback background.
-export const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#28272d'; // Used for a background associated with neutral feedback.
-export const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#a4a3a8'; // Used for an icon associated with a neutral feedback section.
-export const GL_FEEDBACK_INFO_BACKGROUND_COLOR = '#033464'; // Used for a background associated with informational feedback or a highlighted section resulting from a user action.
-export const GL_FEEDBACK_INFO_ICON_COLOR = '#63a6e9'; // Used for an icon associated with informational feedback.
-export const GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR = '#0a4020'; // Used for a background associated with successful feedback or a new section resulting from a user action.
-export const GL_FEEDBACK_SUCCESS_ICON_COLOR = '#52b87a'; // Used for an icon associated with successful feedback or a new section.
-export const GL_FEEDBACK_WARNING_BACKGROUND_COLOR = '#5c2900'; // Used for a background associated with warning feedback or to let a user know about confidential content.
-export const GL_FEEDBACK_WARNING_ICON_COLOR = '#d99530'; // Used for an icon associated with warning feedback or confidential content.
-export const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#660e00'; // Used for a background associated with danger or critical feedback.
-export const GL_FEEDBACK_DANGER_ICON_COLOR = '#f57f6c'; // Used for an icon associated with danger or critical feedback.
+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.
+export const GL_FEEDBACK_NEUTRAL_TEXT_COLOR = '#bfbfc3'; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
+export const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#a4a3a8'; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
+export const GL_FEEDBACK_INFO_BACKGROUND_COLOR = '#033464'; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+export const GL_FEEDBACK_INFO_TEXT_COLOR = '#9dc7f1'; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+export const GL_FEEDBACK_INFO_ICON_COLOR = '#63a6e9'; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+export const GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR = '#0a4020'; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.
+export const GL_FEEDBACK_SUCCESS_TEXT_COLOR = '#91d4a8'; // Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.
+export const GL_FEEDBACK_SUCCESS_ICON_COLOR = '#52b87a'; // Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.
+export const GL_FEEDBACK_WARNING_BACKGROUND_COLOR = '#5c2900'; // Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.
+export const GL_FEEDBACK_WARNING_TEXT_COLOR = '#e9be74'; // Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.
+export const GL_FEEDBACK_WARNING_ICON_COLOR = '#d99530'; // Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.
+export const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#660e00'; // Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+export const GL_FEEDBACK_DANGER_TEXT_COLOR = '#fcb5aa'; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+export const GL_FEEDBACK_DANGER_ICON_COLOR = '#f57f6c'; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
 export const GL_FOCUS_RING_OUTER_COLOR = '#428fdc'; // Used for the outer color portion of the focus ring.
 export const GL_FOCUS_RING_INNER_COLOR = '#18171d'; // Used for the inner neutral portion of the focus ring.
 export const GL_ICON_COLOR_DEFAULT = '#dcdcde'; // Used for the default icon color. Can be paired with default text.

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

@@ -495,16 +495,21 @@ export const GL_FEEDBACK_BACKGROUND_COLOR_STRONG = '#18171d'; // Used for a back
 export const GL_FEEDBACK_TEXT_COLOR_STRONG = '#fff'; // Used for text on a strong feedback background.
 export const GL_FEEDBACK_ICON_COLOR_STRONG = '#fff'; // Used for an icon on a strong feedback background.
 export const GL_FEEDBACK_LINK_COLOR_STRONG = '#63a6e9'; // Used for a link on a strong feedback background.
-export const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#ececef'; // Used for a background associated with neutral feedback.
-export const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#626168'; // Used for an icon associated with a neutral feedback section.
-export const GL_FEEDBACK_INFO_BACKGROUND_COLOR = '#e9f3fc'; // Used for a background associated with informational feedback or a highlighted section resulting from a user action.
-export const GL_FEEDBACK_INFO_ICON_COLOR = '#1068bf'; // Used for an icon associated with informational feedback.
-export const GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR = '#ecf4ee'; // Used for a background associated with successful feedback or a new section resulting from a user action.
-export const GL_FEEDBACK_SUCCESS_ICON_COLOR = '#217645'; // Used for an icon associated with successful feedback or a new section.
-export const GL_FEEDBACK_WARNING_BACKGROUND_COLOR = '#fdf1dd'; // Used for a background associated with warning feedback or to let a user know about confidential content.
-export const GL_FEEDBACK_WARNING_ICON_COLOR = '#9e5400'; // Used for an icon associated with warning feedback or confidential content.
-export const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#fcf1ef'; // Used for a background associated with danger or critical feedback.
-export const GL_FEEDBACK_DANGER_ICON_COLOR = '#c91c00'; // Used for an icon associated with danger or critical feedback.
+export const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#ececef'; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
+export const GL_FEEDBACK_NEUTRAL_TEXT_COLOR = '#4c4b51'; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
+export const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#626168'; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
+export const GL_FEEDBACK_INFO_BACKGROUND_COLOR = '#e9f3fc'; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+export const GL_FEEDBACK_INFO_TEXT_COLOR = '#0b5cad'; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+export const GL_FEEDBACK_INFO_ICON_COLOR = '#1068bf'; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+export const GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR = '#ecf4ee'; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.
+export const GL_FEEDBACK_SUCCESS_TEXT_COLOR = '#24663b'; // Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.
+export const GL_FEEDBACK_SUCCESS_ICON_COLOR = '#217645'; // Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.
+export const GL_FEEDBACK_WARNING_BACKGROUND_COLOR = '#fdf1dd'; // Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.
+export const GL_FEEDBACK_WARNING_TEXT_COLOR = '#8f4700'; // Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.
+export const GL_FEEDBACK_WARNING_ICON_COLOR = '#9e5400'; // Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.
+export const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#fcf1ef'; // Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+export const GL_FEEDBACK_DANGER_TEXT_COLOR = '#ae1800'; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+export const GL_FEEDBACK_DANGER_ICON_COLOR = '#c91c00'; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
 export const GL_FOCUS_RING_OUTER_COLOR = '#1f75cb'; // Used for the outer color portion of the focus ring.
 export const GL_FOCUS_RING_INNER_COLOR = '#fff'; // Used for the inner neutral portion of the focus ring.
 export const GL_ICON_COLOR_DEFAULT = '#4c4b51'; // Used for the default icon color. Can be paired with default text.