import * as plugins from './domtools.plugins'; import { DomTools } from './domtools.classes.domtools'; import { scrollBarStyles } from './domtools.css.theme'; import { html, LitElement } from 'lit-element'; /** * styles to be included in every webcomponent */ export const styles = html` `; /** * a basic setup for elements * makes sure everything is in check */ export const setup = async (elementArg?: LitElement): Promise => { const domTools = await DomTools.setupDomTools(); if (elementArg) { domTools.elementInstrumenter.instrumentElement(elementArg); } domTools.runOnce('elementBasicSetup', async () => { // bodyStyles domTools.setGlobalStyles(` body { margin: 0px; font-family: 'Roboto', sans-serif; box-sizing: border-box; } `); // material font domTools.setGlobalStyles(` @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2'); } `); // Roboto Font domTools.setGlobalStyles(` @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;400'); `); // font awesome brands domTools.setExternalCss('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/brands.min.css'); // scrollbars domTools.setGlobalStyles(` ${scrollBarStyles} `); }); return domTools; };