1import { darkTheme, lightTheme, shadows, typography } from '@expo/styleguide-native';
2import { Text as RNText, TextInput as RNTextInput } from 'react-native';
3
4import { create } from './create-primitive';
5import { text, textDark, padding, rounded } from './theme';
6
7export const Heading = create(RNText, {
8  base: {
9    fontFamily: 'Inter-SemiBold',
10    color: lightTheme.text.default,
11    ...typography.fontSizes[18],
12  },
13
14  props: {
15    accessibilityRole: 'header',
16  },
17
18  variants: {
19    ...text,
20
21    size: {
22      large: typography.fontSizes[22],
23      small: typography.fontSizes[13],
24    },
25  },
26
27  selectors: {
28    dark: textDark,
29  },
30});
31
32export const Text = create(RNText, {
33  base: {
34    fontFamily: 'Inter-Regular',
35    color: lightTheme.text.default,
36    fontSize: 16,
37    lineHeight: 18,
38  },
39
40  props: {
41    accessibilityRole: 'text',
42  },
43
44  variants: {
45    ...text,
46  },
47
48  selectors: {
49    dark: textDark,
50  },
51});
52
53export const TextInput = create(RNTextInput, {
54  base: {
55    fontFamily: 'Inter-Regular',
56    color: lightTheme.text.default,
57    fontSize: 16,
58    lineHeight: 18,
59  },
60
61  variants: {
62    ...text,
63
64    border: {
65      default: {
66        borderWidth: 1,
67        borderColor: lightTheme.border.default,
68      },
69    },
70
71    ...rounded,
72
73    ...padding,
74
75    shadow: {
76      input: shadows.input,
77    },
78  },
79
80  selectors: {
81    dark: {
82      ...textDark,
83
84      border: {
85        default: {
86          borderColor: darkTheme.border.default,
87          borderWidth: 1,
88        },
89      },
90    },
91  },
92});
93