Variables

The Variables panel reads the CSS custom properties out of the stylesheets you already have. There is no token format to adopt and nothing to migrate: it uses the structure you left behind.

How your file is read

• A file is a tab. That is the division you made in the first place — one stylesheet is the tokens, another is the utilities.
• Rules that declare the same names are modes. A light theme, a dark one, a brand one become columns of a single table instead of three tables nobody can compare.
• A comment between declarations is a heading, because that is what it was written as.
• Names that agree become a table. --h1-line-height and --text-small-line-height are the same property of two different things, so they are one row, one column each — not thirteen unrelated rows repeated eight times.

Editing

Changing a value writes that span and nothing else, so the diff is one line.

Rows and groups drag to reorder, and what moves is the declaration in the file — a group takes its heading, its blank line, and every line under it. A new variable lands at the bottom of its own group, named after the group it joins, rather than at the end of a two-hundred-line rule.

Accessibility checks on fluid type

A clamp() is checked as you type, resolved through whatever variables it references:

• A clamp whose maximum is more than 2.5× its minimum never reaches twice its size at 500% zoom — WCAG 1.4.4.
• A clamp whose linear term has no rem part cannot be enlarged at all.

Both are flagged on the row, and editing the minimum three rows down re-checks the clamp on the keystroke.