.gitattributes

+src/tokens/build/** gitlab-generated

CHANGELOG.md

+## [87.6.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v87.6.0...v87.6.1) (2024-08-01)
+
+
+### Bug Fixes
+
+* **GlFormDate:** Add missing export ([314b172](https://gitlab.com/gitlab-org/gitlab-ui/commit/314b172513730e3c59a48e319a1f49f64c3eb5ef))
+
 # [87.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v87.5.1...v87.6.0) (2024-07-31)
 
 

package.json

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

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';

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. */

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. */

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.

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.

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

@@ -10990,7 +10990,7 @@
         "color": {
           "value": "#28272d",
           "$type": "color",
-          "comment": "Used for a background associated with neutral feedback.",
+          "comment": "Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -10999,7 +10999,7 @@
               "dark": "{color.neutral.900}"
             },
             "$type": "color",
-            "comment": "Used for a background associated with neutral feedback."
+            "comment": "Used for the background of a neutral feedback item when there isn't a specific meaning or urgency."
           },
           "name": "FEEDBACK_NEUTRAL_BACKGROUND_COLOR",
           "attributes": {},
@@ -11011,11 +11011,36 @@
           ]
         }
       },
+      "text": {
+        "color": {
+          "value": "#bfbfc3",
+          "$type": "color",
+          "comment": "Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.",
+          "filePath": "src/tokens/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.700}",
+              "dark": "{color.neutral.200}"
+            },
+            "$type": "color",
+            "comment": "Used for the text of a neutral feedback item when there isn't a specific meaning or urgency."
+          },
+          "name": "FEEDBACK_NEUTRAL_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "neutral",
+            "text",
+            "color"
+          ]
+        }
+      },
       "icon": {
         "color": {
           "value": "#a4a3a8",
           "$type": "color",
-          "comment": "Used for an icon associated with a neutral feedback section.",
+          "comment": "Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11024,7 +11049,7 @@
               "dark": "{color.neutral.300}"
             },
             "$type": "color",
-            "comment": "Used for an icon associated with a neutral feedback section."
+            "comment": "Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency."
           },
           "name": "FEEDBACK_NEUTRAL_ICON_COLOR",
           "attributes": {},
@@ -11042,7 +11067,7 @@
         "color": {
           "value": "#033464",
           "$type": "color",
-          "comment": "Used for a background associated with informational feedback or a highlighted section resulting from a user action.",
+          "comment": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11051,7 +11076,7 @@
               "dark": "{color.blue.900}"
             },
             "$type": "color",
-            "comment": "Used for a background associated with informational feedback or a highlighted section resulting from a user action."
+            "comment": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action."
           },
           "name": "FEEDBACK_INFO_BACKGROUND_COLOR",
           "attributes": {},
@@ -11063,11 +11088,36 @@
           ]
         }
       },
+      "text": {
+        "color": {
+          "value": "#9dc7f1",
+          "$type": "color",
+          "comment": "Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
+          "filePath": "src/tokens/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "comment": "Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action."
+          },
+          "name": "FEEDBACK_INFO_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "info",
+            "text",
+            "color"
+          ]
+        }
+      },
       "icon": {
         "color": {
           "value": "#63a6e9",
           "$type": "color",
-          "comment": "Used for an icon associated with informational feedback.",
+          "comment": "Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11076,7 +11126,7 @@
               "dark": "{color.blue.300}"
             },
             "$type": "color",
-            "comment": "Used for an icon associated with informational feedback."
+            "comment": "Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action."
           },
           "name": "FEEDBACK_INFO_ICON_COLOR",
           "attributes": {},
@@ -11094,7 +11144,7 @@
         "color": {
           "value": "#0a4020",
           "$type": "color",
-          "comment": "Used for a background associated with successful feedback or a new section resulting from a user action.",
+          "comment": "Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11103,7 +11153,7 @@
               "dark": "{color.green.900}"
             },
             "$type": "color",
