[Wizard] Color specs update #308
Description
React
disabledBackgroundColor: globalTokens.lightGrey
disabledFontColor: globalTokens.darkGrey
stepContainerFontColor: globalTokens.black
stepContainerSelectedFontColor: globalTokens.white
stepContainerSelectedBackgroundColor: globalTokens.purple
stepContainerBackgroundColor: globalTokens.white
labelFontColor: globalTokens.darkGrey
labelActiveFontColor: globalTokens.black
descriptionFontColor: globalTokens.darkGrey
descriptionActiveFontColor: globalTokens.black
circleBorderColor: globalTokens.black
circleSelectedBorderColor: globalTokens.purple
circleDisabledBorderColor: globalTokens.lightGrey
separatorColor: globalTokens.lightGrey
focusColor: globalTokens.blue
Angular
"--wizard-selectedBackgroundColor": globalTokens.purple,
"--wizard-selectedFont": globalTokens.white,
"--wizard-borderColor": globalTokens.black,
"--wizard-fontColor": globalTokens.inherit,
"--wizard-lineColor": globalTokens.lightGrey,
"--wizard-disabledBackground": globalTokens.lightGrey,
"--wizard-disabledFont": globalTokens.darkGrey,
"--wizard-focusColor": globalTokens.blue,
Wizard color specs table
| Component token | Element | Core token | Value |
|---|---|---|---|
stepperFontColor |
Stepper text | color-black |
#000000 |
selectedStepperFontColor |
Stepper:selected text | color-white |
#ffffff |
unvisitedStepperFontColor |
Stepper:unvisited text | color-grey-700 |
#666666 |
disabledStepperFontColor |
Stepper:disabled text | color-grey-500 |
#999999 |
stepperBackgroundColor |
Stepper background | color-white |
#ffffff |
selectedStepperBackgroundColor |
Stepper:selected background | color-purple-700 |
#5f249f |
unvisitedStepperBackgroundColor |
Stepper:unvisited background | color-grey-700 |
#666666 |
disabledStepperBackgroundColor |
Stepper:disabled background | color-grey-100 |
#f2f2f2 |
stepperBorderColor |
Stepper border | coor-black |
#000000 |
selectedStepperBorderColor |
Stepper:selected border | color-purple-700 |
#5f249f |
unvisitedStepperBorderColor |
Stepper:unvisited border | color-grey-700 |
#666666 |
disabledStepperBorderColor |
Stepper:disabled border | color-grey-100 |
#f2f2f2 |
labelFontColor |
Label | color-black |
#000000 |
activeLabelFontColor |
Label:active | color-black |
#000000 |
disabledLabelFontColor |
Label:disabled | color-grey-500 |
#999999 |
helperTextFontColor |
Helper text | color-black |
#000000 |
helperTextActiveFontColor |
Helper text: active | color-black |
#000000 |
separatorColor |
Separator | color-grey-700 |
#666666 |
focusColor |
Focus outline | color-blue-600 |
#0095ff |