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>