← Back to Examples

🎨 Base Variables

Theme-designer typography variables for fonts, sizes, weights, and line heights

controls set --base-* vars on :root — they cascade into every KeenMate component

Typography Controls

Font Link (Google Fonts, etc.)

Paste <link> tag or URL

Font Family

--base-font-family

Font Sizes (multipliers)

2xs: badges • xs: weekday headers, tooltips • sm: day numbers, summary text • base: month/year labels, input text • lg: navigation arrows

2xs

base

2xl

Font Weights

normal

medium

semibold

Line Heights

tight

normal

relaxed

Floating Mode (Range)

Click the input to open the calendar popup. Tests input styling + calendar typography.

Inline Calendar Mode (Range)

Standalone calendar with range selection. Tests calendar typography directly.

/* Current --base-* CSS Variables */

:root { /* No overrides set - using component defaults */ }

🔌 Server round-trip

The LiveView server saw 0 event(s) from the wrapper.

(pick a date anywhere on this page)