From d69a54990217d46a179ddfd6cb20adad36f53df5 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 28 Oct 2016 17:36:44 +0100
Subject: [PATCH] adding box constants and creating mixin for generating
 buttons

---
 ui/src/components/button/style.css | 39 +++++++++++++++++++++---------
 ui/src/shared/constants.js         | 10 ++++++--
 2 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/button/style.css b/ui/src/components/button/style.css
index 8cb0e006..06c93c43 100644
--- a/ui/src/components/button/style.css
+++ b/ui/src/components/button/style.css
@@ -1,26 +1,43 @@
+~colors: "../../shared/constants.js";
+~boxes: "../../shared/constants.js";
+
+:root {
+  --primary-background: ~colors.brandPrimary;
+  --primary-border: #2532bb;
+  --primary-color: #ffffff;
+
+  --secondary-backgroud: #ffffff;
+  --secondary-border: #d8d8d8;
+  --secondary-color: #646464;
+
+  --inactive-background: #F9F9F9;
+  --inactive-border: #D8D8D8;
+  --inactive-color: #737373;
+}
+
+@define-mixin button $background, $border-color, $color {
+  background: $background;
+  border: 1px solid $border-color;
+  color: $color;
+}
+
 .button {
-  border-radius: 4px;
-  box-shadow: remCalc(0 2 0 0) rgba(0,0,0,0.05);
+  border-radius: remCalc(~boxes.borderRadius);
+  box-shadow: ~boxes.bottomShaddow;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: remCalc(16);
   min-width: remCalc(120);
   padding: remCalc(18 24);
 
   &.primary {
-    background: #3B47CC;
-    border: 1px solid #2532BB;
-    color: #FFFFFF;
+    @add-mixin button var(--primary-background), var(--primary-border), var(--primary-color);
   }
 
   &.secondary {
-    background: #FFFFFF;
-    border: 1px solid #D8D8D8;
-    color: #646464;
+    @add-mixin button var(--secondary-backgroud), var(--secondary-border), var(--secondary-color);
   }
 
   &.inactive {
-    background: #F9F9F9;
-    border: 1px solid #D8D8D8;
-    color: #737373;
+    @add-mixin button var(--inactive-background), var(--inactive-border), var(--inactive-color);
   }
 }
diff --git a/ui/src/shared/constants.js b/ui/src/shared/constants.js
index 870827d4..df90b756 100644
--- a/ui/src/shared/constants.js
+++ b/ui/src/shared/constants.js
@@ -66,13 +66,18 @@ const sizes = {
   }
 };
 
+const boxes = {
+  borderRadius: 4,
+  bottomShaddow: '0 2px 0 0 rgba(0,0,0,0.05)'
+};
+
 const forms = {
   cursorDisabled: 'not-allowed'
 };
 
 const colors = {
-  brandPrimary: '#0275d8',
-  brandSecondary: '#160D42',
+  brandPrimary: '#364acd',
+  brandSecondary: '#160d42',
   grayLight: '#818a91',
   confirmation: '#38C647'
 };
@@ -107,6 +112,7 @@ const breakpoints = {
 module.exports = traverse({
   breakpoints,
   colors,
+  boxes,
   forms,
   links,
   sizes,