Replacing rem utility with fontSizeUtility and pxToRem (#44)

Added fontSizeUtility.  Removed rem util.  Added .vscode support for testing.

Author: seankeating

.vscode/launch.json

@@ -0,0 +1,19 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Jest Tests",
+      "type": "node",
+      "request": "launch",
+      "protocol": "inspector",
+      "port": 9230,
+      "runtimeArgs": [
+        "--inspect-brk=9230",
+        "${workspaceRoot}/node_modules/jest/bin/jest.js",
+        "--runInBand"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    }
+  ]
+}

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -6,7 +6,7 @@ import { renderToStaticMarkup } from 'react-dom/server'
 import { html } from 'js-beautify'
 import copyToClipboard from 'copy-to-clipboard'
 import { Divider, Form, Grid, Menu, Segment, Visibility } from 'semantic-ui-react'
-import { rem } from 'src/lib'
+import { pxToRem } from 'src/lib'
 import evalTypeScript from 'docs/src/utils/evalTypeScript'
 import { Provider } from 'stardust'
 
@@ -25,18 +25,18 @@ import ComponentExampleTitle from './ComponentExampleTitle'
 
 const childrenStyle = {
   paddingTop: 0,
-  maxWidth: rem(50),
+  maxWidth: pxToRem(500),
 }
 
 const errorStyle = {
   padding: '1em',
-  fontSize: rem(0.9),
+  fontSize: pxToRem(9),
   color: '#a33',
   background: '#fff2f2',
 }
 
 const controlsWrapperStyle = {
-  minHeight: rem(3),
+  minHeight: pxToRem(30),
 }
 
 /**

docs/src/components/Knobs/Knobs.tsx

@@ -1,5 +1,5 @@
 import { createComponent } from 'react-fela'
-import { rem } from 'src/lib'
+import { pxToRem } from 'src/lib'
 
 import KnobsField from './KnobsField'
 import KnobsControl from './KnobsControl'
@@ -11,7 +11,7 @@ import KnobsScalar from './KnobsScalar'
 
 const Knobs: any = createComponent(
   () => ({
-    padding: rem(1),
+    padding: pxToRem(10),
     background: '#eee',
   }),
   'div',

docs/src/components/Knobs/KnobsControl.tsx

@@ -1,9 +1,9 @@
 import { createComponent } from 'react-fela'
-import { rem } from 'src/lib'
+import { pxToRem } from 'src/lib'
 
 const KnobsControl = createComponent(
   () => ({
-    padding: `0 ${rem(1)}`,
+    padding: `0 ${pxToRem(10)}`,
   }),
   'span',
 )

docs/src/components/Knobs/KnobsField.tsx

@@ -1,9 +1,9 @@
 import { createComponent } from 'react-fela'
-import { rem } from 'src/lib'
+import { pxToRem } from 'src/lib'
 
 const KnobsField = createComponent(() => ({
-  padding: `${rem(0.5)} 0`,
-  width: rem(30),
+  padding: `${pxToRem(5)} 0`,
+  width: pxToRem(300),
 }))
 
 export default KnobsField

docs/src/components/Knobs/KnobsValue.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { createComponent } from 'react-fela'
-import { rem } from 'src/lib'
+import { pxToRem } from 'src/lib'
 
 const KnobsValue = createComponent(
   () => ({
-    padding: `0 ${rem(0.5)}`,
+    padding: `0 ${pxToRem(5)}`,
   }),
   props => (
     <span className={props.className}>

docs/src/examples/components/Layout/Variations/LayoutExampleGap.knobs.tsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { rem } from 'src/lib'
+import { pxToRem } from 'src/lib'
 
 import Knobs from 'docs/src/components/Knobs/Knobs'
 
@@ -22,7 +22,7 @@ LayoutExampleGapKnobs.propTypes = {
 }
 
 LayoutExampleGapKnobs.defaultProps = {
-  gap: rem(5),
+  gap: pxToRem(50),
   vertical: false,
 }
 

src/components/Button/buttonVariables.ts

@@ -1,4 +1,4 @@
-import { rem } from '../../lib'
+import { pxToRem } from '../../lib'
 
 export interface IButtonVariables {
   backgroundColor: string
@@ -19,7 +19,7 @@ export default (siteVars: any): IButtonVariables => {
   return {
     backgroundColor: siteVars.gray08,
     backgroundColorHover: siteVars.gray06,
-    circularRadius: rem(99),
+    circularRadius: pxToRem(999),
     circularWidth: '32px',
     typePrimaryColor: siteVars.white,
     typePrimaryBackgroundColor: siteVars.brand,

src/components/Divider/dividerRules.ts

@@ -1,39 +1,39 @@
-import { rem, childrenExist } from '../../lib'
+import { childrenExist, pxToRem } from '../../lib'
 
 const dividerBorderRule = size => ({
-  height: rem(0.1 + size * 0.1),
+  height: pxToRem(1 + size),
   background: 'lightgray',
 })
 
 const beforeAndAfter = (size, radius) => ({
   content: '""',
   flex: 1,
-  borderRadius: rem(radius),
+  borderRadius: pxToRem(radius),
   ...dividerBorderRule(size),
 })
 
 export default ({ children, size, variables }) => ({
   root: {
-    marginTop: rem(0.1 + size * 0.75),
-    marginBottom: rem(0.1 + size * 0.75),
+    marginTop: pxToRem(10 + size * 7.5),
+    marginBottom: pxToRem(10 + size * 7.5),
     ...(childrenExist(children)
       ? {
           display: 'flex',
           alignItems: 'center',
           textAlign: 'center',
           lineHeight: 0,
-          fontSize: rem(1.4 + size * 0.1),
+          fontSize: pxToRem(14 + size),
           ':before': {
             ...beforeAndAfter(size, variables.borderRadius),
-            marginRight: rem(1 + size * 0.2),
+            marginRight: pxToRem(10 + size * 2),
           },
           ':after': {
             ...beforeAndAfter(size, variables.borderRadius),
-            marginLeft: rem(1 + size * 0.2),
+            marginLeft: pxToRem(10 + size * 2),
           },
         }
       : {
-          borderRadius: rem(variables.borderRadius),
+          borderRadius: pxToRem(variables.borderRadius),
           ...dividerBorderRule(size),
         }),
   },

src/components/Divider/dividerVariables.ts

@@ -1,7 +1,7 @@
 export default () => {
   const vars: any = {}
 
-  vars.borderRadius = 1
+  vars.borderRadius = 10
 
   return vars
 }