/ frontend / src / app / components / MatxTheme / themeColors.js
themeColors.js
  1  const textLight = {
  2    primary: 'rgba(52, 49, 76, 1)',
  3    secondary: 'rgba(52, 49, 76, 0.54)',
  4    disabled: 'rgba(52, 49, 76, 0.38)',
  5    hint: 'rgba(52, 49, 76, 0.38)',
  6  };
  7  
  8  const textDark = {
  9    primary: '#fff',
 10    secondary: 'rgba(255, 255, 255, 0.7)',
 11    disabled: 'rgba(255, 255, 255, 0.64)',
 12    hint: 'rgba(255, 255, 255, 0.64)',
 13  };
 14  
 15  const secondaryColor = {
 16    light: '#f9a352',
 17    main: '#ff9e43',
 18    dark: '#ff932e',
 19    contrastText: textLight.primary,
 20  };
 21  const errorColor = {
 22    main: '#FF3D57',
 23  };
 24  
 25  export const themeColors = {
 26    whitePurple: {
 27      palette: {
 28        type: 'light',
 29        primary: {
 30          main: '#ffffff',
 31          contrastText: textLight.primary,
 32        },
 33        secondary: {
 34          main: '#7467ef',
 35          contrastText: '#ffffff',
 36        },
 37        background: {
 38          paper: '#fff',
 39          default: '#fafafa',
 40        },
 41        error: errorColor,
 42        text: textLight,
 43      },
 44    },
 45    whiteBlue: {
 46      palette: {
 47        type: 'light',
 48        primary: {
 49          main: '#ffffff',
 50          contrastText: textLight.primary,
 51        },
 52        secondary: {
 53          main: '#1976d2',
 54          contrastText: '#ffffff',
 55        },
 56        background: {
 57          paper: '#fff',
 58          default: '#fafafa',
 59        },
 60        text: textLight,
 61      },
 62    },
 63    slateDark1: {
 64      palette: {
 65        type: 'dark',
 66        primary: {
 67          main: '#222A45',
 68          contrastText: '#ffffff',
 69        },
 70        secondary: {
 71          main: '#ff9e43',
 72          contrastText: textLight.primary,
 73        },
 74        error: errorColor,
 75        background: {
 76          paper: '#222A45',
 77          default: '#1a2038',
 78        },
 79        text: textDark,
 80      },
 81    },
 82    slateDark2: {
 83      palette: {
 84        type: 'dark',
 85        primary: {
 86          main: '#1a2038',
 87          contrastText: '#ffffff',
 88        },
 89        secondary: {
 90          main: '#ff9e43',
 91          contrastText: textLight.primary,
 92        },
 93        error: errorColor,
 94        background: {
 95          paper: '#222A45',
 96          default: '#1a2038',
 97        },
 98        text: textDark,
 99      },
100    },
101    purple1: {
102      palette: {
103        type: 'light',
104        primary: {
105          main: '#7467ef',
106          contrastText: '#ffffff',
107        },
108        secondary: secondaryColor,
109        error: errorColor,
110        background: {
111          paper: '#fff',
112          default: '#fafafa',
113        },
114        text: textLight,
115      },
116    },
117    purple2: {
118      palette: {
119        type: 'light',
120        primary: {
121          main: '#6a75c9',
122          contrastText: '#ffffff',
123        },
124        secondary: {
125          main: '#ff9e43',
126          contrastText: textLight.primary,
127        },
128        error: errorColor,
129        background: {
130          paper: '#fff',
131          default: '#fafafa',
132        },
133        text: textLight,
134      },
135    },
136    purpleDark1: {
137      palette: {
138        type: 'dark',
139        primary: {
140          main: '#7467ef',
141          contrastText: '#ffffff',
142        },
143        secondary: {
144          main: '#ff9e43',
145          contrastText: textLight.primary,
146        },
147        error: errorColor,
148        background: {
149          paper: '#222A45',
150          default: '#1a2038',
151        },
152        text: textDark,
153      },
154    },
155    purpleDark2: {
156      palette: {
157        type: 'dark',
158        primary: {
159          main: '#6a75c9',
160          contrastText: '#ffffff',
161        },
162        secondary: {
163          main: '#ff9e43',
164          contrastText: textLight.primary,
165        },
166        error: errorColor,
167        background: {
168          paper: '#222A45',
169          default: '#1a2038',
170        },
171        text: textDark,
172      },
173    },
174    blue: {
175      palette: {
176        type: 'light',
177        primary: {
178          main: '#1976d2',
179          contrastText: '#ffffff',
180        },
181        secondary: {
182          main: '#FFAF38',
183          contrastText: textLight.primary,
184        },
185        error: errorColor,
186        background: {
187          paper: '#fff',
188          default: '#fafafa',
189        },
190        text: textLight,
191      },
192    },
193    blueDark: {
194      palette: {
195        type: 'dark',
196        primary: {
197          main: '#1976d2',
198          contrastText: '#ffffff',
199        },
200        secondary: {
201          main: '#FF4F30',
202          contrastText: textLight.primary,
203        },
204        error: errorColor,
205        background: {
206          paper: '#222A45',
207          default: '#1a2038',
208        },
209        text: textDark,
210      },
211    },
212    red: {
213      palette: {
214        type: 'dark',
215        primary: {
216          main: '#e53935',
217          contrastText: '#ffffff',
218        },
219        secondary: {
220          main: '#FFAF38',
221          contrastText: textLight.primary,
222        },
223        error: errorColor,
224        text: textDark,
225      },
226    },
227  };
228  
229  export const themeShadows = [
230    'none',
231    '0px 2px 1px -1px rgba(0, 0, 0, 0.06),0px 1px 1px 0px rgba(0, 0, 0, 0.042),0px 1px 3px 0px rgba(0, 0, 0, 0.036)',
232    '0px 3px 1px -2px rgba(0, 0, 0, 0.06),0px 2px 2px 0px rgba(0, 0, 0, 0.042),0px 1px 5px 0px rgba(0, 0, 0, 0.036)',
233    '0px 3px 3px -2px rgba(0, 0, 0, 0.06),0px 3px 4px 0px rgba(0, 0, 0, 0.042),0px 1px 8px 0px rgba(0, 0, 0, 0.036)',
234    '0px 2px 4px -1px rgba(0, 0, 0, 0.06),0px 4px 5px 0px rgba(0, 0, 0, 0.042),0px 1px 10px 0px rgba(0, 0, 0, 0.036)',
235    '0px 3px 5px -1px rgba(0, 0, 0, 0.06),0px 5px 8px 0px rgba(0, 0, 0, 0.042),0px 1px 14px 0px rgba(0, 0, 0, 0.036)',
236    '0px 3px 5px -1px rgba(0, 0, 0, 0.06),0px 6px 10px 0px rgba(0, 0, 0, 0.042),0px 1px 18px 0px rgba(0, 0, 0, 0.036)',
237    '0px 4px 5px -2px rgba(0, 0, 0, 0.06),0px 7px 10px 1px rgba(0, 0, 0, 0.042),0px 2px 16px 1px rgba(0, 0, 0, 0.036)',
238    '0px 5px 5px -3px rgba(0, 0, 0, 0.06),0px 8px 10px 1px rgba(0, 0, 0, 0.042),0px 3px 14px 2px rgba(0, 0, 0, 0.036)',
239    '0px 5px 6px -3px rgba(0, 0, 0, 0.06),0px 9px 12px 1px rgba(0, 0, 0, 0.042),0px 3px 16px 2px rgba(0, 0, 0, 0.036)',
240    '0px 6px 6px -3px rgba(0, 0, 0, 0.06),0px 10px 14px 1px rgba(0, 0, 0, 0.042),0px 4px 18px 3px rgba(0, 0, 0, 0.036)',
241    '0px 6px 7px -4px rgba(0, 0, 0, 0.06),0px 11px 15px 1px rgba(0, 0, 0, 0.042),0px 4px 20px 3px rgba(0, 0, 0, 0.036)',
242    '0px 7px 8px -4px rgba(0, 0, 0, 0.06),0px 12px 17px 2px rgba(0, 0, 0, 0.042),0px 5px 22px 4px rgba(0, 0, 0, 0.036)',
243    '0px 7px 8px -4px rgba(0, 0, 0, 0.06),0px 13px 19px 2px rgba(0, 0, 0, 0.042),0px 5px 24px 4px rgba(0, 0, 0, 0.036)',
244    '0px 7px 9px -4px rgba(0, 0, 0, 0.06),0px 14px 21px 2px rgba(0, 0, 0, 0.042),0px 5px 26px 4px rgba(0, 0, 0, 0.036)',
245    '0px 8px 9px -5px rgba(0, 0, 0, 0.06),0px 15px 22px 2px rgba(0, 0, 0, 0.042),0px 6px 28px 5px rgba(0, 0, 0, 0.036)',
246    '0px 8px 10px -5px rgba(0, 0, 0, 0.06),0px 16px 24px 2px rgba(0, 0, 0, 0.042),0px 6px 30px 5px rgba(0, 0, 0, 0.036)',
247    '0px 8px 11px -5px rgba(0, 0, 0, 0.06),0px 17px 26px 2px rgba(0, 0, 0, 0.042),0px 6px 32px 5px rgba(0, 0, 0, 0.036)',
248    '0px 9px 11px -5px rgba(0, 0, 0, 0.06),0px 18px 28px 2px rgba(0, 0, 0, 0.042),0px 7px 34px 6px rgba(0, 0, 0, 0.036)',
249    '0px 9px 12px -6px rgba(0, 0, 0, 0.06),0px 19px 29px 2px rgba(0, 0, 0, 0.042),0px 7px 36px 6px rgba(0, 0, 0, 0.036)',
250    '0px 10px 13px -6px rgba(0, 0, 0, 0.06),0px 20px 31px 3px rgba(0, 0, 0, 0.042),0px 8px 38px 7px rgba(0, 0, 0, 0.036)',
251    '0px 10px 13px -6px rgba(0, 0, 0, 0.06),0px 20px 31px 3px rgba(0, 0, 0, 0.042),0px 8px 38px 7px rgba(0, 0, 0, 0.036)',
252    '0px 10px 13px -6px rgba(0, 0, 0, 0.06),0px 20px 31px 3px rgba(0, 0, 0, 0.042),0px 8px 38px 7px rgba(0, 0, 0, 0.036)',
253    '0px 10px 13px -6px rgba(0, 0, 0, 0.06),0px 20px 31px 3px rgba(0, 0, 0, 0.042),0px 8px 38px 7px rgba(0, 0, 0, 0.036)',
254    '0px 10px 13px -6px rgba(0, 0, 0, 0.06),0px 20px 31px 3px rgba(0, 0, 0, 0.042),0px 8px 38px 7px rgba(0, 0, 0, 0.036)',
255  ];