implement shade/tint generation

This commit is contained in:
Ray Elliott 2020-04-26 19:08:23 +01:00
parent 6f6fcd57d3
commit d493d646ab
1 changed files with 39 additions and 9 deletions

View File

@ -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>
);
}