implement shade/tint generation
This commit is contained in:
parent
6f6fcd57d3
commit
d493d646ab
48
src/App.js
48
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>
|
||||
);
|
||||
}
|
||||
|
|
Reference in New Issue