Refactor colours

ui/src/components/button/index.js

@@ -19,32 +19,25 @@ const {
 // TODO: this should come from constants
 // and be calculated accordingly
 const styles = {
-  primaryBackground: colors.brandPrimary,
   primaryBorder: '#2532BB',
-  primaryColor: '#FFFFFF',
-  secondaryBackgroud: '#FFFFFF',
-  secondaryBorder: '#D8D8D8',
   secondaryColor: '#646464',
-  inactiveBackground: '#F9F9F9',
-  inactiveBorder: '#D8D8D8',
-  inactiveColor: '#737373',
   ...colors
 };
 
 const background = match({
-  secondary: styles.secondaryBackgroud,
-  inactive: styles.inactiveBackground
-}, styles.primaryBackground);
+  secondary: styles.background,
+  disabled: styles.inactiveBackground,
+}, styles.brandPrimary);
 
 const border = match({
-  secondary: styles.secondaryBorder,
-  inactive: styles.inactiveBorder
+  secondary: styles.border,
+  disabled: styles.inactiveBorder
 }, styles.primaryBorder);
 
 const color = match({
   secondary: styles.secondaryColor,
-  inactive: styles.inactiveColor
-}, styles.primaryColor);
+  disabled: styles.inactiveColor
+}, styles.background);
 
 module.exports = styled.button`
   border-radius: ${remcalc(boxes.borderRadius)};

ui/src/shared/constants.js

@@ -85,17 +85,20 @@ const forms = {
 };
 
 const colors = {
-  brandPrimary: '#364acd',
-  brandSecondary: '#160d42',
-  grayLight: '#818a91',
+  brandPrimary: '#364ACD',
+  brandSecondary: '#160D42',
+  grayLight: '#818A91',
   confirmation: '#38C647',
-  background: '#ffffff',
+  background: '#FFFFFF',
   border: '#D8D8D8',
   borderSelected: '#1D35BC',
-  warning: '#e4a800',
-  warningLight: '#fffaed',
+  warning: '#E4A800',
+  warningLight: '#FFFAED',
   alert: '#D0011B',
-  alertLight: '#ffc7c7'
+  alertLight: '#FFC7C7',
+  inactiveBackground: '#F9F9F9',
+  inactiveBorder: '#D8D8D8',
+  inactiveColor: '#737373',
 };
 
 const typography = {

ui/stories/index.js

@@ -129,6 +129,19 @@ storiesOf('Checkbox', module)
     <Checkbox disabled />
   ));
 
+storiesOf('Radio', module)
+  .add('Default', () => (
+    <Radio>
+     Video killed the radio star
+    </Radio>
+  ))
+  .add('Checked', () => (
+    <Radio checked onChange={function noop() {}} />
+  ))
+  .add('Disabled', () => (
+    <Radio disabled />
+  ));
+
 storiesOf('Tabs', module)
   .add('Default', () => (
     <Tabs name='my-tab-group'>
@@ -162,16 +175,3 @@ storiesOf('Widget', module)
       <p>Some text</p>
     </Widget>
   ))
-
-storiesOf('Radio', module)
-  .add('Default', () => (
-    <Radio>
-     Video killed the radio star
-    </Radio>
-  ))
-  .add('Checked', () => (
-    <Radio checked onChange={function noop() {}} />
-  ))
-  .add('Disabled', () => (
-    <Radio disabled />
-  ));