This package has been deprecated

Author message:

WARNING: This project has been renamed to @oddbird/blend. Install using @oddbird/blend instead.

@mirisuzanne/blend

0.1.1 • Public • Published

blend

More color spaces for Dart Sass

Very much a work in progress. Based heavily on js functions by Chris Lilley and Tab Atkins.

npm install @mirisuzanne/blend --save-dev

Usage

So far, there is very little user-facing API, and basically no documentation, but we'll get that fixed. Here are the basics:

@use '<path/to>/blend';

main {
  // returns a Sass `color`
  color: blend.lch(65% 75 0);

  // optional alpha value
  background: blend.lch(10% 15 280, 85%);
}

There is only one setting:

// $gamut-correct --
// - `true` [default]: Chroma is reduced until in-gamut
// - `false`: Individual RGB channels will be clipped
// - `null`: Return `null` for out-of-gamut colors
@use '<path/to>/blend' with ($gamut-correct: false);

If you want more explicit control, use <path/to>/blend/sass/lab/lch, and access functions directly:

  • lch.to-rgb() does the conversion math on an array of channels
  • lch.in-gamut() returns either the converted channels or null for out-of-gamut colors
  • lch.gamut-correct() uses chroma-reduction to get a color in-gamut
  • lch.color() takes LCH input and returns a Sass color based on the chosen form of gamut-correction

Development & Testing

git clone git@github.com:mirisuzanne/blend.git
cd blend
yarn

The demo html & sass are in demo/.

  • Change the values of $channels and $range to generate a new gradient
  • Play with blend.lch($lch, $a) for direct access to colors
  • yarn sass to compile (gradients take ~6s)
  • yarn test to run the tests

ToDo:

  • [ ] Option to return CSS string rather than Sass color
  • [ ] Other color spaces
  • [ ] Documentation

Dependents (0)

Package Sidebar

Install

npm i @mirisuzanne/blend

Weekly Downloads

0

Version

0.1.1

License

SEE LICENSE IN LICENSE.md

Unpacked Size

56.5 kB

Total Files

24

Last publish

Collaborators

  • mirisuzanne