elbe-ui 0.2.26 → 0.2.34

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

@@ -1,7 +1,7 @@
 import React from "preact/compat";
-import type { ElbeTypeStyles } from "../color_theme";
+import type { ElbeTypeVariants } from "../theme/type_theme";
 import type { ElbeChildren } from "../util/util";
-import { type ElbeProps } from "./box";
+import { type ElbeProps } from "./base/box";
 export type TextProps = {
     align?: "start" | "center" | "end";
     bold?: boolean;
@@ -14,7 +14,7 @@ export type TextProps = {
     v?: string;
 } & ElbeProps;
 export declare class Text extends React.Component<TextProps & {
-    typeStyle?: ElbeTypeStyles;
+    variant?: ElbeTypeVariants;
 }> {
     static h1: (p: TextProps) => React.JSX.Element;
     static h2: (p: TextProps) => React.JSX.Element;
@@ -26,8 +26,8 @@ export declare class Text extends React.Component<TextProps & {
     static m: (p: TextProps) => React.JSX.Element;
     static l: (p: TextProps) => React.JSX.Element;
     static code: (p: TextProps) => React.JSX.Element;
-    constructor({ typeStyle, ...props }: TextProps & {
-        typeStyle?: ElbeTypeStyles;
+    constructor({ variant, ...props }: TextProps & {
+        variant?: ElbeTypeVariants;
     });
     render(): React.JSX.Element;
 }

package/dist/ui/components/text.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = void 0;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const compat_1 = __importDefault(require("preact/compat"));
+const box_1 = require("./base/box");
+class Text extends compat_1.default.Component {
+    static h1 = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "h1" });
+    static h2 = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "h2" });
+    static h3 = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "h3" });
+    static h4 = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "h4" });
+    static h5 = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "h5" });
+    static h6 = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "h6" });
+    static s = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "body-s" });
+    static m = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "body-m" });
+    static l = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "body-l" });
+    static code = (p) => (0, jsx_runtime_1.jsx)(Text, { ...p, variant: "code" });
+    constructor({ variant = "body-m", ...props }) {
+        super({ ...props, variant });
+    }
+    render() {
+        const { align, bold, italic, underline, striked, color, size, children, variant, v, ...elbe } = this.props;
+        return ((0, jsx_runtime_1.jsxs)("span", { ...(0, box_1.applyProps)(elbe, [
+                "text",
+                align,
+                bold && "b",
+                italic && "i",
+                underline && "underline",
+                striked && "striked",
+                color,
+                variant,
+            ], {
+                fontSize: size ? `${size}rem` : "",
+                color: color || "",
+                scrollMarginTop: "2rem",
+            }), children: [v, children] }));
+    }
+}
+exports.Text = Text;

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

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

package/dist/ui/theme/color_theme.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorThemePreset = colorThemePreset;
+const colors_1 = require("./colors");
+function colorThemePreset(merge) {
+    const styleSel = (_, b, s) => {
+        const bL = b.luminance;
+        if (bL === 1)
+            return s;
+        return s.inter(colors_1.LayerColor.fromBack(bL > 0.5 ? colors_1.colors.black : colors_1.colors.white), 0.1);
+    };
+    const seed = merge ?? {};
+    return {
+        base: seed.base ?? colors_1.LayerColor.fromBack(colors_1.colors.white),
+        accent: seed.accent ?? colors_1.LayerColor.fromBack(colors_1.colors.blueAccent),
+        info: seed.info ?? colors_1.LayerColor.fromBack(colors_1.colors.blue),
+        success: seed.success ?? colors_1.LayerColor.fromBack(colors_1.colors.green),
+        warning: seed.warning ?? colors_1.LayerColor.fromBack(colors_1.colors.yellow),
+        error: seed.error ?? colors_1.LayerColor.fromBack(colors_1.colors.red),
+        mode: {
+            light: seed.mode?.light ?? ((_, b) => b),
+            dark: seed.mode?.dark ?? ((_, b) => b.mirrorBrightness()),
+        },
+        scheme: {
+            primary: seed.scheme?.primary ?? ((_, b) => b),
+            secondary: seed.scheme?.secondary ??
+                ((c, b) => new colors_1.LayerColor(b.back.inter(c.accent.back, 0.1).desaturated(0.5), b.front, b.border)),
+            inverse: seed.scheme?.inverse ?? ((_, b) => b.mirrorBrightness()),
+        },
+        style: {
+            accent: styleSel,
+            info: styleSel,
+            success: styleSel,
+            warning: styleSel,
+            error: styleSel,
+        },
+        variant: {
+            major: seed.variant?.major ??
+                ((_, b, s) => colors_1.LayerColor.fromBack(s.back, { border: s.back })),
+            minor: seed.variant?.minor ??
+                ((_, 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 colors_1.LayerColor(s.back.withAlpha(0.25), minorFront ?? major.inter(backIn, 0.6), minorFront ?? major.inter(backIn, 0.3));
+                }),
+            flat: seed.variant?.flat ??
+                ((_, 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?.back)
+                            ? s?.back
+                            : s?.back.inter(b.front, 0.6);
+                    return new colors_1.LayerColor(b.back, //.withAlpha(0),
+                    front, null, !s ? b.front.withAlpha(0.3) : b.front);
+                }),
+        },
+    };
+}

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

