function shade ( color , percent ) { if ( color . length > 7 ) { return shadeRGBColor ( color , percent ) ; } return shadeHexColor ( color , percent ) ; } function shadeRGBColor ( color , percent ) { const components = color . split ( ',' ) ; const t = percent < 0 ? 0 : 255 ; const p = percent < 0 ? percent * - 1 : percent ; const R = parseInt ( components [ 0 ] . slice ( 4 ) , 10 ) ; const G = parseInt ( components [ 1 ] , 10 ) ; const B = parseInt ( components [ 2 ] , 10 ) ; return ( 'rgb(' + ( Math . round ( ( t - R ) * p ) + R ) + ',' + ( Math . round ( ( t - G ) * p ) + G ) + ',' + ( Math . round ( ( t - B ) * p ) + B ) + ')' ) ; } function shadeHexColor ( color , percent ) { const hex = parseInt ( color . slice ( 1 ) , 16 ) ; const t = percent < 0 ? 0 : 255 ; const p = percent < 0 ? percent * - 1 : percent ; const R = hex >> 16 ; const G = ( hex >> 8 ) & 0x00FF ; const B = hex & 0x0000FF ; return ( '#' + ( 0x1000000 + ( Math . round ( ( t - R ) * p ) + R ) * 0x10000 + ( Math . round ( ( t - G ) * p ) + G ) * 0x100 + ( Math . round ( ( t - B ) * p ) + B ) ) . toString ( 16 ) . slice ( 1 ) ) ; } param { string } color param { number } perc returns { string } export function darken ( color , perc ) { if ( color === 'transparent' ) { return 'transparent' ; } return shade ( color , - ( perc / 100 ) ) ; } param { string } color param { number } perc returns { string } export function lighten ( color , perc ) { if ( color === 'transparent' ) { return 'transparent' ; } return shade ( color , perc / 100 ) ; }