Styling

Write component CSS in a <style scoped> section, or shared rules in a loaded project stylesheet. Studio colors the syntax, formats it when you save, and reports unsupported properties in Problems.

Authoring tips

• Layout with Flexbox. Grid is unsupported.
• Animate transform and opacity. Animating width or height recalculates positions.
• Hover, focus, active, disabled, and :gamepad-focus let you style interactive controls.
• Component <style scoped> does not style projected slot content.
• Put shared rules in styles/tokens.css and styles/global.css. Studio keeps these required project styles first and second in the global cascade and does not allow renaming, detaching, or deleting them; individual rules remain editable.
• Global Styles manages the ordered calmui.config.json.styles array. Later files may override earlier files. Unlisted CSS is not loaded by Preview or package builds.
• Do not use @import to register project CSS. Attach the file through Global Styles or edit the styles array directly.

See the CSS reference for the supported properties.