@3mo/theme 0.0.1 → 0.0.3

package/README.md

@@ -1,3 +1,3 @@
-# Theme
-
+# Theme
+
 Tools & tokens for theming 3MO components & applications.

package/dist/Accent.js

@@ -1,5 +1,5 @@
 import { css, unsafeCSS } from '@a11d/lit';
-import { RootCssInjector } from '@a11d/lit-application';
+import { RootCssInjector } from '@a11d/root-css-injector';
 import { LocalStorage } from '@a11d/local-storage';
 import { Color } from '@3mo/color';
 import { ColorSet } from './ColorSet.js';
@@ -42,15 +42,15 @@ export class AccentStorage extends LocalStorage {
         const firstColor = value instanceof ColorSet ? value.colors[0] : value;
         const secondColor = value instanceof ColorSet ? value.colors[1] : value;
         const thirdColor = value instanceof ColorSet ? value.colors[2] : value;
-        this.styleElement = RootCssInjector.inject(css `
-				[application] {
-					--mo-color-accent-base-r:${unsafeCSS(medianColor === null || medianColor === void 0 ? void 0 : medianColor.r)};
-					--mo-color-accent-base-g:${unsafeCSS(medianColor === null || medianColor === void 0 ? void 0 : medianColor.g)};
-					--mo-color-accent-base-b:${unsafeCSS(medianColor === null || medianColor === void 0 ? void 0 : medianColor.b)};
-					--mo-color-accent-gradient-1: ${unsafeCSS(firstColor === null || firstColor === void 0 ? void 0 : firstColor.rgb)};
-					--mo-color-accent-gradient-2: ${unsafeCSS(secondColor === null || secondColor === void 0 ? void 0 : secondColor.rgb)};
-					--mo-color-accent-gradient-3: ${unsafeCSS(thirdColor === null || thirdColor === void 0 ? void 0 : thirdColor.rgb)};
-				}
+        this.styleElement = RootCssInjector.inject(css `
+				:root {
+					--mo-color-accent-base-r:${unsafeCSS(medianColor === null || medianColor === void 0 ? void 0 : medianColor.r)};
+					--mo-color-accent-base-g:${unsafeCSS(medianColor === null || medianColor === void 0 ? void 0 : medianColor.g)};
+					--mo-color-accent-base-b:${unsafeCSS(medianColor === null || medianColor === void 0 ? void 0 : medianColor.b)};
+					--mo-color-accent-gradient-1: ${unsafeCSS(firstColor === null || firstColor === void 0 ? void 0 : firstColor.rgb)};
+					--mo-color-accent-gradient-2: ${unsafeCSS(secondColor === null || secondColor === void 0 ? void 0 : secondColor.rgb)};
+					--mo-color-accent-gradient-3: ${unsafeCSS(thirdColor === null || thirdColor === void 0 ? void 0 : thirdColor.rgb)};
+				}
 			`, this.styleElement);
     }
 }

package/dist/Background.d.ts

@@ -5,7 +5,6 @@ export declare const enum Background {
     Dark = "dark"
 }
 export declare class BackgroundStorage extends LocalStorage<Background> {
-    private application?;
     constructor();
     get calculatedValue(): Background.Light | Background.Dark;
     private updateAttributeValue;

package/dist/Background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Background.d.ts","sourceRoot":"","sources":["../Background.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAGlD,0BAAkB,UAAU;IAC3B,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,IAAI,SAAS;CACb;AAED,qBAAa,iBAAkB,SAAQ,YAAY,CAAC,UAAU,CAAC;IAC9D,OAAO,CAAC,WAAW,CAAC,CAAa;;IAajC,IAAI,eAAe,uCAMlB;IAED,OAAO,CAAC,oBAAoB;CAG5B"}
+{"version":3,"file":"Background.d.ts","sourceRoot":"","sources":["../Background.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAElD,0BAAkB,UAAU;IAC3B,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,IAAI,SAAS;CACb;AAED,qBAAa,iBAAkB,SAAQ,YAAY,CAAC,UAAU,CAAC;;IAS9D,IAAI,eAAe,uCAMlB;IAED,OAAO,CAAC,oBAAoB;CAG5B"}

package/dist/Background.js

@@ -1,16 +1,11 @@
-import { Application } from '@a11d/lit-application';
 import { LocalStorage } from '@a11d/local-storage';
-import { Theme } from './Theme.js';
 export class BackgroundStorage extends LocalStorage {
     constructor() {
         super('Theme.Background', "system" /* Background.System */);
         window.matchMedia('(prefers-color-scheme: dark)').onchange = () => this.updateAttributeValue();
         window.matchMedia('(prefers-color-scheme: light)').onchange = () => this.updateAttributeValue();
-        Application.addInitializer(application => {
-            this.application = application;
-            this.updateAttributeValue();
-            Theme.background.changed.subscribe(() => this.updateAttributeValue());
-        });
+        this.updateAttributeValue();
+        this.changed.subscribe(() => this.updateAttributeValue());
     }
     get calculatedValue() {
         return this.value !== "system" /* Background.System */
@@ -20,7 +15,6 @@ export class BackgroundStorage extends LocalStorage {
                 : "light" /* Background.Light */;
     }
     updateAttributeValue() {
-        var _a;
-        (_a = this.application) === null || _a === void 0 ? void 0 : _a.setAttribute('data-theme', this.calculatedValue);
+        document.documentElement.setAttribute('data-theme', this.calculatedValue);
     }
 }

package/dist/Theme/Background.d.ts

@@ -5,7 +5,6 @@ export declare const enum Background {
     Dark = "dark"
 }
 export declare class BackgroundStorage extends LocalStorage<Background> {
-    private application?;
     constructor();
     get calculatedValue(): Background.Light | Background.Dark;
     private updateAttributeValue;

package/dist/Theme/Background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Background.d.ts","sourceRoot":"","sources":["../../Background.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAGlD,0BAAkB,UAAU;IAC3B,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,IAAI,SAAS;CACb;AAED,qBAAa,iBAAkB,SAAQ,YAAY,CAAC,UAAU,CAAC;IAC9D,OAAO,CAAC,WAAW,CAAC,CAAa;;IAajC,IAAI,eAAe,uCAMlB;IAED,OAAO,CAAC,oBAAoB;CAG5B"}
+{"version":3,"file":"Background.d.ts","sourceRoot":"","sources":["../../Background.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAElD,0BAAkB,UAAU;IAC3B,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,IAAI,SAAS;CACb;AAED,qBAAa,iBAAkB,SAAQ,YAAY,CAAC,UAAU,CAAC;;IAS9D,IAAI,eAAe,uCAMlB;IAED,OAAO,CAAC,oBAAoB;CAG5B"}