getStripeElementsAppearanceOptions() — supabase Function Reference

Architecture documentation for the getStripeElementsAppearanceOptions() function in Payment.utils.ts from the supabase codebase.

Function typescript ContentManagement Collections called by 1

Entity Profile

ContentManagement→ Collections→ getStripeElementsAppearanceOptions() — supabase Function Reference

Dependency Diagram

graph TD
  9d242dbc_4a69_3d5f_9baa_f2441bca1172["getStripeElementsAppearanceOptions()"]
  1ea504e4_0a4b_3887_3533_ac3ed2db4184["AddNewPaymentMethodModal()"]
  1ea504e4_0a4b_3887_3533_ac3ed2db4184 -->|calls| 9d242dbc_4a69_3d5f_9baa_f2441bca1172
  style 9d242dbc_4a69_3d5f_9baa_f2441bca1172 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Billing/Payment/Payment.utils.ts lines 3–39

export const getStripeElementsAppearanceOptions = (
  resolvedTheme: string | undefined
): Appearance => {
  return {
    labels: 'floating',
    theme: (resolvedTheme?.includes('dark') ? 'night' : 'flat') as 'night' | 'flat',
    variables: {
      fontSizeBase: '14px',
      colorBackground: resolvedTheme?.includes('dark')
        ? 'hsl(0deg 0% 14.1%)'
        : 'hsl(0deg 0% 95.3%)',
      fontFamily:
        'var(--font-custom, Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif)',
    },
    rules: {
      '.TermsText': {
        fontSize: '12px',
      },
      '.Label--floating': {
        fontSize: '14px',
      },
      '.Label--resting': {
        fontSize: '14px',
        color: 'rgb(137, 137, 137)',
      },
      '.Input': {
        boxShadow: 'none',
        height: '34px',
        lineHeight: '16px',
        padding: '8px 12px',
      },
      '.AccordionItem': {
        boxShadow: 'none',
      },
    },
  }
}