@base-org/account-ui/dist/frameworks/preact/BasePayButton.js

Base Account UI Components

import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import { BRAND_BLUE, BUTTON_ACTIVE_DARK_SOLID, BUTTON_HOVER_DARK_SOLID, BasePayLogoColored, BasePayLogoWhite, WHITE, } from '@base-org/account/ui-assets';
import { clsx } from 'clsx';
import css from './BasePayButton-css.js';
export const BasePayButton = ({ colorScheme = 'system', onClick }) => {
    const isDarkMode = colorScheme === 'dark' ||
        (colorScheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
    const backgroundColor = isDarkMode ? WHITE : BRAND_BLUE;
    // Hover states
    const hoverBackgroundColor = isDarkMode ? BUTTON_HOVER_DARK_SOLID : '#3333FF';
    // Active states
    const activeBackgroundColor = isDarkMode ? BUTTON_ACTIVE_DARK_SOLID : '#1A1AFF';
    return (_jsxs("div", { class: "-base-ui-pay-css-reset", children: [_jsx("style", { children: css }), _jsx("button", { class: clsx('-base-ui-pay-button', '-base-ui-pay-button-solid'), style: {
                    '--button-bg-color': backgroundColor,
                    '--button-bg-color-hover': hoverBackgroundColor,
                    '--button-bg-color-active': activeBackgroundColor,
                }, onClick: onClick, children: _jsx("div", { class: clsx('-base-ui-pay-button-content'), children: isDarkMode ? _jsx(BasePayLogoColored, {}) : _jsx(BasePayLogoWhite, {}) }) })] }));
};
//# sourceMappingURL=BasePayButton.js.map