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: caaaca3

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!

Rajdeepc · 2025-11-06T14:29:59Z

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

+**Use this styles package directly** when you need:
+
+- Fine-grained control over which CSS files are loaded
+- To integrate Spectrum styles into non-web component contexts
+- To build custom components outside the `<sp-theme>` wrapper
+- Direct access to unthemed design tokens for advanced use cases


These are good points. Would you also like to create small snippets to demonstrate the usage?

Rajdeepc · 2025-11-06T14:30:48Z

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

+- **Spectrum Legacy** (system: `spectrum`) - The original Spectrum design system with four color options: `dark`, `light`, and deprecated `darkest` and `lightest`
+- **Express** (system: `express`) - The Adobe Express design system with two color options: `dark` and `light`
+- **Spectrum 2** (system: `spectrum-two`) - The next generation Spectrum design system with two color options: `dark` and `light`


Suggested change

- **Spectrum Legacy** (system: `spectrum`) - The original Spectrum design system with four color options: `dark`, `light`, and deprecated `darkest` and `lightest`

- **Express** (system: `express`) - The Adobe Express design system with two color options: `dark` and `light`

- **Spectrum 2** (system: `spectrum-two`) - The next generation Spectrum design system with two color options: `dark` and `light`

- **Spectrum** (system: `spectrum`) - The original Spectrum design system with four color options: `dark`, `light`, and deprecated `darkest` and `lightest`

- **Express** (system: `express`) - The Adobe Express design system with two color options: `dark` and `light`

- **Spectrum 2** (system: `spectrum-two`) - The next generation Spectrum design system with two color options: `dark` and `light`

Rajdeepc · 2025-11-06T14:30:59Z

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

+- **Spectrum 2** (system: `spectrum-two`) - The next generation Spectrum design system with two color options: `dark` and `light`

-```
+## Combined theme packages (Spectrum Legacy)


Suggested change

## Combined theme packages (Spectrum Legacy)

## Combined theme packages (Spectrum)

Rajdeepc · 2025-11-06T14:31:40Z

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

+If you're not using `<sp-theme>`, the styles package provides convenience bundles for Spectrum Legacy that combine everything you need in a single import. Each `all-*` file combines core global styles, typography, a color option, and a scale specification. Express and Spectrum 2 do not have equivalent combined packages; use manual theme composition instead (see below).
+
+> **Note:** The `darkest` and `lightest` colors are deprecated and will be removed in a future release. Use `dark` or `light` instead.


Suggested change

If you're not using `<sp-theme>`, the styles package provides convenience bundles for Spectrum Legacy that combine everything you need in a single import. Each `all-*` file combines core global styles, typography, a color option, and a scale specification. Express and Spectrum 2 do not have equivalent combined packages; use manual theme composition instead (see below).

> **Note:** The `darkest` and `lightest` colors are deprecated and will be removed in a future release. Use `dark` or `light` instead.

If you're not using `<sp-theme>`, the styles package provides convenient bundles for Spectrum that combine everything you need in a single import. Each `all-*` file combines core global styles, typography, a color option, and a scale specification. Express and Spectrum 2 do not have equivalent combined packages; use manual theme composition instead (see below).

> **Note:** The `darkest` and `lightest` colors are deprecated and will be removed in a future release. Use `dark` or `light` instead.

Rajdeepc · 2025-11-06T14:31:53Z

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

+
+> **Note:** The `darkest` and `lightest` colors are deprecated and will be removed in a future release. Use `dark` or `light` instead.
+
+```ts


Suggested change

```ts

```js

Rajdeepc · 2025-11-06T14:33:44Z

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

-```
-@import '@spectrum-web-components/styles/all-large-lightest.css';
-```
+## Individual theme and scale files


Suggested change

## Individual theme and scale files

#### Individual theme and scale files

Rajdeepc · 2025-11-06T14:34:21Z

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

+</sp-table>

-### Lightest
+## Typography


Suggested change

## Typography

### Typography

Rajdeepc · 2025-11-06T14:34:28Z

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


-```
-@import '@spectrum-web-components/styles/theme-lightest.css';
+```ts


Suggested change

```ts

```js

Rajdeepc · 2025-11-06T14:34:41Z

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

