​

Dimension

This page groups the main patch size families.

It is a working guide for the UI layer, separate from the deeper theory in @domphy/theme. The goal here is practical classification: which patches share the same visual height model, and where the boundaries stop being obvious.

All dimension values are spacing units (U).

  • base unit: U = fontSize / 4
  • text lines: n = number of intrinsic text lines inside the element
  • wrapping level: w = structural wrapping level of the element boundary
  • density factor: d = themeDensity(listener)
  • theme base density: d = 1.5
  • paddingBlock = d * w * U
  • paddingInline = ceil(3 / w) * d * w * U for w >= 1
  • paddingInline = 2dU for bounded inline w = 0; otherwise 0
  • radius = paddingBlock = d * w * U
  • height = (n * 6 + 2 * d * w) * U

The table below shows the resulting height for each patch family at the default density factor d = 1.5. Every numeric cell is a final height in U or px. Rows with n/a are not height-defined by this formula. Multi-part or behavior-first patches such as Card, Command, Input OTP, Splitter, Toggle, and toggleGroup() are documented on their own pages.

Density levels: [0.75, 1, 1.5, 2, 2.5]

Patch familyHeight
(Separators) Horizontal Rule1px
Progress, Popover Arrow2U
Input Checkbox, Input Radio, Input Range, Input Switch4U
Code, Keyboard, Mark, Abbreviation, Badge, Breadcrumb Ellipsis, Button Switch, Divider, Emphasis, Heading, Icon, Label, Link, Small, Spinner, Strong, Subscript, Superscript, Tag, Skeleton, Toggle6U
Breadcrumb, Ordered List, Paragraph, Unordered List, Description List6nU
Avatar, Button, Combobox, Input Color, Input Date Time, Input File, Input Number, Input Search, Input Text, Menu Item, Pagination, Select, Select Box, Select Item, Select List, Tab, Tooltip9U
Table9nU
Alert, Blockquote, Details, Figure, Image, Popover, Preformated, Tabs, Textarea, Toast(6n + 6)U
(Layout Regions) Dialog, Drawer, Form Group, Menu, Tab Paneln/a
(Behavior) field(), Form, TransitionGroupn/a

The formula applies to elements at or above the 6U baseline, the height of one body text line. The table uses the current theme base density at d = 1.5. Elements intentionally sized below this baseline follow a proportional sub-scale of 2U / 4U / 6U, so they stay fixed across density levels unless their own patch defines another rule.

This page can evolve as the UI principles get refined. For the underlying tone and size theory, see Theme Theory and Theme Tone.