@gitlab/ui

{ "border-color-default": { "$value": "{color-neutral-700}", "$type": "color", "$description": "Used for the default border color.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "border-color-subtle": { "$value": "{color-neutral-800}", "$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-600}", "$type": "color", "$description": "Used for a distinct border that emphasizes an edge or boundaries.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "border-color-section": { "$value": "{background-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": [] } }, "line-height-heading": { "$value": 1.25, "$type": "number", "$extensions": { "com.figma.scopes": [ "LINE_HEIGHT" ] } }, "shadow-color-default": { "$value": "{color-alpha-dark-40}", "$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": "{background-color-subtle}", "$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-neutral-400}", "$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": "{color-blue-300}", "$type": "color", "$description": "Used for the title color of an info alert.", "$extensions": { "com.figma.scopes": [ "TEXT_FILL" ] } }, "alert-info-background-color": { "$value": "{background-color-subtle}", "$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-blue-400}", "$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": "{color-green-300}", "$type": "color", "$description": "Used for the title color of a success alert.", "$extensions": { "com.figma.scopes": [ "TEXT_FILL" ] } }, "alert-success-background-color": { "$value": "{background-color-subtle}", "$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-green-400}", "$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": "{color-orange-300}", "$type": "color", "$description": "Used for the title color of a warning alert.", "$extensions": { "com.figma.scopes": [ "TEXT_FILL" ] } }, "alert-warning-background-color": { "$value": "{background-color-subtle}", "$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-orange-400}", "$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": "{color-red-300}", "$type": "color", "$description": "Used for the title color of a danger alert.", "$extensions": { "com.figma.scopes": [ "TEXT_FILL" ] } }, "alert-danger-background-color": { "$value": "{background-color-subtle}", "$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-red-400}", "$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" ] } }, "avatar-border-color-default": { "$value": "{color-alpha-light-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-light-24}", "$type": "color", "$description": "Used to increase the edge definition of an avatar in the hover state.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "avatar-fallback-text-color-red": { "$value": "{color-red-200}", "$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-200}", "$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-200}", "$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-200}", "$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-200}", "$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-200}", "$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-300}", "$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-300}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-300}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-300}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-300}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-300}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-300}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-300}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-950}", "$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-700}", "$type": "color", "$description": "Used for the border of an info banner.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "banner-promo-background-color": { "$value": "{color-purple-950}", "$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-700}", "$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": "{color-theme-blue-700}", "$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": "{color-theme-green-700}", "$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": "{color-theme-indigo-700}", "$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": "{color-theme-blue-500}", "$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": "{color-theme-green-500}", "$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": "{color-theme-indigo-500}", "$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": "{color-theme-red-500}", "$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": "{color-theme-red-700}", "$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": "{color-theme-blue-900}", "$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": "{color-theme-green-900}", "$type": "color", "$description": "Used for the border for the green banner type.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "broadcast-banner-border-color-indigo": { "$value": "{color-theme-indigo-900}", "$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": "{color-theme-blue-700}", "$type": "color", "$description": "Used for the border for the lightblue banner type.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "broadcast-banner-border-color-lightgreen": { "$value": "{color-theme-green-700}", "$type": "color", "$description": "Used for the border for the lightgreen banner type.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "broadcast-banner-border-color-lightindigo": { "$value": "{color-theme-indigo-700}", "$type": "color", "$description": "Used for the border for the lightindigo banner type.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "broadcast-banner-border-color-lightred": { "$value": "{color-theme-red-700}", "$type": "col