From d493d646abc26d05b41f3daf03836cd915a3434e Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Sun, 26 Apr 2020 19:08:23 +0100
Subject: [PATCH] implement shade/tint generation

---
 src/App.js | 48 +++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index 9b70163..a311850 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,8 @@
+import chroma from 'chroma-js';
 import React from 'react';
 import styled from 'styled-components';
 import './App.css';
 
-const DEFAULT_SHADE_COUNT = 9;
-
 // an object to hold our styled components
 const S = {};
 
@@ -23,22 +22,53 @@ S.Shade = styled(Shade)`
 class Color extends React.Component {
 	constructor(props) {
 		super(props);
+		const tints = [];
+		const shades = [];
 		this.state = {
 			baseColor: this.props.baseColor,
-			shades: [],
-			shadeCount: this.props.shadeCount ? this.props.shadeCount : DEFAULT_SHADE_COUNT,
-		}
-		for (let index = 0; index < this.state.shadeCount; index++) {
-			this.state.shades.push(this.props.baseColor);
+			chromaColor: chroma(this.props.baseColor),
+			tints: tints,
+			shades: shades,
 		}
 	}
 
+	setTints(brightenAmount, start, end, step) {
+		this.setState((state) => {
+			const scaleTints = chroma.scale([state.chromaColor.brighten(brightenAmount), state.chromaColor]);
+			const tints = [];
+			for (let i = start; i < end; i += step) {
+				tints.push(scaleTints(i).hex());
+			}
+			return {tints: tints}
+		});
+	}
+
+	setShades(darkenAmount, start, end, step) {
+		this.setState((state) => {
+			const scaleShades = chroma.scale([state.chromaColor, state.chromaColor.darken(darkenAmount)]);
+			const shades = [];
+			for (let i = start; i < end; i += step) {
+				shades.push(scaleShades(i).hex());
+			}
+			return {shades: shades}
+		});
+	}
+
+	componentDidMount() {
+		this.setTints(2, 0.2, 0.9, 0.2);
+		this.setShades(5, 0.1, 0.9, 0.1);
+	}
+
 	render() {
 		return (
 			<ul className={this.props.className}>
-				{this.state.shades.map((shade, index) => 
+				{this.state.tints.map((shade, index) => 
 					<li key={index}><S.Shade color={shade} /></li>
 				)}
+				<li><S.Shade color={this.state.baseColor} /></li>
+				{this.state.shades.map((tint, index) => 
+					<li key={index}><S.Shade color={tint} /></li>
+				)}
 			</ul>
 		);
 	}
@@ -53,7 +83,7 @@ margin: 0;
 function App() {
   return (
     <div className="App">
-			<S.Color className="color-list" baseColor="#ff0000"/>
+			<S.Color className="color-list" baseColor="#dbdfac"/>
     </div>
   );
 }