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

# Function: referenceToVarName()

> **referenceToVarName**(`reference`): `string`

Beta

Map a Tokens Studio reference body (the text inside `{…}`) to the CSS custom-property name of
the token it points at. A leading `semantic.` discriminates the semantic layer from primitives.

## Parameters

### reference

`string`

## Returns

`string`

## Example

```ts
import { referenceToVarName } from "@pantoken/core";

referenceToVarName("color.white");                  // → "--instui-primitive-color-white"
referenceToVarName("semantic.color.background.base"); // → "--instui-color-background-base"
```