Skip to content

Instantly share code, notes, and snippets.

@rogerhutchings
Last active October 28, 2019 11:37
Show Gist options
  • Save rogerhutchings/bbe782a3718ef1738f54f9b4633a0511 to your computer and use it in GitHub Desktop.
Save rogerhutchings/bbe782a3718ef1738f54f9b4633a0511 to your computer and use it in GitHub Desktop.
Create gradient bg
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
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;
}
`
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment