Tables: Add variables for base table styles

Author: kristyjy

scss/atoms/tables/_mixins.scss

@@ -0,0 +1,5 @@
+/*
+* ==========================================================================
+* Table mixins
+* ==========================================================================
+*/

scss/atoms/tables/_tables.scss

@@ -1,35 +1,38 @@
 /*
 * ==========================================================================
-* Typography
+* Tables
 * ==========================================================================
 */
 
+@import
+	"dist/chassis",
+	"mixins";
+
 table {
 	width: 100%;
-	margin-bottom: em( 20px, 16px );
-	font-size: em( 16px );
+	margin: map-get($table-base, margin);
+	font-size: map-get($table-base, font-size);
 	text-align: left;
 }
 
 thead {
-	border-bottom: 1px solid #eee;
-
+	border-bottom: map-get($table-base, border);
 	> tr > th {
 		border-top: 0;
 	}
 }
 
 td {
-	border-top: 1px solid #eee;
-	padding: em( 12px, 16px );
+	border-top: map-get($table-base, border);
+	padding: map-get($table-base, padding);
 }
 
 th {
-	border-top: 1px solid #eee;
-	padding: em( 12px, 12px );
-	color: #666;
+	border-top: map-get($table-base, border);
+	padding: map-get($table-base, padding);
+	color: map-get($table-base, color);
 	font-weight: 400;
-	font-size: em( 12px, 16px );
+	font-size: map-get($table-base, thead-font-size);
 	white-space: nowrap;
 }
 

scss/variables/tables.js

@@ -0,0 +1,26 @@
+( function( root, factory ) {
+	if ( typeof define === "function" && define.amd ) {
+		define( [ "./chassis" ], factory );
+	} else if ( typeof exports === "object" ) {
+		module.exports = factory( require( "./chassis" ) );
+	} else {
+		root.chassis = factory( root.chassis );
+	}
+}( this, function( chassis ) {
+
+chassis.table = {
+	"table-base": {
+		name: "Table Element",
+		value: {
+			"margin": "0 0 1em",
+			"font-size": "16px",
+			"thead-font-size" : "12px",
+			"border": "1px solid #eee",
+			"padding" : "12px",
+			"color" : "#666"
+		}
+	},
+};
+
+return chassis;
+} ) );