Struct MetricTokens 

#[non_exhaustive]
pub struct MetricTokens {

    pub control_xs: Pixels,
    pub control_sm: Pixels,
    pub control_md: Pixels,
    pub control_lg: Pixels,
    pub control_padding_xs: Pixels,
    pub control_padding_sm: Pixels,
    pub control_padding_md: Pixels,
    pub control_padding_lg: Pixels,
    pub row_sm: Pixels,
    pub row: Pixels,
    pub row_lg: Pixels,
    pub title_bar: Pixels,
    pub title_bar_content_offset: Pixels,
    pub window_controls_position: Pixels,
    pub window_controls_inset: Pixels,
    pub window_control_width: Pixels,
    pub sidebar_width: Pixels,
    pub sidebar_width_range: Range<Pixels>,
    pub icon_sidebar_width: Pixels,
    pub sidebar_sheet_breakpoint: Pixels,
    pub sidebar_sheet_width: Pixels,
    pub resize_handle: Pixels,
    pub focus_ring: Pixels,
    pub field_height: Pixels,
    pub field_padding_x: Pixels,
    pub field_padding_y: Pixels,
    pub scrollbar_thumb: Pixels,
    pub scrollbar_thumb_active: Pixels,
    pub scrollbar_inset: Pixels,
    pub switch_track_width: Pixels,
    pub switch_track_height: Pixels,
    pub switch_thumb_size: Pixels,
    pub switch_thumb_inset: Pixels,
    pub slider_track: Pixels,
    pub slider_thumb: Pixels,
    pub slider_tick: Pixels,
    pub radio_size: Pixels,
    pub radio_dot: Pixels,
    pub ring_size: Pixels,
    pub ring_stroke: Pixels,
    pub attachment_tile: Pixels,
    pub model_picker_width: Pixels,
    pub model_picker_height: Pixels,
    pub model_picker_rail: Pixels,
    pub model_row: Pixels,
    pub model_header: Pixels,
    pub status_tab_height: Pixels,
    pub status_tab_gap: Pixels,
    pub status_label_gap: Pixels,
    pub status_tab_inset: Pixels,
    pub menu_gap: Pixels,
    pub menu_min_width: Pixels,
    pub menu_search_min_width: Pixels,
    pub menu_max_width: Pixels,
    pub menu_max_height: Pixels,
    pub dialog_width: Pixels,
    pub dialog_padding: Pixels,
    pub command_dialog_width: Pixels,
    pub command_dialog_top: Pixels,
    pub folder_list_height: Pixels,
    pub tab_surface_inset: Pixels,
    pub tab_width: Pixels,
    pub tab_min_width: Pixels,
    pub tab_shoulder: Pixels,
    pub tab_radius: Pixels,
    pub tab_separator_gutter: Pixels,
    pub tab_separator_inset: Pixels,
    pub tab_icon: Pixels,
    pub tab_content_gap: Pixels,
    pub tab_control: Pixels,
    pub tab_close: Pixels,
    pub tag_height: Pixels,
    pub tag_icon: Pixels,
    pub badge_count: Pixels,
    pub badge_count_text: Pixels,
    pub badge_count_offset: Pixels,
    pub badge_dot: Pixels,
    pub badge_icon: Pixels,
    pub avatar_sm: Pixels,
    pub avatar_md: Pixels,
    pub avatar_lg: Pixels,
    pub avatar_initials_sm: Pixels,
    pub avatar_initials_md: Pixels,
    pub avatar_initials_lg: Pixels,
    pub avatar_group_overlap: Pixels,
    pub avatar_group_ring: Pixels,
    pub terminal_padding: Pixels,
    pub terminal_cursor_thickness: Pixels,
    pub dock_handle_width: Pixels,
    pub dock_handle_height: Pixels,
    pub dock_handle_icon: Pixels,
    pub dock_handle_reveal: f32,
    pub dock_drag_threshold: Pixels,
    pub dock_card: Size<Pixels>,
}

The sizes gpui-cn components are built from.

Control and row sizes are on the rem scale, so they follow the UI font size. Window chrome and layout widths are fixed pixels: the platform draws its window controls at one size, and a sidebar’s width is a layout decision, not a text one.

