Palette

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.

white
off-white
lightest-gray
lighter-gray
light-gray
gray
dark-gray
darker-gray
darkest-gray
off-black
transparent-black
black

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. .

lightest-blue
lighter-blue
light-blue
blue
dark-blue
light-green
green
dark-green
light-red
red
dark-red
light-orange
orange
dark-orange
light-yellow
yellow
dark-yellow
light-purple
purple
dark-purple
light-brown
brown
dark-brown

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.