Options

The options layer defines global defaults used by Extraction UI components. Each applicable component can also be customized independently by overriding its own CSS variables. Refer to the individual component documentation pages for available options.

Background options

Option	Description	Default value
`--ex-options-body-color`	Default background color	`color-mix(in oklch, var(--color-neutral-50) 30%, white)`
`--ex-options-body-color-dark`	Default background color in dark mode	`color-mix(in oklch, var(--color-neutral-950) 70%, black)`
`--ex-options-panel-body-color`	Default panel background color	`color-mix(in oklch, var(--color-neutral) 0%, white)`
`--ex-options-panel-body-color-dark`	Default panel background color in dark mode	`color-mix(in oklch, var(--color-neutral) 0%, black)`

Typography options

Option	Description	Default value
`--ex-options-foreground-color`	Default text color	`var(--color-neutral-900)`
`--ex-options-foreground-color-dark`	Default text color in dark mode	`var(--color-neutral-100)`

Decorative options

Option	Description	Default value
`--ex-options-input-border-valid`	Default border color for valid input	`var(--color-green-600)`
`--ex-options-input-border-valid-dark`	Default border color for valid input in dark mode	`var(--color-green-400)`
`--ex-options-input-color-valid`	Default text color for valid input	`var(--color-green-600)`
`--ex-options-input-color-valid-dark`	Default text color for valid input in dark mode	`var(--color-green-400)`
`--ex-options-input-border-invalid`	Default border color for invalid input	`var(--color-red-600)`
`--ex-options-input-border-invalid-dark`	Default border color for invalid input in dark mode	`var(--color-red-400)`
`--ex-options-input-color-invalid`	Default text color for invalid input	`var(--color-red-600)`
`--ex-options-input-color-invalid-dark`	Default text color for invalid input in dark mode	`var(--color-red-400)`

Opacity options

Option	Description	Default value
`--ex-options-opacity-muted`	Muted opacity for elements	`0.88`
`--ex-options-opacity-subtle`	Subtle opacity for elements	`0.64`
`--ex-options-opacity-weak`	Weak opacity for elements	`0.48`
`--ex-options-opacity-disabled`	Disabled opacity for elements	`0.56`
`--ex-options-opacity-overlay`	Default opacity for overlay backgrounds	`0.4`
`--ex-options-opacity-placeholder`	Default opacity for inputs placeholder text	`0.64`

Transition options

Option	Description	Default value
`--ex-options-enable-transitions`	Toggle animations and transitions (use `1` or `0`)	`1`
`--ex-options-enable-reduced-motion`	Toggle the prefers-reduced-motion media query (use `1` or `0`)	`1`
`--ex-options-duration-fastest`	Duration for fastest animations	`50ms`
`--ex-options-duration-faster`	Duration for faster animations	`100ms`
`--ex-options-duration-fast`	Duration for fast animations	`150ms`
`--ex-options-duration-normal`	Duration for normal animations	`200ms`
`--ex-options-duration-slow`	Duration for slow animations	`300ms`
`--ex-options-duration-slower`	Duration for slower animations	`400ms`
`--ex-options-duration-slowest`	Duration for slowest animations	`500ms`

Z-index options

Option	Description	Default value
`--ex-options-z-alert-dialog`	Z-index for alert dialogs	`50`
`--ex-options-z-alert-dialog-overlay`	Z-index for alert dialog overlays	`45`
`--ex-options-z-dialog`	Z-index for dialogs	`50`
`--ex-options-z-dialog-overlay`	Z-index for dialog overlays	`45`
`--ex-options-z-drawer`	Z-index for drawers	`50`
`--ex-options-z-drawer-overlay`	Z-index for drawer overlays	`45`
`--ex-options-z-hover-card`	Z-index for hover cards	`40`
`--ex-options-z-popover`	Z-index for popovers	`40`
`--ex-options-z-select-popper`	Z-index for select poppers	`50`
`--ex-options-z-toast`	Z-index for toasts	`55`
`--ex-options-z-tooltip`	Z-index for tooltips	`60`

Override example

Add the variables in your main CSS file:

main.css


:root {
  ...
  --ex-options-enable-transitions: 0;
  --ex-options-enable-reduced-motion: 0;
  ...
  --ex-options-opacity-muted: 0.85;
  ...
  --ex-options-input-border-valid: var(--color-primary-700);
  --ex-options-input-border-valid-dark: var(--color-primary-300);
  ...
}