feat(theme): add create theme helper

8base · Dec 11, 2018 · 4174921 · 4174921
1 parent 55023e1
commit 4174921
Show file tree

Hide file tree

Showing 70 changed files with 214 additions and 153 deletions.
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
   },
   "dependencies": {
     "color": "^3.0.0",
+    "deepmerge": "^3.0.0",
     "emotion": "^9.1.1",
     "emotion-theming": "^9.1.2",
     "luxon": "^1.7.1",

diff --git a/src/EightBaseBoostProvider.js b/src/EightBaseBoostProvider.js
@@ -2,29 +2,32 @@
 
 import React from 'react';
 import { ThemeProvider } from 'emotion-theming';
-
 import { ModalProvider } from './atoms/Modal/ModalProvider';
-import { defaultTheme, resetGlobal } from './theme';
+import { createTheme, resetGlobal, type Theme } from './theme';
 
 type EightBaseBoostProviderProps = {
-  theme?: Object,
+  theme?: Theme,
   children: React$Node,
 };
 
 class EightBaseBoostProvider extends React.Component<EightBaseBoostProviderProps> {
-  static defaultProps = {
-    theme: defaultTheme,
-  };
+  theme: *;
+
+  constructor(props: EightBaseBoostProviderProps) {
+    super(props);
+
+    this.theme = props.theme || createTheme();
+  }
 
   componentDidMount() {
     resetGlobal();
   }
 
   render() {
-    const { theme, children } = this.props;
+    const { children } = this.props;
 
     return (
-      <ThemeProvider theme={ theme }>
+      <ThemeProvider theme={ this.theme }>
         <ModalProvider>
           { children }
         </ModalProvider>

diff --git a/src/atoms/Avatar/Avatar.js b/src/atoms/Avatar/Avatar.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react';
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 
 type AvatarProps = {|
   src?: string,
@@ -13,7 +13,7 @@ type AvatarProps = {|
 
 const name = 'avatar';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
   modifiers: {
     size: {
       xs: {

diff --git a/src/atoms/Breadcrumbs/Breadcrumbs.js b/src/atoms/Breadcrumbs/Breadcrumbs.js
@@ -2,7 +2,7 @@
 /* eslint-disable react/jsx-key */
 import React, { Fragment } from 'react';
 
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 import type { BreadcrumbsRoutes, BreadcrumbsMatchPath } from './Breadcrumbs.types';
 import { getBreadcrumbs } from './Breadcrumbs.utils';
 import { BreadcrumbsItem } from './BreadcrumbsItem';
@@ -21,7 +21,7 @@ type BreadcrumbsProps = {|
 
 const name = 'breadcrumbs';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
   modifiers: {
   },
   defaults: {

diff --git a/src/atoms/Button/Button.js b/src/atoms/Button/Button.js
@@ -3,7 +3,7 @@
 import React, { Component } from 'react';
 
 import { keyframes } from 'react-emotion';
-import { createStyledTag, createTheme, getThemeStyle, getThemeColors } from '../../utils';
+import { createStyledTag, createComponentTheme, getThemeStyle, getThemeColors } from '../../utils';
 
 export type ButtonProps = {
   /** callback to handle click */
@@ -55,7 +55,7 @@ const spinner = keyframes`
   to   { transform: rotate(360deg) }
 `;
 
-const theme = createTheme(name, (colors: *, sizes: *): * => ({
+const theme = createComponentTheme(name, (colors: *, sizes: *): * => ({
   button: {
     cursor: 'pointer',
     fontSize: '1.4rem',

diff --git a/src/atoms/Card/CardBody.js b/src/atoms/Card/CardBody.js
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 import { offsetModifier } from './common';
 import type { PropSizes } from '../../types';
 
@@ -14,7 +14,7 @@ type CardBodyProps = {|
 
 const name = 'cardBody';
 
-const cardBodyTheme = createTheme(name, {
+const cardBodyTheme = createComponentTheme(name, {
   modifiers: {
     stretch: {
       display: 'flex',

diff --git a/src/atoms/Card/CardFooter.js b/src/atoms/Card/CardFooter.js
@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { createStyledTag, createTheme, getThemeStyle } from '../../utils';
+import { createStyledTag, createComponentTheme, getThemeStyle } from '../../utils';
 import { offsetModifier } from './common';
 import type { PropSizes } from '../../types';
 
@@ -11,7 +11,7 @@ type CardFooterProps = {|
 
 const name = 'cardFooter';
 
-const cardFooterTheme = createTheme(name, (colors: *): * => ({
+const cardFooterTheme = createComponentTheme(name, (colors: *): * => ({
   cardFooter: {
     borderTop: `1px solid ${colors.PRIMARY_BORDER_COLOR}`,
     flexShrink: 0,

diff --git a/src/atoms/Card/CardHeader.js b/src/atoms/Card/CardHeader.js
@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { createStyledTag, createTheme, getThemeStyle } from '../../utils';
+import { createStyledTag, createComponentTheme, getThemeStyle } from '../../utils';
 import { offsetModifier } from './common';
 import type { PropSizes } from '../../types';
 
@@ -11,7 +11,7 @@ type CardHeaderProps = {|
 
 const name = 'cardHeader';
 
-const cardHeaderTheme = createTheme(name, (colors: *): * => ({
+const cardHeaderTheme = createComponentTheme(name, (colors: *): * => ({
   cardHeader: {
     borderBottom: `1px solid ${colors.PRIMARY_BORDER_COLOR}`,
     display: 'flex',

diff --git a/src/atoms/Card/CardSection.js b/src/atoms/Card/CardSection.js
@@ -2,7 +2,7 @@
 import React from 'react';
 
 import { COLORS } from '../../theme';
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 import { offsetModifier } from './common';
 import type { PropSizes } from '../../types';
 
@@ -15,7 +15,7 @@ type CardSectionProps = {|
 
 const name = 'cardSection';
 
-const cardSectionTheme = createTheme(name, {
+const cardSectionTheme = createComponentTheme(name, {
   modifiers: {
     hoverable: {
       cursor: 'pointer',

diff --git a/src/atoms/Code/Code.theme.js b/src/atoms/Code/Code.theme.js
@@ -1,10 +1,10 @@
 // @flow
 
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 
 const name = 'code';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
 });
 
 const CodeWrapperTag = createStyledTag(name, (props) => ({

diff --git a/src/atoms/Dialog/DialogBody.js b/src/atoms/Dialog/DialogBody.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { createTheme, createStyledTag } from '../../utils';
+import { createComponentTheme, createStyledTag } from '../../utils';
 import { Card } from '../Card';
 import type { PropSizes } from '../../types';
 
@@ -12,7 +12,7 @@ type DialogBodyProps = {|
 
 const name = 'dialogBody';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
   modifiers: {
     scrollable: {
       overflow: 'auto',

diff --git a/src/atoms/Dialog/DialogFooter.js b/src/atoms/Dialog/DialogFooter.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { createTheme } from '../../utils';
+import { createComponentTheme } from '../../utils';
 import { Card } from '../Card';
 import { Row } from '../FlexLayout';
 import type { PropSizes } from '../../types';
@@ -12,7 +12,7 @@ type DialogFooterProps = {|
 
 const name = 'dialogFooter';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
   modifiers: {
   },
   defaults: {

diff --git a/src/atoms/Dialog/DialogHeader.js b/src/atoms/Dialog/DialogHeader.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 import { Card } from '../Card';
 import { Text } from '../typography/Text';
 import type { PropSizes } from '../../types';
@@ -13,7 +13,7 @@ type DialogHeaderProps = {|
 
 const name = 'dialogHeader';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
   modifiers: {
   },
   defaults: {

diff --git a/src/atoms/Dialog/DialogPlate.js b/src/atoms/Dialog/DialogPlate.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 import { Modal } from '../Modal';
 import { Card } from '../Card';
 import type { PropSizes } from '../../types';
@@ -17,7 +17,7 @@ type DialogPlateProps = {|
 
 const name = 'dialogPlate';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
   modifiers: {
     size: {
       xs: {

diff --git a/src/atoms/Divider/Divider.js b/src/atoms/Divider/Divider.js
@@ -1,13 +1,13 @@
 import React from 'react';
 
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 
 type DividerProps = {|
 |};
 
 const name = 'stars';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
   modifiers: {
   },
   defaults: {

diff --git a/src/atoms/Dropdown/DropdownBody.theme.js b/src/atoms/Dropdown/DropdownBody.theme.js
@@ -1,11 +1,11 @@
 // @flow
 
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 import type { PropSizes } from '../../types';
 
 const name = 'dropdownBody';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
   modifiers: {
     stretch: {
       width: '100%',

diff --git a/src/atoms/Dropdown/DropdownHead.theme.js b/src/atoms/Dropdown/DropdownHead.theme.js
@@ -1,10 +1,10 @@
 // @flow
 
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 
 const name = 'dropdownHead';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
   modifiers: {
     stretch: {
       height: '100%',

diff --git a/src/atoms/Dropdown/DropdownPlate.theme.js b/src/atoms/Dropdown/DropdownPlate.theme.js
@@ -1,10 +1,10 @@
 // @flow
 
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 
 const name = 'dropdownHead';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
   modifiers: {
     stretch: {
       height: '100%',

diff --git a/src/atoms/Grid/GridBox.js b/src/atoms/Grid/GridBox.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 
 type GridBoxProps = {|
   children?: React$Node,
@@ -22,7 +22,7 @@ type GridBoxProps = {|
 
 const name = 'gridBox';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
   modifiers: {
     direction: {
       column: {

diff --git a/src/atoms/Grid/GridLayout.js b/src/atoms/Grid/GridLayout.js
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 
 type GridLayoutProps = {|
   children?: React$Node,
@@ -25,7 +25,7 @@ type GridLayoutProps = {|
 
 const name = 'gridLayout';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
   modifiers: {
     gap: {
       xs: {

diff --git a/src/atoms/Loader/Loader.js b/src/atoms/Loader/Loader.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 import LoaderIcon from './Loader.svg';
 
 type LoaderProps = {|
@@ -9,7 +9,7 @@ type LoaderProps = {|
 
 const name = 'loader';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
   modifiers: {
     size: {
       sm: {

diff --git a/src/atoms/Modal/Modal.js b/src/atoms/Modal/Modal.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { Portal } from 'react-portal';
 import { injectGlobal } from 'emotion';
 
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 import { withModalState } from './withModalState';
 
 type ModalProps = {
@@ -30,7 +30,7 @@ injectGlobal`
 
 const name = 'modal';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
   modifiers: {
   },
   defaults: {

diff --git a/src/atoms/Navigation/NavigationItem.js b/src/atoms/Navigation/NavigationItem.js
@@ -3,7 +3,7 @@ import color from 'color';
 import fp from 'lodash/fp';
 
 import { Icon } from '../typography/Icon';
-import { createStyledTag, createTheme } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 import { PALETTE } from '../../theme';
 
 type NavigationItemProps = {|
@@ -15,7 +15,7 @@ type NavigationItemProps = {|
 
 const name = 'navigationItem';
 
-const theme = createTheme(name, {
+const theme = createComponentTheme(name, {
   modifiers: {
     color: fp.mapValues((color) => ({
       backgroundColor: color,