Text color
Control the color of the text.
| Class | Styles |
|---|---|
.text-<hue>-<shade> |
color: var(--color-<hue>-<shade>);View color page |
.text-white |
color: var(--color-white); |
.text-black |
color: var(--color-black); |
.text-base |
color: var(--color-base); |
.text-fixed |
color: var(--color-fixed); |
.text-emphasised |
color: var(--color-emphasised); |
.text-neutral |
color: var(--color-neutral); |
.text-subtle |
color: var(--color-subtle); |
.text-placeholder |
color: var(--color-placeholder); |
.text-disabled |
color: var(--color-disabled); |
.text-disabled-emphasised |
color: var(--color-disabled-emphasised); |
.text-inverted |
color: var(--color-inverted); |
.text-inverted-fixed |
color: var(--color-inverted-fixed); |
.text-progressive |
color: var(--color-progressive); |
.text-destructive |
color: var(--color-destructive); |
.text-error |
color: var(--color-error); |
.text-warning |
color: var(--color-warning); |
.text-success |
color: var(--color-success); |
.text-notice |
color: var(--color-notice); |
.text-link |
color: var(--color-link); |
.text-link-visited |
color: var(--color-link--visited); |
.text-link-red |
color: var(--color-link-red); |
Example
This is progressive text.
This is error text.
This is warning text.
This is success text.
This is text with pink hue and shade of 400.
<p class="text-progressive">This is progressive text.</p>
<p class="text-error">This is error text.</p>
<p class="text-warning">This is warning text.</p>
<p class="text-success">This is success text.</p>
<p class="text-pink-400">This is text with pink hue and shade of 400.</p>