style

The canonical zui style schema. This module is the single source of truth for every key the renderer consumes: widget builders annotate their style opt with ZuiStyle?, so the LSP autocompletes and checks every key and value shape at the call site.

The types are global (--!global-types), so annotate with ZuiStyle / ZuiThemeTokens / ZuiDockStyle directly without requiring the module.

Types

• ZuiStyle — per-widget inline style. Covers fill and text colors (background, backgroundHover, color, …), border and corners (borderColor, borderWidth, borderRadius), focus ring, box model (padding, margin + per-side overrides), sizing (width, height, min/max, overflow), text (fontSize, fontFamily, fontWeight, textAlign, …), container layout (gap, align, justify), flex child sizing (flex, flexGrow, flexShrink, flexBasis), out-of-flow positioning (position, left/top/right/bottom), depth and decoration (shadow, elevation, backgroundImage, backgroundShader), button-only keys (iconColor, suffixColor, suffixSize), and CSS-parity aliases (backgroundColor, alignItems, justifyContent).
• ZuiThemeTokens — the global theme vocabulary. A theme's tokens map drives egui's global Visuals (chrome on every container, window, widget, scrollbar, shadow). Named tokens cover surface fills, strokes, foreground/text, corner radius, hover/active growth, spacing, window/popup shadow, and scrollbar width. Values are strings (a ZuiColor for color tokens, a stringified number for numeric ones). A [string]: string indexer lets a theme define its own user-extensible design tokens, referenced via $name.
• ZuiDockStyle — typed egui_dock chrome for the Z.dockArea dockStyle opt: tabBarBackground, tabBarHairline, tabBackground, tabBackgroundActive, tabBackgroundHovered, tabTextColor, tabTextColorActive, tabOutline, tabUnderline, separatorColor.

Value shapes

• ZuiColor — "#rrggbb" / "#rrggbbaa" / a named color / "transparent".
• ZuiSize — a number (px), an "N%" string (fraction of viewport axis), or a 0..1 fraction.
• ZuiBoxSides — a number (all sides), {x, y}, or {top, right, bottom, left}.
• ZuiShadow — a keyed table { offset, blur, spread, color }.

Usage

local style: ZuiStyle = { background = "#16181d", borderRadius = 2 }
Z.panel({ style = style }, children)