feat(tokens): drop-shadow composites, component typography snippets by 5t3ph · Pull Request #6161 · adobe/spectrum-web-components

5t3ph · 2026-04-09T19:54:43Z

Description

This PR improves token tooling in two areas:

@adobe/swc-tokens now serializes composite drop-shadow tokens into a single CSS custom property that can be used directly in box-shadow.
swc-vscode-token (the extension) now provides snippets for grouped typography tokens, using a type- prefix such as type-component-m-regular.

Will require locally updating the extension from the VSIX file.

Motivation and context

Previous token processing was skipping the composite drop-shadow tokens. Snippets were complementary upgrade to add efficiency to current migration work.

Related issue(s)

SWC-1437

Screenshots (if appropriate)

Snippets will provide the typography related properties as may be exposed for component typography style tokens, visible in Figma within Typography as the "Name" value:

Typing type will bring up a list and preview of associated properties:

component-snippets.mov

Note: may still need adjusted to expose custom properties on as-needed basis.

Author's checklist

I have added automated tests to cover my changes.
I have included updated documentation if my change required it.

Reviewer's checklist

Includes a Github Issue with appropriate flag or Jira ticket number without a link
Automated tests cover all use cases and follow best practices for writing

Manual review test cases

Validate new drop-shadow- tokens present in final stylesheet
1. Review changes to tokens.css
2. Ensure valid box-shadow syntax
Validate extension updates
1. Install or update the extension from the VSIX
  - Instructions in 2nd-gen/packages/tools/swc-vscode-token/README.md
  - If updating, you must uninstall, re-install and also reload the window
2. Ensure token() can access new drop-shadow tokens
3. Test new snippets by beginning to type type inside of a CSS rule to see suggestions, and test selecting

changeset-bot · 2026-04-09T19:54:49Z

⚠️ No Changeset found

Latest commit: e71b2ad

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

5t3ph · 2026-04-09T19:57:07Z

2nd-gen/packages/swc/stylesheets/tokens.css

    rgb(0 0 0 / 16%),
    rgb(0 0 0 / 48%)
  );
+  --swc-drop-shadow-emphasized:


Example of the source design data

5t3ph · 2026-04-09T19:58:43Z

2nd-gen/packages/tools/swc-tokens/src/tokens.js

  });
 }

+function normalizeCompositeValue(value, options) {


I recommend skipping to the test cases to see the practical results of the changes here (which Chat via Codex assisted me with)

github-actions · 2026-04-09T20:00:09Z

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

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

Deployed to Azure Blob Storage: pr-6161

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.

5t3ph · 2026-04-09T20:00:21Z

2nd-gen/packages/tools/swc-vscode-token/scripts/generate-typography-snippets.mjs

+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+


The point of this file is to auto-generate the type-component-... snippets and expand their properties to correct CSS syntax, as seen in the next file containing the snippets.

5t3ph · 2026-04-09T20:00:48Z

2nd-gen/packages/tools/swc-vscode-token/snippets/typography.code-snippets

@@ -0,0 +1,167 @@
+{


Auto-generated by script in previous file, produces the snippet suggestions/output.

5t3ph · 2026-04-09T20:02:17Z

2nd-gen/packages/tools/swc-vscode-token/tokens.json

@@ -464,21 +464,21 @@
                "y": "2px",


Results of the updated token processing as used by the extension.

Rajdeepc

Clean extraction and loved how it is shaping up. Before i can give the final approval would you be okay to add these?

a lookupToken test for composite drop-shadow token
Please fix the single quote inconsistency in snippet generation.

2nd-gen/packages/tools/swc-tokens/src/tokens.js

2nd-gen/packages/tools/swc-vscode-token/scripts/generate-typography-snippets.mjs

2nd-gen/packages/tools/swc-tokens/src/tokens.js

5t3ph added 2 commits April 9, 2026 13:40

feat(tokens): support multi-dimensional drop-shadow tokens

87afdeb

feat(tokens): component typography snippets

3965e13

5t3ph requested a review from a team as a code owner April 9, 2026 19:54

5t3ph added CSS Processing Status:Ready for review PR ready for review or re-review. labels Apr 9, 2026

5t3ph commented Apr 9, 2026

View reviewed changes

Rajdeepc requested changes Apr 10, 2026

View reviewed changes

Rajdeepc self-assigned this Apr 10, 2026

5t3ph added 5 commits April 10, 2026 14:35

fix(tokens): normalize token insertion to double-quotes

4514fa5

fix(tokens): used shaped approach for token value

ac76c42

test(tokens): add missing test for normalizeCompositeValue

9844f98

fix(tokens): add requested comment

4cb316a

feat(tokens): re-package extension

207e34d

5t3ph added Status:Ready for re-review PR has had its feedback addressed and is once again ready for review. and removed Status:Ready for review PR ready for review or re-review. labels Apr 10, 2026

5t3ph requested a review from Rajdeepc April 10, 2026 19:49

fix(docs): add prettier-ignore

e71b2ad

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tokens): drop-shadow composites, component typography snippets#6161

feat(tokens): drop-shadow composites, component typography snippets#6161
5t3ph wants to merge 8 commits intomainfrom
seckles/multi-dimension-tokens

5t3ph commented Apr 9, 2026

Uh oh!

changeset-bot bot commented Apr 9, 2026 •

edited

Loading

Uh oh!

5t3ph Apr 9, 2026

Uh oh!

5t3ph Apr 9, 2026

Uh oh!

github-actions bot commented Apr 9, 2026 •

edited

Loading

Uh oh!

5t3ph Apr 9, 2026

Uh oh!

5t3ph Apr 9, 2026

Uh oh!

5t3ph Apr 9, 2026

Uh oh!

Rajdeepc left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

5t3ph commented Apr 9, 2026

Description

Motivation and context

Related issue(s)

Screenshots (if appropriate)

Author's checklist

Reviewer's checklist

Manual review test cases

Uh oh!

changeset-bot bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

5t3ph Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

5t3ph Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

Uh oh!

5t3ph Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

5t3ph Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

5t3ph Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Rajdeepc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot bot commented Apr 9, 2026 •

edited

Loading

github-actions bot commented Apr 9, 2026 •

edited

Loading