Scoped CSS

Put a button's own rules inside <style scoped> in its .calmui file. If another component uses the same class name, its rules stay separate. To share a rule across components, put it in a loaded global stylesheet instead.

Manage shared styles through Global Styles. Later files can override earlier ones, and components do not need to import them. The ordered list is stored in calmui.config.json.styles. Named values used with var() are resolved when Studio builds the package, including any fallbacks.

CSS block comments can document token usage without activating it:

/* Example: color: var(--optional-token); */
.label { color: var(--color-primary); }

Comments do not define tokens or resolve var() references. Quoted text such as content: "var(--optional-token)" stays literal. These rules apply to global and scoped styles, including theme selection and refresh after saving. A missing token in a real declaration still reports an error unless it has a fallback.

The last token declaration in a rule may omit its semicolon. Comments after the value do not become part of the token. Function-valued fallbacks, such as var(--color-primary, rgba(152, 99, 30, 0.5)), preserve their parentheses whether the token exists or the fallback is used.

Exact equality attribute selectors are supported, including state and ancestor combinations such as .button[data-variant="danger"]:hover. CalmUI matches the attribute on the actual target or selector ancestor in Core, Studio Preview, and Unreal; it does not reduce the selector to an unconditional class rule. Presence selectors and the other CSS attribute operators are rejected during validation rather than being approximated.