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

<Meta title="Guides/Custom Components/Less.js/Tokens" />

# Less.js: Tokens

You can import the tokens directly from `@preply/ds-web-core`:

```css
@import '@preply/ds-web-core/dist/generated/tokens.less';

.MyComponent {
    color: @action-variant-primary-color;
    background-color: @action-variant-primary-bgColor;
    border-radius: @action-base-borderRadius;
}
```

This file declares one `@variable` per token, that simply points to the CSS var `var(--12345)`.

Note that the actual value depends on the parent [ThemeProvider](/story/api-ds-web-core-providers-themeprovider--page) and [ColorSchemeProvider](/story/api-ds-web-core-providers-colorschemeprovider--page).

Use the [Token Explorer](/story/guides-token-explorer--page) to search tokens by name, id, or value
(make sure you have the correct theme selected).
