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 server
Copyright (c) 2017 Maximilian Stoiber. Licensed under the MIT License, see the LICENSE file for more information.