Tokens
.sds_Switch
--sds_switch_border_style
solid
--sds_switch_border_width
1px
--sds_switch_container_background
--sds_theme_control_background
sds-color(white)
--sds_switch_container_border_color
--sds_theme_control_border
sds-color(grey, 30)
--sds_switch_container_border_radius
100px
--sds_switch_knob_background
--sds_theme_control_background_low
sds-color(grey, 10)
--sds_switch_knob_border_color
--sds_theme_control_border
sds-color(grey, 30)
-sds_switch_knob_border_radius
100px
--sds_switch_hover_container_background
--sds_theme_control_hover_background
sds-color(white)
--sds_switch_hover_container_border_color
--sds_theme_control_hover_border
sds-color(grey)
--sds_switch_hover_knob_background
--sds_theme_control_background_low
sds-color(grey, 10)
--sds_switch_hover_knob_border_color
--sds_theme_control_border
sds-color(grey, 30)
--sds_switch_focus_shadow
--sds_theme_focus_shadow
0 0 0 2px sds-color(grey, 05),
0 0 0 4px sds-color(blue)
--sds_switch_focus_container_background
--sds_theme_control_focus_background
sds-color(white)
--sds_switch_focus_container_border_color
--sds_theme_control_focus_border
sds-color(grey, 30)
--sds_switch_focus_knob_background
--sds_theme_control_background_low
sds-color(grey, 10)
--sds_switch_focus_knob_border_color
--sds_theme_control_hover_border
sds-color(grey)
--sds_switch_checked_container_background
--sds_theme_color_primary
sds-color(blue)
--sds_switch_checked_container_border_color
--sds_theme_color_primary_interactive
sds-color(blue, 60)
--sds_switch_checked_knob_background
--sds_theme_control_background
sds-color(white)
--sds_switch_checked_knob_border_color
--sds_theme_color_primary_interactive
sds-color(blue, 60)
--sds_switch_disabled_opacity
--sds_theme_disabled_opacity
48%
Last updated