Make it yours

Styling

Choose Base, Foundation or an adapter for your UI library.

Theme playground

Select a stylesheet to see its field and calendar styles.

Foundation supplies the calendar layout. Set the --litopis-* variables to match your colours, spacing and type scale.

css

@import "@litopis/dom/styles/foundation.css";

.litopis {
  --litopis-accent: var(--brand);
  --litopis-background: var(--surface);
}

Unstyled by default

Importing Litopis JavaScript adds interaction and accessible semantics, not CSS. Add your own styles when the picker needs to follow an existing design system.

Four styling layers

Choose one stylesheet. Base gives you a neutral default; Foundation lets you define the tokens yourself; adapters match the theme variables from a supported UI library.

css

@import "@litopis/dom/styles/base.css";

css

@import "@litopis/dom/styles/foundation.css";

.litopis {
  --litopis-accent: var(--brand);
  --litopis-accent-foreground: var(--on-brand);
  --litopis-background: var(--surface);
  --litopis-border: var(--outline);
  --litopis-border-width: 1px;
  --litopis-calendar-radius: 20px;
  --litopis-danger: var(--danger);
  --litopis-disabled: var(--text-disabled);
  --litopis-focus-ring: color-mix(in oklab, var(--brand) 24%, transparent);
  --litopis-foreground: var(--text);
  --litopis-muted: var(--surface-muted);
  --litopis-muted-foreground: var(--text-muted);
  --litopis-popover-shadow: 0 18px 48px rgb(0 0 0 / 12%);
  --litopis-radius: 8px;
}

CSS variables

Use these variables for colours, borders, radius, spacing and motion. They let you tune the picker without replacing its stylesheet.

css

.litopis {
  /* Geometry */
  --litopis-width: 360px;
  --litopis-control-size: 40px;
  --litopis-comfortable-target-size: 44px;
  --litopis-day-size: 40px;
  --litopis-calendar-padding: 12px;
  --litopis-field-gap: 12px;

  /* Typography and motion */
  --litopis-font-family: inherit;
  --litopis-label-font-size: 14px;
  --litopis-transition-duration: 150ms;
  --litopis-active-scale: .96;

  /* Optional semantic refinements */
  --litopis-input-background: var(--litopis-background);
  --litopis-calendar-background: var(--litopis-background);
  --litopis-hover-background: var(--litopis-muted);
  --litopis-selected-background: var(--litopis-accent);
}

The default width follows panels: one calendar is 360px and two are capped at 720px. Override the same token when the host layout needs another responsive breakpoint.

css

.travel-picker[data-panels="2"] {
  --litopis-width: 720px;
}

@media (max-width: 42rem) {
  .travel-picker[data-panels="auto"] {
    --litopis-width: 360px;
  }
}

Group	Representative tokens	Controls
Theme	`--litopis-accent`, `--litopis-background`, `--litopis-foreground`, `--litopis-border`	Primary colors, surfaces, text and outlines
Semantic states	`--litopis-hover-background`, `--litopis-selected-background`, `--litopis-danger`, `--litopis-disabled`	Hover, selection, errors and unavailable dates
Geometry	`--litopis-width`, `--litopis-control-size`, `--litopis-day-size`, `--litopis-calendar-padding`	Calendar width, hit areas, grid and spacing
Typography	`--litopis-font-family`, `--litopis-label-font-size`, `--litopis-caption-font-weight`	Inherited type system and component hierarchy
Focus and motion	`--litopis-focus-ring`, `--litopis-focus-width`, `--litopis-transition-duration`, `--litopis-active-scale`	Visible focus and interaction feedback
Popover	`--litopis-popover-shadow`, `--litopis-popover-z-index`, `--litopis-popover-anchor-gap`	Elevation and viewport positioning

Anatomy

Use these classes and data-* states when a CSS variable is not enough.

css

.litopis
.litopis[data-mode="popover"]
.litopis[data-size="comfortable"]
.litopis-input
.litopis-grid
.litopis-day[data-selected]
.litopis-day[data-today]
.litopis-day[data-outside-month]
.litopis-month-button
.litopis-year-button

Popover CSS

The popover variant uses the browser top layer and CSS anchors.

css

.litopis[data-mode="popover"] .litopis-calendar {
  position: fixed;
  max-width: calc(100vw - var(--litopis-calendar-viewport-gap));
  z-index: var(--litopis-popover-z-index);
}

.litopis-calendar[popover]:not(:popover-open) {
  display: none;
}

@supports (top: anchor(bottom)) {
  .litopis[data-mode="popover"] .litopis-calendar {
    top: anchor(bottom);
    left: anchor(left);
    margin-top: var(--litopis-popover-anchor-gap);
    position-try-fallbacks: flip-block, flip-inline;
  }
}

Theme adapters

Each adapter matches Litopis controls to the variables already used by the selected UI library, including its field radius, borders, focus treatment and colour modes. It adds no JavaScript.

css

@import "tailwindcss";
@import "@litopis/dom/styles/daisyui.css";
@plugin "daisyui";

css

@import "tailwindcss";
@import "shadcn/tailwind.css";
@import "@litopis/dom/styles/shadcn.css";

css

@import "bootstrap/dist/css/bootstrap.css";
@import "@litopis/dom/styles/bootstrap.css";

Import one adapter only. daisyUI maps --color-* and --radius-*; shadcn maps semantic surface/foreground pairs such as --primary, --popover and --ring; Bootstrap maps --bs-* variables and follows data-bs-theme color modes.

Overrides

Use --litopis-* variables for colour and size. Use .litopis-* selectors and data-* states for structural changes. Litopis does not emit daisyUI, shadcn or Bootstrap classes.