@seelen-ui/lib 2.4.8 → 2.4.10

package/script/src/system_state/ui_colors.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Color = exports.UIColors = void 0;
 const mod_js_1 = require("../handlers/mod.js");
+const DOM_js_1 = require("../utils/DOM.js");
 const State_js_1 = require("../utils/State.js");
 class UIColors {
     inner;
@@ -29,36 +30,38 @@ class UIColors {
         });
     }
     setAsCssVariables() {
-        const id = "system-ui-color-variables";
-        document.getElementById(id)?.remove();
-        const element = document.createElement("style");
-        element.id = id;
-        element.textContent = ":root {\n";
+        const oldStyles = new DOM_js_1.RuntimeStyleSheet("@deprecated/system-colors");
+        const newStyles = new DOM_js_1.RuntimeStyleSheet("@runtime/system-colors");
         for (const [key, value] of Object.entries(this.inner)) {
             if (typeof value !== "string") {
                 continue;
             }
-            const hex = value.replace("#", "").slice(0, 6);
-            const color = parseInt(hex, 16);
-            const r = (color >> 16) & 255;
-            const g = (color >> 8) & 255;
-            const b = color & 255;
+            const color = Color.fromHex(value);
+            const { r, g, b } = color;
             // replace rust snake case with kebab case
             const name = key.replace("_", "-");
-            element.textContent += `--system-${name}-color: ${value.slice(0, 7)};\n`;
-            element.textContent += `--system-${name}-color-rgb: ${r}, ${g}, ${b};\n`;
             // @deprecated old names
-            element.textContent += `--config-${name}-color: ${value.slice(0, 7)};\n`;
-            element.textContent += `--config-${name}-color-rgb: ${r}, ${g}, ${b};\n`;
+            oldStyles.addVariable(`--config-${name}-color`, value.slice(0, 7));
+            oldStyles.addVariable(`--config-${name}-color-rgb`, `${r}, ${g}, ${b}`);
+            if (name.startsWith("accent")) {
+                newStyles.addVariable(`--system-${name}-color`, value.slice(0, 7));
+                newStyles.addVariable(`--system-${name}-color-rgb`, `${r}, ${g}, ${b}`);
+                const complement = color.complementary();
+                newStyles.addVariable(`--system-${name}-complementary-color`, complement.toHexString());
+                newStyles.addVariable(`--system-${name}-complementary-color-rgb`, `${complement.r}, ${complement.g}, ${complement.b}`);
+            }
         }
-        document.head.appendChild(element);
+        oldStyles.applyToDocument();
+        newStyles.applyToDocument();
     }
 }
 exports.UIColors = UIColors;
 class Color {
-    inner;
-    constructor(inner) {
-        this.inner = inner;
+    constructor(obj) {
+        this.r = obj.r;
+        this.g = obj.g;
+        this.b = obj.b;
+        this.a = obj.a;
     }
     /** generates a random solid color */
     static random() {
@@ -69,6 +72,34 @@ class Color {
             a: 255,
         });
     }
+    static fromHex(hex) {
+        if (hex.startsWith("#")) {
+            hex = hex.slice(1);
+        }
+        if (hex.length === 3) {
+            hex = hex
+                .split("")
+                .map((char) => `${char}${char}`)
+                .join("");
+        }
+        if (hex.length === 6) {
+            hex = hex.padStart(8, "f");
+        }
+        const color = parseInt(hex.replace("#", ""), 16);
+        return new Color({
+            r: (color >> 24) & 255,
+            g: (color >> 16) & 255,
+            b: (color >> 8) & 255,
+            a: color & 255,
+        });
+    }
+    toHexString() {
+        return ("#" +
+            this.r.toString(16).padStart(2, "0") +
+            this.g.toString(16).padStart(2, "0") +
+            this.b.toString(16).padStart(2, "0") +
+            (this.a === 255 ? "" : this.a.toString(16).padStart(2, "0")));
+    }
     getRuntimeStyleSheet() {
         const styleId = "slu-lib-runtime-color-variables";
         let styleElement = document.getElementById(styleId);
@@ -96,13 +127,6 @@ class Color {
         lines.push("}");
         sheet.textContent = lines.join("\n");
     }
-    toHexString() {
-        return ("#" +
-            this.inner.r.toString(16).padStart(2, "0") +
-            this.inner.g.toString(16).padStart(2, "0") +
-            this.inner.b.toString(16).padStart(2, "0") +
-            this.inner.a.toString(16).padStart(2, "0"));
-    }
     /**
      * @param name the name of the color
      * the name will be parsed to lower kebab case and remove non-alphanumeric characters
@@ -118,8 +142,8 @@ class Color {
             .toLowerCase();
         this.insertIntoStyleSheet({
             [`--color-${parsedName}`]: this.toHexString(),
-            [`--color-${parsedName}-rgb`]: `${this.inner.r}, ${this.inner.g}, ${this.inner.b}`,
-            [`--color-${parsedName}-rgba`]: `${this.inner.r}, ${this.inner.g}, ${this.inner.b}, ${this.inner.a}`,
+            [`--color-${parsedName}-rgb`]: `${this.r}, ${this.g}, ${this.b}`,
+            [`--color-${parsedName}-rgba`]: `${this.r}, ${this.g}, ${this.b}, ${this.a}`,
         });
     }
     /**
@@ -129,16 +153,23 @@ class Color {
      * @returns a number between 0 and 255
      */
     calcLuminance(accuracy) {
-        const { r, g, b } = this.inner;
         if (accuracy) {
             // gamma correction
-            const gR = r ** 2.2;
-            const gG = g ** 2.2;
-            const gB = b ** 2.2;
+            const gR = this.r ** 2.2;
+            const gG = this.g ** 2.2;
+            const gB = this.b ** 2.2;
             return (0.299 * gR + 0.587 * gG + 0.114 * gB) ** (1 / 2.2);
         }
         // standard algorithm
-        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+        return 0.2126 * this.r + 0.7152 * this.g + 0.0722 * this.b;
+    }
+    complementary() {
+        return new Color({
+            r: 255 - this.r,
+            g: 255 - this.g,
+            b: 255 - this.b,
+            a: this.a,
+        });
     }
 }
 exports.Color = Color;

package/script/src/utils/DOM.d.ts

@@ -0,0 +1,9 @@
+export declare class RuntimeStyleSheet {
+    #private;
+    constructor(styleId: string);
+    addVariable(key: string, value: string): void;
+    addStyle(style: string): void;
+    clear(): void;
+    applyToDocument(): void;
+}
+//# sourceMappingURL=DOM.d.ts.map

package/script/src/utils/DOM.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DOM.d.ts","sourceRoot":"","sources":["../../../src/src/utils/DOM.ts"],"names":[],"mappings":"AAAA,qBAAa,iBAAiB;;gBAKhB,OAAO,EAAE,MAAM;IAU3B,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7C,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,KAAK,IAAI,IAAI;IAKb,eAAe,IAAI,IAAI;CAKxB"}

package/script/src/utils/DOM.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RuntimeStyleSheet = void 0;
+class RuntimeStyleSheet {
+    #element;
+    #variables = [];
+    #styles = [];
+    constructor(styleId) {
+        let styleElement = document.getElementById(styleId);
+        if (!styleElement) {
+            styleElement = document.createElement("style");
+            styleElement.id = styleId;
+            document.head.appendChild(styleElement);
+        }
+        this.#element = styleElement;
+    }
+    addVariable(key, value) {
+        this.#variables.push([key, value]);
+    }
+    addStyle(style) {
+        this.#styles.push(style);
+    }
+    clear() {
+        this.#variables = [];
+        this.#styles = [];
+    }
+    applyToDocument() {
+        const vars = this.#variables.map(([key, value]) => `${key}: ${value};`).join("\n");
+        this.#element.textContent = `:root {\n${vars}\n}\n\n`;
+        this.#element.textContent += this.#styles.join("\n\n/* -=-=-=-=-=-=-=-=- */\n\n");
+    }
+}
+exports.RuntimeStyleSheet = RuntimeStyleSheet;

package/esm/gen/types/SeelenCommandConfirmBluetoothDevicePairArgs.d.ts

@@ -1,5 +0,0 @@
-export type SeelenCommandConfirmBluetoothDevicePairArgs = {
-    accept: boolean;
-    passphrase: string;
-};
-//# sourceMappingURL=SeelenCommandConfirmBluetoothDevicePairArgs.d.ts.map

package/esm/gen/types/SeelenCommandConfirmBluetoothDevicePairArgs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SeelenCommandConfirmBluetoothDevicePairArgs.d.ts","sourceRoot":"","sources":["../../../src/gen/types/SeelenCommandConfirmBluetoothDevicePairArgs.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,2CAA2C,GAAG;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;CAAE,CAAC"}

package/esm/gen/types/SeelenCommandPairBluetoothDeviceArgs.d.ts

@@ -1,4 +0,0 @@
-export type SeelenCommandPairBluetoothDeviceArgs = {
-    address: bigint;
-};
-//# sourceMappingURL=SeelenCommandPairBluetoothDeviceArgs.d.ts.map

package/esm/gen/types/SeelenCommandPairBluetoothDeviceArgs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SeelenCommandPairBluetoothDeviceArgs.d.ts","sourceRoot":"","sources":["../../../src/gen/types/SeelenCommandPairBluetoothDeviceArgs.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,oCAAoC,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;CAAE,CAAC"}

package/esm/src/utils/Wrapper.d.ts

@@ -1,3 +0,0 @@
-export type Wrapper = new <T>(plain: T) => T;
-export declare const Wrapper: Wrapper;
-//# sourceMappingURL=Wrapper.d.ts.map

package/esm/src/utils/Wrapper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Wrapper.d.ts","sourceRoot":"","sources":["../../../src/src/utils/Wrapper.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAIf,OAAO,CAAC"}

package/esm/src/utils/Wrapper.js

@@ -1,5 +0,0 @@
-export const Wrapper = class Wrapper {
-    constructor(plain) {
-        Object.assign(this, plain);
-    }
-};

package/script/gen/types/SeelenCommandConfirmBluetoothDevicePairArgs.d.ts

@@ -1,5 +0,0 @@
-export type SeelenCommandConfirmBluetoothDevicePairArgs = {
-    accept: boolean;
-    passphrase: string;
-};
-//# sourceMappingURL=SeelenCommandConfirmBluetoothDevicePairArgs.d.ts.map

package/script/gen/types/SeelenCommandConfirmBluetoothDevicePairArgs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SeelenCommandConfirmBluetoothDevicePairArgs.d.ts","sourceRoot":"","sources":["../../../src/gen/types/SeelenCommandConfirmBluetoothDevicePairArgs.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,2CAA2C,GAAG;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;CAAE,CAAC"}

package/script/gen/types/SeelenCommandPairBluetoothDeviceArgs.d.ts

@@ -1,4 +0,0 @@
-export type SeelenCommandPairBluetoothDeviceArgs = {
-    address: bigint;
-};
-//# sourceMappingURL=SeelenCommandPairBluetoothDeviceArgs.d.ts.map

package/script/gen/types/SeelenCommandPairBluetoothDeviceArgs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SeelenCommandPairBluetoothDeviceArgs.d.ts","sourceRoot":"","sources":["../../../src/gen/types/SeelenCommandPairBluetoothDeviceArgs.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,oCAAoC,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;CAAE,CAAC"}

package/script/src/utils/Wrapper.d.ts

@@ -1,3 +0,0 @@
-export type Wrapper = new <T>(plain: T) => T;
-export declare const Wrapper: Wrapper;
-//# sourceMappingURL=Wrapper.d.ts.map

package/script/src/utils/Wrapper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Wrapper.d.ts","sourceRoot":"","sources":["../../../src/src/utils/Wrapper.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAIf,OAAO,CAAC"}

package/script/src/utils/Wrapper.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Wrapper = void 0;
-exports.Wrapper = class Wrapper {
-    constructor(plain) {
-        Object.assign(this, plain);
-    }
-};