-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy paththeme.js
106 lines (105 loc) · 2.59 KB
/
theme.js
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
// color design tokens export
export const colorTokens = {
grey: {
0: "#FFFFFF",
10: "#F6F6F6",
50: "#F0F0F0",
100: "#E0E0E0",
200: "#C2C2C2",
300: "#A3A3A3",
400: "#858585",
500: "#666666",
600: "#4D4D4D",
700: "#333333",
800: "#1A1A1A",
900: "#0A0A0A",
1000: "#000000",
},
primary: {
50: "#E6FBFF",
100: "#CCF7FE",
200: "#99EEFD",
300: "#66E6FC",
400: "#33DDFB",
500: "#00D5FA",
600: "#00A0BC",
700: "#006B7D",
800: "#00353F",
900: "#001519",
},
};
// mui theme settings
export const themeSettings = (mode) => {
return {
palette: {
mode: mode,
...(mode === "dark"
? {
// palette values for dark mode
primary: {
dark: colorTokens.primary[200],
main: colorTokens.primary[400],
light: colorTokens.primary[800],
},
neutral: {
dark: colorTokens.grey[100],
main: colorTokens.grey[200],
mediumMain: colorTokens.grey[300],
medium: colorTokens.grey[400],
light: colorTokens.grey[700],
},
background: {
default: colorTokens.grey[900],
alt: colorTokens.grey[800],
},
}
: {
// palette values for light mode
primary: {
dark: colorTokens.primary[700],
main: colorTokens.primary[600],
light: colorTokens.primary[50],
},
neutral: {
dark: colorTokens.grey[700],
main: colorTokens.grey[500],
mediumMain: colorTokens.grey[400],
medium: colorTokens.grey[300],
light: colorTokens.grey[50],
},
background: {
default: colorTokens.grey[10],
alt: colorTokens.grey[0],
},
}),
},
typography: {
fontFamily: ["Rubik", "sans-serif"].join(","),
fontSize: 12,
h1: {
fontFamily: ["Rubik", "sans-serif"].join(","),
fontSize: 40,
},
h2: {
fontFamily: ["Rubik", "sans-serif"].join(","),
fontSize: 32,
},
h3: {
fontFamily: ["Rubik", "sans-serif"].join(","),
fontSize: 24,
},
h4: {
fontFamily: ["Rubik", "sans-serif"].join(","),
fontSize: 20,
},
h5: {
fontFamily: ["Rubik", "sans-serif"].join(","),
fontSize: 16,
},
h6: {
fontFamily: ["Rubik", "sans-serif"].join(","),
fontSize: 14,
},
},
};
};