@gitlab/ui 86.15.0 → 87.1.0

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

@@ -613,7 +613,7 @@ const GL_TEXT_COLOR_STRONG = '#fff'; // Used for text with the highest contrast.
 const GL_TEXT_COLOR_HEADING = '#fff'; // Used for headings level 1-6.
 const GL_TEXT_COLOR_LINK = '#63a6e9'; // Used for default text links.
 const GL_TEXT_COLOR_DANGER = '#f57f6c'; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
-const GL_TEXT_COLOR_SUCCESS = '#52b87a'; // Used for text indicating success or validity.
+const GL_TEXT_COLOR_SUCCESS = '#52b87a'; // Used for text indicating success, completion, approval, addition, 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_ACTION_CONFIRM_BACKGROUND_COLOR_ACTIVE, GL_ACTION_CONFIRM_BACKGROUND_COLOR_DEFAULT, GL_ACTION_CONFIRM_BACKGROUND_COLOR_FOCUS, GL_ACTION_CONFIRM_BACKGROUND_COLOR_HOVER, GL_ACTION_CONFIRM_BORDER_COLOR_ACTIVE, GL_ACTION_CONFIRM_BORDER_COLOR_DEFAULT, GL_ACTION_CONFIRM_BORDER_COLOR_FOCUS, GL_ACTION_CONFIRM_BORDER_COLOR_HOVER, GL_ACTION_CONFIRM_FOREGROUND_COLOR_ACTIVE, GL_ACTION_CONFIRM_FOREGROUND_COLOR_DEFAULT, GL_ACTION_CONFIRM_FOREGROUND_COLOR_FOCUS, GL_ACTION_CONFIRM_FOREGROUND_COLOR_HOVER, GL_ACTION_DANGER_BACKGROUND_COLOR_ACTIVE, GL_ACTION_DANGER_BACKGROUND_COLOR_DEFAULT, GL_ACTION_DANGER_BACKGROUND_COLOR_FOCUS, GL_ACTION_DANGER_BACKGROUND_COLOR_HOVER, GL_ACTION_DANGER_BORDER_COLOR_ACTIVE, GL_ACTION_DANGER_BORDER_COLOR_DEFAULT, GL_ACTION_DANGER_BORDER_COLOR_FOCUS, GL_ACTION_DANGER_BORDER_COLOR_HOVER, GL_ACTION_DANGER_FOREGROUND_COLOR_ACTIVE, GL_ACTION_DANGER_FOREGROUND_COLOR_DEFAULT, GL_ACTION_DANGER_FOREGROUND_COLOR_FOCUS, GL_ACTION_DANGER_FOREGROUND_COLOR_HOVER, GL_ACTION_DISABLED_BACKGROUND_COLOR, GL_ACTION_DISABLED_BORDER_COLOR, GL_ACTION_DISABLED_FOREGROUND_COLOR, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER, GL_ACTION_NEUTRAL_BORDER_COLOR_ACTIVE, GL_ACTION_NEUTRAL_BORDER_COLOR_DEFAULT, GL_ACTION_NEUTRAL_BORDER_COLOR_FOCUS, GL_ACTION_NEUTRAL_BORDER_COLOR_HOVER, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER, GL_AVATAR_BORDER_COLOR_DEFAULT, GL_AVATAR_BORDER_COLOR_HOVER, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED, GL_BACKGROUND_COLOR_DEFAULT, GL_BACKGROUND_COLOR_DISABLED, GL_BACKGROUND_COLOR_OVERLAY, GL_BACKGROUND_COLOR_STRONG, GL_BACKGROUND_COLOR_SUBTLE, GL_BANNER_INTRO_BORDER_COLOR, GL_BANNER_PROMO_BACKGROUND_COLOR, GL_BORDER_COLOR_DEFAULT, GL_BORDER_COLOR_STRONG, GL_BORDER_COLOR_SUBTLE, GL_BORDER_COLOR_TRANSPARENT, GL_BREADCRUMB_SEPARATOR_COLOR, GL_COLOR_ALPHA_0, GL_COLOR_ALPHA_DARK_16, GL_COLOR_ALPHA_DARK_2, GL_COLOR_ALPHA_DARK_24, GL_COLOR_ALPHA_DARK_4, GL_COLOR_ALPHA_DARK_6, GL_COLOR_ALPHA_DARK_8, GL_COLOR_ALPHA_LIGHT_16, GL_COLOR_ALPHA_LIGHT_2, GL_COLOR_ALPHA_LIGHT_24, GL_COLOR_ALPHA_LIGHT_36, GL_COLOR_ALPHA_LIGHT_4, GL_COLOR_ALPHA_LIGHT_6, GL_COLOR_ALPHA_LIGHT_8, 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_BRAND_CHARCOAL, GL_COLOR_BRAND_GRAY_01, GL_COLOR_BRAND_GRAY_02, GL_COLOR_BRAND_GRAY_03, GL_COLOR_BRAND_GRAY_04, GL_COLOR_BRAND_GRAY_05, GL_COLOR_BRAND_ORANGE_01G, GL_COLOR_BRAND_ORANGE_01P, GL_COLOR_BRAND_ORANGE_02P, GL_COLOR_BRAND_ORANGE_03P, GL_COLOR_BRAND_PINK_01G, GL_COLOR_BRAND_PURPLE_01G, GL_COLOR_BRAND_PURPLE_01P, GL_COLOR_BRAND_PURPLE_02P, GL_COLOR_BRAND_WHITE, 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_COLOR_THEME_BLUE_10, GL_COLOR_THEME_BLUE_100, GL_COLOR_THEME_BLUE_200, GL_COLOR_THEME_BLUE_300, GL_COLOR_THEME_BLUE_400, GL_COLOR_THEME_BLUE_50, GL_COLOR_THEME_BLUE_500, GL_COLOR_THEME_BLUE_600, GL_COLOR_THEME_BLUE_700, GL_COLOR_THEME_BLUE_800, GL_COLOR_THEME_BLUE_900, GL_COLOR_THEME_BLUE_950, GL_COLOR_THEME_GREEN_10, GL_COLOR_THEME_GREEN_100, GL_COLOR_THEME_GREEN_200, GL_COLOR_THEME_GREEN_300, GL_COLOR_THEME_GREEN_400, GL_COLOR_THEME_GREEN_50, GL_COLOR_THEME_GREEN_500, GL_COLOR_THEME_GREEN_600, GL_COLOR_THEME_GREEN_700, GL_COLOR_THEME_GREEN_800, GL_COLOR_THEME_GREEN_900, GL_COLOR_THEME_GREEN_950, GL_COLOR_THEME_INDIGO_10, GL_COLOR_THEME_INDIGO_100, GL_COLOR_THEME_INDIGO_200, GL_COLOR_THEME_INDIGO_300, GL_COLOR_THEME_INDIGO_400, GL_COLOR_THEME_INDIGO_50, GL_COLOR_THEME_INDIGO_500, GL_COLOR_THEME_INDIGO_600, GL_COLOR_THEME_INDIGO_700, GL_COLOR_THEME_INDIGO_800, GL_COLOR_THEME_INDIGO_900, GL_COLOR_THEME_INDIGO_950, GL_COLOR_THEME_LIGHT_BLUE_10, GL_COLOR_THEME_LIGHT_BLUE_100, GL_COLOR_THEME_LIGHT_BLUE_200, GL_COLOR_THEME_LIGHT_BLUE_300, GL_COLOR_THEME_LIGHT_BLUE_400, GL_COLOR_THEME_LIGHT_BLUE_50, GL_COLOR_THEME_LIGHT_BLUE_500, GL_COLOR_THEME_LIGHT_BLUE_600, GL_COLOR_THEME_LIGHT_BLUE_700, GL_COLOR_THEME_LIGHT_BLUE_800, GL_COLOR_THEME_LIGHT_BLUE_900, GL_COLOR_THEME_LIGHT_BLUE_950, GL_COLOR_THEME_LIGHT_RED_10, GL_COLOR_THEME_LIGHT_RED_100, GL_COLOR_THEME_LIGHT_RED_200, GL_COLOR_THEME_LIGHT_RED_300, GL_COLOR_THEME_LIGHT_RED_400, GL_COLOR_THEME_LIGHT_RED_50, GL_COLOR_THEME_LIGHT_RED_500, GL_COLOR_THEME_LIGHT_RED_600, GL_COLOR_THEME_LIGHT_RED_700, GL_COLOR_THEME_LIGHT_RED_800, GL_COLOR_THEME_LIGHT_RED_900, GL_COLOR_THEME_LIGHT_RED_950, GL_COLOR_THEME_RED_10, GL_COLOR_THEME_RED_100, GL_COLOR_THEME_RED_200, GL_COLOR_THEME_RED_300, GL_COLOR_THEME_RED_400, GL_COLOR_THEME_RED_50, GL_COLOR_THEME_RED_500, GL_COLOR_THEME_RED_600, GL_COLOR_THEME_RED_700, GL_COLOR_THEME_RED_800, GL_COLOR_THEME_RED_900, GL_COLOR_THEME_RED_950, GL_CONTROL_BACKGROUND_COLOR_DEFAULT, GL_CONTROL_BACKGROUND_COLOR_DISABLED, GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT, GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS, GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER, GL_CONTROL_BORDER_COLOR_DEFAULT, GL_CONTROL_BORDER_COLOR_DISABLED, GL_CONTROL_BORDER_COLOR_ERROR, GL_CONTROL_BORDER_COLOR_FOCUS, GL_CONTROL_BORDER_COLOR_HOVER, GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT, GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS, GL_CONTROL_BORDER_COLOR_SELECTED_HOVER, GL_CONTROL_INDICATOR_COLOR_DISABLED, GL_CONTROL_INDICATOR_COLOR_SELECTED, GL_CONTROL_PLACEHOLDER_COLOR, GL_CONTROL_TEXT_COLOR_ERROR, GL_CONTROL_TEXT_COLOR_VALID, GL_FEEDBACK_BACKGROUND_COLOR_STRONG, GL_FEEDBACK_DANGER_BACKGROUND_COLOR, GL_FEEDBACK_DANGER_ICON_COLOR, GL_FEEDBACK_ICON_COLOR_STRONG, GL_FEEDBACK_INFO_BACKGROUND_COLOR, GL_FEEDBACK_INFO_ICON_COLOR, GL_FEEDBACK_LINK_COLOR_STRONG, GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR, GL_FEEDBACK_NEUTRAL_ICON_COLOR, GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR, GL_FEEDBACK_SUCCESS_ICON_COLOR, GL_FEEDBACK_TEXT_COLOR_STRONG, GL_FEEDBACK_WARNING_BACKGROUND_COLOR, GL_FEEDBACK_WARNING_ICON_COLOR, GL_FOCUS_RING_INNER_COLOR, GL_FOCUS_RING_OUTER_COLOR, 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_LABEL_DARK_BUTTON_BACKGROUND_COLOR_DEFAULT, GL_LABEL_DARK_BUTTON_BACKGROUND_COLOR_HOVER, GL_LABEL_DARK_BUTTON_ICON_COLOR_DEFAULT, GL_LABEL_DARK_TEXT_COLOR, GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT, GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER, GL_LABEL_LIGHT_BUTTON_ICON_COLOR_DEFAULT, GL_LABEL_LIGHT_TEXT_COLOR, GL_LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER, GL_LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT, GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER, GL_LABEL_SCOPED_TEXT_COLOR, 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_POPOVER_BACKGROUND_COLOR, GL_SHADOW_COLOR_DEFAULT, GL_SKELETON_LOADER_BACKGROUND_COLOR, GL_SKELETON_LOADER_SHIMMER_COLOR, GL_SPINNER_SEGMENT_COLOR_DEFAULT, GL_SPINNER_SEGMENT_COLOR_LIGHT, GL_SPINNER_TRACK_COLOR_DEFAULT, GL_SPINNER_TRACK_COLOR_LIGHT, GL_STATUS_BRAND_BACKGROUND_COLOR_ACTIVE, GL_STATUS_BRAND_BACKGROUND_COLOR_DEFAULT, GL_STATUS_BRAND_BORDER_COLOR_HOVER, GL_STATUS_BRAND_ICON_COLOR_ACTIVE, GL_STATUS_BRAND_ICON_COLOR_DEFAULT, GL_STATUS_BRAND_ICON_COLOR_FOCUS, GL_STATUS_BRAND_ICON_COLOR_HOVER, GL_STATUS_BRAND_TEXT_COLOR_ACTIVE, GL_STATUS_BRAND_TEXT_COLOR_DEFAULT, GL_STATUS_BRAND_TEXT_COLOR_FOCUS, GL_STATUS_BRAND_TEXT_COLOR_HOVER, GL_STATUS_DANGER_BACKGROUND_COLOR_ACTIVE, GL_STATUS_DANGER_BACKGROUND_COLOR_DEFAULT, GL_STATUS_DANGER_BORDER_COLOR_HOVER, GL_STATUS_DANGER_ICON_COLOR_ACTIVE, GL_STATUS_DANGER_ICON_COLOR_DEFAULT, GL_STATUS_DANGER_ICON_COLOR_FOCUS, GL_STATUS_DANGER_ICON_COLOR_HOVER, GL_STATUS_DANGER_TEXT_COLOR_ACTIVE, GL_STATUS_DANGER_TEXT_COLOR_DEFAULT, GL_STATUS_DANGER_TEXT_COLOR_FOCUS, GL_STATUS_DANGER_TEXT_COLOR_HOVER, GL_STATUS_INFO_BACKGROUND_COLOR_ACTIVE, GL_STATUS_INFO_BACKGROUND_COLOR_DEFAULT, GL_STATUS_INFO_BORDER_COLOR_HOVER, GL_STATUS_INFO_ICON_COLOR_ACTIVE, GL_STATUS_INFO_ICON_COLOR_DEFAULT, GL_STATUS_INFO_ICON_COLOR_FOCUS, GL_STATUS_INFO_ICON_COLOR_HOVER, GL_STATUS_INFO_TEXT_COLOR_ACTIVE, GL_STATUS_INFO_TEXT_COLOR_DEFAULT, GL_STATUS_INFO_TEXT_COLOR_FOCUS, GL_STATUS_INFO_TEXT_COLOR_HOVER, GL_STATUS_MUTED_BACKGROUND_COLOR_ACTIVE, GL_STATUS_MUTED_BACKGROUND_COLOR_DEFAULT, GL_STATUS_MUTED_BORDER_COLOR_HOVER, GL_STATUS_MUTED_ICON_COLOR_ACTIVE, GL_STATUS_MUTED_ICON_COLOR_DEFAULT, GL_STATUS_MUTED_ICON_COLOR_FOCUS, GL_STATUS_MUTED_ICON_COLOR_HOVER, GL_STATUS_MUTED_TEXT_COLOR_ACTIVE, GL_STATUS_MUTED_TEXT_COLOR_DEFAULT, GL_STATUS_MUTED_TEXT_COLOR_FOCUS, GL_STATUS_MUTED_TEXT_COLOR_HOVER, GL_STATUS_NEUTRAL_BACKGROUND_COLOR_ACTIVE, GL_STATUS_NEUTRAL_BACKGROUND_COLOR_DEFAULT, GL_STATUS_NEUTRAL_BORDER_COLOR_HOVER, GL_STATUS_NEUTRAL_ICON_COLOR_ACTIVE, GL_STATUS_NEUTRAL_ICON_COLOR_DEFAULT, GL_STATUS_NEUTRAL_ICON_COLOR_FOCUS, GL_STATUS_NEUTRAL_ICON_COLOR_HOVER, GL_STATUS_NEUTRAL_TEXT_COLOR_ACTIVE, GL_STATUS_NEUTRAL_TEXT_COLOR_DEFAULT, GL_STATUS_NEUTRAL_TEXT_COLOR_FOCUS, GL_STATUS_NEUTRAL_TEXT_COLOR_HOVER, GL_STATUS_SUCCESS_BACKGROUND_COLOR_ACTIVE, GL_STATUS_SUCCESS_BACKGROUND_COLOR_DEFAULT, GL_STATUS_SUCCESS_BORDER_COLOR_HOVER, GL_STATUS_SUCCESS_ICON_COLOR_ACTIVE, GL_STATUS_SUCCESS_ICON_COLOR_DEFAULT, GL_STATUS_SUCCESS_ICON_COLOR_FOCUS, GL_STATUS_SUCCESS_ICON_COLOR_HOVER, GL_STATUS_SUCCESS_TEXT_COLOR_ACTIVE, GL_STATUS_SUCCESS_TEXT_COLOR_DEFAULT, GL_STATUS_SUCCESS_TEXT_COLOR_FOCUS, GL_STATUS_SUCCESS_TEXT_COLOR_HOVER, GL_STATUS_WARNING_BACKGROUND_COLOR_ACTIVE, GL_STATUS_WARNING_BACKGROUND_COLOR_DEFAULT, GL_STATUS_WARNING_BORDER_COLOR_HOVER, GL_STATUS_WARNING_ICON_COLOR_ACTIVE, GL_STATUS_WARNING_ICON_COLOR_DEFAULT, GL_STATUS_WARNING_ICON_COLOR_FOCUS, GL_STATUS_WARNING_ICON_COLOR_HOVER, GL_STATUS_WARNING_TEXT_COLOR_ACTIVE, GL_STATUS_WARNING_TEXT_COLOR_DEFAULT, GL_STATUS_WARNING_TEXT_COLOR_FOCUS, GL_STATUS_WARNING_TEXT_COLOR_HOVER, GL_TABLE_ROW_BACKGROUND_COLOR_HOVER, GL_TABLE_SORTING_ICON_COLOR, 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

