-
Notifications
You must be signed in to change notification settings - Fork 118
Description
Related to #6096
Problem
Currently when setting a selectable component to appear disabled all attributes (background, border, foreground) need a specific 'disabled' variant. This is unnecessary as each property is 40% opacity of the default value and can be handled in a more efficient way
Solution
In code, the disabled states of selectable components are being set to .4 opacity and the default tokens used for each property rather than using --disabled tokens. All disabled tokens used in selectable components are being deprecated along with any palette or foundation tokens that are only referenced by these tokens.
Task
Design needs to ensure the Figma Component and Pattern library reflects this change. The Theme library also needs to be updated to reflect the changes.
Salt DS Components and Patterns library
- Checkbox - set disabled variant properties to 'default' values, set variants 'appearance' opacity to 40%
- Checkbox - set selectedDisabled variant properties to 'selected' values, set variants 'appearance' opacity to 40%
- Radio Button - set disabled variant properties to 'default' values, set variants 'appearance' opacity to 40%
- Radio Button - set selectedDisabled variant properties to 'selected' values, set variants 'appearance' opacity to
- Slider - set disabled variant properties to 'default' values, set variants 'appearance' opacity to 40%
- Switch - set disabled variant properties to 'default' values, set variants 'appearance' opacity to 40%
- Switch - set selectedDisabled variant properties to 'selected' values, set variants 'appearance' opacity to 40%
Salt DS Theme library
Remove the following variables:
- accent-borderColor-disabled
- selectable-borderColor-disabled
- selectable-foreground-disabled
- sentiment-neutral-track-disabled
- From Legacy palette - interact-foreground-disabled
- From Next palette - neutral-strong-disabled
- From JPM Brand colors - color-gray-400-40a
The Theme library will need to be amended first followed by the color library.
Also:
- Update variable documentation in theme library to match
- Update token usage spreadsheet to match
- If applicable, update guides for any impacted Characteristics (Accent, Selectable, Sentiment)
Metadata
Metadata
Assignees
Labels
Type
Projects
Status