Disabled Tokens

Why?

Allow easy and consistent application of disabled states to components.

Whilst at first glance it might seem that the disabled state of a token belongs with the Behavioural token layer, this is not so. This is because the disabled colour is linked to the physical layer, where Behavioural tokens exist only as uncoupled values.

Container Tokens

Name

Card

Primary Control

Sentiment Control

Container

Active

Background

Layer/Background/Panel

Layer/Background/Primary

Layer/Background/Sentiment

Foreground

Layer/Foreground/Panel

Layer/Foreground/Primary

Layer/Foreground/Sentiment

Border

Layer/Border/Panel

Layer/Border/Primary

Layer/Border/Sentiment

Container

Disabled

Background

Transparent

Semantics/Disabled/Background

Semantics/Disabled/Background

Foreground

Semantics/Disabled/Foreground

Semantics/Disabled/Foreground

Semantics/Disabled/Foreground

Border

Semantics/Disabled/Border

Semantics/Disabled/Border

Semantics/Disabled/Border

Note how the 'Card' container now has a transparent background when disabled, where the others have filled backgrounds.

Our top-level container tokens (the ones actually accessible by consumers) now look like this:

Container State

Name

Active

Disabled

Container

Background

Container/Active/Background

Container/Disabled/Background

Foreground

Container/Active/Foreground

Container/Disabled/Foreground

Border

Container/Active/Border

Container/Disabled/Border