styled-components.com/color-schemer
A demo React app built with 💅 styled-components and ✨ polished.
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 /> │││
│││ ││ ││ ││ ││ │││
││└───────────┘└───────────┘└───────────┘└───────────┘└───────────┘││
│└─────────────────────────────────────────────────────────────────┘│
└───────────────────────────────────────────────────────────────────┘
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.
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 serverCopyright (c) 2017 Maximilian Stoiber. Licensed under the MIT License, see the LICENSE file for more information.