𝜏:torquens

Appearance

Choose Your Own Adventure Token ​

WARNING

This demo uses sibling-index() and sibling-count(), and so will not work on firefox

Select the base container type. This defines the primary visual style of the component.
Select if the component is active or disabled. This will disable a number of other options.
Select if forced color mode is enabled. This will disable a number of other options.
Select the sentiment to apply to the component, if applicable.
Select default, hover, or active component state.
Select Light or Dark mode.
ChoiceForegroundBackgroundBorder
Rootcontainer.foregroundcontainer.backgroundcontainer.border
Disabled
Forced Color---
Container---
Sentiment---
State---
Mode---
Final Value
Control (Ghost)
Ghost control
Foreground:
sentiment-tint
Background:
sentiment-tint-ghost
Border:
-
Control (Primary)
Primary control
Foreground:
sentiment-strong
Background:
sentiment-strong
Border:
-
Control (Secondary)
Secondary Control
Foreground:
sentiment-tint
Background:
sentiment-tint
Border:
sentiment
Panel (Outlined)
Outlined panel
Foreground:
panel
Background:
-
Border:
panel
Panel (Filled)
Filled panel
Foreground:
panel
Background:
panel
Border:
-
Active
The user has requested forced colors
None
The user has not requested forced colors
Disabled
The rectangle is in the disabled state
Enabled
The rectangle is (potentially) interactive.
Positive
Positive sentiment
Negative
Negative sentiment
Warning
Warning sentiment
Primary
Primary sentiment
Default
Rectangle is at rest
Hover
Rectangle is in the 'hover' interactionState
Active
Rectangle is in the 'active' interactionState
Light mode
User or app has requested light mode
Dark mode
User or app has requested dark mode
Panel
Forced color override container for panel type containers.
Control
Forced color override container for control type containers.