elbe-ui 1.0.8 → 2.0.0

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

@@ -0,0 +1,269 @@
+import { LayerColor } from "./_color_layer";
+import { SchemeColor } from "./_color_scheme";
+import { ColorThemeSeed } from "./colors";
+export declare const ModeColor: {
+    is: (v: any) => v is import("./_colordef").ElbeColor<"mode", {
+        light: SchemeColor;
+        dark: SchemeColor;
+    }, Omit<{
+        type: ["state", ...string[]];
+    } & {
+        primary: import("./_color_kind").KindColor;
+        secondary: import("./_color_kind").KindColor;
+        inverse: import("./_color_kind").KindColor;
+    } & Omit<{
+        type: ["kind", ...string[]];
+    } & {
+        accent: import("./_color_manner").MannerColor;
+        info: import("./_color_manner").MannerColor;
+        success: import("./_color_manner").MannerColor;
+        warning: import("./_color_manner").MannerColor;
+        error: import("./_color_manner").MannerColor;
+    } & Omit<{
+        type: ["manner", ...string[]];
+    } & {
+        major: import("./_color_state").StateColor;
+        minor: import("./_color_state").StateColor;
+        flat: import("./_color_state").StateColor;
+        plain: import("./_color_state").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">, "type">, "type">, "type">>;
+    new: (data: {
+        light: SchemeColor;
+        dark: SchemeColor;
+    }) => import("./_colordef").ElbeColor<"mode", {
+        light: SchemeColor;
+        dark: SchemeColor;
+    }, Omit<{
+        type: ["state", ...string[]];
+    } & {
+        primary: import("./_color_kind").KindColor;
+        secondary: import("./_color_kind").KindColor;
+        inverse: import("./_color_kind").KindColor;
+    } & Omit<{
+        type: ["kind", ...string[]];
+    } & {
+        accent: import("./_color_manner").MannerColor;
+        info: import("./_color_manner").MannerColor;
+        success: import("./_color_manner").MannerColor;
+        warning: import("./_color_manner").MannerColor;
+        error: import("./_color_manner").MannerColor;
+    } & Omit<{
+        type: ["manner", ...string[]];
+    } & {
+        major: import("./_color_state").StateColor;
+        minor: import("./_color_state").StateColor;
+        flat: import("./_color_state").StateColor;
+        plain: import("./_color_state").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">, "type">, "type">, "type">>;
+    _typeHint: {
+        color: import("./_colordef").ElbeColor<"mode", {
+            light: SchemeColor;
+            dark: SchemeColor;
+        }, Omit<{
+            type: ["state", ...string[]];
+        } & {
+            primary: import("./_color_kind").KindColor;
+            secondary: import("./_color_kind").KindColor;
+            inverse: import("./_color_kind").KindColor;
+        } & Omit<{
+            type: ["kind", ...string[]];
+        } & {
+            accent: import("./_color_manner").MannerColor;
+            info: import("./_color_manner").MannerColor;
+            success: import("./_color_manner").MannerColor;
+            warning: import("./_color_manner").MannerColor;
+            error: import("./_color_manner").MannerColor;
+        } & Omit<{
+            type: ["manner", ...string[]];
+        } & {
+            major: import("./_color_state").StateColor;
+            minor: import("./_color_state").StateColor;
+            flat: import("./_color_state").StateColor;
+            plain: import("./_color_state").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">, "type">, "type">, "type">>;
+        data: {
+            light: SchemeColor;
+            dark: SchemeColor;
+        };
+    };
+} & {
+    generate(path: string[], seed: ColorThemeSeed): ModeColor;
+};
+export type ModeColor = (typeof ModeColor)["_typeHint"]["color"];

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

@@ -0,0 +1,16 @@
+import { LayerColor } from "./_color_layer";
+import { SchemeColor } from "./_color_scheme";
+import { defineColor } from "./_colordef";
+export const ModeColor = defineColor({
+    type: "mode",
+    static: {
+        generate(path, seed) {
+            return ModeColor.new({
+                light: SchemeColor.generate(path, seed, LayerColor.asLayer(seed.base)),
+                dark: SchemeColor.generate([...path, "dark"], seed, seed.mode.dark({ path, seed, base: LayerColor.asLayer(seed.base) })),
+            });
+        },
+    },
+    parent: (data) => data.light,
+    compute: (data) => ({}),
+});

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

@@ -0,0 +1,166 @@
+export declare const RGBAColor: {
+    is: (v: any) => v is import("./_colordef").ElbeColor<"rgba", {
+        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: 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: RGBAColor) => boolean;
+        contrastRatio: (color: RGBAColor) => number;
+    }, "type">>;
+    new: (data: {
+        red: number;
+        green: number;
+        blue: number;
+        alpha: number;
+    }) => import("./_colordef").ElbeColor<"rgba", {
+        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: 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: RGBAColor) => boolean;
+        contrastRatio: (color: RGBAColor) => number;
+    }, "type">>;
+    _typeHint: {
+        color: import("./_colordef").ElbeColor<"rgba", {
+            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: 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: RGBAColor) => boolean;
+            contrastRatio: (color: RGBAColor) => number;
+        }, "type">>;
+        data: {
+            red: number;
+            green: number;
+            blue: number;
+            alpha: number;
+        };
+    };
+} & {
+    rgba: (red: number, green: number, blue: number, alpha: number) => RGBAColor;
+    fromHex: (hex: string) => import("./_colordef").ElbeColor<"rgba", {
+        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: 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: RGBAColor) => boolean;
+        contrastRatio: (color: RGBAColor) => number;
+    }, "type">>;
+};
+export type RGBAColor = (typeof RGBAColor)["_typeHint"]["color"];

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

