Backgrounds

Table of content

Specific backgrounds

-checked-background class
-bg-component class
-bg-component--alt class
-bg-default class
-bg-default--alt class

States

These classes are well combinable with the -text--<state> and -text--<state>-alt classes.

Ideally, use a background with an alt text, or a text with an alt background.

mute

-bg--color-mute class
-bg--color-mute-alt class

danger

-bg--color-danger class
-bg--color-danger-alt class

error

-bg--color-error class
-bg--color-error-alt class

destructive

-bg--color-destructive class
-bg--color-destructive-alt class

helping

-bg--color-helping class
-bg--color-helping-alt class

creative

-bg--color-creative class
-bg--color-creative-alt class

done

-bg--color-done class
-bg--color-done-alt class

success

-bg--color-success class
-bg--color-success-alt class

recording

-bg--color-recording class
-bg--color-recording-alt class

warning

-bg--color-warning class
-bg--color-warning-alt class

canceling

-bg--color-canceling class
-bg--color-canceling-alt class

Named colors

These classes are well combinable with the -text--<color> and -text--<color>-alt classes.

Ideally, use a background with an alt text, or a text with an alt background.

primary

-bg--color-primary class
-bg--color-primary-alt class

black-like

-bg--color-black-like class
-bg--color-black-like-alt class

white-like

-bg--color-white-like class
-bg--color-white-like-alt class

blue

-bg--color-blue class
-bg--color-blue-alt class

green

-bg--color-green class
-bg--color-green-alt class

mute

-bg--color-mute class
-bg--color-mute-alt class

orange

-bg--color-orange class
-bg--color-orange-alt class

red

-bg--color-red class
-bg--color-red-alt class

yellow

-bg--color-yellow class
-bg--color-yellow-alt class

olive

-bg--color-olive class
-bg--color-olive-alt class

teal

-bg--color-teal class
-bg--color-teal-alt class

violet

-bg--color-violet class
-bg--color-violet-alt class

purple

-bg--color-purple class
-bg--color-purple-alt class

pink

-bg--color-pink class
-bg--color-pink-alt class

brown

-bg--color-brown class
-bg--color-brown-alt class

grey

-bg--color-grey class
-bg--color-grey-alt class