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]

⚠️ No Changeset found

Latest commit: b4310e6

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

[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. Other changes can be found in the collapsed Details section below.

Package	Size	Minified	Gzipped	Δ
picker	28.17 KB	26.90 KB	3.38 KB	🟢 ⬇ 0.02 KB
stepper	18.36 KB	17.49 KB	2.42 KB	-

File change details

picker

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	27.21 KB	25.98 KB	3.30 KB	-
index-theme.css	1.84 KB	1.80 KB	0.57 KB	-
index.css	28.17 KB	26.90 KB	3.38 KB	🟢 ⬇ 0.02 KB
metadata.json	14.93 KB	-	-	-
themes/express.css	1.45 KB	1.41 KB	0.55 KB	-
themes/spectrum-two.css	1.55 KB	1.51 KB	0.56 KB	🟢 ⬇ 0.02 KB
themes/spectrum.css	1.56 KB	1.51 KB	0.57 KB	-

stepper

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	16.67 KB	15.89 KB	2.27 KB	-
index-theme.css	2.77 KB	2.69 KB	0.66 KB	-
index.css	18.36 KB	17.49 KB	2.42 KB	-
metadata.json	8.96 KB	-	-	-
themes/express.css	2.06 KB	1.99 KB	0.65 KB	-
themes/spectrum-two.css	2.23 KB	2.15 KB	0.65 KB	-
themes/spectrum.css	2.23 KB	2.16 KB	0.65 KB	-

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?