-
Notifications
You must be signed in to change notification settings - Fork 0
/
theme.ts
115 lines (102 loc) · 2.59 KB
/
theme.ts
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
107
108
109
110
111
112
113
114
115
import { createTheme } from '@material-ui/core';
export interface ThemeColorsInterface {
bgColor: string;
borderColor: string;
boxShadow: string;
color: string;
hoverBorderColor: string;
}
export interface BreakPointsInterface {
lg: string;
md: string;
sm: string;
xl: string;
xxl: string;
}
export interface GlobalThemeInterface {
breakPoints: BreakPointsInterface;
colors: ColorsInterface;
transitionFunction: string;
transitionSpeed: string;
}
export interface ColorsInterface {
BLACK: string;
ERROR: string;
GRAYISH_YELLOW: string;
LIGHT_BORDER: string;
LIGHT_BORDER_HOVER: string;
LIGHT_GRAYISH_YELLOW: string;
MODERATE_CYAN: string;
VERY_DARK_BLUE: string;
VERY_LIGHT_GRAY: string;
WHITE: string;
}
// --------------------------------------------------//
// colors
export const VERY_LIGHT_GRAY = '#f5f5f5';
export const VERY_DARK_BLUE = '#121a27';
export const ERROR = '#f44336';
export const GRAYISH_YELLOW = '#FDF1DE';
export const MODERATE_CYAN = '#35d0ba';
export const BLACK = '#000000';
export const WHITE = '#ffffff';
export const LIGHT_GRAYISH_YELLOW = '#ffffb8';
export const LIGHT_BORDER = 'rgba(255, 235, 235, 0.2)';
export const LIGHT_BORDER_HOVER = 'rgba(0, 0, 0, 0.4)';
export const DARK_BORDER_HOVER = 'rgba(255, 235, 235, 0.5)';
// animation
export const TRANSITION_FUNCTION = 'cubic-bezier(0.4, 0, 1, 1)';
export const TRANSITION_SPEED = '0.15s';
export const BREAK_POINTS = {
lg: '992px',
md: '768px',
sm: '576px',
xl: '1200px',
xxl: '1400px',
};
export const DEVICE_BREAK_POINTS: BreakPointsInterface = {
lg: `(min-width: ${BREAK_POINTS.lg})`,
md: `(min-width: ${BREAK_POINTS.md})`,
sm: `(min-width: ${BREAK_POINTS.sm})`,
xl: `(min-width: ${BREAK_POINTS.xl})`,
xxl: `(min-width: ${BREAK_POINTS.xxl})`,
};
export const COLORS: ColorsInterface = {
BLACK,
ERROR,
GRAYISH_YELLOW,
LIGHT_BORDER,
LIGHT_BORDER_HOVER,
LIGHT_GRAYISH_YELLOW,
MODERATE_CYAN,
VERY_DARK_BLUE,
VERY_LIGHT_GRAY,
WHITE,
};
export const themeConfiguration: GlobalThemeInterface = {
breakPoints: DEVICE_BREAK_POINTS,
colors: COLORS,
transitionFunction: TRANSITION_FUNCTION,
transitionSpeed: TRANSITION_SPEED,
};
export const DARK_THEME: ThemeColorsInterface = {
bgColor: BLACK,
borderColor: LIGHT_BORDER,
boxShadow: GRAYISH_YELLOW,
color: LIGHT_GRAYISH_YELLOW,
hoverBorderColor: DARK_BORDER_HOVER,
};
export const muiTheme = createTheme({
overrides: {
MuiIconButton: {
root: {
backgroundColor: 'rgba(0, 0, 0, 0) !important',
},
},
},
props: {
MuiButtonBase: {
disableRipple: true,
},
},
});