React Mixblend Duotone
a small starter for building a component library with styled-components ๐
Demo is at: https://sw-yx.github.io/react-styled-duotone/demo
Overview
This component lib uses:
CSS mix-blend mode styled-components, polished, styled-components-modifiers ๐
Color themes
- Primary-Color: #FBFBFB, Secondary-Color: #283B6B
- Primary-Color: #FCC862, Secondary-Color: #2D45C6
- Primary-Color: #71DF6F, Secondary-Color: #272D67
- Primary-Color: #D92037, Secondary-Color: #2A3060
- Primary-Color: #8ADFD0, Secondary-Color: #5C2998
- Primary-Color: #FCC862, Secondary-Color: #2D45C6
- Primary-Color: #A3D5CA, Secondary-Color: #E52839
Further reading
- https://css-tricks.com/almanac/properties/m/mix-blend-mode/ Demoed here and here
- http://webdesignerwall.com/tutorials/create-spotify-colorizer-effects-css-blend-modes
- also check out: https://github.com/nagelflorian/react-duotone and https://lukyvj.github.io/colofilter.css/
- or SVG filters demoed here and here and here
Up & Running
To install dependencies with Yarn, run:
$ yarn
or to install with npm, run:
$ npm install
Build
NOTE: When you run build
, Babel will create a build
directory. This is what your users
will interact with when they use your library. Nothing in lib
gets shipped with your
published module.
Run once:
$ npm run build
Run the watch script:
$ npm run build:watch
NOTE: the build script runs in the prepublish
script just before you publish to npm.
Publishing
If you already have an account with npm, you can simply run:
$ npm login
$ npm publish
If you don't have an account with npm:
NOTE: Your email address is public
$ npm set init.author.name "Your Name"
$ npm set init.author.email "[email protected]"
$ npm set init.author.url "http://yourblog.com"
$ npm adduser
$ npm publish
Contributing
I am thankful for any contributions made by the community. By contributing you agree to abide by the Code of Conduct in the Contributing Guidelines. https://hackernoon.com/building-a-react-component-library-part-2-46fd4f77bb5c