chore: adds support to parse "transparent" token references

[marissahuysentruyt]

Description

This PR builds upon the idea the the rgb-mapping plugin introduced to the repo.

• finds any alias tokens that refer to other tokens with the word "transparent" in them
  • i.e. --spectrum-disabled-content-color: var(--spectrum-transparent-white-200)
• creates new custom properties that append -rgb and -opacity to those alias tokens
  • new properties would include --spectrum-disabled-content-color-rgb and --spectrum-disabled-content-color-opacity
• sets the values of the -rgb and -opacity custom properties to the corresponding transparent -rgb and -opacity custom properties
  • i.e. --spectrum-disabled-content-color-rgb: var(--spectrum-transparent-white-200-rgb)
• replaces the original alias token value with an rgba function that references the newly created custom properties instead
  • i.e. --spectrum-disabled-content-color: rgba(var(--spectrum-disabled-content-color-rgb), var(--spectrum-disabled-content-color-opacity)

This PR does not refactor any CSS to use the newly created custom properties that should occur with this PR. No VRT diffs should occur.

Jira/Specs

CSS-451

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

• Pull down the branch to run locally (it's easiest to look through the repo locally)
• Run nvm use && git clean -dfX && yarn install && yarn clean && yarn build for a fresh build and install
• Run yarn test:plugins in your terminal and verify all plugin tests pass, including postcss-rgb-mapping
• Run yarn start to verify the project runs as expected, with no errors
• Find the postcss-rgb-mapping README in the plugins directory. The new documentation should make sense, be accurate, and be grammar-free.

Additional validation

Compare the dist/global-vars.css with the new index.css that was just generated when yarn build & yarn start were run.

In tokens/dist/global-vars.css, you should see approximately 15 instances of a custom property's value set to a token like --spectrum-transparent-*. These are the custom properties this PR is targeting, listed below:

Targeted custom properties in dist/global-vars.css
--spectrum-disabled-static-white-background-color
--spectrum-disabled-static-black-background-color
--spectrum-disabled-static-white-content-color
--spectrum-disabled-static-black-content-color
--spectrum-disabled-static-white-border-color
--spectrum-disabled-static-black-border-color
--spectrum-static-black-track-color
--spectrum-static-white-track-color
--spectrum-static-black-track-indicator-color
--spectrum-static-white-track-indicator-color
--spectrum-color-loupe-drop-shadow-color
--spectrum-color-loupe-inner-border
--spectrum-floating-action-button-drop-shadow-color

Additionally, there are component-level properties pointing to a transparent token for light mode and dark mode:

Targeted custom properties in tokens/custom/dark-vars.css
--spectrum-calendar-day-background-color-down

Targeted custom properties in tokens/custom/light-vars.css
--spectrum-calendar-day-background-color-down

Verify that each of the custom properties listed above has new -rgb and -opacity custom properties in the dist/css/index.css.

For instance, you should see something like this in dist/global-vars.css:
--spectrum-static-black-track-color: var(--spectrum-transparent-black-300);

After the plugin runs, the dist/css/index.css should contain additional -rgb and -opacity custom properties. Those new properties should have values that reflect the corresponding transparent-black-300-rgb and -opacity props as well, like so:

--spectrum-static-black-track-color-rgb: var(--spectrum-transparent-black-300-rgb);
--spectrum-static-black-track-color-opacity: var(--spectrum-transparent-black-300-opacity);

Finally, the value for --spectrum-static-black-track-color utilizes the new -rgb and -opacity custom properties:

--spectrum-static-black-track-color: rgba(var(--spectrum-static-black-track-color-rgb), var(--spectrum-static-black-track-color-opacity));

Regression testing

Validate:

1. The documentation pages for at least two other components are still loading, including:

• The pages render correctly, are accessible, and are responsive.

2. If components have been modified, VRTs have been run on this branch:

• VRTs have been run and looked at.
• Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes. (@marissahuysentruyt no VRT changes 🎉 )

Screenshots

To-do list

• I have read the contribution guidelines.
• If my change impacts documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[changeset-bot]

🦋 Changeset detected

Latest commit: 86f2141

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@spectrum-tools/postcss-rgb-mapping	Minor

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

🚀 Deployed on https://pr-3452--spectrum-css.netlify.app

[github-actions]

File metrics

Summary

Total size: 2.25 MB^*
Total change (Δ): 🔴 ⬆ 4.59 KB (0.20%)

Table reports on changes to a package's main file.

tokens

Filename	Head	Minified	Gzipped	Compared to base
css/dark-vars.css	48.31 KB	-	-	🔴 ⬆ 0.28 KB
css/global-vars.css	44.20 KB	-	-	-
css/index.css	206.00 KB	-	-	🔴 ⬆ 4.04 KB
css/large-vars.css	32.08 KB	-	-	-
css/light-vars.css	48.27 KB	-	-	🔴 ⬆ 0.28 KB
css/medium-vars.css	32.24 KB	-	-	-
json/tokens.json	289.94 KB	-	-	-

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[castastrophe]

It seems like there's a lot of great overlap here with the transparent mapping and the rgb-mapping. What are your thoughts on adding that functionality directly to the rgb-mapping plugin rather than building a new one?

[jawinn]

Nice work on this. I did a diff on the tokens index CSS and it looks like what is expected.
I just had a few questions/comments, which shouldn't be blocking.

Will we need another PR after this releases in order to do a new release of our tokens package using the new @spectrum-tools/postcss-rgb-mapping version? Unless there is a way for changesets to handle it at the same time.