@@ -0,0 +1,86 @@
+import { hslToRgb, rgbToHsl } from "colors-convert";
+import { clamp } from "../../../../..";
+import { defineColor } from "./_colordef";
+export const RGBAColor = defineColor({
+    type: "rgba",
+    static: {
+        rgba: (red, green, blue, alpha) => {
+            return RGBAColor.new({
+                red,
+                green,
+                blue,
+                alpha,
+            });
+        },
+        fromHex: (hex) => {
+            if (hex.startsWith("#") === false) {
+                throw new Error("Invalid hex color");
+            }
+            let r = 0, g = 0, b = 0, a = 1;
+            if (hex.length === 4) {
+                r = parseInt(hex[1] + hex[1], 16);
+                g = parseInt(hex[2] + hex[2], 16);
+                b = parseInt(hex[3] + hex[3], 16);
+            }
+            else {
+                r = parseInt(hex[1] + hex[2], 16);
+                g = parseInt(hex[3] + hex[4], 16);
+                b = parseInt(hex[5] + hex[6], 16);
+            }
+            return RGBAColor.rgba(r, g, b, a);
+        },
+    },
+    parent: (_) => ({}),
+    compute: (value) => {
+        function luminance() {
+            const [lr, lg, lb] = [value.red, value.green, value.blue].map((v) => {
+                v /= 255;
+                return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+            });
+            return lr * 0.2126 + lg * 0.7152 + lb * 0.0722;
+        }
+        function desaturated(f = 1) {
+            const avg = (value.red + value.green + value.blue) / 3;
+            return RGBAColor.rgba(value.red + (avg - value.red) * f, value.green + (avg - value.green) * f, value.blue + (avg - value.blue) * f, value.alpha);
+        }
+        function withAlpha(alpha) {
+            return RGBAColor.new(Object.assign(Object.assign({}, value), { alpha }));
+        }
+        function inter(other, factor) {
+            return RGBAColor.rgba(value.red + (other.red - value.red) * factor, value.green + (other.green - value.green) * factor, value.blue + (other.blue - value.blue) * factor, value.alpha + (other.alpha - value.alpha) * factor);
+        }
+        function mirrorBrightness(factor = 1) {
+            const hsl = rgbToHsl({ r: value.red, g: value.green, b: value.blue });
+            const newL = (50 - hsl.l) * (factor * 2 - 1) + 50;
+            const rgb = hslToRgb(Object.assign(Object.assign({}, hsl), { l: clamp(newL, 0, 100), s: clamp(hsl.s, 0, 100) }));
+            return RGBAColor.rgba(rgb.r, rgb.g, rgb.b, value.alpha);
+        }
+        function hasWCAGContrast(color) {
+            return contrastRatio(color) >= 3;
+        }
+        function contrastRatio(color) {
+            const l1 = luminance();
+            const l2 = color.luminance();
+            return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+        }
+        function hex() {
+            const c = [value.red, value.green, value.blue].map((v) => Math.round(v).toString(16).padStart(2, "0"));
+            const aHex = Math.round(value.alpha * 255)
+                .toString(16)
+                .padStart(2, "0");
+            return `#${c.join("")}${aHex}`;
+        }
+        return {
+            asCss: () => `rgba(${value.red}, ${value.green}, ${value.blue}, ${value.alpha})`,
+            hex,
+            isDark: () => luminance() < 0.5,
+            luminance,
+            desaturated,
+            withAlpha,
+            inter,
+            mirrorBrightness,
+            hasWCAGContrast,
+            contrastRatio,
+        };
+    },
+});