TokensTable.stories.mdx

import {Canvas, Meta, Story, ArgsTable} from '@storybook/addon-docs'; import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js'; import utrechtDesignTokens from '@utrecht/design-tokens/dist/tokens.js';

import TokensTable from './TokensTable';

Tokens table

Displays a table with the (JSON) path of the token, the current value (which can be edited) and where the current value is coming from (either a reference to another token, or a literal value).

export const Template = ({ container, limitTo = null, autoExpand, filterEnabled = false, }) => ( );

Rendering all tokens of a theme

{Template.bind({})}

Limit rendering to a component

{Template.bind({})}

Enable filters

{Template.bind({})}

'Unexpected' token shapes

Some style-dictionary configuration can result in additional properties being there but the value key missing.

{Template.bind({})}