README
simple-colors-scss
Simple-colors-scss is a map based color manager for SCSS.
It aims towards simple setup, utilization and extendibility.
Installation:
Install the package using NPM:
npm install simple-colors-scss --save
Setup:
Create a empty theme file from the project directory:
npm run create --prefix ./node_modules/simple-colors-scss
Import the package and newly created _colors.scss
into your stylesheet (before other logic):
1. @import 'your_project/node_modules/simple-colors-scss/core';
2. @import 'your_project/colors';
Setting colors:
A color scheme is a map of color codes and bindings inside _colors.scss
.
Add unique colors to the $colors
variable:
(These use name-that-color)
$colors: {
// Named colors (HEX):
'white': #FFF,
'deep-orange': #BDBDBD,
'alizarin-crimson': #E32636
// but we can use other color systems:
'purple-rgb': rgb(255,0,128),
'white-rgba-33' rgba(255,255,255, .33),
'blue-hsl': hsl(240, 100%, 50%),
// or metavalues
'transparent': transparent
}
Next add custom bindings, shorthands and variations to $bindings
using the color() function:
$binding: {
// use shorthands
'orange': color('deep-orange'),
'pink': color('alizarin-crimson'),
// or variations
'orange-light': lighten(color('deep-orange'), 30%),
'orange-dark': darken(color('deep-orange'), 30%),
// or theming
'primary': color('alizarin-crimson'),
'primary-text': color('white'),
// or complex colors
'border-y': color('orange-dark') color('none'),
'gradient': linear-gradient(to left, color('deep-orange'), color('alizarin-crimson'))
}
Using color():
Next to $bindings
the color()
function is used in your regular SCSS to fetch colors:
background-image: color("blue-hsl");
Check out simple-colors-scss-helpers for mixins
@import "your/project/node_modules/simple-colors-scss";
@include bg('blue-hsl'); // will produce the same
If the value is either indefined or unknow it will fail gracefully.
// @debug "Unknown color: #{$key}
found, value could not be set";
## Use it:
Now you can do things like:
color: color('white'); background-color(color('orange-dark')); border: 1px solid color('border-y');