@gitlab/ui

{ "action": { "disabled": { "foreground": { "color": { "$value": { "default": "{color.neutral.400}", "dark": "{color.neutral.500}" }, "$type": "color", "$description": "Used for the foreground of a disabled action." } }, "background": { "color": { "$value": { "default": "{color.neutral.50}", "dark": "{color.neutral.900}" }, "$type": "color", "$description": "Used for the background of a disabled action." } }, "border": { "color": { "$value": { "default": "{color.neutral.100}", "dark": "{color.neutral.800}" }, "$type": "color", "$description": "Used for the border of a disabled action." } } }, "selected": { "foreground": { "color": { "default": { "$value": { "default": "{color.neutral.0}", "dark": "{color.neutral.950}" }, "$type": "color", "$description": "Used for the foreground of a selected action in the default state." }, "hover": { "$value": "{action.selected.foreground.color.default}", "$type": "color", "$description": "Used for the foreground of a selected action in the hover state." }, "focus": { "$value": "{action.selected.foreground.color.hover}", "$type": "color", "$description": "Used for the foreground of a selected action in the focus state." }, "active": { "$value": "{action.selected.foreground.color.focus}", "$type": "color", "$description": "Used for the foreground of a selected action in the active state." } } }, "background": { "color": { "default": { "$value": { "default": "{color.blue.500}", "dark": "{color.blue.300}" }, "$type": "color", "$description": "Used for the background of a selected action in the default state." }, "hover": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for the background of a selected action in the hover state." }, "focus": { "$value": "{action.selected.background.color.hover}", "$type": "color", "$description": "Used for the background of a selected action in the focus state." }, "active": { "$value": { "default": "{color.blue.800}", "dark": "{color.blue.100}" }, "$type": "color", "$description": "Used for the background of a selected action in the active state." } } }, "border": { "color": { "default": { "$value": "{action.selected.background.color.default}", "$type": "color", "$description": "Used for the border of a selected action in the default state." }, "hover": { "$value": "{action.selected.background.color.hover}", "$type": "color", "$description": "Used for the border of a selected action in the hover state." }, "focus": { "$value": "{action.selected.background.color.focus}", "$type": "color", "$description": "Used for the border of a selected action in the focus state." }, "active": { "$value": "{action.selected.background.color.active}", "$type": "color", "$description": "Used for the border of a selected action in the active state." } } } }, "neutral": { "foreground": { "color": { "default": { "$value": { "default": "{color.neutral.900}", "dark": "{color.neutral.50}" }, "$type": "color", "$description": "Used for the foreground of a neutral action in the default state." }, "hover": { "$value": "{action.neutral.foreground.color.default}", "$type": "color", "$description": "Used for the foreground of a neutral action in the hover state." }, "focus": { "$value": "{action.neutral.foreground.color.default}", "$type": "color", "$description": "Used for the foreground of a neutral action in the focus state." }, "active": { "$value": "{action.neutral.foreground.color.default}", "$type": "color", "$description": "Used for the foreground of a neutral action in the active state." } } }, "background": { "color": { "default": { "$value": { "default": "rgba(164, 163, 168, 0.0)", "dark": "rgba(137, 136, 141, 0.0)" }, "$type": "color", "$description": "Used for the background of a neutral action in the default state." }, "hover": { "$value": { "default": "rgba(164, 163, 168, 0.16)", "dark": "rgba(137, 136, 141, 0.4)" }, "$type": "color", "$description": "Used for the background of a neutral action in the hover state." }, "focus": { "$value": "{action.neutral.background.color.hover}", "$type": "color", "$description": "Used for the background of a neutral action in the focus state." }, "active": { "$value": { "default": "rgba(83, 81, 88, 0.24)", "dark": "rgba(137, 136, 141, 0.16)" }, "$type": "color", "$description": "Used for the background of a neutral action in the active state." } } }, "border": { "color": { "default": { "$value": "{color.alpha.0}", "$type": "color", "$description": "Used for the border of a neutral action in the default state." }, "hover": { "$value": "{action.neutral.border.color.default}", "$type": "color", "$description": "Used for the border of a neutral action in the hover state." }, "focus": { "$value": "{action.neutral.border.color.default}", "$type": "color", "$description": "Used for the border of a neutral action in the focus state." }, "active": { "$value": "{action.neutral.border.color.default}", "$type": "color", "$description": "Used for the border of a neutral action in the active state." } } } }, "confirm": { "foreground": { "color": { "default": { "$value": { "default": "{color.blue.500}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for the foreground of a confirm (positive) action in the default state." }, "hover": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.100}" }, "$type": "color", "$description": "Used for the foreground of a confirm (positive) action in the hover state." }, "focus": { "$value": "{action.confirm.foreground.color.hover}", "$type": "color", "$description": "Used for the foreground of a confirm (positive) action in the focus state." }, "active": { "$value": { "default": "{color.blue.900}", "dark": "{color.blue.100}" }, "$type": "color", "$description": "Used for the foreground of a confirm (positive) action in the active state." } } }, "background": { "color": { "default": { "$value": { "default": "rgba(99, 166, 233, 0.0)", "dark": "rgba(66, 143, 220, 0.0)" }, "$type": "color", "$description": "Used for the background of a confirm (positive) action in the default state." }, "hover": { "$value": { "default": "rgba(99, 166, 233, 0.16)", "dark": "rgba(66, 143, 220, 0.4)" }, "$type": "color", "$description": "Used for the background of a confirm (positive) action in the hover state." }, "focus": { "$value": "{action.confirm.background.color.hover}", "$type": "color", "$description": "Used for the background of a confirm (positive) action in the focus state." }, "active": { "$value": { "default": "rgba(11, 92, 173, 0.24)", "dark": "rgba(66, 143, 220, 0.16)" }, "$type": "color", "$description": "Used for the background of a confirm (positive) action in the active state." } } }, "border": { "color": { "default": { "$value": "{color.alpha.0}", "$type": "color", "$description": "Used for the border of a confirm action in the default state." }, "hover": { "$value": "{action.confirm.border.color.default}", "$type": "color", "$description": "Used for the border of a confirm action in the hover state." }, "focus": { "$value": "{action.confirm.border.color.default}", "$type": "color", "$description": "Used for the border of a confirm action in the focus state." }, "active": { "$value": "{action.confirm.border.color.default}", "$type": "color", "$description": "Used for the border of a confirm action in the active state." } } } }, "danger": { "foreground": { "color": { "default": { "$value": { "default": "{color.red.500}", "dark": "{color.red.200}" }, "$type": "color", "$description": "Used for the foreground of a danger (destructive) action in the default state." }, "hover": { "$value": { "default": "{color.red.700}", "dark": "{color.red.100}" }, "$type": "color", "$description": "Used for the foreground of a danger (destructive) action in the hover state." }, "focus": { "$value": "{action.danger.foreground.color.hover}", "$type": "color", "$description": "Used for the foreground of a danger (destructive) action in the focus state." }, "active": { "$value": { "default": "{color.red.900}", "dark": "{color.red.100}" }, "$type": "color", "$description": "Used for the foreground of a danger (destructive) action in the active state." } } }, "background": { "color": { "default": { "$value": { "default": "rgba(245, 127, 108, 0.0)", "dark": "rgba(236, 89, 65, 0.0)" }, "$type": "color", "$description": "Used for the background of a danger (destructive) action in the default state." }, "hover": { "$value": { "default": "rgba(245, 127, 108, 0.16)", "dark": "rgba(236, 89, 65, 0.4)" }, "$type": "color", "$description": "Used for the background of a danger (destructive) action in the hover state." }, "focus": { "$value": "{action.danger.background.color.hover}", "$type": "color", "$description": "Used for the background of a danger (destructive) action in the focus state." }, "active": { "$value": { "default": "rgba(174, 24, 0, 0.24)", "dark": "rgba(236, 89, 65, 0.16)" }, "$type": "color", "$description": "Used for the background of a danger (destructive) action in the active state." } } }, "border": { "color": { "default": { "$value": "{color.alpha.0}", "$type": "color", "$description": "Used for the border of a danger action in the default state." }, "hover": { "$value": "{action.danger.border.color.default}", "$type": "color", "$description": "Used for the border of a danger action in the hover state." }, "focus": { "$value": "{action.danger.border.color.default}", "$type": "color", "$description": "Used for the border of a danger action in the focus state." }, "active": { "$value": "{action.danger.border.color.default}", "$type": "color", "$description": "Used for the border of a danger action in the active state." } } } }, "strong": { "confirm": { "background": { "color": { "default": { "$value": { "default": "{color.blue.500}", "dark": "{color.blue.300}" }, "$type": "color", "$description": "Used for the background of a strong confirm action in the default state." }, "hover": { "$value": { "default": "{color.blue.600}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for the background of a strong confirm action in the hover state." }, "focus": { "$value": "{action.strong.confirm.background.color.hover}", "$type": "color", "$description": "Used for the background of a strong confirm action in the focus state." }, "active": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.400}" }, "$type": "color", "$description": "Used for the background of a strong confirm action in the active state." } } }, "foreground": { "color": { "default": { "$value": { "default": "{color.neutral.0}", "dark": "{color.neutral.950}" }, "$type": "color", "$description": "Used for the foreground of a strong confirm action in the default state." }, "hover": { "$value": "{action.strong.confirm.foreground.color.default}", "$type": "color", "$description": "Used for the foreground of a strong confirm action in the hover state." }, "focus": { "$value": "{action.strong.confirm.foreground.color.hover}", "$type": "color", "$description": "Used for the foreground of a strong confirm action in the focus state." }, "active": { "$value": "{action.strong.confirm.foreground.color.focus}", "$type": "color", "$description": "Used for the foreground of a strong confirm action in the active state." } } }, "border": { "color": { "default": { "$value": "{color.alpha.0}", "$type": "color", "$description": "Used for the border of a strong confirm action in the default state." }, "hover": { "$value": "{action.strong.confirm.border.color.default}", "$type": "color", "$description": "Used for the border of a strong confirm action in the hover state." }, "focus": { "$value": "{action.strong.confirm.border.color.hover}", "$type": "color", "$description": "Used for the border of a strong confirm action in the focus state." }, "active": { "$value": "{action.strong.confirm.border.color.focus}", "$type": "color", "$description": "Used for the border of a strong confirm action in the active state." } } } }, "neutral": { "background": { "color": { "default": { "$value": { "default": "{color.neutral.600}", "dark": "{color.neutral.700}" }, "$type": "color", "$description": "Used for the background of a strong neutral action in the default state." }, "hover": { "$value": { "default": "{color.neutral.700}", "dark": "{color.neutral.600}" }, "$type": "color", "$description": "Used for the background of a strong neutral action in the hover state." }, "focus": { "$value": "{action.strong.neutral.background.color.hover}", "$type": "color", "$description": "Used for the background of a strong neutral action in the focus state." }, "active": { "$value": { "default": "{color.neutral.800}", "dark": "{color.neutral.500}" }, "$type": "color", "$description": "Used for the background of a strong neutral action in the active state." } } }, "foreground": { "color": { "default": { "$value": { "default": "{color.neutral.0}", "dark": "{color.neutral.50}" }, "$type": "color", "$description": "Used for the foreground of a strong neutral action in the default state." }, "hover": { "$value": { "default": "{action.strong.neutral.foreground.color.default}", "dark": "{color.neutral.0}" }, "$type": "color", "$description": "Used for the foreground of a strong neutral action in the hover state." }, "focus": { "$value": { "default": "{action.strong.neutral.foreground.color.hover}", "dark": "{color.neutral.0}" }, "$type": "color", "$description": "Used for the foreground of a strong neutral action in the focus state." }, "active": { "$value": { "default": "{action.strong.neutral.foreground.color.focus}", "dark": "{color.neutral.0}" }, "$type": "color", "$description": "Used for the foreground of a strong neutral action in the active state." } } }, "border": { "color": { "default": { "$value": "{color.alpha.0}", "$type": "color", "$description": "Used for the border of a strong neutral action in the default state." }, "hover": { "$value": "{action.strong.neutral.border.color.default}", "$type": "color", "$description": "Used for the border of a strong neutral action in the hover state." }, "focus": { "$value": "{action.strong.neutral.border.color.hover}", "$type": "color", "$description": "Used for the border of a strong neutral action in the focus state." }, "active": { "$value": "{action.strong.neutral.border.color.focus}", "$type": "color", "$description": "Used for the border of a strong neutral action in the active state." } } } } } }, "background": { "color": { "default": { "$value": { "default": "{color.neutral.0}", "dark": "{color.neutral.950}" }, "$type": "color", "$description": "Used for the default background color." }, "subtle": { "$value": { "default": "{color.neutral.10}", "dark": "{color.neutral.900}" }, "$type": "color", "$description": "Used to slightly differentiate the background from the default." }, "strong": { "$value": { "default": "{color.neutral.50}", "dark": "{color.neutral.800}" }, "$type": "color", "$description": "Used to make the background easily stand out from the default." }, "disabled": { "$value": { "default": "{color.neutral.10}", "dark": "{color.neutral.900}" }, "$type": "color", "$description": "Used to identify a disabled section." }, "overlap": { "$value": { "default": "{color.neutral.0}", "dark": "{color.neutral.900}" }, "$type": "color", "$description": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content." }, "section": { "$value": { "default": "{color.neutral.0}", "dark": "{color.neutral.800}" }, "$type": "color", "$description": "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." }, "overlay": { "$value": { "default": "{color.alpha.dark.24}", "dark": "rgba(0,0,0,0.64)" }, "$type": "color", "$description": "Used for an overlay that covers other content." } } }, "border": { "color": { "default": { "$value": { "default": "{color.neutral.100}", "dark": "{color.neutral.700}" }, "$type": "color", "$description": "Used for the default border color." }, "subtle": { "$value": { "default": "{color.neutral.50}", "dark": "{color.neutral.800}" }, "$type": "color", "$description": "Used for a subtle border in combination with the default background." }, "strong": { "$value": { "default": "{color.neutral.200}", "dark": "{color.neutral.600}" }, "$type": "color", "$description": "Used for a distinct border that emphasizes an edge or boundaries." }, "section": { "$value": { "default": "{border.color.default}", "dark": "{background.color.default}" }, "$type": "color", "$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page." }, "transparent": { "$value": "{color.alpha.0}", "$type": "color", "$description": "Used when a border needs to be present, but not visibly perceived." } } }, "control": { "background": { "color": { "default": { "$value": { "default": "{color.neutral.0}", "dark": "{color.alpha.dark.40}" }, "$type": "color", "$description": "Used for form control (input, radio button, checkbox, textarea) default background." }, "disabled": { "$value": { "default": "{color.neutral.10}", "dark": "{color.alpha.light.4}" }, "$type": "color", "$description": "Used for disabled form control (checkbox, input, radio button, textarea) background." }, "concatenation": { "$value": { "default": "{color.neutral.10}", "dark": "{color.alpha.light.4}" }, "$type": "color", "$description": "Used for the background of static content that prepends or appends a text input." }, "readonly": { "$value": { "default": "{color.alpha.dark.2}", "dark": "{color.alpha.light.8}" }, "$type": "color", "$description": "Used for the background of static content that prepends or appends a text input." }, "selected": { "default": { "$value": { "default": "{color.blue.500}", "dark": "{color.blue.300}" }, "$type": "color", "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background." }, "hover": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover." }, "focus": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover." } } } }, "border": { "color": { "default": { "$value": { "default": "{color.neutral.400}", "dark": "{color.neutral.500}" }, "$type": "color", "$description": "Used for form control (input, radio button, checkbox, textarea) default border." }, "hover": { "$value": { "default": "{color.neutral.600}", "dark": "{color.neutral.300}" }, "$type": "color", "$description": "Used for form control (input, radio button, checkbox, textarea) border on hover." }, "focus": { "$value": { "default": "{color.neutral.900}", "dark": "{color.neutral.50}" }, "$type": "color", "$description": "Used for form control (input, radio button, checkbox, textarea) border on focus." }, "disabled": { "$value": { "default": "{color.neutral.100}", "dark": "{color.neutral.800}" }, "$type": "color", "$description": "Used for disabled form control (input, radio button, checkbox, textarea) border." }, "error": { "$value": { "default": "{color.red.500}", "dark": "{color.red.300}" }, "$type": "color", "$description": "Used for invalid form control (input, textarea) border." }, "selected": { "default": { "$value": { "default": "{color.blue.500}", "dark": "{color.blue.400}" }, "$type": "color", "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border." }, "hover": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover." }, "focus": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus." } } } }, "text": { "color": { "error": { "$value": "{text.color.danger}", "$type": "color", "$description": "Used for the helper text when the input is invalid." }, "valid": { "$value": "{text.color.success}", "$type": "color", "$description": "Used for the helper text when the input is valid." } } }, "placeholder": { "color": { "$value": "{text.color.disabled}", "$type": "color", "$description": "Used for placeholder text within inputs." } }, "indicator": { "color": { "selected": { "$value": { "default": "{color.neutral.0}", "dark": "{color.neutral.950}" }, "$type": "color", "$description": "Used for checkbox and radio button state indicators." }, "disabled": { "$value": { "default": "{color.neutral.500}", "dark": "{color.neutral.400}" }, "$type": "color", "$description": "Used for disabled checkbox and radio button state indicators." } } } }, "feedback": { "strong": { "background": { "color": { "$value": "{color.neutral.800}", "$type": "color", "$description": "Used for a background associated with strong feedback like a tooltip or toast message." } }, "text": { "color": { "$value": "{color.neutral.0}", "$type": "color", "$description": "Used for text on a strong feedback background." } }, "icon": { "color": { "$value": "{color.neutral.0}", "$type": "color", "$description": "Used for an icon on a strong feedback background." } }, "link": { "color": { "$value": "{color.blue.300}", "$type": "color", "$description": "Used for a link on a strong feedback background." } } }, "neutral": { "background": { "color": { "$value": { "default": "{color.neutral.50}", "dark": "{color.neutral.900}" }, "$type": "color", "$description": "Used for the background of a neutral feedback item when there isn't a specific meaning or urgency." } }, "text": { "color": { "$value": { "default": "{color.neutral.700}", "dark": "{color.neutral.200}" }, "$type": "color", "$description": "Used for the text of a neutral feedback item when there isn't a specific meaning or urgency." } }, "icon": { "color": { "$value": { "default": "{color.neutral.600}", "dark": "{color.neutral.300}" }, "$type": "color", "$description": "Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency." } } }, "info": { "background": { "color": { "$value": { "default": "{color.blue.50}", "dark": "{color.blue.950}" }, "$type": "color", "$description": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action." } }, "text": { "color": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action." } }, "icon": { "color": { "$value": { "default": "{color.blue.600}", "dark": "{color.blue.300}" }, "$type": "color", "$description": "Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action." } } }, "success": { "background": { "color": { "$value": { "default": "{color.green.50}", "dark": "{color.green.900}" }, "$type": "color", "$description": "Used for the background of a success feedback item when confirming the successful completion of a user-initiated action." } }, "text": { "color": { "$value": { "default": "{color.green.700}", "dark": "{color.green.200}" }, "$type": "color", "$description": "Used for the text of a success feedback item when confirming the successful completion of a user-initiated action." } }, "icon": { "color": { "$value": { "default": "{color.green.600}", "dark": "{color.green.300}" }, "$type": "color", "$description": "Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action." } } }, "warning": { "background": { "color": { "$value": { "default": "{color.orange.50}", "dark": "{color.orange.900}" }, "$type": "color", "$description": "Used for the background of a warning feedback item when notifying about a potential issue or sensitive information." } }, "text": { "color": { "$value": { "default": "{color.orange.700}", "dark": "{color.orange.200}" }, "$type": "color", "$description": "Used for the text of a warning feedback item when notifying about a potential issue or sensitive information." } }, "icon": { "color": { "$value": { "default": "{color.orange.600}", "dark": "{color.orange.300}" }, "$type": "color", "$description": "Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information." } } }, "danger": { "background": { "color": { "$value": { "default": "{color.red.50}", "dark": "{color.red.900}" }, "$type": "color", "$description": "Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention." } }, "text": { "color": { "$value": { "default": "{color.red.700}", "dark": "{color.red.200}" }, "$type": "color", "$description": "Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention." } }, "icon": { "color": { "$value": { "default": "{color.red.600}", "dark": "{color.red.300}" }, "$type": "color", "$description": "Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention." } } } }, "focus-ring": { "outer": { "color": { "$value": { "default": "{color.blue.500}", "dark": "{color.blue.400}" }, "$type": "color", "$description": "Used for the outer color portion of the focus ring." } }, "inner": { "color": { "$value": "{background.color.default}", "$type": "color", "$description": "Used for the inner neutral portion of the focus ring." } } }, "icon": { "color": { "default": { "$value": "{text.color.default}", "$type": "color", "$description": "Used for the default icon color. Can be paired with default text." }, "subtle": { "$value": "{text.color.subtle}", "$type": "color", "$description": "Used for a static or decorational icon. Can be paired with subtle text." }, "strong": { "$value": "{text.color.strong}", "$type": "color", "$description": "Used for an icon with the highest contrast." }, "disabled": { "$value": "{text.color.disabled}", "$type": "color", "$description": "Used for an icon within a disabled section." }, "link": { "$value": "{text.color.link}", "$type": "color", "$description": "Used for an icon within a link." }, "info": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for an icon associated with information or help." }, "warning": { "$value": "{text.color.warning}", "$type": "color", "$description": "Used for an icon associated with a warning." }, "danger": { "$value": "{text.color.danger}", "$type": "color", "$description": "Used for an icon associated with an error or danger." }, "success": { "$value": "{text.color.success}", "$type": "color", "$description": "Used for an icon associated with success or validity." } } }, "shadow": { "color": { "default": { "$value": { "default": "{color.alpha.dark.16}", "dark": "{color.alpha.dark.40}" }, "$type": "color", "$description": "Used for the default shadow color." } } }, "status": { "neutral": { "background": { "color": { "$value": { "default": "{color.neutral.100}", "dark": "{color.neutral.800}" }, "$type": "color", "$description": "Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state." } }, "text": { "color": { "$value": { "default": "{color.neutral.700}", "dark": "{color.neutral.200}" }, "$type": "color", "$description": "Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state." } }, "icon": { "color": { "$value": { "default": "{color.neutral.500}", "dark": "{color.neutral.300}" }, "$type": "color", "$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state." } } }, "info": { "background": { "color": { "$value": { "default": "{color.blue.100}", "dark": "{color.blue.800}" }, "$type": "color", "$description": "Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress." } }, "text": { "color": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress." } }, "icon": { "color": { "$value": { "default": "{color.blue.500}", "dark": "{color.blue.300}" }, "$type": "color", "$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress." } } }, "success": { "background": { "color": { "$value": { "default": "{color.green.100}", "dark": "{color.green.800}" }, "$type": "color", "$description": "Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation." } }, "text": { "color": { "$value": { "default": "{color.green.700}", "dark": "{color.green.200}" }, "$type": "color", "$description": "Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation." } }, "icon": { "color": { "$value": { "default": "{color.green.500}", "dark": "{color.green.300}" }, "$type": "color", "$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation." } } }, "warning": { "background": { "color": { "$value": { "default": "{color.orange.100}", "dark": "{color.orange.800}" }, "$type": "color", "$description": "Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item." } }, "text": { "color": { "$value": { "default": "{color.orange.700}", "dark": "{color.orange.200}" }, "$type": "color", "$description": "Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item." } }, "icon": { "color": { "$value": { "default": "{color.orange.500}", "dark": "{color.orange.300}" }, "$type": "color", "$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item." } } }, "danger": { "background": { "color": { "$value": { "default": "{color.red.100}", "dark": "{color.red.800}" }, "$type": "color", "$description": "Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition." } }, "text": { "color": { "$value": { "default": "{color.red.700}", "dark": "{color.red.200}" }, "$type": "color", "$description": "Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition." } }, "icon": { "color": { "$value": { "default": "{color.red.500}", "dark": "{color.red.300}" }, "$type": "color", "$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition." } } }, "brand": { "background": { "color": { "$value": { "default": "{color.purple.100}", "dark": "{color.purple.900}" }, "$type": "color", "$description": "Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface." } }, "text": { "color": { "$value": { "default": "{color.purple.700}", "dark": "{color.purple.300}" }, "$type": "color", "$description": "Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface." } }, "icon": { "color": { "$value": { "default": "{color.purple.500}", "dark": "{color.purple.500}" }, "$type": "color", "$description": "Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface." } } } }, "text": { "primary": { "$value": { "default": "#28272d", "dark": "#ececef" }, "$type": "color", "$description": "Use text.color.default instead.", "deprecated": true }, "secondary": { "$value": { "default": "#737278", "dark": "#89888d" }, "$type": "color", "$description": "Use text.color.subtle instead.", "deprecated": true }, "tertiary": { "$value": { "default": "#89888d", "dark": "#737278" }, "$type": "color", "$description": "Use text.color.disabled instead.", "deprecated": true }, "color": { "default": { "$value": { "default": "{color.neutral.800}", "dark": "{color.neutral.50}" }, "$type": "color", "$description": "Used for the default text color." }, "subtle": { "$value": { "default": "{color.neutral.600}", "dark": "{color.neutral.200}" }, "$type": "color", "$description": "Used for supplemental text that doesn't need to be as prominent as other text." }, "strong": { "$value": { "default": "{color.neutral.950}", "dark": "{color.neutral.0}" }, "$type": "color", "$description": "Used for text with the highest contrast." }, "heading": { "$value": { "default": "{color.neutral.950}", "dark": "{color.neutral.0}" }, "$type": "color", "$description": "Used for headings level 1-6." }, "link": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for default text links." }, "warning": { "$value": { "default": "{color.orange.600}", "dark": "{color.orange.300}" }, "$type": "color", "$description": "Used for text that requires caution or careful attention." }, "danger": { "$value": { "default": "{color.red.600}", "dark": "{color.red.300}" }, "$type": "color", "$description": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination." }, "success": { "$value": { "default": "{color.green.600}", "dark": "{color.green.300}" }, "$type": "color", "$description": "Used for text indicating success, completion, approval, addition, or validity." }, "disabled": { "$value": { "default": "{color.neutral.400}", "dark": "{color.neutral.400}" }, "$type": "color", "$description": "Used for disabled text." } } } }