Tokens

.sds_Switch

Component Tokens
Theme Tokens

--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