Buttons: Adding Palette for example

Author: sfrisk

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;
+}

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);
 }
 

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);
 }

scss/lint.scss

@@ -12,6 +12,7 @@
 @import
 	"_utilities/clearfix",
 	"_utilities/colors",
+	"_utilities/functions",
 	"_utilities/hidden";
 
 @import

scss/style.scss

@@ -4,6 +4,7 @@
 
 @import
 	"_utilities/clearfix",
+	"_utilities/functions",
 	"_utilities/hidden";
 
 @import

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"
 		 }
 	 }

scss/variables/z_buttons.js

@@ -33,15 +33,15 @@ chassis.uiButton = {
 		name: "Primary Button",
 		value: {
 			"color": "#ffffff",
-			"background": "#3F51B5",
+			"background": "$primary",
 			"border": "transparent"
 		}
 	},
 	"ui-btn-success": {
 		name: "Success Button",
 		value: {
 			"color": "#ffffff",
-			"background": "#4CAF50",
+			"background": "$success",
 			"border": "transparent"
 		}
 	},
@@ -50,23 +50,23 @@ chassis.uiButton = {
 		name: "Info Button",
 		value: {
 			"color": "#ffffff",
-			"background": "#00BCD4",
+			"background": "$info",
 			"border": "transparent"
 		}
 	},
 	"ui-btn-warning": {
 		name: "Warning Button",
 		value: {
 			"color": "#ffffff",
-			"background": "#FF5722",
+			"background": "$warning",
 			"border": "transparent"
 		}
 	},
 	"ui-btn-danger": {
 		name: "Danger Button",
 		value: {
 			"color": "#ffffff",
-			"background": "#F44336",
+			"background": "$error",
 			"border": "transparent"
 		}
 	},