States

Define a State

Name an attribute your components set, such as [open], in theme.states, and it becomes a variant like h:.

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    states: {      closing: "[data-ending-style]",      open: "[open]",    },  },});

Using States

<div className="tp:o tdu:150 closing:o:0">Rename file</div>

A state stacks with other variants: @md:h:open:bg:silver-1.

Animate Out

Pair it with Starting Style to animate a popup in and out.

<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.