feat(theme): add sizes and colors objects to the theme

8base · Aug 23, 2018 · 2e783c7 · 2e783c7
1 parent 51d4fb9
commit 2e783c7
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 19 deletions.
diff --git a/src/atoms/Button/Button.js b/src/atoms/Button/Button.js
@@ -7,7 +7,7 @@ import { createStyledTag, createTheme, getThemeStyle, getThemeColors } from '../
 
 type ButtonProps = {|
   /** callback to handle click */
-  onClick?: (MouseEvent) => void,
+  onClick?: (event?: MouseEvent) => void,
   /** button text */
   text?: string,
   /** button text */
@@ -53,12 +53,13 @@ const spinner = keyframes`
   to   { transform: rotate(360deg) }
 `;
 
-const theme = createTheme(name, (colors: *): * => ({
+const theme = createTheme(name, (colors: *, sizes: *): * => ({
   button: {
     cursor: 'pointer',
     fontSize: '1.4rem',
     fontWeight: '600',
     transition: 'all .15s ease-in-out',
+    borderRadius: sizes.MAIN_BORDER_RADIUS,
 
     '&:hover': {
       boxShadow: '0 1px 3px 0 rgba(50,50,93,.14), 0 4px 6px 0 rgba(112,157,199,.08)',
@@ -75,27 +76,22 @@ const theme = createTheme(name, (colors: *): * => ({
       xs: {
         height: BUTTON_HEIGHT_BY_SIZE.xs,
         padding: '0 1rem',
-        borderRadius: '.5rem',
       },
       sm: {
         height: BUTTON_HEIGHT_BY_SIZE.sm,
         padding: '0 2rem',
-        borderRadius: '.5rem',
       },
       md: {
         height: BUTTON_HEIGHT_BY_SIZE.md,
         padding: '0 4rem',
-        borderRadius: '.5rem',
       },
       lg: {
         height: BUTTON_HEIGHT_BY_SIZE.lg,
         padding: '0 6rem',
-        borderRadius: '.5rem',
       },
       xl: {
         height: BUTTON_HEIGHT_BY_SIZE.xl,
         padding: '0 6rem',
-        borderRadius: '.5rem',
         fontSize: '1.8rem',
       },
     },

diff --git a/src/index.js b/src/index.js
@@ -4,3 +4,4 @@ export { ThemeProvider } from 'emotion-theming';
 export { defaultTheme, resetGlobal } from './theme';
 export * from './atoms';
 export * from './molecules';
+
diff --git a/src/theme/colors.js b/src/theme/colors.js
@@ -1,6 +1,6 @@
 // @flow
 
-const PALETTE = {
+const DEFINE_PALETTE = {
   WHITE: '#FFFFFF',
   BLACK: '#000000',
 
@@ -12,6 +12,7 @@ const PALETTE = {
   GRAY2: '#5C6268',
   GRAY3: '#737A82',
   GRAY4: '#7e868e',
+  GRAY5: '#A5AFB6',
 
   LIGHT_GRAY1: '#d0d7dd',
   LIGHT_GRAY2: '#DCE1E6',
@@ -33,21 +34,22 @@ const PALETTE = {
   LIGHT_RED: '#ff6d4a',
   RED: '#eb4235',
 
-  LIGHT_GRAY: '#f4f7f9',
-  GRAY: '#7e868e',
-  DARK_GRAY: '#323c47',
-
   TRANSPARENT: 'transparent',
 };
 
+const PALETTE = {
+  ...DEFINE_PALETTE,
+
+  PRIMARY: DEFINE_PALETTE.LIGHT_BLUE,
+  SECONDARY: DEFINE_PALETTE.GREEN,
+  SUCCESS: DEFINE_PALETTE.LIGHT_GREEN,
+  DANGER: DEFINE_PALETTE.LIGHT_RED,
+  TRANSPARENT: DEFINE_PALETTE.TRANSPARENT,
+};
+
 const COLORS = {
   ...PALETTE,
 
-  PRIMARY: PALETTE.LIGHT_BLUE,
-  SECONDARY: PALETTE.GREEN,
-  SUCCESS: PALETTE.LIGHT_GREEN,
-  DANGER: PALETTE.LIGHT_RED,
-  TRANSPARENT: PALETTE.TRANSPARENT,
 
   PRIMARY_BORDER_COLOR: PALETTE.LIGHT_GRAY1,
   PRIMARY_BUTTON_BACKGROUND_COLOR: PALETTE.LIGHT_BLUE,

diff --git a/src/theme/defaultTheme.js b/src/theme/defaultTheme.js
@@ -3,6 +3,8 @@
 import { atomsTheme } from '../atoms';
 import { moleculesTheme } from '../molecules';
 import { COLORS } from './colors';
+import { SIZES } from './sizes';
+import { Z_INDEX } from './zIndex';
 
 const theme = {
   ...atomsTheme,
@@ -11,6 +13,8 @@ const theme = {
 
 export const defaultTheme = {
   COLORS,
+  SIZES,
+  Z_INDEX,
   ...Object.keys(theme).reduce((result, componentName) => ({
     ...result,
     [componentName]: theme[componentName],

diff --git a/src/theme/index.js b/src/theme/index.js
@@ -1,5 +1,6 @@
 // @flow
 
 export { COLORS, PALETTE } from './colors';
+export { SIZES } from './sizes';
 export { defaultTheme } from './defaultTheme';
 export { resetGlobal } from './resetGlobal';
diff --git a/src/theme/resetGlobal.js b/src/theme/resetGlobal.js
@@ -1,3 +1,5 @@
+// @flow
+
 import { injectGlobal } from 'emotion';
 
 const resetGlobal = () => injectGlobal`

diff --git a/src/theme/sizes.js b/src/theme/sizes.js
@@ -0,0 +1,9 @@
+// @flow
+
+const SIZES = {
+  MAIN_BORDER_RADIUS: '.5rem',
+};
+
+export {
+  SIZES,
+};
diff --git a/src/theme/zIndex.js b/src/theme/zIndex.js
@@ -0,0 +1,11 @@
+// @flow
+
+const Z_INDEX = {
+  MODAL: 10000,
+  FIXED_NAV: 1000,
+};
+
+export {
+  Z_INDEX,
+};
+
diff --git a/src/utils/createTheme.js b/src/utils/createTheme.js
@@ -1,8 +1,10 @@
 // @flow
 import { COLORS } from '../theme/colors';
+import { SIZES } from '../theme/sizes';
+import { Z_INDEX } from '../theme/zIndex';
 
-const createTheme = <T: Object>(name: string, theme: ((typeof COLORS) => T) | T): { [string]: T } => ({
-  [name]: typeof theme === 'function' ? theme(COLORS) : theme,
+const createTheme = <T: Object>(name: string, theme: ((typeof COLORS, typeof SIZES, typeof Z_INDEX) => T) | T): { [string]: T } => ({
+  [name]: typeof theme === 'function' ? theme(COLORS, SIZES, Z_INDEX) : theme,
 });
 
 export { createTheme };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,3 +4,4 @@ export { ThemeProvider } from 'emotion-theming';
		export { defaultTheme, resetGlobal } from './theme';
		export * from './atoms';
		export * from './molecules';