Tokens

.sds_Button (General)

Component Token	Theme Token
--sds_button_padding	0.5rem 0.8rem
--sds_button_border_radius	--sds_theme_border_radius 0.5rem
--sds_button_border_width	1px
--sds_button_border_style	solid
--sds_button_focus_highlight	--sds_theme_focus_highlight sds-color(blue)
--sds_button_focus_shadow	--sds_theme_focus_shadow 0 0 0 2px sds-color(grey, 05), 0 0 0 4px sds-color(blue)

.sds_Button_Disabled

Component Token	Theme Component
--sds_button_disabled_opacity	--sds_theme_disabled_opacity 48%

.sds_Button_Type_Base

Component Token	Theme Token
--sds_button_background	--sds_theme_button_background linear-gradient( to bottom, sds-color(white) 0%, sds-color(grey, 05) 100% )
-sds_button_border	--sds_theme_button_border sds-color(grey, 30)
--sds_button_text	--sds_theme_button_text sds-color(grey, 100)
--sds_button_icon	--sds_theme_button_icon sds-color(grey, 70)
--sds_button_interactive_background	--sds_theme_button_interactive_background sds-color(grey, 10)
--sds_button_interactive_border	--sds_theme_button_interactive_border sds-color(grey)
--sds_button_interactive_text	--sds_theme_button_interactive_text sds-color(grey, 100)
--sds_button_interactive_icon	--sds_theme_button_interactive_icon sds-color(grey, 100)

.sds_Button_Type_Primary

--sds_button_background	--sds_theme_button_primary_background sds-color(blue)
-sds_button_border	--sds_theme_button_primary_border sds-color(blue, 60)
--sds_button_text	--sds_theme_button_primary_text sds-color(white)
--sds_button_icon	--sds_theme_button_primary_icon sds-color(white)
--sds_button_interactive_background	--sds_theme_button_primary_interactive_background sds-color(blue, 60)
--sds_button_interactive_border	--sds_theme_button_primary_interactive_border sds-color(blue, 60)
--sds_button_interactive_text	--sds_theme_button_primary_interactive_text sds-color(white)
--sds_button_interactive_icon	--sds_theme_button_primary_interactive_icon sds-color(white)

.sds_Button_Type_Secondary

--sds_button_background	--sds_theme_button_secondary_background linear-gradient( to bottom, sds-color(white) 0%, sds-color(grey, 05) 100% )
-sds_button_border	--sds_theme_button_secondary_border sds-color(grey, 30)
--sds_button_text	--sds_theme_button_secondary_text sds-color(blue, 60)
--sds_button_icon	--sds_theme_button_secondary_icon sds-color(blue)
--sds_button_interactive_background	--sds_theme_button_secondary_interactive_background sds-color(blue, 60)
--sds_button_interactive_border	--sds_theme_button_secondary_interactive_border sds-color(blue, 60)
--sds_button_interactive_text	--sds_theme_button_secondary_interactive_text sds-color(white)
--sds_button_interactive_icon	--sds_theme_button_secondary_interactive_icon sds-color(white)

.sds_Button_Type_Danger

--sds_button_background	--sds_theme_button_danger_background sds-color(red)
-sds_button_border	--sds_theme_button_danger_border sds-color(red, 60)
--sds_button_text	--sds_theme_button_danger_text sds-color(white)
--sds_button_icon	--sds_theme_button_danger_icon sds-color(white)
--sds_button_interactive_background	--sds_theme_button_danger_interactive_background sds-color(red, 60)
--sds_button_interactive_border	--sds_theme_button_danger_interactive_border sds-color(red, 60)
--sds_button_interactive_text	--sds_theme_button_danger_interactive_text sds-color(white)
--sds_button_interactive_icon	--sds_theme_button_danger_interactive_icon sds-color(white)

.sds_Button_Type_DangerAlt

--sds_button_background	--sds_theme_button_danger_alt_background linear-gradient( to bottom, sds-color(white) 0%, sds-color(grey, 05) 100% )
-sds_button_border	--sds_theme_button_sdanger_alt_border sds-color(grey, 30)
--sds_button_text	--sds_theme_button_danger_alt_text sds-color(red, 60)
--sds_button_icon	--sds_theme_button_danger_alt_icon sds-color(red)
--sds_button_interactive_background	--sds_theme_button_danger_alt_interactive_background sds-color(red, 60)
--sds_button_interactive_border	--sds_theme_button_danger_alt_interactive_border sds-color(red, 60)
--sds_button_interactive_text	--sds_theme_button_danger_alt_interactive_text sds-color(white)
--sds_button_interactive_icon	--sds_theme_button_danger_alt_interactive_icon sds-color(white)

.sds_Button_Type_Ghost

--sds_button_background	--sds_theme_button_ghost_background #ffffff00
-sds_button_border	--sds_theme_button_ghost_border none
--sds_button_text	--sds_theme_button_ghost_text sds-color(grey, 100)
--sds_button_icon	--sds_theme_button_ghost_icon sds-color(grey, 70)
--sds_button_interactive_background	--sds_theme_button_ghost_interactive_background sds-color(grey, 20)
--sds_button_interactive_text	--sds_theme_button_ghost_interactive_text sds-color(grey, 100)
--sds_button_interactive_icon	--sds_theme_button_ghost_interactive_icon sds-color(grey, 100)