updating base and wrapping input in Base element in storybook

ui/src/components/base/index.js

@@ -7,7 +7,8 @@ const {
   forms,
   links,
   tables,
-  typography
+  typography,
+  colors
 } = constants;
 
 const {
@@ -36,7 +37,7 @@ module.exports = styled.div`
     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 1rem;
   line-height: 1.5;
-  color: #373A3C;
+  color: ${colors.fonts.regular};
   background-color: #FFFFFF;
 
   /**************************************************************************

ui/src/shared/constants/colors.js

@@ -48,7 +48,7 @@ const colors = {
   ...brandInactive,
   ...notifications,
   ...metrics,
-  ...fonts
+  fonts
 };
 
 module.exports = colors;

ui/stories/index.js

@@ -217,9 +217,12 @@ storiesOf('Radio', module)
 
 storiesOf('Input', module)
   .add('Default', () => (
+    <Base>
       <Input placeholder="I am the placeholder" />
+    </Base>
   ))
   .add('type=email', () => (
+    <Base>
       <Input
         label='Email Address'
         placeholder='Enter email'
@@ -227,6 +230,7 @@ storiesOf('Input', module)
       >
         <small>We&apos;ll never share your email with anyone else.</small>
       </Input>
+    </Base>
   ));
 
 storiesOf('Modal', module)