https://github.com/james2doyle/rework-shade
Lighten and darken plugin for the Rework CSS preprocessing library. Parity with the Stylus version.
https://github.com/james2doyle/rework-shade
Last synced: 8 months ago
JSON representation
Lighten and darken plugin for the Rework CSS preprocessing library. Parity with the Stylus version.
- Host: GitHub
- URL: https://github.com/james2doyle/rework-shade
- Owner: james2doyle
- Created: 2013-06-22T18:26:19.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2014-07-17T13:58:10.000Z (almost 12 years ago)
- Last Synced: 2025-04-15T13:45:01.817Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 177 KB
- Stars: 12
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
rework-shade
================
### Depreciated
Check out these other color libraries instead.
* [rework-color-function](https://github.com/ianstormtaylor/rework-color-function "rework-color-function")
* [rework-plugin-colors](https://github.com/reworkcss/rework-plugin-colors/ "rework-plugin-colors")
* [rework-color](https://github.com/kristoferjoseph/rework-color "rework-color")
If you wanted to fork this and update it, well please do!
Lighten and darken function for the [Rework](https://github.com/visionmedia/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.
```shell
npm install rework-shade
```
```css
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(#004080, 30);
}
.dark {
background: shade(#fff, -50);
}
```
yields:
```css
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.
```css
/* stylus in */
body {
color: lighten(rgb(0,0,0), 10%);
}
```
```css
/* stylus out */
body {
color: #1a1a1a; // or rgb(26,26,26)
}
```
```css
/* rework-shades in */
body {
color: shade(rgb(0,0,0), 10);
}
```
yields:
```css
/* rework-shades out */
body {
color: rgb(26, 26, 26);
}
```
### rework-vars support
Just make sure you run/use rework-vars before shades:
```css
:root {
var-linkColor: #cccccc;
}
body {
color: shade(var(linkColor), -10);
background: shade(rgba(0, 0, 0, 0.5), 10);
}
```
```css
:root {
var-linkColor: #cccccc;
}
body {
color: rgb(179, 179, 179);
background: rgba(26, 26, 26, 0.5);
}
```