elbe-ui 0.2.52 → 0.4.0

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

@@ -1,52 +1,58 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { ChevronLeft, MenuIcon, XIcon } from "lucide-react";
 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] })] }));
+import { Card, IconButton, Text, useLayoutMode, useSiteScroll, useTheme, useThemeConfig, } from "../../..";
+import { maybeAppBase } from "./ctx_app_base";
+import { _Toolbar } from "./toolbar";
+const _backBtn = _jsx(BackButton, { onTap: () => history.go(-1) });
+const _closeBtn = _jsx(CloseButton, { onTap: () => history.go(-1) });
+export function Header(p) {
+    var _a, _b, _c, _d, _e, _f;
+    const appBase = maybeAppBase();
+    const layoutMode = useLayoutMode();
+    const scroll = useSiteScroll();
+    const tConfig = useThemeConfig();
+    const theme = useTheme();
+    return (_jsxs(Card, { padding: 0, scheme: "primary", bordered: true, frosted: !tConfig.highVis, sharp: true, style: {
+            position: "sticky",
+            top: 0,
+            left: 0,
+            right: 0,
+            height: `${4 + theme.geometry.borderWidth}rem`,
+            padding: ".5rem",
+            display: "flex",
+            alignItems: "center",
+            borderTop: "none",
+            borderLeft: "none",
+            borderRight: "none",
+            borderColor: tConfig.highVis || scroll ? null : "transparent",
+            gap: "1rem",
+            zIndex: 80,
+        }, children: [p.leading === "back" && _backBtn, p.leading === "close" && _closeBtn, typeof p.leading === "function"
+                ? p.leading
+                : appBase &&
+                    layoutMode != "wide" && (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), icon: MenuIcon })), _jsx(_Logo, { logo: (_a = p.logo) !== null && _a !== void 0 ? _a : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logo, logoDark: (_b = p.logoDark) !== null && _b !== void 0 ? _b : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logoDark, lMargin: 0.5 }), typeof p.title === "string" ? (_jsx(Text.h3, { style: {
+                    marginLeft: !appBase || layoutMode === "wide" ? ".5rem" : 0,
+                }, align: p.centerTitle ? "center" : "start", flex: 1, v: p.title })) : (_jsx("div", { style: { flex: 1 }, children: p.title })), _jsx(_Toolbar, { actions: [...((_c = p.actions) !== null && _c !== void 0 ? _c : []), ...((_d = appBase === null || appBase === void 0 ? void 0 : appBase.globalActions) !== null && _d !== void 0 ? _d : [])] }), layoutMode === "wide" && (_jsx(_Logo, { logo: (_e = p.endLogo) !== null && _e !== void 0 ? _e : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogo, logoDark: (_f = p.endLogoDark) !== null && _f !== void 0 ? _f : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogoDark, rMargin: 0.5 }))] }));
 }
-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>
-    );*/
+function _Logo(p) {
+    var _a, _b;
+    const tConfig = useThemeConfig();
+    const [logo, setLogo] = useState(p.logo);
+    useEffect(() => { var _a; return setLogo(tConfig.dark ? (_a = p.logoDark) !== null && _a !== void 0 ? _a : p.logo : p.logo); }, [tConfig]);
+    return !logo ? null : (_jsx("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            marginLeft: `${(_a = p.lMargin) !== null && _a !== void 0 ? _a : 0}rem`,
+            marginRight: `${(_b = p.rMargin) !== null && _b !== void 0 ? _b : 0}rem`,
+        }, children: typeof logo === "string" ? (_jsx("img", { src: logo, style: {
+                height: "1.25rem",
+            } })) : (p.logo) }));
+}
+export function BackButton(p) {
+    return (_jsx(IconButton.plain, { ariaLabel: "go back", onTap: p.onTap, icon: ChevronLeft }));
+}
+export function CloseButton(p) {
+    return _jsx(IconButton.plain, { ariaLabel: "close", onTap: p.onTap, icon: XIcon });
 }

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

