𝜏:torquens

Appearance

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
SentimentCard Control
ContainerCard
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
scss
@use "layer";

.container-sentiment-control {
  @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="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.

Example ​

json
{
  "container": {
    "$description": "Primary control",
    "foreground": {
      "standard": {
        "$extends": "{layer.foreground.sentiment-strong}"
      },
      "forced": {
        "$extends": "{layer.system.foreground.control}"
      }
    },
    "background": {
      "standard": {
        "$extends": "{layer.background.sentiment-strong}"
      },
      "forced": {
        "$extends": "{layer.system.background.control}"
      }
    },
    "border": {
      "standard": {
        "$extends": "{layer.transparent}"
      },
      "forced": {
        "$extends": "{layer.system.border.control}"
      }
    }
  }
}
json
{
  "container": {
    "$description": "Secondary Control",
    "foreground": {
      "standard": {
        "$extends": "{layer.foreground.sentiment-tint}"
      },
      "forced": {
        "$extends": "{layer.system.foreground.control}"
      }
    },
    "background": {
      "standard": {
        "$extends": "{layer.background.sentiment-tint}"
      },
      "forced": {
        "$extends": "{layer.system.background.control}"
      }
    },
    "border": {
      "standard": {
        "$extends": "{layer.border.sentiment}"
      },
      "forced": {
        "$extends": "{layer.system.border.control}"
      }
    }
  }
}
json
{
  "container": {
    "$description": "Ghost control",
    "foreground": {
      "standard": {
        "$extends": "{layer.foreground.sentiment-tint}"
      },
      "forced": {
        "$extends": "{layer.system.foreground.control}"
      }
    },
    "background": {
      "standard": {
        "$extends": "{layer.background.sentiment-tint-ghost}"
      },
      "forced": {
        "$extends": "{layer.system.background.control}"
      }
    },
    "border": {
      "standard": {
        "$extends": "{layer.transparent}"
      },
      "forced": {
        "$extends": "{layer.system.border.control}"
      }
    }
  }
}
json
{
  "container": {
    "$description": "Outlined panel",
    "foreground": {
      "standard": {
        "$extends": "{layer.foreground.panel}"
      },
      "forced": {
        "$extends": "{layer.system.foreground.panel}"
      }
    },
    "background": {
      "standard": {
        "$extends": "{layer.transparent}"
      },
      "forced": {
        "$extends": "{layer.system.background.panel}"
      }
    },
    "border": {
      "standard": {
        "$extends": "{layer.border.panel}"
      },
      "forced": {
        "$extends": "{layer.system.border.panel}"
      }
    }
  }
}
json
{
  "container": {
    "$description": "Filled panel",
    "foreground": {
      "standard": {
        "$extends": "{layer.foreground.panel}"
      },
      "forced": {
        "$extends": "{layer.system.foreground.panel}"
      }
    },
    "background": {
      "standard": {
        "$extends": "{layer.background.panel}"
      },
      "forced": {
        "$extends": "{layer.system.background.panel}"
      }
    },
    "border": {
      "standard": {
        "$extends": "{layer.transparent}"
      },
      "forced": {
        "$extends": "{layer.system.border.panel}"
      }
    }
  }
}

Figma Output ​

Container Tokens
Name
Control Primary
Control Secondary
Control Ghost
Panel Outlined
Panel Filled
Container
Foreground
Standard
Enabled
Color/Sentiment/Foreground
Color/Sentiment/Base
Color/Sentiment/Base
Color/Foreground/Default
Color/Foreground/Default
Disabled
Color/Foreground/Disabled
Color/Foreground/Disabled
Color/Foreground/Disabled
Color/Foreground/Disabled
Color/Foreground/Disabled
Container
Foreground
Forced
Enabled
System/Control/Foreground
System/Control/Foreground
System/Control/Foreground
System/Panel/Foreground
System/Panel/Foreground
Disabled
Primitives/System/Gray Text
Primitives/System/Gray Text
Primitives/System/Gray Text
Primitives/System/Gray Text
Primitives/System/Gray Text
Container
Background
Standard
Enabled
Color/Sentiment/Base
Color/Sentiment/Background
Color/Sentiment/Background/Ghost
Primitives/Transparent
Color/Background/Panel
Disabled
Color/Background/Disabled
Color/Background/Disabled
Primitives/Transparent
Primitives/Transparent
Color/Background/Disabled
Container
Background
Forced
Enabled
System/Control/Background
System/Control/Background
System/Control/Background
System/Panel/Background
System/Panel/Background
Disabled
Primitives/Transparent
Primitives/Transparent
Primitives/Transparent
Primitives/Transparent
Primitives/Transparent
Container
Border
Standard
Enabled
Primitives/Transparent
Color/Sentiment/Base
Primitives/Transparent
Color/Border/Default
Primitives/Transparent
Disabled
Primitives/Transparent
Color/Border/Disabled
Primitives/Transparent
Color/Border/Disabled
Primitives/Transparent
Container
Border
Forced
Enabled
System/Control/Border
System/Control/Border
System/Control/Border
System/Panel/Border
System/Panel/Border
Disabled
Primitives/System/Gray Text
Primitives/System/Gray Text
Primitives/System/Gray Text
Primitives/System/Gray Text
Primitives/System/Gray Text

SCSS Output ​

scss
/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 * ------------------------------------------- */

@mixin control-primary {
  --container-background-forced-disabled: #00000000;
  --container-background-forced-enabled: var(--system-control-background);
  --container-background-standard-disabled: var(--color-background-disabled);
  --container-background-standard-enabled: var(--color-sentiment-base);
  --container-border-forced-disabled: GrayText;
  --container-border-forced-enabled: var(--system-control-border);
  --container-border-standard-disabled: #00000000;
  --container-border-standard-enabled: #00000000;
  --container-foreground-forced-disabled: GrayText;
  --container-foreground-forced-enabled: var(--system-control-foreground);
  --container-foreground-standard-disabled: var(--color-foreground-disabled);
  --container-foreground-standard-enabled: var(--color-sentiment-foreground);
}

@mixin control-secondary {
  --container-background-forced-disabled: #00000000;
  --container-background-forced-enabled: var(--system-control-background);
  --container-background-standard-disabled: var(--color-background-disabled);
  --container-background-standard-enabled: var(--color-sentiment-background);
  --container-border-forced-disabled: GrayText;
  --container-border-forced-enabled: var(--system-control-border);
  --container-border-standard-disabled: var(--color-border-disabled);
  --container-border-standard-enabled: var(--color-sentiment-base);
  --container-foreground-forced-disabled: GrayText;
  --container-foreground-forced-enabled: var(--system-control-foreground);
  --container-foreground-standard-disabled: var(--color-foreground-disabled);
  --container-foreground-standard-enabled: var(--color-sentiment-base);
}

@mixin control-ghost {
  --container-background-forced-disabled: #00000000;
  --container-background-forced-enabled: var(--system-control-background);
  --container-background-standard-disabled: #00000000;
  --container-background-standard-enabled: var(--color-sentiment-background-ghost);
  --container-border-forced-disabled: GrayText;
  --container-border-forced-enabled: var(--system-control-border);
  --container-border-standard-disabled: #00000000;
  --container-border-standard-enabled: #00000000;
  --container-foreground-forced-disabled: GrayText;
  --container-foreground-forced-enabled: var(--system-control-foreground);
  --container-foreground-standard-disabled: var(--color-foreground-disabled);
  --container-foreground-standard-enabled: var(--color-sentiment-base);
}

@mixin panel-outlined {
  --container-background-forced-disabled: #00000000;
  --container-background-forced-enabled: var(--system-panel-background);
  --container-background-standard-disabled: #00000000;
  --container-background-standard-enabled: #00000000;
  --container-border-forced-disabled: GrayText;
  --container-border-forced-enabled: var(--system-panel-border);
  --container-border-standard-disabled: var(--color-border-disabled);
  --container-border-standard-enabled: var(--color-border-default);
  --container-foreground-forced-disabled: GrayText;
  --container-foreground-forced-enabled: var(--system-panel-foreground);
  --container-foreground-standard-disabled: var(--color-foreground-disabled);
  --container-foreground-standard-enabled: var(--color-foreground-default);
}

@mixin panel-filled {
  --container-background-forced-disabled: #00000000;
  --container-background-forced-enabled: var(--system-panel-background);
  --container-background-standard-disabled: var(--color-background-disabled);
  --container-background-standard-enabled: var(--color-background-panel);
  --container-border-forced-disabled: GrayText;
  --container-border-forced-enabled: var(--system-panel-border);
  --container-border-standard-disabled: #00000000;
  --container-border-standard-enabled: #00000000;
  --container-foreground-forced-disabled: GrayText;
  --container-foreground-forced-enabled: var(--system-panel-foreground);
  --container-foreground-standard-disabled: var(--color-foreground-disabled);
  --container-foreground-standard-enabled: var(--color-foreground-default);
}