@paganaye/stylets 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,239 @@
+import { CssColor } from "./CssColor";
+import { CssFilter } from "./CssFilter";
+import { Num } from "./CssNum";
+import { CssShadow } from "./CssShadow";
+export type OverrideProperties = ShadowProperties & PaddingProperties & MarginProperties & BorderProperties & BackgroundProperties & LayoutProperties & TypographyProperties;
+export type CssProperties = Omit<Partial<CSSStyleDeclaration>, keyof OverrideProperties> & OverrideProperties & {
+    [key: CssVariableName]: string | number | boolean | Num;
+};
+export type CssVariableName = `--${string}`;
+export type ThemeArgs = {
+    variants: Record<string, Record<string, any>>;
+    colors: string;
+    vars: string;
+    paddings: string;
+    margins: string;
+    borders: string;
+    backgrounds: string;
+    typography: string;
+    layouts: string;
+    shadows: string;
+    classes: string;
+};
+export type ThemeKey = keyof ThemeArgs;
+export interface IThemeParts<A extends ThemeArgs> {
+    name?: string;
+    variants?: {
+        [K in keyof A['variants']]?: Record<keyof A['variants'][K] & string, CssProperties>;
+    };
+    colors?: Record<A['colors'], string | CssColor>;
+    vars?: Record<A['vars'], string | number>;
+    paddings?: Record<A['paddings'], PaddingProperties>;
+    margins?: Record<A['margins'], MarginProperties>;
+    borders?: Record<A['borders'], BorderProperties>;
+    backgrounds?: Record<A['backgrounds'], BackgroundProperties>;
+    typography?: Record<A['typography'], TypographyProperties>;
+    layouts?: Record<A['layouts'], LayoutProperties>;
+    shadows?: Record<A['shadows'], ShadowProperties>;
+    classes?: Record<A['classes'], CssProperties>;
+    styles?: Record<string, CssProperties>;
+}
+export type ShadowProperties = {
+    boxShadow?: CssShadow | string;
+    textShadow?: CssShadow | string;
+    filter?: CssFilter | CssFilter[] | string;
+    backdropFilter?: CssFilter | string;
+    opacity?: Num | string;
+};
+export type PaddingProperties = {
+    padding?: Num;
+    paddingTop?: Num;
+    paddingRight?: Num;
+    paddingBottom?: Num;
+    paddingLeft?: Num;
+};
+export type MarginProperties = {
+    margin?: Num;
+    marginTop?: Num;
+    marginRight?: Num;
+    marginBottom?: Num;
+    marginLeft?: Num;
+};
+export type BorderProperties = {
+    border?: string;
+    borderWidth?: Num;
+    borderStyle?: CssBorderStyle;
+    borderColor?: CssColor | string;
+    borderCollapse?: CssBorderCollapse;
+    borderSpacing?: Num;
+    borderTop?: string;
+    borderTopWidth?: Num;
+    borderTopStyle?: CssBorderStyle;
+    borderTopColor?: CssColor | string;
+    borderRight?: string;
+    borderRightWidth?: Num;
+    borderRightStyle?: CssBorderStyle;
+    borderRightColor?: CssColor | string;
+    borderBottom?: string;
+    borderBottomWidth?: Num;
+    borderBottomStyle?: CssBorderStyle;
+    borderBottomColor?: CssColor | string;
+    borderLeft?: string;
+    borderLeftWidth?: Num;
+    borderLeftStyle?: CssBorderStyle;
+    borderLeftColor?: CssColor | string;
+    borderRadius?: Num;
+    borderTopLeftRadius?: Num;
+    borderTopRightRadius?: Num;
+    borderBottomLeftRadius?: Num;
+    borderBottomRightRadius?: Num;
+    cornerTopLeftShape?: CssCornerShape;
+    cornerTopRightShape?: CssCornerShape;
+    cornerBottomLeftShape?: CssCornerShape;
+    cornerBottomRightShape?: CssCornerShape;
+    outline?: string;
+    outlineWidth?: Num;
+    outlineStyle?: CssBorderStyle;
+    outlineColor?: CssColor | string;
+    outlineOffset?: Num;
+};
+export type BackgroundProperties = {
+    background?: string;
+    backgroundColor?: CssColor | string;
+    backgroundImage?: string;
+    backgroundRepeat?: string;
+    backgroundPosition?: string;
+    backgroundSize?: string;
+    backgroundAttachment?: 'scroll' | 'fixed' | 'local' | string;
+    backgroundClip?: string;
+    backgroundOrigin?: string;
+};
+export type LayoutProperties = {
+    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' | string;
+    inset?: string | Num;
+    top?: Num | string;
+    right?: Num | string;
+    bottom?: Num | string;
+    left?: Num | string;
+    zIndex?: number | string;
+    display?: string;
+    boxSizing?: 'content-box' | 'border-box' | string;
+    width?: Num | string;
+    minWidth?: Num | string;
+    maxWidth?: Num | string;
+    height?: Num | string;
+    minHeight?: Num | string;
+    maxHeight?: Num | string;
+    flex?: string | Num;
+    flexBasis?: Num | string;
+    flexGrow?: number | string;
+    flexShrink?: number | string;
+    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse' | string;
+    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse' | string;
+    justifyContent?: string;
+    alignItems?: string;
+    alignContent?: string;
+    alignSelf?: string;
+    order?: number | string;
+    gap?: Num | string;
+    gridTemplateColumns?: string;
+    gridTemplateRows?: string;
+    gridColumn?: string;
+    gridRow?: string;
+    gridGap?: Num | string;
+    gridAutoFlow?: string;
+    columnCount?: number | string;
+    columnWidth?: Num | string;
+    columnGap?: Num | string;
+    columnRule?: string;
+    overflow?: 'visible' | 'hidden' | 'scroll' | 'auto' | string;
+    overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto' | string;
+    overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto' | string;
+    scrollBehavior?: 'auto' | 'smooth' | string;
+    overscrollBehavior?: string;
+    scrollSnapType?: string;
+    scrollSnapAlign?: string;
+};
+export type TypographyProperties = {
+    font?: string;
+    fontFamily?: string;
+    fontSize?: Num;
+    fontWeight?: Num;
+    fontStyle?: 'normal' | 'italic' | 'oblique' | string;
+    lineHeight?: Num;
+    letterSpacing?: Num;
+    wordSpacing?: Num;
+    textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | string;
+    textDecoration?: string;
+    textAlign?: 'left' | 'right' | 'center' | 'justify' | string;
+    whiteSpace?: string;
+    textOverflow?: 'clip' | 'ellipsis' | string;
+    overflowWrap?: 'normal' | 'break-word' | 'anywhere';
+};
+export type CssBorderStyle = 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+export type CssBorderCollapse = 'collapse' | 'separate' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
+export type CssCornerShape = 'bevel' | 'notch' | 'round' | 'scoop' | 'square' | 'squircle';
+export interface IScopeStylesParts<A extends ThemeArgs> extends IThemeParts<A> {
+}
+export interface ITheme<A extends ThemeArgs = any> {
+    colors: Record<A['colors'], string>;
+    paddings: Record<A['paddings'], string>;
+    margins: Record<A['margins'], string>;
+    borders: Record<A['borders'], string>;
+    shadows: Record<A['shadows'], string>;
+    backgrounds: Record<A['backgrounds'], string>;
+    typography: Record<A['typography'], string>;
+    vars: Record<A['vars'], string>;
+    classes: Identity<A['classes']>;
+}
+export type CssClass<TTheme extends ITheme<any>> = Extract<keyof TTheme['classes'], string>;
+export type ClassList<T extends string = any> = T | Array<T | undefined | null | Record<T, boolean | undefined | null>> | Record<T, boolean | undefined | null>;
+export type ThemeClass<TTheme extends ITheme> = ClassList<CssClass<TTheme>>;
+export type IThemeFromArgs<Args extends ThemeArgs> = ITheme<Args>;
+export type ExtractNames<P, K extends ThemeKey> = P extends {
+    [Key in K]: Record<infer Names, any>;
+} ? Extract<Names, string> : never;
+export type MergeNames<K extends ThemeKey, A extends ThemeArgs, P> = [
+    A[K]
+] extends [never] ? ExtractNames<P, K> : ([ExtractNames<P, K>] extends [never] ? A[K] : A[K] | ExtractNames<P, K>);
+export type Simplify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+export type Identity<T extends string> = {
+    [K in T]: K;
+};
+export type ExtractVariantRecord<P> = P extends {
+    variants: infer V extends Record<string, any>;
+} ? V : {};
+export type MergeVariants<A extends ThemeArgs, P> = Simplify<A['variants'] & ExtractVariantRecord<P>>;
+export type ExtractVariants<P> = P extends {
+    variants: infer V;
+} ? V : {};
+export type HasDefault<T> = "default" extends keyof T ? true : false;
+export type RemoveIndexSignature<T> = {
+    [K in keyof T as string extends K ? never : number extends K ? never : symbol extends K ? never : K]: T[K];
+};
+export type VariantProps<S> = S extends {
+    variants: infer V extends Record<string, any>;
+} ? Simplify<{
+    [K in keyof RemoveIndexSignature<V> as K extends string ? (HasDefault<V[K]> extends true ? K : never) : never]?: Extract<keyof V[K], string>;
+} & {
+    [K in keyof RemoveIndexSignature<V> as K extends string ? (HasDefault<V[K]> extends true ? never : K) : never]: Extract<keyof V[K], string>;
+}> : {};
+export type ElementPropsRecord = {
+    class: string;
+    [dataAttr: `data-${string}`]: string | undefined;
+};
+export type MergeThemeArgs<A extends ThemeArgs, P> = Simplify<{
+    colors: MergeNames<'colors', A, P>;
+    vars: MergeNames<'vars', A, P>;
+    paddings: MergeNames<'paddings', A, P>;
+    margins: MergeNames<'margins', A, P>;
+    borders: MergeNames<'borders', A, P>;
+    backgrounds: MergeNames<'backgrounds', A, P>;
+    typography: MergeNames<'typography', A, P>;
+    shadows: MergeNames<'shadows', A, P>;
+    layouts: MergeNames<'layouts', A, P>;
+    classes: MergeNames<'classes', A, P>;
+    variants: MergeVariants<A, P>;
+}>;

