SDS - Default Theme

The custom properties (theme tokens) that comprise the default theme for SDS.

Base Colors

Each theme contains a set of base color tokens. The values for these base colors should be derived directly from the available color palettes in SDS-Core.

Token Name	Value	Compiled Value
--sds_theme_color_neutral	sds-color(grey)	#909099
--sds_theme_color_neutral_interactive	sds-color(grey, 60)	#75757F
--sds_theme_color_neutral_tint_1	sds-color(grey, 05)	#F4F4F5
--sds_theme_color_neutral_tint_2	sds-color(grey, 20)	#CCCCD0
--sds_theme_color_blue	sds-color(blue)	#3579F5
--sds_theme_color_blue_interactive	sds-color(blue, 60)	#0C5AE9
--sds_theme_color_blue_tint_1	sds-color(blue, 05)	#EBF2FE
--sds_theme_color_blue_tint_2	sds-color(blue, 10)	#C6D9FC
--sds_theme_color_green	sds-color(green)	#2ED022
--sds_theme_color_green_interactive	sds-color(green, 60)	#26AB1C
--sds_theme_color_green_tint_1	sds-color(green, 05)	#E9FBE8
--sds_theme_color_green_tint_2	sds-color(green, 10)	#C2F4BF
--sds_theme_color_yellow	sds-color(yellow)	#F8A506
--sds_theme_color_yellow_interactive	sds-color(yellow, 60)	#CB8705
--sds_theme_color_yellow_tint_1	sds-color(yellow, 05)	#FEF6E6
--sds_theme_color_yellow_tint_2	sds-color(yellow, 10)	#FDE6B9
--sds_theme_color_red	sds-color(red)	#F01010
--sds_theme_color_red_interactive	sds-color(red, 60)	#C60C0C
--sds_theme_color_red_tint_1	sds-color(red, 05)	#FEE7E7
--sds_theme_color_red_tint_2	sds-color(red, 10)	#FBBCBC
--sds_theme_color_indigo	sds-color(indigo)	#4D5FD6
--sds_theme_color_indigo_interactive	sds-color(indigo, 60)	#2D40C2
--sds_theme_color_indigo_tint_1	sds-color(indigo, 05)	#EDEFFB
--sds_theme_color_indigo_tint_2	sds-color(indigo, 10)	#CDD2F4
--sds_theme_color_purple	sds-color(purple)	#8F35F1
--sds_theme_color_purple_interactive	sds-color(purple, 60)	#7410E1
--sds_theme_color_purple_tint_1	sds-color(purple, 05)	#F4EBFE
--sds_theme_color_purple_tint_2	sds-color(purple, 10)	#E0C6FB
--sds_theme_color_lime	sds-color(lime)	#CDDC39
--sds_theme_color_lime_interactive	sds-color(lime, 60)	#B2C122
--sds_theme_color_lime_tint_1	sds-color(lime, 05)	#FAFCEB
--sds_theme_color_lime_tint_2	sds-color(lime, 10)	#F1F5C8
--sds_theme_color_teal	sds-color(teal)	#47C1BF
--sds_theme_color_teal_interactive	sds-color(teal, 60)	#37A2A0
--sds_theme_color_teal_tint_1	sds-color(teal, 05)	#EDF9F9
--sds_theme_color_teal_tint_2	sds-color(teal, 10)	#CBEEED
--sds_theme_color_orange	sds-color(orange)	#FD720F
--sds_theme_color_orange_interactive	sds-color(orange, 60)	#DA5C02
--sds_theme_color_orange_tint_1	sds-color(orange, 05)	#FFF1E7
--sds_theme_color_orange_tint_2	sds-color(orange, 10)	#FED8BC
--sds_theme_color_pink	sds-color(pink)	#EF276B
--sds_theme_color_pink_interactive	sds-color(pink, 60)	#D41053
--sds_theme_color_pink_tint_1	sds-color(pink, 05)	#FDE9F0
--sds_theme_color_pink_tint_2	sds-color(pink, 10)	#FBC3D6

