@gitlab/ui 80.17.0 → 80.18.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [80.18.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.17.0...v80.18.0) (2024-06-05)
+
+
+### Features
+
+* **DesignTokens:** add border color design tokens ([b0dda57](https://gitlab.com/gitlab-org/gitlab-ui/commit/b0dda57203ac2b7996fe294078dd62971e5779d8))
+
 # [80.17.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.16.2...v80.17.0) (2024-05-31)
 
 

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

@@ -7,6 +7,10 @@ const GL_BACKGROUND_COLOR_DEFAULT = '#1f1e24'; // Used for the default backgroun
 const GL_BACKGROUND_COLOR_SUBTLE = '#333238'; // Used to slightly differentiate the background from the default.
 const GL_BACKGROUND_COLOR_STRONG = '#434248'; // Used to make the background easily stand out from the default.
 const GL_BACKGROUND_COLOR_DISABLED = '#333238'; // Used to identify a disabled section.
+const GL_BORDER_COLOR_DEFAULT = '#434248'; // Used for the default border color.
+const GL_BORDER_COLOR_SUBTLE = '#333238'; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
+const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
 const GL_COLOR_ALPHA_0 = 'transparent';
 const GL_COLOR_ALPHA_DARK_2 = 'rgba(31, 30, 36, 0.02)';
 const GL_COLOR_ALPHA_DARK_4 = 'rgba(31, 30, 36, 0.04)';
@@ -341,4 +345,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_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_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 };
+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_BORDER_COLOR_DEFAULT, GL_BORDER_COLOR_STRONG, GL_BORDER_COLOR_SUBTLE, GL_BORDER_COLOR_TRANSPARENT, 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_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

@@ -7,6 +7,10 @@ const GL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the default background c
 const GL_BACKGROUND_COLOR_SUBTLE = '#fbfafd'; // Used to slightly differentiate the background from the default.
 const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the background easily stand out from the default.
 const GL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used to identify a disabled section.
+const GL_BORDER_COLOR_DEFAULT = '#dcdcde'; // Used for the default border color.
+const GL_BORDER_COLOR_SUBTLE = '#ececef'; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
+const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
 const GL_COLOR_ALPHA_0 = 'transparent';
 const GL_COLOR_ALPHA_DARK_2 = 'rgba(31, 30, 36, 0.02)';
 const GL_COLOR_ALPHA_DARK_4 = 'rgba(31, 30, 36, 0.04)';
@@ -341,4 +345,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_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_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 };
+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_BORDER_COLOR_DEFAULT, GL_BORDER_COLOR_STRONG, GL_BORDER_COLOR_SUBTLE, GL_BORDER_COLOR_TRANSPARENT, 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_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

@@ -337,6 +337,10 @@
   --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-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
+  --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
+  --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a border that has a little more definition, or is used in combination with a subtle background. */
+  --gl-border-color-default: var(--gl-color-neutral-100); /* Used for the default border color. */
   --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

@@ -337,6 +337,10 @@
   --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-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
+  --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
+  --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a border that has a little more definition, or is used in combination with a subtle background. */
+  --gl-border-color-default: var(--gl-color-neutral-800); /* Used for the default border color. */
   --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

@@ -7,6 +7,10 @@ export const GL_BACKGROUND_COLOR_DEFAULT = '#1f1e24'; // Used for the default ba
 export const GL_BACKGROUND_COLOR_SUBTLE = '#333238'; // Used to slightly differentiate the background from the default.
 export const GL_BACKGROUND_COLOR_STRONG = '#434248'; // Used to make the background easily stand out from the default.
 export const GL_BACKGROUND_COLOR_DISABLED = '#333238'; // Used to identify a disabled section.
+export const GL_BORDER_COLOR_DEFAULT = '#434248'; // Used for the default border color.
+export const GL_BORDER_COLOR_SUBTLE = '#333238'; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+export const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
+export const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
 export const GL_COLOR_ALPHA_0 = 'transparent';
 export const GL_COLOR_ALPHA_DARK_2 = 'rgba(31, 30, 36, 0.02)';
 export const GL_COLOR_ALPHA_DARK_4 = 'rgba(31, 30, 36, 0.04)';

