@gitlab/ui 108.8.0 → 108.9.0

package/dist/tokens/tailwind/tokens.cjs

@@ -247,15 +247,15 @@ const borderColors = {
   transparent: 'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
 };
 const iconColors = {
-  default: 'var(--gl-icon-color-default, var(--gl-color-neutral-700, #4c4b51))',
-  subtle: 'var(--gl-icon-color-subtle, var(--gl-color-neutral-500, #737278))',
-  strong: 'var(--gl-icon-color-strong, var(--gl-color-neutral-900, #28272d))',
-  disabled: 'var(--gl-icon-color-disabled, var(--gl-color-neutral-300, #a4a3a8))',
-  link: 'var(--gl-icon-color-link, var(--gl-color-blue-700, #0b5cad))',
+  default: 'var(--gl-icon-color-default, var(--gl-text-color-default, #3a383f))',
+  subtle: 'var(--gl-icon-color-subtle, var(--gl-text-color-subtle, #626168))',
+  strong: 'var(--gl-icon-color-strong, var(--gl-text-color-strong, #18171d))',
+  disabled: 'var(--gl-icon-color-disabled, var(--gl-text-color-disabled, #89888d))',
+  link: 'var(--gl-icon-color-link, var(--gl-text-color-link, #0b5cad))',
   info: 'var(--gl-icon-color-info, var(--gl-color-blue-700, #0b5cad))',
-  warning: 'var(--gl-icon-color-warning, var(--gl-color-orange-600, #9e5400))',
-  danger: 'var(--gl-icon-color-danger, var(--gl-color-red-600, #c91c00))',
-  success: 'var(--gl-icon-color-success, var(--gl-color-green-600, #217645))',
+  warning: 'var(--gl-icon-color-warning, var(--gl-text-color-warning, #9e5400))',
+  danger: 'var(--gl-icon-color-danger, var(--gl-text-color-danger, #c91c00))',
+  success: 'var(--gl-icon-color-success, var(--gl-text-color-success, #217645))',
 };
 const alphaDarkColors = {
   2: 'var(--gl-color-alpha-dark-2, rgba(05, 05, 06, 0.02))',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "108.8.0",
+  "version": "108.9.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -144,7 +144,7 @@
     "axe-playwright": "^2.1.0",
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
-    "cypress": "14.0.0",
+    "cypress": "14.0.2",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.1.2",

package/src/components/utilities/truncate/constants.js

@@ -3,3 +3,5 @@ export const POSITION = {
   MIDDLE: 'middle',
   END: 'end',
 };
+
+export const ZERO_WIDTH_SPACE = '\u200b';

package/src/components/utilities/truncate/truncate.vue

@@ -2,7 +2,7 @@
 <script>
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
-import { POSITION } from './constants';
+import { POSITION, ZERO_WIDTH_SPACE } from './constants';
 
 export default {
   name: 'GlTruncate',
@@ -47,8 +47,53 @@ export default {
       return Math.floor(this.text.length / 2);
     },
 
+    preventWhitespaceCollapse() {
+      // We don't use `\s` here since it includes non-breaking spaces and other
+      // non-collapsible whitespace characters.
+      // See https://infra.spec.whatwg.org/#strip-and-collapse-ascii-whitespace
+      // and https://infra.spec.whatwg.org/#ascii-whitespace.
+      const collapsibleWhitespaceChar = /^[ \n\t\r\f]$/;
+      const { text, middleIndex } = this;
+      const lastCharOfFirstIsCollapsibleWhitespace = collapsibleWhitespaceChar.test(
+        text.charAt(middleIndex - 1)
+      );
+      const firstCharOfLastIsCollapsibleWhitespace = collapsibleWhitespaceChar.test(
+        text.charAt(middleIndex)
+      );
+
+      return lastCharOfFirstIsCollapsibleWhitespace && !firstCharOfLastIsCollapsibleWhitespace;
+    },
     first() {
-      return this.text.slice(0, this.middleIndex);
+      const first = this.text.slice(0, this.middleIndex);
+
+      if (this.preventWhitespaceCollapse) {
+        // Because this component's root element has an internal flex layout,
+        // whitespace at the end of the first child span and at the beginning
+        // of the second child span would be ignored (i.e., totally collapsed).
+        //
+        // This means that strings with a space character in the middle would
+        // render as if there were no space, which would be incorrect (e.g.,
+        // "Gap here" would render as "Gaphere").
+        //
+        // So, in that case, we insert a zero-width space at the end of the
+        // first child span to prevent that whitespace from being totally
+        // collapsed. In other words:
+        // 'first-part-with-space ' → 'first-part-with-space &ZeroWidthSpace;'
+        //
+        // If there's a whitespace character at the begging of the second child
+        // span, we do *not* do this, since the left-to-right mark (&lrm;) just
+        // before `{{ last }}` in the template prevents the collapse of any
+        // whitespace at the start of `last`. If we ignored this edge case,
+        // we'd render a double space, which wouldn't correspond to how the
+        // string would normally render.
+        //
+        // See
+        // https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace#whitespace_in_block_formatting_contexts
+        // for more information on how browsers treat whitespace.
+        return `${first}${ZERO_WIDTH_SPACE}`;
+      }
+
+      return first;
     },
     last() {
       return this.text.slice(this.middleIndex);

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

@@ -827,15 +827,7 @@
   --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-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-focus-ring-outer-color: var(--gl-color-blue-500); /* Used for the outer color portion of the focus ring. */
-  --gl-icon-color-default: var(--gl-color-neutral-700); /* Used for the default icon color. Can be paired with default text. */
-  --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-strong: var(--gl-color-neutral-900); /* Used for an icon with the highest contrast. */
-  --gl-icon-color-disabled: var(--gl-color-neutral-300); /* Used for an icon within a disabled section. */
-  --gl-icon-color-link: var(--gl-color-blue-700); /* Used for an icon within a link. */
   --gl-icon-color-info: var(--gl-color-blue-700); /* Used for an icon associated with information or help. */
-  --gl-icon-color-warning: var(--gl-color-orange-600); /* Used for an icon associated with a warning. */
-  --gl-icon-color-danger: var(--gl-color-red-600); /* Used for an icon associated with an error or danger. */
-  --gl-icon-color-success: var(--gl-color-green-600); /* Used for an icon associated with success or validity. */
   --gl-shadow-color-default: var(--gl-color-alpha-dark-16); /* Used for the default shadow color. */
   --gl-status-neutral-background-color: var(--gl-color-neutral-100); /* Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
   --gl-status-neutral-text-color: var(--gl-color-neutral-700); /* Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
@@ -991,6 +983,14 @@
   --gl-control-text-color-valid: var(--gl-text-color-success); /* Used for the helper text when the input is valid. */
   --gl-control-placeholder-color: var(--gl-text-color-disabled); /* Used for placeholder text within inputs. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
+  --gl-icon-color-default: var(--gl-text-color-default); /* Used for the default icon color. Can be paired with default text. */
+  --gl-icon-color-subtle: var(--gl-text-color-subtle); /* Used for a static or decorational icon. Can be paired with subtle text. */
+  --gl-icon-color-strong: var(--gl-text-color-strong); /* Used for an icon with the highest contrast. */
+  --gl-icon-color-disabled: var(--gl-text-color-disabled); /* Used for an icon within a disabled section. */
+  --gl-icon-color-link: var(--gl-text-color-link); /* Used for an icon within a link. */
+  --gl-icon-color-warning: var(--gl-text-color-warning); /* Used for an icon associated with a warning. */
+  --gl-icon-color-danger: var(--gl-text-color-danger); /* Used for an icon associated with an error or danger. */
+  --gl-icon-color-success: var(--gl-text-color-success); /* Used for an icon associated with success or validity. */
   --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /* Used for the foreground of a selected action in the focus state. */
   --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /* Used for the border of a selected action in the focus state. */
   --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /* Used for the foreground of a strong confirm action in the focus state. */

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

@@ -827,15 +827,7 @@
   --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-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-focus-ring-outer-color: var(--gl-color-blue-400); /* Used for the outer color portion of the focus ring. */
-  --gl-icon-color-default: var(--gl-color-neutral-100); /* Used for the default icon color. Can be paired with default text. */
-  --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-strong: var(--gl-color-neutral-10); /* Used for an icon with the highest contrast. */
-  --gl-icon-color-disabled: var(--gl-color-neutral-500); /* Used for an icon within a disabled section. */
-  --gl-icon-color-link: var(--gl-color-blue-200); /* Used for an icon within a link. */
   --gl-icon-color-info: var(--gl-color-blue-200); /* Used for an icon associated with information or help. */
-  --gl-icon-color-warning: var(--gl-color-orange-300); /* Used for an icon associated with a warning. */
-  --gl-icon-color-danger: var(--gl-color-red-300); /* Used for an icon associated with an error or danger. */
-  --gl-icon-color-success: var(--gl-color-green-300); /* Used for an icon associated with success or validity. */
   --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /* Used for the default shadow color. */
   --gl-status-neutral-background-color: var(--gl-color-neutral-800); /* Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
   --gl-status-neutral-text-color: var(--gl-color-neutral-200); /* Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
@@ -991,6 +983,14 @@
   --gl-control-text-color-valid: var(--gl-text-color-success); /* Used for the helper text when the input is valid. */
   --gl-control-placeholder-color: var(--gl-text-color-disabled); /* Used for placeholder text within inputs. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
+  --gl-icon-color-default: var(--gl-text-color-default); /* Used for the default icon color. Can be paired with default text. */
+  --gl-icon-color-subtle: var(--gl-text-color-subtle); /* Used for a static or decorational icon. Can be paired with subtle text. */
+  --gl-icon-color-strong: var(--gl-text-color-strong); /* Used for an icon with the highest contrast. */
+  --gl-icon-color-disabled: var(--gl-text-color-disabled); /* Used for an icon within a disabled section. */
+  --gl-icon-color-link: var(--gl-text-color-link); /* Used for an icon within a link. */
+  --gl-icon-color-warning: var(--gl-text-color-warning); /* Used for an icon associated with a warning. */
+  --gl-icon-color-danger: var(--gl-text-color-danger); /* Used for an icon associated with an error or danger. */
+  --gl-icon-color-success: var(--gl-text-color-success); /* Used for an icon associated with success or validity. */
   --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /* Used for the foreground of a selected action in the focus state. */
   --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /* Used for the border of a selected action in the focus state. */
   --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /* Used for the foreground of a strong confirm action in the focus state. */

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

@@ -988,10 +988,10 @@ export const GL_FEEDBACK_DANGER_TEXT_COLOR = '#fcb5aa';
 export const GL_FEEDBACK_DANGER_ICON_COLOR = '#f6806d';
 export const GL_FOCUS_RING_OUTER_COLOR = '#428fdc';
 export const GL_FOCUS_RING_INNER_COLOR = '#18171d';
-export const GL_ICON_COLOR_DEFAULT = '#dcdcde';
-export const GL_ICON_COLOR_SUBTLE = '#a4a3a8';
-export const GL_ICON_COLOR_STRONG = '#fbfafd';
-export const GL_ICON_COLOR_DISABLED = '#737278';
+export const GL_ICON_COLOR_DEFAULT = '#ececef';
+export const GL_ICON_COLOR_SUBTLE = '#bfbfc3';
+export const GL_ICON_COLOR_STRONG = '#fff';
+export const GL_ICON_COLOR_DISABLED = '#89888d';
 export const GL_ICON_COLOR_LINK = '#9dc7f1';
 export const GL_ICON_COLOR_INFO = '#9dc7f1';
 export const GL_ICON_COLOR_WARNING = '#d99530';

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

@@ -988,10 +988,10 @@ export const GL_FEEDBACK_DANGER_TEXT_COLOR = '#ae1800';
 export const GL_FEEDBACK_DANGER_ICON_COLOR = '#c91c00';
 export const GL_FOCUS_RING_OUTER_COLOR = '#1f75cb';
 export const GL_FOCUS_RING_INNER_COLOR = '#fff';
-export const GL_ICON_COLOR_DEFAULT = '#4c4b51';
-export const GL_ICON_COLOR_SUBTLE = '#737278';
-export const GL_ICON_COLOR_STRONG = '#28272d';
-export const GL_ICON_COLOR_DISABLED = '#a4a3a8';
+export const GL_ICON_COLOR_DEFAULT = '#3a383f';
+export const GL_ICON_COLOR_SUBTLE = '#626168';
+export const GL_ICON_COLOR_STRONG = '#18171d';
+export const GL_ICON_COLOR_DISABLED = '#89888d';
 export const GL_ICON_COLOR_LINK = '#0b5cad';
 export const GL_ICON_COLOR_INFO = '#0b5cad';
 export const GL_ICON_COLOR_WARNING = '#9e5400';

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

@@ -22676,16 +22676,13 @@
   "icon": {
     "color": {
       "default": {
-        "$value": "#dcdcde",
+        "$value": "#ececef",
         "$type": "color",
         "$description": "Used for the default icon color. Can be paired with default text.",
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.neutral.700}",
-            "dark": "{color.neutral.100}"
-          },
+          "$value": "{text.color.default}",
           "$type": "color",
           "$description": "Used for the default icon color. Can be paired with default text."
         },
@@ -22698,16 +22695,13 @@
         ]
       },
       "subtle": {
-        "$value": "#a4a3a8",
+        "$value": "#bfbfc3",
         "$type": "color",
         "$description": "Used for a static or decorational icon. Can be paired with subtle text.",
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.neutral.500}",
-            "dark": "{color.neutral.300}"
-          },
+          "$value": "{text.color.subtle}",
           "$type": "color",
           "$description": "Used for a static or decorational icon. Can be paired with subtle text."
         },
