DatePicker theming

The values listed below are exposed as --rozie-datepicker-* custom properties, each with a built-in fallback, so DatePicker works with zero configuration and re-skins by remapping tokens. The structural rules compile per-leaf and are not consumer-overridable.

:root {
  --rozie-datepicker-font: inherit;
  --rozie-datepicker-accent: #0066cc;
  --rozie-datepicker-gap: 0.25rem;
  --rozie-datepicker-ring-width: 2px;
}

Tokens

surface

Token	Default
--rozie-datepicker-font	inherit
--rozie-datepicker-fg	#1a1a1a
--rozie-datepicker-bg	#fff
--rozie-datepicker-border-width	1px
--rozie-datepicker-border	rgba(0, 0, 0, 0.18)
--rozie-datepicker-radius	10px
--rozie-datepicker-padding	0.75rem

accent — the single color most consumers will set; selected day, today ring + focus ring all derive from it

Token	Default
--rozie-datepicker-accent	#0066cc

header

Token	Default
--rozie-datepicker-gap	0.25rem
--rozie-datepicker-header-gap	0.5rem
--rozie-datepicker-heading-weight	600
--rozie-datepicker-heading-size	0.95rem
--rozie-datepicker-nav-size	2rem
--rozie-datepicker-nav-bg	transparent
--rozie-datepicker-nav-radius	6px
--rozie-datepicker-hover-bg	rgba(0, 0, 0, 0.05)

focus ring

Token	Default
--rozie-datepicker-ring-width	2px
--rozie-datepicker-ring-offset	1px

grid — the single-month day grid; also covers the gap between grids when numberOfMonths > 1 renders them side by side

Token	Default
--rozie-datepicker-cell-size	2.25rem
--rozie-datepicker-cell-gap	0.125rem
--rozie-datepicker-weekday-height	1.75rem
--rozie-datepicker-weekday-size	0.72rem
--rozie-datepicker-weekday-weight	600
--rozie-datepicker-weekday-fg	rgba(0, 0, 0, 0.5)
--rozie-datepicker-month-gap	1rem

day cell

Token	Default
--rozie-datepicker-day-bg	transparent
--rozie-datepicker-day-border-width	1px
--rozie-datepicker-day-radius	6px
--rozie-datepicker-day-size	0.85rem
--rozie-datepicker-outside-fg	rgba(0, 0, 0, 0.35)

today + selected

Token	Default
--rozie-datepicker-selected-fg	#fff
--rozie-datepicker-selected-weight	600

disabled

Token	Default
--rozie-datepicker-disabled-opacity	0.4

drill/zoom — the month-picker and year-picker grids reached via the heading click (calendar drills down/up a level)

Token	Default
--rozie-datepicker-drill-cell-height	2.5rem
--rozie-datepicker-drill-cell-size	0.85rem
--rozie-datepicker-drill-cols	3
--rozie-datepicker-drill-gap	0.25rem
--rozie-datepicker-drill-header-gap	0.5rem
--rozie-datepicker-drill-label-bg	transparent
--rozie-datepicker-drill-label-padding	0.15rem 0.5rem

footer — the Today/Clear action row

Token	Default
--rozie-datepicker-footer-bg	transparent
--rozie-datepicker-footer-fg	inherit
--rozie-datepicker-footer-gap	0.25rem
--rozie-datepicker-footer-gap-top	0.5rem
--rozie-datepicker-footer-padding	0.2rem 0.6rem
--rozie-datepicker-footer-radius	6px
--rozie-datepicker-footer-size	0.78rem

presets — the quick-range chip row

Token	Default
--rozie-datepicker-preset-bg	transparent
--rozie-datepicker-preset-fg	inherit
--rozie-datepicker-preset-padding	0.2rem 0.6rem
--rozie-datepicker-preset-radius	999px
--rozie-datepicker-preset-size	0.78rem
--rozie-datepicker-presets-gap	0.25rem
--rozie-datepicker-presets-gap-top	0.5rem

range/preview — the range-selection highlight painted between the start and end day cells while dragging or hovering

Token	Default
--rozie-datepicker-preview-bg	rgba(0, 102, 204, 0.08)
--rozie-datepicker-range-bg	rgba(0, 102, 204, 0.14)

Defaulted where DatePicker reads them

Public, but declared nowhere by base.css: the fallback below applies only while no scope sets the token, and it is resolved at the component itself — so it follows a value set on any ancestor (a token it defaults to included).

Token	Default
--rozie-datepicker-range-endpoint-bg	var(--rozie-datepicker-selected-bg, var(--rozie-datepicker-accent, #0066cc))
--rozie-datepicker-ring	var(--rozie-datepicker-accent, #0066cc)
--rozie-datepicker-selected-bg	var(--rozie-datepicker-accent, #0066cc)
--rozie-datepicker-selected-hover-bg	color-mix(in srgb, var(--rozie-datepicker-selected-bg, var(--rozie-datepicker-accent, #0066cc)) 85%, #000)
--rozie-datepicker-today-border	var(--rozie-datepicker-accent, #0066cc)

Design-system bridges

Each package ships token presets that map DatePicker's tokens onto a known design system's published CSS variables — import base.css first, then a bridge:

import '@rozie-ui/date-picker-react/themes/base.css';
import '@rozie-ui/date-picker-react/themes/bootstrap.css';
import '@rozie-ui/date-picker-react/themes/material.css';
import '@rozie-ui/date-picker-react/themes/shadcn.css';

See also

• DatePicker — showcase & API — the full prop / event / slot / handle reference.
• DatePicker — API reference — every prop, event, slot, and handle verb.
• DatePicker — usage examples — idiomatic per-framework consumption code.
• DatePicker comparison — how it stacks up against the per-framework libraries.
• DatePicker — live demo — the real package running in the page.