package/dist/tokens/js/tokens.js

@@ -7,6 +7,10 @@ export const GL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the default backg
 export const GL_BACKGROUND_COLOR_SUBTLE = '#fbfafd'; // Used to slightly differentiate the background from the default.
 export const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the background easily stand out from the default.
 export const GL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used to identify a disabled section.
+export const GL_BORDER_COLOR_DEFAULT = '#dcdcde'; // Used for the default border color.
+export const GL_BORDER_COLOR_SUBTLE = '#ececef'; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+export const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
+export const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
 export const GL_COLOR_ALPHA_0 = 'transparent';
 export const GL_COLOR_ALPHA_DARK_2 = 'rgba(31, 30, 36, 0.02)';
 export const GL_COLOR_ALPHA_DARK_4 = 'rgba(31, 30, 36, 0.04)';

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

@@ -91,6 +91,95 @@
       }
     }
   },
+  "border": {
+    "color": {
+      "default": {
+        "value": "#434248",
+        "$type": "color",
+        "comment": "Used for the default border color.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.100}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "comment": "Used for the default border color."
+        },
+        "name": "BORDER_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "default"
+        ]
+      },
+      "subtle": {
+        "value": "#333238",
+        "$type": "color",
+        "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.50}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background."
+        },
+        "name": "BORDER_COLOR_SUBTLE",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "subtle"
+        ]
+      },
+      "strong": {
+        "value": "#89888d",
+        "$type": "color",
+        "comment": "Used for a distinct border that emphasizes an edge or boundaries.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.400}",
+            "dark": "{color.neutral.400}"
+          },
+          "$type": "color",
+          "comment": "Used for a distinct border that emphasizes an edge or boundaries."
+        },
+        "name": "BORDER_COLOR_STRONG",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "strong"
+        ]
+      },
+      "transparent": {
+        "value": "transparent",
+        "$type": "color",
+        "comment": "Used when a border needs to be present, but not visibly perceived.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{color.alpha.0}",
+          "$type": "color",
+          "comment": "Used when a border needs to be present, but not visibly perceived."
+        },
+        "name": "BORDER_COLOR_TRANSPARENT",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "transparent"
+        ]
+      }
+    }
+  },
   "color": {
     "alpha": {
       "0": {

package/dist/tokens/json/tokens.json

@@ -91,6 +91,95 @@
       }
     }
   },
