Merge pull request #263 from yldio/feature/color-typography-styleguide

Feature/color typography styleguide

frontend/src/components/article/index.js

@@ -2,7 +2,7 @@ const Styled = require('styled-components');
 const constants = require('@ui/shared/constants');
 
 const {
-  colors,
+  // colors,
   breakpoints
 } = constants;
 
@@ -12,7 +12,6 @@ const {
 
 // Main Contonent Wrapper Styles
 module.exports = styled.article`
-  background-color: ${colors.base.grey};
   padding: 2rem;
 
   ${breakpoints.large`

frontend/src/components/breadcrumb/index.js

@@ -20,7 +20,7 @@ const {
 } = constants;
 
 const {
-  H1,
+  H2,
 } = BaseElements;
 
 const {
@@ -29,7 +29,7 @@ const {
 
 // Main Contonent Wrapper Styles
 const StyledDiv = styled.div`
-  border-bottom: solid ${remcalc(1)} ${colors.base.greyDark};
+  border-bottom: solid ${remcalc(1)} ${colors.base.grey};
   padding: ${remcalc(30)} 0;
   margin-bottom: ${remcalc(21)};
 `;
@@ -66,6 +66,10 @@ function getNameLink(name) {
   }));
 }
 
+const StyledH2 = styled(H2)`
+  color: ${colors.base.primary};
+`;
+
 const Breadcrumb = ({
   children,
   links = [],
@@ -76,9 +80,9 @@ const Breadcrumb = ({
       <Row>
         <Column xs={12}>
           <StyledDiv>
-            <H1>
+            <StyledH2>
               {getNameLink(name)}
-            </H1>
+            </StyledH2>
           </StyledDiv>
         </Column>
       </Row>

frontend/src/components/navigation/org.js

@@ -33,7 +33,7 @@ const {
 
 const StyledNav = styled.div`
   background-color: #f2f2f2;
-  border-bottom: ${remcalc(1)} solid ${colors.base.greyDark};
+  border-bottom: ${remcalc(1)} solid ${colors.base.grey};
 
   & ul {
     height: ${remcalc(60)};
@@ -46,12 +46,12 @@ const NavigationLinkContainer = styled.div`
   position: relative;
   padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)};
   color: ${colors.base.secondaryDark};
-  border: ${remcalc(1)} solid ${colors.base.greyDark};
+  border: ${remcalc(1)} solid ${colors.base.grey};
   height: ${remcalc(24)};
   background-color: #f2f2f2;
 
   &.active {
-    background-color: ${colors.base.grey};
+    background-color: ${colors.base.background};
     border-bottom: solid ${remcalc(1)} ${colors.base.grey};
   }
 `;

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

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

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

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

ui/src/components/base-elements/story.js

@@ -4,9 +4,17 @@ const {
   storiesOf
 } = require('@kadira/storybook');
 
+const constants = require('../../shared/constants');
+
+const Column = require('../column');
+const Row = require('../row');
 const Base = require('../base');
 const BaseElements = require('./');
 
+const {
+  colors
+} = constants;
+
 const {
   H1,
   H2,
@@ -41,4 +49,60 @@ storiesOf('Base Elements', module)
       <Small>This is a Small</Small>
     </Base>
   ))
+  .add('Style Guide', () => (
+    <Base>
+      <div>
+        <Row>
+          <Column>
+            <H1>Special Heading - H1</H1>
+            <ul>
+              <li>Size - 36px</li>
+              <li>Line Height - 42px</li>
+              <li>Color - <code>{colors.base.secondary}</code></li>
+            </ul>
+          </Column>
+        </Row>
+        <Row>
+          <Column>
+            <H2>Standard Heading - H2</H2>
+            <ul>
+              <li>Size - 24px</li>
+              <li>Line Height - 36px</li>
+              <li>Color - <code>{colors.base.secondary}</code></li>
+            </ul>
+          </Column>
+        </Row>
+        <Row>
+          <Column>
+            <H3>Sub Heading - H3</H3>
+            <ul>
+              <li>Size - 16px</li>
+              <li>Line Height - 24px</li>
+              <li>Color - <code>{colors.base.secondary}</code></li>
+            </ul>
+          </Column>
+        </Row>
+        <Row>
+          <Column>
+            <P>Body Copy</P>
+            <ul>
+              <li>Size - 16px</li>
+              <li>Line Height - 24px</li>
+              <li>Color - <code>{colors.base.text}</code></li>
+            </ul>
+          </Column>
+        </Row>
+        <Row>
+          <Column>
+            <Small>Small Body Copy</Small>
+            <ul>
+              <li>Size - 14px</li>
+              <li>Line Height - 18px</li>
+              <li>Color - <code>{colors.base.text}</code></li>
+            </ul>
+          </Column>
+        </Row>
+      </div>
+    </Base>
+  ))
 ;

ui/src/components/base/global.js

@@ -17,13 +17,13 @@ const fonts = [
     style: 'normal'
   },
   {
-    family: 'LibreFranklin',
+    family: 'LibreFranklin-Semi-Bold',
     filename: 'librefranklin-semibold-webfont',
     weight: '600',
     style: 'normal'
   },
   {
-    family: 'LibreFranklin',
+    family: 'LibreFranklin-Bold',
     filename: 'librefranklin-bold-webfont',
     weight: '700',
     style: 'normal'

ui/src/components/base/index.js

@@ -1,4 +1,5 @@
 const constants = require('../../shared/constants');
+const typography = require('../../shared/composers/typography');
 
 const Styled = require('styled-components');
 
@@ -11,11 +12,14 @@ const {
 } = Styled;
 
 module.exports = styled.div`
-  font-family: 'LibreFranklin', sans-serif;
   font-size: 1rem;
   line-height: 1.5;
-  color: ${colors.fonts.regular};
+  background-color: ${colors.base.background};
-  background-color: #FFFFFF;
+  
+  ${typography.libreFranklin}
+  ${typography.bodyColor}
+  ${typography.regular}
+  
 `;
 
 module.exports.global = require('./global');

ui/src/components/button/index.js

@@ -39,19 +39,19 @@ const background = match({
 }, base.primary);
 
 const backgroundHover = match({
-  secondary: base.grey,
+  secondary: base.whiteHover,
   disabled: inactive.default
-}, base.primaryLight);
+}, base.primaryHover);
 
 const backgroundActive = match({
-  secondary: base.greyDarker,
+  secondary: base.whiteActive,
   disabled: inactive.default
-}, base.primaryDark);
+}, base.primaryHover);
 
 const border = match({
-  secondary: base.greyLight,
+  secondary: base.grey,
-  disabled: inactive.greyLight
+  disabled: inactive.grey
-}, base.primary);
+}, base.primaryDesaturated);
 
 const borderHover = match({
   secondary: base.grey,
@@ -59,9 +59,9 @@ const borderHover = match({
 }, base.primaryDark);
 
 const borderActive = match({
-  secondary: base.greyDarker,
+  secondary: base.grey,
   disabled: inactive.default
-}, base.primaryDark);
+}, base.primaryDesaturatedHover);
 
 const color = match({
   secondary: base.secondary,

ui/src/components/colors/story.js

@@ -0,0 +1,85 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const constants = require('../../shared/constants');
+const Column = require('../column');
+const Row = require('../row');
+
+const {
+  default: styled
+} = Styled;
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const {
+  colors
+} = constants;
+
+const StyledWrapper = styled.div`
+  margin-left: 20px;
+  margin-bottom: 20px;
+  border: solid 1px ${colors.base.grey};
+  padding: 18px;
+  
+`;
+
+const Square = styled.div`
+  display: inline-block;
+  border: solid 1px ${colors.base.grey};
+  width: 100%;
+  height: 100px
+`;
+
+const StyledP = styled.p`
+  margin: 0;
+`;
+
+const convertCase = (val) => {
+  const result = val.replace( /([A-Z])/g, ' $1' );
+  return result.charAt(0).toUpperCase() + result.slice(1);
+};
+
+storiesOf('Colors', module)
+  .add('default', () => {
+    const renderColors = Object.keys(colors.base)
+        .sort()
+        .map( (color, index) => {
+
+          const StyledSquare = styled(Square)`
+            background: ${colors.base[color]}
+          `;
+
+          return (
+            <Column
+              key={index}
+              md={3}
+              xs={6}
+            >
+              <StyledWrapper>
+                <StyledSquare />
+                <StyledP>
+                  <strong>Name</strong>:
+                  <br />{convertCase(color)}
+                </StyledP>
+
+                <StyledP>
+                  <strong>Const</strong>:
+                  <br />{color}
+                </StyledP>
+
+                <StyledP>
+                  <strong>Hex</strong>: {colors.base[color].toUpperCase()}
+                </StyledP>
+              </StyledWrapper>
+            </Column>
+          );
+        });
+
+    return (
+      <Row>
+        {renderColors}
+      </Row>
+    );
+  });

ui/src/components/form/outlet.js

@@ -27,6 +27,10 @@ const color = (props) => props.defaultValue
   ? colorWithDefaultValue(props)
   : colorWithDisabled(props);
 
+const border = (props) => props.error
+  ? boxes.border.error
+  : boxes.border.unchecked;
+
 const height = (props) => !props.multiple
   ? remcalc(48)
   : 'auto';
@@ -48,10 +52,10 @@ const Outlet = css`
   border-radius: ${boxes.borderRadius};
   background-color: ${colors.base.white};
   box-shadow: ${boxes.insetShaddow};
-  border: ${boxes.border.unchecked};
+  border: ${border};
 
   font-size: ${remcalc(16)};
-  line-height: normal !important;
+  line-height: normal;
   font-weight: normal;
   font-style: normal;
   font-stretch: normal;

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

@@ -27,7 +27,7 @@ const Li = styled.li`
   }
 
   & a {
-    color: ${colors.base.secondaryDark};
+    color: ${colors.base.text};
     text-decoration: none;
     padding-bottom: ${remcalc(6)};
 

ui/src/components/list/description.js

@@ -41,7 +41,7 @@ const StyledTitle = styled(Title)`
     padding-top: 0;
   `}
 
-  font-weight: normal !important;
+  font-weight: normal;
   flex-grow: 2;
 `;
 

ui/src/components/list/item.js

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

ui/src/components/list/options.js

@@ -27,7 +27,7 @@ const height = (props) => props.collapsed
   : remcalc(124);
 
 const borderLeftColor = (props) => !props.fromHeader
-  ? colors.base.greyLight
+  ? colors.base.grey
   : colors.base.primary;
 
 const Nav = styled.nav`

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

@@ -30,10 +30,10 @@ const StyledButton = styled.button`
   margin: 0;
   padding: ${remcalc(18)} ${remcalc(24)};
   float: right;
-  background-color: ${colors.base.primaryDark};
+  background-color: ${colors.base.primaryDesaturated};
   line-height: 1.5;
   border: none;
-  border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
+  border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated};
   cursor: pointer;
 `;
 

ui/src/components/metric/header.js

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

ui/src/components/metric/select.js

@@ -46,9 +46,9 @@ const StyledSelect = styled.select`
   text-align: right !important;
   border-radius: 0;
   color: ${colors.base.white};
-  background-color: ${colors.base.primaryDark};
+  background-color: ${colors.base.primaryDesaturated};
   border: none;
-  border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
+  border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated};
   -webkit-appearance: none;
   cursor: pointer;
 `;

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

@@ -32,10 +32,10 @@ const StyledButton = styled(Button)`
   padding: ${remcalc(18)} ${remcalc(24)};
   color: ${colors.base.white};
   float: right;
-  background-color: ${colors.base.primaryDark};
+  background-color: ${colors.base.primaryDesaturated};
   line-height: 1.5;
   border: none;
-  border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
+  border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated};
 
   &:hover,
   &:focus,