@@ -22720,16 +22714,13 @@
         ]
       },
       "strong": {
-        "$value": "#fbfafd",
+        "$value": "#fff",
         "$type": "color",
         "$description": "Used for an icon with the highest contrast.",
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.neutral.900}",
-            "dark": "{color.neutral.10}"
-          },
+          "$value": "{text.color.strong}",
           "$type": "color",
           "$description": "Used for an icon with the highest contrast."
         },
@@ -22742,16 +22733,13 @@
         ]
       },
       "disabled": {
-        "$value": "#737278",
+        "$value": "#89888d",
         "$type": "color",
         "$description": "Used for an icon within a disabled section.",
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.neutral.300}",
-            "dark": "{color.neutral.500}"
-          },
+          "$value": "{text.color.disabled}",
           "$type": "color",
           "$description": "Used for an icon within a disabled section."
         },
@@ -22770,10 +22758,7 @@
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.blue.700}",
-            "dark": "{color.blue.200}"
-          },
+          "$value": "{text.color.link}",
           "$type": "color",
           "$description": "Used for an icon within a link."
         },
@@ -22814,10 +22799,7 @@
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.orange.600}",
-            "dark": "{color.orange.300}"
-          },
+          "$value": "{text.color.warning}",
           "$type": "color",
           "$description": "Used for an icon associated with a warning."
         },
