Colors

Colors utility classes help to convey consistent meaning through colors.

States Colors

In the Appwrite console we use six classes to set system colors based on states:

Class	Properties
`u-color-text-disabled`	`color: hsl(var(--color-text-disabled));`
`u-color-text-offline`	`color: hsl(var(--color-text-offline));`
`u-color-text-info`	`color: hsl(var(--color-text-info));`
`u-color-text-danger`	`color: hsl(var(--color-text-danger));`
`u-color-text-warning`	`color: hsl(var(--color-text-warning));`
`u-color-text-success`	`color: hsl(var(--color-text-success));`

Text Colors

Class	Properties
`u-color-text-gray`	`color: hsl(var(--color-text-gray));`
`u-color-text-pink`	`color: hsl(var(--color-pink-text));`


      <div class="icon-check u-color-text-disabled"></div>

      <div class="icon-check u-color-text-offline"></div>

      <div class="icon-check u-color-text-info"></div>

      <div class="icon-check u-color-text-danger"></div>

      <div class="icon-check u-color-text-warning"></div>

      <div class="icon-check u-color-text-success"></div>

      <div class="icon-check u-color-text-gray"></div>

      <div class="icon-check u-color-text-pink"></div>