@@ -0,0 +1,142 @@
+export type ElbeColorModes = "light" | "dark";
+export type ElbeColorSchemes = "primary" | "secondary" | "inverse";
+export type ElbeColorKinds = "plain" | "accent" | "info" | "success" | "warning" | "error";
+export type ElbeColorManners = "major" | "minor" | "flat" | "plain";
+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;
+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;
+    };
+};
+declare class RGBAColor {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+    constructor(r: number, g: number, b: number, a: number);
+    asCss(): string;
+    get isDark(): boolean;
+    get luminance(): number;
+    get hex(): string;
+    static _fromHex(hex: string | null): RGBAColor;
+    desaturated(f?: number): RGBAColor;
+    withAlpha(a: number): RGBAColor;
+    inter(other: RGBAColor, factor: number): RGBAColor;
+    mirrorBrightness(factor?: number): RGBAColor;
+    get values(): [number, number, number, number];
+    hasWCAGContrast(color: RGBAColor): boolean;
+    contrastRatio(color: RGBAColor): number;
+}
+export declare const colors: {
+    transparent: RGBAColor;
+    white: RGBAColor;
+    black: RGBAColor;
+    blueAccent: RGBAColor;
+    blue: RGBAColor;
+    green: RGBAColor;
+    yellow: RGBAColor;
+    red: RGBAColor;
+};
+export declare class LayerColor extends RGBAColor {
+    back: RGBAColor;
+    border?: (RGBAColor | null) | undefined;
+    borderContext?: (RGBAColor | null) | undefined;
+    front: RGBAColor;
+    constructor(back: RGBAColor, front: RGBAColor | null, border?: (RGBAColor | null) | undefined, borderContext?: (RGBAColor | null) | undefined);
+    asCss(): string;
+    inter(other: LayerColor, factor: number): LayerColor;
+    mirrorBrightness(factor?: number): LayerColor;
+    desaturated(): LayerColor;
+    static fromHex(back: string, front?: string | null, border?: string | null): LayerColor;
+    static fromBack(back: RGBAColor, c?: {
+        front?: RGBAColor;
+        border?: RGBAColor;
+    }): LayerColor;
+    contextCss(): string;
+}
+export declare class StateColor extends LayerColor {
+    neutral: LayerColor;
+    hover: LayerColor;
+    active: LayerColor;
+    disabled: LayerColor;
+    constructor(neutral: LayerColor, hover: LayerColor, active: LayerColor, disabled: LayerColor);
+    asCss(): string;
+    static generate(_: ColorThemeSeed, context: LayerColor, style: LayerColor, fromFront?: boolean): StateColor;
+}
+export declare class MannerColor extends StateColor {
+    major: StateColor | null;
+    minor: StateColor | null;
+    flat: 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;
+}
+export declare class KindColor extends MannerColor {
+    plain: MannerColor;
+    accent: MannerColor;
+    info: MannerColor;
+    success: MannerColor;
+    warning: 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;
+}
+export declare class SchemeColor extends KindColor {
+    primary: KindColor;
+    secondary: KindColor;
+    inverse: KindColor;
+    constructor(primary: KindColor, secondary: KindColor, inverse: KindColor);
+    asCss(): string;
+    static generate(seed: ColorThemeSeed, c: LayerColor): SchemeColor;
+}
+export declare class ModeColor extends SchemeColor {
+    light: SchemeColor;
+    dark: SchemeColor;
+    constructor(light: SchemeColor, dark: SchemeColor);
+    asCss(): string;
+    static generate(seed: ColorThemeSeed): ModeColor;
+}
+export declare class ColorTheme {
+    colors: ColorSeedColors;
+    color: ModeColor;
+    constructor(colors: ColorSeedColors, color: ModeColor);
+    asCss(): string;
+    static generate(seed?: Partial<ColorThemeSeed>): ColorTheme;
+}
+export {};

