refactor(theme): dedupe shadowing color code (#1353)

* dedupe code for shaded colors * add shadeScheme by default * refactor using defaultShadeScheme
dbmedialab-archive · Aug 13, 2019 · c361f4b · c361f4b
1 parent 1d2576f
commit c361f4b
Show file tree

Hide file tree

Showing 15 changed files with 97 additions and 140 deletions.
diff --git a/src/themes/aller/index.js b/src/themes/aller/index.js
@@ -1,4 +1,4 @@
-import { darken, lighten } from 'polished';
+import { shadeColors } from '../../utils/shade-colors';
 
 import { cssReset } from '../../utils/css-reset';
 
@@ -13,16 +13,8 @@ const colorsToShade= {
 	black: '#222222',
 	darkness: '#272727',
 };
-// Creates 4 shades of each color in colorsToShade
-// For example: primary becomes primary, primaryDark, primaryLight and primaryLighter
-const shadedColors = Object.keys(colorsToShade).map(color => ({
-	[`${color}`]: colorsToShade[color],
-	[`${color}Dark`]: darken(0.2, colorsToShade[color]),
-	[`${color}Light`]: lighten(0.15, colorsToShade[color]),
-	[`${color}Lighter`]: lighten(0.3, colorsToShade[color]),
-}));
-
-const combinedShadedColors = shadedColors.reduce((acc, cur) => Object.assign(acc, cur), {});
+
+const combinedShadedColors = shadeColors(colorsToShade);
 
 const colors = {
 

diff --git a/src/themes/dagbladet-dark/index.js b/src/themes/dagbladet-dark/index.js
@@ -1,16 +1,14 @@
 import merge from 'deepmerge';
-import { darken, lighten } from 'polished';
 import dagbladet from '../dagbladet';
 
-const darkness = '#1c1d25';
+import { shadeColors } from '../../utils/shade-colors';
 
-const colors = {
-	type: '#ffffff',
-	darkness,
-	darknessDark: darken(0.2, darkness),
-	darknessLight: lighten(0.15, darkness),
-	darknessLighter: lighten(0.3, darkness),
+const colorsToShade = { darkness: '#1c1d25' };
+
+const shadedColors = shadeColors(colorsToShade);
 
+const colorsBase = {
+	type: '#ffffff',
 	skinColors: {
 		background: 'darkness',
 		type: 'type',
@@ -28,6 +26,8 @@ const colors = {
 	},
 };
 
+const colors = Object.assign(shadedColors, colorsBase);
+
 const darkOverrides = {
 	name: 'Dagbladet Dark',
 	colors,

diff --git a/src/themes/dagbladet/colors.js b/src/themes/dagbladet/colors.js
@@ -1,4 +1,4 @@
-import { darken, lighten } from 'polished';
+import { shadeColors, defaultShadeScheme } from '../../utils/shade-colors';
 
 const colorsToShade= {
 	primary: '#d60000',
@@ -15,16 +15,13 @@ const colorsToShade= {
 	brown: '#9a663f',
 };
 
-// Creates 4 shades of each color in colorsToShade
-// For example: primary becomes primary, primaryDark, primaryLight and primaryLighter
-const shadedColors = Object.keys(colorsToShade).map(color => ({
-	[`${color}`]: colorsToShade[color],
-	[`${color}Dark`]: darken(0.05, colorsToShade[color]),
-	[`${color}Light`]: lighten(0.15, colorsToShade[color]),
-	[`${color}Lighter`]: lighten(0.3, colorsToShade[color]),
-}));
+const shadeScheme = {
+	dark: 0.05,
+};
+
+const shades = Object.assign({}, defaultShadeScheme, shadeScheme);
 
-const combinedShadedColors = shadedColors.reduce((acc, cur) => Object.assign(acc, cur), {});
+const combinedShadedColors = shadeColors(colorsToShade, shades);
 
 const colors = {
 	grayTint: '#C0C0C0',

diff --git a/src/themes/default-theme/colors.js b/src/themes/default-theme/colors.js
@@ -1,4 +1,4 @@
-import { darken, lighten } from 'polished';
+import { shadeColors } from '../../utils/shade-colors';
 
 const colorsToShade= {
 	primary: 'teal',
@@ -18,16 +18,8 @@ const colorsToShade= {
 	darkness: '#222222',
 	grayTint: '#c0c0c0',
 };
-// Creates 4 shades of each color in colorsToShade
-// For example: primary becomes primary, primaryDark, primaryLight and primaryLighter
-const shadedColors = Object.keys(colorsToShade).map(color => ({
-	[`${color}`]: colorsToShade[color],
-	[`${color}Dark`]: darken(0.2, colorsToShade[color]),
-	[`${color}Light`]: lighten(0.15, colorsToShade[color]),
-	[`${color}Lighter`]: lighten(0.3, colorsToShade[color]),
-}));
 
-const combinedShadedColors = shadedColors.reduce((acc, cur) => Object.assign(acc, cur), {});
+const combinedShadedColors = shadeColors(colorsToShade);
 
 const skinColors = {
 	splashBackground: 'primary',

diff --git a/src/themes/dinside/colors.js b/src/themes/dinside/colors.js
@@ -1,4 +1,4 @@
-import { darken, lighten } from 'polished';
+import { shadeColors, defaultShadeScheme } from '../../utils/shade-colors';
 
 const colorsToShade= {
 	primary: '#BE4125',
@@ -13,16 +13,13 @@ const colorsToShade= {
 	floralWhite: '#fbf8f3',
 };
 
-// Creates 4 shades of each color in colorsToShade
-// For example: primary becomes primary, primaryDark, primaryLight and primaryLighter
-const shadedColors = Object.keys(colorsToShade).map(color => ({
-	[`${color}`]: colorsToShade[color],
-	[`${color}Dark`]: darken(0.1, colorsToShade[color]),
-	[`${color}Light`]: lighten(0.15, colorsToShade[color]),
-	[`${color}Lighter`]: lighten(0.3, colorsToShade[color]),
-}));
+const shadeScheme = {
+	dark: 0.1,
+};
+
+const shades = Object.assign({}, defaultShadeScheme, shadeScheme);
 
-const combinedShadedColors = shadedColors.reduce((acc, cur) => Object.assign(acc, cur), {});
+const combinedShadedColors = shadeColors(colorsToShade, shades);
 
 const colors = {
 	...combinedShadedColors,

diff --git a/src/themes/elbil24-dark/index.js b/src/themes/elbil24-dark/index.js
@@ -1,16 +1,14 @@
 import merge from 'deepmerge';
-import { darken, lighten } from 'polished';
 import elbil24 from '../elbil24';
 
-const darkness = '#212325';
+import { shadeColors } from '../../utils/shade-colors';
 
-const colors = {
-	type: '#ffffff',
-	darkness,
-	darknessDark: darken(0.2, darkness),
-	darknessLight: lighten(0.15, darkness),
-	darknessLighter: lighten(0.3, darkness),
+const colorsToShade = { darkness: '#212325' };
+
+const shadedColors = shadeColors(colorsToShade);
 
+const colorsBase = {
+	type: '#ffffff',
 	skinColors: {
 		background: 'darkness',
 		type: 'type',
@@ -27,6 +25,8 @@ const colors = {
 	},
 };
 
+const colors = Object.assign(shadedColors, colorsBase);
+
 const darkOverrides = {
 	name: 'Elbil24 Dark',
 	colors,

diff --git a/src/themes/elbil24/colors.js b/src/themes/elbil24/colors.js
@@ -1,21 +1,18 @@
-import { darken, lighten } from 'polished';
+import { shadeColors, defaultShadeScheme } from '../../utils/shade-colors';
 
 const colorsToShade= {
 	primary: '#d23729',
 	secondary: '#000',
 	lightGrey: '#ecece8',
 };
 
-// Creates 4 shades of each color in colorsToShade
-// For example: primary becomes primary, primaryDark, primaryLight and primaryLighter
-const shadedColors = Object.keys(colorsToShade).map(color => ({
-	[`${color}`]: colorsToShade[color],
-	[`${color}Dark`]: darken(0.1, colorsToShade[color]),
-	[`${color}Light`]: lighten(0.15, colorsToShade[color]),
-	[`${color}Lighter`]: lighten(0.3, colorsToShade[color]),
-}));
+const shadeScheme = {
+	dark: 0.1,
+};
+
+const shades = Object.assign({}, defaultShadeScheme, shadeScheme);
 
-const combinedShadedColors = shadedColors.reduce((acc, cur) => Object.assign(acc, cur), {});
+const combinedShadedColors = shadeColors(colorsToShade, shades);
 
 const colors = {
 	...combinedShadedColors,

diff --git a/src/themes/kk/colors.js b/src/themes/kk/colors.js
@@ -1,21 +1,18 @@
-import { darken, lighten } from 'polished';
+import { shadeColors, defaultShadeScheme } from '../../utils/shade-colors';
 
 const colorsToShade= {
 	primary: 'black',
 	secondary: '#999',
 	pink: 'hotpink',
 };
 
-// Creates 4 shades of each color in colorsToShade
-// For example: primary becomes primary, primaryDark, primaryLight and primaryLighter
-const shadedColors = Object.keys(colorsToShade).map(color => ({
-	[`${color}`]: colorsToShade[color],
-	[`${color}Dark`]: darken(0.1, colorsToShade[color]),
-	[`${color}Light`]: lighten(0.15, colorsToShade[color]),
-	[`${color}Lighter`]: lighten(0.3, colorsToShade[color]),
-}));
+const shadeScheme = {
+	dark: 0.1,
+};
+
+const shades = Object.assign({}, defaultShadeScheme, shadeScheme);
 
-const combinedShadedColors = shadedColors.reduce((acc, cur) => Object.assign(acc, cur), {});
+const combinedShadedColors = shadeColors(colorsToShade, shades);
 
 const colors = {
 	...combinedShadedColors,

diff --git a/src/themes/light-theme/index.js b/src/themes/light-theme/index.js
@@ -1,4 +1,4 @@
-import { darken, lighten } from 'polished';
+import { shadeColors } from '../../utils/shade-colors';
 
 import { cssReset } from '../../utils/css-reset';
 
@@ -32,16 +32,7 @@ const colorsToShade = {
 	sand: '#444',
 };
 
-// Creates 4 shades of each color in colorsToShade
-// For example: primary becomes primary, primaryDark, primaryLight and primaryLighter
-const shadedColors = Object.keys(colorsToShade).map(color => ({
-	[`${color}`]: colorsToShade[color],
-	[`${color}Dark`]: darken(0.2, colorsToShade[color]),
-	[`${color}Light`]: lighten(0.15, colorsToShade[color]),
-	[`${color}Lighter`]: lighten(0.3, colorsToShade[color]),
-}));
-
-const combinedShadedColors = shadedColors.reduce((acc, cur) => Object.assign(acc, cur), {});
+const combinedShadedColors = shadeColors(colorsToShade);
 
 const skinColors = {
 	splashBackground: 'primary',

diff --git a/src/themes/mat/colors.js b/src/themes/mat/colors.js
@@ -1,4 +1,4 @@
-import { darken, lighten } from 'polished';
+import { shadeColors } from '../../utils/shade-colors';
 
 const colorsToShade= {
 	primary: '#ff790a',
@@ -11,16 +11,7 @@ const colorsToShade= {
 	sand: '#f8f8f1',
 };
 
-// Creates 4 shades of each color in colorsToShade
-// For example: primary becomes primary, primaryDark, primaryLight and primaryLighter
-const shadedColors = Object.keys(colorsToShade).map(color => ({
-	[`${color}`]: colorsToShade[color],
-	[`${color}Dark`]: darken(0.2, colorsToShade[color]),
-	[`${color}Light`]: lighten(0.15, colorsToShade[color]),
-	[`${color}Lighter`]: lighten(0.3, colorsToShade[color]),
-}));
-
-const combinedShadedColors = shadedColors.reduce((acc, cur) => Object.assign(acc, cur), {});
+const combinedShadedColors = shadeColors(colorsToShade);
 
 const skinColors = {
 	type: 'darkness',

diff --git a/src/themes/seher/index.js b/src/themes/seher/index.js
@@ -1,4 +1,4 @@
-import { darken, lighten } from 'polished';
+import { shadeColors } from '../../utils/shade-colors';
 
 import { cssReset } from '../../utils/css-reset';
 
@@ -14,16 +14,8 @@ const colorsToShade= {
 	black: '#222222',
 	darkness: '#272727',
 };
-// Creates 4 shades of each color in colorsToShade
-// For example: primary becomes primary, primaryDark, primaryLight and primaryLighter
-const shadedColors = Object.keys(colorsToShade).map(color => ({
-	[`${color}`]: colorsToShade[color],
-	[`${color}Dark`]: darken(0.2, colorsToShade[color]),
-	[`${color}Light`]: lighten(0.15, colorsToShade[color]),
-	[`${color}Lighter`]: lighten(0.3, colorsToShade[color]),
-}));
-
-const combinedShadedColors = shadedColors.reduce((acc, cur) => Object.assign(acc, cur), {});
+
+const combinedShadedColors = shadeColors(colorsToShade);
 
 const colors = {
 	grayTint: '#C0C0C0',

diff --git a/src/themes/start/colors.js b/src/themes/start/colors.js
@@ -1,4 +1,4 @@
-import { darken, lighten } from 'polished';
+import { shadeColors } from '../../utils/shade-colors';
 
 const colorsToShade = {
 	primary: '#7a9a26',
@@ -7,15 +7,7 @@ const colorsToShade = {
 	pageBackground: '#f9f9f9',
 };
 
-// Creates 4 shades of each color in colorsToShade
-// For example: primary becomes primary, primaryDark, primaryLight and primaryLighter
-const shadedColors = Object.keys(colorsToShade).map(color => ({
-	[`${color}`]: colorsToShade[color],
-	[`${color}Dark`]: darken(0.2, colorsToShade[color]),
-	[`${color}Light`]: lighten(0.15, colorsToShade[color]),
-	[`${color}Lighter`]: lighten(0.3, colorsToShade[color]),
-}));
-const combinedShadedColors = shadedColors.reduce((acc, cur) => Object.assign(acc, cur), {});
+const combinedShadedColors = shadeColors(colorsToShade);
 
 const skinColors = {
 	type: 'darkness',

diff --git a/src/themes/topp/colors.js b/src/themes/topp/colors.js
@@ -1,20 +1,17 @@
-import { darken, lighten } from 'polished';
+import { shadeColors, defaultShadeScheme } from '../../utils/shade-colors';
 
 const colorsToShade= {
 	primary: '#ff1c56',
 	secondary: '#0000ff',
 };
 
-// Creates 4 shades of each color in colorsToShade
-// For example: primary becomes primary, primaryDark, primaryLight and primaryLighter
-const shadedColors = Object.keys(colorsToShade).map(color => ({
-	[`${color}`]: colorsToShade[color],
-	[`${color}Dark`]: darken(0.1, colorsToShade[color]),
-	[`${color}Light`]: lighten(0.15, colorsToShade[color]),
-	[`${color}Lighter`]: lighten(0.3, colorsToShade[color]),
-}));
+const shadeScheme = {
+	dark: 0.1,
+};
+
+const shades = Object.assign({}, defaultShadeScheme, shadeScheme);
 
-const combinedShadedColors = shadedColors.reduce((acc, cur) => Object.assign(acc, cur), {});
+const combinedShadedColors = shadeColors(colorsToShade, shades);
 
 const colors = {
 	...combinedShadedColors,

diff --git a/src/themes/vi/colors.js b/src/themes/vi/colors.js
@@ -1,4 +1,4 @@
-import { darken, lighten } from 'polished';
+import { shadeColors, defaultShadeScheme } from '../../utils/shade-colors';
 
 const colorsToShade= {
 	primary: '#064163',
@@ -13,16 +13,13 @@ const colorsToShade= {
 	darkness: '#333333',
 };
 
-// Creates 4 shades of each color in colorsToShade
-// For example: primary becomes primary, primaryDark, primaryLight and primaryLighter
-const shadedColors = Object.keys(colorsToShade).map(color => ({
-	[`${color}`]: colorsToShade[color],
-	[`${color}Dark`]: darken(0.1, colorsToShade[color]),
-	[`${color}Light`]: lighten(0.15, colorsToShade[color]),
-	[`${color}Lighter`]: lighten(0.3, colorsToShade[color]),
-}));
+const shadeScheme = {
+	dark: 0.1,
+};
+
+const shades = Object.assign({}, defaultShadeScheme, shadeScheme);
 
-const combinedShadedColors = shadedColors.reduce((acc, cur) => Object.assign(acc, cur), {});
+const combinedShadedColors = shadeColors(colorsToShade, shades);
 
 const colors = {
 	...combinedShadedColors,