erikjung
7/18/2012 - 8:20 PM

Mapping Solarized Color Values with SASS

Mapping Solarized Color Values with SASS

screen.scss
content_copyfile_download
/*

SOLARIZED HEX     16/8 TERMCOL  XTERM/HEX   L*A*B      RGB         HSB
--------- ------- ---- -------  ----------- ---------- ----------- -----------
base03    #002b36  8/4 brblack  234 #1c1c1c 15 -12 -12   0  43  54 193 100  21
base02    #073642  0/4 black    235 #262626 20 -12 -12   7  54  66 192  90  26
base01    #586e75 10/7 brgreen  240 #585858 45 -07 -07  88 110 117 194  25  46
base00    #657b83 11/7 bryellow 241 #626262 50 -07 -07 101 123 131 195  23  51
base0     #839496 12/6 brblue   244 #808080 60 -06 -03 131 148 150 186  13  59
base1     #93a1a1 14/4 brcyan   245 #8a8a8a 65 -05 -02 147 161 161 180   9  63
base2     #eee8d5  7/7 white    254 #e4e4e4 92 -00  10 238 232 213  44  11  93
base3     #fdf6e3 15/7 brwhite  230 #ffffd7 97  00  10 253 246 227  44  10  99

yellow    #b58900  3/3 yellow   136 #af8700 60  10  65 181 137   0  45 100  71
orange    #cb4b16  9/3 brred    166 #d75f00 50  50  55 203  75  22  18  89  80
red       #dc322f  1/1 red      160 #d70000 50  65  45 220  50  47   1  79  86
magenta   #d33682  5/5 magenta  125 #af005f 50  65 -05 211  54 130 331  74  83
violet    #6c71c4 13/5 brmagenta 61 #5f5faf 50  15 -45 108 113 196 237  45  77
blue      #268bd2  4/4 blue      33 #0087ff 55 -10 -45  38 139 210 205  82  82
cyan      #2aa198  6/6 cyan      37 #00afaf 60 -35 -05  42 161 152 175  74  63
green     #859900  2/2 green     64 #5f8700 60 -20  65 133 153   0  68 100  60

*/

// Returns a variation of $sourceColor with the lightness of the Solarized base color specified by $name
@function baseColor($name, $sourceColor) {
  @each $color in base03 #002b36, base02 #073642, base01 #586e75, base00 #657b83, base0 #839496, base1 #93a1a1, base2 #eee8d5, base3 #fdf6e3 {
    $lightness: lightness(nth($color, 2));
    @if $name == nth($color, 1) {
      @return hsl(hue($sourceColor), saturation($sourceColor), $lightness);
    }
  }
  @return false;
}

// Returns a variation of $sourceColor with the saturation and lightness of the Solarized accent color specified by $name
@function accentColor($name, $sourceColor) {
  @each $color in yellow #b58900, orange #cb4b16, red #dc322f, magenta #d33682, violet #6c71c4, blue #268bd2, cyan #2aa198, green #859900 {
    $saturation: saturation(nth($color, 2));
    $lightness: lightness(nth($color, 2));
    @if $name == nth($color, 1) {
      @return hsl(hue($sourceColor), $saturation, $lightness);
    }
  }
  @return false;
}

// Applies background and text colors for light or dark themes
@mixin rebaseColors($base1, $base2, $base3) {
  background-color: $base1;
  color: $base2;
  strong, em, h4, h5, h6 {
    color: $base3;
  }
}

//

$brandGray: #383838;
$brandYellow: #f9c400;
$brandOrange: #f06800;
$brandRed: #e72232;

$base03: baseColor(base03, $brandGray);
$base01: baseColor(base01, $brandGray);
$base00: baseColor(base00, $brandGray);
$base0:  baseColor(base0, $brandGray);
$base1:  baseColor(base1, $brandGray);
$base3:  baseColor(base3, $brandGray);
$yellow: accentColor(yellow, $brandYellow);
$orange: accentColor(orange, $brandOrange);
$red:    accentColor(red, $brandRed);

html {
  font: 2em/1.4 sans-serif;
  margin: 0;
}

body {
  margin: 0;
}

div {
  padding: 1em;
}

.light {
  @include rebaseColors($base03, $base0, $base1);
}

.dark {
  @include rebaseColors($base3, $base00, $base01);
}

h1 {
  color: $red;
}

h3 {
  color: $yellow;
}

a {
  color: $orange;
}
screen.css
content_copyfile_download
html {
  font: 2em/1.4 sans-serif;
  margin: 0;
}

body {
  margin: 0;
}

div {
  padding: 1em;
}

.light {
  background-color: #1b1b1b;
  color: #8d8d8d;
}
.light strong, .light em, .light h4, .light h5, .light h6 {
  color: #9a9a9a;
}

.dark {
  background-color: #f0f0f0;
  color: #747474;
}
.dark strong, .dark em, .dark h4, .dark h5, .dark h6 {
  color: #676767;
}

h1 {
  color: #dc2f3d;
}

h3 {
  color: #b58e00;
}

a {
  color: #cb6416;
}
index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="screen.css">
</head>
<body>
  <div class="light">
    <h1>Header</h1>
    <h3>Subheader</h3>
    <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus.
    <a href="">link</a></p>
  </div>
  
  <div class="dark">
    <h1>Header</h1>
    <h3>Subheader</h3>
    <h4>Another header</h4>
    <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus.
    <a href="">link</a></p>
  </div>
</body>
</html>
config.rb
content_copyfile_download
http_path = "/"
css_dir = ""
sass_dir = ""
images_dir = ""
javascripts_dir = ""
output_style = :expanded
line_comments = false
preferred_syntax = :scss