The date picker supports --base-* CSS variables for typography, enabling seamless
integration with the KeenMate theme-designer. Adjust font family, sizes, weights, and line heights
in real-time.
BV01 Typography Controls
Adjust --base-* variables in real-time
Controls
Typography Controls
Font Link (Google Fonts, etc.)
Font Family
Font Sizes (multipliers)
2xs: badges • xs: weekday headers, tooltips • sm: day numbers • base: month/year labels • lg: navigation arrows
Font Weights
Line Heights
Live Demo
Floating Mode (Range)
Tests input styling + calendar typography
Inline Calendar Mode
Standalone calendar
Current CSS Output
Details
Variable Reference
| Variable | Used For |
|---|---|
--base-font-family | All text in component |
--base-font-size-2xs | Badges |
--base-font-size-xs | Weekday headers, tooltips |
--base-font-size-sm | Day numbers, summary |
--base-font-size-base | Month/year labels, input |
--base-font-size-lg | Navigation arrows |
Theme Designer Integration
These variables are designed to work with the KeenMate theme-designer tool.
The designer exports --base-* variables that can be directly
applied to customize typography across all compatible components.
Font Size Multipliers
Font sizes are unitless multipliers (e.g., 1.4). The component
computes the final size as: calc(multiplier * var(--drp-rem)) where --drp-rem defaults to 10px.
BV02 Implementation Examples
How to use --base-* variables in your project
CSS Examples
Google Fonts Example
Details
How It Works
- Set
--base-*variables on:rootor a parent element - The date picker reads these variables and applies them internally
- Typography updates instantly without any JavaScript
Fallback Behavior
If a --base-* variable is not set, the component uses
built-in defaults. This means partial customization is fully supported.
Popular Google Fonts
- Inter - Clean, modern UI font
- Lexend - Optimized for readability
- Poppins - Geometric, friendly feel
- Source Sans Pro - Adobe's UI typeface