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

<Meta title="Guides/Custom Components/SCSS/Tokens" />

# SCSS: Tokens

<details style={{ marginBlock: '24px' }}>
    <summary>🚧 SCSS Support is experimental 🚧</summary>

SCSS support was introduced due to the lack of support for LESS in the Next.js app router.

Please avoid using it for other purposes, as the API may change or be removed in the future.

</details>

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

```css
@use '@preply/ds-web-core/dist/generated/tokens' as *;

.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).