@@ -613,7 +613,7 @@ const GL_TEXT_COLOR_STRONG = '#18171d'; // Used for text with the highest contra
 const GL_TEXT_COLOR_HEADING = '#18171d'; // Used for headings level 1-6.
 const GL_TEXT_COLOR_LINK = '#0b5cad'; // Used for default text links.
 const GL_TEXT_COLOR_DANGER = '#c91c00'; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
-const GL_TEXT_COLOR_SUCCESS = '#217645'; // Used for text indicating success or validity.
+const GL_TEXT_COLOR_SUCCESS = '#217645'; // Used for text indicating success, completion, approval, addition, 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_ACTION_CONFIRM_BACKGROUND_COLOR_ACTIVE, GL_ACTION_CONFIRM_BACKGROUND_COLOR_DEFAULT, GL_ACTION_CONFIRM_BACKGROUND_COLOR_FOCUS, GL_ACTION_CONFIRM_BACKGROUND_COLOR_HOVER, GL_ACTION_CONFIRM_BORDER_COLOR_ACTIVE, GL_ACTION_CONFIRM_BORDER_COLOR_DEFAULT, GL_ACTION_CONFIRM_BORDER_COLOR_FOCUS, GL_ACTION_CONFIRM_BORDER_COLOR_HOVER, GL_ACTION_CONFIRM_FOREGROUND_COLOR_ACTIVE, GL_ACTION_CONFIRM_FOREGROUND_COLOR_DEFAULT, GL_ACTION_CONFIRM_FOREGROUND_COLOR_FOCUS, GL_ACTION_CONFIRM_FOREGROUND_COLOR_HOVER, GL_ACTION_DANGER_BACKGROUND_COLOR_ACTIVE, GL_ACTION_DANGER_BACKGROUND_COLOR_DEFAULT, GL_ACTION_DANGER_BACKGROUND_COLOR_FOCUS, GL_ACTION_DANGER_BACKGROUND_COLOR_HOVER, GL_ACTION_DANGER_BORDER_COLOR_ACTIVE, GL_ACTION_DANGER_BORDER_COLOR_DEFAULT, GL_ACTION_DANGER_BORDER_COLOR_FOCUS, GL_ACTION_DANGER_BORDER_COLOR_HOVER, GL_ACTION_DANGER_FOREGROUND_COLOR_ACTIVE, GL_ACTION_DANGER_FOREGROUND_COLOR_DEFAULT, GL_ACTION_DANGER_FOREGROUND_COLOR_FOCUS, GL_ACTION_DANGER_FOREGROUND_COLOR_HOVER, GL_ACTION_DISABLED_BACKGROUND_COLOR, GL_ACTION_DISABLED_BORDER_COLOR, GL_ACTION_DISABLED_FOREGROUND_COLOR, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER, GL_ACTION_NEUTRAL_BORDER_COLOR_ACTIVE, GL_ACTION_NEUTRAL_BORDER_COLOR_DEFAULT, GL_ACTION_NEUTRAL_BORDER_COLOR_FOCUS, GL_ACTION_NEUTRAL_BORDER_COLOR_HOVER, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER, GL_AVATAR_BORDER_COLOR_DEFAULT, GL_AVATAR_BORDER_COLOR_HOVER, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED, GL_BACKGROUND_COLOR_DEFAULT, GL_BACKGROUND_COLOR_DISABLED, GL_BACKGROUND_COLOR_OVERLAY, GL_BACKGROUND_COLOR_STRONG, GL_BACKGROUND_COLOR_SUBTLE, GL_BANNER_INTRO_BORDER_COLOR, GL_BANNER_PROMO_BACKGROUND_COLOR, GL_BORDER_COLOR_DEFAULT, GL_BORDER_COLOR_STRONG, GL_BORDER_COLOR_SUBTLE, GL_BORDER_COLOR_TRANSPARENT, GL_BREADCRUMB_SEPARATOR_COLOR, GL_COLOR_ALPHA_0, GL_COLOR_ALPHA_DARK_16, GL_COLOR_ALPHA_DARK_2, GL_COLOR_ALPHA_DARK_24, GL_COLOR_ALPHA_DARK_4, GL_COLOR_ALPHA_DARK_6, GL_COLOR_ALPHA_DARK_8, GL_COLOR_ALPHA_LIGHT_16, GL_COLOR_ALPHA_LIGHT_2, GL_COLOR_ALPHA_LIGHT_24, GL_COLOR_ALPHA_LIGHT_36, GL_COLOR_ALPHA_LIGHT_4, GL_COLOR_ALPHA_LIGHT_6, GL_COLOR_ALPHA_LIGHT_8, 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_BRAND_CHARCOAL, GL_COLOR_BRAND_GRAY_01, GL_COLOR_BRAND_GRAY_02, GL_COLOR_BRAND_GRAY_03, GL_COLOR_BRAND_GRAY_04, GL_COLOR_BRAND_GRAY_05, GL_COLOR_BRAND_ORANGE_01G, GL_COLOR_BRAND_ORANGE_01P, GL_COLOR_BRAND_ORANGE_02P, GL_COLOR_BRAND_ORANGE_03P, GL_COLOR_BRAND_PINK_01G, GL_COLOR_BRAND_PURPLE_01G, GL_COLOR_BRAND_PURPLE_01P, GL_COLOR_BRAND_PURPLE_02P, GL_COLOR_BRAND_WHITE, 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_COLOR_THEME_BLUE_10, GL_COLOR_THEME_BLUE_100, GL_COLOR_THEME_BLUE_200, GL_COLOR_THEME_BLUE_300, GL_COLOR_THEME_BLUE_400, GL_COLOR_THEME_BLUE_50, GL_COLOR_THEME_BLUE_500, GL_COLOR_THEME_BLUE_600, GL_COLOR_THEME_BLUE_700, GL_COLOR_THEME_BLUE_800, GL_COLOR_THEME_BLUE_900, GL_COLOR_THEME_BLUE_950, GL_COLOR_THEME_GREEN_10, GL_COLOR_THEME_GREEN_100, GL_COLOR_THEME_GREEN_200, GL_COLOR_THEME_GREEN_300, GL_COLOR_THEME_GREEN_400, GL_COLOR_THEME_GREEN_50, GL_COLOR_THEME_GREEN_500, GL_COLOR_THEME_GREEN_600, GL_COLOR_THEME_GREEN_700, GL_COLOR_THEME_GREEN_800, GL_COLOR_THEME_GREEN_900, GL_COLOR_THEME_GREEN_950, GL_COLOR_THEME_INDIGO_10, GL_COLOR_THEME_INDIGO_100, GL_COLOR_THEME_INDIGO_200, GL_COLOR_THEME_INDIGO_300, GL_COLOR_THEME_INDIGO_400, GL_COLOR_THEME_INDIGO_50, GL_COLOR_THEME_INDIGO_500, GL_COLOR_THEME_INDIGO_600, GL_COLOR_THEME_INDIGO_700, GL_COLOR_THEME_INDIGO_800, GL_COLOR_THEME_INDIGO_900, GL_COLOR_THEME_INDIGO_950, GL_COLOR_THEME_LIGHT_BLUE_10, GL_COLOR_THEME_LIGHT_BLUE_100, GL_COLOR_THEME_LIGHT_BLUE_200, GL_COLOR_THEME_LIGHT_BLUE_300, GL_COLOR_THEME_LIGHT_BLUE_400, GL_COLOR_THEME_LIGHT_BLUE_50, GL_COLOR_THEME_LIGHT_BLUE_500, GL_COLOR_THEME_LIGHT_BLUE_600, GL_COLOR_THEME_LIGHT_BLUE_700, GL_COLOR_THEME_LIGHT_BLUE_800, GL_COLOR_THEME_LIGHT_BLUE_900, GL_COLOR_THEME_LIGHT_BLUE_950, GL_COLOR_THEME_LIGHT_RED_10, GL_COLOR_THEME_LIGHT_RED_100, GL_COLOR_THEME_LIGHT_RED_200, GL_COLOR_THEME_LIGHT_RED_300, GL_COLOR_THEME_LIGHT_RED_400, GL_COLOR_THEME_LIGHT_RED_50, GL_COLOR_THEME_LIGHT_RED_500, GL_COLOR_THEME_LIGHT_RED_600, GL_COLOR_THEME_LIGHT_RED_700, GL_COLOR_THEME_LIGHT_RED_800, GL_COLOR_THEME_LIGHT_RED_900, GL_COLOR_THEME_LIGHT_RED_950, GL_COLOR_THEME_RED_10, GL_COLOR_THEME_RED_100, GL_COLOR_THEME_RED_200, GL_COLOR_THEME_RED_300, GL_COLOR_THEME_RED_400, GL_COLOR_THEME_RED_50, GL_COLOR_THEME_RED_500, GL_COLOR_THEME_RED_600, GL_COLOR_THEME_RED_700, GL_COLOR_THEME_RED_800, GL_COLOR_THEME_RED_900, GL_COLOR_THEME_RED_950, GL_CONTROL_BACKGROUND_COLOR_DEFAULT, GL_CONTROL_BACKGROUND_COLOR_DISABLED, GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT, GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS, GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER, GL_CONTROL_BORDER_COLOR_DEFAULT, GL_CONTROL_BORDER_COLOR_DISABLED, GL_CONTROL_BORDER_COLOR_ERROR, GL_CONTROL_BORDER_COLOR_FOCUS, GL_CONTROL_BORDER_COLOR_HOVER, GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT, GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS, GL_CONTROL_BORDER_COLOR_SELECTED_HOVER, GL_CONTROL_INDICATOR_COLOR_DISABLED, GL_CONTROL_INDICATOR_COLOR_SELECTED, GL_CONTROL_PLACEHOLDER_COLOR, GL_CONTROL_TEXT_COLOR_ERROR, GL_CONTROL_TEXT_COLOR_VALID, GL_FEEDBACK_BACKGROUND_COLOR_STRONG, GL_FEEDBACK_DANGER_BACKGROUND_COLOR, GL_FEEDBACK_DANGER_ICON_COLOR, GL_FEEDBACK_ICON_COLOR_STRONG, GL_FEEDBACK_INFO_BACKGROUND_COLOR, GL_FEEDBACK_INFO_ICON_COLOR, GL_FEEDBACK_LINK_COLOR_STRONG, GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR, GL_FEEDBACK_NEUTRAL_ICON_COLOR, GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR, GL_FEEDBACK_SUCCESS_ICON_COLOR, GL_FEEDBACK_TEXT_COLOR_STRONG, GL_FEEDBACK_WARNING_BACKGROUND_COLOR, GL_FEEDBACK_WARNING_ICON_COLOR, GL_FOCUS_RING_INNER_COLOR, GL_FOCUS_RING_OUTER_COLOR, 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_LABEL_DARK_BUTTON_BACKGROUND_COLOR_DEFAULT, GL_LABEL_DARK_BUTTON_BACKGROUND_COLOR_HOVER, GL_LABEL_DARK_BUTTON_ICON_COLOR_DEFAULT, GL_LABEL_DARK_TEXT_COLOR, GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT, GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER, GL_LABEL_LIGHT_BUTTON_ICON_COLOR_DEFAULT, GL_LABEL_LIGHT_TEXT_COLOR, GL_LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER, GL_LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT, GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER, GL_LABEL_SCOPED_TEXT_COLOR, 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_POPOVER_BACKGROUND_COLOR, GL_SHADOW_COLOR_DEFAULT, GL_SKELETON_LOADER_BACKGROUND_COLOR, GL_SKELETON_LOADER_SHIMMER_COLOR, GL_SPINNER_SEGMENT_COLOR_DEFAULT, GL_SPINNER_SEGMENT_COLOR_LIGHT, GL_SPINNER_TRACK_COLOR_DEFAULT, GL_SPINNER_TRACK_COLOR_LIGHT, GL_STATUS_BRAND_BACKGROUND_COLOR_ACTIVE, GL_STATUS_BRAND_BACKGROUND_COLOR_DEFAULT, GL_STATUS_BRAND_BORDER_COLOR_HOVER, GL_STATUS_BRAND_ICON_COLOR_ACTIVE, GL_STATUS_BRAND_ICON_COLOR_DEFAULT, GL_STATUS_BRAND_ICON_COLOR_FOCUS, GL_STATUS_BRAND_ICON_COLOR_HOVER, GL_STATUS_BRAND_TEXT_COLOR_ACTIVE, GL_STATUS_BRAND_TEXT_COLOR_DEFAULT, GL_STATUS_BRAND_TEXT_COLOR_FOCUS, GL_STATUS_BRAND_TEXT_COLOR_HOVER, GL_STATUS_DANGER_BACKGROUND_COLOR_ACTIVE, GL_STATUS_DANGER_BACKGROUND_COLOR_DEFAULT, GL_STATUS_DANGER_BORDER_COLOR_HOVER, GL_STATUS_DANGER_ICON_COLOR_ACTIVE, GL_STATUS_DANGER_ICON_COLOR_DEFAULT, GL_STATUS_DANGER_ICON_COLOR_FOCUS, GL_STATUS_DANGER_ICON_COLOR_HOVER, GL_STATUS_DANGER_TEXT_COLOR_ACTIVE, GL_STATUS_DANGER_TEXT_COLOR_DEFAULT, GL_STATUS_DANGER_TEXT_COLOR_FOCUS, GL_STATUS_DANGER_TEXT_COLOR_HOVER, GL_STATUS_INFO_BACKGROUND_COLOR_ACTIVE, GL_STATUS_INFO_BACKGROUND_COLOR_DEFAULT, GL_STATUS_INFO_BORDER_COLOR_HOVER, GL_STATUS_INFO_ICON_COLOR_ACTIVE, GL_STATUS_INFO_ICON_COLOR_DEFAULT, GL_STATUS_INFO_ICON_COLOR_FOCUS, GL_STATUS_INFO_ICON_COLOR_HOVER, GL_STATUS_INFO_TEXT_COLOR_ACTIVE, GL_STATUS_INFO_TEXT_COLOR_DEFAULT, GL_STATUS_INFO_TEXT_COLOR_FOCUS, GL_STATUS_INFO_TEXT_COLOR_HOVER, GL_STATUS_MUTED_BACKGROUND_COLOR_ACTIVE, GL_STATUS_MUTED_BACKGROUND_COLOR_DEFAULT, GL_STATUS_MUTED_BORDER_COLOR_HOVER, GL_STATUS_MUTED_ICON_COLOR_ACTIVE, GL_STATUS_MUTED_ICON_COLOR_DEFAULT, GL_STATUS_MUTED_ICON_COLOR_FOCUS, GL_STATUS_MUTED_ICON_COLOR_HOVER, GL_STATUS_MUTED_TEXT_COLOR_ACTIVE, GL_STATUS_MUTED_TEXT_COLOR_DEFAULT, GL_STATUS_MUTED_TEXT_COLOR_FOCUS, GL_STATUS_MUTED_TEXT_COLOR_HOVER, GL_STATUS_NEUTRAL_BACKGROUND_COLOR_ACTIVE, GL_STATUS_NEUTRAL_BACKGROUND_COLOR_DEFAULT, GL_STATUS_NEUTRAL_BORDER_COLOR_HOVER, GL_STATUS_NEUTRAL_ICON_COLOR_ACTIVE, GL_STATUS_NEUTRAL_ICON_COLOR_DEFAULT, GL_STATUS_NEUTRAL_ICON_COLOR_FOCUS, GL_STATUS_NEUTRAL_ICON_COLOR_HOVER, GL_STATUS_NEUTRAL_TEXT_COLOR_ACTIVE, GL_STATUS_NEUTRAL_TEXT_COLOR_DEFAULT, GL_STATUS_NEUTRAL_TEXT_COLOR_FOCUS, GL_STATUS_NEUTRAL_TEXT_COLOR_HOVER, GL_STATUS_SUCCESS_BACKGROUND_COLOR_ACTIVE, GL_STATUS_SUCCESS_BACKGROUND_COLOR_DEFAULT, GL_STATUS_SUCCESS_BORDER_COLOR_HOVER, GL_STATUS_SUCCESS_ICON_COLOR_ACTIVE, GL_STATUS_SUCCESS_ICON_COLOR_DEFAULT, GL_STATUS_SUCCESS_ICON_COLOR_FOCUS, GL_STATUS_SUCCESS_ICON_COLOR_HOVER, GL_STATUS_SUCCESS_TEXT_COLOR_ACTIVE, GL_STATUS_SUCCESS_TEXT_COLOR_DEFAULT, GL_STATUS_SUCCESS_TEXT_COLOR_FOCUS, GL_STATUS_SUCCESS_TEXT_COLOR_HOVER, GL_STATUS_WARNING_BACKGROUND_COLOR_ACTIVE, GL_STATUS_WARNING_BACKGROUND_COLOR_DEFAULT, GL_STATUS_WARNING_BORDER_COLOR_HOVER, GL_STATUS_WARNING_ICON_COLOR_ACTIVE, GL_STATUS_WARNING_ICON_COLOR_DEFAULT, GL_STATUS_WARNING_ICON_COLOR_FOCUS, GL_STATUS_WARNING_ICON_COLOR_HOVER, GL_STATUS_WARNING_TEXT_COLOR_ACTIVE, GL_STATUS_WARNING_TEXT_COLOR_DEFAULT, GL_STATUS_WARNING_TEXT_COLOR_FOCUS, GL_STATUS_WARNING_TEXT_COLOR_HOVER, GL_TABLE_ROW_BACKGROUND_COLOR_HOVER, GL_TABLE_SORTING_ICON_COLOR, 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

@@ -417,7 +417,7 @@
   --gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); /* Used for the background of a neutral action in the hover state. */
   --gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); /* Used for the background of a neutral action in the default state. */
   --gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
-  --gl-text-color-success: var(--gl-color-green-600); /* Used for text indicating success or validity. */
+  --gl-text-color-success: var(--gl-color-green-600); /* Used for text indicating success, completion, approval, addition, or validity. */
   --gl-text-color-danger: var(--gl-color-red-600); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
   --gl-text-color-link: var(--gl-color-blue-700); /* Used for default text links. */
   --gl-text-color-heading: var(--gl-color-neutral-950); /* Used for headings level 1-6. */

package/dist/tokens/css/tokens.dark.css

@@ -417,7 +417,7 @@
   --gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); /* Used for the background of a neutral action in the hover state. */
   --gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); /* Used for the background of a neutral action in the default state. */
   --gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
-  --gl-text-color-success: var(--gl-color-green-300); /* Used for text indicating success or validity. */
+  --gl-text-color-success: var(--gl-color-green-300); /* Used for text indicating success, completion, approval, addition, or validity. */
   --gl-text-color-danger: var(--gl-color-red-300); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
   --gl-text-color-link: var(--gl-color-blue-300); /* Used for default text links. */
   --gl-text-color-heading: var(--gl-color-neutral-0); /* Used for headings level 1-6. */

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

