feat(component): use new theme package

BREAKING CHANGE: theme now lives in its own package
`@bigcommerce/big-design-theme` if you are using `createTheme`,
`addValues`, `defaultTheme`, `remCalc`, `ThemeInterface` you will now
need to import it from the new package.

packages/big-design/package.json

@@ -54,6 +54,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
     "@bigcommerce/configs": "^0.5.0",
+    "@bigcommerce/big-design-theme": "^0.0.1",
     "@svgr/cli": "^4.3.2",
     "@testing-library/jest-dom": "^4.0.0",
     "@testing-library/react": "^8.0.5",

packages/big-design/src/components/Box/Box.tsx

@@ -1,9 +1,7 @@
+import { Border, BorderRadius, Colors, Elevation } from '@bigcommerce/big-design-theme';
 import React from 'react';
 
 import { MarginProps, PaddingProps } from '../../mixins';
-import { Border, BorderRadius } from '../../theme/system/border';
-import { Colors } from '../../theme/system/colors';
-import { Elevation } from '../../theme/system/elevation';
 
 import { StyledBox } from './styled';
 

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

@@ -1,7 +1,7 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
 import { withMargins, withPaddings } from '../../mixins';
-import { defaultTheme } from '../../theme';
 
 import { BoxProps } from './Box';
 

packages/big-design/src/components/Button/Button.tsx

@@ -1,7 +1,7 @@
+import { ThemeInterface } from '@bigcommerce/big-design-theme';
 import React, { Ref } from 'react';
 
 import { MarginProps } from '../../mixins';
-import { ThemeInterface } from '../../theme';
 import { Spinner } from '../Spinner';
 
 import { ContentWrapper, StyledButton } from './styled';

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

