Meet Polished: a JS library for color manipulation

I really enjoyed lightening and darkening colors with the polished library — it pairs nicely with Styled Components for component styling.

• Install

yarn add polished styled-components

• Usage

import styled from 'styled-components';
import { darken } from 'polished';

button {
      background: #7169c1;
      color: #fff;
      border: 0;
      border-radius: 4px;
      overflow: hidden;
      margin-top: auto;

      display: flex; 
      align-items: center;

      &:hover {
        background: ${darken(0.03, '#7169c1')};
      }
}

See it in action:

https://youtu.be/CbFMwHvHK1Y

Check out more on the official site: https://polished.js.org

code