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 ];