dees-element/ts/dees-element.classes.cssmanager.ts

import { CSSResult } from 'lit-element';
import * as plugins from './dees-element.plugins';
import * as domtools from '@designestate/dees-domtools';

export interface IDbVarTriplet {
  cssVarName: string;
  darkValue: string;
  brightValue: string;
}

export class CssManager {
  public dbVarTripletStore: IDbVarTriplet[] = [];

  public dbTheme(darkValueArg: string, brightValueArg: string): CSSResult {
    let returnCssVar: string;
    const existingTriplet = this.dbVarTripletStore.find(tripletArg => tripletArg.darkValue === darkValueArg && tripletArg.brightValue === brightValueArg);
    if (existingTriplet) {
      returnCssVar = existingTriplet.cssVarName;
    } else {
      const newTriplet: IDbVarTriplet = {
        cssVarName: `--${plugins.isounique.uni()}`,
        brightValue: brightValueArg,
        darkValue: darkValueArg
      };
      this.dbVarTripletStore.push(newTriplet);
      domtools.DomTools.setupDomTools().then(async (domtools) => {
        await domtools.domReady.promise;
        document.body.style.setProperty(newTriplet.cssVarName, newTriplet.darkValue);
      });
      returnCssVar = newTriplet.cssVarName;
    }
    return plugins.litElement.unsafeCSS(`var(${returnCssVar})`);
  }

  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);
  };
}