Napoleonic Political Magnificence

npm

Bring the best of OSS JavaScript development to your projects with npm Orgs - private packages & team management tools.Learn more »

rework-shade

1.4.3 • Public • Published

rework-shade

Lighten and darken function for the Rework CSS preprocessing library.

This plugin is meant to share both the syntax and results of the stylus version. You can use shade({color}, +/-{amount}) or the stylus syntax of lighten|darken({color}, {amount}%).

Usage

Install the package via NPM.

npm install rework-shade
body {
  padding: 10px;
  background: shade(rgba(0, 0, 0, 0.5)5);
}
 
/* using points */
.stuff {
  color: shade(rgb(0, 200, 50)1.3);
}
 
.bright {
  background: shade(#00408030);
}
 
.dark {
  background: shade(#fff-50);
}

yields:

body {
  padding: 10px;
  background: rgba(13, 13, 13, 0.5);
}
 
.stuff {
  color: rgb(3, 203, 53);
}
 
.bright {
  background: rgb(77, 141, 205);
}
 
.dark {
  background: rgb(128, 128, 128);
}

Amount explained

The amount you put, is the percentage of lightness that you want to increase or decrease the color by. We use HSL and adjust the lightness. The math used is identical to how Stylus handles it.

/* stylus in */
body {
  color: lighten(rgb(0,0,0)10%);
}
/* stylus out */
body {
  color: #1a1a1a; // or rgb(26,26,26)
}
/* rework-shades in */
body {
  color: shade(rgb(0,0,0)10);
}

yields:

/* rework-shades out */
body {
  color: rgb(26, 26, 26);
}

rework-vars support

Just make sure you run/use rework-vars before shades:

:root {
  var-linkColor: #cccccc;
}
 
body {
  color: shade(var(linkColor)-10);
  background: shade(rgba(0, 0, 0, 0.5)10);
}
:root {
  var-linkColor: #cccccc;
}
 
body {
  color: rgb(179, 179, 179);
  background: rgba(26, 26, 26, 0.5);
}

Keywords

none

install

npm i rework-shade

Downloadsweekly downloads

16

version

1.4.3

license

none

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability