Skip to content

Commit

Permalink
v0.2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
mirisuzanne committed Apr 27, 2020
1 parent 89f649a commit b066763
Show file tree
Hide file tree
Showing 15 changed files with 129 additions and 105 deletions.
2 changes: 1 addition & 1 deletion .sassdocrc
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,6 @@ herman:
- name: 'CSS Colors Level 5'
url: 'https://www.w3.org/TR/css-color-5/'
- name: 'GitHub Source'
url: 'https://github.com/mirisuzanne/blend/'
url: 'https://github.com/oddbird/blend/'
- name: 'OddBird'
url: 'http://oddbird.net/'
24 changes: 14 additions & 10 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,28 +1,32 @@
# Blend Changelog

## v0.2.0 - UNRELEASED
- BREAKING: Remove over-complicated settings & output options for now.
Focus on Sass <-> CIE functions.
- NEW: `lch()` hue channel accepts any angle unit
## v0.2.0 - 2020.05.27
- **BREAKING**: Moved project to [oddbird/blend][repo] on GitHub,
and [@oddbird/blend][pkg] on NPM.
- **BREAKING**: Remove over-complicated settings & output options for now.
Focus on practical Sass conversion to and from CIE functions.
- **NEW**: `lch()` hue channel accepts any angle unit
(e.g. `turn`, `rad`, `grad`, or `deg`)
- NEW: `lab($lab, $a)` returns an (sRGB) Sass color
- NEW: Inspect LCH/Lab values of a Sass color with
- **NEW**: `lab($lab, $a)` returns an (sRGB) Sass color
- **NEW**: Inspect LCH/Lab values of a Sass color with
- `lightness()`
- `a()` and `b()`
- `chroma()` and `hue()`
- NEW: `contrast()` selects the best contrast from a list
- NEW: Generate new colors based on relative LCH & Lab adjustments:
- **NEW**: `contrast()` selects the best contrast from a list
- **NEW**: Generate new colors based on relative LCH & Lab adjustments:
- `set()` to replace a channel value
- `adjust()` to add or subtract from a channel
- `scale()` to scale fluidly towards one "end" of the channel range
- NEW: `from()` converts a Sass color to LCH
- **NEW**: `from()` converts a Sass color to LCH
in order to adjust CIE lightness, chroma, and hue --
using a syntax roughly based on
[CSS Colors Level 5 relative syntax][relative]

[pkg]: https://www.npmjs.com/package/@oddbird/blend
[repo]: https://github.com/oddbird/blend/
[relative]: https://www.w3.org/TR/css-color-5/#relative-RGB

## v0.1.1 - 2020.05.06
- NEW: `lch($lch, $a)` returns an (sRGB) Sass color
- **NEW**: `lch($lch, $a)` returns an (sRGB) Sass color
- Various other now-removed things…
¯\\\_(ツ)_/¯ that's what pre-releases are for
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Ideas, issues, and pull-requests are welcome!

