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

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

# StyledComponents: Tokens

The [getTokenVar](/docs/utilities-gettokenvar--docs) utility gives you access to design tokens:

```tsx
import styled from 'styled-components';
import { action, root } from '@preply/ds-core';
import { getTokenVar as t } from '@preply/ds-web-core';

export const MyComponent = styled.div`
    padding: ${t(root.space[padding])};
    color: ${t(action.variant.primary.color)};
    background-color: ${t(action.variant.primary.bgColor)};
    border-radius: ${t(action.base.borderRadius)};
`;
```

This function actually returns the CSS variable for a token—eg. `var(--12345)`.
