𝜏:torquens

Appearance

Interaction State Tokens ​

Why?

Group default, :hover and :active state tokens meaningfully.

The interaction state token encodes through data structure (rather than naming convention) the relationship between tokens used in default, hover and active states.

Hidden in design tokens ​

Many design systems will have, somewhere in the semantic layer, tokens that look something like this:

Semantic Tokens
Name
Light
Dark
Semantics
Primary
Background
Default
Primitives/Primary/300
Primitives/Primary/1100
Hover
Primitives/Primary/400
Primitives/Primary/1000
Active
Primitives/Primary/500
Primitives/Primary/900
Semantics
Secondary
Background
Default
Primitives/Secondary/300
Primitives/Secondary/1100
Hover
Primitives/Secondary/400
Primitives/Secondary/1000
Active
Primitives/Secondary/500
Primitives/Secondary/900

There's a clear intent here, expressed through the naming, that a component using a background color of Semantics/Primary/Background/Default should also use a background color of Semantics/Primary/Background/Hover when in hover state (if applicable) and likewise for active state.

However, there's no easy way to apply this to a component that doesn't require the designer to manually select each one.

A development hotch-potch ​

Similarly, in development, at the worst case you will end up with something like this:

Positive
Negative
css
.widget-positive {
  background-color: var(--sentiment-positive-background-default);
  color: var(--sentiment-positive-foreground-default);
  border-color: var(--sentiment-positive-border-default);

  &:hover {
    background-color: var(--sentiment-positive-background-hover);
    color: var(--sentiment-positive-foreground-hover);
    border-color: var(--sentiment-positive-border-hover);
  }

  &:active {
    background-color: var(--sentiment-positive-background-active);
    color: var(--sentiment-positive-foreground-active);
    border-color: var(--sentiment-positive-border-active);
  }
}

.widget-negative {
  background-color: var(--sentiment-negative-background-default);
  color: var(--sentiment-negative-foreground-default);
  border-color: var(--sentiment-negative-border-default);

  &:hover {
    background-color: var(--sentiment-negative-background-hover);
    color: var(--sentiment-negative-foreground-hover);
    border-color: var(--sentiment-negative-border-hover);
  }

  &:active {
    background-color: var(--sentiment-negative-background-active);
    color: var(--sentiment-negative-foreground-active);
    border-color: var(--sentiment-negative-border-active);
  }
}
html
<div class="widget-positive">Positive</div>
<div class="widget-negative">Negative</div>

This is just for one component with two sentiments - when other components need sentimentality, there's nothing here that can be reused.

Torquens ​

The interaction state token exists to fill this void. Design systems implementations may already have something in place for this:

Positive
Negative
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);
}
scss
@mixin behavioural($prop, $color) {
  #{$prop}: var(#{$color}-default);

  &:hover {
    #{$prop}: var(#{$color}-hover);
  }

  &:active {
    #{$prop}: var(#{$color}-active);
  }
}
html
<div class="widget-positive">Positive</div>
<div class="widget-negative">Negative</div>

But the pain here is that this is using a token that doesn't exist in your semantics.

The solution here is to create a new set of tokens that can switch between the different states.

Interaction State Tokens
Name
Default
Hover
Active
Semantics
Primary
Background
Semantics/Primary/Background/Default
Semantics/Primary/Background/Hover
Semantics/Primary/Background/Active
Foreground
Semantics/Primary/Foreground/Default
Semantics/Primary/Foreground/Hover
Semantics/Primary/Foreground/Active
Border
Semantics/Primary/Border/Default
Semantics/Primary/Border/Hover
Semantics/Primary/Border/Active
Semantics
Secondary
Background
Semantics/Secondary/Background/Default
Semantics/Secondary/Background/Hover
Semantics/Secondary/Background/Active
Foreground
Semantics/Secondary/Foreground/Default
Semantics/Secondary/Foreground/Hover
Semantics/Secondary/Foreground/Active
Border
Semantics/Secondary/Border/Default
Semantics/Secondary/Border/Hover
Semantics/Secondary/Border/Active