-            "comment": "Used for a background associated with successful feedback or a new section resulting from a user action."
+            "comment": "Used for the background of a success feedback item when confirming the successful completion of a user-initiated action."
           },
           "name": "FEEDBACK_SUCCESS_BACKGROUND_COLOR",
           "attributes": {},
@@ -11115,11 +11165,36 @@
           ]
         }
       },
+      "text": {
+        "color": {
+          "value": "#91d4a8",
+          "$type": "color",
+          "comment": "Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.",
+          "filePath": "src/tokens/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.green.700}",
+              "dark": "{color.green.200}"
+            },
+            "$type": "color",
+            "comment": "Used for the text of a success feedback item when confirming the successful completion of a user-initiated action."
+          },
+          "name": "FEEDBACK_SUCCESS_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "success",
+            "text",
+            "color"
+          ]
+        }
+      },
       "icon": {
         "color": {
           "value": "#52b87a",
           "$type": "color",
-          "comment": "Used for an icon associated with successful feedback or a new section.",
+          "comment": "Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11128,7 +11203,7 @@
               "dark": "{color.green.300}"
             },
             "$type": "color",
-            "comment": "Used for an icon associated with successful feedback or a new section."
+            "comment": "Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action."
           },
           "name": "FEEDBACK_SUCCESS_ICON_COLOR",
           "attributes": {},
@@ -11146,7 +11221,7 @@
         "color": {
           "value": "#5c2900",
           "$type": "color",
-          "comment": "Used for a background associated with warning feedback or to let a user know about confidential content.",
+          "comment": "Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11155,7 +11230,7 @@
               "dark": "{color.orange.900}"
             },
             "$type": "color",
-            "comment": "Used for a background associated with warning feedback or to let a user know about confidential content."
+            "comment": "Used for the background of a warning feedback item when notifying about a potential issue or sensitive information."
           },
           "name": "FEEDBACK_WARNING_BACKGROUND_COLOR",
           "attributes": {},
@@ -11167,11 +11242,36 @@
           ]
         }
       },
+      "text": {
+        "color": {
+          "value": "#e9be74",
+          "$type": "color",
+          "comment": "Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.",
+          "filePath": "src/tokens/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.orange.700}",
+              "dark": "{color.orange.200}"
+            },
+            "$type": "color",
+            "comment": "Used for the text of a warning feedback item when notifying about a potential issue or sensitive information."
+          },
+          "name": "FEEDBACK_WARNING_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "warning",
+            "text",
+            "color"
+          ]
+        }
+      },
       "icon": {
         "color": {
           "value": "#d99530",
           "$type": "color",
-          "comment": "Used for an icon associated with warning feedback or confidential content.",
+          "comment": "Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11180,7 +11280,7 @@
               "dark": "{color.orange.300}"
             },
             "$type": "color",
-            "comment": "Used for an icon associated with warning feedback or confidential content."
+            "comment": "Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information."
           },
           "name": "FEEDBACK_WARNING_ICON_COLOR",
           "attributes": {},
@@ -11198,7 +11298,7 @@
         "color": {
           "value": "#660e00",
           "$type": "color",
-          "comment": "Used for a background associated with danger or critical feedback.",
+          "comment": "Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11207,7 +11307,7 @@
               "dark": "{color.red.900}"
             },
             "$type": "color",
-            "comment": "Used for a background associated with danger or critical feedback."
+            "comment": "Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention."
           },
           "name": "FEEDBACK_DANGER_BACKGROUND_COLOR",
           "attributes": {},
@@ -11219,11 +11319,36 @@
           ]
         }
       },
+      "text": {
+        "color": {
+          "value": "#fcb5aa",
+          "$type": "color",
+          "comment": "Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
+          "filePath": "src/tokens/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "comment": "Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention."
+          },
+          "name": "FEEDBACK_DANGER_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "danger",
+            "text",
+            "color"
+          ]
+        }
+      },
       "icon": {
         "color": {
           "value": "#f57f6c",
           "$type": "color",
-          "comment": "Used for an icon associated with danger or critical feedback.",
+          "comment": "Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11232,7 +11357,7 @@
               "dark": "{color.red.300}"
             },
             "$type": "color",
-            "comment": "Used for an icon associated with danger or critical feedback."
+            "comment": "Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention."
           },
           "name": "FEEDBACK_DANGER_ICON_COLOR",
           "attributes": {},

