updating and refactoring constants

ui/src/components/button/index.js

@@ -16,11 +16,9 @@ const {
   default: styled,
 } = Styled;
 
-// TODO: this should come from constants
-// and be calculated accordingly
 const styles = {
-  primaryBorder: '#2532BB',
+  primaryBorder: colors.brandPrimary,
-  secondaryColor: '#646464',
+  secondaryColor: colors.brandSecondary,
   ...colors
 };
 

ui/src/components/input/index.js

@@ -5,6 +5,11 @@ const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const Styled = require('styled-components');
 
+const {
+  boxes,
+  colors
+} = constants;
+
 const {
   remcalc
 } = fns;
@@ -22,7 +27,7 @@ const Label = styled.label`
 `;
 
 const InputField = styled.input`
-  background: ${constants.colors.background};
+  background: ${colors.white};
   display: block;
   font-size: 16px;
   height: ${remcalc(50)};
@@ -32,9 +37,9 @@ const InputField = styled.input`
   width: 100%;
 
   ${baseBox()}
-  
+
   &:focus {
-    border-color: ${constants.colors.borderSelected};
+    border-color: ${boxes.border.checked};
     outline: none;
   }
 `;

ui/src/components/radio/index.js

@@ -24,7 +24,7 @@ const StyledInput = styled.input`
     background-color: #646464;
   }
   &:disabled + span {
-    background-color: ${colors.inactiveBackground};
+    background-color: ${colors.backgroundInactive};
   }
   &:disabled + span::before {
     opacity: 0.3;

ui/src/shared/composers.js

@@ -48,7 +48,4 @@ module.exports = {
     bottom: ${positions.bottom || 'auto'};
     left: ${positions.left || 'auto'};
   `
-  // {
-  //   debugger
-  // }
 };

ui/src/shared/constants.js

@@ -69,47 +69,65 @@ const sizes = {
   }
 };
 
+const forms = {
+  cursorDisabled: 'not-allowed'
+};
+
+const brandPrimary = {
+  brandPrimary: '#3B46CC',
+  brandPrimaryDark: '#1838C0',
+  brandPrimaryDarkest: '#12279F',
+};
+
+const brandSecondary = {
+  brandSecondary: '#646464',
+  brandSecondaryDark: '#464646',
+  brandSecondaryDarkest: '#160D42',
+};
+
+const notifications = {
+  alert: '#DA4B42',
+  alertLight: '#FFC7C7',
+  confirmation: '#00AF66',
+  warning: '#E4A800',
+  warningLight: '#FFFAED',
+};
+
+const colors = {
+
+  white: '#FFFFFF',
+  backgroundInactive: '#F9F9F9',
+
+  ...brandPrimary,
+  ...brandSecondary,
+  ...notifications
+};
+
 const boxes = {
   borderRadius: '4px',
   bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)',
   insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)',
   border: {
-    checked: '1px solid #2532bb',
+    checked: `1px solid ${colors.brandPrimary}`,
-    unchecked: '1px solid rgb(216, 216, 216)',
+    unchecked: `1px solid ${colors.border}`,
-    confirmed: '1px solid #23AC32'
+    confirmed: `1px solid ${colors.confirmation}`
+  },
+  background: {
+    primary: colors.brandPrimary,
+    secondary: colors.brandSecondary,
+    disabled: '#FAFAFA',
   }
 };
 
-const forms = {
-  cursorDisabled: 'not-allowed'
-};
-
-const colors = {
-  brandPrimary: '#364ACD',
-  brandSecondary: '#160D42',
-  grayLight: '#818A91',
-  confirmation: '#38C647',
-  background: '#FFFFFF',
-  border: '#D8D8D8',
-  borderSelected: '#1D35BC',
-  warning: '#E4A800',
-  warningLight: '#FFFAED',
-  alert: '#D0011B',
-  alertLight: '#FFC7C7',
-  inactiveBackground: '#F9F9F9',
-  inactiveBorder: '#D8D8D8',
-  inactiveColor: '#737373',
-};
-
 const typography = {
   fontPrimary: 'sans serif',
   dtFontWeight: 'bold',
-  abbrBorderColor: colors.grayLight,
+  abbrBorderColor: colors.brandSecondary,
-  textMuted: colors.grayLight
+  textMuted: colors.brandSecondary
 };
 
 const links = {
-  color: colors.brandPrimary,
+  color: '#364ACD',
   decoration: 'none',
   hoverColor: ({
     color