typography: added color variables

Author: Christina Thompson

scss/atoms/typography/_typography.scss

@@ -65,20 +65,20 @@ h6 {
 
 hr {
 	border: 0;
-	border-bottom: 1px solid #999;
+	border-bottom: 1px solid $hr-border-color;
 }
 
 blockquote {
 	margin: 0;
 	padding-left: 1em;
 	position: relative;
-	border-left: 4px solid #eee; // TODO replace with color variable
+	border-left: 4px solid $blockquote-color;
 	font-style: italic;
 }
 
 pre {
 	padding: 16px 20px;
-	background: #f7f7f7;
+	background: $pre-bgcolor;
 	font: normal 12px/1.4 $monospace;
 }
 
@@ -121,7 +121,7 @@ strong {
 }
 
 code {
-	background: #f2f2f2; // TODO replace with color variable
+	background: $code-background;
 	font-size: em( 16px );
 	padding: em( 4px, 16px ) em( 8px, 16px );
 	border-radius: 3px;

scss/variables/typography.js

@@ -52,6 +52,22 @@ chassis.typography = {
 	sans: {
 		name: "Font Family - Sans",
 		value: "Helvetica, Arial, sans-serif"
+	},
+	"blockquote-color": {
+		name: "blockquote color",
+		value: "#eee"
+	},
+	"code-background": {
+		name: "Code Background Color",
+		value: "#F2F2F2"
+	},
+	"pre-bgcolor": {
+		name: "Pre Background Color",
+		value: "#f7f7f7"
+	},
+	"hr-border-color": {
+		name: "Horizontal Rule Border Color",
+		value: "#999"
 	}
 };