package/dist/ui/theme/colors.js

@@ -0,0 +1,317 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorTheme = exports.ModeColor = exports.SchemeColor = exports.KindColor = exports.MannerColor = exports.StateColor = exports.LayerColor = exports.colors = exports.cLayers = exports.cStates = exports.cManners = exports.cKinds = exports.cSchemes = exports.cModes = void 0;
+const colors_convert_1 = require("colors-convert");
+const util_1 = require("../util/util");
+const color_theme_1 = require("./color_theme");
+exports.cModes = ["light", "dark"];
+exports.cSchemes = ["primary", "secondary", "inverse"];
+exports.cKinds = [
+    "plain",
+    "accent",
+    "info",
+    "success",
+    "warning",
+    "error",
+];
+exports.cManners = ["major", "minor", "flat", "plain"];
+exports.cStates = ["neutral", "hover", "active", "disabled"];
+exports.cLayers = ["back", "front", "border"];
+class RGBAColor {
+    r;
+    g;
+    b;
+    a;
+    constructor(r, g, b, a) {
+        this.r = r;
+        this.g = g;
+        this.b = b;
+        this.a = a;
+    }
+    asCss() {
+        return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`;
+    }
+    get isDark() {
+        return this.luminance < 0.5;
+    }
+    get luminance() {
+        const [r, g, b] = [this.r, this.g, this.b].map((v) => {
+            v /= 255;
+            return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+        });
+        return r * 0.2126 + g * 0.7152 + b * 0.0722;
+    }
+    get hex() {
+        const c = [this.r, this.g, this.b].map((v) => Math.round(v).toString(16).padStart(2, "0"));
+        const a = Math.round(this.a * 255)
+            .toString(16)
+            .padStart(2, "0");
+        return `#${c.join("")}${a}`;
+    }
+    static _fromHex(hex) {
+        if (!hex)
+            return new RGBAColor(0, 0, 0, 0);
+        const c = hex.replace("#", "").padEnd(6, "0").padEnd(8, "f").toLowerCase();
+        console.log(c);
+        return new RGBAColor(parseInt(c.substring(0, 2), 16), parseInt(c.substring(2, 4), 16), parseInt(c.substring(4, 6), 16), parseInt(c.substring(6, 8), 16) / 255);
+    }
+    desaturated(f = 1) {
+        const avg = (this.r + this.g + this.b) / 3;
+        return new RGBAColor(this.r + (avg - this.r) * f, this.g + (avg - this.g) * f, this.b + (avg - this.b) * f, this.a);
+    }
+    withAlpha(a) {
+        return new RGBAColor(this.r, this.g, this.b, a);
+    }
+    inter(other, factor) {
+        return new RGBAColor(this.r + (other.r - this.r) * factor, this.g + (other.g - this.g) * factor, this.b + (other.b - this.b) * factor, this.a + (other.a - this.a) * factor);
+    }
+    mirrorBrightness(factor = 1) {
+        const hsl = (0, colors_convert_1.rgbToHsl)({ r: this.r, g: this.g, b: this.b });
+        const newL = (50 - hsl.l) * (factor * 2 - 1) + 50;
+        const rgb = (0, colors_convert_1.hslToRgb)({
+            ...hsl,
+            l: (0, util_1.clamp)(newL, 0, 100),
+            s: (0, util_1.clamp)(hsl.s, 0, 100),
+            //s: -Math.abs(2 * newL - 100) + 100,
+        });
+        return new RGBAColor(rgb.r, rgb.g, rgb.b, this.a);
+    }
+    get values() {
+        return [this.r, this.g, this.b, this.a];
+    }
+    hasWCAGContrast(color) {
+        return this.contrastRatio(color) >= 3;
+    }
+    contrastRatio(color) {
+        const l1 = this.luminance;
+        const l2 = color.luminance;
+        return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+    }
+}
+exports.colors = {
+    transparent: new RGBAColor(0, 0, 0, 0),
+    white: new RGBAColor(255, 255, 255, 1),
+    black: new RGBAColor(0, 0, 0, 1),
+    blueAccent: new RGBAColor(60, 119, 246, 1),
+    blue: new RGBAColor(32, 89, 153, 1),
+    green: new RGBAColor(35, 144, 78, 1),
+    yellow: new RGBAColor(240, 221, 21, 1),
+    red: new RGBAColor(243, 67, 67, 1),
+};
+class LayerColor extends RGBAColor {
+    back;
+    border;
+    borderContext;
+    front;
+    constructor(back, front, border, borderContext) {
+        super(back.r, back.g, back.b, back.a);
+        this.back = back;
+        this.border = border;
+        this.borderContext = borderContext;
+        this.front = front ?? (back.isDark ? exports.colors.white : exports.colors.black);
+    }
+    asCss() {
+        return (`background-color: ${this.back.asCss()};\n` +
+            `color: ${this.front.asCss()};\n` +
+            `border-color: ${this.border?.asCss() ?? "transparent"};\n` +
+            //`border-color: ${this.border?.asCss() ?? "transparent"};\n` +
+            this.contextCss());
+    }
+    inter(other, factor) {
+        return new LayerColor(this.back.inter(other.back, factor), this.front.inter(other.front, factor), this.border?.inter(other.border ?? exports.colors.transparent, factor), this.borderContext?.inter(other.borderContext ?? exports.colors.transparent, factor));
+    }
+    mirrorBrightness(factor) {
+        return new LayerColor(this.back.mirrorBrightness(factor), this.front.mirrorBrightness(factor), this.border?.mirrorBrightness(factor), this.borderContext?.mirrorBrightness(factor));
+    }
+    desaturated() {
+        return new LayerColor(this.back.desaturated(), this.front.desaturated(), this.border?.desaturated(), this.borderContext?.desaturated());
+    }
+    static fromHex(back, front, border) {
+        if (front === undefined && border === undefined) {
+            return LayerColor.fromBack(RGBAColor._fromHex(back));
+        }
+        return new LayerColor(RGBAColor._fromHex(back), RGBAColor._fromHex(front ?? null), RGBAColor._fromHex(border ?? null));
+    }
+    static fromBack(back, c) {
+        const front = back.isDark ? exports.colors.white : exports.colors.black;
+        return new LayerColor(back, c?.front ?? front, c?.border ?? front);
+    }
+    contextCss() {
+        return (`--c-context-back: ${this.back.asCss()};\n` +
+            `--c-context-front: ${this.front.asCss()};` +
+            `--c-context-border: ${(this.borderContext ?? this.border)?.asCss() ?? "transparent"};`);
+    }
+}
+exports.LayerColor = LayerColor;
+class StateColor extends LayerColor {
+    neutral;
+    hover;
+    active;
+    disabled;
+    constructor(neutral, hover, active, disabled) {
+        super(neutral.back, neutral.front, neutral.border);
+        this.neutral = neutral;
+        this.hover = hover;
+        this.active = active;
+        this.disabled = disabled;
+    }
+    asCss() {
+        const els = [
+            ".action",
+            ":is(button)",
+            ":is(a)",
+            ":is(input)",
+            ":is(select)",
+        ];
+        const disS = "&.disabled, & :disabled, &:disabled";
+        const hoverS = els.map((e) => `&${e}:hover:not(${disS})`).join(", ");
+        const activeS = els.map((e) => `&${e}:active:not(${disS})`).join(", ");
+        return (`${this.neutral.asCss()} \n` +
+            `${hoverS} { ${this.hover.asCss()} }\n` +
+            `${activeS} { ${this.active.asCss()} }\n` +
+            `${disS} { ${this.disabled.asCss()} }`);
+    }
+    static generate(_, context, style, fromFront) {
+        function _make(factor) {
+            const front = style.front;
+            return new LayerColor((fromFront
+                ? context.back.inter(front, factor)
+                : style.back.inter(context.back.mirrorBrightness(), factor)).withAlpha(Math.max(style.back.a, 0.2)), front, style.border, style.borderContext);
+        }
+        return new StateColor(style, _make(0.075), _make(0.25), style.desaturated());
+    }
+}
+exports.StateColor = StateColor;
+class MannerColor extends StateColor {
+    major;
+    minor;
+    flat;
+    constructor(major, minor, flat) {
+        const m = major ?? flat;
+        super(m.neutral, m.hover, m.active, m.disabled);
+        this.major = major;
+        this.minor = minor;
+        this.flat = flat;
+    }
+    asCss(fallback) {
+        const maj = this.major ?? fallback?.major;
+        const min = this.minor ?? fallback?.minor;
+        return (`${this.flat.asCss()}\n` +
+            (maj ? `&.major { ${maj.asCss()} } \n` : "") +
+            (min ? `&.minor { ${min.asCss()} } \n` : "") +
+            `&.flat { ${this.flat.asCss()} }\n`);
+    }
+    raisedCss() {
+        const maj = this.major;
+        const min = this.minor;
+        return ((maj ? ` .major { ${maj.asCss()} } \n` : "") +
+            (min ? ` .minor { ${min.asCss()} } \n` : ""));
+    }
+    static generate(s, c, style) {
+        return new MannerColor(style ? StateColor.generate(s, c, s.variant.major(s, c, style)) : null, style ? StateColor.generate(s, c, s.variant.minor(s, c, style)) : null, StateColor.generate(s, c, s.variant.flat(s, c, style), true));
+        /*
+        if (!style) {
+          return new MannerColor(null, null, StateColor.generate(s, c, c, true));
+        }
+        return new MannerColor(
+          StateColor.generate(s, c, s.variant.major(s, c, style)),
+          StateColor.generate(s, c, s.variant.minor(s, c, style)),
+          StateColor.generate(s, c, s.variant.flat(s, c, style), true)
+        );
+        */
+    }
+}
+exports.MannerColor = MannerColor;
+class KindColor extends MannerColor {
+    plain;
+    accent;
+    info;
+    success;
+    warning;
+    error;
+    constructor(plain, accent, info, success, warning, error) {
+        super(plain.major, plain.minor, plain.flat);
+        this.plain = plain;
+        this.accent = accent;
+        this.info = info;
+        this.success = success;
+        this.warning = warning;
+        this.error = error;
+    }
+    asCss() {
+        return (`${this.plain.asCss()}\n` +
+            `${this.accent.raisedCss()}\n` +
+            `.plain {${this.plain.asCss()}}\n` +
+            `.accent { ${this.accent.asCss()} }\n` +
+            `.info { ${this.info.asCss()} }\n` +
+            `.success { ${this.success.asCss()} }\n` +
+            `.warning { ${this.warning.asCss()} }\n` +
+            `.error { ${this.error.asCss()} }`);
+    }
+    static generate(s, c) {
+        return new KindColor(MannerColor.generate(s, c), MannerColor.generate(s, c, s.style.accent(s, c, s.accent)), MannerColor.generate(s, c, s.style.info(s, c, s.info)), MannerColor.generate(s, c, s.style.success(s, c, s.success)), MannerColor.generate(s, c, s.style.warning(s, c, s.warning)), MannerColor.generate(s, c, s.style.error(s, c, s.error)));
+    }
+}
+exports.KindColor = KindColor;
+class SchemeColor extends KindColor {
+    primary;
+    secondary;
+    inverse;
+    constructor(primary, secondary, inverse) {
+        super(primary.plain, primary.accent, primary.info, primary.success, primary.warning, primary.error);
+        this.primary = primary;
+        this.secondary = secondary;
+        this.inverse = inverse;
+    }
+    asCss() {
+        return (`${this.primary.asCss()}\n` +
+            `.primary { ${this.primary.asCss()}} \n` +
+            `.secondary { ${this.secondary.asCss()} }\n` +
+            `.inverse { ${this.inverse.asCss()} }`);
+    }
+    static generate(seed, c) {
+        const m = seed.scheme;
+        return new SchemeColor(KindColor.generate(seed, m.primary(seed, c)), KindColor.generate(seed, m.secondary(seed, c)), KindColor.generate(seed, m.inverse(seed, c)));
+    }
+}
+exports.SchemeColor = SchemeColor;
+class ModeColor extends SchemeColor {
+    light;
+    dark;
+    constructor(light, dark) {
+        super(light.primary, light.secondary, light.inverse);
+        this.light = light;
+        this.dark = dark;
+    }
+    asCss() {
+        return (`.elbe { ${this.light.asCss()}}` + `.elbe.dark { ${this.dark.asCss()}}`);
+    }
+    static generate(seed) {
+        return new ModeColor(SchemeColor.generate(seed, seed.base), SchemeColor.generate(seed, seed.mode.dark(seed, seed.base)));
+    }
+}
+exports.ModeColor = ModeColor;
+class ColorTheme {
+    colors;
+    color;
+    constructor(colors, color) {
+        this.colors = colors;
+        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 = (0, color_theme_1.colorThemePreset)(seed);
+        return new ColorTheme(s, ModeColor.generate(s));
+    }
+}
+exports.ColorTheme = ColorTheme;
+//Bun.write("./example.css", ColorTheme.generate().asCss());

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

