elbe-ui 1.0.8 → 2.0.1

package/dist/ui/theme/subthemes/color/colors/_color_layer.d.ts

@@ -0,0 +1,226 @@
+import { RGBAColor } from "./_color_rgba";
+import { ElbeColor } from "./_colordef";
+import { HexColor } from "./colors";
+export declare const LayerColor: {
+    is: (v: any) => v is ElbeColor<"layer", {
+        back: RGBAColor;
+        front: RGBAColor;
+        border: RGBAColor;
+    }, Omit<{
+        interLayer: (other: RGBAColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+        interLayerLayer: (other: LayerColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+        mirrorBrightnessLayer: (factor?: number, factorBack?: number, factorBorder?: number) => LayerColor;
+        desaturatedLayer: () => LayerColor;
+        withBack: (back: RGBAColor) => LayerColor;
+        withFront: (front: RGBAColor) => LayerColor;
+        withBorder: (border: RGBAColor) => LayerColor;
+    } & {
+        type: ["rgba", ...string[]];
+    } & {
+        red: number;
+        green: number;
+        blue: number;
+        alpha: number;
+    } & Omit<{
+        asCss: () => string;
+        hex: () => string;
+        isDark: () => boolean;
+        luminance: () => number;
+        desaturated: (f?: number) => ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        withAlpha: (alpha: number) => ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        inter: (other: RGBAColor, factor: number) => ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        mirrorBrightness: (factor?: number) => ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        hasWCAGContrast: (color: RGBAColor) => boolean;
+        contrastRatio: (color: RGBAColor) => number;
+    }, "type">, "type">>;
+    new: (data: {
+        back: RGBAColor;
+        front: RGBAColor;
+        border: RGBAColor;
+    }) => ElbeColor<"layer", {
+        back: RGBAColor;
+        front: RGBAColor;
+        border: RGBAColor;
+    }, Omit<{
+        interLayer: (other: RGBAColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+        interLayerLayer: (other: LayerColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+        mirrorBrightnessLayer: (factor?: number, factorBack?: number, factorBorder?: number) => LayerColor;
+        desaturatedLayer: () => LayerColor;
+        withBack: (back: RGBAColor) => LayerColor;
+        withFront: (front: RGBAColor) => LayerColor;
+        withBorder: (border: RGBAColor) => LayerColor;
+    } & {
+        type: ["rgba", ...string[]];
+    } & {
+        red: number;
+        green: number;
+        blue: number;
+        alpha: number;
+    } & Omit<{
+        asCss: () => string;
+        hex: () => string;
+        isDark: () => boolean;
+        luminance: () => number;
+        desaturated: (f?: number) => ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        withAlpha: (alpha: number) => ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        inter: (other: RGBAColor, factor: number) => ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        mirrorBrightness: (factor?: number) => ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        hasWCAGContrast: (color: RGBAColor) => boolean;
+        contrastRatio: (color: RGBAColor) => number;
+    }, "type">, "type">>;
+    _typeHint: {
+        color: ElbeColor<"layer", {
+            back: RGBAColor;
+            front: RGBAColor;
+            border: RGBAColor;
+        }, Omit<{
+            interLayer: (other: RGBAColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+            interLayerLayer: (other: LayerColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+            mirrorBrightnessLayer: (factor?: number, factorBack?: number, factorBorder?: number) => LayerColor;
+            desaturatedLayer: () => LayerColor;
+            withBack: (back: RGBAColor) => LayerColor;
+            withFront: (front: RGBAColor) => LayerColor;
+            withBorder: (border: RGBAColor) => LayerColor;
+        } & {
+            type: ["rgba", ...string[]];
+        } & {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        } & Omit<{
+            asCss: () => string;
+            hex: () => string;
+            isDark: () => boolean;
+            luminance: () => number;
+            desaturated: (f?: number) => ElbeColor<"rgba", {
+                red: number;
+                green: number;
+                blue: number;
+                alpha: number;
+            }, Omit</*elided*/ any, "type">>;
+            withAlpha: (alpha: number) => ElbeColor<"rgba", {
+                red: number;
+                green: number;
+                blue: number;
+                alpha: number;
+            }, Omit</*elided*/ any, "type">>;
+            inter: (other: RGBAColor, factor: number) => ElbeColor<"rgba", {
+                red: number;
+                green: number;
+                blue: number;
+                alpha: number;
+            }, Omit</*elided*/ any, "type">>;
+            mirrorBrightness: (factor?: number) => ElbeColor<"rgba", {
+                red: number;
+                green: number;
+                blue: number;
+                alpha: number;
+            }, Omit</*elided*/ any, "type">>;
+            hasWCAGContrast: (color: RGBAColor) => boolean;
+            contrastRatio: (color: RGBAColor) => number;
+        }, "type">, "type">>;
+        data: {
+            back: RGBAColor;
+            front: RGBAColor;
+            border: RGBAColor;
+        };
+    };
+} & {
+    asLayer: (v: any) => LayerColor;
+    fromBack: (back: RGBAColor | HexColor | ElbeColor<"layer", any, {}>, c?: {
+        front?: RGBAColor;
+        border?: RGBAColor;
+    }) => ElbeColor<"layer", {
+        back: RGBAColor;
+        front: RGBAColor;
+        border: RGBAColor;
+    }, Omit<{
+        interLayer: (other: RGBAColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+        interLayerLayer: (other: LayerColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+        mirrorBrightnessLayer: (factor?: number, factorBack?: number, factorBorder?: number) => LayerColor;
+        desaturatedLayer: () => LayerColor;
+        withBack: (back: RGBAColor) => LayerColor;
+        withFront: (front: RGBAColor) => LayerColor;
+        withBorder: (border: RGBAColor) => LayerColor;
+    } & {
+        type: ["rgba", ...string[]];
+    } & {
+        red: number;
+        green: number;
+        blue: number;
+        alpha: number;
+    } & Omit<{
+        asCss: () => string;
+        hex: () => string;
+        isDark: () => boolean;
+        luminance: () => number;
+        desaturated: (f?: number) => ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        withAlpha: (alpha: number) => ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        inter: (other: RGBAColor, factor: number) => ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        mirrorBrightness: (factor?: number) => ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        hasWCAGContrast: (color: RGBAColor) => boolean;
+        contrastRatio: (color: RGBAColor) => number;
+    }, "type">, "type">>;
+};
+export type LayerColor = (typeof LayerColor)["_typeHint"]["color"];

package/dist/ui/theme/subthemes/color/colors/_color_layer.js

@@ -0,0 +1,95 @@
+import { RGBAColor } from "./_color_rgba";
+import { defineColor } from "./_colordef";
+import { colors } from "./colors";
+export const LayerColor = defineColor({
+    type: "layer",
+    static: {
+        asLayer: (v) => {
+            if (LayerColor.is(v)) {
+                return v;
+            }
+            else if (typeof v === "string") {
+                return LayerColor.fromBack(RGBAColor.fromHex(v));
+            }
+            else {
+                throw new Error("Cannot convert to LayerColor");
+            }
+        },
+        fromBack: (back, c) => {
+            var _a, _b;
+            if (LayerColor.is(back))
+                return back;
+            const backColor = typeof back === "string" ? RGBAColor.fromHex(back) : back;
+            const front = backColor.isDark() ? colors.white : colors.black;
+            return LayerColor.new({
+                back: backColor,
+                front: (_a = c === null || c === void 0 ? void 0 : c.front) !== null && _a !== void 0 ? _a : front,
+                border: (_b = c === null || c === void 0 ? void 0 : c.border) !== null && _b !== void 0 ? _b : front,
+            });
+        },
+    },
+    parent: (data) => data.back,
+    compute: (data) => {
+        function interLayerLayer(other, factor, factorFront, factorBorder) {
+            var _a;
+            return LayerColor.new({
+                back: data.back.inter(other.back, factor),
+                front: data.front.inter(other.front, factorFront !== null && factorFront !== void 0 ? factorFront : factor),
+                border: data.border.inter((_a = other.border) !== null && _a !== void 0 ? _a : colors.transparent, factorBorder !== null && factorBorder !== void 0 ? factorBorder : factor),
+            });
+        }
+        function interLayer(other, factor, factorFront, factorBorder) {
+            return LayerColor.new({
+                back: data.back.inter(other, factor),
+                front: data.front.inter(other, factorFront !== null && factorFront !== void 0 ? factorFront : factor),
+                border: data.border.inter(other !== null && other !== void 0 ? other : colors.transparent, factorBorder !== null && factorBorder !== void 0 ? factorBorder : factor),
+            });
+        }
+        function mirrorBrightnessLayer(factor, factorBack, factorBorder) {
+            var _a;
+            return LayerColor.new({
+                back: data.back.mirrorBrightness(factorBack !== null && factorBack !== void 0 ? factorBack : factor),
+                front: data.front.mirrorBrightness(factor),
+                border: (_a = data.border) === null || _a === void 0 ? void 0 : _a.mirrorBrightness(factorBorder !== null && factorBorder !== void 0 ? factorBorder : factor),
+            });
+        }
+        function desaturatedLayer() {
+            var _a;
+            return LayerColor.new({
+                back: data.back.desaturated(),
+                front: data.front.desaturated(),
+                border: (_a = data.border) === null || _a === void 0 ? void 0 : _a.desaturated(),
+            });
+        }
+        function withBack(back) {
+            return LayerColor.new({
+                back,
+                front: data.front,
+                border: data.border,
+            });
+        }
+        function withFront(front) {
+            return LayerColor.new({
+                back: data.back,
+                front,
+                border: data.border,
+            });
+        }
+        function withBorder(border) {
+            return LayerColor.new({
+                back: data.back,
+                front: data.front,
+                border,
+            });
+        }
+        return {
+            interLayer,
+            interLayerLayer,
+            mirrorBrightnessLayer,
+            desaturatedLayer,
+            withBack,
+            withFront,
+            withBorder,
+        };
+    },
+});

package/dist/ui/theme/subthemes/color/colors/_color_manner.d.ts

@@ -0,0 +1,280 @@
+import { LayerColor } from "./_color_layer";
+import { StateColor } from "./_color_state";
+import { ColorThemeSeed } from "./colors";
+export declare const MannerColor: {
+    is: (v: any) => v is import("./_colordef").ElbeColor<"manner", {
+        major: StateColor;
+        minor: StateColor;
+        flat: StateColor;
+        plain: StateColor;
+    }, Omit<{
+        type: ["state", ...string[]];
+    } & {
+        neutral: LayerColor;
+        hover: LayerColor;
+        active: LayerColor;
+        disabled: LayerColor;
+    } & Omit<{
+        type: ["layer", ...string[]];
+    } & {
+        back: import("./_color_rgba").RGBAColor;
+        front: import("./_color_rgba").RGBAColor;
+        border: import("./_color_rgba").RGBAColor;
+    } & Omit<{
+        interLayer: (other: import("./_color_rgba").RGBAColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+        interLayerLayer: (other: LayerColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+        mirrorBrightnessLayer: (factor?: number, factorBack?: number, factorBorder?: number) => LayerColor;
+        desaturatedLayer: () => LayerColor;
+        withBack: (back: import("./_color_rgba").RGBAColor) => LayerColor;
+        withFront: (front: import("./_color_rgba").RGBAColor) => LayerColor;
+        withBorder: (border: import("./_color_rgba").RGBAColor) => LayerColor;
+    } & {
+        type: ["rgba", ...string[]];
+    } & {
+        red: number;
+        green: number;
+        blue: number;
+        alpha: number;
+    } & Omit<{
+        asCss: () => string;
+        hex: () => string;
+        isDark: () => boolean;
+        luminance: () => number;
+        desaturated: (f?: number) => import("./_colordef").ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        withAlpha: (alpha: number) => import("./_colordef").ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        inter: (other: import("./_color_rgba").RGBAColor, factor: number) => import("./_colordef").ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        mirrorBrightness: (factor?: number) => import("./_colordef").ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        hasWCAGContrast: (color: import("./_color_rgba").RGBAColor) => boolean;
+        contrastRatio: (color: import("./_color_rgba").RGBAColor) => number;
+    }, "type">, "type">, "type">, "type">>;
+    new: (data: {
+        major: StateColor;
+        minor: StateColor;
+        flat: StateColor;
+        plain: StateColor;
+    }) => import("./_colordef").ElbeColor<"manner", {
+        major: StateColor;
+        minor: StateColor;
+        flat: StateColor;
+        plain: StateColor;
+    }, Omit<{
+        type: ["state", ...string[]];
+    } & {
+        neutral: LayerColor;
+        hover: LayerColor;
+        active: LayerColor;
+        disabled: LayerColor;
+    } & Omit<{
+        type: ["layer", ...string[]];
+    } & {
+        back: import("./_color_rgba").RGBAColor;
+        front: import("./_color_rgba").RGBAColor;
+        border: import("./_color_rgba").RGBAColor;
+    } & Omit<{
+        interLayer: (other: import("./_color_rgba").RGBAColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+        interLayerLayer: (other: LayerColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+        mirrorBrightnessLayer: (factor?: number, factorBack?: number, factorBorder?: number) => LayerColor;
+        desaturatedLayer: () => LayerColor;
+        withBack: (back: import("./_color_rgba").RGBAColor) => LayerColor;
+        withFront: (front: import("./_color_rgba").RGBAColor) => LayerColor;
+        withBorder: (border: import("./_color_rgba").RGBAColor) => LayerColor;
+    } & {
+        type: ["rgba", ...string[]];
+    } & {
+        red: number;
+        green: number;
+        blue: number;
+        alpha: number;
+    } & Omit<{
+        asCss: () => string;
+        hex: () => string;
+        isDark: () => boolean;
+        luminance: () => number;
+        desaturated: (f?: number) => import("./_colordef").ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        withAlpha: (alpha: number) => import("./_colordef").ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        inter: (other: import("./_color_rgba").RGBAColor, factor: number) => import("./_colordef").ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        mirrorBrightness: (factor?: number) => import("./_colordef").ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        hasWCAGContrast: (color: import("./_color_rgba").RGBAColor) => boolean;
+        contrastRatio: (color: import("./_color_rgba").RGBAColor) => number;
+    }, "type">, "type">, "type">, "type">>;
+    _typeHint: {
+        color: import("./_colordef").ElbeColor<"manner", {
+            major: StateColor;
+            minor: StateColor;
+            flat: StateColor;
+            plain: StateColor;
+        }, Omit<{
+            type: ["state", ...string[]];
+        } & {
+            neutral: LayerColor;
+            hover: LayerColor;
+            active: LayerColor;
+            disabled: LayerColor;
+        } & Omit<{
+            type: ["layer", ...string[]];
+        } & {
+            back: import("./_color_rgba").RGBAColor;
+            front: import("./_color_rgba").RGBAColor;
+            border: import("./_color_rgba").RGBAColor;
+        } & Omit<{
+            interLayer: (other: import("./_color_rgba").RGBAColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+            interLayerLayer: (other: LayerColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+            mirrorBrightnessLayer: (factor?: number, factorBack?: number, factorBorder?: number) => LayerColor;
+            desaturatedLayer: () => LayerColor;
+            withBack: (back: import("./_color_rgba").RGBAColor) => LayerColor;
+            withFront: (front: import("./_color_rgba").RGBAColor) => LayerColor;
+            withBorder: (border: import("./_color_rgba").RGBAColor) => LayerColor;
+        } & {
+            type: ["rgba", ...string[]];
+        } & {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        } & Omit<{
+            asCss: () => string;
+            hex: () => string;
+            isDark: () => boolean;
+            luminance: () => number;
+            desaturated: (f?: number) => import("./_colordef").ElbeColor<"rgba", {
+                red: number;
+                green: number;
+                blue: number;
+                alpha: number;
+            }, Omit</*elided*/ any, "type">>;
+            withAlpha: (alpha: number) => import("./_colordef").ElbeColor<"rgba", {
+                red: number;
+                green: number;
+                blue: number;
+                alpha: number;
+            }, Omit</*elided*/ any, "type">>;
+            inter: (other: import("./_color_rgba").RGBAColor, factor: number) => import("./_colordef").ElbeColor<"rgba", {
+                red: number;
+                green: number;
+                blue: number;
+                alpha: number;
+            }, Omit</*elided*/ any, "type">>;
+            mirrorBrightness: (factor?: number) => import("./_colordef").ElbeColor<"rgba", {
+                red: number;
+                green: number;
+                blue: number;
+                alpha: number;
+            }, Omit</*elided*/ any, "type">>;
+            hasWCAGContrast: (color: import("./_color_rgba").RGBAColor) => boolean;
+            contrastRatio: (color: import("./_color_rgba").RGBAColor) => number;
+        }, "type">, "type">, "type">, "type">>;
+        data: {
+            major: StateColor;
+            minor: StateColor;
+            flat: StateColor;
+            plain: StateColor;
+        };
+    };
+} & {
+    generate(path: string[], seed: ColorThemeSeed, base: LayerColor, style: LayerColor): import("./_colordef").ElbeColor<"manner", {
+        major: StateColor;
+        minor: StateColor;
+        flat: StateColor;
+        plain: StateColor;
+    }, Omit<{
+        type: ["state", ...string[]];
+    } & {
+        neutral: LayerColor;
+        hover: LayerColor;
+        active: LayerColor;
+        disabled: LayerColor;
+    } & Omit<{
+        type: ["layer", ...string[]];
+    } & {
+        back: import("./_color_rgba").RGBAColor;
+        front: import("./_color_rgba").RGBAColor;
+        border: import("./_color_rgba").RGBAColor;
+    } & Omit<{
+        interLayer: (other: import("./_color_rgba").RGBAColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+        interLayerLayer: (other: LayerColor, factor: number, factorFront?: number, factorBorder?: number) => LayerColor;
+        mirrorBrightnessLayer: (factor?: number, factorBack?: number, factorBorder?: number) => LayerColor;
+        desaturatedLayer: () => LayerColor;
+        withBack: (back: import("./_color_rgba").RGBAColor) => LayerColor;
+        withFront: (front: import("./_color_rgba").RGBAColor) => LayerColor;
+        withBorder: (border: import("./_color_rgba").RGBAColor) => LayerColor;
+    } & {
+        type: ["rgba", ...string[]];
+    } & {
+        red: number;
+        green: number;
+        blue: number;
+        alpha: number;
+    } & Omit<{
+        asCss: () => string;
+        hex: () => string;
+        isDark: () => boolean;
+        luminance: () => number;
+        desaturated: (f?: number) => import("./_colordef").ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        withAlpha: (alpha: number) => import("./_colordef").ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        inter: (other: import("./_color_rgba").RGBAColor, factor: number) => import("./_colordef").ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        mirrorBrightness: (factor?: number) => import("./_colordef").ElbeColor<"rgba", {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        }, Omit</*elided*/ any, "type">>;
+        hasWCAGContrast: (color: import("./_color_rgba").RGBAColor) => boolean;
+        contrastRatio: (color: import("./_color_rgba").RGBAColor) => number;
+    }, "type">, "type">, "type">, "type">>;
+};
+export type MannerColor = (typeof MannerColor)["_typeHint"]["color"];

package/dist/ui/theme/subthemes/color/colors/_color_manner.js

@@ -0,0 +1,17 @@
+import { StateColor } from "./_color_state";
+import { defineColor } from "./_colordef";
+export const MannerColor = defineColor({
+    type: "manner",
+    static: {
+        generate(path, seed, base, style) {
+            return MannerColor.new({
+                major: StateColor.generate([...path, "major"], seed, base, seed.manner.major({ path, seed, base, style })),
+                minor: StateColor.generate([...path, "minor"], seed, base, seed.manner.minor({ path, seed, base, style })),
+                flat: StateColor.generate([...path, "flat"], seed, base, seed.manner.flat({ path, seed, base, style }), true),
+                plain: StateColor.generate([...path, "plain"], seed, base, base, true),
+            });
+        },
+    },
+    parent: (p) => p.flat,
+    compute: (_) => ({}),
+});