@@ -0,0 +1,12 @@
+import { ElbeChild } from "../../util/util";
+import { IconChild } from "../button/icon_button";
+export type MenuItem = {
+    id: string;
+    label: string;
+    icon?: IconChild;
+    bottom?: boolean;
+    component?: ElbeChild;
+};
+export declare function Menu(p: {
+    items: MenuItem[];
+}): import("preact").JSX.Element;

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { MenuIcon } from "lucide-react";
+import { useThemeConfig } from "../../..";
+import { useLayoutMode } from "../../util/util";
+import { Card, elevatedShadow } from "../base/card";
+import { Button } from "../button/button";
+import { useAppBase } from "./ctx_app_base";
+import { Column } from "./flex";
+export function Menu(p) {
+    const layoutMode = useLayoutMode();
+    const appBase = useAppBase();
+    const tConfig = useThemeConfig();
+    const topBot = { top: [], bottom: [] };
+    for (let i of p.items) {
+        if (i.bottom)
+            topBot.bottom.push(i);
+        else
+            topBot.top.push(i);
+    }
+    const menuWidth = () => appBase.menuOpen
+        ? layoutMode === "mobile"
+            ? "100vw"
+            : "260px"
+        : layoutMode === "wide"
+            ? "4rem"
+            : "0";
+    return (_jsxs(_Fragment, { children: [layoutMode == "wide" && (_jsx("div", { style: {
+                    width: menuWidth(),
+                } })), _jsx("div", { onClick: () => appBase.setMenuOpen(false), style: Object.assign({ zIndex: 100, position: "fixed", left: 0, top: 0, width: 0, height: 0, backgroundColor: "rgba(0,0,0,0)", transition: "background-color 200ms ease-in-out" }, (layoutMode === "narrow" && appBase.menuOpen
+                    ? {
+                        backdropFilter: "blur(5px)",
+                        backgroundColor: "rgba(0,0,0,.2)",
+                        width: "100vw",
+                        height: "100vh",
+                    }
+                    : {})) }), _jsxs(Card, { onTap: () => {
+                    if (layoutMode == "wide")
+                        return;
+                    appBase.setMenuOpen(false);
+                }, scheme: "primary", padding: 0.5, style: Object.assign({ zIndex: 101, position: "fixed", left: 0, top: 0, height: "100vh", overflow: "hidden", width: menuWidth(), display: appBase.menuOpen || layoutMode == "wide" ? "flex" : "none", flexDirection: "column", justifyContent: "start", alignItems: "stretch", borderTopLeftRadius: 0, borderBottomLeftRadius: 0, border: "none", borderRight: tConfig.highVis
+                        ? "1px solid var(--c-context-front)"
+                        : "none", gap: "1rem", transition: "width 200ms ease-in-out" }, (layoutMode === "narrow" && appBase.menuOpen
+                    ? {
+                        boxShadow: elevatedShadow,
+                    }
+                    : {})), children: [_jsx(Button.plain, { contentAlign: "start", ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), icon: MenuIcon, style: {
+                            marginBottom: ".5rem",
+                            borderRadius: "3rem",
+                        } }), _jsx(Column, { flex: 1, scroll: true, noScrollbar: true, children: topBot.top.map((i) => (_jsx(_MenuItemView, { item: i }))) }), topBot.bottom.map((i) => (_jsx(_MenuItemView, { item: i })))] })] }));
+}
+function _MenuItemView({ item }) {
+    const appBase = useAppBase();
+    return (_jsx(Button, { ariaLabel: item.label, contentAlign: "start", manner: item.id === appBase.menuSelected ? "major" : "plain", label: appBase.menuOpen ? item.label : undefined, icon: item.icon, onTap: item.component != null
+            ? () => appBase.setMenuSelected(item.id)
+            : undefined }));
+}

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