@@ -22836,10 +22818,7 @@
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.red.600}",
-            "dark": "{color.red.300}"
-          },
+          "$value": "{text.color.danger}",
           "$type": "color",
           "$description": "Used for an icon associated with an error or danger."
         },
@@ -22858,10 +22837,7 @@
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.green.600}",
-            "dark": "{color.green.300}"
-          },
+          "$value": "{text.color.success}",
           "$type": "color",
           "$description": "Used for an icon associated with success or validity."
         },

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

@@ -22676,16 +22676,13 @@
   "icon": {
     "color": {
       "default": {
-        "$value": "#4c4b51",
+        "$value": "#3a383f",
         "$type": "color",
         "$description": "Used for the default icon color. Can be paired with default text.",
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.neutral.700}",
-            "dark": "{color.neutral.100}"
-          },
+          "$value": "{text.color.default}",
           "$type": "color",
           "$description": "Used for the default icon color. Can be paired with default text."
         },
@@ -22698,16 +22695,13 @@
         ]
       },
       "subtle": {
-        "$value": "#737278",
+        "$value": "#626168",
         "$type": "color",
         "$description": "Used for a static or decorational icon. Can be paired with subtle text.",
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.neutral.500}",
-            "dark": "{color.neutral.300}"
-          },
+          "$value": "{text.color.subtle}",
           "$type": "color",
           "$description": "Used for a static or decorational icon. Can be paired with subtle text."
         },
