Styling

The component is style-isolated by Shadow DOM. Override CSS custom properties on the host:

twist-cal {
  --tc-btn-bg: #dc2626;
  --tc-btn-bg-hover: #b91c1c;
  --tc-radius: 4px;
}

Button

Property	Default	Description
--tc-btn-bg	#2563eb	Button background
--tc-btn-bg-hover	#1d4ed8	Button background on hover
--tc-btn-border	none	Button border (use for custom variants)
--tc-btn-padding	8px 16px	Button padding
--tc-btn-fs	14px	Button font size
--tc-btn-fw	600	Button font weight
--tc-btn-gap	6px	Gap between label and caret
--tc-text	#fff	Button text color
--tc-border	#111	Outline variant border color
--tc-caret-size	4px	Caret triangle size

Menu

Property	Default	Description
--tc-menu-bg	#fff	Menu background
--tc-menu-border	#e5e7eb	Menu border color
--tc-menu-shadow	0 4px 16px rgba(0,0,0,0.12)	Menu box shadow
--tc-menu-padding	4px	Menu inner padding
--tc-menu-min-w	200px	Menu minimum width
--tc-menu-gap	4px	Gap between button and menu

Menu items

Property	Default	Description
--tc-item-color	#1f2937	Item text color
--tc-item-hover-bg	#f3f4f6	Item hover background
--tc-item-padding	8px 12px	Item padding
--tc-item-fs	14px	Item font size
--tc-item-gap	8px	Gap between icon and text
--tc-item-radius	6px	Item border radius
--tc-icon-size	16px	Icon size

Shared

Property	Default	Description
--tc-radius	8px	Button + menu border radius
--tc-font	system stack	Font family
--tc-focus	2px solid #60a5fa	Focus ring outline
--tc-focus-offset	2px	Focus ring offset

Theming examples

Brand red:

twist-cal {
  --tc-btn-bg: #dc2626;
  --tc-btn-bg-hover: #b91c1c;
  --tc-radius: 4px;
}

Dark mode (apply on prefers-color-scheme):

@media (prefers-color-scheme: dark) {
  twist-cal {
    --tc-btn-bg: #1f2937;
    --tc-btn-bg-hover: #374151;
    --tc-menu-bg: #111827;
    --tc-menu-border: #374151;
    --tc-item-color: #f3f4f6;
    --tc-item-hover-bg: #1f2937;
    --tc-text: #fff;
  }
}

Outline variant — the variant="outline" attribute flips to white bg + dark border, but you can override the border color:

<twist-cal variant="outline" title="..." start="..." end="..."></twist-cal>

twist-cal {
  --tc-border: #2563eb;
  --tc-text: #2563eb;
}

Next

• Web component — all attributes
• API — programmatic access