From dbfc7b96fddc2825d024f98bb2bb87f79320ae0b Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Tue, 24 Nov 2015 01:52:34 -0500
Subject: [PATCH 01/17] Variables: Initial pass on button variables

---
 scss/variables/buttons.js | 107 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 scss/variables/buttons.js

diff --git a/scss/variables/buttons.js b/scss/variables/buttons.js
new file mode 100644
index 0000000..a730740
--- /dev/null
+++ b/scss/variables/buttons.js
@@ -0,0 +1,107 @@
+( 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.uiButton = {
+	"ui-btn": {
+		name: "Generic Button Styles",
+		value: {
+		 "font-weight": 500,
+		 "margin": ".25em",
+		 "text-transform": "none"
+		}
+	},
+	"ui-btn-default": {
+		name: "Default Button",
+		value: {
+			"color": "#383838",
+			"background": "#ffffff"
+		}
+	},
+	"ui-btn-primary": {
+		name: "Primary Button",
+		value: {
+			"color": "#ffffff",
+			"background": "#337ab7"
+		}
+	},
+	"ui-btn-success": {
+		name: "Success Button",
+		value: {
+			"color": "#ffffff",
+			"background": "#5cb85c"
+		}
+	},
+	"ui-btn-info": {
+		name: "Info Button",
+		value: {
+			"color": "#ffffff",
+			"background": "#5bc0de"
+		}
+	},
+	"ui-btn-warning": {
+		name: "Warning Button",
+		value: {
+			"color": "#ffffff",
+			"background": "#f0ad4e"
+		}
+	},
+	"ui-btn-danger": {
+		name: "Danger Button",
+		value: {
+			"color": "#ffffff",
+			"background": "#d9534f"
+		}
+	},
+	"ui-btn-disabled": {
+		name: "Disabled Button",
+		value: {
+			"opacity": ".6"
+		}
+	},
+	"ui-btn-lg": {
+		name: "Large Button",
+		value: {
+			"border-radius": "2px",
+			"font-size": "16px",
+			"line-height": "16px",
+			"padding": ".75em 1.25em"
+		}
+	},
+	"ui-btn-md": {
+		name: "Medium Sized Button",
+		value: {
+			"border-radius": "2px",
+			"font-size": "14px",
+			"line-height": "14px",
+			"padding": ".5em 1em"
+		}
+	},
+	"ui-btn-sm": {
+		name: "Small Button",
+		value: {
+			"border-radius": "2px",
+			"font-size": "12px",
+			"line-height": "12px",
+			"padding": ".35em .75em"
+		}
+	},
+  "ui-btn-xs": {
+		name: "Extra Small Button",
+		value: {
+			"border-radius": "2px",
+			"font-size": "12px",
+			"line-height": "12px",
+			"padding": ".2em .35em"
+		}
+	}
+};
+
+return chassis;
+} ) );

From e5caf9efbaed2f30ed117c93fa4b538c586fd69e Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Tue, 24 Nov 2015 08:20:55 -0500
Subject: [PATCH 02/17] Buttons: Fixing spacing issue

---
 scss/variables/buttons.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/variables/buttons.js b/scss/variables/buttons.js
index a730740..6f9b38c 100644
--- a/scss/variables/buttons.js
+++ b/scss/variables/buttons.js
@@ -92,7 +92,7 @@ chassis.uiButton = {
 			"padding": ".35em .75em"
 		}
 	},
