chore: adds support to parse "transparent" token references #3452

marissahuysentruyt · 2024-12-16T22:22:02Z

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:

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

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

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 · 2024-12-16T22:22:06Z

⚠️ No Changeset found

Latest commit: 51481bd

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 · 2024-12-16T22:23:45Z

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

github-actions · 2024-12-16T22:26:43Z

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	Δ
button	38.43 KB	36.57 KB	4.19 KB	🟢 ⬇ 1.12 KB

File change details

button

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	30.26 KB	28.75 KB	3.75 KB	🟢 ⬇ 0.89 KB
index-theme.css	12.39 KB	12.01 KB	1.14 KB	🔴 ⬆ 0.66 KB
index.css	38.43 KB	36.57 KB	4.19 KB	🟢 ⬇ 1.12 KB
metadata.json	20.23 KB	-	-	🔴 ⬆ 0.98 KB
themes/express.css	9.91 KB	9.61 KB	1.07 KB	🔴 ⬆ 0.15 KB
themes/spectrum-two.css	9.98 KB	9.68 KB	1.07 KB	🔴 ⬆ 0.15 KB
themes/spectrum.css	9.99 KB	9.69 KB	1.09 KB	🔴 ⬆ 0.15 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?

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.

jawinn · 2025-04-07T18:44:15Z

plugins/postcss-rgb-mapping/expected/modern.css

+  --spectrum-transparent-white-100-rgb: 100, 100, 100;
+  --spectrum-transparent-white-100-opacity: 0.5;
+  --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity));


Should this be using the rgb syntax without commas, like the other existing values above?
Similarly, should the rgba() be using the slash syntax? Or would that fail the tests? I'm wondering why some are different.

I believe it fails the test. I think it's because in the fixtures/basic.css, I already defined the -rgb and -opacity custom props, with the commas. Sort of like I already did the work for part of the modern CSS test.

Any ideas if I can fix that somehow?

How about something like this? 51481bd

Looks like it passes!

jawinn · 2025-04-08T20:48:17Z

plugins/postcss-rgb-mapping/README.md

+	--spectrum-transparent-white-100-rgb: 100, 100, 100;
+	--spectrum-transparent-white-100-opacity: 0.5;
+	--spectrum-transparent-white-100: rgba(
+		var(--spectrum-transparent-white-100-rgb),
+		var(--spectrum-transparent-white-100-opacity)
+	);
+	--disabled-static-white-background-color-rgb: var(
+		--spectrum-transparent-white-100-rgb
+	);
+	--disabled-static-white-background-color-opacity: var(
+		--spectrum-transparent-white-100-opacity
+	);
+	--disabled-static-white-background-color: rgba(
+		var(--disabled-static-white-background-color-rgb),
+		var(--disabled-static-white-background-color-opacity)
+	);


I think that separating the two chunks of example code with CSS comments (e.g. /* Example 2: Remapping of transparent tokens */ and /* Example 1: RGB and opacity postfixed variables */) explaining what it does would be helpful in trying to see the changes. Since the before/after code is a lot longer now, it's a little less clear trying to compare and look for differences. Just a thought.

I like that idea. I feel like I struggled a little bit to be concise with the CSS comments. Let me know if I can clarify anything. 6147109

- postcss-transparent-mapping pluging created - test.js file and new fixtures/expected CSS files

- adds transparent-mapping to tokens postcss config - adds transparent-mapping to tokens devDependencies

marissahuysentruyt added wip This is a work in progress, don't judge. do not merge A flag for a branch indicating it should not be merged. labels Dec 16, 2024

marissahuysentruyt self-assigned this Dec 16, 2024

marissahuysentruyt force-pushed the marissahuysentruyt/css-451-rgb-mapping-opacity branch from f9665ba to 7820d75 Compare December 17, 2024 21:42

marissahuysentruyt force-pushed the marissahuysentruyt/css-451-rgb-mapping-opacity branch from 7820d75 to 892feda Compare January 13, 2025 21:33

marissahuysentruyt force-pushed the marissahuysentruyt/css-451-rgb-mapping-opacity branch 2 times, most recently from 7429c49 to 5d1daf9 Compare January 31, 2025 21:23

castastrophe requested changes Feb 6, 2025

View reviewed changes

marissahuysentruyt force-pushed the marissahuysentruyt/css-451-rgb-mapping-opacity branch 3 times, most recently from 079d274 to 6938024 Compare February 28, 2025 16:46

marissahuysentruyt marked this pull request as ready for review February 28, 2025 20:41

