@3mo/theme 0.0.2 → 0.0.4

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;AAElD,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,15 +1,11 @@
-import { Application } from '@a11d/lit-application';
 import { LocalStorage } from '@a11d/local-storage';
 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();
-            this.changed.subscribe(() => this.updateAttributeValue());
-        });
+        this.updateAttributeValue();
+        this.changed.subscribe(() => this.updateAttributeValue());
     }
     get calculatedValue() {
         return this.value !== "system" /* Background.System */
@@ -19,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;AAElD,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/Theme/ThemeController.d.ts

@@ -0,0 +1,10 @@
+import { Controller, ReactiveElement } from '@a11d/lit';
+export declare class ThemeController extends Controller {
+    readonly host: ReactiveElement;
+    constructor(host: ReactiveElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private handleChange;
+    private setAttribute;
+}
+//# sourceMappingURL=ThemeController.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeController.d.ts","sourceRoot":"","sources":["../../ThemeController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAGvD,qBAAa,eAAgB,SAAQ,UAAU;aAChB,IAAI,EAAE,eAAe;gBAArB,IAAI,EAAE,eAAe;IAI1C,aAAa;IAMb,gBAAgB;IAKzB,OAAO,CAAC,YAAY,CAGnB;IAED,OAAO,CAAC,YAAY;CAGpB"}

package/dist/Theme/index.d.ts

@@ -3,4 +3,5 @@ export * from './Background.js';
 export * from './Accent.js';
 export * from './Theme.js';
 export * from './styles.css.js';
+export * from './ThemeController.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA"}

package/dist/ThemeController.d.ts

@@ -0,0 +1,10 @@
+import { Controller, ReactiveElement } from '@a11d/lit';
+export declare class ThemeController extends Controller {
+    readonly host: ReactiveElement;
+    constructor(host: ReactiveElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private handleChange;
+    private setAttribute;
+}
+//# sourceMappingURL=ThemeController.d.ts.map

package/dist/ThemeController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeController.d.ts","sourceRoot":"","sources":["../ThemeController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAGvD,qBAAa,eAAgB,SAAQ,UAAU;aAChB,IAAI,EAAE,eAAe;gBAArB,IAAI,EAAE,eAAe;IAI1C,aAAa;IAMb,gBAAgB;IAKzB,OAAO,CAAC,YAAY,CAGnB;IAED,OAAO,CAAC,YAAY;CAGpB"}

package/dist/ThemeController.js

@@ -0,0 +1,24 @@
+import { Controller } from '@a11d/lit';
+import { Theme } from './Theme.js';
+export class ThemeController extends Controller {
+    constructor(host) {
+        super(host);
+        this.host = host;
+        this.handleChange = () => {
+            this.setAttribute();
+            this.host.requestUpdate();
+        };
+    }
+    hostConnected() {
+        this.setAttribute();
+        Theme.accent.changed.subscribe(this.handleChange);
+        Theme.background.changed.subscribe(this.handleChange);
+    }
+    hostDisconnected() {
+        Theme.accent.changed.unsubscribe(this.handleChange);
+        Theme.background.changed.unsubscribe(this.handleChange);
+    }
+    setAttribute() {
+        this.host.setAttribute('data-theme', Theme.background.calculatedValue);
+    }
+}