Feat(exporter): Add new files for device tokens

[pavelklibani]

Description

Additional context

Issue reference

Form | Radius | New design-tokens structure

[netlify]

✅ Deploy Preview for spirit-design-system-storybook canceled.

Name	Link
🔨 Latest commit	cf85c0b
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/681b4caf96f3490008912771

[netlify]

✅ Deploy Preview for spirit-design-system ready!

Name	Link
🔨 Latest commit	cf85c0b
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system/deploys/681b4caf20eee50008d3d14e
😎 Deploy Preview	https://deploy-preview-2056--spirit-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[crishpeen]

Please change the commit scope. It should be design-tokens

[crishpeen]

LGTM, please add e2e visual tests to check nothing breaks. And please change the commit scope.

[crishpeen]

Also, please let Jirka know what we cannot move to the Device collection now (because of the map/object conflict).

[literat]

I am sorry, but the naming does not make sense to me. Why device? I will expect there tv, mobile, desktop and other devices; however, what I see are buttons, forms, etc...

Wouldn't be better to use responsivity tokens or something else?

[github-actions]

Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/14865092804/artifacts/3071853827

[crishpeen]

I am sorry, but the naming does not make sense to me. Why device? I will expect there tv, mobile, desktop and other devices; however, what I see are buttons, forms, etc...

Wouldn't be better to use responsivity tokens or something else?

This is based on the usage in Figma, where you choose Appearance.

We came up with this name, because it is best for designers and ok for us. In spirit-web you won't even know the directory, because as you can see, it is exported from @tokens too. So you will still use just border-radius: tokens.$button-small-radius-mobile; like with all other tokens.

[github-actions]

Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/14881176429/artifacts/3077321234

[pavelklibani]

I am sorry, but the naming does not make sense to me. Why device? I will expect there tv, mobile, desktop and other devices; however, what I see are buttons, forms, etc...
Wouldn't be better to use responsivity tokens or something else?

This is based on the usage in Figma, where you choose Appearance.

We came up with this name, because it is best for designers and ok for us. In spirit-web you won't even know the directory, because as you can see, it is exported from @tokens too. So you will still use just `border-radius: tokens.$button-small-radius-mobile;` like with all other tokens.

It was discussed in the office, and we decided to keep it named devices.