Cal("ui", {
theme: "light",
hideEventTypeDetails: false,
cssVarsPerTheme: {
light: {
// ── Brand ──
"cal-brand": "#6F61C0", // Selected date circle, confirm button bg
"cal-brand-emphasis": "#5A4EA6", // Confirm button hover state
"cal-brand-text": "#FFFFFF", // Text on brand surfaces — "Confirm" label, selected date number
"cal-brand-subtle": "#B8B0E0", // Lighter brand accent for secondary indicators
"cal-brand-accent": "#FFFFFF", // Contrasting accent on brand buttons
// ── Text ──
"cal-text": "#6F61C0", // Default body text — event description, time slot labels
"cal-text-emphasis": "#4D408D", // High-priority text — event title, month header
"cal-text-subtle": "#8A7FCC", // Secondary text — day-of-week headers, timezone
"cal-text-muted": "#C0B8FF", // Lowest contrast text — disabled dates, placeholders
"cal-text-inverted": "#FFFFFF", // Text on dark/inverted backgrounds
// ── Text Semantic ──
"cal-text-semantic-info": "#3B3080", // Info alert text
"cal-text-semantic-attention": "#8B3A1A", // Warning alert text
"cal-text-semantic-error": "#7C2020", // Error alert text
// ── Text Status ──
"cal-text-info": "#3B3080", // Info badge text and icon fill
"cal-text-success": "#1A5C30", // Success badge text and icon fill
"cal-text-attention": "#8B3A1A", // Attention badge text and icon fill
"cal-text-error": "pink", // Error text and icon fill — form validation
// ── Background ──
"cal-bg": "#FFFFFF", // Main booker background
"cal-bg-emphasis": "#E1DFFF", // Highlighted surface — hovered date, active range
"cal-bg-subtle": "#F0EEFF", // Secondary surface — time slot hover, cards
"cal-bg-muted": "#F8F7FF", // Faintest surface — unavailable day bg, gradient edges
"cal-bg-inverted": "#2D2554", // Inverted surface — dark overlays, tooltips
"cal-bg-attention": "#FFF3E0", // Warning badge background
"cal-bg-error": "#FFE8EC", // Error badge/alert background
// ── Background Semantic ──
"cal-bg-semantic-info-subtle": "#F0EDFF", // Subtle info alert bg
"cal-bg-semantic-attention-subtle": "#FFF3E0", // Subtle warning alert bg
"cal-bg-semantic-error-subtle": "#FFE8EC", // Subtle error alert bg
// ── Border ──
"cal-border": "#A090E0", // Default dividers — calendar grid lines
"cal-border-emphasis": "#4D408D", // Strong borders — focused inputs
"cal-border-subtle": "#A090E0", // Soft borders — separators, dividers
"cal-border-muted": "#D6D0F0", // Faintest borders
"cal-border-error": "#FFAAAA", // Error input border
"cal-border-semantic-error": "#FFAAAA", // Error banner outline
"cal-border-semantic-attention-subtle": "#FFD4A0", // Warning banner border
"cal-border-semantic-error-subtle": "#FFAAAA", // Subtle error banner border
// ── Booker Border ──
"cal-border-booker": "#A090E0", // Outer border of the entire booker widget
"cal-border-booker-width": "3px", // Thickness of the outer booker border
// ── Border Radius ──
"radius": "0.25rem", // Base radius — small inputs, chips (4px)
"radius-sm": "0.125rem", // Extra-small radius — tiny badges (2px)
"radius-md": "0.375rem", // Medium radius — buttons, dropdowns (6px)
"radius-lg": "0.5rem", // Large radius — cards, modals (8px)
"radius-xl": "0.75rem", // Extra-large radius — large cards (12px)
"radius-2xl": "1rem", // 2XL radius — dialog containers (16px)
"radius-3xl": "1.5rem", // 3XL radius — hero cards (24px)
"radius-full": "9999px", // Full pill shape — avatars, pill badges
"radius-none": "0px", // No rounding — sharp corners
// ── Spacing ──
"spacing": "1px", // Base spacing unit — all padding/margin/gap scale from this
},
dark: {
// ── Brand ──
"cal-brand": "#A090E0",
"cal-brand-emphasis": "#C0B8FF",
"cal-brand-text": "#1A1540",
"cal-brand-subtle": "#5A4EA6",
"cal-brand-accent": "#1A1540",
// ── Text ──
"cal-text": "#D6D0F0",
"cal-text-emphasis": "#F0EEFF",
"cal-text-subtle": "#A090E0",
"cal-text-muted": "#8A7FCC",
"cal-text-inverted": "#1A1540",
// ── Text Semantic ──
"cal-text-semantic-info": "#A8A0F0",
"cal-text-semantic-attention": "#E0A060",
"cal-text-semantic-error": "#F08080",
// ── Text Status ──
"cal-text-info": "#C0B8FF",
"cal-text-success": "#80E0B0",
"cal-text-attention": "#F0C090",
"cal-text-error": "#FFB0B0",
// ── Background ──
"cal-bg": "#1A1540",
"cal-bg-emphasis": "#2D2554",
"cal-bg-subtle": "#231E4A",
"cal-bg-muted": "#1E1845",
"cal-bg-inverted": "#F0EEFF",
"cal-bg-attention": "#6E2D14",
"cal-bg-error": "#601818",
// ── Background Semantic ──
"cal-bg-semantic-info-subtle": "#1E1860",
"cal-bg-semantic-attention-subtle": "#3E1E0A",
"cal-bg-semantic-error-subtle": "#3E1010",
// ── Border ──
"cal-border": "#4D408D",
"cal-border-emphasis": "#8A7FCC",
"cal-border-subtle": "#3B3080",
"cal-border-muted": "#231E4A",
"cal-border-error": "#802020",
"cal-border-semantic-error": "#802020",
"cal-border-semantic-attention-subtle": "#6E2D14",
"cal-border-semantic-error-subtle": "#802020",
// ── Booker Border ──
"cal-border-booker": "#4D408D",
"cal-border-booker-width": "3px",
// ── Border Radius ──
"radius": "0.25rem",
"radius-sm": "0.125rem",
"radius-md": "0.375rem",
"radius-lg": "0.5rem",
"radius-xl": "0.75rem",
"radius-2xl": "1rem",
"radius-3xl": "1.5rem",
"radius-full": "9999px",
"radius-none": "0px",
// ── Spacing ──
"spacing": "1px",
},
},
});