package/dist/types.js

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

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@paganaye/stylets",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "source": "src/index.ts",
+  "description": "A small typescript library to build powerful familiar CSS stylesheets in typescript.",
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "~5.9.3",
+    "vitest": "^2.1.8"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "dev": "tsc -w -p tsconfig.build.json",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}

package/src/BaseStyles.ts

@@ -0,0 +1,192 @@
+import { CssColor } from "./CssColor";
+import { StyleWriter } from "./StyleWriter";
+import { ITheme, CssProperties, IThemeParts, ThemeArgs, Identity, BorderProperties, MarginProperties, PaddingProperties, ShadowProperties, BackgroundProperties, TypographyProperties, LayoutProperties } from "./types";
+
+export abstract class BaseStyles<
+    A extends ThemeArgs>
+    implements ITheme<A> {
+        
+    protected _name = "";
+    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> = {};
+
+    // this is a record of record but probably not totally rightly typed
+    public readonly variants: { [K in keyof A['variants']as K extends string ? K : never]: { [V in keyof A['variants'][K] & string]: V } } = {} as any;
+
+    public readonly colors: Record<A['colors'], `var(--${A['colors']})`> = {} as any;
+    public readonly vars: Record<A['vars'], `var(--${A['vars']})`> = {} as any;
+
+    public readonly paddings: Record<A['paddings'], `padding-${A['paddings']}`> = {} as any;
+    public readonly margins: Record<A['margins'], `margin-${A['margins']}`> = {} as any;
+    public readonly borders: Record<A['borders'], `border-${A['borders']}`> = {} as any;
+    public readonly shadows: Record<A['shadows'], `shadow-${A['shadows']}`> = {} as any;
+    public readonly backgrounds: Record<A['backgrounds'], `background-${A['backgrounds']}`> = {} as any;
+    public readonly typography: Record<A['typography'], `typography-${A['typography']}`> = {} as any;
+    public readonly layouts: Record<A['layouts'], `layouts-${A['layouts']}`> = {} as any;
+    public readonly classes: Identity<A['classes']> = {} as any;
+
+    protected get name() { return this._name; }
+    protected readonly builder: StyleWriter;
+
+    constructor(themeParts: IThemeParts<A>) {
+        let name = themeParts.name ?? "theme";
+        this.builder = StyleWriter.byName(name);
+        this.add(themeParts);
+    }
+
+    protected add(parts: IThemeParts<A> & { name?: string; }) {
+        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();
+    }
+    protected preProcess(): void {
+        // Build root variables from multiple sources in a single pass
+        const preProcessVars = (src: Record<string, any>, type:
+            'colors'
+            | 'vars'
+            | 'paddings'
+            | 'margins'
+            | 'borders'
+            | 'backgrounds'
+            | 'typography'
+            | 'layouts', output: Record<string, string>) => {
+            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: Record<string, string> = {};
+            for (const variantKey of Object.keys(groupValue)) {
+                variantGroup[variantKey] = variantKey;
+            }
+            (this.variants as any)[groupKey] = variantGroup;
+        }
+
+        const preProcessRules = (src: Record<string, any>,
+            label: string,
+            output: Record<string, string>,
+            prefix?: string) => {
+            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);
+    }
+
+
+    protected renderHeader(): void {
+        // this.builder.addLine(`/* ${this.name} start */`);
+    }
+
+
+    protected render(): void {
+        this.builder.clear();
+        this.renderHeader();
+        // Build root variables from multiple sources in a single pass
+        const processVars = (src: Record<string, any>, type: 'vars' | 'colors' | 'sizes' | 'paddings' | 'margins' | 'backgrounds' | 'typography' | 'layouts') => {
+            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: Record<string, any>, label: string, prefix?: string) => {
+            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 as any);
+            }
+        };
+
+        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 as any);
+                }
+            }
+        };
+
+        processVariants();
+
+        this.renderFooter();
+        this.builder.render();
+    }
+
+    protected renderFooter(): void {
+        this.builder.addLine(`/* ${this.name} end */`);
+    }
+
+}

package/src/Button.ts

@@ -0,0 +1,68 @@
+import { prepareProps, completeProps, Elt } from "./props";
+import { theme as theme } from "./DefaultTheme"; // --- IGNORE ---
+import { alter } from "./CssColor";
+import { v } from "./CssExpr";
+import { IDivProps } from "./HTML";
+import { Tone } from "./Tone";
+import { VariantProps } from "./types";
+
+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 interface IButtonProps extends IDivProps, VariantProps<typeof styles> {
+    tone?: Tone;
+}
+
+export function Button(props: IButtonProps, ...children: any[]) {
+    const newProps = prepareProps(props, styles);
+    if (props.tone) {
+        newProps.class.tone = true;
+        newProps.class[props.tone] = true;
+    }
+
+    return Elt('button', newProps, children);
+}
+
+

package/src/CssColor.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } 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)');
+    });
+});