diff --git a/src/App.js b/src/App.js index a311850..e93aa28 100644 --- a/src/App.js +++ b/src/App.js @@ -9,16 +9,48 @@ const S = {}; class Shade extends React.Component { render() { return ( -
{this.props.color}
+
+ {this.props.color} +
); } } S.Shade = styled(Shade)` - padding: 1rem 2rem; - background-color: ${props => props.color}; +width: 100%; +height: 100%; +background-color: ${props => props.color}; +display: flex; +flex-direction: row; +justify-content: center; +align-items: center; + +span { + font-weight: bold; + color: ${props => chroma.contrast(props.color, '#000') < 4.5 ? '#fff' : '#000'}; + opacity: 0; +} + + &:hover span { + opacity: 0.9; + } `; +S.ShadeBase = styled(S.Shade)` +border: 3px solid rgba(0, 0, 0, 0.5); +`; + +function IncDecButton(props) { + return ( +
+
{props.children}
+ + {props.value} + +
+ ); +} + class Color extends React.Component { constructor(props) { super(props); @@ -29,63 +61,151 @@ class Color extends React.Component { chromaColor: chroma(this.props.baseColor), tints: tints, shades: shades, + brightenAmount: this.props.brightenAmount, + darkenAmount: this.props.darkenAmount, + scaleShadeStart: this.props.scaleShadeStart, + scaleShadeEnd: this.props.scaleShadeEnd, + scaleShadeStep: this.props.scaleShadeStep, + scaleTintStart: this.props.scaleTintStart, + scaleTintEnd: this.props.scaleTintEnd, + scaleTintStep: this.props.scaleTintStep, } + + this.incState = this.incState.bind(this); + this.handleClick = this.handleClick.bind(this); } - setTints(brightenAmount, start, end, step) { + setTints() { this.setState((state) => { - const scaleTints = chroma.scale([state.chromaColor.brighten(brightenAmount), state.chromaColor]); + const scaleTints = chroma.scale([state.chromaColor.brighten(state.brightenAmount), state.chromaColor]); const tints = []; - for (let i = start; i < end; i += step) { + for (let i = state.scaleTintStart; i < state.scaleTintEnd; i += state.scaleTintStep) { tints.push(scaleTints(i).hex()); } return {tints: tints} }); } - setShades(darkenAmount, start, end, step) { + setShades() { this.setState((state) => { - const scaleShades = chroma.scale([state.chromaColor, state.chromaColor.darken(darkenAmount)]); + const scaleShades = chroma.scale([state.chromaColor, state.chromaColor.darken(state.darkenAmount)]); const shades = []; - for (let i = start; i < end; i += step) { + for (let i = state.scaleShadeStart; i < state.scaleShadeEnd; i += state.scaleShadeStep) { shades.push(scaleShades(i).hex()); } return {shades: shades} }); } + handleClick() { + const chromaColor = chroma.random(); + this.setState({baseColor: chromaColor.hex(), chromaColor: chromaColor}); + this.setTints(); + this.setShades(); + } + + incState(stateProperty, value) { + this.setState((state, props) => { + const returnObj = {}; + returnObj[stateProperty] = state[stateProperty] + value; + return returnObj; + }) + this.setTints(); + this.setShades(); + } + componentDidMount() { - this.setTints(2, 0.2, 0.9, 0.2); - this.setShades(5, 0.1, 0.9, 0.1); + this.setTints(); + this.setShades(); } render() { return ( - + + ); } } +Color.defaultProps = { + brightenAmount: 3, + darkenAmount: 3, + scaleShadeStart: 0.2, + scaleShadeEnd: 0.8, + scaleShadeStep: 0.1, + scaleTintStart: 0.2, + scaleTintEnd: 0.8, + scaleTintStep: 0.1, +} + S.Color = styled(Color)` -list-style: none; -padding: 0; -margin: 0; +display: flex; +flex-direction: column; +justify-content: stretch; +align-items: stretch; + +ul { + display: flex; + flex-direction: column; + justify-content: stretch; + align-items: stretch; + + list-style: none; + padding: 0; + margin: 0; +} + +li { + display: flex; + flex-direction: column; + justify-content: stretch; + align-items: stretch; + flex: 1 1 100%; +} `; function App() { - return ( -
- -
- ); + return ( +
+ + +
+ ); } export default App; + + +// vim: set ft=javascriptreact: