lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
1import {Platform} from 'react-native'
2import type {Theme} from './ThemeContext'
3import {colors} from './styles'
4
5export const defaultTheme: Theme = {
6 colorScheme: 'light',
7 palette: {
8 default: {
9 background: colors.white,
10 backgroundLight: colors.gray1,
11 text: colors.black,
12 textLight: colors.gray5,
13 textInverted: colors.white,
14 link: colors.blue3,
15 border: '#f0e9e9',
16 borderDark: '#e0d9d9',
17 icon: colors.gray4,
18
19 // non-standard
20 textVeryLight: colors.gray4,
21 replyLine: colors.gray2,
22 replyLineDot: colors.gray3,
23 unreadNotifBg: '#ebf6ff',
24 postCtrl: '#71768A',
25 brandText: '#0066FF',
26 emptyStateIcon: '#B6B6C9',
27 },
28 primary: {
29 background: colors.blue3,
30 backgroundLight: colors.blue2,
31 text: colors.white,
32 textLight: colors.blue0,
33 textInverted: colors.blue3,
34 link: colors.blue0,
35 border: colors.blue4,
36 borderDark: colors.blue5,
37 icon: colors.blue4,
38 },
39 secondary: {
40 background: colors.green3,
41 backgroundLight: colors.green2,
42 text: colors.white,
43 textLight: colors.green1,
44 textInverted: colors.green4,
45 link: colors.green1,
46 border: colors.green4,
47 borderDark: colors.green5,
48 icon: colors.green4,
49 },
50 inverted: {
51 background: colors.black,
52 backgroundLight: colors.gray6,
53 text: colors.white,
54 textLight: colors.gray3,
55 textInverted: colors.black,
56 link: colors.blue2,
57 border: colors.gray3,
58 borderDark: colors.gray2,
59 icon: colors.gray5,
60 },
61 error: {
62 background: colors.red3,
63 backgroundLight: colors.red2,
64 text: colors.white,
65 textLight: colors.red1,
66 textInverted: colors.red3,
67 link: colors.red1,
68 border: colors.red4,
69 borderDark: colors.red5,
70 icon: colors.red4,
71 },
72 },
73 shapes: {
74 button: {
75 // TODO
76 },
77 bigButton: {
78 // TODO
79 },
80 smallButton: {
81 // TODO
82 },
83 },
84 typography: {
85 'xl-thin': {
86 fontSize: 17,
87 letterSpacing: 0.25,
88 fontWeight: '300',
89 },
90 xl: {
91 fontSize: 17,
92 letterSpacing: 0.25,
93 fontWeight: '400',
94 },
95 'xl-medium': {
96 fontSize: 17,
97 letterSpacing: 0.25,
98 fontWeight: '500',
99 },
100 'xl-bold': {
101 fontSize: 17,
102 letterSpacing: 0.25,
103 fontWeight: '700',
104 },
105 'xl-heavy': {
106 fontSize: 17,
107 letterSpacing: 0.25,
108 fontWeight: '800',
109 },
110 'lg-thin': {
111 fontSize: 16,
112 letterSpacing: 0.25,
113 fontWeight: '300',
114 },
115 lg: {
116 fontSize: 16,
117 letterSpacing: 0.25,
118 fontWeight: '400',
119 },
120 'lg-medium': {
121 fontSize: 16,
122 letterSpacing: 0.25,
123 fontWeight: '500',
124 },
125 'lg-bold': {
126 fontSize: 16,
127 letterSpacing: 0.25,
128 fontWeight: '700',
129 },
130 'lg-heavy': {
131 fontSize: 16,
132 letterSpacing: 0.25,
133 fontWeight: '800',
134 },
135 'md-thin': {
136 fontSize: 15,
137 letterSpacing: 0.25,
138 fontWeight: '300',
139 },
140 md: {
141 fontSize: 15,
142 letterSpacing: 0.25,
143 fontWeight: '400',
144 },
145 'md-medium': {
146 fontSize: 15,
147 letterSpacing: 0.25,
148 fontWeight: '500',
149 },
150 'md-bold': {
151 fontSize: 15,
152 letterSpacing: 0.25,
153 fontWeight: '700',
154 },
155 'md-heavy': {
156 fontSize: 15,
157 letterSpacing: 0.25,
158 fontWeight: '800',
159 },
160 'sm-thin': {
161 fontSize: 14,
162 letterSpacing: 0.25,
163 fontWeight: '300',
164 },
165 sm: {
166 fontSize: 14,
167 letterSpacing: 0.25,
168 fontWeight: '400',
169 },
170 'sm-medium': {
171 fontSize: 14,
172 letterSpacing: 0.25,
173 fontWeight: '500',
174 },
175 'sm-bold': {
176 fontSize: 14,
177 letterSpacing: 0.25,
178 fontWeight: '700',
179 },
180 'sm-heavy': {
181 fontSize: 14,
182 letterSpacing: 0.25,
183 fontWeight: '800',
184 },
185 'xs-thin': {
186 fontSize: 13,
187 letterSpacing: 0.25,
188 fontWeight: '300',
189 },
190 xs: {
191 fontSize: 13,
192 letterSpacing: 0.25,
193 fontWeight: '400',
194 },
195 'xs-medium': {
196 fontSize: 13,
197 letterSpacing: 0.25,
198 fontWeight: '500',
199 },
200 'xs-bold': {
201 fontSize: 13,
202 letterSpacing: 0.25,
203 fontWeight: '700',
204 },
205 'xs-heavy': {
206 fontSize: 13,
207 letterSpacing: 0.25,
208 fontWeight: '800',
209 },
210
211 'title-2xl': {
212 fontSize: 34,
213 letterSpacing: 0.25,
214 fontWeight: '500',
215 },
216 'title-xl': {
217 fontSize: 28,
218 letterSpacing: 0.25,
219 fontWeight: '500',
220 },
221 'title-lg': {
222 fontSize: 22,
223 fontWeight: '500',
224 },
225 title: {
226 fontWeight: '500',
227 fontSize: 20,
228 letterSpacing: 0.15,
229 },
230 'title-sm': {
231 fontWeight: 'bold',
232 fontSize: 17,
233 letterSpacing: 0.15,
234 },
235 'post-text': {
236 fontSize: 16,
237 letterSpacing: 0.2,
238 fontWeight: '400',
239 },
240 'post-text-lg': {
241 fontSize: 22,
242 letterSpacing: 0.4,
243 fontWeight: '400',
244 },
245 'button-lg': {
246 fontWeight: '500',
247 fontSize: 18,
248 letterSpacing: 0.5,
249 },
250 button: {
251 fontWeight: '500',
252 fontSize: 14,
253 letterSpacing: 0.5,
254 },
255 mono: {
256 fontSize: 14,
257 fontFamily: Platform.OS === 'android' ? 'monospace' : 'Courier New',
258 },
259 },
260}
261
262export const darkTheme: Theme = {
263 ...defaultTheme,
264 colorScheme: 'dark',
265 palette: {
266 ...defaultTheme.palette,
267 default: {
268 background: colors.gray8,
269 backgroundLight: colors.gray6,
270 text: colors.white,
271 textLight: colors.gray3,
272 textInverted: colors.black,
273 link: colors.blue3,
274 border: colors.gray6,
275 borderDark: colors.gray5,
276 icon: colors.gray4,
277
278 // non-standard
279 textVeryLight: colors.gray4,
280 replyLine: colors.gray5,
281 replyLineDot: colors.gray6,
282 unreadNotifBg: colors.blue5,
283 postCtrl: '#61657A',
284 brandText: '#0085ff',
285 emptyStateIcon: colors.gray4,
286 },
287 primary: {
288 ...defaultTheme.palette.primary,
289 textInverted: colors.blue2,
290 },
291 secondary: {
292 ...defaultTheme.palette.secondary,
293 textInverted: colors.green2,
294 },
295 inverted: {
296 background: colors.white,
297 backgroundLight: colors.gray2,
298 text: colors.black,
299 textLight: colors.gray5,
300 textInverted: colors.white,
301 link: colors.blue3,
302 border: colors.gray3,
303 borderDark: colors.gray4,
304 icon: colors.gray1,
305 },
306 },
307}