Created
May 6, 2021 22:03
-
-
Save hutch78/40ed2368e7f9b4496845aa738d591f70 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Set CSS variables for each property in the passed-in colors object | |
| * @param {object} colors Colors object from the database | |
| */ | |
| updateCSSVariables(colors) { | |
| return new Promise((resolve, reject) => { | |
| try { | |
| if (!colors) { | |
| reject('invalid colors'); | |
| return false; | |
| } | |
| let root = document.documentElement; | |
| const interval = 5; | |
| const rows = 21; | |
| const end = Math.floor(rows / 2) * interval; | |
| colors = Object.entries(colors); | |
| colors.map(color => { | |
| let colorName = color[0]; | |
| let hexValue = color[1]; | |
| root.style.setProperty('--' + colorName, hexValue); | |
| for(let diff = (end * -1); diff < end; diff += interval){ | |
| // console.log(diff); | |
| let value = hexValue; | |
| let action = false; | |
| if(diff > 0){ | |
| action = 'lighten'; | |
| } else if(diff < 0){ | |
| action = 'darken'; | |
| } | |
| if(action){ | |
| value = tinyAdjust(hexValue, action, Math.abs(diff)); | |
| } | |
| let colorVarName = `${colorName}_${diff}`; | |
| root.style.setProperty('--' + colorVarName, value); | |
| } | |
| }) | |
| if(colors.length){ | |
| /** | |
| * Some CSS relies on this element having this class - for example the Tooltips which get placed at the document's root | |
| */ | |
| document.querySelector('body').classList.add('layout-agent-websites--has-colors'); | |
| } | |
| resolve(); | |
| } catch(e){ | |
| reject(e); | |
| } | |
| }); | |
| }, |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment