scale

import { scale } from "@pitlane/theme";

function scale<base>(base): (steps: number) => base;

Turns one token into a multiplier, so a scale does not have to name every step. The returned function produces calc(<base> * <steps>), keeping whichever brand the base carried.

Use this for a token you did not declare as a scale. A token declared with s.scale() is already a multiplier, and its base is t.spacing.token when you need it.

The result is a CSS string like any other, so it also works as an authored token value.

Type Parameters

base

base extends ScalableToken

The token to multiply

Parameters

base

base

Returns

A function from steps to a token of the same type

(steps: number) => base

Example

import { scale } from "@pitlane/theme";

let step = scale(t.tracking.tight);
css({ letterSpacing: step(2) }); // calc(var(--tracking-tight) * 2)