@@ -0,0 +1,16 @@
+export interface GeometryThemeSeed {
+    size: number;
+    radius: number;
+    padding: number;
+    borderWidth: number;
+}
+export declare class GeometryTheme {
+    readonly size: number;
+    readonly radius: number;
+    readonly padding: number;
+    readonly borderWidth: number;
+    constructor(size: number, radius: number, padding: number, borderWidth: number);
+    asCss(): string;
+    static generate(seed?: Partial<GeometryTheme>): GeometryTheme;
+}
+export declare function geometryThemePreset(merge?: Partial<GeometryThemeSeed>): GeometryThemeSeed;

package/dist/ui/theme/geometry_theme.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GeometryTheme = void 0;
+exports.geometryThemePreset = geometryThemePreset;
+class GeometryTheme {
+    size;
+    radius;
+    padding;
+    borderWidth;
+    constructor(size, radius, padding, borderWidth) {
+        this.size = size;
+        this.radius = radius;
+        this.padding = padding;
+        this.borderWidth = borderWidth;
+    }
+    asCss() {
+        return (`:root{` +
+            `--g-size: ${this.size}px;` +
+            `--g-radius: ${this.radius}rem;` +
+            `--g-padding: ${this.padding}rem;` +
+            `--g-border-width: ${this.borderWidth}rem;` +
+            "}");
+    }
+    static generate(seed) {
+        const s = geometryThemePreset(seed);
+        return new GeometryTheme(s.size, s.radius, s.padding, s.borderWidth);
+    }
+}
+exports.GeometryTheme = GeometryTheme;
+function geometryThemePreset(merge) {
+    const seed = merge ?? {};
+    return {
+        size: seed.size ?? 16,
+        radius: seed.radius ?? 0.75,
+        padding: seed.padding ?? 1,
+        borderWidth: seed.borderWidth ?? 0.125,
+    };
+}

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

@@ -0,0 +1,28 @@
+import { ColorTheme, type ColorThemeSeed } from "./colors";
+import { GeometryTheme, type GeometryThemeSeed } from "./geometry_theme";
+import { TypeTheme, type TypeThemeSeed } from "./type_theme";
+export * from "./color_theme";
+export * from "./colors";
+export * from "./geometry_theme";
+export * from "./type_theme";
+export interface ElbeThemeSeed {
+    color?: Partial<ColorThemeSeed>;
+    type?: Partial<TypeThemeSeed>;
+    geometry?: Partial<GeometryThemeSeed>;
+}
+export declare class ElbeThemeData {
+    readonly color: ColorTheme;
+    readonly type: TypeTheme;
+    readonly geometry: GeometryTheme;
+    constructor(color: ColorTheme, type: TypeTheme, geometry: GeometryTheme);
+    asCss(): string;
+    static fromSeed(seed: ElbeThemeSeed): ElbeThemeData;
+}
+export declare function ElbeTheme(p: {
+    children: any;
+    dark?: boolean;
+} & ({
+    seed: ElbeThemeSeed;
+} | {
+    theme: ElbeThemeData;
+})): import("preact").JSX.Element;