@@ -1,3 +1,5 @@
-export declare function Spaced({ amount }: {
-    amount?: number | undefined;
+export declare function Spaced({ width, height, amount, }: {
+    amount?: number;
+    width?: number;
+    height?: number;
 }): import("preact").JSX.Element;

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

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
-export function Spaced({ amount = 1 }) {
-    return _jsx("div", { style: { width: amount + "rem", height: amount + "rem" } });
+export function Spaced({ width, height, amount = 1, }) {
+    const fromWH = !!(width || height);
+    return (_jsx("div", { style: {
+            width: (fromWH ? width !== null && width !== void 0 ? width : 0 : amount) + "rem",
+            height: (fromWH ? height !== null && height !== void 0 ? height : 0 : amount) + "rem",
+        } }));
 }

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

@@ -0,0 +1,7 @@
+import { ElbeChild } from "../../..";
+export declare function _Toolbar(p: {
+    actions: ElbeChild[];
+}): import("preact").JSX.Element;
+export declare function OverflowMenu(p: {
+    items: ElbeChild[];
+}): import("preact").JSX.Element | null;

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { MoreVertical } from "lucide-react";
+import { useEffect, useState } from "preact/hooks";
+import { Card, elevatedShadow, IconButton, ToolbarContext, useLayoutMode, useThemeConfig, } from "../../..";
+import { maybeAppBase } from "./ctx_app_base";
+export function _Toolbar(p) {
+    const [sections, setSections] = useState([
+        [],
+        [],
+    ]);
+    const appBase = maybeAppBase();
+    const layoutMode = useLayoutMode();
+    useEffect(() => {
+        const cutoff = layoutMode === "wide" ? 5 : 2;
+        const bar = [];
+        const overflow = [];
+        for (let i = 0; i < p.actions.length; i++) {
+            const e = p.actions[i];
+            if (i < cutoff)
+                bar.push(e);
+            else
+                overflow.push(e);
+        }
+        setSections([bar, overflow]);
+    }, [p.actions, layoutMode]);
+    return (_jsx(ToolbarContext.Provider, { value: "toolbar", children: _jsxs("div", { style: {
+                display: "flex",
+                flexDirection: "row",
+                gap: ".5rem",
+                alignItems: "center",
+            }, children: [sections[0], _jsx(OverflowMenu, { items: sections[1] })] }) }));
+}
+export function OverflowMenu(p) {
+    var _a;
+    const [open, setOpen] = useState(false);
+    const tConfig = useThemeConfig();
+    return !((_a = p.items) === null || _a === void 0 ? void 0 : _a.length) ? null : (_jsxs("div", { style: {
+            position: "relative",
+            zIndex: 21,
+        }, children: [open && (_jsx("div", { onClick: () => setOpen(false), style: {
+                    position: "fixed",
+                    top: 0,
+                    right: 0,
+                    width: "100vw",
+                    height: "100vh",
+                    backgroundColor: "transparent",
+                    boxShadow: elevatedShadow,
+                    zIndex: 20,
+                } })), _jsx(IconButton.plain, { ariaLabel: "open/close menu", icon: MoreVertical, onTap: () => setOpen(!open) }), _jsx("div", { style: {
+                    zIndex: 21,
+                    position: "absolute",
+                    top: 0,
+                    right: 0,
+                    transform: open ? "scale(1)" : "scale(.6)",
+                    opacity: open ? 1 : 0,
+                    transition: tConfig.reducedMotion
+                        ? null
+                        : "transform 200ms ease-in-out, opacity 200ms ease-in-out",
+                }, children: open && (_jsx(ToolbarContext.Provider, { value: "overflow", children: _jsx(Card, { onTap: () => setOpen(false), scheme: "primary", elevated: true, style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: ".5rem",
+                            alignItems: "stretch",
+                            position: "absolute",
+                            top: "3rem",
+                            right: 0,
+                            padding: ".5rem",
+                            width: "fit-content",
+                            zIndex: 21,
+                        }, children: p.items }) })) })] }));
+}

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

@@ -0,0 +1,10 @@
+export declare function Link(p: {
+    label: string;
+    href: string;
+    external?: boolean;
+    plain?: boolean;
+    bold?: boolean;
+    noIcon?: boolean;
+    underline?: boolean;
+    color?: string;
+}): import("preact").JSX.Element;

package/dist/ui/components/link.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { ExternalLinkIcon } from "lucide-react";
+export function Link(p) {
+    return (_jsxs("a", { class: p.plain ? "plain" : "accent action", href: p.href, target: p.external ? "_blank" : undefined, rel: p.external ? "noopener noreferrer" : undefined, style: {
+            color: p.color,
+            display: "inline-flex",
+            textDecoration: p.underline ? "underline" : "none",
+            alignItems: "center",
+            fontWeight: p.bold ? "bold" : "normal",
+            padding: ".125rem .3rem",
+            borderRadius: ".5rem",
+            margin: "-.125rem -.3rem",
+            transition: "background .2s",
+        }, children: [p.label, p.external && !p.noIcon && (_jsx(ExternalLinkIcon, { size: 15, style: { marginLeft: ".25rem", marginBottom: ".25rem" } }))] }));
+}

package/dist/ui/components/progress_bar.js

@@ -10,19 +10,21 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "preact/jsx-runtime";
-import { applyProps, clamp } from "../..";
+import { applyProps, clamp, useTheme, useThemeConfig } 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"], {
+    const tConfig = useThemeConfig();
+    const theme = useTheme();
+    return (_jsx("div", Object.assign({}, applyProps("progress_bar", Object.assign({ role: "progressbar" }, elbe), [plain ? "plain" : "accent minor"], {
         width: "100%",
         height: "0.5rem",
-        borderRadius: "1rem",
+        borderRadius: theme.geometry.radius + "rem",
         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",
+                transition: tConfig.reducedMotion ? "none" : "width 0.25s",
+                borderRadius: theme.geometry.radius + "rem",
             } }) })));
 }

