Skip to content

Instantly share code, notes, and snippets.

@aliatsis
Created January 22, 2014 07:23
Show Gist options
  • Select an option

  • Save aliatsis/8554738 to your computer and use it in GitHub Desktop.

Select an option

Save aliatsis/8554738 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="myClass" style>Please Click Me!</button>
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
@function parseNumber($number) {
@return $number / ($number * 0 + 1);
}
@function isNeutralBg($color) {
$l: parseNumber(lightness($color));
@return parseNumber(saturation($color)) < (20 + if($l > 75, (($l - 75) * ($l - 75)) / 24000, 0)) and $l > 65 and $l < 100;
}
//Neutral: start
$colorNeutral3-: #78777a;
$colorNeutral2-: #acabae;
$colorNeutral1-: #cacac9;
$colorNeutral0: #dddddc;
$colorNeutral1: #ededeb;
$colorNeutral2: #f1f1f1;
$colorNeutral3: #f2f2ef;
$colorNeutral4: #f6f6f5;
$colorNeutrals: $colorNeutral3-, $colorNeutral2-, $colorNeutral1-, $colorNeutral0, $colorNeutral1, $colorNeutral2, $colorNeutral3, $colorNeutral4;
//Neutral: end
//Grey: start
$colorGrey3-: #38454c;
$colorGrey2-: #4a5357;
$colorGrey1-: #8c9ea5;
$colorGrey0: #c6ced2;
$colorGreys: $colorGrey3-, $colorGrey2-, $colorGrey1-, $colorGrey0;
//Grey: end
//Navy: start
$colorNavy3-: #1a333d;
$colorNavy2-: #133340;
$colorNavy1-: #173e4d;
$colorNavy0: #1c4657;
$colorNavy1: #356880;
$colorNavy2: #317290;
$colorNavy3: #6c848f;
$colorNavy4: #9bb6b8;
$colorNavys: $colorNavy3-, $colorNavy2-, $colorNavy1-, $colorNavy0, $colorNavy1, $colorNavy2, $colorNavy3, $colorNavy4;
//Navy: end
//Teal: start
$colorTeal4-: #37736a;
$colorTeal3-: #469594;
$colorTeal2-: #55998b;
$colorTeal1-: #38b29a;
$colorTeal0: #67bbaa;
$colorTeal1: #aeddd5;
$colorTeal2: #e0f1ec;
$colorTeals: $colorTeal4-, $colorTeal3-, $colorTeal2-, $colorTeal1-, $colorTeal0, $colorTeal1, $colorTeal2;
//Teal: end
//Marigold: start
$colorMarigold0: #f79849;
$colorMarigold1: #f2a14a;
$colorMarigold2: #ffc99c;
$colorMarigolds: $colorMarigold0, $colorMarigold1, $colorMarigold2;
//Marigold: end
//Coral: start
$colorCoral3-: #ab3e28;
$colorCoral2-: #bd452e;
$colorCoral1-: #ed5646;
$colorCoral0: #f16b50;
$colorCorals: $colorCoral3-, $colorCoral2-, $colorCoral1-, $colorCoral0;
//Coral: end
//Green: start
$colorGreen0: #29b473;
$colorGreens: $colorGreen0;
//Green: end
//White: start
$colorWhite0: #FFFFFF;
$colorWhites: $colorWhite0;
//White: end
@function test($list) {
$result: "";
@each $col in $list {
$result: $result + isNeutralBg($col) + " ";
}
@return $result;
}
@function testContrast($list) {
$result: "";
@each $col in $list {
$result: $result + (lightness($col) < 63) + " ";
}
@return $result;
}
.neutralBg {
neutrals: test($colorNeutrals);
greys: test($colorGreys);
navys: test($colorNavys);
teals: test($colorTeals);
marigolds: test($colorMarigolds);
corals: test($colorCorals);
greens: test($colorGreens);
whites: test($colorWhites);
}
.constrastToLight {
neutrals: testContrast($colorNeutrals);
greys: testContrast($colorGreys);
navys: testContrast($colorNavys);
teals: testContrast($colorTeals);
marigolds: testContrast($colorMarigolds);
corals: testContrast($colorCorals);
greens: testContrast($colorGreens);
whites: testContrast($colorWhites);
}
$bg: $colorNeutral2-;
.myClass {
background: $bg;
color: $colorNavy0;
lightness: lightness($bg);
saturation: saturation($bg);
result: isNeutralBg($bg);
}
.neutralBg {
neutrals: "false true true true true true true true ";
greys: "false false false true ";
navys: "false false false false false false false true ";
teals: "false false false false false false false ";
marigolds: "false false false ";
corals: "false false false false ";
greens: "false ";
whites: "false ";
}
.constrastToLight {
neutrals: "true false false false false false false false ";
greys: "true true true false ";
navys: "true true true true true true true false ";
teals: "true true true true true false false ";
marigolds: "true true false ";
corals: "true true true true ";
greens: "true ";
whites: "false ";
}
.myClass {
background: #acabae;
color: #1c4657;
lightness: 67.64706%;
saturation: 1.81818%;
result: true;
}
<div class="myClass" style>Please Click Me!</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment