Design Tokens - Wizard #2026
Design Tokens - Wizard #2026
Conversation
| error: {color: Colors.red30, icon: exclamationSmall, enabled: true, accessibilityInfo: 'Validation Error'}, | ||
| skipped: {color: Colors.red30, enabled: true, accessibilityInfo: 'Not completed'}, | ||
| enabled: {color: Colors.$textNeutralHeavy, circleColor: Colors.$outlineDisabled, enabled: true}, | ||
| disabled: {color: Colors.$textDisabled, circleColor: Colors.outlineDefault}, |
There was a problem hiding this comment.
| disabled: {color: Colors.$textDisabled, circleColor: Colors.outlineDefault}, | |
| disabled: {color: Colors.$textDisabled, circleColor: Colors.$outlineDisabled}, |
There was a problem hiding this comment.
Was it changed to grey60 so you're using the $outlineDefault token? anyways your missing the '$'
There was a problem hiding this comment.
There is a new design page for tokenized components: Wizard
It's from there (fixed)
There was a problem hiding this comment.
I see there both disabled and enabled borderline have the same token...
There was a problem hiding this comment.
Look at the bottom part, all the types are there.
You might have looked at enabled and completed.
| disabled: {color: Colors.grey50, circleColor: Colors.grey60}, | ||
| error: {color: Colors.red30, icon: exclamationSmall, enabled: true, accessibilityInfo: 'Validation Error'}, | ||
| skipped: {color: Colors.red30, enabled: true, accessibilityInfo: 'Not completed'}, | ||
| enabled: {color: Colors.$textNeutralHeavy, circleColor: Colors.$outlineDisabled, enabled: true}, |
There was a problem hiding this comment.
| enabled: {color: Colors.$textNeutralHeavy, circleColor: Colors.$outlineDisabled, enabled: true}, | |
| enabled: {color: Colors.$textNeutralHeavy, circleColor: Colors.$outlineDefault, enabled: true}, |
There was a problem hiding this comment.
Was it changed to grey50 so you're using the $outlineDisabled token?
There was a problem hiding this comment.
It's set to $outlineNeutralMedium which is $outlineDisabled
| color: Colors.grey30, | ||
| circleColor: Colors.grey60, | ||
| color: Colors.$iconNeutral, | ||
| circleColor: Colors.$outlineDisabled, |
There was a problem hiding this comment.
| circleColor: Colors.$outlineDisabled, | |
| circleColor: Colors.$outlineDefault, |
There was a problem hiding this comment.
Was it changed to grey50 so you're using the $outlineDisabled token?
There was a problem hiding this comment.
It's set to $outlineNeutralMedium which is $outlineDisabled
| @@ -118,7 +118,7 @@ export default asBaseComponent<WizardStepProps>(WizardStep); | |||
| const styles = StyleSheet.create({ | |||
| connector: { | |||
| borderWidth: 0.5, | |||
| borderColor: Colors.grey60 | |||
| borderColor: Colors.$outlineDisabled | |||
There was a problem hiding this comment.
Was it changed to grey50 so you're using the $outlineDisabled token?
There was a problem hiding this comment.
See other comments :)
Description
Design Tokens - Wizard
WOAUILIB-2724
Changelog
Design Tokens - Wizard