Fields (Non-exhaustive)

Non-exhaustive structs could have additional fields added in future. Therefore, non-exhaustive structs cannot be constructed in external crates using the traditional Struct { .. } syntax; cannot be matched against without a wildcard ..; and struct update syntax will not work.

control_xs: Pixels

Height of an Xs control: 20px.

control_sm: Pixels

Height of an Sm control: 24px.

control_md: Pixels

Height of a Default control: 28px, the common height in the reference app.

control_lg: Pixels

Height of an Lg control: 32px, the largest in the reference app.

control_padding_xs: Pixels

Side padding of an Xs control: 6px.

control_padding_sm: Pixels

Side padding of an Sm control: 8px.

control_padding_md: Pixels

Side padding of a Default control: 10px.

control_padding_lg: Pixels

Side padding of an Lg control: 18px.

row_sm: Pixels

Height of a small list row: 28px.

row: Pixels

Height of a list row, a tooltip, a sidebar row: 30px.

row_lg: Pixels

Height of a large row with an avatar or two lines: 48px.

title_bar: Pixels

Height of a title bar: 38px, measured from the tab reference app. The sidebar reference app uses 46px.

title_bar_content_offset: Pixels

The gap between a title bar’s top and the line its content centers on: 2px, measured from the tab reference app, which keeps its bar content level with the window controls below the window’s rounded top edge.

window_controls_position: Pixels

Where the macOS window controls sit: 14px from the top and left, measured from the tab reference app, which centers them on the title bar’s content line.

window_controls_inset: Pixels

The room the macOS window controls take at a title bar’s left edge, including the gap after them: 88px.

window_control_width: Pixels

The width of one Windows or Linux window control: 46px.

sidebar_width: Pixels

The width a sidebar opens at: 300px.

sidebar_width_range: Range<Pixels>

The widths a sidebar can be dragged to: 220px to 480px.

icon_sidebar_width: Pixels

The width of a sidebar collapsed to icons: 48px.

sidebar_sheet_breakpoint: Pixels

The window width under which a sidebar floats over the content as a sheet instead of sitting beside it: 768px, shadcn’s mobile breakpoint.

sidebar_sheet_width: Pixels

The width of a sidebar shown as a sheet: 288px, shadcn’s SIDEBAR_WIDTH_MOBILE of 18rem.

resize_handle: Pixels

The pointer target of a resize handle, centered on the edge: 8px.

focus_ring: Pixels

The spread of the keyboard focus ring outside a control: 3px.

field_height: Pixels

The height of a single-line text field: 32px, measured from the reference app’s search and settings text fields at 2x, a step taller than its 28px buttons and select triggers, so control_lg. On touch it is control_md, the 44pt hit target.

field_padding_x: Pixels

The side padding of a single-line text field: 12px, measured from the reference app’s search field at 2x. A multi-line field keeps control_padding_md, the 10px its settings textarea measures.

field_padding_y: Pixels

The padding above and below the lines of a multi-line field: 8px, measured from the reference app’s settings textarea at 2x, the same step as control_padding_sm.

scrollbar_thumb: Pixels

The width of a scrollbar’s thumb at rest: 7px, the knob of a macOS overlay scroller, which the reference app’s web view shows.

scrollbar_thumb_active: Pixels

The width of the thumb while the pointer is on the bar or drags it: 11px, the expanded knob of a macOS overlay scroller.

scrollbar_inset: Pixels

The gap between the thumb and the edge of the scroll region: 2px.

switch_track_width: Pixels

The width of a switch’s track: 32px, measured from the reference app at 2x. On touch it is the 51px of a UISwitch.

switch_track_height: Pixels

The height of a switch’s track: 20px from the reference app, 31px of a UISwitch on touch.

switch_thumb_size: Pixels

The diameter of a switch’s thumb: 16px from the reference app, 27px of a UISwitch on touch.

switch_thumb_inset: Pixels

The gap between the thumb and the track’s edge: 2px on both. On touch it is fixed with the track, so the thumb always fits.

slider_track: Pixels

The height of a slider’s track: 4px, the thin rail of a macOS slider.

slider_thumb: Pixels

