restructuring colors and updating button component

ui/src/components/button/index.js

@@ -6,7 +6,11 @@ const React = require('react');
 const Styled = require('styled-components');
 
 const {
-  colors,
+  base,
+  inactive,
+} = constants.colors;
+
+const {
   boxes
 } = constants;
 
@@ -20,39 +24,39 @@ const {
 } = Styled;
 
 const background = match({
-  secondary: colors.brandSecondary,
+  secondary: base.grey,
-  disabled: colors.brandInactive
+  disabled: inactive.default
-}, colors.brandPrimary);
+}, base.primary);
 
 const backgroundHover = match({
-  secondary: colors.brandSecondaryDark,
+  secondary: base.greyDark,
-  disabled: colors.brandInactive
+  disabled: inactive.default
-}, colors.brandPrimaryDark);
+}, base.primaryLight);
 
 const backgroundActive = match({
-  secondary: colors.brandSecondaryDarkest,
+  secondary: base.secondaryDark,
-  disabled: colors.brandInactive
+  disabled: inactive.default
-}, colors.brandPrimaryDarkest);
+}, base.primaryDark);
 
 const border = match({
-  secondary: colors.borderSecondary,
+  secondary: base.grey,
-  disabled: colors.borderInactive
+  disabled: inactive.default
-}, colors.borderPrimary);
+}, base.primary);
 
 const borderHover = match({
-  secondary: colors.borderSecondaryDark,
+  secondary: base.greyDark,
-  disabled: colors.borderInactive
+  disabled: base.greyDark
-}, colors.borderPrimaryDark);
+}, base.primaryDark);
 
 const borderActive = match({
-  secondary: colors.borderSecondaryDarkest,
+  secondary: base.secondaryDark,
-  disabled: colors.borderInactive
+  disabled: inactive.default
-}, colors.borderPrimaryDarkest);
+}, base.primaryDark);
 
 const color = match({
-  secondary: colors.brandSecondaryColor,
+  secondary: base.secondary,
-  disabled: colors.brandInactiveColor
+  disabled: inactive.text
-}, colors.brandPrimaryColor);
+}, base.white);
 
 const borderRadius = match({
   rect: 0

ui/src/components/button/story.js

@@ -4,24 +4,31 @@ const {
 } = require('@kadira/storybook');
 
 const Button = require('./');
+const Base = require('../base');
 
 storiesOf('Button', module)
   .add('With text', () => (
+    <Base>
       <Button>
         Inspire the lazy
       </Button>
+    </Base>
   )).add('Secondary', () => (
+    <Base>
       <Button secondary>
         Inspire the brave
       </Button>
+    </Base>
   )).add('Disabled', () => (
+    <Base>
       <Button disabled>
         Inspire the liars
       </Button>
+    </Base>
   )).add('Anchor', () => (
-    <div>
+    <Base>
       <Button href='#'>
         Inspire the anchor
       </Button>
-    </div>
+    </Base>
   ));

ui/src/shared/constants/boxes.js

@@ -5,14 +5,18 @@ const {
   remcalc
 } = fns;
 
+const {
+  base
+} = colors;
+
 module.exports = {
   borderRadius: remcalc(4),
   bottomShaddow: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`,
   bottomShaddowDarker: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`,
   insetShaddow: `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`,
   border: {
-    checked: `${remcalc(1)} solid ${colors.brandPrimary}`,
+    checked: `${remcalc(1)} solid ${base.primary}`,
-    unchecked: `${remcalc(1)} solid ${colors.borderSecondary}`,
+    unchecked: `${remcalc(1)} solid ${base.borderSecondary}`,
-    confirmed: `${remcalc(1)} solid ${colors.confirmation}`
+    confirmed: `${remcalc(1)} solid ${base.secondaryLight}`
   }
 };

ui/src/shared/constants/colors.js

@@ -1,50 +1,46 @@
+/*
+* There should be no string value to keys outside the `base` object.
+* If a new colors needs to be used, check it doesn't already exist, or
+* anything that is similar, and if it doesn't, add a key-value and reference from
+* there. Lets try and keep different color variations down ot a minimum.
+* */
+
+const base = {
+  primary: '#1838c0',
+  primaryLight: '#3b46cc',
+  primaryDark: '#12279f',
+  secondary: '#464646',
+  secondaryDark: '#646464',
+  secondaryLight: '#919191',
+  white: '#FFFFFF',
+  grey:  '#f8f8f8',
+  greyDark: '#e9e9e9',
+  greyLight: '#919191',
+  red: '#DA4B42',
+  yellow: '#E4A800',
+  green: '#00AF66',
+};
+
 const fonts = {
-  semibold: '#464646',
+  semibold: base.secondary,
-  regular: '#646464'
+  regular: base.secondaryDark
 };
 
-const brandPrimary = {
+const inactive = {
-  brandPrimary: '#3B46CC',
+  default: '#FAFAFA',
-  brandPrimaryDark: '#1838C0',
+  border: '#D8D8D8',
-  brandPrimaryDarkest: '#12279F',
+  text: base.greyLight
-  borderPrimary: '#2531BC',
-  borderPrimaryDark: '#2531BC',
-  borderPrimaryDarkest: '#062BA0',
-  brandPrimaryColor: '#FFFFFF',
-  brandPrimaryLink: '#364ACD',
-  brandPrimaryLinkUnderline: '#3B47CC'
-};
-
-const brandSecondary = {
-  brandSecondary: '#FFFFFF',
-  brandSecondaryDark: '#F8F8F8',
-  brandSecondaryDarkest: '#E9E9E9',
-  borderSecondary: '#D8D8D8',
-  borderSecondaryDark: '#D8D8D8',
-  borderSecondaryDarkest: '#D8D8D8',
-  brandSecondaryColor: '#464646',
-  brandSecondaryLink: '#FFFFFF',
-  brandSecondaryLinkUnderline: '#FFFFFF'
-};
-
-const brandInactive = {
-  brandInactive: '#FAFAFA',
-  borderInactive: '#D8D8D8',
-  brandInactiveColor: '#919191'
 };
 
 const notifications = {
-  alert: '#DA4B42',
+  alert: base.red,
-  alertLight: '#FFC7C7',
+  confirmation: base.green,
-  confirmation: '#00AF66',
+  warning: base.yellow,
-  success: '#00AF66',
-  warning: '#E4A800',
-  warningLight: '#FFFAED',
 };
 
 const forms = {
-  inputError: '#DA4B42',
+  inputError: base.red,
-  inputWarning: '#E4A700'
+  inputWarning: base.yellow
 };
 
 const metrics = {
@@ -57,13 +53,12 @@ const topology = {
 };
 
 const colors = {
-  ...brandPrimary,
-  ...brandSecondary,
-  ...brandInactive,
-  ...notifications,
   ...metrics,
   ...topology,
   ...forms,
+  inactive,
+  notifications,
+  base,
   fonts
 };
 

ui/src/shared/constants/typography.js

@@ -1,8 +1,12 @@
 const colors = require('./colors');
 
+const {
+  base
+} = colors;
+
 const typography = {
-  abbrBorderColor: colors.brandSecondary,
+  abbrBorderColor: base.secondary,
-  textMuted: colors.brandSecondary
+  textMuted: base.secondary
 };
 
 module.exports = typography;