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 (
-
- {this.state.tints.map((shade, index) =>
+
+
+ { this.incState("brightenAmount", 0.25); }}
+ onDecrement={() => { this.incState("brightenAmount", -0.25); }}
+ value={this.state.brightenAmount}
+ >
+ Brightness
+
+
+
+
+ {this.state.tints.map((shade, index) =>
- )}
-
- {this.state.shades.map((tint, index) =>
+ )}
+
+ {this.state.shades.map((tint, index) =>
- )}
-
+ )}
+
+
+
);
}
}
+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: