docs: update styles docs #5855

rise-erpelding · 2025-11-06T01:48:31Z

Description

Updates the @spectrum-web-components/styles package documentation for clarity and completeness.

Updated 11/11: Expands documentation to more thoroughly describe tokens, with code snippets, while minimizing documentation about themes files, which will be deprecated.

Motivation and context

Part of a larger docs improvement initiative to update documentation.

Related issue(s)

closes SWC-432

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
~~I have reviewed at the Accessibility Practices for this feature, see: Aria Practices~~
~~I have added automated tests to cover my changes.~~
~~I have included a well-written changeset if my change needs to be published.~~
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
Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
Automated tests cover all use cases and follow best practices for writing
Validated on all supported browsers
All VRTs are approved before the author can update Golden Hash

Manual review test cases

1. Link validation

All internal links work as expected
All external links work as expected

2. Code examples and imports

All import paths reference files that actually exist in the package
Code examples are accurate and functional
Language tags are correct (CSS imports use css not ts)

3. Terminology consistency

Terms like "system variants", "color options", and "scales" are used consistently throughout

4. Markdown formatting and readability

No duplicate headings
Proper heading hierarchy
Tables render correctly
Sentence case is used consistently

Device review

Did it pass in Desktop?
Did it pass in (emulated) Mobile?
Did it pass in (emulated) iPad?

changeset-bot · 2025-11-06T01:48:34Z

⚠️ No Changeset found

Latest commit: b78c1f3

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 · 2025-11-06T01:50:28Z

📚 Branch Preview

🔍 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-5855

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.

Rajdeepc

Good start! If you can take a look at the heading hierarchy that would help!
What's included section is optional for me! But you can take others suggestions on this whether to keep it or not!

1st-gen/tools/styles/README.md

rise-erpelding · 2025-11-07T20:51:30Z

@Rajdeepc I think I've addressed most of your feedback here, thanks!

I removed a lot of the references to "Legacy" since it doesn't seem like that's terminology we're using.

I made a lot of adjustments to heading levels, although I ended up getting down to h5 and those look a little strange to me, happy to change those if we decide we'd rather not use that heading level.

I addressed the syntax highlighting suggestions too! I realized that a lot of these are @import syntax which is css, so it's neither Typescript nor JavaScript.

Last thing: you left a comment about code snippets, I haven't addressed this yet but wanted to push up what I had today.

1st-gen/tools/styles/package.json

marissahuysentruyt

I only found one link that didn't work, and otherwise this looks great! I left a few extra questions for you, but I don't think any of them are blockers.

Nice work!

1st-gen/tools/styles/README.md

1st-gen/tools/styles/package.json

1st-gen/tools/styles/README.md

marissahuysentruyt

Thanks for making those changes so quickly- looks great.

rise-erpelding · 2025-11-20T21:56:26Z

1st-gen/tools/styles/README.md

+
+Here is a summary of each system and the options available on each:
+
+<sp-table>


I added a table. It's a nice way to present information but the information being presented seems kind of obvious, so I took it out. I committed it so I could bring it back if a reviewer feels differently about it though. Here's what it looked like:

rise-erpelding · 2025-11-20T21:57:09Z

1st-gen/tools/styles/package.json

        "./src/spectrum-body.css": "./src/spectrum-body.css",
        "./src/spectrum-code.css": "./src/spectrum-code.css",
-        "./src/spectrum-detail.css": "./src/spectrum-code.css",
+        "./src/spectrum-detail.css": "./src/spectrum-detail.css",


We can thank Cursor for this one

github-actions · 2025-11-20T21:59:02Z

📚 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-5855

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.

rise-erpelding · 2025-11-20T22:41:11Z

