1import { darkTheme, lightTheme, shadows } 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    fontSize: 18,
10    lineHeight: 20,
11    fontWeight: '600',
12    color: lightTheme.text.default,
13  },
14
15  props: {
16    accessibilityRole: 'header',
17  },
18
19  variants: {
20    ...text,
21
22    size: {
23      large: {
24        fontSize: 22,
25        lineHeight: 28,
26      },
27      small: {
28        fontSize: 13,
29        lineHeight: 20,
30      },
31    },
32  },
33
34  selectors: {
35    dark: textDark,
36  },
37});
38
39export const Text = create(RNText, {
40  base: {
41    fontWeight: 'normal',
42    color: lightTheme.text.default,
43    fontSize: 16,
44    lineHeight: 18,
45  },
46
47  props: {
48    accessibilityRole: 'text',
49  },
50
51  variants: {
52    ...text,
53  },
54
55  selectors: {
56    dark: textDark,
57  },
58});
59
60export const TextInput = create(RNTextInput, {
61  base: {
62    fontWeight: 'normal',
63    color: lightTheme.text.default,
64    fontSize: 16,
65    lineHeight: 18,
66  },
67
68  variants: {
69    ...text,
70
71    border: {
72      default: {
73        borderWidth: 1,
74        borderColor: lightTheme.border.default,
75      },
76    },
77
78    ...rounded,
79
80    ...padding,
81
82    shadow: {
83      input: shadows.input,
84    },
85  },
86
87  selectors: {
88    dark: {
89      ...textDark,
90
91      border: {
92        default: {
93          borderColor: darkTheme.border.default,
94          borderWidth: 1,
95        },
96      },
97    },
98  },
99});
100