An extensive set of color variables are set up inside of config. Color names are generally semantic and simple, making them very easy to remember. Color variables are references like any other Sass variable:

.element-to-style{
  color: $gray;
}

There is also a dark theme which you can import using:

@import "calcite-web-dark";

Grayscale

Calcite Web mostly deals with large-field layouts and a broader range of visual communication, including small interfaces and long format reading. With this in mind, Calcite Web's grayscale differs from that of Calcite Desktop.

Calcite web provides a short list of simple color variables, while supporting the complete set of official calcite colors.

UI Colors

Calcite web exposes a set of Sass variables for the UI palette. Each color has three values: light, regular, and dark. The complete set of calcite colors is also supported. .

Type Colors

Three basic colors are set for color in typography. It's not recommended to change these values, but they are provided for your reference.

$type-color: $off-black;
$link-color: $blue;
$link-hover: $light-blue;

In writing Sass it's often easier to remember $type-color is the color of type than it is to remember the specific grayscale value that is the default for type.