src/tokens/build/json/tokens.json

@@ -10990,7 +10990,7 @@
         "color": {
           "value": "#ececef",
           "$type": "color",
-          "comment": "Used for a background associated with neutral feedback.",
+          "comment": "Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -10999,7 +10999,7 @@
               "dark": "{color.neutral.900}"
             },
             "$type": "color",
-            "comment": "Used for a background associated with neutral feedback."
+            "comment": "Used for the background of a neutral feedback item when there isn't a specific meaning or urgency."
           },
           "name": "FEEDBACK_NEUTRAL_BACKGROUND_COLOR",
           "attributes": {},
@@ -11011,11 +11011,36 @@
           ]
         }
       },
+      "text": {
+        "color": {
+          "value": "#4c4b51",
+          "$type": "color",
+          "comment": "Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.",
+          "filePath": "src/tokens/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.700}",
+              "dark": "{color.neutral.200}"
+            },
+            "$type": "color",
+            "comment": "Used for the text of a neutral feedback item when there isn't a specific meaning or urgency."
+          },
+          "name": "FEEDBACK_NEUTRAL_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "neutral",
+            "text",
+            "color"
+          ]
+        }
+      },
       "icon": {
         "color": {
           "value": "#626168",
           "$type": "color",
-          "comment": "Used for an icon associated with a neutral feedback section.",
+          "comment": "Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11024,7 +11049,7 @@
               "dark": "{color.neutral.300}"
             },
             "$type": "color",
-            "comment": "Used for an icon associated with a neutral feedback section."
+            "comment": "Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency."
           },
           "name": "FEEDBACK_NEUTRAL_ICON_COLOR",
           "attributes": {},
@@ -11042,7 +11067,7 @@
         "color": {
           "value": "#e9f3fc",
           "$type": "color",
-          "comment": "Used for a background associated with informational feedback or a highlighted section resulting from a user action.",
+          "comment": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11051,7 +11076,7 @@
               "dark": "{color.blue.900}"
             },
             "$type": "color",
-            "comment": "Used for a background associated with informational feedback or a highlighted section resulting from a user action."
+            "comment": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action."
           },
           "name": "FEEDBACK_INFO_BACKGROUND_COLOR",
           "attributes": {},
@@ -11063,11 +11088,36 @@
           ]
         }
       },
+      "text": {
+        "color": {
+          "value": "#0b5cad",
+          "$type": "color",
+          "comment": "Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
+          "filePath": "src/tokens/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "comment": "Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action."
+          },
+          "name": "FEEDBACK_INFO_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "info",
+            "text",
+            "color"
+          ]
+        }
+      },
       "icon": {
         "color": {
           "value": "#1068bf",
           "$type": "color",
-          "comment": "Used for an icon associated with informational feedback.",
+          "comment": "Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11076,7 +11126,7 @@
               "dark": "{color.blue.300}"
             },
             "$type": "color",
-            "comment": "Used for an icon associated with informational feedback."
+            "comment": "Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action."
           },
           "name": "FEEDBACK_INFO_ICON_COLOR",
           "attributes": {},
@@ -11094,7 +11144,7 @@
         "color": {
           "value": "#ecf4ee",
           "$type": "color",
-          "comment": "Used for a background associated with successful feedback or a new section resulting from a user action.",
+          "comment": "Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11103,7 +11153,7 @@
               "dark": "{color.green.900}"
             },
             "$type": "color",
-            "comment": "Used for a background associated with successful feedback or a new section resulting from a user action."
+            "comment": "Used for the background of a success feedback item when confirming the successful completion of a user-initiated action."
           },
           "name": "FEEDBACK_SUCCESS_BACKGROUND_COLOR",
           "attributes": {},
@@ -11115,11 +11165,36 @@
           ]
         }
       },
