Tables: Add more variables for table styles

Author: kristyjy

scss/atoms/tables/_tables.scss

@@ -9,7 +9,7 @@
 	"mixins";
 
 .table {
-	@include table(map-get($table-base, margin), map-get($table-base, font-size));
+	@include table(map-get($table-base, margin), map-deep-get($table-base, font-size, font-size));
 }
 
 .table-full {
@@ -39,10 +39,12 @@
 /* th */
 .table-heading {
 	display: table-cell;
-	border-top: map-get($table-base, border);
+	border-top-width: map-get($table-base, border-width);
+	border-top-style: map-get($table-base, border-style);
+	border-top-color: map-deep-get($table-base, border-color, dark);
 	padding: map-get($table-base, padding);
 	color: map-get($colors-text, light);
-	font-weight: 400;
+	font-weight: map-get($table-base, font-weight);
 	font-size: map-get($table-base, thead-font-size);
 }
 

scss/atoms/typography/_functions.scss

@@ -11,6 +11,6 @@
 * 1. font-size: em(14px);
 * 2. font-size: em(30px/14px);
 */
-@function em($value, $context: map-get($typography-font-default, font-size)) {
+@function em($value, $context: map-get($typography-default, font-size)) {
 	@return ($value / $context * 1em);
 }

scss/atoms/typography/_typography.scss

@@ -10,7 +10,7 @@
 	"mixins";
 
 body {
-	font: $typography-normal #{ map-get( $typography-font-default, font-size ) }/1.5 $typography-sans;
+	font: $typography-normal #{ map-get( $typography-default, font-size ) }/1.5 $typography-sans;
 
 	@media ( max-width: $breakpoints-viewport-md-min ) {
 		font-size: 16px;

scss/variables/tables.js

@@ -1,8 +1,10 @@
 ( function( root, factory ) {
 	if ( typeof define === "function" && define.amd ) {
-		define( [ "./chassis" ], factory );
+		define( [ "./chassis", "./colors", "./typograpy" ], factory );
 	} else if ( typeof exports === "object" ) {
-		module.exports = factory( require( "./chassis" ) );
+		require( "./chassis" );
+		require( "./colors" );
+		module.exports = factory( require( "./typography" ) );
 	} else {
 		root.chassis = factory( root.chassis );
 	}
@@ -13,10 +15,13 @@ chassis.table = {
 		name: "Table Element",
 		value: {
 			"margin": "0 0 1em",
-			"font-size": "16px",
+			"font-size": () => "typography.default",
 			"thead-font-size": "12px",
-			"border": "1px solid #eee",
-			"padding": "12px"
+			"border-width": "1px",
+			"border-style": "solid",
+			"border-color": () => "colors.default",
+			"padding": "12px",
+			"font-weight": 400
 		}
 	}
 };

scss/variables/typography.js

@@ -34,7 +34,7 @@ chassis.typography = {
 		name: "Line Height",
 		value: lineHeight
 	},
-	"font-default": {
+	"default": {
 		name: "Type Style - Default",
 		value: {
 			"color": color,