1 |
|
2 | import color from 'color-js';
|
3 |
|
4 | const maxContentWidth = '660px';
|
5 |
|
6 |
|
7 | const spacing = {
|
8 | wee: '2.5px',
|
9 | tiny: '5px',
|
10 | small: '10px',
|
11 | medium: '20px',
|
12 | large: '30px',
|
13 | xlarge: '50px',
|
14 | };
|
15 |
|
16 |
|
17 | const avatarSizes = {
|
18 | small: '24px',
|
19 | medium: '36px',
|
20 | large: '48px',
|
21 | xlarge: '64px',
|
22 | };
|
23 |
|
24 |
|
25 | const grey = color('#615B69');
|
26 | const red = color('#D53A60');
|
27 | const green = color('#198346');
|
28 | const blue = color('#0079CB');
|
29 | const yellow = color('#FFD740');
|
30 | const colors = {
|
31 | grey: {
|
32 | default: grey.toString(),
|
33 | ultraLight: grey.lightenByAmount(0.59).toString(),
|
34 | light: grey.lightenByAmount(0.4).toString(),
|
35 | medium: grey.lightenByAmount(0.05).toString(),
|
36 | dark: grey.darkenByAmount(0.25).toString(),
|
37 | ultraDark: grey.darkenByAmount(0.7).toString(),
|
38 | },
|
39 | red: {
|
40 | default: red.toString(),
|
41 | ultraLight: red.lightenByAmount(0.46).toString(),
|
42 | light: red.lightenByAmount(0.25).toString(),
|
43 | dark: red.darkenByAmount(0.1).toString(),
|
44 | },
|
45 | green: {
|
46 | default: green.toString(),
|
47 | medium: green.lightenByAmount(0.26).toString(),
|
48 | ultraLight: green.lightenByAmount(0.65).toString(),
|
49 | },
|
50 | blue: {
|
51 | default: blue.toString(),
|
52 | medium: blue.darkenByAmount(0.05).toString(),
|
53 | },
|
54 | yellow: {
|
55 | default: yellow,
|
56 | medium: yellow.darkenByAmount(0.05).toString(),
|
57 | },
|
58 | borders: {
|
59 | light: color('#E1DFE4').toString(),
|
60 | medium: color('#D0D0D0').toString(),
|
61 | dark: color('#615B69').toString(),
|
62 | default: `1px solid ${color('#E1DFE4').toString()}`,
|
63 | },
|
64 | success: color('#32D578').toString(),
|
65 | modal: {
|
66 | background: grey.setAlpha(0.5).toString(),
|
67 | },
|
68 | };
|
69 |
|
70 | const fontSizes = {
|
71 | wee: '.7rem',
|
72 | tiny: '.8rem',
|
73 | discrete: '.9rem',
|
74 | normal: '1rem',
|
75 | default: '1rem',
|
76 | plus1: '1.2rem',
|
77 | plus2: '1.3rem',
|
78 | plus3: '1.5rem',
|
79 | plus4: '1.75rem',
|
80 | plus5: '2rem',
|
81 | };
|
82 |
|
83 |
|
84 | const fonts = {
|
85 | default: 'Lato',
|
86 | headers: 'Lato',
|
87 | sizes: {
|
88 | default: '1rem',
|
89 | tiny: '.7rem',
|
90 | small: '.8rem',
|
91 | discrete: '.9rem',
|
92 | plus1: '1.2rem',
|
93 | plus2: '1.3rem',
|
94 | plus3: '1.5rem',
|
95 | plus4: '1.75rem',
|
96 | plus5: '2rem',
|
97 | plus6: '2.5rem',
|
98 | metadata: '.8rem',
|
99 | },
|
100 | };
|
101 |
|
102 | const borderRadius = {
|
103 | small: '3px',
|
104 | medium: '5px',
|
105 | round: '50%',
|
106 | };
|
107 |
|
108 | const navHeight = '60px';
|
109 | const footerHeight = '45px';
|
110 | const orderHeaderHeight = '45px';
|
111 | const paginationHeight = '65px';
|
112 |
|
113 | const breakpoints = {
|
114 | minWidth: '360px',
|
115 | slim: '660px',
|
116 | mobile: '768px',
|
117 | tablet: '769px',
|
118 | desktop: '980px',
|
119 | widescreen: '1180px',
|
120 | };
|
121 |
|
122 |
|
123 | const borders = {
|
124 | colors: {
|
125 | light: grey.lightenByAmount(0.5).toString(),
|
126 | default: colors.grey.light,
|
127 | medium: colors.grey.default,
|
128 | dark: colors.grey.dark,
|
129 | },
|
130 | radius: {
|
131 | default: '3px',
|
132 | small: '3px',
|
133 | medium: '5px',
|
134 | round: '50%',
|
135 | },
|
136 | default: `1px solid ${colors.borders.light}`,
|
137 | };
|
138 |
|
139 |
|
140 | const shadows = {
|
141 | default: `0 0 12px rgba(0,0,0,.15)`,
|
142 | shallow: `0 0 5px rgba(0,0,0,.20)`,
|
143 | deep: `20px 35px 45px rgba(0,0,0,.10)`,
|
144 | up: `0 -6px 12px rgba(0,0,0,.15)`,
|
145 | down: `0 6px 12px rgba(0,0,0,.15)`,
|
146 | };
|
147 |
|
148 | const theme = {
|
149 | maxContentWidth,
|
150 | spacing,
|
151 | avatarSizes,
|
152 | colors,
|
153 | fontSizes,
|
154 | fonts,
|
155 | borderRadius,
|
156 | navHeight,
|
157 | footerHeight,
|
158 | orderHeaderHeight,
|
159 | paginationHeight,
|
160 | breakpoints,
|
161 | borders,
|
162 | shadows,
|
163 | animationDuration: '0.33s',
|
164 | };
|
165 |
|
166 | export default theme;
|