@gitlab/ui 80.15.2 → 80.16.1

package/dist/tokens/tailwind/tokens.cjs

@@ -224,6 +224,18 @@ const backgroundColors = {
   disabled:
     'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
 };
+const iconColors = {
+  default: 'var(--gl-icon-color-default, var(--gl-color-neutral-700, #535158))',
+  subtle: 'var(--gl-icon-color-subtle, var(--gl-color-neutral-500, #737278))',
+  strong: 'var(--gl-icon-color-strong, var(--gl-color-neutral-900, #333238))',
+  disabled:
+    'var(--gl-icon-color-disabled, var(--gl-color-neutral-300, #a4a3a8))',
+  link: 'var(--gl-icon-color-link, var(--gl-color-blue-600, #1068bf))',
+  info: 'var(--gl-icon-color-info, var(--gl-color-blue-600, #1068bf))',
+  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))',
+};
 
 const colors = {
   inherit: 'inherit',
@@ -241,6 +253,13 @@ const backgroundColor = {
   ...backgroundColors,
 };
 
+const fill = {
+  ...colors,
+  icon: {
+    ...iconColors,
+  },
+};
+
 const textColor = {
   ...colors,
   ...textColors,
@@ -253,4 +272,5 @@ module.exports = {
   colors,
   backgroundColor,
   textColor,
+  fill,
 };

package/dist/utils/constants.js

@@ -153,6 +153,18 @@ const datepickerWidthOptionsMap = {
 
 // size options all have corresponding styles (e.g. .s12 defined in icon.scss)
 const iconSizeOptions = [8, 12, 14, 16, 24, 32, 48, 72];
+const iconVariantOptions = {
+  current: 'gl-fill-current',
+  default: 'gl-fill-icon-default',
+  subtle: 'gl-fill-icon-subtle',
+  strong: 'gl-fill-icon-strong',
+  disabled: 'gl-fill-icon-disabled',
+  link: 'gl-fill-icon-link',
+  info: 'gl-fill-icon-info',
+  warning: 'gl-fill-icon-warning',
+  danger: 'gl-fill-icon-danger',
+  success: 'gl-fill-icon-success'
+};
 const triggerVariantOptions = {
   click: 'click',
   hover: 'hover',
@@ -294,4 +306,4 @@ const loadingIconVariants = {
   dots: 'dots'
 };
 
-export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, glThemes, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "80.15.2",
+  "version": "80.16.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -55,8 +55,8 @@
     "test:visual": "./bin/run-visual-tests.sh 'test-storybook --browsers firefox --verbose --url http://localhost:9001'",
     "test:visual:update": "./bin/run-visual-tests.sh 'test-storybook -u --browsers firefox --verbose --url http://localhost:9001'",
     "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test storybook:run http-get://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
-    "prettier": "prettier --check '**/*.{js,ts,vue}'",
-    "prettier:fix": "prettier --write '**/*.{js,ts,vue}'",
+    "prettier": "prettier --check '**/*.{js,mjs,ts,vue}'",
+    "prettier:fix": "prettier --write '**/*.{js,mjs,ts,vue}'",
     "eslint": "eslint --max-warnings 0 --ext .js,.vue .",
     "preeslint": "yarn generate-utilities",
     "eslint:fix": "yarn eslint --fix",

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -128,6 +128,9 @@ export default {
       await this.$nextTick();
 
       this.totalBreadcrumbsWidth = 0;
+
+      if (!this.$refs.breadcrumbs) return;
+
       this.$refs.breadcrumbs.forEach((b, index) => {
         const width = b.$el.clientWidth;
         this.totalBreadcrumbsWidth += width;

package/src/components/base/icon/icon.scss

@@ -1,5 +1,4 @@
 .gl-icon {
-  fill: currentColor;
   @each $size in $gl-icon-sizes {
     &.s#{$size} {
       width: #{$size}px;

package/src/components/base/icon/icon.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import iconsPath from '@gitlab/svgs/dist/icons.svg';
-import { iconSizeOptions } from '../../../utils/constants';
+import { iconSizeOptions, iconVariantOptions } from '../../../utils/constants';
 
 let iconValidator = () => true;
 
@@ -59,6 +59,15 @@ export default {
       default: 16,
       validator: (value) => iconSizeOptions.includes(value),
     },
+    /**
+     * Icon variant
+     */
+    variant: {
+      type: String,
+      required: false,
+      default: 'current',
+      validator: (value) => Object.keys(iconVariantOptions).includes(value),
+    },
   },
   computed: {
     spriteHref() {
@@ -67,6 +76,9 @@ export default {
     iconSizeClass() {
       return this.size ? `s${this.size}` : '';
     },
+    iconVariantClass() {
+      return this.variant ? iconVariantOptions[this.variant] : '';
+    },
   },
 };
 </script>
@@ -74,7 +86,7 @@ export default {
 <template>
   <svg
     :key="spriteHref"
-    :class="['gl-icon', iconSizeClass]"
+    :class="['gl-icon', iconSizeClass, iconVariantClass]"
     :data-testid="`${name}-icon`"
     role="img"
     :aria-hidden="!ariaLabel"

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

@@ -314,6 +314,15 @@
   --gl-text-color-strong: var(--gl-color-neutral-950); /* Used for text with the highest contrast. */
   --gl-text-color-subtle: var(--gl-color-neutral-600); /* Used for supplemental text that doesn't need to be as prominent as other text. */
   --gl-text-color-default: var(--gl-color-neutral-800); /* Used for the default text color. */
+  --gl-icon-color-success: var(--gl-color-green-600); /* Used for an icon associated with success or validity. */
+  --gl-icon-color-danger: var(--gl-color-red-600); /* Used for an icon associated with an error or danger. */
+  --gl-icon-color-warning: var(--gl-color-orange-600); /* Used for an icon associated with a warning. */
+  --gl-icon-color-info: var(--gl-color-blue-600); /* Used for an icon associated with information or help. */
+  --gl-icon-color-link: var(--gl-color-blue-600); /* Used for an icon within a link. */
+  --gl-icon-color-disabled: var(--gl-color-neutral-300); /* Used for an icon within a disabled section. */
+  --gl-icon-color-strong: var(--gl-color-neutral-900); /* Used for an icon with the highest contrast. */
+  --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-background-color-disabled: var(--gl-color-neutral-10); /* Used to identify a disabled section. */
   --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-10); /* Used to slightly differentiate the background from the default. */

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

@@ -314,6 +314,15 @@
   --gl-text-color-strong: var(--gl-color-neutral-0); /* Used for text with the highest contrast. */
   --gl-text-color-subtle: var(--gl-color-neutral-200); /* Used for supplemental text that doesn't need to be as prominent as other text. */
   --gl-text-color-default: var(--gl-color-neutral-50); /* Used for the default text color. */
+  --gl-icon-color-success: var(--gl-color-green-300); /* Used for an icon associated with success or validity. */
+  --gl-icon-color-danger: var(--gl-color-red-300); /* Used for an icon associated with an error or danger. */
+  --gl-icon-color-warning: var(--gl-color-orange-300); /* Used for an icon associated with a warning. */
+  --gl-icon-color-info: var(--gl-color-blue-300); /* Used for an icon associated with information or help. */
+  --gl-icon-color-link: var(--gl-color-blue-300); /* Used for an icon within a link. */
+  --gl-icon-color-disabled: var(--gl-color-neutral-500); /* Used for an icon within a disabled section. */
+  --gl-icon-color-strong: var(--gl-color-neutral-10); /* Used for an icon with the highest contrast. */
+  --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-background-color-disabled: var(--gl-color-neutral-900); /* Used to identify a disabled section. */
   --gl-background-color-strong: var(--gl-color-neutral-800); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */

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

@@ -296,6 +296,15 @@ export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)';
 export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
 export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
 export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
+export const GL_ICON_COLOR_DEFAULT = '#dcdcde'; // Used for the default icon color. Can be paired with default text.
+export const GL_ICON_COLOR_SUBTLE = '#a4a3a8'; // Used for a static or decorational icon. Can be paired with subtle text.
+export const GL_ICON_COLOR_STRONG = '#fbfafd'; // Used for an icon with the highest contrast.
+export const GL_ICON_COLOR_DISABLED = '#737278'; // Used for an icon within a disabled section.
+export const GL_ICON_COLOR_LINK = '#63a6e9'; // Used for an icon within a link.
+export const GL_ICON_COLOR_INFO = '#63a6e9'; // Used for an icon associated with information or help.
+export const GL_ICON_COLOR_WARNING = '#d99530'; // Used for an icon associated with a warning.
+export const GL_ICON_COLOR_DANGER = '#f57f6c'; // Used for an icon associated with an error or danger.
+export const GL_ICON_COLOR_SUCCESS = '#52b87a'; // Used for an icon associated with success or validity.
 export const GL_LINE_HEIGHT_12 = '0.75rem';
 export const GL_LINE_HEIGHT_16 = '1rem';
 export const GL_LINE_HEIGHT_20 = '1.25rem';

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

@@ -296,6 +296,15 @@ export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)';
 export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
 export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
 export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
+export const GL_ICON_COLOR_DEFAULT = '#535158'; // Used for the default icon color. Can be paired with default text.
+export const GL_ICON_COLOR_SUBTLE = '#737278'; // Used for a static or decorational icon. Can be paired with subtle text.
+export const GL_ICON_COLOR_STRONG = '#333238'; // Used for an icon with the highest contrast.
+export const GL_ICON_COLOR_DISABLED = '#a4a3a8'; // Used for an icon within a disabled section.
+export const GL_ICON_COLOR_LINK = '#1068bf'; // Used for an icon within a link.
+export const GL_ICON_COLOR_INFO = '#1068bf'; // Used for an icon associated with information or help.
+export const GL_ICON_COLOR_WARNING = '#9e5400'; // Used for an icon associated with a warning.
+export const GL_ICON_COLOR_DANGER = '#c91c00'; // Used for an icon associated with an error or danger.
+export const GL_ICON_COLOR_SUCCESS = '#217645'; // Used for an icon associated with success or validity.
 export const GL_LINE_HEIGHT_12 = '0.75rem';
 export const GL_LINE_HEIGHT_16 = '1rem';
 export const GL_LINE_HEIGHT_20 = '1.25rem';

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

@@ -6451,6 +6451,208 @@
       ]
     }
   },
+  "icon": {
+    "color": {
+      "default": {
+        "value": "#dcdcde",
+        "$type": "color",
+        "comment": "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}"
+          },
+          "$type": "color",
+          "comment": "Used for the default icon color. Can be paired with default text."
+        },
+        "name": "ICON_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "default"
+        ]
+      },
+      "subtle": {
+        "value": "#a4a3a8",
+        "$type": "color",
+        "comment": "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}"
+          },
+          "$type": "color",
+          "comment": "Used for a static or decorational icon. Can be paired with subtle text."
+        },
+        "name": "ICON_COLOR_SUBTLE",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "subtle"
+        ]
+      },
+      "strong": {
+        "value": "#fbfafd",
+        "$type": "color",
+        "comment": "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}"
+          },
+          "$type": "color",
+          "comment": "Used for an icon with the highest contrast."
+        },
+        "name": "ICON_COLOR_STRONG",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "strong"
+        ]
+      },
+      "disabled": {
+        "value": "#737278",
+        "$type": "color",
+        "comment": "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}"
+          },
+          "$type": "color",
+          "comment": "Used for an icon within a disabled section."
+        },
+        "name": "ICON_COLOR_DISABLED",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "disabled"
+        ]
+      },
+      "link": {
+        "value": "#63a6e9",
+        "$type": "color",
+        "comment": "Used for an icon within a link.",
+        "filePath": "src/tokens/icon.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.blue.600}",
+            "dark": "{color.blue.300}"
+          },
+          "$type": "color",
+          "comment": "Used for an icon within a link."
+        },
+        "name": "ICON_COLOR_LINK",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "link"
+        ]
+      },
+      "info": {
+        "value": "#63a6e9",
+        "$type": "color",
+        "comment": "Used for an icon associated with information or help.",
+        "filePath": "src/tokens/icon.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.blue.600}",
+            "dark": "{color.blue.300}"
+          },
+          "$type": "color",
+          "comment": "Used for an icon associated with information or help."
+        },
+        "name": "ICON_COLOR_INFO",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "info"
+        ]
+      },
+      "warning": {
+        "value": "#d99530",
+        "$type": "color",
+        "comment": "Used for an icon associated with a warning.",
+        "filePath": "src/tokens/icon.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.orange.600}",
+            "dark": "{color.orange.300}"
+          },
+          "$type": "color",
+          "comment": "Used for an icon associated with a warning."
+        },
+        "name": "ICON_COLOR_WARNING",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "warning"
+        ]
+      },
+      "danger": {
+        "value": "#f57f6c",
+        "$type": "color",
+        "comment": "Used for an icon associated with an error or danger.",
+        "filePath": "src/tokens/icon.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.red.600}",
+            "dark": "{color.red.300}"
+          },
+          "$type": "color",
+          "comment": "Used for an icon associated with an error or danger."
+        },
+        "name": "ICON_COLOR_DANGER",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "danger"
+        ]
+      },
+      "success": {
+        "value": "#52b87a",
+        "$type": "color",
+        "comment": "Used for an icon associated with success or validity.",
+        "filePath": "src/tokens/icon.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.green.600}",
+            "dark": "{color.green.300}"
+          },
+          "$type": "color",
+          "comment": "Used for an icon associated with success or validity."
+        },
+        "name": "ICON_COLOR_SUCCESS",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "success"
+        ]
+      }
+    }
+  },
   "line-height": {
     "12": {
       "value": "0.75rem",

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

@@ -6451,6 +6451,208 @@
       ]
     }
   },
