Skip to content

feat(tokens): add opacity + transparency tokens, deprecate legacy transparency tokens - #1348

Open
GarthDB wants to merge 1 commit into
mainfrom
feat/opacity-transparency-tokens
Open

feat(tokens): add opacity + transparency tokens, deprecate legacy transparency tokens#1348
GarthDB wants to merge 1 commit into
mainfrom
feat/opacity-transparency-tokens

Conversation

@GarthDB

@GarthDB GarthDB commented Aug 19, 2026

Copy link
Copy Markdown
Member

Description

Adds the opacity + transparency token changes Miruna requested for the AI Branding work:

  • An 18-step opacity-* foundation scale (color-aliases.tokens.json / color-aliases.json).
  • 36 transparent-static-{white,black}-* colors built on that scale (color-palette.tokens.json / color-palette.json).
  • 36 mode-aware transparent-neutral[-inverse]-* colors, light/dark/wireframe (same files).
  • Deprecates 28 legacy tokens (transparent-white-*, transparent-black-*, white, black), each pointing (renamed) at its transparent-static-* replacement.
  • Registers the 4 new colorFamily values (transparent-static-white, transparent-static-black, transparent-neutral, transparent-neutral-inverse) in packages/design-data/registry/color-families.json, regenerates sdk/core/src/registry_data.rs and packages/tokens/snapshots/validation-snapshot.json accordingly.

