@commitchange/color-variables

color-variables

includes precss variables of color values. intended to use with postcss.

$red: #ef3b22; 
$red-dark: color($red l(-10%));
$red-light: color($red l(97%));

$green: #5fb88d;
$green-light: color($green l(97%));
$green-dark: color($green l(-10%));
$green-darker: color($green l(-15%));

$blue: #39aad6;
$blue-light: color($blue l(97%));
$blue-dark: color($blue l(-10%));
$blue-darker: color($blue l(-15%));

$yellow: rgb(239, 220, 94);
$yellow-light: color($yellow l(97%)); 

example:

package.json

{
  "scripts": {
    "build-css": "postcss -c postcss-config.js",
    "watch-css": "postcss -c postcss-config.js -w"
   },
  "devDependencies": {
    "postcss",
    "postcss-cli",
    "postcss-import",
    "precss",
    "postcss-color-function",
    "@commitchange/color-variables"
  }
  etc...
}

postcss-config.js

module.exports = {
  use: ['postcss-import', 'precss', 'postcss-color-function']
, 'local-plugins' : true
, input: 'index.css'
, output: 'build.css'
}

index.css

@import '@commitchange/color-variables';

a {
	color: $blue;
}

a:hover {
	color: $blue-dark;
}

npm run watch-css