All files / color shade.js

100% Statements 3/3
100% Branches 5/5
100% Functions 1/1
100% Lines 2/2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35                                                          4x 2x        
// @flow
 
import mix from './mix'
import curry from '../internalHelpers/_curry'
 
/**
 * Shades a color by mixing it with black. Compared to `darken` it can produce
 * hue shifts, wheres `darken` manipulates the luminance channel and therefor
 * doesn't produce hue shifts.
 *
 * @example
 * // Styles as object usage
 * const styles = {
 *   background: shade(0.25, '#00f')
 * }
 *
 * // styled-components usage
 * const div = styled.div`
 *   background: ${shade(0.25, '#00f')};
 * `
 *
 * // CSS in JS Output
 *
 * element {
 *   background: "#00003f";
 * }
 */
 
function shade(percentage: number, color: string) {
  if (typeof percentage !== 'number' || percentage > 1 || percentage < -1) throw new Error('Passed an incorrect argument to shade, please pass a percentage less than or equal to 1 and larger than or equal to -1.')
  return mix(percentage, color, 'rgb(0, 0, 0)')
}
 
export default curry(shade)