Teamleader UI colors

Downloads in past


101.1.03 months ago6 years agoMinified + gzip package size for @teamleader/ui-colors in KB


Teamleader UI Colors
Teamleader UI colors is a package that defines the colors that we use in our UI package and projects. The colors are defined as CSS variables and as a JavaScript map (with some helpers).
Our colors are
  • aqua
  • gold
  • neutral
  • mint
  • ruby
  • teal
  • violet

For each color there are 5 tints.
  • lightest
  • light
  • normal
  • dark
  • darkest



yarn add @teamleader/ui-colors
npm install @teamleader/ui-colors


Import the css file in your css
@import '@teamleader/ui-colors';

The available color variables are

The colors are defined as hsl values. For each color the h, s an l value are also available as separate variables. There is also a variable that has the hsl values combined. This way you can do color calculations on them with native css (instead of using postcss-color plugin for example). Some examples:
hsl(var(--color-ruby-hsl-h), var(--color-ruby-hsl-s), calc(var(--color-ruby-hsl-l) - 12%))

hsl(var(--color-ruby-h), var(--color-ruby-s), calc(var(--color-ruby-l) * 1.64))

hsl(var(--color-ruby-hsl), 12%))


import { COLOR, COLORS, TINTS, colorsWithout, tintsWithout } from '@teamleader/ui-colors/constants';

COLOR: an object that contains the colors as hex values (e.g. COLOR.MINT.DARKEST).
COLORS: an array with the color names (['aqua', 'gold', 'neutral', 'mint', 'ruby', 'teal', 'violet']).
TINTS: an array with the tint names (['lightest', 'light', 'normal', 'dark', 'darkest']).
colorsWithout: a function to get an array of colors without a given array of colors (colorsWithout(['neutral', 'violet]))
tintsWithout: a function to get an array of tints without a given array of tints (tintsWithout(['light', 'lightest]))