-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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.
- Loading branch information
Ilari Sinkkonen
committed
May 30, 2017
1 parent
21ec40a
commit 579f135
Showing
3 changed files
with
149 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters