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>