CSS

scss

// Standard dumping of semantics into root CSS rule.
:root {
  --semantics-sentiment-positive-foreground-default: $primitives.green-300;
  --semantics-sentiment-positive-foreground-hover: $primitives.green-400;
  --semantics-sentiment-positive-foreground-active: $primitives.green-500;
}

// Positive sentiment CSS class
.sentiment-positive {
  --semantics-sentiment-foreground-default: var(
    --semantics-sentiment-positive-foreground-default
  );
  --semantics-sentiment-foreground-hover: var(
    --semantics-sentiment-positive-foreground-hover
  );
  --semantics-sentiment-foreground-active: var(
    --semantics-sentiment-positive-foreground-active
  );
}

// Mixin for background primary
@mixin layer-background-primary {
  --container-background-default: var(--semantics-sentiment-foreground-default);
  --container-background-hover: var(--semantics-sentiment-foreground-hover);
  --container-background-active: var(--semantics-sentiment-foreground-active);
}

// 'Container token' class for primary control.
.primary-control {
  @include layer-background-primary;
  @include layer-foreground-primary;
  @include layer-border-primary;
}

// Implementation class that does final application of styles - allowing for
// customisatino of :hover/:active selectors
.container {
  background-color: var(--container-background-default);
  &:hover {
    background-color: var(--container-background-hover);
  }
  &:active {
    background-color: var(--container-background-active);
  }
}

These can be used:

html

<!-- Primary control with positive sentiment -->
<div class="container primary-control sentiment-positive"></div>
<!-- Primary control with negative sentiment -->
<div class="container primary-control sentiment-negative"></div>
<!-- Secondary control with positive sentiment -->
<div class="container secondary-control sentiment-positive"></div>

CSS ​

CSS