import { CSSResult } from 'lit-element'; import * as plugins from './dees-element.plugins'; import * as domtools from export interface IDbVarTriplet { cssVarName: string; darkValue: string; brightValue: string; } export class CssManager { public dbVarTripletStore: IDbVarTriplet[] = []; public dbTheme(darkValueArg: string, brightValueArg: string): CSSResult { const existingTriplet = this.dbVarTripletStore.find(tripletArg => tripletArg.darkValue === darkValueArg && tripletArg.brightValue === brightValueArg); if (existingTriplet) { return plugins.litElement.unsafeCSS(existingTriplet.cssVarName) } else { const newTriplet: IDbVarTriplet = { cssVarName: `--${plugins.isounique.uni()}`, brightValue: brightValueArg, darkValue: darkValueArg } this.dbVarTripletStore.push(newTriplet) document.onreadystatechange = () => { document.body.style.setProperty(newTriplet.cssVarName, newTriplet.darkValue); } return plugins.litElement.unsafeCSS(newTriplet.cssVarName); } } public cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number): CSSResult => { let returnString = ``; for (let i = 0; i < amountOfColumnsArg; i++) { returnString += ` calc((100%/${amountOfColumnsArg}) - (${ gapSizeArg * (amountOfColumnsArg - 1) }px/${amountOfColumnsArg}))`; } return plugins.litElement.unsafeCSS(returnString); }; }