@@ -613,5 +613,5 @@ export const GL_TEXT_COLOR_STRONG = '#fff'; // Used for text with the highest co
 export const GL_TEXT_COLOR_HEADING = '#fff'; // Used for headings level 1-6.
 export const GL_TEXT_COLOR_LINK = '#63a6e9'; // Used for default text links.
 export const GL_TEXT_COLOR_DANGER = '#f57f6c'; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
-export const GL_TEXT_COLOR_SUCCESS = '#52b87a'; // Used for text indicating success or validity.
+export const GL_TEXT_COLOR_SUCCESS = '#52b87a'; // Used for text indicating success, completion, approval, addition, or validity.
 export const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.

package/dist/tokens/js/tokens.js

@@ -613,5 +613,5 @@ export const GL_TEXT_COLOR_STRONG = '#18171d'; // Used for text with the highest
 export const GL_TEXT_COLOR_HEADING = '#18171d'; // Used for headings level 1-6.
 export const GL_TEXT_COLOR_LINK = '#0b5cad'; // Used for default text links.
 export const GL_TEXT_COLOR_DANGER = '#c91c00'; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
-export const GL_TEXT_COLOR_SUCCESS = '#217645'; // Used for text indicating success or validity.
+export const GL_TEXT_COLOR_SUCCESS = '#217645'; // Used for text indicating success, completion, approval, addition, or validity.
 export const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.

