Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- This file uses pow(), currently there is no such function
- in sass by default. Pow() can be added via node-sass custom
- functions or via eyeglass + eyeglass-math packages.
- There are a few examples of sass only pow, but they are way
- slower then node based solutions. (last I checked)
- */
- @function luma($color){
- // Get sRGB values
- $sR: red($color)/255;
- $sG: green($color)/255;
- $sB: blue($color)/255;
- // Calculate luminance
- $R: if($sR <= 0.03928, $sR/12.92, pow(($sR + 0.055)/1.055, 2.4));
- $G: if($sG <= 0.03928, $sG/12.92, pow(($sG + 0.055)/1.055, 2.4));
- $B: if($sB <= 0.0392, $sB/12.92, pow(($sB + 0.055)/1.055, 2.4));
- @return (0.2126 * $R + 0.7152 * $G + 0.0722 * $B);
- }
- @function contrast($color1, $color2: white){
- $luminance1: luma($color1) + .05;
- $luminance2: luma($color2) + .05;
- $ratio: $luminance1 / $luminance2;
- @if $luminance2 > $luminance1 {
- $ratio: 1 / $ratio;
- }
- @return $ratio;
- }
- @function compliantColor($sample, $against: white, $ratio: 4.5){
- $maxRatio: 21;
- $sampleRatio: contrast($sample, $against);
- @while $sampleRatio < $ratio {
- $sample: darken($sample, 1%);
- $sampleRatio: contrast($sample, $against);
- }
- @return $sample;
- }
- /*
- Will return a color that is a compliant text color
- against red. In this case the color we are checking is blue.
- */
- $compliant: compliantColor(blue, $against: red, $ratio: 4.5);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement