@paganaye/stylets 0.1.0

package/README.md

@@ -0,0 +1,13 @@
+Stylets (local package)
+
+Usage in demos:
+
+Install workspace deps from repo root:
+
+pnpm -w install
+
+Import from source (recommended for dev):
+
+import { styled } from 'stylets'
+
+If you want Vite to use the source files directly, add a Vite alias to point `stylets` to `packages/stylets/src`.

package/dist/BaseStyles.d.ts

@@ -0,0 +1,44 @@
+import { CssColor } from "./CssColor";
+import { StyleWriter } from "./StyleWriter";
+import { ITheme, CssProperties, IThemeParts, ThemeArgs, Identity, BorderProperties, MarginProperties, PaddingProperties, ShadowProperties, BackgroundProperties, TypographyProperties, LayoutProperties } from "./types";
+export declare abstract class BaseStyles<A extends ThemeArgs> implements ITheme<A> {
+    protected _name: string;
+    protected readonly _variants: Record<string, Record<string, CssProperties>>;
+    protected readonly _colors: Record<string, CssColor>;
+    protected readonly _sizes: Record<string, any>;
+    protected readonly _paddings: Record<string, PaddingProperties>;
+    protected readonly _margins: Record<string, MarginProperties>;
+    protected readonly _borders: Record<string, BorderProperties>;
+    protected readonly _shadows: Record<string, ShadowProperties>;
+    protected readonly _backgrounds: Record<string, BackgroundProperties>;
+    protected readonly _typography: Record<string, TypographyProperties>;
+    protected readonly _layouts: Record<string, LayoutProperties>;
+    protected readonly _vars: Record<string, string>;
+    protected readonly _classes: Record<string, CssProperties>;
+    protected readonly _styles: Record<string, CssProperties>;
+    readonly variants: {
+        [K in keyof A['variants'] as K extends string ? K : never]: {
+            [V in keyof A['variants'][K] & string]: V;
+        };
+    };
+    readonly colors: Record<A['colors'], `var(--${A['colors']})`>;
+    readonly vars: Record<A['vars'], `var(--${A['vars']})`>;
+    readonly paddings: Record<A['paddings'], `padding-${A['paddings']}`>;
+    readonly margins: Record<A['margins'], `margin-${A['margins']}`>;
+    readonly borders: Record<A['borders'], `border-${A['borders']}`>;
+    readonly shadows: Record<A['shadows'], `shadow-${A['shadows']}`>;
+    readonly backgrounds: Record<A['backgrounds'], `background-${A['backgrounds']}`>;
+    readonly typography: Record<A['typography'], `typography-${A['typography']}`>;
+    readonly layouts: Record<A['layouts'], `layouts-${A['layouts']}`>;
+    readonly classes: Identity<A['classes']>;
+    protected get name(): string;
+    protected readonly builder: StyleWriter;
+    constructor(themeParts: IThemeParts<A>);
+    protected add(parts: IThemeParts<A> & {
+        name?: string;
+    }): void;
+    protected preProcess(): void;
+    protected renderHeader(): void;
+    protected render(): void;
+    protected renderFooter(): void;
+}

package/dist/BaseStyles.js

