Typography: Add Link Variables

Author: rohmulan

scss/atoms/typography/_typography.scss

@@ -54,7 +54,7 @@ h6 {
 	font-size: em( 16px );
 	font-weight: 600;
 	line-height: 1;
-	text-transform: uppercase;
+	text-transform: uppercase; // FIXME Is this opinionated?
 }
 
 /*
@@ -65,7 +65,7 @@ h6 {
 
 hr {
 	border: 0;
-	border-bottom: 1px solid #999;
+	border-bottom: 1px solid #999; //TODO replace with color variable
 }
 
 blockquote {
@@ -78,7 +78,7 @@ blockquote {
 
 pre {
 	padding: 16px 20px;
-	background: #f7f7f7;
+	background: #f7f7f7; // TODO replace with color variable
 	font: normal 12px/1.4 $monospace;
 }
 
@@ -103,15 +103,23 @@ dd {
 */
 
 a {
-	//TODO add colors
+	color: map-get($link,color);
+	font-weight: map-get($link,weight);
+	text-decoration: map-get($link,decoration);
+
+	&:hover {
+		color: map-get($link-hover,color);
+		text-decoration: map-get($link-hover,decoration);
+	}
 
-	&:hover,
 	&:active,
 	&:focus {
-		//TODO add colors
+		color: map-get($link-focus,color);
+		text-decoration: map-get($link-focus,decoration);
 	}
 	&:visited {
-		// TODO add colors
+		color: map-get($link-visited,color);
+		text-decoration: map-get($link-visited,decoration);
 	}
 }
 
@@ -124,5 +132,5 @@ code {
 	background: #f2f2f2; // TODO replace with color variable
 	font-size: em( 16px );
 	padding: em( 4px, 16px ) em( 8px, 16px );
-	border-radius: 3px;
+	border-radius: 3px; // TODO replace with variable
 }

scss/variables/typography.js

@@ -10,7 +10,8 @@
 
 var color = "#222",
 	fontSize = "20px",
-	lineHeight = 1.5;
+	lineHeight = 1.5,
+	linkColor = "#4078c0";
 
 chassis.typography = {
 	normal: {
@@ -52,6 +53,34 @@ chassis.typography = {
 	sans: {
 		name: "Font Family - Sans",
 		value: "Helvetica, Arial, sans-serif"
+	},
+	link: {
+		name: "Link",
+		value: {
+			color: linkColor, // TODO replace with a color from the color-palette
+			decoration: "none"
+		}
+	},
+	"link-hover": {
+		name: "Link On Mouse Hover",
+		value: {
+			color: linkColor,
+			decoration: "underline"
+		}
+	},
+	"link-focus": {
+		name: "Link On Focus or Active",
+		value: {
+			color: linkColor,
+			decoration: "none"
+		}
+	},
+	"link-visited": {
+		name: "Link If Visited",
+		value: {
+			color: linkColor,
+			decoration: "none"
+		}
 	}
 };