Typography: Add heading and code variables

Author: rohmulan

scss/atoms/typography/_mixins.scss

@@ -1,5 +1,11 @@
 /*
 * ==========================================================================
-* Typography functions
+* Typography mixins
 * ==========================================================================
 */
+@mixin heading($style) {
+	font-size: em(map-get($style,fontSize));
+	font-weight: map-get($style,fontWeight);
+	line-height: 1;
+	text-transform: map-get($style,capitalization);
+}

scss/atoms/typography/_typography.scss

@@ -21,40 +21,27 @@ body {
 }
 
 h1 {
-	font-size: em( 67px ); // 54px works nicely, as well
-	font-weight: 700;
-	line-height: 1;
+	@include heading($h1);
 }
 
 h2 {
-	font-size: em( 36px );
-	font-weight: 600;
-	line-height: 1;
+	@include heading($h2);
 }
 
 h3 {
-	font-size: em( 30px );
-	font-weight: 600;
-	line-height: 1;
+	@include heading($h3);
 }
 
 h4 {
-	font-size: em( 24px );
-	font-weight: 600;
-	line-height: 1;
+	@include heading($h4);
 }
 
 h5 {
-	font-size: em( 20px );
-	font-weight: 600;
-	line-height: 1;
+	@include heading($h5);
 }
 
 h6 {
-	font-size: em( 16px );
-	font-weight: 600;
-	line-height: 1;
-	text-transform: uppercase; // FIXME Is this opinionated?
+	@include heading($h6);
 }
 
 /*
@@ -78,7 +65,7 @@ blockquote {
 
 pre {
 	padding: 16px 20px;
-	background: #f7f7f7; // TODO replace with color variable
+	background: map-get($pre,background);
 	font: normal 12px/1.4 $monospace;
 }
 
@@ -129,8 +116,8 @@ strong {
 }
 
 code {
-	background: #f2f2f2; // TODO replace with color variable
+	background: map-get($code,background);
 	font-size: em( 16px );
 	padding: em( 4px, 16px ) em( 8px, 16px );
-	border-radius: 3px; // TODO replace with variable
+	border-radius: map-get($code,borderRadius);
 }

scss/variables/typography.js

@@ -82,14 +82,76 @@ chassis.typography = {
 			decoration: "none"
 		}
 	},
-	"hr": {
+	hr: {
 		name: "HR style",
 		value: {
 			color: "#999",
 			thickness: "1px",
 			style: "solid"
 		}
+	},
+	code: {
+		name: "code style",
+		value: {
+			background: "#f2f2f2",
+			borderRadius: "3px"
+		}
+	},
+	pre: {
+		name: "Pre style",
+		value: {
+			background: "#f7f7f7"
+		}
+	},
+	h1: {
+		name: "H1 Style",
+		value: {
+			fontWeight: "700",
+			fontSize: "67px",
+			capitalization: "none"
+		}
+	},
+	h2: {
+		name: "H2 Style",
+		value: {
+			fontWeight: "600",
+			fontSize: "36px",
+			capitalization: "none"
+		}
+	},
+	h3: {
+		name: "H3 Style",
+		value: {
+			fontWeight: "600",
+			fontSize: "30px",
+			capitalization: "none"
+		}
+	},
+	h4: {
+		name: "H4 Style",
+		value: {
+			fontWeight: "600",
+			fontSize: "24px",
+			capitalization: "none"
+		}
+	},
+	h5: {
+		name: "H5 Style",
+		value: {
+			fontWeight: "600",
+			fontSize: "20px",
+			capitalization: "none"
+		}
+	},
+	h6: {
+		name: "H6 Style",
+		value: {
+			fontWeight: "600",
+			fontSize: "16px",
+			capitalization: "uppercase"
+		}
 	}
+
 };
 
 return chassis;