SDK theming

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