Styling a node

A node's style is set in two places, and both work the same way:

• The Inspector's Style section: the style properties the node sets, each with its field.
• The Style tab: the same for the node or one of its parts (::header-cell), next to its classes, the format painter and "Save as class". With one node selected, it also shows what each property computes to.

In both, the properties sit under group headings, and one search field adds a property. Margin and padding are edited as one box. The Rules editor in the Style tab uses the same search field.

Finding a property

The search field, "Add a property…", is at the top of the style properties. In the Style tab, screen readers call it "Add a style property", or "Add a style property for ::header-cell" when a part is picked. Type to filter.

• What matches: a label that starts with what you typed comes first, then a later word of a label ("top" finds Margin top), then the text anywhere in a label, then in the CSS name (z-index), then in a property's search words. Only when nothing matches that way do letters in order count (bgc finds Background color). Matched letters are highlighted.
• Search words are the words people use for a property rather than its CSS name: bold finds Font weight, rounded Border radius, keep together Break inside, leading Line height, fill Background color, transparency Opacity. A match by a search word says which: Font weight “bold”.
• Each row shows the property's label, and its CSS name on the right. A property the node already sets has a check and "set".
• Groups come in the order of their best match. Among equally good matches, a property you added recently comes first.
• With nothing typed, the list shows Recent first, then every group in order.

The list opens under the field, or above it when there's more room there.

Key	Does
↑ ↓	Move through the list
Enter	Add the highlighted property, or go to it if it's set
Escape	Close the list and clear the field
Backspace	At the start of the field, search every group again after a group's + Add
/	Put the cursor in the search field, while the Inspector or the Style tab has focus and the cursor isn't in a text field

Picking a property that isn't set adds it and puts the cursor in its value: in the Inspector its field, in the Style tab an empty row. Picking one that is set puts the cursor in its field.

Setting it in one go: type name: value, such as padding: 8pt or font-weight: 600. The list offers "Set Padding → 8pt", and Enter adds the property with that value as one edit. In the Inspector the value is checked as the property's field checks it, and a value the field wouldn't take shows its error and adds nothing. In the Style tab the value is sent as typed, and a refused one shows the edit's error, as the tab's other edits do.

Recent is the last five properties you added, in either place, newest first. It's kept in this browser only (rf.style.recent), so it isn't shared with other browsers or people.

The groups

Properties are listed and searched in eleven groups, in this order:

Group	What's in it
Text	Colour, font family, size, weight and style, numeric figures, line height, letter and word spacing, alignment, decoration, transform, indent, vertical alignment, white space, hyphens, direction, overflow wrap
Spacing	Margin and padding, all sides and each side
Size	Width and height, their minimum and maximum, box sizing
Border	Borders, all sides and each side, with their width, style and colour; border radius, all corners and each corner; outline
Background	Colour, image, size, position, repeat
Layout	Display, flex and grid, alignment, gaps
Multi-column	Columns, their count, width, gap and rule, how they fill and span
Pagination	Breaks before, after and inside, orphans, widows, the page template, how a box is drawn at a page break
Position	Top, right, bottom, left, stacking order, rotation
Visibility and overflow	Overflow, text overflow, visibility, opacity
Table	Border collapse, table layout

• Position is offered only for a node inside a frame, the only place those properties apply (RFML §8.4). Table is offered only on a table. Every other group is offered for every node.
• Most labels are made from the CSS name ("Margin top"). Six have their own: Numeric figures (font-variant-numeric), Grid columns and Grid rows (grid-template-columns, grid-template-rows), Stacking order (z-index), Page template (page) and Box at a page break (box-decoration-break).
• The groups, labels and search words come from the RFML schema: each property in css.props has x-rfml-group, title where it has its own label, and x-rfml-keywords, and css.props lists the groups in order in x-rfml-groups. They are hints for tools, not part of the language (RFML §8.4). The studio's catalogue (packages/style/src/catalogue.ts) reads them.

The properties a node sets

The properties the node sets are listed under their group headings, in the groups' order, each with its field and a remove button. Removing one is one undo step.

• + Add on a heading opens the search field for that group only, shown as a chip in the field. Press Backspace at the start of the field, or the chip's ×, to search every group again.
• In the Inspector each property keeps the field it had: a list for a choice of keywords, a length or colour field, or text.
• In the Style tab each row has the property's label, as in the search list. Where the CSS name says more than the label (font-variant-numeric under "Numeric figures"), it is shown in small type under it; hovering any label shows it.
• Several nodes selected: a property set on any of them is listed. Its field says "Mixed" where they differ, and an edit changes all of them in one undo step. Nodes that lock their style are left out, with a notice (multi-edit.md).

Margin and padding: the spacing box

Margin and padding are one box in the Spacing group, in place of their ten separate rows: the margin outside, dashed, the padding inside, tinted, and a small field on each side. Under the box, the CSS it holds is shown as text (padding: 8pt 10pt, margin-bottom: 12pt).

• When it shows: when the node sets any margin or padding, as a shorthand or a side, or as soon as one is picked in the search field. Picking one side puts the cursor in that side's field.
• A field applies its value on Enter or when you leave it. Escape puts back what it showed, and an empty field removes that side. Values are lengths or tokens (var(--space-2)), offered as you type, and checked as the length fields check them.
• What it writes:
  • A side writes its own property, such as padding-top.
  • Where the shorthand is set (padding: 8pt 10pt), editing one side writes the four sides and removes the shorthand, so the other sides keep their values. That is one undo step.
  • Same on all sides, in the Spacing heading, makes an edit write the shorthand (padding: 8pt) and remove the sides.
  • Remove margin and padding, also in the heading, removes them all.
• The middle of the box shows the content's size:
  • In the Inspector, the width and height the node's style sets ("auto" where it sets none).
  • In the Style tab, with one node selected, the size the engine computes. Empty sides there also show their computed value (0pt) as a hint.
  • Nothing is shown for several nodes, or with box-sizing: border-box, where the box's size includes the padding.
• Several nodes selected: a side says "Mixed" where they differ, and an edit changes all of them in one undo step. The box compares what each side comes to, so padding: 4pt on one node and padding-top: 4pt on another agree on the top.
• In the Style tab the box edits the picked part too (::header-cell), writing to that part's style.

How sides are read and written is in packages/inspector/src/spacing.ts; the box itself is RfSpacingBox in ui/vue-kit.

Where the pieces are

Piece	Code
The search field and its list	ui/vue-kit/src/RfPropertyPicker.vue
Groups, labels, search words, ranking, Recent	packages/style/src/catalogue.ts
The Inspector's Style section	apps/designer/src/components/inspector/style/StyleFields.vue
The Style tab and the Rules editor	apps/designer/src/components/style/StylePanel.vue, RulesEditor.vue
The spacing box	ui/vue-kit/src/RfSpacingBox.vue, packages/inspector/src/spacing.ts