build: token processing updates

[castastrophe]

Description

Main file for review: scripts/generate-tokens-wrapper.js

• Clean the tools/styles/(tokens|tokens-v2) folders before generating asssets
  • Why? This was not being done previously leading to outdated assets being retained in the library and causing invalid token output.
• Using require to fetch the packages from node_modules rather than specifying the location to better facilitate linking
• Remove the custom-*.css assets from import because that content is already concatenated in the (dark|light|medium|large)-vars.css files.
• Rename the component-vars.css in the tools/styles/tokens* directories to system-theme-bridge.css for improved clarity.

Along for the ride

• Removed chalk dependency in favor of the smaller colors package
• tasks/process-spectrum.js removed the chalk reference and as such, also had to resolve the lint errors in order to push up that change (removed unused variables reported and replaced ts-ignore with ts-expect-error)
• tasks/css-tools.js

Motivation and context

By sourcing the system theming from the components, it lets us ensure the component theming provided matches the version of the component the SWC library supports. Previously, CSS was copying the theming assets from the component packages and bundling them in the token package to streamline their use by SWC. Now that we're making this update though, we can harden that pipeline to ensure the correct system mappings are being used and allowing SWC the freedom to rely on older versions of some components than others might be at while still advancing the tokens library.

How has this been tested?

• Expect to see no changes in visual regression testing
  1. Though what assets are being shipped for theming has changed, the content of those assets has not changed and so we expect to see no visual change.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• If my change required a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• [n/a] I have added tests to cover my changes.
• All new and existing tests passed.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

[changeset-bot]

⚠️ No Changeset found

Latest commit: bc101e6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Branch preview

• Documentation Site
• Storybook

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[coveralls]

Pull Request Test Coverage Report for Build 12793875349

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 98.209%

---

Totals
Change from base Build 12777756120:	0.0%
Covered Lines:	33006
Relevant Lines:	33430

---

💛 - Coveralls

[github-actions]

Tachometer results

Currently, no packages are changed by this PR...

[TarunAdobe]

This looks good!! Thanks for working on it.

[rubencarvalho]

Is there a possibility of incorporating the changes from #4999 into this PR? Or are these things that should not get addressed together?

[Rajdeepc]

Is there a possibility of incorporating the changes from #4999 into this PR? Or are these things that should not get addressed together?

This is a good call to pull in the changes from #4999. I don't see any side effects here

[castastrophe]

VRTs showed a fix in the checkbox which is now picking up the correct corner radius for Spectrum 2 🥳

[rubencarvalho]

Thank you for landing this! I left a small comment about a JSDoc, but it’s non-blocking.