import { Meta, Unstyled } from '@storybook/addon-docs/blocks';
import { RootProvider } from '@preply/ds-web-root';

import { TokenExplorer } from './components/TokenExplorer';

<Meta title="Design tokens/Token explorer" tags={['!manifest']} />

Search all public design tokens by name, value, or id. The Category and Syntax filters narrow the
list and switch the copyable snippets between JavaScript, Less, SCSS, and CSS. Filters are stored
in the URL, so a filtered view can be shared as a link. Previews reflect the currently selected
theme and color scheme.

New to tokens? Read the [Design tokens overview](/docs/design-tokens-overview--docs) first to pick
the right one.

<RootProvider theme="tokyo-ui">
    <Unstyled>
        <TokenExplorer />
    </Unstyled>
</RootProvider>