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

Foreground

Semantics/Disabled/Foreground

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:

Active

Disabled

scss

@use "layer";
@use "disabled";

.container-sentiment-control {
  @include layer.sentiment-background;
  @include layer.sentiment-foreground;
  @include layer.sentiment-border;

  @include disabled.foreground;
  @include disabled.background;
  @include disabled.border;
}

scss

@mixin foreground {
  &:disabled,
  &[aria-disabled="true"] {
    background-color: var(--disabled-foreground);
  }
}

@mixin background {
  &:disabled,
  &[aria-disabled="true"] {
    background-color: var(--disabled-background);
  }
}

@mixin border {
  &:disabled,
  &[aria-disabled="true"] {
    background-color: var(--disabled-border);
  }
}

scss

@mixin sentiment-background {
  background-color: var(--sentiment-background);
}

@mixin sentiment-foreground {
  color: var(--sentiment-foreground);
}

@mixin sentiment-border {
  border-color: var(--sentiment-border);
}

scss

@use "behavioural" as *;

@each $sentiment in (positive, negative) {
  .sentiment-#{$sentiment} {
    @include behavioural(
      --sentiment-background,
      "--sentiment-#{$sentiment}-background"
    );
    @include behavioural(
      --sentiment-foreground,
      "--sentiment-#{$sentiment}-foreground"
    );
    @include behavioural(
      --sentiment-border,
      "--sentiment-#{$sentiment}-border"
    );
  }
}

scss

@mixin behavioural($prop, $color) {
  #{$prop}: var(#{$color}-default);

  &:hover {
    #{$prop}: var(#{$color}-hover);
  }

  &:active {
    #{$prop}: var(#{$color}-active);
  }
}

html

<div class="container-sentiment-control sentiment-positive">Active</div>
<div
  class="container-sentiment-control sentiment-positive"
  aria-disabled="true"
>
  Disabled
</div>

Disabled Tokens ​

Disabled Tokens