The diameter of a slider’s thumb: 16px, shadcn’s size-4.

slider_tick: Pixels

The diameter of a tick on a slider with stops: 4px, as thick as the track, so a dot on the rail reads as a stop and not a bump.

radio_size: Pixels

The diameter of a radio’s ring: 16px, shadcn’s size-4.

radio_dot: Pixels

The diameter of a radio’s dot: 6px, three quarters of shadcn’s size-2, which sits better in the filled disc this radio paints.

ring_size: Pixels

The diameter of a progress ring: 16px, the context meter of the composer’s status tab. Not measured from the reference app.

ring_stroke: Pixels

The stroke of a progress ring: 2px, the same source.

attachment_tile: Pixels

The side of an attachment tile: 56px (composer design spec; not measured from the reference app).

model_picker_width: Pixels

The width of the model picker’s panel: 361px, measured from the reference app’s picker at 2x (722px from edge to edge).

model_picker_height: Pixels

The height of the model picker’s panel: 346px, the same screenshot (693px). The panel never changes height: a short result leaves room, an empty one centers its message in the list, and a long one scrolls inside it.

model_picker_rail: Pixels

The width of the provider rail at the picker’s left: 44px, the same screenshot (89px).

model_row: Pixels

The height of a two-line model row: 47px, the same screenshot, where rows are 94px apart.

model_header: Pixels

The height of the picker’s search row, from the panel’s top edge to the underline: 42px, the same screenshot (83px).

status_tab_height: Pixels

The height of a composer’s status tab: 38px, measured from the reference composer screenshots at 2x (76px from the top of the tab to the top of the card).

status_tab_gap: Pixels

The gap between the items of a status tab: 28px, the same screenshots (56px between two items).

status_label_gap: Pixels

The gap between a status item’s icon and its text: 8px, the same screenshots (15px, rounded up to the step).

status_tab_inset: Pixels

How far the status tab is inset from each side of the card: 14px, the same screenshots (27px).

menu_gap: Pixels

The gap between a select trigger and its menu: 2px, measured from the reference app at 2x.

menu_min_width: Pixels

The narrowest a menu opens: 128px, shadcn’s min-w-[8rem]. A menu is never narrower than its trigger either.

menu_search_min_width: Pixels

The narrowest a menu with a search field opens: 240px, the width of the reference app’s language list, so the field has room for its placeholder.

menu_max_width: Pixels

The widest a menu grows to fit its rows: 360px, the width the reference app wraps a row’s description at.

menu_max_height: Pixels

The tallest a menu grows before it scrolls: 390px, the reference app’s language list.

dialog_width: Pixels

The width of a dialog: 480px. Measured from the reference app’s folder dialog at 2.2x, where the 32px field is 71px and the dialog is 1040px wide (473px), rounded to shadcn’s usual step.

dialog_padding: Pixels

The padding around a dialog’s content: 20px. Measured from the same screenshot (about 18.5px), rounded to the 20px step.

command_dialog_width: Pixels

The width of a command dialog: 512px, shadcn’s max-w-lg (32rem). This value comes from shadcn, not from the reference app.

command_dialog_top: Pixels

How far a command dialog sits below the top of the window: 120px, so it rests in the upper third as Spotlight does, and does not move when its content changes height. This is gpui-cn’s own choice: only the width comes from shadcn, and neither comes from the reference app.

folder_list_height: Pixels

The height of the folder picker’s list: 6.5 rows, so the last row peeks over the edge and shows that the list scrolls. Measured from the reference app’s folder dialog: the list is 181px tall at 2.2x beside 28px rows.

tab_surface_inset: Pixels

The gap between the top of a tab item and its surface: 4px, measured from the tab reference app. On touch the tab fills its bar.

tab_width: Pixels

The width a tab prefers: 160px, measured from the tab reference app.

tab_min_width: Pixels

The width a tab shrinks to before the strip scrolls: 112px, measured from the tab reference app.

tab_shoulder: Pixels

The curve at each bottom corner of the selected tab, where it merges into the content below: 7px, measured from the tab reference app.

tab_radius: Pixels

The radius of a tab surface’s top corners: 7px, measured from the tab reference app.

