Color

Purpose

The color package allows users to generate colors approved by the design system.

The default export of @wedgekit/color is an object in which each key is a ColorTag and each value is a color represented in hex.

Usage

import styled from 'styled-components';

import color from '@wedgekit/color';

const ColorSwatch = styled.div`
  height: 90px;
  width: 90px;
  background: ${color.G700};
`;

const Example = () => <ColorSwatch />;

render(<Example />);

ColorTag

A ColorTag is a string that combines a color family abbreviation (i.e. Blue -> B) and three digit number indicating a color in that family. As a rule, higher numbers are darker. For example:

color.N700 is black.

color.N050 is white.

Further reading on avaliable colors avaliable here

Usage

import { ColorTag } from '@wedgekit/color';

Other Exports

contextualize

getContrastColors

hexToRGBA