𝜏: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
DisabledSelect a cardSelect a cardSelect a card
Forced Color---
Container---
Sentiment---
State---
Mode---
Final Value
Control (Primary)
Primary control
Foreground:
sentiment​.foreground
Background:
sentiment​.base
Border:
-
Control (Secondary)
Secondary Control
Foreground:
sentiment​.base
Background:
sentiment​.tint​.ghost
Border:
sentiment​.base
Control (Ghost)
Ghost control
Foreground:
sentiment​.base
Background:
sentiment​.tint​.ghost
Border:
-
Panel (Outlined)
Outlined panel
Foreground:
foreground​.default
Background:
-
Border:
stroke
Panel (Filled)
Outlined panel
Foreground:
foreground​.default
Background:
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.