Module primitives
Expand description
The design system’s primitives (docs/design-language.md, “Primitives”): the only way to build
these things. Each owns its padding, radius, colour and motion; callers pass content, never
geometry or colour.
| Primitive | Is |
|---|---|
Surface / paint_surface | one of the five surface levels with its edge and shadow |
paint_document_sheet | a document that brings its own colours, on a sheet with an edge |
paint_see_through | the see-through material for chrome over pixels being chosen |
FloatingPanel / FloatingPanelFace | a floating surface with header, body and footer slots |
TextStack / TextStackFace | title, secondary and tertiary lines |
TextLineFace | one line of words in a role, measured and centred or started |
TextBlockFace | wrapped running text in one style, at a width |
paint_control_row | a Control’s fill, edge and focus ring, the list language |
Facts / FactsFace | separate facts with space between, never a joined string |
KeyHintsFace | drawn keycaps and what they do |
BarControlFace | a top bar or window bar control |
ActivityCardFace | an activity’s card on the floating layer |
BarChip / BarChipFace | a bar control holding a face stack, a label and a press |
IconButton | a square icon button whose name is required |
DisclosureRow | a row whose body opens in place |
DensityRegion | a region laid out at compact (or comfortable) density |
QuickTileFace / paint_level_gauge | a Quick Settings tile’s ground, ink and chevron rule; a charge gauge |
StatusCluster / StatusClusterFace | the bar’s status cluster: slots, a count and the critical-battery wash |
The rest of the set is the existing shared widgets, restyled on the tokens:
crate::widget::Button (primary, secondary, quiet = crate::widget::ButtonRole::Plain,
destructive), crate::widget::Chip (people, tags, filters only), crate::widget::Toggle,
crate::widget::Checkbox, crate::widget::ToggleGroup (segmented),
crate::widget::Slider, crate::widget::ListRow, crate::widget::Section,
crate::widget::PropertyList, crate::widget::Breadcrumb,
crate::widget::EmptyState, crate::widget::Banner and the toast.
Structs§
- Activity
Card Face - An activity’s card, ready to paint: what it says, what its own controls are called out loud, and what the person is doing to it.
- BarChip
- A bar chip as a retained widget: the
BarChipFace’s content with its own press. - BarChip
Face - One bar chip’s content and state, borrowed. Built by the caller each
frame;
Self::paintdraws it and hands back where its parts landed. - BarChip
Layout - Where a
BarChipFacepainted its parts. - BarChip
Props - One bar control that stands for people: their faces, a label and a press. A chip with faces
opens who is here, an invite opens the host’s own invite flow; a press reaches the view’s
pressevent, which is the same action the palette, scripts and agents invoke. - BarControl
Face - A bar control’s content and state, borrowed.
- Declared
Modal - A modal driven from a view: its answers and its dismissal reach the view’s events.
- Declared
Panel - A floating panel whose body, header and footer may change by key.
- Declared
Popover - A popover whose content may change by key.
- Declared
Popover Button - A popover button whose content may change by key.
- Density
Region - A region of a window laid out and drawn at another density
(
crate::tokens::Density): a data-heavy sidebar or list at compact while the rest of the window stays comfortable. Rows, rhythm and tables inside it take the region’s density; controls and text keep their size. - Disclosure
Group - Rows that keep one open at a time. Clone it into every row of the group;
a view that rebuilds its rows keeps the group and keys the rows
(
DisclosureRow::keyed). - Disclosure
Row - A row that opens its body in place.
- Disclosure
RowProps - A row whose body opens in place under it: a device’s details, a run’s log, a setting’s options. Its chevron turns as it opens, and what follows moves down with it. A press on the row, Enter or Space opens and closes it.
- Disclosure
State - Whether a disclosure row is open, its reveal and its body’s open height: what outlives the row when the view that owns it rebuilds it. Clones share one state.
- Fact
- One fact: an optional icon from the icon set and its text.
- Fact
Props - One fact of a row of facts: its text, and a glyph before it.
- Facts
- A retained
FactsFace. - Facts
Face - A row of facts, borrowed.
- Facts
Props - Separate facts in one row, each an optional glyph and its text, with space between them and no separator glyph: “12 files”, “3 MB”, “Edited today” are three facts. Where the row is too narrow, the facts that matter least give way first.
- Floating
Panel - A retained floating panel: a header slot, a body and a footer slot.
- Floating
Panel Face - A floating panel’s shape: how tall its header and footer are and whether its body holds anything.
- Floating
Panel Layout - Where a floating panel’s parts stand, from
FloatingPanelFace::layout. - Floating
Panel Props - A floating panel a view places itself: a header slot, a body and a footer slot, on the floating material.
- Icon
Button - The square icon button. Each constructor requires the accessible name, which is also the tooltip; there is no way to make an unnamed one.
- KeyHint
- One hint: the keys of a chord, as printed on the keyboard, and what pressing them does.
- KeyHint
Props - One hint of a strip: the keys of a chord and what pressing them does.
- KeyHints
- A retained strip of key hints: a chord’s drawn keycaps on a row’s
trailing edge (a shortcut that cannot be changed), or several chords
side by side, a
siblinggap apart. Never a joined string. - KeyHints
Face - A strip of key hints, borrowed.
- KeyHints
Props - Shortcuts and what they do, side by side: each hint the drawn keycaps of a chord and its label (“Enter Save”, “Esc Cancel”), in the person’s own keyboard legends. Never a sentence with a separator glyph.
- Link
Status - The machine’s link, as a surface draws it: what it is, what it is called, and how strong its signal is.
- Modal
Props - A question over the window: a dimmed page, a sheet with a title, the view’s content, and up to three answers. Escape or a click on the scrim closes it; Enter fires the main answer, except in a destructive question, where Enter is the safe one.
- Notification
List Layout - Where a painted notification list put its parts.
- Notification
List View - What the list paints and hit-tests: its rows, its paging, its empty state and the host’s cursor.
- Notification
RowControls - A row’s trailing controls, where they stand.
- Popover
Button Props - A button that opens a popover anchored to itself: a filter’s options, a share sheet, a picker of values. A press opens it, and it closes by a second press, Escape, or a press outside it.
- Popover
Props - A menu or a small form beside its control: the one anchored floating panel. The view’s content is inside it.
- Quick
Tile Face - A Quick Settings tile’s ground: its switch half (
main) and, when it has a section, its chevron half (expand). - Status
Cluster - The cluster’s one control: its slots, the state they share and how it tells the degrees that matter.
- Status
Cluster Face - One slot’s drawing, as a bar control’s glyph.
- Status
Cluster Layout - Where a painted cluster put its parts, for hit-testing and for the accessibility tree.
- Surface
- A retained surface of one level around one child, padded by the
level’s rhythm. A
Surfaceinside a surface of the same level paints no ground of its own. - Text
Block Face - A block of wrapped text in one style, starting at its rect’s leading top corner and wrapping to the rect’s width: a reader’s body, a page’s paragraph, a note’s prose. The shared way to paint running text on a surface a host owns; the host never draws it run by run.
- Text
Line Face - One line of words in a role, measured and centred on a point or aligned in a box: the bar’s clock reading, a live activity’s headline, an overlay’s timer. It is the shared way to put a single string on a surface; a host never draws a bare text run of its own.
- Text
Stack - A retained
TextStackFace. - Text
Stack Face - A text stack’s lines, borrowed, and how to paint them.
- Text
Stack Props - A title over a secondary line, with an optional third line under it, in fixed roles and at fixed gaps: a file’s name over its folder, a person over their role. Each line is one line, cut short with an ellipsis; two facts never share a line.
Enums§
- Link
Kind - What kind of connection the machine’s link is.
- Notification
List Control - What the person asked of the list.
- Notification
List Row - One row of the list.
- Stack
Size - How prominent a stack’s title is.
- Status
Slot - What one slot of the cluster shows.
- Surface
Level - Text
Line Align - Where a
TextLineFacestands in the rect it is given.
Functions§
- badge_
label - The bell’s count as it reads:
9+once it needs a second digit, since two digits would crowd the bar. - badge_
size - A count badge’s size:
s1of padding above and below the line,s1either side, never shorter thans4nor narrower than it is tall. - control_
fill - A Control’s fill: the shared hover tier when hovered, otherwise a quiet floor on the same ramp, so a row reads as a surface rather than bare text on the panel. Both states sit on one ordered ramp, so hover is always the more prominent.
- control_
radius - The Control radius for
rect(radii.control). - paint_
control_ row - Paint one Control: its fill with the derived rest edge at the Control
radius, and the toolkit’s 2 px focus ring when
focused. The one painter for every tile, card, power row, edit row and list row a host draws, so they cannot drift apart. - paint_
document_ sheet - A document set on a reader: a page that brings its own colours (an HTML
mail on its light sheet, a web page), drawn by
contentand clipped to the raised level’s radius, with the hairline derived from the window content it stands on just inside its edge, so a sheet as light as that content still has one. - paint_
level_ gauge - A charge gauge at
rect: a rounded rim in the secondary ink, filled tolevel(0 to 1) in the primary ink. - paint_
see_ through - Paint the see-through material over
rectatradius: half the panel ground over the blurred backdrop, its floating shadow outside it only (a shadow under the body would darken what shows through) and the floating hairline. Only for chrome over pixels the person is choosing (docs/design-language.md, “Material and transparency”). Returns the theme a child standing on it paints with. - paint_
severity_ rail - The rail a warning or a failure keeps beside its text, so a row’s status is scannable without taking another line; plain information carries no colour, so the rail means something wherever it appears.
- paint_
surface - Paint
leveloverrect: its shadow, its fill and its edge. Returns the theme a child standing on it paints with (Theme::on_ground): ink, lifts and the raised well re-measured against the level’s fill. - paint_
unread_ badge - The unread count on a running application’s own icon: the badge a sidebar’s unread count wears, filled in the person’s colour.