elbe-ui 1.0.8 → 2.0.0

package/dist/ui/theme/subthemes/color/_theme_color.js

@@ -0,0 +1,83 @@
+import { _seed } from "./_seed";
+import { ContrastColor } from "./colors/_color_contrast";
+import { LayerColor } from "./colors/_color_layer";
+const _data = {
+    values: {
+        root: {
+            base: LayerColor.fromBack("#ffffff"),
+            accent: LayerColor.fromBack("#0077ffff"),
+            info: LayerColor.fromBack("#0000FF"),
+            success: LayerColor.fromBack("#00ff00"),
+            warning: LayerColor.fromBack("#ffa600ff"),
+            error: LayerColor.fromBack("#ff0000"),
+        },
+        hirarchy: ContrastColor.generate([], _seed),
+    },
+    selection: {
+        contrast: "normal",
+        mode: "dark",
+        scheme: "primary",
+        kind: "accent",
+        manner: "plain",
+        state: "neutral",
+    },
+};
+const _current = (t) => {
+    function parseColor(sc) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        //if (isLayerColor(sc)) return sc;
+        if (!((_a = t.values) === null || _a === void 0 ? void 0 : _a.hirarchy)) {
+            throw new Error("ColorTheme: No hirarchy defined");
+        }
+        const mode = t.values.hirarchy[(_b = sc === null || sc === void 0 ? void 0 : sc.contrast) !== null && _b !== void 0 ? _b : "normal"];
+        const scheme = mode[(_c = sc === null || sc === void 0 ? void 0 : sc.mode) !== null && _c !== void 0 ? _c : "light"];
+        const kind = scheme[(_d = sc === null || sc === void 0 ? void 0 : sc.scheme) !== null && _d !== void 0 ? _d : "primary"];
+        const manner = kind[(_e = sc === null || sc === void 0 ? void 0 : sc.kind) !== null && _e !== void 0 ? _e : "accent"];
+        const state = manner[(_f = sc === null || sc === void 0 ? void 0 : sc.manner) !== null && _f !== void 0 ? _f : "flat"];
+        let color = state[(_g = sc === null || sc === void 0 ? void 0 : sc.state) !== null && _g !== void 0 ? _g : "neutral"];
+        if (!color || !LayerColor.is(manner)) {
+            color = manner["flat"]["neutral"];
+        }
+        if (!color || !LayerColor.is(color)) {
+            return LayerColor.fromBack("#ff00ff");
+        }
+        return color;
+    }
+    return Object.assign(Object.assign({}, t), { currentColor: parseColor(t.selection), 
+        /** shorthand for color.selection.contrast == "highvis" */
+        isContrast: t.selection.contrast == "highvis", 
+        /** shorthand for color.selection.mode == "dark" */
+        isDark: t.selection.mode == "dark" });
+};
+export const colorThemeData = {
+    seed: _seed,
+    _configType: _data,
+    compute: _current,
+    asCss: (c) => ({ color: c.currentColor.front.asCss() }),
+    asCssContext: (c) => {
+        var _a, _b;
+        return ({
+            front: c.currentColor.front.asCss(),
+            back: c.currentColor.back.asCss(),
+            border: (_b = (_a = c.currentColor.border) === null || _a === void 0 ? void 0 : _a.asCss()) !== null && _b !== void 0 ? _b : "transparent",
+            outline: c.values.root.accent.back.asCss(),
+        });
+    },
+    fromSeed: (seed) => {
+        var _a;
+        return {
+            values: {
+                root: {
+                    base: LayerColor.fromBack(seed.base),
+                    accent: LayerColor.fromBack(seed.accent),
+                    info: LayerColor.fromBack(seed.info),
+                    success: LayerColor.fromBack(seed.success),
+                    warning: LayerColor.fromBack(seed.warning),
+                    error: LayerColor.fromBack(seed.error),
+                },
+                hirarchy: ContrastColor.generate([], seed),
+            },
+            selection: (_a = seed.selection) !== null && _a !== void 0 ? _a : _data.selection,
+        };
+    },
+};

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