@@ -44,7 +44,7 @@ const StyledButton = styled(Button)`
   &:active:focus {
     background-color: ${colors.base.primaryLight};
     border: none;
-    border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
+    border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturatedHover};
   }
 `;
 

ui/src/components/metric/view.js

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

ui/src/components/modal/index.js

@@ -32,8 +32,8 @@ const StyledModal = styled.div`
   padding: ${remcalc(20)};
   z-index: 1;
 
-  background: ${colors.brandSecondary};
+  background: ${colors.secondary};
-  border: ${remcalc(1)} solid ${colors.borderSecondary};
+  border: ${remcalc(1)} solid ${colors.secondaryHover};
 `;
 
 const StyledOverlay = styled.div`

ui/src/components/payment-card/payment-card.js

@@ -45,9 +45,9 @@ const sizes = {
 const Card = styled.div`
   box-sizing: border-box;
   box-shadow: ${boxes.bottomShaddow};
-  border: ${remcalc(1)} solid ${colors.borderSecondary};
+  border: ${remcalc(1)} solid ${colors.base.grey};
   border-radius: ${boxes.borderRadius};
-  background-color: ${colors.brandSecondary};
+  background-color: ${colors.base.white};
 `;
 
 const SmallCard = styled(Card)`

ui/src/components/radio/index.js

