color-shader v0.1.1

Color Shader

Installation

npm install color-shader

Basic usage

The shadeColors method takes in an object of colors with values defined in hex-format.

import shadeColors from 'color-shader;

const colors = {
	'primary': '#116466',
	'secondary': '#D9B08C',
	'accent': '#D1E8E2',
	'grey': '#71717A'
};

const shadedColors = shadeColors(colors);

shadedColors now have autocompletion with the following properties:

• primary-50
• primary-100
• primary-200
• primary-300
• primary-400
• primary-500
• primary-600
• primary-700
• primary-800
• primary-900

And so on for the other colors..

The method also has a parameter which allows the algorithm to change the saturation of the generated colors in a more optionated way. To enable this, pass true as the second parameter.

const shadedColors = shadeColors(colors, true);

Usage with TailwindCSS

Inside tailwind.config.js:

import shadeColors from 'color-shader';

const dynamicColors = {
	'primary': '#116466',
	'secondary': '#D9B08C',
	'accent': '#D1E8E2',
	'grey': '#71717A'
};

const staticColors = {
	'transparent': 'transparent',
	'current': 'currentColor',
	'white': '#fff',
	'black': '#000',
	'info': '#60A5FA',
	'warning': '#FDE047',
	'danger': '#EF4545',
	'success': '#4ADE80'
};

module.exports = {
	presets: {
		theme: {
			colors:  {...shadeColors(dynamicColors ), ...staticColors},
		}
	}
};

Usage with vanilla-extract

import { createGlobalTheme } from '@vanilla-extract/css';
import shadeColors from 'color-shader';

const dynamicColors = {
	'primary': '#116466',
	'secondary': '#D9B08C',
	'accent': '#D1E8E2',
	'grey': '#71717A'
};

const staticColors = {
	'transparent': 'transparent',
	'current': 'currentColor',
	'white': '#fff',
	'black': '#000',
	'info': '#60A5FA',
	'warning': '#FDE047',
	'danger': '#EF4545',
	'success': '#4ADE80'
};

const vars = createGlobalTheme(':root', {
	color: {...shadeColors(dynamicColors ), ...staticColors},
});

export default vars;