import { Meta } from '@storybook/addon-docs/blocks';

<Meta
    title="Utilities/getTokenVar"
    summary="Utility to retrieve a token's CSS variable as a string."
/>

# getTokenVar(token)

This utility allows you to retrieve a token's CSS variable as a string, eg. `var(--abc123)`;

```ts
import { color } from '@preply/ds-core';
import { getTokenVar } from '@preply/ds-web-core';

const myStyle = getTokenVar(color.background.primary);
```

Note that the actual value depends on the parent `ThemeProvider`.

Use the [Token Explorer](/docs/design-tokens-token-explorer--docs) to search tokens by name, id, or
value (make sure you have the correct theme selected), and see
[Design tokens](/docs/design-tokens-overview--docs) for how to pick the right one.