elbe-ui 0.2.46 → 0.2.52

package/dist/ui/components/input/select.d.ts

@@ -1,4 +1,4 @@
-import { type ElbeProps } from "../base/box";
+import { ActionElbeProps } from "../base/box";
 export declare function Select({ options, value, label, onChange, ...elbe }: {
     options: {
         key: string;
@@ -7,4 +7,4 @@ export declare function Select({ options, value, label, onChange, ...elbe }: {
     value?: string;
     label?: string;
     onChange: (value: string) => any;
-} & ElbeProps): import("preact").JSX.Element;
+} & ActionElbeProps): import("preact").JSX.Element;

package/dist/ui/components/input/select.js

@@ -13,5 +13,5 @@ import { jsx as _jsx } from "preact/jsx-runtime";
 import { applyProps } from "../base/box";
 export function Select(_a) {
     var { options, value, label, onChange } = _a, elbe = __rest(_a, ["options", "value", "label", "onChange"]);
-    return (_jsx("select", Object.assign({}, applyProps(elbe), { value: value, label: label, onChange: (e) => onChange(e.currentTarget.value), children: options.map(({ key, label }) => (_jsx("option", { value: key, children: label }, key))) })));
+    return (_jsx("select", Object.assign({}, applyProps("select", elbe), { value: value, label: label, onChange: (e) => onChange(e.currentTarget.value), children: options.map(({ key, label }) => (_jsx("option", { value: key, children: label }, key))) })));
 }

package/dist/ui/components/input/switch.d.ts

@@ -0,0 +1,6 @@
+import { ActionElbeProps } from "../../..";
+export declare function Switch({ value, label, onChange, ...elbe }: {
+    value: boolean;
+    label?: string;
+    onChange?: ((checked: boolean) => void) | null;
+} & ActionElbeProps): import("preact").JSX.Element;

package/dist/ui/components/input/switch.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { CheckIcon, XIcon } from "lucide-react";
+import { applyProps } from "../../..";
+export function Switch(_a) {
+    var { value, label, onChange } = _a, elbe = __rest(_a, ["value", "label", "onChange"]);
+    return (_jsx("button", Object.assign({ onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(!value) }, applyProps("switch", elbe, ["bordered card accent"], {
+        minHeight: 0,
+        minWidth: 0,
+        filter: onChange ? "" : "grayscale(1)",
+        opacity: onChange ? "" : "0.5",
+        height: "1.8rem",
+        width: "2.7rem",
+        position: "relative",
+        padding: "0rem",
+        borderColor: "var(--c-context-front)",
+        backgroundColor: value
+            ? "var(--c-context-front)"
+            : "var(--c-context-back)",
+        display: "flex",
+        alignItems: "center",
+        transition: "border-color 0.25s, border-width 0.25s",
+    }), { children: _jsx("div", { style: {
+                position: "absolute",
+                left: value ? "1.2rem" : "0.4rem",
+                height: ".8rem",
+                width: ".8rem",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: "left 0.25s",
+            }, children: value ? (_jsx(CheckIcon, { color: "var(--c-context-back)", 
+                //width=".8rem"
+                //height=".8rem"
+                absoluteStrokeWidth: false, strokeWidth: "0.3rem" })) : (_jsx(XIcon, { color: "var(--c-context-front)", 
+                //width=".8rem"
+                //height=".8rem"
+                absoluteStrokeWidth: false, strokeWidth: "0.3rem" })) }) })));
+}

package/dist/ui/components/input/text_area.d.ts

@@ -1,4 +1,4 @@
-import { type ElbeProps } from "../base/box";
+import { ActionElbeProps } from "../base/box";
 export declare function _TextArea({ label, hint, readonly, rows, maxLength, value, onInput, ...elbe }: {
     label?: string;
     hint: string;
@@ -7,4 +7,4 @@ export declare function _TextArea({ label, hint, readonly, rows, maxLength, valu
     readonly?: boolean;
     value: string | number;
     onInput?: (value: string) => void;
-} & ElbeProps): import("preact").JSX.Element;
+} & ActionElbeProps): import("preact").JSX.Element;

package/dist/ui/components/input/text_area.js

@@ -18,5 +18,5 @@ export function _TextArea(_a) {
             display: "flex",
             flexDirection: "column",
             alignItems: "stretch",
-        }, "data-tooltip": elbe.tooltip, children: _jsx("textarea", Object.assign({}, applyProps(elbe, null, { width: "100%" }), { label: label, size: 5, cols: 5, placeholder: hint, rows: rows, maxLength: maxLength, value: value, onInput: (e) => onInput && onInput(e.currentTarget.value), readonly: readonly })) }));
+        }, "data-tooltip": elbe.tooltip, children: _jsx("textarea", Object.assign({}, applyProps("text_area", elbe, null, { width: "100%" }), { label: label, size: 5, cols: 5, placeholder: hint, rows: rows, maxLength: maxLength, value: value, onInput: (e) => onInput && onInput(e.currentTarget.value), readonly: readonly })) }));
 }

