Codesandbox to see v4tokens in a user friendly way

[WouterrV]

If you want to use Ant Design v5 in an (legacy) app that still uses .less, you might want to use certain tokens (color, shadow, size) from the theme in your .less files. This is described here: https://ant.design/docs/react/migration-v5#less-migration

All the attributes of the 'v4token' object are then available in less. But when you just console.log() the v4token object, there's no color preview, lines don't break, etc. so it's hard to get an overview of what variables there are and which ones are useful for what you want to do.

The linked codesandbox takes the v4token object and converts it to less, so that you can see color previews etc. for all the generated less variables.

Link: https://codesandbox.io/s/ant-v5-all-tokens-5zrd43?file=/src/App.tsx