@@ -26,10 +26,10 @@ const StyledInput = styled.input`
 
   &:disabled + span::before,
   &:checked + span::before {
-    background-color: #646464;
+    background-color: ${colors.base.secondary};
   }
   &:disabled + span {
-    background-color: ${colors.backgroundInactive};
+    background-color: ${colors.inactive.default};
   }
   &:disabled + span::before {
     opacity: 0.3;
@@ -52,8 +52,8 @@ const StyledSpan = styled.span`
     position: absolute;
     width: ${remcalc(10)};
     height: ${remcalc(10)};
-    box-shadow: 0 0 0 ${remcalc(1)} #646464;
+    box-shadow: 0 0 0 ${remcalc(1)} ${colors.base.secondary};
-    border: ${remcalc(8)} solid ${colors.brandInactive};
+    border: ${remcalc(8)} solid ${colors.inactive.default};
     top: ${remcalc(5)};
     left: ${remcalc(5)};
     border-radius: 100%;

ui/src/components/range-slider/index.js

@@ -23,7 +23,7 @@ const {
 } = Styled;
 
 const rangeTrack = css`
-  background: ${colors.brandPrimary};
+  background: ${colors.base.primary};
   cursor: pointer;
   height: ${remcalc(6)};
   width: 100%;
@@ -35,7 +35,7 @@ const rangeTrack = css`
 
 const rangeThumb = css`
   -webkit-appearance: none;
-  background: #FFFFFF;
+  background: ${colors.base.white};
   cursor: pointer;
   height: ${remcalc(24)};
   position: relative;
@@ -46,7 +46,7 @@ const rangeThumb = css`
 `;
 
 const rangeLower = css`
