Module chrome 

Reusable chrome — the framed UI around content. Two layers, not the same thing: application chrome (page, status_bar and the crate::widget::Toolbar) is the frame an app draws around its own content (the app owns button specs and click handling, the toolkit owns the look); shell chrome (shell) is the vocabulary the OS paints in around and between apps — top bar, window decorations, workspace disc, quick settings, collaborator surfaces (see crates/sdk/ui-core/HIG.md §9).

Modules

header_row

The window’s header row as a face: one geometry for NavShell and for every painted app.

marks

Marks a surface draws over the things on it while a person picks them: the band a drag sweeps out, and the ring around what is selected. One look for every surface that selects by dragging (the workspace canvas, a board, a slide), from the theme’s selection colours.

nav_row

One navigation row and one navigation section header, painted the same everywhere.

page

A centered document “page” — a sheet of paper with a soft drop shadow, the familiar surface for document apps (word processor, viewers). Layout is split from drawing because the page’s height usually depends on content laid out against PageGeometry::content_width first.

selector

One painter for everything you choose one of: the window group’s tab strip, an in-app TabBar, the segments of a ToggleGroup and the top bar’s selectors (crates/sdk/ui-core/HIG.md §9.3).

shell

The shared vocabulary the OS’s own chrome is drawn from.

status_bar

The status bar: persistent status at the bottom edge of a window region.

Structs

HeaderRowFace

The geometry of one header row. See the module docs.

HeaderRowMetrics

The header row’s sizes, resolved against one theme.

NavRowFace

Everything a navigation row shows. Build with NavRowFace::new and paint with paint_nav_row.

NavRowLayout

Where each part of a navigation row lands. Painting and hit-testing both read it.

NavSectionFace

A section header in a navigation list.

NavSectionLayout

Where each part of a section header lands.

PageGeometry

Where a centered page sits within a canvas, plus its inner content band.

RowJoin

Which neighbours of a selected row are selected too. A run of selected rows reads as one lift: the corners where two lifted rows meet are square, so the run has no notch between its rows.

SelectionState

The three inputs that decide how a chosen-from control looks.

SelectionTier

How one control paints for one frame.

Enums

ChromeRole

What a chrome surface is. Picking the role fixes radius, surface and border together, so two surfaces of the same role are consistent without their authors having to coordinate.

NavCount

How many items a navigation row stands for, beside its label.

NavRowStyle

A row laid out as a list row or as a tile in an icon-over-label rail.

SelectorRole

What of a selector is painted.

Constants

GLOW_ALPHA

Alpha of the inset stroke that gives an active control its inner glow.

HAIRLINE_ALPHA

Alpha of the hairline that gives a lifted control a defined edge.

PANEL_BORDER_ALPHA

Alpha of the edge around a floating ChromeRole::Panel. Heavier than a control’s hairline because a panel must separate itself from whatever content it floats over, not just a surface already in view — on high-contrast it’s the only thing that does (see panel_ground).

SELECTION_MIN_STEP

Smallest OKLCH lightness step between a selected row and the ground it stands on for the selection to read. Lightness, not relative luminance: luminance compresses at the dark end, where a perfectly visible step measures under a light-theme threshold.

Functions

chrome_hairline

A separator or edge drawn on a chrome surface. Derived against the ground it sits on rather than a declared border_standard, which doesn’t track what’s under a translucent panel and either vanishes on one theme or glares on another.

column_gutter

The content edge of a window’s overview or content column, from the column’s leading edge: where the shell starts the column’s header title, and so where the column’s rows, headings and fields start their text. A list painted edge to edge in a column puts its rows’ outer rects at column_gutter - row_bleed.

disclosure_gutter

The gutter a disclosure chevron hangs in, left of the content it opens (icon_sm and the gap to what follows it): the one step a list indents a nested row by, so a row’s chevron stands in the gutter of its own depth and the rows’ content keeps one column.

fill_scrim

Paint a scrim over rect at strength, in the theme’s own scrim hue.

lightness_step

OKLCH lightness distance between two colours.

nav_badge_column

The width of the badge column a section’s rows share: the widest of codes on its pill.

nav_item_height

Height of a list row that carries a secondary line and/or a usage bar under its label: the stacked text inside the row’s s2 padding, never shorter than nav_row_height.

nav_list_width_fitting

How wide an icon-led list of these destination labels must be for every label to stand whole beside its icon: the row’s padding, its icon and gap, and the widest label. Where a sidebar is narrower than this, its destinations read better as a rail’s tiles than as cut-off rows, so this is where a navigation sidebar turns from rail into list.

nav_rail_item_height

Height of the rail tile for label in a rail width wide: one caption line more than nav_rail_row_height when the caption wraps.

nav_rail_row_height

Height of one rail tile: the icon over a caption line inside the row padding.

nav_row_description

The spoken form of a row’s extra parts, for its accessible description: the secondary line, the meta, the state.

nav_row_height

Height of one list row: crate::tokens::Metrics::nav_row_height, grown with the body line at large text.

nav_row_layout

Lay out face inside its row (see NavRowLayout).

nav_section_height

Height of a section header. Every section after the first is separated from the rows above it by s3 of space, not by a line.

nav_section_layout

Lay out a section header (see NavSectionLayout).

paint_alignment_guide

