chore: Update tokens alpha and revert changes #3692
Conversation
|
@copilot review |
There was a problem hiding this comment.
Pull request overview
This PR updates the @workday/canvas-tokens-web package from version 4.0.0-alpha.8 to 4.0.0-alpha.11 to address breaking changes in the tokens API. The update includes fixing token path references that changed in the new alpha version.
Changes:
- Upgraded
@workday/canvas-tokens-webdependency from4.0.0-alpha.8to4.0.0-alpha.11across all packages - Updated token references from deprecated paths (e.g.,
system.color.brand.fg.primary→system.color.fg.primary) - Fixed token references that changed structure (e.g.,
system.color.border.info→system.color.border.info.default,system.color.focus.inverse→system.color.border.inverse.default) - Updated forward compatibility token mapping for shape tokens
Reviewed changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updated root package dependency to alpha.11 |
| yarn.lock | Updated lockfile with new package version and integrity hash |
| modules/styling/package.json | Updated styling module dependency |
| modules/styling-transform/package.json | Updated styling-transform module dependency |
| modules/react/package.json | Updated react module dependency |
| modules/preview-react/package.json | Updated preview-react module dependency |
| modules/labs-react/package.json | Updated labs-react module dependency |
| modules/docs/package.json | Updated docs module dependency |
| modules/react/loading-dots/stories/examples/CustomColorAndAnimation.tsx | Fixed token path from system.color.brand.fg.primary.default to system.color.fg.primary.default |
| modules/react/information-highlight/lib/InformationHighlight.tsx | Added .default suffix to system.color.border.info references |
| modules/react/icon/stories/stories.visualTesting.tsx | Fixed token paths from system.color.brand.fg.primary to system.color.fg.primary |
| modules/react/icon/stories/Icons.stories.tsx | Fixed token paths and contains debug text "foo" |
| modules/react/common/lib/forwardFitTokens.ts | Changed forward compatibility mapping from system.shape.xs to system.shape.sm |
| modules/react/button/lib/BaseButton.tsx | Fixed token path from system.color.focus.inverse to system.color.border.inverse.default |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| */ | ||
| export const forwardFitTokens = { | ||
| system: { | ||
| shape: { |
There was a problem hiding this comment.
The forward compatibility token mapping for 'xs' now references 'system.shape.sm' instead of 'system.shape.xs'. This appears intentional due to the alpha token changes, but verify that this change is correct. If 'system.shape.xs' no longer exists in alpha.11, consider adding a comment explaining this forward compatibility mapping change.
| shape: { | |
| shape: { | |
| // Note: system.shape.xs was removed in alpha.11; xs now forwards to sm with x1 as fallback. |
| color={system.color.static.green.default} | ||
| colorHover={system.color.static.green.stronger} | ||
| /> | ||
| foo |
| icon={activityStreamIcon} | ||
| accent={system.color.brand.fg.primary.default} | ||
| fill={system.color.brand.fg.primary.default} | ||
| accent={system.color.fg.primary.default} |
There was a problem hiding this comment.
Are we updating this to not be deprecated tokens? Wondering if this should be system.color.brand.fg.primary.default and same for below.
| props: { | ||
| fill: system.color.brand.fg.primary.default, | ||
| fillHover: system.color.brand.fg.primary.strong, | ||
| fill: system.color.fg.primary.default, |
There was a problem hiding this comment.
Same for this file - should this color be mapping to system.color.brand.fg.primary.default?
3 participants
Summary
Update alpha again, this should fix some breaking changes i was seeing
Release Category
Components
Checklist
ready for reviewhas been added to PRFor the Reviewer
Where Should the Reviewer Start?
Areas for Feedback? (optional)
Testing Manually
Screenshots or GIFs (if applicable)
Thank You Gif (optional)