sass-planifolia

commit

efe7a5392b0c4cd0be14adb40b2113d156733aa4

parent

5b78936b11f69ce413f6fbbaaa0f1b1bd8e29a28

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2017-07-21 15:56

add contrast-stretch

Diffstat

2 files changed, 55 insertions, 0 deletions

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

@@ -140,6 +140,43 @@ $planifolia-contrast-light-default: white !default;
  140   140   }
  141   141 }
  142   142 
   -1   143 /// Mix color with black or white to increase contrast for a given base color.
   -1   144 ///
   -1   145 /// @param {color} $base
   -1   146 /// @param {color} $color
   -1   147 /// @param {number} $contrast [4.5]
   -1   148 ///    (can also be 'AA', 'AALG', 'AAA', or 'AAALG')
   -1   149 /// @return {color}
   -1   150 @function contrast-stretch($base, $color, $contrast: 4.5) {
   -1   151   $contrast: _pf-threshold($contrast);
   -1   152   $lower: $color;
   -1   153   $upper: if(luma($base) < .18, white, black);
   -1   154 
   -1   155   @if contrast($base, $lower) >= $contrast {
   -1   156     @return $lower;
   -1   157   }
   -1   158   @if contrast($base, $upper) <= $contrast {
   -1   159     @return $upper;
   -1   160   }
   -1   161 
   -1   162   $result: mix($lower, $upper);
   -1   163 
   -1   164   // NOTE: This is not a usual binary search. It is possible that the contrast
   -1   165   // first decreases for a while when going from $lower to $upper.  However, we
   -1   166   // checked that it starts below $contrast, so the algorithm still works.
   -1   167   @for $i from 0 to 10 {
   -1   168     @if contrast($base, $result) < $contrast {
   -1   169       $lower: $result;
   -1   170     } @else {
   -1   171       $upper: $result;
   -1   172     }
   -1   173 
   -1   174     $result: mix($lower, $upper);
   -1   175   }
   -1   176 
   -1   177   @return $result;
   -1   178 }
   -1   179 
  143   180 /// Warn if the contrast is below a threshold.
  144   181 ///
  145   182 /// @param {color} $color1 background color

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

@@ -128,4 +128,22 @@ describe('contrast', function() {
  128   128       sassaby.func('contrast-color').calledWithArgs('white', '#eee', '#111').equals('#111');
  129   129     });
  130   130   });
   -1   131 
   -1   132   describe('contrast-stretch', function() {
   -1   133     it('white-black', function() {
   -1   134       sassaby.func('contrast-stretch').calledWithArgs('white', 'black').equals('black');
   -1   135     });
   -1   136     it('white-#333', function() {
   -1   137       sassaby.func('contrast-stretch').calledWithArgs('white', '#333').equals('#333');
   -1   138     });
   -1   139     it('white-#333-21', function() {
   -1   140       sassaby.func('contrast-stretch').calledWithArgs('white', '#333', '21').equals('black');
   -1   141     });
   -1   142     it('#333-blue-7', function() {
   -1   143       sassaby.func('contrast-stretch').calledWithArgs('#333', 'blue', '7').equals('#bbf');
   -1   144     });
   -1   145     it('#333-blue-AAA', function() {
   -1   146       sassaby.func('contrast-stretch').calledWithArgs('#333', 'blue', 'AAA').equals('#bbf');
   -1   147     });
   -1   148   });
  131   149 });