diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss index ae0b4e01b..3acece625 100644 --- a/app/assets/stylesheets/common/foundation/variables.scss +++ b/app/assets/stylesheets/common/foundation/variables.scss @@ -39,24 +39,32 @@ $base-font-family: Helvetica, Arial, sans-serif !default; @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)); } -// Replaces dark-light-diff($primary, $secondary, 50%, -50%) // Uses an approximation of sRGB blending, GAMMA=2 instead of GAMMA=2.2 -@function choose-grey($percent) { +@function srgb-scale($foreground, $background, $percent) { $ratio: ($percent / 100%); $iratio: 1 - $ratio; - $pr2: red($primary) * red($primary); - $pg2: green($primary) * green($primary); - $pb2: blue($primary) * blue($primary); - $sr2: red($secondary) * red($secondary); - $sg2: green($secondary) * green($secondary); - $sb2: blue($secondary) * blue($secondary); - $rr2: $pr2 * $ratio + $sr2 * $iratio; - $rg2: $pg2 * $ratio + $sg2 * $iratio; - $rb2: $pb2 * $ratio + $sb2 * $iratio; - $rr: sqrt($rr2); - $rg: sqrt($rg2); - $rb: sqrt($rb2); - @return rgb($rr, $rg, $rb); + $f_r2: red($foreground) * red($foreground); + $f_g2: green($foreground) * green($foreground); + $f_b2: blue($foreground) * blue($foreground); + $b_r2: red($background) * red($background); + $b_g2: green($background) * green($background); + $b_b2: blue($background) * blue($background); + $r_r2: $f_r2 * $ratio + $b_r2 * $iratio; + $r_g2: $f_g2 * $ratio + $b_g2 * $iratio; + $r_b2: $f_b2 * $ratio + $b_b2 * $iratio; + $r_r: sqrt($r_r2); + $r_g: sqrt($r_g2); + $r_b: sqrt($r_b2); + @return rgb($r_r, $r_g, $r_b); +} + +// Replaces dark-light-diff($primary, $secondary, 50%, -50%) +@function choose-grey($percent) { + @return srgb-scale($primary, $secondary, $percent); +} + +@function choose-gray($percent) { + @return choose-grey($percent); } @function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) {