File size: 1,268 Bytes
a0dc69b
 
 
718af96
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a0dc69b
 
718af96
a0dc69b
718af96
 
a0dc69b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import {createTheme} from '@mui/material/styles';

const themeObject = {
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 770,
      lg: 1200,
      xl: 1536,
    },
  },
  // palette: {
  //   background: {default: '#383838'},
  //   primary: {
  //     main: '#465A69',
  //   },
  //   info: {
  //     main: '#0064E0',
  //   },
  //   text: {primary: '#1C2A33'},
  // },
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
  typography: {
    fontFamily: [
      'Optimistic Text',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
    ].join(','),
    h1: {fontSize: '1rem', fontWeight: '500'},
  },
};

const theme = createTheme(themeObject);

/**
 * Set up a responsive font size at the 600px breakpoint
 */
// default is 1rem (16px)
theme.typography.body1[theme.breakpoints.down('sm')] = {fontSize: '0.875rem'};
// default is 1rem (16px)
theme.typography.h1[theme.breakpoints.down('sm')] = {fontSize: '0.875rem'};
// default is 0.875rem (14px)
theme.typography.button[theme.breakpoints.down('sm')] = {fontSize: '0.75rem'};
// default is 0.875rem (14px)
theme.typography.body2[theme.breakpoints.down('sm')] = {fontSize: '0.75rem'};

export default theme;