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

import { Buttons, TextTokens, BackgroundTokens, BorderTokens } from './components/SemanticTokens';

<Meta title="Guides/Semantic tokens examples" />

# Semantic tokens examples

With Tokyo UI the semantic tokens have been renamed and expanded to cover more use cases. Here is a list of the most important ones.

## Text tokens

<Unstyled>
    <TextTokens />
</Unstyled>

## Background tokens

<Unstyled>
    <BackgroundTokens />
</Unstyled>

## Action

<Unstyled>
    <Buttons />
</Unstyled>

## Border tokens

<Unstyled>
    <BorderTokens />
</Unstyled>