+  "border": {
+    "color": {
+      "default": {
+        "value": "#dcdcde",
+        "$type": "color",
+        "comment": "Used for the default border color.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.100}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "comment": "Used for the default border color."
+        },
+        "name": "BORDER_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "default"
+        ]
+      },
+      "subtle": {
+        "value": "#ececef",
+        "$type": "color",
+        "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.50}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background."
+        },
+        "name": "BORDER_COLOR_SUBTLE",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "subtle"
+        ]
+      },
+      "strong": {
+        "value": "#89888d",
+        "$type": "color",
+        "comment": "Used for a distinct border that emphasizes an edge or boundaries.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.400}",
+            "dark": "{color.neutral.400}"
+          },
+          "$type": "color",
+          "comment": "Used for a distinct border that emphasizes an edge or boundaries."
+        },
+        "name": "BORDER_COLOR_STRONG",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "strong"
+        ]
+      },
+      "transparent": {
+        "value": "transparent",
+        "$type": "color",
+        "comment": "Used when a border needs to be present, but not visibly perceived.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{color.alpha.0}",
+          "$type": "color",
+          "comment": "Used when a border needs to be present, but not visibly perceived."
+        },
+        "name": "BORDER_COLOR_TRANSPARENT",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "transparent"
+        ]
+      }
+    }
+  },
   "color": {
     "alpha": {
       "0": {

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

@@ -335,6 +335,10 @@ $gl-icon-color-disabled: $gl-color-neutral-500; // Used for an icon within a dis
 $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-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
+$gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
+$gl-border-color-subtle: $gl-color-neutral-900; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+$gl-border-color-default: $gl-color-neutral-800; // Used for the default border color.
 $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

@@ -335,6 +335,10 @@ $gl-icon-color-disabled: $gl-color-neutral-300; // Used for an icon within a dis
 $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-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
+$gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
+$gl-border-color-subtle: $gl-color-neutral-50; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+$gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
 $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

@@ -7,6 +7,10 @@ $gl-background-color-default: var(--gl-background-color-default);
 $gl-background-color-subtle: var(--gl-background-color-subtle);
 $gl-background-color-strong: var(--gl-background-color-strong);
 $gl-background-color-disabled: var(--gl-background-color-disabled);
+$gl-border-color-default: var(--gl-border-color-default);
+$gl-border-color-subtle: var(--gl-border-color-subtle);
+$gl-border-color-strong: var(--gl-border-color-strong);
+$gl-border-color-transparent: var(--gl-border-color-transparent);
 $gl-color-alpha-0: var(--gl-color-alpha-0);
 $gl-color-alpha-dark-2: var(--gl-color-alpha-dark-2);
 $gl-color-alpha-dark-4: var(--gl-color-alpha-dark-4);

package/dist/tokens/tailwind/tokens.cjs

@@ -224,6 +224,14 @@ const backgroundColors = {
   disabled:
     'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
 };
+const borderColors = {
+  default:
+    'var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))',
+  subtle: 'var(--gl-border-color-subtle, var(--gl-color-neutral-50, #ececef))',
+  strong: 'var(--gl-border-color-strong, var(--gl-color-neutral-400, #89888d))',
+  transparent:
+    'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
+};
 const iconColors = {
   default: 'var(--gl-icon-color-default, var(--gl-color-neutral-700, #535158))',
   subtle: 'var(--gl-icon-color-subtle, var(--gl-color-neutral-500, #737278))',
@@ -274,6 +282,11 @@ const backgroundColor = {
   ...backgroundColors,
 };
 
+const borderColor = {
+  ...colors,
+  ...borderColors,
+};
+
 const fill = {
   ...colors,
   icon: {
@@ -292,6 +305,7 @@ const textColor = {
 module.exports = {
   colors,
   backgroundColor,
+  borderColor,
   textColor,
   fill,
 };

package/dist/tokens/tokens_story.js

@@ -22,14 +22,14 @@ var script = {
     }
   },
   methods: {
-    isAlpha(value) {
-      return value.startsWith('rgba(');
+    isHex(value) {
+      return value.startsWith('#');
     },
     getTokenName(token) {
       return token.path.filter(Boolean).join('.');
     },
     getClasses(value) {
-      if (this.isAlpha(value)) return '';
+      if (!this.isHex(value)) return '';
       if (!this.isBackgroundColorStory) return '';
       const textColorVariant = colorFromBackground(value, 4.5);
       return {
@@ -54,7 +54,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-list-style-none gl-m-0 gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.value),style:(_vm.getStyle(token.value))},[_c('code',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-reset-color",attrs:{"title":token.comment}},[_vm._v("\n        "+_vm._s(_vm.getTokenName(token))+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3"},[(token.deprecated)?_c('gl-badge',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":token.comment,"variant":"danger"}},[_vm._v("\n          Deprecated\n        ")]):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-reset-color"},[_vm._v(_vm._s(token.value))]),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-list-style-none gl-m-0 gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.value),style:(_vm.getStyle(token.value))},[_c('code',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-reset-color",attrs:{"title":token.comment}},[_vm._v("\n        "+_vm._s(_vm.getTokenName(token))+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3"},[(token.deprecated)?_c('gl-badge',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":token.comment,"variant":"danger"}},[_vm._v("\n          Deprecated\n        ")]):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-reset-color"},[_vm._v(_vm._s(token.value))]),_vm._v(" "),(_vm.isHex(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(_vm.isHex(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "80.17.0",
+  "version": "80.18.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -107,7 +107,7 @@
     "@gitlab/eslint-plugin": "19.5.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.99.0",
+    "@gitlab/svgs": "3.101.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -119,7 +119,7 @@
     "@storybook/addon-viewport": "^7.6.19",
     "@storybook/builder-webpack5": "^7.6.19",
     "@storybook/test": "^7.6.19",
-    "@storybook/test-runner": "0.18.1",
+    "@storybook/test-runner": "0.18.2",
     "@storybook/theming": "^7.6.19",
     "@storybook/vue": "^7.6.17",
     "@storybook/vue-webpack5": "^7.6.17",
@@ -144,7 +144,7 @@
     "emoji-regex": "^10.0.0",
     "eslint": "8.57.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "3.2.0",
+    "eslint-plugin-cypress": "3.3.0",
     "eslint-plugin-storybook": "0.8.0",
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",

package/src/tokens/border.tokens.json

@@ -0,0 +1,35 @@
+{
+  "border": {
+    "color": {
+      "default": {
+        "$value": {
+          "default": "{color.neutral.100}",
+          "dark": "{color.neutral.800}"
+        },
+        "$type": "color",
+        "$description": "Used for the default border color."
+      },
+      "subtle": {
+        "$value": {
+          "default": "{color.neutral.50}",
+          "dark": "{color.neutral.900}"
+        },
+        "$type": "color",
+        "$description": "Used for a border that has a little more definition, or is used in combination with a subtle background."
+      },
+      "strong": {
+        "$value": {
+          "default": "{color.neutral.400}",
+          "dark": "{color.neutral.400}"
+        },
+        "$type": "color",
+        "$description": "Used for a distinct border that emphasizes an edge or boundaries."
+      },
+      "transparent": {
+        "$value": "{color.alpha.0}",
+        "$type": "color",
+        "$description": "Used when a border needs to be present, but not visibly perceived."
+      }
+    }
+  }
+}

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

@@ -337,6 +337,10 @@
   --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-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
+  --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
+  --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a border that has a little more definition, or is used in combination with a subtle background. */
+  --gl-border-color-default: var(--gl-color-neutral-100); /* Used for the default border color. */
   --gl-background-color-disabled: var(--gl-color-neutral-10); /* Used to identify a disabled section. */
   --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-10); /* Used to slightly differentiate the background from the default. */

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

@@ -337,6 +337,10 @@
   --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-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
+  --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
+  --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a border that has a little more definition, or is used in combination with a subtle background. */
+  --gl-border-color-default: var(--gl-color-neutral-800); /* Used for the default border color. */
   --gl-background-color-disabled: var(--gl-color-neutral-900); /* Used to identify a disabled section. */
   --gl-background-color-strong: var(--gl-color-neutral-800); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */

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

@@ -7,6 +7,10 @@ export const GL_BACKGROUND_COLOR_DEFAULT = '#1f1e24'; // Used for the default ba
 export const GL_BACKGROUND_COLOR_SUBTLE = '#333238'; // Used to slightly differentiate the background from the default.
 export const GL_BACKGROUND_COLOR_STRONG = '#434248'; // Used to make the background easily stand out from the default.
 export const GL_BACKGROUND_COLOR_DISABLED = '#333238'; // Used to identify a disabled section.
+export const GL_BORDER_COLOR_DEFAULT = '#434248'; // Used for the default border color.
+export const GL_BORDER_COLOR_SUBTLE = '#333238'; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+export const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
+export const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
 export const GL_COLOR_ALPHA_0 = 'transparent';
 export const GL_COLOR_ALPHA_DARK_2 = 'rgba(31, 30, 36, 0.02)';
 export const GL_COLOR_ALPHA_DARK_4 = 'rgba(31, 30, 36, 0.04)';

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

@@ -7,6 +7,10 @@ export const GL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the default backg
 export const GL_BACKGROUND_COLOR_SUBTLE = '#fbfafd'; // Used to slightly differentiate the background from the default.
 export const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the background easily stand out from the default.
 export const GL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used to identify a disabled section.
+export const GL_BORDER_COLOR_DEFAULT = '#dcdcde'; // Used for the default border color.
+export const GL_BORDER_COLOR_SUBTLE = '#ececef'; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+export const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
+export const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
 export const GL_COLOR_ALPHA_0 = 'transparent';
 export const GL_COLOR_ALPHA_DARK_2 = 'rgba(31, 30, 36, 0.02)';
 export const GL_COLOR_ALPHA_DARK_4 = 'rgba(31, 30, 36, 0.04)';

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

@@ -91,6 +91,95 @@
       }
     }
   },
+  "border": {
+    "color": {
+      "default": {
+        "value": "#434248",
+        "$type": "color",
+        "comment": "Used for the default border color.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.100}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "comment": "Used for the default border color."
+        },
+        "name": "BORDER_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "default"
+        ]
+      },
+      "subtle": {
+        "value": "#333238",
+        "$type": "color",
+        "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.50}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background."
+        },
+        "name": "BORDER_COLOR_SUBTLE",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "subtle"
+        ]
+      },
+      "strong": {
+        "value": "#89888d",
+        "$type": "color",
+        "comment": "Used for a distinct border that emphasizes an edge or boundaries.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.400}",
+            "dark": "{color.neutral.400}"
+          },
+          "$type": "color",
+          "comment": "Used for a distinct border that emphasizes an edge or boundaries."
+        },
+        "name": "BORDER_COLOR_STRONG",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "strong"
+        ]
+      },
+      "transparent": {
+        "value": "transparent",
+        "$type": "color",
+        "comment": "Used when a border needs to be present, but not visibly perceived.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{color.alpha.0}",
+          "$type": "color",
+          "comment": "Used when a border needs to be present, but not visibly perceived."
+        },
+        "name": "BORDER_COLOR_TRANSPARENT",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "transparent"
+        ]
+      }
+    }
+  },
   "color": {
     "alpha": {
       "0": {

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

@@ -91,6 +91,95 @@
       }
     }
   },