Authored by hand-editing the cascade files (packages/design-data/tokens/*.tokens.json, canonical per packages/design-data/README.md) and regenerating the legacy packages/tokens/src/ mirror via moon run design-data:legacy-output.

Related Issue

Closes #1344, #1345, #1346, #1347.

Motivation and Context

Introduces a reusable opacity scale as the foundation for a consistent, predictable
transparent-color taxonomy, and gives designers mode-aware neutral transparency tokens so
they don't have to manually pick white vs. black per theme. Deprecating the legacy tokens
establishes a clear migration path and reduces duplicated/inconsistent transparent values.

Flagged for review: a handful of the deprecation mappings are intentional value shifts to
align with the new opacity scale (e.g. transparent-white-600transparent-static-white-700,
transparent-white-800transparent-static-white-900, transparent-black-700
transparent-static-black-800) — these should get a contrast check before/at migration.
Also, white and black are foundational and widely aliased elsewhere in the corpus; per
the issue, no consumer audit has been done yet — deprecation is non-destructive (they
still resolve via renamed), but please weigh in before this merges.

How Has This Been Tested?

  • moon run design-data:validate — clean (new colorFamily values registered; no new warnings).
  • moon run design-data:legacy-output + moon run design-data:roundtrip-verify — cascade/legacy in sync.
  • moon run tokens:test — 27/27 passing (schema validation, uuid uniqueness, checkRenamed target-existence, package contents).
  • moon run tokens:verifyDesignDataSnapshot — snapshot regenerated and verified.
  • moon run sdk:test — 1290/1290 Rust tests passing.
  • Spot-checked generated legacy JSON (transparent-static-white-0, transparent-neutral-100, deprecated white/transparent-white-600) for correct values and renamed targets.

Screenshots (if appropriate):

N/A — token data change.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

…nsparency tokens

Adds the opacity-* foundation scale, transparent-static-* and
transparent-neutral[-inverse]-* color families, and deprecates the legacy
transparent-white-*/transparent-black-*/white/black tokens they replace, for
the AI Branding work.

Closes #1344, #1345, #1346, #1347.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Aug 19, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 4447e20

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
Name Type
@adobe/spectrum-tokens Minor
@adobe/token-names Patch
s2-tokens-viewer Patch
markdown-generator Patch
@adobe/spectrum-design-data-mcp Patch
token-mapping-analyzer Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions

github-actions Bot commented Aug 19, 2026

Copy link
Copy Markdown
Contributor

Run report for 4447e209

Total time: 1m 9s | Comparison time: 1m 52s | Estimated savings: 42.9s (38.2% faster)

Action Time Status Info
⬛️ SetupProto(0.57.4) 0ms Skipped
🟩 SyncWorkspace 6.9ms Passed
🟩 SyncProject(sdk) 0.3ms Passed
🟩 SyncProject(tokens) 0.6ms Passed
⬛️ SetupToolchain(node:20.17.0) 9.4ms Skipped
⬛️ SetupToolchain(pnpm:10.17.1) 1.6ms Skipped
⬛️ SetupToolchain(javascript) 0ms Skipped
⬛️ SetupEnvironment(javascript, sdk) 0.3ms Skipped
🟩 SetupEnvironment(javascript) 0.6ms Passed
⬛️ InstallDependencies(javascript) 0ms Skipped
🟩 RunTask(tokens:buildManifest) 139.8ms Passed
⬛️ SetupToolchain(rust:1.88.0) 312.5ms Skipped
🟩 InstallDependencies(javascript, sdk) 3.3s Passed
🟩 RunTask(sdk:codegen-check) 72.3ms Passed
🟩 SetupEnvironment(rust, sdk) 3.9s Passed
⬛️ InstallDependencies(rust, sdk) 2.3ms Skipped
🟩 RunTask(tokens:buildTokens) 1m 1s Passed
🟩 RunTask(tokens:build) 39.2ms Passed
🟩 RunTask(sdk:build) 1m 1s Passed
🟩 RunTask(tokens:verifyLegacyRoundtrip) 449ms Passed
And 3 more...
Expanded report
Action Time Status Info
🟩 RunTask(tokens:verifyLegacyOutput) 535ms Passed
🟩 RunTask(tokens:verifyDesignDataSnapshot) 606.2ms Passed
🟩 RunTask(tokens:test) 3s Passed
Changed files
.changeset/opacity-transparency-tokens.md
packages/design-data/registry/color-families.json
packages/design-data/tokens/color-aliases.tokens.json
packages/design-data/tokens/color-palette.tokens.json
packages/tokens/src/color-aliases.json
packages/tokens/src/color-palette.json
sdk/core/src/registry_data.rs

@github-actions

github-actions Bot commented Aug 19, 2026

Copy link
Copy Markdown
Contributor

🎨 Token Changes Report

Tokens Changed (118)

Original Branch: main

Newly Deprecated (28)
  • black: Replaced by transparent-static-black-1000 (see spectrum-design-data#1346).
  • transparent-black-100: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-black-1000: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-black-200: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-black-25: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-black-300: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-black-400: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-black-50: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-black-500: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-black-600: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-black-700: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-black-75: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-black-800: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-black-900: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-white-100: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-white-1000: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-white-200: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-white-25: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-white-300: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-white-400: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-white-50: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-white-500: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-white-600: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-white-700: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-white-75: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-white-800: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • transparent-white-900: Replaced by the transparent-static color family (see spectrum-design-data#1346). Migrate usages to the replacement token; some replacements shift value slightly to align with the new opacity scale and should be re-checked for contrast.
  • white: Replaced by transparent-static-white-1000 (see spectrum-design-data#1346).
Added (90)
  • transparent-neutral-0
  • transparent-neutral-100
  • transparent-neutral-1000
  • transparent-neutral-125
  • transparent-neutral-150
  • transparent-neutral-200
  • transparent-neutral-300
  • transparent-neutral-350
  • transparent-neutral-400
  • transparent-neutral-50
  • transparent-neutral-500
  • transparent-neutral-600
  • transparent-neutral-700
  • transparent-neutral-75
  • transparent-neutral-750
  • transparent-neutral-800
  • transparent-neutral-900
  • transparent-neutral-950
  • transparent-neutral-inverse-0
  • transparent-neutral-inverse-100
  • transparent-neutral-inverse-1000
  • transparent-neutral-inverse-125
  • transparent-neutral-inverse-150
  • transparent-neutral-inverse-200
  • transparent-neutral-inverse-300
  • transparent-neutral-inverse-350
  • transparent-neutral-inverse-400
  • transparent-neutral-inverse-50
  • transparent-neutral-inverse-500
  • transparent-neutral-inverse-600
  • transparent-neutral-inverse-700
  • transparent-neutral-inverse-75
  • transparent-neutral-inverse-750
  • transparent-neutral-inverse-800
  • transparent-neutral-inverse-900
  • transparent-neutral-inverse-950
  • transparent-static-black-0
  • transparent-static-black-100
  • transparent-static-black-1000
  • transparent-static-black-125
  • transparent-static-black-150
  • transparent-static-black-200
  • transparent-static-black-300
  • transparent-static-black-350
  • transparent-static-black-400
  • transparent-static-black-50
  • transparent-static-black-500
  • transparent-static-black-600
  • transparent-static-black-700
  • transparent-static-black-75
  • transparent-static-black-750
  • transparent-static-black-800
  • transparent-static-black-900
  • transparent-static-black-950
  • transparent-static-white-0
  • transparent-static-white-100
  • transparent-static-white-1000
  • transparent-static-white-125
  • transparent-static-white-150
  • transparent-static-white-200
  • transparent-static-white-300
  • transparent-static-white-350
  • transparent-static-white-400
  • transparent-static-white-50
  • transparent-static-white-500
  • transparent-static-white-600
  • transparent-static-white-700
  • transparent-static-white-75
  • transparent-static-white-750
  • transparent-static-white-800
  • transparent-static-white-900
  • transparent-static-white-950
  • opacity-0
  • opacity-100
  • opacity-1000
  • opacity-125
  • opacity-150
  • opacity-200
  • opacity-300
  • opacity-350
  • opacity-400
  • opacity-50
  • opacity-500
  • opacity-600
  • opacity-700
  • opacity-75
  • opacity-750
  • opacity-800
  • opacity-900
  • opacity-950

This comment was automatically generated by the token diff tool. 🤖

@github-actions

Copy link
Copy Markdown
Contributor

🧩 Component Schema Changes Report

No component schema changes detected.

This comment was automatically generated by the component schema diff tool. 🤖

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Opacity tokens

1 participant