|
1 |
| -const LIGHT_BACKGROUND = '#ffffff'; |
2 | 1 | const INHERIT = 'inherit';
|
3 |
| -const SUBMIT_COLOR = 'rgba(108, 95, 199, 1)'; |
| 2 | +const PURPLE = 'rgba(88, 74, 192, 1)'; |
| 3 | +const PURPLE_HOVER = 'rgba(108, 95, 199, 1)'; |
4 | 4 |
|
5 | 5 | export const LIGHT_THEME = {
|
6 |
| - fontFamily: "system-ui, 'Helvetica Neue', Arial, sans-serif", |
7 |
| - fontSize: '14px', |
8 |
| - |
9 | 6 | foreground: '#2b2233',
|
10 |
| - background: LIGHT_BACKGROUND, |
11 |
| - success: '#268d75', |
12 |
| - error: '#df3338', |
13 |
| - |
14 |
| - zIndex: 100000, |
| 7 | + successForeground: '#268d75', |
| 8 | + errorForeground: '#df3338', |
| 9 | + background: '#ffffff', |
15 | 10 | border: '1.5px solid rgba(41, 35, 47, 0.13)',
|
16 | 11 | boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
|
17 | 12 |
|
18 |
| - backgroundHover: '#f6f6f7', |
19 |
| - borderRadius: '25px', |
20 |
| - |
21 |
| - formBorderRadius: '20px', |
22 |
| - formContentBorderRadius: '6px', |
23 |
| - |
24 |
| - submitForeground: LIGHT_BACKGROUND, |
25 |
| - submitBackground: 'rgba(88, 74, 192, 1)', |
26 |
| - submitForegroundHover: LIGHT_BACKGROUND, |
27 |
| - submitBackgroundHover: SUBMIT_COLOR, |
28 |
| - submitBorder: SUBMIT_COLOR, |
| 13 | + inputForeground: INHERIT, |
| 14 | + inputBackground: INHERIT, |
| 15 | + inputBackgroundHover: INHERIT, |
| 16 | + inputBackgroundFocus: INHERIT, |
| 17 | + inputBorder: 'var(--border)', |
| 18 | + inputBorderRadius: '6px', |
| 19 | + inputOutlineFocus: PURPLE_HOVER, |
| 20 | + |
| 21 | + buttonForeground: INHERIT, |
| 22 | + buttonForegroundHover: INHERIT, |
| 23 | + buttonBackground: 'var(--background)', |
| 24 | + buttonBackgroundHover: '#f6f6f7', |
| 25 | + buttonBorder: 'var(--border)', |
| 26 | + buttonOutlineFocus: 'var(--input-outline-focus)', |
| 27 | + |
| 28 | + submitForeground: '#ffffff', |
| 29 | + submitForegroundHover: '#ffffff', |
| 30 | + submitBackground: PURPLE, |
| 31 | + submitBackgroundHover: PURPLE_HOVER, |
| 32 | + submitBorder: PURPLE_HOVER, |
| 33 | + submitBorderRadius: 'var(--button-border-radius)', |
29 | 34 | submitOutlineFocus: '#29232f',
|
30 | 35 |
|
31 |
| - cancelForeground: 'var(--foreground)', |
32 |
| - cancelBackground: 'transparent', |
33 |
| - cancelForegroundHover: 'var(--foreground)', |
34 |
| - cancelBackgroundHover: 'var(--background-hover)', |
35 |
| - cancelBorder: 'var(--border)', |
36 |
| - cancelOutlineFocus: 'var(--input-outline-focus)', |
| 36 | + triggerBackground: 'var(--background)', |
| 37 | + triggerBackgroundHover: 'var(--button-background-hover)', |
| 38 | + triggerBorderRadius: '1.7em/50%', |
37 | 39 |
|
38 |
| - inputBackground: INHERIT, |
39 |
| - inputForeground: INHERIT, |
40 |
| - inputBorder: 'var(--border)', |
41 |
| - inputOutlineFocus: SUBMIT_COLOR, |
| 40 | + dialogBackground: 'var(--background)', |
| 41 | + dialogBorderRadius: '20px', |
42 | 42 | };
|
43 | 43 |
|
44 | 44 | export const DEFAULT_THEME = {
|
45 | 45 | light: LIGHT_THEME,
|
46 | 46 | dark: {
|
47 | 47 | ...LIGHT_THEME,
|
48 | 48 |
|
49 |
| - background: '#29232f', |
50 |
| - backgroundHover: '#352f3b', |
51 | 49 | foreground: '#ebe6ef',
|
52 |
| - border: '1.5px solid rgba(235, 230, 239, 0.15)', |
| 50 | + successForeground: '#2da98c', |
| 51 | + errorForeground: '#f55459', |
| 52 | + background: '#29232f', |
| 53 | + border: '1.5px solid rgba(235, 230, 239, 0.5)', |
| 54 | + boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)', |
53 | 55 |
|
54 |
| - success: '#2da98c', |
55 |
| - error: '#f55459', |
| 56 | + buttonBackgroundHover: '#352f3b', |
56 | 57 | },
|
57 | 58 | };
|
0 commit comments