feat(tokens): add new tokens json files

[BenOsodrac]

Issue number: internal

---

What is the new behavior?

• Added new structure of JSON files that are generated from Figma Variables
• Adjusted tokens.js script to correctly translate the new JSON format
• Adjusted tokens usage on components and CSS files
• Added html template to auto-generate html preview based on Design Tokens (wip)
• Updated snapshots, as some tokens values changed, specially colors.

Does this introduce a breaking change?

• Yes
• No

Other information

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 22, 2024 7:04am

[BenOsodrac]

@thetaPC @brandyscarney I did some recent commits to reorganize the tokens.js code a bit better and separate some methods on a different file. Hopefully its a bit cleaner 👍 .

Also, these introduced expected differences on some of the components already done for new framework. I will be reviewing those styles either way this sprint, as there were some UI adjustments done by the UX team in the past weeks.

Unless you find some extremely wrong, I would say we commit for now for these changes (slight color changes and border values), so that we can start all working on the same base Design Tokens 💪

[thetaPC]

Thank you so much for all the comments!

[thetaPC]

LGTM, thank you!!