Now, consumers can reference Semantics/Primary/Background, and have a mode to switch between states.

Example ​

json
{
  "color": {
    "sentiment": {
      "primary": {
        "foreground": {
          "$root": {
            "$value": "{color.sentiment.primary.foreground.default}"
          },
          "ghost": {
            "$value": "{primitives.transparent}"
          }
        },
        "base": {
          "$root": {
            "$value": "{color.sentiment.primary.base.default}"
          },
          "ghost": {
            "$value": "{primitives.transparent}"
          }
        },
        "background": {
          "$root": {
            "$value": "{color.sentiment.primary.background.default}"
          },
          "ghost": {
            "$value": "{primitives.transparent}"
          }
        }
      },
      "positive": {
        "foreground": {
          "$root": {
            "$value": "{color.sentiment.positive.foreground.default}"
          },
          "ghost": {
            "$value": "{primitives.transparent}"
          }
        },
        "base": {
          "$root": {
            "$value": "{color.sentiment.positive.base.default}"
          },
          "ghost": {
            "$value": "{primitives.transparent}"
          }
        },
        "background": {
          "$root": {
            "$value": "{color.sentiment.positive.background.default}"
          },
          "ghost": {
            "$value": "{primitives.transparent}"
          }
        }
      },
      "warning": {
        "foreground": {
          "$root": {
            "$value": "{color.sentiment.warning.foreground.default}"
          },
          "ghost": {
            "$value": "{primitives.transparent}"
          }
        },
        "base": {
          "$root": {
            "$value": "{color.sentiment.warning.base.default}"
          },
          "ghost": {
            "$value": "{primitives.transparent}"
          }
        },
        "background": {
          "$root": {
            "$value": "{color.sentiment.warning.background.default}"
          },
          "ghost": {
            "$value": "{primitives.transparent}"
          }
        }
      },
      "negative": {
        "foreground": {
          "$root": {
            "$value": "{color.sentiment.negative.foreground.default}"
          },
          "ghost": {
            "$value": "{primitives.transparent}"
          }
        },
        "base": {
          "$root": {
            "$value": "{color.sentiment.negative.base.default}"
          },
          "ghost": {
            "$value": "{primitives.transparent}"
          }
        },
        "background": {
          "$root": {
            "$value": "{color.sentiment.negative.background.default}"
          },
          "ghost": {
            "$value": "{primitives.transparent}"
          }
        }
      }
    }
  },
  "system": {
    "panel": {
      "foreground": {
        "$root": {
          "$value": "{system.panel.foreground.default}"
        },
        "ghost": {
          "$value": "{primitives.transparent}"
        }
      },
      "background": {
        "$root": {
          "$value": "{system.panel.background.default}"
        },
        "ghost": {
          "$value": "{primitives.transparent}"
        }
      },
      "border": {
        "$root": {
          "$value": "{system.panel.border.default}"
        },
        "ghost": {
          "$value": "{primitives.transparent}"
        }
      }
    },
    "control": {
      "foreground": {
        "$root": {
          "$value": "{system.control.foreground.default}"
        },
        "ghost": {
          "$value": "{primitives.transparent}"
        }
      },
      "background": {
        "$root": {
          "$value": "{system.control.background.default}"
        },
        "ghost": {
          "$value": "{primitives.transparent}"
        }
      },
      "border": {
        "$root": {
          "$value": "{system.control.border.default}"
        },
        "ghost": {
          "$value": "{primitives.transparent}"
        }
      }
    }
  }
}
json
{
  "color": {
    "sentiment": {
      "primary": {
        "foreground": {
          "$root": {
            "$value": "{color.sentiment.primary.foreground.hover}"
          },
          "ghost": {
            "$value": "{color.sentiment.primary.foreground.hover}"
          }
        },
        "base": {
          "$root": {
            "$value": "{color.sentiment.primary.base.hover}"
          },
          "ghost": {
            "$value": "{color.sentiment.primary.base.hover}"
          }
        },
        "background": {
          "$root": {
            "$value": "{color.sentiment.primary.background.hover}"
          },
          "ghost": {
            "$value": "{color.sentiment.primary.background.hover}"
          }
        }
      },
      "positive": {
        "foreground": {
          "$root": {
            "$value": "{color.sentiment.positive.foreground.hover}"
          },
          "ghost": {
            "$value": "{color.sentiment.positive.foreground.hover}"
          }
        },
        "base": {
          "$root": {
            "$value": "{color.sentiment.positive.base.hover}"
          },
          "ghost": {
            "$value": "{color.sentiment.positive.base.hover}"
          }
        },
        "background": {
          "$root": {
            "$value": "{color.sentiment.positive.background.hover}"
          },
          "ghost": {
            "$value": "{color.sentiment.positive.background.hover}"
          }
        }
      },
      "warning": {
        "foreground": {
          "$root": {
            "$value": "{color.sentiment.warning.foreground.hover}"
          },
          "ghost": {
            "$value": "{color.sentiment.warning.foreground.hover}"
          }
        },
        "base": {
          "$root": {
            "$value": "{color.sentiment.warning.base.hover}"
          },
          "ghost": {
            "$value": "{color.sentiment.warning.base.hover}"
          }
        },
        "background": {
          "$root": {
            "$value": "{color.sentiment.warning.background.hover}"
          },
          "ghost": {
            "$value": "{color.sentiment.warning.background.hover}"
          }
        }
      },
      "negative": {
        "foreground": {
          "$root": {
            "$value": "{color.sentiment.negative.foreground.hover}"
          },
          "ghost": {
            "$value": "{color.sentiment.negative.foreground.hover}"
          }
        },
        "base": {
          "$root": {
            "$value": "{color.sentiment.negative.base.hover}"
          },
          "ghost": {
            "$value": "{color.sentiment.negative.base.hover}"
          }
        },
        "background": {
          "$root": {
            "$value": "{color.sentiment.negative.background.hover}"
          },
          "ghost": {
            "$value": "{color.sentiment.negative.background.hover}"
          }
        }
      }
    }
  },
  "system": {
    "panel": {
      "foreground": {
        "$root": {
          "$value": "{system.panel.foreground.hover}"
        },
        "ghost": {
          "$value": "{system.panel.foreground.hover}"
        }
      },
      "background": {
        "$root": {
          "$value": "{system.panel.background.hover}"
        },
        "ghost": {
          "$value": "{system.panel.background.hover}"
        }
      },
      "border": {
        "$root": {
          "$value": "{system.panel.border.hover}"
        },
        "ghost": {
          "$value": "{system.panel.border.hover}"
        }
      }
    },
    "control": {
      "foreground": {
        "$root": {
          "$value": "{system.control.foreground.hover}"
        },
        "ghost": {
          "$value": "{system.control.foreground.hover}"
        }
      },
      "background": {
        "$root": {
          "$value": "{system.control.background.hover}"
        },
        "ghost": {
          "$value": "{system.control.background.hover}"
        }
      },
      "border": {
        "$root": {
          "$value": "{system.control.border.hover}"
        },
        "ghost": {
          "$value": "{system.control.border.hover}"
        }
      }
    }
  }
}
json
{
  "color": {
    "sentiment": {
      "primary": {
        "foreground": {
          "$root": {
            "$value": "{color.sentiment.primary.foreground.active}"
          },
          "ghost": {
            "$value": "{color.sentiment.primary.foreground.active}"
          }
        },
        "base": {
          "$root": {
            "$value": "{color.sentiment.primary.base.active}"
          },
          "ghost": {
            "$value": "{color.sentiment.primary.base.active}"
          }
        },
        "background": {
          "$root": {
            "$value": "{color.sentiment.primary.background.active}"
          },
          "ghost": {
            "$value": "{color.sentiment.primary.background.active}"
          }
        }
      },
      "positive": {
        "foreground": {
          "$root": {
            "$value": "{color.sentiment.positive.foreground.active}"
          },
          "ghost": {
            "$value": "{color.sentiment.positive.foreground.active}"
          }
        },
        "base": {
          "$root": {
            "$value": "{color.sentiment.positive.base.active}"
          },
          "ghost": {
            "$value": "{color.sentiment.positive.base.active}"
          }
        },
        "background": {
          "$root": {
            "$value": "{color.sentiment.positive.background.active}"
          },
          "ghost": {
            "$value": "{color.sentiment.positive.background.active}"
          }
        }
      },
      "warning": {
        "foreground": {
          "$root": {
            "$value": "{color.sentiment.warning.foreground.active}"
          },
          "ghost": {
            "$value": "{color.sentiment.warning.foreground.active}"
          }
        },
        "base": {
          "$root": {
            "$value": "{color.sentiment.warning.base.active}"
          },
          "ghost": {
            "$value": "{color.sentiment.warning.base.active}"
          }
        },
        "background": {
          "$root": {
            "$value": "{color.sentiment.warning.background.active}"
          },
          "ghost": {
            "$value": "{color.sentiment.warning.background.active}"
          }
        }
      },
      "negative": {
        "foreground": {
          "$root": {
            "$value": "{color.sentiment.negative.foreground.active}"
          },
          "ghost": {
            "$value": "{color.sentiment.negative.foreground.active}"
          }
        },
        "base": {
          "$root": {
            "$value": "{color.sentiment.negative.base.active}"
          },
          "ghost": {
            "$value": "{color.sentiment.negative.base.active}"
          }
        },
        "background": {
          "$root": {
            "$value": "{color.sentiment.negative.background.active}"
          },
          "ghost": {
            "$value": "{color.sentiment.negative.background.active}"
          }
        }
      }
    }
  },
  "system": {
    "panel": {
      "foreground": {
        "$root": {
          "$value": "{system.panel.foreground.active}"
        },
        "ghost": {
          "$value": "{system.panel.foreground.active}"
        }
      },
      "background": {
        "$root": {
          "$value": "{system.panel.background.active}"
        },
        "ghost": {
          "$value": "{system.panel.background.active}"
        }
      },
      "border": {
        "$root": {
          "$value": "{system.panel.border.active}"
        },
        "ghost": {
          "$value": "{system.panel.border.active}"
        }
      }
    },
    "control": {
      "foreground": {
        "$root": {
          "$value": "{system.control.foreground.active}"
        },
        "ghost": {
          "$value": "{system.control.foreground.active}"
        }
      },
      "background": {
        "$root": {
          "$value": "{system.control.background.active}"
        },
        "ghost": {
          "$value": "{system.control.background.active}"
        }
      },
      "border": {
        "$root": {
          "$value": "{system.control.border.active}"
        },
        "ghost": {
          "$value": "{system.control.border.active}"
        }
      }
    }
  }
}

