Theming

The widget uses Shadow DOM for complete style isolation, ensuring your existing CSS never conflicts with the calculator. All theming is done through CSS custom properties (variables) that are applied directly to the widget's shadow root (your specified selector or mount element)

CSS Variables Reference

Variable	Default	Description
`--cdn-opacity`	`1`	Global opacity multiplier
`--cdn-radius`	`0.625rem`	Border radius for all elements
`--cdn-background`	`hsl(0 0% 100% / var(--cdn-opacity))`	Widget background color
`--cdn-foreground`	`hsl(0 0% 3.9% / var(--cdn-opacity))`	Primary text color
`--cdn-primary`	`hsl(0 0% 9.05% / var(--cdn-opacity))`	Primary button/emphasis color
`--cdn-primary-foreground`	`hsl(0 0% 98% / var(--cdn-opacity))`	Text color on primary background
`--cdn-border`	`hsl(0 0% 89.8% / var(--cdn-opacity))`	Border color
`--cdn-border-size`	`1px`	Border width
`--cdn-ring`	`hsl(0 0% 3.9% / var(--cdn-opacity))`	Focus ring color
`--cdn-muted`	`hsl(0 0% 96.1% / var(--cdn-opacity))`	Muted background color
`--cdn-muted-foreground`	`hsl(0 0% 45.1% / var(--cdn-opacity))`	Muted text color
`--cdn-destructive`	`hsl(0 84.2% 60.2% / var(--cdn-opacity))`	Error/destructive color
`--cdn-destructive-foreground`	`hsl(0 0% 98% / var(--cdn-opacity))`	Text color on destructive background
`--cdn-font-family`	`inherit`	Font family (inherits from parent)
`--cdn-font-size-base`	`1rem`	Base font size
`--cdn-font-size-form-label`	`var(--cdn-font-size-base)`	Form label font size
`--cdn-font-size-form-input`	`var(--cdn-font-size-base)`	Form input font size
`--cdn-font-size-calc-button`	`var(--cdn-font-size-base)`	Calculate button font size
`--cdn-font-size-result-title`	`var(--cdn-font-size-base)`	Result title font size
`--cdn-font-size-result-label`	`var(--cdn-font-size-base)`	Result label font size
`--cdn-font-size-result-total`	`var(--cdn-font-size-base)`	Result total font size
`--cdn-font-size-result-value`	`var(--cdn-font-size-base)`	Result value font size
`--cdn-transition-function`	`cubic-bezier(.4, 0, .2, 1)`	Animation timing function

Usage example:

init({
  cssVars: {
    '--cdn-primary': 'hsl(15 90% 55%)',
    '--cdn-radius': '0.75rem',
    '--cdn-font-family': 'Inter, sans-serif',
    '--cdn-font-size-form-label': '1.125rem'
  }
});

The color tokens can be any valid CSS color formats.

Hex: #ff0000, #f00
RGB/RGBA: rgb(255, 0, 0), rgba(255, 0, 0, 0.5)
HSL/HSLA: hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5)
Named colors: red, blue, transparent
CSS4 colors: oklch(), lab()