simple-colors-scss

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');