dees-domtools/ts/domtools.elementbasic.ts

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`
  <style>
    * {
      transition: background 0.1s, color 0.1s;
      box-sizing: border-box;
    }

    :host {
      font-family: 'Roboto', sans-serif;
    }

    ${scrollBarStyles}
  </style>
`;

/**
 * a basic setup for elements
 * makes sure everything is in check
 */
export const setup = async (elementArg?: LitElement): Promise<DomTools> => {
  const domTools = await DomTools.setupDomTools();

  if (elementArg) {
    // lets do something with the element
    // not used right now
  }

  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');
    `);

    // scrollbars
    domTools.setGlobalStyles(`
      ${scrollBarStyles}
    `);
  });
  return domTools;
};