Container Tokens

Why?

Group a set of layers together to ensure consistent and safe usage.

The container token brings together everything that we've seen so far into just three tokens that can control almost every colour aspect of your components.

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

Positive

Negative

container.scss

@use "layer";

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

layer.scss

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

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

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

sentiment.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"
    );
  }
}

behavioural.scss

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

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

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

widget.html

<div class="container-sentiment-control sentiment-positive">Positive</div>
<div class="container-sentiment-control sentiment-negative">Negative</div>

And there we go - only three variables, only one of which is available any one scope.

Simply apply the Container/Background variable to your component background, and you'll be able to switch between sentiments and interaction states.

This is only the start though - there is yet more information we can include in this.