@@ -1,8 +1,7 @@
+import { addValues, theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
 import { withMargins, MarginProps } from '../../mixins';
-import { defaultTheme } from '../../theme';
-import { addValues } from '../../theme/helpers/helpers';
 
 import { ButtonProps } from './index';
 

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

@@ -1,7 +1,7 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import { hideVisually } from 'polished';
 import styled, { DefaultTheme, StyledComponent } from 'styled-components';
 
-import { defaultTheme } from '../../theme';
 import { StyleableText } from '../Typography/private';
 
 interface StyledCheckboxProps {

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

@@ -1,6 +1,6 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled from 'styled-components';
 
-import { defaultTheme } from '../../../theme';
 import { Box } from '../../Box';
 
 import { FlexItemProps } from './Item';

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

@@ -1,6 +1,6 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled from 'styled-components';
 
-import { defaultTheme } from '../../theme';
 import { Box } from '../Box';
 
 import { FlexProps } from './Flex';

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

@@ -1,6 +1,6 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled from 'styled-components';
 
-import { defaultTheme } from '../../../theme';
 import { StyleableSmall } from '../../Typography/private';
 
 export const StyledError = styled(StyleableSmall)`

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

@@ -1,6 +1,6 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { DefaultTheme, StyledComponent } from 'styled-components';
 
-import { defaultTheme } from '../../../theme';
 import { StyleableH3, StyleableSmall } from '../../Typography/private';
 
 export const StyledFieldset = styled.fieldset`

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

@@ -1,6 +1,6 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { DefaultTheme, StyledComponent } from 'styled-components';
 
-import { defaultTheme } from '../../../theme';
 import { StyleableH4 } from '../../Typography/private';
 
 import { LabelProps } from './Label';

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

@@ -1,6 +1,6 @@
+import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
-import { defaultTheme, remCalc } from '../../../theme';
 import { StyledInputWrapper } from '../../Input/styled';
 import { StyledTextareaWrapper } from '../../Textarea/styled';
 

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

@@ -1,7 +1,6 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled from 'styled-components';
 
-import { defaultTheme } from '../../theme';
-
 export const StyledForm = styled.form``;
 
 StyledForm.defaultProps = { theme: defaultTheme };

packages/big-design/src/components/GlobalStyle/GlobalStyle.tsx

@@ -1,8 +1,7 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import { normalize } from 'polished';
 import { createGlobalStyle } from 'styled-components';
 
-import { defaultTheme } from '../../theme';
-
 export const GlobalStyle = createGlobalStyle`
   ${normalize()}
 

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

@@ -1,6 +1,6 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled from 'styled-components';
 
-import { defaultTheme } from '../../theme';
 import { Box } from '../Box';
 
 import { GridProps } from './Grid';

packages/big-design/src/components/Icons/Icon.tsx

@@ -1,8 +1,6 @@
+import { remCalc, theme as defaultTheme, Spacing, ThemeInterface } from '@bigcommerce/big-design-theme';
 import React from 'react';
 
-import { defaultTheme, remCalc, ThemeInterface } from '../../theme';
-import { Spacing } from '../../theme/system/spacing';
-
 export interface IconProps extends React.SVGProps<SVGSVGElement> {
   size: keyof Spacing | number;
   theme?: ThemeInterface;

packages/big-design/src/components/Input/Input.tsx

@@ -1,7 +1,7 @@
+import { ThemeInterface } from '@bigcommerce/big-design-theme';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import React, { Ref } from 'react';
 
-import { ThemeInterface } from '../../theme';
 import { uniqueId } from '../../utils';
 import { Form } from '../Form';
 import { ErrorIcon } from '../Icons';

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

@@ -1,8 +1,6 @@
+import { addValues, theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
-import { defaultTheme } from '../../theme';
-import { addValues } from '../../theme/helpers/helpers';
-
 import { InputProps } from './Input';
 
 interface StyledIconWrapperProps {

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

@@ -1,7 +1,7 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled from 'styled-components';
 
 import { withMargins } from '../../mixins';
-import { defaultTheme } from '../../theme';
 
 import { LinkProps } from './Link';
 

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

@@ -1,7 +1,6 @@
+import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled from 'styled-components';
 
-import { defaultTheme, remCalc } from '../../../theme';
-
 import { ListActionProps } from './Action';
 
 export const StyledListAction = styled.li<ListActionProps>`

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

@@ -1,6 +1,6 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import React from 'react';
 
-import { defaultTheme } from '../../../theme';
 import { CheckIcon } from '../../Icons';
 
 import { StyledListItem } from './styled';

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

@@ -1,7 +1,6 @@
+import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
-import { defaultTheme, remCalc } from '../../../theme';
-
 import { ListItemProps } from './Item';
 
 export const StyledListItem = styled.li<ListItemProps>`

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

@@ -1,8 +1,7 @@
+import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import { hideVisually } from 'polished';
 import styled, { css } from 'styled-components';
 
-import { defaultTheme, remCalc } from './../../theme';
-
 interface StyledList {
   isOpen?: boolean;
   maxHeight?: number;

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

@@ -1,7 +1,7 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
 import { withMargins } from '../../mixins';
-import { defaultTheme } from '../../theme';
 
 import { LozengeProps } from './Lozenge';
 

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

@@ -1,7 +1,7 @@
+import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import { rgba } from 'polished';
 import styled, { css } from 'styled-components';
 
-import { defaultTheme, remCalc } from '../../theme';
 import { Flex } from '../Flex';
 
 import { ModalProps } from './Modal';

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

@@ -1,6 +1,6 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled from 'styled-components';
 
-import { defaultTheme } from '../../theme';
 import { Box } from '../Box';
 
 import { PanelProps } from './Panel';

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

@@ -1,7 +1,6 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
-import { defaultTheme } from '../../theme';
-
 import { ProgressBarProps } from './ProgressBar';
 
 export const StyledProgressBar = styled.div`

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

@@ -1,6 +1,6 @@
+import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css, keyframes } from 'styled-components';
 
-import { defaultTheme, remCalc } from '../../theme';
 import { ErrorIcon, SuccessIcon } from '../Icons';
 
 import { CIRCLE_CIRCUMFERENCES, CIRCLE_DIMENSIONS, CIRCLE_STROKE_WIDTHS } from './constants';

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

@@ -1,7 +1,7 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import { hideVisually } from 'polished';
 import styled, { css, DefaultTheme, StyledComponent } from 'styled-components';
 
-import { defaultTheme } from '../../theme';
 import { StyleableText } from '../Typography/private';
 
 interface StyledRadioProps {

packages/big-design/src/components/Spinner/Spinner.tsx

@@ -1,6 +1,6 @@
+import { ThemeInterface } from '@bigcommerce/big-design-theme';
 import React from 'react';
 
-import { ThemeInterface } from '../../theme';
 import { IconProps } from '../Icons/Icon';
 
 import { StyledSpinner, StyledSpinnerWrapper } from './styled';

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

@@ -1,6 +1,6 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
-import { defaultTheme } from '../../theme';
 import { LoadingIcon } from '../Icons';
 
 import { SpinnerWrapperProps } from './Spinner';

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

@@ -1,6 +1,6 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
-import { defaultTheme } from '../../theme';
 import { StyleableButton } from '../Button/private';
 
 import { TabProps } from './Tabs';

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

@@ -1,7 +1,7 @@
+import { ThemeInterface } from '@bigcommerce/big-design-theme';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import React, { Ref } from 'react';
 
-import { ThemeInterface } from '../../theme';
 import { uniqueId } from '../../utils';
 import { Form } from '../Form';
 import { Small } from '../Typography';

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

@@ -1,8 +1,6 @@
+import { addValues, remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
-import { defaultTheme } from '../../theme';
-import { addValues, remCalc } from '../../theme/helpers/helpers';
-
 import { TextareaProps } from './Textarea';
 
 export const StyledTextareaWrapper = styled.span<TextareaProps>`

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

@@ -1,7 +1,6 @@
+import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled from 'styled-components';
 
-import { defaultTheme, remCalc } from '../../theme';
-
 export const StyledTooltipTrigger = styled.div`
   display: inline-block;
 `;

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

@@ -1,8 +1,8 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import { ellipsis } from 'polished';
 import styled, { css } from 'styled-components';
 
 import { withMargins } from '../../mixins';
-import { defaultTheme } from '../../theme';
 
 import { HeadingProps, SmallProps, TextProps, TypographyProps } from './Typography';
 

packages/big-design/src/index.ts

@@ -1,2 +1 @@
 export * from './components';
-export * from './theme';

packages/big-design/src/mixins/margins/margins.tsx

@@ -1,7 +1,6 @@
+import { Breakpoints, Spacing } from '@bigcommerce/big-design-theme';
 import { css } from 'styled-components';
 
-import { Breakpoints } from '../../theme/system/breakpoints';
-import { Spacing } from '../../theme/system/spacing';
 import { getSpacingStyles } from '../spacings';
 
 type SingleMarginProp = keyof Spacing;

packages/big-design/src/mixins/margins/spec.tsx

@@ -1,10 +1,9 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import { render } from '@testing-library/react';
 import 'jest-styled-components';
 import React from 'react';
 import styled from 'styled-components';
 
-import { defaultTheme } from '../../theme';
-
 import { withMargins, MarginProps } from './margins';
 
 const TestComponent = styled.div<MarginProps>`

packages/big-design/src/mixins/paddings/paddings.tsx

@@ -1,7 +1,6 @@
+import { Breakpoints, Spacing } from '@bigcommerce/big-design-theme';
 import { css } from 'styled-components';
 
-import { Breakpoints } from '../../theme/system/breakpoints';
-import { Spacing } from '../../theme/system/spacing';
 import { getSpacingStyles } from '../spacings';
 
 type SinglePaddingProp = keyof Spacing;

packages/big-design/src/mixins/paddings/spec.tsx

@@ -1,10 +1,9 @@
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import { render } from '@testing-library/react';
 import 'jest-styled-components';
 import React from 'react';
 import styled from 'styled-components';
 
-import { defaultTheme } from '../../theme';
-
 import { withPaddings, PaddingProps } from './paddings';
 
 const TestComponent = styled.div<PaddingProps>`

packages/big-design/src/mixins/spacings/spacings.ts

@@ -1,9 +1,6 @@
+import { breakpointsOrder, Breakpoints, Spacing, ThemeInterface } from '@bigcommerce/big-design-theme';
 import { css } from 'styled-components';
 
-import { ThemeInterface } from '../../theme';
-import { breakpointsOrder, Breakpoints } from '../../theme/system/breakpoints';
-import { Spacing } from '../../theme/system/spacing';
-
 type SingleSpacingProp = keyof Spacing;
 type ResponsiveSpacingProp = { [key in keyof Breakpoints]?: keyof Spacing };
 type SpacingProp = SingleSpacingProp | ResponsiveSpacingProp;

packages/big-design/src/mixins/spacings/spec.ts

@@ -1,4 +1,4 @@
-import { defaultTheme } from '../../theme';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 
 import { getSpacingStyles } from './index';