Semantic Colors

Utilizing the base color tokens above, these semantic color tokens help introduce meaning to certain colors that will be used throughout interfaces.

Token Name	Value	Compiled Value
--sds_theme_color_primary	var(--sds_theme_color_blue)	#3579F5
--sds_theme_color_primary_interactive	var(--sds_theme_color_blue_interactive)	#0C5AE9
--sds_theme_color_primary_tint_1	var(--sds_theme_color_blue_tint_1)	#EBF2FE
--sds_theme_color_primary_tint_2	var(--sds_theme_color_blue_tint_2)	#C6D9FC
--sds_theme_color_success	var(--sds_theme_color_green)	#2ED022
--sds_theme_color_success_interactive	var(--sds_theme_color_green_interactive)	#26AB1C
--sds_theme_color_success_tint_1	var(--sds_theme_color_green_tint_1)	#E9FBE8
--sds_theme_color_success_tint_2	var(--sds_theme_color_green_tint_2)	#C2F4BF
--sds_theme_color_warning	var(--sds_theme_color_yellow)	#F8A506
--sds_theme_color_warning_interactive	var(--sds_theme_color_yellow_interactive)	#CB8705
--sds_theme_color_warning_tint_1	var(--sds_theme_color_yellow_tint_1)	#FEF6E6
--sds_theme_color_warning_tint_2	var(--sds_theme_color_yellow_tint_2)	#FDE6B9
--sds_theme_color_danger	var(--sds_theme_color_red)	#F01010
--sds_theme_color_danger_interactive	var(--sds_theme_color_red_interactive)	#C60C0C
--sds_theme_color_danger_tint_1	var(--sds_theme_color_red_tint_1)	#FEE7E7
--sds_theme_color_danger_tint_2	var(--sds_theme_color_red_tint_2)	#FBBCBC

Backgrounds

Each theme comes with a set of base background colors. These are implemented throughout all areas/regions/containers/components/etc., and are one of the main drivers in theme variation.

