sass-planifolia

Vanilla Sass helper functions
git clone https://git.ce9e.org/sass-planifolia.git

commit
fb68b376ec093a3920205ef847435eeef73e92fc
parent
610eb48f28449eb7b9a417dc682d057206335935
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2018-03-29 07:04
color: use deg as primary angle unit (fixes #5)

Diffstat

M sass/color.scss 9 +++++----
M test/color.js 72 ++++++++++++++++++++++++++++++++++++++++--------------------

2 files changed, 53 insertions, 28 deletions


diff --git a/sass/color.scss b/sass/color.scss

@@ -201,7 +201,7 @@ $planifolia-colorspace: 'lab' !default;
  201   201     $h: atan2(nth($lab, 3), nth($lab, 2)) * 1rad;
  202   202   }
  203   203 
  204    -1   @return ($l, $c, $h);
   -1   204   @return ($l, $c, 0deg + $h);
  205   205 }
  206   206 
  207   207 @function _pf-lch-to-lab($lch) {
@@ -251,7 +251,7 @@ $planifolia-colorspace: 'lab' !default;
  251   251     $max: _pf-max-chroma(nth($lch, 1), nth($lch, 3), 'luv');
  252   252     @return (nth($lch, 1), nth($lch, 2) / $max * 100, nth($lch, 3));
  253   253   } @else if $colorspace == 'hsl' {
  254    -1     @return (lightness($color) / 1%, saturation($color) / 1%, hue($color) / 1rad * 1rad);
   -1   254     @return (lightness($color) / 1%, saturation($color) / 1%, hue($color));
  255   255   } @else if $colorspace == 'yuv' {
  256   256     $yuv: _pf-to-yuv($color);
  257   257     @return _pf-lab-to-lch($yuv);
@@ -301,6 +301,7 @@ $planifolia-colorspace: 'lab' !default;
  301   301 /// @require sin
  302   302 /// @require cos
  303   303 @function lch($lightness, $chroma, $hue, $colorspace: $planifolia-colorspace) {
   -1   304   $hue: 0deg + $hue;
  304   305   $rgb: _lch-unclipped($lightness, $chroma, $hue, $colorspace);
  305   306 
  306   307   @if _pf-clip-needed($rgb) {
@@ -496,8 +497,8 @@ $planifolia-colorspace: 'lab' !default;
  496   497   $h1: nth($lch1, 3);
  497   498   $h2: nth($lch2, 3);
  498   499 
  499    -1   @while abs($h2 - $h1) > pi() * 1rad {
  500    -1     $h1: $h1 + if($h1 < $h2, 2, -2) * pi() * 1rad;
   -1   500   @while abs($h2 - $h1) > 180deg {
   -1   501     $h1: $h1 + if($h1 < $h2, 360deg, -360deg);
  501   502   }
  502   503 
  503   504   $h: ($h1 * $w1 + $h2 * $w2) / ($w1 + $w2);

diff --git a/test/color.js b/test/color.js

@@ -13,16 +13,22 @@ describe('color', function() {
   13    13   describe('lab', function() {
   14    14     describe('lch', function() {
   15    15       it('white', function() {
   16    -1         sassaby.func('lch').calledWithArgs('100', '0', '0').equals('white');
   -1    16         sassaby.func('lch').calledWithArgs('100', '0', '0rad').equals('white');
   17    17       });
   18    18       it('black', function() {
   19    -1         sassaby.func('lch').calledWithArgs('0', '0', '0').equals('black');
   -1    19         sassaby.func('lch').calledWithArgs('0', '0', '0rad').equals('black');
   20    20       });
   21    -1       it('red', function() {
   22    -1         sassaby.func('lch').calledWithArgs('53.23288', '104.57421', '0.69818').equals('red');
   -1    21       it('red (rad)', function() {
   -1    22         sassaby.func('lch').calledWithArgs('53.23288', '104.57421', '0.69818rad').equals('red');
   -1    23       });
   -1    24       it('red (deg)', function() {
   -1    25         sassaby.func('lch').calledWithArgs('53.23288', '104.57421', '40deg').equals('red');
   -1    26       });
   -1    27       it('red (unitless)', function() {
   -1    28         sassaby.func('lch').calledWithArgs('53.23288', '104.57421', '40').equals('red');
   23    29       });
   24    30       it('blue', function() {
   25    -1         sassaby.func('lch').calledWithArgs('32.30259', '133.80605', '-0.93744').equals('blue');
   -1    31         sassaby.func('lch').calledWithArgs('32.30259', '133.80605', '-0.93744rad').equals('blue');
   26    32       });
   27    33     });
   28    34 
@@ -64,16 +70,16 @@ describe('color', function() {
   64    70         shared.similar(sassaby.func('pf-hue').calledWithArgs('black'), 0);
   65    71       });
   66    72       it('red', function() {
   67    -1         shared.similar(sassaby.func('pf-hue').calledWithArgs('red'), 0, 1);
   -1    73         shared.similar(sassaby.func('pf-hue').calledWithArgs('red'), 40.0027);
   68    74       });
   69    75       it('yellow', function() {
   70    -1         shared.similar(sassaby.func('pf-hue').calledWithArgs('yellow'), Math.PI * 0.5, 1);
   -1    76         shared.similar(sassaby.func('pf-hue').calledWithArgs('yellow'), 102.85403);
   71    77       });
   72    78       it('green', function() {
   73    -1         shared.similar(sassaby.func('pf-hue').calledWithArgs('green'), Math.PI, 1);
   -1    79         shared.similar(sassaby.func('pf-hue').calledWithArgs('green'), 136.0155);
   74    80       });
   75    81       it('blue', function() {
   76    -1         shared.similar(sassaby.func('pf-hue').calledWithArgs('blue'), Math.PI * -0.5, 1);
   -1    82         shared.similar(sassaby.func('pf-hue').calledWithArgs('blue'), -53.71132);
   77    83       });
   78    84     });
   79    85 
@@ -153,16 +159,22 @@ describe('color', function() {
  153   159   describe('luv', function() {
  154   160     describe('lch', function() {
  155   161       it('white', function() {
  156    -1         sassaby.func('lch').calledWithArgs('100', '0', '0', 'luv').equals('white');
   -1   162         sassaby.func('lch').calledWithArgs('100', '0', '0rad', 'luv').equals('white');
  157   163       });
  158   164       it('black', function() {
  159    -1         sassaby.func('lch').calledWithArgs('0', '0', '0', 'luv').equals('black');
   -1   165         sassaby.func('lch').calledWithArgs('0', '0', '0rad', 'luv').equals('black');
  160   166       });
  161    -1       it('red', function() {
  162    -1         sassaby.func('lch').calledWithArgs('53.23288', '179.07872', '0.21245', 'luv').equals('red');
   -1   167       it('red (rad)', function() {
   -1   168         sassaby.func('lch').calledWithArgs('53.23288', '179.07872', '0.21245rad', 'luv').equals('red');
   -1   169       });
   -1   170       it('red (deg)', function() {
   -1   171         sassaby.func('lch').calledWithArgs('53.23288', '179.07872', '12.1725deg', 'luv').equals('red');
   -1   172       });
   -1   173       it('red (unitless)', function() {
   -1   174         sassaby.func('lch').calledWithArgs('53.23288', '179.07872', '12.1725', 'luv').equals('red');
  163   175       });
  164   176       it('blue', function() {
  165    -1         sassaby.func('lch').calledWithArgs('32.30259', '130.69138', '-1.64278', 'luv').equals('blue');
   -1   177         sassaby.func('lch').calledWithArgs('32.30259', '130.69138', '-1.64278rad', 'luv').equals('blue');
  166   178       });
  167   179     });
  168   180 
@@ -204,16 +216,16 @@ describe('color', function() {
  204   216         shared.similar(sassaby.func('pf-hue').calledWithArgs('black', 'luv'), 0);
  205   217       });
  206   218       it('red', function() {
  207    -1         shared.similar(sassaby.func('pf-hue').calledWithArgs('red', 'luv'), 0, 1);
   -1   219         shared.similar(sassaby.func('pf-hue').calledWithArgs('red', 'luv'), 12.17245);
  208   220       });
  209   221       it('yellow', function() {
  210    -1         shared.similar(sassaby.func('pf-hue').calledWithArgs('yellow', 'luv'), Math.PI * 0.5, 1);
   -1   222         shared.similar(sassaby.func('pf-hue').calledWithArgs('yellow', 'luv'), 85.87536);
  211   223       });
  212   224       it('green', function() {
  213    -1         shared.similar(sassaby.func('pf-hue').calledWithArgs('green', 'luv'), Math.PI, 1);
   -1   225         shared.similar(sassaby.func('pf-hue').calledWithArgs('green', 'luv'), 127.71994);
  214   226       });
  215   227       it('blue', function() {
  216    -1         shared.similar(sassaby.func('pf-hue').calledWithArgs('blue', 'luv'), Math.PI * -0.5, 1);
   -1   228         shared.similar(sassaby.func('pf-hue').calledWithArgs('blue', 'luv'), -94.12464);
  217   229       });
  218   230     });
  219   231 
@@ -270,12 +282,24 @@ describe('color', function() {
  270   282   });
  271   283 
  272   284   describe('hsl', function() {
  273    -1     describe('hsl', function() {
   -1   285     describe('lch', function() {
  274   286       it('white', function() {
  275    -1         sassaby.func('lch').calledWithArgs('100', '0', '0', 'hsl').equals('white');
   -1   287         sassaby.func('lch').calledWithArgs('100', '0', '0rad', 'hsl').equals('white');
  276   288       });
  277   289       it('black', function() {
  278    -1         sassaby.func('lch').calledWithArgs('0', '0', '0', 'hsl').equals('black');
   -1   290         sassaby.func('lch').calledWithArgs('0', '0', '0rad', 'hsl').equals('black');
   -1   291       });
   -1   292       it('red', function() {
   -1   293         sassaby.func('lch').calledWithArgs('50', '100', '0rad', 'hsl').equals('red');
   -1   294       });
   -1   295       it('blue (rad)', function() {
   -1   296         sassaby.func('lch').calledWithArgs('50', '100', '4.18879rad', 'hsl').equals('blue');
   -1   297       });
   -1   298       it('blue (deg)', function() {
   -1   299         sassaby.func('lch').calledWithArgs('50', '100', '240deg', 'hsl').equals('blue');
   -1   300       });
   -1   301       it('blue (unitless)', function() {
   -1   302         sassaby.func('lch').calledWithArgs('50', '100', '240', 'hsl').equals('blue');
  279   303       });
  280   304     });
  281   305 
@@ -320,13 +344,13 @@ describe('color', function() {
  320   344         shared.similar(sassaby.func('pf-hue').calledWithArgs('red', 'hsl'), 0);
  321   345       });
  322   346       it('yellow', function() {
  323    -1         shared.similar(sassaby.func('pf-hue').calledWithArgs('yellow', 'hsl'), Math.PI / 3);
   -1   347         shared.similar(sassaby.func('pf-hue').calledWithArgs('yellow', 'hsl'), 60);
  324   348       });
  325   349       it('green', function() {
  326    -1         shared.similar(sassaby.func('pf-hue').calledWithArgs('green', 'hsl'), Math.PI / 3 * 2);
   -1   350         shared.similar(sassaby.func('pf-hue').calledWithArgs('green', 'hsl'), 120);
  327   351       });
  328   352       it('blue', function() {
  329    -1         shared.similar(sassaby.func('pf-hue').calledWithArgs('blue', 'hsl'), Math.PI / 3 * 4);
   -1   353         shared.similar(sassaby.func('pf-hue').calledWithArgs('blue', 'hsl'), 240);
  330   354       });
  331   355     });
  332   356