Trigger & State

Benefits

• Rename classes and variables without breaking custom code

• Keep all styles visible in the style panel for no-coders

• Easily override states natively with component variants

State

Elements with the following attributes are made active when a condition is met.

data-state="checked"

If element is or contains a checkbox or radio that's checked

data-state="current"

If element is or contains a link block pointed to the current page or anchor link pointed to the current section

data-state="open"

If element is or contains an open menu button, open dropdown toggle, or open dropdown list

data-state="expanded"

If element is or contains a child with an attribute of aria-expanded="true" including open dropdown toggles or custom accordions

data-state="external"

If element is or contains a link that opens in a new tab

is-active

If element has a class of is-active

Trigger

Elements with the following attributes are made active when a condition is met.

data-trigger="focus"

If element is or contains a focused element

data-trigger="hover"

If element is or contains a hovered element

data-trigger="mobile"

Element is active on touch devices

data-trigger="preview"

Element is active inside designer but not on the live site

data-trigger="group"

Apply to a parent when we want to affect siblings of the hovered or focused element

data-trigger="hover-other"

If another element within a data-trigger="group" is hovered

data-trigger="focus-other"

If another element within a data-trigger="group" is focused

Applying in the style panel

Opacity

Turns the opacity down to 0.6

calc(1 - 0.4 * var(--_trigger---on))

Color

Switch between two different colors

color-mix(
  in srgb,
  var(--swatch--brand-500) calc(100% * var(--_trigger---on)),
  var(--swatch--dark-800) calc(100% * var(--_trigger---off))
)

Change Font Weight

calc(
var(--_typography---font--primary-regular) * var(--_trigger---on) + 
var(--_typography---font--primary-bold) * var(--_trigger---off)
)

Transform

Scale to 1.2

scale(calc(1 + 0.2 * var(--_trigger---on)))

Scale to 0.8

scale(calc(1 - 0.2 * var(--_trigger---on)))

Rotate to 45deg

rotate(calc(45deg * var(--_trigger---on)))

Move horizontally

translateX(calc(2rem * var(--_trigger---on)))

Move vertically

translateY(calc(2rem * var(--_trigger---on)))

If trigger OR state is active

If one style should apply when either the trigger or the state is active

translateY(calc(-1rem * min(var(--_trigger---off) + var(--_state---false), 1)))

color-mix(in srgb,
  var(--swatch--brand-500) 
  calc(100% * min(var(--_trigger---off) + var(--_state---false), 1)),
  var(--swatch--dark-900)
)