grayDark constant color

frontend/src/components/breadcrumb/index.js

@@ -28,7 +28,7 @@ const {
 
 // Main Contonent Wrapper Styles
 const StyledDiv = styled.div`
-  border-bottom: solid ${remcalc(1)} #d8d8d8;
+  border-bottom: solid ${remcalc(1)} ${colors.greyDark};
   padding: ${remcalc(30)} 0;
   margin-bottom: ${remcalc(21)};
 `;

frontend/src/components/navigation/org.js

@@ -5,6 +5,7 @@ const Styled = require('styled-components');
 
 const Avatar = require('@ui/components/avatar');
 const Container = require('@ui/components/container');
+const constants = require('@ui/shared/constants');
 const PropTypes = require('@root/prop-types');
 const selectors = require('@state/selectors');
 const Ul = require('@ui/components/horizontal-list/ul');
@@ -22,6 +23,10 @@ const {
   default: styled
 } = Styled;
 
+const {
+  colors
+} = constants;
+
 const {
   orgsSelector
 } = selectors;
@@ -32,7 +37,7 @@ const {
 
 const StyledNav = styled.div`
   background-color: #f2f2f2;
-  border-bottom: ${remcalc(1)} solid #d8d8d8;
+  border-bottom: ${remcalc(1)} solid ${colors.greyDark};
 
   & ul {
     height: ${remcalc(60)};
@@ -45,7 +50,7 @@ const NavigationLinkContainer = styled.div`
   position: relative;
   padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)};
   color: #646464;
-  border: solid ${remcalc(1)} #d8d8d8;
+  border: solid ${remcalc(1)} ${colors.greyDark};
   height: ${remcalc(24)};
   background-color: #f2f2f2;
 

ui/src/components/button/index.js

@@ -34,7 +34,7 @@ const backgroundHover = match({
 }, base.primaryLight);
 
 const backgroundActive = match({
-  secondary: base.greyDark,
+  secondary: base.greyDarker,
   disabled: inactive.default
 }, base.primaryDark);
 
@@ -49,7 +49,7 @@ const borderHover = match({
 }, base.primaryDark);
 
 const borderActive = match({
-  secondary: base.greyDark,
+  secondary: base.greyDarker,
   disabled: inactive.default
 }, base.primaryDark);
 

ui/src/components/list/item.js

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

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

@@ -8,9 +8,9 @@ const {
   remcalc
 } = fns;
 
-
 const {
-  breakpoints
+  breakpoints,
+  colors
 } = constants;
 
 const {
@@ -20,7 +20,7 @@ const {
 const StyledTableHeadItem = styled.td`
   border-bottom: none;
   padding: ${remcalc(24)};
-  
+
   ${breakpoints.medium`
     ${props => `width: ${props.mdWidth}`}
   `}
@@ -30,8 +30,8 @@ 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)} #d8d8d8;
-  
+  border: solid ${remcalc(1)} ${colors.greyDark};
+
   ${breakpoints.smallOnly`
     display: none;
   `}

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

@@ -13,12 +13,13 @@ const {
 } = Styled;
 
 const {
-  breakpoints
+  breakpoints,
+  colors
 } = constants;
 
 const StyledRow = styled.tr`
-  border: solid ${remcalc(1)} #d8d8d8;
-  
+  border: solid ${remcalc(1)} ${colors.greyDark};
+
   ${breakpoints.smallOnly`
     display: block;
   `}
@@ -26,7 +27,7 @@ const StyledRow = styled.tr`
 
 const StyledTableItem = styled.td`
   padding: ${remcalc(24)};
-  
+
   ${breakpoints.smallOnly`
     display: block;
   `}

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

@@ -1,9 +1,10 @@
-const fns = require('../../shared/functions');
-const composers = require('../../shared/composers');
-
 const React = require('react');
 const Styled = require('styled-components');
 
+const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
+const constants = require('../../shared/constants');
+
 const {
   default: styled,
   css
@@ -17,19 +18,23 @@ const {
   remcalc
 } = fns;
 
+const {
+  colors
+} = constants;
+
 const StyledTableRow = styled.div`
   ${clearfix}
-  
+
   padding: ${remcalc(24)} 0;
-  border-bottom: solid 1px #d8d8d8;
-  
+  border-bottom: solid 1px ${colors.greyDark};
+
   & > .table-item {
     text-align: center;
-    
+
     ${props => {
       const width = 100 / props.itemCount;
       return css`
-        width: ${width}%;  
+        width: ${width}%;
       `;
     }}
   }

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

@@ -1,45 +1,30 @@
 const React = require('react');
 const Styled = require('styled-components');
 
+const constants = require('../../shared/constants');
+
 const {
   default: styled
 } = Styled;
 
+const {
+  colors
+} = constants;
+
 const StyledTableWrapper = styled.section`
-  border: solid 1px #d8d8d8
+  border: solid 1px ${colors.greyDark}
   font-family: 'LibreFranklin', sans-serif;
 	font-style: normal;
 `;
 
-// const StyledTableHead = styled.thead``;
-// const StyledTableBody = styled.tbody``;
-
-// const renderTable = ({
-//   hasHeader = false,
-//   hasBody = true,
-//   width = '100%'
-// }) => {
-//
-//   const tableBody = () => {
-//
-//     return (
-//       <StyledTableBody />
-//     )
-//   }
-//
-// }
-
 const Table = ({
   children,
   title,
-}) => {
-
-  return (
-    <StyledTableWrapper>
-      {children}
-    </StyledTableWrapper>
-  );
-};
+}) => (
+  <StyledTableWrapper>
+    {children}
+  </StyledTableWrapper>
+);
 
 Table.propTypes = {
   children: React.PropTypes.node,

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

@@ -61,7 +61,7 @@ const StyledRadio = styled.input`
 
 const StyledLabel = styled.label`
   background: transparent;
-  border: ${remcalc(1)} solid #D8D8D8;
+  border: ${remcalc(1)} solid ${colors.greyDark};
   display: inline-block;
   font-size: ${remcalc(20)};
   padding: ${remcalc('12 25')};

ui/src/components/tooltip/index.js

@@ -68,7 +68,7 @@ const StyledList = styled.ul`
   }
   &:before {
     border-color: rgba(216, 216, 216, 0);
-    border-bottom-color: #d8d8d8;
+    border-bottom-color: ${colors.greyDark};
     border-width: ${remcalc(12)};
     margin-left: ${remcalc(-12)};
   }

ui/src/shared/constants/colors.js

@@ -15,7 +15,8 @@ const base = {
   white: '#FFFFFF',
   grey:  '#f8f8f8',
   greyLight: '#e9e9e9',
-  greyDark: '#919191',
+  greyDark: '#d8d8d8',
+  greyDarker: '#919191',
   red: '#DA4B42',
   yellow: '#E4A800',
   green: '#00AF66',