Torquens

Appearance

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.

Again, these are commonly found in a structured 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

Again, 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 x default, hover, active) that are needed to be set correctly.

Positive
Negative
html
<div class="widget-positive">Positive</div>
<div class="widget-negative">Negative</div>
css
.widget-positive {
  background-color: var(--semantics-sentiment-positive-background);
}

.widget-negative {
  background-color: var(--semantics-sentiment-negative-background);
}

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
html
<div class="container-sentiment sentiment-positive">Positive</div>
<div class="container-sentiment sentiment-negative">Negative</div>
css
.sentiment-positive {
  --semantics-sentiment-background: var(
    --semantics-sentiment-positive-background
  );
}

.sentiment-negative {
  --semantics-sentiment-background: var(
    --semantics-sentiment-negative-background
  );
}

.container-sentiment {
  background-color: var(--semantics-sentiment-background);
}

Note now the container-sentiment and sentiment-* classes could be reused anywhere else to achieve an easily swappable sentiment. Adding a new sentiment is as simple as adding the new definition in sentiment.css, and all components using container-sentiment will automatically get support.