← Back to Examples

🎨 Base Variables

Theme-designer typography integration with --base-* variables for fonts, sizes, and weights

Typography Controls

Typography Controls

Font Link (Google Fonts, etc.)

Font Family

Font Sizes (unitless multipliers)

2xs: tiny labels • xs: group labels, hints • sm: option text, badges • base: input text • lg: large displays

Font Weights

Line Heights

Single Select

multiple={false} — one value, no badges

Basic single selection. Tests input styling and dropdown typography.

Multi Select with Badges

badges_display_mode="badges" · show_checkboxes={true}

Multiple selection with badge display. Tests badge typography and sizing.

Multi Select with Count

badges_display_mode="count" collapses badges into a counter

Count display mode. Tests counter typography.

Grouped Options

allow_groups={true} renders group-keyed option headers

Tests group label typography and styling.

/* Current --base-* CSS Variables */
:root { /* No overrides set - using component defaults */ }
🔌 Server round-trip
0
The LiveView server saw 0 event(s) from the wrapper. 
(pick an option anywhere on this page)