Skip to content

Update selectable disabled styling in Figma to match code #6101

@pseys

Description

@pseys

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

figmaRelated to Figma

Type

Projects

Status

Green

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions