CHANGELOG.md

+# [88.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v88.3.0...v88.4.0) (2024-08-08)
+
+
+### Features
+
+* Add missing badge design tokens ([d36a5f8](https://gitlab.com/gitlab-org/gitlab-ui/commit/d36a5f85d35a211bdb264ee4926c07852bffa73e))
+
 # [88.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v88.2.1...v88.3.0) (2024-08-07)
 
 

package.json

 {
   "name": "@gitlab/ui",
-  "version": "88.3.0",
+  "version": "88.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -284,20 +284,30 @@ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#002850'; // Blue backg
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#072b15'; // Green background for avatar fallback with no particular meaning.
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#421f00'; // Orange background for avatar fallback with no particular meaning.
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#28272d'; // Neutral background for avatar fallback with no particular meaning.
-export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of a subtle neutral badge when static or the default state when linked.
-export const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of a subtle neutral badge in the active state.
-export const GL_BADGE_MUTED_BORDER_COLOR_HOVER = '#4c4b51'; // Used for the border of a subtle neutral badge in the hover state.
-export const GL_BADGE_MUTED_TEXT_COLOR_DEFAULT = '#a4a3a8'; // Used for the text of a subtle neutral badge when static or the default state when linked.
-export const GL_BADGE_MUTED_TEXT_COLOR_HOVER = '#bfbfc3'; // Used for the text of a subtle neutral badge in the hover state.
-export const GL_BADGE_MUTED_TEXT_COLOR_FOCUS = '#bfbfc3'; // Used for the text of a subtle neutral badge in the focus state.
-export const GL_BADGE_MUTED_TEXT_COLOR_ACTIVE = '#dcdcde'; // Used for the text of a subtle neutral badge in the active state.
-export const GL_BADGE_MUTED_ICON_COLOR_DEFAULT = '#89888d'; // Used for the icon of a subtle neutral badge when static or the default state when linked.
-export const GL_BADGE_MUTED_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon of a subtle neutral badge in the hover state.
-export const GL_BADGE_MUTED_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a subtle neutral badge in the focus state.
-export const GL_BADGE_MUTED_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a subtle neutral badge in the active state.
+export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of a muted badge when static or the default state when linked.
+export const GL_BADGE_MUTED_BACKGROUND_COLOR_HOVER = '#28272d'; // Used for the background of a muted badge in the hover state.
+export const GL_BADGE_MUTED_BACKGROUND_COLOR_FOCUS = '#28272d'; // Used for the background of a muted badge in the focus state.
+export const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of a muted badge in the active state.
+export const GL_BADGE_MUTED_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a muted badge when static or the default state when linked.
+export const GL_BADGE_MUTED_BORDER_COLOR_HOVER = '#4c4b51'; // Used for the border of a muted badge in the hover state.
+export const GL_BADGE_MUTED_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a muted badge in the focus state.
+export const GL_BADGE_MUTED_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a muted badge in the active state.
+export const GL_BADGE_MUTED_TEXT_COLOR_DEFAULT = '#a4a3a8'; // Used for the text of a muted badge when static or the default state when linked.
+export const GL_BADGE_MUTED_TEXT_COLOR_HOVER = '#bfbfc3'; // Used for the text of a muted badge in the hover state.
+export const GL_BADGE_MUTED_TEXT_COLOR_FOCUS = '#bfbfc3'; // Used for the text of a muted badge in the focus state.
+export const GL_BADGE_MUTED_TEXT_COLOR_ACTIVE = '#dcdcde'; // Used for the text of a muted badge in the active state.
+export const GL_BADGE_MUTED_ICON_COLOR_DEFAULT = '#89888d'; // Used for the icon of a muted badge when static or the default state when linked.
+export const GL_BADGE_MUTED_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon of a muted badge in the hover state.
+export const GL_BADGE_MUTED_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a muted badge in the focus state.
+export const GL_BADGE_MUTED_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a muted badge in the active state.
 export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#3a383f'; // Used for the background of a neutral badge when static or the default state when linked.
+export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_HOVER = '#3a383f'; // Used for the background of a neutral badge in the hover state.
+export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#3a383f'; // Used for the background of a neutral badge in the focus state.
 export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#4c4b51'; // Used for the background of a neutral badge in the active state.
+export const GL_BADGE_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a neutral badge when static or the default state when linked.
 export const GL_BADGE_NEUTRAL_BORDER_COLOR_HOVER = '#4c4b51'; // Used for the border of a neutral badge in the hover state.
+export const GL_BADGE_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a neutral badge in the focus state.
+export const GL_BADGE_NEUTRAL_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a neutral badge in the active state.
 export const GL_BADGE_NEUTRAL_TEXT_COLOR_DEFAULT = '#bfbfc3'; // Used for the text of a neutral badge when static or the default state when linked.
 export const GL_BADGE_NEUTRAL_TEXT_COLOR_HOVER = '#dcdcde'; // Used for the text of a neutral badge in the hover state.
 export const GL_BADGE_NEUTRAL_TEXT_COLOR_FOCUS = '#dcdcde'; // Used for the text of a neutral badge in the focus state.
@@ -307,8 +317,13 @@ export const GL_BADGE_NEUTRAL_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon
 export const GL_BADGE_NEUTRAL_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a neutral badge in the focus state.
 export const GL_BADGE_NEUTRAL_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a neutral badge in the active state.
 export const GL_BADGE_INFO_BACKGROUND_COLOR_DEFAULT = '#064787'; // Used for the background of an informational badge when static or the default state when linked.
+export const GL_BADGE_INFO_BACKGROUND_COLOR_HOVER = '#064787'; // Used for the background of an informational badge in the hover state.
+export const GL_BADGE_INFO_BACKGROUND_COLOR_FOCUS = '#064787'; // Used for the background of an informational badge in the focus state.
 export const GL_BADGE_INFO_BACKGROUND_COLOR_ACTIVE = '#0b5cad'; // Used for the background of an informational badge in the active state.
+export const GL_BADGE_INFO_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of an informational badge when static or the default state when linked.
 export const GL_BADGE_INFO_BORDER_COLOR_HOVER = '#0b5cad'; // Used for the border of an informational badge in the hover state.
+export const GL_BADGE_INFO_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of an informational badge in the focus state.
+export const GL_BADGE_INFO_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of an informational badge in the active state.
 export const GL_BADGE_INFO_TEXT_COLOR_DEFAULT = '#9dc7f1'; // Used for the text of an informational badge when static or the default state when linked.
 export const GL_BADGE_INFO_TEXT_COLOR_HOVER = '#cbe2f9'; // Used for the text of an informational badge in the hover state.
 export const GL_BADGE_INFO_TEXT_COLOR_FOCUS = '#cbe2f9'; // Used for the text of an informational badge in the focus state.
@@ -318,8 +333,13 @@ export const GL_BADGE_INFO_ICON_COLOR_HOVER = '#63a6e9'; // Used for the icon of
 export const GL_BADGE_INFO_ICON_COLOR_FOCUS = '#63a6e9'; // Used for the icon of an informational badge in the focus state.
 export const GL_BADGE_INFO_ICON_COLOR_ACTIVE = '#9dc7f1'; // Used for the icon of an informational badge in the active state.
 export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_DEFAULT = '#0d532a'; // Used for the background of a success badge when static or the default state when linked.
+export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_HOVER = '#0d532a'; // Used for the background of a success badge in the hover state.
+export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_FOCUS = '#0d532a'; // Used for the background of a success badge in the focus state.
 export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_ACTIVE = '#24663b'; // Used for the background of a success badge in the active state.
+export const GL_BADGE_SUCCESS_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a success badge when static or the default state when linked.
 export const GL_BADGE_SUCCESS_BORDER_COLOR_HOVER = '#24663b'; // Used for the border of a success badge in the hover state.
+export const GL_BADGE_SUCCESS_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a success badge in the focus state.
+export const GL_BADGE_SUCCESS_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a success badge in the active state.
 export const GL_BADGE_SUCCESS_TEXT_COLOR_DEFAULT = '#91d4a8'; // Used for the text of a success badge when static or the default state when linked.
 export const GL_BADGE_SUCCESS_TEXT_COLOR_HOVER = '#c3e6cd'; // Used for the text of a success badge in the hover state.
 export const GL_BADGE_SUCCESS_TEXT_COLOR_FOCUS = '#c3e6cd'; // Used for the text of a success badge in the focus state.
@@ -328,31 +348,46 @@ export const GL_BADGE_SUCCESS_ICON_COLOR_DEFAULT = '#2da160'; // Used for the ic
 export const GL_BADGE_SUCCESS_ICON_COLOR_HOVER = '#52b87a'; // Used for the icon of a success badge in the hover state.
 export const GL_BADGE_SUCCESS_ICON_COLOR_FOCUS = '#52b87a'; // Used for the icon of a success badge in the focus state.
 export const GL_BADGE_SUCCESS_ICON_COLOR_ACTIVE = '#91d4a8'; // Used for the icon of a success badge in the active state.
-export const GL_BADGE_WARNING_BACKGROUND_COLOR_DEFAULT = '#703800'; // Used for the background of a warning status or confidential item when static or the default state when linked.
-export const GL_BADGE_WARNING_BACKGROUND_COLOR_ACTIVE = '#8f4700'; // Used for the background of a warning status or confidential item in the active state.
-export const GL_BADGE_WARNING_BORDER_COLOR_HOVER = '#8f4700'; // Used for the border of a warning status or confidential item in the hover state.
-export const GL_BADGE_WARNING_TEXT_COLOR_DEFAULT = '#e9be74'; // Used for the text of a warning status or confidential item when static or the default state when linked.
-export const GL_BADGE_WARNING_TEXT_COLOR_HOVER = '#f5d9a8'; // Used for the text of a warning status or confidential item in the hover state.
-export const GL_BADGE_WARNING_TEXT_COLOR_FOCUS = '#f5d9a8'; // Used for the text of a warning status or confidential item in the focus state.
-export const GL_BADGE_WARNING_TEXT_COLOR_ACTIVE = '#fdf1dd'; // Used for the text of a warning status or confidential item in the active state.N
-export const GL_BADGE_WARNING_ICON_COLOR_DEFAULT = '#c17d10'; // Used for the icon of a warning status or confidential item when static or the default state when linked.
-export const GL_BADGE_WARNING_ICON_COLOR_HOVER = '#d99530'; // Used for the icon of a warning status or confidential item in the hover state.
-export const GL_BADGE_WARNING_ICON_COLOR_FOCUS = '#d99530'; // Used for the icon of a warning status or confidential item in the focus state.
-export const GL_BADGE_WARNING_ICON_COLOR_ACTIVE = '#e9be74'; // Used for the icon of a warning status or confidential item in the active state.
-export const GL_BADGE_DANGER_BACKGROUND_COLOR_DEFAULT = '#8d1300'; // Used for the background of a danger (critical) badge when static or the default state when linked.
-export const GL_BADGE_DANGER_BACKGROUND_COLOR_ACTIVE = '#ae1800'; // Used for the background of a danger (critical) badge in the active state.
-export const GL_BADGE_DANGER_BORDER_COLOR_HOVER = '#ae1800'; // Used for the border of a danger (critical) badge in the hover state.
-export const GL_BADGE_DANGER_TEXT_COLOR_DEFAULT = '#fcb5aa'; // Used for the text of a danger (critical) badge when static or the default state when linked.
-export const GL_BADGE_DANGER_TEXT_COLOR_HOVER = '#fdd4cd'; // Used for the text of a danger (critical) badge in the hover state.
-export const GL_BADGE_DANGER_TEXT_COLOR_FOCUS = '#fdd4cd'; // Used for the text of a danger (critical) badge in the focus state.
-export const GL_BADGE_DANGER_TEXT_COLOR_ACTIVE = '#fcf1ef'; // Used for the text of a danger (critical) badge in the active state.
-export const GL_BADGE_DANGER_ICON_COLOR_DEFAULT = '#ec5941'; // Used for the icon of a danger (critical) badge when static or the default state when linked.
-export const GL_BADGE_DANGER_ICON_COLOR_HOVER = '#f57f6c'; // Used for the icon of a danger (critical) badge in the hover state.
-export const GL_BADGE_DANGER_ICON_COLOR_FOCUS = '#f57f6c'; // Used for the icon of a danger (critical) badge in the focus state.
-export const GL_BADGE_DANGER_ICON_COLOR_ACTIVE = '#fcb5aa'; // Used for the icon of a danger (critical) badge in the active state.
+export const GL_BADGE_WARNING_BACKGROUND_COLOR_DEFAULT = '#703800'; // Used for the background of a warning badge when static or the default state when linked.
+export const GL_BADGE_WARNING_BACKGROUND_COLOR_HOVER = '#703800'; // Used for the background of a warning badge in the hover state.
+export const GL_BADGE_WARNING_BACKGROUND_COLOR_FOCUS = '#703800'; // Used for the background of a warning badge in the focus state.
+export const GL_BADGE_WARNING_BACKGROUND_COLOR_ACTIVE = '#8f4700'; // Used for the background of a warning badge in the active state.
+export const GL_BADGE_WARNING_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a warning badge when static or the default state when linked.
+export const GL_BADGE_WARNING_BORDER_COLOR_HOVER = '#8f4700'; // Used for the border of a warning badge in the hover state.
+export const GL_BADGE_WARNING_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a warning badge in the focus state.
+export const GL_BADGE_WARNING_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a warning badge in the active state.
+export const GL_BADGE_WARNING_TEXT_COLOR_DEFAULT = '#e9be74'; // Used for the text of a warning badge when static or the default state when linked.
+export const GL_BADGE_WARNING_TEXT_COLOR_HOVER = '#f5d9a8'; // Used for the text of a warning badge in the hover state.
+export const GL_BADGE_WARNING_TEXT_COLOR_FOCUS = '#f5d9a8'; // Used for the text of a warning badge in the focus state.
+export const GL_BADGE_WARNING_TEXT_COLOR_ACTIVE = '#fdf1dd'; // Used for the text of a warning badge in the active state.
+export const GL_BADGE_WARNING_ICON_COLOR_DEFAULT = '#c17d10'; // Used for the icon of a warning badge when static or the default state when linked.
+export const GL_BADGE_WARNING_ICON_COLOR_HOVER = '#d99530'; // Used for the icon of a warning badge in the hover state.
+export const GL_BADGE_WARNING_ICON_COLOR_FOCUS = '#d99530'; // Used for the icon of a warning badge in the focus state.
+export const GL_BADGE_WARNING_ICON_COLOR_ACTIVE = '#e9be74'; // Used for the icon of a warning badge in the active state.
+export const GL_BADGE_DANGER_BACKGROUND_COLOR_DEFAULT = '#8d1300'; // Used for the background of a danger badge when static or the default state when linked.
+export const GL_BADGE_DANGER_BACKGROUND_COLOR_HOVER = '#8d1300'; // Used for the background of a danger badge in the hover state.
+export const GL_BADGE_DANGER_BACKGROUND_COLOR_FOCUS = '#8d1300'; // Used for the background of a danger badge in the focus state.
+export const GL_BADGE_DANGER_BACKGROUND_COLOR_ACTIVE = '#ae1800'; // Used for the background of a danger badge in the active state.
+export const GL_BADGE_DANGER_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a danger badge when static or the default state when linked.
+export const GL_BADGE_DANGER_BORDER_COLOR_HOVER = '#ae1800'; // Used for the border of a danger badge in the hover state.
+export const GL_BADGE_DANGER_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a danger badge in the focus state.
+export const GL_BADGE_DANGER_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a danger badge in the active state.
+export const GL_BADGE_DANGER_TEXT_COLOR_DEFAULT = '#fcb5aa'; // Used for the text of a danger badge when static or the default state when linked.
+export const GL_BADGE_DANGER_TEXT_COLOR_HOVER = '#fdd4cd'; // Used for the text of a danger badge in the hover state.
+export const GL_BADGE_DANGER_TEXT_COLOR_FOCUS = '#fdd4cd'; // Used for the text of a danger badge in the focus state.
+export const GL_BADGE_DANGER_TEXT_COLOR_ACTIVE = '#fcf1ef'; // Used for the text of a danger badge in the active state.
+export const GL_BADGE_DANGER_ICON_COLOR_DEFAULT = '#ec5941'; // Used for the icon of a danger badge when static or the default state when linked.
+export const GL_BADGE_DANGER_ICON_COLOR_HOVER = '#f57f6c'; // Used for the icon of a danger badge in the hover state.
+export const GL_BADGE_DANGER_ICON_COLOR_FOCUS = '#f57f6c'; // Used for the icon of a danger badge in the focus state.
+export const GL_BADGE_DANGER_ICON_COLOR_ACTIVE = '#fcb5aa'; // Used for the icon of a danger badge in the active state.
 export const GL_BADGE_TIER_BACKGROUND_COLOR_DEFAULT = '#2f2a6b'; // Used for the background of a tier related badge when static or the default state when linked.
+export const GL_BADGE_TIER_BACKGROUND_COLOR_HOVER = '#2f2a6b'; // Used for the background of a tier related badge in the hover state.
+export const GL_BADGE_TIER_BACKGROUND_COLOR_FOCUS = '#2f2a6b'; // Used for the background of a tier related badge in the focus state.
 export const GL_BADGE_TIER_BACKGROUND_COLOR_ACTIVE = '#453894'; // Used for the background of a tier related badge in the active state.
+export const GL_BADGE_TIER_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a tier related badge when static or the default state when linked.
 export const GL_BADGE_TIER_BORDER_COLOR_HOVER = '#453894'; // Used for the border of a tier related badge in the hover state.
+export const GL_BADGE_TIER_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a tier related badge in the focus state.
+export const GL_BADGE_TIER_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a tier related badge in the active state.
 export const GL_BADGE_TIER_TEXT_COLOR_DEFAULT = '#ac93e6'; // Used for the text of a tier related badge when static or the default state when linked.
 export const GL_BADGE_TIER_TEXT_COLOR_HOVER = '#cbbbf2'; // Used for the text of a tier related badge in the hover state.
 export const GL_BADGE_TIER_TEXT_COLOR_FOCUS = '#cbbbf2'; // Used for the text of a tier related badge in the focus state.

src/tokens/build/js/tokens.js

@@ -284,20 +284,30 @@ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#e9f3fc'; // Blue backg
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#ecf4ee'; // Green background for avatar fallback with no particular meaning.
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#fdf1dd'; // Orange background for avatar fallback with no particular meaning.
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#ececef'; // Neutral background for avatar fallback with no particular meaning.
-export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#ececef'; // Used for the background of a subtle neutral badge when static or the default state when linked.
-export const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#dcdcde'; // Used for the background of a subtle neutral badge in the active state.
-export const GL_BADGE_MUTED_BORDER_COLOR_HOVER = '#bfbfc3'; // Used for the border of a subtle neutral badge in the hover state.
-export const GL_BADGE_MUTED_TEXT_COLOR_DEFAULT = '#626168'; // Used for the text of a subtle neutral badge when static or the default state when linked.
-export const GL_BADGE_MUTED_TEXT_COLOR_HOVER = '#4c4b51'; // Used for the text of a subtle neutral badge in the hover state.
-export const GL_BADGE_MUTED_TEXT_COLOR_FOCUS = '#4c4b51'; // Used for the text of a subtle neutral badge in the focus state.
-export const GL_BADGE_MUTED_TEXT_COLOR_ACTIVE = '#3a383f'; // Used for the text of a subtle neutral badge in the active state.
-export const GL_BADGE_MUTED_ICON_COLOR_DEFAULT = '#737278'; // Used for the icon of a subtle neutral badge when static or the default state when linked.
-export const GL_BADGE_MUTED_ICON_COLOR_HOVER = '#626168'; // Used for the icon of a subtle neutral badge in the hover state.
-export const GL_BADGE_MUTED_ICON_COLOR_FOCUS = '#626168'; // Used for the icon of a subtle neutral badge in the focus state.
-export const GL_BADGE_MUTED_ICON_COLOR_ACTIVE = '#4c4b51'; // Used for the icon of a subtle neutral badge in the active state.
+export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#ececef'; // Used for the background of a muted badge when static or the default state when linked.
+export const GL_BADGE_MUTED_BACKGROUND_COLOR_HOVER = '#ececef'; // Used for the background of a muted badge in the hover state.
+export const GL_BADGE_MUTED_BACKGROUND_COLOR_FOCUS = '#ececef'; // Used for the background of a muted badge in the focus state.
+export const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#dcdcde'; // Used for the background of a muted badge in the active state.
+export const GL_BADGE_MUTED_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a muted badge when static or the default state when linked.
+export const GL_BADGE_MUTED_BORDER_COLOR_HOVER = '#bfbfc3'; // Used for the border of a muted badge in the hover state.
+export const GL_BADGE_MUTED_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a muted badge in the focus state.
+export const GL_BADGE_MUTED_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a muted badge in the active state.
+export const GL_BADGE_MUTED_TEXT_COLOR_DEFAULT = '#626168'; // Used for the text of a muted badge when static or the default state when linked.
+export const GL_BADGE_MUTED_TEXT_COLOR_HOVER = '#4c4b51'; // Used for the text of a muted badge in the hover state.
+export const GL_BADGE_MUTED_TEXT_COLOR_FOCUS = '#4c4b51'; // Used for the text of a muted badge in the focus state.
+export const GL_BADGE_MUTED_TEXT_COLOR_ACTIVE = '#3a383f'; // Used for the text of a muted badge in the active state.
+export const GL_BADGE_MUTED_ICON_COLOR_DEFAULT = '#737278'; // Used for the icon of a muted badge when static or the default state when linked.
+export const GL_BADGE_MUTED_ICON_COLOR_HOVER = '#626168'; // Used for the icon of a muted badge in the hover state.
+export const GL_BADGE_MUTED_ICON_COLOR_FOCUS = '#626168'; // Used for the icon of a muted badge in the focus state.
+export const GL_BADGE_MUTED_ICON_COLOR_ACTIVE = '#4c4b51'; // Used for the icon of a muted badge in the active state.
 export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#dcdcde'; // Used for the background of a neutral badge when static or the default state when linked.
+export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_HOVER = '#dcdcde'; // Used for the background of a neutral badge in the hover state.
+export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#dcdcde'; // Used for the background of a neutral badge in the focus state.
 export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#bfbfc3'; // Used for the background of a neutral badge in the active state.
+export const GL_BADGE_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a neutral badge when static or the default state when linked.
 export const GL_BADGE_NEUTRAL_BORDER_COLOR_HOVER = '#bfbfc3'; // Used for the border of a neutral badge in the hover state.
+export const GL_BADGE_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a neutral badge in the focus state.
+export const GL_BADGE_NEUTRAL_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a neutral badge in the active state.
 export const GL_BADGE_NEUTRAL_TEXT_COLOR_DEFAULT = '#4c4b51'; // Used for the text of a neutral badge when static or the default state when linked.
 export const GL_BADGE_NEUTRAL_TEXT_COLOR_HOVER = '#3a383f'; // Used for the text of a neutral badge in the hover state.
 export const GL_BADGE_NEUTRAL_TEXT_COLOR_FOCUS = '#3a383f'; // Used for the text of a neutral badge in the focus state.
@@ -307,8 +317,13 @@ export const GL_BADGE_NEUTRAL_ICON_COLOR_HOVER = '#626168'; // Used for the icon
 export const GL_BADGE_NEUTRAL_ICON_COLOR_FOCUS = '#626168'; // Used for the icon of a neutral badge in the focus state.
 export const GL_BADGE_NEUTRAL_ICON_COLOR_ACTIVE = '#4c4b51'; // Used for the icon of a neutral badge in the active state.
 export const GL_BADGE_INFO_BACKGROUND_COLOR_DEFAULT = '#cbe2f9'; // Used for the background of an informational badge when static or the default state when linked.
+export const GL_BADGE_INFO_BACKGROUND_COLOR_HOVER = '#cbe2f9'; // Used for the background of an informational badge in the hover state.
+export const GL_BADGE_INFO_BACKGROUND_COLOR_FOCUS = '#cbe2f9'; // Used for the background of an informational badge in the focus state.
 export const GL_BADGE_INFO_BACKGROUND_COLOR_ACTIVE = '#9dc7f1'; // Used for the background of an informational badge in the active state.
+export const GL_BADGE_INFO_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of an informational badge when static or the default state when linked.
 export const GL_BADGE_INFO_BORDER_COLOR_HOVER = '#9dc7f1'; // Used for the border of an informational badge in the hover state.
+export const GL_BADGE_INFO_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of an informational badge in the focus state.
+export const GL_BADGE_INFO_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of an informational badge in the active state.
 export const GL_BADGE_INFO_TEXT_COLOR_DEFAULT = '#0b5cad'; // Used for the text of an informational badge when static or the default state when linked.
 export const GL_BADGE_INFO_TEXT_COLOR_HOVER = '#064787'; // Used for the text of an informational badge in the hover state.
 export const GL_BADGE_INFO_TEXT_COLOR_FOCUS = '#064787'; // Used for the text of an informational badge in the focus state.
@@ -318,8 +333,13 @@ export const GL_BADGE_INFO_ICON_COLOR_HOVER = '#1068bf'; // Used for the icon of
 export const GL_BADGE_INFO_ICON_COLOR_FOCUS = '#1068bf'; // Used for the icon of an informational badge in the focus state.
 export const GL_BADGE_INFO_ICON_COLOR_ACTIVE = '#0b5cad'; // Used for the icon of an informational badge in the active state.
 export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_DEFAULT = '#c3e6cd'; // Used for the background of a success badge when static or the default state when linked.
+export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_HOVER = '#c3e6cd'; // Used for the background of a success badge in the hover state.
+export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_FOCUS = '#c3e6cd'; // Used for the background of a success badge in the focus state.
 export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_ACTIVE = '#91d4a8'; // Used for the background of a success badge in the active state.
+export const GL_BADGE_SUCCESS_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a success badge when static or the default state when linked.
 export const GL_BADGE_SUCCESS_BORDER_COLOR_HOVER = '#91d4a8'; // Used for the border of a success badge in the hover state.
+export const GL_BADGE_SUCCESS_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a success badge in the focus state.
+export const GL_BADGE_SUCCESS_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a success badge in the active state.
 export const GL_BADGE_SUCCESS_TEXT_COLOR_DEFAULT = '#24663b'; // Used for the text of a success badge when static or the default state when linked.
 export const GL_BADGE_SUCCESS_TEXT_COLOR_HOVER = '#0d532a'; // Used for the text of a success badge in the hover state.
 export const GL_BADGE_SUCCESS_TEXT_COLOR_FOCUS = '#0d532a'; // Used for the text of a success badge in the focus state.
@@ -328,31 +348,46 @@ export const GL_BADGE_SUCCESS_ICON_COLOR_DEFAULT = '#108548'; // Used for the ic
 export const GL_BADGE_SUCCESS_ICON_COLOR_HOVER = '#217645'; // Used for the icon of a success badge in the hover state.
 export const GL_BADGE_SUCCESS_ICON_COLOR_FOCUS = '#217645'; // Used for the icon of a success badge in the focus state.
 export const GL_BADGE_SUCCESS_ICON_COLOR_ACTIVE = '#24663b'; // Used for the icon of a success badge in the active state.
-export const GL_BADGE_WARNING_BACKGROUND_COLOR_DEFAULT = '#f5d9a8'; // Used for the background of a warning status or confidential item when static or the default state when linked.
-export const GL_BADGE_WARNING_BACKGROUND_COLOR_ACTIVE = '#e9be74'; // Used for the background of a warning status or confidential item in the active state.
-export const GL_BADGE_WARNING_BORDER_COLOR_HOVER = '#e9be74'; // Used for the border of a warning status or confidential item in the hover state.
-export const GL_BADGE_WARNING_TEXT_COLOR_DEFAULT = '#8f4700'; // Used for the text of a warning status or confidential item when static or the default state when linked.
-export const GL_BADGE_WARNING_TEXT_COLOR_HOVER = '#703800'; // Used for the text of a warning status or confidential item in the hover state.
-export const GL_BADGE_WARNING_TEXT_COLOR_FOCUS = '#703800'; // Used for the text of a warning status or confidential item in the focus state.
-export const GL_BADGE_WARNING_TEXT_COLOR_ACTIVE = '#5c2900'; // Used for the text of a warning status or confidential item in the active state.N
-export const GL_BADGE_WARNING_ICON_COLOR_DEFAULT = '#ab6100'; // Used for the icon of a warning status or confidential item when static or the default state when linked.
-export const GL_BADGE_WARNING_ICON_COLOR_HOVER = '#9e5400'; // Used for the icon of a warning status or confidential item in the hover state.
-export const GL_BADGE_WARNING_ICON_COLOR_FOCUS = '#9e5400'; // Used for the icon of a warning status or confidential item in the focus state.
-export const GL_BADGE_WARNING_ICON_COLOR_ACTIVE = '#8f4700'; // Used for the icon of a warning status or confidential item in the active state.
-export const GL_BADGE_DANGER_BACKGROUND_COLOR_DEFAULT = '#fdd4cd'; // Used for the background of a danger (critical) badge when static or the default state when linked.
-export const GL_BADGE_DANGER_BACKGROUND_COLOR_ACTIVE = '#fcb5aa'; // Used for the background of a danger (critical) badge in the active state.
-export const GL_BADGE_DANGER_BORDER_COLOR_HOVER = '#fcb5aa'; // Used for the border of a danger (critical) badge in the hover state.
-export const GL_BADGE_DANGER_TEXT_COLOR_DEFAULT = '#ae1800'; // Used for the text of a danger (critical) badge when static or the default state when linked.
-export const GL_BADGE_DANGER_TEXT_COLOR_HOVER = '#8d1300'; // Used for the text of a danger (critical) badge in the hover state.
-export const GL_BADGE_DANGER_TEXT_COLOR_FOCUS = '#8d1300'; // Used for the text of a danger (critical) badge in the focus state.
-export const GL_BADGE_DANGER_TEXT_COLOR_ACTIVE = '#660e00'; // Used for the text of a danger (critical) badge in the active state.
-export const GL_BADGE_DANGER_ICON_COLOR_DEFAULT = '#dd2b0e'; // Used for the icon of a danger (critical) badge when static or the default state when linked.
-export const GL_BADGE_DANGER_ICON_COLOR_HOVER = '#c91c00'; // Used for the icon of a danger (critical) badge in the hover state.
-export const GL_BADGE_DANGER_ICON_COLOR_FOCUS = '#c91c00'; // Used for the icon of a danger (critical) badge in the focus state.
-export const GL_BADGE_DANGER_ICON_COLOR_ACTIVE = '#ae1800'; // Used for the icon of a danger (critical) badge in the active state.
+export const GL_BADGE_WARNING_BACKGROUND_COLOR_DEFAULT = '#f5d9a8'; // Used for the background of a warning badge when static or the default state when linked.
+export const GL_BADGE_WARNING_BACKGROUND_COLOR_HOVER = '#f5d9a8'; // Used for the background of a warning badge in the hover state.
+export const GL_BADGE_WARNING_BACKGROUND_COLOR_FOCUS = '#f5d9a8'; // Used for the background of a warning badge in the focus state.
+export const GL_BADGE_WARNING_BACKGROUND_COLOR_ACTIVE = '#e9be74'; // Used for the background of a warning badge in the active state.
+export const GL_BADGE_WARNING_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a warning badge when static or the default state when linked.
+export const GL_BADGE_WARNING_BORDER_COLOR_HOVER = '#e9be74'; // Used for the border of a warning badge in the hover state.
+export const GL_BADGE_WARNING_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a warning badge in the focus state.
+export const GL_BADGE_WARNING_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a warning badge in the active state.
+export const GL_BADGE_WARNING_TEXT_COLOR_DEFAULT = '#8f4700'; // Used for the text of a warning badge when static or the default state when linked.
+export const GL_BADGE_WARNING_TEXT_COLOR_HOVER = '#703800'; // Used for the text of a warning badge in the hover state.
+export const GL_BADGE_WARNING_TEXT_COLOR_FOCUS = '#703800'; // Used for the text of a warning badge in the focus state.
+export const GL_BADGE_WARNING_TEXT_COLOR_ACTIVE = '#5c2900'; // Used for the text of a warning badge in the active state.
+export const GL_BADGE_WARNING_ICON_COLOR_DEFAULT = '#ab6100'; // Used for the icon of a warning badge when static or the default state when linked.
+export const GL_BADGE_WARNING_ICON_COLOR_HOVER = '#9e5400'; // Used for the icon of a warning badge in the hover state.
+export const GL_BADGE_WARNING_ICON_COLOR_FOCUS = '#9e5400'; // Used for the icon of a warning badge in the focus state.
+export const GL_BADGE_WARNING_ICON_COLOR_ACTIVE = '#8f4700'; // Used for the icon of a warning badge in the active state.
+export const GL_BADGE_DANGER_BACKGROUND_COLOR_DEFAULT = '#fdd4cd'; // Used for the background of a danger badge when static or the default state when linked.
+export const GL_BADGE_DANGER_BACKGROUND_COLOR_HOVER = '#fdd4cd'; // Used for the background of a danger badge in the hover state.
+export const GL_BADGE_DANGER_BACKGROUND_COLOR_FOCUS = '#fdd4cd'; // Used for the background of a danger badge in the focus state.
+export const GL_BADGE_DANGER_BACKGROUND_COLOR_ACTIVE = '#fcb5aa'; // Used for the background of a danger badge in the active state.
+export const GL_BADGE_DANGER_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a danger badge when static or the default state when linked.
+export const GL_BADGE_DANGER_BORDER_COLOR_HOVER = '#fcb5aa'; // Used for the border of a danger badge in the hover state.
+export const GL_BADGE_DANGER_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a danger badge in the focus state.
+export const GL_BADGE_DANGER_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a danger badge in the active state.
+export const GL_BADGE_DANGER_TEXT_COLOR_DEFAULT = '#ae1800'; // Used for the text of a danger badge when static or the default state when linked.
+export const GL_BADGE_DANGER_TEXT_COLOR_HOVER = '#8d1300'; // Used for the text of a danger badge in the hover state.
+export const GL_BADGE_DANGER_TEXT_COLOR_FOCUS = '#8d1300'; // Used for the text of a danger badge in the focus state.
+export const GL_BADGE_DANGER_TEXT_COLOR_ACTIVE = '#660e00'; // Used for the text of a danger badge in the active state.
+export const GL_BADGE_DANGER_ICON_COLOR_DEFAULT = '#dd2b0e'; // Used for the icon of a danger badge when static or the default state when linked.
+export const GL_BADGE_DANGER_ICON_COLOR_HOVER = '#c91c00'; // Used for the icon of a danger badge in the hover state.
+export const GL_BADGE_DANGER_ICON_COLOR_FOCUS = '#c91c00'; // Used for the icon of a danger badge in the focus state.
+export const GL_BADGE_DANGER_ICON_COLOR_ACTIVE = '#ae1800'; // Used for the icon of a danger badge in the active state.
 export const GL_BADGE_TIER_BACKGROUND_COLOR_DEFAULT = '#e1d8f9'; // Used for the background of a tier related badge when static or the default state when linked.
+export const GL_BADGE_TIER_BACKGROUND_COLOR_HOVER = '#e1d8f9'; // Used for the background of a tier related badge in the hover state.
+export const GL_BADGE_TIER_BACKGROUND_COLOR_FOCUS = '#e1d8f9'; // Used for the background of a tier related badge in the focus state.
 export const GL_BADGE_TIER_BACKGROUND_COLOR_ACTIVE = '#cbbbf2'; // Used for the background of a tier related badge in the active state.
+export const GL_BADGE_TIER_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a tier related badge when static or the default state when linked.
 export const GL_BADGE_TIER_BORDER_COLOR_HOVER = '#cbbbf2'; // Used for the border of a tier related badge in the hover state.
+export const GL_BADGE_TIER_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a tier related badge in the focus state.
+export const GL_BADGE_TIER_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a tier related badge in the active state.
 export const GL_BADGE_TIER_TEXT_COLOR_DEFAULT = '#5943b6'; // Used for the text of a tier related badge when static or the default state when linked.
 export const GL_BADGE_TIER_TEXT_COLOR_HOVER = '#453894'; // Used for the text of a tier related badge in the hover state.
 export const GL_BADGE_TIER_TEXT_COLOR_FOCUS = '#453894'; // Used for the text of a tier related badge in the focus state.

src/tokens/build/scss/_tokens_custom_properties.scss

@@ -285,8 +285,13 @@ $gl-avatar-fallback-background-color-green: var(--gl-avatar-fallback-background-
 $gl-avatar-fallback-background-color-orange: var(--gl-avatar-fallback-background-color-orange);
 $gl-avatar-fallback-background-color-neutral: var(--gl-avatar-fallback-background-color-neutral);
 $gl-badge-muted-background-color-default: var(--gl-badge-muted-background-color-default);
+$gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-hover);
+$gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-focus);
 $gl-badge-muted-background-color-active: var(--gl-badge-muted-background-color-active);
+$gl-badge-muted-border-color-default: var(--gl-badge-muted-border-color-default);
 $gl-badge-muted-border-color-hover: var(--gl-badge-muted-border-color-hover);
+$gl-badge-muted-border-color-focus: var(--gl-badge-muted-border-color-focus);
+$gl-badge-muted-border-color-active: var(--gl-badge-muted-border-color-active);
 $gl-badge-muted-text-color-default: var(--gl-badge-muted-text-color-default);
 $gl-badge-muted-text-color-hover: var(--gl-badge-muted-text-color-hover);
 $gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-focus);
@@ -296,8 +301,13 @@ $gl-badge-muted-icon-color-hover: var(--gl-badge-muted-icon-color-hover);
 $gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-focus);
 $gl-badge-muted-icon-color-active: var(--gl-badge-muted-icon-color-active);
 $gl-badge-neutral-background-color-default: var(--gl-badge-neutral-background-color-default);
