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>