@gitlab/ui
Version:
GitLab UI Components
1,675 lines (1,674 loc) • 178 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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
}
},
"background": {
"color": {
"$value": {
"default": "{feedback.neutral.background.color}",
"dark": "{background.color.subtle}"
},
"$type": "color",
"$description": "Used for the background color of a neutral alert.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
},
"bottom": {
"color": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border bottom color of a neutral alert.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
}
}
},
"info": {
"title": {
"color": {
"$value": {
"default": "{text.color.heading}",
"dark": "{color.blue.300}"
},
"$type": "color",
"$description": "Used for the title color of an info alert.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
}
},
"background": {
"color": {
"$value": {
"default": "{feedback.info.background.color}",
"dark": "{background.color.subtle}"
},
"$type": "color",
"$description": "Used for the background color of an info alert.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
}
},
"border": {
"top": {
"color": {
"$value": {
"default": "{color.alpha.0}",
"dark": "{color.blue.400}"
},
"$type": "color",
"$description": "Used for the border color of an info alert.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
}
},
"background": {
"color": {
"$value": {
"default": "{feedback.success.background.color}",
"dark": "{background.color.subtle}"
},
"$type": "color",
"$description": "Used for the background color of a success alert.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
}
},
"border": {
"top": {
"color": {
"$value": {
"default": "{color.alpha.0}",
"dark": "{color.green.400}"
},
"$type": "color",
"$description": "Used for the border color of a success alert.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
},
"bottom": {
"color": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border bottom color of a success alert.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
}
}
},
"warning": {
"title": {
"color": {
"$value": {
"default": "{text.color.heading}",
"dark": "{color.orange.300}"
},
"$type": "color",
"$description": "Used for the title color of a warning alert.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
}
},
"background": {
"color": {
"$value": {
"default": "{feedback.warning.background.color}",
"dark": "{background.color.subtle}"
},
"$type": "color",
"$description": "Used for the background color of a warning alert.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
}
},
"border": {
"top": {
"color": {
"$value": {
"default": "{color.alpha.0}",
"dark": "{color.orange.400}"
},
"$type": "color",
"$description": "Used for the border color of a warning alert.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
},
"bottom": {
"color": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border bottom color of a warning alert.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
}
}
},
"danger": {
"title": {
"color": {
"$value": {
"default": "{text.color.heading}",
"dark": "{color.red.300}"
},
"$type": "color",
"$description": "Used for the title color of a danger alert.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
}
},
"background": {
"color": {
"$value": {
"default": "{feedback.danger.background.color}",
"dark": "{background.color.subtle}"
},
"$type": "color",
"$description": "Used for the background color of a danger alert.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
}
},
"border": {
"top": {
"color": {
"$value": {
"default": "{color.alpha.0}",
"dark": "{color.red.400}"
},
"$type": "color",
"$description": "Used for the border color of a danger alert.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
},
"bottom": {
"color": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border bottom color of a danger alert.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
}
}
},
"$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.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"purple": {
"$value": {
"default": "{color.purple.800}",
"dark": "{color.purple.200}"
},
"$type": "color",
"$description": "Purple text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"blue": {
"$value": {
"default": "{color.blue.800}",
"dark": "{color.blue.200}"
},
"$type": "color",
"$description": "Blue text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"green": {
"$value": {
"default": "{color.green.800}",
"dark": "{color.green.200}"
},
"$type": "color",
"$description": "Green text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"orange": {
"$value": {
"default": "{color.orange.800}",
"dark": "{color.orange.200}"
},
"$type": "color",
"$description": "Orange text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"neutral": {
"$value": {
"default": "{color.neutral.800}",
"dark": "{color.neutral.200}"
},
"$type": "color",
"$description": "Neutral text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
}
}
},
"background": {
"color": {
"red": {
"$value": "#fcb5aa3d",
"$type": "color",
"$description": "Red background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"purple": {
"$value": "#cbbbf23d",
"$type": "color",
"$description": "Purple background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"blue": {
"$value": "#9dc7f13d",
"$type": "color",
"$description": "Blue background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"green": {
"$value": "#91d4a83d",
"$type": "color",
"$description": "Green background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"orange": {
"$value": "#e9be743d",
"$type": "color",
"$description": "Orange background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"neutral": {
"$value": "#bfbfc33d",
"$type": "color",
"$description": "Neutral background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
}
}
}
},
"$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.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"hover": {
"$value": "{badge.muted.background.color.default}",
"$type": "color",
"$description": "Used for the background of a muted badge in the hover state.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"focus": {
"$value": "{badge.muted.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a muted badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"focus": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a muted badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"active": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a muted badge in the active state.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"focus": {
"$value": "{badge.muted.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a muted badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"focus": {
"$value": "{badge.muted.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a muted badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"hover": {
"$value": "{badge.neutral.background.color.default}",
"$type": "color",
"$description": "Used for the background of a neutral badge in the hover state.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"focus": {
"$value": "{badge.neutral.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a neutral badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"focus": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a neutral badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"active": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a neutral badge in the active state.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"focus": {
"$value": "{badge.neutral.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a neutral badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"focus": {
"$value": "{badge.neutral.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a neutral badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"hover": {
"$value": "{badge.info.background.color.default}",
"$type": "color",
"$description": "Used for the background of an informational badge in the hover state.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"focus": {
"$value": "{badge.info.background.color.hover}",
"$type": "color",
"$description": "Used for the background of an informational badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"focus": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of an informational badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"active": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of an informational badge in the active state.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"focus": {
"$value": "{badge.info.text.color.hover}",
"$type": "color",
"$description": "Used for the text of an informational badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"focus": {
"$value": "{badge.info.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of an informational badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"hover": {
"$value": "{badge.success.background.color.default}",
"$type": "color",
"$description": "Used for the background of a success badge in the hover state.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"focus": {
"$value": "{badge.success.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a success badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"focus": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a success badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"active": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a success badge in the active state.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"focus": {
"$value": "{badge.success.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a success badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"focus": {
"$value": "{badge.success.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a success badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"hover": {
"$value": "{badge.warning.background.color.default}",
"$type": "color",
"$description": "Used for the background of a warning badge in the hover state.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"focus": {
"$value": "{badge.warning.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a warning badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"focus": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a warning badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"active": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a warning badge in the active state.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"focus": {
"$value": "{badge.warning.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a warning badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"TEXT_FILL"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"focus": {
"$value": "{badge.warning.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a warning badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"hover": {
"$value": "{badge.danger.background.color.default}",
"$type": "color",
"$description": "Used for the background of a danger badge in the hover state.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"focus": {
"$value": "{badge.danger.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a danger badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
}
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"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.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"focus": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a danger badge in the focus state.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
},
"active": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a danger badge in the active state.",
"$extensions": {
"com.figma.scope": [
"STROKE_COLOR"
]
}
}
}
},
"text": {
"color": {
"default": {
"$value": {
"default": "{color.red.700}",
"dark": "{color.red.950}"