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