diff --git a/package-lock.json b/package-lock.json index 9f42b25..ffecd96 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ "@pushrocks/webrequest": "^2.0.13", "@pushrocks/websetup": "^3.0.15", "@pushrocks/webstore": "^1.0.16", - "lit-element": "^3.0.2", + "lit": "^2.0.2", "sweet-scroll": "^4.0.0" }, "devDependencies": { @@ -9217,6 +9217,17 @@ "node": ">= 0.8.0" } }, + "node_modules/lit": { + "version": "2.0.2", + "resolved": "https://verdaccio.lossless.one/lit/-/lit-2.0.2.tgz", + "integrity": "sha512-hKA/1YaSB+P+DvKWuR2q1Xzy/iayhNrJ3aveD0OQ9CKn6wUjsdnF/7LavDOJsKP/K5jzW/kXsuduPgRvTFrFJw==", + "license": "BSD-3-Clause", + "dependencies": { + "@lit/reactive-element": "^1.0.0", + "lit-element": "^3.0.0", + "lit-html": "^2.0.0" + } + }, "node_modules/lit-element": { "version": "3.0.2", "resolved": "https://verdaccio.lossless.one/lit-element/-/lit-element-3.0.2.tgz", @@ -9242,6 +9253,15 @@ "integrity": "sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==", "license": "BSD-3-Clause" }, + "node_modules/lit/node_modules/lit-html": { + "version": "2.0.2", + "resolved": "https://verdaccio.lossless.one/lit-html/-/lit-html-2.0.2.tgz", + "integrity": "sha512-dON7Zg8btb14/fWohQLQBdSgkoiQA4mIUy87evmyJHtxRq7zS6LlC32bT5EPWiof5PUQaDpF45v2OlrxHA5Clg==", + "license": "BSD-3-Clause", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/locate-path": { "version": "5.0.0", "resolved": "https://verdaccio.lossless.one/locate-path/-/locate-path-5.0.0.tgz", @@ -22474,6 +22494,26 @@ "type-check": "~0.3.2" } }, + "lit": { + "version": "2.0.2", + "resolved": "https://verdaccio.lossless.one/lit/-/lit-2.0.2.tgz", + "integrity": "sha512-hKA/1YaSB+P+DvKWuR2q1Xzy/iayhNrJ3aveD0OQ9CKn6wUjsdnF/7LavDOJsKP/K5jzW/kXsuduPgRvTFrFJw==", + "requires": { + "@lit/reactive-element": "^1.0.0", + "lit-element": "^3.0.0", + "lit-html": "^2.0.0" + }, + "dependencies": { + "lit-html": { + "version": "2.0.2", + "resolved": "https://verdaccio.lossless.one/lit-html/-/lit-html-2.0.2.tgz", + "integrity": "sha512-dON7Zg8btb14/fWohQLQBdSgkoiQA4mIUy87evmyJHtxRq7zS6LlC32bT5EPWiof5PUQaDpF45v2OlrxHA5Clg==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + } + } + }, "lit-element": { "version": "3.0.2", "resolved": "https://verdaccio.lossless.one/lit-element/-/lit-element-3.0.2.tgz", diff --git a/package.json b/package.json index 5d8231c..d765b9a 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "@pushrocks/webrequest": "^2.0.13", "@pushrocks/websetup": "^3.0.15", "@pushrocks/webstore": "^1.0.16", - "lit-element": "^3.0.2", + "lit": "^2.0.2", "sweet-scroll": "^4.0.0" }, "files": [ diff --git a/ts/domtools.classes.domtools.ts b/ts/domtools.classes.domtools.ts index 042610b..76bbca0 100644 --- a/ts/domtools.classes.domtools.ts +++ b/ts/domtools.classes.domtools.ts @@ -1,7 +1,7 @@ import * as plugins from './domtools.plugins'; import { Stringmap } from '@pushrocks/lik/dist_ts/lik.stringmap'; import { FastMap } from '@pushrocks/lik/dist_ts/lik.fastmap'; -import { TViewport } from './domtools.breakpoints'; +import { TViewport } from './domtools.css.breakpoints'; import { Scroller } from './domtools.classes.scroller'; import { WebSetup } from '@pushrocks/websetup'; diff --git a/ts/domtools.classes.thememanager.ts b/ts/domtools.classes.thememanager.ts index ca66948..e97d76a 100644 --- a/ts/domtools.classes.thememanager.ts +++ b/ts/domtools.classes.thememanager.ts @@ -1,4 +1,3 @@ -import { LitElement } from 'lit-element'; import { DomTools } from './domtools.classes.domtools'; import * as plugins from './domtools.plugins'; @@ -29,16 +28,25 @@ export class ThemeManager { this.themeObservable.next(this.goBrightBoolean); } + /** + * set the theme of the website to bright + */ public goBright() { this.goBrightBoolean = true; this.updateAllConnectedElements(); } + /** + * set the theme of the website to dark + */ public goDark() { this.goBrightBoolean = false; this.updateAllConnectedElements(); } + /** + * simply toggle between bright and dark + */ public toggleDarkBright() { this.goBrightBoolean = !this.goBrightBoolean; this.updateAllConnectedElements(); diff --git a/ts/domtools.css.basestyles.ts b/ts/domtools.css.basestyles.ts new file mode 100644 index 0000000..e0a0a9d --- /dev/null +++ b/ts/domtools.css.basestyles.ts @@ -0,0 +1,59 @@ +import { DomTools } from './domtools.classes.domtools'; + +import { css, unsafeCSS } from 'lit'; + +/** + * changes scrollbar styles to be consistent across OS borders + */ +export const scrollBarStyles: string = (() => { + const returnStyles = + navigator.userAgent.indexOf('Mac OS X') !== -1 + ? css` + /* 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; + } + `.cssText + : ``; + return returnStyles; +})(); + +export const globalBaseStyles: string = css` + /* global material font */ + @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 */ + @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'); + + /* global body styles */ + body { + margin: 0px; + font-family: 'Roboto', sans-serif; + box-sizing: border-box; + } + + /* scroll bar styles */ + ${unsafeCSS(scrollBarStyles)} +`.cssText; diff --git a/ts/domtools.breakpoints.ts b/ts/domtools.css.breakpoints.ts similarity index 94% rename from ts/domtools.breakpoints.ts rename to ts/domtools.css.breakpoints.ts index bc19525..e83e3d8 100644 --- a/ts/domtools.breakpoints.ts +++ b/ts/domtools.css.breakpoints.ts @@ -1,6 +1,6 @@ import { DomTools } from './domtools.classes.domtools'; -import { CSSResult, unsafeCSS } from 'lit-element'; +import { CSSResult, unsafeCSS } from 'lit'; export const desktop = 1240; export const tablet = 1024; diff --git a/ts/domtools.css.theme.ts b/ts/domtools.css.theme.ts deleted file mode 100644 index a6608d2..0000000 --- a/ts/domtools.css.theme.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { DomTools } from './domtools.classes.domtools'; - -/** - * changes scrollbar styles to be consistent across OS borders - */ -export const scrollBarStyles = (() => { - const returnStyles = - navigator.userAgent.indexOf('Mac OS X') !== -1 - ? ` - /* 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; - } -` - : ``; -})(); diff --git a/ts/domtools.elementbasic.ts b/ts/domtools.elementbasic.ts index 6b95798..67e4815 100644 --- a/ts/domtools.elementbasic.ts +++ b/ts/domtools.elementbasic.ts @@ -1,8 +1,8 @@ import * as plugins from './domtools.plugins'; import { DomTools } from './domtools.classes.domtools'; -import { scrollBarStyles } from './domtools.css.theme'; +import { scrollBarStyles, globalBaseStyles } from './domtools.css.basestyles'; -import { html, LitElement, css, unsafeCSS } from 'lit-element'; +import { html, LitElement, css, unsafeCSS } from 'lit'; export const staticStyles = css` * { @@ -49,34 +49,7 @@ export const setup = async (elementArg?: LitElement): Promise => { 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} - `); + domTools.setGlobalStyles(globalBaseStyles); }); return domTools; }; diff --git a/ts/index.ts b/ts/index.ts index f2d6a30..3516f84 100644 --- a/ts/index.ts +++ b/ts/index.ts @@ -1,7 +1,7 @@ export * from './domtools.colors'; import * as elementBasic from './domtools.elementbasic'; -import * as breakpoints from './domtools.breakpoints'; +import * as breakpoints from './domtools.css.breakpoints'; import * as css from './domtools.css'; export { css, breakpoints, elementBasic };