fix(style): use 'rem' for font sizes

Author: arturbien

src/components/Button/Button.js

@@ -13,7 +13,7 @@ import {
   createHatchedBackground,
   focusOutline
 } from '../common';
-import { blockSizes, fontSizes, padding } from '../common/system';
+import { blockSizes } from '../common/system';
 
 const commonButtonStyles = css`
   position: relative;
@@ -23,8 +23,8 @@ const commonButtonStyles = css`
   height: ${({ size }) => blockSizes[size]};
   width: ${({ fullWidth, square, size }) =>
     fullWidth ? '100%' : square ? blockSizes[size] : 'auto'};
-  padding: ${({ square }) => (square ? 0 : `0 calc(${padding.sm} + 2px)`)};
-  font-size: ${fontSizes.md};
+  padding: ${({ square }) => (square ? 0 : `0 10px`)};
+  font-size: 1rem;
   user-select: none;
   &:active {
     padding-top: ${({ isDisabled }) => !isDisabled && '2px'};

src/components/Cutout/Cutout.js

@@ -7,7 +7,7 @@ const StyledCutout = styled.div`
   position: relative;
   box-sizing: border-box;
   padding: 2px;
-
+  font-size: 1rem;
   border-style: solid;
   border-width: 2px;
   border-left-color: ${({ theme }) => theme.borderDark};

src/components/Fieldset/Fieldset.js

@@ -3,16 +3,15 @@ import propTypes from 'prop-types';
 
 import styled, { css } from 'styled-components';
 import { createDisabledTextStyles } from '../common';
-import { fontSizes, padding } from '../common/system';
 
 const StyledFieldset = styled.fieldset`
   position: relative;
   border: 2px solid
     ${({ theme, variant }) =>
       variant === 'flat' ? theme.flatDark : theme.borderLightest};
-  padding: ${padding.md};
-  margin-top: ${padding.sm};
-  font-size: ${fontSizes.md};
+  padding: 16px;
+  margin-top: 8px;
+  font-size: 1rem;
   color: ${({ theme }) => theme.text};
   ${({ variant }) =>
     variant !== 'flat' &&
@@ -26,11 +25,11 @@ const StyledLegend = styled.legend`
   display: flex;
   position: absolute;
   top: 0;
-  left: ${padding.sm};
+  left: 8px;
   transform: translateY(calc(-50% - 2px));
-  padding: 0 ${padding.sm};
+  padding: 0 8px;
 
-  font-size: ${fontSizes.md};
+  font-size: 1rem;
   background: ${({ theme, variant }) =>
     variant === 'flat' ? theme.canvas : theme.material};
 `;

src/components/ListItem/ListItem.js

@@ -3,7 +3,7 @@ import propTypes from 'prop-types';
 
 import styled from 'styled-components';
 import { createDisabledTextStyles } from '../common';
-import { padding, blockSizes } from '../common/system';
+import { blockSizes } from '../common/system';
 
 export const StyledListItem = styled.li`
   box-sizing: border-box;
@@ -13,8 +13,8 @@ export const StyledListItem = styled.li`
   position: relative;
   height: ${props => blockSizes[props.size]};
   width: ${props => (props.square ? blockSizes[props.size] : 'auto')};
-  padding: 0 ${padding.sm};
-
+  padding: 0 8px;
+  font-size: 1rem;
   white-space: nowrap;
   justify-content: ${props =>
     props.square ? 'space-around' : 'space-between'};

src/components/Select/Select.js

@@ -5,7 +5,7 @@ import styled, { css } from 'styled-components';
 import Button from '../Button/Button';
 
 import { shadow as commonShadow, createFlatBoxStyles } from '../common';
-import { blockSizes, fontSizes, padding } from '../common/system';
+import { blockSizes } from '../common/system';
 import Cutout from '../Cutout/Cutout';
 
 const sharedWrapperStyles = css`
@@ -15,7 +15,7 @@ const sharedWrapperStyles = css`
   justify-content: space-between;
   background: ${({ theme }) => theme.canvas};
   color: ${({ theme }) => theme.inputText};
-  font-size: ${fontSizes.md};
+  font-size: 1rem;
 `;
 const StyledSelectWrapper = styled(Cutout)`
   ${sharedWrapperStyles}
@@ -26,7 +26,7 @@ const StyledFlatSelectWrapper = styled.div`
 `;
 const StyledSelectContent = styled.div`
   width: 100%;
-  padding-left: ${padding.sm};
+  padding-left: 8px;
   overflow: hidden;
   white-space: nowrap;
 `;
@@ -71,7 +71,7 @@ const StyledDropdownIcon = styled.span`
 const StyledDropdownList = styled.ul`
   box-sizing: border-box;
 
-  font-size: ${fontSizes.md};
+  font-size: 1rem;
   position: absolute;
   transform: translateY(100%);
   left: 0px;
@@ -99,11 +99,11 @@ const StyledDropdownListItem = styled.li`
   box-sizing: border-box;
 
   width: 100%;
-  padding-left: ${padding.sm};
+  padding-left: 8px;
 
   height: calc(${blockSizes.md} - 4px);
   line-height: calc(${blockSizes.md} - 4px);
-  font-size: ${fontSizes.md};
+  font-size: 1rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/components/SwitchBase/SwitchBase.js

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components';
 import { createDisabledTextStyles, focusOutline } from '../common';
 
-import { padding, fontSizes } from '../common/system';
 import { StyledListItem } from '../ListItem/ListItem';
 
 export const size = 20;
@@ -20,13 +19,13 @@ export const StyledLabel = styled.label`
   display: inline-flex;
   align-items: center;
   position: relative;
-  margin: ${padding.sm} 0;
+  margin: 8px 0;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  font-size: ${fontSizes.md};
+  font-size: 1rem;
   color: ${({ theme }) => theme.text};
   ${props => props.isDisabled && createDisabledTextStyles()}
 

src/components/Tab/Tab.js

@@ -3,7 +3,7 @@ import propTypes from 'prop-types';
 
 import styled from 'styled-components';
 import { createBorderStyles, createBoxStyles, focusOutline } from '../common';
-import { blockSizes, padding } from '../common/system';
+import { blockSizes } from '../common/system';
 
 const StyledTab = styled.button`
   ${createBoxStyles()}
@@ -15,7 +15,7 @@ const StyledTab = styled.button`
   font-size: 1rem;
   height: ${blockSizes.md};
   line-height: ${blockSizes.md};
-  padding: 0 ${padding.sm};
+  padding: 0 8px;
   border-bottom: none;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
@@ -41,7 +41,7 @@ const StyledTab = styled.button`
     height: calc(${blockSizes.md} + 4px);
     top: -3px;
     margin-bottom: -6px;
-    padding: 0 calc(${padding.sm} + 8px);
+    padding: 0 16px;
     margin-left: -8px;
     margin-right: -8px;
   `}

src/components/TabBody/TabBody.js

@@ -3,15 +3,15 @@ import propTypes from 'prop-types';
 
 import styled from 'styled-components';
 import { createBorderStyles, createBoxStyles } from '../common';
-import { padding } from '../common/system';
 
 const StyledTabBody = styled.div`
   ${createBoxStyles()}
   ${createBorderStyles()}
   position: relative;
   display: block;
   height: 100%;
-  padding: ${padding.md};
+  padding: 16px;
+  font-size: 1rem;
 `;
 const TabBody = React.forwardRef(function TabBody(props, ref) {
   const { children, ...otherProps } = props;

src/components/Table/Table.js

@@ -9,6 +9,7 @@ const StyledTable = styled.table`
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
+  font-size: 1rem;
 `;
 
 const StyledCutout = styled(Cutout)`

src/components/TableDataCell/TableDataCell.js

@@ -2,10 +2,9 @@ import React from 'react';
 import propTypes from 'prop-types';
 
 import styled from 'styled-components';
-import { padding } from '../common/system';
 
 const StyledTd = styled.td`
-  padding: 0 ${padding.sm};
+  padding: 0 8px;
 `;
 const TableDataCell = React.forwardRef(function TableDataCell(props, ref) {
   const { children, ...otherProps } = props;

src/components/TableHeadCell/TableHeadCell.js

@@ -3,11 +3,10 @@ import propTypes from 'prop-types';
 
 import styled, { css } from 'styled-components';
 import { createBorderStyles, createDisabledTextStyles } from '../common';
-import { padding } from '../common/system';
 
 const StyledHeadCell = styled.th`
 position: relative;
-padding: 0 ${padding.sm};
+padding: 0 8px;
 display: table-cell;
 vertical-align: inherit;
 background: ${({ theme }) => theme.material};

src/components/TextArea/TextArea.js

@@ -3,7 +3,7 @@ import propTypes from 'prop-types';
 
 import styled from 'styled-components';
 import { createDisabledTextStyles, createFlatBoxStyles } from '../common';
-import { blockSizes, fontSizes, padding, fontFamily } from '../common/system';
+import { blockSizes, fontFamily } from '../common/system';
 import Cutout from '../Cutout/Cutout';
 
 const StyledTextAreaWrapper = styled(Cutout)`
@@ -22,12 +22,12 @@ const StyledTextArea = styled.textarea`
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  padding: ${padding.sm};
+  padding: 8px;
   outline: none;
   border: none;
   background: none;
   resize: none;
-  font-size: ${fontSizes.md};
+  font-size: 1rem;
   font-family: ${fontFamily};
 
   ${({ disabled, variant }) =>

src/components/TextField/TextField.js

@@ -3,7 +3,7 @@ import propTypes from 'prop-types';
 
 import styled from 'styled-components';
 import { createDisabledTextStyles, createFlatBoxStyles } from '../common';
-import { blockSizes, fontSizes, padding, fontFamily } from '../common/system';
+import { blockSizes, fontFamily } from '../common/system';
 import Cutout from '../Cutout/Cutout';
 
 const StyledWrapper = styled(Cutout)`
@@ -20,11 +20,11 @@ export const StyledTextInput = styled.input`
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: 0 ${padding.sm};
+  padding: 0 8px;
   outline: none;
   border: none;
   background: none;
-  font-size: ${fontSizes.md};
+  font-size: 1rem;
   font-family: ${fontFamily};
   color: ${({ theme }) => theme.inputText};
   ${({ disabled, variant }) =>

src/components/Tooltip/Tooltip.js

@@ -16,6 +16,7 @@ const Tip = styled.span`
   background: ${({ theme }) => theme.tooltip};
   box-shadow: ${shadow};
   text-align: center;
+  font-size: 1rem;
 `;
 
 const Wrapper = styled.div`

src/components/Window/Window.js

@@ -7,6 +7,7 @@ import { createBorderStyles, createBoxStyles } from '../common';
 const StyledWindow = styled.div`
   position: relative;
   padding: 4px;
+  font-size: 1rem;
   ${createBorderStyles({ windowBorders: true })}
   ${createBoxStyles()}
 `;

src/components/WindowContent/WindowContent.js

@@ -2,10 +2,9 @@ import React from 'react';
 import propTypes from 'prop-types';
 
 import styled from 'styled-components';
-import { padding } from '../common/system';
 
 const StyledWindowContent = styled.div`
-  padding: ${padding.md};
+  padding: 16px;
   margin-right: 2px;
 `;
 

src/components/common/system.js

@@ -1,20 +1,9 @@
 // TODO - implement styled-system
 
-export const fontSizes = {
-  sm: '15px',
-  md: '16px',
-  lg: '17px'
-};
-
 export const blockSizes = {
   sm: '27px',
   md: '35px',
   lg: '43px'
 };
-export const padding = {
-  sm: '0.5rem',
-  md: '1rem',
-  lg: '1.25rem'
-};
 
 export const fontFamily = 'sans-serif';