Drop-in theming

1
const dropinConfig = {
2
  theme: {
3
    borderRadius: 6,
4
    spacing: 8,
5
    
6
    colors: {
7
      primary: '#3737FF',
8
      secondary: '#707070',
9
      neutral: '#707070',
10
      info: '#3737FF',
11
      success: '#1FBCA0',
12
      warning: '#C78032',
13
      error: '#CC394B',
14
      background: '#FFFFFF',
15
      text: '#292929',
16
    },
17
    
18
    typography: {
19
      fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
20
      fontSize: 16,
21
      h1: {
22
        fontSize: 48,
23
        fontWeight: 600,
24
        lineHeight: '68px',
25
      },
26
      h2: {
27
        fontSize: 34,
28
        fontWeight: 640,
29
        lineHeight: '40px',
30
      },
31
      h3: {
32
        fontSize: 24,
33
        fontWeight: 600,
34
        lineHeight: '32px',
35
      },
36
      subtitle1: {
37
        fontSize: 20,
38
        fontWeight: 600,
39
        lineHeight: '24px',
40
      },
41
      subtitle2: {
42
        fontSize: 18,
43
        fontWeight: 600,
44
        lineHeight: '24px',
45
      },
46
      body1: {
47
        fontSize: 16,
48
        fontWeight: 500,
49
        lineHeight: '24px',
50
      },
51
      body2: {
52
        fontSize: 14,
53
        fontWeight: 400,
54
        lineHeight: '20px',
55
      }
56
    }
57
  }
58
};
59
60
const dropin = new MoniteDropin(dropinConfig);
61
62
// Assuming `component` is defined elsewhere:
63
dropin.create(component).mount(...);