package/dist/ui/components/layout/alignment.d.ts

@@ -0,0 +1,9 @@
+export type Alignment = "start_start" | "start_center" | "start_end" | "center_start" | "center" | "center_end" | "end_start" | "end_center" | "end_end";
+export declare function Align({ alignment, height, width, size, class: className, children, }: {
+    alignment?: Alignment;
+    height?: string | number;
+    width?: string | number;
+    size?: string | number;
+    class?: string;
+    children: React.ReactNode;
+}): import("preact").JSX.Element;

package/dist/ui/components/layout/alignment.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { Column } from "./flex";
+export function Align({ alignment = "center", height, width, size, class: className, children, }) {
+    var _a, _b;
+    const [main, cross] = alignment.split("_");
+    if (typeof height === "number")
+        height = `${height}rem`;
+    if (typeof width === "number")
+        width = `${width}rem`;
+    if (typeof size === "number")
+        size = `${size}rem`;
+    return (_jsx(Column, { class: className, cross: (_a = cross) !== null && _a !== void 0 ? _a : "center", style: { height: height !== null && height !== void 0 ? height : size, width: width !== null && width !== void 0 ? width : size }, main: (_b = main) !== null && _b !== void 0 ? _b : "center", children: children }));
+}

package/dist/ui/components/layout/flex.js

