From 89f649a4fc51336ea18310661661afcd2a022544 Mon Sep 17 00:00:00 2001 From: Miriam Suzanne Date: Sat, 25 Apr 2020 23:23:14 -0600 Subject: [PATCH] Initial features & docs --- .sassdocrc | 5 +- CHANGELOG.md | 4 + CONTRIBUTING.md | 1 + README.md | 62 +- demo/style.css.map | 2 +- docs/CHANGELOG.html | 13 +- docs/CONTRIBUTING.html | 7 +- docs/LICENSE.html | 6 +- docs/adjust-from.html | 764 ------------ docs/adjust.html | 2239 +++++++++++++++++++++++++++++++++++ docs/cie-formats.html | 170 ++- docs/cie-inspect.html | 216 +++- docs/contrast.html | 145 ++- docs/index.html | 64 +- docs/search-data.json | 2 +- docs/search.html | 6 +- package.json | 7 +- sass/adjust/_channels.scss | 136 +++ sass/adjust/_from.scss | 15 +- sass/adjust/_index.scss | 1 + sass/adjust/_parse.scss | 101 +- sass/adjust/_utils.scss | 36 + sass/cie/_api.scss | 6 +- sass/cie/_lch.scss | 2 +- sass/inspect/_cie.scss | 38 +- sass/inspect/_contrast.scss | 1 + sass/utils/_units.scss | 6 + src/json.css | 3 + src/json.css.map | 1 + src/json.scss | 39 + test/adjust/_channels.scss | 38 + test/adjust/_index.scss | 2 + test/adjust/_parse.scss | 121 +- test/adjust/_utils.scss | 74 ++ test/utils/_units.scss | 24 + 35 files changed, 3443 insertions(+), 914 deletions(-) delete mode 100644 docs/adjust-from.html create mode 100644 docs/adjust.html create mode 100644 sass/adjust/_channels.scss create mode 100644 sass/adjust/_utils.scss create mode 100644 src/json.css create mode 100644 src/json.css.map create mode 100644 src/json.scss create mode 100644 test/adjust/_channels.scss create mode 100644 test/adjust/_utils.scss diff --git a/.sassdocrc b/.sassdocrc index 740450a..8e23041 100644 --- a/.sassdocrc +++ b/.sassdocrc @@ -10,7 +10,7 @@ groups: Color Functions: cie-formats: Lab & LCH Formats contrast: Color Contrast - adjust-from: Relative Colors + adjust: Relative Colors cie-inspect: Inspecting Colors herman: @@ -18,6 +18,7 @@ herman: implementation: sass includepaths: ['sass'] use: ['blend'] + jsonfile: 'src/json.css' extraDocs: - name: 'Changelog' path: CHANGELOG.md @@ -26,6 +27,8 @@ herman: - name: 'Hipocratic MIT License' path: LICENSE.md extraLinks: + - name: 'LCH Color Picker' + url: 'https://css.land/lch/' - name: 'CSS Colors Level 4' url: 'https://www.w3.org/TR/css-color-4/' - name: 'CSS Colors Level 5' diff --git a/CHANGELOG.md b/CHANGELOG.md index 9ee1cfa..c232622 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,10 @@ - `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: + - `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 in order to adjust CIE lightness, chroma, and hue -- using a syntax roughly based on diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5fd9ce2..e2aa36a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -32,6 +32,7 @@ Any major code changes should also update the tests/docs. - `yarn docs` will build the documentation site - `yarn sass` will re-compile the code in `demo/` (mainly for experiments as you work) +- `yarn commit` to run all three ## Conduct diff --git a/README.md b/README.md index 3d9473f..f37f42a 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,11 @@ 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/ -Conversion math is adapted from js functions by +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/). @@ -32,20 +36,31 @@ Download the files from GitHub, or install the npm package: npm install @mirisuzanne/blend --save-dev ``` +Import with Dart Sass + ```scss @use '/blend'; +``` + +### Lab & LCH Formats -// (CIE) LCH & Lab color-conversion into (sRGB) sass colors +(CIE) LCH & Lab color-conversion into (sRGB) sass colors: + +```scss $cie-to-sass: ( blend.lch(30% 50 300), blend.lab(60% -60 60), - // both accept alpha channel blend.lch(60% 75 120, 50%), // as % blend.lab(60% -60 60, 0.5), // or as fraction ); +``` + +### Color Contrast + +Based on the proposed Level 5 color-contrast() function: -// Based on the proposed Level 5 color-contrast() function +```scss $contrast: ( // default black or white for best contrast blend.contrast($color), @@ -54,8 +69,13 @@ $contrast: ( // first color with contrast >= 4.5 blend.contrast($color, maroon, rebeccapurple, 4.5), ); +``` -// Inspect LCH & Lab values of Sass colors +### Inspecting Colors + +Inspect LCH & Lab values of Sass colors: + +```scss $inspect: ( blend.lightness($color), blend.a($color), @@ -63,8 +83,28 @@ $inspect: ( blend.chroma($color), blend.hue($color), ); +``` + +### Relative Colors + +Relative Sass color adjustments using LCH & Lab channels + +```scss +$adjust: ( + // set chroma to 10 + blend.set($color, $chroma: 10), + // adjust hue by -10 + blend.adjust($color, $hue: -10), + // scale lightness 10% lighter + blend.scale($color, $lightness: 10%), +); +``` -// A rough interpretation of the Level 5 relative color syntax +A relative-color shorthand, +based on rough interpretation +of the Level 5 relative color syntax: + +```scss $from: ( // set chroma to 20 blend.from($color, l, 20, h), @@ -86,16 +126,6 @@ We're working on it… ```scss @use 'blend'; -// a more verbose syntax for relative color adjustments -$adjust: ( - // set chroma to 10 - blend.set($color, $chroma: 10), - // adjust hue by -10 - blend.adjust($color, $hue: -10), - // scale lightness 10% lighter - blend.scale($color, $lightness: 10%), -); - $new-formats: ( blend.hwb(120deg 15% 15%), blend.color(display-p3 0.728 0.2824 0.4581), diff --git a/demo/style.css.map b/demo/style.css.map index 4335987..4f95700 100644 --- a/demo/style.css.map +++ b/demo/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAoBA;EACE,kBACE;EAGF;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAYA;EACE,kBACE;EAGF;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA","file":"style.css"} \ No newline at end of file diff --git a/docs/CHANGELOG.html b/docs/CHANGELOG.html index 0df1933..ed82072 100644 --- a/docs/CHANGELOG.html +++ b/docs/CHANGELOG.html @@ -102,7 +102,7 @@ @@ -122,6 +122,10 @@

Conduct

Please follow the diff --git a/docs/LICENSE.html b/docs/LICENSE.html index 45e38c7..a2f8aca 100644 --- a/docs/LICENSE.html +++ b/docs/LICENSE.html @@ -102,7 +102,7 @@

@@ -122,6 +122,10 @@