1st-gen/tools/styles/README.md


 ```css
-/* pick a color option */
+/* pick a color option from: */


I threw these import examples into tabs so that a reader could more easily ignore them/go to the system they want. Since I removed the documentation about all of the available colors/scales on each system I had before (a table, and before that some bullets), I'm adding more imports to demonstrate all the available options. Happy to have feedback on this.

rise-erpelding · 2025-11-20T22:46:13Z

1st-gen/tools/styles/README.md

+#### Token usage example

-Which tokens files you import will depend on which tokens you want to use.
+Which tokens files you import will depend on which tokens you want to use. Here's one example of tokens usage in a non-web-component context, showing how custom properties from each file work together. This will vary slightly depending on which system's tokens are being used.


I've kept this example the mostly the same as it was, in the tabs. If the h5s behaved the way we would want them to, that would have been a better structure for them. Open to ideas here too.

rise-erpelding · 2025-11-20T22:48:04Z

1st-gen/tools/styles/README.md

-Generally speaking, `light-vars` and `dark-vars` files contain raw color custom property definitions (such as `--spectrum-red-500`), as well as semantic custom property definitions that change depending on which color option you use. For instance, in Spectrum 2 tokens, `--spectrum-neutral-subdued-background-color-default` uses different values per theme. It resolves to `--spectrum-gray-700` for light and `--spectrum-gray-500` for dark.
-
-For color, `global-vars` files contain semantic custom property definitions that stay consistent regardless of color option. For instance, `--spectrum-neutral-background-color-default` is always `--spectrum-gray-800`, but `--spectrum-gray-800` is defined differently depending on whether dark or light custom properties have been imported. Component-specific custom properties are split across these files. Some are in `global-vars` (e.g., `--spectrum-swatch-border-color`), while others are in `light-vars`/`dark-vars` (e.g., `--spectrum-assetcard-border-color-selected`).
-
-Similarly, `medium-vars` and `large-vars` files contain custom property definitions for raw spacings and sizes that differ between the two scales, such as `--spectrum-font-size-200` and `--spectrum-component-height-100`. They also contain component-specific custom property definitions that differ between scales, for instance `--spectrum-meter-width`. The `global-vars` file defines custom properties related to sizing or spacing that are consistent regardless of scale (e.g., `--spectrum-corner-radius-100`), or uses custom properties defined in `medium-vars`/`large-vars` (e.g., `--spectrum-meter-default-width: var(--spectrum-meter-width);`).
-


Took this paragraph out and there are sections for global, scale, and color now instead, and each has bullets with examples. I'm hoping that's clearer.

caseyisonit

LGTM

- Indentation fixes - Core tokens link fix - Use "Spectrum 2 tokens" rather than "v2-tokens" or "tokens-v2" - Adjust imports and comments in example

This reverts commit 6a63a69.

rise-erpelding requested a review from a team as a code owner November 6, 2025 01:48

rise-erpelding added Status: Ready for review PR ready for review or re-review. Component: Documentation Issues or PRs involving changes to docs or docs website. Component prefix is for Jira integration. labels Nov 6, 2025

rise-erpelding force-pushed the rise-erpelding/swc-432-styles-docs branch from 75ff964 to 4f6c32e Compare November 6, 2025 02:12

rise-erpelding self-assigned this Nov 6, 2025

Rajdeepc requested changes Nov 6, 2025

View reviewed changes

rise-erpelding force-pushed the rise-erpelding/swc-432-styles-docs branch from 4f6c32e to 305737d Compare November 7, 2025 20:12

rise-erpelding force-pushed the rise-erpelding/swc-432-styles-docs branch 3 times, most recently from b50d061 to 4d0d3c2 Compare November 11, 2025 22:15

rise-erpelding commented Nov 11, 2025

View reviewed changes

1st-gen/tools/styles/package.json Show resolved Hide resolved

rise-erpelding requested review from Rajdeepc and caseyisonit November 11, 2025 22:19

marissahuysentruyt requested changes Nov 12, 2025

View reviewed changes

github-actions bot reviewed Nov 12, 2025

View reviewed changes

1st-gen/tools/styles/package.json Outdated Show resolved Hide resolved

rise-erpelding commented Nov 12, 2025

View reviewed changes

1st-gen/tools/styles/README.md Show resolved Hide resolved

rise-erpelding requested a review from marissahuysentruyt November 12, 2025 18:42

marissahuysentruyt approved these changes Nov 12, 2025

View reviewed changes

rise-erpelding commented Nov 20, 2025

View reviewed changes

caseyisonit approved these changes Nov 21, 2025

View reviewed changes

Rajdeepc approved these changes Nov 25, 2025

View reviewed changes

docs: update styles docs

a7d69c3

rise-erpelding added 15 commits November 25, 2025 10:06

docs: improve typography section, syntax

5228fc3

docs: include tokens in typography examples

81ec273

docs: move tokens above typography

5b48b48

docs: typography updates

b7ae099

docs: update tokens docs

4171df4

chore: add deprecation notice

602ac19

chore: make the linter happy

6586cb2

docs: pr fixes

41430b4

- Indentation fixes - Core tokens link fix - Use "Spectrum 2 tokens" rather than "v2-tokens" or "tokens-v2" - Adjust imports and comments in example

docs: use tabs instead of h5s

8d6c8eb

docs: update typography guidance

c2a2e4e

chore: correct package exports order for token wildcards

d23fffa

Revert "chore: correct package exports order for token wildcards"

7ddd700

This reverts commit 6a63a69.

docs: rework organization

0e205c1

docs: eliminate available options table

f2939d5

chore: change mapped typography path

b78c1f3

rise-erpelding force-pushed the rise-erpelding/swc-432-styles-docs branch from 388e8da to b78c1f3 Compare November 25, 2025 20:06

rise-erpelding merged commit e164eca into main Nov 25, 2025
21 checks passed

rise-erpelding deleted the rise-erpelding/swc-432-styles-docs branch November 25, 2025 21:01


		Here is a summary of each system and the options available on each:

		<sp-table>

docs: update styles docs #5855

docs: update styles docs #5855

Uh oh!

Conversation

rise-erpelding commented Nov 6, 2025 • edited by marissahuysentruyt Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation and context

Related issue(s)

Author's checklist

Reviewer's checklist

Manual review test cases

1. Link validation

2. Code examples and imports

3. Terminology consistency

4. Markdown formatting and readability

Device review

Uh oh!

changeset-bot bot commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch Preview

🔍 Visual Regression Test Results

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rise-erpelding commented Nov 7, 2025

Uh oh!

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

rise-erpelding Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

rise-erpelding Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 20, 2025 • 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!

rise-erpelding Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

rise-erpelding Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

rise-erpelding Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

caseyisonit left a comment

Choose a reason for hiding this comment

rise-erpelding commented Nov 6, 2025 •

edited by marissahuysentruyt

Loading

changeset-bot bot commented Nov 6, 2025 •

edited

Loading

github-actions bot commented Nov 6, 2025 •

edited

Loading

github-actions bot commented Nov 20, 2025 •

edited

Loading