Figma Output ​

Interaction State
Name
Default
Hover
Active
Color
Sentiment
Primary
Foreground
Color/Sentiment/Primary/Foreground/Default
Color/Sentiment/Primary/Foreground/Hover
Color/Sentiment/Primary/Foreground/Active
Base
Color/Sentiment/Primary/Base/Default
Color/Sentiment/Primary/Base/Hover
Color/Sentiment/Primary/Base/Active
Background
Color/Sentiment/Primary/Background/Default
Color/Sentiment/Primary/Background/Hover
Color/Sentiment/Primary/Background/Active
Color
Sentiment
Primary
Foreground
Ghost
Primitives/Transparent
Color/Sentiment/Primary/Foreground/Hover
Color/Sentiment/Primary/Foreground/Active
Color
Sentiment
Primary
Base
Ghost
Primitives/Transparent
Color/Sentiment/Primary/Base/Hover
Color/Sentiment/Primary/Base/Active
Color
Sentiment
Primary
Background
Ghost
Primitives/Transparent
Color/Sentiment/Primary/Background/Hover
Color/Sentiment/Primary/Background/Active
Color
Sentiment
Positive
Foreground
Color/Sentiment/Positive/Foreground/Default
Color/Sentiment/Positive/Foreground/Hover
Color/Sentiment/Positive/Foreground/Active
Base
Color/Sentiment/Positive/Base/Default
Color/Sentiment/Positive/Base/Hover
Color/Sentiment/Positive/Base/Active
Background
Color/Sentiment/Positive/Background/Default
Color/Sentiment/Positive/Background/Hover
Color/Sentiment/Positive/Background/Active
Color
Sentiment
Positive
Foreground
Ghost
Primitives/Transparent
Color/Sentiment/Positive/Foreground/Hover
Color/Sentiment/Positive/Foreground/Active
Color
Sentiment
Positive
Base
Ghost
Primitives/Transparent
Color/Sentiment/Positive/Base/Hover
Color/Sentiment/Positive/Base/Active
Color
Sentiment
Positive
Background
Ghost
Primitives/Transparent
Color/Sentiment/Positive/Background/Hover
Color/Sentiment/Positive/Background/Active
Color
Sentiment
Warning
Foreground
Color/Sentiment/Warning/Foreground/Default
Color/Sentiment/Warning/Foreground/Hover
Color/Sentiment/Warning/Foreground/Active
Base
Color/Sentiment/Warning/Base/Default
Color/Sentiment/Warning/Base/Hover
Color/Sentiment/Warning/Base/Active
Background
Color/Sentiment/Warning/Background/Default
Color/Sentiment/Warning/Background/Hover
Color/Sentiment/Warning/Background/Active
Color
Sentiment
Warning
Foreground
Ghost
Primitives/Transparent
Color/Sentiment/Warning/Foreground/Hover
Color/Sentiment/Warning/Foreground/Active
Color
Sentiment
Warning
Base
Ghost
Primitives/Transparent
Color/Sentiment/Warning/Base/Hover
Color/Sentiment/Warning/Base/Active
Color
Sentiment
Warning
Background
Ghost
Primitives/Transparent
Color/Sentiment/Warning/Background/Hover
Color/Sentiment/Warning/Background/Active
Color
Sentiment
Negative
Foreground
Color/Sentiment/Negative/Foreground/Default
Color/Sentiment/Negative/Foreground/Hover
Color/Sentiment/Negative/Foreground/Active
Base
Color/Sentiment/Negative/Base/Default
Color/Sentiment/Negative/Base/Hover
Color/Sentiment/Negative/Base/Active
Background
Color/Sentiment/Negative/Background/Default
Color/Sentiment/Negative/Background/Hover
Color/Sentiment/Negative/Background/Active
Color
Sentiment
Negative
Foreground
Ghost
Primitives/Transparent
Color/Sentiment/Negative/Foreground/Hover
Color/Sentiment/Negative/Foreground/Active
Color
Sentiment
Negative
Base
Ghost
Primitives/Transparent
Color/Sentiment/Negative/Base/Hover
Color/Sentiment/Negative/Base/Active
Color
Sentiment
Negative
Background
Ghost
Primitives/Transparent
Color/Sentiment/Negative/Background/Hover
Color/Sentiment/Negative/Background/Active
System
Panel
Foreground
System/Panel/Foreground/Default
System/Panel/Foreground/Hover
System/Panel/Foreground/Active
Background
System/Panel/Background/Default
System/Panel/Background/Hover
System/Panel/Background/Active
Border
System/Panel/Border/Default
System/Panel/Border/Hover
System/Panel/Border/Active
System
Panel
Foreground
Ghost
Primitives/Transparent
System/Panel/Foreground/Hover
System/Panel/Foreground/Active
System
Panel
Background
Ghost
Primitives/Transparent
System/Panel/Background/Hover
System/Panel/Background/Active
System
Panel
Border
Ghost
Primitives/Transparent
System/Panel/Border/Hover
System/Panel/Border/Active
System
Control
Foreground
System/Control/Foreground/Default
System/Control/Foreground/Hover
System/Control/Foreground/Active
Background
System/Control/Background/Default
System/Control/Background/Hover
System/Control/Background/Active
Border
System/Control/Border/Default
System/Control/Border/Hover
System/Control/Border/Active
System
Control
Foreground
Ghost
Primitives/Transparent
System/Control/Foreground/Hover
System/Control/Foreground/Active
System
Control
Background
Ghost
Primitives/Transparent
System/Control/Background/Hover
System/Control/Background/Active
System
Control
Border
Ghost
Primitives/Transparent
System/Control/Border/Hover
System/Control/Border/Active

