@gitlab/ui 91.11.0 → 91.13.0

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

@@ -82,10 +82,13 @@ 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_BACKGROUND_COLOR_OVERLAP = '#fff'; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
+export const GL_BACKGROUND_COLOR_SECTION = '#fff'; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
 export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(05, 05, 06, 0.24)'; // Used for an overlay that covers other content.
 export const GL_BORDER_COLOR_DEFAULT = '#dcdcde'; // Used for the default border color.
 export const GL_BORDER_COLOR_SUBTLE = '#ececef'; // Used for a subtle border in combination with the default background.
 export const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
+export const GL_BORDER_COLOR_SECTION = '#dcdcde'; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
 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(05, 05, 06, 0.02)';
@@ -463,6 +466,46 @@ export const GL_BANNER_INTRO_BORDER_COLOR = '#cbe2f9'; // Used for the border of
 export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#f4f0ff'; // Used for the background of a promo banner.
 export const GL_BANNER_PROMO_BORDER_COLOR = '#e1d8f9'; // Used for the border of a promo banner.
 export const GL_BREADCRUMB_SEPARATOR_COLOR = '#89888d'; // Used for the breadcrumb level separator.
+export const GL_BROADCAST_BANNER_BACKGROUND_COLOR_BLUE = '#235180'; // Used for the background for the blue banner type.
+export const GL_BROADCAST_BANNER_BACKGROUND_COLOR_DARK = '#737278'; // Used for the background for the dark banner type.
+export const GL_BROADCAST_BANNER_BACKGROUND_COLOR_GREEN = '#1b653f'; // Used for the background for the green banner type.
+export const GL_BROADCAST_BANNER_BACKGROUND_COLOR_INDIGO = '#41419f'; // Used for the background for the indigo banner type.
+export const GL_BROADCAST_BANNER_BACKGROUND_COLOR_LIGHT = '#ececef'; // Used for the background for the light banner type.
+export const GL_BROADCAST_BANNER_BACKGROUND_COLOR_LIGHTBLUE = '#4977a5'; // Used for the background for the lightblue banner type.
+export const GL_BROADCAST_BANNER_BACKGROUND_COLOR_LIGHTGREEN = '#308258'; // Used for the background for the lightgreen banner type.
+export const GL_BROADCAST_BANNER_BACKGROUND_COLOR_LIGHTINDIGO = '#6666c4'; // Used for the background for the lightindigo banner type.
+export const GL_BROADCAST_BANNER_BACKGROUND_COLOR_LIGHTRED = '#ad4a3b'; // Used for the background for the lightred banner type.
+export const GL_BROADCAST_BANNER_BACKGROUND_COLOR_RED = '#8f2110'; // Used for the background for the red banner type.
+export const GL_BROADCAST_BANNER_BORDER_COLOR_BLUE = '#0b2640'; // Used for the border for the blue banner type.
+export const GL_BROADCAST_BANNER_BORDER_COLOR_DARK = '#4c4b51'; // Used for the border for the dark banner type.
+export const GL_BROADCAST_BANNER_BORDER_COLOR_GREEN = '#0e4328'; // Used for the border for the green banner type.
+export const GL_BROADCAST_BANNER_BORDER_COLOR_INDIGO = '#222261'; // Used for the border for the indigo banner type.
+export const GL_BROADCAST_BANNER_BORDER_COLOR_LIGHT = '#dcdcde'; // Used for the border for the light banner type.
+export const GL_BROADCAST_BANNER_BORDER_COLOR_LIGHTBLUE = '#235180'; // Used for the border for the lightblue banner type.
+export const GL_BROADCAST_BANNER_BORDER_COLOR_LIGHTGREEN = '#1b653f'; // Used for the border for the lightgreen banner type.
+export const GL_BROADCAST_BANNER_BORDER_COLOR_LIGHTINDIGO = '#41419f'; // Used for the border for the lightindigo banner type.
+export const GL_BROADCAST_BANNER_BORDER_COLOR_LIGHTRED = '#8f2110'; // Used for the border for the lightred banner type.
+export const GL_BROADCAST_BANNER_BORDER_COLOR_RED = '#580d02'; // Used for the border for the red banner type.
+export const GL_BROADCAST_BANNER_ICON_COLOR_BLUE = '#fff'; // Used for the icon for the blue banner type.
+export const GL_BROADCAST_BANNER_ICON_COLOR_DARK = '#fff'; // Used for the icon for the dark banner type.
+export const GL_BROADCAST_BANNER_ICON_COLOR_GREEN = '#fff'; // Used for the icon for the green banner type.
+export const GL_BROADCAST_BANNER_ICON_COLOR_INDIGO = '#fff'; // Used for the icon for the indigo banner type.
+export const GL_BROADCAST_BANNER_ICON_COLOR_LIGHT = '#28272d'; // Used for the icon for the light banner type.
+export const GL_BROADCAST_BANNER_ICON_COLOR_LIGHTBLUE = '#fff'; // Used for the icon for the lightblue banner type.
+export const GL_BROADCAST_BANNER_ICON_COLOR_LIGHTGREEN = '#fff'; // Used for the icon for the lightgreen banner type.
+export const GL_BROADCAST_BANNER_ICON_COLOR_LIGHTINDIGO = '#fff'; // Used for the icon for the lightindigo banner type.
+export const GL_BROADCAST_BANNER_ICON_COLOR_LIGHTRED = '#fff'; // Used for the icon for the lightred banner type.
+export const GL_BROADCAST_BANNER_ICON_COLOR_RED = '#fff'; // Used for the icon for the red banner type.
+export const GL_BROADCAST_BANNER_TEXT_COLOR_BLUE = '#fff'; // Used for the text for the blue banner type.
+export const GL_BROADCAST_BANNER_TEXT_COLOR_DARK = '#fff'; // Used for the text for the dark banner type.
+export const GL_BROADCAST_BANNER_TEXT_COLOR_GREEN = '#fff'; // Used for the text for the green banner type.
+export const GL_BROADCAST_BANNER_TEXT_COLOR_INDIGO = '#fff'; // Used for the text for the indigo banner type.
+export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHT = '#28272d'; // Used for the text for the light banner type.
+export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTBLUE = '#fff'; // Used for the text for the lightblue banner type.
+export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTGREEN = '#fff'; // Used for the text for the lightgreen banner type.
+export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTINDIGO = '#fff'; // Used for the text for the lightindigo banner type.
+export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTRED = '#fff'; // Used for the text for the lightred banner type.
+export const GL_BROADCAST_BANNER_TEXT_COLOR_RED = '#fff'; // Used for the text for the red banner type.
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_DEFAULT = '#3a383f'; // Used for the foreground of a default primary button in the default state.
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_HOVER = '#3a383f'; // Used for the foreground of a default primary button in the hover state.
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_FOCUS = '#3a383f'; // Used for the foreground of a default primary button in the focus state.