Skip to content

Instantly share code, notes, and snippets.

@gordonbanderson
Created November 4, 2015 03:37
Show Gist options
  • Save gordonbanderson/689a58edfab9ec920d9f to your computer and use it in GitHub Desktop.
Save gordonbanderson/689a58edfab9ec920d9f to your computer and use it in GitHub Desktop.
//split complimentaryish
$rotate: 160;
$baseColor1: #ED1C24;
$baseColor2: #241D4F;
$baseColor3: #bd10d4;
$baseColor4: #ffff00;
$baseColor5: #4E573A;
$themeColor1: $baseColor1;
$themeColor2: $baseColor2;
$themeColor3: $baseColor3;
$themeColor4: $baseColor4;
$themeColor5: $baseColor5;
$range1: 10%;
$range2: 10%;
$range3: 10%;
$range4: 20%;
$range5: 10%;
$themeColor1dark: adjust-color($baseColor1, $lightness: -$range1);
$themeColor1darker: adjust-color($baseColor1, $lightness: -2*$range1);
$themeColor1darkest: adjust-color($baseColor1, $lightness: -3*$range1);
$themeColor1light: adjust-color($baseColor1, $lightness: $range1);
$themeColor1lighter: adjust-color($baseColor1, $lightness: 2*$range1);
$themeColor1lightest: adjust-color($baseColor1, $lightness: 3*$range1);
$themeColor1hint: adjust-color($baseColor1, $lightness: 5*$range1);
$themeColor2dark: adjust-color($baseColor2, $lightness: -$range2);
$themeColor2darker: adjust-color($baseColor2, $lightness: -2*$range2);
$themeColor2darkest: adjust-color($baseColor2, $lightness: -3*$range2);
$themeColor2light: adjust-color($baseColor2, $lightness: 2*$range2);
$themeColor2lighter: adjust-color($baseColor2, $lightness: 2*$range2);
$themeColor2lightest: adjust-color($baseColor2, $lightness: 3*$range2);
$themeColor2hint: adjust-color($baseColor2, $lightness: 5*$range2);
$themeColor3dark: adjust-color($baseColor3, $lightness: -$range3);
$themeColor3darker: adjust-color($baseColor3, $lightness: -2*$range3);
$themeColor3darkest: adjust-color($baseColor3, $lightness: -3*$range3);
$themeColor3light: adjust-color($baseColor3, $lightness: $range3);
$themeColor3lighter: adjust-color($baseColor3, $lightness: 2*$range3);
$themeColor3lightest: adjust-color($baseColor3, $lightness: 3*$range3);
$themeColor3hint: adjust-color($baseColor3, $lightness: 5*$range3);
$themeColor4dark: adjust-color($baseColor4, $lightness: -$range4);
$themeColor4darker: adjust-color($baseColor4, $lightness: -2*$range4);
$themeColor4darkest: adjust-color($baseColor4, $lightness: -4*$range4);
$themeColor4light: adjust-color($baseColor4, $lightness: 2*$range4);
$themeColor4lighter: adjust-color($baseColor4, $lightness: 2*$range4);
$themeColor4lightest: adjust-color($baseColor4, $lightness: 4*$range4);
$themeColor4hint: adjust-color($baseColor4, $lightness: 5*$range4);
$themeColor5dark: adjust-color($baseColor5, $lightness: -2*$range5);
$themeColor5darker: adjust-color($baseColor5, $lightness: -2*$range5);
$themeColor5darkest: adjust-color($baseColor5, $lightness: -5*$range5);
$themeColor5light: adjust-color($baseColor5, $lightness: 2*$range5);
$themeColor5lighter: adjust-color($baseColor5, $lightness: 2*$range5);
$themeColor5lightest: adjust-color($baseColor5, $lightness: 5*$range5);
$themeColor5hint: adjust-color($baseColor5, $lightness: 5*$range5);
$monochromeDarkest: #000;
$monochromeDarker: #222;
$monochromeDark: #555;
$monochromeMid: #888;
$monochromeLight: #AAA;
$monochromeLighter: #DDD;
$monochromeLightest: #FFF;
$headerBG: $themeColor1;
// navigation
// ---- top bar ----
$topBarFG: white;
$topBarBG: $themeColor2;
$topBarDropDownFG: $themeColor4lightest;
$topBarDropDownBG: $themeColor3darkest;
$topBarDropDownActiveFG: $themeColor4light;
$topBarDropDownActiveBG: $themeColor2lighter;
$topBarHoverBG: $themeColor2light;
$topBarActiveHoverFG: white;
$topBarActiveHoverBG: $topBarHoverBG;
$captionFG: $themeColor1lightest;
$captionBG: black;
$captionOpacity: 0.4;
$sideBarNavHeadingFG: $themeColor1darkest;
$sideBarNavFG: $themeColor3dark;
$sideBarNavBG: #eee;
$topBarFGSelected: $themeColor1;
$topBarBGSelected: white;
$sideBarFGSelected: $themeColor4lightest;
$sideBarBGSelected: $topBarHoverBG;
$sideBarFGHover: white;
$sideBarBGHover: $themeColor2lightest;
$breadcrumbsBG: $sideBarNavBG;
$breadcrumbsFG: $themeColor2;
$breadcrumbSelectedFG: $themeColor2lightest;
$borderTopColor: #444;
$borderBottomColor: #AAA;
$headerCompanyNameColor: $themeColor1;
$tagLineFG: $themeColor4light;
// ---- banner colors ----
$bannerFG: $themeColor2lightest;
$bannerBG: green;
$paginationBorder: #E6E6E6;
$paginationFG: #636363;
$paginationBG: #F9F9F9;
$paginationFGselected: $themeColor1;
$paginationBGselected: #E8EFFD;
// comments form
$commentsPanelBG: #F2F2F2;
// -- footer colors --
$footerHeaderFG: white;
$footerFG: white;
$footerBG: $themeColor2;
$searchFooterFG: $themeColor1;
$headingColor: $themeColor2light;
$headingColorHover: $themeColor2dark;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment