1.0.52

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "1.0.46",
+  "version": "1.0.52",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "1.0.46",
+  "version": "1.0.52",
   "private": false,
   "description": "tools to simplify complex css structures",
   "main": "dist_ts/index.js",

ts/domtools.classes.domtools.ts

@@ -5,7 +5,6 @@ import { TViewport } from './domtools.breakpoints';
 
 import { Scroller } from './domtools.classes.scroller';
 import { delayForRandom } from '@pushrocks/smartdelay';
-import { setupGlobalTheme } from './domtools.css.theme';
 
 export interface IDomToolsState {
   virtualViewport: TViewport;
@@ -24,9 +23,6 @@ export class DomTools {
       globalThis.deesDomTools = new DomTools();
       domToolsInstance = globalThis.deesDomTools;
 
-      // lets setup theming
-      setupGlobalTheme(domToolsInstance);
-
       // lets make sure the dom is ready
       const readyStateChangedFunc = () => {
         if (document.readyState === 'interactive' || document.readyState === 'complete') {
@@ -47,7 +43,7 @@ export class DomTools {
   /**
    * if you can, use the static asysnc .setupDomTools() function instead since it is safer to use.
    */
-  public static getGlobalDomToolsSync() {
+  public static getGlobalDomToolsSync(): DomTools {
     const globalDomTools: DomTools = globalThis.deesDomTools;
     if (!globalDomTools) {
       throw new Error('You tried to access domtools synchronously too early');

ts/domtools.css.theme.ts

@@ -3,7 +3,8 @@ import { DomTools } from './domtools.classes.domtools';
 /**
  * changes scrollbar styles to be consistent across OS borders
  */
-export const scrollBarStyles = `
+export const scrollBarStyles = (() => {
+  const returnStyles = navigator.userAgent.indexOf("Windows") !== -1 ? `
   /* width */
   ::-webkit-scrollbar {
     width: 8px;
@@ -23,12 +24,5 @@ export const scrollBarStyles = `
   ::-webkit-scrollbar-thumb:hover {
     background: #777; 
   }
-`;
-
-export const setupGlobalTheme = (domToolsInstance: DomTools) => {
-  const styles = `
-    ${scrollBarStyles}
-`;
-
-  domToolsInstance.setGlobalStyles(styles);
-};
+` : ``;
+})();

ts/domtools.elementbasic.ts

@@ -7,7 +7,7 @@ import { html } from 'lit-element';
 /**
  * styles to be included in every webcomponent
  */
-export const styles = html`;
+export const styles = html`
   <style>
     * {
       font-family: 'Roboto', sans-serif;
@@ -46,7 +46,13 @@ export const setup = async () => {
 
     // Roboto Font
     domTools.setGlobalStyles(`
-      @import url('https://fonts.googleapis.com/css?family=Roboto');
+      @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}
     `);
   });
 };