-  background: ${colors.brandPrimary};
+  background: ${colors.base.primary};
   height: ${remcalc(6)};
 
   ${baseBox({
@@ -118,7 +118,7 @@ const StyledRange = styled.input`
   }
 
   &:focus::-webkit-slider-runnable-track {
-    background: ${colors.brandPrimary};
+    background: ${colors.primary};
   }
 
   &:focus::-ms-fill-lower {

ui/src/components/table-data-table/table-head.js

@@ -35,7 +35,7 @@ const StyledTableHeadItem = styled.td`
 const StyledTableHead = styled.thead`
   background: #fafafa;
   box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
-  border: solid ${remcalc(1)} ${colors.base.greyDark};
+  border: solid ${remcalc(1)} ${colors.base.grey};
 
   ${breakpoints.smallOnly`
     display: none;

ui/src/components/table-data-table/table-row.js

@@ -23,7 +23,8 @@ const {
 } = composers;
 
 const StyledRow = styled.tr`
-  border: solid ${remcalc(1)} ${colors.base.greyDark};
+  border: solid ${remcalc(1)} ${colors.base.grey};
+};
 
   ${breakpoints.smallOnly`
     display: block;

ui/src/components/table-simple-table/index.js

@@ -2,7 +2,6 @@ module.exports = {
   Table: require('./table'),
   TableHead: require('./table-head'),
   TableBody: require('./table-body'),
-  TableCell: require('./table-cell'),
   TableRow: require('./table-row'),
   TableItem: require('./table-item'),
 };

ui/src/components/table-simple-table/table-row.js

@@ -27,7 +27,7 @@ const StyledTableRow = styled.div`
   ${clearfix}
 
   padding: ${remcalc(24)} 0;
-  border-bottom: solid 1px ${colors.base.greyDark};
+  border-bottom: solid 1px ${colors.base.grey};
 
   & > .table-item {
     text-align: center;

ui/src/components/table-simple-table/table.js

@@ -17,7 +17,7 @@ const {
 } = composers;
 
 const StyledTableWrapper = styled.section`
-  border: solid 1px ${colors.base.greyDark}
+  border: solid 1px ${colors.base.grey}
   font-family: 'LibreFranklin', sans-serif;
 	font-style: normal;
 `;

ui/src/components/tabs/tab/index.js

@@ -46,7 +46,7 @@ const StyledRadio = styled.input`
 
   &:checked {
     & + .${classNames.label} {
-      background: ${colors.brandInactive};
+      background: ${colors.inactive.default};
       border-bottom-width: 0;
 
       ${moveZ({
@@ -62,7 +62,7 @@ const StyledRadio = styled.input`
 
 const StyledLabel = styled.label`
   background: transparent;
-  border: ${remcalc(1)} solid ${colors.greyDark};
+  border: ${remcalc(1)} solid ${colors.base.grey};
   display: inline-block;
   font-size: ${remcalc(20)};
   padding: ${remcalc('12 25')};
@@ -79,7 +79,7 @@ const StyledPanel = styled.div`
 `;
 
 const StyledContent = styled.div`
-  background: ${colors.brandInactive};
+  background: ${colors.inactive.default};
   border: ${boxes.border.unchecked};
   box-sizing: border-box;
   box-shadow: 0 ${remcalc(-1)} ${remcalc(26)} 0 rgba(0, 0, 0, 0.2);

ui/src/components/textarea/index.js

@@ -24,12 +24,12 @@ const {
 } = Styled;
 
 const Label = styled.label`
-  color: ${props => props.error ? colors.alert : colors.fonts.regular}
+  color: ${props => props.error ? colors.base.red : colors.fonts.regular}
 `;
 
 const InputField = styled.textarea`
-  background: ${colors.brandSecondary};
+  background: ${colors.secondary};
-  color: ${props => props.error ? colors.alert : colors.fonts.semibold}
+  color: ${props => props.error ? colors.base.red : colors.fonts.semibold}
   display: block;
   font-size: ${remcalc(16)};
   padding: ${remcalc('15 18')};
@@ -37,7 +37,7 @@ const InputField = styled.textarea`
   width: 100%;
   min-height: ${remcalc(96)};
   ${baseBox()};
-  border-color: ${props => props.error ? colors.alert : ''};
+  border-color: ${props => props.error ? colors.base.red : ''};
 
   &:focus {
     border-color: ${boxes.border.checked};

ui/src/components/tooltip/index.js

@@ -49,7 +49,7 @@ const StyledList = styled.ul`
     padding: ${remcalc(ItemPadder)} ${remcalc(WrapperPadder)};
 
     &:hover {
-      background: ${colors.borderSecondaryDarkest};
+      background: ${colors.base.grey};
     }
   }
 

ui/src/components/widget/index.js

@@ -48,7 +48,7 @@ const StyledContent = styled.div`
   border: ${boxes.border.unchecked};
   border-radius: ${remcalc(4)};
   cursor: pointer;
-  padding: remcalc(36);
+  padding: ${remcalc(36)};
 
   & img {
     max-width: 100%;

ui/src/shared/composers/index.js

@@ -1,8 +1,8 @@
 const Styled = require('styled-components');
 const camelCase = require('camel-case');
 
-const constants = require('./constants');
+const constants = require('../constants');
-const fns = require('./functions');
+const fns = require('../functions');
 
 const {
   boxes

ui/src/shared/composers/typography.js

@@ -0,0 +1,34 @@
+const Styled = require('styled-components');
+const constants = require('../../shared/constants');
+
+const {
+  colors
+} = constants;
+
+const {
+  css
+} = Styled;
+
+module.exports = {
+  libreFranklin: `
+    font-family: 'LibreFranklin', Helvetica, sans-serif;
+  `,
+  libreFranklinSemiBold: `
+    font-family: 'LibreFranklin-Semi-Bold', Helvetica, sans-serif;
+  `,
+  libreFranklinBold: `
+    font-family: 'LibreFranklin-Bold', Helvetica, sans-serif;
+  `,
+  bold: css`
+    font-weight: 600;
+  `,
+  regular: css`
+    font-weight: normal;
+  `,
+  titleColor: css`
+    color: ${colors.base.secondary};
+  `,
+  bodyColor: css`
+    color: ${colors.base.text};
+  `
+};

ui/src/shared/constants/boxes.js

@@ -16,7 +16,8 @@ module.exports = {
   insetShaddow: `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`,
   border: {
     checked: `${remcalc(1)} solid ${base.primary}`,
-    unchecked: `${remcalc(1)} solid ${base.greyLight}`,
+    unchecked: `${remcalc(1)} solid ${base.grey}`,
-    confirmed: `${remcalc(1)} solid ${base.greyLight}`
+    confirmed: `${remcalc(1)} solid ${base.grey}`,
+    error: `${remcalc(1)} solid ${base.red}`,
   }
 };

ui/src/shared/constants/colors.js

@@ -3,45 +3,79 @@
 * 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.
-* */
+*
+
+---
+
+Color Object example
+
+const color_name = {
+  color_name: '#FFFFFF',
+  color_name_style1: '#FFF000',
+  color_name_style2: '#FFF333',
+};
+*/
+
+const primary = {
+  primary: '#3B47CC',
+  primaryHover: '#1838C0',
+  primaryActive: '#12279F',
+  primaryDesaturated: '#3B4AAF',
+  primaryDesaturatedHover: '#34429D',
+  primaryDesaturatedActive: '#2D3884',
+  primaryDark: '#2D3884',
+  primaryDarkHover: '#34429D',
+  primaryDarkActive: '#2D3884'
+};
+
+const secondary = {
+  secondary: '#464646',
+  secondaryHover: '#3F3F3F',
+  secondaryActive: '#343434'
+};
+
+const white = {
+  white: '#FFFFFF',
+  whiteHover: '#F8F8F8',
+  whiteActive: '#E9E9E9'
+};
 
 const base = {
-  primary: '#1838c0',
+  ...primary,
-  primaryLight: '#3b46cc',
+  ...secondary,
-  primaryDark: '#12279f',
+  ...white,
-  secondary: '#464646',
+  text: '#646464',
-  secondaryDark: '#646464',
+  grey: '#D8D8D8',
-  secondaryLight: '#919191',
+  disabled: '#FAFAFA',
-  white: '#FFFFFF',
+  background: '#FAFAFA',
-  grey:  '#f8f8f8',
-  greyLight: '#e9e9e9',
-  greyDark: '#d8d8d8',
-  greyDarker: '#919191',
-  red: '#DA4B42',
-  yellow: '#E4A800',
   green: '#00AF66',
+  greenDark: '#009858',
+  orange: '#E38200',
+  orangeDark: '#CB7400',
+  red: '#DA4B42',
+  redDark: '#CD251B'
 };
 
 const fonts = {
   semibold: base.secondary,
-  regular: base.secondaryDark
+  regular: base.text
 };
 
 const inactive = {
-  default: '#FAFAFA',
+  default: base.disabled,
-  border: base.greyLight,
+  border: base.grey,
-  text: base.greyLight
+  text: base.grey
 };
 
 const notifications = {
   alert: base.red,
   confirmation: base.green,
-  warning: base.yellow,
+  warning: base.orange
 };
 
 const forms = {
   inputError: base.red,
-  inputWarning: base.yellow
+  inputWarning: base.orange
 };
 
 const metrics = {
@@ -50,7 +84,7 @@ const metrics = {
 };
 
 const topology = {
-  topologyBackground: '#343434',
+  topologyBackground: base.secondaryActive
 };
 
 const colors = {