44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
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);
|
|
};
|
|
} |