@@ -22720,16 +22714,13 @@
         ]
       },
       "strong": {
-        "$value": "#28272d",
+        "$value": "#18171d",
         "$type": "color",
         "$description": "Used for an icon with the highest contrast.",
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.neutral.900}",
-            "dark": "{color.neutral.10}"
-          },
+          "$value": "{text.color.strong}",
           "$type": "color",
           "$description": "Used for an icon with the highest contrast."
         },
@@ -22742,16 +22733,13 @@
         ]
       },
       "disabled": {
-        "$value": "#a4a3a8",
+        "$value": "#89888d",
         "$type": "color",
         "$description": "Used for an icon within a disabled section.",
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.neutral.300}",
-            "dark": "{color.neutral.500}"
-          },
+          "$value": "{text.color.disabled}",
           "$type": "color",
           "$description": "Used for an icon within a disabled section."
         },
@@ -22770,10 +22758,7 @@
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.blue.700}",
-            "dark": "{color.blue.200}"
-          },
+          "$value": "{text.color.link}",
           "$type": "color",
           "$description": "Used for an icon within a link."
         },
@@ -22814,10 +22799,7 @@
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.orange.600}",
-            "dark": "{color.orange.300}"
-          },
+          "$value": "{text.color.warning}",
           "$type": "color",
           "$description": "Used for an icon associated with a warning."
         },
