UI Customization

The widget is designed with theme support enabled through CSS variables.

To setup customCSSVariables use the following widget method:

window.transactionlink.setOptions({
    ...otherOptions,
    customCSSVariables: {
        '--ccs-variable': value
    }
})

List of the available css variables with default values:

--tl-wc-primary-color: #000000

// applies to all inputs in the workflow
--tl-inputs-primary-color: var(--tl-wc-primary-color)
--tl-inputs-disabled-bgcolor: rgba(0,0,0, 0.03)

// applies to all action buttons in the workflow
--tl-action-button-primary-bgcolor: var(--tl-wc-primary-color)
--tl-action-button-secondary-color: var(--tl-wc-primary-color)
--tl-action-button-disabled-bgcolor: rgba(0,0,0, 0.08)