Skip to content

Commit

Permalink
Feat: More precise Hex to HSL conversion .Now HSL values round to 5 d…
Browse files Browse the repository at this point in the history 
…ecimal places instead of 0
  • Loading branch information
@saadeghi
saadeghi committed Jan 16, 2023
1 parent 4140552 commit 36d27f0
Showing 1 changed file with 20 additions and 20 deletions.
40 changes: 20 additions & 20 deletions src/colors/functions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ module.exports = {

generateForegroundColorFrom: function (input, percentage = 0.8) {
if (Color(input).isDark()) {
let arr = Color(input).mix(Color("white"), percentage).saturate(10).hsl().round().array()
return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%";
let arr = Color(input).mix(Color("white"), percentage).saturate(10).hsl().array()
return arr[0].toPrecision(5).replace(/\.?0+$/,"") + " " + arr[1].toPrecision(5).replace(/\.?0+$/,"") + "%" + " " + arr[2].toPrecision(5).replace(/\.?0+$/,"") + "%";
} else {
let arr = Color(input).mix(Color("black"), percentage).saturate(10).hsl().round().array()
return arr[0] + " " + arr[1] + "%" + " " + arr[2] + "%";
let arr = Color(input).mix(Color("black"), percentage).saturate(10).hsl().array()
return arr[0].toPrecision(5).replace(/\.?0+$/,"") + " " + arr[1].toPrecision(5).replace(/\.?0+$/,"") + "%" + " " + arr[2].toPrecision(5).replace(/\.?0+$/,"") + "%";
}
},

Expand All @@ -18,31 +18,31 @@ module.exports = {
if (typeof input === "object" && input !== null) {
Object.entries(input).forEach(([rule, value]) => {
if (colorNames.hasOwnProperty(rule)) {
const hslArray = Color(value).hsl().round().array();
resultObj[colorNames[rule]] = hslArray[0] + " " + hslArray[1] + "%" + " " + hslArray[2] + "%";
const hslArray = Color(value).hsl().array();
resultObj[colorNames[rule]] = hslArray[0].toPrecision(5).replace(/\.?0+$/,"") + " " + hslArray[1].toPrecision(5).replace(/\.?0+$/,"") + "%" + " " + hslArray[2].toPrecision(5).replace(/\.?0+$/,"") + "%";
} else {
resultObj[rule] = value;
}

// auto generate focus colors
if (!input.hasOwnProperty("primary-focus")) {
const darkerHslArray = Color(input["primary"]).darken(0.2).hsl().round().array();
resultObj["--pf"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
const darkerHslArray = Color(input["primary"]).darken(0.2).hsl().array();
resultObj["--pf"] = darkerHslArray[0].toPrecision(5).replace(/\.?0+$/,"") + " " + darkerHslArray[1].toPrecision(5).replace(/\.?0+$/,"") + "%" + " " + darkerHslArray[2].toPrecision(5).replace(/\.?0+$/,"") + "%";
}

if (!input.hasOwnProperty("secondary-focus")) {
const darkerHslArray = Color(input["secondary"]).darken(0.2).hsl().round().array();
resultObj["--sf"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
const darkerHslArray = Color(input["secondary"]).darken(0.2).hsl().array();
resultObj["--sf"] = darkerHslArray[0].toPrecision(5).replace(/\.?0+$/,"") + " " + darkerHslArray[1].toPrecision(5).replace(/\.?0+$/,"") + "%" + " " + darkerHslArray[2].toPrecision(5).replace(/\.?0+$/,"") + "%";
}

if (!input.hasOwnProperty("accent-focus")) {
const darkerHslArray = Color(input["accent"]).darken(0.2).hsl().round().array();
resultObj["--af"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
const darkerHslArray = Color(input["accent"]).darken(0.2).hsl().array();
resultObj["--af"] = darkerHslArray[0].toPrecision(5).replace(/\.?0+$/,"") + " " + darkerHslArray[1].toPrecision(5).replace(/\.?0+$/,"") + "%" + " " + darkerHslArray[2].toPrecision(5).replace(/\.?0+$/,"") + "%";
}

if (!input.hasOwnProperty("neutral-focus")) {
const darkerHslArray = Color(input["neutral"]).darken(0.2).hsl().round().array();
resultObj["--nf"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
const darkerHslArray = Color(input["neutral"]).darken(0.2).hsl().array();
resultObj["--nf"] = darkerHslArray[0].toPrecision(5).replace(/\.?0+$/,"") + " " + darkerHslArray[1].toPrecision(5).replace(/\.?0+$/,"") + "%" + " " + darkerHslArray[2].toPrecision(5).replace(/\.?0+$/,"") + "%";
}

// auto generate base colors
Expand All @@ -51,17 +51,17 @@ module.exports = {
}

if (!input.hasOwnProperty("base-200")) {
const darkerHslArray = Color(input["base-100"]).darken(0.1).hsl().round().array();
resultObj["--b2"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
const darkerHslArray = Color(input["base-100"]).darken(0.1).hsl().array();
resultObj["--b2"] = darkerHslArray[0].toPrecision(5).replace(/\.?0+$/,"") + " " + darkerHslArray[1].toPrecision(5).replace(/\.?0+$/,"") + "%" + " " + darkerHslArray[2].toPrecision(5).replace(/\.?0+$/,"") + "%";
}

if (!input.hasOwnProperty("base-300")) {
if (input.hasOwnProperty("base-200")) {
const darkerHslArray = Color(input["base-200"]).darken(0.1).hsl().round().array();
resultObj["--b3"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
const darkerHslArray = Color(input["base-200"]).darken(0.1).hsl().array();
resultObj["--b3"] = darkerHslArray[0].toPrecision(5).replace(/\.?0+$/,"") + " " + darkerHslArray[1].toPrecision(5).replace(/\.?0+$/,"") + "%" + " " + darkerHslArray[2].toPrecision(5).replace(/\.?0+$/,"") + "%";
} else {
const darkerHslArray = Color(input["base-100"]).darken(0.1).darken(0.1).hsl().round().array();
resultObj["--b3"] = darkerHslArray[0] + " " + darkerHslArray[1] + "%" + " " + darkerHslArray[2] + "%";
const darkerHslArray = Color(input["base-100"]).darken(0.1).darken(0.1).hsl().array();
resultObj["--b3"] = darkerHslArray[0].toPrecision(5).replace(/\.?0+$/,"") + " " + darkerHslArray[1].toPrecision(5).replace(/\.?0+$/,"") + "%" + " " + darkerHslArray[2].toPrecision(5).replace(/\.?0+$/,"") + "%";
}
}

Expand Down

0 comments on commit 36d27f0

Please sign in to comment.