lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
1import {StyleSheet, TextStyle} from 'react-native'
2import {Theme, TypographyVariant} from './ThemeContext'
3
4// 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
5export const colors = {
6 white: '#ffffff',
7 black: '#000000',
8
9 gray1: '#f8f3f3',
10 gray2: '#e4e2e2',
11 gray3: '#c1b9b9',
12 gray4: '#968d8d',
13 gray5: '#645454',
14 gray6: '#423737',
15 gray7: '#2D2626',
16 gray8: '#131010',
17
18 blue0: '#bfe1ff',
19 blue1: '#8bc7fd',
20 blue2: '#52acfe',
21 blue3: '#0085ff',
22 blue4: '#0062bd',
23 blue5: '#034581',
24
25 red1: '#ffe6f2',
26 red2: '#fba2ce',
27 red3: '#ec4899',
28 red4: '#d1106f',
29 red5: '#97074e',
30
31 pink1: '#f8ccff',
32 pink2: '#e966ff',
33 pink3: '#db00ff',
34 pink4: '#a601c1',
35 pink5: '#570066',
36
37 purple1: '#ebdbff',
38 purple2: '#ba85ff',
39 purple3: '#9747ff',
40 purple4: '#6d00fa',
41 purple5: '#380080',
42
43 green1: '#c1ffb8',
44 green2: '#27f406',
45 green3: '#20bc07',
46 green4: '#148203',
47 green5: '#082b03',
48
49 unreadNotifBg: '#ebf6ff',
50}
51
52export const gradients = {
53 primary: {start: '#db00ff', end: '#ff007a'},
54 error: {start: '#ff007a', end: '#ed0d78'},
55 purple: {start: colors.pink3, end: colors.purple3},
56 blue: {start: colors.purple3, end: colors.blue3},
57 green: {start: colors.blue3, end: colors.green3},
58}
59
60export const s = StyleSheet.create({
61 // font weights
62 fw600: {fontWeight: '600'},
63 bold: {fontWeight: 'bold'},
64 fw500: {fontWeight: '500'},
65 semiBold: {fontWeight: '500'},
66 fw400: {fontWeight: '400'},
67 normal: {fontWeight: '400'},
68 fw300: {fontWeight: '300'},
69 light: {fontWeight: '300'},
70 fw200: {fontWeight: '200'},
71
72 // text decoration
73 underline: {textDecorationLine: 'underline'},
74
75 // font sizes
76 f9: {fontSize: 9},
77 f10: {fontSize: 10},
78 f11: {fontSize: 11},
79 f12: {fontSize: 12},
80 f13: {fontSize: 13},
81 f14: {fontSize: 14},
82 f15: {fontSize: 15},
83 f16: {fontSize: 16},
84 f17: {fontSize: 17},
85 f18: {fontSize: 18},
86
87 // line heights
88 ['lh13-1']: {lineHeight: 13},
89 ['lh13-1.3']: {lineHeight: 16.9}, // 1.3 of 13px
90 ['lh14-1']: {lineHeight: 14},
91 ['lh14-1.3']: {lineHeight: 18.2}, // 1.3 of 14px
92 ['lh15-1']: {lineHeight: 15},
93 ['lh15-1.3']: {lineHeight: 19.5}, // 1.3 of 15px
94 ['lh16-1']: {lineHeight: 16},
95 ['lh16-1.3']: {lineHeight: 20.8}, // 1.3 of 16px
96 ['lh17-1']: {lineHeight: 17},
97 ['lh17-1.3']: {lineHeight: 22.1}, // 1.3 of 17px
98 ['lh18-1']: {lineHeight: 18},
99 ['lh18-1.3']: {lineHeight: 23.4}, // 1.3 of 18px
100
101 // margins
102 mr2: {marginRight: 2},
103 mr5: {marginRight: 5},
104 mr10: {marginRight: 10},
105 ml2: {marginLeft: 2},
106 ml5: {marginLeft: 5},
107 ml10: {marginLeft: 10},
108 mt2: {marginTop: 2},
109 mt5: {marginTop: 5},
110 mt10: {marginTop: 10},
111 mb2: {marginBottom: 2},
112 mb5: {marginBottom: 5},
113 mb10: {marginBottom: 10},
114
115 // paddings
116 p2: {padding: 2},
117 p5: {padding: 5},
118 p10: {padding: 10},
119 p20: {padding: 20},
120 pr2: {paddingRight: 2},
121 pr5: {paddingRight: 5},
122 pr10: {paddingRight: 10},
123 pr20: {paddingRight: 20},
124 pl2: {paddingLeft: 2},
125 pl5: {paddingLeft: 5},
126 pl10: {paddingLeft: 10},
127 pl20: {paddingLeft: 20},
128 pt2: {paddingTop: 2},
129 pt5: {paddingTop: 5},
130 pt10: {paddingTop: 10},
131 pt20: {paddingTop: 20},
132 pb2: {paddingBottom: 2},
133 pb5: {paddingBottom: 5},
134 pb10: {paddingBottom: 10},
135 pb20: {paddingBottom: 20},
136
137 // flex
138 flexRow: {flexDirection: 'row'},
139 flexCol: {flexDirection: 'column'},
140 flex1: {flex: 1},
141 alignCenter: {alignItems: 'center'},
142
143 // position
144 absolute: {position: 'absolute'},
145
146 // dimensions
147 w100pct: {width: '100%'},
148 h100pct: {height: '100%'},
149
150 // text align
151 textLeft: {textAlign: 'left'},
152 textCenter: {textAlign: 'center'},
153 textRight: {textAlign: 'right'},
154
155 // colors
156 white: {color: colors.white},
157 black: {color: colors.black},
158
159 gray1: {color: colors.gray1},
160 gray2: {color: colors.gray2},
161 gray3: {color: colors.gray3},
162 gray4: {color: colors.gray4},
163 gray5: {color: colors.gray5},
164
165 blue1: {color: colors.blue1},
166 blue2: {color: colors.blue2},
167 blue3: {color: colors.blue3},
168 blue4: {color: colors.blue4},
169 blue5: {color: colors.blue5},
170
171 red1: {color: colors.red1},
172 red2: {color: colors.red2},
173 red3: {color: colors.red3},
174 red4: {color: colors.red4},
175 red5: {color: colors.red5},
176
177 pink1: {color: colors.pink1},
178 pink2: {color: colors.pink2},
179 pink3: {color: colors.pink3},
180 pink4: {color: colors.pink4},
181 pink5: {color: colors.pink5},
182
183 purple1: {color: colors.purple1},
184 purple2: {color: colors.purple2},
185 purple3: {color: colors.purple3},
186 purple4: {color: colors.purple4},
187 purple5: {color: colors.purple5},
188
189 green1: {color: colors.green1},
190 green2: {color: colors.green2},
191 green3: {color: colors.green3},
192 green4: {color: colors.green4},
193 green5: {color: colors.green5},
194})
195
196export function lh(
197 theme: Theme,
198 type: TypographyVariant,
199 height: number,
200): TextStyle {
201 return {
202 lineHeight: (theme.typography[type].fontSize || 16) * height,
203 }
204}