package/dist/tokens/json/tokens.dark.json

@@ -13585,7 +13585,7 @@
       "success": {
         "value": "#52b87a",
         "$type": "color",
-        "comment": "Used for text indicating success or validity.",
+        "comment": "Used for text indicating success, completion, approval, addition, or validity.",
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -13594,7 +13594,7 @@
             "dark": "{color.green.300}"
           },
           "$type": "color",
-          "comment": "Used for text indicating success or validity."
+          "comment": "Used for text indicating success, completion, approval, addition, or validity."
         },
         "name": "TEXT_COLOR_SUCCESS",
         "attributes": {},

package/dist/tokens/json/tokens.json

@@ -13585,7 +13585,7 @@
       "success": {
         "value": "#217645",
         "$type": "color",
-        "comment": "Used for text indicating success or validity.",
+        "comment": "Used for text indicating success, completion, approval, addition, or validity.",
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -13594,7 +13594,7 @@
             "dark": "{color.green.300}"
           },
           "$type": "color",
-          "comment": "Used for text indicating success or validity."
+          "comment": "Used for text indicating success, completion, approval, addition, or validity."
         },
         "name": "TEXT_COLOR_SUCCESS",
         "attributes": {},

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

@@ -415,7 +415,7 @@ $gl-action-neutral-background-color-active: rgba(137, 136, 141, 0.16); // Used f
 $gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); // Used for the background of a neutral action in the hover state.
 $gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); // Used for the background of a neutral action in the default state.
 $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
