Text

Note: the examples are applied on a <div> element.

State

Without background With alternate background Inverse
-text--color-mute
-text--color-mute-alt -bg--color-mute
-text--color-mute -bg--color-mute-alt
-text--color-danger
-text--color-danger-alt -bg--color-danger
-text--color-danger -bg--color-danger-alt
-text--color-error
-text--color-error-alt -bg--color-error
-text--color-error -bg--color-error-alt
-text--color-destructive
-text--color-destructive-alt -bg--color-destructive
-text--color-destructive -bg--color-destructive-alt
-text--color-helping
-text--color-helping-alt -bg--color-helping
-text--color-helping -bg--color-helping-alt
-text--color-creative
-text--color-creative-alt -bg--color-creative
-text--color-creative -bg--color-creative-alt
-text--color-done
-text--color-done-alt -bg--color-done
-text--color-done -bg--color-done-alt
-text--color-success
-text--color-success-alt -bg--color-success
-text--color-success -bg--color-success-alt
-text--color-recording
-text--color-recording-alt -bg--color-recording
-text--color-recording -bg--color-recording-alt
-text--color-warning
-text--color-warning-alt -bg--color-warning
-text--color-warning -bg--color-warning-alt
-text--color-canceling
-text--color-canceling-alt -bg--color-canceling
-text--color-canceling -bg--color-canceling-alt

Colors

Without background With alternate background Inverse
-text--color-primary
-text--color-primary-alt -bg--color-primary
-text--color-primary -bg--color-primary-alt
-text--color-black-like
-text--color-black-like-alt -bg--color-black-like
-text--color-black-like -bg--color-black-like-alt
-text--color-white-like
-text--color-white-like-alt -bg--color-white-like
-text--color-white-like -bg--color-white-like-alt
-text--color-blue
-text--color-blue-alt -bg--color-blue
-text--color-blue -bg--color-blue-alt
-text--color-green
-text--color-green-alt -bg--color-green
-text--color-green -bg--color-green-alt
-text--color-mute
-text--color-mute-alt -bg--color-mute
-text--color-mute -bg--color-mute-alt
-text--color-orange
-text--color-orange-alt -bg--color-orange
-text--color-orange -bg--color-orange-alt
-text--color-red
-text--color-red-alt -bg--color-red
-text--color-red -bg--color-red-alt
-text--color-yellow
-text--color-yellow-alt -bg--color-yellow
-text--color-yellow -bg--color-yellow-alt
-text--color-olive
-text--color-olive-alt -bg--color-olive
-text--color-olive -bg--color-olive-alt
-text--color-teal
-text--color-teal-alt -bg--color-teal
-text--color-teal -bg--color-teal-alt
-text--color-violet
-text--color-violet-alt -bg--color-violet
-text--color-violet -bg--color-violet-alt
-text--color-purple
-text--color-purple-alt -bg--color-purple
-text--color-purple -bg--color-purple-alt
-text--color-pink
-text--color-pink-alt -bg--color-pink
-text--color-pink -bg--color-pink-alt
-text--color-brown
-text--color-brown-alt -bg--color-brown
-text--color-brown -bg--color-brown-alt
-text--color-grey
-text--color-grey-alt -bg--color-grey
-text--color-grey -bg--color-grey-alt

Headers look

If you need something that looks like a header, use .-h1 to .-h6 helpers.

Alignment

-text--center
-text--left
-text--right

Size

-text--smaller
-text--small
-text--default-size
-text--medium
-text--large
-text--xlarge
-text--xxlarge

Weight

-text--weight-light
-text--weight-base
-text--weight-medium
-text--weight-bold

Font family

-text--monospace

Other

-text--italic
-text--ellipsis
-text--struck
-text--ok
-text--bad
-text--nowrap