1import { spacing, lightTheme, darkTheme, borderRadius } from '@expo/styleguide-native';
2import { TextStyle } from 'react-native';
3
4export const scale = {
5  micro: spacing[0.5],
6  tiny: spacing[1],
7  small: spacing[3],
8  medium: spacing[4],
9  large: spacing[6],
10  xl: spacing[8],
11};
12
13export const padding = {
14  padding: {
15    micro: { padding: scale.micro },
16    tiny: { padding: scale.tiny },
17    small: { padding: scale.small },
18    medium: { padding: scale.medium },
19    large: { padding: scale.large },
20    xl: { padding: scale.xl },
21  },
22
23  px: {
24    micro: { paddingHorizontal: scale.micro },
25    tiny: { paddingHorizontal: scale.tiny },
26    small: { paddingHorizontal: scale.small },
27    medium: { paddingHorizontal: scale.medium },
28    large: { paddingHorizontal: scale.large },
29    xl: { paddingHorizontal: scale.xl },
30  },
31
32  py: {
33    micro: { paddingVertical: scale.micro },
34    tiny: { paddingVertical: scale.tiny },
35    small: { paddingVertical: scale.small },
36    medium: { paddingVertical: scale.medium },
37    large: { paddingVertical: scale.large },
38    xl: { paddingVertical: scale.xl },
39  },
40};
41
42export const margin = {
43  margin: {
44    micro: { margin: scale.micro },
45    tiny: { margin: scale.tiny },
46    small: { margin: scale.small },
47    medium: { margin: scale.medium },
48    large: { margin: scale.large },
49    xl: { margin: scale.xl },
50  },
51
52  mx: {
53    micro: { marginHorizontal: scale.micro },
54    tiny: { marginHorizontal: scale.tiny },
55    small: { marginHorizontal: scale.small },
56    medium: { marginHorizontal: scale.medium },
57    large: { marginHorizontal: scale.large },
58  },
59
60  my: {
61    micro: { marginHorizontal: scale.micro },
62    tiny: { marginVertical: scale.tiny },
63    small: { marginVertical: scale.small },
64    medium: { marginVertical: scale.medium },
65    large: { marginVertical: scale.large },
66  },
67};
68
69export const rounded = {
70  rounded: {
71    none: { borderRadius: 0 },
72    small: { borderRadius: borderRadius.small },
73    medium: { borderRadius: borderRadius.medium },
74    large: { borderRadius: borderRadius.large },
75    full: { borderRadius: 99999 },
76  },
77
78  roundedTop: {
79    none: { borderTopLeftRadius: 0, borderTopRightRadius: 0 },
80    small: { borderTopLeftRadius: borderRadius.small, borderTopRightRadius: borderRadius.small },
81    medium: {
82      borderTopLeftRadius: borderRadius.medium,
83      borderTopRightRadius: borderRadius.medium,
84    },
85    large: { borderTopLeftRadius: borderRadius.large, borderTopRightRadius: borderRadius.large },
86    full: { borderTopLeftRadius: 9999, borderTopRightRadius: 9999 },
87  },
88
89  roundedBottom: {
90    none: { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 },
91    small: {
92      borderBottomLeftRadius: borderRadius.small,
93      borderBottomRightRadius: borderRadius.small,
94    },
95    medium: {
96      borderBottomLeftRadius: borderRadius.medium,
97      borderBottomRightRadius: borderRadius.medium,
98    },
99    large: {
100      borderBottomLeftRadius: borderRadius.large,
101      borderBottomRightRadius: borderRadius.large,
102    },
103    full: { borderBottomLeftRadius: 9999, borderBottomRightRadius: 9999 },
104  },
105};
106
107export const text = {
108  align: {
109    center: { textAlign: 'center' as TextStyle['textAlign'] },
110  },
111
112  size: {
113    small: {
114      fontSize: 12,
115      lineHeight: 14,
116    },
117    medium: {
118      fontSize: 16,
119      lineHeight: 18,
120    },
121    large: {
122      fontSize: 18,
123      lineHeight: 24,
124    },
125  },
126
127  leading: {
128    large: { lineHeight: 18 },
129  },
130
131  type: {
132    mono: {
133      fontFamily: 'Menlo',
134    },
135  },
136
137  weight: {
138    thin: { fontWeight: '100' as TextStyle['fontWeight'] },
139    extralight: { fontWeight: '200' as TextStyle['fontWeight'] },
140    light: { fontWeight: '300' as TextStyle['fontWeight'] },
141    normal: { fontWeight: '400' as TextStyle['fontWeight'] },
142    medium: { fontWeight: '500' as TextStyle['fontWeight'] },
143    semibold: { fontWeight: '600' as TextStyle['fontWeight'] },
144    bold: { fontWeight: '700' as TextStyle['fontWeight'] },
145    extrabold: { fontWeight: '800' as TextStyle['fontWeight'] },
146    black: { fontWeight: '900' as TextStyle['fontWeight'] },
147  },
148
149  color: {
150    default: { color: lightTheme.text.default },
151    error: { color: lightTheme.text.error },
152    warning: { color: lightTheme.text.warning },
153    success: { color: lightTheme.text.success },
154    secondary: { color: lightTheme.text.secondary },
155    primary: { color: lightTheme.button.primary.background },
156  },
157};
158
159export const textDark = {
160  base: {
161    color: darkTheme.text.default,
162  },
163
164  color: {
165    default: { color: darkTheme.text.default },
166    error: { color: darkTheme.text.error },
167    warning: { color: darkTheme.text.warning },
168    success: { color: darkTheme.text.success },
169    secondary: { color: darkTheme.text.secondary },
170    primary: { color: darkTheme.button.primary.background },
171  },
172};
173
174export const bg = {
175  none: { backgroundColor: 'transparent' },
176  default: { backgroundColor: lightTheme.background.default },
177  secondary: { backgroundColor: lightTheme.background.secondary },
178  success: { backgroundColor: lightTheme.background.success },
179  warning: { backgroundColor: lightTheme.background.warning },
180  error: { backgroundColor: lightTheme.background.error },
181};
182
183export const bgDark = {
184  default: { backgroundColor: darkTheme.background.default },
185  secondary: { backgroundColor: darkTheme.background.secondary },
186  success: { backgroundColor: darkTheme.background.success },
187  warning: { backgroundColor: darkTheme.background.warning },
188  error: { backgroundColor: darkTheme.background.error },
189};
190
191type NavigationTheme = {
192  dark: boolean;
193  colors: {
194    primary: string;
195    background: string;
196    card: string;
197    text: string;
198    border: string;
199    notification: string;
200  };
201};
202
203export const lightNavigationTheme: NavigationTheme = {
204  dark: false,
205  colors: {
206    primary: lightTheme.button.primary.background,
207    background: lightTheme.background.secondary,
208    card: lightTheme.background.default,
209    text: lightTheme.text.default,
210    border: lightTheme.border.default,
211    notification: lightTheme.highlight.accent,
212  },
213};
214
215export const darkNavigationTheme: NavigationTheme = {
216  dark: true,
217  colors: {
218    primary: darkTheme.button.primary.background,
219    background: darkTheme.background.secondary,
220    card: darkTheme.background.default,
221    text: darkTheme.text.default,
222    border: darkTheme.border.default,
223    notification: darkTheme.highlight.accent,
224  },
225};
226