package/dist/ui/components/spinner.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "preact/jsx-runtime";
 import { useComputed, useSignal } from "@preact/signals";
 import { Component } from "preact";
 import { useEffect } from "preact/hooks";
+import { useThemeConfig } from "../theme/theme_context";
 function _toPath(c, yFac, yOffset = 0, clamp = [0, 1], xFac = 1) {
     return c
         .filter((p) => p[0] >= clamp[0] && p[0] <= clamp[1])
@@ -14,9 +15,12 @@ function _toPath(c, yFac, yOffset = 0, clamp = [0, 1], xFac = 1) {
 export class Spinner extends Component {
     render() {
         var _a, _b;
+        const tConfig = useThemeConfig();
         const flat = ((_a = this.props.manner) !== null && _a !== void 0 ? _a : "flat") === "flat";
         const xSig = useSignal(0);
         useEffect(() => {
+            if (tConfig.reducedMotion)
+                return;
             const interval = setInterval(() => {
                 xSig.value = (xSig.value + 2) % 100;
             }, 16);

package/dist/ui/components/text.js

@@ -22,10 +22,6 @@ export class Text extends React.Component {
         return (_jsxs("span", Object.assign({}, applyProps("text", elbe, [
             "text",
             //align,
-            bold && "b",
-            italic && "i",
-            underline && "underline",
-            striked && "striked",
             color,
             variant,
         ], {
@@ -33,6 +29,10 @@ export class Text extends React.Component {
             color: color || "",
             scrollMarginTop: "2rem",
             textAlign: align,
+            fontWeight: bold ? "bold" : "",
+            fontStyle: italic ? "italic" : "",
+            textDecoration: underline ? "underline" : "",
+            textDecorationLine: striked ? "line-through" : "",
         }), { children: [v, children] })));
     }
 }

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

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

package/dist/ui/theme/color_theme.js

@@ -1,81 +1,92 @@
-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);
-    };
+import { colors, LayerColor, } from "./colors";
+import { lColor } from "./seed";
+export function colorThemePreset(merge
+//highVis: boolean = false
+) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     const seed = merge !== null && merge !== void 0 ? merge : {};
     return {
         base: (_a = seed.base) !== null && _a !== void 0 ? _a : LayerColor.fromBack(colors.white),
-        accent: highVis
-            ? LayerColor.fromHex("#000000")
-            : (_b = seed.accent) !== null && _b !== void 0 ? _b : LayerColor.fromBack(colors.blueAccent),
+        accent: (_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),
         error: (_f = seed.error) !== null && _f !== void 0 ? _f : LayerColor.fromBack(colors.red),
+        contrast: {
+            highvis: (_h = (_g = seed.contrast) === null || _g === void 0 ? void 0 : _g.highvis) !== null && _h !== void 0 ? _h : (({ seed }) => (Object.assign(Object.assign({}, seed), { accent: LayerColor.fromBack(colors.black) }))),
+            normal: (_k = (_j = seed.contrast) === null || _j === void 0 ? void 0 : _j.normal) !== null && _k !== void 0 ? _k : (({ seed }) => seed),
+        },
         mode: {
-            light: (_h = (_g = seed.mode) === null || _g === void 0 ? void 0 : _g.light) !== null && _h !== void 0 ? _h : ((_, b) => b),
-            dark: (_k = (_j = seed.mode) === null || _j === void 0 ? void 0 : _j.dark) !== null && _k !== void 0 ? _k : ((_, b) => b.mirrorBrightness()),
+            light: (_m = (_l = seed.mode) === null || _l === void 0 ? void 0 : _l.light) !== null && _m !== void 0 ? _m : (({ base }) => base),
+            dark: (_p = (_o = seed.mode) === null || _o === void 0 ? void 0 : _o.dark) !== null && _p !== void 0 ? _p : (({ base }) => base.mirrorBrightness()),
         },
         scheme: {
-            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,
+            primary: (_r = (_q = seed.scheme) === null || _q === void 0 ? void 0 : _q.primary) !== null && _r !== void 0 ? _r : _makePrimary,
+            secondary: (p) => {
+                var _a, _b, _c, _d;
+                const highVis = p.path.includes("highvis");
+                return (highVis
+                    ? (_b = (_a = seed.scheme) === null || _a === void 0 ? void 0 : _a.primary) !== null && _b !== void 0 ? _b : _makePrimary
+                    : (_d = (_c = seed.scheme) === null || _c === void 0 ? void 0 : _c.secondary) !== null && _d !== void 0 ? _d : _makeSecondary)(p);
+            },
             inverse: (_t = (_s = seed.scheme) === null || _s === void 0 ? void 0 : _s.inverse) !== null && _t !== void 0 ? _t : _makeInverse,
         },
         style: {
-            accent: styleSel,
-            info: styleSel,
-            success: styleSel,
-            warning: styleSel,
-            error: styleSel,
+            accent: _styleSel,
+            info: _styleSel,
+            success: _styleSel,
+            warning: _styleSel,
+            error: _styleSel,
         },
         variant: {
             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)),
+            minor: (p) => {
+                var _a, _b;
+                if ((_a = seed.variant) === null || _a === void 0 ? void 0 : _a.minor)
+                    return (_b = seed.variant) === null || _b === void 0 ? void 0 : _b.minor(p);
+                const highVis = p.path.includes("highvis");
+                return highVis ? _makeMajor(p) : _makeMinor(p);
+            },
+            flat: (_x = (_w = seed.variant) === null || _w === void 0 ? void 0 : _w.flat) !== null && _x !== void 0 ? _x : _makeFlat,
         },
     };
 }
-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) {
+const _styleSel = ({ base, style }) => {
+    const bL = base.luminance;
+    if (bL === 1)
+        return style;
+    //if (bL === 0) return s.mirrorBrightness();
+    if (style.luminance == 0)
+        return style.mirrorBrightness();
+    return style.inter(LayerColor.fromBack(bL > 0.5 ? colors.black : colors.white), 0.1);
+};
+const _makePrimary = (p) => p.base;
+const _makeSecondary = ({ base, seed }) => new LayerColor(base.back
+    .inter(lColor(seed.accent).back, base.back.luminance < 0.3 ? 0.2 : 0.1)
+    .desaturated(0.5), base.front, base.border);
+const _makeInverse = ({ base }) => base.mirrorBrightness();
+const _makeMajor = ({ style, path }) => {
     return LayerColor.fromBack(style.back, { border: style.back });
-}
-function _makeMinor(seed, back, style) {
-    const b = back.back;
+};
+const _makeMinor = ({ base, style }) => {
+    const b = base.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 _makeFlat = ({ path, style, base }) => {
+    const highVis = path.includes("highvis");
     const front = !style
-        ? back.front
-        : back.back.hasWCAGContrast(style === null || style === void 0 ? void 0 : style.back)
+        ? base.front
+        : base.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;
+            : style === null || style === void 0 ? void 0 : style.back.inter(base.front, 0.6);
+    const isDark = base.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),
+        ? base.front.inter(base.back, isDark ? 0.75 : 0.9)
+        : base.front;
+    return new LayerColor(base.back, //.withAlpha(0),
     front, highVis ? border : null, border);
-}
+};

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

