---
url: /api/packages/core/src/functions/modifyExpression.md
---
[pantoken-root](../../../../index.md) / [packages/core/src](../index.md) / modifyExpression

# Function: modifyExpression()

> **modifyExpression**(`base`, `modify`): `string`

Beta

The CSS-expression form of [applyModify](applyModify.md): 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 origin colour: a `var(--token)`, a literal, or a nested expression.

### modify

[`TokenModify`](../interfaces/TokenModify.md)

The Tokens Studio modifier to express.

## Returns

`string`

A CSS colour 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))"
```