Token Name	Value	Compiled Value
--sds_theme_background	sds-color(grey, 05)	#F4F4F5
--sds_theme_background_high	sds-color(white)	#FFFFFF
--sds_theme_background_low	sds-color(grey, 10)	#E0E0E2
--sds_theme_background_contrast	sds-color(grey, 100)	#0E0E0F
--sds_theme_background_contrast_2	sds-color(grey, 90)	#252528
--sds_theme_background_gradient	linear-gradient( to bottom, var(--sds_theme_background_high) 0%, var(--sds_theme_background) 100% )	linear-gradient( to bottom, #FFFFFF 0%, #F4F4F5 100% )

Text

Each theme comes with a set of base text colors that are pre-formatted to be compliant with WVAG2.0 Accessibility Guidelines. These are implemented throughout all areas/regions/containers/components/etc., and are one of the main drivers in theme variation.

Token Name	Value	Compiled Value
--sds_theme_text	sds-color(grey, 100)	#0E0E0F
--sds_theme_text_muted	sds-color(grey, 70)	#5B5B63
--sds_theme_text_contrast	sds-color(white)	#FFFFFF
--sds_theme_text_contrast_muted	sds-color(grey, 40)	#A4A4AB
--sds_theme_text_highlighted	var(--sds_theme_text)	#0E0E0F
--sds_theme_text_highlighted_background	var(--sds_theme_color_primary_tint_2)	#C6D9FC

Borders

Each theme comes with a set of base border colors that help provide some contrast with the theme's background colors.

Token Name	Value	Compiled Value
--sds_theme_border	sds-color(grey, 30)	#B8B8BE
--sds_theme_border_contrast	sds-color(grey, 60)	#75757F

Icons

A set of base icon colors. These are implemented throughout all areas/regions/containers/components/etc.

Token Name	Value	Compiled Value
--sds_theme_icon	sds-color(grey, 70)	#5B5B63
--sds_theme_icon_muted	sds-color(grey, 40)	#A4A4AB
--sds_theme_icon_dark	sds-color(grey, 100)	#0E0E0F
--sds_theme_icon_light	sds-color(white)	#FFFFFF

Button

Themes contain specific tokens dedicated to <Button> components. There are six button roles in SDS that are implemented using these global theme tokens. These are exposed at the global theme level to simplify theme creation and offer maximum flexibility.

Token Name	Value	Compiled Value
--sds_theme_button_background	var(--sds_theme_background_gradient)	linear-gradient( to bottom, #FFFFFF 0%, #F4F4F5 100% )
--sds_theme_button_border	var(--sds_theme_border)	#B8B8BE
--sds_theme_button_text	var(--sds_theme_text)	#0E0E0F
--sds_theme_button_icon	var(--sds_theme_icon)	#5B5B63
--sds_theme_button_interactive_background	var(--sds_theme_background_low)	#E0E0E2
--sds_theme_button_interactive_border	var(--sds_theme_color_neutral)	#909099
--sds_theme_button_interactive_text	var(--sds_theme_button_text)	#0E0E0F
--sds_theme_button_interactive_icon	var(--sds_theme_icon_dark)	#0E0E0F
--sds_theme_button_primary_background	var(--sds_theme_color_primary)	#3579F5
--sds_theme_button_primary_border	var(--sds_theme_color_primary_interactive)	#0C5AE9
--sds_theme_button_primary_text	var(--sds_theme_text_contrast)	#FFFFFF
--sds_theme_button_primary_icon	var(--sds_theme_icon_light)	#FFFFFF
--sds_theme_button_primary_interactive_background	var(--sds_theme_color_primary_interactive)	#0C5AE9
--sds_theme_button_primary_interactive_border	var(--sds_theme_button_primary_border)	#0C5AE9
--sds_theme_button_primary_interactive_text	var(--sds_theme_button_primary_text)	#FFFFFF
--sds_theme_button_primary_interactive_icon	var(--sds_theme_button_primary_icon)	#FFFFFF
--sds_theme_button_secondary_background	var(--sds_theme_button_background)	linear-gradient( to bottom, #FFFFFF 0%, #F4F4F5 100% )
--sds_theme_button_secondary_border	var(--sds_theme_button_border)	#B8B8BE
--sds_theme_button_secondary_text	var(--sds_theme_color_primary_interactive)	#0C5AE9
--sds_theme_button_secondary_icon	var(--sds_theme_color_primary)	#3579F5
--sds_theme_button_secondary_interactive_background	var(--sds_theme_button_primary_interactive_background)	#0C5AE9
--sds_theme_button_secondary_interactive_border	var(--sds_theme_button_primary_interactive_border)	#0C5AE9
--sds_theme_button_secondary_interactive_text	var(--sds_theme_button_primary_interactive_text)	#FFFFFF
--sds_theme_button_secondary_interactive_icon	var(--sds_theme_button_primary_interactive_icon)	#FFFFFF
--sds_theme_button_ghost_background	transparent	transparent
--sds_theme_button_ghost_text	var(--sds_theme_button_text)	#0E0E0F
--sds_theme_button_ghost_icon	var(--sds_theme_button_icon)	#5B5B63
--sds_theme_button_ghost_interactive_background	var(--sds_theme_color_neutral_tint_2)	#CCCCD0
--sds_theme_button_ghost_interactive_text	var(--sds_theme_button_ghost_text)	#0E0E0F
--sds_theme_button_ghost_interactive_icon	var(--sds_theme_button_interactive_icon)	#0E0E0F
--sds_theme_button_danger_background	var(--sds_theme_color_danger)	#F01010
--sds_theme_button_danger_border	var(--sds_theme_color_danger_interactive)	#C60C0C
--sds_theme_button_danger_text	var(--sds_theme_text_contrast)	#FFFFFF
--sds_theme_button_danger_icon	var(--sds_theme_icon_light)	#FFFFFF
--sds_theme_button_danger_interactive_background	var(--sds_theme_color_danger_interactive)	#C60C0C
--sds_theme_button_danger_interactive_border	var(--sds_theme_button_danger_border)	#C60C0C
--sds_theme_button_danger_interactive_text	var(--sds_theme_button_danger_text)	#FFFFFF
--sds_theme_button_danger_interactive_icon	var(--sds_theme_button_danger_icon)	#FFFFFF
--sds_theme_button_danger_alt_background	var(--sds_theme_button_background)	linear-gradient( to bottom, #FFFFFF 0%, #F4F4F5 100% )
--sds_theme_button_danger_alt_border	var(--sds_theme_button_border)	#B8B8BE
--sds_theme_button_danger_alt_text	var(--sds_theme_color_danger_interactive)	#C60C0C
--sds_theme_button_danger_alt_icon	var(--sds_theme_color_danger)	#F01010
--sds_theme_button_danger_alt_interactive_background	var(--sds_theme_button_danger_interactive_background)	#C60C0C
--sds_theme_button_danger_alt_interactive_border	var(--sds_theme_button_danger_interactive_border)	#C60C0C
--sds_theme_button_danger_alt_interactive_text	var(--sds_theme_button_danger_interactive_text)	#FFFFFF
--sds_theme_button_danger_alt_interactive_icon	var(--sds_theme_button_danger_interactive_icon)	#FFFFFF

Form Controls

Themes also contain global tokens dedicated to establishing a consistent style for form control components.

Token Name	Value	Compiled Value
--sds_theme_control_background	var(--sds_theme_background_high)	#FFFFFF
--sds_theme_control_border	var(--sds_theme_border)	#B8B8BE
--sds_theme_control_text	var(--sds_theme_text)	#0E0E0F
--sds_theme_control_icon	var(--sds_theme_icon_muted)	#A4A4AB
--sds_theme_control_placeholder	var(--sds_theme_text_muted)	#5B5B63
--sds_theme_control_hover_background	var(--sds_theme_control_background)	#FFFFFF
--sds_theme_control_hover_border	var(--sds_theme_color_neutral)	#909099
--sds_theme_control_focus_background	var(--sds_theme_control_hover_background)	#FFFFFF
--sds_theme_control_focus_border	var(--sds_theme_control_hover_border)	#909099
--sds_theme_control_disabled_background	var(--sds_theme_control_background)	#FFFFFF
--sds_theme_control_disabled_border	var(--sds_theme_control_border)	#B8B8BE
--sds_theme_control_disabled_text	var(--sds_theme_control_text)	#0E0E0F
--sds_theme_control_disabled_icon	var(--sds_theme_control_icon)	#A4A4AB
--sds_theme_control_disabled_placeholder	var(--sds_theme_control_placeholder)	#5B5B63
--sds_theme_control_error_background	var(--sds_theme_color_danger_tint_1)	#FEE7E7
--sds_theme_control_error_border	var(--sds_theme_color_danger)	#F01010
--sds_theme_control_error_text	var(--sds_theme_color_danger_interactive)	#C60C0C
--sds_theme_control_error_icon	var(--sds_theme_color_danger)	#F01010

Global UI Styles

These are any global styles that may vary between themes, but don't fall under a specific category or group.

Token Name	Value	Compiled Value
--sds_theme_border_radius	0.5 rem (= 8px)	0.5 rem (= 8px)
--sds_theme_disabled_opacity	48%	48%
--sds_theme_focus_highlight	var(--sds_theme_color_primary)	#3579F5
--sds_theme_focus_shadow	0 0 0 2px var(--sds_theme_background), 0 0 0 4px var(--sds_theme_focus_highlight)	0 0 0 2px #F4F4F5, 0 0 0 4px #3579F5