@gitlab/ui

{ "toggle": { "switch": { "track": { "color": { "unchecked": { "default": { "$value": "{control.border.color.default}", "$type": "color", "$description": "Used for the track color of an unchecked toggle switch in the default state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } }, "hover": { "$value": "{control.border.color.hover}", "$type": "color", "$description": "Used for the track color of an unchecked toggle switch in the hover state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } }, "focus": { "$value": "{control.border.color.focus}", "$type": "color", "$description": "Used for the track color of an unchecked toggle switch in the focus state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } }, "active": { "$value": "{control.border.color.focus}", "$type": "color", "$description": "Used for the track color of an unchecked toggle switch in the active state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } } }, "checked": { "default": { "$value": { "default": "{color.neutral.800}", "dark": "{color.neutral.50}" }, "$type": "color", "$description": "Used for the track color of a checked toggle switch in the default state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } }, "hover": { "$value": { "default": "{color.neutral.950}", "dark": "{color.neutral.10}" }, "$type": "color", "$description": "Used for the track color of a checked toggle switch in the hover state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } }, "focus": { "$value": "{toggle.switch.track.color.checked.hover}", "$type": "color", "$description": "Used for the track color of a checked toggle switch in the focus state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } }, "active": { "$value": { "default": "{color.neutral.1000}", "dark": "{color.neutral.0}" }, "$type": "color", "$description": "Used for the track color of a checked toggle switch in the active state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } } } } }, "background": { "color": { "unchecked": { "default": { "$value": "{control.indicator.color.selected}", "$type": "color", "$description": "Used for the background color of the unchecked toggle switch thumb in the default state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } }, "hover": { "$value": "{toggle.switch.background.color.unchecked.default}", "$type": "color", "$description": "Used for the background color of the unchecked toggle switch thumb in the hover state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } }, "focus": { "$value": "{toggle.switch.background.color.unchecked.default}", "$type": "color", "$description": "Used for the background color of the unchecked toggle switch thumb in the focus state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } }, "active": { "$value": "{toggle.switch.background.color.unchecked.default}", "$type": "color", "$description": "Used for the background color of the unchecked toggle switch thumb in the active state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } } }, "checked": { "default": { "$value": "{action.strong.confirm.foreground.color.default}", "$type": "color", "$description": "Used for the background color of the checked toggle switch thumb in the default state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } }, "hover": { "$value": "{action.strong.confirm.foreground.color.hover}", "$type": "color", "$description": "Used for the background color of the checked toggle switch thumb in the hover state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } }, "focus": { "$value": "{action.strong.confirm.foreground.color.focus}", "$type": "color", "$description": "Used for the background color of the checked toggle switch thumb in the focus state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } }, "active": { "$value": "{action.strong.confirm.foreground.color.active}", "$type": "color", "$description": "Used for the background color of the checked toggle switch thumb in the active state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } } }, "disabled": { "$value": "{action.disabled.foreground.color}", "$type": "color", "$description": "Used for the background color of the toggle switch thumb in the disabled state.", "$extensions": { "com.figma.scopes": [ "SHAPE_FILL" ] } } } }, "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" ] } }, "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" ] } }, "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" ] } }, "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" ] } } }, "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" ] } }, "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" ] } }, "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" ] } }, "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" ] } } }, "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" ] } } } } } } }