Layer Tokens

Why?

Strongly associate a token with a physical attribute.

So far our tokens have been purely logical, with no strong association to a physical layer of the rendered result.

Yes, we have tokens called Semantics/Sentiment/Positive/Background, which offers a strong hint as to how it should be used, but name alone isn't enough.

We could also have tokens called Semantics/Sentiment/Positive/Strong, or Semantics/Sentiment/Positive/Stroke, and who knows where those should go.

The layer token is a meta-layer that adds no additional functionality. It exists solely to provide a stronger link between logical semantic tokens and their physical destination.

Layer Tokens

Name

Layer

Foreground

Default

Semantics/Foreground/Default

Sentiment

Semantics/Sentiment/Foreground

Layer

Background

Default

Semantics/Container/Default

Sentiment

Semantics/Sentiment/Background

Layer

Border

Default

Semantics/Stroke/Default

Sentiment

Semantics/Sentiment/Border

Positive

Negative

scss

@use "layer";

.widget {
  @include layer.sentiment-background;
  @include layer.sentiment-foreground;
  @include layer.sentiment-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="widget sentiment-positive">Positive</div>
<div class="widget sentiment-negative">Negative</div>

Note the reference to the Sentiment Tokens defined earlier; using this layer token pulls through all the power of being able to change sentiment and interaction state.

One additional usage for this layer within Figma is to add scoping, prevent usage of these tokens outside of their intended target.

This may otherwise seem a superfluous layer, but it's expressive power should become apparent as we look into container tokens.

Layer Tokens ​

Layer Tokens