@@ -0,0 +1,284 @@
+import { LayerColor } from "./_color_layer";
+import { ModeColor } from "./_color_mode";
+import { ColorThemeSeed } from "./colors";
+export declare const ContrastColor: {
+    is: (v: any) => v is import("./_colordef").ElbeColor<"contrast", {
+        normal: ModeColor;
+        highvis: ModeColor;
+    }, Omit<{
+        type: ["mode", ...string[]];
+    } & {
+        light: import("./_color_scheme").SchemeColor;
+        dark: import("./_color_scheme").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">, "type">>;
+    new: (data: {
+        normal: ModeColor;
+        highvis: ModeColor;
+    }) => import("./_colordef").ElbeColor<"contrast", {
+        normal: ModeColor;
+        highvis: ModeColor;
+    }, Omit<{
+        type: ["mode", ...string[]];
+    } & {
+        light: import("./_color_scheme").SchemeColor;
+        dark: import("./_color_scheme").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">, "type">>;
+    _typeHint: {
+        color: import("./_colordef").ElbeColor<"contrast", {
+            normal: ModeColor;
+            highvis: ModeColor;
+        }, Omit<{
+            type: ["mode", ...string[]];
+        } & {
+            light: import("./_color_scheme").SchemeColor;
+            dark: import("./_color_scheme").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">, "type">>;
+        data: {
+            normal: ModeColor;
+            highvis: ModeColor;
+        };
+    };
+} & {
+    generate(path: string[], seed: ColorThemeSeed): ContrastColor;
+};
+export type ContrastColor = (typeof ContrastColor)["_typeHint"]["color"];

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

@@ -0,0 +1,17 @@
+import { LayerColor } from "./_color_layer";
+import { ModeColor } from "./_color_mode";
+import { defineColor } from "./_colordef";
+export const ContrastColor = defineColor({
+    type: "contrast",
+    static: {
+        generate(path, seed) {
+            const p = { path, base: LayerColor.asLayer(seed.base), seed };
+            return ContrastColor.new({
+                normal: ModeColor.generate(path, seed.contrast.normal(p)),
+                highvis: ModeColor.generate([...path, "highvis"], seed.contrast.highvis(p)),
+            });
+        },
+    },
+    parent: (data) => data.normal,
+    compute: (_) => ({}),
+});

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

@@ -0,0 +1,242 @@
+import { LayerColor } from "./_color_layer";
+import { MannerColor } from "./_color_manner";
+import { ColorThemeSeed } from "./colors";
+export declare const KindColor: {
+    is: (v: any) => v is import("./_colordef").ElbeColor<"kind", {
+        accent: MannerColor;
+        info: MannerColor;
+        success: MannerColor;
+        warning: MannerColor;
+        error: 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">>;
+    new: (data: {
+        accent: MannerColor;
+        info: MannerColor;
+        success: MannerColor;
+        warning: MannerColor;
+        error: MannerColor;
+    }) => import("./_colordef").ElbeColor<"kind", {
+        accent: MannerColor;
+        info: MannerColor;
+        success: MannerColor;
+        warning: MannerColor;
+        error: 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">>;
+    _typeHint: {
+        color: import("./_colordef").ElbeColor<"kind", {
+            accent: MannerColor;
+            info: MannerColor;
+            success: MannerColor;
+            warning: MannerColor;
+            error: 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">>;
+        data: {
+            accent: MannerColor;
+            info: MannerColor;
+            success: MannerColor;
+            warning: MannerColor;
+            error: MannerColor;
+        };
+    };
+} & {
+    generate(path: string[], seed: ColorThemeSeed, base: LayerColor): KindColor;
+};
+export type KindColor = (typeof KindColor)["_typeHint"]["color"];

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

@@ -0,0 +1,45 @@
+import { LayerColor } from "./_color_layer";
+import { MannerColor } from "./_color_manner";
+import { defineColor } from "./_colordef";
+export const KindColor = defineColor({
+    type: "kind",
+    static: {
+        generate(path, seed, base) {
+            return KindColor.new({
+                //plain: MannerColor.generate([...path, "plain"], seed, base),
+                accent: MannerColor.generate([...path, "accent"], seed, base, seed.kind.accent({
+                    path,
+                    seed,
+                    base,
+                    style: LayerColor.asLayer(seed.accent),
+                })),
+                info: MannerColor.generate([...path, "info"], seed, base, seed.kind.info({
+                    path,
+                    seed,
+                    base,
+                    style: LayerColor.asLayer(seed.info),
+                })),
+                success: MannerColor.generate([...path, "success"], seed, base, seed.kind.success({
+                    path,
+                    seed,
+                    base,
+                    style: LayerColor.asLayer(seed.success),
+                })),
+                warning: MannerColor.generate([...path, "warning"], seed, base, seed.kind.warning({
+                    path,
+                    seed,
+                    base,
+                    style: LayerColor.asLayer(seed.warning),
+                })),
+                error: MannerColor.generate([...path, "error"], seed, base, seed.kind.error({
+                    path,
+                    seed,
+                    base,
+                    style: LayerColor.asLayer(seed.error),
+                })),
+            });
+        },
+    },
+    parent: (data) => data.accent,
+    compute: (_) => ({}),
+});