Theme

UBO + Syncfusion Spacing and Sizing

This page summarizes the spacing and sizing scale already present in the current Syncfusion theme layer, with human-readable values for design and implementation.

Source snapshot: packages/tailwind-config/compatibility/tailwind.css and local overrides in packages/ubo-react-components/src/styles/ubo-syncfusion-tailwind.css.

What Exists Today

Syncfusion does not expose one centralized --space-* token file in this setup; scale values are embedded across component selectors.
The practical rhythm repeatedly used is 4px, 8px, 12px, 16px, and 24px, with size variants controlled by classes like .e-small and .e-bigger.
UBO applies one additional global control override: .e-btn.e-lib { padding: 0.55rem; }.

Spacing Rhythm (Observed In Theme)

Step	Pixels	Rem	Typical usage in current theme
XS	`4px`	`0.25rem`	Base button vertical padding and compact control spacing.
SM	`8px`	`0.5rem`	Small button horizontal padding and compact list/input adjustments.
MD	`12px`	`0.75rem`	Default button horizontal padding and dropdown/list row insets.
LG	`16px`	`1rem`	Bigger input left/right padding and dropdown content spacing.
XL	`24px`	`1.5rem`	Larger layout spacing in bigger mode and large component internals.

Button Size Scale

Selector	Spacing / size	Intent
`.e-btn`	`padding: 4px 12px`, `font-size: 14px`	Default Syncfusion button baseline.
`.e-btn.e-small`	`padding: 3px 8px`, `font-size: 12px`	Compact button density.
`.e-btn.e-icon-btn`	`padding: 3px 11px`	Icon-only button balance.
`.e-btn.e-round`	`width: 32px`, `height: 32px`	Circular icon button (default).
`.e-btn.e-small.e-round`	`width: 26px`, `height: 26px`	Circular icon button (small).
`.e-btn.e-lib` (UBO override)	`padding: 0.55rem` (~`8.8px`)	App-level override to normalize button body padding.

Input and Textarea Size Scale

Selector group	Dimensions	Usage note
`.e-input-group.e-bigger input`	`height: 36px`	Bigger-mode control height.
`.e-float-input.e-bigger:not(.e-input-group) input`	`height: 38px`	Bigger floating input height.
`.e-input-group.e-bigger.e-small input`	`height: 32px`	Compact + bigger combined variant.
`.e-float-input.e-bigger.e-small:not(.e-input-group) input`	`height: 34px`	Compact floating input variant.
`.e-input-group.e-bigger textarea`	`min-height: 36px`, `padding: 6px 12px 6px 16px`	Bigger textarea baseline.
`.e-input-group.e-bigger.e-small textarea`	`min-height: 32px`, `padding: 4px 8px 4px 14px`	Compact bigger textarea baseline.

List and Avatar Sizing

Component area	Scale values	Notes
`.e-dropdownbase .e-list-item`	`min-height: 30px`, `line-height: 30px`, `text-indent: 12px`	Default dropdown row rhythm.
`.e-dropdownbase .e-list-group-item`	`min-height: 30px`, `line-height: 30px`, `padding-left: 12px`	Grouped list headers follow same row height.
`.e-avatar`	`40px` base, `24px` xsmall, `32px` small, `48px` large, `56px` xlarge	Clear, explicit component size ladder from theme.

Recommended Team Usage

Prefer 4/8/12/16/24 spacing increments when adding custom wrappers around Syncfusion controls.
Use .e-small for denser rows and .e-bigger for touch-friendly or high-visibility views.
For consistency with app behavior, treat this page as the sizing source before adding one-off inline values.