@@ -22836,10 +22818,7 @@
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.red.600}",
-            "dark": "{color.red.300}"
-          },
+          "$value": "{text.color.danger}",
           "$type": "color",
           "$description": "Used for an icon associated with an error or danger."
         },
@@ -22858,10 +22837,7 @@
         "filePath": "src/tokens/icon.tokens.json",
         "isSource": true,
         "original": {
-          "$value": {
-            "default": "{color.green.600}",
-            "dark": "{color.green.300}"
-          },
+          "$value": "{text.color.success}",
           "$type": "color",
           "$description": "Used for an icon associated with success or validity."
         },

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

@@ -825,15 +825,7 @@ $gl-feedback-danger-background-color: $gl-color-red-900; // Used for the backgro
 $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-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-focus-ring-outer-color: $gl-color-blue-400; // Used for the outer color portion of the focus ring.
-$gl-icon-color-default: $gl-color-neutral-100; // Used for the default icon color. Can be paired with default text.
-$gl-icon-color-subtle: $gl-color-neutral-300; // Used for a static or decorational icon. Can be paired with subtle text.
-$gl-icon-color-strong: $gl-color-neutral-10; // Used for an icon with the highest contrast.
-$gl-icon-color-disabled: $gl-color-neutral-500; // Used for an icon within a disabled section.
-$gl-icon-color-link: $gl-color-blue-200; // Used for an icon within a link.
 $gl-icon-color-info: $gl-color-blue-200; // Used for an icon associated with information or help.