+  "icon": {
+    "color": {
+      "default": {
+        "value": "#535158",
+        "$type": "color",
+        "comment": "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}"
+          },
+          "$type": "color",
+          "comment": "Used for the default icon color. Can be paired with default text."
+        },
+        "name": "ICON_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "default"
+        ]
+      },
+      "subtle": {
+        "value": "#737278",
+        "$type": "color",
+        "comment": "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}"
+          },
+          "$type": "color",
+          "comment": "Used for a static or decorational icon. Can be paired with subtle text."
+        },
+        "name": "ICON_COLOR_SUBTLE",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "subtle"
+        ]
+      },
+      "strong": {
+        "value": "#333238",
+        "$type": "color",
+        "comment": "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}"
+          },
+          "$type": "color",
+          "comment": "Used for an icon with the highest contrast."
+        },
+        "name": "ICON_COLOR_STRONG",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "strong"
+        ]
+      },
+      "disabled": {
+        "value": "#a4a3a8",
+        "$type": "color",
+        "comment": "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}"
+          },
+          "$type": "color",
+          "comment": "Used for an icon within a disabled section."
+        },
+        "name": "ICON_COLOR_DISABLED",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "disabled"
+        ]
+      },
+      "link": {
+        "value": "#1068bf",
+        "$type": "color",
+        "comment": "Used for an icon within a link.",
+        "filePath": "src/tokens/icon.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.blue.600}",
+            "dark": "{color.blue.300}"
+          },
+          "$type": "color",
+          "comment": "Used for an icon within a link."
+        },
+        "name": "ICON_COLOR_LINK",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "link"
+        ]
+      },
+      "info": {
+        "value": "#1068bf",
+        "$type": "color",
+        "comment": "Used for an icon associated with information or help.",
+        "filePath": "src/tokens/icon.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.blue.600}",
+            "dark": "{color.blue.300}"
+          },
+          "$type": "color",
+          "comment": "Used for an icon associated with information or help."
+        },
+        "name": "ICON_COLOR_INFO",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "info"
+        ]
+      },
+      "warning": {
+        "value": "#9e5400",
+        "$type": "color",
+        "comment": "Used for an icon associated with a warning.",
+        "filePath": "src/tokens/icon.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.orange.600}",
+            "dark": "{color.orange.300}"
+          },
+          "$type": "color",
+          "comment": "Used for an icon associated with a warning."
+        },
+        "name": "ICON_COLOR_WARNING",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "warning"
+        ]
+      },
+      "danger": {
+        "value": "#c91c00",
+        "$type": "color",
+        "comment": "Used for an icon associated with an error or danger.",
+        "filePath": "src/tokens/icon.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.red.600}",
+            "dark": "{color.red.300}"
+          },
+          "$type": "color",
+          "comment": "Used for an icon associated with an error or danger."
+        },
+        "name": "ICON_COLOR_DANGER",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "danger"
+        ]
+      },
+      "success": {
+        "value": "#217645",
+        "$type": "color",
+        "comment": "Used for an icon associated with success or validity.",
+        "filePath": "src/tokens/icon.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.green.600}",
+            "dark": "{color.green.300}"
+          },
+          "$type": "color",
+          "comment": "Used for an icon associated with success or validity."
+        },
+        "name": "ICON_COLOR_SUCCESS",
+        "attributes": {},
+        "path": [
+          "icon",
+          "color",
+          "success"
+        ]
+      }
+    }
+  },
   "line-height": {
     "12": {
       "value": "0.75rem",

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

@@ -312,6 +312,15 @@ $gl-text-color-heading: $gl-color-neutral-0; // Used for headings level 1-6.
 $gl-text-color-strong: $gl-color-neutral-0; // Used for text with the highest contrast.
 $gl-text-color-subtle: $gl-color-neutral-200; // Used for supplemental text that doesn't need to be as prominent as other text.
 $gl-text-color-default: $gl-color-neutral-50; // Used for the default text color.
+$gl-icon-color-success: $gl-color-green-300; // Used for an icon associated with success or validity.
+$gl-icon-color-danger: $gl-color-red-300; // Used for an icon associated with an error or danger.
+$gl-icon-color-warning: $gl-color-orange-300; // Used for an icon associated with a warning.
+$gl-icon-color-info: $gl-color-blue-300; // Used for an icon associated with information or help.
+$gl-icon-color-link: $gl-color-blue-300; // Used for an icon within a link.
+$gl-icon-color-disabled: $gl-color-neutral-500; // Used for an icon within a disabled section.
+$gl-icon-color-strong: $gl-color-neutral-10; // Used for an icon with the highest contrast.
+$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-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.

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

@@ -312,6 +312,15 @@ $gl-text-color-heading: $gl-color-neutral-950; // Used for headings level 1-6.
 $gl-text-color-strong: $gl-color-neutral-950; // Used for text with the highest contrast.
 $gl-text-color-subtle: $gl-color-neutral-600; // Used for supplemental text that doesn't need to be as prominent as other text.
 $gl-text-color-default: $gl-color-neutral-800; // Used for the default text color.
+$gl-icon-color-success: $gl-color-green-600; // Used for an icon associated with success or validity.
+$gl-icon-color-danger: $gl-color-red-600; // Used for an icon associated with an error or danger.
+$gl-icon-color-warning: $gl-color-orange-600; // Used for an icon associated with a warning.
+$gl-icon-color-info: $gl-color-blue-600; // Used for an icon associated with information or help.
+$gl-icon-color-link: $gl-color-blue-600; // Used for an icon within a link.
+$gl-icon-color-disabled: $gl-color-neutral-300; // Used for an icon within a disabled section.
+$gl-icon-color-strong: $gl-color-neutral-900; // Used for an icon with the highest contrast.
+$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-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.