skip to content

State

State design tokens define the appearance of interface elements based on their state, such as when they are hovered or active.

  • $t-a-state-focus

    #0088cc
    The color of the focus ring.

  • $t-a-state-error

    #be1818
    The color of the error state.

  • $t-a-state-warning

    #f58220
    The color of the warning state.

  • $t-a-state-success

    #00a69d
    The color of the success state.

  • $t-a-state-information

    #0070a8
    The color of the information state.
Swatch Name Value Description
$t-a-state-focus #0088cc The color of the focus ring.
$t-a-state-error #be1818 The color of the error state.
$t-a-state-warning #f58220 The color of the warning state.
$t-a-state-success #00a69d The color of the success state.
$t-a-state-information #0070a8 The color of the information state.