Colors

Colors are used to indicate states of some elements (green for selected items, orange for warnings, red for errors and so on) or to make things blend in/stick out more. In general, the smaller and more separate something is, the more saturated it can be to grab attention. By providing common color variables we can have different themes and still keep a consistent feeling. In the example below you can see how the colors are represented in different themes. You can also see the preferred text color for that color.

Color shorthand

3.1

These colors should be used as default when building new components

Variable	Uses
$primary	Used for navbars, primary actions and backgrounds
$secondary	Used for headers and passive elements
$highlight	Used for selected and active elements
$hover	Used for hover backgrounds or inactive elements

There are some predefined colors for standard text that will adapt to the theme automatically:

Variable	Description
$text-color-standard	Standard color used in panels
$text-color-muted	Slightly muted color for use on disabled/secondary text

Main colors

3.2