+$gl-badge-neutral-background-color-hover: var(--gl-badge-neutral-background-color-hover);
+$gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-focus);
 $gl-badge-neutral-background-color-active: var(--gl-badge-neutral-background-color-active);
+$gl-badge-neutral-border-color-default: var(--gl-badge-neutral-border-color-default);
 $gl-badge-neutral-border-color-hover: var(--gl-badge-neutral-border-color-hover);
+$gl-badge-neutral-border-color-focus: var(--gl-badge-neutral-border-color-focus);
+$gl-badge-neutral-border-color-active: var(--gl-badge-neutral-border-color-active);
 $gl-badge-neutral-text-color-default: var(--gl-badge-neutral-text-color-default);
 $gl-badge-neutral-text-color-hover: var(--gl-badge-neutral-text-color-hover);
 $gl-badge-neutral-text-color-focus: var(--gl-badge-neutral-text-color-focus);
@@ -307,8 +317,13 @@ $gl-badge-neutral-icon-color-hover: var(--gl-badge-neutral-icon-color-hover);
 $gl-badge-neutral-icon-color-focus: var(--gl-badge-neutral-icon-color-focus);
 $gl-badge-neutral-icon-color-active: var(--gl-badge-neutral-icon-color-active);
 $gl-badge-info-background-color-default: var(--gl-badge-info-background-color-default);
