Typography: Use color variables and palette

Author: rohmulan

scss/atoms/typography/_typography.scss

@@ -65,7 +65,7 @@ h6 {
 
 hr {
 	border: 0;
-	border-bottom: 1px solid #999; //TODO replace with color variable
+	border-bottom: map-get($hr, thickness) map-get($hr, style) map-get($hr, color);
 }
 
 blockquote {

scss/variables/typography.js

@@ -8,10 +8,10 @@
 	}
 }( this, function( chassis ) {
 
-var color = "#222",
+var color = "map-get($text, base)",
 	fontSize = "20px",
 	lineHeight = 1.5,
-	linkColor = "#4078c0";
+	linkColor = "map-get($primary, light)";
 
 chassis.typography = {
 	normal: {
@@ -57,7 +57,7 @@ chassis.typography = {
 	link: {
 		name: "Link",
 		value: {
-			color: linkColor, // TODO replace with a color from the color-palette
+			color: linkColor,
 			decoration: "none"
 		}
 	},
@@ -81,6 +81,14 @@ chassis.typography = {
 			color: linkColor,
 			decoration: "none"
 		}
+	},
+	"hr": {
+		name: "HR style",
+		value: {
+			color: "#999",
+			thickness: "1px",
+			style: "solid",
+		}
 	}
 };