Token Resolution Flow

All of the earlier techniques can now be put together to create an Über-rectangle class:

@use "forced-colors";
@use "interaction-state";
@use "disabled";

.rectangle {
  color: var(--container-foreground);
  background-color: var(--container-background);
  border: 1px solid var(--container-border);

  @include forced-colors.standard;
  @include interaction-state.default;
  @include disabled.enabled;

  @media (forced-colors: active) {
    @include forced-colors.forced;
  }

  &:disabled {
    @include disabled.disabled;
  }

  &:hover {
    @include interaction-state.hover;
  }

  &:active {
    @include interaction-state.active;
  }
}

The final token resolution flow may end up looking something like this.

Whilst this may appear complex, there is actually no new logic in this setup that wasn't already implicit in the underlying design. This flowchart represents both the new structure of tokens we have created, but also the internal logic that was used by designers when choosing which colour to use.