@@ -0,0 +1,166 @@
+import { StyleWriter } from "./StyleWriter";
+export class BaseStyles {
+    _name = "";
+    _variants = {};
+    _colors = {};
+    _sizes = {};
+    _paddings = {};
+    _margins = {};
+    _borders = {};
+    _shadows = {};
+    _backgrounds = {};
+    _typography = {};
+    _layouts = {};
+    _vars = {};
+    _classes = {};
+    _styles = {};
+    // this is a record of record but probably not totally rightly typed
+    variants = {};
+    colors = {};
+    vars = {};
+    paddings = {};
+    margins = {};
+    borders = {};
+    shadows = {};
+    backgrounds = {};
+    typography = {};
+    layouts = {};
+    classes = {};
+    get name() { return this._name; }
+    builder;
+    constructor(themeParts) {
+        let name = themeParts.name ?? "theme";
+        this.builder = StyleWriter.byName(name);
+        this.add(themeParts);
+    }
+    add(parts) {
+        if (parts.name)
+            this._name = parts.name;
+        if (parts.variants)
+            Object.assign(this._variants, parts.variants);
+        if (parts.colors)
+            Object.assign(this._colors, parts.colors);
+        if (parts.vars)
+            Object.assign(this._vars, parts.vars);
+        if (parts.paddings)
+            Object.assign(this._paddings, parts.paddings);
+        if (parts.margins)
+            Object.assign(this._margins, parts.margins);
+        if (parts.borders)
+            Object.assign(this._borders, parts.borders);
+        if (parts.layouts)
+            Object.assign(this._layouts, parts.layouts);
+        if (parts.shadows)
+            Object.assign(this._shadows, parts.shadows);
+        if (parts.classes)
+            Object.assign(this._classes, parts.classes);
+        if (parts.styles)
+            Object.assign(this._styles, parts.styles);
+        this.preProcess();
+    }
+    preProcess() {
+        // Build root variables from multiple sources in a single pass
+        const preProcessVars = (src, type, output) => {
+            let entries = Object.entries(src);
+            for (let [key, value] of Object.entries(src)) {
+                output[key] = `var(--${key})`;
+            }
+        };
+        preProcessVars(this._colors, 'colors', this.colors);
+        preProcessVars(this._vars, 'vars', this.vars);
+        // Process variants
+        for (const [groupKey, groupValue] of Object.entries(this._variants)) {
+            const variantGroup = {};
+            for (const variantKey of Object.keys(groupValue)) {
+                variantGroup[variantKey] = variantKey;
+            }
+            this.variants[groupKey] = variantGroup;
+        }
+        const preProcessRules = (src, label, output, prefix) => {
+            const entries = Object.entries(src);
+            let isClass = (label === 'classes');
+            for (const [k, v] of entries) {
+                output[k] = prefix ? (prefix + k) : k;
+            }
+        };
+        preProcessRules(this._paddings, 'paddings', this.paddings, 'padding-');
+        preProcessRules(this._margins, 'margins', this.margins, 'margin-');
+        preProcessRules(this._borders, 'borders', this.borders, 'border-');
+        preProcessRules(this._backgrounds, 'backgrounds', this.backgrounds, 'background-');
+        preProcessRules(this._typography, 'typography', this.typography, 'typography-');
+        preProcessRules(this._layouts, 'layouts', this.layouts, 'layouts-');
+        preProcessRules(this._shadows, 'shadows', this.shadows, 'shadow-');
+        preProcessRules(this._classes, 'classes', this.classes);
+    }
+    renderHeader() {
+        // this.builder.addLine(`/* ${this.name} start */`);
+    }
+    render() {
+        this.builder.clear();
+        this.renderHeader();
+        // Build root variables from multiple sources in a single pass
+        const processVars = (src, type) => {
+            let entries = Object.entries(src);
+            if (entries.length === 0)
+                return;
+            this.builder.addLine(`/* ${this.name} ${type} */`);
+            this.builder.addLine(`:root {`);
+            this.builder.indentLevel++;
+            for (let [key, value] of Object.entries(src)) {
+                switch (typeof value) {
+                    case 'number':
+                        value = `${value}rem`;
+                        break;
+                    case 'object':
+                        value = value.toString();
+                        break;
+                }
+                this.builder.addLine(`--${key}: ${value};`);
+            }
+            this.builder.indentLevel--;
+            this.builder.addLine(`}`);
+        };
+        processVars(this._colors, 'colors');
+        processVars(this._sizes, 'sizes');
+        processVars(this._vars, 'vars');
+        // Helper to emit classes/styles to avoid repetition
+        const processRules = (src, label, prefix) => {
+            const entries = Object.entries(src);
+            if (entries.length === 0)
+                return;
+            this.builder.addLine(`/* ${this.name} ${label} */`);
+            for (const [k, v] of entries) {
+                const selector = prefix ? `${prefix}${k}` : k;
+                this.builder.addRule(selector, v);
+            }
+        };
+        processRules(this._paddings, 'paddings', ".padding-");
+        processRules(this._margins, 'margins', ".margin-");
+        processRules(this._borders, 'borders', ".border-");
+        processRules(this._backgrounds, 'backgrounds', ".background-");
+        processRules(this._typography, 'typography', ".typography-");
+        processRules(this._layouts, 'layouts', ".layouts-");
+        processRules(this._shadows, 'shadows', ".shadow-");
+        processRules(this._classes, 'classes', ".");
+        processRules(this._styles, 'styles', "");
+        // Process variants with attribute selectors
+        const processVariants = () => {
+            const entries = Object.entries(this._variants);
+            if (entries.length === 0)
+                return;
+            this.builder.addLine(`/* ${this.name} variants */`);
+            for (const [groupKey, groupValue] of entries) {
+                for (const [variantKey, variantStyles] of Object.entries(groupValue)) {
+                    const selector = `[${groupKey}="${variantKey}"]`;
+                    this.builder.addRule(selector, variantStyles);
+                }
+            }
+        };
+        processVariants();
+        this.renderFooter();
+        this.builder.render();
+    }
+    renderFooter() {
+        this.builder.addLine(`/* ${this.name} end */`);
+    }
+}

package/dist/Button.d.ts

@@ -0,0 +1,69 @@
+import { IDivProps } from "./HTML";
+import { Tone } from "./Tone";
+import { VariantProps } from "./types";
+declare let styles: import("./ScopeStyles").ScopeStylesPublic<{
+    colors: "primary";
+    vars: never;
+    paddings: never;
+    margins: never;
+    borders: never;
+    backgrounds: never;
+    typography: never;
+    shadows: never;
+    layouts: never;
+    classes: "customButton";
+    variants: {
+        [x: string]: never;
+        buttonType: {
+            outline: {
+                borderColor: string;
+            };
+            normal: {
+                borderColor: string;
+            };
+            default: {
+                borderColor: string;
+            };
+        };
+        buttonSize: {
+            small: {
+                width: string;
+            };
+            large: {
+                width: string;
+            };
+            default: {
+                width: string;
+            };
+        };
+    };
+}, {
+    [x: string]: never;
+    buttonType: {
+        outline: {
+            borderColor: string;
+        };
+        normal: {
+            borderColor: string;
+        };
+        default: {
+            borderColor: string;
+        };
+    };
+    buttonSize: {
+        small: {
+            width: string;
+        };
+        large: {
+            width: string;
+        };
+        default: {
+            width: string;
+        };
+    };
+}>;
+export interface IButtonProps extends IDivProps, VariantProps<typeof styles> {
+    tone?: Tone;
+}
+export declare function Button(props: IButtonProps, ...children: any[]): string;
+export {};

package/dist/Button.js

@@ -0,0 +1,56 @@
+import { prepareProps, Elt } from "./props";
+import { theme as theme } from "./DefaultTheme"; // --- IGNORE ---
+import { alter } from "./CssColor";
+import { v } from "./CssExpr";
+let styles = theme.declareScope({
+    class: 'btn',
+    scopeEnd: 'img',
+    colors: {},
+    sizes: {},
+    vars: {},
+    classes: {
+        customButton: { padding: '10px 15px' }
+    },
+    styles: {
+        ':scope': {
+            transition: 'all 0.25s ease',
+            borderRadius: `var(--buttonRadius)`,
+            borderColor: alter(v('tone'), {
+                l: { min: v('BdLum'), max: v('BdLum') },
+                c: { mul: v('BdChroma') }
+            }),
+        },
+        ':scope:hover': {
+            '--BgLum': '0.45',
+            '--BdLum': '0.95',
+            outline: '1px solid yellow',
+        },
+        ':scope:active': {
+            '--BgLum': '0',
+            '--BdLum': '0.3',
+            transform: 'translate(.1rem,.2rem)',
+            outline: '1px solid',
+            outlineColor: theme.colors.primary
+        }
+    },
+    variants: {
+        buttonType: {
+            outline: { borderColor: 'red' },
+            normal: { borderColor: 'blue' },
+            default: { borderColor: 'gray' }
+        },
+        buttonSize: {
+            small: { width: '200px' },
+            large: { width: '400px' },
+            default: { width: '300px' }
+        }
+    },
+}).render();
+export function Button(props, ...children) {
+    const newProps = prepareProps(props, styles);
+    if (props.tone) {
+        newProps.class.tone = true;
+        newProps.class[props.tone] = true;
+    }
+    return Elt('button', newProps, children);
+}

package/dist/CssColor.d.ts

