Tokens: Adding Theme VR Web/Semantic Tokens

[rlingineni]

This PR adds a set of tokens under each theme.

The outputs are non-breaking, but a few things have been re-organized.

1. All source have been moved from main-theme to a classic folder
2. alias-dark/lightMode files have been renamed to sema-light/darkMode (this is just a file name change)
3. Outputs for a theme are now in grouped in folders in dist (e.g. vrweb/variable.css instead of vrweb_variables.css ). Classic will still output directly, so nothing should break

Things to note in the VR Theme:

Base and Semantic Token Clashes Data-Visualization naming is used in both base and semantic token (this causes a clash). Maybe we should just define these at the semantic level. So the semantic tokens are renamed to data-viz to avoid this.

Missing Line Heights Line Heights have not been added to the font tokens. There are some pending comments.

Rounding Circle Clash rounding-circle similar to data-viz tokens is both a base and sema token. So ideally, the base token would be named differently.

Elevations values are incorrect This was a direct copy from the spread-sheet, but the values for Elevation may be incorrect and may have to be updated. The names should be as expected.

We may need to format like this to make elevation values more cross platform compatible.

Missing Negative spacing values Once negative spacing values are added, they will have to be added to the VR themes

Next steps to figure out:

1. How to prefix a token with Base, Sema, Comp.. (each token set is already in a file called sema.json or base.json). I think we can do it with a transformGroup.

2. Any missing component token stuff as needed

3. Double check the expected values are correct (e.g elevation values)

Links

• Jira
• [TDD](link to Paper doc)
• [Figma](link to Figma file)

Checklist

• [ ] Added unit and Flow Tests
• [ ] Added documentation + accessibility tests
• [ ] Verified accessibility: keyboard & screen reader interaction
• [ ] Checked dark mode, responsiveness, and right-to-left support
• [ ] Checked stakeholder feedback (e.g. Gestalt designers, relevant feature teams)

[netlify[bot]]

✅ Deploy Preview for gestalt ready!

Name	Link
🔨 Latest commit	9ce99686f72fd17f3ff0b341687a5136d8a0056f
🔍 Latest deploy log	https://app.netlify.com/sites/gestalt/deploys/663d5b2765f2fb0008b07d04
😎 Deploy Preview	https://deploy-preview-3559--gestalt.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.