# rework-shade

> shade lighten and darken plugin for the Rework CSS preprocessing library

Latest version **1.4.3** (published 2013-08-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install rework-shade
pnpm add rework-shade
yarn add rework-shade
bun add rework-shade
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.3 |
| Published | 2013-08-16 |
| First published | 2013-06-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | James Doyle |
| Maintainers | james2doyle |
| Keywords | css, rework, lighten, darken, shade, shades |

## Links

- npm: https://www.npmjs.com/package/rework-shade
- Repository: https://github.com/james2doyle/rework-shade
- Issues: https://github.com/james2doyle/rework-shade/issues
- npm.io page: https://npm.io/package/rework-shade

## Dependencies (3)

- [color-parser](https://npm.io/package/color-parser.md) *
- [rework-visit](https://npm.io/package/rework-visit.md) *
- [color-convert](https://npm.io/package/color-convert.md) ~0.3.1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.4.3 (latest) — 2013-08-16
- 1.4.2 — 2013-07-10
- 1.4.1 — 2013-07-10
- 1.4.0 — 2013-07-10
- 1.3.0 — 2013-07-10
- 1.2.0 — 2013-07-03
- 1.0.1 — 2013-06-23
- 1.0.0 — 2013-06-22

## README

rework-shade
================

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);
}
```

---
_Source: https://npm.io/package/rework-shade · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._