Create gradient bg

getGradientShade.js

const { parseToRgb, rgb } = require('polished')

function getGradientShade (hex) {
  const color = parseToRgb(hex)
  color.red = overlay(color.red)
  color.green = overlay(color.green)
  color.blue = overlay(color.blue)
  return rgb(color)
}

// Works like Photoshop's blend mode for a given color channel.
function overlay (source, overlay = 76) {
  const value = source < 128
    ? (2 * overlay * source / 255)
    : (255 - 2 * (255 - overlay) * (255 - source) / 255)
  return Math.round(value)
}

module.exports = getGradientShade

styles.js

const { normalizeColor } = require('grommet/utils')
const getGradientShade = require('./getGradientShade')

extend: props => {
  const isDark = !!props.theme.dark
  const isPlain = !!props.plain
  const globalColors = props.theme.global.colors

  const color = normalizeColor(props.colorValue || props.theme.button.border.color, props.theme)
  const darkColor = getGradientShade(color)

  return `
    &:hover {
      box-shadow: none;
      background: linear-gradient(${color}, ${darkColor});

    }

    &:active {
      background: linear-gradient(${darkColor}, ${color});
      color: white;
    }
  `
},