UNPKG

3.65 kBJavaScriptView Raw
1/* @flow */
2import color from 'color-js';
3
4const maxContentWidth = '660px';
5
6// spacing
7const spacing = {
8 wee: '2.5px',
9 tiny: '5px',
10 small: '10px',
11 medium: '20px',
12 large: '30px',
13 xlarge: '50px',
14};
15
16// avatars
17const avatarSizes = {
18 small: '24px',
19 medium: '36px',
20 large: '48px',
21 xlarge: '64px',
22};
23
24// colors
25const grey = color('#615B69');
26const red = color('#D53A60');
27const green = color('#198346');
28const blue = color('#0079CB');
29const yellow = color('#FFD740');
30const 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
70const 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// fonts
84const 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
102const borderRadius = {
103 small: '3px',
104 medium: '5px',
105 round: '50%',
106};
107
108const navHeight = '60px';
109const footerHeight = '45px';
110const orderHeaderHeight = '45px';
111const paginationHeight = '65px';
112
113const breakpoints = {
114 minWidth: '360px',
115 slim: '660px',
116 mobile: '768px',
117 tablet: '769px',
118 desktop: '980px',
119 widescreen: '1180px',
120};
121
122// borders
123const 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// shadows
140const 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
148const 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
166export default theme;