From 579f135d29c876404701bae0785dcecca2c69938 Mon Sep 17 00:00:00 2001 From: Ilari Sinkkonen Date: Tue, 30 May 2017 16:45:24 +0300 Subject: [PATCH] feat(theme): add createTheme and change exports of theme Add createTheme function which creates a theme based on given base colors Remove defaultTheme from exports. It is very unlikely that the user would want to use the default theme. Instead they can use the createTheme function. createTheme allows users to use some default colors if the choose to. BREAKING CHANGE: defaultTheme is no longer exported. Instead, use createTheme. The function takes one parameter which is an object specifying the base colors. Base colors which are not given will fall back to the default theme. The base colors are: primary, secondary, error, warn, success, and grey. --- src/components/createTheme.js | 90 ++++++++++++++++++++++++ src/components/defaultTheme.js | 125 +++++++++++++++------------------ src/index.js | 5 +- 3 files changed, 149 insertions(+), 71 deletions(-) create mode 100644 src/components/createTheme.js diff --git a/src/components/createTheme.js b/src/components/createTheme.js new file mode 100644 index 0000000..8a59e05 --- /dev/null +++ b/src/components/createTheme.js @@ -0,0 +1,90 @@ +import Color from 'color'; + +/** + * Theme variables + */ + +// Base `Color` can be used to create additional variations +function createTheme(baseColors = {}) { + const defaultBasePrimary = '#2490ec'; + const defaultBaseSecondary = '#b57bff'; + const defaultBaseError = '#ea4444'; + const defaultBaseSuccess = '#5bde4e'; + const defaultBaseWarn = '#ffb741'; + const defaultBaseGrey = '#a6a6a6'; + + const { + primary = defaultBasePrimary, + secondary = defaultBaseSecondary, + error = defaultBaseError, + success = defaultBaseSuccess, + warn = defaultBaseWarn, + grey = defaultBaseGrey, + } = baseColors; + + const theme = {}; + + theme.primaryBaseColor = Color(primary); + theme.primaryColor = Color(primary).hsl().string(); + theme.primaryColorLight = Color(primary).lighten(0.3).hsl().string(); + theme.primaryColorLighter = Color(primary).lighten(0.6).hsl().string(); + theme.primaryColorLightest = Color(primary).lighten(0.8).hsl().string(); + theme.primaryColorDark = Color(primary).darken(0.2).hsl().string(); + theme.primaryColorDarker = Color(primary).darken(0.4).hsl().string(); + theme.primaryColorDarkest = Color(primary).darken(0.6).hsl().string(); + + theme.secondaryBaseColor = Color(secondary); + theme.secondaryColor = Color(secondary).hsl().string(); + theme.secondaryColorLight = Color(secondary).lighten(0.1).hsl().string(); + theme.secondaryColorLighter = Color(secondary).lighten(0.2).hsl().string(); + theme.secondaryColorLightest = Color(secondary).lighten(0.3).hsl().string(); + theme.secondaryColorDark = Color(secondary).darken(0.2).hsl().string(); + theme.secondaryColorDarker = Color(secondary).darken(0.4).hsl().string(); + theme.secondaryColorDarkest = Color(secondary).darken(0.6).hsl().string(); + + theme.errorBaseColor = Color(error); + theme.errorColor = Color(error).hsl().string(); + theme.errorColorLight = Color(error).lighten(0.2).hsl().string(); + theme.errorColorLighter = Color(error).lighten(0.4).hsl().string(); + theme.errorColorLightest = Color(error).lighten(0.6).hsl().string(); + theme.errorColorDark = Color(error).darken(0.2).hsl().string(); + theme.errorColorDarker = Color(error).darken(0.4).hsl().string(); + theme.errorColorDarkest = Color(error).darken(0.6).hsl().string(); + + theme.warnBaseColor = Color(warn); + theme.warnColor = Color(warn).hsl().string(); + theme.warnColorLight = Color(warn).lighten(0.2).hsl().string(); + theme.warnColorLighter = Color(warn).lighten(0.3).hsl().string(); + theme.warnColorLightest = Color(warn).lighten(0.5).hsl().string(); + theme.warnColorDark = Color(warn).darken(0.2).hsl().string(); + theme.warnColorDarker = Color(warn).darken(0.3).hsl().string(); + theme.warnColorDarkest = Color(warn).darken(0.5).hsl().string(); + + theme.successBaseColor = Color(success); + theme.successColor = Color(success).hsl().string(); + theme.successColorLight = Color(success).lighten(0.2).hsl().string(); + theme.successColorLighter = Color(success).lighten(0.4).hsl().string(); + theme.successColorLightest = Color(success).lighten(0.6).hsl().string(); + theme.successColorDark = Color(success).darken(0.2).hsl().string(); + theme.successColorDarker = Color(success).darken(0.4).hsl().string(); + theme.successColorDarkest = Color(success).darken(0.6).hsl().string(); + + /* eslint-disable newline-per-chained-call */ + theme.greyBaseColor = Color(grey); + theme.grey = Color(grey).hsl().string(); + theme.greyLightest = Color(grey).lighten(0.5).grayscale().hsl().string(); + theme.greyLighter = Color(grey).lighten(0.42).grayscale().hsl().string(); + theme.greyLight = Color(grey).lighten(0.2).grayscale().hsl().string(); + theme.greyDark = Color(grey).darken(0.2).grayscale().hsl().string(); + theme.greyDarker = Color(grey).darken(0.3).grayscale().hsl().string(); + theme.greyDarkest = Color(grey).darken(0.5).grayscale().hsl().string(); + /* eslint-enable newline-per-chained-call */ + + theme.infoColor = '#99d5f5'; + theme.textColorDark = '#222'; + theme.textColorLight = '#fff'; + + return theme; +} + +export default createTheme; diff --git a/src/components/defaultTheme.js b/src/components/defaultTheme.js index 5f56e8b..8265b52 100644 --- a/src/components/defaultTheme.js +++ b/src/components/defaultTheme.js @@ -1,72 +1,63 @@ -/* eslint-disable max-len */ - -import Color from 'color'; - -/** - * Theme variables - */ - -const basePrimary = '#2490ec'; -const baseSecondary = '#b57bff'; -const baseError = '#ea4444'; -const baseSuccess = '#5bde4e'; -const baseWarn = '#ffb741'; - -export const infoColor = '#99d5f5'; -export const textColorDark = '#222'; -export const textColorLight = '#fff'; +import createTheme from './createTheme'; -export const greyLightest = '#f7f7f7'; -export const greyLighter = '#f2f2f2'; -export const greyLight = '#eee'; -export const greyDark = '#ccc'; -export const greyDarker = '#888'; -export const greyDarkest = '#666'; +const defaultTheme = createTheme(); -// Base `Color` can be used to create additional variations -export const primaryBaseColor = Color(basePrimary); -export const primaryColor = Color(basePrimary).hsl().string(); -export const primaryColorLight = Color(basePrimary).lighten(0.3).hsl().string(); -export const primaryColorLighter = Color(basePrimary).lighten(0.6).hsl().string(); -export const primaryColorLightest = Color(basePrimary).lighten(0.8).hsl().string(); -export const primaryColorDark = Color(basePrimary).darken(0.2).hsl().string(); -export const primaryColorDarker = Color(basePrimary).darken(0.4).hsl().string(); -export const primaryColorDarkest = Color(basePrimary).darken(0.6).hsl().string(); - -export const secondaryBaseColor = Color(baseSecondary); -export const secondaryColor = Color(baseSecondary).hsl().string(); -export const secondaryColorLight = Color(baseSecondary).lighten(0.1).hsl().string(); -export const secondaryColorLighter = Color(baseSecondary).lighten(0.2).hsl().string(); -export const secondaryColorLightest = Color(baseSecondary).lighten(0.3).hsl().string(); -export const secondaryColorDark = Color(baseSecondary).darken(0.2).hsl().string(); -export const secondaryColorDarker = Color(baseSecondary).darken(0.4).hsl().string(); -export const secondaryColorDarkest = Color(baseSecondary).darken(0.6).hsl().string(); - -export const errorBaseColor = Color(baseError); -export const errorColor = Color(baseError).hsl().string(); -export const errorColorLight = Color(baseError).lighten(0.2).hsl().string(); -export const errorColorLighter = Color(baseError).lighten(0.4).hsl().string(); -export const errorColorLightest = Color(baseError).lighten(0.6).hsl().string(); -export const errorColorDark = Color(baseError).darken(0.2).hsl().string(); -export const errorColorDarker = Color(baseError).darken(0.4).hsl().string(); -export const errorColorDarkest = Color(baseError).darken(0.6).hsl().string(); - -export const warnBaseColor = Color(baseWarn); -export const warnColor = Color(baseWarn).hsl().string(); -export const warnColorLight = Color(baseWarn).lighten(0.2).hsl().string(); -export const warnColorLighter = Color(baseWarn).lighten(0.3).hsl().string(); -export const warnColorLightest = Color(baseWarn).lighten(0.5).hsl().string(); -export const warnColorDark = Color(baseWarn).darken(0.2).hsl().string(); -export const warnColorDarker = Color(baseWarn).darken(0.3).hsl().string(); -export const warnColorDarkest = Color(baseWarn).darken(0.5).hsl().string(); +/* eslint-disable max-len */ -export const successBaseColor = Color(baseSuccess); -export const successColor = Color(baseSuccess).hsl().string(); -export const successColorLight = Color(baseSuccess).lighten(0.2).hsl().string(); -export const successColorLighter = Color(baseSuccess).lighten(0.4).hsl().string(); -export const successColorLightest = Color(baseSuccess).lighten(0.6).hsl().string(); -export const successColorDark = Color(baseSuccess).darken(0.2).hsl().string(); -export const successColorDarker = Color(baseSuccess).darken(0.4).hsl().string(); -export const successColorDarkest = Color(baseSuccess).darken(0.6).hsl().string(); +export const infoColor = defaultTheme.infoColor; +export const textColorDark = defaultTheme.textColorDark; +export const textColorLight = defaultTheme.textColorLight; + +export const greyLightest = defaultTheme.greyLightest; +export const greyLighter = defaultTheme.greyLighter; +export const greyLight = defaultTheme.greyLight; +export const greyDark = defaultTheme.greyDark; +export const greyDarker = defaultTheme.greyDarker; +export const greyDarkest = defaultTheme.greyDarkest; + +export const primaryBaseColor = defaultTheme.primaryBaseColor; +export const primaryColor = defaultTheme.primaryColor; +export const primaryColorLight = defaultTheme.primaryColorLight; +export const primaryColorLighter = defaultTheme.primaryColorLighter; +export const primaryColorLightest = defaultTheme.primaryColorLightest; +export const primaryColorDark = defaultTheme.primaryColorDark; +export const primaryColorDarker = defaultTheme.primaryColorDarker; +export const primaryColorDarkest = defaultTheme.primaryColorDarkest; + +export const secondaryBaseColor = defaultTheme.secondaryBaseColor; +export const secondaryColor = defaultTheme.secondaryColor; +export const secondaryColorLight = defaultTheme.secondaryColorLight; +export const secondaryColorLighter = defaultTheme.secondaryColorLighter; +export const secondaryColorLightest = defaultTheme.secondaryColorLightest; +export const secondaryColorDark = defaultTheme.secondaryColorDark; +export const secondaryColorDarker = defaultTheme.secondaryColorDarker; +export const secondaryColorDarkest = defaultTheme.secondaryColorDarkest; + +export const errorBaseColor = defaultTheme.errorBaseColor; +export const errorColor = defaultTheme.errorColor; +export const errorColorLight = defaultTheme.errorColorLight; +export const errorColorLighter = defaultTheme.errorColorLighter; +export const errorColorLightest = defaultTheme.errorColorLightest; +export const errorColorDark = defaultTheme.errorColorDark; +export const errorColorDarker = defaultTheme.errorColorDarker; +export const errorColorDarkest = defaultTheme.errorColorDarkest; + +export const warnBaseColor = defaultTheme.warnBaseColor; +export const warnColor = defaultTheme.warnColor; +export const warnColorLight = defaultTheme.warnColorLight; +export const warnColorLighter = defaultTheme.warnColorLighter; +export const warnColorLightest = defaultTheme.warnColorLightest; +export const warnColorDark = defaultTheme.warnColorDark; +export const warnColorDarker = defaultTheme.warnColorDarker; +export const warnColorDarkest = defaultTheme.warnColorDarkest; + +export const successBaseColor = defaultTheme.successBaseColor; +export const successColor = defaultTheme.successColor; +export const successColorLight = defaultTheme.successColorLight; +export const successColorLighter = defaultTheme.successColorLighter; +export const successColorLightest = defaultTheme.successColorLightest; +export const successColorDark = defaultTheme.successColorDark; +export const successColorDarker = defaultTheme.successColorDarker; +export const successColorDarkest = defaultTheme.successColorDarkest; /* eslint-enable max-len */ diff --git a/src/index.js b/src/index.js index a732a74..f95bc2c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,4 @@ -import * as dt from './components/defaultTheme'; - -export const defaultTheme = { ...dt }; - +export { default as createTheme } from './components/createTheme'; // Re-export for easier importing in other components export { default as Button } from './components/Button'; export { default as IconButton } from './components/IconButton';