𝜏:torquens

Appearance

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 purely aliasing layer that adds no additional functionality. It exists solely to provide a stronger link between logical semantic tokens and their physical destination, and to provide more semantically meaningful names.

Layer Tokens
Name
Layer
Layer
Foreground
Default
Semantics/Foreground/Default
Sentiment
Semantics/SentimentCard/Foreground
Layer
Background
Default
Semantics/ContainerCard/Default
Sentiment
Semantics/SentimentCard/Background
Layer
Border
Default
Semantics/Stroke/Default
Sentiment
Semantics/SentimentCard/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.

Example ​

json
{
  "layer": {
    "foreground": {
      "sentiment-strong": {
        "enabled": {
          "$value": "{color.sentiment.foreground.$root}"
        },
        "disabled": {
          "$value": "{color.foreground.disabled}"
        }
      },
      "sentiment-tint": {
        "enabled": {
          "$value": "{color.sentiment.base.$root}"
        },
        "disabled": {
          "$value": "{color.foreground.disabled}"
        }
      },
      "panel": {
        "enabled": {
          "$value": "{color.foreground.default}"
        },
        "disabled": {
          "$value": "{color.foreground.disabled}"
        }
      }
    },
    "background": {
      "sentiment-strong": {
        "enabled": {
          "$value": "{color.sentiment.base.$root}"
        },
        "disabled": {
          "$value": "{color.background.disabled}"
        }
      },
      "sentiment-tint": {
        "enabled": {
          "$value": "{color.sentiment.background.$root}"
        },
        "disabled": {
          "$value": "{color.background.disabled}"
        }
      },
      "sentiment-tint-ghost": {
        "enabled": {
          "$value": "{color.sentiment.background.ghost}"
        },
        "disabled": {
          "$value": "{primitives.transparent}"
        }
      },
      "panel": {
        "enabled": {
          "$value": "{color.background.panel}"
        },
        "disabled": {
          "$value": "{color.background.disabled}"
        }
      }
    },
    "border": {
      "sentiment": {
        "enabled": {
          "$value": "{color.sentiment.base.$root}"
        },
        "disabled": {
          "$value": "{color.border.disabled}"
        }
      },
      "panel": {
        "enabled": {
          "$value": "{color.border.default}"
        },
        "disabled": {
          "$value": "{color.border.disabled}"
        }
      }
    },
    "transparent": {
      "enabled": {
        "$value": "{primitives.transparent}"
      },
      "disabled": {
        "$value": "{primitives.transparent}"
      }
    },
    "system": {
      "foreground": {
        "panel": {
          "enabled": {
            "$value": "{system.panel.foreground.$root}"
          },
          "disabled": {
            "$value": "{primitives.system.gray-text}"
          }
        },
        "control": {
          "enabled": {
            "$value": "{system.control.foreground.$root}"
          },
          "disabled": {
            "$value": "{primitives.system.gray-text}"
          }
        }
      },
      "background": {
        "panel": {
          "enabled": {
            "$value": "{system.panel.background.$root}"
          },
          "disabled": {
            "$value": "{primitives.transparent}"
          }
        },
        "control": {
          "enabled": {
            "$value": "{system.control.background.$root}"
          },
          "disabled": {
            "$value": "{primitives.transparent}"
          }
        }
      },
      "border": {
        "panel": {
          "enabled": {
            "$value": "{system.panel.border.$root}"
          },
          "disabled": {
            "$value": "{primitives.system.gray-text}"
          }
        },
        "control": {
          "enabled": {
            "$value": "{system.control.border.$root}"
          },
          "disabled": {
            "$value": "{primitives.system.gray-text}"
          }
        }
      }
    }
  }
}

Figma Output ​

Layers
Name
Layer
Layer
Foreground
Sentiment Strong
Enabled
Color/Sentiment/Foreground
Disabled
Color/Foreground/Disabled
Layer
Foreground
Sentiment Tint
Enabled
Color/Sentiment/Base
Disabled
Color/Foreground/Disabled
Layer
Foreground
Panel
Enabled
Color/Foreground/Default
Disabled
Color/Foreground/Disabled
Layer
Background
Sentiment Strong
Enabled
Color/Sentiment/Base
Disabled
Color/Background/Disabled
Layer
Background
Sentiment Tint
Enabled
Color/Sentiment/Background
Disabled
Color/Background/Disabled
Layer
Background
Sentiment Tint Ghost
Enabled
Color/Sentiment/Background/Ghost
Disabled
Primitives/Transparent
Layer
Background
Panel
Enabled
Color/Background/Panel
Disabled
Color/Background/Disabled
Layer
Border
Sentiment
Enabled
Color/Sentiment/Base
Disabled
Color/Border/Disabled
Layer
Border
Panel
Enabled
Color/Border/Default
Disabled
Color/Border/Disabled
Layer
Transparent
Enabled
Primitives/Transparent
Disabled
Primitives/Transparent
Layer
System
Foreground
Panel
Enabled
System/Panel/Foreground
Disabled
Primitives/System/Gray Text
Layer
System
Foreground
Control
Enabled
System/Control/Foreground
Disabled
Primitives/System/Gray Text
Layer
System
Background
Panel
Enabled
System/Panel/Background
Disabled
Primitives/Transparent
Layer
System
Background
Control
Enabled
System/Control/Background
Disabled
Primitives/Transparent
Layer
System
Border
Panel
Enabled
System/Panel/Border
Disabled
Primitives/System/Gray Text
Layer
System
Border
Control
Enabled
System/Control/Border
Disabled
Primitives/System/Gray Text