- commit
- ce710ee4ede139553de903dff83ea47bd4a52edd
- parent
- 0cb62ed86f87b01bdf7bfb0303fa4225bb1a1f0b
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2022-05-03 21:30
rm prefixes
Diffstat
| M | sass/color.scss | 213 | +++++++++++++++++++++++++++++++------------------------------ |
| M | sass/contrast.scss | 32 | +++++++++++++++----------------- |
| M | test/color.js | 208 | ++++++++++++++++++++++++++++++------------------------------ |
| M | test/contrast.js | 36 | ++++++++++++++++++------------------ |
4 files changed, 244 insertions, 245 deletions
diff --git a/sass/color.scss b/sass/color.scss
@@ -18,16 +18,17 @@ 18 18 /// has half the chroma of `lch(40, 100, 10deg, 'hslab')`. 19 19 //// 20 20 -1 21 @use "sass:color"; 21 22 @use "sass:math"; 22 23 23 24 /// @type string 24 25 $planifolia-colorspace: 'lab' !default; 25 2626 -1 @function _pf-perc($x) {-1 27 @function _perc($x) { 27 28 @return if(unit($x) == '%', math.div($x, 100%), $x); 28 29 } 29 3030 -1 @function _pf-clip-needed($rgb) {-1 31 @function _clip-needed($rgb) { 31 32 @for $i from 1 through 3 { 32 33 @if nth($rgb, $i) < 0 { 33 34 @return true; @@ -38,7 +39,7 @@ $planifolia-colorspace: 'lab' !default; 38 39 @return false; 39 40 } 40 4141 -1 @function _pf-srgb-to-rgb($c) {-1 42 @function _srgb-to-rgb($c) { 42 43 $c: math.div($c, 255); 43 44 @if $c <= 0.04045 { 44 45 $c: math.div($c, 12.92); @@ -48,7 +49,7 @@ $planifolia-colorspace: 'lab' !default; 48 49 @return $c * 100; 49 50 } 50 5151 -1 @function _pf-rgb-to-srgb($c) {-1 52 @function _rgb-to-srgb($c) { 52 53 $c: $c * 0.01; 53 54 @if $c <= 0.0031308 { 54 55 $c: $c * 12.92; @@ -58,10 +59,10 @@ $planifolia-colorspace: 'lab' !default; 58 59 @return $c * 255; 59 60 } 60 6161 -1 @function _pf-to-xyz($color) {62 -1 $r: _pf-srgb-to-rgb(red($color));63 -1 $g: _pf-srgb-to-rgb(green($color));64 -1 $b: _pf-srgb-to-rgb(blue($color));-1 62 @function _to-xyz($color) { -1 63 $r: _srgb-to-rgb(red($color)); -1 64 $g: _srgb-to-rgb(green($color)); -1 65 $b: _srgb-to-rgb(blue($color)); 65 66 66 67 $x: 0.4124 * $r + 0.3576 * $g + 0.1805 * $b; 67 68 $y: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b; @@ -70,22 +71,22 @@ $planifolia-colorspace: 'lab' !default; 70 71 @return ($x, $y, $z); 71 72 } 72 7373 -1 @function _pf-from-xyz($xyz) {-1 74 @function _from-xyz($xyz) { 74 75 $r: 3.2406 * nth($xyz, 1) - 1.5372 * nth($xyz, 2) - 0.4986 * nth($xyz, 3); 75 76 $g: -0.9689 * nth($xyz, 1) + 1.8758 * nth($xyz, 2) + 0.0415 * nth($xyz, 3); 76 77 $b: 0.0557 * nth($xyz, 1) - 0.204 * nth($xyz, 2) + 1.057 * nth($xyz, 3); 77 7878 -1 $r: _pf-rgb-to-srgb($r);79 -1 $g: _pf-rgb-to-srgb($g);80 -1 $b: _pf-rgb-to-srgb($b);-1 79 $r: _rgb-to-srgb($r); -1 80 $g: _rgb-to-srgb($g); -1 81 $b: _rgb-to-srgb($b); 81 82 82 83 @return ($r, $g, $b); 83 84 } 84 8585 -1 @function _pf-to-yuv($color) {86 -1 $r: _pf-srgb-to-rgb(red($color));87 -1 $g: _pf-srgb-to-rgb(green($color));88 -1 $b: _pf-srgb-to-rgb(blue($color));-1 86 @function _to-yuv($color) { -1 87 $r: _srgb-to-rgb(red($color)); -1 88 $g: _srgb-to-rgb(green($color)); -1 89 $b: _srgb-to-rgb(blue($color)); 89 90 90 91 $y: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b; 91 92 $u: -0.09991 * $r + -0.33609 * $g + 0.436 * $b; @@ -94,19 +95,19 @@ $planifolia-colorspace: 'lab' !default; 94 95 @return ($y, $v, -$u); 95 96 } 96 9797 -1 @function _pf-from-yuv($yuv) {-1 98 @function _from-yuv($yuv) { 98 99 $y: nth($yuv, 1); 99 100 $v: nth($yuv, 2); 100 101 $u: -1 * nth($yuv, 3); 101 102102 -1 $r: _pf-rgb-to-srgb($y + 1.28033 * $v);103 -1 $g: _pf-rgb-to-srgb($y + -0.21482 * $u + -0.38059 * $v);104 -1 $b: _pf-rgb-to-srgb($y + 2.12798 * $u);-1 103 $r: _rgb-to-srgb($y + 1.28033 * $v); -1 104 $g: _rgb-to-srgb($y + -0.21482 * $u + -0.38059 * $v); -1 105 $b: _rgb-to-srgb($y + 2.12798 * $u); 105 106 106 107 @return ($r, $g, $b); 107 108 } 108 109109 -1 @function _pf-xyz-to-lab-f($t) {-1 110 @function _xyz-to-lab-f($t) { 110 111 @if $t > math.div(216, 24389) { 111 112 @return math.pow($t, math.div(1, 3)); 112 113 } @else { @@ -114,12 +115,12 @@ $planifolia-colorspace: 'lab' !default; 114 115 } 115 116 } 116 117117 -1 @function _pf-xyz-to-lab($xyz) {-1 118 @function _xyz-to-lab($xyz) { 118 119 $white: (95.05, 100, 108.9); 119 120120 -1 $x: _pf-xyz-to-lab-f(math.div(nth($xyz, 1), nth($white, 1)));121 -1 $y: _pf-xyz-to-lab-f(math.div(nth($xyz, 2), nth($white, 2)));122 -1 $z: _pf-xyz-to-lab-f(math.div(nth($xyz, 3), nth($white, 3)));-1 121 $x: _xyz-to-lab-f(math.div(nth($xyz, 1), nth($white, 1))); -1 122 $y: _xyz-to-lab-f(math.div(nth($xyz, 2), nth($white, 2))); -1 123 $z: _xyz-to-lab-f(math.div(nth($xyz, 3), nth($white, 3))); 123 124 124 125 $l: 116 * $y - 16; 125 126 $a: 500 * ($x - $y); @@ -128,7 +129,7 @@ $planifolia-colorspace: 'lab' !default; 128 129 @return ($l, $a, $b); 129 130 } 130 131131 -1 @function _pf-lab-to-xyz-f($t) {-1 132 @function _lab-to-xyz-f($t) { 132 133 @if $t > math.div(6, 29) { 133 134 @return math.pow($t, 3); 134 135 } @else { @@ -136,26 +137,26 @@ $planifolia-colorspace: 'lab' !default; 136 137 } 137 138 } 138 139139 -1 @function _pf-lab-to-xyz($lab) {-1 140 @function _lab-to-xyz($lab) { 140 141 $white: (95.05, 100, 108.9); 141 142 142 143 $l: math.div(nth($lab, 1) + 16, 116); 143 144144 -1 $x: nth($white, 1) * _pf-lab-to-xyz-f($l + math.div(nth($lab, 2), 500));145 -1 $y: nth($white, 2) * _pf-lab-to-xyz-f($l);146 -1 $z: nth($white, 3) * _pf-lab-to-xyz-f($l - math.div(nth($lab, 3), 200));-1 145 $x: nth($white, 1) * _lab-to-xyz-f($l + math.div(nth($lab, 2), 500)); -1 146 $y: nth($white, 2) * _lab-to-xyz-f($l); -1 147 $z: nth($white, 3) * _lab-to-xyz-f($l - math.div(nth($lab, 3), 200)); 147 148 148 149 @return ($x, $y, $z); 149 150 } 150 151151 -1 @function _pf-xyz-to-yuuvv($xyz) {-1 152 @function _xyz-to-yuuvv($xyz) { 152 153 $a: nth($xyz, 1) + 15 * nth($xyz, 2) + 3 * nth($xyz, 3); 153 154 $uu: if($a == 0, 0, math.div(4 * nth($xyz, 1), $a)); 154 155 $vv: if($a == 0, 0, math.div(9 * nth($xyz, 2), $a)); 155 156 @return (nth($xyz, 2), $uu, $vv); 156 157 } 157 158158 -1 @function _pf-yuuvv-to-xyz($yuuvv) {-1 159 @function _yuuvv-to-xyz($yuuvv) { 159 160 $y: nth($yuuvv, 1); 160 161 $uu: nth($yuuvv, 2); 161 162 $vv: nth($yuuvv, 3); @@ -166,9 +167,9 @@ $planifolia-colorspace: 'lab' !default; 166 167 @return ($x, $y, $z); 167 168 } 168 169169 -1 @function _pf-xyz-to-luv($xyz) {170 -1 $white: _pf-xyz-to-yuuvv((95.05, 100, 108.9));171 -1 $yuuvv: _pf-xyz-to-yuuvv($xyz);-1 170 @function _xyz-to-luv($xyz) { -1 171 $white: _xyz-to-yuuvv((95.05, 100, 108.9)); -1 172 $yuuvv: _xyz-to-yuuvv($xyz); 172 173 173 174 $y: math.div(nth($yuuvv, 1), nth($white, 1)); 174 175 $l: if($y > math.div(216, 24389), 116 * math.pow($y, math.div(1, 3)) - 16, math.div(24389, 27) * $y); @@ -179,8 +180,8 @@ $planifolia-colorspace: 'lab' !default; 179 180 @return ($l, $u, $v); 180 181 } 181 182182 -1 @function _pf-luv-to-xyz($luv) {183 -1 $white: _pf-xyz-to-yuuvv((95.05, 100, 108.9));-1 183 @function _luv-to-xyz($luv) { -1 184 $white: _xyz-to-yuuvv((95.05, 100, 108.9)); 184 185 185 186 $uu: if(nth($luv, 1) == 0, 0, math.div(nth($luv, 2), 13 * nth($luv, 1)) + nth($white, 2)); 186 187 $vv: if(nth($luv, 1) == 0, 0, math.div(nth($luv, 3), 13 * nth($luv, 1)) + nth($white, 3)); @@ -192,10 +193,10 @@ $planifolia-colorspace: 'lab' !default; 192 193 $y: math.div($y * nth($luv, 1) * 27, 24389); 193 194 } 194 195195 -1 @return _pf-yuuvv-to-xyz(($y, $uu, $vv));-1 196 @return _yuuvv-to-xyz(($y, $uu, $vv)); 196 197 } 197 198198 -1 @function _pf-lab-to-lch($lab) {-1 199 @function _lab-to-lch($lab) { 199 200 $l: nth($lab, 1); 200 201 $c: math.sqrt(nth($lab, 2) * nth($lab, 2) + nth($lab, 3) * nth($lab, 3)); 201 202 $h: 0deg; @@ -206,7 +207,7 @@ $planifolia-colorspace: 'lab' !default; 206 207 @return ($l, $c, $h); 207 208 } 208 209209 -1 @function _pf-lch-to-lab($lch) {-1 210 @function _lch-to-lab($lch) { 210 211 $l: nth($lch, 1); 211 212 $a: math.cos(nth($lch, 3)) * nth($lch, 2); 212 213 $b: math.sin(nth($lch, 3)) * nth($lch, 2); @@ -214,14 +215,14 @@ $planifolia-colorspace: 'lab' !default; 214 215 @return ($l, $a, $b); 215 216 } 216 217217 -1 @function _pf-max-chroma($lightness, $hue, $colorspace) {-1 218 @function _max-chroma($lightness, $hue, $colorspace) { 218 219 $c-min: 0; 219 220 $c-max: 200; 220 221 $c-tmp: ($c-min + $c-max) * 0.5; 221 222 222 223 @while $c-max - $c-min > 1 { 223 224 $rgb: _lch-unclipped($lightness, $c-tmp, $hue, $colorspace);224 -1 @if _pf-clip-needed($rgb) {-1 225 @if _clip-needed($rgb) { 225 226 $c-max: $c-tmp; 226 227 } @else { 227 228 $c-min: $c-tmp; @@ -232,28 +233,28 @@ $planifolia-colorspace: 'lab' !default; 232 233 @return $c-tmp; 233 234 } 234 235235 -1 @function _pf-to-lch($color, $colorspace: $planifolia-colorspace) {-1 236 @function _to-lch($color, $colorspace: $planifolia-colorspace) { 236 237 @if $colorspace == 'lab' {237 -1 $xyz: _pf-to-xyz($color);238 -1 $lab: _pf-xyz-to-lab($xyz);239 -1 @return _pf-lab-to-lch($lab);-1 238 $xyz: _to-xyz($color); -1 239 $lab: _xyz-to-lab($xyz); -1 240 @return _lab-to-lch($lab); 240 241 } @else if $colorspace == 'hslab' {241 -1 $lch: _pf-to-lch($color, 'lab');242 -1 $max: _pf-max-chroma(nth($lch, 1), nth($lch, 3), 'lab');-1 242 $lch: _to-lch($color, 'lab'); -1 243 $max: _max-chroma(nth($lch, 1), nth($lch, 3), 'lab'); 243 244 @return (nth($lch, 1), math.div(nth($lch, 2), $max) * 100, nth($lch, 3)); 244 245 } @else if $colorspace == 'luv' {245 -1 $xyz: _pf-to-xyz($color);246 -1 $luv: _pf-xyz-to-luv($xyz);247 -1 @return _pf-lab-to-lch($luv);-1 246 $xyz: _to-xyz($color); -1 247 $luv: _xyz-to-luv($xyz); -1 248 @return _lab-to-lch($luv); 248 249 } @else if $colorspace == 'hsluv' {249 -1 $lch: _pf-to-lch($color, 'luv');250 -1 $max: _pf-max-chroma(nth($lch, 1), nth($lch, 3), 'luv');-1 250 $lch: _to-lch($color, 'luv'); -1 251 $max: _max-chroma(nth($lch, 1), nth($lch, 3), 'luv'); 251 252 @return (nth($lch, 1), math.div(nth($lch, 2), $max) * 100, nth($lch, 3)); 252 253 } @else if $colorspace == 'hsl' {253 -1 @return (math.div(lightness($color), 1%), math.div(saturation($color), 1%), hue($color));-1 254 @return (math.div(color.lightness($color), 1%), math.div(color.saturation($color), 1%), color.hue($color)); 254 255 } @else if $colorspace == 'yuv' {255 -1 $yuv: _pf-to-yuv($color);256 -1 @return _pf-lab-to-lch($yuv);-1 256 $yuv: _to-yuv($color); -1 257 @return _lab-to-lch($yuv); 257 258 } @else { 258 259 @error 'unknown colorspace: #{$colorspace}'; 259 260 } @@ -261,25 +262,25 @@ $planifolia-colorspace: 'lab' !default; 261 262 262 263 @function _lch-unclipped($lightness, $chroma, $hue, $colorspace) { 263 264 @if $colorspace == 'lab' {264 -1 $lab: _pf-lch-to-lab(($lightness, $chroma, $hue));265 -1 $xyz: _pf-lab-to-xyz($lab);266 -1 @return _pf-from-xyz($xyz);-1 265 $lab: _lch-to-lab(($lightness, $chroma, $hue)); -1 266 $xyz: _lab-to-xyz($lab); -1 267 @return _from-xyz($xyz); 267 268 } @else if $colorspace == 'hslab' {268 -1 $max: _pf-max-chroma($lightness, $hue, 'lab');-1 269 $max: _max-chroma($lightness, $hue, 'lab'); 269 270 @return _lch-unclipped($lightness, $chroma * $max * 0.01, $hue, 'lab'); 270 271 } @else if $colorspace == 'luv' {271 -1 $luv: _pf-lch-to-lab(($lightness, $chroma, $hue));272 -1 $xyz: _pf-luv-to-xyz($luv);273 -1 @return _pf-from-xyz($xyz);-1 272 $luv: _lch-to-lab(($lightness, $chroma, $hue)); -1 273 $xyz: _luv-to-xyz($luv); -1 274 @return _from-xyz($xyz); 274 275 } @else if $colorspace == 'hsluv' {275 -1 $max: _pf-max-chroma($lightness, $hue, 'luv');-1 276 $max: _max-chroma($lightness, $hue, 'luv'); 276 277 @return _lch-unclipped($lightness, $chroma * $max * 0.01, $hue, 'luv'); 277 278 } @else if $colorspace == 'hsl' { 278 279 $color: hsl(math.div($hue, 1deg) * 1deg, $chroma * 1%, $lightness * 1%); 279 280 @return (red($color), green($color), blue($color)); 280 281 } @else if $colorspace == 'yuv' {281 -1 $yuv: _pf-lch-to-lab(($lightness, $chroma, $hue));282 -1 @return _pf-from-yuv($yuv);-1 282 $yuv: _lch-to-lab(($lightness, $chroma, $hue)); -1 283 @return _from-yuv($yuv); 283 284 } @else { 284 285 @error 'unknown colorspace: #{$colorspace}'; 285 286 } @@ -299,14 +300,14 @@ $planifolia-colorspace: 'lab' !default; 299 300 $hue: 0deg + $hue; 300 301 $rgb: _lch-unclipped($lightness, $chroma, $hue, $colorspace); 301 302302 -1 @if _pf-clip-needed($rgb) {-1 303 @if _clip-needed($rgb) { 303 304 $c-min: 0; 304 305 $c-max: $chroma; 305 306 $c-tmp: ($c-min + $c-max) * 0.5; 306 307 307 308 @while $c-max - $c-min > 0.01 { 308 309 $rgb: _lch-unclipped($lightness, $c-tmp, $hue, $colorspace);309 -1 @if _pf-clip-needed($rgb) {-1 310 @if _clip-needed($rgb) { 310 311 $c-max: $c-tmp; 311 312 } @else { 312 313 $c-min: $c-tmp; @@ -333,24 +334,24 @@ $planifolia-colorspace: 'lab' !default; 333 334 /// @param {color} $color 334 335 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 335 336 /// @return {number}336 -1 @function pf-lightness($color, $colorspace: $planifolia-colorspace) {337 -1 @return nth(_pf-to-lch($color, $colorspace), 1);-1 337 @function lightness($color, $colorspace: $planifolia-colorspace) { -1 338 @return nth(_to-lch($color, $colorspace), 1); 338 339 } 339 340 340 341 /// Get the chroma component of a color. 341 342 /// @param {color} $color 342 343 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 343 344 /// @return {number}344 -1 @function pf-chroma($color, $colorspace: $planifolia-colorspace) {345 -1 @return nth(_pf-to-lch($color, $colorspace), 2);-1 345 @function chroma($color, $colorspace: $planifolia-colorspace) { -1 346 @return nth(_to-lch($color, $colorspace), 2); 346 347 } 347 348 348 349 /// Get the hue component of a color. 349 350 /// @param {color} $color 350 351 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 351 352 /// @return {angle}352 -1 @function pf-hue($color, $colorspace: $planifolia-colorspace) {353 -1 @return nth(_pf-to-lch($color, $colorspace), 3);-1 353 @function hue($color, $colorspace: $planifolia-colorspace) { -1 354 @return nth(_to-lch($color, $colorspace), 3); 354 355 } 355 356 356 357 /// Increase or decrease one or more components of a color. @@ -360,8 +361,8 @@ $planifolia-colorspace: 'lab' !default; 360 361 /// @param {angle} $hue [0] 361 362 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 362 363 /// @return {color}363 -1 @function pf-adjust-color($color, $lightness: 0, $chroma: 0, $hue: 0, $colorspace: $planifolia-colorspace) {364 -1 $lch: _pf-to-lch($color, $colorspace);-1 364 @function adjust($color, $lightness: 0, $chroma: 0, $hue: 0, $colorspace: $planifolia-colorspace) { -1 365 $lch: _to-lch($color, $colorspace); 365 366 366 367 $l: nth($lch, 1) + $lightness; 367 368 $c: nth($lch, 2) + $chroma; @@ -377,8 +378,8 @@ $planifolia-colorspace: 'lab' !default; 377 378 /// @param {angle} $hue [null] 378 379 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 379 380 /// @return {color}380 -1 @function pf-change-color($color, $lightness: null, $chroma: null, $hue: null, $colorspace: $planifolia-colorspace) {381 -1 $lch: _pf-to-lch($color, $colorspace);-1 381 @function change($color, $lightness: null, $chroma: null, $hue: null, $colorspace: $planifolia-colorspace) { -1 382 $lch: _to-lch($color, $colorspace); 382 383 383 384 $l: if($lightness == null, nth($lch, 1), $lightness); 384 385 $c: if($chroma == null, nth($lch, 2), $chroma); @@ -391,80 +392,80 @@ $planifolia-colorspace: 'lab' !default; 391 392 /// @param {number} $angle 392 393 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 393 394 /// @return {color}394 -1 @function pf-adjust-hue($color, $angle, $colorspace: $planifolia-colorspace) {395 -1 @return pf-adjust-color($color, $hue: $angle, $colorspace: $colorspace);-1 395 @function adjust-hue($color, $angle, $colorspace: $planifolia-colorspace) { -1 396 @return adjust($color, $hue: $angle, $colorspace: $colorspace); 396 397 } 397 398 398 399 /// @param {color} $color 399 400 /// @param {number} $amount 400 401 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 401 402 /// @return {color}402 -1 @function pf-lighten($color, $amount, $colorspace: $planifolia-colorspace) {403 -1 @return pf-adjust-color($color, $lightness: $amount, $colorspace: $colorspace);-1 403 @function lighten($color, $amount, $colorspace: $planifolia-colorspace) { -1 404 @return adjust($color, $lightness: $amount, $colorspace: $colorspace); 404 405 } 405 406 406 407 /// @param {color} $color 407 408 /// @param {number} $amount 408 409 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 409 410 /// @return {color}410 -1 @function pf-darken($color, $amount, $colorspace: $planifolia-colorspace) {411 -1 @return pf-adjust-color($color, $lightness: -$amount, $colorspace: $colorspace);-1 411 @function darken($color, $amount, $colorspace: $planifolia-colorspace) { -1 412 @return adjust($color, $lightness: -$amount, $colorspace: $colorspace); 412 413 } 413 414 414 415 /// @param {color} $color 415 416 /// @param {number} $weight 416 417 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 417 418 /// @return {color}418 -1 @function pf-tint($color, $weight, $colorspace: $planifolia-colorspace) {419 -1 @return pf-mix(white, $color, $weight, $colorspace);-1 419 @function tint($color, $weight, $colorspace: $planifolia-colorspace) { -1 420 @return mix(white, $color, $weight, $colorspace); 420 421 } 421 422 422 423 /// @param {color} $color 423 424 /// @param {number} $weight 424 425 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 425 426 /// @return {color}426 -1 @function pf-shade($color, $weight, $colorspace: $planifolia-colorspace) {427 -1 @return pf-mix(black, $color, $weight, $colorspace);-1 427 @function shade($color, $weight, $colorspace: $planifolia-colorspace) { -1 428 @return mix(black, $color, $weight, $colorspace); 428 429 } 429 430 430 431 /// @param {color} $color 431 432 /// @param {number} $amount 432 433 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 433 434 /// @return {color}434 -1 @function pf-saturate($color, $amount, $colorspace: $planifolia-colorspace) {435 -1 @return pf-adjust-color($color, $chroma: $amount, $colorspace: $colorspace);-1 435 @function saturate($color, $amount, $colorspace: $planifolia-colorspace) { -1 436 @return adjust($color, $chroma: $amount, $colorspace: $colorspace); 436 437 } 437 438 438 439 /// @param {color} $color 439 440 /// @param {number} $amount 440 441 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 441 442 /// @return {color}442 -1 @function pf-desaturate($color, $amount, $colorspace: $planifolia-colorspace) {443 -1 @return pf-adjust-color($color, $chroma: -$amount, $colorspace: $colorspace);-1 443 @function desaturate($color, $amount, $colorspace: $planifolia-colorspace) { -1 444 @return adjust($color, $chroma: -$amount, $colorspace: $colorspace); 444 445 } 445 446 446 447 /// @param {color} $color 447 448 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 448 449 /// @return {color}449 -1 @function pf-complement($color, $colorspace: $planifolia-colorspace) {450 -1 @return pf-adjust-hue($color, math.$pi * 1rad, $colorspace);-1 450 @function complement($color, $colorspace: $planifolia-colorspace) { -1 451 @return adjust-hue($color, math.$pi * 1rad, $colorspace); 451 452 } 452 453 453 454 /// @param {color} $color 454 455 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 455 456 /// @return {color}456 -1 @function pf-grayscale($color, $colorspace: $planifolia-colorspace) {457 -1 @return pf-change-color($color, $chroma: 0, $colorspace: $colorspace);-1 457 @function grayscale($color, $colorspace: $planifolia-colorspace) { -1 458 @return change($color, $chroma: 0, $colorspace: $colorspace); 458 459 } 459 460 460 461 /// Get the euclidean distance between two colors. 461 462 /// @param {color} $color1 462 463 /// @param {color} $color2 463 464 /// @return {number}464 -1 /// @require _pf-to-lch465 -1 @function pf-color-distance($color1, $color2) {466 -1 $lab1: _pf-xyz-to-lab(_pf-to-xyz($color1));467 -1 $lab2: _pf-xyz-to-lab(_pf-to-xyz($color2));-1 465 /// @require _to-lch -1 466 @function distance($color1, $color2) { -1 467 $lab1: _xyz-to-lab(_to-xyz($color1)); -1 468 $lab2: _xyz-to-lab(_to-xyz($color2)); 468 469 469 470 $x1: nth($lab1, 1) - nth($lab2, 1); 470 471 $x2: nth($lab1, 2) - nth($lab2, 2); @@ -473,8 +474,8 @@ $planifolia-colorspace: 'lab' !default; 473 474 @return math.sqrt($x1 * $x1 + $x2 * $x2 + $x3 * $x3); 474 475 } 475 476476 -1 @function _pf-lch-mix($lch1, $lch2, $weight) {477 -1 $w: _pf-perc($weight);-1 477 @function _lch-mix($lch1, $lch2, $weight) { -1 478 $w: _perc($weight); 478 479 479 480 $l: nth($lch1, 1) * $w + nth($lch2, 1) * (1 - $w); 480 481 $c: nth($lch1, 2) * $w + nth($lch2, 2) * (1 - $w); @@ -504,11 +505,11 @@ $planifolia-colorspace: 'lab' !default; 504 505 /// @param {number} $weight [50%] 505 506 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 506 507 /// @return {color}507 -1 @function pf-mix($color1, $color2, $weight: 50%, $colorspace: $planifolia-colorspace) {508 -1 $lch1: _pf-to-lch($color1, $colorspace);509 -1 $lch2: _pf-to-lch($color2, $colorspace);-1 508 @function mix($color1, $color2, $weight: 50%, $colorspace: $planifolia-colorspace) { -1 509 $lch1: _to-lch($color1, $colorspace); -1 510 $lch2: _to-lch($color2, $colorspace); 510 511511 -1 $lch: _pf-lch-mix($lch1, $lch2, $weight);-1 512 $lch: _lch-mix($lch1, $lch2, $weight); 512 513 513 514 @return lch(nth($lch, 1), nth($lch, 2), nth($lch, 3), $colorspace); 514 515 }
diff --git a/sass/contrast.scss b/sass/contrast.scss
@@ -12,7 +12,7 @@ $planifolia-contrast-dark-default: black !default; 12 12 /// @type color 13 13 $planifolia-contrast-light-default: white !default; 14 1415 -1 @function _pf-threshold($threshold) {-1 15 @function _threshold($threshold) { 16 16 @if ($threshold == 'AA' or $threshold == 'AAALG') { 17 17 @return 4.5; 18 18 } @else if ($threshold == 'AALG') { @@ -24,7 +24,7 @@ $planifolia-contrast-light-default: white !default; 24 24 } 25 25 } 26 2627 -1 @function _pf-srgb($channel) {-1 27 @function _srgb($channel) { 28 28 $x: math.div($channel, 255); 29 29 @if $x <= 0.03928 { 30 30 @return math.div($x, 12.92); @@ -34,7 +34,6 @@ $planifolia-contrast-light-default: white !default; 34 34 } 35 35 } 36 3637 -1 // FIXME: namespace name38 37 @function alpha-blend($fg, $bg: white) { 39 38 $a1: alpha($bg); 40 39 $a2: alpha($fg); @@ -53,15 +52,14 @@ $planifolia-contrast-light-default: white !default; 53 52 @return rgba($r, $g, $b, $a); 54 53 } 55 5456 -1 // FIXME: namespace name57 55 @function luma($color) {58 -1 $r: _pf-srgb(red($color));59 -1 $g: _pf-srgb(green($color));60 -1 $b: _pf-srgb(blue($color));-1 56 $r: _srgb(red($color)); -1 57 $g: _srgb(green($color)); -1 58 $b: _srgb(blue($color)); 61 59 @return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b; 62 60 } 63 6164 -1 @function _pf-contrast($fg, $bg) {-1 62 @function _contrast($fg, $bg) { 65 63 $lbg: luma($bg); 66 64 $lfg: luma(alpha-blend($fg, $bg)); 67 65 @return math.div(max($lbg, $lfg) + 0.05, min($lbg, $lfg) + 0.05); @@ -79,16 +77,16 @@ $planifolia-contrast-light-default: white !default; 79 77 @function contrast-min($fg, $bg) { 80 78 // optimize for the common case 81 79 @if alpha($bg) == 1 {82 -1 @return _pf-contrast($fg, $bg);-1 80 @return _contrast($fg, $bg); 83 81 } @else { 84 82 $bg-black: alpha-blend($bg, black); 85 83 $bg-white: alpha-blend($bg, white); 86 84 $lfg: luma($fg); 87 85 88 86 @if luma($bg-white) < $lfg {89 -1 @return _pf-contrast($fg, $bg-white);-1 87 @return _contrast($fg, $bg-white); 90 88 } @else if luma($bg-black) > $lfg {91 -1 @return _pf-contrast($fg, $bg-black);-1 89 @return _contrast($fg, $bg-black); 92 90 } @else { 93 91 @return 1; 94 92 } @@ -108,7 +106,7 @@ $planifolia-contrast-light-default: white !default; 108 106 @function contrast($color1, $color2) { 109 107 // NOTE: optimized for the common case 110 108 @if alpha($color1) + alpha($color2) == 2 {111 -1 @return _pf-contrast($color1, $color2);-1 109 @return _contrast($color1, $color2); 112 110 } @else { 113 111 $c1: contrast-min($color1, $color2); 114 112 $c2: contrast-min($color2, $color1); @@ -122,7 +120,7 @@ $planifolia-contrast-light-default: white !default; 122 120 /// @param {color} $color1 [$planifolia-contrast-dark-default] first option 123 121 /// @param {color} $color2 [$planifolia-contrast-light-default] second option 124 122 /// @return {color} either `$color1` or `$color2`125 -1 @function contrast-color(-1 123 @function color( 126 124 $base, 127 125 $color1: $planifolia-contrast-dark-default, 128 126 $color2: $planifolia-contrast-light-default @@ -141,8 +139,8 @@ $planifolia-contrast-light-default: white !default; 141 139 /// @param {number} $threshold [4.5] 142 140 /// (can also be 'AA', 'AALG', 'AAA', or 'AAALG') 143 141 /// @return {color}144 -1 @function contrast-stretch($base, $color, $threshold: 4.5) {145 -1 $threshold: _pf-threshold($threshold);-1 142 @function stretch($base, $color, $threshold: 4.5) { -1 143 $threshold: _threshold($threshold); 146 144 $lower: $color; 147 145 $upper: if(luma($base) < 0.18, white, black); 148 146 @@ -176,8 +174,8 @@ $planifolia-contrast-light-default: white !default; 176 174 /// @param {number} $threshold [4.5] 177 175 /// (can also be 'AA', 'AALG', 'AAA', or 'AAALG') 178 176 /// @return {color} unchanged $color179 -1 @function contrast-check($base, $color, $threshold: 4.5) {180 -1 $threshold: _pf-threshold($threshold);-1 177 @function check($base, $color, $threshold: 4.5) { -1 178 $threshold: _threshold($threshold); 181 179 $contrast: contrast($base, $color); 182 180 @if $contrast < $threshold { 183 181 @warn 'contrast #{$contrast} between #{$base} and #{$color} too low!';
diff --git a/test/color.js b/test/color.js
@@ -26,126 +26,126 @@ describe('color', function() {
26 26 });
27 27 });
28 28
29 -1 describe('pf-lightness', function() {
-1 29 describe('lightness', function() {
30 30 it('white', function() {
31 -1 shared.similar(renderer.value('color.pf-lightness(white)'), 100);
-1 31 shared.similar(renderer.value('color.lightness(white)'), 100);
32 32 });
33 33 it('black', function() {
34 -1 shared.similar(renderer.value('color.pf-lightness(black)'), 0);
-1 34 shared.similar(renderer.value('color.lightness(black)'), 0);
35 35 });
36 36 it('red', function() {
37 -1 shared.similar(renderer.value('color.pf-lightness(red)'), 53.23288);
-1 37 shared.similar(renderer.value('color.lightness(red)'), 53.23288);
38 38 });
39 39 it('blue', function() {
40 -1 shared.similar(renderer.value('color.pf-lightness(blue)'), 32.30259);
-1 40 shared.similar(renderer.value('color.lightness(blue)'), 32.30259);
41 41 });
42 42 });
43 43
44 -1 describe('pf-chroma', function() {
-1 44 describe('chroma', function() {
45 45 it('white', function() {
46 -1 shared.similar(renderer.value('color.pf-chroma(white)'), 0, .0001);
-1 46 shared.similar(renderer.value('color.chroma(white)'), 0, .0001);
47 47 });
48 48 it('black', function() {
49 -1 shared.similar(renderer.value('color.pf-chroma(black)'), 0);
-1 49 shared.similar(renderer.value('color.chroma(black)'), 0);
50 50 });
51 51 it('red', function() {
52 -1 shared.similar(renderer.value('color.pf-chroma(red)'), 104.57421);
-1 52 shared.similar(renderer.value('color.chroma(red)'), 104.57421);
53 53 });
54 54 it('blue', function() {
55 -1 shared.similar(renderer.value('color.pf-chroma(blue)'), 133.80605);
-1 55 shared.similar(renderer.value('color.chroma(blue)'), 133.80605);
56 56 });
57 57 });
58 58
59 -1 describe('pf-hue', function() {
-1 59 describe('hue', function() {
60 60 it('white', function() {
61 -1 shared.similar(renderer.value('color.pf-hue(white)'), 0);
-1 61 shared.similar(renderer.value('color.hue(white)'), 0);
62 62 });
63 63 it('black', function() {
64 -1 shared.similar(renderer.value('color.pf-hue(black)'), 0);
-1 64 shared.similar(renderer.value('color.hue(black)'), 0);
65 65 });
66 66 it('red', function() {
67 -1 shared.similar(renderer.value('color.pf-hue(red)'), 40.0027);
-1 67 shared.similar(renderer.value('color.hue(red)'), 40.0027);
68 68 });
69 69 it('yellow', function() {
70 -1 shared.similar(renderer.value('color.pf-hue(yellow)'), 102.85403);
-1 70 shared.similar(renderer.value('color.hue(yellow)'), 102.85403);
71 71 });
72 72 it('green', function() {
73 -1 shared.similar(renderer.value('color.pf-hue(green)'), 136.0155);
-1 73 shared.similar(renderer.value('color.hue(green)'), 136.0155);
74 74 });
75 75 it('blue', function() {
76 -1 shared.similar(renderer.value('color.pf-hue(blue)'), -53.71132);
-1 76 shared.similar(renderer.value('color.hue(blue)'), -53.71132);
77 77 });
78 78 });
79 79
80 -1 describe('pf-complement', function() {
-1 80 describe('complement', function() {
81 81 it('white', function() {
82 -1 assert.equal(renderer.value('color.pf-complement(white)'), '#fff')
-1 82 assert.equal(renderer.value('color.complement(white)'), '#fff')
83 83 });
84 84 it('red', function() {
85 -1 assert.equal(renderer.value('color.pf-complement(red)'), '#008ca1')
-1 85 assert.equal(renderer.value('color.complement(red)'), '#008ca1')
86 86 });
87 87 it('yellow', function() {
88 -1 assert.equal(renderer.value('color.pf-complement(yellow)'), '#f5f6ff')
-1 88 assert.equal(renderer.value('color.complement(yellow)'), '#f5f6ff')
89 89 });
90 90 });
91 91
92 -1 describe('pf-color-distance', function() {
-1 92 describe('distance', function() {
93 93 it('d(white, white) = 0', function() {
94 -1 assert.equal(renderer.value('color.pf-color-distance(white, white)'), 0)
-1 94 assert.equal(renderer.value('color.distance(white, white)'), 0)
95 95 });
96 96 it('d(red, red) = 0', function() {
97 -1 assert.equal(renderer.value('color.pf-color-distance(red, red)'), 0)
-1 97 assert.equal(renderer.value('color.distance(red, red)'), 0)
98 98 });
99 99 it('d(white, black) ~= 100', function() {
100 -1 shared.similar(renderer.value('color.pf-color-distance(white, black)'), 100);
-1 100 shared.similar(renderer.value('color.distance(white, black)'), 100);
101 101 });
102 102 it('d(white, red)', function() {
103 -1 shared.similar(renderer.value('color.pf-color-distance(white, red)'), 114.55535);
-1 103 shared.similar(renderer.value('color.distance(white, red)'), 114.55535);
104 104 });
105 105 it('d(red, blue)', function() {
106 -1 shared.similar(renderer.value('color.pf-color-distance(red, blue)'), 176.32554);
-1 106 shared.similar(renderer.value('color.distance(red, blue)'), 176.32554);
107 107 });
108 108 it('d(blue, red)', function() {
109 -1 shared.similar(renderer.value('color.pf-color-distance(blue, red)'), 176.32554);
-1 109 shared.similar(renderer.value('color.distance(blue, red)'), 176.32554);
110 110 });
111 111 });
112 112
113 -1 describe('pf-mix', function() {
-1 113 describe('mix', function() {
114 114 it('white, white', function() {
115 -1 assert.equal(renderer.value('color.pf-mix(white, white)'), '#fff')
-1 115 assert.equal(renderer.value('color.mix(white, white)'), '#fff')
116 116 });
117 117 it('black, white', function() {
118 -1 assert.equal(renderer.value('color.pf-mix(black, white)'), '#777')
-1 118 assert.equal(renderer.value('color.mix(black, white)'), '#777')
119 119 });
120 120 it('black, white, 0%', function() {
121 -1 assert.equal(renderer.value('color.pf-mix(black, white, 0%)'), '#fff')
-1 121 assert.equal(renderer.value('color.mix(black, white, 0%)'), '#fff')
122 122 });
123 123 it('black, white, 100%', function() {
124 -1 assert.equal(renderer.value('color.pf-mix(black, white, 100%)'), '#000')
-1 124 assert.equal(renderer.value('color.mix(black, white, 100%)'), '#000')
125 125 });
126 126 it('black, white, 20%', function() {
127 -1 assert.equal(renderer.value('color.pf-mix(black, white, 20%)'), '#c6c6c6')
-1 127 assert.equal(renderer.value('color.mix(black, white, 20%)'), '#c6c6c6')
128 128 });
129 129 it('black, white, .2', function() {
130 -1 assert.equal(renderer.value('color.pf-mix(black, white, .2)'), '#c6c6c6')
-1 130 assert.equal(renderer.value('color.mix(black, white, .2)'), '#c6c6c6')
131 131 });
132 132 it('blue, red', function() {
133 -1 assert.equal(renderer.value('color.pf-mix(blue, red)'), '#c20081')
-1 133 assert.equal(renderer.value('color.mix(blue, red)'), '#c20081')
134 134 });
135 135 it('blue, red, 20%', function() {
136 -1 assert.equal(renderer.value('color.pf-mix(blue, red, 20%)'), '#e70051')
-1 136 assert.equal(renderer.value('color.mix(blue, red, 20%)'), '#e70051')
137 137 });
138 138 it('green, red', function() {
139 -1 assert.equal(renderer.value('color.pf-mix(green, red)'), '#9d6e00')
-1 139 assert.equal(renderer.value('color.mix(green, red)'), '#9d6e00')
140 140 });
141 141 it('yellow, blue', function() {
142 -1 assert.equal(renderer.value('color.pf-mix(yellow, blue)'), '#ff6b89')
-1 142 assert.equal(renderer.value('color.mix(yellow, blue)'), '#ff6b89')
143 143 });
144 144 it('green, blue', function() {
145 -1 assert.equal(renderer.value('color.pf-mix(green, blue)'), '#006487')
-1 145 assert.equal(renderer.value('color.mix(green, blue)'), '#006487')
146 146 });
147 147 it('white, blue', function() {
148 -1 assert.equal(renderer.value('color.pf-mix(white, blue)'), '#b38cff')
-1 148 assert.equal(renderer.value('color.mix(white, blue)'), '#b38cff')
149 149 });
150 150 });
151 151 });
@@ -172,105 +172,105 @@ describe('color', function() {
172 172 });
173 173 });
174 174
175 -1 describe('pf-lightness', function() {
-1 175 describe('lightness', function() {
176 176 it('white', function() {
177 -1 shared.similar(renderer.value('color.pf-lightness(white, "luv")'), 100);
-1 177 shared.similar(renderer.value('color.lightness(white, "luv")'), 100);
178 178 });
179 179 it('black', function() {
180 -1 shared.similar(renderer.value('color.pf-lightness(black, "luv")'), 0);
-1 180 shared.similar(renderer.value('color.lightness(black, "luv")'), 0);
181 181 });
182 182 it('red', function() {
183 -1 shared.similar(renderer.value('color.pf-lightness(red, "luv")'), 53.23288);
-1 183 shared.similar(renderer.value('color.lightness(red, "luv")'), 53.23288);
184 184 });
185 185 it('blue', function() {
186 -1 shared.similar(renderer.value('color.pf-lightness(blue, "luv")'), 32.30259);
-1 186 shared.similar(renderer.value('color.lightness(blue, "luv")'), 32.30259);
187 187 });
188 188 });
189 189
190 -1 describe('pf-chroma', function() {
-1 190 describe('chroma', function() {
191 191 it('white', function() {
192 -1 shared.similar(renderer.value('color.pf-chroma(white, "luv")'), 0, .0001);
-1 192 shared.similar(renderer.value('color.chroma(white, "luv")'), 0, .0001);
193 193 });
194 194 it('black', function() {
195 -1 shared.similar(renderer.value('color.pf-chroma(black, "luv")'), 0);
-1 195 shared.similar(renderer.value('color.chroma(black, "luv")'), 0);
196 196 });
197 197 it('red', function() {
198 -1 shared.similar(renderer.value('color.pf-chroma(red, "luv")'), 179.07872);
-1 198 shared.similar(renderer.value('color.chroma(red, "luv")'), 179.07872);
199 199 });
200 200 it('blue', function() {
201 -1 shared.similar(renderer.value('color.pf-chroma(blue, "luv")'), 130.69138);
-1 201 shared.similar(renderer.value('color.chroma(blue, "luv")'), 130.69138);
202 202 });
203 203 });
204 204
205 -1 describe('pf-hue', function() {
-1 205 describe('hue', function() {
206 206 it('white', function() {
207 -1 shared.similar(renderer.value('color.pf-hue(white, "luv")'), 0);
-1 207 shared.similar(renderer.value('color.hue(white, "luv")'), 0);
208 208 });
209 209 it('black', function() {
210 -1 shared.similar(renderer.value('color.pf-hue(black, "luv")'), 0);
-1 210 shared.similar(renderer.value('color.hue(black, "luv")'), 0);
211 211 });
212 212 it('red', function() {
213 -1 shared.similar(renderer.value('color.pf-hue(red, "luv")'), 12.17245);
-1 213 shared.similar(renderer.value('color.hue(red, "luv")'), 12.17245);
214 214 });
215 215 it('yellow', function() {
216 -1 shared.similar(renderer.value('color.pf-hue(yellow, "luv")'), 85.87536);
-1 216 shared.similar(renderer.value('color.hue(yellow, "luv")'), 85.87536);
217 217 });
218 218 it('green', function() {
219 -1 shared.similar(renderer.value('color.pf-hue(green, "luv")'), 127.71994);
-1 219 shared.similar(renderer.value('color.hue(green, "luv")'), 127.71994);
220 220 });
221 221 it('blue', function() {
222 -1 shared.similar(renderer.value('color.pf-hue(blue, "luv")'), -94.12464);
-1 222 shared.similar(renderer.value('color.hue(blue, "luv")'), -94.12464);
223 223 });
224 224 });
225 225
226 -1 describe('pf-complement', function() {
-1 226 describe('complement', function() {
227 227 it('white', function() {
228 -1 assert.equal(renderer.value('color.pf-complement(white, "luv")'), '#fff')
-1 228 assert.equal(renderer.value('color.complement(white, "luv")'), '#fff')
229 229 });
230 230 it('red', function() {
231 -1 assert.equal(renderer.value('color.pf-complement(red, "luv")'), '#008e8e')
-1 231 assert.equal(renderer.value('color.complement(red, "luv")'), '#008e8e')
232 232 });
233 233 it('yellow', function() {
234 -1 assert.equal(renderer.value('color.pf-complement(yellow, "luv")'), '#f6f6ff')
-1 234 assert.equal(renderer.value('color.complement(yellow, "luv")'), '#f6f6ff')
235 235 });
236 236 });
237 237
238 -1 describe('pf-mix', function() {
-1 238 describe('mix', function() {
239 239 it('white, white', function() {
240 -1 assert.equal(renderer.value('color.pf-mix(white, white, 50%, "luv")'), '#fff')
-1 240 assert.equal(renderer.value('color.mix(white, white, 50%, "luv")'), '#fff')
241 241 });
242 242 it('black, white', function() {
243 -1 assert.equal(renderer.value('color.pf-mix(black, white, 50%, "luv")'), '#777')
-1 243 assert.equal(renderer.value('color.mix(black, white, 50%, "luv")'), '#777')
244 244 });
245 245 it('black, white, 0%', function() {
246 -1 assert.equal(renderer.value('color.pf-mix(black, white, 0%, "luv")'), '#fff')
-1 246 assert.equal(renderer.value('color.mix(black, white, 0%, "luv")'), '#fff')
247 247 });
248 248 it('black, white, 100%', function() {
249 -1 assert.equal(renderer.value('color.pf-mix(black, white, 100%, "luv")'), '#000')
-1 249 assert.equal(renderer.value('color.mix(black, white, 100%, "luv")'), '#000')
250 250 });
251 251 it('black, white, 20%', function() {
252 -1 assert.equal(renderer.value('color.pf-mix(black, white, 20%, "luv")'), '#c6c6c6')
-1 252 assert.equal(renderer.value('color.mix(black, white, 20%, "luv")'), '#c6c6c6')
253 253 });
254 254 it('black, white, .2', function() {
255 -1 assert.equal(renderer.value('color.pf-mix(black, white, .2, "luv")'), '#c6c6c6')
-1 255 assert.equal(renderer.value('color.mix(black, white, .2, "luv")'), '#c6c6c6')
256 256 });
257 257 it('blue, red', function() {
258 -1 assert.equal(renderer.value('color.pf-mix(blue, red, 50%, "luv")'), '#bd0095')
-1 258 assert.equal(renderer.value('color.mix(blue, red, 50%, "luv")'), '#bd0095')
259 259 });
260 260 it('blue, red, 20%', function() {
261 -1 assert.equal(renderer.value('color.pf-mix(blue, red, 20%, "luv")'), '#e40070')
-1 261 assert.equal(renderer.value('color.mix(blue, red, 20%, "luv")'), '#e40070')
262 262 });
263 263 it('green, red', function() {
264 -1 assert.equal(renderer.value('color.pf-mix(green, red, 50%, "luv")'), '#a56a00')
-1 264 assert.equal(renderer.value('color.mix(green, red, 50%, "luv")'), '#a56a00')
265 265 });
266 266 it('yellow, blue', function() {
267 -1 assert.equal(renderer.value('color.pf-mix(yellow, blue, 50%, "luv")'), '#ff66ab')
-1 267 assert.equal(renderer.value('color.mix(yellow, blue, 50%, "luv")'), '#ff66ab')
268 268 });
269 269 it('green, blue', function() {
270 -1 assert.equal(renderer.value('color.pf-mix(green, blue, 50%, "luv")'), '#006678')
-1 270 assert.equal(renderer.value('color.mix(green, blue, 50%, "luv")'), '#006678')
271 271 });
272 272 it('white, blue', function() {
273 -1 assert.equal(renderer.value('color.pf-mix(white, blue, 50%, "luv")'), '#9999e8')
-1 273 assert.equal(renderer.value('color.mix(white, blue, 50%, "luv")'), '#9999e8')
274 274 });
275 275 });
276 276 });
@@ -297,90 +297,90 @@ describe('color', function() {
297 297 });
298 298 });
299 299
300 -1 describe('pf-lightness', function() {
-1 300 describe('lightness', function() {
301 301 it('white', function() {
302 -1 assert.equal(renderer.value('color.pf-lightness(white, "hsl")'), 100)
-1 302 assert.equal(renderer.value('color.lightness(white, "hsl")'), 100)
303 303 });
304 304 it('black', function() {
305 -1 assert.equal(renderer.value('color.pf-lightness(black, "hsl")'), 0)
-1 305 assert.equal(renderer.value('color.lightness(black, "hsl")'), 0)
306 306 });
307 307 it('red', function() {
308 -1 assert.equal(renderer.value('color.pf-lightness(red, "hsl")'), 50)
-1 308 assert.equal(renderer.value('color.lightness(red, "hsl")'), 50)
309 309 });
310 310 it('blue', function() {
311 -1 assert.equal(renderer.value('color.pf-lightness(blue, "hsl")'), 50)
-1 311 assert.equal(renderer.value('color.lightness(blue, "hsl")'), 50)
312 312 });
313 313 });
314 314
315 -1 describe('pf-chroma', function() {
-1 315 describe('chroma', function() {
316 316 it('white', function() {
317 -1 assert.equal(renderer.value('color.pf-chroma(white, "hsl")'), 0)
-1 317 assert.equal(renderer.value('color.chroma(white, "hsl")'), 0)
318 318 });
319 319 it('black', function() {
320 -1 assert.equal(renderer.value('color.pf-chroma(black, "hsl")'), 0)
-1 320 assert.equal(renderer.value('color.chroma(black, "hsl")'), 0)
321 321 });
322 322 it('red', function() {
323 -1 assert.equal(renderer.value('color.pf-chroma(red, "hsl")'), 100)
-1 323 assert.equal(renderer.value('color.chroma(red, "hsl")'), 100)
324 324 });
325 325 it('blue', function() {
326 -1 assert.equal(renderer.value('color.pf-chroma(blue, "hsl")'), 100)
-1 326 assert.equal(renderer.value('color.chroma(blue, "hsl")'), 100)
327 327 });
328 328 });
329 329
330 -1 describe('pf-hue', function() {
-1 330 describe('hue', function() {
331 331 it('white', function() {
332 -1 shared.similar(renderer.value('color.pf-hue(white, "hsl")'), 0);
-1 332 shared.similar(renderer.value('color.hue(white, "hsl")'), 0);
333 333 });
334 334 it('black', function() {
335 -1 shared.similar(renderer.value('color.pf-hue(black, "hsl")'), 0);
-1 335 shared.similar(renderer.value('color.hue(black, "hsl")'), 0);
336 336 });
337 337 it('red', function() {
338 -1 shared.similar(renderer.value('color.pf-hue(red, "hsl")'), 0);
-1 338 shared.similar(renderer.value('color.hue(red, "hsl")'), 0);
339 339 });
340 340 it('yellow', function() {
341 -1 shared.similar(renderer.value('color.pf-hue(yellow, "hsl")'), 60);
-1 341 shared.similar(renderer.value('color.hue(yellow, "hsl")'), 60);
342 342 });
343 343 it('green', function() {
344 -1 shared.similar(renderer.value('color.pf-hue(green, "hsl")'), 120);
-1 344 shared.similar(renderer.value('color.hue(green, "hsl")'), 120);
345 345 });
346 346 it('blue', function() {
347 -1 shared.similar(renderer.value('color.pf-hue(blue, "hsl")'), 240);
-1 347 shared.similar(renderer.value('color.hue(blue, "hsl")'), 240);
348 348 });
349 349 });
350 350
351 -1 describe('pf-complement', function() {
-1 351 describe('complement', function() {
352 352 it('white', function() {
353 -1 assert.equal(renderer.value('color.pf-complement(white, "hsl")'), '#fff')
-1 353 assert.equal(renderer.value('color.complement(white, "hsl")'), '#fff')
354 354 });
355 355 it('red', function() {
356 -1 assert.equal(renderer.value('color.pf-complement(red, "hsl")'), 'aqua')
-1 356 assert.equal(renderer.value('color.complement(red, "hsl")'), 'aqua')
357 357 });
358 358 it('yellow', function() {
359 -1 assert.equal(renderer.value('color.pf-complement(yellow, "hsl")'), 'blue')
-1 359 assert.equal(renderer.value('color.complement(yellow, "hsl")'), 'blue')
360 360 });
361 361 });
362 362
363 -1 describe('pf-mix', function() {
-1 363 describe('mix', function() {
364 364 it('white, white', function() {
365 -1 assert.equal(renderer.value('color.pf-mix(white, white, 50%, "hsl")'), '#fff')
-1 365 assert.equal(renderer.value('color.mix(white, white, 50%, "hsl")'), '#fff')
366 366 });
367 367 it('black, white', function() {
368 -1 assert.equal(renderer.value('color.pf-mix(black, white, 50%, "hsl")'), 'gray')
-1 368 assert.equal(renderer.value('color.mix(black, white, 50%, "hsl")'), 'gray')
369 369 });
370 370 it('black, white, 0%', function() {
371 -1 assert.equal(renderer.value('color.pf-mix(black, white, 0%, "hsl")'), '#fff')
-1 371 assert.equal(renderer.value('color.mix(black, white, 0%, "hsl")'), '#fff')
372 372 });
373 373 it('black, white, 100%', function() {
374 -1 assert.equal(renderer.value('color.pf-mix(black, white, 100%, "hsl")'), '#000')
-1 374 assert.equal(renderer.value('color.mix(black, white, 100%, "hsl")'), '#000')
375 375 });
376 376 it('blue, red', function() {
377 -1 assert.equal(renderer.value('color.pf-mix(blue, red, 50%, "hsl")'), '#f0f')
-1 377 assert.equal(renderer.value('color.mix(blue, red, 50%, "hsl")'), '#f0f')
378 378 });
379 379 it('yellow, blue', function() {
380 -1 assert.equal(renderer.value('color.pf-mix(yellow, blue, 50%, "hsl")'), '#00ff80')
-1 380 assert.equal(renderer.value('color.mix(yellow, blue, 50%, "hsl")'), '#00ff80')
381 381 });
382 382 it('white, blue', function() {
383 -1 assert.equal(renderer.value('color.pf-mix(white, blue, 50%, "hsl")'), '#9f9fdf')
-1 383 assert.equal(renderer.value('color.mix(white, blue, 50%, "hsl")'), '#9f9fdf')
384 384 });
385 385 });
386 386 });
diff --git a/test/contrast.js b/test/contrast.js
@@ -87,57 +87,57 @@ describe('contrast', function() {
87 87 });
88 88 });
89 89
90 -1 describe('contrast-color', function() {
-1 90 describe('color', function() {
91 91 it('white', function() {
92 -1 assert.equal(renderer.value('contrast.contrast-color(white)'), '#000')
-1 92 assert.equal(renderer.value('contrast.color(white)'), '#000')
93 93 });
94 94 it('black', function() {
95 -1 assert.equal(renderer.value('contrast.contrast-color(black)'), '#fff')
-1 95 assert.equal(renderer.value('contrast.color(black)'), '#fff')
96 96 });
97 97 it('red', function() {
98 -1 assert.equal(renderer.value('contrast.contrast-color(#f00)'), '#000')
-1 98 assert.equal(renderer.value('contrast.color(#f00)'), '#000')
99 99 });
100 100 it('green', function() {
101 -1 assert.equal(renderer.value('contrast.contrast-color(#0f0)'), '#000')
-1 101 assert.equal(renderer.value('contrast.color(#0f0)'), '#000')
102 102 });
103 103 it('blue', function() {
104 -1 assert.equal(renderer.value('contrast.contrast-color(#00f)'), '#fff')
-1 104 assert.equal(renderer.value('contrast.color(#00f)'), '#fff')
105 105 });
106 106 it('yellow', function() {
107 -1 assert.equal(renderer.value('contrast.contrast-color(yellow)'), '#000')
-1 107 assert.equal(renderer.value('contrast.color(yellow)'), '#000')
108 108 });
109 109 it('cyan', function() {
110 -1 assert.equal(renderer.value('contrast.contrast-color(cyan)'), '#000')
-1 110 assert.equal(renderer.value('contrast.color(cyan)'), '#000')
111 111 });
112 112 it('light', function() {
113 -1 assert.equal(renderer.value('contrast.contrast-color(white, #111, #eee)'), '#111')
-1 113 assert.equal(renderer.value('contrast.color(white, #111, #eee)'), '#111')
114 114 });
115 115 it('dark', function() {
116 -1 assert.equal(renderer.value('contrast.contrast-color(black, #111, #eee)'), '#eee')
-1 116 assert.equal(renderer.value('contrast.color(black, #111, #eee)'), '#eee')
117 117 });
118 118 it('middle', function() {
119 -1 assert.equal(renderer.value('contrast.contrast-color(#555, #111, #eee)'), '#eee')
-1 119 assert.equal(renderer.value('contrast.color(#555, #111, #eee)'), '#eee')
120 120 });
121 121 it('swapped', function() {
122 -1 assert.equal(renderer.value('contrast.contrast-color(white, #eee, #111)'), '#111')
-1 122 assert.equal(renderer.value('contrast.color(white, #eee, #111)'), '#111')
123 123 });
124 124 });
125 125
126 -1 describe('contrast-stretch', function() {
-1 126 describe('stretch', function() {
127 127 it('white-black', function() {
128 -1 assert.equal(renderer.value('contrast.contrast-stretch(white, black)'), '#000')
-1 128 assert.equal(renderer.value('contrast.stretch(white, black)'), '#000')
129 129 });
130 130 it('white-#333', function() {
131 -1 assert.equal(renderer.value('contrast.contrast-stretch(white, #333)'), '#333')
-1 131 assert.equal(renderer.value('contrast.stretch(white, #333)'), '#333')
132 132 });
133 133 it('white-#333-21', function() {
134 -1 assert.equal(renderer.value('contrast.contrast-stretch(white, #333, 21)'), '#000')
-1 134 assert.equal(renderer.value('contrast.stretch(white, #333, 21)'), '#000')
135 135 });
136 136 it('#333-blue-7', function() {
137 -1 assert.equal(renderer.value('contrast.contrast-stretch(#333, blue, 7)'), '#bbf')
-1 137 assert.equal(renderer.value('contrast.stretch(#333, blue, 7)'), '#bbf')
138 138 });
139 139 it('#333-blue-AAA', function() {
140 -1 assert.equal(renderer.value('contrast.contrast-stretch(#333, blue, "AAA")'), '#bbf')
-1 140 assert.equal(renderer.value('contrast.stretch(#333, blue, "AAA")'), '#bbf')
141 141 });
142 142 });
143 143 });