+      "text": {
+        "color": {
+          "value": "#24663b",
+          "$type": "color",
+          "comment": "Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.",
+          "filePath": "src/tokens/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.green.700}",
+              "dark": "{color.green.200}"
+            },
+            "$type": "color",
+            "comment": "Used for the text of a success feedback item when confirming the successful completion of a user-initiated action."
+          },
+          "name": "FEEDBACK_SUCCESS_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "success",
+            "text",
+            "color"
+          ]
+        }
+      },
       "icon": {
         "color": {
           "value": "#217645",
           "$type": "color",
-          "comment": "Used for an icon associated with successful feedback or a new section.",
+          "comment": "Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11128,7 +11203,7 @@
               "dark": "{color.green.300}"
             },
             "$type": "color",
-            "comment": "Used for an icon associated with successful feedback or a new section."
+            "comment": "Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action."
           },
           "name": "FEEDBACK_SUCCESS_ICON_COLOR",
           "attributes": {},
@@ -11146,7 +11221,7 @@
         "color": {
           "value": "#fdf1dd",
           "$type": "color",
-          "comment": "Used for a background associated with warning feedback or to let a user know about confidential content.",
+          "comment": "Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11155,7 +11230,7 @@
               "dark": "{color.orange.900}"
             },
             "$type": "color",
-            "comment": "Used for a background associated with warning feedback or to let a user know about confidential content."
+            "comment": "Used for the background of a warning feedback item when notifying about a potential issue or sensitive information."
           },
           "name": "FEEDBACK_WARNING_BACKGROUND_COLOR",
           "attributes": {},
@@ -11167,11 +11242,36 @@
           ]
         }
       },
+      "text": {
+        "color": {
+          "value": "#8f4700",
+          "$type": "color",
+          "comment": "Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.",
+          "filePath": "src/tokens/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.orange.700}",
+              "dark": "{color.orange.200}"
+            },
+            "$type": "color",
+            "comment": "Used for the text of a warning feedback item when notifying about a potential issue or sensitive information."
+          },
+          "name": "FEEDBACK_WARNING_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "warning",
+            "text",
+            "color"
+          ]
+        }
+      },
       "icon": {
         "color": {
           "value": "#9e5400",
           "$type": "color",
-          "comment": "Used for an icon associated with warning feedback or confidential content.",
+          "comment": "Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11180,7 +11280,7 @@
               "dark": "{color.orange.300}"
             },
             "$type": "color",
-            "comment": "Used for an icon associated with warning feedback or confidential content."
+            "comment": "Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information."
           },
           "name": "FEEDBACK_WARNING_ICON_COLOR",
           "attributes": {},
@@ -11198,7 +11298,7 @@
         "color": {
           "value": "#fcf1ef",
           "$type": "color",
-          "comment": "Used for a background associated with danger or critical feedback.",
+          "comment": "Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11207,7 +11307,7 @@
               "dark": "{color.red.900}"
             },
             "$type": "color",
-            "comment": "Used for a background associated with danger or critical feedback."
+            "comment": "Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention."
           },
           "name": "FEEDBACK_DANGER_BACKGROUND_COLOR",
           "attributes": {},
@@ -11219,11 +11319,36 @@
           ]
         }
       },
+      "text": {
+        "color": {
+          "value": "#ae1800",
+          "$type": "color",
+          "comment": "Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
+          "filePath": "src/tokens/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "comment": "Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention."
+          },
+          "name": "FEEDBACK_DANGER_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "danger",
+            "text",
+            "color"
+          ]
+        }
+      },
       "icon": {
         "color": {
           "value": "#c91c00",
           "$type": "color",
-          "comment": "Used for an icon associated with danger or critical feedback.",
+          "comment": "Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
           "filePath": "src/tokens/feedback.tokens.json",
           "isSource": true,
           "original": {
@@ -11232,7 +11357,7 @@
               "dark": "{color.red.300}"
             },
             "$type": "color",
-            "comment": "Used for an icon associated with danger or critical feedback."
+            "comment": "Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention."
           },
           "name": "FEEDBACK_DANGER_ICON_COLOR",
           "attributes": {},

src/tokens/build/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.

src/tokens/build/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.

src/tokens/build/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);