@@ -23,7 +23,7 @@ export function Row(_a) {
     return _Flex(true, { gap, main, cross, children }, p, wrap);
 }
 function _Flex(row, p, elbe, wraps) {
-    return (_jsx("div", Object.assign({}, applyProps(elbe, [row ? "row" : "column", wraps && "wrap"], {
+    return (_jsx("div", Object.assign({}, applyProps("flex", elbe, [row ? "row" : "column", wraps && "wrap"], {
         justifyContent: p.main,
         alignItems: p.cross,
         gap: `${p.gap}rem`,

package/dist/ui/components/layout/header.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from "preact/jsx-runtime";
+export type HeaderParams = {
+    title?: string;
+    back?: null | "close" | "back" | JSX.Element;
+    actions?: any;
+    _absolute?: boolean;
+};
+/**
+ * Header is a layout component that provides a header for a page.
+ * It is used to create a consistent header for pages.
+ * @param back - The back button type. If null, no back button is shown. If "close", a close button is shown. If "back", a back button is shown.
+ * @param title - The title of the page.
+ * @param actions - The actions to show on the right side of the header.
+ * @param children - The children to show in the header. If children are provided, the title is ignored.
+ */
+export declare function Header({ back, title, actions, _absolute, children, height, }: HeaderParams & {
+    children?: any;
+    height?: number;
+}): JSX.Element;

package/dist/ui/components/layout/header.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
+import { IconButton, Icons, Row, Text } from "../../..";
+/**
+ * Header is a layout component that provides a header for a page.
+ * It is used to create a consistent header for pages.
+ * @param back - The back button type. If null, no back button is shown. If "close", a close button is shown. If "back", a back button is shown.
+ * @param title - The title of the page.
+ * @param actions - The actions to show on the right side of the header.
+ * @param children - The children to show in the header. If children are provided, the title is ignored.
+ */
+export function Header({ back, title, actions, _absolute, children, height = 4, }) {
+    // if the icon is a type of back, we have to hide it if there is no history
+    if (typeof back === "string" &&
+        ["back", "close"].includes(back) &&
+        history.length == 0) {
+        back = null;
+    }
+    const goBack = () => history.go(-1);
+    const [isScrolled, setIsScrolled] = useState(false);
+    useEffect(() => {
+        const _handle = () => setIsScrolled(window.scrollY > 0);
+        window.addEventListener("scroll", _handle);
+        return () => {
+            window.removeEventListener("scroll", _handle);
+        };
+    }, []);
+    return (_jsxs("div", { children: [_jsx("div", { style: { height: `${height}rem` } }), _jsxs("div", { class: "header frosted", style: {
+                    height: `${height}rem`,
+                    borderColor: isScrolled
+                        ? "color-mix(in srgb, var(--c-context-border) 40%, transparent)"
+                        : "transparent",
+                    position: _absolute ? "absolute" : "fixed",
+                }, children: [back ? (typeof back !== "string" ? (back) : (_jsx(IconButton.plain, { ariaLabel: back === "back" ? "go back" : "close", icon: back === "back" ? Icons.ArrowLeft : Icons.X, onTap: goBack }))) : null, children ? children : _jsx(_PageCenteredTitle, { text: title || "" }), actions ? (_jsx(Row, { gap: 0.5, main: "end", children: actions })) : null] })] }));
+}
+function _PageCenteredTitle({ text }) {
+    return _jsx(Text.h5, { v: text, class: "flex-1", align: "center" });
+    /* CENTER TO PAGE:
+    return (
+      <div class="flex-1" style={{ height: "0rem" }}>
+        <div
+          style={{
+            position: "absolute",
+            left: "50%",
+            transform: "translateX(-50%) translateY(-50%)",
+          }}
+        >
+          <Text.h5 v={text} align="center" />
+        </div>
+      </div>
+    );*/
+}

package/dist/ui/components/layout/scaffold.d.ts

@@ -1,19 +1,5 @@
-import { JSX } from "preact/jsx-runtime";
 import { type ElbeColorSchemes } from "../../..";
-type HeaderParams = {
-    title?: string;
-    back?: null | "close" | "back" | JSX.Element;
-    actions?: any;
-    _absolute?: boolean;
-};
-/**
- * Header is a layout component that provides a header for a page.
- * It is used to create a consistent header for pages.
- * @param back - The back button type. If null, no back button is shown. If "close", a close button is shown. If "back", a back button is shown.
- * @param title - The title of the page.
- * @param actions - The actions to show on the right side of the header.
- */
-export declare function Header({ back, title, actions, _absolute }: HeaderParams): JSX.Element;
+import { HeaderParams } from "./header";
 /**
  * Scaffold is a layout component that provides a header and a content area.
  * It is used to create a consistent layout for pages.
@@ -26,5 +12,4 @@ export declare function Scaffold({ children, baseLimited, gap, padded, scheme, s
     scheme?: ElbeColorSchemes;
     scroll?: boolean;
     height?: number;
-} & HeaderParams): JSX.Element;
-export {};
+} & HeaderParams): import("preact").JSX.Element;

package/dist/ui/components/layout/scaffold.js

@@ -10,40 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useEffect, useState } from "preact/hooks";
-import { classString, Icons, Text } from "../../..";
-import { IconButton } from "../button/icon_button";
-import { Column, Row } from "./flex";
-/**
- * Header is a layout component that provides a header for a page.
- * It is used to create a consistent header for pages.
- * @param back - The back button type. If null, no back button is shown. If "close", a close button is shown. If "back", a back button is shown.
- * @param title - The title of the page.
- * @param actions - The actions to show on the right side of the header.
- */
-export function Header({ back, title, actions, _absolute }) {
-    // if the icon is a type of back, we have to hide it if there is no history
-    if (typeof back === "string" &&
-        ["back", "close"].includes(back) &&
-        history.length == 0) {
-        back = null;
-    }
-    const goBack = () => history.go(-1);
-    const [isScrolled, setIsScrolled] = useState(false);
-    useEffect(() => {
-        const _handle = () => setIsScrolled(window.scrollY > 0);
-        window.addEventListener("scroll", _handle);
-        return () => {
-            window.removeEventListener("scroll", _handle);
-        };
-    }, []);
-    return (_jsxs("div", { children: [_jsx("div", { style: "height: 4.5rem" }), _jsxs("div", { class: "header", style: {
-                    borderColor: isScrolled
-                        ? "color-mix(in srgb, var(--c-context-border) 40%, transparent)"
-                        : "transparent",
-                    position: _absolute ? "absolute" : "fixed",
-                }, children: [_jsx("div", { class: "flex-1", children: back ? (typeof back !== "string" ? (back) : (_jsx(IconButton.plain, { icon: back === "back" ? Icons.ArrowLeft : Icons.X, onTap: goBack }))) : null }), _jsx(Text.h4, { v: title }), _jsx(Row, { class: "flex-1", gap: 0.5, main: "end", children: actions })] })] }));
-}
+import { classString } from "../../..";
+import { Column } from "./flex";
+import { Header } from "./header";
 /**
  * Scaffold is a layout component that provides a header and a content area.
  * It is used to create a consistent layout for pages.

package/dist/ui/components/layout/scroll.js

@@ -6,7 +6,7 @@ export class Scroll extends Component {
         super(props);
     }
     render() {
-        return (_jsx("div", Object.assign({}, applyProps(this.props, null, {
+        return (_jsx("div", Object.assign({}, applyProps("scroll", this.props, null, {
             overflowY: this.props.axis === "vertical" ? "scroll" : "hidden",
             overflowX: this.props.axis === "horizontal" ? "scroll" : "hidden",
         }), { children: _jsx("div", { class: this.props.innerClass, style: this.props.axis === "horizontal" ? "min-width: min-content;" : "", children: this.props.children }) })));

package/dist/ui/components/progress_bar.d.ts

@@ -0,0 +1,6 @@
+import { ElbeProps } from "../..";
+export declare function ProgressBar({ value, max, plain, ...elbe }: {
+    value: number;
+    max?: number;
+    plain?: boolean;
+} & ElbeProps): import("preact").JSX.Element;

package/dist/ui/components/progress_bar.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { applyProps, clamp } from "../..";
+export function ProgressBar(_a) {
+    var { value, max = 100, plain } = _a, elbe = __rest(_a, ["value", "max", "plain"]);
+    return (_jsx("div", Object.assign({}, applyProps("progress_bar", elbe, [plain ? "plain" : "accent minor"], {
+        width: "100%",
+        height: "0.5rem",
+        borderRadius: "1rem",
+        border: "none",
+    }), { children: _jsx("div", { style: {
+                width: `${clamp((value / max) * 100, 0, 100)}%`,
+                height: "100%",
+                backgroundColor: "var(--c-context-front)",
+                transition: "width 0.25s",
+                borderRadius: "1rem",
+            } }) })));
+}

package/dist/ui/components/text.js

@@ -19,9 +19,9 @@ export class Text extends React.Component {
     }
     render() {
         const _a = this.props, { align, bold, italic, underline, striked, color, size, children, variant, v } = _a, elbe = __rest(_a, ["align", "bold", "italic", "underline", "striked", "color", "size", "children", "variant", "v"]);
-        return (_jsxs("span", Object.assign({}, applyProps(elbe, [
+        return (_jsxs("span", Object.assign({}, applyProps("text", elbe, [
             "text",
-            align,
+            //align,
             bold && "b",
             italic && "i",
             underline && "underline",
@@ -32,6 +32,7 @@ export class Text extends React.Component {
             fontSize: size ? `${size}rem` : "",
             color: color || "",
             scrollMarginTop: "2rem",
+            textAlign: align,
         }), { children: [v, children] })));
     }
 }

package/dist/ui/theme/color_theme.d.ts

@@ -1,2 +1,2 @@
-import { type ColorThemeSeed } from "./colors";
-export declare function colorThemePreset(merge?: Partial<ColorThemeSeed>): ColorThemeSeed;
+import { ColorThemeSeed, PartialColorThemeSeed } from "./seed";
+export declare function colorThemePreset(merge?: Partial<PartialColorThemeSeed>, highVis?: boolean): ColorThemeSeed;

package/dist/ui/theme/color_theme.js

@@ -1,16 +1,21 @@
-import { colors, LayerColor, } from "./colors";
-export function colorThemePreset(merge) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+import { colors, LayerColor } from "./colors";
+export function colorThemePreset(merge, highVis = false) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
     const styleSel = (_, b, s) => {
         const bL = b.luminance;
         if (bL === 1)
             return s;
+        //if (bL === 0) return s.mirrorBrightness();
+        if (s.luminance == 0)
+            return s.mirrorBrightness();
         return s.inter(LayerColor.fromBack(bL > 0.5 ? colors.black : colors.white), 0.1);
     };
     const seed = merge !== null && merge !== void 0 ? merge : {};
     return {
         base: (_a = seed.base) !== null && _a !== void 0 ? _a : LayerColor.fromBack(colors.white),
-        accent: (_b = seed.accent) !== null && _b !== void 0 ? _b : LayerColor.fromBack(colors.blueAccent),
+        accent: highVis
+            ? LayerColor.fromHex("#000000")
+            : (_b = seed.accent) !== null && _b !== void 0 ? _b : LayerColor.fromBack(colors.blueAccent),
         info: (_c = seed.info) !== null && _c !== void 0 ? _c : LayerColor.fromBack(colors.blue),
         success: (_d = seed.success) !== null && _d !== void 0 ? _d : LayerColor.fromBack(colors.green),
         warning: (_e = seed.warning) !== null && _e !== void 0 ? _e : LayerColor.fromBack(colors.yellow),
@@ -20,9 +25,11 @@ export function colorThemePreset(merge) {
             dark: (_k = (_j = seed.mode) === null || _j === void 0 ? void 0 : _j.dark) !== null && _k !== void 0 ? _k : ((_, b) => b.mirrorBrightness()),
         },
         scheme: {
-            primary: (_m = (_l = seed.scheme) === null || _l === void 0 ? void 0 : _l.primary) !== null && _m !== void 0 ? _m : ((_, b) => b),
-            secondary: (_p = (_o = seed.scheme) === null || _o === void 0 ? void 0 : _o.secondary) !== null && _p !== void 0 ? _p : ((c, b) => new LayerColor(b.back.inter(c.accent.back, 0.1).desaturated(0.5), b.front, b.border)),
-            inverse: (_r = (_q = seed.scheme) === null || _q === void 0 ? void 0 : _q.inverse) !== null && _r !== void 0 ? _r : ((_, b) => b.mirrorBrightness()),
+            primary: (_m = (_l = seed.scheme) === null || _l === void 0 ? void 0 : _l.primary) !== null && _m !== void 0 ? _m : _makePrimary,
+            secondary: highVis
+                ? (_p = (_o = seed.scheme) === null || _o === void 0 ? void 0 : _o.primary) !== null && _p !== void 0 ? _p : _makePrimary
+                : (_r = (_q = seed.scheme) === null || _q === void 0 ? void 0 : _q.secondary) !== null && _r !== void 0 ? _r : _makeSecondary,
+            inverse: (_t = (_s = seed.scheme) === null || _s === void 0 ? void 0 : _s.inverse) !== null && _t !== void 0 ? _t : _makeInverse,
         },
         style: {
             accent: styleSel,
@@ -32,26 +39,43 @@ export function colorThemePreset(merge) {
             error: styleSel,
         },
         variant: {
-            major: (_t = (_s = seed.variant) === null || _s === void 0 ? void 0 : _s.major) !== null && _t !== void 0 ? _t : ((_, __, s) => LayerColor.fromBack(s.back, { border: s.back })),
-            minor: (_v = (_u = seed.variant) === null || _u === void 0 ? void 0 : _u.minor) !== null && _v !== void 0 ? _v : ((_, b, s) => {
-                const back = b.back;
-                const backIn = back.mirrorBrightness();
-                const major = s.back;
-                const minor = s.back.inter(back, 0.8);
-                const minorFront = minor.hasWCAGContrast(major) ? major : null;
-                return new LayerColor(s.back.withAlpha(0.25), minorFront !== null && minorFront !== void 0 ? minorFront : major.inter(backIn, 0.6), minorFront !== null && minorFront !== void 0 ? minorFront : major.inter(backIn, 0.3));
-            }),
-            flat: (_x = (_w = seed.variant) === null || _w === void 0 ? void 0 : _w.flat) !== null && _x !== void 0 ? _x : ((_, b, s) => {
-                //return new LayerColor(b.back, s?.back ?? b.front, b.front);
-                //calculate front brightness
-                const front = !s
-                    ? b.front
-                    : b.back.hasWCAGContrast(s === null || s === void 0 ? void 0 : s.back)
-                        ? s === null || s === void 0 ? void 0 : s.back
-                        : s === null || s === void 0 ? void 0 : s.back.inter(b.front, 0.6);
-                return new LayerColor(b.back, //.withAlpha(0),
-                front, null, !s ? b.front.withAlpha(0.3) : b.front);
-            }),
+            major: (_v = (_u = seed.variant) === null || _u === void 0 ? void 0 : _u.major) !== null && _v !== void 0 ? _v : _makeMajor,
+            minor: ((_x = (_w = seed.variant) === null || _w === void 0 ? void 0 : _w.minor) !== null && _x !== void 0 ? _x : highVis) ? _makeMajor : _makeMinor,
+            flat: (_z = (_y = seed.variant) === null || _y === void 0 ? void 0 : _y.flat) !== null && _z !== void 0 ? _z : ((c, b, s) => _makeFlat(highVis, c, b, s)),
         },
     };
 }
+function _makePrimary(seed, base) {
+    return base;
+}
+function _makeSecondary(seed, base) {
+    const isDark = base.back.luminance < 0.3;
+    return new LayerColor(base.back.inter(seed.accent.back, isDark ? 0.2 : 0.1).desaturated(0.5), base.front, base.border);
+}
+function _makeInverse(seed, base) {
+    return base.mirrorBrightness();
+}
+function _makeMajor(seed, back, style) {
+    return LayerColor.fromBack(style.back, { border: style.back });
+}
+function _makeMinor(seed, back, style) {
+    const b = back.back;
+    const backIn = b.mirrorBrightness();
+    const major = style.back;
+    const minor = style.back.inter(b, 0.8);
+    const minorFront = minor.hasWCAGContrast(major) ? major : null;
+    return new LayerColor(style.back.withAlpha(0.25), minorFront !== null && minorFront !== void 0 ? minorFront : major.inter(backIn, 0.6), minorFront !== null && minorFront !== void 0 ? minorFront : major.inter(backIn, 0.3));
+}
+function _makeFlat(highVis, seed, back, style) {
+    const front = !style
+        ? back.front
+        : back.back.hasWCAGContrast(style === null || style === void 0 ? void 0 : style.back)
+            ? style === null || style === void 0 ? void 0 : style.back
+            : style === null || style === void 0 ? void 0 : style.back.inter(back.front, 0.6);
+    const isDark = back.back.luminance < 0.3;
+    const border = !highVis && !style
+        ? back.front.inter(back.back, isDark ? 0.75 : 0.9)
+        : back.front;
+    return new LayerColor(back.back, //.withAlpha(0),
+    front, highVis ? border : null, border);
+}

package/dist/ui/theme/colors.d.ts

@@ -1,6 +1,8 @@
+import { ColorSeedColors, ColorThemeSeed, PartialColorThemeSeed } from "./seed";
 export type ElbeColorModes = "light" | "dark";
 export type ElbeColorSchemes = "primary" | "secondary" | "inverse";
-export type ElbeColorKinds = "plain" | "accent" | "info" | "success" | "warning" | "error";
+export type ElbeAlertKinds = "success" | "warning" | "error" | "info";
+export type ElbeColorKinds = ElbeAlertKinds | "plain" | "accent";
 export type ElbeColorManners = "major" | "minor" | "flat" | "plain";
 export declare const cModes: ElbeColorModes[];
 export declare const cSchemes: ElbeColorSchemes[];
@@ -11,37 +13,6 @@ export declare const cLayers: string[];
 export type SeedSelector = (seed: ColorThemeSeed, base: LayerColor) => LayerColor;
 export type SeedFlatSelector = (seed: ColorThemeSeed, base: LayerColor, style?: LayerColor) => LayerColor;
 export type SeedStyleSelector = (seed: ColorThemeSeed, base: LayerColor, style: LayerColor) => LayerColor;
-export type ColorSeedColors = {
-    base: LayerColor;
-    accent: LayerColor;
-    info: LayerColor;
-    success: LayerColor;
-    warning: LayerColor;
-    error: LayerColor;
-};
-export type ColorThemeSeed = ColorSeedColors & {
-    mode: {
-        light: SeedSelector;
-        dark: SeedSelector;
-    };
-    scheme: {
-        primary: SeedSelector;
-        secondary: SeedSelector;
-        inverse: SeedSelector;
-    };
-    style: {
-        accent: SeedStyleSelector;
-        info: SeedStyleSelector;
-        success: SeedStyleSelector;
-        warning: SeedStyleSelector;
-        error: SeedStyleSelector;
-    };
-    variant: {
-        major: SeedStyleSelector;
-        minor: SeedStyleSelector;
-        flat: SeedFlatSelector;
-    };
-};
 export declare class RGBAColor {
     r: number;
     g: number;
@@ -82,6 +53,7 @@ export declare class LayerColor extends RGBAColor {
     mirrorBrightness(factor?: number): LayerColor;
     desaturated(): LayerColor;
     static fromHex(back: string, front?: string | null, border?: string | null): LayerColor;
+    withBorder(border: RGBAColor): LayerColor;
     static fromBack(back: RGBAColor, c?: {
         front?: RGBAColor;
         border?: RGBAColor;
@@ -137,5 +109,5 @@ export declare class ColorTheme {
     color: ModeColor;
     constructor(colors: ColorSeedColors, color: ModeColor);
     asCss(): string;
-    static generate(seed?: Partial<ColorThemeSeed>): ColorTheme;
+    static generate(seed?: Partial<PartialColorThemeSeed>, highVis?: boolean): ColorTheme;
 }

package/dist/ui/theme/colors.js

@@ -120,6 +120,9 @@ export class LayerColor extends RGBAColor {
         }
         return new LayerColor(RGBAColor.fromHex(back), RGBAColor.fromHex(front !== null && front !== void 0 ? front : null), RGBAColor.fromHex(border !== null && border !== void 0 ? border : null));
     }
+    withBorder(border) {
+        return new LayerColor(this.back, this.front, border);
+    }
     static fromBack(back, c) {
         var _a, _b;
         const front = back.isDark ? colors.white : colors.black;
@@ -264,17 +267,16 @@ export class ColorTheme {
         this.color = color;
     }
     asCss() {
-        return (":root {" +
-            `--c-accent: ${this.colors.accent.back.asCss()};` +
-            `--c-info: ${this.colors.info.back.asCss()};` +
-            `--c-success: ${this.colors.success.back.asCss()};` +
-            `--c-warning: ${this.colors.warning.back.asCss()};` +
-            `--c-error: ${this.colors.error.back.asCss()};` +
-            "}\n" +
-            this.color.asCss());
-    }
-    static generate(seed) {
-        const s = colorThemePreset(seed);
+        return (`:root {
+  --c-accent: ${this.colors.accent.back.asCss()};
+  --c-info: ${this.colors.info.back.asCss()};
+  --c-success: ${this.colors.success.back.asCss()};
+  --c-warning: ${this.colors.warning.back.asCss()};
+  --c-error: ${this.colors.error.back.asCss()};
+}` + this.color.asCss());
+    }
+    static generate(seed, highVis) {
+        const s = colorThemePreset(seed, highVis !== null && highVis !== void 0 ? highVis : false);
         return new ColorTheme(s, ModeColor.generate(s));
     }
 }

package/dist/ui/theme/seed.d.ts

@@ -0,0 +1,43 @@
+import { LayerColor, SeedFlatSelector, SeedSelector, SeedStyleSelector } from "../..";
+export type ColorSeedColors = {
+    base: LayerColor;
+    accent: LayerColor;
+    info: LayerColor;
+    success: LayerColor;
+    warning: LayerColor;
+    error: LayerColor;
+};
+type _ModeSeed = {
+    light: SeedSelector;
+    dark: SeedSelector;
+};
+type _SchemeSeed = {
+    primary: SeedSelector;
+    secondary: SeedSelector;
+    inverse: SeedSelector;
+};
+type _StyleSeed = {
+    accent: SeedStyleSelector;
+    info: SeedStyleSelector;
+    success: SeedStyleSelector;
+    warning: SeedStyleSelector;
+    error: SeedStyleSelector;
+};
+type _VariantSeed = {
+    major: SeedStyleSelector;
+    minor: SeedStyleSelector;
+    flat: SeedFlatSelector;
+};
+export type ColorThemeSeed = ColorSeedColors & {
+    mode: _ModeSeed;
+    scheme: _SchemeSeed;
+    style: _StyleSeed;
+    variant: _VariantSeed;
+};
+export type PartialColorThemeSeed = Partial<ColorSeedColors> & {
+    mode?: Partial<_ModeSeed>;
+    scheme?: Partial<_SchemeSeed>;
+    style?: Partial<_StyleSeed>;
+    variant?: Partial<_VariantSeed>;
+};
+export {};

package/dist/ui/theme/seed.js

@@ -0,0 +1 @@
+export {};