feat(Progress): consumed Penta tokens#6150
Conversation
|
Preview: https://patternfly-pr-6150.surge.sh A11y report: https://patternfly-pr-6150-a11y.surge.sh |
| --#{$progress}--m-success__status-icon--Color: var(--pf-t--global--color--status--success--default); | ||
| --#{$progress}--m-warning__status-icon--Color: var(--pf-t--global--color--status--warning--default); | ||
| --#{$progress}--m-danger__status-icon--Color: var(--pf-t--global--color--status--danger--default); |
There was a problem hiding this comment.
I think these should use the icon color tokens. In the designs, looks like the success icon just uses the global success color as you have here, but the warning/danger icons use the warning/danger icon color tokens - I'm assuming the success color in figma is a bug and should use the icon success color, too.
| --#{$progress}--m-inside__measure--FontSize: var(--pf-t--global--font--size--sm); | ||
| --#{$progress}--m-outside__measure--FontSize: var(--pf-t--global--font--size--sm); | ||
| --#{$progress}--m-sm__bar--Height: var(--pf-t--global--spacer--sm); | ||
| --#{$progress}--m-sm__measure--FontSize: var(--pf-t--global--font--size--xs); |
There was a problem hiding this comment.
in figma, looks like we want to use the font--size--body--sm token
| --#{$progress}__bar--before--BackgroundColor: var(--#{$progress}--m-success__bar--BackgroundColor); | ||
| --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-success__bar--BackgroundColor); | ||
| --#{$progress}__status-icon--Color: var(--#{$progress}--m-success__status-icon--Color); | ||
| --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-success--m-inside__measure--Color); |
There was a problem hiding this comment.
Looks like this should be added back, and the var pointing to the text--color--on-success token. Currently the color on the success indicator works, but it's using the on-brand token.
| &.pf-m-danger { | ||
| --#{$progress}__bar--before--BackgroundColor: var(--#{$progress}--m-danger__bar--BackgroundColor); | ||
| --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-danger__bar--BackgroundColor); |
There was a problem hiding this comment.
Just a nit, but since these are changes to the indicator color, the value used here should probably be var(--#{$progress}--m-danger__indicator--BackgroundColor)
|
🎉 This PR is included in version 6.0.0-alpha.48 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Closes #5737