Color Mixins

The numeral suffixes of color constants indicate mix levels of black and white. 100 means the base color (and the base colors are aliased under the same names without suffixes); levels below ‌100 mean the mix of base with white; levels above ‌100 mean the mix of base with black.

In general, colors with 110 suffix should be used for text only. For the Metals, 110 should be used for the normal and larger text above the metal, and 130 should be used for text with small font, for better visibility.

For convenience, all base colors are aliased under the same names without any suffix (see Brand Colors section).

Grayscale

$tc-black

$tc-gray-90

$tc-gray-80

$tc-gray-70

$tc-gray-60

$tc-gray-50

$tc-gray-40

$tc-gray-30

$tc-gray-20

$tc-gray-10

$tc-gray-neutral-dark

$tc-gray-neutral-light

$tc-white

Brand Color

$tc-dark-blue

$tc-green

$tc-light-blue

$tc-orange

$tc-purple

$tc-red

$tc-yellow

Dark Blue Shades

$tc-dark-blue-110

$tc-dark-blue-100

$tc-dark-blue-70

$tc-dark-blue-30

$tc-dark-blue-10

Light Blue Shades

$tc-light-blue-110

$tc-light-blue-100

$tc-light-blue-70

$tc-light-blue-30

$tc-light-blue-10

Orange Shades

$tc-orange-110

$tc-orange-100

$tc-orange-70

$tc-orange-30

$tc-orange-10

Red Shades

$tc-red-110

$tc-red-100

$tc-red-70

$tc-red-30

$tc-red-10

Yellow Shades

$tc-yellow-110

$tc-yellow-100

$tc-yellow-70

$tc-yellow-30

$tc-yellow-10

Green Shades

$tc-green-110

$tc-green-100

$tc-green-70

$tc-green-30

$tc-green-10

Purple Shades

$tc-purple-110

$tc-purple-100

$tc-purple-70

$tc-purple-30

$tc-purple-10

Metal Colors

$tc-gold

$tc-silver

$tc-bronze

$tc-gold-130

$tc-gold-110

$tc-gold-100

$tc-silver-130

$tc-silver-110

$tc-silver-100

$tc-bronze-130

$tc-bronze-110

$tc-bronze-100

Pastel Colors

$tc-pastel-blue

$tc-pastel-crimson

$tc-pastel-green

$tc-pastel-yellow

Community Achievement Colors

$tc-level-1

$tc-level-2

$tc-level-3

$tc-level-4

$tc-level-5