@ngutil/style 0.0.3-dev.16

package/README.md

@@ -0,0 +1,9 @@
+# @ngutil/style
+
+## Installation
+
+TODO: ...
+
+## Usage
+
+TODO: ...

package/esm2022/index.mjs

@@ -0,0 +1,3 @@
+export { watchMedia } from "./services/media-watcher";
+export { ColorSchemeService } from "./services/color-scheme.service";
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wYWNrYWdlcy9zdHlsZS9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDBCQUEwQixDQUFBO0FBQ3JELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgd2F0Y2hNZWRpYSB9IGZyb20gXCIuL3NlcnZpY2VzL21lZGlhLXdhdGNoZXJcIlxuZXhwb3J0IHsgQ29sb3JTY2hlbWVTZXJ2aWNlIH0gZnJvbSBcIi4vc2VydmljZXMvY29sb3Itc2NoZW1lLnNlcnZpY2VcIlxuIl19

package/esm2022/ngutil-style.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd1dGlsLXN0eWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcGFja2FnZXMvc3R5bGUvc3JjL25ndXRpbC1zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==

package/esm2022/services/color-scheme.service.mjs

@@ -0,0 +1,17 @@
+import { Injectable } from "@angular/core";
+import { map, shareReplay } from "rxjs";
+import { watchMedia } from "./media-watcher";
+import * as i0 from "@angular/core";
+export class ColorSchemeService {
+    constructor() {
+        this.isDark = watchMedia("(prefers-color-scheme: dark)");
+        this.isLight = this.isDark.pipe(map(v => !v), shareReplay(1));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ColorSchemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ColorSchemeService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ColorSchemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3Itc2NoZW1lLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9zdHlsZS9zcmMvc2VydmljZXMvY29sb3Itc2NoZW1lLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQTtBQUUxQyxPQUFPLEVBQUUsR0FBRyxFQUFFLFdBQVcsRUFBRSxNQUFNLE1BQU0sQ0FBQTtBQUV2QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0saUJBQWlCLENBQUE7O0FBRzVDLE1BQU0sT0FBTyxrQkFBa0I7SUFEL0I7UUFFYSxXQUFNLEdBQUcsVUFBVSxDQUFDLDhCQUE4QixDQUFDLENBQUE7UUFDbkQsWUFBTyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUMvQixHQUFHLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUNaLFdBQVcsQ0FBQyxDQUFDLENBQUMsQ0FDakIsQ0FBQTtLQUdKOzhHQVJZLGtCQUFrQjtrSEFBbEIsa0JBQWtCLGNBREwsTUFBTTs7MkZBQ25CLGtCQUFrQjtrQkFEOUIsVUFBVTttQkFBQyxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIlxuXG5pbXBvcnQgeyBtYXAsIHNoYXJlUmVwbGF5IH0gZnJvbSBcInJ4anNcIlxuXG5pbXBvcnQgeyB3YXRjaE1lZGlhIH0gZnJvbSBcIi4vbWVkaWEtd2F0Y2hlclwiXG5cbkBJbmplY3RhYmxlKHsgcHJvdmlkZWRJbjogXCJyb290XCIgfSlcbmV4cG9ydCBjbGFzcyBDb2xvclNjaGVtZVNlcnZpY2Uge1xuICAgIHJlYWRvbmx5IGlzRGFyayA9IHdhdGNoTWVkaWEoXCIocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspXCIpXG4gICAgcmVhZG9ubHkgaXNMaWdodCA9IHRoaXMuaXNEYXJrLnBpcGUoXG4gICAgICAgIG1hcCh2ID0+ICF2KSxcbiAgICAgICAgc2hhcmVSZXBsYXkoMSlcbiAgICApXG5cbiAgICAvLyBUT0RPOiBzZXQgcHJlZmVycmVkIGNvbG9yIHNjaGVtZSAoZGFyay9saWdodClcbn1cbiJdfQ==

package/esm2022/services/media-watcher.mjs

@@ -0,0 +1,29 @@
+import { inject, NgZone } from "@angular/core";
+import { distinctUntilChanged, Observable, shareReplay } from "rxjs";
+const WATCHES = {};
+/**
+ * watchMedia("(display-mode: standalone)")
+ */
+export function watchMedia(expr) {
+    const existing = WATCHES[expr];
+    if (existing == null) {
+        return (WATCHES[expr] = _createWatcher(expr));
+    }
+    return existing;
+}
+function _createWatcher(expr) {
+    const zone = inject(NgZone);
+    return zone.runOutsideAngular(() => new Observable((sub) => {
+        const query = window.matchMedia(expr);
+        const listener = (event) => {
+            sub.next(event.matches);
+        };
+        query.addEventListener("change", listener);
+        sub.next(query.matches);
+        return () => {
+            query.removeEventListener("change", listener);
+            delete WATCHES[expr];
+        };
+    }).pipe(distinctUntilChanged(), shareReplay(1)));
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVkaWEtd2F0Y2hlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL3N0eWxlL3NyYy9zZXJ2aWNlcy9tZWRpYS13YXRjaGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFBO0FBRTlDLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFjLE1BQU0sTUFBTSxDQUFBO0FBRWhGLE1BQU0sT0FBTyxHQUEyQyxFQUFFLENBQUE7QUFFMUQ7O0dBRUc7QUFDSCxNQUFNLFVBQVUsVUFBVSxDQUFDLElBQVk7SUFDbkMsTUFBTSxRQUFRLEdBQUcsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFBO0lBQzlCLElBQUksUUFBUSxJQUFJLElBQUksRUFBRSxDQUFDO1FBQ25CLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEdBQUcsY0FBYyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUE7SUFDakQsQ0FBQztJQUNELE9BQU8sUUFBUSxDQUFBO0FBQ25CLENBQUM7QUFFRCxTQUFTLGNBQWMsQ0FBQyxJQUFZO0lBQ2hDLE1BQU0sSUFBSSxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQTtJQUMzQixPQUFPLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxHQUFHLEVBQUUsQ0FDL0IsSUFBSSxVQUFVLENBQUMsQ0FBQyxHQUF3QixFQUFFLEVBQUU7UUFDeEMsTUFBTSxLQUFLLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQTtRQUNyQyxNQUFNLFFBQVEsR0FBRyxDQUFDLEtBQTBCLEVBQUUsRUFBRTtZQUM1QyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQTtRQUMzQixDQUFDLENBQUE7UUFDRCxLQUFLLENBQUMsZ0JBQWdCLENBQUMsUUFBUSxFQUFFLFFBQVEsQ0FBQyxDQUFBO1FBQzFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFBO1FBQ3ZCLE9BQU8sR0FBRyxFQUFFO1lBQ1IsS0FBSyxDQUFDLG1CQUFtQixDQUFDLFFBQVEsRUFBRSxRQUFRLENBQUMsQ0FBQTtZQUM3QyxPQUFPLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQTtRQUN4QixDQUFDLENBQUE7SUFDTCxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsb0JBQW9CLEVBQUUsRUFBRSxXQUFXLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FDbEQsQ0FBQTtBQUNMLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBpbmplY3QsIE5nWm9uZSB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCJcblxuaW1wb3J0IHsgZGlzdGluY3RVbnRpbENoYW5nZWQsIE9ic2VydmFibGUsIHNoYXJlUmVwbGF5LCBTdWJzY3JpYmVyIH0gZnJvbSBcInJ4anNcIlxuXG5jb25zdCBXQVRDSEVTOiB7IFtrZXk6IHN0cmluZ106IE9ic2VydmFibGU8Ym9vbGVhbj4gfSA9IHt9XG5cbi8qKlxuICogd2F0Y2hNZWRpYShcIihkaXNwbGF5LW1vZGU6IHN0YW5kYWxvbmUpXCIpXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiB3YXRjaE1lZGlhKGV4cHI6IHN0cmluZyk6IE9ic2VydmFibGU8Ym9vbGVhbj4ge1xuICAgIGNvbnN0IGV4aXN0aW5nID0gV0FUQ0hFU1tleHByXVxuICAgIGlmIChleGlzdGluZyA9PSBudWxsKSB7XG4gICAgICAgIHJldHVybiAoV0FUQ0hFU1tleHByXSA9IF9jcmVhdGVXYXRjaGVyKGV4cHIpKVxuICAgIH1cbiAgICByZXR1cm4gZXhpc3Rpbmdcbn1cblxuZnVuY3Rpb24gX2NyZWF0ZVdhdGNoZXIoZXhwcjogc3RyaW5nKTogT2JzZXJ2YWJsZTxib29sZWFuPiB7XG4gICAgY29uc3Qgem9uZSA9IGluamVjdChOZ1pvbmUpXG4gICAgcmV0dXJuIHpvbmUucnVuT3V0c2lkZUFuZ3VsYXIoKCkgPT5cbiAgICAgICAgbmV3IE9ic2VydmFibGUoKHN1YjogU3Vic2NyaWJlcjxib29sZWFuPikgPT4ge1xuICAgICAgICAgICAgY29uc3QgcXVlcnkgPSB3aW5kb3cubWF0Y2hNZWRpYShleHByKVxuICAgICAgICAgICAgY29uc3QgbGlzdGVuZXIgPSAoZXZlbnQ6IE1lZGlhUXVlcnlMaXN0RXZlbnQpID0+IHtcbiAgICAgICAgICAgICAgICBzdWIubmV4dChldmVudC5tYXRjaGVzKVxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgcXVlcnkuYWRkRXZlbnRMaXN0ZW5lcihcImNoYW5nZVwiLCBsaXN0ZW5lcilcbiAgICAgICAgICAgIHN1Yi5uZXh0KHF1ZXJ5Lm1hdGNoZXMpXG4gICAgICAgICAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgICAgICAgICAgIHF1ZXJ5LnJlbW92ZUV2ZW50TGlzdGVuZXIoXCJjaGFuZ2VcIiwgbGlzdGVuZXIpXG4gICAgICAgICAgICAgICAgZGVsZXRlIFdBVENIRVNbZXhwcl1cbiAgICAgICAgICAgIH1cbiAgICAgICAgfSkucGlwZShkaXN0aW5jdFVudGlsQ2hhbmdlZCgpLCBzaGFyZVJlcGxheSgxKSlcbiAgICApXG59XG4iXX0=

package/fesm2022/ngutil-style.mjs

@@ -0,0 +1,50 @@
+import * as i0 from '@angular/core';
+import { inject, NgZone, Injectable } from '@angular/core';
+import { Observable, distinctUntilChanged, shareReplay, map } from 'rxjs';
+
+const WATCHES = {};
+/**
+ * watchMedia("(display-mode: standalone)")
+ */
+function watchMedia(expr) {
+    const existing = WATCHES[expr];
+    if (existing == null) {
+        return (WATCHES[expr] = _createWatcher(expr));
+    }
+    return existing;
+}
+function _createWatcher(expr) {
+    const zone = inject(NgZone);
+    return zone.runOutsideAngular(() => new Observable((sub) => {
+        const query = window.matchMedia(expr);
+        const listener = (event) => {
+            sub.next(event.matches);
+        };
+        query.addEventListener("change", listener);
+        sub.next(query.matches);
+        return () => {
+            query.removeEventListener("change", listener);
+            delete WATCHES[expr];
+        };
+    }).pipe(distinctUntilChanged(), shareReplay(1)));
+}
+
+class ColorSchemeService {
+    constructor() {
+        this.isDark = watchMedia("(prefers-color-scheme: dark)");
+        this.isLight = this.isDark.pipe(map(v => !v), shareReplay(1));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ColorSchemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ColorSchemeService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ColorSchemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorSchemeService, watchMedia };
+//# sourceMappingURL=ngutil-style.mjs.map

package/fesm2022/ngutil-style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngutil-style.mjs","sources":["../../../../packages/style/src/services/media-watcher.ts","../../../../packages/style/src/services/color-scheme.service.ts","../../../../packages/style/src/ngutil-style.ts"],"sourcesContent":["import { inject, NgZone } from \"@angular/core\"\n\nimport { distinctUntilChanged, Observable, shareReplay, Subscriber } from \"rxjs\"\n\nconst WATCHES: { [key: string]: Observable<boolean> } = {}\n\n/**\n * watchMedia(\"(display-mode: standalone)\")\n */\nexport function watchMedia(expr: string): Observable<boolean> {\n    const existing = WATCHES[expr]\n    if (existing == null) {\n        return (WATCHES[expr] = _createWatcher(expr))\n    }\n    return existing\n}\n\nfunction _createWatcher(expr: string): Observable<boolean> {\n    const zone = inject(NgZone)\n    return zone.runOutsideAngular(() =>\n        new Observable((sub: Subscriber<boolean>) => {\n            const query = window.matchMedia(expr)\n            const listener = (event: MediaQueryListEvent) => {\n                sub.next(event.matches)\n            }\n            query.addEventListener(\"change\", listener)\n            sub.next(query.matches)\n            return () => {\n                query.removeEventListener(\"change\", listener)\n                delete WATCHES[expr]\n            }\n        }).pipe(distinctUntilChanged(), shareReplay(1))\n    )\n}\n","import { Injectable } from \"@angular/core\"\n\nimport { map, shareReplay } from \"rxjs\"\n\nimport { watchMedia } from \"./media-watcher\"\n\n@Injectable({ providedIn: \"root\" })\nexport class ColorSchemeService {\n    readonly isDark = watchMedia(\"(prefers-color-scheme: dark)\")\n    readonly isLight = this.isDark.pipe(\n        map(v => !v),\n        shareReplay(1)\n    )\n\n    // TODO: set preferred color scheme (dark/light)\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAIA,MAAM,OAAO,GAA2C,EAAE,CAAA;AAE1D;;AAEG;AACG,SAAU,UAAU,CAAC,IAAY,EAAA;AACnC,IAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;AAC9B,IAAA,IAAI,QAAQ,IAAI,IAAI,EAAE;QAClB,QAAQ,OAAO,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC,IAAI,CAAC,EAAC;KAChD;AACD,IAAA,OAAO,QAAQ,CAAA;AACnB,CAAC;AAED,SAAS,cAAc,CAAC,IAAY,EAAA;AAChC,IAAA,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;AAC3B,IAAA,OAAO,IAAI,CAAC,iBAAiB,CAAC,MAC1B,IAAI,UAAU,CAAC,CAAC,GAAwB,KAAI;QACxC,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;AACrC,QAAA,MAAM,QAAQ,GAAG,CAAC,KAA0B,KAAI;AAC5C,YAAA,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;AAC3B,SAAC,CAAA;AACD,QAAA,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;AAC1C,QAAA,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;AACvB,QAAA,OAAO,MAAK;AACR,YAAA,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;AAC7C,YAAA,OAAO,OAAO,CAAC,IAAI,CAAC,CAAA;AACxB,SAAC,CAAA;AACL,KAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAClD,CAAA;AACL;;MC1Ba,kBAAkB,CAAA;AAD/B,IAAA,WAAA,GAAA;AAEa,QAAA,IAAA,CAAA,MAAM,GAAG,UAAU,CAAC,8BAA8B,CAAC,CAAA;QACnD,IAAO,CAAA,OAAA,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAC/B,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EACZ,WAAW,CAAC,CAAC,CAAC,CACjB,CAAA;AAGJ,KAAA;8GARY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,cADL,MAAM,EAAA,CAAA,CAAA,EAAA;;2FACnB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAD9B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAA;;;ACNlC;;AAEG;;;;"}

package/index.d.ts

@@ -0,0 +1,2 @@
+export { watchMedia } from "./services/media-watcher";
+export { ColorSchemeService } from "./services/color-scheme.service";

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@ngutil/style",
+  "version": "0.0.3-dev.16",
+  "publishConfig": {
+    "access": "public",
+    "directory": "../../dist/packages/style/"
+  },
+  "peerDependencies": {
+    "@angular/common": "^17.1.0",
+    "@angular/core": "^17.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "sass": "./styles/index.scss",
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/ngutil-style.mjs",
+      "esm": "./esm2022/ngutil-style.mjs",
+      "default": "./fesm2022/ngutil-style.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "module": "fesm2022/ngutil-style.mjs",
+  "typings": "index.d.ts"
+}

package/services/color-scheme.service.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class ColorSchemeService {
+    readonly isDark: import("rxjs").Observable<boolean>;
+    readonly isLight: import("rxjs").Observable<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorSchemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ColorSchemeService>;
+}

package/services/media-watcher.d.ts

@@ -0,0 +1,5 @@
+import { Observable } from "rxjs";
+/**
+ * watchMedia("(display-mode: standalone)")
+ */
+export declare function watchMedia(expr: string): Observable<boolean>;

package/styles/index.scss

@@ -0,0 +1 @@
+@use "./vars" as *;

package/styles/vars.scss

@@ -0,0 +1,47 @@
+@use "sass:list";
+@use "sass:string";
+
+
+@function is-var($value) {
+    @return type-of($value) == "string" and string.index($value, "--") == 1;
+}
+
+@function is-varfn($value) {
+    @return type-of($value) == "string" and string.index($value, "var(") == 1 and string.index($value, ")") == string.length($value);
+}
+
+@function -chanin-var($vars, $idx) {
+    $res: "";
+    $curr: list.nth($vars, $idx);
+
+    @if (is-var($curr)) {
+        $res: "var(#{$curr}";
+    } @else {
+        @return $curr;
+    }
+
+    @if (list.length($vars) > $idx) {
+        @return string.unquote("#{$res}, #{-chanin-var($vars, $idx + 1)})");
+    } @else {
+        @return string.unquote("#{$res})");
+    }
+}
+
+@function chain-var($vars...) {
+    @if (list.length($vars) > 0) {
+        @return -chanin-var($vars, 1);
+    } @else {
+        @return "";
+    }
+}
+
+
+/*
+.button {
+    @include cvar(button-fg, --color, #000);
+    ---button-fg: var(--button-fg, var(--color), #000);
+}
+*/
+@mixin cvar($name, $defaults...) {
+    ---#{$name}: #{chain-var(--#{$name}, $defaults...)};
+}