tab_separator_gutter: Pixels

The gutter at an unselected tab’s right edge that holds the separator: 7px, measured from the tab reference app.

tab_separator_inset: Pixels

The inset of the 1px separator from the tab item’s top and bottom: 11px, measured from the tab reference app.

tab_icon: Pixels

The box of a tab’s icon: 13px, measured from the tab reference app.

tab_content_gap: Pixels

The gap between a tab’s icon and its label: 6px, measured from the tab reference app.

tab_control: Pixels

The slot that holds the new-tab and scroll controls of a tab strip: the height of an Sm control, which the controls are. 24px at the default font size, measured from the tab reference app.

tab_close: Pixels

The box of a tab’s close control: the height of an Xs control, which the control is. 20px at the default font size, measured from the tab reference app.

tag_height: Pixels

The height of a tag: 20px, shadcn’s badge h-5.

tag_icon: Pixels

The size of an icon in a tag: 12px, shadcn’s badge size-3.

badge_count: Pixels

The height and least width of a badge count: 16px, gpui-kit’s medium badge.

badge_count_text: Pixels

The text of a badge count: 10px, gpui-kit’s badge text.

badge_count_offset: Pixels

How far a badge count sits past the corner of its element: 4px, so it overlaps the corner as gpui-kit’s does.

badge_dot: Pixels

The diameter of a badge dot: 6px, gpui-kit’s dot.

badge_icon: Pixels

The circle of a badge icon: 16px, gpui-kit’s medium badge.

avatar_sm: Pixels

The diameter of a Sm avatar: 24px, shadcn’s size-6.

avatar_md: Pixels

The diameter of a Default avatar: 32px, shadcn’s size-8.

avatar_lg: Pixels

The diameter of a Lg avatar: 40px, shadcn’s size-10.

avatar_initials_sm: Pixels

The initials size in a Sm avatar: 10px, so two capitals fit the 24px circle and stay clear of an overlapping neighbor.

avatar_initials_md: Pixels

The initials size in a Default avatar: 12px, shadcn’s text-xs.

avatar_initials_lg: Pixels

The initials size in a Lg avatar: 14px, shadcn’s text-sm.

avatar_group_overlap: Pixels

How far each avatar in a group covers the one before it: 8px, shadcn’s -space-x-2.

avatar_group_ring: Pixels

The ring that parts overlapped avatars: 2px, shadcn’s ring-2.

terminal_padding: Pixels

The room around a terminal’s grid: 2px, Ghostty’s default window-padding-x and window-padding-y, from src/config/Config.zig and ghostty +show-config --default. The room is painted in the terminal’s background, as Ghostty’s default window-padding-color = background does. Fixed, because the grid follows the code font size, not the UI font size.

terminal_cursor_thickness: Pixels

The width of a bar cursor and the height of an underline cursor in a terminal: 2px, chosen to stay visible at every code font size.

dock_handle_width: Pixels

The width of the grab handle at the top center of a dock pane: 80px, handleSize in Ghostty’s macos/Sources/Ghostty/Surface View/SurfaceGrabHandle.swift.

dock_handle_height: Pixels

The height of the grab handle: 12px, Ghostty’s handleSize. On touch it is the 44pt hit target.

dock_handle_icon: Pixels

The ellipsis in the grab handle: 12px, the handle’s own height.

dock_handle_reveal: f32

The share of a pane’s height, from its top edge, in which the pointer reveals the grab handle: 20%, Ghostty’s hoverHeightFactor.

dock_drag_threshold: Pixels

How far the pointer moves from a press on the grab handle before the pane lifts: 6px, the drag threshold of Trellis (Tv=6 in its bundle).

dock_card: Size<Pixels>

The floating card a lifted pane becomes, clamped to the pane: 380x260, the compact drag size of Trellis (ou={w:380,h:260} in its bundle).

Trait Implementations

impl Clone for MetricTokens

fn clone(&self) -> Self

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Debug for MetricTokens

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl PartialEq for MetricTokens

fn eq(&self, other: &Self) -> bool

Equality operator ==.

fn ne(&self, other: &Rhs) -> bool

Inequality operator !=.

impl StructuralPartialEq for MetricTokens