+$gl-badge-info-background-color-hover: var(--gl-badge-info-background-color-hover);
+$gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-focus);
 $gl-badge-info-background-color-active: var(--gl-badge-info-background-color-active);
+$gl-badge-info-border-color-default: var(--gl-badge-info-border-color-default);
 $gl-badge-info-border-color-hover: var(--gl-badge-info-border-color-hover);
+$gl-badge-info-border-color-focus: var(--gl-badge-info-border-color-focus);
+$gl-badge-info-border-color-active: var(--gl-badge-info-border-color-active);
 $gl-badge-info-text-color-default: var(--gl-badge-info-text-color-default);
 $gl-badge-info-text-color-hover: var(--gl-badge-info-text-color-hover);
 $gl-badge-info-text-color-focus: var(--gl-badge-info-text-color-focus);
@@ -318,8 +333,13 @@ $gl-badge-info-icon-color-hover: var(--gl-badge-info-icon-color-hover);
 $gl-badge-info-icon-color-focus: var(--gl-badge-info-icon-color-focus);
 $gl-badge-info-icon-color-active: var(--gl-badge-info-icon-color-active);
 $gl-badge-success-background-color-default: var(--gl-badge-success-background-color-default);
+$gl-badge-success-background-color-hover: var(--gl-badge-success-background-color-hover);
+$gl-badge-success-background-color-focus: var(--gl-badge-success-background-color-focus);
 $gl-badge-success-background-color-active: var(--gl-badge-success-background-color-active);