SCSS Output ​

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

@mixin default {
  --color-sentiment-negative-background: var(--color-sentiment-negative-background-default);
  --color-sentiment-negative-background-ghost: #00000000;
  --color-sentiment-negative-base: var(--color-sentiment-negative-base-default);
  --color-sentiment-negative-base-ghost: #00000000;
  --color-sentiment-negative-foreground: var(--color-sentiment-negative-foreground-default);
  --color-sentiment-negative-foreground-ghost: #00000000;
  --color-sentiment-positive-background: var(--color-sentiment-positive-background-default);
  --color-sentiment-positive-background-ghost: #00000000;
  --color-sentiment-positive-base: var(--color-sentiment-positive-base-default);
  --color-sentiment-positive-base-ghost: #00000000;
  --color-sentiment-positive-foreground: var(--color-sentiment-positive-foreground-default);
  --color-sentiment-positive-foreground-ghost: #00000000;
  --color-sentiment-primary-background: var(--color-sentiment-primary-background-default);
  --color-sentiment-primary-background-ghost: #00000000;
  --color-sentiment-primary-base: var(--color-sentiment-primary-base-default);
  --color-sentiment-primary-base-ghost: #00000000;
  --color-sentiment-primary-foreground: var(--color-sentiment-primary-foreground-default);
  --color-sentiment-primary-foreground-ghost: #00000000;
  --color-sentiment-warning-background: var(--color-sentiment-warning-background-default);
  --color-sentiment-warning-background-ghost: #00000000;
  --color-sentiment-warning-base: var(--color-sentiment-warning-base-default);
  --color-sentiment-warning-base-ghost: #00000000;
  --color-sentiment-warning-foreground: var(--color-sentiment-warning-foreground-default);
  --color-sentiment-warning-foreground-ghost: #00000000;
  --system-control-background: ButtonFace;
  --system-control-background-ghost: #00000000;
  --system-control-border: ButtonBorder;
  --system-control-border-ghost: #00000000;
  --system-control-foreground: ButtonText;
  --system-control-foreground-ghost: #00000000;
  --system-panel-background: Canvas;
  --system-panel-background-ghost: #00000000;
  --system-panel-border: CanvasText;
  --system-panel-border-ghost: #00000000;
  --system-panel-foreground: CanvasText;
  --system-panel-foreground-ghost: #00000000;
}

