pantoken-root / packages/core/src / modifyExpression

Funció: modifyExpression() ​

modifyExpression(base, modify): string

Beta

La forma d'expressió CSS de applyModify: mateixes operacions matemàtiques, però aplicada a base en temps de pintura en lloc d'un hex en temps de compilació, així que un var(--instui-…) d'origen sobreviu al full d'estils i continua fent seguiment del que sigui que resolgui aquell token (incloent-hi un light-dark() de parells, i qualsevol reassignació en temps d'execució de la primitiva d'on deriva)).

La sintaxi de color relativa resol l en l'escala 0–100 tant a hsl() com a lch(), i un canal alfa omès hereta el de l'origen — coincidint amb el pas de l'alfa de applyModify.

Paràmetres ​

base ​

string

El color base (literal, var(--token), o un resultat d'ajudant imbricat).

modify ​

TokenModify

L'espai de color en el qual funciona el modifier (p. ex. "hsl").

Retorna ​

string

Una expressió color-mix().

Exemple ​

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))"