- [**Github Issues**](https://github.com/mirisuzanne/blend/issues/)
- [**Github Issues**](https://github.com/oddbird/blend/issues/)
are the best place to request a feature,
file a bug,
or just ask a question.
Expand Down
29 changes: 19 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,32 @@ while working with Sass colors.
[Level 4]: https://www.w3.org/TR/css-color-4/
[Level 5]: https://www.w3.org/TR/css-color-5/

See the wonderful interactive
[LCH Color Picker](https://css.land/lch/)
by [Lea Verou](http://lea.verou.me/).
We use the same conversion math,
originally written in JS by
[Chris Lilley](https://svgees.us/)
and [Tab Atkins](https://www.xanthir.com/).

Note that conversion between color-spaces
requires gamut-adjustments and rounding.
While we use the same conversion math recommended for browsers,
pre-processing can result in slight variations in each step.
Converting a color from one format to another
and back again, may result in slight differences.

## Color Picker

To get started with new CSS color formats
(and LCH in particular),
check out the wonderful
[LCH Color Picker](https://css.land/lch/)
by [Lea Verou](http://lea.verou.me/).

We use the same conversion math,
originally written in JS by
[Chris Lilley](https://svgees.us/)
and [Tab Atkins](https://www.xanthir.com/).

## Usage

Download the files from GitHub, or install the npm package:

```
npm install @mirisuzanne/blend --save-dev
npm install @oddbird/blend --save-dev
```

Import with Dart Sass
Expand Down Expand Up @@ -121,7 +126,11 @@ $from: (

The initial version is mostly focused on CIE colors,
but Level 4 includes an array of new formats.
We're working on it…
We're working on it.

See the full list of [planned enhancements][todo].

[todo]: https://github.com/oddbird/blend/issues?q=is%3Aissue+is%3Aopen+label%3Aenhancement

```scss
@use 'blend';
Expand Down
34 changes: 18 additions & 16 deletions docs/CHANGELOG.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">


<title>Changelog | @mirisuzanne/blend Documentation</title>
<title>Changelog | @oddbird/blend Documentation</title>

<link href="assets/img/favicon.ico" rel="shortcut icon">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet">
Expand Down Expand Up @@ -40,9 +40,9 @@


<div class="project-title">
<a href="index.html" rel="home" class="project-name">@mirisuzanne/blend</a>
<a href="index.html" rel="home" class="project-name">@oddbird/blend</a>

<span class="project-version">0.1.1</span>
<span class="project-version">0.2.0</span>

</div>
</header>
Expand All @@ -57,7 +57,7 @@
<div class="nav-subsection">
<h3 class="nav-home">

<a href="index.html" data-nav="is-not-active">@mirisuzanne/blend</a>
<a href="index.html" data-nav="is-not-active">@oddbird/blend</a>
</h3>


Expand Down Expand Up @@ -135,7 +135,7 @@ <h3 class="nav-title">
</li>

<li class="nav-item">
<a href="https://github.com/mirisuzanne/blend/" data-nav="is-not-active">GitHub Source</a>
<a href="https://github.com/oddbird/blend/" data-nav="is-not-active">GitHub Source</a>
</li>

<li class="nav-item">
Expand Down Expand Up @@ -175,7 +175,7 @@ <h3 class="nav-title">

<nav class="breadcrumb">

<a href="index.html" >@mirisuzanne/blend</a> »
<a href="index.html" >@oddbird/blend</a> »
<strong>Changelog</strong>
</nav>

Expand All @@ -184,36 +184,38 @@ <h3 class="nav-title">

<div class="text-block">
<h1 id="blend-changelog">Blend Changelog</h1>
<h2 id="v0-2-0-unreleased">v0.2.0 - UNRELEASED</h2>
<h2 id="v0-2-0-2020-05-27">v0.2.0 - 2020.05.27</h2>
<ul>
<li>BREAKING: Remove over-complicated settings &amp; output options for now.
Focus on Sass &lt;-&gt; CIE<span class="widont">&nbsp;</span>functions.</li>
<li>NEW: <code>lch()</code> hue channel accepts any angle unit
<li><strong>BREAKING</strong>: Moved project to <a href="https://github.com/oddbird/blend/">oddbird/blend</a> on GitHub,
and <a href="https://www.npmjs.com/package/@oddbird/blend">@oddbird/blend</a> on<span class="widont">&nbsp;</span>NPM.</li>
<li><strong>BREAKING</strong>: Remove over-complicated settings &amp; output options for now.
Focus on practical Sass conversion to and from CIE<span class="widont">&nbsp;</span>functions.</li>
<li><strong>NEW</strong>: <code>lch()</code> hue channel accepts any angle unit
(e.g. <code>turn</code>, <code>rad</code>, <code>grad</code>, or <code>deg</code>)</li>
<li>NEW: <code>lab($lab, $a)</code> returns an (sRGB) Sass<span class="widont">&nbsp;</span>color</li>
<li>NEW: Inspect LCH/Lab values of a Sass color with
<li><strong>NEW</strong>: <code>lab($lab, $a)</code> returns an (sRGB) Sass<span class="widont">&nbsp;</span>color</li>
<li><strong>NEW</strong>: Inspect LCH/Lab values of a Sass color with
<ul>
<li><code>lightness()</code></li>
<li><code>a()</code> and <code>b()</code></li>
<li><code>chroma()</code> and <code>hue()</code></li>
</ul>
</li>
<li>NEW: <code>contrast()</code> selects the best contrast from a<span class="widont">&nbsp;</span>list</li>
<li>NEW: Generate new colors based on relative LCH &amp; Lab adjustments:
<li><strong>NEW</strong>: <code>contrast()</code> selects the best contrast from a<span class="widont">&nbsp;</span>list</li>
<li><strong>NEW</strong>: Generate new colors based on relative LCH &amp; Lab adjustments:
<ul>
<li><code>set()</code> to replace a channel<span class="widont">&nbsp;</span>value</li>
<li><code>adjust()</code> to add or subtract from a<span class="widont">&nbsp;</span>channel</li>
<li><code>scale()</code> to scale fluidly towards one “end” of the channel<span class="widont">&nbsp;</span>range</li>
</ul>
</li>
<li>NEW: <code>from()</code> converts a Sass color to LCH
<li><strong>NEW</strong>: <code>from()</code> converts a Sass color to LCH
in order to adjust CIE lightness, chroma, and hue –
using a syntax roughly based on
<a href="https://www.w3.org/TR/css-color-5/#relative-RGB">CSS Colors Level 5 relative<span class="widont">&nbsp;</span>syntax</a></li>
</ul>
<h2 id="v0-1-1-2020-05-06">v0.1.1 - 2020.05.06</h2>
<ul>
<li>NEW: <code>lch($lch, $a)</code> returns an (sRGB) Sass<span class="widont">&nbsp;</span>color</li>
<li><strong>NEW</strong>: <code>lch($lch, $a)</code> returns an (sRGB) Sass<span class="widont">&nbsp;</span>color</li>
<li>Various other now-removed things…
¯\_(ツ)_/¯ that’s what pre-releases are<span class="widont">&nbsp;</span>for</li>
</ul>
Expand Down
14 changes: 7 additions & 7 deletions docs/CONTRIBUTING.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">


<title>Contributing | @mirisuzanne/blend Documentation</title>
<title>Contributing | @oddbird/blend Documentation</title>

<link href="assets/img/favicon.ico" rel="shortcut icon">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet">
Expand Down Expand Up @@ -40,9 +40,9 @@


<div class="project-title">
<a href="index.html" rel="home" class="project-name">@mirisuzanne/blend</a>
<a href="index.html" rel="home" class="project-name">@oddbird/blend</a>

<span class="project-version">0.1.1</span>
<span class="project-version">0.2.0</span>

</div>
</header>
Expand All @@ -57,7 +57,7 @@
<div class="nav-subsection">
<h3 class="nav-home">

<a href="index.html" data-nav="is-not-active">@mirisuzanne/blend</a>
<a href="index.html" data-nav="is-not-active">@oddbird/blend</a>
</h3>


Expand Down Expand Up @@ -135,7 +135,7 @@ <h3 class="nav-title">
</li>

<li class="nav-item">
<a href="https://github.com/mirisuzanne/blend/" data-nav="is-not-active">GitHub Source</a>
<a href="https://github.com/oddbird/blend/" data-nav="is-not-active">GitHub Source</a>
</li>

<li class="nav-item">
Expand Down Expand Up @@ -175,7 +175,7 @@ <h3 class="nav-title">

<nav class="breadcrumb">

<a href="index.html" >@mirisuzanne/blend</a> »
<a href="index.html" >@oddbird/blend</a> »
<strong>Contributing</strong>
</nav>

Expand All @@ -186,7 +186,7 @@ <h3 class="nav-title">
<h1 id="contributing-to-blend">Contributing to Blend</h1>
<p>Ideas, issues, and pull-requests are<span class="widont">&nbsp;</span>welcome!</p>
<ul>
<li><a href="https://github.com/mirisuzanne/blend/issues/"><strong>Github Issues</strong></a>
<li><a href="https://github.com/oddbird/blend/issues/"><strong>Github Issues</strong></a>
are the best place to request a feature,
file a bug,
or just ask a question.
Expand Down
12 changes: 6 additions & 6 deletions docs/LICENSE.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">


<title>Hipocratic MIT License | @mirisuzanne/blend Documentation</title>
<title>Hipocratic MIT License | @oddbird/blend Documentation</title>

<link href="assets/img/favicon.ico" rel="shortcut icon">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet">
Expand Down Expand Up @@ -40,9 +40,9 @@


<div class="project-title">
<a href="index.html" rel="home" class="project-name">@mirisuzanne/blend</a>
<a href="index.html" rel="home" class="project-name">@oddbird/blend</a>

<span class="project-version">0.1.1</span>
<span class="project-version">0.2.0</span>

</div>
</header>
Expand All @@ -57,7 +57,7 @@
<div class="nav-subsection">
<h3 class="nav-home">

<a href="index.html" data-nav="is-not-active">@mirisuzanne/blend</a>
<a href="index.html" data-nav="is-not-active">@oddbird/blend</a>
</h3>


Expand Down Expand Up @@ -135,7 +135,7 @@ <h3 class="nav-title">
</li>

<li class="nav-item">
<a href="https://github.com/mirisuzanne/blend/" data-nav="is-not-active">GitHub Source</a>
<a href="https://github.com/oddbird/blend/" data-nav="is-not-active">GitHub Source</a>
</li>

<li class="nav-item">
Expand Down Expand Up @@ -175,7 +175,7 @@ <h3 class="nav-title">

<nav class="breadcrumb">

<a href="index.html" >@mirisuzanne/blend</a> »
<a href="index.html" >@oddbird/blend</a> »
<strong>Hipocratic MIT License</strong>
</nav>

Expand Down
12 changes: 6 additions & 6 deletions docs/adjust.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">


<title>Relative Colors | @mirisuzanne/blend Documentation</title>
<title>Relative Colors | @oddbird/blend Documentation</title>

<link href="assets/img/favicon.ico" rel="shortcut icon">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet">
Expand Down Expand Up @@ -40,9 +40,9 @@


<div class="project-title">
<a href="index.html" rel="home" class="project-name">@mirisuzanne/blend</a>
<a href="index.html" rel="home" class="project-name">@oddbird/blend</a>

<span class="project-version">0.1.1</span>
<span class="project-version">0.2.0</span>

</div>
</header>
Expand All @@ -57,7 +57,7 @@
<div class="nav-subsection">
<h3 class="nav-home">

<a href="index.html" data-nav="is-not-active">@mirisuzanne/blend</a>
<a href="index.html" data-nav="is-not-active">@oddbird/blend</a>
</h3>


Expand Down Expand Up @@ -135,7 +135,7 @@ <h3 class="nav-title">
</li>

<li class="nav-item">
<a href="https://github.com/mirisuzanne/blend/" data-nav="is-not-active">GitHub Source</a>
<a href="https://github.com/oddbird/blend/" data-nav="is-not-active">GitHub Source</a>
</li>

<li class="nav-item">
Expand Down Expand Up @@ -175,7 +175,7 @@ <h3 class="nav-title">

<nav class="breadcrumb">

<a href="index.html" >@mirisuzanne/blend</a> »
<a href="index.html" >@oddbird/blend</a> »
<strong>Relative Colors</strong>
</nav>

Expand Down
Loading

0 comments on commit b066763

Please sign in to comment.