-$gl-icon-color-warning: $gl-color-orange-300; // Used for an icon associated with a warning.
-$gl-icon-color-danger: $gl-color-red-300; // Used for an icon associated with an error or danger.
-$gl-icon-color-success: $gl-color-green-300; // Used for an icon associated with success or validity.
 $gl-shadow-color-default: $gl-color-alpha-dark-40; // Used for the default shadow color.
 $gl-status-neutral-background-color: $gl-color-neutral-800; // Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
 $gl-status-neutral-text-color: $gl-color-neutral-200; // Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
@@ -989,6 +981,14 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
+$gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text.
+$gl-icon-color-subtle: $gl-text-color-subtle; // Used for a static or decorational icon. Can be paired with subtle text.
+$gl-icon-color-strong: $gl-text-color-strong; // Used for an icon with the highest contrast.
+$gl-icon-color-disabled: $gl-text-color-disabled; // Used for an icon within a disabled section.
+$gl-icon-color-link: $gl-text-color-link; // Used for an icon within a link.
+$gl-icon-color-warning: $gl-text-color-warning; // Used for an icon associated with a warning.
+$gl-icon-color-danger: $gl-text-color-danger; // Used for an icon associated with an error or danger.
+$gl-icon-color-success: $gl-text-color-success; // Used for an icon associated with success or validity.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
 $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.

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

@@ -825,15 +825,7 @@ $gl-feedback-danger-background-color: $gl-color-red-50; // Used for the backgrou
 $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-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-focus-ring-outer-color: $gl-color-blue-500; // Used for the outer color portion of the focus ring.
-$gl-icon-color-default: $gl-color-neutral-700; // Used for the default icon color. Can be paired with default text.
-$gl-icon-color-subtle: $gl-color-neutral-500; // Used for a static or decorational icon. Can be paired with subtle text.
-$gl-icon-color-strong: $gl-color-neutral-900; // Used for an icon with the highest contrast.
-$gl-icon-color-disabled: $gl-color-neutral-300; // Used for an icon within a disabled section.
-$gl-icon-color-link: $gl-color-blue-700; // Used for an icon within a link.
 $gl-icon-color-info: $gl-color-blue-700; // Used for an icon associated with information or help.
-$gl-icon-color-warning: $gl-color-orange-600; // Used for an icon associated with a warning.
-$gl-icon-color-danger: $gl-color-red-600; // Used for an icon associated with an error or danger.
-$gl-icon-color-success: $gl-color-green-600; // Used for an icon associated with success or validity.
 $gl-shadow-color-default: $gl-color-alpha-dark-16; // Used for the default shadow color.
 $gl-status-neutral-background-color: $gl-color-neutral-100; // Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
 $gl-status-neutral-text-color: $gl-color-neutral-700; // Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
@@ -989,6 +981,14 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
+$gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text.
+$gl-icon-color-subtle: $gl-text-color-subtle; // Used for a static or decorational icon. Can be paired with subtle text.
+$gl-icon-color-strong: $gl-text-color-strong; // Used for an icon with the highest contrast.
+$gl-icon-color-disabled: $gl-text-color-disabled; // Used for an icon within a disabled section.
+$gl-icon-color-link: $gl-text-color-link; // Used for an icon within a link.
+$gl-icon-color-warning: $gl-text-color-warning; // Used for an icon associated with a warning.
+$gl-icon-color-danger: $gl-text-color-danger; // Used for an icon associated with an error or danger.
+$gl-icon-color-success: $gl-text-color-success; // Used for an icon associated with success or validity.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
 $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.

package/src/tokens/build/tailwind/tokens.cjs

