Skip to main content
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

VariableDefaultDescription
--cdn-opacity1Global opacity multiplier
--cdn-radius0.625remBorder radius for all elements
--cdn-backgroundhsl(0 0% 100% / var(--cdn-opacity))Widget background color
--cdn-foregroundhsl(0 0% 3.9% / var(--cdn-opacity))Primary text color
--cdn-primaryhsl(0 0% 9.05% / var(--cdn-opacity))Primary button/emphasis color
--cdn-primary-foregroundhsl(0 0% 98% / var(--cdn-opacity))Text color on primary background
--cdn-borderhsl(0 0% 89.8% / var(--cdn-opacity))Border color
--cdn-border-size1pxBorder width
--cdn-ringhsl(0 0% 3.9% / var(--cdn-opacity))Focus ring color
--cdn-mutedhsl(0 0% 96.1% / var(--cdn-opacity))Muted background color
--cdn-muted-foregroundhsl(0 0% 45.1% / var(--cdn-opacity))Muted text color
--cdn-destructivehsl(0 84.2% 60.2% / var(--cdn-opacity))Error/destructive color
--cdn-destructive-foregroundhsl(0 0% 98% / var(--cdn-opacity))Text color on destructive background
--cdn-font-familyinheritFont family (inherits from parent)
--cdn-font-size-base1remBase font size
--cdn-font-size-form-labelvar(--cdn-font-size-base)Form label font size
--cdn-font-size-form-inputvar(--cdn-font-size-base)Form input font size
--cdn-font-size-calc-buttonvar(--cdn-font-size-base)Calculate button font size
--cdn-font-size-result-titlevar(--cdn-font-size-base)Result title font size
--cdn-font-size-result-labelvar(--cdn-font-size-base)Result label font size
--cdn-font-size-result-totalvar(--cdn-font-size-base)Result total font size
--cdn-font-size-result-valuevar(--cdn-font-size-base)Result value font size
--cdn-transition-functioncubic-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()