Define a State
Components mark what they are doing with attributes: a details element is [open], a Base UI popup is [data-ending-style] while it closes. Name the attribute once in theme.states & it becomes a variant like h: or f:.
yumma.config.mjs
import { defineConfig } from "yummacss";
export default defineConfig({ theme: { states: { closing: "[data-ending-style]", open: "[open]", }, },});
Use a State
<div className="tp:o tdu:150 closing:o:0">Rename file</div>
A state is appended to the selector, so it stacks with everything else: @md:h:open:bg:silver-1 applies on hover, while open, from 48rem up.
Animate Out
Starting Style covers the way in & a state covers the way out, which together animate a popup both ways with no custom CSS.
<div className="tp:a tdu:150 @st:o:0 @st:s:90 closing:o:0 closing:s:90">
Settings
</div>
Rules
- Nothing is built in. Every state is one you name.
- A name is lower case letters, digits & dashes.
- A selector starts with
[or:, since it is appended to the class. - A name cannot reuse a variant (
h,f) or a utility (o,bg). The config refuses it when it loads, with a message saying which.
Class Merge does not know your states, so two conflicting classes under the same state are both kept.