Changelog

Use functions in variables

Variables now support using a set of CSS functions in their values, allowing you to create more flexible and dynamic design tokens.

Webflow supports the following CSS functions in variables:

Custom values

To use functions in variables, you need to create or set them as custom values. All variable creation methods accept a CustomValue object as the value parameter, and the variable.set() method can also update variable values with custom values. For the custom values object, the type property is always "custom" and the value property is a string containing the CSS function.

CustomValue type

1
type CustomValue = {
2
  type: "custom";
3
  value: string;
4
};

1
// Get collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Create a Color Variable
5
const colorVariable = await collection.createColorVariable("blue-500", "#146EF5")
6
7
// Create a Color Variable with a custom value
8
await colorVariable.set({
9
    type: "custom",
10
    value: `color-mix(in srgb, #146EF5, white 75%)`
11
});

Reference variables in functions

When using functions, you can reference other variables using the var() syntax. This allows you to create dynamic relationships between your design tokens. To dynamically get this syntax, use the new getBinding() method on a variable.

1
// Get collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Create a Color Variable
5
const colorVariable = await collection.createColorVariable("blue-500", "#146EF5")
6
7
// Get the binding for the variable
8
const binding = await colorVariable.getBinding()
9
10
// Create a Color Variable with a custom value
11
await colorVariable.set({
12
    type: "custom",
13
    value: `color-mix(in srgb, ${binding}, white 75%)`
14
});

Getting the value of a custom variable

To get the value of a custom variable, add the customValues property as an optional parameter to the variable.get() method.

1
const myValue = await colorVariable.get({
2
    customValues: true
3
})
4
5
console.log(myValue)
6
// Returns a CustomValue object
7
// {
8
//     type: "custom",
9
//     value: "color-mix(in srgb, #146EF5, white 75%)"
10
// }