Skip to content

Instantly share code, notes, and snippets.

@MKlblangenois
Last active December 16, 2019 22:12
Show Gist options
  • Save MKlblangenois/646d9a88f0f09a0d8fb965b41be3ca38 to your computer and use it in GitHub Desktop.
Save MKlblangenois/646d9a88f0f09a0d8fb965b41be3ca38 to your computer and use it in GitHub Desktop.
LIgthen & Darken color in JS like Sass
/**
* Split HSL(a) Color code.
*
* Get the HSL(a) color code and return an array with each value of HSL.
*
* @since 0.1.0
*
* @param {string} HSLa HSL(a) color code.
*
* @return {array} Return each value of HSLa code in an array.
*/
const splitHSLa = HSLa => {
if(HSLa.substring(0, 3) === 'hsl') {
// On vérifie d'abord si il s'agit d'un code HSL ou HSLA,
// on récupère ensuite les valeurs entre parenthèses,
// puis on sépare chaque valeur par virgule,
// et on supprime les espaces dans chaque élément.
return HSLa.substring((HSLa.substring(0, 4) === 'hsla') ? 5 : 4, HSLa.length - 1 ).split(',').map(item => item.trim());
} else {
return false
}
}
/**
* Concat value in HSL(a) code.
*
* Get each value of color in array and return an HSL(a) code.
*
* @since 0.1.0
*
* @param {array} HSLaValues HSL(a) value in array.
*
* @return {array} Return HSL(a) color code.
*/
const concatHSLa = HSLaValues => {
return `${(HSLaValues.length == 4) ? `hsla` : `hsl`}(${HSLaValues.join(', ')})`
}
const lightenHSLa = (HSLa, amount) => {
// TODO: Il faudra ajouter une étape pour convertir :
// TODO: - RGBa to HSLa
// TODO: - HEXa to HSLa
// ! pour l'instant, assumons qu'il s'agisse d'un code HSLa
let HSLaValues = splitHSLa(HSLa);
HSLaValues[2] = (parseInt(HSLaValues[2].substring(0, HSLaValues[2].length - 1)) + amount >= 100)
? `100%` : `${(parseInt(HSLaValues[2].substring(0, HSLaValues[2].length - 1)) + amount)}%`
return concatHSLa(HSLaValues)
}
const darkenHSLa = (HSLa, amount) => {
// TODO: Il faudra ajouter une étape pour convertir :
// TODO: - RGBa to HSLa
// TODO: - HEXa to HSLa
// ! pour l'instant, assumons qu'il s'agisse d'un code HSLa
let HSLaValues = splitHSLa(HSLa);
HSLaValues[2] = (parseInt(HSLaValues[2].substring(0, HSLaValues[2].length - 1)) - amount < 0)
? `0%` : `${(parseInt(HSLaValues[2].substring(0, HSLaValues[2].length - 1)) - amount)}%`
return concatHSLa(HSLaValues)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment