Is there a way to only show the utilized Design Tokens in a given Story? about storybook-design-token HOT 5 CLOSED

The Design Tokens tab in the addon panel isn't aware of which tokens the currently open component uses. It will always show all tokens. Currently there is no way to filter tokens by component usage.

from storybook-design-token.

Yes. You should be able to specify the parsed files via https://github.com/UX-and-I/storybook-design-token/tree/v3?tab=readme-ov-file#specify-a-custom-glob-for-your-token-files.

from storybook-design-token.

Thank you, @Sqrrl - That sounds promising! I am a bit uncertain as to how I am supposed to do this? Should I mark my component-based CSS classes in a distinct way and have the parser only look for those files? And it would thus exclude any design-tokens in the global files in each story. Or am I misunderstanding something here?

from storybook-design-token.

Assuming you have separate files containing your tokens (colors.css, spacings.css, …), I would define a blob pattern that only matches these token files. You could name all your token files *.tokens.css for example, and use a glob pattern like **/*.tokens.{css,scss,less,svg}. Or you could use the glob pattern to "whitelist" only specific file names (e.g. **/{colors,spacings}.css).

from storybook-design-token.

I apologize for my slow-ness here - I still am not sure I have understood this correctly.

Given this "global" Colors.tokens.css file:

:root {
    /**
    * @tokens Colors
    * @presenter Color
    */
    --color-button-primary: #1ea7fd;
    --color-button-primary-hover: #1b7ec2;
    --color-button-primary-active: #116699;
    --color-button-primary-disabled: #a0dfff;
    --color-button-secondary: #e9ecef;
    --color-button-secondary-hover: #e2e6ea;
    --color-button-secondary-active: #d4d8db;
    --color-button-secondary-disabled: #f1f3f5;
}

And a Button.css file like this:

.storybook-button--primary {
  background-color: var(--color-button-primary);
}
.storybook-button--primary:hover {
  background-color: var(--color-button-primary-hover);
}
.storybook-button--primary:active {
  background-color: var(--color-button-primary-active);
}
.storybook-button--primary:disabled {
  background-color: var(--color-button-primary-disabled);
}

I would assume that the color tokens for --color-button-secondary* to not be shown in the tab in the button story as it is not utilized in this component? Am I mistaken?

from storybook-design-token.