+  "border": {
+    "color": {
+      "default": {
+        "value": "#dcdcde",
+        "$type": "color",
+        "comment": "Used for the default border color.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.100}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "comment": "Used for the default border color."
+        },
+        "name": "BORDER_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "default"
+        ]
+      },
+      "subtle": {
+        "value": "#ececef",
+        "$type": "color",
+        "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.50}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "comment": "Used for a border that has a little more definition, or is used in combination with a subtle background."
+        },
+        "name": "BORDER_COLOR_SUBTLE",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "subtle"
+        ]
+      },
+      "strong": {
+        "value": "#89888d",
+        "$type": "color",
+        "comment": "Used for a distinct border that emphasizes an edge or boundaries.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.400}",
+            "dark": "{color.neutral.400}"
+          },
+          "$type": "color",
+          "comment": "Used for a distinct border that emphasizes an edge or boundaries."
+        },
+        "name": "BORDER_COLOR_STRONG",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "strong"
+        ]
+      },
+      "transparent": {
+        "value": "transparent",
+        "$type": "color",
+        "comment": "Used when a border needs to be present, but not visibly perceived.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{color.alpha.0}",
+          "$type": "color",
+          "comment": "Used when a border needs to be present, but not visibly perceived."
+        },
+        "name": "BORDER_COLOR_TRANSPARENT",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "transparent"
+        ]
+      }
+    }
+  },
   "color": {
     "alpha": {
       "0": {

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

@@ -335,6 +335,10 @@ $gl-icon-color-disabled: $gl-color-neutral-500; // Used for an icon within a dis
 $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-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
+$gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
+$gl-border-color-subtle: $gl-color-neutral-900; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+$gl-border-color-default: $gl-color-neutral-800; // Used for the default border color.
 $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.

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

@@ -335,6 +335,10 @@ $gl-icon-color-disabled: $gl-color-neutral-300; // Used for an icon within a dis
 $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-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
+$gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
+$gl-border-color-subtle: $gl-color-neutral-50; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+$gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
 $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/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -7,6 +7,10 @@ $gl-background-color-default: var(--gl-background-color-default);
 $gl-background-color-subtle: var(--gl-background-color-subtle);
 $gl-background-color-strong: var(--gl-background-color-strong);
 $gl-background-color-disabled: var(--gl-background-color-disabled);
+$gl-border-color-default: var(--gl-border-color-default);
+$gl-border-color-subtle: var(--gl-border-color-subtle);
+$gl-border-color-strong: var(--gl-border-color-strong);
+$gl-border-color-transparent: var(--gl-border-color-transparent);
 $gl-color-alpha-0: var(--gl-color-alpha-0);
 $gl-color-alpha-dark-2: var(--gl-color-alpha-dark-2);
 $gl-color-alpha-dark-4: var(--gl-color-alpha-dark-4);

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

@@ -224,6 +224,14 @@ const backgroundColors = {
   disabled:
     'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
 };
+const borderColors = {
+  default:
+    'var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))',
+  subtle: 'var(--gl-border-color-subtle, var(--gl-color-neutral-50, #ececef))',
+  strong: 'var(--gl-border-color-strong, var(--gl-color-neutral-400, #89888d))',
+  transparent:
+    'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
+};
 const iconColors = {
   default: 'var(--gl-icon-color-default, var(--gl-color-neutral-700, #535158))',
   subtle: 'var(--gl-icon-color-subtle, var(--gl-color-neutral-500, #737278))',
@@ -274,6 +282,11 @@ const backgroundColor = {
   ...backgroundColors,
 };
 
+const borderColor = {
+  ...colors,
+  ...borderColors,
+};
+
 const fill = {
   ...colors,
   icon: {
@@ -292,6 +305,7 @@ const textColor = {
 module.exports = {
   colors,
   backgroundColor,
+  borderColor,
   textColor,
   fill,
 };

package/src/tokens/tokens_story.vue

@@ -22,14 +22,14 @@ export default {
     },
   },
   methods: {
-    isAlpha(value) {
-      return value.startsWith('rgba(');
+    isHex(value) {
+      return value.startsWith('#');
     },
     getTokenName(token) {
       return token.path.filter(Boolean).join('.');
     },
     getClasses(value) {
-      if (this.isAlpha(value)) return '';
+      if (!this.isHex(value)) return '';
       if (!this.isBackgroundColorStory) return '';
 
       const textColorVariant = colorFromBackground(value, 4.5);
@@ -68,12 +68,12 @@ export default {
           </gl-badge>
           <code class="gl-reset-color">{{ token.value }}</code>
           <gl-color-contrast
-            v-if="!isAlpha(token.value)"
+            v-if="isHex(token.value)"
             :foreground="token.value"
             :background="darkBackground"
           />
           <gl-color-contrast
-            v-if="!isAlpha(token.value)"
+            v-if="isHex(token.value)"
             :foreground="token.value"
             :background="lightBackground"
           />

package/tailwind.defaults.js

@@ -1,6 +1,7 @@
 const {
   colors,
   backgroundColor,
+  borderColor,
   fill,
   textColor,
 } = require('./src/tokens/build/tailwind/tokens.cjs');
@@ -54,6 +55,7 @@ module.exports = {
     },
     colors,
     backgroundColor,
+    borderColor,
     fill,
     spacing,
     fontSize: {

package/translations.json

@@ -1,12 +1,12 @@
 {
   "ClearIconButton.title": "Clear",
-  "GlSorting.sortAscending": "Sort direction: ascending",
-  "GlSorting.sortDescending": "Sort direction: descending",
-  "GlSearchBoxByType.clearButtonTitle": "Clear",
-  "GlSearchBoxByType.input.placeholder": "Search",
-  "GlKeysetPagination.prevText": "Previous",
+  "GlBreadcrumb.showMoreLabel": "Show more breadcrumbs",
+  "GlCollapsibleListbox.srOnlyResultsLabel": "Results count",
   "GlKeysetPagination.navigationLabel": "Pagination",
   "GlKeysetPagination.nextText": "Next",
-  "GlBreadcrumb.showMoreLabel": "Show more breadcrumbs",
-  "GlCollapsibleListbox.srOnlyResultsLabel": "Results count"
+  "GlKeysetPagination.prevText": "Previous",
+  "GlSearchBoxByType.clearButtonTitle": "Clear",
+  "GlSearchBoxByType.input.placeholder": "Search",
+  "GlSorting.sortAscending": "Sort direction: ascending",
+  "GlSorting.sortDescending": "Sort direction: descending"
 }