1.0.42

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1548,10 +1548,9 @@
       }
     },
     "@pushrocks/smartdelay": {
-      "version": "2.0.6",
+      "version": "2.0.10",
-      "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartdelay/-/smartdelay-2.0.6.tgz",
+      "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartdelay/-/smartdelay-2.0.10.tgz",
-      "integrity": "sha512-4wUnzWNhRPODpaaL5GuRaje/C5dg+TMhBxmr57PKc2fqYpy6azWJwonf/s5xpcbJLCPJRbj1x8M5MqgCFq2uvg==",
+      "integrity": "sha512-JOFpEfYiKnqcQYoUrL/jDyBDZUmlgJNm5U30MQQ3f+yci+rlFnMY5VvBBEYn5WgoX0ilwU+E15mtpDWhXcmhzg==",
-      "dev": true,
       "requires": {
         "@pushrocks/smartpromise": "^3.0.6"
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "private": false,
   "description": "tools to simplify complex css structures",
   "main": "dist_ts/index.js",
@@ -24,6 +24,7 @@
   "dependencies": {
     "@apiglobal/typedrequest": "^1.0.41",
     "@pushrocks/lik": "^4.0.17",
+    "@pushrocks/smartdelay": "^2.0.10",
     "@pushrocks/smartpromise": "^3.0.6",
     "@pushrocks/smartrouter": "^1.0.4",
     "@pushrocks/smartstate": "^1.0.17",

ts/domtools.classes.domtools.ts

@@ -4,6 +4,8 @@ import { FastMap } from '@pushrocks/lik/dist_ts/lik.fastmap';
 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;
@@ -21,6 +23,10 @@ export class DomTools {
     if (!globalThis.deesDomTools) {
       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') {
@@ -70,6 +76,10 @@ export class DomTools {
     debug: false,
   });
 
+  public convenience = {
+    smartdelay: plugins.smartdelay
+  };
+
   public scroller: plugins.SweetScroll;
 
   private actionSetVirtualViewport = this.domToolsStatePart.createAction<TViewport>(

ts/domtools.css.theme.ts

@@ -0,0 +1,27 @@
+import { DomTools } from "./domtools.classes.domtools";
+
+export const setupGlobalTheme = (domToolsInstance: DomTools) => {
+  const styles = `
+    /* width */
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: #111; 
+    }
+    
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      background: #666; 
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #777; 
+    }
+`;
+
+  domToolsInstance.setGlobalStyles(styles);
+};

ts/domtools.plugins.ts

@@ -4,13 +4,14 @@ import * as typedrequest from '@apiglobal/typedrequest';
 export { typedrequest };
 
 // pushrocks scope
+import * as smartdelay from '@pushrocks/smartdelay';
 import * as smartpromise from '@pushrocks/smartpromise';
 import * as smartrouter from '@pushrocks/smartrouter';
 import * as smartstate from '@pushrocks/smartstate';
 import * as webrequest from '@pushrocks/webrequest';
 import * as websetup from '@pushrocks/websetup';
 
-export { smartpromise, smartrouter, smartstate, webrequest, websetup };
+export { smartdelay, smartpromise, smartrouter, smartstate, webrequest, websetup };
 
 // third party scope
 import SweetScroll from 'sweet-scroll';