diff --git a/scss/_functions.scss b/scss/_functions.scss index af4e060..0edb539 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -1,70 +1,9 @@ -/** - * Power of function. - * @param {number} $number Base number. - * @param {number} $exponent Exponenet. - * @return {number} Result. - */ -@function press_pow($number, $exponent) { - // https://css-tricks.com/snippets/sass/power-function/#article-header-id-2 - $value: 1; - @if $exponent > 0 { - @for $i from 1 through round($exponent) { - $value: $value * $number; - } - } @else if $exponent < 0 { - @for $i from 1 through -$exponent { - $value: $value / $number; - } +@function checkColor($color){ + $test : round((red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114)); + @if($test < 125){ + @return $press-text-color; } - @return $value; -} - -/** - * Determin the luminance of a color. - * @param {color} $color A color. - * @return {number} Luminance. - */ -@function press_color_luminance($color) { - // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js - $rgba: red($color), green($color), blue($color); - $rgba2: (); - @for $i from 1 through 3 { - $rgb: nth($rgba, $i); - $rgb: $rgb / 255; - $rgb: if($rgb < .03928, $rgb / 12.92, press_pow(($rgb + .055) / 1.055, 2.4)); - $rgba2: append($rgba2, $rgb); - } - @return ( .2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3) ); -} - -/** - * Generate a color ratio for two colors. - * @param {color} $color1 First color. - * @param {color} $color2 Second color. - * @return {number} Returns a rounded ratio number. - */ -@function press_color_contrast_ratio($color1, $color2) { - // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js - $luminance1: press_color_luminance($color1) + .05; - $luminance2: press_color_luminance($color2) + .05; - $ratio: $luminance1 / $luminance2; - @if $luminance2 > $luminance1 { - $ratio: 1 / $ratio; - } - $ratio: round($ratio * 10) / 10; - @return $ratio; -} - -/** - * Evaluable color contrast and return a contrasting color. - * @param {color} $background (Required) Color of text in background. - * @param {color} $textColor: $press-text-color (Optional) Color of text in foreground. - * @return {color} If enough contrast, it returns $textColor, else it returns $press-text-alt. - */ -@function press_test_contrast($background, $textColor: $press-text-color) { - @if(press_color_contrast_ratio($textColor, $background) > 4.5) { - @return $textColor; - } @else { + @else { @return $press-text-alt; } -} \ No newline at end of file +} diff --git a/scss/press.scss b/scss/press.scss index 60a156b..3c30251 100644 --- a/scss/press.scss +++ b/scss/press.scss @@ -14,6 +14,15 @@ $press-text-alt: #000 !default; * @param {color} $textColor: $press-text-color (Optional) Set a default text color. * @return {mixin} Returns the mixin and sub-classes. */ + +@mixin setTextColor($condition, $color) { + @if($condition) { + --c: #{checkColor($color)}; + } + @else { + --c: #{$press-text-color}; + } +} @mixin press( $testContrast: true, $textColor: $press-text-color ) { // Base @@ -34,7 +43,7 @@ $press-text-alt: #000 !default; @each $color, $hex in $press-css-colors { &-#{$color} { --p: #{$hex}; - --c: if( $testContrast, press_test_contrast($hex, $textColor), $textColor ); + @include setTextColor($testContrast, $hex); --h: #{lighten($hex, 5%)}; --a: #{darken($hex, 10%)}; }