For the presentation purposes of my design-tokens inside Storybook I am using an addon storybook-design-token. Inside my design tokens I also have spacing ones. My problem is it´s values are too big to fit the rendered presenter inside the “card” or row in a “table” viewType (see pictures). Is it possible to create new viewType or to override one of the default ones?

I know about creating custom presenters (see addon documentation > Custom Presenters), but that´s not enough. In order to style it appropriately for my tokens, I would need to get access a few levels higher in the vDOM and change some parent components. But as far as I can see, it is not possible.

The only hack I´ve come around (in the card viewType) is to target the parent that is affecting the width of the card. Than, changing it´s grid-template-columns property inside preview-head.html like this:

The solution in card viewType looks like this:

But that is not ideal. From the name of the div `css-11igmw9` I can see that its classname has been associated dynamically during build. In a new release of storybook-design-token this could change so it would break my fix.

Also, it is now targeting all card type presenters. In some other design tokens I don´t want it to be that wide.

What can I do about it? Does anyone have any suggestions?
Thank You in advance!