-  "ui-btn-xs": {
+	"ui-btn-xs": {
 		name: "Extra Small Button",
 		value: {
 			"border-radius": "2px",

From f6f2b11a8d700955044d1fa38bffdba4c221b207 Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Tue, 15 Dec 2015 13:24:43 -0500
Subject: [PATCH 03/17] Buttons: Base Pass on button sizes and button colors.

---
 demos/buttons.html                          | 179 ++++++++++++++++++++
 scss/atoms/buttons/_buttons.scss            |  53 ++++++
 scss/atoms/buttons/_mixins.scss             |  45 +++++
 scss/lint.scss                              |   3 +-
 scss/style.scss                             |   3 +-
 scss/variables/{buttons.js => z_buttons.js} |  23 ++-
 6 files changed, 298 insertions(+), 8 deletions(-)
 create mode 100644 demos/buttons.html
 create mode 100644 scss/atoms/buttons/_buttons.scss
 create mode 100644 scss/atoms/buttons/_mixins.scss
 rename scss/variables/{buttons.js => z_buttons.js} (79%)

diff --git a/demos/buttons.html b/demos/buttons.html
new file mode 100644
index 0000000..80b1e71
--- /dev/null
+++ b/demos/buttons.html
@@ -0,0 +1,179 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>CSS Chassis - Typography</title>
+	<meta name="description" content="Button skeleton for styling">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../dist/css/chassis.css">
+	<link rel="stylesheet" href="demos.css">
+	<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic" rel="stylesheet">
+</head>
+<body>
+
+<h1>CSS Chassis</h1>
+
+<h2>Extra Small Buttons<h2>
+<p>
+<button class="btn btn-xs">Default</button>
+<button class="btn btn-primary btn-xs">Primary</button>
+<button class="btn btn-success btn-xs">Success</button>
+<button class="btn btn-info btn-xs">Info</button>
+<button class="btn btn-warning btn-xs">Warning</button>
+<button class="btn btn-danger btn-xs">Danger</button>
+</p>
+
+<h3>Extra Small Active</h3>
+<p>
+<button class="btn btn-xs active">Default</button>
+<button class="btn btn-primary btn-xs active">Primary</button>
+<button class="btn btn-success btn-xs active">Success</button>
+<button class="btn btn-info btn-xs active">Info</button>
+<button class="btn btn-warning btn-xs active">Warning</button>
+<button class="btn btn-danger btn-xs active">Danger</button>
+</p>
+
+<h3>Extra Small Focus</h3>
+<p>
+<button class="btn btn-xs focus">Default</button>
+<button class="btn btn-primary btn-xs focus">Primary</button>
+<button class="btn btn-success btn-xs focus">Success</button>
+<button class="btn btn-info btn-xs focus">Info</button>
+<button class="btn btn-warning btn-xs focus">Warning</button>
+<button class="btn btn-danger btn-xs focus">Danger</button>
+</p>
+
+<h3>Extra Small Hover</h3>
+<p>
+<button class="btn btn-xs hover">Default</button>
+<button class="btn btn-primary btn-xs hover">Primary</button>
+<button class="btn btn-success btn-xs hover">Success</button>
+<button class="btn btn-info btn-xs hover">Info</button>
+<button class="btn btn-warning btn-xs hover">Warning</button>
+<button class="btn btn-danger btn-xs hover">Danger</button>
+</p>
+
+
+<h2>Small Buttons</h2>
+<p>
+<button class="btn btn-sm">Default</button>
+<button class="btn btn-primary btn-sm">Primary</button>
+<button class="btn btn-success btn-sm">Success</button>
+<button class="btn btn-info btn-sm">Info</button>
+<button class="btn btn-warning btn-sm">Warning</button>
+<button class="btn btn-danger btn-sm">Danger</button>
+</p>
+
+<h3>Small Active</h3>
+<p>
+<button class="btn btn-sm active">Default</button>
+<button class="btn btn-primary btn-sm active">Primary</button>
+<button class="btn btn-success btn-sm active">Success</button>
+<button class="btn btn-info btn-sm active">Info</button>
+<button class="btn btn-warning btn-sm active">Warning</button>
+<button class="btn btn-danger btn-sm active">Danger</button>
+</p>
+
+<h3>Small Focus</h3>
+<p>
+<button class="btn btn-sm focus">Default</button>
+<button class="btn btn-primary btn-sm focus">Primary</button>
+<button class="btn btn-success btn-sm focus">Success</button>
+<button class="btn btn-info btn-sm focus">Info</button>
+<button class="btn btn-warning btn-sm focus">Warning</button>
+<button class="btn btn-danger btn-sm focus">Danger</button>
+</p>
+
+<h3>Small Hover</h3>
+<p>
+<button class="btn btn-sm hover">Default</button>
+<button class="btn btn-primary btn-sm hover">Primary</button>
+<button class="btn btn-success btn-sm hover">Success</button>
+<button class="btn btn-info btn-sm hover">Info</button>
+<button class="btn btn-warning btn-sm hover">Warning</button>
+<button class="btn btn-danger btn-sm hover">Danger</button>
+</p>
+
+<h2>Default Buttons</h2>
+<p>
+<button class="btn">Default</button>
+<button class="btn btn-primary">Primary</button>
+<button class="btn btn-success">Success</button>
+<button class="btn btn-info">Info</button>
+<button class="btn btn-warning">Warning</button>
+<button class="btn btn-danger">Danger</button>
+</p>
+
+<h3>Default Active</h3>
+<p>
+<button class="btn active">Default</button>
+<button class="btn btn-primary active">Primary</button>
+<button class="btn btn-success active">Success</button>
+<button class="btn btn-info active">Info</button>
+<button class="btn btn-warning active">Warning</button>
+<button class="btn btn-danger active">Danger</button>
+</p>
+
+<h3>Default Focus</h3>
+<p>
+<button class="btn focus">Default</button>
+<button class="btn btn-primary focus">Primary</button>
+<button class="btn btn-success focus">Success</button>
+<button class="btn btn-info focus">Info</button>
+<button class="btn btn-warning focus">Warning</button>
+<button class="btn btn-danger focus">Danger</button>
+</p>
+
+<h3>Default Hover</h3>
+<p>
+<button class="btn hover">Default</button>
+<button class="btn btn-primary hover">Primary</button>
+<button class="btn btn-success hover">Success</button>
+<button class="btn btn-info hover">Info</button>
+<button class="btn btn-warning hover">Warning</button>
+<button class="btn btn-danger hover">Danger</button>
+</p>
+
+<h2>Large Buttons</h2>
+<p>
+<button class="btn btn-lg">Default</button>
+<button class="btn btn-primary btn-lg">Primary</button>
+<button class="btn btn-success btn-lg">Success</button>
+<button class="btn btn-info btn-lg">Info</button>
+<button class="btn btn-warning btn-lg">Warning</button>
+<button class="btn btn-danger btn-lg">Danger</button>
+</p>
+
+<h3>Large Active</h3>
+<p>
+<button class="btn btn-lg active">Default</button>
+<button class="btn btn-primary btn-lg active">Primary</button>
+<button class="btn btn-success btn-lg active">Success</button>
+<button class="btn btn-info btn-lg active">Info</button>
+<button class="btn btn-warning btn-lg active">Warning</button>
+<button class="btn btn-danger btn-lg active">Danger</button>
+</p>
+
+<h3>Large Focus</h3>
+<p>
+<button class="btn btn-lg focus">Default</button>
+<button class="btn btn-primary btn-lg focus">Primary</button>
+<button class="btn btn-success btn-lg focus">Success</button>
+<button class="btn btn-info btn-lg focus">Info</button>
+<button class="btn btn-warning btn-lg focus">Warning</button>
+<button class="btn btn-danger btn-lg focus">Danger</button>
+</p>
+
+<h3>Large Hover</h3>
+<p>
+<button class="btn btn-lg hover">Default</button>
+<button class="btn btn-primary btn-lg hover">Primary</button>
+<button class="btn btn-success btn-lg hover">Success</button>
+<button class="btn btn-info btn-lg hover">Info</button>
+<button class="btn btn-warning btn-lg hover">Warning</button>
+<button class="btn btn-danger btn-lg hover">Danger</button>
+</p>
+
+
+</body>
+</html>
diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss
new file mode 100644
index 0000000..e37927f
--- /dev/null
+++ b/scss/atoms/buttons/_buttons.scss
@@ -0,0 +1,53 @@
+/*
+* ==========================================================================
+* Buttons
+* ==========================================================================
+*/
+
+@import
+	"dist/chassis",
+	"mixins";
+
+.btn {
+	border: 1px solid transparent;
+	cursor: pointer;
+	font-family: $ui-btn-font;
+	@include btn-colors($ui-btn-default);
+	@include btn-size($ui-btn-md);
+}
+
+/* Button Colors */
+
+.btn-primary {
+	@include btn-colors($ui-btn-primary);
+}
+
+.btn-success {
+	@include btn-colors($ui-btn-success);
+}
+
+.btn-info {
+	@include btn-colors($ui-btn-info);
+}
+
+.btn-warning {
+	@include btn-colors($ui-btn-warning);
+}
+
+.btn-danger {
+	@include btn-colors($ui-btn-danger );
+}
+
+/* Button Sizes */
+
+.btn-lg {
+	@include btn-size($ui-btn-lg);
+}
+
+.btn-sm {
+	@include btn-size($ui-btn-sm);
+}
+
+.btn-xs {
+	@include btn-size($ui-btn-xs);
+}
diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss
new file mode 100644
index 0000000..b22b150
--- /dev/null
+++ b/scss/atoms/buttons/_mixins.scss
@@ -0,0 +1,45 @@
+@mixin btn-colors($btn-colors) {
+	color: map-get($btn-colors, color);
+	background: map-get($btn-colors, background);
+	border-color: map-get($btn-colors, border);
+
+	&:active,
+	&.active {
+		@include btn-active($btn-colors);
+	}
+
+	&:focus,
+	&.focus {
+		@include btn-focus($btn-colors);
+	}
+
+	&:hover,
+	&.hover {
+		@include btn-hover($btn-colors);
+	}
+}
+
+@mixin btn-size($btn-size) {
+	border-radius: map-get($btn-size, border-radius);
+	font-size: map-get($btn-size, font-size);
+	line-height: map-get($btn-size, line-height);
+	padding: map-get($btn-size, padding);
+}
+
+@mixin btn-active($btn-colors) {
+	color: map-get($btn-colors, color);
+	background: darken(map-get($btn-colors, background), 30%);
+	border-color: map-get($btn-colors, border);
+}
+
+@mixin btn-focus($btn-colors) {
+	color: map-get($btn-colors, color);
+	background: darken(map-get($btn-colors, background), 25%);
+	border-color: map-get($btn-colors, border);
+}
+
+@mixin btn-hover($btn-colors) {
+	color: map-get($btn-colors, color);
+	background: darken(map-get($btn-colors, background), 20%);
+	border-color: map-get($btn-colors, border);
+}
diff --git a/scss/lint.scss b/scss/lint.scss
index d3cf487..c29923b 100644
--- a/scss/lint.scss
+++ b/scss/lint.scss
@@ -15,7 +15,8 @@
 
 @import
 	"atoms/icons/icons",
-	"atoms/typography/typography";
+	"atoms/typography/typography",
+	"atoms/buttons/buttons";
 
 @import
 	"views/main";
diff --git a/scss/style.scss b/scss/style.scss
index f297126..048218a 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -7,7 +7,8 @@
 
 @import
 	"atoms/icons/icons",
-	"atoms/typography/typography";
+	"atoms/typography/typography",
+	"atoms/buttons/buttons";
 
 @import
 	"views/main";
diff --git a/scss/variables/buttons.js b/scss/variables/z_buttons.js
similarity index 79%
rename from scss/variables/buttons.js
rename to scss/variables/z_buttons.js
index 6f9b38c..1b75289 100644
--- a/scss/variables/buttons.js
+++ b/scss/variables/z_buttons.js
@@ -17,46 +17,57 @@ chassis.uiButton = {
 		 "text-transform": "none"
 		}
 	},
+	"ui-btn-font": {
+		name: "Button Font",
+		value: "$sans"
+	},
 	"ui-btn-default": {
 		name: "Default Button",
 		value: {
 			"color": "#383838",
-			"background": "#ffffff"
+			"background": "#ffffff",
+			"border": "#383838"
 		}
 	},
 	"ui-btn-primary": {
 		name: "Primary Button",
 		value: {
 			"color": "#ffffff",
-			"background": "#337ab7"
+			"background": "#3F51B5",
+			"border": "darken( #3F51B5, 10% )"
 		}
 	},
 	"ui-btn-success": {
 		name: "Success Button",
 		value: {
 			"color": "#ffffff",
-			"background": "#5cb85c"
+			"background": "#4CAF50",
+			"border": "darken( #4CAF50, 10% )"
 		}
 	},
+
 	"ui-btn-info": {
 		name: "Info Button",
 		value: {
 			"color": "#ffffff",
-			"background": "#5bc0de"
+			"background": "#00BCD4",
+			"border": "darken( #00BCD4, 10% )"
 		}
 	},
 	"ui-btn-warning": {
 		name: "Warning Button",
 		value: {
 			"color": "#ffffff",
-			"background": "#f0ad4e"
+			"background": "#FF5722",
+			"border": "darken( #FF5722, 10% )"
 		}
 	},
 	"ui-btn-danger": {
 		name: "Danger Button",
 		value: {
 			"color": "#ffffff",
-			"background": "#d9534f"
+			"background": "#F44336",
+			"border": "darken( #F44336, 10% )"
 		}
 	},
 	"ui-btn-disabled": {

From 55fbd8cbfd18d9950ee5e1d737946fbd199c7a32 Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Tue, 15 Dec 2015 13:58:06 -0500
Subject: [PATCH 04/17] Buttons: Fix typo on h2

---
 demos/buttons.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demos/buttons.html b/demos/buttons.html
index 80b1e71..b61836c 100644
--- a/demos/buttons.html
+++ b/demos/buttons.html
@@ -13,7 +13,7 @@
 
 <h1>CSS Chassis</h1>
 
-<h2>Extra Small Buttons<h2>
+<h2>Extra Small Buttons</h2>
 <p>
 <button class="btn btn-xs">Default</button>
 <button class="btn btn-primary btn-xs">Primary</button>

From d13b067391981c7f9f9f18f74e01c9528f650bdf Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Mon, 18 Jan 2016 23:50:41 -0500
Subject: [PATCH 05/17] Linting: Fixed linting and linting errors

---
 .csslintrc               | 1 +
 demos/buttons.html       | 2 +-
 tasks/options/csslint.js | 5 ++++-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/.csslintrc b/.csslintrc
index 4273f5c..aa4fe55 100644
--- a/.csslintrc
+++ b/.csslintrc
@@ -4,6 +4,7 @@
 	"box-sizing": false,
 	"compatible-vendor-prefixes": false,
 	"duplicate-background-images": false,
+	"font-sizes": false,
 	"import": false,
 	"important": false,
 	"outline-none": false,
diff --git a/demos/buttons.html b/demos/buttons.html
index 80b1e71..b61836c 100644
--- a/demos/buttons.html
+++ b/demos/buttons.html
@@ -13,7 +13,7 @@
 
 <h1>CSS Chassis</h1>
 
-<h2>Extra Small Buttons<h2>
+<h2>Extra Small Buttons</h2>
 <p>
 <button class="btn btn-xs">Default</button>
 <button class="btn btn-primary btn-xs">Primary</button>
diff --git a/tasks/options/csslint.js b/tasks/options/csslint.js
index 7f44561..7a9197f 100644
--- a/tasks/options/csslint.js
+++ b/tasks/options/csslint.js
@@ -1,3 +1,6 @@
 module.exports = {
-	src: [ "dist/css/*.css" ]
+	src: [ "dist/css/*.css" ],
+	options: {
+		csslintrc: ".csslintrc"
+	}
 };

From 210edcb0124fe66e3ec033a496833c373a74ea76 Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Tue, 19 Jan 2016 00:33:05 -0500
Subject: [PATCH 06/17] Buttons: Playing around with some spacing and variables

---
 scss/atoms/buttons/_buttons.scss |  3 +++
 scss/variables/z_buttons.js      | 16 ++++++++--------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss
index e37927f..3f2eea1 100644
--- a/scss/atoms/buttons/_buttons.scss
+++ b/scss/atoms/buttons/_buttons.scss
@@ -12,6 +12,9 @@
 	border: 1px solid transparent;
 	cursor: pointer;
 	font-family: $ui-btn-font;
+	font-weight: map-get($ui-btn, font-weight);
+	margin: map-get($ui-btn, margin);
+	text-transform: map-get($ui-btn, text-transform);
 	@include btn-colors($ui-btn-default);
 	@include btn-size($ui-btn-md);
 }
diff --git a/scss/variables/z_buttons.js b/scss/variables/z_buttons.js
index 1b75289..5880256 100644
--- a/scss/variables/z_buttons.js
+++ b/scss/variables/z_buttons.js
@@ -14,7 +14,7 @@ chassis.uiButton = {
 		value: {
 		 "font-weight": 500,
 		 "margin": ".25em",
-		 "text-transform": "none"
+		 "text-transform": "uppercase",
 		}
 	},
 	"ui-btn-font": {
@@ -34,7 +34,7 @@ chassis.uiButton = {
 		value: {
 			"color": "#ffffff",
 			"background": "#3F51B5",
-			"border": "darken( #3F51B5, 10% )"
+			"border": "transparent"
 		}
 	},
 	"ui-btn-success": {
@@ -42,7 +42,7 @@ chassis.uiButton = {
 		value: {
 			"color": "#ffffff",
 			"background": "#4CAF50",
-			"border": "darken( #4CAF50, 10% )"
+			"border": "transparent"
 		}
 	},
 
@@ -51,7 +51,7 @@ chassis.uiButton = {
 		value: {
 			"color": "#ffffff",
 			"background": "#00BCD4",
-			"border": "darken( #00BCD4, 10% )"
+			"border": "transparent"
 		}
 	},
 	"ui-btn-warning": {
@@ -59,7 +59,7 @@ chassis.uiButton = {
 		value: {
 			"color": "#ffffff",
 			"background": "#FF5722",
-			"border": "darken( #FF5722, 10% )"
+			"border": "transparent"
 		}
 	},
 	"ui-btn-danger": {
@@ -67,7 +67,7 @@ chassis.uiButton = {
 		value: {
 			"color": "#ffffff",
 			"background": "#F44336",
-			"border": "darken( #F44336, 10% )"
+			"border": "transparent"
 		}
 	},
 	"ui-btn-disabled": {
@@ -100,7 +100,7 @@ chassis.uiButton = {
 			"border-radius": "2px",
 			"font-size": "12px",
 			"line-height": "12px",
-			"padding": ".35em .75em"
+			"padding": ".45em .75em"
 		}
 	},
 	"ui-btn-xs": {
@@ -109,7 +109,7 @@ chassis.uiButton = {
 			"border-radius": "2px",
 			"font-size": "12px",
 			"line-height": "12px",
-			"padding": ".2em .35em"
+			"padding": ".35em"
 		}
 	}
 };

From 37a638cf7eff04f2994306a245a62348e21a329d Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Tue, 19 Jan 2016 00:42:08 -0500
Subject: [PATCH 07/17] Linting: fixed error with js linting

---
 scss/variables/z_buttons.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/variables/z_buttons.js b/scss/variables/z_buttons.js
index 5880256..709a483 100644
--- a/scss/variables/z_buttons.js
+++ b/scss/variables/z_buttons.js
@@ -14,7 +14,7 @@ chassis.uiButton = {
 		value: {
 		 "font-weight": 500,
 		 "margin": ".25em",
-		 "text-transform": "uppercase",
+		 "text-transform": "uppercase"
 		}
 	},
 	"ui-btn-font": {

From 81e6191d79e79b426ef5bc6f225e56e84ca44c93 Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Mon, 25 Jan 2016 23:58:52 -0500
Subject: [PATCH 08/17] Colors: Initial pass on updated palette.

---
 scss/variables/colors.js | 93 +++++++++++++++++++++++++---------------
 1 file changed, 58 insertions(+), 35 deletions(-)

diff --git a/scss/variables/colors.js b/scss/variables/colors.js
index 5f7cb5d..dea3f9c 100644
--- a/scss/variables/colors.js
+++ b/scss/variables/colors.js
@@ -8,42 +8,65 @@
 	}
 }( this, function( chassis ) {
 
-var colors = {
-	"chassis-gray-dark": {
-		"value": "#383838",
-		"name": "Chassis Gray - Dark"
-	},
-	"chassis-gray": {
-		"value": "#c1c1c1",
-		"name": "Chassis Gray"
-	},
-	"chassis-gray-light": {
-		"value": "#f2f2f2",
-		"name": "Chassis Gray - Light"
-	},
-	"chassis-blue-dark": {
-		"value": "#388695",
-		"name": "Chassis Blue - Dark"
-	},
-	"chassis-blue": {
-		"value": "#4fc0c8",
-		"name": "Chassis Blue"
-	},
-	"chassis-yellow": {
-		"value": "#fadf51",
-		"name": "Chassis Yellow"
-	}
-};
 chassis.colors = {
-	"background": colors[ "chassis-gray-dark" ],
-	"font": colors[ "chassis-gray-dark" ],
-	"link": colors[ "chassis-blue-dark" ],
-	"button": colors[ "chassis-blue" ],
-	"buttonText": colors[ "chassis-gray-light" ],
-	"blockquoteBorder": {
-		name: "Chassis - Blockquote color",
-		value: "#eee"
-	}
+	"primary": {
+		name: "Primary Colors",
+		value: {
+			"base": "#3F51B5",
+			"light": "#5C6BC0",
+			"dark": "#3949AB",
+			"darker": "#303F9F"
+		}
+	},
+	"success": {
+			name: "Success Colors",
+			values: {
+				"base": "#8BC34A",
+				"light": "#9CCC65",
+				"dark": "#8BC34A",
+				"darker": "#689F38"
+			}
+		},
+	 "warning": {
+			name: "Warning Colors",
+			value: {
+				"base": "#FF9800",
+				"light": "#FFA726",
+				"dark": "#FB8C00",
+				"darker": "#F57C00"
+		 }
+	 },
+		"info": {
+			name: "Info Colors",
+			values: {
+				"base": "#00BCD4",
+				"light": "#26C6DA",
+				"dark": "#00ACC1",
+				"darker": "#0097A7"
+			}
+	 },
+	 "error": {
+			name: "Error Colors",
+			values: {
+				"base": "#F44336",
+				"light": "#EF5350",
+				"dark": "#E53935",
+				"darker": "#D32F2F"
+			}
+	 },
+	 "text": {
+			name: "Text Colors",
+			values: {
+				"base": "#212121",
+				"light": "#727272"
+			}
+	 },
+	 "background": {
+		 name: "Background Colors",
+		 values: {
+			"base": "#fff"
+		 }
+	 }
 };
 return chassis;
 } ) );

From 4b2f1e9fcedd931f3602baf828a04194a22a402d Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Tue, 26 Jan 2016 10:04:15 -0500
Subject: [PATCH 09/17] Buttons: Adding Palette for example

---
 scss/_utilities/_functions.scss  | 13 +++++++++++++
 scss/atoms/buttons/_buttons.scss |  2 +-
 scss/atoms/buttons/_mixins.scss  |  8 ++++----
 scss/lint.scss                   |  1 +
 scss/style.scss                  |  1 +
 scss/variables/colors.js         | 10 +++++-----
 scss/variables/z_buttons.js      | 10 +++++-----
 7 files changed, 30 insertions(+), 15 deletions(-)
 create mode 100644 scss/_utilities/_functions.scss

diff --git a/scss/_utilities/_functions.scss b/scss/_utilities/_functions.scss
new file mode 100644
index 0000000..1341886
--- /dev/null
+++ b/scss/_utilities/_functions.scss
@@ -0,0 +1,13 @@
+/*
+* ==========================================================================
+* Misc. Sass Functions to ease calculations
+* ==========================================================================
+*/
+
+@function map-deep-get($map, $keys...) {
+	$value: $map;
+	@each $key in $keys {
+		$value: map-get($value, $key);
+	}
+	@return $value;
+}
diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss
index 3f2eea1..e7ba6b4 100644
--- a/scss/atoms/buttons/_buttons.scss
+++ b/scss/atoms/buttons/_buttons.scss
@@ -15,7 +15,7 @@
 	font-weight: map-get($ui-btn, font-weight);
 	margin: map-get($ui-btn, margin);
 	text-transform: map-get($ui-btn, text-transform);
-	@include btn-colors($ui-btn-default);
+	//	@include btn-colors($ui-btn-default);
 	@include btn-size($ui-btn-md);
 }
 
diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss
index b22b150..1735631 100644
--- a/scss/atoms/buttons/_mixins.scss
+++ b/scss/atoms/buttons/_mixins.scss
@@ -1,6 +1,6 @@
 @mixin btn-colors($btn-colors) {
 	color: map-get($btn-colors, color);
-	background: map-get($btn-colors, background);
+	background: map-deep-get($btn-colors, "background", "base");
 	border-color: map-get($btn-colors, border);
 
 	&:active,
@@ -28,18 +28,18 @@
 
 @mixin btn-active($btn-colors) {
 	color: map-get($btn-colors, color);
-	background: darken(map-get($btn-colors, background), 30%);
+	background: map-deep-get($btn-colors, "background", "dark");
 	border-color: map-get($btn-colors, border);
 }
 
 @mixin btn-focus($btn-colors) {
 	color: map-get($btn-colors, color);
-	background: darken(map-get($btn-colors, background), 25%);
+	background: map-deep-get($btn-colors, "background", "darker");
 	border-color: map-get($btn-colors, border);
 }
 
 @mixin btn-hover($btn-colors) {
 	color: map-get($btn-colors, color);
-	background: darken(map-get($btn-colors, background), 20%);
+	background: map-deep-get($btn-colors, "background", "light");
 	border-color: map-get($btn-colors, border);
 }
diff --git a/scss/lint.scss b/scss/lint.scss
index f2b495d..ac0fa34 100644
--- a/scss/lint.scss
+++ b/scss/lint.scss
@@ -12,6 +12,7 @@
 @import
 	"_utilities/clearfix",
 	"_utilities/colors",
+	"_utilities/functions",
 	"_utilities/hidden";
 
 @import
diff --git a/scss/style.scss b/scss/style.scss
index 35dd417..81b166a 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -4,6 +4,7 @@
 
 @import
 	"_utilities/clearfix",
+	"_utilities/functions",
 	"_utilities/hidden";
 
 @import
diff --git a/scss/variables/colors.js b/scss/variables/colors.js
index dea3f9c..ffaf3f0 100644
--- a/scss/variables/colors.js
+++ b/scss/variables/colors.js
@@ -20,7 +20,7 @@ chassis.colors = {
 	},
 	"success": {
 			name: "Success Colors",
-			values: {
+			value: {
 				"base": "#8BC34A",
 				"light": "#9CCC65",
 				"dark": "#8BC34A",
@@ -38,7 +38,7 @@ chassis.colors = {
 	 },
 		"info": {
 			name: "Info Colors",
-			values: {
+			value: {
 				"base": "#00BCD4",
 				"light": "#26C6DA",
 				"dark": "#00ACC1",
@@ -47,7 +47,7 @@ chassis.colors = {
 	 },
 	 "error": {
 			name: "Error Colors",
-			values: {
+			value: {
 				"base": "#F44336",
 				"light": "#EF5350",
 				"dark": "#E53935",
@@ -56,14 +56,14 @@ chassis.colors = {
 	 },
 	 "text": {
 			name: "Text Colors",
-			values: {
+			value: {
 				"base": "#212121",
 				"light": "#727272"
 			}
 	 },
 	 "background": {
 		 name: "Background Colors",
-		 values: {
+		 value: {
 			"base": "#fff"
 		 }
 	 }
diff --git a/scss/variables/z_buttons.js b/scss/variables/z_buttons.js
index 709a483..c0310ee 100644
--- a/scss/variables/z_buttons.js
+++ b/scss/variables/z_buttons.js
@@ -33,7 +33,7 @@ chassis.uiButton = {
 		name: "Primary Button",
 		value: {
 			"color": "#ffffff",
-			"background": "#3F51B5",
+			"background": "$primary",
 			"border": "transparent"
 		}
 	},
@@ -41,7 +41,7 @@ chassis.uiButton = {
 		name: "Success Button",
 		value: {
 			"color": "#ffffff",
-			"background": "#4CAF50",
+			"background": "$success",
 			"border": "transparent"
 		}
 	},
@@ -50,7 +50,7 @@ chassis.uiButton = {
 		name: "Info Button",
 		value: {
 			"color": "#ffffff",
-			"background": "#00BCD4",
+			"background": "$info",
 			"border": "transparent"
 		}
 	},
@@ -58,7 +58,7 @@ chassis.uiButton = {
 		name: "Warning Button",
 		value: {
 			"color": "#ffffff",
-			"background": "#FF5722",
+			"background": "$warning",
 			"border": "transparent"
 		}
 	},
@@ -66,7 +66,7 @@ chassis.uiButton = {
 		name: "Danger Button",
 		value: {
 			"color": "#ffffff",
-			"background": "#F44336",
+			"background": "$error",
 			"border": "transparent"
 		}
 	},

From b6e7febe3aec7ffde791e61855cf172b683c0fe6 Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Tue, 9 Feb 2016 01:38:32 -0500
Subject: [PATCH 10/17] Buttons: colors updated, styling updated, added
 disabled styles

---
 demos/buttons.html               | 40 ++++++++++++++++++++++++++++++++
 demos/demos.css                  |  2 +-
 scss/atoms/buttons/_buttons.scss |  2 +-
 scss/atoms/buttons/_mixins.scss  | 21 +++++++++++++++++
 scss/variables/colors.js         | 33 ++++++++++++++++----------
 scss/variables/z_buttons.js      |  6 ++---
 6 files changed, 87 insertions(+), 17 deletions(-)

diff --git a/demos/buttons.html b/demos/buttons.html
index b61836c..e995992 100644
--- a/demos/buttons.html
+++ b/demos/buttons.html
@@ -23,6 +23,16 @@ <h2>Extra Small Buttons</h2>
 <button class="btn btn-danger btn-xs">Danger</button>
 </p>
 
+<h3>Extra Small Disabled</h3>
+<p>
+<button disabled="disabled" class="btn btn-xs">Default</button>
+<button disabled="disabled" class="btn btn-primary btn-xs">Primary</button>
+<button disabled="disabled" class="btn btn-success btn-xs">Success</button>
+<button disabled="disabled" class="btn btn-info btn-xs">Info</button>
+<button disabled="disabled" class="btn btn-warning btn-xs">Warning</button>
+<button disabled="disabled" class="btn btn-danger btn-xs">Danger</button>
+</p>
+
 <h3>Extra Small Active</h3>
 <p>
 <button class="btn btn-xs active">Default</button>
@@ -64,6 +74,16 @@ <h2>Small Buttons</h2>
 <button class="btn btn-danger btn-sm">Danger</button>
 </p>
 
+<h3>Small Disabled</h3>
+<p>
+<button disabled="disabled" class="btn btn-sm">Default</button>
+<button disabled="disabled" class="btn btn-primary btn-sm">Primary</button>
+<button disabled="disabled" class="btn btn-success btn-sm">Success</button>
+<button disabled="disabled" class="btn btn-info btn-sm">Info</button>
+<button disabled="disabled" class="btn btn-warning btn-sm">Warning</button>
+<button disabled="disabled" class="btn btn-danger btn-sm">Danger</button>
+</p>
+
 <h3>Small Active</h3>
 <p>
 <button class="btn btn-sm active">Default</button>
@@ -104,6 +124,16 @@ <h2>Default Buttons</h2>
 <button class="btn btn-danger">Danger</button>
 </p>
 
+<h3>Default Disabled</h3>
+<p>
+<button disabled="disabled" class="btn">Default</button>
+<button disabled="disabled" class="btn btn-primary">Primary</button>
+<button disabled="disabled" class="btn btn-success">Success</button>
+<button disabled="disabled" class="btn btn-info">Info</button>
+<button disabled="disabled" class="btn btn-warning">Warning</button>
+<button disabled="disabled" class="btn btn-danger">Danger</button>
+</p>
+
 <h3>Default Active</h3>
 <p>
 <button class="btn active">Default</button>
@@ -144,6 +174,16 @@ <h2>Large Buttons</h2>
 <button class="btn btn-danger btn-lg">Danger</button>
 </p>
 
+<h3>Large Disabled</h3>
+<p>
+<button disabled="disabled" class="btn btn-lg">Default</button>
+<button disabled="disabled" class="btn btn-primary btn-lg">Primary</button>
+<button disabled="disabled" class="btn btn-success btn-lg">Success</button>
+<button disabled="disabled" class="btn btn-info btn-lg">Info</button>
+<button disabled="disabled" class="btn btn-warning btn-lg">Warning</button>
+<button disabled="disabled" class="btn btn-danger btn-lg">Danger</button>
+</p>
+
 <h3>Large Active</h3>
 <p>
 <button class="btn btn-lg active">Default</button>
diff --git a/demos/demos.css b/demos/demos.css
index 4f0c13a..cc74333 100644
--- a/demos/demos.css
+++ b/demos/demos.css
@@ -1,5 +1,5 @@
 body {
-	max-width: 700px;
+	max-width: 800px;
 	margin: 3em auto;
 	padding: 0 1em;
 }
diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss
index e7ba6b4..3f2eea1 100644
--- a/scss/atoms/buttons/_buttons.scss
+++ b/scss/atoms/buttons/_buttons.scss
@@ -15,7 +15,7 @@
 	font-weight: map-get($ui-btn, font-weight);
 	margin: map-get($ui-btn, margin);
 	text-transform: map-get($ui-btn, text-transform);
-	//	@include btn-colors($ui-btn-default);
+	@include btn-colors($ui-btn-default);
 	@include btn-size($ui-btn-md);
 }
 
diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss
index 1735631..0d72656 100644
--- a/scss/atoms/buttons/_mixins.scss
+++ b/scss/atoms/buttons/_mixins.scss
@@ -17,6 +17,11 @@
 	&.hover {
 		@include btn-hover($btn-colors);
 	}
+
+	&:disabled,
+	&.disabled {
+		@include	btn-disabled($btn-colors);
+	}
 }
 
 @mixin btn-size($btn-size) {
@@ -43,3 +48,19 @@
 	background: map-deep-get($btn-colors, "background", "light");
 	border-color: map-get($btn-colors, border);
 }
+
+@mixin btn-disabled($btn-colors) {
+	cursor: default;
+	color: rgba(map-get($btn-colors, color), .6);
+	$bg: map-deep-get($btn-colors, "background", "base");
+	@if ($bg == transparent) {
+		background: map-deep-get($btn-colors, "background", "base");
+	} @else {
+		background: rgba($bg, .3);
+	}
+	@if (map-get($btn-colors, border) == transparent) {
+		border-color: map-get($btn-colors, border);
+	} @else {
+		border-color: rgba(map-get($btn-colors, border), .3);
+	}
+}
diff --git a/scss/variables/colors.js b/scss/variables/colors.js
index ffaf3f0..133c1e5 100644
--- a/scss/variables/colors.js
+++ b/scss/variables/colors.js
@@ -9,6 +9,15 @@
 }( this, function( chassis ) {
 
 chassis.colors = {
+	"default": {
+		name: "Default Colors",
+		value: {
+			"base": "transparent",
+			"light": "transparent",
+			"dark": "transparent",
+			"darker": "transparent"
+		}
+	},
 	"primary": {
 		name: "Primary Colors",
 		value: {
@@ -21,28 +30,28 @@ chassis.colors = {
 	"success": {
 			name: "Success Colors",
 			value: {
-				"base": "#8BC34A",
-				"light": "#9CCC65",
-				"dark": "#8BC34A",
-				"darker": "#689F38"
+				"base": "#43A047",
+				"light": "#4CAF50",
+				"dark": "#388E3C",
+				"darker": "#2E7D32"
 			}
 		},
 	 "warning": {
 			name: "Warning Colors",
 			value: {
-				"base": "#FF9800",
-				"light": "#FFA726",
-				"dark": "#FB8C00",
-				"darker": "#F57C00"
+				"base": "#FF5722",
+				"light": "#FF7043",
+				"dark": "#F4511E",
+				"darker": "#E64A19"
 		 }
 	 },
 		"info": {
 			name: "Info Colors",
 			value: {
-				"base": "#00BCD4",
-				"light": "#26C6DA",
-				"dark": "#00ACC1",
-				"darker": "#0097A7"
+				"base": "#039BE5",
+				"light": "#03A9F4",
+				"dark": "#0288D1",
+				"darker": "#0277BD"
 			}
 	 },
 	 "error": {
diff --git a/scss/variables/z_buttons.js b/scss/variables/z_buttons.js
index c0310ee..081c131 100644
--- a/scss/variables/z_buttons.js
+++ b/scss/variables/z_buttons.js
@@ -24,9 +24,9 @@ chassis.uiButton = {
 	"ui-btn-default": {
 		name: "Default Button",
 		value: {
-			"color": "#383838",
-			"background": "#ffffff",
-			"border": "#383838"
+			"color": "#212121",
+			"background": "$default",
+			"border": "transparent"
 		}
 	},
 	"ui-btn-primary": {

From f84475b21383a1e41102f41f4b60ea2beaba22c6 Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Tue, 9 Feb 2016 01:53:01 -0500
Subject: [PATCH 11/17] Buttons: Playing around with shadows

---
 scss/atoms/buttons/_buttons.scss |  1 +
 scss/atoms/buttons/_mixins.scss  | 10 ++++++++++
 scss/variables/z_buttons.js      | 31 ++++++++++++++++++++++++-------
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss
index 3f2eea1..73c5ff9 100644
--- a/scss/atoms/buttons/_buttons.scss
+++ b/scss/atoms/buttons/_buttons.scss
@@ -11,6 +11,7 @@
 .btn {
 	border: 1px solid transparent;
 	cursor: pointer;
+	letter-spacing: map-get($ui-btn, letter-spacing);
 	font-family: $ui-btn-font;
 	font-weight: map-get($ui-btn, font-weight);
 	margin: map-get($ui-btn, margin);
diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss
index 0d72656..5465749 100644
--- a/scss/atoms/buttons/_mixins.scss
+++ b/scss/atoms/buttons/_mixins.scss
@@ -2,10 +2,17 @@
 	color: map-get($btn-colors, color);
 	background: map-deep-get($btn-colors, "background", "base");
 	border-color: map-get($btn-colors, border);
+	@if (map-get($btn-colors, shadow) == true) {
+		transition: map-get($ui-btn-shadows, transition);
+		box-shadow: map-get($ui-btn-shadows, box-shadow-base);
+	}
 
 	&:active,
 	&.active {
 		@include btn-active($btn-colors);
+		@if (map-get($btn-colors, shadow) == true) {
+			box-shadow: map-get($ui-btn-shadows, box-shadow-active);
+		}
 	}
 
 	&:focus,
@@ -21,6 +28,9 @@
 	&:disabled,
 	&.disabled {
 		@include	btn-disabled($btn-colors);
+		@if (map-get($btn-colors, shadow) == true) {
+			box-shadow: map-get($ui-btn-shadows, box-shadow-disabled);
+		}
 	}
 }
 
diff --git a/scss/variables/z_buttons.js b/scss/variables/z_buttons.js
index 081c131..4f17508 100644
--- a/scss/variables/z_buttons.js
+++ b/scss/variables/z_buttons.js
@@ -9,12 +9,23 @@
 }( this, function( chassis ) {
 
 chassis.uiButton = {
+	"ui-btn-shadows": {
+		name: "Button Shadow Styles",
+		value: {
+			"transition": "box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+			"box-shadow-base": "0 2px 5px 0 rgba(0,0,0,.26)",
+			"box-shadow-active": "0 8px 15px 0 rgba(0,0,0,.2)",
+			"box-shadow-disabled": "0 0 0 rgba(0,0,0,0)"
+		}
+	},
+
 	"ui-btn": {
 		name: "Generic Button Styles",
 		value: {
 		 "font-weight": 500,
 		 "margin": ".25em",
-		 "text-transform": "uppercase"
+		 "text-transform": "uppercase",
+		 "letter-spacing": "1px"
 		}
 	},
 	"ui-btn-font": {
@@ -26,7 +37,8 @@ chassis.uiButton = {
 		value: {
 			"color": "#212121",
 			"background": "$default",
-			"border": "transparent"
+			"border": "transparent",
+			"shadow": "false"
 		}
 	},
 	"ui-btn-primary": {
@@ -34,7 +46,8 @@ chassis.uiButton = {
 		value: {
 			"color": "#ffffff",
 			"background": "$primary",
-			"border": "transparent"
+			"border": "transparent",
+			"shadow": "true"
 		}
 	},
 	"ui-btn-success": {
@@ -42,7 +55,8 @@ chassis.uiButton = {
 		value: {
 			"color": "#ffffff",
 			"background": "$success",
-			"border": "transparent"
+			"border": "transparent",
+			"shadow": "true"
 		}
 	},
 
@@ -51,7 +65,8 @@ chassis.uiButton = {
 		value: {
 			"color": "#ffffff",
 			"background": "$info",
-			"border": "transparent"
+			"border": "transparent",
+			"shadow": "true"
 		}
 	},
 	"ui-btn-warning": {
@@ -59,7 +74,8 @@ chassis.uiButton = {
 		value: {
 			"color": "#ffffff",
 			"background": "$warning",
-			"border": "transparent"
+			"border": "transparent",
+			"shadow": "true"
 		}
 	},
 	"ui-btn-danger": {
@@ -67,7 +83,8 @@ chassis.uiButton = {
 		value: {
 			"color": "#ffffff",
 			"background": "$error",
-			"border": "transparent"
+			"border": "transparent",
+			"shadow": "true"
 		}
 	},
 	"ui-btn-disabled": {

From b58b5f2d805b59d1839e40e88496df735edbdff7 Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Tue, 16 Feb 2016 09:22:14 -0500
Subject: [PATCH 12/17] Buttons: Demos for buttons as links & input

---
 demos/buttons.html               | 19 +++++++++++++++++++
 scss/atoms/buttons/_buttons.scss |  1 +
 2 files changed, 20 insertions(+)

diff --git a/demos/buttons.html b/demos/buttons.html
index e995992..69bcb6a 100644
--- a/demos/buttons.html
+++ b/demos/buttons.html
@@ -214,6 +214,25 @@ <h3>Large Hover</h3>
 <button class="btn btn-danger btn-lg hover">Danger</button>
 </p>
 
+<h3>Anchor Links as Buttons</h3>
+<p>
+<a href="#" class="btn" role="button">Default</a>
+<a href="#" class="btn btn-primary" role="button">Primary</a>
+<a href="#" class="btn btn-success" role="button">Success</a>
+<a href="#" class="btn btn-info" role="button">Info</a>
+<a href="#" class="btn btn-warning" role="button">Warning</a>
+<a href="#" class="btn btn-danger" role="button">Danger</a>
+</p>
+
+<h3>Input[type=submit]</h3>
+<p>
+<input type="submit" class="btn" value="Default">
+<input type="submit" class="btn btn-primary" value="Primary">
+<input type="submit" class="btn btn-success" value="Success">
+<input type="submit" class="btn btn-info" value="Info">
+<input type="submit" class="btn btn-warning" value="Warning">
+<input type="submit" class="btn btn-danger" value="Danger">
+</p>
 
 </body>
 </html>
diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss
index 73c5ff9..7b4ede9 100644
--- a/scss/atoms/buttons/_buttons.scss
+++ b/scss/atoms/buttons/_buttons.scss
@@ -15,6 +15,7 @@
 	font-family: $ui-btn-font;
 	font-weight: map-get($ui-btn, font-weight);
 	margin: map-get($ui-btn, margin);
+	text-decoration: none;
 	text-transform: map-get($ui-btn, text-transform);
 	@include btn-colors($ui-btn-default);
 	@include btn-size($ui-btn-md);

From c7acbce4d118ebcd81ffed39ef2d5fd237597407 Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Tue, 16 Feb 2016 09:43:26 -0500
Subject: [PATCH 13/17] Buttons: Adding Button Bar, Block Buttons

---
 demos/buttons.html               | 21 +++++++++++++++++++++
 demos/demos.css                  |  2 +-
 scss/atoms/buttons/_buttons.scss | 31 +++++++++++++++++++++++++++++++
 scss/variables/colors.js         |  8 ++++----
 scss/variables/z_buttons.js      |  2 +-
 5 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/demos/buttons.html b/demos/buttons.html
index 69bcb6a..bb4c8e8 100644
--- a/demos/buttons.html
+++ b/demos/buttons.html
@@ -234,5 +234,26 @@ <h3>Input[type=submit]</h3>
 <input type="submit" class="btn btn-danger" value="Danger">
 </p>
 
+<h2>Block Buttons</h2>
+<p>
+<button class="btn btn-lg btn-block">Default</button>
+<button class="btn btn-primary btn-lg btn-block">Primary</button>
+<button class="btn btn-success btn-lg btn-block">Success</button>
+<button class="btn btn-info btn-lg btn-block">Info</button>
+<button class="btn btn-warning btn-lg btn-block">Warning</button>
+<button class="btn btn-danger btn-lg btn-block">Danger</button>
+</p>
+
+<h2>Button Bar</h2>
+<p class="btn-group">
+<button class="btn btn-lg">Default</button>
+<button class="btn btn-primary btn-lg">Primary</button>
+<button class="btn btn-success btn-lg">Success</button>
+<button class="btn btn-info btn-lg">Info</button>
+<button class="btn btn-warning btn-lg">Warning</button>
+<button class="btn btn-danger btn-lg">Danger</button>
+</p>
+
+
 </body>
 </html>
diff --git a/demos/demos.css b/demos/demos.css
index cc74333..6c50aa0 100644
--- a/demos/demos.css
+++ b/demos/demos.css
@@ -1,5 +1,5 @@
 body {
-	max-width: 800px;
+	max-width: 900px;
 	margin: 3em auto;
 	padding: 0 1em;
 }
diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss
index 7b4ede9..0776a5b 100644
--- a/scss/atoms/buttons/_buttons.scss
+++ b/scss/atoms/buttons/_buttons.scss
@@ -21,6 +21,37 @@
 	@include btn-size($ui-btn-md);
 }
 
+.btn-group {
+	position: relative;
+	display: inline-block;
+	vertical-align: middle;
+
+	.btn {
+		float: left;
+		margin: 0;
+	}
+
+	.btn:first-child {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+
+	.btn:last-child {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
+	.btn:not(:first-child):not(:last-child) {
+		border-radius: 0;
+	}
+}
+
+
+.btn-block {
+	display: block;
+	width: 100%;
+}
+
 /* Button Colors */
 
 .btn-primary {
diff --git a/scss/variables/colors.js b/scss/variables/colors.js
index 133c1e5..4e06351 100644
--- a/scss/variables/colors.js
+++ b/scss/variables/colors.js
@@ -12,10 +12,10 @@ chassis.colors = {
 	"default": {
 		name: "Default Colors",
 		value: {
-			"base": "transparent",
-			"light": "transparent",
-			"dark": "transparent",
-			"darker": "transparent"
+			"base": "#FAFAFA",
+			"light": "#FFFFFF",
+			"dark": "#FAFAFA",
+			"darker": "#F5F5F5"
 		}
 	},
 	"primary": {
diff --git a/scss/variables/z_buttons.js b/scss/variables/z_buttons.js
index 4f17508..2e36f3f 100644
--- a/scss/variables/z_buttons.js
+++ b/scss/variables/z_buttons.js
@@ -38,7 +38,7 @@ chassis.uiButton = {
 			"color": "#212121",
 			"background": "$default",
 			"border": "transparent",
-			"shadow": "false"
+			"shadow": "true"
 		}
 	},
 	"ui-btn-primary": {

From 63024ce79c1034cae77ccb8dff2da075bef886db Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Mon, 29 Feb 2016 23:26:37 -0500
Subject: [PATCH 14/17] Buttons: Making all buttons not rely on cascading
 styling

---
 demos/buttons.html               | 138 +++++++++++++++----------------
 scss/atoms/buttons/_buttons.scss |  36 ++++----
 scss/atoms/buttons/_mixins.scss  |  11 +++
 3 files changed, 97 insertions(+), 88 deletions(-)

diff --git a/demos/buttons.html b/demos/buttons.html
index bb4c8e8..0aa871e 100644
--- a/demos/buttons.html
+++ b/demos/buttons.html
@@ -15,7 +15,7 @@ <h1>CSS Chassis</h1>
 
 <h2>Extra Small Buttons</h2>
 <p>
-<button class="btn btn-xs">Default</button>
+<button class="btn btn-default btn-xs">Default</button>
 <button class="btn btn-primary btn-xs">Primary</button>
 <button class="btn btn-success btn-xs">Success</button>
 <button class="btn btn-info btn-xs">Info</button>
@@ -25,7 +25,7 @@ <h2>Extra Small Buttons</h2>
 
 <h3>Extra Small Disabled</h3>
 <p>
-<button disabled="disabled" class="btn btn-xs">Default</button>
+<button disabled="disabled" class="btn btn-default btn-xs">Default</button>
 <button disabled="disabled" class="btn btn-primary btn-xs">Primary</button>
 <button disabled="disabled" class="btn btn-success btn-xs">Success</button>
 <button disabled="disabled" class="btn btn-info btn-xs">Info</button>
@@ -35,7 +35,7 @@ <h3>Extra Small Disabled</h3>
 
 <h3>Extra Small Active</h3>
 <p>
-<button class="btn btn-xs active">Default</button>
+<button class="btn btn-default btn-xs active">Default</button>
 <button class="btn btn-primary btn-xs active">Primary</button>
 <button class="btn btn-success btn-xs active">Success</button>
 <button class="btn btn-info btn-xs active">Info</button>
@@ -45,7 +45,7 @@ <h3>Extra Small Active</h3>
 
 <h3>Extra Small Focus</h3>
 <p>
-<button class="btn btn-xs focus">Default</button>
+<button class="btn btn-default btn-xs focus">Default</button>
 <button class="btn btn-primary btn-xs focus">Primary</button>
 <button class="btn btn-success btn-xs focus">Success</button>
 <button class="btn btn-info btn-xs focus">Info</button>
@@ -55,7 +55,7 @@ <h3>Extra Small Focus</h3>
 
 <h3>Extra Small Hover</h3>
 <p>
-<button class="btn btn-xs hover">Default</button>
+<button class="btn btn-default btn-xs hover">Default</button>
 <button class="btn btn-primary btn-xs hover">Primary</button>
 <button class="btn btn-success btn-xs hover">Success</button>
 <button class="btn btn-info btn-xs hover">Info</button>
@@ -66,7 +66,7 @@ <h3>Extra Small Hover</h3>
 
 <h2>Small Buttons</h2>
 <p>
-<button class="btn btn-sm">Default</button>
+<button class="btn btn-default btn-sm">Default</button>
 <button class="btn btn-primary btn-sm">Primary</button>
 <button class="btn btn-success btn-sm">Success</button>
 <button class="btn btn-info btn-sm">Info</button>
@@ -76,7 +76,7 @@ <h2>Small Buttons</h2>
 
 <h3>Small Disabled</h3>
 <p>
-<button disabled="disabled" class="btn btn-sm">Default</button>
+<button disabled="disabled" class="btn btn-default btn-sm">Default</button>
 <button disabled="disabled" class="btn btn-primary btn-sm">Primary</button>
 <button disabled="disabled" class="btn btn-success btn-sm">Success</button>
 <button disabled="disabled" class="btn btn-info btn-sm">Info</button>
@@ -86,7 +86,7 @@ <h3>Small Disabled</h3>
 
 <h3>Small Active</h3>
 <p>
-<button class="btn btn-sm active">Default</button>
+<button class="btn btn-default btn-sm active">Default</button>
 <button class="btn btn-primary btn-sm active">Primary</button>
 <button class="btn btn-success btn-sm active">Success</button>
 <button class="btn btn-info btn-sm active">Info</button>
@@ -96,7 +96,7 @@ <h3>Small Active</h3>
 
 <h3>Small Focus</h3>
 <p>
-<button class="btn btn-sm focus">Default</button>
+<button class="btn btn-default btn-sm focus">Default</button>
 <button class="btn btn-primary btn-sm focus">Primary</button>
 <button class="btn btn-success btn-sm focus">Success</button>
 <button class="btn btn-info btn-sm focus">Info</button>
@@ -106,7 +106,7 @@ <h3>Small Focus</h3>
 
 <h3>Small Hover</h3>
 <p>
-<button class="btn btn-sm hover">Default</button>
+<button class="btn btn-default btn-sm hover">Default</button>
 <button class="btn btn-primary btn-sm hover">Primary</button>
 <button class="btn btn-success btn-sm hover">Success</button>
 <button class="btn btn-info btn-sm hover">Info</button>
@@ -114,59 +114,59 @@ <h3>Small Hover</h3>
 <button class="btn btn-danger btn-sm hover">Danger</button>
 </p>
 
-<h2>Default Buttons</h2>
+<h2>Medium Buttons</h2>
 <p>
-<button class="btn">Default</button>
-<button class="btn btn-primary">Primary</button>
-<button class="btn btn-success">Success</button>
-<button class="btn btn-info">Info</button>
-<button class="btn btn-warning">Warning</button>
-<button class="btn btn-danger">Danger</button>
+<button class="btn btn-default btn-md">Default</button>
+<button class="btn btn-primary btn-md">Primary</button>
+<button class="btn btn-success btn-md">Success</button>
+<button class="btn btn-info btn-md">Info</button>
+<button class="btn btn-warning btn-md">Warning</button>
+<button class="btn btn-danger btn-md">Danger</button>
 </p>
 
-<h3>Default Disabled</h3>
+<h3>Medium Disabled</h3>
 <p>
-<button disabled="disabled" class="btn">Default</button>
-<button disabled="disabled" class="btn btn-primary">Primary</button>
-<button disabled="disabled" class="btn btn-success">Success</button>
-<button disabled="disabled" class="btn btn-info">Info</button>
-<button disabled="disabled" class="btn btn-warning">Warning</button>
-<button disabled="disabled" class="btn btn-danger">Danger</button>
+<button disabled="disabled" class="btn btn-default btn-md">Default</button>
+<button disabled="disabled" class="btn btn-primary btn-md">Primary</button>
+<button disabled="disabled" class="btn btn-success btn-md">Success</button>
+<button disabled="disabled" class="btn btn-info btn-md">Info</button>
+<button disabled="disabled" class="btn btn-warning btn-md">Warning</button>
+<button disabled="disabled" class="btn btn-danger btn-md">Danger</button>
 </p>
 
-<h3>Default Active</h3>
+<h3>Medium Active</h3>
 <p>
-<button class="btn active">Default</button>
-<button class="btn btn-primary active">Primary</button>
-<button class="btn btn-success active">Success</button>
-<button class="btn btn-info active">Info</button>
-<button class="btn btn-warning active">Warning</button>
-<button class="btn btn-danger active">Danger</button>
+<button class="btn btn-default btn-md active">Default</button>
+<button class="btn btn-primary btn-md active">Primary</button>
+<button class="btn btn-success btn-md active">Success</button>
+<button class="btn btn-info btn-md active">Info</button>
+<button class="btn btn-warning btn-md active">Warning</button>
+<button class="btn btn-danger btn-md active">Danger</button>
 </p>
 
-<h3>Default Focus</h3>
+<h3>Medium Focus</h3>
 <p>
-<button class="btn focus">Default</button>
-<button class="btn btn-primary focus">Primary</button>
-<button class="btn btn-success focus">Success</button>
-<button class="btn btn-info focus">Info</button>
-<button class="btn btn-warning focus">Warning</button>
-<button class="btn btn-danger focus">Danger</button>
+<button class="btn btn-default btn-md focus">Default</button>
+<button class="btn btn-primary btn-md focus">Primary</button>
+<button class="btn btn-success btn-md focus">Success</button>
+<button class="btn btn-info btn-md focus">Info</button>
+<button class="btn btn-warning btn-md focus">Warning</button>
+<button class="btn btn-danger btn-md focus">Danger</button>
 </p>
 
-<h3>Default Hover</h3>
+<h3>Medium Hover</h3>
 <p>
-<button class="btn hover">Default</button>
-<button class="btn btn-primary hover">Primary</button>
-<button class="btn btn-success hover">Success</button>
-<button class="btn btn-info hover">Info</button>
-<button class="btn btn-warning hover">Warning</button>
-<button class="btn btn-danger hover">Danger</button>
+<button class="btn btn-default btn-md hover">Default</button>
+<button class="btn btn-primary btn-md hover">Primary</button>
+<button class="btn btn-success btn-md hover">Success</button>
+<button class="btn btn-info btn-md hover">Info</button>
+<button class="btn btn-warning btn-md hover">Warning</button>
+<button class="btn btn-danger btn-md hover">Danger</button>
 </p>
 
 <h2>Large Buttons</h2>
 <p>
-<button class="btn btn-lg">Default</button>
+<button class="btn btn-default btn-lg">Default</button>
 <button class="btn btn-primary btn-lg">Primary</button>
 <button class="btn btn-success btn-lg">Success</button>
 <button class="btn btn-info btn-lg">Info</button>
@@ -176,7 +176,7 @@ <h2>Large Buttons</h2>
 
 <h3>Large Disabled</h3>
 <p>
-<button disabled="disabled" class="btn btn-lg">Default</button>
+<button disabled="disabled" class="btn btn-default btn-lg">Default</button>
 <button disabled="disabled" class="btn btn-primary btn-lg">Primary</button>
 <button disabled="disabled" class="btn btn-success btn-lg">Success</button>
 <button disabled="disabled" class="btn btn-info btn-lg">Info</button>
@@ -186,7 +186,7 @@ <h3>Large Disabled</h3>
 
 <h3>Large Active</h3>
 <p>
-<button class="btn btn-lg active">Default</button>
+<button class="btn btn-default btn-lg active">Default</button>
 <button class="btn btn-primary btn-lg active">Primary</button>
 <button class="btn btn-success btn-lg active">Success</button>
 <button class="btn btn-info btn-lg active">Info</button>
@@ -196,7 +196,7 @@ <h3>Large Active</h3>
 
 <h3>Large Focus</h3>
 <p>
-<button class="btn btn-lg focus">Default</button>
+<button class="btn btn-default btn-lg focus">Default</button>
 <button class="btn btn-primary btn-lg focus">Primary</button>
 <button class="btn btn-success btn-lg focus">Success</button>
 <button class="btn btn-info btn-lg focus">Info</button>
@@ -206,7 +206,7 @@ <h3>Large Focus</h3>
 
 <h3>Large Hover</h3>
 <p>
-<button class="btn btn-lg hover">Default</button>
+<button class="btn btn-default btn-lg hover">Default</button>
 <button class="btn btn-primary btn-lg hover">Primary</button>
 <button class="btn btn-success btn-lg hover">Success</button>
 <button class="btn btn-info btn-lg hover">Info</button>
@@ -216,27 +216,27 @@ <h3>Large Hover</h3>
 
 <h3>Anchor Links as Buttons</h3>
 <p>
-<a href="#" class="btn" role="button">Default</a>
-<a href="#" class="btn btn-primary" role="button">Primary</a>
-<a href="#" class="btn btn-success" role="button">Success</a>
-<a href="#" class="btn btn-info" role="button">Info</a>
-<a href="#" class="btn btn-warning" role="button">Warning</a>
-<a href="#" class="btn btn-danger" role="button">Danger</a>
+<a href="#" class="btn btn-default btn-md" role="button">Default</a>
+<a href="#" class="btn btn-primary btn-md" role="button">Primary</a>
+<a href="#" class="btn btn-success btn-md" role="button">Success</a>
+<a href="#" class="btn btn-info btn-md" role="button">Info</a>
+<a href="#" class="btn btn-warning btn-md" role="button">Warning</a>
+<a href="#" class="btn btn-danger btn-md" role="button">Danger</a>
 </p>
 
 <h3>Input[type=submit]</h3>
 <p>
-<input type="submit" class="btn" value="Default">
-<input type="submit" class="btn btn-primary" value="Primary">
-<input type="submit" class="btn btn-success" value="Success">
-<input type="submit" class="btn btn-info" value="Info">
-<input type="submit" class="btn btn-warning" value="Warning">
-<input type="submit" class="btn btn-danger" value="Danger">
+<input type="submit" class="btn btn-default btn-md" value="Default">
+<input type="submit" class="btn btn-primary btn-md" value="Primary">
+<input type="submit" class="btn btn-success btn-md" value="Success">
+<input type="submit" class="btn btn-info btn-md" value="Info">
+<input type="submit" class="btn btn-warning btn-md" value="Warning">
+<input type="submit" class="btn btn-danger btn-md" value="Danger">
 </p>
 
 <h2>Block Buttons</h2>
 <p>
-<button class="btn btn-lg btn-block">Default</button>
+<button class="btn btn-default btn-lg btn-block">Default</button>
 <button class="btn btn-primary btn-lg btn-block">Primary</button>
 <button class="btn btn-success btn-lg btn-block">Success</button>
 <button class="btn btn-info btn-lg btn-block">Info</button>
@@ -246,12 +246,12 @@ <h2>Block Buttons</h2>
 
 <h2>Button Bar</h2>
 <p class="btn-group">
-<button class="btn btn-lg">Default</button>
-<button class="btn btn-primary btn-lg">Primary</button>
-<button class="btn btn-success btn-lg">Success</button>
-<button class="btn btn-info btn-lg">Info</button>
-<button class="btn btn-warning btn-lg">Warning</button>
-<button class="btn btn-danger btn-lg">Danger</button>
+<button class="btn-group--btn btn-default btn-lg">Default</button>
+<button class="btn-group--btn btn-primary btn-lg">Primary</button>
+<button class="btn-group--btn btn-success btn-lg">Success</button>
+<button class="btn-group--btn btn-info btn-lg">Info</button>
+<button class="btn-group--btn btn-warning btn-lg">Warning</button>
+<button class="btn-group--btn btn-danger btn-lg">Danger</button>
 </p>
 
 
diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss
index 0776a5b..00a9bb2 100644
--- a/scss/atoms/buttons/_buttons.scss
+++ b/scss/atoms/buttons/_buttons.scss
@@ -8,52 +8,46 @@
 	"dist/chassis",
 	"mixins";
 
-.btn {
-	border: 1px solid transparent;
-	cursor: pointer;
-	letter-spacing: map-get($ui-btn, letter-spacing);
-	font-family: $ui-btn-font;
-	font-weight: map-get($ui-btn, font-weight);
-	margin: map-get($ui-btn, margin);
-	text-decoration: none;
-	text-transform: map-get($ui-btn, text-transform);
-	@include btn-colors($ui-btn-default);
-	@include btn-size($ui-btn-md);
-}
-
 .btn-group {
 	position: relative;
 	display: inline-block;
 	vertical-align: middle;
 
-	.btn {
+	&--btn {
 		float: left;
-		margin: 0;
+		@include btn(0);
 	}
 
-	.btn:first-child {
+	&--btn:first-child {
 		border-top-right-radius: 0;
 		border-bottom-right-radius: 0;
 	}
 
-	.btn:last-child {
+	&--btn:last-child {
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
 	}
 
-	.btn:not(:first-child):not(:last-child) {
+	&--btn:not(:first-child):not(:last-child) {
 		border-radius: 0;
 	}
 }
 
-
 .btn-block {
 	display: block;
 	width: 100%;
 }
 
+.btn {
+	@include btn(	map-get($ui-btn, margin));
+}
+
 /* Button Colors */
 
+.btn-default {
+	@include btn-colors($ui-btn-default);
+}
+
 .btn-primary {
 	@include btn-colors($ui-btn-primary);
 }
@@ -80,6 +74,10 @@
 	@include btn-size($ui-btn-lg);
 }
 
+.btn-md {
+	@include btn-size($ui-btn-md);
+}
+
 .btn-sm {
 	@include btn-size($ui-btn-sm);
 }
diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss
index 5465749..5c76fbc 100644
--- a/scss/atoms/buttons/_mixins.scss
+++ b/scss/atoms/buttons/_mixins.scss
@@ -1,3 +1,14 @@
+@mixin btn($margin) {
+	border: 1px solid transparent;
+	cursor: pointer;
+	letter-spacing: map-get($ui-btn, letter-spacing);
+	font-family: $ui-btn-font;
+	font-weight: map-get($ui-btn, font-weight);
+	margin: $margin;
+	text-decoration: none;
+	text-transform: map-get($ui-btn, text-transform);
+}
+
 @mixin btn-colors($btn-colors) {
 	color: map-get($btn-colors, color);
 	background: map-deep-get($btn-colors, "background", "base");

From edad94cf4daed8b71c5eec9a0800e69e9a9a7e37 Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Mon, 29 Feb 2016 23:30:49 -0500
Subject: [PATCH 15/17] Buttons: Fixing spacing

---
 scss/atoms/buttons/_mixins.scss |  2 +-
 scss/variables/colors.js        | 94 ++++++++++++++++-----------------
 scss/variables/z_buttons.js     |  8 +--
 3 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss
index 5c76fbc..02deee4 100644
--- a/scss/atoms/buttons/_mixins.scss
+++ b/scss/atoms/buttons/_mixins.scss
@@ -38,7 +38,7 @@
 
 	&:disabled,
 	&.disabled {
-		@include	btn-disabled($btn-colors);
+		@include btn-disabled($btn-colors);
 		@if (map-get($btn-colors, shadow) == true) {
 			box-shadow: map-get($ui-btn-shadows, box-shadow-disabled);
 		}
diff --git a/scss/variables/colors.js b/scss/variables/colors.js
index 4e06351..38c938f 100644
--- a/scss/variables/colors.js
+++ b/scss/variables/colors.js
@@ -28,54 +28,54 @@ chassis.colors = {
 		}
 	},
 	"success": {
-			name: "Success Colors",
-			value: {
-				"base": "#43A047",
-				"light": "#4CAF50",
-				"dark": "#388E3C",
-				"darker": "#2E7D32"
-			}
-		},
-	 "warning": {
-			name: "Warning Colors",
-			value: {
-				"base": "#FF5722",
-				"light": "#FF7043",
-				"dark": "#F4511E",
-				"darker": "#E64A19"
-		 }
-	 },
-		"info": {
-			name: "Info Colors",
-			value: {
-				"base": "#039BE5",
-				"light": "#03A9F4",
-				"dark": "#0288D1",
-				"darker": "#0277BD"
-			}
-	 },
-	 "error": {
-			name: "Error Colors",
-			value: {
-				"base": "#F44336",
-				"light": "#EF5350",
-				"dark": "#E53935",
-				"darker": "#D32F2F"
-			}
-	 },
-	 "text": {
-			name: "Text Colors",
-			value: {
-				"base": "#212121",
-				"light": "#727272"
-			}
-	 },
-	 "background": {
-		 name: "Background Colors",
-		 value: {
+		name: "Success Colors",
+		value: {
+			"base": "#43A047",
+			"light": "#4CAF50",
+			"dark": "#388E3C",
+			"darker": "#2E7D32"
+		}
+	},
+	"warning": {
+		name: "Warning Colors",
+		value: {
+			"base": "#FF5722",
+			"light": "#FF7043",
+			"dark": "#F4511E",
+			"darker": "#E64A19"
+		}
+	},
+	"info": {
+		name: "Info Colors",
+		value: {
+			"base": "#039BE5",
+			"light": "#03A9F4",
+			"dark": "#0288D1",
+			"darker": "#0277BD"
+		}
+	},
+	"error": {
+		name: "Error Colors",
+		value: {
+			"base": "#F44336",
+			"light": "#EF5350",
+			"dark": "#E53935",
+			"darker": "#D32F2F"
+		}
+	},
+	"text": {
+		name: "Text Colors",
+		value: {
+			"base": "#212121",
+			"light": "#727272"
+		}
+	},
+	"background": {
+		name: "Background Colors",
+		value: {
 			"base": "#fff"
-		 }
-	 }
+		}
+	}
 };
 return chassis;
 } ) );
diff --git a/scss/variables/z_buttons.js b/scss/variables/z_buttons.js
index 2e36f3f..f90fa35 100644
--- a/scss/variables/z_buttons.js
+++ b/scss/variables/z_buttons.js
@@ -22,10 +22,10 @@ chassis.uiButton = {
 	"ui-btn": {
 		name: "Generic Button Styles",
 		value: {
-		 "font-weight": 500,
-		 "margin": ".25em",
-		 "text-transform": "uppercase",
-		 "letter-spacing": "1px"
+			"font-weight": 500,
+			"margin": ".25em",
+			"text-transform": "uppercase",
+			"letter-spacing": "1px"
 		}
 	},
 	"ui-btn-font": {

From dc506a9c2687d7a8d6ef603e3d7c651482949c20 Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Fri, 4 Mar 2016 00:25:24 -0500
Subject: [PATCH 16/17] Buttons: Color and shadow update

---
 scss/variables/colors.js    | 6 +++---
 scss/variables/z_buttons.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/scss/variables/colors.js b/scss/variables/colors.js
index 38c938f..b64c2ae 100644
--- a/scss/variables/colors.js
+++ b/scss/variables/colors.js
@@ -12,10 +12,10 @@ chassis.colors = {
 	"default": {
 		name: "Default Colors",
 		value: {
-			"base": "#FAFAFA",
+			"base": "#F5F5F5",
 			"light": "#FFFFFF",
-			"dark": "#FAFAFA",
-			"darker": "#F5F5F5"
+			"dark": "#EEEEEE",
+			"darker": "#E0E0E0"
 		}
 	},
 	"primary": {
diff --git a/scss/variables/z_buttons.js b/scss/variables/z_buttons.js
index f90fa35..88bcdc7 100644
--- a/scss/variables/z_buttons.js
+++ b/scss/variables/z_buttons.js
@@ -14,7 +14,7 @@ chassis.uiButton = {
 		value: {
 			"transition": "box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
 			"box-shadow-base": "0 2px 5px 0 rgba(0,0,0,.26)",
-			"box-shadow-active": "0 8px 15px 0 rgba(0,0,0,.2)",
+			"box-shadow-active": "0 3px 10px 0 rgba(0,0,0,.2)",
 			"box-shadow-disabled": "0 0 0 rgba(0,0,0,0)"
 		}
 	},

From 2bfa912e51af30bbea9750c3787806ec57539033 Mon Sep 17 00:00:00 2001
From: Sarah Frisk <sarah@sarahfrisk.com>
Date: Tue, 8 Mar 2016 13:37:04 -0500
Subject: [PATCH 17/17] Buttons: disabled cursor is not-allowed

---
 scss/atoms/buttons/_mixins.scss | 8 ++++----
 scss/variables/z_buttons.js     | 4 +++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss
index 02deee4..193f36c 100644
--- a/scss/atoms/buttons/_mixins.scss
+++ b/scss/atoms/buttons/_mixins.scss
@@ -71,17 +71,17 @@
 }
 
 @mixin btn-disabled($btn-colors) {
-	cursor: default;
-	color: rgba(map-get($btn-colors, color), .6);
+	cursor: map-get($ui-btn-disabled, cursor);
+	color: rgba(map-get($btn-colors, color),  map-get($ui-btn-disabled, "color-opacity"));
 	$bg: map-deep-get($btn-colors, "background", "base");
 	@if ($bg == transparent) {
 		background: map-deep-get($btn-colors, "background", "base");
 	} @else {
-		background: rgba($bg, .3);
+		background: rgba($bg,  map-get($ui-btn-disabled, "background-opacity"));
 	}
 	@if (map-get($btn-colors, border) == transparent) {
 		border-color: map-get($btn-colors, border);
 	} @else {
-		border-color: rgba(map-get($btn-colors, border), .3);
+		border-color: rgba(map-get($btn-colors, border), map-get($ui-btn-disabled, "background-opacity"));
 	}
 }
diff --git a/scss/variables/z_buttons.js b/scss/variables/z_buttons.js
index 88bcdc7..3c16375 100644
--- a/scss/variables/z_buttons.js
+++ b/scss/variables/z_buttons.js
@@ -90,7 +90,9 @@ chassis.uiButton = {
 	"ui-btn-disabled": {
 		name: "Disabled Button",
 		value: {
-			"opacity": ".6"
+			"color-opacity": 0.6,
+			"background-opacity": 0.3,
+			"cursor": "not-allowed"
 		}
 	},
 	"ui-btn-lg": {