@@ -247,15 +247,15 @@ const borderColors = {
   transparent: 'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
 };
 const iconColors = {
-  default: 'var(--gl-icon-color-default, var(--gl-color-neutral-700, #4c4b51))',
-  subtle: 'var(--gl-icon-color-subtle, var(--gl-color-neutral-500, #737278))',
-  strong: 'var(--gl-icon-color-strong, var(--gl-color-neutral-900, #28272d))',
-  disabled: 'var(--gl-icon-color-disabled, var(--gl-color-neutral-300, #a4a3a8))',
-  link: 'var(--gl-icon-color-link, var(--gl-color-blue-700, #0b5cad))',
+  default: 'var(--gl-icon-color-default, var(--gl-text-color-default, #3a383f))',
+  subtle: 'var(--gl-icon-color-subtle, var(--gl-text-color-subtle, #626168))',
+  strong: 'var(--gl-icon-color-strong, var(--gl-text-color-strong, #18171d))',
+  disabled: 'var(--gl-icon-color-disabled, var(--gl-text-color-disabled, #89888d))',
+  link: 'var(--gl-icon-color-link, var(--gl-text-color-link, #0b5cad))',
   info: 'var(--gl-icon-color-info, var(--gl-color-blue-700, #0b5cad))',
-  warning: 'var(--gl-icon-color-warning, var(--gl-color-orange-600, #9e5400))',
-  danger: 'var(--gl-icon-color-danger, var(--gl-color-red-600, #c91c00))',
-  success: 'var(--gl-icon-color-success, var(--gl-color-green-600, #217645))',
+  warning: 'var(--gl-icon-color-warning, var(--gl-text-color-warning, #9e5400))',
+  danger: 'var(--gl-icon-color-danger, var(--gl-text-color-danger, #c91c00))',
+  success: 'var(--gl-icon-color-success, var(--gl-text-color-success, #217645))',
 };
 const alphaDarkColors = {
   2: 'var(--gl-color-alpha-dark-2, rgba(05, 05, 06, 0.02))',

package/src/tokens/icon.tokens.json

@@ -2,42 +2,27 @@
   "icon": {
     "color": {
       "default": {
-        "$value": {
-          "default": "{color.neutral.700}",
-          "dark": "{color.neutral.100}"
-        },
+        "$value": "{text.color.default}",
         "$type": "color",
         "$description": "Used for the default icon color. Can be paired with default text."
       },
       "subtle": {
-        "$value": {
-          "default": "{color.neutral.500}",
-          "dark": "{color.neutral.300}"
-        },
+        "$value": "{text.color.subtle}",
         "$type": "color",
         "$description": "Used for a static or decorational icon. Can be paired with subtle text."
       },
       "strong": {
-        "$value": {
-          "default": "{color.neutral.900}",
-          "dark": "{color.neutral.10}"
-        },
+        "$value": "{text.color.strong}",
         "$type": "color",
         "$description": "Used for an icon with the highest contrast."
       },
       "disabled": {
-        "$value": {
-          "default": "{color.neutral.300}",
-          "dark": "{color.neutral.500}"
-        },
+        "$value": "{text.color.disabled}",
         "$type": "color",
         "$description": "Used for an icon within a disabled section."
       },
       "link": {
-        "$value": {
-          "default": "{color.blue.700}",
-          "dark": "{color.blue.200}"
-        },
+        "$value": "{text.color.link}",
         "$type": "color",
         "$description": "Used for an icon within a link."
       },
@@ -50,26 +35,17 @@
         "$description": "Used for an icon associated with information or help."
       },
       "warning": {
-        "$value": {
-          "default": "{color.orange.600}",
-          "dark": "{color.orange.300}"
-        },
+        "$value": "{text.color.warning}",
         "$type": "color",
         "$description": "Used for an icon associated with a warning."
       },
       "danger": {
-        "$value": {
-          "default": "{color.red.600}",
-          "dark": "{color.red.300}"
-        },
+        "$value": "{text.color.danger}",
         "$type": "color",
         "$description": "Used for an icon associated with an error or danger."
       },
       "success": {
-        "$value": {
-          "default": "{color.green.600}",
-          "dark": "{color.green.300}"
-        },
+        "$value": "{text.color.success}",
         "$type": "color",
         "$description": "Used for an icon associated with success or validity."
       }