feat #92 - Theming

[sam-dassana]

Notes:

1. Added theming views — dark, light and side-by-side to storybook. whew This was a lot of work and I have been asked to write documentation in the github issue in storybook :D
   

2. Base colors only have one shade for now except for black which will have multiple tints and two shades.
   Naming convention is blacks['lighten-10'] or blacks['darken-10'].

Notion link to research and gifs on how various implementations looks like.
closes #92
closes #104

[nancy-dassana]

Great start, @sam-m-m ! Love the side-by-side view

[parth-dassana]

1 word: #badass

[parth-dassana]

LGTM

[parth-dassana]

LGTM, just a couple of minor comments

[parth-dassana]

couple of comments

[sam-dassana]

As cool as this is, I feel it's repetitive. Above you have the following defined:

const lightenPercentages = [10, 30, 50, 70, 90]
const darkenPercentages = [10, 20, 50, 70]

If there is ever a change, now a developer has to go update two things - the array and the interface. That said, I see why you needed to do this, it's TS related. Additionally, because you have two interfaces you have two functions that basically do the same thing outside of the string involved. I think it would be significantly cleaner if you did something along the lines of the following:

const lightenPercentages = [10, 30, 50, 70, 90]
const darkenPercentages = [10, 20, 50, 70]

interface ShadeType {
	base: string
	[key: string]: string
}

const genShades = (
	baseColor: string,
	percentArr: number[],
	manipulationType: ColorManipulationTypes
) => {
	const shades = {} as ShadeType

	percentArr.forEach(percentage => {
		const shadeKey = `${manipulationType}-${percentage}`
		shades[shadeKey] = manipulateColor(
			baseColor,
			percentage,
			manipulationType
		)
	})

	return shades
}

const getShadesOfColor = (baseColor: string) => {
	const shades: ShadeType = {
		...genShades(baseColor, lightenPercentages, lighten),
		...genShades(baseColor, darkenPercentages, darken),
		base: baseColor
	}

	return shades
}

If we do it this way, you don't have specific key types so you can't do this:

When you're using the colors, you'll have to either reference the color file or guess what the provided colors are.

I tried to do it with generics but ran into errors:

I haven't spent a lot of time researching this, but I'll look into it after I'm done writing the color manipulator functions. If either of you guys figure out how to write this cleaner without losing the key types, lmk. @nancy-dassana @parth-dassana

[parth-dassana]

Gotcha. In that case, disregard my comment. I would much rather we have the possible values available.

…

On Wed, Oct 7, 2020 at 1:22 PM Sam M. ***@***.***> wrote: As cool as this is, I feel it's repetitive. Above you have the following defined: const lightenPercentages = [10, 30, 50, 70, 90] const darkenPercentages = [10, 20, 50, 70] If there is ever a change, now a developer has to go update two things - the array and the interface. That said, I see why you needed to do this, it's TS related. Additionally, because you have two interfaces you have two functions that basically do the same thing outside of the string involved. I think it would be significantly cleaner if you did something along the lines of the following: const lightenPercentages = [10, 30, 50, 70, 90] const darkenPercentages = [10, 20, 50, 70] interface ShadeType { base: string [key: string]: string } const genShades = ( baseColor: string, percentArr: number[], manipulationType: ColorManipulationTypes ) => { const shades = {} as ShadeType percentArr.forEach(percentage => { const shadeKey = `${manipulationType}-${percentage}` shades[shadeKey] = manipulateColor( baseColor, percentage, manipulationType ) }) return shades } const getShadesOfColor = (baseColor: string) => { const shades: ShadeType = { ...genShades(baseColor, lightenPercentages, lighten), ...genShades(baseColor, darkenPercentages, darken), base: baseColor } return shades } If we do it this way, you don't have specific key types so you can't do this: [image: Screen Shot 2020-10-06 at 1 05 01 PM] <https://user-images.githubusercontent.com/68707128/95382684-e3860c00-089e-11eb-9a2e-fa0cf5fdde9a.png> When you're using the colors, you'll have to either reference the color file or guess what the provided colors are. I tried to do it with generics but ran into errors: [image: Screen Shot 2020-10-07 at 1 16 11 PM] <https://user-images.githubusercontent.com/68707128/95383209-aff7b180-089f-11eb-8bd3-2af32e6b32d2.png> [image: Screen Shot 2020-10-07 at 1 16 29 PM] <https://user-images.githubusercontent.com/68707128/95383220-b25a0b80-089f-11eb-993c-4e2badb80206.png> I haven't spent a lot of time researching this, but I'll look into it after I'm done writing the color manipulator functions. If either of you guys figure out how to write this cleaner without losing the key types, lmk. @nancy-dassana <https://github.com/nancy-dassana> @parth-dassana <https://github.com/parth-dassana> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#97 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQMGI4Z7VXH5R6UFYF2WMBTSJTEZZANCNFSM4R5BZBAA> .

[nancy-dassana]

Nice work, @sam-m-m ! Just a few comments

[nancy-dassana]

LGTM

Stale review