@gitlab/ui
Version:
GitLab UI Components
3,496 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."
},
"active": {
"$value": "{button.default.primary.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a default primary button in the active state."
}
}
},
"background": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.0}",
"dark": "rgba(137, 136, 141, 0.4)"
},
"$type": "color",
"$description": "Used for the background of an default primary button in the default state."
},
"hover": {
"$value": {
"default": "{color.neutral.50}",
"dark": "rgba(137, 136, 141, 0.64)"
},
"$type": "color",
"$description": "Used for the background of an default primary button in the hover state."
},
"focus": {
"$value": "{button.default.primary.background.color.hover}",
"$type": "color",
"$description": "Used for the background of an default primary button in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.100}",
"dark": "rgba(137, 136, 141, 0.32)"
},
"$type": "color",
"$description": "Used for the background of an default primary button in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.200}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of an default primary button in the default state."
},
"hover": {
"$value": {
"default": "{color.neutral.400}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of an default primary button in the hover state."
},
"focus": {
"$value": "{button.default.primary.border.color.hover}",
"$type": "color",
"$description": "Used for the border of an default primary button in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.600}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of an default primary button in the active state."
}
}
}
},
"tertiary": {
"foreground": {
"color": {
"default": {
"$value": "{action.neutral.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a default borderless, tertiary button in the default state."
},
"hover": {
"$value": "{action.neutral.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a default borderless, tertiary button in the hover state."
},
"focus": {
"$value": "{action.neutral.foreground.color.focus}",
"$type": "color",
"$description": "Used for the foreground of a default borderless, tertiary button in the focus state."
},
"active": {
"$value": "{action.neutral.foreground.color.active}",
"$type": "color",
"$description": "Used for the foreground of a default borderless, tertiary button in the active state."
}
}
},
"background": {
"color": {
"default": {
"$value": "{action.neutral.background.color.default}",
"$type": "color",
"$description": "Used for the background of a default borderless, tertiary button in the default state."
},
"hover": {
"$value": "{action.neutral.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a default borderless, tertiary button in the hover state."
},
"focus": {
"$value": "{action.neutral.background.color.focus}",
"$type": "color",
"$description": "Used for the background of a default borderless, tertiary button in the focus state."
},
"active": {
"$value": "{action.neutral.background.color.active}",
"$type": "color",
"$description": "Used for the background of a default borderless, tertiary button in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": "{action.neutral.border.color.default}",
"$type": "color",
"$description": "Used for the border of a default borderless, tertiary button in the default state."
},
"hover": {
"$value": "{action.neutral.border.color.hover}",
"$type": "color",
"$description": "Used for the border of a default borderless, tertiary button in the hover state."
},
"focus": {
"$value": "{action.neutral.border.color.focus}",
"$type": "color",
"$description": "Used for the border of a default borderless, tertiary button in the focus state."
},
"active": {
"$value": "{action.neutral.border.color.active}",
"$type": "color",
"$description": "Used for the border of a default borderless, tertiary button in the active state."
}
}
}
}
},
"confirm": {
"primary": {
"foreground": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the default state."
},
"hover": {
"$value": "{action.strong.confirm.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the hover state."
},
"focus": {
"$value": "{action.strong.confirm.foreground.color.focus}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the focus state."
},
"active": {
"$value": "{action.strong.confirm.foreground.color.active}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the active state."
}
}
},
"background": {
"color": {
"default": {
"$value": "{action.strong.confirm.background.color.default}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the default state."
},
"hover": {
"$value": "{action.strong.confirm.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the hover state."
},
"focus": {
"$value": "{action.strong.confirm.background.color.focus}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the focus state."
},
"active": {
"$value": "{action.strong.confirm.background.color.active}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": {
"default": "{color.blue.600}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the default state."
},
"hover": {
"$value": {
"default": "{color.blue.800}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the hover state."
},
"focus": {
"$value": "{button.confirm.primary.border.color.hover}",
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the focus state."
},
"active": {
"$value": {
"default": "{color.blue.900}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the active state."
}
}
}
},
"secondary": {
"foreground": {
"color": {
"default": {
"$value": {
"default": "{color.blue.500}",
"dark": "{color.blue.100}"
},
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) button 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) button in the hover state."
},
"focus": {
"$value": "{button.confirm.secondary.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) button 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) button in the active state."
}
}
},
"background": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.0}",
"dark": "rgba(66, 143, 220, 0.4)"
},
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) button in the default state."
},
"hover": {
"$value": {
"default": "{color.blue.50}",
"dark": "rgba(66, 143, 220, 0.64)"
},
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) button in the hover state."
},
"focus": {
"$value": "{button.confirm.secondary.background.color.hover}",
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) button in the focus state."
},
"active": {
"$value": {
"default": "{color.blue.100}",
"dark": "rgba(66, 143, 220, 0.32)"
},
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) button in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": {
"default": "{color.blue.500}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) button in the default state."
},
"hover": {
"$value": {
"default": "{color.blue.700}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) button in the hover state."
},
"focus": {
"$value": "{button.confirm.secondary.border.color.hover}",
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) button in the focus state."
},
"active": {
"$value": {
"default": "{color.blue.900}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) button in the active state."
}
}
}
},
"tertiary": {
"foreground": {
"color": {
"default": {
"$value": "{action.confirm.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the default state."
},
"hover": {
"$value": "{action.confirm.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state."
},
"focus": {
"$value": "{action.confirm.foreground.color.focus}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state."
},
"active": {
"$value": "{action.confirm.foreground.color.active}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the active state."
}
}
},
"background": {
"color": {
"default": {
"$value": "{action.confirm.background.color.default}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary confirm (positive) button in the default state."
},
"hover": {
"$value": "{action.confirm.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary confirm (positive) button in the hover state."
},
"focus": {
"$value": "{action.confirm.background.color.focus}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary confirm (positive) button in the focus state."
},
"active": {
"$value": "{action.confirm.background.color.active}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary confirm (positive) button in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": "{action.confirm.border.color.default}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary confirm (positive) button in the default state."
},
"hover": {
"$value": "{action.confirm.border.color.hover}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary confirm (positive) button in the hover state."
},
"focus": {
"$value": "{action.confirm.border.color.focus}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary confirm (positive) button in the focus state."
},
"active": {
"$value": "{action.confirm.border.color.active}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary confirm (positive) button in the active state."
}
}
}
}
},
"danger": {
"primary": {
"foreground": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) primary button in the default state."
},
"hover": {
"$value": "{button.danger.primary.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) primary button in the hover state."
},
"focus": {
"$value": "{button.danger.primary.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) primary button in the focus state."
},
"active": {
"$value": "{button.danger.primary.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) primary button in the active state."
}
}
},
"background": {
"color": {
"default": {
"$value": {
"default": "{color.red.500}",
"dark": "{color.red.300}"
},
"$type": "color",
"$description": "Used for the background of a danger (destructive) primary button in the default state."
},
"hover": {
"$value": {
"default": "{color.red.600}",
"dark": "{color.red.200}"
},
"$type": "color",
"$description": "Used for the background of a danger (destructive) primary button in the hover state."
},
"focus": {
"$value": "{button.danger.primary.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a danger (destructive) primary button in the focus state."
},
"active": {
"$value": {
"default": "{color.red.800}",
"dark": "{color.red.400}"
},
"$type": "color",
"$description": "Used for the background of a danger (destructive) primary button in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": {
"default": "{color.red.600}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of a danger (destructive) primary button in the default state."
},
"hover": {
"$value": {
"default": "{color.red.800}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of a danger (destructive) primary button in the hover state."
},
"focus": {
"$value": "{button.danger.primary.border.color.hover}",
"$type": "color",
"$description": "Used for the border of a danger (destructive) primary button in the focus state."
},
"active": {
"$value": {
"default": "{color.red.900}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of a danger (destructive) primary button in the active state."
}
}
}
},
"secondary": {
"foreground": {
"color": {
"default": {
"$value": {
"default": "{color.red.500}",
"dark": "{color.red.100}"
},
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the default state."
},
"hover": {
"$value": {
"default": "{color.red.700}",
"dark": "{color.red.50}"
},
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the hover state."
},
"focus": {
"$value": "{button.danger.secondary.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the focus state."
},
"active": {
"$value": {
"default": "{color.red.900}",
"dark": "{color.red.50}"
},
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the active state."
}
}
},
"background": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.0}",
"dark": "rgba(236, 89, 65, 0.40)"
},
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) button in the default state."
},
"hover": {
"$value": {
"default": "{color.red.50}",
"dark": "rgba(236, 89, 65, 0.64)"
},
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) button in the hover state."
},
"focus": {
"$value": "{button.danger.secondary.background.color.hover}",
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) button in the focus state."
},
"active": {
"$value": {
"default": "{color.red.100}",
"dark": "rgba(236, 89, 65, 0.32)"
},
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) button in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": {
"default": "{color.red.500}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) button in the default state."
},
"hover": {
"$value": {
"default": "{color.red.700}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) button in the hover state."
},
"focus": {
"$value": "{button.danger.secondary.border.color.hover}",
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) button in the focus state."
},
"active": {
"$value": {
"default": "{color.red.900}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) button in the active state."
}
}
}
},
"tertiary": {
"foreground": {
"color": {
"default": {
"$value": "{action.danger.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the default state."
},
"hover": {
"$value": "{action.danger.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state."
},
"focus": {
"$value": "{action.danger.foreground.color.focus}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the focus state."
},
"active": {
"$value": "{action.danger.foreground.color.active}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the active state."
}
}
},
"background": {
"color": {
"default": {
"$value": "{action.danger.background.color.default}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary danger (destructive) button in the default state."
},
"hover": {
"$value": "{action.danger.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary danger (destructive) button in the hover state."
},
"focus": {
"$value": "{action.danger.background.color.focus}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary danger (destructive) button in the focus state."
},
"active": {
"$value": "{action.danger.background.color.active}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary danger (destructive) button in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": "{action.danger.border.color.default}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary danger (destructive) button in the default state."
},
"hover": {
"$value": "{action.danger.border.color.hover}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary danger (destructive) button in the hover state."
},
"focus": {
"$value": "{action.danger.border.color.focus}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary danger (destructive) button in the focus state."
},
"active": {
"$value": "{action.danger.border.color.active}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary danger (destructive) button in the active state."
}
}
}
}
},
"dashed": {
"border": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.400}",
"dark": "{color.neutral.400}"
},
"$type": "color",
"$description": "Used for the border of a dashed button in the default state."
},
"hover": {
"$value": "{button.dashed.border.color.default}",
"$type": "color",
"$description": "Used for the border of a dashed button in the hover state."
},
"focus": {
"$value": "{button.dashed.border.color.default}",
"$type": "color",
"$description": "Used for the border of a dashed button in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.600}",
"dark": "{color.neutral.300}"
},
"$type": "color",
"$description": "Used for the border of a dashed button in the active state."
}
}
}
},
"link": {
"text": {
"color": {
"default": {
"$value": "{text.color.link}",
"$type": "color",
"$description": "Used for the text of a link button in the default state."
},
"hover": {
"$value": "{button.link.text.color.default}",
"$type": "color",
"$description": "Used for the text of a link button in the hover state."
},
"focus": {
"$value": "{button.link.text.color.default}",
"$type": "color",
"$description": "Used for the text of a link button in the focus state."
},
"active": {
"$value": "{button.link.text.color.default}",
"$type": "color",
"$description": "Used for the text of a link button in the active state."
}
}
}
},
"selected": {
"foreground": {
"color": {
"default": {
"$value": {
"default": "{button.default.primary.foreground.color.default}",
"dark": "{color.neutral.900}"
},
"$type": "color",
"$description": "Used for the foreground of a selected button in the default state."
},
"hover": {
"$value": {
"default": "{button.default.primary.foreground.color.hover}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the foreground of a selected button in the hover state."
},
"focus": {
"$value": {
"default": "{button.default.primary.foreground.color.focus}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the foreground of a selected button in the focus state."
},
"active": {
"$value": {
"default": "{button.default.primary.foreground.color.active}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the foreground of a selected button in the active state."
}
}
},
"background": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.50}",
"dark": "{color.neutral.300}"
},
"$type": "color",
"$description": "Used for the background of a selected button in the default state."
},
"hover": {
"$value": {
"default": "{button.default.primary.background.color.hover}",
"dark": "{color.neutral.200}"
},
"$type": "color",
"$description": "Used for the background of a selected button in the hover state."
},
"focus": {
"$value": {
"default": "{button.default.primary.background.color.focus}",
"dark": "{color.neutral.200}"
},
"$type": "color",
"$description": "Used for the background of a selected button in the focus state."
},
"active": {
"$value": {
"default": "{button.default.primary.background.color.active}",
"dark": "{color.neutral.400}"
},
"$type": "color",
"$description": "Used for the background of a selected button in the active state."
}
}
},
"border": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.300}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of a selected button in the default state."
},
"hover": {
"$value": {
"default": "{color.neutral.400}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of a selected button in the hover state."
},
"focus": {
"$value": "{button.selected.border.color.hover}",
"$type": "color",
"$description": "Used for the border of a selected button in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.600}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of a selected button in the active state."
}
}
}
},
"disabled": {
"foreground": {
"color": {
"$value": {
"default": "{color.neutral.500}",
"dark": "{color.neutral.400}"
},
"$type": "color",
"$description": "Used for the foreground of a disabled button."
}
},
"background": {
"color": {
"$value": {
"default": "{color.neutral.10}",
"dark": "rgba(137, 136, 141, 0.16)"
},
"$type": "color",
"$description": "Used for the background of a disabled button."
}
},
"border": {
"color": {
"$value": {
"default": "{color.neutral.100}",
"dark": "{color.alpha.0}"
},
"$type": "color",
"$description": "Used for the border of a disabled button."
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"chart": {
"axis": {
"pointer": {
"color": {
"$value": "{icon.color.subtle}",
"$type": "color",
"$description": "Used in charts for the color of the reference line and axis value under mouse pointer."
}
},
"line": {
"color": {
"$value": {
"default": "{color.neutral.200}",
"dark": "{color.neutral.700}"
},
"$type": "color",
"$description": "Used in charts for axis line color."
}
},
"text": {
"color": {
"$value": "{text.color.subtle}",
"$type": "color",
"$description": "Used in charts for the text color of axis titles and labels."
}
}
},
"threshold": {
"area": {
"color": {
"$value": "rgba(221,43,14,0.1)",
"$type": "color",
"$description": "Used in charts to delineate a threshold area in a chart."
}
},
"line": {
"color": {
"$value": {
"default": "{color.red.500}",
"dark": "{color.red.600}"
},
"$type": "color",
"$description": "Used in charts to divide a threshold area in a chart from other data."
}
}
},
"zoom": {
"filler": {
"color": {
"$value": {
"default": "{color.alpha.dark.8}",
"dark": "{color.alpha.light.16}"
},
"$type": "color",
"$description": "Used in charts for the overlay color when zooming in on a specific area of data."
}
},
"handle": {
"color": {
"$value": "{icon.color.subtle}",
"$type": "color",
"$description": "Used in charts for the handle color when zooming in on a specific area of data."
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"datepicker": {
"background": {
"color": {
"$value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.900}"
},
"$type": "color",
"$description": "Used for the background color of datepicker."
}
},
"date": {
"text": {
"color": {
"selected": {
"$value": "{control.indicator.color.selected}",
"$type": "color",
"$description": "Used for the datepicker date text color state indicators."
}
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"dropdown": {
"background": {
"color": {
"$value": "{background.color.overlap}",
"$type": "color",
"$description": "Used for the background of a dropdown."
}
},
"border": {
"color": {
"$value": {
"default": "{border.color.strong}",
"dark": "{border.color.default}"
},
"$type": "color",
"$description": "Used for the border of a dropdown."
}
},
"divider": {
"color": {
"$value": {
"default": "{border.color.default}",
"dark": "{border.color.subtle}"
},
"$type": "color",
"$description": "Used for the divider of a dropdown."
}
},
"option": {
"text": {
"color": {
"default": {
"$value": "{action.neutral.foreground.color.default}",
"$type": "color",
"$description": "Used for the text of a dropdown option in the default state."
},
"hover": {
"$value": "{action.neutral.foreground.color.hover}",
"$type": "color",
"$description": "Used for the text of a dropdown option in the hover state."
},
"focus": {
"$value": "{action.neutral.foreground.color.focus}",
"$type": "color",
"$description": "Used for the text of a dropdown option in the focus state."
},
"active": {
"$value": "{action.neutral.foreground.color.active}",
"$type": "color",
"$description": "Used for the text of a dropdown option in the active state."
},
"disabled": {
"$value": "{action.disabled.foreground.color}",
"$type": "color",
"$description": "Used for the text of a dropdown option in the disabled state."
}
}
},
"indicator": {
"color": {
"selected": {
"default": {
"$value": "{control.background.color.selected.default}",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the default state."
},
"hover": {
"$value": "{control.background.color.selected.hover}",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the hover state."
},
"focus": {
"$value": "{control.background.color.selected.focus}",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the focus state."
},
"active": {
"$value": "{control.background.color.selected.focus}",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the active state."
}
}
}
},
"background": {
"color": {
"unselected": {
"default": {
"$value": "{action.neutral.background.color.default}",
"$type": "color",
"$description": "Used for the background of an unselected dropdown option in the default state."
},
"hover": {
"$value": "{action.neutral.background.color.hover}",
"$type": "color",
"$description": "Used for the background of an unselected dropdown option in the hover state."
},
"focus": {
"$value": "{action.neutral.background.color.focus}",
"$type": "color",
"$description": "Used for the background of an unselected dropdown option in the focus state."
},
"active": {
"$value": "{action.neutral.background.color.active}",
"$type": "color",
"$description": "Used for the background of an unselected dropdown option in the active state."
}
},
"selected": {
"default": {
"$value": {
"default": "{color.neutral.50}",
"dark": "{color.neutral.800}"
},
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the default state."
},
"hover": {
"$value": {
"default": "{color.neutral.100}",
"dark": "{color.neutral.700}"
},
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the hover state."
},
"focus": {
"$value": "{dropdown.option.background.color.selected.hover}",
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the focus state."
},
"active": {
"$value": {
"default": "{color.neutral.200}",
"dark": "{color.neutral.900}"
},
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the active state."
}
}
}
}
},
"search": {
"background": {
"color": {
"$value": {
"default": "{color.alpha.dark.2}",
"dark": "{color.alpha.dark.24}"
},
"$type": "color",
"$description": "Used for the background of a search input in a dropdown listbox."
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"filtered-search": {
"token": {
"type": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.50}",
"dark": "{color.neutral.900}"
},
"$type": "color",
"$description": "Used for the filtered search type token background color in the default state."
},
"hover": {
"$value": {
"default": "{color.neutral.100}",
"dark": "{color.neutral.800}"
},
"$type": "color",
"$description": "Used for the filtered search type token background color in the hover state."
}
}
}
},
"data": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.100}",
"dark": "{color.neutral.800}"
},
"$type": "color",
"$description": "Used for the filtered search data background color in the default state."
},
"hover": {
"$value": {
"default": "{color.neutral.200}",
"dark": "{color.neutral.700}"
},
"$type": "color",
"$description": "Used for the filtered search data token background color in the hover state."
}
}
}
},
"operator": {
"background": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.50}",
"dark": "{color.neutral.900}"
},
"$type": "color",
"$description": "Used for the filtered search operator background color in the default state."
},
"hover": {
"$value": {
"default": "{color.neutral.100}",
"dark": "{color.neutral.800}"
},
"$type": "color",
"$description": "Used for the filtered search operator token background color in the hover state."
}
}
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"illustration": {
"stroke": {
"color": {
"default": {
"$value": {
"default": "#171321",
"dark": "#e3e3e8"
},
"$type": "color",
"$description": "Default stroke color to define shape and provide essential detail."
}
},
"width": {
"default": {
"$value": {
"default": "2",
"dark": "1.5"
},
"$type": "dimension",
"$description": "Default stroke width to define shape and provide essential detail."
}
}
},
"fill": {
"color": {
"default": {
"$value": {
"default": "#fff",
"dark": "#423f4f"
},
"$type": "color",
"$description": "Default fill color for an element where specific meaning or emphasis is not required."
}
}
},
"status": {
"fill": {
"color": {
"neutral": {
"$value": {
"default": "#aea5d6",
"dark": "#6f6796"
},
"$type": "color",
"$description": "Used as a fill to convey a concept which is neither positive or negative."
},
"success": {
"$value": {
"default": "#6fdac9",
"dark": "#3b8581"
},
"$type": "color",
"$description": "Used as a fill to convey a success or active concept, has a positive connotation."
},
"warning": {
"$value": {
"default": "#fca326",
"dark": "#ab752f"
},
"$type": "color",
"$description": "Used as a fill to convey a caution or warning concept, has a slightly negative connotation."
},
"danger": {
"$value": {
"default": "#ff9d73",
"dark": "#aa563a"
},
"$type": "color",
"$description": "Used as a fill to convey a critical or danger concept, has a negative connotation."
}
}
}
},
"accent": {
"stroke": {
"color": {
"orange": {
"$value": {
"default": "#ff9d73",
"dark": "#e3865f"
},
"$type": "color",
"$description": "Used for orange accent stroke detail on an object or attention-drawing element."
},
"teal": {
"$value": {
"default": "#6fdac9",
"dark": "#6baea3"
},
"$type": "color",
"$description": "Used for teal accent stroke detail on an object or attention-drawing element."
},
"strong": {
"$value": {
"default": "#aea5d6",
"dark": "#aea5d6"
},
"$type": "color",
"$description": "Used for dark accent stroke detail on an object or attention-drawing element."
}
}
},
"fill": {
"color": {
"subtle": {
"$value": {
"default": "#d0c5e2",
"dark": "#5c5371"
},
"$type": "color",
"$description": "Used to add depth to a secondary element and supporting surface."
},
"strong": {
"$value": {
"default": "#aea5d6",
"dark": "#6f6796"
},
"$type": "color",
"$description": "Used for an element requiring visual emphasis without competing with primary content or status indicators."
},
"orange": {
"$value": {
"default": "#ff9d73",
"dark": "#aa563a"
},
"$type": "color",
"$description": "Used to add orange to a secondary element and supporting surface."
},
"teal": {
"$value": {
"default": "#6fdac9",
"dark": "#3b8581"
},
"$type": "color",
"$description": "Used to add teal to a secondary element and supporting surface."
}
}
}
},
"base": {
"fill": {
"color": {
"$value": {
"default": "#e7e4f2",
"dark": "#32303c"
},
"$type": "color",
"$description": "Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion."
}
}
},
"isometric": {
"stroke": {
"color": {
"default": {
"$value": {
"default": "#171321",
"dark": "#e3e3e8"
},
"$type": "color",
"$description": "Default stroke color to define shape and provide essential detail in isometric illustration."
}
},
"width": {
"default": {
"$value": {
"default": "2",
"dark": "1.5"
},
"$type": "dimension",
"$description": "Default stroke width to define shape and provide essential detail in isometric illustration."
}
}
},
"glyph": {
"top": {
"fill": {
"color": {
"$value": {
"default": "#c5f4ec",
"dark": "#5a566c"
},
"$type": "color",
"$description": "Used for the top face of isometric text and number elements."
}
}
},
"front": {
"fill": {
"color": {
"$value": {
"default": "#fff",
"dark": "#423f4f"
},
"$type": "color",
"$description": "Used for the front face of isometric text and number elements."
}
}
},
"side": {
"fill": {
"color": {
"$value": {
"default": "#6fdac9",
"dark": "#373441"
},
"$type": "color",
"$description": "Used for the side face of isometric text and number elements."
}
}
},
"shadow": {
"fill": {
"color": {
"$value": {
"default": "#10b1b1",
"dark": "#292730"
},
"$type": "color",
"$description": "Used for the shadow of isometric text and number elements."
}
}
}
},
"object": {
"top": {
"fill": {
"color": {
"$value": {
"default": "#ff9d73",
"dark": "#aa563a"
},
"$type": "color",
"$description": "Used for the top face of an isometric object or symbol."
}
}
},
"front": {
"fill": {
"color": {
"$value": {
"default": "#ffc2a8",
"dark": "#a54623"
},
"$type": "color",
"$description": "Used for the front face of an isometric object or symbol."
}
}
},
"side": {
"fill": {
"color": {
"$value": {
"default": "#ff7b42",
"dark": "#8f4424"
},
"$type": "color",
"$description": "Used for the side face of an isometric object or symbol."
}
}
},
"highlight": {
"fill": {
"color": {
"$value": {
"default": "#fff",
"dark": "#423f4f"
},
"$type": "color",
"$description": "Used for the face of an isometric object or symbol that requires maximum distinction from other elements."
}
}
},
"shadow": {
"fill": {
"color": {
"$value": {
"default": "#e24329",
"dark": "#3d2b2a"
},
"$type": "color",
"$description": "Used for the shadow of an isometric object or symbol."
}
}
}
},
"accent": {
"top": {
"fill": {
"color": {
"$value": {
"default": "#45424d",
"dark": "#6d6972"
},
"$type": "color",
"$description": "Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content."
}
}
},
"front": {
"fill": {
"color": {
"$value": {
"default": "#74717a",
"dark": "#49474d"
},
"$type": "color",
"$description": "Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content."
}
}
},
"side": {
"fill": {
"color": {
"$value": {
"default": "#2b2838",
"dark": "#212023"
},
"$type": "color",
"$description": "Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content."
}
}
}
},
"base": {
"top": {
"fill": {
"color": {
"$value": {
"default": "#e7e4f2",
"dark": "#32303c"
},
"$type": "color",
"$description": "Used for the top surface of an isometric base platform."
}
}
},
"front": {
"fill": {
"color": {
"$value": {
"default": "#d5d0e8",
"dark": "#2b2932"
},
"$type": "color",
"$description": "Used for the front face of an isometric base platform."
}
}
},
"side": {
"fill": {
"color": {
"$value": {
"default": "#aea5d6",
"dark": "#23222b"
},
"$type": "color",
"$description": "Used for the side face of an isometric base platform."
}
}
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"label": {
"light": {
"text": {
"color": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the label text color on a light background color."
}
},
"button": {
"background": {
"color": {
"default": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the label remove button background on a light background color in the default state."
},
"hover": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the label remove button background on a light background color in the hover state."
}
}
},
"icon": {
"color": {
"default": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the label remove button icon on a light background color in the default state."
}
}
}
}
},
"dark": {
"text": {
"color": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the label text color on a dark background color."
}
},
"button": {
"background": {
"color": {
"default": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the label remove button background on a dark background color in the default state."
},
"hover": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the label remove button background on a dark background color in the hover state."
}
}
},
"icon": {
"color": {
"default": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the label remove button icon on a dark background color in the default state."
}
}
}
}
},
"scoped": {
"text": {
"color": {
"$value": {
"default": "{color.neutral.950}",
"dark": "{color.neutral.0}"
},
"$type": "color",
"$description": "Used for the scoped label text color."
}
},
"button": {
"background": {
"color": {
"hover": {
"$value": {
"default": "{color.neutral.950}",
"dark": "{color.neutral.0}"
},
"$type": "color",
"$description": "Used for the scoped label remove button background in the hover state."
}
}
},
"icon": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.950}",
"dark": "{color.neutral.0}"
},
"$type": "color",
"$description": "Used for the scoped label remove button icon in the default state."
},
"hover": {
"$value": {
"default": "{color.neutral.0}",
"dark": "{color.neutral.950}"
},
"$type": "color",
"$description": "Used for the scoped label remove button icon in the hover state."
}
}
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"link": {
"mention": {
"text": {
"color": {
"default": {
"$value": {
"default": "{color.blue.800}",
"dark": "{color.blue.100}"
},
"$type": "color",
"$description": "Used for the mention link text color."
},
"current": {
"$value": {
"default": "{color.orange.800}",
"dark": "{color.orange.100}"
},
"$type": "color",
"$description": "Used for the mention link text color when referencing the current user."
}
}
},
"background": {
"color": {
"default": {
"$value": {
"default": "{color.blue.100}",
"dark": "{color.blue.800}"
},
"$type": "color",
"$description": "Used for the mention link default background."
},
"current": {
"$value": {
"default": "{color.orange.100}",
"dark": "{color.orange.800}"
},
"$type": "color",
"$description": "Used for the mention link background when referencing the current user."
}
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"progress-bar": {
"indicator": {
"color": {
"default": {
"$value": "{status.info.icon.color}",
"$type": "color",
"$description": "Used for the indicator color for the primary progress-bar variant."
},
"success": {
"$value": "{status.success.icon.color}",
"$type": "color",
"$description": "Used for the indicator color for the success progress-bar variant."
},
"warning": {
"$value": "{status.warning.icon.color}",
"$type": "color",
"$description": "Used for the indicator color for the warning progress-bar variant."
},
"danger": {
"$value": "{status.danger.icon.color}",
"$type": "color",
"$description": "Used for the indicator color for the danger progress-bar variant."
}
}
},
"track": {
"color": {
"$value": {
"default": "{color.neutral.200}",
"dark": "{color.neutral.700}"
},
"$type": "color",
"$description": "Used for the track color for all progress-bar variants."
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"skeleton-loader": {
"background": {
"color": {
"$value": {
"default": "{color.neutral.100}",
"dark": "{color.neutral.800}"
},
"$type": "color",
"$description": "Used for the skeleton loader background color."
}
},
"shimmer": {
"color": {
"$value": {
"default": "{color.neutral.50}",
"dark": "{color.neutral.700}"
},
"$type": "color",
"$description": "Used for the animated shimmer effect in a skeleton loader."
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"spinner": {
"track": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.100}",
"dark": "{color.neutral.600}"
},
"$type": "color",
"$description": "Used for the static track (background) of a loading spinner."
},
"light": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Used for the static track (background) of a loading spinner on a dark background."
}
}
},
"segment": {
"color": {
"default": {
"$value": {
"default": "{color.neutral.700}",
"dark": "{color.neutral.100}"
},
"$type": "color",
"$description": "Used for the animated segment of a loading spinner."
},
"light": {
"$value": "{color.neutral.200}",
"$type": "color",
"$description": "Used for the animated segment of a loading spinner on a dark background."
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"table": {
"row": {
"background": {
"color": {
"hover": {
"$value": "{background.color.subtle}",
"$type": "color",
"$description": "Used for the background of a table row in hover state."
}
}
}
},
"sorting": {
"icon": {
"color": {
"$value": "{text.color.heading}",
"$type": "color",
"$description": "Used for the color of the sorting icons in the column headers."
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"tab": {
"selected": {
"indicator": {
"color": {
"default": {
"$value": {
"default": "{color.blue.500}",
"dark": "{color.blue.400}"
},
"$type": "color",
"$description": "Used for the selected indicator of a tab."
}
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"toggle": {
"switch": {
"icon": {
"color": {
"unchecked": {
"default": {
"$value": "{action.strong.neutral.background.color.default}",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the default state."
},
"hover": {
"$value": "{action.strong.neutral.background.color.hover}",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the hover state."
},
"focus": {
"$value": "{action.strong.neutral.background.color.focus}",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the focus state."
},
"active": {
"$value": "{action.strong.neutral.background.color.active}",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the active state."
}
},
"checked": {
"default": {
"$value": "{action.strong.confirm.background.color.default}",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the default state."
},
"hover": {
"$value": "{action.strong.confirm.background.color.hover}",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the hover state."
},
"focus": {
"$value": "{action.strong.confirm.background.color.focus}",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the focus state."
},
"active": {
"$value": "{action.strong.confirm.background.color.active}",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the active state."
}
},
"disabled": {
"$value": "{action.disabled.background.color}",
"$type": "color",
"$description": "Used for the icon color of a disabled toggle switch."
}
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"token-selector": {
"token-container": {
"token": {
"background": {
"color": {
"focus": {
"$value": {
"default": "{color.neutral.300}",
"dark": "{color.neutral.600}"
},
"$type": "color",
"$description": "Used for the background color of a token in a token-selector when it's token-container is in the focus state."
}
}
}
}
},
"$extensions": {
"com.gitlab.locked": true
}
},
"token": {
"foreground": {
"color": {
"$value": "{text.color.default}",
"$type": "color",
"$description": "Used for the token foreground color."
}
},
"background": {
"color": {
"$value": {
"default": "{color.neutral.100}",
"dark": "{color.neutral.800}"
},
"$type": "color",
"$description": "Used for the token background color."
}
},
"$extensions": {
"com.gitlab.locked": true
}
}
}