Stripe appearance to emulate Bootstrap 5

appearance.ts

import { type Appearance } from '@stripe/stripe-js';

export default {
    rules: {
        '.AccordionItem': {
            borderColor: 'rgba(0,0,0,.175)',
            boxShadow: 'none',
        },
        '.Error': {
            fontSize: 'var(--fontSizeSm)',
            lineHeight: 'var(--fontLineHeight)',
        },
        '.Input': {
            borderColor: '#dee2e6',
            boxShadow: 'inset 0 1px 2px rgba(0,0,0,.075)',
            lineHeight: 'var(--fontLineHeight)',
            padding: '.375rem .75rem',
        },
        '.Input--invalid': {
            borderWidth: '1px',
            boxShadow: 'inset 0 1px 2px rgba(0,0,0,.075)',
            color: 'var(--colorText)',
        },
        '.Input--invalid:focus': {
            borderColor: 'var(--colorDanger)',
            boxShadow: 'inset 0 1px 2px rgba(0,0,0,.075), 0 0 0 .25rem #dc354540',
        },
        '.Input:focus': {
            borderColor: '#86b7fe',
            boxShadow: 'inset 0 1px 2px rgba(0,0,0,.075), 0 0 0 .25rem #0d6efd40',
        },
        '.Label': {
            fontSize: 'var(--fontSizeBase)',
            fontWeight: 'var(--fontWeightMedium)',
            lineHeight: 'var(--fontLineHeight)',
            marginBottom: 'var(--p-spacing2)',
        },
    },
    theme: 'stripe',
    variables: {
        borderRadius: '.375rem', // --bs-border-radius
        colorBackground: '#fff', // --bs-card-bg
        colorDanger: '#dc3545', // --bs-danger
        colorPrimary: '#0d6efd', // --bs-primary
        colorText: '#212529', // --bs-card-color
        colorTextSecondary: 'rgba(33,37,41,.75)', // --bs-secondary-color
        fontFamily: [
            'system-ui',
            '-apple-system',
            'Segoe UI',
            'Roboto',
            'Helvetica Neue',
            'Noto Sans',
            'Liberation Sans',
            'Arial',
            'sans-serif',
        ].join(', '), // --bs-body-font-family
        fontLineHeight: '1.5', // --bs-body-line-height
        fontSizeBase: '16px', // --bs-body-font-size
        fontSizeSm: '.875rem',
        fontSmooth: 'auto',
        fontWeightMedium: '500', // --bs-form-label-font-weight
    },
} as Appearance;