@gitlab/ui 80.15.2 → 80.16.1

package/dist/tailwind.css

@@ -1,2 +1,2 @@
-.gl-fixed{position:fixed}.\!gl-absolute{position:absolute!important}.gl-absolute{position:absolute}.gl-relative{position:relative}.gl-bottom-0{bottom:0}.gl-bottom-2{bottom:.25rem}.gl-left-0{left:0}.gl-right-2{right:.25rem}.gl-float-right{float:right}.gl-text-blue-100{color:var(--blue-100,#cbe2f9)}.gl-text-blue-500{color:var(--blue-500,#1f75cb)}.gl-text-blue-900{color:var(--blue-900,#033464)}.gl-text-danger{color:var(--gl-text-color-danger,var(--gl-color-red-600,#c91c00))}.gl-text-gray-400{color:var(--gray-400,#89888d)}.gl-text-gray-500{color:var(--gray-500,#737278)}.gl-text-gray-600{color:var(--gray-600,#626168)}.gl-text-gray-700{color:var(--gray-700,#535158)}.gl-text-gray-900{color:var(--gray-900,#333238)}.gl-text-gray-950{color:var(--gray-950,#1f1e24)}.gl-text-green-500{color:var(--green-500,#108548)}.gl-text-green-600{color:var(--green-600,#217645)}.gl-text-orange-500{color:var(--orange-500,#ab6100)}.gl-text-red-300{color:var(--red-300,#f57f6c)}.gl-text-red-500{color:var(--red-500,#dd2b0e)}.gl-text-red-600{color:var(--red-600,#c91c00)}.gl-text-secondary{color:var(--gl-text-secondary,#737278)}.gl-text-strong{color:var(--gl-text-color-strong,var(--gl-color-neutral-950,#1f1e24))}.gl-text-subtle{color:var(--gl-text-color-subtle,var(--gl-color-neutral-600,#626168))}.gl-text-white{color:var(--white,#fff)}
+.gl-fixed{position:fixed}.\!gl-absolute{position:absolute!important}.gl-absolute{position:absolute}.gl-relative{position:relative}.gl-bottom-0{bottom:0}.gl-bottom-2{bottom:.25rem}.gl-left-0{left:0}.gl-right-2{right:.25rem}.gl-float-right{float:right}.gl-fill-current{fill:currentColor}.gl-fill-gray-100{fill:var(--gray-100,#dcdcde)}.gl-fill-icon-danger{fill:var(--gl-icon-color-danger,var(--gl-color-red-600,#c91c00))}.gl-fill-icon-default{fill:var(--gl-icon-color-default,var(--gl-color-neutral-700,#535158))}.gl-fill-icon-disabled{fill:var(--gl-icon-color-disabled,var(--gl-color-neutral-300,#a4a3a8))}.gl-fill-icon-info{fill:var(--gl-icon-color-info,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-link{fill:var(--gl-icon-color-link,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-strong{fill:var(--gl-icon-color-strong,var(--gl-color-neutral-900,#333238))}.gl-fill-icon-subtle{fill:var(--gl-icon-color-subtle,var(--gl-color-neutral-500,#737278))}.gl-fill-icon-success{fill:var(--gl-icon-color-success,var(--gl-color-green-600,#217645))}.gl-fill-icon-warning{fill:var(--gl-icon-color-warning,var(--gl-color-orange-600,#9e5400))}.gl-text-blue-100{color:var(--blue-100,#cbe2f9)}.gl-text-blue-500{color:var(--blue-500,#1f75cb)}.gl-text-blue-900{color:var(--blue-900,#033464)}.gl-text-danger{color:var(--gl-text-color-danger,var(--gl-color-red-600,#c91c00))}.gl-text-gray-400{color:var(--gray-400,#89888d)}.gl-text-gray-500{color:var(--gray-500,#737278)}.gl-text-gray-600{color:var(--gray-600,#626168)}.gl-text-gray-700{color:var(--gray-700,#535158)}.gl-text-gray-900{color:var(--gray-900,#333238)}.gl-text-gray-950{color:var(--gray-950,#1f1e24)}.gl-text-green-500{color:var(--green-500,#108548)}.gl-text-green-600{color:var(--green-600,#217645)}.gl-text-orange-500{color:var(--orange-500,#ab6100)}.gl-text-red-300{color:var(--red-300,#f57f6c)}.gl-text-red-500{color:var(--red-500,#dd2b0e)}.gl-text-red-600{color:var(--red-600,#c91c00)}.gl-text-secondary{color:var(--gl-text-secondary,#737278)}.gl-text-strong{color:var(--gl-text-color-strong,var(--gl-color-neutral-950,#1f1e24))}.gl-text-subtle{color:var(--gl-text-color-subtle,var(--gl-color-neutral-600,#626168))}.gl-text-white{color:var(--white,#fff)}
 /*# sourceMappingURL=tailwind.css.map */

package/dist/tailwind.css.map

@@ -1 +1 @@
-{"version":3,"sources":["tailwind.css"],"names":[],"mappings":"AAAA,UAAA,cAAmB,CAAnB,eAAA,2BAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,QAAmB,CAAnB,aAAA,aAAmB,CAAnB,WAAA,MAAmB,CAAnB,YAAA,YAAmB,CAAnB,gBAAA,WAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,gBAAA,iEAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,oBAAA,+BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,mBAAA,sCAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,eAAA,uBAAmB","file":"tailwind.css","sourcesContent":["@tailwind utilities;\n"]}
+{"version":3,"sources":["tailwind.css"],"names":[],"mappings":"AAAA,UAAA,cAAmB,CAAnB,eAAA,2BAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,QAAmB,CAAnB,aAAA,aAAmB,CAAnB,WAAA,MAAmB,CAAnB,YAAA,YAAmB,CAAnB,gBAAA,WAAmB,CAAnB,iBAAA,iBAAmB,CAAnB,kBAAA,4BAAmB,CAAnB,qBAAA,gEAAmB,CAAnB,sBAAA,qEAAmB,CAAnB,uBAAA,sEAAmB,CAAnB,mBAAA,+DAAmB,CAAnB,mBAAA,+DAAmB,CAAnB,qBAAA,oEAAmB,CAAnB,qBAAA,oEAAmB,CAAnB,sBAAA,mEAAmB,CAAnB,sBAAA,oEAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,gBAAA,iEAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,oBAAA,+BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,mBAAA,sCAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,eAAA,uBAAmB","file":"tailwind.css","sourcesContent":["@tailwind utilities;\n"]}

package/dist/tokens/build/js/tokens.dark.js

@@ -296,6 +296,15 @@ const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)';
 const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
 const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
 const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
+const GL_ICON_COLOR_DEFAULT = '#dcdcde'; // Used for the default icon color. Can be paired with default text.
+const GL_ICON_COLOR_SUBTLE = '#a4a3a8'; // Used for a static or decorational icon. Can be paired with subtle text.
+const GL_ICON_COLOR_STRONG = '#fbfafd'; // Used for an icon with the highest contrast.
+const GL_ICON_COLOR_DISABLED = '#737278'; // Used for an icon within a disabled section.
+const GL_ICON_COLOR_LINK = '#63a6e9'; // Used for an icon within a link.
+const GL_ICON_COLOR_INFO = '#63a6e9'; // Used for an icon associated with information or help.
+const GL_ICON_COLOR_WARNING = '#d99530'; // Used for an icon associated with a warning.
+const GL_ICON_COLOR_DANGER = '#f57f6c'; // Used for an icon associated with an error or danger.
+const GL_ICON_COLOR_SUCCESS = '#52b87a'; // Used for an icon associated with success or validity.
 const GL_LINE_HEIGHT_12 = '0.75rem';
 const GL_LINE_HEIGHT_16 = '1rem';
 const GL_LINE_HEIGHT_20 = '1.25rem';
@@ -318,4 +327,4 @@ const GL_TEXT_COLOR_DANGER = '#f57f6c'; // Used for text indicating a problem, c
 const GL_TEXT_COLOR_SUCCESS = '#52b87a'; // Used for text indicating success or validity.
 const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.
 
-export { BLACK, BLUE_100, BLUE_200, BLUE_300, BLUE_400, BLUE_50, BLUE_500, BLUE_600, BLUE_700, BLUE_800, BLUE_900, BLUE_950, BRAND_CHARCOAL, BRAND_GRAY_01, BRAND_GRAY_02, BRAND_GRAY_03, BRAND_GRAY_04, BRAND_GRAY_05, BRAND_ORANGE_01, BRAND_ORANGE_02, BRAND_ORANGE_03, BRAND_PURPLE_01, BRAND_PURPLE_02, DATA_VIZ_AQUA_100, DATA_VIZ_AQUA_200, DATA_VIZ_AQUA_300, DATA_VIZ_AQUA_400, DATA_VIZ_AQUA_50, DATA_VIZ_AQUA_500, DATA_VIZ_AQUA_600, DATA_VIZ_AQUA_700, DATA_VIZ_AQUA_800, DATA_VIZ_AQUA_900, DATA_VIZ_AQUA_950, DATA_VIZ_BLUE_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_300, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_50, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_700, DATA_VIZ_BLUE_800, DATA_VIZ_BLUE_900, DATA_VIZ_BLUE_950, DATA_VIZ_GREEN_100, DATA_VIZ_GREEN_200, DATA_VIZ_GREEN_300, DATA_VIZ_GREEN_400, DATA_VIZ_GREEN_50, DATA_VIZ_GREEN_500, DATA_VIZ_GREEN_600, DATA_VIZ_GREEN_700, DATA_VIZ_GREEN_800, DATA_VIZ_GREEN_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_MAGENTA_50, DATA_VIZ_MAGENTA_500, DATA_VIZ_MAGENTA_600, DATA_VIZ_MAGENTA_700, DATA_VIZ_MAGENTA_800, DATA_VIZ_MAGENTA_900, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_100, DATA_VIZ_ORANGE_200, DATA_VIZ_ORANGE_300, DATA_VIZ_ORANGE_400, DATA_VIZ_ORANGE_50, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_ORANGE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_ORANGE_900, DATA_VIZ_ORANGE_950, GL_BACKGROUND_COLOR_DEFAULT, GL_BACKGROUND_COLOR_DISABLED, GL_BACKGROUND_COLOR_STRONG, GL_BACKGROUND_COLOR_SUBTLE, GL_COLOR_BLUE_100, GL_COLOR_BLUE_200, GL_COLOR_BLUE_300, GL_COLOR_BLUE_400, GL_COLOR_BLUE_50, GL_COLOR_BLUE_500, GL_COLOR_BLUE_600, GL_COLOR_BLUE_700, GL_COLOR_BLUE_800, GL_COLOR_BLUE_900, GL_COLOR_BLUE_950, GL_COLOR_GREEN_100, GL_COLOR_GREEN_200, GL_COLOR_GREEN_300, GL_COLOR_GREEN_400, GL_COLOR_GREEN_50, GL_COLOR_GREEN_500, GL_COLOR_GREEN_600, GL_COLOR_GREEN_700, GL_COLOR_GREEN_800, GL_COLOR_GREEN_900, GL_COLOR_GREEN_950, GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_10, GL_COLOR_NEUTRAL_100, GL_COLOR_NEUTRAL_1000, GL_COLOR_NEUTRAL_200, GL_COLOR_NEUTRAL_300, GL_COLOR_NEUTRAL_400, GL_COLOR_NEUTRAL_50, GL_COLOR_NEUTRAL_500, GL_COLOR_NEUTRAL_600, GL_COLOR_NEUTRAL_700, GL_COLOR_NEUTRAL_800, GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_950, GL_COLOR_ORANGE_100, GL_COLOR_ORANGE_200, GL_COLOR_ORANGE_300, GL_COLOR_ORANGE_400, GL_COLOR_ORANGE_50, GL_COLOR_ORANGE_500, GL_COLOR_ORANGE_600, GL_COLOR_ORANGE_700, GL_COLOR_ORANGE_800, GL_COLOR_ORANGE_900, GL_COLOR_ORANGE_950, GL_COLOR_PURPLE_100, GL_COLOR_PURPLE_200, GL_COLOR_PURPLE_300, GL_COLOR_PURPLE_400, GL_COLOR_PURPLE_50, GL_COLOR_PURPLE_500, GL_COLOR_PURPLE_600, GL_COLOR_PURPLE_700, GL_COLOR_PURPLE_800, GL_COLOR_PURPLE_900, GL_COLOR_PURPLE_950, GL_COLOR_RED_100, GL_COLOR_RED_200, GL_COLOR_RED_300, GL_COLOR_RED_400, GL_COLOR_RED_50, GL_COLOR_RED_500, GL_COLOR_RED_600, GL_COLOR_RED_700, GL_COLOR_RED_800, GL_COLOR_RED_900, GL_COLOR_RED_950, GL_LINE_HEIGHT_12, GL_LINE_HEIGHT_16, GL_LINE_HEIGHT_20, GL_LINE_HEIGHT_24, GL_LINE_HEIGHT_28, GL_LINE_HEIGHT_32, GL_LINE_HEIGHT_36, GL_LINE_HEIGHT_42, GL_LINE_HEIGHT_44, GL_LINE_HEIGHT_52, GL_TEXT_COLOR_DANGER, GL_TEXT_COLOR_DEFAULT, GL_TEXT_COLOR_DISABLED, GL_TEXT_COLOR_HEADING, GL_TEXT_COLOR_LINK, GL_TEXT_COLOR_STRONG, GL_TEXT_COLOR_SUBTLE, GL_TEXT_COLOR_SUCCESS, GL_TEXT_PRIMARY, GL_TEXT_SECONDARY, GL_TEXT_TERTIARY, GRAY_10, GRAY_100, GRAY_200, GRAY_300, GRAY_400, GRAY_50, GRAY_500, GRAY_600, GRAY_700, GRAY_800, GRAY_900, GRAY_950, GREEN_100, GREEN_200, GREEN_300, GREEN_400, GREEN_50, GREEN_500, GREEN_600, GREEN_700, GREEN_800, GREEN_900, GREEN_950, ORANGE_100, ORANGE_200, ORANGE_300, ORANGE_400, ORANGE_50, ORANGE_500, ORANGE_600, ORANGE_700, ORANGE_800, ORANGE_900, ORANGE_950, PURPLE_100, PURPLE_200, PURPLE_300, PURPLE_400, PURPLE_50, PURPLE_500, PURPLE_600, PURPLE_700, PURPLE_800, PURPLE_900, PURPLE_950, RED_100, RED_200, RED_300, RED_400, RED_50, RED_500, RED_600, RED_700, RED_800, RED_900, RED_950, THEME_BLUE_10, THEME_BLUE_100, THEME_BLUE_200, THEME_BLUE_300, THEME_BLUE_400, THEME_BLUE_50, THEME_BLUE_500, THEME_BLUE_600, THEME_BLUE_700, THEME_BLUE_800, THEME_BLUE_900, THEME_BLUE_950, THEME_GREEN_10, THEME_GREEN_100, THEME_GREEN_200, THEME_GREEN_300, THEME_GREEN_400, THEME_GREEN_50, THEME_GREEN_500, THEME_GREEN_600, THEME_GREEN_700, THEME_GREEN_800, THEME_GREEN_900, THEME_GREEN_950, THEME_INDIGO_10, THEME_INDIGO_100, THEME_INDIGO_200, THEME_INDIGO_300, THEME_INDIGO_400, THEME_INDIGO_50, THEME_INDIGO_500, THEME_INDIGO_600, THEME_INDIGO_700, THEME_INDIGO_800, THEME_INDIGO_900, THEME_INDIGO_950, THEME_LIGHT_BLUE_10, THEME_LIGHT_BLUE_100, THEME_LIGHT_BLUE_200, THEME_LIGHT_BLUE_300, THEME_LIGHT_BLUE_400, THEME_LIGHT_BLUE_50, THEME_LIGHT_BLUE_500, THEME_LIGHT_BLUE_600, THEME_LIGHT_BLUE_700, THEME_LIGHT_BLUE_800, THEME_LIGHT_BLUE_900, THEME_LIGHT_BLUE_950, THEME_LIGHT_RED_10, THEME_LIGHT_RED_100, THEME_LIGHT_RED_200, THEME_LIGHT_RED_300, THEME_LIGHT_RED_400, THEME_LIGHT_RED_50, THEME_LIGHT_RED_500, THEME_LIGHT_RED_600, THEME_LIGHT_RED_700, THEME_LIGHT_RED_800, THEME_LIGHT_RED_900, THEME_LIGHT_RED_950, THEME_RED_10, THEME_RED_100, THEME_RED_200, THEME_RED_300, THEME_RED_400, THEME_RED_50, THEME_RED_500, THEME_RED_600, THEME_RED_700, THEME_RED_800, THEME_RED_900, THEME_RED_950, T_GRAY_A_02, T_GRAY_A_04, T_GRAY_A_06, T_GRAY_A_08, T_GRAY_A_16, T_GRAY_A_24, T_WHITE_A_02, T_WHITE_A_04, T_WHITE_A_06, T_WHITE_A_08, T_WHITE_A_16, T_WHITE_A_24, T_WHITE_A_36, WHITE };
+export { BLACK, BLUE_100, BLUE_200, BLUE_300, BLUE_400, BLUE_50, BLUE_500, BLUE_600, BLUE_700, BLUE_800, BLUE_900, BLUE_950, BRAND_CHARCOAL, BRAND_GRAY_01, BRAND_GRAY_02, BRAND_GRAY_03, BRAND_GRAY_04, BRAND_GRAY_05, BRAND_ORANGE_01, BRAND_ORANGE_02, BRAND_ORANGE_03, BRAND_PURPLE_01, BRAND_PURPLE_02, DATA_VIZ_AQUA_100, DATA_VIZ_AQUA_200, DATA_VIZ_AQUA_300, DATA_VIZ_AQUA_400, DATA_VIZ_AQUA_50, DATA_VIZ_AQUA_500, DATA_VIZ_AQUA_600, DATA_VIZ_AQUA_700, DATA_VIZ_AQUA_800, DATA_VIZ_AQUA_900, DATA_VIZ_AQUA_950, DATA_VIZ_BLUE_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_300, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_50, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_700, DATA_VIZ_BLUE_800, DATA_VIZ_BLUE_900, DATA_VIZ_BLUE_950, DATA_VIZ_GREEN_100, DATA_VIZ_GREEN_200, DATA_VIZ_GREEN_300, DATA_VIZ_GREEN_400, DATA_VIZ_GREEN_50, DATA_VIZ_GREEN_500, DATA_VIZ_GREEN_600, DATA_VIZ_GREEN_700, DATA_VIZ_GREEN_800, DATA_VIZ_GREEN_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_MAGENTA_50, DATA_VIZ_MAGENTA_500, DATA_VIZ_MAGENTA_600, DATA_VIZ_MAGENTA_700, DATA_VIZ_MAGENTA_800, DATA_VIZ_MAGENTA_900, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_100, DATA_VIZ_ORANGE_200, DATA_VIZ_ORANGE_300, DATA_VIZ_ORANGE_400, DATA_VIZ_ORANGE_50, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_ORANGE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_ORANGE_900, DATA_VIZ_ORANGE_950, GL_BACKGROUND_COLOR_DEFAULT, GL_BACKGROUND_COLOR_DISABLED, GL_BACKGROUND_COLOR_STRONG, GL_BACKGROUND_COLOR_SUBTLE, GL_COLOR_BLUE_100, GL_COLOR_BLUE_200, GL_COLOR_BLUE_300, GL_COLOR_BLUE_400, GL_COLOR_BLUE_50, GL_COLOR_BLUE_500, GL_COLOR_BLUE_600, GL_COLOR_BLUE_700, GL_COLOR_BLUE_800, GL_COLOR_BLUE_900, GL_COLOR_BLUE_950, GL_COLOR_GREEN_100, GL_COLOR_GREEN_200, GL_COLOR_GREEN_300, GL_COLOR_GREEN_400, GL_COLOR_GREEN_50, GL_COLOR_GREEN_500, GL_COLOR_GREEN_600, GL_COLOR_GREEN_700, GL_COLOR_GREEN_800, GL_COLOR_GREEN_900, GL_COLOR_GREEN_950, GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_10, GL_COLOR_NEUTRAL_100, GL_COLOR_NEUTRAL_1000, GL_COLOR_NEUTRAL_200, GL_COLOR_NEUTRAL_300, GL_COLOR_NEUTRAL_400, GL_COLOR_NEUTRAL_50, GL_COLOR_NEUTRAL_500, GL_COLOR_NEUTRAL_600, GL_COLOR_NEUTRAL_700, GL_COLOR_NEUTRAL_800, GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_950, GL_COLOR_ORANGE_100, GL_COLOR_ORANGE_200, GL_COLOR_ORANGE_300, GL_COLOR_ORANGE_400, GL_COLOR_ORANGE_50, GL_COLOR_ORANGE_500, GL_COLOR_ORANGE_600, GL_COLOR_ORANGE_700, GL_COLOR_ORANGE_800, GL_COLOR_ORANGE_900, GL_COLOR_ORANGE_950, GL_COLOR_PURPLE_100, GL_COLOR_PURPLE_200, GL_COLOR_PURPLE_300, GL_COLOR_PURPLE_400, GL_COLOR_PURPLE_50, GL_COLOR_PURPLE_500, GL_COLOR_PURPLE_600, GL_COLOR_PURPLE_700, GL_COLOR_PURPLE_800, GL_COLOR_PURPLE_900, GL_COLOR_PURPLE_950, GL_COLOR_RED_100, GL_COLOR_RED_200, GL_COLOR_RED_300, GL_COLOR_RED_400, GL_COLOR_RED_50, GL_COLOR_RED_500, GL_COLOR_RED_600, GL_COLOR_RED_700, GL_COLOR_RED_800, GL_COLOR_RED_900, GL_COLOR_RED_950, GL_ICON_COLOR_DANGER, GL_ICON_COLOR_DEFAULT, GL_ICON_COLOR_DISABLED, GL_ICON_COLOR_INFO, GL_ICON_COLOR_LINK, GL_ICON_COLOR_STRONG, GL_ICON_COLOR_SUBTLE, GL_ICON_COLOR_SUCCESS, GL_ICON_COLOR_WARNING, GL_LINE_HEIGHT_12, GL_LINE_HEIGHT_16, GL_LINE_HEIGHT_20, GL_LINE_HEIGHT_24, GL_LINE_HEIGHT_28, GL_LINE_HEIGHT_32, GL_LINE_HEIGHT_36, GL_LINE_HEIGHT_42, GL_LINE_HEIGHT_44, GL_LINE_HEIGHT_52, GL_TEXT_COLOR_DANGER, GL_TEXT_COLOR_DEFAULT, GL_TEXT_COLOR_DISABLED, GL_TEXT_COLOR_HEADING, GL_TEXT_COLOR_LINK, GL_TEXT_COLOR_STRONG, GL_TEXT_COLOR_SUBTLE, GL_TEXT_COLOR_SUCCESS, GL_TEXT_PRIMARY, GL_TEXT_SECONDARY, GL_TEXT_TERTIARY, GRAY_10, GRAY_100, GRAY_200, GRAY_300, GRAY_400, GRAY_50, GRAY_500, GRAY_600, GRAY_700, GRAY_800, GRAY_900, GRAY_950, GREEN_100, GREEN_200, GREEN_300, GREEN_400, GREEN_50, GREEN_500, GREEN_600, GREEN_700, GREEN_800, GREEN_900, GREEN_950, ORANGE_100, ORANGE_200, ORANGE_300, ORANGE_400, ORANGE_50, ORANGE_500, ORANGE_600, ORANGE_700, ORANGE_800, ORANGE_900, ORANGE_950, PURPLE_100, PURPLE_200, PURPLE_300, PURPLE_400, PURPLE_50, PURPLE_500, PURPLE_600, PURPLE_700, PURPLE_800, PURPLE_900, PURPLE_950, RED_100, RED_200, RED_300, RED_400, RED_50, RED_500, RED_600, RED_700, RED_800, RED_900, RED_950, THEME_BLUE_10, THEME_BLUE_100, THEME_BLUE_200, THEME_BLUE_300, THEME_BLUE_400, THEME_BLUE_50, THEME_BLUE_500, THEME_BLUE_600, THEME_BLUE_700, THEME_BLUE_800, THEME_BLUE_900, THEME_BLUE_950, THEME_GREEN_10, THEME_GREEN_100, THEME_GREEN_200, THEME_GREEN_300, THEME_GREEN_400, THEME_GREEN_50, THEME_GREEN_500, THEME_GREEN_600, THEME_GREEN_700, THEME_GREEN_800, THEME_GREEN_900, THEME_GREEN_950, THEME_INDIGO_10, THEME_INDIGO_100, THEME_INDIGO_200, THEME_INDIGO_300, THEME_INDIGO_400, THEME_INDIGO_50, THEME_INDIGO_500, THEME_INDIGO_600, THEME_INDIGO_700, THEME_INDIGO_800, THEME_INDIGO_900, THEME_INDIGO_950, THEME_LIGHT_BLUE_10, THEME_LIGHT_BLUE_100, THEME_LIGHT_BLUE_200, THEME_LIGHT_BLUE_300, THEME_LIGHT_BLUE_400, THEME_LIGHT_BLUE_50, THEME_LIGHT_BLUE_500, THEME_LIGHT_BLUE_600, THEME_LIGHT_BLUE_700, THEME_LIGHT_BLUE_800, THEME_LIGHT_BLUE_900, THEME_LIGHT_BLUE_950, THEME_LIGHT_RED_10, THEME_LIGHT_RED_100, THEME_LIGHT_RED_200, THEME_LIGHT_RED_300, THEME_LIGHT_RED_400, THEME_LIGHT_RED_50, THEME_LIGHT_RED_500, THEME_LIGHT_RED_600, THEME_LIGHT_RED_700, THEME_LIGHT_RED_800, THEME_LIGHT_RED_900, THEME_LIGHT_RED_950, THEME_RED_10, THEME_RED_100, THEME_RED_200, THEME_RED_300, THEME_RED_400, THEME_RED_50, THEME_RED_500, THEME_RED_600, THEME_RED_700, THEME_RED_800, THEME_RED_900, THEME_RED_950, T_GRAY_A_02, T_GRAY_A_04, T_GRAY_A_06, T_GRAY_A_08, T_GRAY_A_16, T_GRAY_A_24, T_WHITE_A_02, T_WHITE_A_04, T_WHITE_A_06, T_WHITE_A_08, T_WHITE_A_16, T_WHITE_A_24, T_WHITE_A_36, WHITE };

package/dist/tokens/build/js/tokens.js

@@ -296,6 +296,15 @@ const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)';
 const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
 const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
 const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
+const GL_ICON_COLOR_DEFAULT = '#535158'; // Used for the default icon color. Can be paired with default text.
+const GL_ICON_COLOR_SUBTLE = '#737278'; // Used for a static or decorational icon. Can be paired with subtle text.
+const GL_ICON_COLOR_STRONG = '#333238'; // Used for an icon with the highest contrast.
+const GL_ICON_COLOR_DISABLED = '#a4a3a8'; // Used for an icon within a disabled section.
+const GL_ICON_COLOR_LINK = '#1068bf'; // Used for an icon within a link.
+const GL_ICON_COLOR_INFO = '#1068bf'; // Used for an icon associated with information or help.
+const GL_ICON_COLOR_WARNING = '#9e5400'; // Used for an icon associated with a warning.
+const GL_ICON_COLOR_DANGER = '#c91c00'; // Used for an icon associated with an error or danger.
+const GL_ICON_COLOR_SUCCESS = '#217645'; // Used for an icon associated with success or validity.
 const GL_LINE_HEIGHT_12 = '0.75rem';
 const GL_LINE_HEIGHT_16 = '1rem';
 const GL_LINE_HEIGHT_20 = '1.25rem';
@@ -318,4 +327,4 @@ const GL_TEXT_COLOR_DANGER = '#c91c00'; // Used for text indicating a problem, c
 const GL_TEXT_COLOR_SUCCESS = '#217645'; // Used for text indicating success or validity.
 const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.
 
-export { BLACK, BLUE_100, BLUE_200, BLUE_300, BLUE_400, BLUE_50, BLUE_500, BLUE_600, BLUE_700, BLUE_800, BLUE_900, BLUE_950, BRAND_CHARCOAL, BRAND_GRAY_01, BRAND_GRAY_02, BRAND_GRAY_03, BRAND_GRAY_04, BRAND_GRAY_05, BRAND_ORANGE_01, BRAND_ORANGE_02, BRAND_ORANGE_03, BRAND_PURPLE_01, BRAND_PURPLE_02, DATA_VIZ_AQUA_100, DATA_VIZ_AQUA_200, DATA_VIZ_AQUA_300, DATA_VIZ_AQUA_400, DATA_VIZ_AQUA_50, DATA_VIZ_AQUA_500, DATA_VIZ_AQUA_600, DATA_VIZ_AQUA_700, DATA_VIZ_AQUA_800, DATA_VIZ_AQUA_900, DATA_VIZ_AQUA_950, DATA_VIZ_BLUE_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_300, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_50, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_700, DATA_VIZ_BLUE_800, DATA_VIZ_BLUE_900, DATA_VIZ_BLUE_950, DATA_VIZ_GREEN_100, DATA_VIZ_GREEN_200, DATA_VIZ_GREEN_300, DATA_VIZ_GREEN_400, DATA_VIZ_GREEN_50, DATA_VIZ_GREEN_500, DATA_VIZ_GREEN_600, DATA_VIZ_GREEN_700, DATA_VIZ_GREEN_800, DATA_VIZ_GREEN_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_MAGENTA_50, DATA_VIZ_MAGENTA_500, DATA_VIZ_MAGENTA_600, DATA_VIZ_MAGENTA_700, DATA_VIZ_MAGENTA_800, DATA_VIZ_MAGENTA_900, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_100, DATA_VIZ_ORANGE_200, DATA_VIZ_ORANGE_300, DATA_VIZ_ORANGE_400, DATA_VIZ_ORANGE_50, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_ORANGE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_ORANGE_900, DATA_VIZ_ORANGE_950, GL_BACKGROUND_COLOR_DEFAULT, GL_BACKGROUND_COLOR_DISABLED, GL_BACKGROUND_COLOR_STRONG, GL_BACKGROUND_COLOR_SUBTLE, GL_COLOR_BLUE_100, GL_COLOR_BLUE_200, GL_COLOR_BLUE_300, GL_COLOR_BLUE_400, GL_COLOR_BLUE_50, GL_COLOR_BLUE_500, GL_COLOR_BLUE_600, GL_COLOR_BLUE_700, GL_COLOR_BLUE_800, GL_COLOR_BLUE_900, GL_COLOR_BLUE_950, GL_COLOR_GREEN_100, GL_COLOR_GREEN_200, GL_COLOR_GREEN_300, GL_COLOR_GREEN_400, GL_COLOR_GREEN_50, GL_COLOR_GREEN_500, GL_COLOR_GREEN_600, GL_COLOR_GREEN_700, GL_COLOR_GREEN_800, GL_COLOR_GREEN_900, GL_COLOR_GREEN_950, GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_10, GL_COLOR_NEUTRAL_100, GL_COLOR_NEUTRAL_1000, GL_COLOR_NEUTRAL_200, GL_COLOR_NEUTRAL_300, GL_COLOR_NEUTRAL_400, GL_COLOR_NEUTRAL_50, GL_COLOR_NEUTRAL_500, GL_COLOR_NEUTRAL_600, GL_COLOR_NEUTRAL_700, GL_COLOR_NEUTRAL_800, GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_950, GL_COLOR_ORANGE_100, GL_COLOR_ORANGE_200, GL_COLOR_ORANGE_300, GL_COLOR_ORANGE_400, GL_COLOR_ORANGE_50, GL_COLOR_ORANGE_500, GL_COLOR_ORANGE_600, GL_COLOR_ORANGE_700, GL_COLOR_ORANGE_800, GL_COLOR_ORANGE_900, GL_COLOR_ORANGE_950, GL_COLOR_PURPLE_100, GL_COLOR_PURPLE_200, GL_COLOR_PURPLE_300, GL_COLOR_PURPLE_400, GL_COLOR_PURPLE_50, GL_COLOR_PURPLE_500, GL_COLOR_PURPLE_600, GL_COLOR_PURPLE_700, GL_COLOR_PURPLE_800, GL_COLOR_PURPLE_900, GL_COLOR_PURPLE_950, GL_COLOR_RED_100, GL_COLOR_RED_200, GL_COLOR_RED_300, GL_COLOR_RED_400, GL_COLOR_RED_50, GL_COLOR_RED_500, GL_COLOR_RED_600, GL_COLOR_RED_700, GL_COLOR_RED_800, GL_COLOR_RED_900, GL_COLOR_RED_950, GL_LINE_HEIGHT_12, GL_LINE_HEIGHT_16, GL_LINE_HEIGHT_20, GL_LINE_HEIGHT_24, GL_LINE_HEIGHT_28, GL_LINE_HEIGHT_32, GL_LINE_HEIGHT_36, GL_LINE_HEIGHT_42, GL_LINE_HEIGHT_44, GL_LINE_HEIGHT_52, GL_TEXT_COLOR_DANGER, GL_TEXT_COLOR_DEFAULT, GL_TEXT_COLOR_DISABLED, GL_TEXT_COLOR_HEADING, GL_TEXT_COLOR_LINK, GL_TEXT_COLOR_STRONG, GL_TEXT_COLOR_SUBTLE, GL_TEXT_COLOR_SUCCESS, GL_TEXT_PRIMARY, GL_TEXT_SECONDARY, GL_TEXT_TERTIARY, GRAY_10, GRAY_100, GRAY_200, GRAY_300, GRAY_400, GRAY_50, GRAY_500, GRAY_600, GRAY_700, GRAY_800, GRAY_900, GRAY_950, GREEN_100, GREEN_200, GREEN_300, GREEN_400, GREEN_50, GREEN_500, GREEN_600, GREEN_700, GREEN_800, GREEN_900, GREEN_950, ORANGE_100, ORANGE_200, ORANGE_300, ORANGE_400, ORANGE_50, ORANGE_500, ORANGE_600, ORANGE_700, ORANGE_800, ORANGE_900, ORANGE_950, PURPLE_100, PURPLE_200, PURPLE_300, PURPLE_400, PURPLE_50, PURPLE_500, PURPLE_600, PURPLE_700, PURPLE_800, PURPLE_900, PURPLE_950, RED_100, RED_200, RED_300, RED_400, RED_50, RED_500, RED_600, RED_700, RED_800, RED_900, RED_950, THEME_BLUE_10, THEME_BLUE_100, THEME_BLUE_200, THEME_BLUE_300, THEME_BLUE_400, THEME_BLUE_50, THEME_BLUE_500, THEME_BLUE_600, THEME_BLUE_700, THEME_BLUE_800, THEME_BLUE_900, THEME_BLUE_950, THEME_GREEN_10, THEME_GREEN_100, THEME_GREEN_200, THEME_GREEN_300, THEME_GREEN_400, THEME_GREEN_50, THEME_GREEN_500, THEME_GREEN_600, THEME_GREEN_700, THEME_GREEN_800, THEME_GREEN_900, THEME_GREEN_950, THEME_INDIGO_10, THEME_INDIGO_100, THEME_INDIGO_200, THEME_INDIGO_300, THEME_INDIGO_400, THEME_INDIGO_50, THEME_INDIGO_500, THEME_INDIGO_600, THEME_INDIGO_700, THEME_INDIGO_800, THEME_INDIGO_900, THEME_INDIGO_950, THEME_LIGHT_BLUE_10, THEME_LIGHT_BLUE_100, THEME_LIGHT_BLUE_200, THEME_LIGHT_BLUE_300, THEME_LIGHT_BLUE_400, THEME_LIGHT_BLUE_50, THEME_LIGHT_BLUE_500, THEME_LIGHT_BLUE_600, THEME_LIGHT_BLUE_700, THEME_LIGHT_BLUE_800, THEME_LIGHT_BLUE_900, THEME_LIGHT_BLUE_950, THEME_LIGHT_RED_10, THEME_LIGHT_RED_100, THEME_LIGHT_RED_200, THEME_LIGHT_RED_300, THEME_LIGHT_RED_400, THEME_LIGHT_RED_50, THEME_LIGHT_RED_500, THEME_LIGHT_RED_600, THEME_LIGHT_RED_700, THEME_LIGHT_RED_800, THEME_LIGHT_RED_900, THEME_LIGHT_RED_950, THEME_RED_10, THEME_RED_100, THEME_RED_200, THEME_RED_300, THEME_RED_400, THEME_RED_50, THEME_RED_500, THEME_RED_600, THEME_RED_700, THEME_RED_800, THEME_RED_900, THEME_RED_950, T_GRAY_A_02, T_GRAY_A_04, T_GRAY_A_06, T_GRAY_A_08, T_GRAY_A_16, T_GRAY_A_24, T_WHITE_A_02, T_WHITE_A_04, T_WHITE_A_06, T_WHITE_A_08, T_WHITE_A_16, T_WHITE_A_24, T_WHITE_A_36, WHITE };
+export { BLACK, BLUE_100, BLUE_200, BLUE_300, BLUE_400, BLUE_50, BLUE_500, BLUE_600, BLUE_700, BLUE_800, BLUE_900, BLUE_950, BRAND_CHARCOAL, BRAND_GRAY_01, BRAND_GRAY_02, BRAND_GRAY_03, BRAND_GRAY_04, BRAND_GRAY_05, BRAND_ORANGE_01, BRAND_ORANGE_02, BRAND_ORANGE_03, BRAND_PURPLE_01, BRAND_PURPLE_02, DATA_VIZ_AQUA_100, DATA_VIZ_AQUA_200, DATA_VIZ_AQUA_300, DATA_VIZ_AQUA_400, DATA_VIZ_AQUA_50, DATA_VIZ_AQUA_500, DATA_VIZ_AQUA_600, DATA_VIZ_AQUA_700, DATA_VIZ_AQUA_800, DATA_VIZ_AQUA_900, DATA_VIZ_AQUA_950, DATA_VIZ_BLUE_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_300, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_50, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_700, DATA_VIZ_BLUE_800, DATA_VIZ_BLUE_900, DATA_VIZ_BLUE_950, DATA_VIZ_GREEN_100, DATA_VIZ_GREEN_200, DATA_VIZ_GREEN_300, DATA_VIZ_GREEN_400, DATA_VIZ_GREEN_50, DATA_VIZ_GREEN_500, DATA_VIZ_GREEN_600, DATA_VIZ_GREEN_700, DATA_VIZ_GREEN_800, DATA_VIZ_GREEN_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_MAGENTA_50, DATA_VIZ_MAGENTA_500, DATA_VIZ_MAGENTA_600, DATA_VIZ_MAGENTA_700, DATA_VIZ_MAGENTA_800, DATA_VIZ_MAGENTA_900, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_100, DATA_VIZ_ORANGE_200, DATA_VIZ_ORANGE_300, DATA_VIZ_ORANGE_400, DATA_VIZ_ORANGE_50, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_ORANGE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_ORANGE_900, DATA_VIZ_ORANGE_950, GL_BACKGROUND_COLOR_DEFAULT, GL_BACKGROUND_COLOR_DISABLED, GL_BACKGROUND_COLOR_STRONG, GL_BACKGROUND_COLOR_SUBTLE, GL_COLOR_BLUE_100, GL_COLOR_BLUE_200, GL_COLOR_BLUE_300, GL_COLOR_BLUE_400, GL_COLOR_BLUE_50, GL_COLOR_BLUE_500, GL_COLOR_BLUE_600, GL_COLOR_BLUE_700, GL_COLOR_BLUE_800, GL_COLOR_BLUE_900, GL_COLOR_BLUE_950, GL_COLOR_GREEN_100, GL_COLOR_GREEN_200, GL_COLOR_GREEN_300, GL_COLOR_GREEN_400, GL_COLOR_GREEN_50, GL_COLOR_GREEN_500, GL_COLOR_GREEN_600, GL_COLOR_GREEN_700, GL_COLOR_GREEN_800, GL_COLOR_GREEN_900, GL_COLOR_GREEN_950, GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_10, GL_COLOR_NEUTRAL_100, GL_COLOR_NEUTRAL_1000, GL_COLOR_NEUTRAL_200, GL_COLOR_NEUTRAL_300, GL_COLOR_NEUTRAL_400, GL_COLOR_NEUTRAL_50, GL_COLOR_NEUTRAL_500, GL_COLOR_NEUTRAL_600, GL_COLOR_NEUTRAL_700, GL_COLOR_NEUTRAL_800, GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_950, GL_COLOR_ORANGE_100, GL_COLOR_ORANGE_200, GL_COLOR_ORANGE_300, GL_COLOR_ORANGE_400, GL_COLOR_ORANGE_50, GL_COLOR_ORANGE_500, GL_COLOR_ORANGE_600, GL_COLOR_ORANGE_700, GL_COLOR_ORANGE_800, GL_COLOR_ORANGE_900, GL_COLOR_ORANGE_950, GL_COLOR_PURPLE_100, GL_COLOR_PURPLE_200, GL_COLOR_PURPLE_300, GL_COLOR_PURPLE_400, GL_COLOR_PURPLE_50, GL_COLOR_PURPLE_500, GL_COLOR_PURPLE_600, GL_COLOR_PURPLE_700, GL_COLOR_PURPLE_800, GL_COLOR_PURPLE_900, GL_COLOR_PURPLE_950, GL_COLOR_RED_100, GL_COLOR_RED_200, GL_COLOR_RED_300, GL_COLOR_RED_400, GL_COLOR_RED_50, GL_COLOR_RED_500, GL_COLOR_RED_600, GL_COLOR_RED_700, GL_COLOR_RED_800, GL_COLOR_RED_900, GL_COLOR_RED_950, GL_ICON_COLOR_DANGER, GL_ICON_COLOR_DEFAULT, GL_ICON_COLOR_DISABLED, GL_ICON_COLOR_INFO, GL_ICON_COLOR_LINK, GL_ICON_COLOR_STRONG, GL_ICON_COLOR_SUBTLE, GL_ICON_COLOR_SUCCESS, GL_ICON_COLOR_WARNING, GL_LINE_HEIGHT_12, GL_LINE_HEIGHT_16, GL_LINE_HEIGHT_20, GL_LINE_HEIGHT_24, GL_LINE_HEIGHT_28, GL_LINE_HEIGHT_32, GL_LINE_HEIGHT_36, GL_LINE_HEIGHT_42, GL_LINE_HEIGHT_44, GL_LINE_HEIGHT_52, GL_TEXT_COLOR_DANGER, GL_TEXT_COLOR_DEFAULT, GL_TEXT_COLOR_DISABLED, GL_TEXT_COLOR_HEADING, GL_TEXT_COLOR_LINK, GL_TEXT_COLOR_STRONG, GL_TEXT_COLOR_SUBTLE, GL_TEXT_COLOR_SUCCESS, GL_TEXT_PRIMARY, GL_TEXT_SECONDARY, GL_TEXT_TERTIARY, GRAY_10, GRAY_100, GRAY_200, GRAY_300, GRAY_400, GRAY_50, GRAY_500, GRAY_600, GRAY_700, GRAY_800, GRAY_900, GRAY_950, GREEN_100, GREEN_200, GREEN_300, GREEN_400, GREEN_50, GREEN_500, GREEN_600, GREEN_700, GREEN_800, GREEN_900, GREEN_950, ORANGE_100, ORANGE_200, ORANGE_300, ORANGE_400, ORANGE_50, ORANGE_500, ORANGE_600, ORANGE_700, ORANGE_800, ORANGE_900, ORANGE_950, PURPLE_100, PURPLE_200, PURPLE_300, PURPLE_400, PURPLE_50, PURPLE_500, PURPLE_600, PURPLE_700, PURPLE_800, PURPLE_900, PURPLE_950, RED_100, RED_200, RED_300, RED_400, RED_50, RED_500, RED_600, RED_700, RED_800, RED_900, RED_950, THEME_BLUE_10, THEME_BLUE_100, THEME_BLUE_200, THEME_BLUE_300, THEME_BLUE_400, THEME_BLUE_50, THEME_BLUE_500, THEME_BLUE_600, THEME_BLUE_700, THEME_BLUE_800, THEME_BLUE_900, THEME_BLUE_950, THEME_GREEN_10, THEME_GREEN_100, THEME_GREEN_200, THEME_GREEN_300, THEME_GREEN_400, THEME_GREEN_50, THEME_GREEN_500, THEME_GREEN_600, THEME_GREEN_700, THEME_GREEN_800, THEME_GREEN_900, THEME_GREEN_950, THEME_INDIGO_10, THEME_INDIGO_100, THEME_INDIGO_200, THEME_INDIGO_300, THEME_INDIGO_400, THEME_INDIGO_50, THEME_INDIGO_500, THEME_INDIGO_600, THEME_INDIGO_700, THEME_INDIGO_800, THEME_INDIGO_900, THEME_INDIGO_950, THEME_LIGHT_BLUE_10, THEME_LIGHT_BLUE_100, THEME_LIGHT_BLUE_200, THEME_LIGHT_BLUE_300, THEME_LIGHT_BLUE_400, THEME_LIGHT_BLUE_50, THEME_LIGHT_BLUE_500, THEME_LIGHT_BLUE_600, THEME_LIGHT_BLUE_700, THEME_LIGHT_BLUE_800, THEME_LIGHT_BLUE_900, THEME_LIGHT_BLUE_950, THEME_LIGHT_RED_10, THEME_LIGHT_RED_100, THEME_LIGHT_RED_200, THEME_LIGHT_RED_300, THEME_LIGHT_RED_400, THEME_LIGHT_RED_50, THEME_LIGHT_RED_500, THEME_LIGHT_RED_600, THEME_LIGHT_RED_700, THEME_LIGHT_RED_800, THEME_LIGHT_RED_900, THEME_LIGHT_RED_950, THEME_RED_10, THEME_RED_100, THEME_RED_200, THEME_RED_300, THEME_RED_400, THEME_RED_50, THEME_RED_500, THEME_RED_600, THEME_RED_700, THEME_RED_800, THEME_RED_900, THEME_RED_950, T_GRAY_A_02, T_GRAY_A_04, T_GRAY_A_06, T_GRAY_A_08, T_GRAY_A_16, T_GRAY_A_24, T_WHITE_A_02, T_WHITE_A_04, T_WHITE_A_06, T_WHITE_A_08, T_WHITE_A_16, T_WHITE_A_24, T_WHITE_A_36, WHITE };

package/dist/tokens/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/dist/tokens/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/dist/tokens/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/dist/tokens/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/dist/tokens/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/dist/tokens/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/dist/tokens/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/dist/tokens/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.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -296,6 +296,15 @@ $t-white-a-02: var(--t-white-a-02);
 $t-white-a-04: var(--t-white-a-04);
 $t-white-a-06: var(--t-white-a-06);
 $t-white-a-08: var(--t-white-a-08);
+$gl-icon-color-default: var(--gl-icon-color-default);
+$gl-icon-color-subtle: var(--gl-icon-color-subtle);
+$gl-icon-color-strong: var(--gl-icon-color-strong);
+$gl-icon-color-disabled: var(--gl-icon-color-disabled);
+$gl-icon-color-link: var(--gl-icon-color-link);
+$gl-icon-color-info: var(--gl-icon-color-info);
+$gl-icon-color-warning: var(--gl-icon-color-warning);
+$gl-icon-color-danger: var(--gl-icon-color-danger);
+$gl-icon-color-success: var(--gl-icon-color-success);
 $gl-line-height-12: var(--gl-line-height-12);
 $gl-line-height-16: var(--gl-line-height-16);
 $gl-line-height-20: var(--gl-line-height-20);