Merge branch 'namespacing-colors'

* namespacing-colors:
  refactoring and updating list item
  updating more names in small components
  updating metric component - removed !importants and used new constants
  fixing seconary button colors
  restructuring colors and updating button component

ui/src/components/add-metric/description.js

@@ -12,7 +12,7 @@ const {
 
 const StyledDescription = styled.p`
   margin: 0;
-  color: ${colors.regular};
+  color: ${colors.base.secondary};
 `;
 
 const Description = (props) => (

ui/src/components/add-metric/link.js

@@ -6,7 +6,7 @@ const {
 } = Styled;
 
 const StyledLink = styled.a`
-  text-decoration: underline !important;
+  text-decoration: underline;
 `;
 
 const Link = ({

ui/src/components/add-metric/tile.js

@@ -28,8 +28,8 @@ const StyledTile = styled.div`
   width: ${remcalc(300)};
   height: ${remcalc(247)};
   box-shadow: ${boxes.bottomShaddow};
-  border: ${remcalc(1)} solid ${colors.borderSecondary};
+  border: ${remcalc(1)} solid ${colors.base.greyLight};
-  background-color: ${colors.brandSecondary};
+  background-color: ${colors.base.white};
 
   ${breakpoints.small`
     width: ${remcalc(300)};

ui/src/components/add-metric/title.js

@@ -12,7 +12,7 @@ const {
 
 const StyledTitle = styled.h4`
   margin: 0;
-  color: ${colors.semibold};
+  color: ${colors.fonts.semibold};
 `;
 
 const Title = ({

ui/src/components/anchor/index.js

@@ -3,16 +3,16 @@ const React = require('react');
 const Styled = require('styled-components');
 
 const {
-  colors
+  base,
-} = constants;
+} = constants.colors;
 
 const {
   default: styled
 } = Styled;
 
 const color = (props) => props.secondary
-  ? colors.brandSecondaryLink
+  ? base.secondary
-  : colors.brandPrimaryLink;
+  : base.primary;
 
 const Anchor = styled.a`
   color: ${color} !important;

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.white,
-  disabled: colors.brandInactive
+  disabled: inactive.default
-}, colors.brandPrimary);
+}, base.primary);
 
 const backgroundHover = match({
-  secondary: colors.brandSecondaryDark,
+  secondary: base.grey,
-  disabled: colors.brandInactive
+  disabled: inactive.default
-}, colors.brandPrimaryDark);
+}, base.primaryLight);
 
 const backgroundActive = match({
-  secondary: colors.brandSecondaryDarkest,
+  secondary: base.greyDark,
-  disabled: colors.brandInactive
+  disabled: inactive.default
-}, colors.brandPrimaryDarkest);
+}, base.primaryDark);
 
 const border = match({
-  secondary: colors.borderSecondary,
+  secondary: base.greyLight,
-  disabled: colors.borderInactive
+  disabled: inactive.greyLight
-}, colors.borderPrimary);
+}, base.primary);
 
 const borderHover = match({
-  secondary: colors.borderSecondaryDark,
+  secondary: base.grey,
-  disabled: colors.borderInactive
+  disabled: inactive.default
-}, colors.borderPrimaryDark);
+}, base.primaryDark);
 
 const borderActive = match({
-  secondary: colors.borderSecondaryDarkest,
+  secondary: base.greyDark,
-  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', () => (
-    <Button>
+    <Base>
-      Inspire the lazy
+      <Button>
-    </Button>
+        Inspire the lazy
+      </Button>
+    </Base>
   )).add('Secondary', () => (
-    <Button secondary>
+    <Base>
-      Inspire the brave
+      <Button secondary>
-    </Button>
+        Inspire the brave
+      </Button>
+    </Base>
   )).add('Disabled', () => (
-    <Button disabled>
+    <Base>
-      Inspire the liars
+      <Button disabled>
-    </Button>
+        Inspire the liars
+      </Button>
+    </Base>
   )).add('Anchor', () => (
-    <div>
+    <Base>
       <Button href='#'>
         Inspire the anchor
       </Button>
-    </div>
+    </Base>
   ));

ui/src/components/form/label.js

@@ -20,5 +20,5 @@ module.exports = styled.label`
   font-weight: 600;
   font-style: normal;
   font-stretch: normal;
-  color: ${colors.brandSecondaryColor};
+  color: ${colors.base.secondary};
 `;

ui/src/components/form/outlet.js

@@ -16,11 +16,11 @@ const {
 } = Styled;
 
 const colorWithDisabled = (props) => props.disabled
-  ? colors.brandInactiveColor
+  ? colors.inactive.default
   : colors.fonts.regular;
 
 const colorWithDefaultValue = (props) => props.value === props.defaultValue
-  ? colors.brandInactiveColor
+  ? colors.inactive.default
   : colorWithDisabled(props);
 
 const color = (props) => props.defaultValue
@@ -46,7 +46,7 @@ module.exports = css`
   padding: ${paddingTop} ${remcalc(18)};
 
   border-radius: ${boxes.borderRadius};
-  background-color: ${colors.brandPrimaryColor};
+  background-color: ${colors.base.primary};
   box-shadow: ${boxes.insetShaddow};
   border: ${boxes.border.unchecked};
 
@@ -61,7 +61,7 @@ module.exports = css`
   outline: 0;
 
   &:focus {
-    border-color: ${colors.brandPrimary};
+    border-color: ${colors.base.primary};
     outline: 0;
   }
 `;

ui/src/components/horizontal-list/li.js

@@ -21,14 +21,14 @@ module.exports = styled.li`
   padding-bottom: ${remcalc(10)};
 
   & a {
-    color: ${colors.fonts.regular};
+    color: ${colors.base.primary};
     text-decoration: none;
   }
 
   & a.active {
     cursor: default;
-    color: ${colors.brandPrimaryLink};
+    color: ${colors.base.primary};
-    border-bottom: 2px solid ${colors.brandPrimaryLinkUnderline};
+    border-bottom: 2px solid ${colors.base.primary};
     padding-bottom: ${remcalc(6)};
   }
 `;

ui/src/components/icon/index.js

@@ -1,34 +0,0 @@
-const React = require('react');
-const Styled = require('styled-components');
-
-const {
-  default: styled,
-  css
-} = Styled;
-
-const styles = css`
-  font-size: inherit;
-`;
-
-const Icon = ({
-  name = 'beer',
-  className,
-  iconSet = 'fa',
-  style
-}) => {
-  const Icon = require(`react-icons/lib/${iconSet}/${name}`);
-  const Component = styled(Icon)(styles);
-
-  return (
-    <Component className={className} style={style} />
-  );
-};
-
-Icon.propTypes = {
-  className: React.PropTypes.string,
-  iconSet: React.PropTypes.string.isRequired,
-  name: React.PropTypes.string.isRequired,
-  style: React.PropTypes.object
-};
-
-module.exports = Icon;

ui/src/components/icon/readme.md

@@ -1,37 +0,0 @@
-# `<Icon>`
-
-## demo
-
-```embed
-const React = require('react');
-const ReactDOM = require('react-dom/server');
-const Base = require('../base');
-const Container = require('../container');
-const Row = require('../row');
-const Column = require('../column');
-const Icon = require('./index.js');
-const styles = require('./style.css');
-
-nmodule.exports = ReactDOM.renderToString(
-  <Base>
-    <Row>
-      <Column>
-        <Icon iconSet='fa' name='beer' />
-      </Column>
-    </Row>
-  </Base>
-);
-```
-
-## usage
-
-```js
-const React = require('react');
-const Icon = require('ui/icon');
-
-module.exports = () => {
-  return (
-    <Icon iconSet='fa' name='beer' />
-  );
-}
-```

ui/src/components/icon/style.css

@@ -1,3 +0,0 @@
-.icon {
-  font-size: inherit;
-}

ui/src/components/list/group-view.js

@@ -21,5 +21,5 @@ module.exports = styled(View)`
   padding-left: ${remcalc(23)};
   padding-right: ${remcalc(23)};
   padding-bottom: ${remcalc(5)};
-  background-color: ${colors.brandInactive};
+  background-color: ${colors.inactive.default};
 `;

ui/src/components/list/header.js

@@ -1,4 +1,5 @@
 const fns = require('../../shared/functions');
+const constants = require('../../shared/constants');
 const Item = require('./item');
 const React = require('react');
 const Styled = require('styled-components');
@@ -7,6 +8,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  colors
+} = constants;
+
 const {
   default: styled
 } = Styled;
@@ -25,6 +30,11 @@ const StyledItem = styled(Item)`
   top: ${remcalc(-1)};
   left: ${remcalc(-1)};
   right: ${remcalc(-1)};
+  
+  & [name="list-item-subtitle"],
+  & [name="list-item-title"] {
+    color: ${colors.base.white};
+  }
 `;
 
 const addFromHeader = (children) => React.Children.map(children, (c) => {

ui/src/components/list/item.js

@@ -19,10 +19,10 @@ const {
 } = Styled;
 
 const paper = `
-  0 ${remcalc(8)} 0 ${remcalc(-5)} #fafafa,
+  0 ${remcalc(8)} 0 ${remcalc(-5)} ${colors.base.grey},
-  0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.borderSecondary},
+  0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.base.greyDark},
-  0 ${remcalc(16)} 0 ${remcalc(-10)} #fafafa,
+  0 ${remcalc(16)} 0 ${remcalc(-10)} ${colors.base.grey},
-  0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.borderSecondary};
+  0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.base.greyDark};
 `;
 
 const height = (props) => props.collapsed
@@ -52,8 +52,8 @@ const Item = styled(Row)`
   height: ${height};
   min-height: ${minHeight};
   box-shadow: ${shadow};
-  border: ${remcalc(1)} solid ${colors.borderSecondary};
+  border: ${remcalc(1)} solid ${colors.base.grey};
-  background-color: ${colors.brandSecondary};
+  background-color: ${colors.base.white};
   margin-bottom: ${marginBottom};
 `;
 

ui/src/components/list/options.js

@@ -22,8 +22,8 @@ const height = (props) => props.collapsed
   : remcalc(124);
 
 const borderLeftColor = (props) => !props.fromHeader
-  ? colors.borderSecondary
+  ? colors.base.greyLight
-  : colors.borderPrimary;
+  : colors.base.primary;
 
 const Nav = styled.nav`
   flex: 0 0 ${remcalc(47)};

ui/src/components/list/subtitle.js

@@ -1,13 +1,8 @@
-const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const Title = require('./title');
 const React = require('react');
 const Styled = require('styled-components');
 
-const {
-  colors
-} = constants;
-
 const {
   remcalc
 } = fns;
@@ -20,10 +15,6 @@ const padding = (props) => !props.collapsed
   ? `0 ${remcalc(18)}`
   : 0;
 
-const color = (props) => props.fromHeader
-  ? colors.brandPrimaryColor
-  : '#646464';
-
 const display = (props) => !props.collapsed
   ? 'inline-block'
   : 'flex';
@@ -36,7 +27,6 @@ const Span = styled.span`
   font-style: normal;
   font-stretch: normal;
   font-size: ${remcalc(14)};
-  color: ${color};
 
   justify-content: flex-end;
 `;

ui/src/components/list/title.js

@@ -17,8 +17,8 @@ const {
 } = Styled;
 
 const color = (props) => !props.fromHeader
-  ? colors.brandSecondaryColor
+  ? colors.base.secondary
-  : colors.brandPrimaryColor;
+  : colors.base.primary;
 
 const padding = (props) => !props.collapsed
   ? `${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)}`

ui/src/components/metric/close-button.js

@@ -24,17 +24,17 @@ const StyledButton = styled.button`
   display: flex;
   margin: 0;
   padding: ${remcalc(18)} ${remcalc(24)};
-  color: ${colors.brandPrimaryColor};
+  color: ${colors.base.primary};
   float: right;
-  background-color: ${colors.brandPrimaryDark};
+  background-color: ${colors.base.primaryLight};
   line-height: 1.5;
   border: none;
-  border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest};
+  border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
   cursor: pointer;
 `;
 
 const StyledIcon = styled(CloseIcon)`
-  fill: ${colors.brandPrimaryColor};
+  fill: ${colors.base.primary};
 `;
 
 const AddMetricButton = ({

ui/src/components/metric/graph.js

@@ -19,7 +19,7 @@ const Container = styled.div`
   position: relative;
   height: 100%;
   width: 100%;
-  background-color: ${colors.brandPrimaryColor};
+  background-color: ${colors.base.primary};
 `;
 
 const Canvas = styled.canvas`

ui/src/components/metric/header.js

@@ -22,8 +22,8 @@ const StyledHeader = styled.div`
   box-sizing: border-box;
   padding: 0;
   width: 100%;
-  background-color: ${colors.brandPrimaryDark};
+  background-color: ${colors.base.primaryDark};
-  border: solid ${remcalc(1)} ${colors.brandPrimaryDarkest};
+  border: solid ${remcalc(1)} ${colors.base.primaryDark};
 `;
 
 const Header = (props) => (

ui/src/components/metric/select.js

@@ -29,7 +29,7 @@ const SelectWrapper = styled.div`
   &:after {
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 5px solid ${colors.brandPrimaryColor};
+    border-top: 5px solid ${colors.base.primary};
 
     ${pseudoEl({
       top: '28px',
@@ -44,10 +44,10 @@ const StyledSelect = styled.select`
   font-size:16px;
   text-align: right !important;
   border-radius: 0;
-  color: ${colors.brandPrimaryColor};
+  color: ${colors.base.primary};
-  background-color: ${colors.brandPrimaryDark};
+  background-color: ${colors.base.primaryLight};
   border: none;
-  border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest};
+  border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
   -webkit-appearance: none;
   cursor: pointer;
 `;

ui/src/components/metric/settings-button.js

@@ -25,26 +25,26 @@ const StyledButton = styled(Button)`
   display: flex;
   margin: 0;
   padding: ${remcalc(18)} ${remcalc(24)};
-  color: ${colors.brandPrimaryColor};
+  color: ${colors.base.primary};
   float: right;
-  background-color: ${colors.brandPrimaryDark};
+  background-color: ${colors.base.primaryLight};
   line-height: 1.5;
   border: none;
-  border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest};
+  border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
 
   &:hover,
   &:focus,
   &:active,
   &:active:hover,
   &:active:focus {
-    background-color: ${colors.brandPrimaryDark};
+    background-color: ${colors.base.primaryLight};
     border: none;
-    border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest};
+    border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
   }
 `;
 
 const StyledIcon = styled(SettingsIcon)`
-  fill: ${colors.brandPrimaryColor};
+  fill: ${colors.base.primary};
   margin-right: ${remcalc(12)};
 `;
 

ui/src/components/metric/title.js

@@ -23,5 +23,5 @@ module.exports = styled.h3`
   font-weight: normal;
   font-style: normal;
   line-height: 1.5;
-  color: ${colors.brandPrimaryColor};
+  color: ${colors.base.primary};
 `;

ui/src/components/metric/view.js

@@ -23,7 +23,7 @@ const Container = styled.div`
   width: 100%;
   max-width: ${remcalc(940)};
   box-shadow: ${boxes.bottomShaddow};
-  border: 1px solid ${colors.borderSecondary};
+  border: 1px solid ${colors.base.greyLight};
 `;
 
 const View = (props) => (

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.greyLight}`,
-    confirmed: `${remcalc(1)} solid ${colors.confirmation}`
+    confirmed: `${remcalc(1)} solid ${base.greyLight}`
   }
 };

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',
+  greyLight: '#e9e9e9',
+  greyDark: '#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: base.greyLight,
-  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;