Styling

Theme Bias web components with CSS custom properties.

Bias web components consume CSS custom properties with the --bias- prefix. Set them on the form element, the provider, or an ancestor element.

<bias-provider
    client-secret="cs_test_..."
    style="--bias-color-primary: #4f46e5; --bias-border-radius: 8px;"
>
    <bias-payment-form></bias-payment-form>
</bias-provider>

The package also exports themeVariableStyle() for JavaScript-driven styling.

import { themeVariableStyle } from "@biaspay/web";

const form = document.querySelector("bias-payment-form")!;
const variables = themeVariableStyle({
    colorPrimary: "#4f46e5",
    borderRadius: "8px",
});

for (const [name, value] of Object.entries(variables)) {
    form.style.setProperty(name, value);
}

Supported variables:

type ThemeVariables = {
    colorPrimary?: string | null;
    colorBackground?: string | null;
    colorInput?: string | null;
    colorForeground?: string | null;
    colorMutedForeground?: string | null;
    colorPlaceholder?: string | null;
    colorBorder?: string | null;
    colorSuccess?: string | null;
    colorError?: string | null;
    focusRing?: string | null;
    shadow?: string | null;
    borderRadius?: string | null;
    fontFamily?: string | null;
    fontSize?: string | null;
};