From ead9bdc9fc1e9cc62a26e59f6880a13aa864f931 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 6 May 2021 14:56:18 -0300 Subject: break up utility file, get build for sure working still Much Work Yet Ahead but this is good progress!! also the site is in a working state afaict and thats a kinda nice milestone lmbo --- src/util/colors.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 src/util/colors.js (limited to 'src/util/colors.js') diff --git a/src/util/colors.js b/src/util/colors.js new file mode 100644 index 00000000..1df591bf --- /dev/null +++ b/src/util/colors.js @@ -0,0 +1,47 @@ +// Color and theming utility functions! Handy. + +// Graciously stolen from https://stackoverflow.com/a/54071699! ::::) +// in: r,g,b in [0,1], out: h in [0,360) and s,l in [0,1] +export function rgb2hsl(r, g, b) { + let a=Math.max(r,g,b), n=a-Math.min(r,g,b), f=(1-Math.abs(a+a-n-1)); + let h= n && ((a==r) ? (g-b)/n : ((a==g) ? 2+(b-r)/n : 4+(r-g)/n)); + return [60*(h<0?h+6:h), f ? n/f : 0, (a+a-n)/2]; +} + +export function getColors(primary) { + const [ r, g, b ] = primary.slice(1) + .match(/[0-9a-fA-F]{2,2}/g) + .slice(0, 3) + .map(val => parseInt(val, 16) / 255); + const [ h, s, l ] = rgb2hsl(r, g, b); + const dim = `hsl(${Math.round(h)}deg, ${Math.round(s * 50)}%, ${Math.round(l * 80)}%)`; + + return {primary, dim}; +} + +export function getLinkThemeString(color) { + if (!color) return ''; + + const { primary, dim } = getColors(color); + return `--primary-color: ${primary}; --dim-color: ${dim}`; +} + +export function getThemeString(color, additionalVariables = []) { + if (!color) return ''; + + const { primary, dim } = getColors(color); + + const variables = [ + `--primary-color: ${primary}`, + `--dim-color: ${dim}`, + ...additionalVariables + ].filter(Boolean); + + if (!variables.length) return ''; + + return ( + `:root {\n` + + variables.map(line => ` ` + line + ';\n').join('') + + `}` + ); +} -- cgit 1.3.0-6-gf8a5