+This file provides the complete [Spectrum Typography system](https://opensource.adobe.com/spectrum-css/?path=/docs/components-typography--docs). The typography system is shared across all design systems (Spectrum Legacy, Express, and Spectrum 2).

-## Scale
+**What's included:**


Suggested change

**What's included:**

**What's included**

Rajdeepc · 2025-11-06T14:35:09Z

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

-## Typography
+Import individual exports when you only need specific typography components to reduce bundle size.
+
+## Design tokens


Suggested change

## Design tokens

### Design tokens

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.

rise-erpelding · 2025-11-11T22:19:14Z

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

There were lots of lint warnings about keys being in the wrong order, so I've reordered things, happy to roll that back if that's not what we want!

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

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

github-actions · 2025-11-12T18:34:59Z

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

-    },
-    "scripts": {
-        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+        "./tokens/*": "./tokens/*",


⚠️ [eslint] <jsonc/sort-keys> _{reported by reviewdog 🐶}
Expected object keys to be in ascending order. './tokens/*' should be before './tokens/spectrum/custom-vars.css'.

reviewdog suggestion error
GitHub comment range and suggestion line range must be same. L87-L87 v.s. L80-L87

I thought this recommendation might set off lint warnings... reverting it.

This reverts commit 6a63a69.

rise-erpelding · 2025-11-12T18:41:36Z

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

+#### CSS imports
+
+For stylesheet use, the recommended approach is to import the complete typography system, with tokens. This ensures that all required files are included.
+
+```css
+@import '@spectrum-web-components/styles/tokens-v2/dark-vars.css'; /* import color tokens */
+@import '@spectrum-web-components/styles/tokens-v2/large-vars.css'; /* import scale tokens */
+@import '@spectrum-web-components/styles/tokens-v2/global-vars.css'; /* import global tokens */
+@import '@spectrum-web-components/styles/typography.css';
 ```


I did briefly have an example with sp-tabs showing that you could import the full typography system or just import individual files. However, there are a lot you'd need (spectrum-base, spectrum-lang, spectrum-typography, spectrum-heading) so I don't think I even want to make that recommendation for usage like I did for the js imports, and I've removed it.

I think that makes sense. 👍

i agree with this direction, just because someone can, doesnt mean they should. we should only ever document supported patterns. reduce the number of ways something can be done makes it easier to maintain in the long run!

marissahuysentruyt

Thanks for making those changes so quickly- looks great.

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. Documentation Issues or PRs involving changes to documentation or documentation website 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 added 5 commits November 11, 2025 15:50

docs: update styles docs

9fd4fd0

docs: improve typography section, syntax

5109f17

docs: include tokens in typography examples

c985a2a

docs: move tokens above typography

efab5f8

docs: typography updates

4ce3591

rise-erpelding force-pushed the rise-erpelding/swc-432-styles-docs branch from 305737d to e7a1d35 Compare November 11, 2025 21:51

rise-erpelding added 2 commits November 11, 2025 16:02

docs: update tokens docs

94c9fd6

chore: add deprecation notice

5d2b4e8

rise-erpelding force-pushed the rise-erpelding/swc-432-styles-docs branch from e7a1d35 to 5d2b4e8 Compare November 11, 2025 22:02

chore: make the linter happy

4d0d3c2

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

rise-erpelding commented Nov 11, 2025

View reviewed changes

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

marissahuysentruyt requested changes Nov 12, 2025

View reviewed changes

rise-erpelding added 4 commits November 12, 2025 11:31

docs: pr fixes

49a8725

- 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

9922293

docs: update typography guidance

fc1ce13

chore: correct package exports order for token wildcards

6a63a69

github-actions bot reviewed Nov 12, 2025

View reviewed changes

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

caaaca3

This reverts commit 6a63a69.

rise-erpelding commented Nov 12, 2025

View reviewed changes

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

marissahuysentruyt approved these changes Nov 12, 2025

View reviewed changes

	## Combined theme packages (Spectrum Legacy)
	## Combined theme packages (Spectrum)

		If you're not using `<sp-theme>`, the styles package provides convenience bundles for Spectrum Legacy that combine everything you need in a single import. Each `all-*` file combines core global styles, typography, a color option, and a scale specification. Express and Spectrum 2 do not have equivalent combined packages; use manual theme composition instead (see below).

		> Note: The `darkest` and `lightest` colors are deprecated and will be removed in a future release. Use `dark` or `light` instead.


		> Note: The `darkest` and `lightest` colors are deprecated and will be removed in a future release. Use `dark` or `light` instead.

		```ts

	## Individual theme and scale files
	#### Individual theme and scale files

docs: update styles docs #5855

Are you sure you want to change the base?

docs: update styles docs #5855

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rise-erpelding commented Nov 7, 2025

Uh oh!

Choose a reason for hiding this comment

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!

github-actions bot Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

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