@@ -0,0 +1,44 @@
+import { type Num } from "./CssNum";
+import { CssExpr } from "./CssExpr";
+type IPropAlteration = Num | {
+    expr?: Num;
+    mul?: Num;
+    add?: Num;
+    min?: Num;
+    max?: Num;
+};
+type IColorAlterations = {
+    l?: IPropAlteration;
+    c?: IPropAlteration;
+    h?: IPropAlteration;
+};
+export declare abstract class CssColor extends CssExpr {
+    abstract toString(): string;
+    static alpha: typeof alpha;
+    static contrast: typeof contrast;
+    static complement: typeof complement;
+    static triadic: typeof triadic;
+    static analogous: typeof analogous;
+    static alter: typeof alter;
+    static lch: typeof lch;
+    static mix: typeof mix;
+}
+declare class LchColor extends CssColor {
+    readonly l: number;
+    readonly c: number;
+    readonly h: number;
+    constructor(l: number, c: number, h: number);
+    toString(): string;
+}
+export declare function alpha(color: CssExpr, opacity: number | CssExpr): string;
+export declare function contrast(color: CssExpr): string;
+export declare function complement(color: CssExpr): string;
+export declare function triadic(color: CssExpr, index?: 0 | 1 | 2): string;
+export declare function analogous(color: CssExpr, angle?: number): string;
+export declare function alter(base: CssExpr, alterations: IColorAlterations): string;
+export declare function lch(l: number, c: number, h: number): LchColor;
+export declare function mix(base: CssExpr, other: CssExpr, ratio: number | CssExpr): string;
+export declare const l: CssExpr;
+export declare const c: CssExpr;
+export declare const h: CssExpr;
+export {};

package/dist/CssColor.js