-$gl-text-color-success: $gl-color-green-300; // Used for text indicating success or validity.
+$gl-text-color-success: $gl-color-green-300; // Used for text indicating success, completion, approval, addition, or validity.
 $gl-text-color-danger: $gl-color-red-300; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
 $gl-text-color-link: $gl-color-blue-300; // Used for default text links.
 $gl-text-color-heading: $gl-color-neutral-0; // Used for headings level 1-6.

package/dist/tokens/scss/_tokens.scss

@@ -415,7 +415,7 @@ $gl-action-neutral-background-color-active: rgba(83, 81, 88, 0.24); // Used for
 $gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); // Used for the background of a neutral action in the hover state.
 $gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); // Used for the background of a neutral action in the default state.
 $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
-$gl-text-color-success: $gl-color-green-600; // Used for text indicating success or validity.
+$gl-text-color-success: $gl-color-green-600; // Used for text indicating success, completion, approval, addition, or validity.
 $gl-text-color-danger: $gl-color-red-600; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
 $gl-text-color-link: $gl-color-blue-700; // Used for default text links.
 $gl-text-color-heading: $gl-color-neutral-950; // Used for headings level 1-6.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "86.15.0",
+  "version": "87.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -114,7 +114,7 @@
     "@gitlab/eslint-plugin": "19.6.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.107.0",
