Custom "states" based on data variables

[aleclarson]

Tokens have a variety of built-in states based on CSS pseudo selectors.

What if there was a "Token State" type for data variables?

These data variables would add a new option to each token's list of possible states.

^{(The asterisk * is added to separate custom states from built-in ones, but could be any other visual indication you want.)}

When a Token State variable exists, its data-* attribute also exists.

When editing styles within this token state, the following CSS would be generated:

/* If this layer has data-enabled set to true... */
.c1234567[data-enabled="true"] {
  /* ... */
}

One question would be how we could use a parent layer's Token State variable to style a descendant. For example, the following CSS might be desirable in certain cases:

/* If any parent has data-enabled set to true... */
[data-enabled="true"] .c1234567 {
  /* ... */
}

Motivation

This feature would allow my designer to set arbitrary, domain-specific, data-driven styles.

[kof]

• We have an open issue for something like this Custom CSS states via attributes and pseudo classes  #1926
• Ideally custom state can be defined by any selector, not only data-*,
• Also CSS has an actual state() selector now, so we need to think of a story where we can switch over gracefully at some point https://developer.mozilla.org/en-US/docs/Web/CSS/:state