fix(button,tab,textfield): make components inherit font-family

Author: arturbien

src/components/Button/Button.js

@@ -43,6 +43,7 @@ const commonButtonStyles = css`
   &:not(:disabled) {
     cursor: pointer;
   }
+  font-family: inherit;
 `;
 
 export const StyledButton = styled.button`

src/components/Tab/Tab.js

@@ -23,6 +23,7 @@ const StyledTab = styled.button`
   cursor: default;
   color: ${({ theme }) => theme.text};
   user-select: none;
+  font-family: inherit;
   &:focus:after,
   &:active:after {
     content: '';
@@ -57,7 +58,6 @@ const StyledTab = styled.button`
   }
 `;
 
-// TODO handle tabIndex
 const Tab = React.forwardRef(function Tab(props, ref) {
   const { value, onClick, selected, children, ...otherProps } = props;
 

src/components/TextField/TextField.js

@@ -3,7 +3,7 @@ import propTypes from 'prop-types';
 
 import styled, { css } from 'styled-components';
 import { createDisabledTextStyles, createFlatBoxStyles } from '../common';
-import { blockSizes, fontFamily } from '../common/system';
+import { blockSizes } from '../common/system';
 import Cutout from '../Cutout/Cutout';
 
 const sharedWrapperStyles = css`
@@ -39,7 +39,7 @@ const sharedInputStyles = css`
   background: none;
   font-size: 1rem;
   min-height: 27px;
-  font-family: ${fontFamily};
+  font-family: inherit;
   color: ${({ theme }) => theme.inputText};
   ${({ disabled, variant }) =>
     variant !== 'flat' && disabled && createDisabledTextStyles()}

src/components/common/system.js

@@ -1,9 +1,8 @@
 // TODO - implement styled-system
 
+// eslint-disable-next-line import/prefer-default-export
 export const blockSizes = {
   sm: '27px',
   md: '35px',
   lg: '43px'
 };
-
-export const fontFamily = 'sans-serif';