Advertisement
Guest User

Untitled

a guest
Jan 23rd, 2017
84
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.37 KB | None | 0 0
  1. /*
  2. This file uses pow(), currently there is no such function
  3. in sass by default. Pow() can be added via node-sass custom
  4. functions or via eyeglass + eyeglass-math packages.
  5.  
  6. There are a few examples of sass only pow, but they are way
  7. slower then node based solutions. (last I checked)
  8. */
  9.  
  10. @function luma($color){
  11. // Get sRGB values
  12. $sR: red($color)/255;
  13. $sG: green($color)/255;
  14. $sB: blue($color)/255;
  15.  
  16. // Calculate luminance
  17. $R: if($sR <= 0.03928, $sR/12.92, pow(($sR + 0.055)/1.055, 2.4));
  18. $G: if($sG <= 0.03928, $sG/12.92, pow(($sG + 0.055)/1.055, 2.4));
  19. $B: if($sB <= 0.0392, $sB/12.92, pow(($sB + 0.055)/1.055, 2.4));
  20.  
  21. @return (0.2126 * $R + 0.7152 * $G + 0.0722 * $B);
  22. }
  23.  
  24. @function contrast($color1, $color2: white){
  25. $luminance1: luma($color1) + .05;
  26. $luminance2: luma($color2) + .05;
  27. $ratio: $luminance1 / $luminance2;
  28.  
  29. @if $luminance2 > $luminance1 {
  30. $ratio: 1 / $ratio;
  31. }
  32.  
  33. @return $ratio;
  34. }
  35.  
  36. @function compliantColor($sample, $against: white, $ratio: 4.5){
  37. $maxRatio: 21;
  38. $sampleRatio: contrast($sample, $against);
  39.  
  40. @while $sampleRatio < $ratio {
  41. $sample: darken($sample, 1%);
  42. $sampleRatio: contrast($sample, $against);
  43. }
  44.  
  45. @return $sample;
  46. }
  47.  
  48. /*
  49. Will return a color that is a compliant text color
  50. against red. In this case the color we are checking is blue.
  51. */
  52. $compliant: compliantColor(blue, $against: red, $ratio: 4.5);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement