adobe / adobe/spectrum-design-data

New static transparency tokens

Open
#1,345 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Rust
Stars
153
Forks
35
Avg merge
7h 54m
Merged PRs (30d)
111

Description

### Token changes

| Change type | Token name | New name / value / replacement | Modes / themes |
| --- | --- | --- | --- |
| Create | transparent-static-white-0 | #FFFFFF, 0% | Light, Dark, Wireframe |
| Create | transparent-static-white-50 | #FFFFFF, 2% | Light, Dark, Wireframe |
| Create | transparent-static-white-75 | #FFFFFF, 3% | Light, Dark, Wireframe |
| Create | transparent-static-white-100 | #FFFFFF, 4% | Light, Dark, Wireframe |
| Create | transparent-static-white-125 | #FFFFFF, 6% | Light, Dark, Wireframe |
| Create | transparent-static-white-150 | #FFFFFF, 8% | Light, Dark, Wireframe |
| Create | transparent-static-white-200 | #FFFFFF, 12% | Light, Dark, Wireframe |
| Create | transparent-static-white-300 | #FFFFFF, 16% | Light, Dark, Wireframe |
| Create | transparent-static-white-350 | #FFFFFF, 20% | Light, Dark, Wireframe |
| Create | transparent-static-white-400 | #FFFFFF, 24% | Light, Dark, Wireframe |
| Create | transparent-static-white-500 | #FFFFFF, 32% | Light, Dark, Wireframe |
| Create | transparent-static-white-600 | #FFFFFF, 40% | Light, Dark, Wireframe |
| Create | transparent-static-white-700 | #FFFFFF, 48% | Light, Dark, Wireframe |
| Create | transparent-static-white-750 | #FFFFFF, 56% | Light, Dark, Wireframe |
| Create | transparent-static-white-800 | #FFFFFF, 64% | Light, Dark, Wireframe |
| Create | transparent-static-white-900 | #FFFFFF, 80% | Light, Dark, Wireframe |
| Create | transparent-static-white-950 | #FFFFFF, 96% | Light, Dark, Wireframe |
| Create | transparent-static-white-1000 | #FFFFFF, 100% | Light, Dark, Wireframe |
| Create | transparent-static-black-0 | #000000, 0% | Light, Dark, Wireframe |
| Create | transparent-static-black-50 | #000000, 2% | Light, Dark, Wireframe |
| Create | transparent-static-black-75 | #000000, 3% | Light, Dark, Wireframe |
| Create | transparent-static-black-100 | #000000, 4% | Light, Dark, Wireframe |
| Create | transparent-static-black-125 | #000000, 6% | Light, Dark, Wireframe |
| Create | transparent-static-black-150 | #000000, 8% | Light, Dark, Wireframe |
| Create | transparent-static-black-200 | #000000, 12% | Light, Dark, Wireframe |
| Create | transparent-static-black-300 | #000000, 16% | Light, Dark, Wireframe |
| Create | transparent-static-black-350 | #000000, 20% | Light, Dark, Wireframe |
| Create | transparent-static-black-400 | #000000, 24% | Light, Dark, Wireframe |
| Create | transparent-static-black-500 | #000000, 32% | Light, Dark, Wireframe |
| Create | transparent-static-black-600 | #000000, 40% | Light, Dark, Wireframe |
| Create | transparent-static-black-700 | #000000, 48% | Light, Dark, Wireframe |
| Create | transparent-static-black-750 | #000000, 56% | Light, Dark, Wireframe |
| Create | transparent-static-black-800 | #000000, 64% | Light, Dark, Wireframe |
| Create | transparent-static-black-900 | #000000, 80% | Light, Dark, Wireframe |
| Create | transparent-static-black-950 | #000000, 96% | Light, Dark, Wireframe |
| Create | transparent-static-black-1000 | #000000, 100% | Light, Dark, Wireframe |

### Platform target

- [x] S2 Web
- [ ] iOS
- [ ] Android
- [ ] All platforms

### Motivation and context

Introduce transparent-static-white-* and transparent-static-black-* tokens to provide explicit transparent color values based on the shared opacity scale. These tokens provide a predictable set of transparent white and black values for use across themes while aligning with the new opacity token taxonomy.

[Tokens for AI Brand_Opacity-Transparency_Final.xlsx](https://github.com/user-attachments/files/31217909/Tokens.for.AI.Brand_Opacity-Transparency_Final.xlsx)

https://github.com/adobe/spectrum-web-components/pull/6634

### Migration guidance — Deprecate / Rename

_No response_

### Known consuming components

None

### Links or screenshots from the S2 Token specs

_No response_

### Deadline / linked issue or epic

Needed by Aug 20 (AI Branding work)

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the attached opacity workbook and the linked Spectrum Web PR #6634, then locate the repository's token data structure; no specific file or test is named. Done means all listed static white and black tokens exist with the specified values and are available for the Light, Dark, and Wireframe modes on S2 Web.

Written by the indexing model from the issue text.

Assessment

Domain
design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
64/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.