Skip to content

Conversation

@Jesse-Box
Copy link
Contributor

@Jesse-Box Jesse-Box commented Jan 2, 2026

  • Modified: Scraps token values for vibrant graphics group
  • Modified: Const content to include createBackwardsComaptibleToken for muted

Screenshots

Before Light

CleanShot 2026-01-02 at 15 16 51@2x

Before Dark

CleanShot 2026-01-02 at 15 17 24@2x

After Light

CleanShot 2026-01-02 at 15 17 40@2x

After Dark

CleanShot 2026-01-02 at 15 18 02@2x

@Jesse-Box Jesse-Box requested a review from a team as a code owner January 2, 2026 14:15
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jan 2, 2026
const graphics = {
...tokens.graphics,
muted: tokens.graphics.neutral.moderate,
// Apply compatability Proxy to deprecated tokens

This comment was marked as outdated.

...tokens.graphics,
muted: tokens.graphics.neutral.moderate,
// Apply compatability Proxy to deprecated tokens
muted: createBackwardsCompatibleToken(tokens.graphics.neutral),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Graphics muted token now returns wrong color value

The change from tokens.graphics.neutral.moderate to createBackwardsCompatibleToken(tokens.graphics.neutral) alters the legacy behavior of graphics.muted. Previously, when used as a string, it returned the moderate color. Now the proxy returns vibrant when coerced to string (per createBackwardsCompatibleToken implementation). The deprecation comment also states graphics.muted should map to graphics.neutral.moderate, not vibrant. This will cause existing usages of graphics.muted to render a different color.

Fix in Cursor Fix in Web

@natemoo-re
Copy link
Member

Closing in favor of #105641

@natemoo-re natemoo-re closed this Jan 5, 2026
natemoo-re added a commit that referenced this pull request Jan 5, 2026
Replaces #105598. Updates all variants of the `tokens.graphics` and
`tokens.border.muted`.

See the breadcrumb text and icons examples below.

| Before | After |
|--------|--------|
| <img width="1280" alt="tokens-light-old"
src="https://github.com/user-attachments/assets/1cb4b024-5991-4f8e-90a5-407ee59756ff"
/> | <img width="1280" alt="tokens-light-new"
src="https://github.com/user-attachments/assets/6a3ca496-e121-4da3-9e93-8c76f7e13a16"
/> |
| <img width="1280" alt="tokens-dark-old-1"
src="https://github.com/user-attachments/assets/a8a679f1-cef7-4103-bb04-220bee0e5da2"
/> | <img width="1280" alt="tokens-dark-new"
src="https://github.com/user-attachments/assets/f7e9289f-0c4d-47f5-bdf2-a2431fa05297"
/>
cathteng pushed a commit that referenced this pull request Jan 5, 2026
Replaces #105598. Updates all variants of the `tokens.graphics` and
`tokens.border.muted`.

See the breadcrumb text and icons examples below.

| Before | After |
|--------|--------|
| <img width="1280" alt="tokens-light-old"
src="https://github.com/user-attachments/assets/1cb4b024-5991-4f8e-90a5-407ee59756ff"
/> | <img width="1280" alt="tokens-light-new"
src="https://github.com/user-attachments/assets/6a3ca496-e121-4da3-9e93-8c76f7e13a16"
/> |
| <img width="1280" alt="tokens-dark-old-1"
src="https://github.com/user-attachments/assets/a8a679f1-cef7-4103-bb04-220bee0e5da2"
/> | <img width="1280" alt="tokens-dark-new"
src="https://github.com/user-attachments/assets/f7e9289f-0c4d-47f5-bdf2-a2431fa05297"
/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants