rayelliott
/
react-pallette-generator
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add styling

This commit is contained in:
Ray Elliott 2020-04-28 22:22:23 +01:00
parent 085b62e98f
commit 707551af38
2 changed files with 262 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/App.css
View File

@ -1,38 +1,34 @@
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
button,
body {
color: #fff;
background-color: #202020;
}
.App { .App {
text-align: center; width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
justify-content: stretch;
align-items: stretch;
} }
.App-logo { .article {
height: 40vmin; position: relative;
pointer-events: none; width: 100%;
} height: 100%;
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; justify-content: stretch;
justify-content: center; align-items: stretch;
font-size: calc(10px + 2vmin);
color: white;
} }
.App-link { button {
color: #61dafb; cursor: pointer;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} }

281
src/App.js
View File

@ -1,4 +1,4 @@
import palette from 'nice-color-palettes'; import niceColorPalette from 'nice-color-palettes';
import chroma from 'chroma-js'; import chroma from 'chroma-js';
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
@ -7,48 +7,172 @@ import './App.css';
// an object to hold our styled components // an object to hold our styled components
const S = {}; const S = {};
class Shade extends React.Component { S.Button = styled.button`
render() { width: 100%;
return ( display: flex;
<div className={this.props.className}> justify-content: center;
<span>{this.props.color}</span> align-items: center;
</div> background: none;
); border: 0;
}
}
S.Shade = styled(Shade)`
background-color: ${props => props.color};
span {
font-weight: bold; font-weight: bold;
color: ${props => chroma.contrast(props.color, '#000') < 4.5 ? '#fff' : '#000'}; opacity: 0.6;
opacity: 0; min-height: 3em;
}
&:hover span { &:hover {
opacity: 0.9; opacity: 1;
} }
`; `;
S.ShadeBase = styled(S.Shade)` S.ShadeBG = styled.span.attrs(
border-top: 3px solid rgba(0, 0, 0, 0.5); ({ color }) => ({
border-bottom: 3px solid rgba(0, 0, 0, 0.5); style: {
backgroundColor: color,
}
})
)`
width: 100%;
height: 100%;
`;
S.ShadeText = styled.span.attrs(
({ color }) => ({
style: {
color: chroma.contrast(color, '#000') < 4.5 ? '#fff' : '#000'
}
})
)`
width: 100%;
height: 100%;
`;
function ShadeBox(props) {
return (
<div className={props.className}>
<S.ShadeBG color={props.color} />
<S.ShadeText className="text" color={props.color}>{props.color}</S.ShadeText>
</div>
);
}
S.ShadeBox = styled(ShadeBox)`
position: relative;
width: 100%;
height: 100%;
font-weight: bold;
span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.text {
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
&:hover {
opacity: 0.7;
}
}
`;
S.ShadeBoxBase = styled(S.ShadeBox)`
.text {
opacity: 0.7;
}
`; `;
function IncDecButton(props) { function IncDecButton(props) {
return ( return (
<div className={props.className}> <div className={props.className}>
<div>{props.children}</div> <span>{props.children}</span>
<button type="button" onClick={props.onDecrement}>-</button> <button className="btn-l" type="button" onClick={props.onDecrement}>-</button>
{props.value !== undefined && {props.value !== undefined &&
<span>{props.value}</span> <span>{props.value}</span>
} }
<button type="button" onClick={props.onIncrement}>+</button> <button className="btn-r" type="button" onClick={props.onIncrement}>+</button>
</div> </div>
); );
} }
S.IncDecButton = styled(IncDecButton)`
position: relative;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 3em;
span {
opacity: 0.6;
font-weight: bold;
padding: 0.25em 25%;
&:first-child {
padding: 0.25em 1em;
}
}
button {
position: absolute;
width: 50%;
height: 100%;
top: 0;
background: transparent;
border: none;
font-size: 2em;
font-weight: bold;
opacity: 0.5;
padding: 0.25em 0.5em;
&.btn-l {
left: 0;
border-right-width: 0;
padding-right: 25%;
&:hover {
opacity: 1;
}
}
&.btn-r {
right: 0;
border-left-width: 0;
padding-left: 25%;
&:hover {
opacity: 1;
}
}
}
`;
S.GradientBG = styled.span`
opacity: 0.3;
background:
linear-gradient(to bottom,
rgba(0, 0, 0, 1),
rgba(0, 0, 0, 0) 12rem
),
linear-gradient(to top,
rgba(0, 0, 0, 1),
rgba(0, 0, 0, 0) 10rem
),
linear-gradient(
to right,
${props => props.colorList.map((color, index) => {
const lineEnd = props.colorList.length - 1 === index ? "" : ",";
return color + lineEnd;
})}
);
`;
class Color extends React.Component { class Color extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -125,44 +249,44 @@ class Color extends React.Component {
return ( return (
<div className={this.props.className}> <div className={this.props.className}>
<header> <header>
<button type="button" onClick={this.handleClick}>Random</button> <S.Button type="button" onClick={this.handleClick}>Random</S.Button>
<IncDecButton <S.IncDecButton
onIncrement={() => { this.incState("brightenAmount", 0.25); }} onIncrement={() => { this.incState("brightenAmount", 0.25); }}
onDecrement={() => { this.incState("brightenAmount", -0.25); }} onDecrement={() => { this.incState("brightenAmount", -0.25); }}
value={this.state.brightenAmount} value={this.state.brightenAmount}
> >
<span>Brightness</span> <span>Brightness</span>
</IncDecButton> </S.IncDecButton>
<IncDecButton <S.IncDecButton
onIncrement={() => { this.incState("scaleTintStepCount", 1); }} onIncrement={() => { this.incState("scaleTintStepCount", 1); }}
onDecrement={() => { this.incState("scaleTintStepCount", -1); }} onDecrement={() => { this.incState("scaleTintStepCount", -1); }}
> >
<span>Count</span> <span>Count</span>
</IncDecButton> </S.IncDecButton>
</header> </header>
<ul> <ul>
{this.state.tints.map((shade, index) => {this.state.tints.map((shade, index) =>
<li key={index}><S.Shade color={shade} /></li> <li key={"shade" + index}><S.ShadeBox color={shade}>{shade}</S.ShadeBox></li>
)} )}
<li><S.ShadeBase color={this.state.baseColor} isBase /></li> <li><S.ShadeBoxBase color={this.state.baseColor} isBase>{this.state.baseColor}</S.ShadeBoxBase></li>
{this.state.shades.map((tint, index) => {this.state.shades.map((tint, index) =>
<li key={index}><S.Shade color={tint} /></li> <li key={"tint" + index}><S.ShadeBox color={tint}>{tint}</S.ShadeBox></li>
)} )}
</ul> </ul>
<footer> <footer>
<IncDecButton <S.IncDecButton
onIncrement={() => { this.incState("scaleShadeStepCount", 1); }} onIncrement={() => { this.incState("scaleShadeStepCount", 1); }}
onDecrement={() => { this.incState("scaleShadeStepCount", -1); }} onDecrement={() => { this.incState("scaleShadeStepCount", -1); }}
> >
<span>Count</span> <span>Count</span>
</IncDecButton> </S.IncDecButton>
<IncDecButton <S.IncDecButton
onIncrement={() => { this.incState("darkenAmount", 0.25); }} onIncrement={() => { this.incState("darkenAmount", 0.25); }}
onDecrement={() => { this.incState("darkenAmount", -0.25); }} onDecrement={() => { this.incState("darkenAmount", -0.25); }}
value={this.state.darkenAmount} value={this.state.darkenAmount}
> >
<span>Darkness</span> <span>Darkness</span>
</IncDecButton> </S.IncDecButton>
</footer> </footer>
</div> </div>
); );
@ -175,7 +299,7 @@ Color.defaultProps = {
scaleShadeStart: 0.2, scaleShadeStart: 0.2,
scaleShadeEnd: 0.8, scaleShadeEnd: 0.8,
scaleShadeStepCount: 4, scaleShadeStepCount: 4,
scaleTintStart: 0.2, scaleTintStart: 0.1,
scaleTintEnd: 0.8, scaleTintEnd: 0.8,
scaleTintStepCount: 4, scaleTintStepCount: 4,
} }
@ -186,6 +310,23 @@ S.Color = styled(Color)`
justify-content: stretch; justify-content: stretch;
align-items: stretch; align-items: stretch;
header,
footer {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: center;
}
header {
padding-bottom: 1em;
}
footer {
padding-top: 1em;
padding-bottom: 1em;
}
ul { ul {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -217,7 +358,7 @@ class Palette extends React.Component {
} }
randomFivePalette() { randomFivePalette() {
const newPalette = palette[Math.floor(Math.random() * palette.length)]; const newPalette = niceColorPalette[Math.floor(Math.random() * niceColorPalette.length)];
this.setState({palette: newPalette}); this.setState({palette: newPalette});
} }
@ -235,9 +376,14 @@ class Palette extends React.Component {
</li> </li>
); );
return ( return (
<article> <article className={this.props.className}>
<button onClick={this.randomFivePalette}>Random Five Colour Palette</button> <S.GradientBG className="gradient-bg" colorList={this.state.palette.map(color => {
<ul className={this.props.className}> return chroma(color).darken(3);
})}/>
<ul className="button-list">
<li><button onClick={this.randomFivePalette}>Random Five Colour Palette</button></li>
</ul>
<ul className="palette-item">
{colors} {colors}
</ul> </ul>
</article> </article>
@ -246,7 +392,52 @@ class Palette extends React.Component {
} }
S.Palette = styled(Palette)` S.Palette = styled(Palette)`
display: flex; display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
flex: 1 1 100%;
font-size: 0.8rem;
.gradient-bg {
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
left: 0;
}
.palette-item {
flex: 1 1 100%;
> li {
flex: 1 1 100%;
}
}
li,
ul {
list-style: none;
}
> ul {
display: flex;
flex-direction: row;
justify-content: stretch;
align-items: stretch;
}
.color-list {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
height: 100%;
> ul {
flex: 1 1 100%;
}
}
`; `;
function App() { function App() {
@ -260,4 +451,4 @@ function App() {
export default App; export default App;
// vim: set ft=javascriptreact: // vim: set ft=javascriptreact:auto