Sentiment Tokens

Why?

Ensure swapability of different sentiments on a component.

Sentiment tokens are used to add visual clarity to feedback, or to actions.

These will include items such as 'Positive' (for actions) or 'Success' (for feedback), 'Danger' or 'Error' (likewise) and so on.

Sentiment tokens are commonly found in a namespaced semantic collection as follows:

Semantic Tokens

Name

Light

Dark

Semantics

Sentiment

Positive

Background

Default

Primitives/Green/300

Primitives/Green/1100

Hover

Primitives/Green/400

Primitives/Green/1000

Active

Primitives/Green/500

Primitives/Green/900

Semantics

Sentiment

Negative

Background

Default

Primitives/Red/300

Primitives/Red/1100

Hover

Primitives/Red/400

Primitives/Red/1000

Active

Primitives/Red/500

Primitives/Red/900

Note the repetition. The semantic tokens are structured in such a way that it looks like one ought to be able to swap them out, but for a fully featured button there are nine separate variables ([foreground, background, border] × [default, hover, active]) that are needed to be set correctly.

Positive

Negative

widget.scss

@use "behavioural" as *;

.widget-positive {
  @include behavioural(background-color, --sentiment-positive-background);
  @include behavioural(color, --sentiment-positive-foreground);
  @include behavioural(border-color, --sentiment-positive-border);
}

.widget-negative {
  @include behavioural(background-color, --sentiment-negative-background);
  @include behavioural(color, --sentiment-negative-foreground);
  @include behavioural(border-color, --sentiment-negative-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="widget-positive">Positive</div>
<div class="widget-negative">Negative</div>

The sentiment token, building optionally on top of behavioural tokens, fixes this.

Sentiment Tokens

Name

Positive

Negative

Semantics

Sentiment

Background

Semantics/Sentiment/Background/Positive

Semantics/Sentiment/Background/Negative

Foreground

Semantics/Sentiment/Foreground/Positive

Semantics/Sentiment/Foreground/Negative

Border

Semantics/Sentiment/Border/Positive

Semantics/Sentiment/Border/Negative

Positive

Negative

widget.css

.widget {
  background-color: var(--sentiment-background);
  color: var(--sentiment-foreground);
  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="widget sentiment-positive">Positive</div>
<div class="widget sentiment-negative">Negative</div>

This yields a set of classes that can be used to switch the value of --sentiment-<layer>, which any component can use and become sentimental over.

To add new sentiments to all sentimental components, depending your set-up, it can be as simple as adding that sentiment to your semantic dictionary; everything else will just fall out from there.