Created
July 18, 2012 20:20
-
-
Save erikjung/3138603 to your computer and use it in GitHub Desktop.
Mapping Solarized Color Values with SASS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| http_path = "/" | |
| css_dir = "" | |
| sass_dir = "" | |
| images_dir = "" | |
| javascripts_dir = "" | |
| output_style = :expanded | |
| line_comments = false | |
| preferred_syntax = :scss |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment