feat #142 - Fix bug: shades & tints not generated

src/components/Button/utils.ts

@@ -2,7 +2,7 @@ import { styleguide, themedStyles, ThemeType } from 'components/assets/styles'
 
 const {
 	borderRadius,
-	colors: { blacks }
+	colors: { blacks, grays }
 } = styleguide
 
 const { dark, light } = ThemeType
@@ -19,10 +19,10 @@ const buttonPalette = {
 	},
 	[light]: {
 		color: blacks['lighten-30'],
-		disabledBgColor: blacks['lighten-90'],
+		disabledBgColor: grays.base,
 		hoverColor: blacks['darken-20'],
 		primaryBackgroundColor: blacks.base,
-		primaryDisabledBgColor: blacks['lighten-90'],
+		primaryDisabledBgColor: grays.base,
 		primaryDisabledTextColor: blacks['lighten-80'],
 		primaryHoverBgColor: blacks['lighten-50']
 	}

src/components/Toggle/utils.ts

@@ -1,15 +1,15 @@
 import colors from 'components/assets/styles/colors'
 import { ThemeType } from 'components/assets/styles/themes'
 
-const { blacks, whites } = colors
+const { blacks, grays, whites } = colors
 
 const { dark, light } = ThemeType
 
 const togglePalette = {
 	[dark]: {
 		active: {
 			primary: blacks['lighten-30'],
-			secondary: blacks['lighten-90']
+			secondary: grays.base
 		},
 		disabled: {
 			primary: blacks['lighten-10'],
@@ -24,7 +24,7 @@ const togglePalette = {
 		active: { primary: blacks.base, secondary: whites.base },
 		disabled: {
 			primary: blacks['lighten-80'],
-			secondary: blacks['lighten-90']
+			secondary: grays.base
 		},
 		inactive: {
 			primary: blacks['lighten-50'],

src/components/assets/styles/colors.ts

@@ -2,20 +2,33 @@ import { ColorManipulationTypes, manipulateColor } from 'components/utils'
 
 const { shade, tint } = ColorManipulationTypes
 
-const black = '#282A35'
-const white = '#FEFEFE'
-const gray = '#EAEAEB'
+enum Colors {
+	black = 'black',
+	blue = 'blue',
+	gray = 'gray',
+	green = 'green',
+	orange = 'orange',
+	red = 'red',
+	white = 'white'
+}
+
+const { black, blue, gray, green, orange, red, white } = Colors
 
-const blue = '#2F54EB'
-const green = '#59C93D'
-const orange = '#EEAB47'
-const red = '#EE5C47'
+const baseColors = {
+	[black]: '#282A35',
+	[blue]: '#2F54EB',
+	[gray]: '#EAEAEB',
+	[green]: '#59C93D',
+	[orange]: '#EEAB47',
+	[red]: '#EE5C47',
+	[white]: '#FEFEFE'
+}
 
 interface Base {
 	base: string
 }
 
-interface Blacks extends Base {
+interface BlackTints {
 	'lighten-80': string
 	'lighten-70': string
 	'lighten-60': string
@@ -24,52 +37,67 @@ interface Blacks extends Base {
 	'lighten-30': string
 	'lighten-20': string
 	'lighten-10': string
+}
+
+interface BlackShades {
 	'darken-10': string
 	'darken-20': string
 	'darken-40': string
 }
 
+type Blacks = Base & BlackShades & BlackTints
+
 interface Grays extends Base {
 	'lighten-70': string
 	'lighten-40': string
 }
 
 const percentages: Record<string, any> = {
-	black: { darken: [10, 20, 40], lighten: [10, 20, 30, 40, 50, 60, 70, 80] },
-	gray: { lighten: [40, 70] }
+	[black]: {
+		darken: [10, 20, 40],
+		lighten: [10, 20, 30, 40, 50, 60, 70, 80]
+	},
+	[gray]: { lighten: [40, 70] }
 }
 
-const generateTints = (baseColor: string, percentArr: number[] = []) => {
-	const shades = {} as Record<string, string>
-
-	percentArr.forEach(percentage => {
-		const shadeKey = `lighten-${percentage}`
-		shades[shadeKey] = manipulateColor(baseColor, percentage, tint)
-	})
-
-	return shades
+interface GenerateTintsOrShades {
+	(
+		baseColor: string,
+		type: ColorManipulationTypes.shade | ColorManipulationTypes.tint,
+		percentArr: number[]
+	): Record<string, string>
 }
 
-const generateShades = (baseColor: string, percentArr: number[] = []) => {
-	const shades = {} as Record<string, string>
+const generateTintsOrShades: GenerateTintsOrShades = (
+	baseColor,
+	type,
+	percentArr = []
+) => {
+	const colors = {} as Record<string, string>
 
 	percentArr.forEach(percentage => {
-		const shadeKey = `darken-${percentage}`
-		shades[shadeKey] = manipulateColor(baseColor, percentage, shade)
+		const key =
+			type === shade ? `darken-${percentage}` : `lighten-${percentage}`
+
+		colors[key] = manipulateColor(baseColor, percentage, type)
 	})
 
-	return shades
+	return colors
 }
 
-const generateTintsAndShades = (baseColor: string) => {
-	const shades = {
-		base: baseColor,
-		...generateTints(baseColor, percentages[baseColor]?.lighten),
-		...generateShades(baseColor, percentages[baseColor]?.darken)
-	}
-
-	return shades
-}
+const generateTintsAndShades = (color: Colors) => ({
+	base: baseColors[color],
+	...generateTintsOrShades(
+		baseColors[color],
+		tint,
+		percentages[color]?.lighten
+	),
+	...generateTintsOrShades(
+		baseColors[color],
+		shade,
+		percentages[color]?.darken
+	)
+})
 
 export interface ColorsType {
 	blacks: Blacks
@@ -83,12 +111,12 @@ export interface ColorsType {
 
 const colors: ColorsType = {
 	blacks: generateTintsAndShades(black) as Blacks,
-	blues: { base: blue },
+	blues: { base: baseColors[blue] },
 	grays: generateTintsAndShades(gray) as Grays,
-	greens: { base: green },
-	oranges: { base: orange },
-	reds: { base: red },
-	whites: { base: white }
+	greens: { base: baseColors[green] },
+	oranges: { base: baseColors[orange] },
+	reds: { base: baseColors[red] },
+	whites: { base: baseColors[white] }
 }
 
 export default colors