ST
styled-components/color-schemer
A React app to help you select a color scheme, built with styled-components and polished
Color Schemer
A demo React app built with 💅 styled-components and ✨ polished.
Structure
Every component has a folder beneath the src/ folder, with an index.js containing the component and a style.js containing the styled components used within that component.
colors
├── App
├── Tile
├── Tiles
├── global-styles.js # The global styles
└── index.js┌───────────────────────────────────────────────────────────────────┐
│ <App /> │
│┌─────────────────────────────────────────────────────────────────┐│
││ ││
││ ││
││ <BigTile /> ││
││ ││
││ ││
│└─────────────────────────────────────────────────────────────────┘│
│┌─────────────────────────────────────────────────────────────────┐│
││ <Tiles /> ││
││┌───────────┐┌───────────┐┌───────────┐┌───────────┐┌───────────┐││
│││ ││ ││ ││ ││ │││
│││ <Tile /> ││ <Tile /> ││ <Tile /> ││ <Tile /> ││ <Tile /> │││
│││ ││ ││ ││ ││ │││
││└───────────┘└───────────┘└───────────┘└───────────┘└───────────┘││
│└─────────────────────────────────────────────────────────────────┘│
└───────────────────────────────────────────────────────────────────┘
Calculation
We take the entered color, convert it to HSL and render the same hue and saturation with lightness' of 0.1, 0.3, 0.5, 0.7 and 0.9.
Running locally
git clone https://github.com/styled-components/color-schemer
cd color-schemer # Go to downloaded directory
npm install # Install dependencies
npm start # Start the development serverUses
License
Copyright (c) 2017 Maximilian Stoiber. Licensed under the MIT License, see the LICENSE file for more information.