@@ -0,0 +1,196 @@
+import { CssExpr, customCss } from "./CssExpr";
+export class CssColor extends CssExpr {
+    static alpha = alpha;
+    static contrast = contrast;
+    static complement = complement;
+    static triadic = triadic;
+    static analogous = analogous;
+    static alter = alter;
+    static lch = lch;
+    static mix = mix;
+}
+class CssColorVar extends CssColor {
+    name;
+    constructor(name) {
+        super('none', 'color');
+        this.name = name;
+    }
+    toString() { return `var(--${this.name})`; }
+}
+class CssCustomColorExpr extends CssColor {
+    expr;
+    constructor(expr) {
+        super('none', 'color');
+        this.expr = expr;
+    }
+    toString() { return this.expr; }
+}
+class LchColor extends CssColor {
+    l;
+    c;
+    h;
+    constructor(l, c, h) {
+        super('none', 'color');
+        this.l = l;
+        this.c = c;
+        this.h = h;
+    }
+    toString() { return `oklch(${this.l} ${this.c} ${this.h})`; }
+}
+class PropAlteration extends CssColor {
+    prop;
+    alt;
+    constructor(prop, alt) {
+        super('none', 'color');
+        this.prop = prop;
+        this.alt = alt;
+    }
+    toString() {
+        let alt = this.alt;
+        if (!alt)
+            return this.prop;
+        if (typeof alt === 'number')
+            return String(alt);
+        if (alt instanceof CssExpr || alt instanceof CssColor)
+            return alt.toString();
+        let p = (val) => {
+            if (val === undefined)
+                return undefined;
+            if (typeof val == 'number')
+                return String(val);
+            return val.toString();
+        };
+        let expr = p(alt.expr) ?? this.prop;
+        const mul = p(alt.mul);
+        const add = p(alt.add);
+        const min = p(alt.min);
+        const max = p(alt.max);
+        // Handle multiplication and addition
+        if (mul && add) {
+            expr = `calc((${expr} * ${mul}) + ${add})`;
+        }
+        else if (mul) {
+            expr = `calc(${expr} * ${mul})`;
+        }
+        else if (add) {
+            expr = `calc(${expr} + ${add})`;
+        }
+        // Handle clamping
+        if ('min' in alt && 'max' in alt) {
+            expr = `clamp(${min}, ${expr}, ${max})`;
+        }
+        else if ('min' in alt) {
+            expr = `max(${min}, ${expr})`;
+        }
+        else if ('max' in alt) {
+            expr = `min(${expr}, ${max})`;
+        }
+        return expr;
+    }
+}
+class AlterColor extends CssColor {
+    base;
+    l;
+    c;
+    h;
+    constructor(base, alterations) {
+        super('none', 'color');
+        this.base = base;
+        this.l = new PropAlteration('l', alterations.l);
+        this.c = new PropAlteration('c', alterations.c);
+        this.h = new PropAlteration('h', alterations.h);
+    }
+    toString() {
+        const l = this.l.toString();
+        const c = this.c.toString();
+        const h = this.h.toString();
+        return `oklch(from ${this.base.toString()} ${l} ${c} ${h})`;
+    }
+}
+class MixColor extends CssColor {
+    base;
+    other;
+    ratio;
+    constructor(base, other, ratio) {
+        super('none', 'color');
+        this.base = base;
+        this.other = other;
+        this.ratio = ratio;
+    }
+    toString() {
+        let percentA;
+        let percentB;
+        if (typeof this.ratio === 'number') {
+            if (this.ratio <= 0)
+                return this.base.toString();
+            if (this.ratio >= 1)
+                return this.other.toString();
+            percentA = `${Math.round(100 - this.ratio * 100)}%`;
+            percentB = `${Math.round(this.ratio * 100)}%`;
+        }
+        else {
+            percentA = `calc(100% - ${this.ratio})`;
+            percentB = this.ratio.toString();
+        }
+        return `mix(${this.base.toString()} ${percentA}, ${this.other.toString()}, ${percentB})`;
+    }
+}
+class AlphaColor extends CssColor {
+    color;
+    opacity;
+    constructor(color, opacity) { super('none', 'color'); this.color = color; this.opacity = opacity; }
+    toString() { const op = typeof this.opacity === 'number' ? String(this.opacity) : this.opacity.toString(); return `color(${this.color.toString()} / ${op})`; }
+}
+class ContrastColor extends CssColor {
+    color;
+    constructor(color) { super('none', 'color'); this.color = color; }
+    toString() { if (this.color instanceof LchColor) {
+        return this.color.l > 0.5 ? 'black' : 'white';
+    } return `color-contrast(${this.color.toString()} vs(black, white))`; }
+}
+class ComplementColor extends CssColor {
+    color;
+    constructor(color) { super('none', 'color'); this.color = color; }
+    toString() { if (this.color instanceof LchColor) {
+        const newH = (this.color.h + 180) % 360;
+        return lch(this.color.l, this.color.c, newH).toString();
+    } return `oklch(from ${this.color.toString()} l c calc((h + 180) % 360))`; }
+}
+class TriadicColor extends CssColor {
+    color;
+    index;
+    constructor(color, index = 0) { super('none', 'color'); this.color = color; this.index = index; }
+    toString() { const offset = this.index === 0 ? 0 : (this.index === 1 ? 120 : 240); if (this.color instanceof LchColor) {
+        const newH = (this.color.h + offset) % 360;
+        return lch(this.color.l, this.color.c, newH).toString();
+    } return `oklch(from ${this.color.toString()} l c calc((h + ${offset}) % 360))`; }
+}
+class AnalogousColor extends CssExpr {
+    color;
+    angle;
+    constructor(color, angle = 30) { super('none', 'color'); this.color = color; this.angle = angle; }
+    toString() {
+        if (this.color instanceof LchColor) {
+            if (typeof this.angle === 'number') {
+                const h1 = (this.color.h + this.angle) % 360;
+                const h2 = (this.color.h + 360 - this.angle) % 360;
+                return `${lch(this.color.l, this.color.c, h1).toString()}, ${lch(this.color.l, this.color.c, h2).toString()}`;
+            }
+            const aStr = this.angle.toString();
+            return `${this.color.toString()}, oklch(l c calc((h + ${aStr}) % 360)), oklch(l c calc((h - ${aStr} + 360) % 360))`;
+        }
+        const aStr = typeof this.angle === 'number' ? String(this.angle) : this.angle.toString();
+        return `${this.color.toString()}, oklch(l c calc((h + ${aStr}) % 360)), oklch(l c calc((h - ${aStr} + 360) % 360))`;
+    }
+}
+export function alpha(color, opacity) { return new AlphaColor(color, opacity).toString(); }
+export function contrast(color) { return new ContrastColor(color).toString(); }
+export function complement(color) { return new ComplementColor(color).toString(); }
+export function triadic(color, index = 0) { return new TriadicColor(color, index).toString(); }
+export function analogous(color, angle = 30) { return new AnalogousColor(color, angle).toString(); }
+export function alter(base, alterations) { return new AlterColor(base, alterations).toString(); }
+export function lch(l, c, h) { return new LchColor(l, c, h); }
+export function mix(base, other, ratio) { return new MixColor(base, other, ratio).toString(); }
+export const l = customCss('l', 'none', 'length');
+export const c = customCss('c', 'none', 'length');
+export const h = customCss('h', 'none', 'angle');

package/dist/CssColor.test.d.ts

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

package/dist/CssColor.test.js

