fix(theme): issue with font sizes in createTheme

packages/big-design-icons/src/base/index.ts

@@ -1,4 +1,4 @@
-import { remCalc, theme as defaultTheme, Colors, Spacing, ThemeInterface } from '@bigcommerce/big-design-theme';
+import { theme as defaultTheme, Colors, Spacing, ThemeInterface } from '@bigcommerce/big-design-theme';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -18,8 +18,8 @@ export function createStyledIcon(Icon: React.FC<Partial<IconProps>>) {
 
     ${({ size, theme }) =>
       size && {
-        height: typeof size === 'number' ? remCalc(size) : theme.spacing[size],
-        width: typeof size === 'number' ? remCalc(size) : theme.spacing[size],
+        height: typeof size === 'number' ? theme.helpers.remCalc(size) : theme.spacing[size],
+        width: typeof size === 'number' ? theme.helpers.remCalc(size) : theme.spacing[size],
       }};
   `;
 

packages/big-design-theme/src/helpers/helpers.ts

@@ -2,6 +2,12 @@ import { rem, stripUnit, transparentize } from 'polished';
 
 import { themeOptions } from '../options';
 
+export interface Helpers {
+  addValues(first: string, second: string): string;
+  createRGBA(color: string, alpha: number): string;
+  remCalc(value: string | number): string;
+}
+
 export const addValues = (first: string, second: string) => {
   const [firstValue, firstUnit] = stripUnit(first, true);
   const [secondValue, secondUnit] = stripUnit(second, true);

packages/big-design-theme/src/helpers/index.ts

@@ -1 +1,8 @@
+import { addValues, createRGBA, remCalc } from './helpers';
+
 export * from './helpers';
+export const createHelpers = () => ({
+  addValues,
+  createRGBA,
+  remCalc,
+});

packages/big-design-theme/src/index.ts

@@ -1,3 +1,4 @@
+import { createHelpers, Helpers } from './helpers';
 import { themeOptions, ThemeOptions } from './options';
 import { createBorder, createBorderRadius, Border, BorderRadius } from './system/border';
 import { breakpoints, breakpointValues, Breakpoints, BreakpointValues } from './system/breakpoints';
@@ -18,6 +19,7 @@ export interface ThemeInterface {
   breakpointValues: BreakpointValues;
   breakpoints: Breakpoints;
   colors: Colors;
+  helpers: Helpers;
   keyframes: typeof keyframes;
   lineHeight: LineHeight;
   shadow: Shadow;
@@ -35,6 +37,7 @@ export const createTheme = (customOptions: Partial<ThemeOptions> = {}): ThemeInt
     breakpointValues,
     breakpoints,
     colors,
+    helpers: createHelpers(),
     keyframes,
     lineHeight: createLineHeight(),
     shadow,

packages/big-design/package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@bigcommerce/big-design-icons": "^0.0.1",
+    "@bigcommerce/big-design-theme": "^0.0.1",
     "@types/hoist-non-react-statics": "^3.3.0",
     "downshift": "^3.2.7",
     "hoist-non-react-statics": "^3.3.0",
@@ -56,7 +57,6 @@
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
-    "@bigcommerce/big-design-theme": "^0.0.1",
     "@bigcommerce/configs": "^0.5.0",
     "@testing-library/jest-dom": "^4.0.0",
     "@testing-library/react": "^8.0.7",

packages/big-design/src/components/Form/Group/styled.tsx

@@ -1,4 +1,4 @@
-import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
 import { Flex } from '../../Flex';
@@ -17,7 +17,7 @@ const SharedGroupStyles = css`
   ${({ theme }) => theme.breakpoints.tablet} {
     ${StyledInputWrapper},
     ${StyledTextareaWrapper} {
-      max-width: ${remCalc(416)};
+      max-width: ${({ theme }) => theme.helpers.remCalc(416)};
     }
   }
 
@@ -38,20 +38,20 @@ export const StyledInlineGroup = styled.div<StyledProps>`
   ${SharedGroupStyles};
 
   ${({ theme }) => theme.breakpoints.tablet} {
-    ${({ childrenCount }) =>
+    ${({ childrenCount, theme }) =>
       childrenCount === 2 &&
       css`
-        grid-template-columns: repeat(2, ${remCalc(200)});
+        grid-template-columns: repeat(2, ${theme.helpers.remCalc(200)});
 
         ${StyledError} {
           grid-column: 1 / 3;
         }
       `}
 
-    ${({ childrenCount }) =>
+    ${({ childrenCount, theme }) =>
       childrenCount === 3 &&
       css`
-        grid-template-columns: repeat(3, ${remCalc(128)});
+        grid-template-columns: repeat(3, ${theme.helpers.remCalc(128)});
 
         ${StyledError} {
           grid-column: 1 / 4;

packages/big-design/src/components/List/Action/styled.tsx

@@ -1,4 +1,4 @@
-import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled from 'styled-components';
 
 import { ListActionProps } from './Action';
@@ -7,7 +7,7 @@ export const StyledListAction = styled.li<ListActionProps>`
   border-top: 1px solid ${({ theme }) => theme.colors.secondary30};
   color: ${({ actionType, theme }) => (actionType === 'normal' ? theme.colors.primary : theme.colors.danger)};
   margin-top: ${({ theme }) => theme.spacing.xSmall};
-  min-width: ${remCalc(256)};
+  min-width: ${({ theme }) => theme.helpers.remCalc(256)};
   outline: none;
   overflow: hidden;
   padding: ${({ theme }) => theme.spacing.xSmall} 0 0;
@@ -24,7 +24,7 @@ export const StyledListAction = styled.li<ListActionProps>`
 export const Wrapper = styled.div`
   cursor: pointer;
   display: flex;
-  height: ${remCalc(36)};
+  height: ${({ theme }) => theme.helpers.remCalc(36)};
   padding: 0 ${({ theme }) => theme.spacing.medium};
   width: 100%;
 `;

packages/big-design/src/components/List/Item/styled.tsx

@@ -1,4 +1,4 @@
-import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
 import { ListItemProps } from './Item';
@@ -8,9 +8,9 @@ export const StyledListItem = styled.li<ListItemProps>`
   box-sizing: border-box;
   cursor: default;
   display: flex;
-  height: ${remCalc(36)};
+  height: ${({ theme }) => theme.helpers.remCalc(36)};
   justify-content: space-between;
-  min-width: ${remCalc(256)};
+  min-width: ${({ theme }) => theme.helpers.remCalc(256)};
   outline: none;
   padding: 0 ${({ theme }) => theme.spacing.medium};
 

packages/big-design/src/components/List/styled.tsx

@@ -1,4 +1,4 @@
-import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled from 'styled-components';
 
 interface StyledList {
@@ -12,7 +12,7 @@ export const StyledList = styled.ul<StyledList>`
   color: ${({ theme }) => theme.colors.secondary70};
   display: inline-block;
   margin: 0;
-  max-height: ${({ maxHeight }) => (maxHeight ? remCalc(maxHeight) : '')};
+  max-height: ${({ theme, maxHeight }) => (maxHeight ? theme.helpers.remCalc(maxHeight) : '')};
   outline: none;
   overflow-y: scroll;
   padding: ${({ theme }) => theme.spacing.xSmall} 0;

packages/big-design/src/components/ProgressCircle/styled.tsx

@@ -1,23 +1,23 @@
-import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css, keyframes } from 'styled-components';
 
 import { CIRCLE_CIRCUMFERENCES, CIRCLE_DIMENSIONS, CIRCLE_STROKE_WIDTHS } from './constants';
 import { ProgressCircleProps } from './ProgressCircle';
 
 export const StyledProgressCircle = styled.svg<ProgressCircleProps>`
-  ${({ size }) => css`
-    height: ${remCalc(getDimensions(size))};
-    width: ${remCalc(getDimensions(size))};
+  ${({ size, theme }) => css`
+    height: ${theme.helpers.remCalc(getDimensions(size))};
+    width: ${theme.helpers.remCalc(getDimensions(size))};
   `}
 `;
 
-export const StyledCircle = styled.circle.attrs(({ size }: ProgressCircleProps) => ({
-  cx: remCalc(getDimensions(size) / 2),
-  cy: remCalc(getDimensions(size) / 2),
-  r: remCalc(getDimensions(size) / 2 - getStrokeWidth(size) / 2),
+export const StyledCircle = styled.circle.attrs(({ size, theme }: any) => ({
+  cx: theme.helpers.remCalc(getDimensions(size) / 2),
+  cy: theme.helpers.remCalc(getDimensions(size) / 2),
+  r: theme.helpers.remCalc(getDimensions(size) / 2 - getStrokeWidth(size) / 2),
 }))<ProgressCircleProps>`
   fill: transparent;
-  stroke-width: ${({ size }) => remCalc(getStrokeWidth(size))};
+  stroke-width: ${({ size, theme }) => theme.helpers.remCalc(getStrokeWidth(size))};
   stroke: ${({ theme }) => theme.colors.secondary20};
 `;
 
@@ -83,6 +83,7 @@ function fillLength(percent: number, size: ProgressCircleProps['size'] = 'medium
   return CIRCLE_CIRCUMFERENCES[size] - (percent / 100) * CIRCLE_CIRCUMFERENCES[size];
 }
 
+StyledProgressCircle.defaultProps = { theme: defaultTheme };
 StyledCircle.defaultProps = { theme: defaultTheme };
 StyledCircleFiller.defaultProps = { theme: defaultTheme };
 StyledText.defaultProps = { theme: defaultTheme };

packages/big-design/src/components/Textarea/styled.tsx

@@ -1,4 +1,4 @@
-import { addValues, remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme';
+import { addValues, theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
 import { TextareaProps } from './Textarea';
@@ -15,7 +15,7 @@ export const StyledTextarea = styled.textarea<TextareaProps>`
   box-sizing: border-box;
   color: ${({ theme }) => theme.colors.secondary70};
   line-height: ${({ theme }) => theme.lineHeight.medium};
-  max-height: ${remCalc(224)};
+  max-height: ${({ theme }) => theme.helpers.remCalc(224)};
   padding: ${({ theme }) => `${theme.spacing.xxSmall} ${theme.spacing.small}`};
   width: 100%;
 

packages/big-design/src/components/Tooltip/styled.tsx

@@ -1,4 +1,4 @@
-import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled from 'styled-components';
 
 export const StyledTooltipTrigger = styled.div`
@@ -11,7 +11,7 @@ export const StyledTooltip = styled.div`
   color: ${({ theme }) => theme.colors.white};
   background-color: ${({ theme }) => theme.colors.secondary70};
   font-size: ${({ theme }) => theme.typography.fontSize.medium};
-  max-width: ${remCalc(300)};
+  max-width: ${({ theme }) => theme.helpers.remCalc(300)};
   padding: ${({ theme }) => `${theme.spacing.small} ${theme.spacing.medium}`};
 `;
 

packages/docs/pages/Colors/ColorsPage.tsx

@@ -1,5 +1,5 @@
 import { Box, Flex, H0, H2, Text } from '@bigcommerce/big-design';
-import { remCalc, ThemeInterface } from '@bigcommerce/big-design-theme';
+import { ThemeInterface } from '@bigcommerce/big-design-theme';
 import React, { useContext } from 'react';
 import styled, { ThemeContext } from 'styled-components';
 
@@ -10,8 +10,8 @@ type Colors = ThemeInterface['colors'];
 type Color = keyof Colors;
 
 const StyledColor = styled(Box)`
-  height: ${remCalc(30)};
-  width: ${remCalc(300)};
+  height: ${({ theme }) => theme.helpers.remCalc(30)};
+  width: ${({ theme }) => theme.helpers.remCalc(300)};
 `;
 
 export default () => {