- commit
- ce65ab0e4647a4597ebdd4277a0d0cd60d31f485
- parent
- 0f92ed17286c42968bc3195915d9c06fd8acf03c
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2017-10-17 07:24
adapt docs
Diffstat
| M | CHANGES.md | 5 | +++++ |
| M | README.md | 3 | ++- |
| M | sass/color.scss | 40 | +++++++++++++++++++++++----------------- |
3 files changed, 30 insertions, 18 deletions
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,3 +1,8 @@ -1 1 0.5.0 (unreleased) -1 2 ------------------ -1 3 -1 4 - color: add support for HSLab and HSLuv color spaces -1 5 1 6 0.4.2 (2017-07-21) 2 7 ------------------ 3 8
diff --git a/README.md b/README.md
@@ -33,7 +33,8 @@ Import it in your Sass files: 33 33 - High performance math algorithms 34 34 - WCAG compatible [color 35 35 contrast](https://www.w3.org/TR/WCAG20/#contrast-ratiodef) functions36 -1 - CIELAB/CIELUV based color functions-1 36 - CIELAB/CIELUV based color functions (with support for -1 37 [HSLuv](http://www.hsluv.org/)) 37 38 - More functionality may be added on demand. 38 39 - Can be installed with bower or npm (eyeglass). Other options may be added 39 40 on demand.
diff --git a/sass/color.scss b/sass/color.scss
@@ -9,6 +9,12 @@ 9 9 /// CIELAB and CIELUV both try to be close to human perception, so they may 10 10 /// give nicer results in many cases than simple RGB/HSL. 11 11 /// -1 12 /// HSLab and HSLuv are variants of CIELAB and CIELUV that scale the chroma -1 13 /// instead of clipping. With CIELAB, you know that `lch(40, 50, 10deg, 'lab')` -1 14 /// and `lch(70, 50, 90deg, 'lab')` have the same chroma (except when clipping -1 15 /// is applied). With HSLab, you know that `lch(40, 50, 10deg, 'hslab')` always -1 16 /// has half the chroma of `lch(40, 100, 10deg, 'hslab')`. -1 17 /// 12 18 /// @group color 13 19 //// 14 20 @@ -290,7 +296,7 @@ $planifolia-colorspace: 'lab' !default; 290 296 /// @param {number} $lightness 0 .. 100 291 297 /// @param {number} $chroma 0 .. ca. 140 292 298 /// @param {angle} $hue293 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 299 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 294 300 /// @return {color} 295 301 /// 296 302 /// @require pow @@ -323,7 +329,7 @@ $planifolia-colorspace: 'lab' !default; 323 329 /// @param {number} $chroma 324 330 /// @param {angle} $hue 325 331 /// @param {number} $alpha326 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 332 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 327 333 /// @return {color} 328 334 @function lcha($lightness, $chroma, $hue, $alpha, $colorspace: $planifolia-colorspace) { 329 335 @return rgba(lch($lightness, $chroma, $hue, $colorspace), $alpha); @@ -331,7 +337,7 @@ $planifolia-colorspace: 'lab' !default; 331 337 332 338 /// Get the lightness component of a color. 333 339 /// @param {color} $color334 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 340 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 335 341 /// @return {number} 336 342 @function pf-lightness($color, $colorspace: $planifolia-colorspace) { 337 343 @return nth(_pf-to-lch($color, $colorspace), 1); @@ -339,7 +345,7 @@ $planifolia-colorspace: 'lab' !default; 339 345 340 346 /// Get the chroma component of a color. 341 347 /// @param {color} $color342 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 348 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 343 349 /// @return {number} 344 350 @function pf-chroma($color, $colorspace: $planifolia-colorspace) { 345 351 @return nth(_pf-to-lch($color, $colorspace), 2); @@ -347,7 +353,7 @@ $planifolia-colorspace: 'lab' !default; 347 353 348 354 /// Get the hue component of a color. 349 355 /// @param {color} $color350 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 356 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 351 357 /// @return {angle} 352 358 @function pf-hue($color, $colorspace: $planifolia-colorspace) { 353 359 @return nth(_pf-to-lch($color, $colorspace), 3); @@ -358,7 +364,7 @@ $planifolia-colorspace: 'lab' !default; 358 364 /// @param {number} $lightness [0] 359 365 /// @param {number} $chroma [0] 360 366 /// @param {angle} $hue [0]361 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 367 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 362 368 /// @return {color} 363 369 @function pf-adjust-color($color, $lightness: 0, $chroma: 0, $hue: 0, $colorspace: $planifolia-colorspace) { 364 370 $lch: _pf-to-lch($color, $colorspace); @@ -375,7 +381,7 @@ $planifolia-colorspace: 'lab' !default; 375 381 /// @param {number} $lightness [null] 376 382 /// @param {number} $chroma [null] 377 383 /// @param {angle} $hue [null]378 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 384 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 379 385 /// @return {color} 380 386 @function pf-change-color($color, $lightness: null, $chroma: null, $hue: null, $colorspace: $planifolia-colorspace) { 381 387 $lch: _pf-to-lch($color, $colorspace); @@ -389,7 +395,7 @@ $planifolia-colorspace: 'lab' !default; 389 395 390 396 /// @param {color} $color 391 397 /// @param {number} $angle392 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 398 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 393 399 /// @return {color} 394 400 @function pf-adjust-hue($color, $angle, $colorspace: $planifolia-colorspace) { 395 401 @return pf-adjust-color($color, $hue: $angle, $colorspace: $colorspace); @@ -397,7 +403,7 @@ $planifolia-colorspace: 'lab' !default; 397 403 398 404 /// @param {color} $color 399 405 /// @param {number} $amount400 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 406 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 401 407 /// @return {color} 402 408 @function pf-lighten($color, $amount, $colorspace: $planifolia-colorspace) { 403 409 @return pf-adjust-color($color, $lightness: $amount, $colorspace: $colorspace); @@ -405,7 +411,7 @@ $planifolia-colorspace: 'lab' !default; 405 411 406 412 /// @param {color} $color 407 413 /// @param {number} $amount408 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 414 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 409 415 /// @return {color} 410 416 @function pf-darken($color, $amount, $colorspace: $planifolia-colorspace) { 411 417 @return pf-adjust-color($color, $lightness: -$amount, $colorspace: $colorspace); @@ -413,7 +419,7 @@ $planifolia-colorspace: 'lab' !default; 413 419 414 420 /// @param {color} $color 415 421 /// @param {number} $weight416 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 422 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 417 423 /// @return {color} 418 424 @function pf-tint($color, $weight, $colorspace: $planifolia-colorspace) { 419 425 @return pf-mix(white, $color, $weight, $colorspace); @@ -421,7 +427,7 @@ $planifolia-colorspace: 'lab' !default; 421 427 422 428 /// @param {color} $color 423 429 /// @param {number} $weight424 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 430 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 425 431 /// @return {color} 426 432 @function pf-shade($color, $weight, $colorspace: $planifolia-colorspace) { 427 433 @return pf-mix(black, $color, $weight, $colorspace); @@ -429,7 +435,7 @@ $planifolia-colorspace: 'lab' !default; 429 435 430 436 /// @param {color} $color 431 437 /// @param {number} $amount432 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 438 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 433 439 /// @return {color} 434 440 @function pf-saturate($color, $amount, $colorspace: $planifolia-colorspace) { 435 441 @return pf-adjust-color($color, $chroma: $amount, $colorspace: $colorspace); @@ -437,14 +443,14 @@ $planifolia-colorspace: 'lab' !default; 437 443 438 444 /// @param {color} $color 439 445 /// @param {number} $amount440 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 446 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 441 447 /// @return {color} 442 448 @function pf-desaturate($color, $amount, $colorspace: $planifolia-colorspace) { 443 449 @return pf-adjust-color($color, $chroma: -$amount, $colorspace: $colorspace); 444 450 } 445 451 446 452 /// @param {color} $color447 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 453 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 448 454 /// @return {color} 449 455 /// @require pi 450 456 @function pf-complement($color, $colorspace: $planifolia-colorspace) { @@ -452,7 +458,7 @@ $planifolia-colorspace: 'lab' !default; 452 458 } 453 459 454 460 /// @param {color} $color455 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 461 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 456 462 /// @return {color} 457 463 /// @require pi 458 464 @function pf-grayscale($color, $colorspace: $planifolia-colorspace) { @@ -504,7 +510,7 @@ $planifolia-colorspace: 'lab' !default; 504 510 /// @param {color} $color1 505 511 /// @param {color} $color2 506 512 /// @param {number} $weight [50%]507 -1 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv'-1 513 /// @param {string} $colorspace ['lab'] one of 'lab', 'luv', 'hsl', 'yuv', 'hslab', 'hsluv' 508 514 /// @return {color} 509 515 @function pf-mix($color1, $color2, $weight: 50%, $colorspace: $planifolia-colorspace) { 510 516 $lch1: _pf-to-lch($color1, $colorspace);