+$gl-badge-success-border-color-default: var(--gl-badge-success-border-color-default);
 $gl-badge-success-border-color-hover: var(--gl-badge-success-border-color-hover);
+$gl-badge-success-border-color-focus: var(--gl-badge-success-border-color-focus);
+$gl-badge-success-border-color-active: var(--gl-badge-success-border-color-active);
 $gl-badge-success-text-color-default: var(--gl-badge-success-text-color-default);
 $gl-badge-success-text-color-hover: var(--gl-badge-success-text-color-hover);
 $gl-badge-success-text-color-focus: var(--gl-badge-success-text-color-focus);
@@ -329,8 +349,13 @@ $gl-badge-success-icon-color-hover: var(--gl-badge-success-icon-color-hover);
 $gl-badge-success-icon-color-focus: var(--gl-badge-success-icon-color-focus);
 $gl-badge-success-icon-color-active: var(--gl-badge-success-icon-color-active);
 $gl-badge-warning-background-color-default: var(--gl-badge-warning-background-color-default);
+$gl-badge-warning-background-color-hover: var(--gl-badge-warning-background-color-hover);
+$gl-badge-warning-background-color-focus: var(--gl-badge-warning-background-color-focus);
 $gl-badge-warning-background-color-active: var(--gl-badge-warning-background-color-active);
