pantoken-root / packages/core/src / modifyExpression

Function: modifyExpression() ​

modifyExpression(base, modify): string

Beta

The CSS-expression form of applyModify: same maths, but applied to base at paint time rather than to a hex at build time, so a var(--instui-…) origin survives into the stylesheet and keeps tracking whatever that token resolves to (including a light-dark() pair, and any runtime re-pointing of the primitive it derives from).

Relative colour syntax resolves l on the 0–100 scale in both hsl() and lch(), and an omitted alpha channel inherits the origin's — matching applyModify's alpha passthrough.

Parameters ​

base ​

string

The base color (literal, var(--token), or a nested helper result).

modify ​

TokenModify

The colour space the modifier operates in (e.g. "hsl").

Returns ​

string

A color-mix() expression.

Example ​

ts
import { modifyExpression } from "@pantoken/core";

modifyExpression("var(--x)", { type: "alpha", value: 0.2, space: "hsl" });
// → "color-mix(in srgb, var(--x) 20%, transparent)"
modifyExpression("var(--x)", { type: "darken", value: 0.1, space: "hsl" });
// → "hsl(from var(--x) h s calc(l * 0.9))"
modifyExpression("var(--x)", { type: "lighten", value: 0.1, space: "hsl" });
// → "hsl(from var(--x) h s calc(l + (100 - l) * 0.1))"