@mixin hover {
  --color-sentiment-negative-background: var(--color-sentiment-negative-background-hover);
  --color-sentiment-negative-background-ghost: var(--color-sentiment-negative-background-hover);
  --color-sentiment-negative-base: var(--color-sentiment-negative-base-hover);
  --color-sentiment-negative-base-ghost: var(--color-sentiment-negative-base-hover);
  --color-sentiment-negative-foreground: var(--color-sentiment-negative-foreground-hover);
  --color-sentiment-negative-foreground-ghost: var(--color-sentiment-negative-foreground-hover);
  --color-sentiment-positive-background: var(--color-sentiment-positive-background-hover);
  --color-sentiment-positive-background-ghost: var(--color-sentiment-positive-background-hover);
  --color-sentiment-positive-base: var(--color-sentiment-positive-base-hover);
  --color-sentiment-positive-base-ghost: var(--color-sentiment-positive-base-hover);
  --color-sentiment-positive-foreground: var(--color-sentiment-positive-foreground-hover);
  --color-sentiment-positive-foreground-ghost: var(--color-sentiment-positive-foreground-hover);
  --color-sentiment-primary-background: var(--color-sentiment-primary-background-hover);
  --color-sentiment-primary-background-ghost: var(--color-sentiment-primary-background-hover);
  --color-sentiment-primary-base: var(--color-sentiment-primary-base-hover);
  --color-sentiment-primary-base-ghost: var(--color-sentiment-primary-base-hover);
  --color-sentiment-primary-foreground: var(--color-sentiment-primary-foreground-hover);
  --color-sentiment-primary-foreground-ghost: var(--color-sentiment-primary-foreground-hover);
  --color-sentiment-warning-background: var(--color-sentiment-warning-background-hover);
  --color-sentiment-warning-background-ghost: var(--color-sentiment-warning-background-hover);
  --color-sentiment-warning-base: var(--color-sentiment-warning-base-hover);
  --color-sentiment-warning-base-ghost: var(--color-sentiment-warning-base-hover);
  --color-sentiment-warning-foreground: var(--color-sentiment-warning-foreground-hover);
  --color-sentiment-warning-foreground-ghost: var(--color-sentiment-warning-foreground-hover);
  --system-control-background: #00000000;
  --system-control-background-ghost: #00000000;
  --system-control-border: Highlight;
  --system-control-border-ghost: Highlight;
  --system-control-foreground: Highlight;
  --system-control-foreground-ghost: Highlight;
  --system-panel-background: #00000000;
  --system-panel-background-ghost: #00000000;
  --system-panel-border: Highlight;
  --system-panel-border-ghost: Highlight;
  --system-panel-foreground: Highlight;
  --system-panel-foreground-ghost: Highlight;
}

