@gitlab/ui
Version:
GitLab UI Components
1,501 lines • 119 kB
JSON
{
"alert": {
"neutral": {
"title": {
"color": {
"$value": {
"default": "{text.color.heading}",
"dark": "{text.color.heading}"
},
"$type": "color",
"$description": "Used for the title color of a neutral alert."
}
},
"background": {
"color": {
"$value": {
"default": "{feedback.neutral.background.color}",
"dark": "{background.color.subtle}"
},
"$type": "color",
"$description": "Used for the background color of a neutral alert."
}
},
"border": {
"top": {
"color": {
"$value": {
"default": "{color.alpha.0}",
"dark": "{color.neutral.400}"
},
"$type": "color",
"$description": "Used for the border center color of a neutral alert."
}
},
"bottom": {
"color": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border bottom color of a neutral alert."
}
}
}
},
"info": {
"title": {
"color": {
"$value": {
"default": "{text.color.heading}",
"dark": "{color.blue.300}"
},
"$type": "color",
"$description": "Used for the title color of an info alert."
}
},
"background": {
"color": {
"$value": {
"default": "{feedback.info.background.color}",
"dark": "{background.color.subtle}"
},
"$type": "color",
"$description": "Used for the background color of an info alert."
}
},
"border": {
"top": {
"color": {
"$value": {
"default": "{color.alpha.0}",
"dark": "{color.blue.400}"
},
"$type": "color",
"$description": "Used for the border color of an info alert."
}
},
"bottom": {
"color": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border bottom color of an info alert."
}
}
}
},
"success": {
"title": {
"color": {
"$value": {
"default": "{text.color.heading}",
"dark": "{color.green.300}"
},
"$type": "color",
"$description": "Used for the title color of a success alert."
}
},
"background": {
"color": {
"$value": {
"default": "{feedback.success.background.color}",
"dark": "{background.color.subtle}"
},
"$type": "color",
"$description": "Used for the background color of a success alert."
}
},
"border": {
"top": {
"color": {
"$value": {
"default": "{color.alpha.0}",
"dark": "{color.green.400}"
},
"$type": "color",
"$description": "Used for the border color of a success alert."
}
},
"bottom": {
"color": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border bottom color of a success alert."
}
}
}
},
"warning": {
"title": {
"color": {
"$value": {
"default": "{text.color.heading}",
"dark": "{color.orange.300}"
},
"$type": "color",
"$description": "Used for the title color of a warning alert."
}
},
"background": {
"color": {
"$value": {
"default": "{feedback.warning.background.color}",
"dark": "{background.color.subtle}"
},
"$type": "color",
"$description": "Used for the background color of a warning alert."
}
},
"border": {
"top": {
"color": {
"$value": {
"default": "{color.alpha.0}",
"dark": "{color.orange.400}"
},
"$type": "color",
"$description": "Used for the border color of a warning alert."
}
},
"bottom": {
"color": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border bottom color of a warning alert."
}
}
}
},
"danger": {
"title": {
"color": {
"$value": {
"default": "{text.color.heading}",
"dark": "{color.red.300}"
},
"$type": "color",
"$description": "Used for the title color of a danger alert."
}
},
"background": {
"color": {
"$value": {
"default": "{feedback.danger.background.color}",
"dark": "{background.color.subtle}"
},
"$type": "color",
"$description": "Used for the background color of a danger alert."
}
},
"border": {
"top": {
"color": {
"$value": {
"default": "{color.alpha.0}",
"dark": "{color.red.400}"
},
"$type": "color",
"$description": "Used for the border color of a danger alert."
}
},
"bottom": {
"color": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border bottom color of a danger alert."
}
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"avatar": {
"border": {
"color": {
"default": {
"$value": {
"default": "{color.alpha.dark.8}",
"dark": "{color.alpha.light.8}"
},
"$type": "color",
"$description": "Used to define the edge of an avatar."
},
"hover": {
"$value": {
"default": "{color.alpha.dark.24}",
"dark": "{color.alpha.light.24}"
},
"$type": "color",
"$description": "Used to increase the edge definition of an avatar in the hover state."
}
}
},
"fallback": {
"text": {
"color": {
"red": {
"$value": {
"default": "{color.red.800}",
"dark": "{color.red.200}"
},
"$type": "color",
"$description": "Red text color for avatar fallback with no particular meaning."
},
"purple": {
"$value": {
"default": "{color.purple.800}",
"dark": "{color.purple.200}"
},
"$type": "color",
"$description": "Purple text color for avatar fallback with no particular meaning."
},
"blue": {
"$value": {
"default": "{color.blue.800}",
"dark": "{color.blue.200}"
},
"$type": "color",
"$description": "Blue text color for avatar fallback with no particular meaning."
},
"green": {
"$value": {
"default": "{color.green.800}",
"dark": "{color.green.200}"
},
"$type": "color",
"$description": "Green text color for avatar fallback with no particular meaning."
},
"orange": {
"$value": {
"default": "{color.orange.800}",
"dark": "{color.orange.200}"
},
"$type": "color",
"$description": "Orange text color for avatar fallback with no particular meaning."
},
"neutral": {
"$value": {
"default": "{color.neutral.800}",
"dark": "{color.neutral.200}"
},
"$type": "color",
"$description": "Neutral text color for avatar fallback with no particular meaning."
}
}
},
"background": {
"color": {
"red": {
"$value": "#fcb5aa3d",
"$type": "color",
"$description": "Red background for avatar fallback with no particular meaning."
},
"purple": {
"$value": "#cbbbf23d",
"$type": "color",
"$description": "Purple background for avatar fallback with no particular meaning."
},
"blue": {
"$value": "#9dc7f13d",
"$type": "color",
"$description": "Blue background for avatar fallback with no particular meaning."
},
"green": {
"$value": "#91d4a83d",
"$type": "color",
"$description": "Green background for avatar fallback with no particular meaning."
},
"orange": {
"$value": "#e9be743d",
"$type": "color",
"$description": "Orange background for avatar fallback with no particular meaning."
},
"neutral": {
"$value": "#bfbfc33d",
"$type": "color",
"$description": "Neutral background for avatar fallback with no particular meaning."
}
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"badge": {
"muted": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.50}",
"dark": "{color.neutral.400}"
},
"$type": "color",
"$description": "Used for the background of a muted badge when static or the default state when linked."
},
"hover": {
"$value": "{badge.muted.background.color.default}",
"$type": "color",
"$description": "Used for the background of a muted badge in the hover state."
},
"focus": {
"$value": "{badge.muted.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a muted badge in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.100}",
"dark": "{color.neutral.300}"
},
"$type": "color",
"$description": "Used for the background of a muted badge in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a muted badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.neutral.200}",
"dark": "{color.neutral.300}"
},
"$type": "color",
"$description": "Used for the border of a muted badge in the hover state."
},
"focus": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a muted badge in the focus state."
},
"active": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a muted badge in the active state."
}
}
},
"text": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.600}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the text of a muted badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.neutral.700}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the text of a muted badge in the hover state."
},
"focus": {
"$value": "{badge.muted.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a muted badge in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.800}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the text of a muted badge in the active state."
}
}
},
"icon": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.500}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the icon of a muted badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.neutral.600}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the icon of a muted badge in the hover state."
},
"focus": {
"$value": "{badge.muted.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a muted badge in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.700}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the icon of a muted badge in the active state."
}
}
}
},
"neutral": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.100}",
"dark": "{color.neutral.300}"
},
"$type": "color",
"$description": "Used for the background of a neutral badge when static or the default state when linked."
},
"hover": {
"$value": "{badge.neutral.background.color.default}",
"$type": "color",
"$description": "Used for the background of a neutral badge in the hover state."
},
"focus": {
"$value": "{badge.neutral.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a neutral badge in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.200}",
"dark": "{color.neutral.200}"
},
"$type": "color",
"$description": "Used for the background of a neutral badge in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a neutral badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.neutral.200}",
"dark": "{color.neutral.200}"
},
"$type": "color",
"$description": "Used for the border of a neutral badge in the hover state."
},
"focus": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a neutral badge in the focus state."
},
"active": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a neutral badge in the active state."
}
}
},
"text": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.700}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the text of a neutral badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.neutral.800}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the text of a neutral badge in the hover state."
},
"focus": {
"$value": "{badge.neutral.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a neutral badge in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.900}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the text of a neutral badge in the active state."
}
}
},
"icon": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.500}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the icon of a neutral badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.neutral.600}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the icon of a neutral badge in the hover state."
},
"focus": {
"$value": "{badge.neutral.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a neutral badge in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.700}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the icon of a neutral badge in the active state."
}
}
}
},
"info": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.blue.100}",
"dark": "{color.blue.300}"
},
"$type": "color",
"$description": "Used for the background of an informational badge when static or the default state when linked."
},
"hover": {
"$value": "{badge.info.background.color.default}",
"$type": "color",
"$description": "Used for the background of an informational badge in the hover state."
},
"focus": {
"$value": "{badge.info.background.color.hover}",
"$type": "color",
"$description": "Used for the background of an informational badge in the focus state."
},
"active": {
"$value": {
"default": "{color.blue.200}",
"dark": "{color.blue.200}"
},
"$type": "color",
"$description": "Used for the background of an informational badge in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of an informational badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.blue.200}",
"dark": "{color.blue.200}"
},
"$type": "color",
"$description": "Used for the border of an informational badge in the hover state."
},
"focus": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of an informational badge in the focus state."
},
"active": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of an informational badge in the active state."
}
}
},
"text": {
"color": {
"default": {
"$value": {
"default": "{color.blue.700}",
"dark": "{color.blue.950}"
},
"$type": "color",
"$description": "Used for the text of an informational badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.blue.800}",
"dark": "{color.blue.950}"
},
"$type": "color",
"$description": "Used for the text of an informational badge in the hover state."
},
"focus": {
"$value": "{badge.info.text.color.hover}",
"$type": "color",
"$description": "Used for the text of an informational badge in the focus state."
},
"active": {
"$value": {
"default": "{color.blue.900}",
"dark": "{color.blue.950}"
},
"$type": "color",
"$description": "Used for the text of an informational badge in the active state."
}
}
},
"icon": {
"color": {
"default": {
"$value": {
"default": "{color.blue.500}",
"dark": "{color.blue.950}"
},
"$type": "color",
"$description": "Used for the icon of an informational badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.blue.600}",
"dark": "{color.blue.950}"
},
"$type": "color",
"$description": "Used for the icon of an informational badge in the hover state."
},
"focus": {
"$value": "{badge.info.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of an informational badge in the focus state."
},
"active": {
"$value": {
"default": "{color.blue.700}",
"dark": "{color.blue.950}"
},
"$type": "color",
"$description": "Used for the icon of an informational badge in the active state."
}
}
}
},
"success": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.green.100}",
"dark": "{color.green.300}"
},
"$type": "color",
"$description": "Used for the background of a success badge when static or the default state when linked."
},
"hover": {
"$value": "{badge.success.background.color.default}",
"$type": "color",
"$description": "Used for the background of a success badge in the hover state."
},
"focus": {
"$value": "{badge.success.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a success badge in the focus state."
},
"active": {
"$value": {
"default": "{color.green.200}",
"dark": "{color.green.200}"
},
"$type": "color",
"$description": "Used for the background of a success badge in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a success badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.green.200}",
"dark": "{color.green.200}"
},
"$type": "color",
"$description": "Used for the border of a success badge in the hover state."
},
"focus": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a success badge in the focus state."
},
"active": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a success badge in the active state."
}
}
},
"text": {
"color": {
"default": {
"$value": {
"default": "{color.green.700}",
"dark": "{color.green.950}"
},
"$type": "color",
"$description": "Used for the text of a success badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.green.800}",
"dark": "{color.green.950}"
},
"$type": "color",
"$description": "Used for the text of a success badge in the hover state."
},
"focus": {
"$value": "{badge.success.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a success badge in the focus state."
},
"active": {
"$value": {
"default": "{color.green.900}",
"dark": "{color.green.950}"
},
"$type": "color",
"$description": "Used for the text of a success badge in the active state."
}
}
},
"icon": {
"color": {
"default": {
"$value": {
"default": "{color.green.500}",
"dark": "{color.green.950}"
},
"$type": "color",
"$description": "Used for the icon of a success badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.green.600}",
"dark": "{color.green.950}"
},
"$type": "color",
"$description": "Used for the icon of a success badge in the hover state."
},
"focus": {
"$value": "{badge.success.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a success badge in the focus state."
},
"active": {
"$value": {
"default": "{color.green.700}",
"dark": "{color.green.950}"
},
"$type": "color",
"$description": "Used for the icon of a success badge in the active state."
}
}
}
},
"warning": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.orange.100}",
"dark": "{color.orange.300}"
},
"$type": "color",
"$description": "Used for the background of a warning badge when static or the default state when linked."
},
"hover": {
"$value": "{badge.warning.background.color.default}",
"$type": "color",
"$description": "Used for the background of a warning badge in the hover state."
},
"focus": {
"$value": "{badge.warning.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a warning badge in the focus state."
},
"active": {
"$value": {
"default": "{color.orange.200}",
"dark": "{color.orange.200}"
},
"$type": "color",
"$description": "Used for the background of a warning badge in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a warning badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.orange.200}",
"dark": "{color.orange.200}"
},
"$type": "color",
"$description": "Used for the border of a warning badge in the hover state."
},
"focus": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a warning badge in the focus state."
},
"active": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a warning badge in the active state."
}
}
},
"text": {
"color": {
"default": {
"$value": {
"default": "{color.orange.700}",
"dark": "{color.orange.950}"
},
"$type": "color",
"$description": "Used for the text of a warning badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.orange.800}",
"dark": "{color.orange.950}"
},
"$type": "color",
"$description": "Used for the text of a warning badge in the hover state."
},
"focus": {
"$value": "{badge.warning.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a warning badge in the focus state."
},
"active": {
"$value": {
"default": "{color.orange.900}",
"dark": "{color.orange.950}"
},
"$type": "color",
"$description": "Used for the text of a warning badge in the active state."
}
}
},
"icon": {
"color": {
"default": {
"$value": {
"default": "{color.orange.500}",
"dark": "{color.orange.950}"
},
"$type": "color",
"$description": "Used for the icon of a warning badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.orange.600}",
"dark": "{color.orange.950}"
},
"$type": "color",
"$description": "Used for the icon of a warning badge in the hover state."
},
"focus": {
"$value": "{badge.warning.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a warning badge in the focus state."
},
"active": {
"$value": {
"default": "{color.orange.700}",
"dark": "{color.orange.950}"
},
"$type": "color",
"$description": "Used for the icon of a warning badge in the active state."
}
}
}
},
"danger": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.red.100}",
"dark": "{color.red.300}"
},
"$type": "color",
"$description": "Used for the background of a danger badge when static or the default state when linked."
},
"hover": {
"$value": "{badge.danger.background.color.default}",
"$type": "color",
"$description": "Used for the background of a danger badge in the hover state."
},
"focus": {
"$value": "{badge.danger.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a danger badge in the focus state."
},
"active": {
"$value": {
"default": "{color.red.200}",
"dark": "{color.red.200}"
},
"$type": "color",
"$description": "Used for the background of a danger badge in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a danger badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.red.200}",
"dark": "{color.red.200}"
},
"$type": "color",
"$description": "Used for the border of a danger badge in the hover state."
},
"focus": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a danger badge in the focus state."
},
"active": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a danger badge in the active state."
}
}
},
"text": {
"color": {
"default": {
"$value": {
"default": "{color.red.700}",
"dark": "{color.red.950}"
},
"$type": "color",
"$description": "Used for the text of a danger badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.red.800}",
"dark": "{color.red.950}"
},
"$type": "color",
"$description": "Used for the text of a danger badge in the hover state."
},
"focus": {
"$value": "{badge.danger.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a danger badge in the focus state."
},
"active": {
"$value": {
"default": "{color.red.900}",
"dark": "{color.red.950}"
},
"$type": "color",
"$description": "Used for the text of a danger badge in the active state."
}
}
},
"icon": {
"color": {
"default": {
"$value": {
"default": "{color.red.700}",
"dark": "{color.red.950}"
},
"$type": "color",
"$description": "Used for the icon of a danger badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.red.800}",
"dark": "{color.red.950}"
},
"$type": "color",
"$description": "Used for the icon of a danger badge in the hover state."
},
"focus": {
"$value": "{badge.danger.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a danger badge in the focus state."
},
"active": {
"$value": {
"default": "{color.red.900}",
"dark": "{color.red.950}"
},
"$type": "color",
"$description": "Used for the icon of a danger badge in the active state."
}
}
}
},
"tier": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.purple.100}",
"dark": "{color.purple.300}"
},
"$type": "color",
"$description": "Used for the background of a tier related badge when static or the default state when linked."
},
"hover": {
"$value": "{badge.tier.background.color.default}",
"$type": "color",
"$description": "Used for the background of a tier related badge in the hover state."
},
"focus": {
"$value": "{badge.tier.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a tier related badge in the focus state."
},
"active": {
"$value": {
"default": "{color.purple.200}",
"dark": "{color.purple.200}"
},
"$type": "color",
"$description": "Used for the background of a tier related badge in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a tier related badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.purple.200}",
"dark": "{color.purple.200}"
},
"$type": "color",
"$description": "Used for the border of a tier related badge in the hover state."
},
"focus": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a tier related badge in the focus state."
},
"active": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a tier related badge in the active state."
}
}
},
"text": {
"color": {
"default": {
"$value": {
"default": "{color.purple.700}",
"dark": "{color.purple.950}"
},
"$type": "color",
"$description": "Used for the text of a tier related badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.purple.800}",
"dark": "{color.purple.950}"
},
"$type": "color",
"$description": "Used for the text of a tier related badge in the hover state."
},
"focus": {
"$value": "{badge.tier.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a tier related badge in the focus state."
},
"active": {
"$value": {
"default": "{color.purple.900}",
"dark": "{color.purple.950}"
},
"$type": "color",
"$description": "Used for the text of a tier related badge in the active state."
}
}
},
"icon": {
"color": {
"default": {
"$value": {
"default": "{color.purple.700}",
"dark": "{color.purple.950}"
},
"$type": "color",
"$description": "Used for the icon of a tier related badge when static or the default state when linked."
},
"hover": {
"$value": {
"default": "{color.purple.800}",
"dark": "{color.purple.950}"
},
"$type": "color",
"$description": "Used for the icon of a tier related badge in the hover state."
},
"focus": {
"$value": "{badge.tier.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a tier related badge in the focus state."
},
"active": {
"$value": {
"default": "{color.purple.900}",
"dark": "{color.purple.950}"
},
"$type": "color",
"$description": "Used for the icon of a tier related badge in the active state."
}
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"banner": {
"intro": {
"border": {
"color": {
"$value": {
"default": "{color.blue.200}",
"dark": "{color.blue.700}"
},
"$type": "color",
"$description": "Used for the border of an info banner."
}
}
},
"promo": {
"background": {
"color": {
"$value": {
"default": "{color.purple.50}",
"dark": "{color.purple.950}"
},
"$type": "color",
"$description": "Used for the background of a promo banner."
}
},
"border": {
"color": {
"$value": {
"default": "{color.purple.200}",
"dark": "{color.purple.700}"
},
"$type": "color",
"$description": "Used for the border of a promo banner."
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"breadcrumb": {
"separator": {
"color": {
"$value": "{color.neutral.400}",
"$type": "color",
"$description": "Used for the breadcrumb level separator."
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"broadcast": {
"banner": {
"background": {
"color": {
"blue": {
"$value": "{color.theme-blue.700}",
"$type": "color",
"$description": "Used for the background for the blue banner type."
},
"dark": {
"$value": "{color.neutral.500}",
"$type": "color",
"$description": "Used for the background for the dark banner type."
},
"green": {
"$value": "{color.theme-green.700}",
"$type": "color",
"$description": "Used for the background for the green banner type."
},
"indigo": {
"$value": "{color.theme-indigo.700}",
"$type": "color",
"$description": "Used for the background for the indigo banner type."
},
"light": {
"$value": "{color.neutral.50}",
"$type": "color",
"$description": "Used for the background for the light banner type."
},
"lightblue": {
"$value": "{color.theme-blue.500}",
"$type": "color",
"$description": "Used for the background for the lightblue banner type."
},
"lightgreen": {
"$value": "{color.theme-green.500}",
"$type": "color",
"$description": "Used for the background for the lightgreen banner type."
},
"lightindigo": {
"$value": "{color.theme-indigo.500}",
"$type": "color",
"$description": "Used for the background for the lightindigo banner type."
},
"lightred": {
"$value": "{color.theme-red.500}",
"$type": "color",
"$description": "Used for the background for the lightred banner type."
},
"red": {
"$value": "{color.theme-red.700}",
"$type": "color",
"$description": "Used for the background for the red banner type."
}
}
},
"border": {
"color": {
"blue": {
"$value": "{color.theme-blue.900}",
"$type": "color",
"$description": "Used for the border for the blue banner type."
},
"dark": {
"$value": "{color.neutral.700}",
"$type": "color",
"$description": "Used for the border for the dark banner type."
},
"green": {
"$value": "{color.theme-green.900}",
"$type": "color",
"$description": "Used for the border for the green banner type."
},
"indigo": {
"$value": "{color.theme-indigo.900}",
"$type": "color",
"$description": "Used for the border for the indigo banner type."
},
"light": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the border for the light banner type."
},
"lightblue": {
"$value": "{color.theme-blue.700}",
"$type": "color",
"$description": "Used for the border for the lightblue banner type."
},
"lightgreen": {
"$value": "{color.theme-green.700}",
"$type": "color",
"$description": "Used for the border for the lightgreen banner type."
},
"lightindigo": {
"$value": "{color.theme-indigo.700}",
"$type": "color",
"$description": "Used for the border for the lightindigo banner type."
},
"lightred": {
"$value": "{color.theme-red.700}",
"$type": "color",
"$description": "Used for the border for the lightred banner type."
},
"red": {
"$value": "{color.theme-red.900}",
"$type": "color",
"$description": "Used for the border for the red banner type."
}
}
},
"icon": {
"color": {
"blue": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the blue banner type."
},
"dark": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the dark banner type."
},
"green": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the green banner type."
},
"indigo": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the indigo banner type."
},
"light": {
"$value": "{color.neutral.900}",
"$type": "color",
"$description": "Used for the icon for the light banner type."
},
"lightblue": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the lightblue banner type."
},
"lightgreen": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the lightgreen banner type."
},
"lightindigo": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the lightindigo banner type."
},
"lightred": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the lightred banner type."
},
"red": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the red banner type."
}
}
},
"text": {
"color": {
"blue": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the blue banner type."
},
"dark": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the dark banner type."
},
"green": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the green banner type."
},
"indigo": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the indigo banner type."
},
"light": {
"$value": "{color.neutral.900}",
"$type": "color",
"$description": "Used for the text for the light banner type."
},
"lightblue": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the lightblue banner type."
},
"lightgreen": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the lightgreen banner type."
},
"lightindigo": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the lightindigo banner type."
},
"lightred": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the lightred banner type."
},
"red": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the red banner type."
}
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"button": {
"default": {
"primary": {
"foreground": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.800}",
"dark": "{color.neutral.50}"
},
"$type": "color",
"$description": "Used for the foreground of a default primary button in the default state."
},
"hover": {
"$value": "{button.default.primary.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a default primary button in the hover state."
},
"focus": {
"$value": "{button.default.primary.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a default primary button in the focus state."
},