marissahuysentruyt requested a review from castastrophe February 28, 2025 21:51

marissahuysentruyt added the ready-for-review label Mar 3, 2025

marissahuysentruyt requested review from cdransf, jawinn, 5t3ph, rise-erpelding and aramos-adobe March 3, 2025 14:57

marissahuysentruyt added skip_vrt Add to a PR to skip running VRT (but still pass the action) and removed run_vrt For use on PRs looking to kick off VRT labels Mar 5, 2025

marissahuysentruyt changed the title ~~chore: adds transparent-tokens.js~~ chore: adds support to parse "transparent" token references Mar 6, 2025

castastrophe force-pushed the main branch from 0d5bdfb to 8637d39 Compare March 11, 2025 14:54

aramos-adobe approved these changes Mar 12, 2025

View reviewed changes

castastrophe force-pushed the main branch 10 times, most recently from c68f4e3 to d2272ea Compare March 12, 2025 21:56

marissahuysentruyt force-pushed the marissahuysentruyt/css-451-rgb-mapping-opacity branch from b4310e6 to 9602337 Compare March 31, 2025 19:31

jawinn approved these changes Apr 8, 2025

View reviewed changes

marissahuysentruyt added 9 commits April 10, 2025 13:18

feat: add transparent-mapping postcss plugin

247a549

- postcss-transparent-mapping pluging created - test.js file and new fixtures/expected CSS files

chore(tokens): add transparent-mapping plugin to tokens

d8b674e

- adds transparent-mapping to tokens postcss config - adds transparent-mapping to tokens devDependencies

chore: update yarn.lock with new plugin for workspace

86461dc

chore: remove transparent plugin

fce6eef

feat: refactor transparent mapping into rgb-mapping plugin

4d8e3ff

chore(tokens): remove unnecessary package/dep updates

d8f31c3

test: add plugin test cases

a7702bb

docs: update README.md

2699818

chore(plugins/postcss-rgb-mapping): update README.md

6147109

marissahuysentruyt force-pushed the marissahuysentruyt/css-451-rgb-mapping-opacity branch from 9602337 to 6147109 Compare April 10, 2025 18:26

chore(plugins/postcss-rgb-mapping): refactor tests

51481bd

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: adds support to parse "transparent" token references #3452

chore: adds support to parse "transparent" token references #3452

marissahuysentruyt commented Dec 16, 2024 •

edited

Loading

changeset-bot bot commented Dec 16, 2024 •

edited

Loading

github-actions bot commented Dec 16, 2024 •

edited

Loading

github-actions bot commented Dec 16, 2024 •

edited

Loading

button

tokens

castastrophe left a comment

jawinn left a comment

jawinn Apr 7, 2025 •

edited

Loading

marissahuysentruyt Apr 10, 2025

marissahuysentruyt Apr 10, 2025

jawinn Apr 8, 2025 •

edited

Loading

marissahuysentruyt Apr 10, 2025 •

edited

Loading

chore: adds support to parse "transparent" token references #3452

Are you sure you want to change the base?

chore: adds support to parse "transparent" token references #3452

Conversation

marissahuysentruyt commented Dec 16, 2024 • edited Loading

Description

Jira/Specs

How and where has this been tested?

Validation steps

Additional validation

Regression testing

Screenshots

To-do list

changeset-bot bot commented Dec 16, 2024 • edited Loading

⚠️ No Changeset found

github-actions bot commented Dec 16, 2024 • edited Loading

github-actions bot commented Dec 16, 2024 • edited Loading

File metrics

Summary

button

tokens

castastrophe left a comment

Choose a reason for hiding this comment

jawinn left a comment

Choose a reason for hiding this comment

jawinn Apr 7, 2025 • edited Loading

Choose a reason for hiding this comment

marissahuysentruyt Apr 10, 2025

Choose a reason for hiding this comment

marissahuysentruyt Apr 10, 2025

Choose a reason for hiding this comment

jawinn Apr 8, 2025 • edited Loading

Choose a reason for hiding this comment

marissahuysentruyt Apr 10, 2025 • edited Loading

Choose a reason for hiding this comment

marissahuysentruyt commented Dec 16, 2024 •

edited

Loading

changeset-bot bot commented Dec 16, 2024 •

edited

Loading

github-actions bot commented Dec 16, 2024 •

edited

Loading

github-actions bot commented Dec 16, 2024 •

edited

Loading

jawinn Apr 7, 2025 •

edited

Loading

jawinn Apr 8, 2025 •

edited

Loading

marissahuysentruyt Apr 10, 2025 •

edited

Loading