@gitlab/ui
Version:
GitLab UI Components
880 lines (879 loc) • 30.4 kB
JSON
{
"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."
}
}
}
}
}
}