+    "@gitlab/svgs": "3.108.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -81,7 +81,7 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
   &.notification {
     @include gl-rounded-base;
     @include gl-bg-white;
-    @include gl-border;
+    @apply gl-border;
     @include gl-shadow-x0-y2-b4-s0;
     max-width: $gl-broadcast-message-notification-max-width;
   }

package/src/components/base/button/button.scss

@@ -21,7 +21,7 @@
 
 .gl-button.gl-button,
 .gl-button.gl-button.btn-block {
-  @include gl-border-0;
+  @apply gl-border-0;
   @include gl-py-3;
   @include gl-px-4;
   @include gl-bg-transparent;
@@ -456,7 +456,7 @@
 
   &.btn-link {
     @include gl-bg-transparent;
-    @include gl-border-0;
+    @apply gl-border-0;
     @include gl-font-base;
     @include gl-line-height-normal;
     @include gl-text-blue-500;

package/src/components/base/card/card.scss

@@ -1,6 +1,6 @@
 .gl-card {
   background-color: var(--gl-background-color-default);
-  @include gl-border-solid;
+  @apply gl-border-solid;
   @include gl-display-flex;
   @include gl-flex-direction-column;
   @include gl-overflow-wrap-break;
@@ -12,7 +12,7 @@
 .gl-card,
 .gl-card-header,
 .gl-card-footer {
-  @include gl-border-1;
+  @apply gl-border-1;
   border-color: var(--gl-border-color-default);
 }
 
@@ -23,14 +23,14 @@
 }
 
 .gl-card-header {
-  @include gl-border-b-solid;
+  @apply gl-border-b-solid;
   border-top-left-radius: calc($gl-border-radius-base - $gl-border-size-1);
   border-top-right-radius: calc($gl-border-radius-base - $gl-border-size-1);
   color: var(--gl-text-color-heading);
 }
 
 .gl-card-footer {
-  @include gl-border-t-solid;
+  @apply gl-border-t-solid;
   border-bottom-left-radius: calc($gl-border-radius-base - $gl-border-size-1);
   border-bottom-right-radius: calc($gl-border-radius-base - $gl-border-size-1);
 }

package/src/components/base/carousel/carousel.scss

@@ -8,8 +8,7 @@
 
 // Make size of focus border on indicator and prev/next button equal to themselves
 .carousel-indicators li {
-  @include gl-border-top-0;
-  @include gl-border-bottom-0;
+  @apply gl-border-t-0 gl-border-b-0;
   margin-bottom: 10px;
 }
 

package/src/components/base/datepicker/datepicker.scss

@@ -39,7 +39,7 @@ $pd-week-color: $gray-500;
 
 .gl-datepicker-theme {
   @include gl-font-regular;
-  @include gl-border-none;
+  @apply gl-border-none;
   @include gl-rounded-base;
   @include gl-mt-3;
 

package/src/components/base/daterange_picker/daterange_picker.scss

@@ -8,7 +8,7 @@
   }
 
   .gl-datepicker-input {
-    @include gl-border-gray-100;
+    @apply gl-border-gray-100;
     @include gl-text-gray-900;
   }
 

package/src/components/base/drawer/drawer.scss

@@ -60,9 +60,8 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }
 
 .gl-drawer-footer {
-  @include gl-border-t-solid;
+  @apply gl-border-t-solid gl-border-t-1;
   border-top-color: var(--gl-border-color-default);
-  @include gl-border-t-1;
   @include gl-p-5;
 }
 
@@ -87,9 +86,8 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }
 
 .gl-drawer-header {
-  @include gl-border-b-solid;
+  @apply gl-border-b-solid gl-border-b-1;
   border-bottom-color: var(--gl-border-color-default);
-  @include gl-border-b-1;
 }
 
 .gl-drawer-title {
@@ -108,7 +106,7 @@ $gl-drawer-scrim-gradient: linear-gradient(
 .gl-drawer-close-button {
   @include gl-align-self-start;
   @include gl-bg-none;
-  @include gl-border-none;
+  @apply gl-border-none;
 }
 
 .gl-drawer-body {
@@ -132,12 +130,11 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }
 
 .gl-drawer-body > * {
-  @include gl-border-b-solid;
+  @apply gl-border-b-solid gl-border-b-1;
   border-bottom-color: var(--gl-border-color-default);
-  @include gl-border-b-1;
 
   &:last-child {
-    @include gl-border-none;
+    @apply gl-border-none;
   }
 }
 

package/src/components/base/dropdown/dropdown.scss

@@ -1,8 +1,7 @@
 .gl-dropdown {
   .dropdown-menu {
     @include gl-bg-white;
-    @include gl-border-1;
-    @include gl-border-gray-200;
+    @apply gl-border-1 gl-border-gray-200;
     @include gl-mt-2;
     @include gl-mb-2;
     @include gl-p-0;
@@ -39,9 +38,7 @@
   }
 
   .gl-dropdown-header-top {
-    @include gl-border-1;
-    @include gl-border-b-solid;
-    @include gl-border-gray-200;
+    @apply gl-border-1 gl-border-b-solid gl-border-gray-200;
     @include gl-display-flex;
     @include gl-font-base;
     @include gl-font-weight-bold;
@@ -54,15 +51,11 @@
   }
 
   .gl-dropdown-header {
-    @include gl-border-b-1;
-    @include gl-border-b-solid;
-    @include gl-border-b-gray-200;
+    @apply gl-border-b-1 gl-border-b-solid gl-border-b-gray-200;
   }
 
   .gl-dropdown-footer {
-    @include gl-border-t-1;
-    @include gl-border-t-solid;
-    @include gl-border-t-gray-200;
+    @apply gl-border-t-1 gl-border-t-solid gl-border-t-gray-200;
     @include gl-py-3;
   }
 
@@ -93,7 +86,7 @@
 
   .dropdown-toggle-split {
     &::after {
-      @include gl-border-0;
+      @apply gl-border-0;
       content: '';
       @include gl-display-block;
       @include gl-w-5;
@@ -103,7 +96,7 @@
     }
 
     &.btn-default:not(:disabled)::after {
-      @include gl-border-gray-500;
+      @apply gl-border-gray-500;
     }
 
     &.btn-confirm,

package/src/components/base/dropdown/dropdown_divider.scss

@@ -4,9 +4,7 @@
   @include gl-my-2;
   @include gl-mx-0;
   @include gl-p-0;
-  @include gl-border-t-1;
-  @include gl-border-t-solid;
-  @include gl-border-t-gray-200;
+  @apply gl-border-t-1 gl-border-t-solid gl-border-t-gray-200;
 }
 
 /* Styling when the component is used on its own */

package/src/components/base/dropdown/dropdown_item.scss

@@ -1,7 +1,7 @@
 @mixin gl-tmp-dropdown-item-style {
   @include gl-align-items-center;
   @include gl-bg-transparent;
-  @include gl-border-0;
+  @apply gl-border-0;
   @include gl-display-flex;
   @include gl-font-base;
   @include gl-font-weight-normal;
@@ -93,7 +93,7 @@
       }
 
       .avatar {
-        @include gl-border-white;
+        @apply gl-border-white;
       }
     }
 

package/src/components/base/filtered_search/filtered_search.scss

@@ -9,7 +9,7 @@
   @include gl-pl-4;
   @include gl-pr-7;
   @include gl-inset-border-1-gray-400;
-  @include gl-border-none;
+  @apply gl-border-none;
   @include gl-rounded-base;
 
   .input-group-prepend + & {
@@ -48,4 +48,4 @@
   @include gl-pl-1;
   @include gl-h-6;
   min-width: $gl-spacing-scale-12;
-}
+}

package/src/components/base/filtered_search/filtered_search_suggestion_list.scss

@@ -5,7 +5,7 @@
   @include gl-display-block;
   width: $gl-dropdown-width;
   @include gl-p-2;
-  @include gl-border-gray-200;
+  @apply gl-border-gray-200;
   @include gl-rounded-lg;
   @include gl-shadow-md;
 }

