> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cadanapay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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 JavaScript theme={null}
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()`