{ "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" ] } }, "🔒/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": "{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": "color", "$description": "Used for the border for the lightred banner type.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "🔒/broadcast-banner-border-color-red": { "$value": "{color-theme-red-900}", "$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": "{action-strong-confirm-foreground-color-hover}", "$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": "{action-strong-confirm-foreground-color-focus}", "$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": "{action-strong-confirm-foreground-color-active}", "$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": "{action-strong-confirm-background-color-default}", "$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": "{action-strong-confirm-background-color-hover}", "$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": "{action-strong-confirm-background-color-focus}", "$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": "{action-strong-confirm-background-color-active}", "$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-blue-600}", "$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": "{color-blue-800}", "$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-hover}", "$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": "{color-blue-900}", "$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-blue-500}", "$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-blue-700}", "$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-blue-900}", "$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-blue-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-blue-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-blue-500}", "$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-blue-700}", "$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-blue-900}", "$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" ] } }, "🔒/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": "{color-blue-500}", "$type": "color", "$description": "Used for the selected indicator of a tab.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_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" ] } }, "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-blue-500}", "$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-blue-700}", "$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-blue-800}", "$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": { "colorSpace": "srgb", "components": [ 0.6431372549019608, 0.6392156862745098, 0.6588235294117647 ], "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": { "colorSpace": "srgb", "components": [ 0.6431372549019608, 0.6392156862745098, 0.6588235294117647 ], "alpha": 0.16 }, "$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": { "colorSpace": "srgb", "components": [ 0.3254901960784314, 0.3176470588235294, 0.34509803921568627 ], "alpha": 0.24 }, "$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-blue-500}", "$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-blue-700}", "$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-blue-900}", "$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": { "colorSpace": "srgb", "components": [ 0.38823529411764707, 0.6509803921568628, 0.9137254901960784 ], "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": { "colorSpace": "srgb", "components": [ 0.38823529411764707, 0.6509803921568628, 0.9137254901960784 ], "alpha": 0.16 }, "$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": { "colorSpace": "srgb", "components": [ 0.043137254901960784, 0.3607843137254902, 0.6784313725490196 ], "alpha": 0.24 }, "$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-blue-500}", "$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-blue-700}", "$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": "{color-blue-700}", "$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-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": "{color-blue-500}", "$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": "{color-blue-700}", "$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": "{color-blue-700}", "$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": [ "TEXT_FILL" ] } }, "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" ] } } }