Use directories to control output of token artifacts

[ethangardner]

Summary

Simplified the style dictionary config by using the directory structure to control the logic of token output. This approach came directly from Style Dictionary's examples - https://github.com/style-dictionary/style-dictionary/tree/main/examples/advanced/matching-build-files

Related issue

Closes #272

Problem statement

The previous configuration relied on hardcoded filter arrays and manual path mappings, making it difficult to scale as new token categories were added. Additionally, the --usa-spacing-05 token was corrected in a previous PR but a build was not run. This commits the built file.

Solution

Important note for the reviewer

It appears like a lot has changed in this PR. That isn't the case. Most of the changes were to move directories around and add a top-level key to the colors files. Since directory and nesting is different, git did not flag it as a rename unfortunately. The easiest way to review this would be to look at the config file changes and verify the output files are identical to what you get when you do a fresh build on the main branch.

---

This PR refactors the style-dictionary configuration to dynamically generate output files (CSS and SCSS) based on the subdirectories within the tokens/ folder.

1. Introduced a tokens/index.js helper that reads the directory structure to define token groups.
2. Renamed tokens/dimension and tokens/color to pluralized versions (spacing, breakpoints, colors) to align directory names with the generated output filenames.
3. Streamlined the generateTokenName helper by removing manual path checks and relying on the standardized directory structure.

Major changes

• Simplified style-dictionary.config.js to map over dynamic token groups instead of a static outputs array.
• Renamed tokens/color/ to tokens/colors/.
• Added a top-level key to all files in the tokens/colors/ directory
• Renamed tokens/dimension/breakpoints.json to tokens/breakpoints/.
• Renamed tokens/dimension/spacing.json to tokens/spacing/.
• Refactored internals/token-helpers/index.ts to use a more generic naming convention based on file paths.

Testing and review

1. Run the build command (npm run build) and ensure that build/css/ and build/scss/ still contain colors, spacing, and breakpoints files with correct variable names.
2. Run npm test to ensure the updated generateTokenName logic passes with the new path structures.

[changeset-bot]

⚠️ No Changeset found

Latest commit: d7d4c10

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.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

[ethangardner]

@annepetersen - I'm not sure who you'd like to do a review of this. I tagged you, but feel free to reassign to whoever you think would be good.

[annepetersen]

@heymatthenry is probably a good choice for review on this one — though if that's not the case, please let me know

[jonathanbobel]

LGTM 🚀