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))!important;`
`u-color-text-offline`	`color: hsl(var(--color-text-offline))!important;`
`u-color-text-info`	`color: hsl(var(--color-text-info))!important;`
`u-color-text-danger`	`color: hsl(var(--color-text-danger))!important;`
`u-color-text-warning`	`color: hsl(var(--color-text-warning))!important;`
`u-color-text-success`	`color: hsl(var(--color-text-success))!important;`

Text Colors

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


      <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>