38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { CSSResult } from 'lit-element';
|
|
import * as plugins from './dees-element.plugins';
|
|
|
|
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.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);
|
|
};
|
|
} |