feat(theme): add possibility to define each component default styles

README.md

@@ -28,24 +28,39 @@ const App = () => {
 ### Usage with custom theme
 
 ```js
-import { EightBaseBoostProvider, defaultTheme } from '@8base/boost';
-import merge from 'deepmerge';
+import { EightBaseBoostProvider, createTheme } from '@8base/boost';
 
-/** You can use deepmerge package to override properties of the default theme. */
-const customTheme = merge(defaultTheme, {
+
+const customTheme = createTheme({
   /** Change the pallete of the color. */
   COLORS: {
-    PRIMARY_BUTTON_BACKGROUND_COLOR: '#FFFFFF'
+    PRIMARY: '#3EB7F9',
   },
   /** Change the custom components styles if it needed. */
-  button: {
-    modifiers: {
-      disabled: {
-        backgroundColor: '#000000',
+  components: {
+    input: {
+      root: {
+        borderColor: 'gray',
+      },
+      modifiers: {
+        hasError: {
+          borderColor: 'red',
+        }
       }
-    }
-  }
-})
+    },
+    button: (colors, sizes) => ({
+      root: {
+        fontSize: sizes.SMALL_FONT_SIZE,
+      },
+      modifiers: {
+        disabled: {
+          backgroundColor: colors.RED,
+        },
+      },
+    }),
+  },
+});
+
 
 const App = () => {
   return (

src/atoms/Avatar/Avatar.js

@@ -47,7 +47,7 @@ const theme = createComponentTheme(name, {
   },
 });
 
-const AvatarHandleTag = createStyledTag(`${name}Handle`, {
+const AvatarHandleTag = createStyledTag(`${name}Handle`, (props: *) => ({
   position: 'absolute',
   bottom: '-30%',
   left: '0',
@@ -63,8 +63,8 @@ const AvatarHandleTag = createStyledTag(`${name}Handle`, {
   fontSize: '0.8rem',
   transition: 'all .15s ease-in-out',
   userSelect: 'none',
-  color: '#d0d7dd',
-});
+  color: props.theme.COLORS.LIGHT_GRAY1,
+}));
 
 const COLORS = ['#ffd012', '#a6e50f', '#00bb6e', '#9975d0', '#4da1ff', '#1968cb', '#ff6d4a', '#EB518E', '#eb4235'];
 

src/atoms/Breadcrumbs/Breadcrumbs.js

@@ -40,7 +40,7 @@ const Breadcrumbs = ({ itemTagName, pathname, routes, matchPath, ...rest }: Brea
           breadcrumbs.map((item, index) => (
             <Fragment>
               <BreadcrumbsItem to={ item.originalPath } { ...{ ...rest, ...item, tagName: itemTagName } } />
-              { index !== breadcrumbs.length - 1 && <BreadcrumbsDivider>></BreadcrumbsDivider> }
+              { index !== breadcrumbs.length - 1 && <BreadcrumbsDividerTag tagName="span">></BreadcrumbsDividerTag> }
             </Fragment>
           )),
         )

src/atoms/Breadcrumbs/BreadcrumbsDivider.js

@@ -4,7 +4,6 @@ import styled from 'react-emotion';
 const BreadcrumbsDivider = styled('span')({
   padding: '0 1rem',
   fontSize: '1.6rem',
-  fontFamily: 'Poppins',
 });
 
 export { BreadcrumbsDivider };

src/atoms/Button/Button.js

@@ -56,7 +56,7 @@ const spinner = keyframes`
 `;
 
 const theme = createComponentTheme(name, (colors: *, sizes: *): * => ({
-  root: {
+  button: {
     cursor: 'pointer',
     fontSize: '1.4rem',
     fontWeight: '600',
@@ -219,11 +219,6 @@ const ButtonTag = createStyledTag(name, props => ({
   whiteSpace: 'nowrap',
 
   ...getSquaredStyle(props),
-
-  // borderColor: getBorderColor(props),
-  // backgroundColor: getBackgroundColor(props),
-  // color: getColor(props),
-
   ...getLoading(props),
 }));
 

src/atoms/Card/CardFooter.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { createStyledTag, createComponentTheme, getThemeStyle } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 import { offsetModifier } from './common';
 import type { PropSizes } from '../../types';
 
@@ -12,18 +12,17 @@ type CardFooterProps = {|
 const name = 'cardFooter';
 
 const cardFooterTheme = createComponentTheme(name, (colors: *): * => ({
-  cardFooter: {
+  root: {
     borderTop: `1px solid ${colors.PRIMARY_BORDER_COLOR}`,
-    flexShrink: 0,
   },
   modifiers: {
     ...offsetModifier,
   },
 }));
 
-const CardFooterTag = createStyledTag(name, props => ({
-  ...getThemeStyle(props, name).cardFooter,
-}));
+const CardFooterTag = createStyledTag(name, {
+  flexShrink: 0,
+});
 
 const CardFooter = ({ children, ...rest }: CardFooterProps) => (
   <CardFooterTag { ...rest } tagName="div">

src/atoms/Card/CardHeader.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { createStyledTag, createComponentTheme, getThemeStyle } from '../../utils';
+import { createStyledTag, createComponentTheme } from '../../utils';
 import { offsetModifier } from './common';
 import type { PropSizes } from '../../types';
 
@@ -12,21 +12,20 @@ type CardHeaderProps = {|
 const name = 'cardHeader';
 
 const cardHeaderTheme = createComponentTheme(name, (colors: *): * => ({
-  cardHeader: {
+  root: {
     borderBottom: `1px solid ${colors.PRIMARY_BORDER_COLOR}`,
-    display: 'flex',
-    alignItems: 'center',
-    position: 'relative',
-    flexShrink: 0,
   },
   modifiers: {
     ...offsetModifier,
   },
 }));
 
-const CardHeaderTag = createStyledTag(name, props => ({
-  ...getThemeStyle(props, name).cardHeader,
-}));
+const CardHeaderTag = createStyledTag(name, {
+  display: 'flex',
+  alignItems: 'center',
+  position: 'relative',
+  flexShrink: 0,
+});
 
 const CardHeader = ({
   children,

src/atoms/Card/CardSection.js

@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 
-import { COLORS } from '../../theme';
 import { createStyledTag, createComponentTheme } from '../../utils';
 import { offsetModifier } from './common';
 import type { PropSizes } from '../../types';
@@ -15,7 +14,12 @@ type CardSectionProps = {|
 
 const name = 'cardSection';
 
-const cardSectionTheme = createComponentTheme(name, {
+const cardSectionTheme = createComponentTheme(name, (colors: *) => ({
+  root: {
+    '&:not(:last-child)': {
+      borderBottom: `1px solid ${colors.PRIMARY_BORDER_COLOR}`,
+    },
+  },
   modifiers: {
     hoverable: {
       cursor: 'pointer',
@@ -30,13 +34,9 @@ const cardSectionTheme = createComponentTheme(name, {
     },
     ...offsetModifier,
   },
-});
+}));
 
-const CardSectionTag = createStyledTag(name, {
-  '&:not(:last-child)': {
-    borderBottom: `1px solid ${COLORS.PRIMARY_BORDER_COLOR}`,
-  },
-});
+const CardSectionTag = createStyledTag(name, {});
 
 const CardSection = ({ children, ...rest }: CardSectionProps) => (
   <CardSectionTag { ...rest } tagName="div">

src/atoms/Code/Code.theme.js

@@ -4,72 +4,100 @@ import { createStyledTag, createComponentTheme } from '../../utils';
 
 const name = 'code';
 
-const theme = createComponentTheme(name, {
-});
+const themeWrapper = createComponentTheme(`${name}Wrapper`, (colors: *, sizes: *) => ({
+  root: {
+    border: `1px solid ${colors.PRIMARY_BORDER_COLOR}`,
+    borderRadius: sizes.MAIN_BORDER_RADIUS,
+  },
+}));
+
+const themeCounter = createComponentTheme(`${name}Counter`, (colors: *) => ({
+  root: {
+    color: colors.DARK_GRAY1,
+    fontFamily: 'Courier',
+  },
+}));
+
+const themeBody = createComponentTheme(`${name}Body`, (colors: *) => ({
+  root: {
+    color: colors.DARK_GRAY1,
+    fontFamily: 'Courier',
+  },
+}));
+
+const themeNumberic = createComponentTheme(`${name}Numberic`, (colors: *) => ({
+  root: {
+    backgroundColor: colors.LIGHT_GRAY5,
+    borderRight: `1px solid ${colors.PRIMARY_BORDER_COLOR}`,
+  },
+}));
+
+const theme = {
+  ...themeWrapper,
+  ...themeCounter,
+  ...themeBody,
+  ...themeNumberic,
+};
+
 
-const CodeWrapperTag = createStyledTag(name, (props) => ({
+const CodeWrapperTag = createStyledTag(`${name}Wrapper`, (props) => ({
   height: props.height ? `${props.height}px` : '100%',
-  border: `1px solid ${props.theme.COLORS.LIGHT_GRAY1}`,
-  borderRadius: props.theme.SIZES.MAIN_BORDER_RADIUS,
   overflow: 'hidden',
 }));
 
-const CodePlateTag = createStyledTag(name, {
+const CodePlateTag = createStyledTag(`${name}Plate`, {
   display: 'flex',
   width: '100%',
   overflow: 'hidden',
   alignItems: 'stretch',
 });
 
-const CodeLineCounterTag = createStyledTag(name, (props) => ({
+const CodeLineCounterTag = createStyledTag(`${name}Counter`, (props) => ({
   opacity: '0.5',
-  color: props.theme.COLORS.DARK_GRAY1,
-  fontSize: '1.4rem',
-  fontFamily: 'Courier',
-  lineHeight: '2',
   textAlign: 'center',
+  fontSize: props.theme.SIZES.MAIN_FONT_SIZE,
+  lineHeight: '2',
 }));
 
-const CodeNumericTag = createStyledTag(name, (props) => ({
+const CodeNumericTag = createStyledTag(`${name}Numberic`, (props) => ({
   height: props.height ? 'auto' : '100%',
   padding: '2rem 0 4rem',
-  backgroundColor: props.theme.COLORS.LIGHT_GRAY5,
-  borderRight: `1px solid ${props.theme.COLORS.LIGHT_GRAY1}`,
   borderTopLeftRadius: props.theme.SIZES.MAIN_BORDER_RADIUS,
   borderBottomLeftRadius: props.theme.SIZES.MAIN_BORDER_RADIUS,
 }));
 
-const CodeNumberWrapperTag = createStyledTag(name, (props) => ({
+const CodeNumberWrapperTag = createStyledTag(`${name}NumberWrapper`, (props) => ({
   height: props.height ? `${props.height}px` : 'auto',
   display: 'block',
   width: '3rem',
   flexShrink: 0,
   position: 'relative',
 }));
 
-const CodeNumberPlateTag = createStyledTag(name, {
+const CodeNumberPlateTag = createStyledTag(`${name}NumberPlate`, {
   height: '100%',
   display: 'block',
   width: '3rem',
   position: 'absolute',
   overflow: 'hidden',
 });
 
-const CodeBodyWrapperTag = createStyledTag(name, (props) => ({
+const CodeBodyWrapperTag = createStyledTag(`${name}BodyWrapper`, (props) => ({
   overflow: 'hidden',
   height: props.height ? `${props.height}px` : '100%',
   width: '100%',
 }));
 
-const CodeBodyTag = createStyledTag(name, (props) => ({
+const CodeBodyTag = createStyledTag(`${name}Body`, {
   overflow: 'auto',
+  height: '100%',
   padding: '2rem',
-  fontFamily: 'Courier',
   lineHeight: '2',
-  color: props.theme.COLORS.DARK_GRAY1,
   fontWeight: 'normal',
-  height: '100%',
-}));
+
+
+  fontFamily: 'Courier',
+});
 
 export {
   theme,

src/atoms/Divider/Divider.js

@@ -5,22 +5,24 @@ import { createStyledTag, createComponentTheme } from '../../utils';
 type DividerProps = {|
 |};
 
-const name = 'stars';
+const name = 'divider';
 
-const theme = createComponentTheme(name, {
+const theme = createComponentTheme(name, (colors: *) => ({
+  root: {
+    backgroundColor: colors.LIGHT_GRAY4,
+    height: '1px',
+  },
   modifiers: {
   },
   defaults: {
   },
-});
+}));
 
-const StyledTag = createStyledTag(name, (props) => ({
-  backgroundColor: props.theme.COLORS.DARK_DIVIDER_COLOR,
-  height: '1px',
+const StyledTag = createStyledTag(name, {
   border: 'none',
   width: '100%',
   margin: '1rem 0',
-}));
+});
 
 function Divider(props: DividerProps) {
   return <StyledTag { ...props } tagName="hr" />;

src/atoms/Dropdown/DropdownBody.theme.js

@@ -6,6 +6,10 @@ import type { PropSizes } from '../../types';
 const name = 'dropdownBody';
 
 const theme = createComponentTheme(name, {
+  root: {
+    borderRadius: '.25rem',
+  },
+
   modifiers: {
     stretch: {
       width: '100%',
@@ -51,9 +55,7 @@ const offsetSizes: { [PropSizes]: string } = {
   lg: '0, 15px',
 };
 
-const DropdownBodyTag = createStyledTag(name, {
-  borderRadius: '.25rem',
-});
+const DropdownBodyTag = createStyledTag(name, {});
 
 const defaultTheme = theme[name].defaults;