@@ -1,18 +1,30 @@
-import { ColorSeedColors, ColorThemeSeed, PartialColorThemeSeed } from "./seed";
+import { ColorThemeSeed, PartialColorThemeSeed, ThemeColors } from "./seed";
+export type ElbeColorContrasts = "normal" | "highvis";
 export type ElbeColorModes = "light" | "dark";
 export type ElbeColorSchemes = "primary" | "secondary" | "inverse";
 export type ElbeAlertKinds = "success" | "warning" | "error" | "info";
 export type ElbeColorKinds = ElbeAlertKinds | "plain" | "accent";
 export type ElbeColorManners = "major" | "minor" | "flat" | "plain";
+export declare const cContrasts: ElbeColorContrasts[];
 export declare const cModes: ElbeColorModes[];
 export declare const cSchemes: ElbeColorSchemes[];
 export declare const cKinds: ElbeColorKinds[];
 export declare const cManners: ElbeColorManners[];
 export declare const cStates: string[];
 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;
+type _SeedSelInput = {
+    path: string[];
+    seed: ColorThemeSeed;
+    base: LayerColor;
+};
+export type SeedSelector = (p: _SeedSelInput) => LayerColor;
+export type SeedModifier = (p: _SeedSelInput) => ColorThemeSeed;
+export type SeedFlatSelector = (p: _SeedSelInput & {
+    style?: LayerColor;
+}) => LayerColor;
+export type SeedStyleSelector = (p: _SeedSelInput & {
+    style: LayerColor;
+}) => LayerColor;
 export declare class RGBAColor {
     r: number;
     g: number;
@@ -67,7 +79,7 @@ export declare class StateColor extends LayerColor {
     disabled: LayerColor;
     constructor(neutral: LayerColor, hover: LayerColor, active: LayerColor, disabled: LayerColor);
     asCss(): string;
-    static generate(_: ColorThemeSeed, context: LayerColor, style: LayerColor, fromFront?: boolean): StateColor;
+    static generate(p: string[], _: ColorThemeSeed, context: LayerColor, style: LayerColor, fromFront?: boolean): StateColor;
 }
 export declare class MannerColor extends StateColor {
     major: StateColor | null;
@@ -76,7 +88,7 @@ export declare class MannerColor extends StateColor {
     constructor(major: StateColor | null, minor: StateColor | null, flat: StateColor);
     asCss(fallback?: MannerColor): string;
     raisedCss(): string;
-    static generate(s: ColorThemeSeed, c: LayerColor, style?: LayerColor): MannerColor;
+    static generate(path: string[], seed: ColorThemeSeed, base: LayerColor, style?: LayerColor): MannerColor;
 }
 export declare class KindColor extends MannerColor {
     plain: MannerColor;
@@ -87,7 +99,7 @@ export declare class KindColor extends MannerColor {
     error: MannerColor;
     constructor(plain: MannerColor, accent: MannerColor, info: MannerColor, success: MannerColor, warning: MannerColor, error: MannerColor);
     asCss(): string;
-    static generate(s: ColorThemeSeed, c: LayerColor): KindColor;
+    static generate(path: string[], seed: ColorThemeSeed, base: LayerColor): KindColor;
 }
 export declare class SchemeColor extends KindColor {
     primary: KindColor;
@@ -95,19 +107,27 @@ export declare class SchemeColor extends KindColor {
     inverse: KindColor;
     constructor(primary: KindColor, secondary: KindColor, inverse: KindColor);
     asCss(): string;
-    static generate(seed: ColorThemeSeed, c: LayerColor): SchemeColor;
+    static generate(path: string[], seed: ColorThemeSeed, base: LayerColor): SchemeColor;
 }
 export declare class ModeColor extends SchemeColor {
     light: SchemeColor;
     dark: SchemeColor;
     constructor(light: SchemeColor, dark: SchemeColor);
     asCss(): string;
-    static generate(seed: ColorThemeSeed): ModeColor;
+    static generate(path: string[], seed: ColorThemeSeed): ModeColor;
+}
+export declare class ContrastColor extends ModeColor {
+    normal: ModeColor;
+    highvis: ModeColor;
+    constructor(normal: ModeColor, highvis: ModeColor);
+    asCss(): string;
+    static generate(path: string[], seed: ColorThemeSeed): ContrastColor;
 }
 export declare class ColorTheme {
-    colors: ColorSeedColors;
-    color: ModeColor;
-    constructor(colors: ColorSeedColors, color: ModeColor);
+    colors: ThemeColors;
+    color: ContrastColor;
+    constructor(colors: ThemeColors, color: ContrastColor);
     asCss(): string;
-    static generate(seed?: Partial<PartialColorThemeSeed>, highVis?: boolean): ColorTheme;
+    static generate(seed?: Partial<PartialColorThemeSeed>): ColorTheme;
 }
+export {};