+$gl-badge-warning-border-color-default: var(--gl-badge-warning-border-color-default);
 $gl-badge-warning-border-color-hover: var(--gl-badge-warning-border-color-hover);
+$gl-badge-warning-border-color-focus: var(--gl-badge-warning-border-color-focus);
+$gl-badge-warning-border-color-active: var(--gl-badge-warning-border-color-active);
 $gl-badge-warning-text-color-default: var(--gl-badge-warning-text-color-default);
 $gl-badge-warning-text-color-hover: var(--gl-badge-warning-text-color-hover);
 $gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-focus);
@@ -340,8 +365,13 @@ $gl-badge-warning-icon-color-hover: var(--gl-badge-warning-icon-color-hover);
 $gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-focus);
 $gl-badge-warning-icon-color-active: var(--gl-badge-warning-icon-color-active);
 $gl-badge-danger-background-color-default: var(--gl-badge-danger-background-color-default);
+$gl-badge-danger-background-color-hover: var(--gl-badge-danger-background-color-hover);
+$gl-badge-danger-background-color-focus: var(--gl-badge-danger-background-color-focus);
 $gl-badge-danger-background-color-active: var(--gl-badge-danger-background-color-active);
+$gl-badge-danger-border-color-default: var(--gl-badge-danger-border-color-default);
 $gl-badge-danger-border-color-hover: var(--gl-badge-danger-border-color-hover);