src/tokens/feedback.tokens.json

@@ -56,7 +56,17 @@
             "dark": "{color.neutral.900}"
           },
           "$type": "color",
-          "$description": "Used for a background associated with neutral feedback."
+          "$description": "Used for the background of a neutral feedback item when there isn't a specific meaning or urgency."
+        }
+      },
+      "text": {
+        "color": {
+          "$value": {
+            "default": "{color.neutral.700}",
+            "dark": "{color.neutral.200}"
+          },
+          "$type": "color",
+          "$description": "Used for the text of a neutral feedback item when there isn't a specific meaning or urgency."
         }
       },
       "icon": {
@@ -66,7 +76,7 @@
             "dark": "{color.neutral.300}"
           },
           "$type": "color",
-          "$description": "Used for an icon associated with a neutral feedback section."
+          "$description": "Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency."
         }
       }
     },
@@ -78,7 +88,17 @@
             "dark": "{color.blue.900}"
           },
           "$type": "color",
-          "$description": "Used for a background associated with informational feedback or a highlighted section resulting from a user action."
+          "$description": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action."
+        }
+      },
+      "text": {
+        "color": {
+          "$value": {
+            "default": "{color.blue.700}",
+            "dark": "{color.blue.200}"
+          },
+          "$type": "color",
+          "$description": "Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action."
         }
       },
       "icon": {
@@ -88,7 +108,7 @@
             "dark": "{color.blue.300}"
           },
           "$type": "color",
-          "$description": "Used for an icon associated with informational feedback."
+          "$description": "Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action."
         }
       }
     },
@@ -100,7 +120,17 @@
             "dark": "{color.green.900}"
           },
           "$type": "color",
-          "$description": "Used for a background associated with successful feedback or a new section resulting from a user action."
+          "$description": "Used for the background of a success feedback item when confirming the successful completion of a user-initiated action."
+        }
+      },
+      "text": {
+        "color": {
+          "$value": {
+            "default": "{color.green.700}",
+            "dark": "{color.green.200}"
+          },
+          "$type": "color",
+          "$description": "Used for the text of a success feedback item when confirming the successful completion of a user-initiated action."
         }
       },
       "icon": {
@@ -110,7 +140,7 @@
             "dark": "{color.green.300}"
           },
           "$type": "color",
-          "$description": "Used for an icon associated with successful feedback or a new section."
+          "$description": "Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action."
         }
       }
     },
@@ -122,7 +152,17 @@
             "dark": "{color.orange.900}"
           },
           "$type": "color",
-          "$description": "Used for a background associated with warning feedback or to let a user know about confidential content."
+          "$description": "Used for the background of a warning feedback item when notifying about a potential issue or sensitive information."
+        }
+      },
+      "text": {
+        "color": {
+          "$value": {
+            "default": "{color.orange.700}",
+            "dark": "{color.orange.200}"
+          },
+          "$type": "color",
+          "$description": "Used for the text of a warning feedback item when notifying about a potential issue or sensitive information."
         }
       },
       "icon": {
@@ -132,7 +172,7 @@
             "dark": "{color.orange.300}"
           },
           "$type": "color",
-          "$description": "Used for an icon associated with warning feedback or confidential content."
+          "$description": "Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information."
         }
       }
     },
@@ -144,7 +184,17 @@
             "dark": "{color.red.900}"
           },
           "$type": "color",
-          "$description": "Used for a background associated with danger or critical feedback."
+          "$description": "Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention."
+        }
+      },
+      "text": {
+        "color": {
+          "$value": {
+            "default": "{color.red.700}",
+            "dark": "{color.red.200}"
+          },
+          "$type": "color",
+          "$description": "Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention."
         }
       },
       "icon": {
@@ -154,7 +204,7 @@
             "dark": "{color.red.300}"
           },
           "$type": "color",
-          "$description": "Used for an icon associated with danger or critical feedback."
+          "$description": "Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention."
         }
       }
     }