# SDS - Default Theme ### 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 NameValueCompiled Value
--sds_theme_color_neutralsds-color(grey) #909099
--sds_theme_color_neutral_interactivesds-color(grey, 60)#75757F
--sds_theme_color_neutral_tint_1sds-color(grey, 05)#F4F4F5
--sds_theme_color_neutral_tint_2sds-color(grey, 20)#CCCCD0
--sds_theme_color_bluesds-color(blue)#3579F5
--sds_theme_color_blue_interactivesds-color(blue, 60)#0C5AE9
--sds_theme_color_blue_tint_1sds-color(blue, 05)#EBF2FE
--sds_theme_color_blue_tint_2sds-color(blue, 10)#C6D9FC
--sds_theme_color_greensds-color(green)#2ED022
--sds_theme_color_green_interactivesds-color(green, 60)#26AB1C
--sds_theme_color_green_tint_1sds-color(green, 05)#E9FBE8
--sds_theme_color_green_tint_2sds-color(green, 10)#C2F4BF
--sds_theme_color_yellowsds-color(yellow)#F8A506
--sds_theme_color_yellow_interactivesds-color(yellow, 60)#CB8705
--sds_theme_color_yellow_tint_1sds-color(yellow, 05)#FEF6E6
--sds_theme_color_yellow_tint_2sds-color(yellow, 10)#FDE6B9
--sds_theme_color_redsds-color(red)#F01010
--sds_theme_color_red_interactivesds-color(red, 60)#C60C0C
--sds_theme_color_red_tint_1sds-color(red, 05)#FEE7E7
--sds_theme_color_red_tint_2sds-color(red, 10)#FBBCBC
--sds_theme_color_indigosds-color(indigo)#4D5FD6
--sds_theme_color_indigo_interactivesds-color(indigo, 60)#2D40C2
--sds_theme_color_indigo_tint_1sds-color(indigo, 05)#EDEFFB
--sds_theme_color_indigo_tint_2sds-color(indigo, 10)#CDD2F4
--sds_theme_color_purplesds-color(purple)#8F35F1
--sds_theme_color_purple_interactivesds-color(purple, 60)#7410E1
--sds_theme_color_purple_tint_1sds-color(purple, 05)#F4EBFE
--sds_theme_color_purple_tint_2sds-color(purple, 10)#E0C6FB
--sds_theme_color_limesds-color(lime)#CDDC39
--sds_theme_color_lime_interactivesds-color(lime, 60)#B2C122
--sds_theme_color_lime_tint_1sds-color(lime, 05)#FAFCEB
--sds_theme_color_lime_tint_2sds-color(lime, 10)#F1F5C8
--sds_theme_color_tealsds-color(teal)#47C1BF
--sds_theme_color_teal_interactivesds-color(teal, 60)#37A2A0
--sds_theme_color_teal_tint_1sds-color(teal, 05)#EDF9F9
--sds_theme_color_teal_tint_2sds-color(teal, 10)#CBEEED
--sds_theme_color_orangesds-color(orange)#FD720F
--sds_theme_color_orange_interactivesds-color(orange, 60)#DA5C02
--sds_theme_color_orange_tint_1sds-color(orange, 05)#FFF1E7
--sds_theme_color_orange_tint_2sds-color(orange, 10)#FED8BC
--sds_theme_color_pinksds-color(pink)#EF276B
--sds_theme_color_pink_interactivesds-color(pink, 60)#D41053
--sds_theme_color_pink_tint_1sds-color(pink, 05)#FDE9F0
--sds_theme_color_pink_tint_2sds-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 NameValueCompiled Value
--sds_theme_color_primaryvar(--sds_theme_color_blue)#3579F5
--sds_theme_color_primary_interactivevar(--sds_theme_color_blue_interactive)#0C5AE9
--sds_theme_color_primary_tint_1var(--sds_theme_color_blue_tint_1)#EBF2FE
--sds_theme_color_primary_tint_2var(--sds_theme_color_blue_tint_2)#C6D9FC
--sds_theme_color_successvar(--sds_theme_color_green)#2ED022
--sds_theme_color_success_interactivevar(--sds_theme_color_green_interactive)#26AB1C
--sds_theme_color_success_tint_1var(--sds_theme_color_green_tint_1)#E9FBE8
--sds_theme_color_success_tint_2var(--sds_theme_color_green_tint_2)#C2F4BF
--sds_theme_color_warningvar(--sds_theme_color_yellow)#F8A506
--sds_theme_color_warning_interactivevar(--sds_theme_color_yellow_interactive)#CB8705
--sds_theme_color_warning_tint_1var(--sds_theme_color_yellow_tint_1)#FEF6E6
--sds_theme_color_warning_tint_2var(--sds_theme_color_yellow_tint_2)#FDE6B9
--sds_theme_color_dangervar(--sds_theme_color_red)#F01010
--sds_theme_color_danger_interactivevar(--sds_theme_color_red_interactive)#C60C0C
--sds_theme_color_danger_tint_1var(--sds_theme_color_red_tint_1)#FEE7E7
--sds_theme_color_danger_tint_2var(--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 NameValueCompiled Value
--sds_theme_backgroundsds-color(grey, 05)#F4F4F5
--sds_theme_background_highsds-color(white)#FFFFFF
--sds_theme_background_lowsds-color(grey, 10)#E0E0E2
--sds_theme_background_contrastsds-color(grey, 100)#0E0E0F
--sds_theme_background_contrast_2sds-color(grey, 90)#252528
--sds_theme_background_gradientlinear-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 NameValueCompiled Value
--sds_theme_textsds-color(grey, 100)#0E0E0F
--sds_theme_text_mutedsds-color(grey, 70)#5B5B63
--sds_theme_text_contrastsds-color(white)#FFFFFF
--sds_theme_text_contrast_mutedsds-color(grey, 40)#A4A4AB
--sds_theme_text_highlightedvar(--sds_theme_text)#0E0E0F
--sds_theme_text_highlighted_backgroundvar(--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 NameValueCompiled Value
--sds_theme_bordersds-color(grey, 30)#B8B8BE
--sds_theme_border_contrastsds-color(grey, 60)#75757F
### Icons A set of base icon colors. These are implemented throughout all areas/regions/containers/components/etc.
Token NameValueCompiled Value
--sds_theme_iconsds-color(grey, 70)#5B5B63
--sds_theme_icon_mutedsds-color(grey, 40)#A4A4AB
--sds_theme_icon_darksds-color(grey, 100)#0E0E0F
--sds_theme_icon_lightsds-color(white)#FFFFFF
### Button Themes contain specific tokens dedicated to \