@gitlab/ui

{ "action": { "border": { "radius": { "$value": "{border.radius.lg}", "$type": "dimension", "$description": "Used for the border radius of an action.", "$extensions": { "com.figma.scopes": [ "CORNER_RADIUS" ] } } }, "disabled": { "foreground": { "color": { "$value": { "default": "{color.neutral.400}", "dark": "{color.neutral.500}" }, "$type": "color", "$description": "Used for the foreground of a disabled action.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL", "TEXT_FILL" ] } } }, "background": { "color": { "$value": { "default": "{color.neutral.50}", "dark": "{color.neutral.900}" }, "$type": "color", "$description": "Used for the background of a disabled action.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } } }, "border": { "color": { "$value": { "default": "{color.neutral.100}", "dark": "{color.neutral.800}" }, "$type": "color", "$description": "Used for the border of a disabled action.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } } } }, "selected": { "foreground": { "color": { "default": { "$value": { "default": "{color.neutral.0}", "dark": "{color.neutral.950}" }, "$type": "color", "$description": "Used for the foreground of a selected action in the default state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL", "TEXT_FILL" ] } }, "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" ] } }, "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" ] } }, "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" ] } } } }, "background": { "color": { "default": { "$value": { "default": "{color.blue.500}", "dark": "{color.blue.300}" }, "$type": "color", "$description": "Used for the background of a selected action in the default state.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "hover": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for the background of a selected action in the hover state.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "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" ] } }, "active": { "$value": { "default": "{color.blue.800}", "dark": "{color.blue.100}" }, "$type": "color", "$description": "Used for the background of a selected action in the active state.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } } } }, "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" ] } }, "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" ] } }, "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" ] } }, "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" ] } } } } }, "neutral": { "foreground": { "color": { "default": { "$value": { "default": "{color.neutral.900}", "dark": "{color.neutral.50}" }, "$type": "color", "$description": "Used for the foreground of a neutral action in the default state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL", "TEXT_FILL" ] } }, "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" ] } }, "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" ] } }, "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" ] } } } }, "background": { "color": { "default": { "$value": { "default": { "colorSpace": "srgb", "components": [ 0.6431372549019608, 0.6392156862745098, 0.6588235294117647 ], "alpha": 0 }, "dark": { "colorSpace": "srgb", "components": [ 0.5372549019607843, 0.5333333333333333, 0.5529411764705883 ], "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" ] } }, "hover": { "$value": { "default": { "colorSpace": "srgb", "components": [ 0.6431372549019608, 0.6392156862745098, 0.6588235294117647 ], "alpha": 0.16 }, "dark": { "colorSpace": "srgb", "components": [ 0.5372549019607843, 0.5333333333333333, 0.5529411764705883 ], "alpha": 0.4 } }, "$type": "color", "$description": "Used for the background of a neutral action in the hover state.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "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" ] } }, "active": { "$value": { "default": { "colorSpace": "srgb", "components": [ 0.3254901960784314, 0.3176470588235294, 0.34509803921568627 ], "alpha": 0.24 }, "dark": { "colorSpace": "srgb", "components": [ 0.5372549019607843, 0.5333333333333333, 0.5529411764705883 ], "alpha": 0.16 } }, "$type": "color", "$description": "Used for the background of a neutral action in the active state.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } } } }, "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" ] } }, "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" ] } }, "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" ] } }, "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" ] } } } } }, "confirm": { "foreground": { "color": { "default": { "$value": { "default": "{color.blue.500}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for the foreground of a confirm (positive) action in the default state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL", "TEXT_FILL" ] } }, "hover": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.100}" }, "$type": "color", "$description": "Used for the foreground of a confirm (positive) action in the hover state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL", "TEXT_FILL" ] } }, "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" ] } }, "active": { "$value": { "default": "{color.blue.900}", "dark": "{color.blue.100}" }, "$type": "color", "$description": "Used for the foreground of a confirm (positive) action in the active state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL", "TEXT_FILL" ] } } } }, "background": { "color": { "default": { "$value": { "default": { "colorSpace": "srgb", "components": [ 0.38823529411764707, 0.6509803921568628, 0.9137254901960784 ], "alpha": 0 }, "dark": { "colorSpace": "srgb", "components": [ 0.25882352941176473, 0.5607843137254902, 0.8627450980392157 ], "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" ] } }, "hover": { "$value": { "default": { "colorSpace": "srgb", "components": [ 0.38823529411764707, 0.6509803921568628, 0.9137254901960784 ], "alpha": 0.16 }, "dark": { "colorSpace": "srgb", "components": [ 0.25882352941176473, 0.5607843137254902, 0.8627450980392157 ], "alpha": 0.4 } }, "$type": "color", "$description": "Used for the background of a confirm (positive) action in the hover state.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "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" ] } }, "active": { "$value": { "default": { "colorSpace": "srgb", "components": [ 0.043137254901960784, 0.3607843137254902, 0.6784313725490196 ], "alpha": 0.24 }, "dark": { "colorSpace": "srgb", "components": [ 0.25882352941176473, 0.5607843137254902, 0.8627450980392157 ], "alpha": 0.16 } }, "$type": "color", "$description": "Used for the background of a confirm (positive) action in the active state.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } } } }, "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" ] } }, "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" ] } }, "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" ] } }, "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" ] } } } } }, "danger": { "foreground": { "color": { "default": { "$value": { "default": "{color.red.500}", "dark": "{color.red.200}" }, "$type": "color", "$description": "Used for the foreground of a danger (destructive) action in the default state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL", "TEXT_FILL" ] } }, "hover": { "$value": { "default": "{color.red.700}", "dark": "{color.red.100}" }, "$type": "color", "$description": "Used for the foreground of a danger (destructive) action in the hover state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL", "TEXT_FILL" ] } }, "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" ] } }, "active": { "$value": { "default": "{color.red.900}", "dark": "{color.red.100}" }, "$type": "color", "$description": "Used for the foreground of a danger (destructive) action in the active state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL", "TEXT_FILL" ] } } } }, "background": { "color": { "default": { "$value": { "default": { "colorSpace": "srgb", "components": [ 0.9607843137254902, 0.4980392156862745, 0.4235294117647059 ], "alpha": 0 }, "dark": { "colorSpace": "srgb", "components": [ 0.9254901960784314, 0.34901960784313724, 0.2549019607843137 ], "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" ] } }, "hover": { "$value": { "default": { "colorSpace": "srgb", "components": [ 0.9607843137254902, 0.4980392156862745, 0.4235294117647059 ], "alpha": 0.16 }, "dark": { "colorSpace": "srgb", "components": [ 0.9254901960784314, 0.34901960784313724, 0.2549019607843137 ], "alpha": 0.4 } }, "$type": "color", "$description": "Used for the background of a danger (destructive) action in the hover state.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "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" ] } }, "active": { "$value": { "default": { "colorSpace": "srgb", "components": [ 0.6823529411764706, 0.09411764705882353, 0 ], "alpha": 0.24 }, "dark": { "colorSpace": "srgb", "components": [ 0.9254901960784314, 0.34901960784313724, 0.2549019607843137 ], "alpha": 0.16 } }, "$type": "color", "$description": "Used for the background of a danger (destructive) action in the active state.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } } } }, "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" ] } }, "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" ] } }, "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" ] } }, "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" ] } } } } }, "strong": { "confirm": { "background": { "color": { "default": { "$value": { "default": "{color.blue.500}", "dark": "{color.blue.300}" }, "$type": "color", "$description": "Used for the background of a strong confirm action in the default state.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "hover": { "$value": { "default": "{color.blue.600}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for the background of a strong confirm action in the hover state.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "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" ] } }, "active": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.400}" }, "$type": "color", "$description": "Used for the background of a strong confirm action in the active state.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } } } }, "foreground": { "color": { "default": { "$value": { "default": "{color.neutral.0}", "dark": "{color.neutral.950}" }, "$type": "color", "$description": "Used for the foreground of a strong confirm action in the default state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL", "TEXT_FILL" ] } }, "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" ] } }, "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" ] } }, "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" ] } } } }, "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" ] } }, "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" ] } }, "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" ] } }, "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" ] } } } } }, "neutral": { "background": { "color": { "default": { "$value": { "default": "{color.neutral.600}", "dark": "{color.neutral.700}" }, "$type": "color", "$description": "Used for the background of a strong neutral action in the default state.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "hover": { "$value": { "default": "{color.neutral.700}", "dark": "{color.neutral.600}" }, "$type": "color", "$description": "Used for the background of a strong neutral action in the hover state.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "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" ] } }, "active": { "$value": { "default": "{color.neutral.800}", "dark": "{color.neutral.500}" }, "$type": "color", "$description": "Used for the background of a strong neutral action in the active state.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } } } }, "foreground": { "color": { "default": { "$value": { "default": "{color.neutral.0}", "dark": "{color.neutral.50}" }, "$type": "color", "$description": "Used for the foreground of a strong neutral action in the default state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL", "TEXT_FILL" ] } }, "hover": { "$value": { "default": "{action.strong.neutral.foreground.color.default}", "dark": "{color.neutral.0}" }, "$type": "color", "$description": "Used for the foreground of a strong neutral action in the hover state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL", "TEXT_FILL" ] } }, "focus": { "$value": { "default": "{action.strong.neutral.foreground.color.hover}", "dark": "{color.neutral.0}" }, "$type": "color", "$description": "Used for the foreground of a strong neutral action in the focus state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL", "TEXT_FILL" ] } }, "active": { "$value": { "default": "{action.strong.neutral.foreground.color.focus}", "dark": "{color.neutral.0}" }, "$type": "color", "$description": "Used for the foreground of a strong neutral action in the active state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL", "TEXT_FILL" ] } } } }, "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" ] } }, "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" ] } }, "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" ] } }, "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": { "default": "{color.neutral.0}", "dark": "{color.neutral.950}" }, "$type": "color", "$description": "Used for the default background color.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "subtle": { "$value": { "default": "{color.neutral.10}", "dark": "{color.neutral.900}" }, "$type": "color", "$description": "Used to slightly differentiate the background from the default.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "strong": { "$value": { "default": "{color.neutral.50}", "dark": "{color.neutral.800}" }, "$type": "color", "$description": "Used to make the background easily stand out from the default.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "disabled": { "$value": { "default": "{color.neutral.10}", "dark": "{color.neutral.900}" }, "$type": "color", "$description": "Used to identify a disabled section.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "overlap": { "$value": { "default": "{color.neutral.0}", "dark": "{color.neutral.900}" }, "$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" ] } }, "section": { "$value": { "default": "{color.neutral.0}", "dark": "{color.neutral.800}" }, "$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" ] } }, "overlay": { "$value": { "default": "{color.alpha.dark.24}", "dark": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "alpha": 0.64 } }, "$type": "color", "$description": "Used for an overlay that covers other content.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } } } }, "border": { "color": { "default": { "$value": { "default": "{color.neutral.100}", "dark": "{color.neutral.700}" }, "$type": "color", "$description": "Used for the default border color.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "subtle": { "$value": { "default": "{color.neutral.50}", "dark": "{color.neutral.800}" }, "$type": "color", "$description": "Used for a subtle border in combination with the default background.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "strong": { "$value": { "default": "{color.neutral.200}", "dark": "{color.neutral.600}" }, "$type": "color", "$description": "Used for a distinct border that emphasizes an edge or boundaries.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "section": { "$value": { "default": "{border.color.default}", "dark": "{background.color.default}" }, "$type": "color", "$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } } }, "radius": { "default": { "$value": "{border.radius.md}", "$type": "dimension", "$description": "", "$extensions": { "com.figma.scopes": [ "CORNER_RADIUS" ] } } } }, "control": { "background": { "color": { "default": { "$value": { "default": "{color.neutral.0}", "dark": "{color.alpha.dark.40}" }, "$type": "color", "$description": "Used for form control (input, radio button, checkbox, textarea) default background.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "disabled": { "$value": { "default": "{color.neutral.10}", "dark": "{color.alpha.light.4}" }, "$type": "color", "$description": "Used for disabled form control (checkbox, input, radio button, textarea) background.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "concatenation": { "$value": { "default": "{color.neutral.10}", "dark": "{color.alpha.light.4}" }, "$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" ] } }, "readonly": { "$value": { "default": "{color.alpha.dark.2}", "dark": "{color.alpha.light.8}" }, "$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" ] } }, "selected": { "default": { "$value": { "default": "{color.blue.500}", "dark": "{color.blue.300}" }, "$type": "color", "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "hover": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$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" ] } }, "focus": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$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" ] } } } } }, "border": { "color": { "default": { "$value": { "default": "{color.neutral.400}", "dark": "{color.neutral.500}" }, "$type": "color", "$description": "Used for form control (input, radio button, checkbox, textarea) default border.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "hover": { "$value": { "default": "{color.neutral.600}", "dark": "{color.neutral.300}" }, "$type": "color", "$description": "Used for form control (input, radio button, checkbox, textarea) border on hover.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "focus": { "$value": { "default": "{color.neutral.900}", "dark": "{color.neutral.50}" }, "$type": "color", "$description": "Used for form control (input, radio button, checkbox, textarea) border on focus.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "disabled": { "$value": { "default": "{color.neutral.100}", "dark": "{color.neutral.800}" }, "$type": "color", "$description": "Used for disabled form control (input, radio button, checkbox, textarea) border.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "error": { "$value": "{feedback.danger.border.color}", "$type": "color", "$description": "Used for invalid form control (input, textarea) border.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "selected": { "default": { "$value": { "default": "{color.blue.500}", "dark": "{color.blue.400}" }, "$type": "color", "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "hover": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } }, "focus": { "$value": { "default": "{color.blue.700}", "dark": "{color.blue.200}" }, "$type": "color", "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.", "$extensions": { "com.figma.scopes": [ "STROKE_COLOR" ] } } } }, "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" ] } } }, "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" ] } }, "valid": { "$value": "{text.color.success}", "$type": "color", "$description": "Used for the helper text when the input is valid.", "$extensions": { "com.figma.scopes": [ "TEXT_FILL" ] } } } }, "placeholder": { "color": { "$value": "{text.color.disabled}", "$type": "color", "$description": "Used for placeholder text within inputs.", "$extensions": { "com.figma.scopes": [ "TEXT_FILL" ] } } }, "indicator": { "color": { "selected": { "$value": { "default": "{color.neutral.0}", "dark": "{color.neutral.950}" }, "$type": "color", "$description": "Used for checkbox and radio button state indicators.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } }, "disabled": { "$value": { "default": "{color.neutral.500}", "dark": "{color.neutral.400}" }, "$type": "color", "$description": "Used for disabled checkbox and radio button state indicators.", "$extensions": { "com.figma.scopes": [ "FRAME_FILL", "SHAPE_FILL" ] } } } } }, "feedback": { "border": { "radius": {