Use the background color utility to change the default background color of an element.
Format: .ds-u-fill--[COLOR NAME]-[SHADE]
Primary Colors
.ds-u-fill--primary.ds-u-fill--primary-darker.ds-u-fill--primary-darkest.ds-u-fill--black.ds-u-fill--base.ds-u-fill--gray-dark.ds-u-fill--gray-light.ds-u-fill--whiteSecondary Colors
.ds-u-fill--secondary.ds-u-fill--secondary-dark.ds-u-fill--secondary-darker.ds-u-fill--secondary-darkest.ds-u-fill--secondary-light.ds-u-fill--secondary-lighter.ds-u-fill--secondary-lightestBackground Colors
.ds-u-fill--background.ds-u-fill--background-inverse.ds-u-fill--gray-dark.ds-u-fill--gray.ds-u-fill--gray-light.ds-u-fill--gray-lighter.ds-u-fill--gray-lightestStatus Colors
.ds-u-fill--success.ds-u-fill--success-dark.ds-u-fill--success-darker.ds-u-fill--success-darkest.ds-u-fill--success-light.ds-u-fill--success-lighter.ds-u-fill--success-lightest.ds-u-fill--warn.ds-u-fill--warn-dark.ds-u-fill--warn-darker.ds-u-fill--warn-darkest.ds-u-fill--warn-light.ds-u-fill--warn-lighter.ds-u-fill--warn-lightest.ds-u-fill--error.ds-u-fill--error-dark.ds-u-fill--error-darker.ds-u-fill--error-darkest.ds-u-fill--error-light.ds-u-fill--error-lightestFocus Colors
.ds-u-fill--focus-color-light.ds-u-fill--focus-color-darkAdditional Colors
.ds-u-fill--muted-inverse.ds-u-fill--transparentFocus Colors - Deprecated
Alert:
Deprecated
Do not use.
.ds-u-fill--focus-color.ds-u-fill--focus-color-inverse.ds-u-fill--focus-border-inverse