@@ -0,0 +1,68 @@
+import { describe, it } from 'vitest';
+// TODO: Update imports once CssColor is fully integrated
+// import { alpha, contrast, complement, triadic, analogous, mix, alter, lch } from './CssColor';
+// import { v } from './CssExpr';
+describe('colorUtils', () => {
+    it.skip('cssVar returns a CSS variable string', () => {
+        // expect(v('primary').toString()).toBe('var(--primary)');
+    });
+    it.skip('col creates a Color instance representing a CSS var', () => {
+        // const val = v('accent');
+        // expect(String(val)).toBe('var(--accent)');
+    });
+    it.skip('mixColors returns base when ratio <= 0', () => {
+        // const base = lch(0.5, 0.2, 200);
+        // const other = lch(0.7, 0.3, 100);
+        // expect(mix(base, other, 0)).toBe('oklch(0.5 0.2 200)');
+    });
+    it.skip('mixColors returns other when ratio >= 1', () => {
+        // const base = lch(0.5, 0.2, 200);
+        // const other = lch(0.7, 0.3, 100);
+        // expect(mix(base, other, 1)).toBe('oklch(0.7 0.3 100)');
+    });
+    it.skip('mixColors returns mix string for intermediate ratio', () => {
+        // const base = lch(0.5, 0.2, 200);
+        // const other = lch(0.7, 0.3, 100);
+        // expect(mix(base, other, 0.25)).toBe('mix(oklch(0.5 0.2 200) 75%, oklch(0.7 0.3 100), 25%)');
+    });
+    it.skip('alterColor with numeric alterations', () => {
+        // const base = lch(0.5, 0.2, 200);
+        // const out = alter(base, { l: 0.3, c: { mul: 2 }, h: { add: 10 } });
+        // expect(out).toBe('oklch(from oklch(0.5 0.2 200) 0.3 calc(c * 2) calc(h + 10))');
+    });
+    it.skip('alterColor with clamp alterations', () => {
+        // const base = lch(0.5, 0.2, 200);
+        // const out = alter(base, { l: { min: 0, max: 1 }, c: { min: v('cMin') as any, max: v('cMax') as any } });
+        // expect(out).toBe('oklch(from oklch(0.5 0.2 200) clamp(0, l, 1) clamp(var(--cMin), c, var(--cMax)) h)');
+    });
+    it.skip('alterColor with multiple alterations', () => {
+        // const base = lch(0.6, 0.4, 120);
+        // const out = alter(base, { l: { mul: 0.5, add: 0.1, min: 0, max: 1 }, c: { mul: v('scale'), add: 0.02 }, h: 180 });
+        // expect(out).toBe('oklch(from oklch(0.6 0.4 120) clamp(0, calc((l * 0.5) + 0.1), 1) calc((c * var(--scale)) + 0.02) 180)');
+    });
+    it.skip('alpha wraps color with opacity', () => {
+        // const base = lch(0.5, 0.2, 200);
+        // expect(alpha(base, 0.4)).toBe('color(oklch(0.5 0.2 200) / 0.4)');
+    });
+    it.skip('contrast returns black for light lch', () => {
+        // const light = lch(0.9, 0.1, 10);
+        // expect(contrast(light)).toBe('black');
+    });
+    it.skip('contrast returns white for dark lch', () => {
+        // const dark = lch(0.2, 0.2, 10);
+        // expect(contrast(dark)).toBe('white');
+    });
+    it.skip('complement rotates hue by 180', () => {
+        // const c = lch(0.5, 0.2, 30);
+        // expect(complement(c)).toBe('oklch(0.5 0.2 210)');
+    });
+    it.skip('triadic produces rotated hues', () => {
+        // const c = lch(0.5, 0.2, 30);
+        // expect(triadic(c, 1)).toBe('oklch(0.5 0.2 150)');
+        // expect(triadic(c, 2)).toBe('oklch(0.5 0.2 270)');
+    });
+    it.skip('analogous returns two nearby hues', () => {
+        // const c = lch(0.5, 0.2, 60);
+        // expect(analogous(c, 20)).toBe('oklch(0.5 0.2 80), oklch(0.5 0.2 40)');
+    });
+});

package/dist/CssExpr.d.ts

@@ -0,0 +1,9 @@
+import { CssUnit, CssType } from "./CssNum";
+export declare abstract class CssExpr {
+    readonly unit: CssUnit;
+    readonly type: CssType;
+    constructor(unit: CssUnit, type: CssType);
+}
+export declare function customCss(expr: string, unit?: CssUnit, type?: CssType): CssExpr;
+export declare function arg(name: string, unit?: CssUnit, type?: CssType): CssExpr;
+export declare function v(name: string, unit?: CssUnit, type?: CssType): CssExpr;