+$gl-badge-danger-border-color-focus: var(--gl-badge-danger-border-color-focus);
+$gl-badge-danger-border-color-active: var(--gl-badge-danger-border-color-active);
 $gl-badge-danger-text-color-default: var(--gl-badge-danger-text-color-default);
 $gl-badge-danger-text-color-hover: var(--gl-badge-danger-text-color-hover);
 $gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-focus);
@@ -351,8 +381,13 @@ $gl-badge-danger-icon-color-hover: var(--gl-badge-danger-icon-color-hover);
 $gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-focus);
 $gl-badge-danger-icon-color-active: var(--gl-badge-danger-icon-color-active);
 $gl-badge-tier-background-color-default: var(--gl-badge-tier-background-color-default);
+$gl-badge-tier-background-color-hover: var(--gl-badge-tier-background-color-hover);
+$gl-badge-tier-background-color-focus: var(--gl-badge-tier-background-color-focus);
 $gl-badge-tier-background-color-active: var(--gl-badge-tier-background-color-active);
+$gl-badge-tier-border-color-default: var(--gl-badge-tier-border-color-default);
 $gl-badge-tier-border-color-hover: var(--gl-badge-tier-border-color-hover);
+$gl-badge-tier-border-color-focus: var(--gl-badge-tier-border-color-focus);
+$gl-badge-tier-border-color-active: var(--gl-badge-tier-border-color-active);
 $gl-badge-tier-text-color-default: var(--gl-badge-tier-text-color-default);
 $gl-badge-tier-text-color-hover: var(--gl-badge-tier-text-color-hover);
 $gl-badge-tier-text-color-focus: var(--gl-badge-tier-text-color-focus);