An alignment guide: the line a dragged object lines up with while it is near enough to snap (a display on the arrangement canvas, a shape on a slide), from from to to. The accent as a mark on a surface, one chrome rule wide; drawn only while the drag is snapped to that line.

paint_history_control

Paint the window’s History control in rect: the History glyph as a Plain icon button, on (the selection lift) while History shows. The same face NavShell and the window’s own bar draw; a painted app routes its presses through a crate::widget::HistoryOpener.

paint_nav_row

Paint one navigation row. theme is the theme of the ground the row stands on; its surfaces.content is that ground.

paint_nav_section

Paint a section header: the title in Subheading, secondary ink; a collapsible section’s chevron while the pointer or focus is on it (or while it is collapsed, so a hidden section is never mistaken for an empty one); and its trailing action.

paint_row_selection

Paint the selection of one row of a list: the hover or active lift of ground (selection_tier_on) on rect with the item radius (radii.item), and nothing for an idle row. A row is a lift with primary ink and nothing else: no hue, no border, no leading bar.

paint_row_selection_joined

paint_row_selection for a row inside a run of selected rows: the corners shared with a lifted neighbour are square, so adjacent selected rows join into one lift (a multi-selection in a mail list).

paint_selected_ring

The ring around a selected object of radius on a surface: the accent, twice the drag line wide, just outside the object so it never covers it.

paint_selection_band

The selection band a drag sweeps out over a surface: the selection tint with an accent edge, line wide (the theme’s drag line).

paint_selector

Paint one selector: a strip body or an item, on shape.

panel_border

The edge of a floating ChromeRole::Panel, stroked on its outermost pixel row: the design language’s inner hairline (white at 7 % on a dark material, black at 8 % on a light one, crate::tokens::Elevation::floating_edge). High contrast draws the full-strength edge (PANEL_BORDER_ALPHA), where it is the only thing separating a panel.

panel_ground

The opaque colour a chrome surface is built from: the floating level, surfaces.overlay, verbatim (docs/design-language.md, “Surfaces”). A floating surface separates by its level, its two-layer shadow and its inner hairline together, never by drifting off its level.

panel_shadow

Lay down a floating panel’s elevation, clipped to the ring outside its own silhouette. The shadow is crate::surface::shadow, a blur of the panel’s own rounded rect (so it stays even around a corner instead of showing a flat-edged ghost of a square one). The ring clip stays even though chrome is opaque: a blurred rect is solid in the middle, and a half-faded panel (intensity) must not darken its own interior on the way in.

rail_caption_fits

Whether label stands whole in a rail tile width wide: on at most two caption lines, broken only at spaces, with nothing elided.

rail_caption_lines

A rail caption broken into at most two lines of max_w, only at spaces: a single word never breaks inside, it elides when it is longer than the line, and so does the second line.

rail_width_fitting

How wide a rail of these destination labels is: its stock width, grown with the text so its longest single word fits whole, but never past the stock width times the text’s growth nor metrics.rail_max_width. A fragment such as “Cha…” names nothing, so the rail widens before any word is shortened; only past that cap does a word elide.

row_bleed

How far a row’s hover and selection lift, and a zebra stripe, bleed past the column’s content edge on each side (s2).

scrim_channel

What fill_scrim does to one 8-bit channel behind it, given that channel of the scrim hue: the same tone and level stages, for a host that composites a scrim on the CPU (a cached frame) instead of through the shader.

scrim_maps

What fill_scrim does to one 8-bit grey behind it, as a pure function so the property the two fills are for can be asserted without a GPU. Must mirror the shader: soft light against black is Cb² (W3C compositing) composited lerp(Cb, Cb², αs), then an ordinary source-over of the theme’s scrim hue for the level stage.

selection_floor

The rest face of a control with its own floor on ground: the idle rung of selection_floor_ramp, for the painters that keep the floor under every state themselves.

selection_floor_ramp

The face of a control that has its own floor (a filled rest face rather than a transparent one), for state, standing on ground: one ordered ramp from the ground, so rest, hover and active are each further from the ground than the last on every material, and no state mixes a floor with the transparent tier.

selection_tier

Resolve one control’s appearance. This is the only way the shell expresses “which one is chosen” — active tab, active workspace, active strip, selected row, chosen scope chip, current power profile.

selection_tier_on

selection_tier for a control that sits on ground rather than on surfaces.base: a list row on a sidebar, a menu row on panel_ground, a card on a sheet. The active fill is one surface step of that ground (Colors::lift_on) and hover is half a step, so a selection is the same lift on every ground, including a raised or white one where a lift of the desktop would vanish into it.

selector_finish

The finish this theme paints selectors with: the theme’s own, or SelectorFinish::OPAQUE where nothing may be translucent.

selector_tier

How one selector on ground paints for state.

sidebar_rail_width_fitting

How wide a sidebar’s rail of these destination labels is: its stock width, grown so its longest single word fits whole, up to metrics.rail_max_width. A sidebar the person can widen into a list grows its rail to the word before it shortens one (“Subscriptions”, never “Subscript…”); a fixed rail keeps rail_width_fitting’s cap.

strip_ground

The ground a docked strip’s items stand on: the panel ground its material is tinted with, which is also the whole of it where nothing is blurred. On a light palette it stays one surface step below white, so the active tab can rise a full step toward the light above it.

strip_shape

The capsule a strip of selectors at rect is drawn as, concentric with items inset inset inside it at item_radius.