codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-24 08:09:13 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

DEV: Add choose-grey() function for better greys

Browse source
This commit is contained in:
Kane York 2015-08-20 12:54:07 -07:00
parent 0ae9d99308
commit 156c3651b5
2 changed files with 47 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
app/assets/stylesheets/common/foundation/variables.scss
View file

@ -31,11 +31,57 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
@import "theme_variables"; @import "theme_variables";
@import "plugins_variables"; @import "plugins_variables";
// Color Utilities
// Square Root function
// http://codepen.io/Designer023/pen/DkEtw
@function approximateSq($num, $approx) {
$root : (( $num / $approx ) + $approx) / 2;
@return $root;
}
@function sqrt($num) {
$root:0;
$testRoot : 0.001;
$upperBounds : round($num / 2) + 1; //never need over half the main number. Add one just to be sure!
$loops : $upperBounds;
@for $test from 2 through $upperBounds {
$sq : $test * $test;
@if $sq <= $num {
$testRoot : $test;
}
}
$root : (approximateSq($num, $testRoot));
@return $root;
}
// w3c definition of color brightness // w3c definition of color brightness
@function brightness($color) { @function brightness($color) {
@return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)); @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) {
$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);
}
@function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) { @function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) {
@if brightness($adjusted-color) < brightness($comparison-color) { @if brightness($adjusted-color) < brightness($comparison-color) {
@return scale-color($adjusted-color, $lightness: $lightness); @return scale-color($adjusted-color, $lightness: $lightness);

2
app/assets/stylesheets/mobile/topic-list.scss
View file

@ -65,7 +65,7 @@
> tbody > tr { > tbody > tr {
&.highlighted { &.highlighted {
background-color: scale-color($tertiary, $lightness: 85%); background-color: dark-light-choose(scale-color($tertiary, $lightness: 85%), scale-color($tertiary, $lightness: -55%));
} }
} }