@mixin active {
  --color-sentiment-negative-background: var(--color-sentiment-negative-background-active);
  --color-sentiment-negative-background-ghost: var(--color-sentiment-negative-background-active);
  --color-sentiment-negative-base: var(--color-sentiment-negative-base-active);
  --color-sentiment-negative-base-ghost: var(--color-sentiment-negative-base-active);
  --color-sentiment-negative-foreground: var(--color-sentiment-negative-foreground-active);
  --color-sentiment-negative-foreground-ghost: var(--color-sentiment-negative-foreground-active);
  --color-sentiment-positive-background: var(--color-sentiment-positive-background-active);
  --color-sentiment-positive-background-ghost: var(--color-sentiment-positive-background-active);
  --color-sentiment-positive-base: var(--color-sentiment-positive-base-active);
  --color-sentiment-positive-base-ghost: var(--color-sentiment-positive-base-active);
  --color-sentiment-positive-foreground: var(--color-sentiment-positive-foreground-active);
  --color-sentiment-positive-foreground-ghost: var(--color-sentiment-positive-foreground-active);
  --color-sentiment-primary-background: var(--color-sentiment-primary-background-active);
  --color-sentiment-primary-background-ghost: var(--color-sentiment-primary-background-active);
  --color-sentiment-primary-base: var(--color-sentiment-primary-base-active);
  --color-sentiment-primary-base-ghost: var(--color-sentiment-primary-base-active);
  --color-sentiment-primary-foreground: var(--color-sentiment-primary-foreground-active);
  --color-sentiment-primary-foreground-ghost: var(--color-sentiment-primary-foreground-active);
  --color-sentiment-warning-background: var(--color-sentiment-warning-background-active);
  --color-sentiment-warning-background-ghost: var(--color-sentiment-warning-background-active);
  --color-sentiment-warning-base: var(--color-sentiment-warning-base-active);
  --color-sentiment-warning-base-ghost: var(--color-sentiment-warning-base-active);
  --color-sentiment-warning-foreground: var(--color-sentiment-warning-foreground-active);
  --color-sentiment-warning-foreground-ghost: var(--color-sentiment-warning-foreground-active);
  --system-control-background: #00000000;
  --system-control-background-ghost: #00000000;
  --system-control-border: Highlight;
  --system-control-border-ghost: Highlight;
  --system-control-foreground: Highlight;
  --system-control-foreground-ghost: Highlight;
  --system-panel-background: #00000000;
  --system-panel-background-ghost: #00000000;
  --system-panel-border: Highlight;
  --system-panel-border-ghost: Highlight;
  --system-panel-foreground: Highlight;
  --system-panel-foreground-ghost: Highlight;
}