Tailwind config

Installation

To install, type the following into the command line at the root of your project:

npm i @brighthr/tailwind-config

Import

Import into your tailwind.config.js file and extend the theme:

const {colors, keyframes, animation} = require('@brighthr/tailwind-config');

module.exports = {
	theme: {
		extend: {
			colors: ...colors,
			keyframes: ...keyframes,
			animation: ...animation,
		}
	}
};

Consume the new color names

There are a number of changes to color names in existing projects that will need to be updated to reflect the new names. They are detailed below. (This may not be 100% comprehensive but they are the ones I experienced when updating Bright Lightning - Stel).

• brand-100 -> primary-50
• brand-200 -> primary-100
• brand-300 -> primary-200
• brand-400 -> primary-400
• brand-500 -> primary-700
• brand-link -> link-link
• secondary-100 -> accent-50
• secondary-200 -> accent-200
• secondary-300 -> accent-400
• secondary-400 -> accent-500
• secondary-hover -> accent-700
• gray-100 -> neutral-50
• gray-200 -> neutral-100
• gray-300 -> neutral-200
• gray-400 -> neutral-300
• gray-500 -> neutral-400
• gray-600 -> neutral-500
• gray-700 -> neutral-600
• gray-800 -> neutral-700
• gray-900 -> neutral-700
• positive -> success-100
• negative -> error-50

This is to reduce the number of random colours that don't fit in with style guidelines. If there is a colour that doesn't translate, please ask your local UX designer or in the brighter-components channel on slack.