Theming

Customize the salary calculator widget’s appearance with CSS variables

The widget uses Shadow DOM for complete style isolation — your existing CSS never conflicts with the calculator. All theming is done through CSS custom properties applied to the widget’s shadow root.

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

JavaScript

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'
  }
});

Color tokens accept any valid CSS color format:

• 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()