package/src/components/base/filtered_search/filtered_search_term.scss

@@ -6,7 +6,7 @@
 
 .gl-filtered-search-term-input {
   @include gl-p-0;
-  @include gl-border-none;
+  @apply gl-border-none;
   @include gl-outline-none;
   @include gl-h-6;
   @include gl-w-full;

package/src/components/base/filtered_search/filtered_search_token_segment.scss

@@ -14,7 +14,7 @@
 .gl-filtered-search-token-segment-input {
   @include gl-p-0;
   @include gl-h-full;
-  @include gl-border-none;
+  @apply gl-border-none;
   @include gl-outline-none;
   min-width: $gl-dropdown-width;
 }

package/src/components/base/form/form_input/form_input.scss

@@ -6,7 +6,7 @@
   @include gl-py-3;
   @include gl-px-4;
   @include gl-h-auto;
-  @include gl-border-none;
+  @apply gl-border-none;
   @include form-control-focus($ignore-warning: true);
   appearance: none;
   background: var(--gl-control-background-color-default);

package/src/components/base/form/form_select/form_select.scss

@@ -19,7 +19,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   padding-right: $gl-spacing-scale-2 + $gl-spacing-scale-6;
   @include gl-h-auto;
   @include gl-inset-border-1-gray-400;
-  @include gl-border-none;
+  @apply gl-border-none;
   appearance: none;
   @include gl-text-truncate;
   @include gl-bg-no-repeat;

package/src/components/base/label/label.scss

@@ -64,7 +64,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
   }
 
   > #{$label-close-button} {
-    @include gl-border-0;
+    @apply gl-border-0;
     @include gl-display-flex;
     width: px-to-rem(14px);
     height: px-to-rem(14px);

package/src/components/base/loading_icon/loading_icon.scss

@@ -37,7 +37,7 @@ $gl-loader-dots-size-xl: 1rem;
   position: relative;
   @include gl-display-inline-flex;
   @include gl-rounded-full;
-  @include gl-border-solid;
+  @apply gl-border-solid;
   @include gl-mx-auto;
   @include gl-my-0;
   @include gl-font-base;

package/src/components/base/modal/modal.scss

@@ -37,7 +37,7 @@ body.modal-open {
 
   .modal-content {
     @include gl-rounded-base;
-    @include gl-border-0;
+    @apply gl-border-0;
     box-shadow: $modal-box-shadow;
     background-color: var(--gl-background-color-default);
     color: var(--gl-text-color-default);
@@ -55,7 +55,7 @@ body.modal-open {
 
   .modal-header {
     @include gl-pb-3;
-    @include gl-border-none;
+    @apply gl-border-none;
 
     .modal-title {
       @include gl-heading-scale-500;
@@ -80,7 +80,7 @@ body.modal-open {
     @include gl-flex-direction-row;
     @include gl-p-5;
     @include gl-pt-3;
-    @include gl-border-none;
+    @apply gl-border-none;
 
     .btn {
       @include gl-m-0;

package/src/components/base/new_dropdowns/dropdown.scss

@@ -15,9 +15,7 @@
   .gl-new-dropdown-panel {
     @include gl-display-none;
     @include gl-bg-white;
-    @include gl-border-1;
-    @include gl-border-solid;
-    @include gl-border-gray-200;
+    @apply gl-border-1 gl-border-solid gl-border-gray-200;
     @include gl-rounded-lg;
     @include gl-shadow-md;
     top: 0;

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -45,13 +45,13 @@
         @include gl-text-blue-600
       }
     }
-    
+
     &:active,
     &:focus:active {
       .gl-new-dropdown-item-content {
         @include gl-bg-gray-200;
       }
-      
+
       .gl-new-dropdown-item-check-icon {
         @include gl-text-blue-700
       }
@@ -74,7 +74,7 @@
     @include gl-w-full;
     @include gl-bg-transparent;
     @include gl-align-items-center;
-    @include gl-border-0;
+    @apply gl-border-0;
     @include gl-display-flex;
     @include gl-font-base;
     @include gl-font-weight-normal;

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

@@ -8,7 +8,7 @@ $clear-button-size: 24px;
     @include gl-w-full;
     @include gl-line-height-normal;
     @include gl-h-auto;
-    @include gl-border-none;
+    @apply gl-border-none;
     @include gl-rounded-0;
     padding-left: calc(#{$gl-spacing-scale-7} + #{$gl-spacing-scale-2});
     padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});

package/src/components/base/pagination/pagination.scss

@@ -6,7 +6,7 @@
   }
 
   .page-link {
-    @include gl-border-gray-200;
+    @apply gl-border-gray-200;
     @include gl-line-height-normal;
     @include gl-px-4;
     @include gl-py-3;
@@ -48,7 +48,7 @@
   .page-item {
     &:not(.disabled) a.active {
       @include gl-bg-blue-500;
-      @include gl-border-blue-500;
+      @apply gl-border-blue-500;
       @include gl-text-white;
       @include gl-z-index-2;
       @include gl-shadow-none;
@@ -60,7 +60,7 @@
 
     &.disabled .page-link {
       @include gl-bg-gray-10;
-      @include gl-border-gray-200;
+      @apply gl-border-gray-200;
       @include gl-text-gray-500;
     }
   }

package/src/components/base/path/path.scss

@@ -68,7 +68,7 @@ $path-chevron-right-margin: px-to-rem(14px);
     position: relative;
     @include gl-font-base;
     @include gl-z-index-0;
-    @include gl-border-none;
+    @apply gl-border-none;
     @include gl-text-gray-500;
     @include gl-font-weight-bold;
     @include gl-line-height-normal;