@gitlab/ui
Version:
GitLab UI Components
7,304 lines • 209 kB
JSON
{
"border-color-default": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the default border color.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"border-color-subtle": {
"$value": "{color-neutral-50}",
"$type": "color",
"$description": "Used for a subtle border in combination with the default background.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"border-color-strong": {
"$value": "{color-neutral-200}",
"$type": "color",
"$description": "Used for a distinct border that emphasizes an edge or boundaries.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"border-color-section": {
"$value": "{border-color-default}",
"$type": "color",
"$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"border-radius-default": {
"$value": "{border-radius-md}",
"$type": "dimension",
"$description": "",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"font-size-base": {
"$value": "{font-size-md}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
}
},
"font-weight-heading": {
"$value": "{font-weight-bold}",
"$type": "fontWeight",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
}
},
"heading-default-margin-top": {
"$value": "{spacing-scale-0}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
}
},
"heading-default-margin-bottom": {
"$value": "{spacing-scale-5}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"PARAGRAPH_SPACING"
]
}
},
"line-height-heading": {
"$value": 1.25,
"$type": "number",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
}
},
"shadow-color-default": {
"$value": "{color-alpha-dark-16}",
"$type": "color",
"$description": "Used for the default shadow color.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR"
]
}
},
"🔒/alert-border-radius": {
"$value": "{border-radius-lg}",
"$type": "dimension",
"$description": "Used for alert border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"🔒/alert-neutral-title-color": {
"$value": "{text-color-heading}",
"$type": "color",
"$description": "Used for the title color of a neutral alert.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/alert-neutral-background-color": {
"$value": "{feedback-neutral-background-color}",
"$type": "color",
"$description": "Used for the background color of a neutral alert.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/alert-neutral-border-top-color": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border center color of a neutral alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/alert-neutral-border-bottom-color": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border bottom color of a neutral alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/alert-info-title-color": {
"$value": "{text-color-heading}",
"$type": "color",
"$description": "Used for the title color of an info alert.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/alert-info-background-color": {
"$value": "{feedback-info-background-color}",
"$type": "color",
"$description": "Used for the background color of an info alert.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/alert-info-border-top-color": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border color of an info alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/alert-info-border-bottom-color": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border bottom color of an info alert."
},
"🔒/alert-success-title-color": {
"$value": "{text-color-heading}",
"$type": "color",
"$description": "Used for the title color of a success alert.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/alert-success-background-color": {
"$value": "{feedback-success-background-color}",
"$type": "color",
"$description": "Used for the background color of a success alert.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/alert-success-border-top-color": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border color of a success alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/alert-success-border-bottom-color": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border bottom color of a success alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/alert-warning-title-color": {
"$value": "{text-color-heading}",
"$type": "color",
"$description": "Used for the title color of a warning alert.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/alert-warning-background-color": {
"$value": "{feedback-warning-background-color}",
"$type": "color",
"$description": "Used for the background color of a warning alert.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/alert-warning-border-top-color": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border color of a warning alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/alert-warning-border-bottom-color": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border bottom color of a warning alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/alert-danger-title-color": {
"$value": "{text-color-heading}",
"$type": "color",
"$description": "Used for the title color of a danger alert.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/alert-danger-background-color": {
"$value": "{feedback-danger-background-color}",
"$type": "color",
"$description": "Used for the background color of a danger alert.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/alert-danger-border-top-color": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border color of a danger alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/alert-danger-border-bottom-color": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border bottom color of a danger alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/application-chrome-background-color": {
"$value": "{color-neutral-50}",
"$type": "color",
"$description": "Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/avatar-border-color-default": {
"$value": "{color-alpha-dark-8}",
"$type": "color",
"$description": "Used to define the edge of an avatar.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/avatar-border-color-hover": {
"$value": "{color-alpha-dark-24}",
"$type": "color",
"$description": "Used to increase the edge definition of an avatar in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/avatar-circle-border-radius-default": {
"$value": "{border-radius-full}",
"$type": "dimension",
"$description": "Border radius for cirlce avatars at all sizes.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"🔒/avatar-square-border-radius-default": {
"$value": "{border-radius-default}",
"$type": "dimension",
"$description": "Border radius for square avatars at smaller sizes (16px, 24px, 32px).",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"🔒/avatar-square-border-radius-lg": {
"$value": "{border-radius-lg}",
"$type": "dimension",
"$description": "Border radius for square avatars at larger sizes (48px, 64px, 96px).",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"🔒/avatar-fallback-text-color-red": {
"$value": "{color-red-800}",
"$type": "color",
"$description": "Red text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/avatar-fallback-text-color-purple": {
"$value": "{color-purple-800}",
"$type": "color",
"$description": "Purple text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/avatar-fallback-text-color-blue": {
"$value": "{color-blue-800}",
"$type": "color",
"$description": "Blue text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/avatar-fallback-text-color-green": {
"$value": "{color-green-800}",
"$type": "color",
"$description": "Green text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/avatar-fallback-text-color-orange": {
"$value": "{color-orange-800}",
"$type": "color",
"$description": "Orange text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/avatar-fallback-text-color-neutral": {
"$value": "{color-neutral-800}",
"$type": "color",
"$description": "Neutral text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/avatar-fallback-background-color-red": {
"$value": {
"colorSpace": "srgb",
"components": [
0.9882352941176471,
0.7098039215686275,
0.6666666666666666
],
"alpha": 0.23921568627450981
},
"$type": "color",
"$description": "Red background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/avatar-fallback-background-color-purple": {
"$value": {
"colorSpace": "srgb",
"components": [
0.796078431372549,
0.7333333333333333,
0.9490196078431372
],
"alpha": 0.23921568627450981
},
"$type": "color",
"$description": "Purple background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/avatar-fallback-background-color-blue": {
"$value": {
"colorSpace": "srgb",
"components": [
0.615686274509804,
0.7803921568627451,
0.9450980392156862
],
"alpha": 0.23921568627450981
},
"$type": "color",
"$description": "Blue background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/avatar-fallback-background-color-green": {
"$value": {
"colorSpace": "srgb",
"components": [
0.5686274509803921,
0.8313725490196079,
0.6588235294117647
],
"alpha": 0.23921568627450981
},
"$type": "color",
"$description": "Green background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/avatar-fallback-background-color-orange": {
"$value": {
"colorSpace": "srgb",
"components": [
0.9137254901960784,
0.7450980392156863,
0.4549019607843137
],
"alpha": 0.23921568627450981
},
"$type": "color",
"$description": "Orange background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/avatar-fallback-background-color-neutral": {
"$value": {
"colorSpace": "srgb",
"components": [
0.7490196078431373,
0.7490196078431373,
0.7647058823529411
],
"alpha": 0.23921568627450981
},
"$type": "color",
"$description": "Neutral background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-muted-background-color-active": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the background of a muted badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-muted-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.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-muted-border-color-hover": {
"$value": "{color-neutral-200}",
"$type": "color",
"$description": "Used for the border of a muted badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-muted-border-color-focus": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a muted badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-muted-border-color-active": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a muted badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-muted-text-color-default": {
"$value": "{color-neutral-600}",
"$type": "color",
"$description": "Used for the text of a muted badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-muted-text-color-hover": {
"$value": "{color-neutral-700}",
"$type": "color",
"$description": "Used for the text of a muted badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-muted-text-color-active": {
"$value": "{color-neutral-800}",
"$type": "color",
"$description": "Used for the text of a muted badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-muted-icon-color-default": {
"$value": "{color-neutral-500}",
"$type": "color",
"$description": "Used for the icon of a muted badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-muted-icon-color-hover": {
"$value": "{color-neutral-600}",
"$type": "color",
"$description": "Used for the icon of a muted badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-muted-icon-color-active": {
"$value": "{color-neutral-700}",
"$type": "color",
"$description": "Used for the icon of a muted badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-neutral-background-color-default": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the background of a neutral badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-neutral-background-color-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.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-neutral-background-color-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.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-neutral-background-color-active": {
"$value": "{color-neutral-200}",
"$type": "color",
"$description": "Used for the background of a neutral badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-neutral-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.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-neutral-border-color-hover": {
"$value": "{color-neutral-200}",
"$type": "color",
"$description": "Used for the border of a neutral badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-neutral-border-color-focus": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a neutral badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-neutral-border-color-active": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a neutral badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-neutral-text-color-default": {
"$value": "{color-neutral-700}",
"$type": "color",
"$description": "Used for the text of a neutral badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-neutral-text-color-hover": {
"$value": "{color-neutral-800}",
"$type": "color",
"$description": "Used for the text of a neutral badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-neutral-text-color-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.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-neutral-text-color-active": {
"$value": "{color-neutral-900}",
"$type": "color",
"$description": "Used for the text of a neutral badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-neutral-icon-color-default": {
"$value": "{color-neutral-500}",
"$type": "color",
"$description": "Used for the icon of a neutral badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-neutral-icon-color-hover": {
"$value": "{color-neutral-600}",
"$type": "color",
"$description": "Used for the icon of a neutral badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-neutral-icon-color-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.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-neutral-icon-color-active": {
"$value": "{color-neutral-700}",
"$type": "color",
"$description": "Used for the icon of a neutral badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-info-background-color-default": {
"$value": "{color-blue-100}",
"$type": "color",
"$description": "Used for the background of an informational badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-info-background-color-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.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-info-background-color-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.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-info-background-color-active": {
"$value": "{color-blue-200}",
"$type": "color",
"$description": "Used for the background of an informational badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-info-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.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-info-border-color-hover": {
"$value": "{color-blue-200}",
"$type": "color",
"$description": "Used for the border of an informational badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-info-border-color-focus": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of an informational badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-info-border-color-active": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of an informational badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-info-text-color-default": {
"$value": "{color-blue-700}",
"$type": "color",
"$description": "Used for the text of an informational badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-info-text-color-hover": {
"$value": "{color-blue-800}",
"$type": "color",
"$description": "Used for the text of an informational badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-info-text-color-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.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-info-text-color-active": {
"$value": "{color-blue-900}",
"$type": "color",
"$description": "Used for the text of an informational badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-info-icon-color-default": {
"$value": "{color-blue-500}",
"$type": "color",
"$description": "Used for the icon of an informational badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-info-icon-color-hover": {
"$value": "{color-blue-600}",
"$type": "color",
"$description": "Used for the icon of an informational badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-info-icon-color-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.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-info-icon-color-active": {
"$value": "{color-blue-700}",
"$type": "color",
"$description": "Used for the icon of an informational badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-success-background-color-default": {
"$value": "{color-green-100}",
"$type": "color",
"$description": "Used for the background of a success badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-success-background-color-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.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-success-background-color-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.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-success-background-color-active": {
"$value": "{color-green-200}",
"$type": "color",
"$description": "Used for the background of a success badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-success-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.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-success-border-color-hover": {
"$value": "{color-green-200}",
"$type": "color",
"$description": "Used for the border of a success badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-success-border-color-focus": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a success badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-success-border-color-active": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a success badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-success-text-color-default": {
"$value": "{color-green-700}",
"$type": "color",
"$description": "Used for the text of a success badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-success-text-color-hover": {
"$value": "{color-green-800}",
"$type": "color",
"$description": "Used for the text of a success badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-success-text-color-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.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-success-text-color-active": {
"$value": "{color-green-900}",
"$type": "color",
"$description": "Used for the text of a success badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-success-icon-color-default": {
"$value": "{color-green-500}",
"$type": "color",
"$description": "Used for the icon of a success badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-success-icon-color-hover": {
"$value": "{color-green-600}",
"$type": "color",
"$description": "Used for the icon of a success badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-success-icon-color-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.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-success-icon-color-active": {
"$value": "{color-green-700}",
"$type": "color",
"$description": "Used for the icon of a success badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-warning-background-color-default": {
"$value": "{color-orange-100}",
"$type": "color",
"$description": "Used for the background of a warning badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-warning-background-color-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.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-warning-background-color-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.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-warning-background-color-active": {
"$value": "{color-orange-200}",
"$type": "color",
"$description": "Used for the background of a warning badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-warning-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.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-warning-border-color-hover": {
"$value": "{color-orange-200}",
"$type": "color",
"$description": "Used for the border of a warning badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-warning-border-color-focus": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a warning badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-warning-border-color-active": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a warning badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-warning-text-color-default": {
"$value": "{color-orange-700}",
"$type": "color",
"$description": "Used for the text of a warning badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-warning-text-color-hover": {
"$value": "{color-orange-800}",
"$type": "color",
"$description": "Used for the text of a warning badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-warning-text-color-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.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-warning-text-color-active": {
"$value": "{color-orange-900}",
"$type": "color",
"$description": "Used for the text of a warning badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-warning-icon-color-default": {
"$value": "{color-orange-500}",
"$type": "color",
"$description": "Used for the icon of a warning badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-warning-icon-color-hover": {
"$value": "{color-orange-600}",
"$type": "color",
"$description": "Used for the icon of a warning badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-warning-icon-color-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.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-warning-icon-color-active": {
"$value": "{color-orange-700}",
"$type": "color",
"$description": "Used for the icon of a warning badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-danger-background-color-default": {
"$value": "{color-red-100}",
"$type": "color",
"$description": "Used for the background of a danger badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-danger-background-color-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.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-danger-background-color-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.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-danger-background-color-active": {
"$value": "{color-red-200}",
"$type": "color",
"$description": "Used for the background of a danger badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-danger-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.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-danger-border-color-hover": {
"$value": "{color-red-200}",
"$type": "color",
"$description": "Used for the border of a danger badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-danger-border-color-focus": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a danger badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-danger-border-color-active": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a danger badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-danger-text-color-default": {
"$value": "{color-red-700}",
"$type": "color",
"$description": "Used for the text of a danger badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-danger-text-color-hover": {
"$value": "{color-red-800}",
"$type": "color",
"$description": "Used for the text of a danger badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-danger-text-color-focus": {
"$value": "{🔒/badge-danger-text-color-hover}",
"$type": "color",
"$description": "Used for the text of a danger badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-danger-text-color-active": {
"$value": "{color-red-900}",
"$type": "color",
"$description": "Used for the text of a danger badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-danger-icon-color-default": {
"$value": "{color-red-700}",
"$type": "color",
"$description": "Used for the icon of a danger badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-danger-icon-color-hover": {
"$value": "{color-red-800}",
"$type": "color",
"$description": "Used for the icon of a danger badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-danger-icon-color-focus": {
"$value": "{🔒/badge-danger-icon-color-hover}",
"$type": "color",
"$description": "Used for the icon of a danger badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-danger-icon-color-active": {
"$value": "{color-red-900}",
"$type": "color",
"$description": "Used for the icon of a danger badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-tier-background-color-default": {
"$value": "{color-purple-100}",
"$type": "color",
"$description": "Used for the background of a tier related badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-tier-background-color-hover": {
"$value": "{🔒/badge-tier-background-color-default}",
"$type": "color",
"$description": "Used for the background of a tier related badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-tier-background-color-focus": {
"$value": "{🔒/badge-tier-background-color-hover}",
"$type": "color",
"$description": "Used for the background of a tier related badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-tier-background-color-active": {
"$value": "{color-purple-200}",
"$type": "color",
"$description": "Used for the background of a tier related badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/badge-tier-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.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-tier-border-color-hover": {
"$value": "{color-purple-200}",
"$type": "color",
"$description": "Used for the border of a tier related badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-tier-border-color-focus": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a tier related badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-tier-border-color-active": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a tier related badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/badge-tier-text-color-default": {
"$value": "{color-purple-700}",
"$type": "color",
"$description": "Used for the text of a tier related badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-tier-text-color-hover": {
"$value": "{color-purple-800}",
"$type": "color",
"$description": "Used for the text of a tier related badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-tier-text-color-focus": {
"$value": "{🔒/badge-tier-text-color-hover}",
"$type": "color",
"$description": "Used for the text of a tier related badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-tier-text-color-active": {
"$value": "{color-purple-900}",
"$type": "color",
"$description": "Used for the text of a tier related badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/badge-tier-icon-color-default": {
"$value": "{color-purple-700}",
"$type": "color",
"$description": "Used for the icon of a tier related badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-tier-icon-color-hover": {
"$value": "{color-purple-800}",
"$type": "color",
"$description": "Used for the icon of a tier related badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-tier-icon-color-focus": {
"$value": "{🔒/badge-tier-icon-color-hover}",
"$type": "color",
"$description": "Used for the icon of a tier related badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/badge-tier-icon-color-active": {
"$value": "{color-purple-900}",
"$type": "color",
"$description": "Used for the icon of a tier related badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/banner-intro-border-color": {
"$value": "{color-blue-200}",
"$type": "color",
"$description": "Used for the border of an info banner.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/banner-promo-background-color": {
"$value": "{color-purple-50}",
"$type": "color",
"$description": "Used for the background of a promo banner.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/banner-promo-border-color": {
"$value": "{color-purple-200}",
"$type": "color",
"$description": "Used for the border of a promo banner.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/breadcrumb-separator-color": {
"$value": "{color-neutral-400}",
"$type": "color",
"$description": "Used for the breadcrumb level separator.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/broadcast-banner-background-color-blue": {
"$value": {
"colorSpace": "srgb",
"components": [
0.13725490196078433,
0.3176470588235294,
0.5019607843137255
],
"alpha": 1,
"hex": "#235180"
},
"$type": "color",
"$description": "Used for the background for the blue banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/broadcast-banner-background-color-dark": {
"$value": "{color-neutral-500}",
"$type": "color",
"$description": "Used for the background for the dark banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/broadcast-banner-background-color-green": {
"$value": {
"colorSpace": "srgb",
"components": [
0.10588235294117647,
0.396078431372549,
0.24705882352941178
],
"alpha": 1,
"hex": "#1b653f"
},
"$type": "color",
"$description": "Used for the background for the green banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/broadcast-banner-background-color-indigo": {
"$value": {
"colorSpace": "srgb",
"components": [
0.2549019607843137,
0.2549019607843137,
0.6235294117647059
],
"alpha": 1,
"hex": "#41419f"
},
"$type": "color",
"$description": "Used for the background for the indigo banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/broadcast-banner-background-color-light": {
"$value": "{color-neutral-50}",
"$type": "color",
"$description": "Used for the background for the light banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/broadcast-banner-background-color-lightblue": {
"$value": {
"colorSpace": "srgb",
"components": [
0.28627450980392155,
0.4666666666666667,
0.6470588235294118
],
"alpha": 1,
"hex": "#4977a5"
},
"$type": "color",
"$description": "Used for the background for the lightblue banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/broadcast-banner-background-color-lightgreen": {
"$value": {
"colorSpace": "srgb",
"components": [
0.18823529411764706,
0.5098039215686274,
0.34509803921568627
],
"alpha": 1,
"hex": "#308258"
},
"$type": "color",
"$description": "Used for the background for the lightgreen banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/broadcast-banner-background-color-lightindigo": {
"$value": {
"colorSpace": "srgb",
"components": [
0.4,
0.4,
0.7686274509803922
],
"alpha": 1,
"hex": "#6666c4"
},
"$type": "color",
"$description": "Used for the background for the lightindigo banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/broadcast-banner-background-color-lightred": {
"$value": {
"colorSpace": "srgb",
"components": [
0.6784313725490196,
0.2901960784313726,
0.23137254901960785
],
"alpha": 1,
"hex": "#ad4a3b"
},
"$type": "color",
"$description": "Used for the background for the lightred banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/broadcast-banner-background-color-red": {
"$value": {
"colorSpace": "srgb",
"components": [
0.5607843137254902,
0.12941176470588237,
0.06274509803921569
],
"alpha": 1,
"hex": "#8f2110"
},
"$type": "color",
"$description": "Used for the background for the red banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/broadcast-banner-border-color-blue": {
"$value": {
"colorSpace": "srgb",
"components": [
0.043137254901960784,
0.14901960784313725,
0.25098039215686274
],
"alpha": 1,
"hex": "#0b2640"
},
"$type": "color",
"$description": "Used for the border for the blue banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/broadcast-banner-border-color-dark": {
"$value": "{color-neutral-700}",
"$type": "color",
"$description": "Used for the border for the dark banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/broadcast-banner-border-color-green": {
"$value": {
"colorSpace": "srgb",
"components": [
0.054901960784313725,
0.2627450980392157,
0.1568627450980392
],
"alpha": 1,
"hex": "#0e4328"
},
"$type": "color",
"$description": "Used for the border for the green banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/broadcast-banner-border-color-indigo": {
"$value": {
"colorSpace": "srgb",
"components": [
0.13333333333333333,
0.13333333333333333,
0.3803921568627451
],
"alpha": 1,
"hex": "#222261"
},
"$type": "color",
"$description": "Used for the border for the indigo banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/broadcast-banner-border-color-light": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the border for the light banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/broadcast-banner-border-color-lightblue": {
"$value": {
"colorSpace": "srgb",
"components": [
0.13725490196078433,
0.3176470588235294,
0.5019607843137255
],
"alpha": 1,
"hex": "#235180"
},
"$type": "color",
"$description": "Used for the border for the lightblue banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/broadcast-banner-border-color-lightgreen": {
"$value": {
"colorSpace": "srgb",
"components": [
0.10588235294117647,
0.396078431372549,
0.24705882352941178
],
"alpha": 1,
"hex": "#1b653f"
},
"$type": "color",
"$description": "Used for the border for the lightgreen banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/broadcast-banner-border-color-lightindigo": {
"$value": {
"colorSpace": "srgb",
"components": [
0.2549019607843137,
0.2549019607843137,
0.6235294117647059
],
"alpha": 1,
"hex": "#41419f"
},
"$type": "color",
"$description": "Used for the border for the lightindigo banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/broadcast-banner-border-color-lightred": {
"$value": {
"colorSpace": "srgb",
"components": [
0.5607843137254902,
0.12941176470588237,
0.06274509803921569
],
"alpha": 1,
"hex": "#8f2110"
},
"$type": "color",
"$description": "Used for the border for the lightred banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/broadcast-banner-border-color-red": {
"$value": {
"colorSpace": "srgb",
"components": [
0.34509803921568627,
0.050980392156862744,
0.00784313725490196
],
"alpha": 1,
"hex": "#580d02"
},
"$type": "color",
"$description": "Used for the border for the red banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/broadcast-banner-border-radius": {
"$value": "{border-radius-default}",
"$type": "dimension",
"$description": "Used for broadcast banner border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"🔒/broadcast-banner-icon-color-blue": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the icon for the blue banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-icon-color-dark": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the icon for the dark banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-icon-color-green": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the icon for the green banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-icon-color-indigo": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the icon for the indigo banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-icon-color-light": {
"$value": "{color-neutral-900}",
"$type": "color",
"$description": "Used for the icon for the light banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-icon-color-lightblue": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the icon for the lightblue banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-icon-color-lightgreen": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the icon for the lightgreen banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-icon-color-lightindigo": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the icon for the lightindigo banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-icon-color-lightred": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the icon for the lightred banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-icon-color-red": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the icon for the red banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-text-color-blue": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the text for the blue banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-text-color-dark": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the text for the dark banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-text-color-green": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the text for the green banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-text-color-indigo": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the text for the indigo banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-text-color-light": {
"$value": "{color-neutral-900}",
"$type": "color",
"$description": "Used for the text for the light banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-text-color-lightblue": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the text for the lightblue banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-text-color-lightgreen": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the text for the lightgreen banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-text-color-lightindigo": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the text for the lightindigo banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-text-color-lightred": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the text for the lightred banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/broadcast-banner-text-color-red": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the text for the red banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/button-border-radius": {
"$value": "{action-border-radius}",
"$type": "dimension",
"$description": "Used for button border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"🔒/button-default-primary-foreground-color-default": {
"$value": "{color-neutral-800}",
"$type": "color",
"$description": "Used for the foreground of a default primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-default-primary-foreground-color-hover": {
"$value": "{🔒/button-default-primary-foreground-color-default}",
"$type": "color",
"$description": "Used for the foreground of a default primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-default-primary-foreground-color-focus": {
"$value": "{🔒/button-default-primary-foreground-color-default}",
"$type": "color",
"$description": "Used for the foreground of a default primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-default-primary-foreground-color-active": {
"$value": "{🔒/button-default-primary-foreground-color-default}",
"$type": "color",
"$description": "Used for the foreground of a default primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-default-primary-background-color-default": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the background of an default primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-default-primary-background-color-hover": {
"$value": "{color-neutral-50}",
"$type": "color",
"$description": "Used for the background of an default primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-default-primary-background-color-focus": {
"$value": "{🔒/button-default-primary-background-color-hover}",
"$type": "color",
"$description": "Used for the background of an default primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-default-primary-background-color-active": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the background of an default primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-default-primary-border-color-default": {
"$value": "{color-neutral-200}",
"$type": "color",
"$description": "Used for the border of an default primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-default-primary-border-color-hover": {
"$value": "{color-neutral-400}",
"$type": "color",
"$description": "Used for the border of an default primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-default-primary-border-color-focus": {
"$value": "{🔒/button-default-primary-border-color-hover}",
"$type": "color",
"$description": "Used for the border of an default primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-default-primary-border-color-active": {
"$value": "{color-neutral-600}",
"$type": "color",
"$description": "Used for the border of an default primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-default-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-default-tertiary-foreground-color-hover": {
"$value": "{action-neutral-foreground-color-hover}",
"$type": "color",
"$description": "Used for the foreground of a default borderless, tertiary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-default-tertiary-foreground-color-focus": {
"$value": "{action-neutral-foreground-color-focus}",
"$type": "color",
"$description": "Used for the foreground of a default borderless, tertiary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-default-tertiary-foreground-color-active": {
"$value": "{action-neutral-foreground-color-active}",
"$type": "color",
"$description": "Used for the foreground of a default borderless, tertiary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-default-tertiary-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.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-default-tertiary-background-color-hover": {
"$value": "{action-neutral-background-color-hover}",
"$type": "color",
"$description": "Used for the background of a default borderless, tertiary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-default-tertiary-background-color-focus": {
"$value": "{action-neutral-background-color-focus}",
"$type": "color",
"$description": "Used for the background of a default borderless, tertiary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-default-tertiary-background-color-active": {
"$value": "{action-neutral-background-color-active}",
"$type": "color",
"$description": "Used for the background of a default borderless, tertiary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-default-tertiary-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.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-default-tertiary-border-color-hover": {
"$value": "{action-neutral-border-color-hover}",
"$type": "color",
"$description": "Used for the border of a default borderless, tertiary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-default-tertiary-border-color-focus": {
"$value": "{action-neutral-border-color-focus}",
"$type": "color",
"$description": "Used for the border of a default borderless, tertiary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-default-tertiary-border-color-active": {
"$value": "{action-neutral-border-color-active}",
"$type": "color",
"$description": "Used for the border of a default borderless, tertiary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-confirm-primary-foreground-color-default": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-confirm-primary-foreground-color-hover": {
"$value": "{🔒/button-confirm-primary-foreground-color-default}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-confirm-primary-foreground-color-focus": {
"$value": "{🔒/button-confirm-primary-foreground-color-hover}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-confirm-primary-foreground-color-active": {
"$value": "{🔒/button-confirm-primary-foreground-color-focus}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-confirm-primary-background-color-default": {
"$value": "{color-neutral-800}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-confirm-primary-background-color-hover": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-confirm-primary-background-color-focus": {
"$value": "{🔒/button-confirm-primary-background-color-hover}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-confirm-primary-background-color-active": {
"$value": "{color-neutral-1000}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-confirm-primary-border-color-default": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-confirm-primary-border-color-hover": {
"$value": "{🔒/button-confirm-primary-border-color-default}",
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-confirm-primary-border-color-focus": {
"$value": "{🔒/button-confirm-primary-border-color-default}",
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-confirm-primary-border-color-active": {
"$value": "{🔒/button-confirm-primary-border-color-default}",
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-confirm-secondary-foreground-color-default": {
"$value": "{color-neutral-800}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-confirm-secondary-foreground-color-hover": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-confirm-secondary-foreground-color-focus": {
"$value": "{🔒/button-confirm-secondary-foreground-color-hover}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-confirm-secondary-foreground-color-active": {
"$value": "{color-neutral-1000}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-confirm-secondary-background-color-default": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-confirm-secondary-background-color-hover": {
"$value": "{color-neutral-50}",
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-confirm-secondary-background-color-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.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-confirm-secondary-background-color-active": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-confirm-secondary-border-color-default": {
"$value": "{color-neutral-800}",
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-confirm-secondary-border-color-hover": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-confirm-secondary-border-color-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.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-confirm-secondary-border-color-active": {
"$value": "{color-neutral-1000}",
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-confirm-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-confirm-tertiary-foreground-color-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-confirm-tertiary-foreground-color-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-confirm-tertiary-foreground-color-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-confirm-tertiary-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.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-confirm-tertiary-background-color-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.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-confirm-tertiary-background-color-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.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-confirm-tertiary-background-color-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.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-confirm-tertiary-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.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-confirm-tertiary-border-color-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.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-confirm-tertiary-border-color-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.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-confirm-tertiary-border-color-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.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-danger-primary-foreground-color-default": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-danger-primary-foreground-color-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-danger-primary-foreground-color-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-danger-primary-foreground-color-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-danger-primary-background-color-default": {
"$value": "{color-red-500}",
"$type": "color",
"$description": "Used for the background of a danger (destructive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-danger-primary-background-color-hover": {
"$value": "{color-red-600}",
"$type": "color",
"$description": "Used for the background of a danger (destructive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-danger-primary-background-color-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.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-danger-primary-background-color-active": {
"$value": "{color-red-800}",
"$type": "color",
"$description": "Used for the background of a danger (destructive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-danger-primary-border-color-default": {
"$value": "{color-red-600}",
"$type": "color",
"$description": "Used for the border of a danger (destructive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-danger-primary-border-color-hover": {
"$value": "{color-red-800}",
"$type": "color",
"$description": "Used for the border of a danger (destructive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-danger-primary-border-color-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.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-danger-primary-border-color-active": {
"$value": "{color-red-900}",
"$type": "color",
"$description": "Used for the border of a danger (destructive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-danger-secondary-foreground-color-default": {
"$value": "{color-red-500}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-danger-secondary-foreground-color-hover": {
"$value": "{color-red-700}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-danger-secondary-foreground-color-focus": {
"$value": "{🔒/button-danger-secondary-foreground-color-hover}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-danger-secondary-foreground-color-active": {
"$value": "{color-red-900}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-danger-secondary-background-color-default": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-danger-secondary-background-color-hover": {
"$value": "{color-red-50}",
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-danger-secondary-background-color-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.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-danger-secondary-background-color-active": {
"$value": "{color-red-100}",
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-danger-secondary-border-color-default": {
"$value": "{color-red-500}",
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-danger-secondary-border-color-hover": {
"$value": "{color-red-700}",
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-danger-secondary-border-color-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.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-danger-secondary-border-color-active": {
"$value": "{color-red-900}",
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-danger-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-danger-tertiary-foreground-color-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-danger-tertiary-foreground-color-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-danger-tertiary-foreground-color-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-danger-tertiary-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.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-danger-tertiary-background-color-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.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-danger-tertiary-background-color-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.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-danger-tertiary-background-color-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.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-danger-tertiary-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.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-danger-tertiary-border-color-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.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-danger-tertiary-border-color-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.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-danger-tertiary-border-color-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.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-link-border-radius": {
"$value": "{border-radius-md}",
"$type": "dimension",
"$description": "Used for link button border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"🔒/button-link-text-color-default": {
"$value": "{text-color-link}",
"$type": "color",
"$description": "Used for the text of a link button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-link-text-color-hover": {
"$value": "{🔒/button-link-text-color-default}",
"$type": "color",
"$description": "Used for the text of a link button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-link-text-color-focus": {
"$value": "{🔒/button-link-text-color-default}",
"$type": "color",
"$description": "Used for the text of a link button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-link-text-color-active": {
"$value": "{🔒/button-link-text-color-default}",
"$type": "color",
"$description": "Used for the text of a link button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-selected-foreground-color-default": {
"$value": "{🔒/button-default-primary-foreground-color-default}",
"$type": "color",
"$description": "Used for the foreground of a selected button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-selected-foreground-color-hover": {
"$value": "{🔒/button-default-primary-foreground-color-hover}",
"$type": "color",
"$description": "Used for the foreground of a selected button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-selected-foreground-color-focus": {
"$value": "{🔒/button-default-primary-foreground-color-focus}",
"$type": "color",
"$description": "Used for the foreground of a selected button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-selected-foreground-color-active": {
"$value": "{🔒/button-default-primary-foreground-color-active}",
"$type": "color",
"$description": "Used for the foreground of a selected button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-selected-background-color-default": {
"$value": "{color-neutral-50}",
"$type": "color",
"$description": "Used for the background of a selected button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-selected-background-color-hover": {
"$value": "{🔒/button-default-primary-background-color-hover}",
"$type": "color",
"$description": "Used for the background of a selected button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-selected-background-color-focus": {
"$value": "{🔒/button-default-primary-background-color-focus}",
"$type": "color",
"$description": "Used for the background of a selected button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-selected-background-color-active": {
"$value": "{🔒/button-default-primary-background-color-active}",
"$type": "color",
"$description": "Used for the background of a selected button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-selected-border-color-default": {
"$value": "{color-neutral-300}",
"$type": "color",
"$description": "Used for the border of a selected button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-selected-border-color-hover": {
"$value": "{color-neutral-400}",
"$type": "color",
"$description": "Used for the border of a selected button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-selected-border-color-focus": {
"$value": "{🔒/button-selected-border-color-hover}",
"$type": "color",
"$description": "Used for the border of a selected button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-selected-border-color-active": {
"$value": "{color-neutral-600}",
"$type": "color",
"$description": "Used for the border of a selected button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-disabled-foreground-color": {
"$value": "{color-neutral-500}",
"$type": "color",
"$description": "Used for the foreground of a disabled button.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/button-disabled-background-color": {
"$value": "{color-neutral-10}",
"$type": "color",
"$description": "Used for the background of a disabled button.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/button-disabled-border-color": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the border of a disabled button.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/button-count-background-color": {
"$value": "{color-alpha-dark-8}",
"$type": "color",
"$description": "Used for the background of a button count element.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/card-border-radius": {
"$value": "{border-radius-xl}",
"$type": "dimension",
"$description": "Used for card border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"🔒/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.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
}
},
"🔒/chart-axis-line-color": {
"$value": "{color-neutral-200}",
"$type": "color",
"$description": "Used in charts for axis line color.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
}
},
"🔒/chart-axis-text-color": {
"$value": "{text-color-subtle}",
"$type": "color",
"$description": "Used in charts for the text color of axis titles and labels.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
}
},
"🔒/chart-threshold-area-color": {
"$value": {
"colorSpace": "srgb",
"components": [
0.8666666666666667,
0.16862745098039217,
0.054901960784313725
],
"alpha": 0.1
},
"$type": "color",
"$description": "Used in charts to delineate a threshold area in a chart.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
}
},
"🔒/chart-threshold-line-color": {
"$value": "{color-red-500}",
"$type": "color",
"$description": "Used in charts to divide a threshold area in a chart from other data.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
}
},
"🔒/chart-zoom-filler-color": {
"$value": "{color-alpha-dark-8}",
"$type": "color",
"$description": "Used in charts for the overlay color when zooming in on a specific area of data.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
}
},
"🔒/chart-zoom-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.figma.scopes": [
"ALL_SCOPES"
]
}
},
"🔒/datepicker-background-color": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the background color of datepicker.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/datepicker-date-text-color-selected": {
"$value": "{control-indicator-color-selected}",
"$type": "color",
"$description": "Used for the datepicker date text color state indicators.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/drawer-border-radius": {
"$value": "{border-radius-2xl}",
"$type": "dimension",
"$description": "Used for drawer border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"🔒/dropdown-background-color": {
"$value": "{background-color-overlap}",
"$type": "color",
"$description": "Used for the background of a dropdown.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/dropdown-border-radius": {
"$value": "{border-radius-lg}",
"$type": "dimension",
"$description": "Used for the border radius of a dropdown.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"🔒/dropdown-divider-color": {
"$value": "{border-color-default}",
"$type": "color",
"$description": "Used for the divider of a dropdown.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR",
"STROKE_COLOR"
]
}
},
"🔒/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.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/dropdown-option-text-color-hover": {
"$value": "{action-neutral-foreground-color-hover}",
"$type": "color",
"$description": "Used for the text of a dropdown option in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/dropdown-option-text-color-focus": {
"$value": "{action-neutral-foreground-color-focus}",
"$type": "color",
"$description": "Used for the text of a dropdown option in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/dropdown-option-text-color-active": {
"$value": "{action-neutral-foreground-color-active}",
"$type": "color",
"$description": "Used for the text of a dropdown option in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/dropdown-option-text-color-disabled": {
"$value": "{action-disabled-foreground-color}",
"$type": "color",
"$description": "Used for the text of a dropdown option in the disabled state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/dropdown-option-indicator-color-selected-default": {
"$value": "{control-background-color-selected-default}",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/dropdown-option-indicator-color-selected-hover": {
"$value": "{control-background-color-selected-hover}",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/dropdown-option-indicator-color-selected-focus": {
"$value": "{control-background-color-selected-focus}",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/dropdown-option-indicator-color-selected-active": {
"$value": "{control-background-color-selected-focus}",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/dropdown-option-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.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/dropdown-option-background-color-unselected-hover": {
"$value": "{action-neutral-background-color-hover}",
"$type": "color",
"$description": "Used for the background of an unselected dropdown option in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/dropdown-option-background-color-unselected-focus": {
"$value": "{action-neutral-background-color-focus}",
"$type": "color",
"$description": "Used for the background of an unselected dropdown option in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/dropdown-option-background-color-unselected-active": {
"$value": "{action-neutral-background-color-active}",
"$type": "color",
"$description": "Used for the background of an unselected dropdown option in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/dropdown-option-background-color-selected-default": {
"$value": "{color-neutral-50}",
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/dropdown-option-background-color-selected-hover": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/dropdown-option-background-color-selected-focus": {
"$value": "{🔒/dropdown-option-background-color-selected-hover}",
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/dropdown-option-background-color-selected-active": {
"$value": "{color-neutral-200}",
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/dropdown-search-background-color": {
"$value": "{color-alpha-dark-2}",
"$type": "color",
"$description": "Used for the background of a search input in a dropdown listbox.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/filtered-search-token-type-background-color-default": {
"$value": "{color-neutral-50}",
"$type": "color",
"$description": "Used for the filtered search type token background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/filtered-search-token-type-background-color-hover": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the filtered search type token background color in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/filtered-search-token-data-background-color-default": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the filtered search data background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/filtered-search-token-data-background-color-hover": {
"$value": "{color-neutral-200}",
"$type": "color",
"$description": "Used for the filtered search data token background color in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/filtered-search-token-operator-background-color-default": {
"$value": "{color-neutral-50}",
"$type": "color",
"$description": "Used for the filtered search operator background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/filtered-search-token-operator-background-color-hover": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the filtered search operator token background color in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/illustration-stroke-color-default": {
"$value": {
"colorSpace": "srgb",
"components": [
0.09019607843137255,
0.07450980392156863,
0.12941176470588237
],
"alpha": 1,
"hex": "#171321"
},
"$type": "color",
"$description": "Default stroke color to define shape and provide essential detail.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/illustration-stroke-width-default": {
"$value": "2",
"$type": "dimension",
"$description": "Default stroke width to define shape and provide essential detail.",
"$extensions": {
"com.figma.scopes": [
"STROKE_FLOAT"
]
}
},
"🔒/illustration-fill-color-default": {
"$value": {
"colorSpace": "srgb",
"components": [
1,
1,
1
],
"alpha": 1,
"hex": "#fff"
},
"$type": "color",
"$description": "Default fill color for an element where specific meaning or emphasis is not required.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-status-fill-color-neutral": {
"$value": {
"colorSpace": "srgb",
"components": [
0.6823529411764706,
0.6470588235294118,
0.8392156862745098
],
"alpha": 1,
"hex": "#aea5d6"
},
"$type": "color",
"$description": "Used as a fill to convey a concept which is neither positive or negative.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-status-fill-color-success": {
"$value": {
"colorSpace": "srgb",
"components": [
0.43529411764705883,
0.8549019607843137,
0.788235294117647
],
"alpha": 1,
"hex": "#6fdac9"
},
"$type": "color",
"$description": "Used as a fill to convey a success or active concept, has a positive connotation.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-status-fill-color-warning": {
"$value": {
"colorSpace": "srgb",
"components": [
0.9882352941176471,
0.6392156862745098,
0.14901960784313725
],
"alpha": 1,
"hex": "#fca326"
},
"$type": "color",
"$description": "Used as a fill to convey a caution or warning concept, has a slightly negative connotation.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-status-fill-color-danger": {
"$value": {
"colorSpace": "srgb",
"components": [
1,
0.615686274509804,
0.45098039215686275
],
"alpha": 1,
"hex": "#ff9d73"
},
"$type": "color",
"$description": "Used as a fill to convey a critical or danger concept, has a negative connotation.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-accent-stroke-color-orange": {
"$value": {
"colorSpace": "srgb",
"components": [
1,
0.615686274509804,
0.45098039215686275
],
"alpha": 1,
"hex": "#ff9d73"
},
"$type": "color",
"$description": "Used for orange accent stroke detail on an object or attention-drawing element.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/illustration-accent-stroke-color-teal": {
"$value": {
"colorSpace": "srgb",
"components": [
0.43529411764705883,
0.8549019607843137,
0.788235294117647
],
"alpha": 1,
"hex": "#6fdac9"
},
"$type": "color",
"$description": "Used for teal accent stroke detail on an object or attention-drawing element.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/illustration-accent-stroke-color-strong": {
"$value": {
"colorSpace": "srgb",
"components": [
0.6823529411764706,
0.6470588235294118,
0.8392156862745098
],
"alpha": 1,
"hex": "#aea5d6"
},
"$type": "color",
"$description": "Used for dark accent stroke detail on an object or attention-drawing element.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/illustration-accent-fill-color-subtle": {
"$value": {
"colorSpace": "srgb",
"components": [
0.8156862745098039,
0.7725490196078432,
0.8862745098039215
],
"alpha": 1,
"hex": "#d0c5e2"
},
"$type": "color",
"$description": "Used to add depth to a secondary element and supporting surface.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-accent-fill-color-strong": {
"$value": {
"colorSpace": "srgb",
"components": [
0.6823529411764706,
0.6470588235294118,
0.8392156862745098
],
"alpha": 1,
"hex": "#aea5d6"
},
"$type": "color",
"$description": "Used for an element requiring visual emphasis without competing with primary content or status indicators.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-accent-fill-color-orange": {
"$value": {
"colorSpace": "srgb",
"components": [
1,
0.615686274509804,
0.45098039215686275
],
"alpha": 1,
"hex": "#ff9d73"
},
"$type": "color",
"$description": "Used to add orange to a secondary element and supporting surface.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-accent-fill-color-teal": {
"$value": {
"colorSpace": "srgb",
"components": [
0.43529411764705883,
0.8549019607843137,
0.788235294117647
],
"alpha": 1,
"hex": "#6fdac9"
},
"$type": "color",
"$description": "Used to add teal to a secondary element and supporting surface.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-base-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
0.9058823529411765,
0.8941176470588236,
0.9490196078431372
],
"alpha": 1,
"hex": "#e7e4f2"
},
"$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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-isometric-stroke-color-default": {
"$value": {
"colorSpace": "srgb",
"components": [
0.09019607843137255,
0.07450980392156863,
0.12941176470588237
],
"alpha": 1,
"hex": "#171321"
},
"$type": "color",
"$description": "Default stroke color to define shape and provide essential detail in isometric illustration.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"🔒/illustration-isometric-stroke-width-default": {
"$value": "2",
"$type": "dimension",
"$description": "Default stroke width to define shape and provide essential detail in isometric illustration.",
"$extensions": {
"com.figma.scopes": [
"STROKE_FLOAT"
]
}
},
"🔒/illustration-isometric-glyph-top-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
0.7725490196078432,
0.9568627450980393,
0.9254901960784314
],
"alpha": 1,
"hex": "#c5f4ec"
},
"$type": "color",
"$description": "Used for the top face of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-isometric-glyph-front-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
1,
1,
1
],
"alpha": 1,
"hex": "#fff"
},
"$type": "color",
"$description": "Used for the front face of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-isometric-glyph-side-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
0.43529411764705883,
0.8549019607843137,
0.788235294117647
],
"alpha": 1,
"hex": "#6fdac9"
},
"$type": "color",
"$description": "Used for the side face of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-isometric-glyph-shadow-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
0.06274509803921569,
0.6941176470588235,
0.6941176470588235
],
"alpha": 1,
"hex": "#10b1b1"
},
"$type": "color",
"$description": "Used for the shadow of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR",
"SHAPE_FILL"
]
}
},
"🔒/illustration-isometric-object-top-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
1,
0.615686274509804,
0.45098039215686275
],
"alpha": 1,
"hex": "#ff9d73"
},
"$type": "color",
"$description": "Used for the top face of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-isometric-object-front-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
1,
0.7607843137254902,
0.6588235294117647
],
"alpha": 1,
"hex": "#ffc2a8"
},
"$type": "color",
"$description": "Used for the front face of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-isometric-object-side-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
1,
0.4823529411764706,
0.25882352941176473
],
"alpha": 1,
"hex": "#ff7b42"
},
"$type": "color",
"$description": "Used for the side face of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-isometric-object-highlight-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
1,
1,
1
],
"alpha": 1,
"hex": "#fff"
},
"$type": "color",
"$description": "Used for the face of an isometric object or symbol that requires maximum distinction from other elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-isometric-object-shadow-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
0.8862745098039215,
0.2627450980392157,
0.1607843137254902
],
"alpha": 1,
"hex": "#e24329"
},
"$type": "color",
"$description": "Used for the shadow of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR",
"SHAPE_FILL"
]
}
},
"🔒/illustration-isometric-accent-top-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
0.27058823529411763,
0.25882352941176473,
0.30196078431372547
],
"alpha": 1,
"hex": "#45424d"
},
"$type": "color",
"$description": "Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-isometric-accent-front-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
0.4549019607843137,
0.44313725490196076,
0.47843137254901963
],
"alpha": 1,
"hex": "#74717a"
},
"$type": "color",
"$description": "Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-isometric-accent-side-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
0.16862745098039217,
0.1568627450980392,
0.2196078431372549
],
"alpha": 1,
"hex": "#2b2838"
},
"$type": "color",
"$description": "Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-isometric-base-top-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
0.9058823529411765,
0.8941176470588236,
0.9490196078431372
],
"alpha": 1,
"hex": "#e7e4f2"
},
"$type": "color",
"$description": "Used for the top surface of an isometric base platform.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-isometric-base-front-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
0.8352941176470589,
0.8156862745098039,
0.9098039215686274
],
"alpha": 1,
"hex": "#d5d0e8"
},
"$type": "color",
"$description": "Used for the front face of an isometric base platform.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/illustration-isometric-base-side-fill-color": {
"$value": {
"colorSpace": "srgb",
"components": [
0.6823529411764706,
0.6470588235294118,
0.8392156862745098
],
"alpha": 1,
"hex": "#aea5d6"
},
"$type": "color",
"$description": "Used for the side face of an isometric base platform.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/label-light-text-color": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for the label text color on a light background color.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/label-light-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.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/label-light-button-background-color-hover": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for the label remove button background on a light background color in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/label-light-button-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/label-dark-text-color": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the label text color on a dark background color.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/label-dark-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.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/label-dark-button-background-color-hover": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the label remove button background on a dark background color in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/label-dark-button-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/label-scoped-text-color": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for the scoped label text color.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/label-scoped-button-background-color-hover": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for the scoped label remove button background in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/label-scoped-button-icon-color-default": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for the scoped label remove button icon in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/label-scoped-button-icon-color-hover": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the scoped label remove button icon in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/link-mention-text-color-default": {
"$value": "{color-blue-800}",
"$type": "color",
"$description": "Used for the mention link text color.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/link-mention-text-color-current": {
"$value": "{color-orange-800}",
"$type": "color",
"$description": "Used for the mention link text color when referencing the current user.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/link-mention-background-color-default": {
"$value": "{color-blue-100}",
"$type": "color",
"$description": "Used for the mention link default background.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/link-mention-background-color-current": {
"$value": "{color-orange-100}",
"$type": "color",
"$description": "Used for the mention link background when referencing the current user.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/modal-border-radius": {
"$value": "{border-radius-2xl}",
"$type": "dimension",
"$description": "Used for modal border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"🔒/nav-item-border-radius": {
"$value": "{action-border-radius}",
"$type": "dimension",
"$description": "Used for the border radius of a navigation item",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"🔒/nav-item-font-size": {
"$value": "{font-size-300}",
"$type": "dimension",
"$description": "Used for the font size of a navigation item",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
}
},
"🔒/nav-item-font-weight": {
"$value": 425,
"$type": "fontWeight",
"$description": "Used for the font weight of a navigation item",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
}
},
"🔒/nav-item-foreground-color-default": {
"$value": "{color-neutral-600}",
"$type": "color",
"$description": "Used for the foreground of a default navigation item in the default state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/nav-item-foreground-color-hover": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for the foreground of a default navigation item in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/nav-item-foreground-color-focus": {
"$value": "{🔒/nav-item-foreground-color-hover}",
"$type": "color",
"$description": "Used for the foreground of a default navigation item in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/nav-item-foreground-color-active": {
"$value": "{🔒/nav-item-foreground-color-focus}",
"$type": "color",
"$description": "Used for the foreground of a default navigation item in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/nav-item-background-color-default": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the background of a default navigation item in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/nav-item-background-color-hover": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the background of a default navigation item in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/nav-item-background-color-focus": {
"$value": "{🔒/nav-item-background-color-hover}",
"$type": "color",
"$description": "Used for the background of a default navigation item in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/nav-item-background-color-active": {
"$value": "{color-neutral-200}",
"$type": "color",
"$description": "Used for the background of a default navigation item in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/nav-item-selected-font-weight": {
"$value": "{font-weight-bold}",
"$type": "fontWeight",
"$description": "Used for the font weight of a selected navigation item.",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
}
},
"🔒/nav-item-selected-foreground-color-default": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for the foreground of a selected navigation item in the default state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/nav-item-selected-foreground-color-hover": {
"$value": "{🔒/nav-item-foreground-color-hover}",
"$type": "color",
"$description": "Used for the foreground of a selected navigation item in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/nav-item-selected-foreground-color-focus": {
"$value": "{🔒/nav-item-foreground-color-focus}",
"$type": "color",
"$description": "Used for the foreground of a selected navigation item in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/nav-item-selected-foreground-color-active": {
"$value": "{🔒/nav-item-foreground-color-active}",
"$type": "color",
"$description": "Used for the foreground of a selected navigation item in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"🔒/nav-item-selected-background-color-default": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the background of a selected navigation item in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/nav-item-selected-background-color-hover": {
"$value": "{🔒/nav-item-background-color-hover}",
"$type": "color",
"$description": "Used for the background of a selected navigation item in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/nav-item-selected-background-color-focus": {
"$value": "{🔒/nav-item-background-color-focus}",
"$type": "color",
"$description": "Used for the background of a selected navigation item in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/nav-item-selected-background-color-active": {
"$value": "{🔒/nav-item-background-color-active}",
"$type": "color",
"$description": "Used for the background of a selected navigation item in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/progress-bar-indicator-color-default": {
"$value": "{status-info-icon-color}",
"$type": "color",
"$description": "Used for the indicator color for the primary progress-bar variant.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/progress-bar-indicator-color-success": {
"$value": "{status-success-icon-color}",
"$type": "color",
"$description": "Used for the indicator color for the success progress-bar variant.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/progress-bar-indicator-color-warning": {
"$value": "{status-warning-icon-color}",
"$type": "color",
"$description": "Used for the indicator color for the warning progress-bar variant.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/progress-bar-indicator-color-danger": {
"$value": "{status-danger-icon-color}",
"$type": "color",
"$description": "Used for the indicator color for the danger progress-bar variant.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/progress-bar-track-color": {
"$value": "{color-neutral-200}",
"$type": "color",
"$description": "Used for the track color for all progress-bar variants.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/skeleton-loader-background-color": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the skeleton loader background color.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/skeleton-loader-shimmer-color": {
"$value": "{color-neutral-50}",
"$type": "color",
"$description": "Used for the animated shimmer effect in a skeleton loader.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/spinner-track-color-default": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the static track (background) of a loading spinner.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/spinner-track-color-light": {
"$value": "{color-neutral-800}",
"$type": "color",
"$description": "Used for the static track (background) of a loading spinner on a dark background.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/spinner-segment-color-default": {
"$value": "{color-neutral-700}",
"$type": "color",
"$description": "Used for the animated segment of a loading spinner.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/spinner-segment-color-light": {
"$value": "{color-neutral-200}",
"$type": "color",
"$description": "Used for the animated segment of a loading spinner on a dark background.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/table-row-background-color-hover": {
"$value": "{highlight-target-background-color}",
"$type": "color",
"$description": "Used for the background of a table row in hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/table-sorting-icon-color": {
"$value": "{text-color-heading}",
"$type": "color",
"$description": "Used for the color of the sorting icons in the column headers.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/tab-selected-indicator-color-default": {
"$value": "{action-selected-border-color-active}",
"$type": "color",
"$description": "Used for the selected indicator of a tab.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/toggle-switch-track-color-unchecked-default": {
"$value": "{control-border-color-default}",
"$type": "color",
"$description": "Used for the track color of an unchecked toggle switch in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-track-color-unchecked-hover": {
"$value": "{🔒/toggle-switch-track-color-unchecked-default}",
"$type": "color",
"$description": "Used for the track color of an unchecked toggle switch in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-track-color-unchecked-focus": {
"$value": "{🔒/toggle-switch-track-color-unchecked-hover}",
"$type": "color",
"$description": "Used for the track color of an unchecked toggle switch in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-track-color-unchecked-active": {
"$value": "{🔒/toggle-switch-track-color-unchecked-focus}",
"$type": "color",
"$description": "Used for the track color of an unchecked toggle switch in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-track-color-checked-default": {
"$value": "{color-neutral-800}",
"$type": "color",
"$description": "Used for the track color of a checked toggle switch in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-track-color-checked-hover": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for the track color of a checked toggle switch in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-track-color-checked-focus": {
"$value": "{🔒/toggle-switch-track-color-checked-hover}",
"$type": "color",
"$description": "Used for the track color of a checked toggle switch in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-track-color-checked-active": {
"$value": "{color-neutral-1000}",
"$type": "color",
"$description": "Used for the track color of a checked toggle switch in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-background-color-unchecked-default": {
"$value": "{control-indicator-color-selected}",
"$type": "color",
"$description": "Used for the background color of the unchecked toggle switch thumb in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-background-color-unchecked-hover": {
"$value": "{🔒/toggle-switch-background-color-unchecked-default}",
"$type": "color",
"$description": "Used for the background color of the unchecked toggle switch thumb in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-background-color-unchecked-focus": {
"$value": "{🔒/toggle-switch-background-color-unchecked-default}",
"$type": "color",
"$description": "Used for the background color of the unchecked toggle switch thumb in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-background-color-unchecked-active": {
"$value": "{🔒/toggle-switch-background-color-unchecked-default}",
"$type": "color",
"$description": "Used for the background color of the unchecked toggle switch thumb in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-background-color-checked-default": {
"$value": "{action-strong-confirm-foreground-color-default}",
"$type": "color",
"$description": "Used for the background color of the checked toggle switch thumb in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-background-color-checked-hover": {
"$value": "{action-strong-confirm-foreground-color-hover}",
"$type": "color",
"$description": "Used for the background color of the checked toggle switch thumb in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-background-color-checked-focus": {
"$value": "{action-strong-confirm-foreground-color-focus}",
"$type": "color",
"$description": "Used for the background color of the checked toggle switch thumb in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-background-color-checked-active": {
"$value": "{action-strong-confirm-foreground-color-active}",
"$type": "color",
"$description": "Used for the background color of the checked toggle switch thumb in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/toggle-switch-background-color-disabled": {
"$value": "{action-disabled-foreground-color}",
"$type": "color",
"$description": "Used for the background color of the toggle switch thumb in the disabled state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
}
},
"🔒/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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/toggle-switch-icon-color-unchecked-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/toggle-switch-icon-color-unchecked-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/toggle-switch-icon-color-unchecked-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/toggle-switch-icon-color-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/toggle-switch-icon-color-checked-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/toggle-switch-icon-color-checked-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/toggle-switch-icon-color-checked-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.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/toggle-switch-icon-color-disabled": {
"$value": "{action-disabled-background-color}",
"$type": "color",
"$description": "Used for the icon color of a disabled toggle switch.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"🔒/token-selector-token-container-token-background-color-focus": {
"$value": "{color-neutral-300}",
"$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.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/token-border-radius": {
"$value": "{border-radius-default}",
"$type": "dimension",
"$description": "Used for token border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"🔒/token-foreground-color": {
"$value": "{text-color-default}",
"$type": "color",
"$description": "Used for the token foreground color.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"🔒/token-background-color": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the token background color.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"🔒/tooltip-text-color-subtle": {
"$value": "{color-neutral-200}",
"$type": "color",
"$description": "Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"action-border-radius": {
"$value": "{border-radius-lg}",
"$type": "dimension",
"$description": "Used for the border radius of an action.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"action-disabled-foreground-color": {
"$value": "{color-neutral-400}",
"$type": "color",
"$description": "Used for the foreground of a disabled action.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-disabled-background-color": {
"$value": "{color-neutral-50}",
"$type": "color",
"$description": "Used for the background of a disabled action.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-disabled-border-color": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the border of a disabled action.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-selected-foreground-color-default": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the foreground of a selected action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-selected-foreground-color-hover": {
"$value": "{action-selected-foreground-color-default}",
"$type": "color",
"$description": "Used for the foreground of a selected action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-selected-foreground-color-focus": {
"$value": "{action-selected-foreground-color-hover}",
"$type": "color",
"$description": "Used for the foreground of a selected action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-selected-foreground-color-active": {
"$value": "{action-selected-foreground-color-focus}",
"$type": "color",
"$description": "Used for the foreground of a selected action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-selected-background-color-default": {
"$value": "{color-neutral-800}",
"$type": "color",
"$description": "Used for the background of a selected action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-selected-background-color-hover": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for the background of a selected action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-selected-background-color-focus": {
"$value": "{action-selected-background-color-hover}",
"$type": "color",
"$description": "Used for the background of a selected action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-selected-background-color-active": {
"$value": "{color-neutral-1000}",
"$type": "color",
"$description": "Used for the background of a selected action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-selected-border-color-default": {
"$value": "{action-selected-background-color-default}",
"$type": "color",
"$description": "Used for the border of a selected action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-selected-border-color-hover": {
"$value": "{action-selected-background-color-hover}",
"$type": "color",
"$description": "Used for the border of a selected action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-selected-border-color-focus": {
"$value": "{action-selected-background-color-focus}",
"$type": "color",
"$description": "Used for the border of a selected action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-selected-border-color-active": {
"$value": "{action-selected-background-color-active}",
"$type": "color",
"$description": "Used for the border of a selected action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-neutral-foreground-color-default": {
"$value": "{color-neutral-900}",
"$type": "color",
"$description": "Used for the foreground of a neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-neutral-foreground-color-hover": {
"$value": "{action-neutral-foreground-color-default}",
"$type": "color",
"$description": "Used for the foreground of a neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-neutral-foreground-color-focus": {
"$value": "{action-neutral-foreground-color-default}",
"$type": "color",
"$description": "Used for the foreground of a neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-neutral-foreground-color-active": {
"$value": "{action-neutral-foreground-color-default}",
"$type": "color",
"$description": "Used for the foreground of a neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-neutral-background-color-default": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the background of a neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-neutral-background-color-hover": {
"$value": "{color-alpha-dark-6}",
"$type": "color",
"$description": "Used for the background of a neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-neutral-background-color-focus": {
"$value": "{action-neutral-background-color-hover}",
"$type": "color",
"$description": "Used for the background of a neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-neutral-background-color-active": {
"$value": "{color-alpha-dark-16}",
"$type": "color",
"$description": "Used for the background of a neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-neutral-border-color-default": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-neutral-border-color-hover": {
"$value": "{action-neutral-border-color-default}",
"$type": "color",
"$description": "Used for the border of a neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-neutral-border-color-focus": {
"$value": "{action-neutral-border-color-default}",
"$type": "color",
"$description": "Used for the border of a neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-neutral-border-color-active": {
"$value": "{action-neutral-border-color-default}",
"$type": "color",
"$description": "Used for the border of a neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-confirm-foreground-color-default": {
"$value": "{color-neutral-800}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-confirm-foreground-color-hover": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-confirm-foreground-color-focus": {
"$value": "{action-confirm-foreground-color-hover}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-confirm-foreground-color-active": {
"$value": "{color-neutral-1000}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-confirm-background-color-default": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-confirm-background-color-hover": {
"$value": "{color-alpha-dark-6}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-confirm-background-color-focus": {
"$value": "{action-confirm-background-color-hover}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-confirm-background-color-active": {
"$value": "{color-alpha-dark-16}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-confirm-border-color-default": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a confirm action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-confirm-border-color-hover": {
"$value": "{action-confirm-border-color-default}",
"$type": "color",
"$description": "Used for the border of a confirm action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-confirm-border-color-focus": {
"$value": "{action-confirm-border-color-default}",
"$type": "color",
"$description": "Used for the border of a confirm action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-confirm-border-color-active": {
"$value": "{action-confirm-border-color-default}",
"$type": "color",
"$description": "Used for the border of a confirm action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-danger-foreground-color-default": {
"$value": "{color-red-500}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-danger-foreground-color-hover": {
"$value": "{color-red-700}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-danger-foreground-color-focus": {
"$value": "{action-danger-foreground-color-hover}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-danger-foreground-color-active": {
"$value": "{color-red-900}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-danger-background-color-default": {
"$value": {
"colorSpace": "srgb",
"components": [
0.9607843137254902,
0.4980392156862745,
0.4235294117647059
],
"alpha": 0
},
"$type": "color",
"$description": "Used for the background of a danger (destructive) action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-danger-background-color-hover": {
"$value": {
"colorSpace": "srgb",
"components": [
0.9607843137254902,
0.4980392156862745,
0.4235294117647059
],
"alpha": 0.16
},
"$type": "color",
"$description": "Used for the background of a danger (destructive) action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-danger-background-color-focus": {
"$value": "{action-danger-background-color-hover}",
"$type": "color",
"$description": "Used for the background of a danger (destructive) action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-danger-background-color-active": {
"$value": {
"colorSpace": "srgb",
"components": [
0.6823529411764706,
0.09411764705882353,
0
],
"alpha": 0.24
},
"$type": "color",
"$description": "Used for the background of a danger (destructive) action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-danger-border-color-default": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a danger action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-danger-border-color-hover": {
"$value": "{action-danger-border-color-default}",
"$type": "color",
"$description": "Used for the border of a danger action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-danger-border-color-focus": {
"$value": "{action-danger-border-color-default}",
"$type": "color",
"$description": "Used for the border of a danger action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-danger-border-color-active": {
"$value": "{action-danger-border-color-default}",
"$type": "color",
"$description": "Used for the border of a danger action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-strong-confirm-background-color-default": {
"$value": "{color-blue-500}",
"$type": "color",
"$description": "Used for the background of a strong confirm action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-strong-confirm-background-color-hover": {
"$value": "{color-blue-600}",
"$type": "color",
"$description": "Used for the background of a strong confirm action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-strong-confirm-background-color-focus": {
"$value": "{action-strong-confirm-background-color-hover}",
"$type": "color",
"$description": "Used for the background of a strong confirm action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-strong-confirm-background-color-active": {
"$value": "{color-blue-700}",
"$type": "color",
"$description": "Used for the background of a strong confirm action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-strong-confirm-foreground-color-default": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the foreground of a strong confirm action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-strong-confirm-foreground-color-hover": {
"$value": "{action-strong-confirm-foreground-color-default}",
"$type": "color",
"$description": "Used for the foreground of a strong confirm action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-strong-confirm-foreground-color-focus": {
"$value": "{action-strong-confirm-foreground-color-hover}",
"$type": "color",
"$description": "Used for the foreground of a strong confirm action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-strong-confirm-foreground-color-active": {
"$value": "{action-strong-confirm-foreground-color-focus}",
"$type": "color",
"$description": "Used for the foreground of a strong confirm action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-strong-confirm-border-color-default": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a strong confirm action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-strong-confirm-border-color-hover": {
"$value": "{action-strong-confirm-border-color-default}",
"$type": "color",
"$description": "Used for the border of a strong confirm action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-strong-confirm-border-color-focus": {
"$value": "{action-strong-confirm-border-color-hover}",
"$type": "color",
"$description": "Used for the border of a strong confirm action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-strong-confirm-border-color-active": {
"$value": "{action-strong-confirm-border-color-focus}",
"$type": "color",
"$description": "Used for the border of a strong confirm action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-strong-neutral-background-color-default": {
"$value": "{color-neutral-600}",
"$type": "color",
"$description": "Used for the background of a strong neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-strong-neutral-background-color-hover": {
"$value": "{color-neutral-700}",
"$type": "color",
"$description": "Used for the background of a strong neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-strong-neutral-background-color-focus": {
"$value": "{action-strong-neutral-background-color-hover}",
"$type": "color",
"$description": "Used for the background of a strong neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-strong-neutral-background-color-active": {
"$value": "{color-neutral-800}",
"$type": "color",
"$description": "Used for the background of a strong neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"action-strong-neutral-foreground-color-default": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the foreground of a strong neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-strong-neutral-foreground-color-hover": {
"$value": "{action-strong-neutral-foreground-color-default}",
"$type": "color",
"$description": "Used for the foreground of a strong neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-strong-neutral-foreground-color-focus": {
"$value": "{action-strong-neutral-foreground-color-hover}",
"$type": "color",
"$description": "Used for the foreground of a strong neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-strong-neutral-foreground-color-active": {
"$value": "{action-strong-neutral-foreground-color-focus}",
"$type": "color",
"$description": "Used for the foreground of a strong neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"action-strong-neutral-border-color-default": {
"$value": "{color-alpha-0}",
"$type": "color",
"$description": "Used for the border of a strong neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-strong-neutral-border-color-hover": {
"$value": "{action-strong-neutral-border-color-default}",
"$type": "color",
"$description": "Used for the border of a strong neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-strong-neutral-border-color-focus": {
"$value": "{action-strong-neutral-border-color-hover}",
"$type": "color",
"$description": "Used for the border of a strong neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"action-strong-neutral-border-color-active": {
"$value": "{action-strong-neutral-border-color-focus}",
"$type": "color",
"$description": "Used for the border of a strong neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"background-color-default": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for the default background color.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"background-color-subtle": {
"$value": "{color-neutral-10}",
"$type": "color",
"$description": "Used to slightly differentiate the background from the default.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"background-color-strong": {
"$value": "{color-neutral-50}",
"$type": "color",
"$description": "Used to make the background easily stand out from the default.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"background-color-disabled": {
"$value": "{color-neutral-10}",
"$type": "color",
"$description": "Used to identify a disabled section.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"background-color-overlap": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"background-color-section": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"background-color-overlay": {
"$value": "{color-alpha-dark-24}",
"$type": "color",
"$description": "Used for an overlay that covers other content.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"control-background-color-default": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for form control (input, radio button, checkbox, textarea) default background.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"control-background-color-disabled": {
"$value": "{color-neutral-10}",
"$type": "color",
"$description": "Used for disabled form control (checkbox, input, radio button, textarea) background.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"control-background-color-concatenation": {
"$value": "{color-neutral-10}",
"$type": "color",
"$description": "Used for the background of static content that prepends or appends a text input.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"control-background-color-readonly": {
"$value": "{color-alpha-dark-2}",
"$type": "color",
"$description": "Used for the background of static content that prepends or appends a text input.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"control-background-color-selected-default": {
"$value": "{color-neutral-800}",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"control-background-color-selected-hover": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"control-background-color-selected-focus": {
"$value": "{control-background-color-selected-hover}",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on focus.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"control-border-color-default": {
"$value": "{color-neutral-400}",
"$type": "color",
"$description": "Used for form control (input, radio button, checkbox, textarea) default border.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"control-border-color-hover": {
"$value": "{color-neutral-600}",
"$type": "color",
"$description": "Used for form control (input, radio button, checkbox, textarea) border on hover.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"control-border-color-focus": {
"$value": "{color-neutral-900}",
"$type": "color",
"$description": "Used for form control (input, radio button, checkbox, textarea) border on focus.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"control-border-color-disabled": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for disabled form control (input, radio button, checkbox, textarea) border.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"control-border-color-error": {
"$value": "{feedback-danger-border-color}",
"$type": "color",
"$description": "Used for invalid form control (input, textarea) border.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"control-border-color-selected-default": {
"$value": "{control-background-color-selected-default}",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"control-border-color-selected-hover": {
"$value": "{control-background-color-selected-hover}",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"control-border-color-selected-focus": {
"$value": "{control-background-color-selected-focus}",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"control-border-radius": {
"$value": "{border-radius-lg}",
"$type": "dimension",
"$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"control-text-color-error": {
"$value": "{text-color-danger}",
"$type": "color",
"$description": "Used for the helper text when the input is invalid.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"control-text-color-valid": {
"$value": "{text-color-success}",
"$type": "color",
"$description": "Used for the helper text when the input is valid.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"control-placeholder-color": {
"$value": "{color-neutral-500}",
"$type": "color",
"$description": "Used for placeholder text within inputs.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"control-indicator-color-selected": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for checkbox and radio button state indicators.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"control-indicator-color-disabled": {
"$value": "{color-neutral-500}",
"$type": "color",
"$description": "Used for disabled checkbox and radio button state indicators.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"feedback-border-radius": {
"$value": "{border-radius-lg}",
"$type": "dimension",
"$description": "Used for the border radius of a feedback element.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
}
},
"feedback-strong-background-color": {
"$value": "{color-neutral-800}",
"$type": "color",
"$description": "Used for a background associated with strong feedback like a tooltip or toast message.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"feedback-strong-border-color": {
"$value": "{color-neutral-1000}",
"$type": "color",
"$description": "Used for the border associated with strong feedback.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"feedback-strong-text-color": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for text on a strong feedback background.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"feedback-strong-icon-color": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for an icon on a strong feedback background.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"feedback-strong-link-color": {
"$value": "{color-blue-300}",
"$type": "color",
"$description": "Used for a link on a strong feedback background.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"feedback-neutral-background-color": {
"$value": "{color-neutral-50}",
"$type": "color",
"$description": "Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"feedback-neutral-border-color": {
"$value": "{color-neutral-200}",
"$type": "color",
"$description": "Used for the border of a neutral feedback item when there isn't a specific meaning or urgency.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"feedback-neutral-text-color": {
"$value": "{color-neutral-700}",
"$type": "color",
"$description": "Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"feedback-neutral-icon-color": {
"$value": "{color-neutral-600}",
"$type": "color",
"$description": "Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"feedback-info-background-color": {
"$value": "{color-blue-50}",
"$type": "color",
"$description": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"feedback-info-border-color": {
"$value": "{color-blue-200}",
"$type": "color",
"$description": "Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"feedback-info-text-color": {
"$value": "{color-blue-700}",
"$type": "color",
"$description": "Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"feedback-info-icon-color": {
"$value": "{color-blue-600}",
"$type": "color",
"$description": "Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"feedback-success-background-color": {
"$value": "{color-green-50}",
"$type": "color",
"$description": "Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"feedback-success-border-color": {
"$value": "{color-green-200}",
"$type": "color",
"$description": "Used for the border of a success feedback item when confirming the successful completion of a user-initiated action.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"feedback-success-text-color": {
"$value": "{color-green-700}",
"$type": "color",
"$description": "Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"feedback-success-icon-color": {
"$value": "{color-green-600}",
"$type": "color",
"$description": "Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"feedback-warning-background-color": {
"$value": "{color-orange-50}",
"$type": "color",
"$description": "Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"feedback-warning-border-color": {
"$value": "{color-orange-200}",
"$type": "color",
"$description": "Used for the border of a warning feedback item when notifying about a potential issue or sensitive information.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"feedback-warning-text-color": {
"$value": "{color-orange-700}",
"$type": "color",
"$description": "Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"feedback-warning-icon-color": {
"$value": "{color-orange-600}",
"$type": "color",
"$description": "Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"feedback-danger-background-color": {
"$value": "{color-red-50}",
"$type": "color",
"$description": "Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"feedback-danger-border-color": {
"$value": "{color-red-500}",
"$type": "color",
"$description": "Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"feedback-danger-text-color": {
"$value": "{color-red-700}",
"$type": "color",
"$description": "Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"feedback-danger-icon-color": {
"$value": "{color-red-600}",
"$type": "color",
"$description": "Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"feedback-brand-background-color": {
"$value": "{color-purple-50}",
"$type": "color",
"$description": "Used for the background of a brand-related feedback item when highlighting information that pertains to GitLab.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"feedback-brand-border-color": {
"$value": "{color-purple-200}",
"$type": "color",
"$description": "Used for the border of a brand-related feedback item when highlighting information that pertains to GitLab.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"feedback-brand-text-color": {
"$value": "{color-purple-700}",
"$type": "color",
"$description": "Used for the text of a brand-related feedback item when highlighting information that pertains to GitLab.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"feedback-brand-icon-color": {
"$value": "{color-purple-600}",
"$type": "color",
"$description": "Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"focus-ring-outer-color": {
"$value": "{color-blue-500}",
"$type": "color",
"$description": "Used for the outer color portion of the focus ring.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"focus-ring-inner-color": {
"$value": "{background-color-default}",
"$type": "color",
"$description": "Used for the inner neutral portion of the focus ring.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"highlight-match-background-color": {
"$value": "{color-orange-500}",
"$type": "color",
"$description": "Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"highlight-match-text-color": {
"$value": "{color-neutral-0}",
"$type": "color",
"$description": "Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"highlight-target-background-color": {
"$value": "{color-blue-50}",
"$type": "color",
"$description": "Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"highlight-target-border-color": {
"$value": "{color-blue-200}",
"$type": "color",
"$description": "Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"icon-color-default": {
"$value": "{text-color-default}",
"$type": "color",
"$description": "Used for the default icon color. Can be paired with default text.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"icon-color-subtle": {
"$value": "{text-color-subtle}",
"$type": "color",
"$description": "Used for a static or decorational icon. Can be paired with subtle text.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"icon-color-strong": {
"$value": "{text-color-strong}",
"$type": "color",
"$description": "Used for an icon with the highest contrast.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"icon-color-disabled": {
"$value": "{text-color-disabled}",
"$type": "color",
"$description": "Used for an icon within a disabled section.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"icon-color-link": {
"$value": "{text-color-link}",
"$type": "color",
"$description": "Used for an icon within a link.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"icon-color-info": {
"$value": "{color-blue-700}",
"$type": "color",
"$description": "Used for an icon associated with information or help.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"icon-color-warning": {
"$value": "{text-color-warning}",
"$type": "color",
"$description": "Used for an icon associated with a warning.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"icon-color-danger": {
"$value": "{text-color-danger}",
"$type": "color",
"$description": "Used for an icon associated with an error or danger.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"icon-color-success": {
"$value": "{text-color-success}",
"$type": "color",
"$description": "Used for an icon associated with success or validity.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"letter-spacing-heading": {
"$value": "-0.01em",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LETTER_SPACING"
]
}
},
"status-neutral-background-color": {
"$value": "{color-neutral-100}",
"$type": "color",
"$description": "Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"status-neutral-text-color": {
"$value": "{color-neutral-700}",
"$type": "color",
"$description": "Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"status-neutral-icon-color": {
"$value": "{color-neutral-500}",
"$type": "color",
"$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"status-info-background-color": {
"$value": "{color-blue-100}",
"$type": "color",
"$description": "Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"status-info-text-color": {
"$value": "{color-blue-700}",
"$type": "color",
"$description": "Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"status-info-icon-color": {
"$value": "{color-blue-500}",
"$type": "color",
"$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"status-success-background-color": {
"$value": "{color-green-100}",
"$type": "color",
"$description": "Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"status-success-text-color": {
"$value": "{color-green-700}",
"$type": "color",
"$description": "Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"status-success-icon-color": {
"$value": "{color-green-500}",
"$type": "color",
"$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"status-warning-background-color": {
"$value": "{color-orange-100}",
"$type": "color",
"$description": "Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"status-warning-text-color": {
"$value": "{color-orange-700}",
"$type": "color",
"$description": "Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"status-warning-icon-color": {
"$value": "{color-orange-500}",
"$type": "color",
"$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"status-danger-background-color": {
"$value": "{color-red-100}",
"$type": "color",
"$description": "Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"status-danger-text-color": {
"$value": "{color-red-700}",
"$type": "color",
"$description": "Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"status-danger-icon-color": {
"$value": "{color-red-500}",
"$type": "color",
"$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"status-brand-background-color": {
"$value": "{color-purple-100}",
"$type": "color",
"$description": "Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
}
},
"status-brand-text-color": {
"$value": "{color-purple-700}",
"$type": "color",
"$description": "Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"status-brand-icon-color": {
"$value": "{color-purple-500}",
"$type": "color",
"$description": "Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
}
},
"text-color-default": {
"$value": "{color-neutral-800}",
"$type": "color",
"$description": "Used for the default text color.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"text-color-subtle": {
"$value": "{color-neutral-600}",
"$type": "color",
"$description": "Used for supplemental text that doesn't need to be as prominent as other text.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"text-color-strong": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for text with the highest contrast.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"text-color-heading": {
"$value": "{color-neutral-950}",
"$type": "color",
"$description": "Used for headings level 1-6.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"text-color-link": {
"$value": "{color-blue-700}",
"$type": "color",
"$description": "Used for default text links.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"text-color-warning": {
"$value": "{color-orange-600}",
"$type": "color",
"$description": "Used for text that requires caution or careful attention.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"text-color-danger": {
"$value": "{color-red-600}",
"$type": "color",
"$description": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"text-color-success": {
"$value": "{color-green-600}",
"$type": "color",
"$description": "Used for text indicating success, completion, approval, addition, or validity.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
},
"text-color-disabled": {
"$value": "{color-neutral-400}",
"$type": "color",
"$description": "Used for disabled text.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
}
}
}