@teamleader/ahoy

Ahoy!

Ahoy is a set of React components that implement the Teamleader design specification.

Installation

Ahoy can be installed as an npm package:

$ npm install --save @teamleader/ahoy

or

$ yarn install @teamleader/ahoy

Basic usage

In this minimal example, we import a Button with styles already bundled:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@teamleader/ahoy';

ReactDOM.render(<Button label="Hello World!" />, document.getElementById('app'));

Import the CSS into your project via JS or CSS.

JS

import '@teamleader/ahoy/es/index.css';

or CSS

@import url('@teamleader/ahoy/es/index.css');

Colors

The colors of the Ahoy system are:

• aqua
• gold
• neutral
• mint
• ruby
• teal
• violet

For each color there are 5 tints.

• lightest
• light
• normal
• dark
• darkest

CSS

The available color variables are

--color-aqua-lightest
--color-aqua-light
--color-aqua
--color-aqua-dark
--color-aqua-darkest
--color-gold-lightest
--color-gold-light
--color-gold
--color-gold-dark
--color-gold-darkest
--color-neutral-lightest
--color-neutral-light
--color-neutral
--color-neutral-dark
--color-neutral-darkest
--color-mint-lightest
--color-mint-light
--color-mint
--color-mint-dark
--color-mint-darkest
--color-ruby-lightest
--color-ruby-light
--color-ruby
--color-ruby-dark
--color-ruby-darkest
--color-teal-lightest
--color-teal-light
--color-teal
--color-teal-dark
--color-teal-darkest
--color-violet-lightest
--color-violet-light
--color-violet
--color-violet-dark
--color-violet-darkest
--color-black
--color-white

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:

lighten(12%)

hsl(var(--color-ruby-hsl-h), var(--color-ruby-hsl-s), calc(var(--color-ruby-hsl-l) - 12%))

tint(64%)

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

alpha(12%)

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

JavaScript

import { COLOR, COLORS, TINTS, colorsWithout, tintsWithout } from '@teamleader/ahoy';

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]))

Browser support

This library officially supports the last two versions of the major browsers. This is mainly because of dependencies and ease of mind.

• Luxon browser support

License

This project is licensed under the terms of the MIT license.