From 2e783c7cb613ef3e2f1e915a005a64e78ae73687 Mon Sep 17 00:00:00 2001 From: ej9x Date: Wed, 22 Aug 2018 20:45:31 +0300 Subject: [PATCH] feat(theme): add sizes and colors objects to the theme --- src/atoms/Button/Button.js | 10 +++------- src/index.js | 1 + src/theme/colors.js | 22 ++++++++++++---------- src/theme/defaultTheme.js | 4 ++++ src/theme/index.js | 1 + src/theme/resetGlobal.js | 2 ++ src/theme/sizes.js | 9 +++++++++ src/theme/zIndex.js | 11 +++++++++++ src/utils/createTheme.js | 6 ++++-- 9 files changed, 47 insertions(+), 19 deletions(-) create mode 100644 src/theme/sizes.js create mode 100644 src/theme/zIndex.js diff --git a/src/atoms/Button/Button.js b/src/atoms/Button/Button.js index 108c3b45..da01a722 100644 --- 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 index 69925222..5e9a570a 100644 --- 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 index 36097531..b8d139dd 100644 --- 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 index ae86a27c..78ea7a37 100644 --- 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 index b1282cad..3fa3b2cd 100644 --- 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 index ef1be442..c908fd76 100644 --- 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 new file mode 100644 index 00000000..0f10eb8d --- /dev/null +++ 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 new file mode 100644 index 00000000..42ab2cc7 --- /dev/null +++ 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 index d6f4fbbe..c4f25e0c 100644 --- 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 = (name: string, theme: ((typeof COLORS) => T) | T): { [string]: T } => ({ - [name]: typeof theme === 'function' ? theme(COLORS) : theme, +const createTheme = (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 };