forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {type StyleProp, StyleSheet, type TextStyle} from 'react-native'
2
3import {IS_WEB} from '#/env'
4import {type Theme, type TypographyVariant} from './ThemeContext'
5
6// 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
7/**
8 * @deprecated use ALF colors instead
9 */
10export const colors = {
11 white: '#ffffff',
12 black: '#383434',
13
14 gray1: '#F3F3F8',
15 gray2: '#E2E2E4',
16 gray3: '#B9B9C1',
17 gray4: '#8D8E96',
18 gray5: '#545664',
19 gray6: '#373942',
20 gray7: '#26272D',
21 gray8: '#141417',
22
23 blue0: `hsl(5, 30%, 90%)`,
24 blue1: `hsl(5, 52%, 80%)`,
25 blue2: `hsl(5, 64%, 70%)`,
26 blue3: `hsl(5, 84%, 66%)`,
27 blue4: `hsl(5, 82%, 60%)`,
28 blue5: `hsl(5, 80%, 54%)`,
29 blue6: `hsl(5, 58%, 55%)`,
30 blue7: `hsl(5, 42%, 25%)`,
31
32 red1: '#ffe6eb',
33 red2: '#fba2b2',
34 red3: '#ec4868',
35 red4: '#d11043',
36 red5: '#970721',
37 red6: '#690419',
38 red7: '#4F0314',
39
40 pink1: '#f8ccff',
41 pink2: '#e966ff',
42 pink3: '#db00ff',
43 pink4: '#a601c1',
44 pink5: '#570066',
45
46 purple1: '#ebdbff',
47 purple2: '#ba85ff',
48 purple3: '#9747ff',
49 purple4: '#6d00fa',
50 purple5: '#380080',
51
52 green1: '#c1ffb8',
53 green2: '#27f406',
54 green3: '#20bc07',
55 green4: '#148203',
56 green5: '#082b03',
57}
58
59/**
60 * @deprecated use atoms from `#/alf`
61 */
62export const s = StyleSheet.create({
63 // helpers
64 footerSpacer: {height: 100},
65 contentContainer: {paddingBottom: 200},
66
67 // margins
68 mr2: {marginRight: 2},
69 mr5: {marginRight: 5},
70 mr10: {marginRight: 10},
71 mr20: {marginRight: 20},
72 ml2: {marginLeft: 2},
73 ml5: {marginLeft: 5},
74 ml10: {marginLeft: 10},
75 ml20: {marginLeft: 20},
76 mt2: {marginTop: 2},
77 mt5: {marginTop: 5},
78 mt10: {marginTop: 10},
79 mt20: {marginTop: 20},
80 mb2: {marginBottom: 2},
81 mb5: {marginBottom: 5},
82 mb10: {marginBottom: 10},
83 mb20: {marginBottom: 20},
84
85 // paddings
86 p2: {padding: 2},
87 p5: {padding: 5},
88 p10: {padding: 10},
89 p20: {padding: 20},
90 pr2: {paddingRight: 2},
91 pr5: {paddingRight: 5},
92 pr10: {paddingRight: 10},
93 pr20: {paddingRight: 20},
94 pl2: {paddingLeft: 2},
95 pl5: {paddingLeft: 5},
96 pl10: {paddingLeft: 10},
97 pl20: {paddingLeft: 20},
98 pt2: {paddingTop: 2},
99 pt5: {paddingTop: 5},
100 pt10: {paddingTop: 10},
101 pt20: {paddingTop: 20},
102 pb2: {paddingBottom: 2},
103 pb5: {paddingBottom: 5},
104 pb10: {paddingBottom: 10},
105 pb20: {paddingBottom: 20},
106 px5: {paddingHorizontal: 5},
107
108 // dimensions
109 hContentRegion: IS_WEB ? {minHeight: '100%'} : {height: '100%'},
110
111 // text align
112 textCenter: {textAlign: 'center'},
113
114 // colors
115 white: {color: colors.white},
116 black: {color: colors.black},
117})
118
119export function lh(
120 theme: Theme,
121 type: TypographyVariant,
122 height: number,
123): TextStyle {
124 return {
125 lineHeight: Math.round((theme.typography[type].fontSize || 16) * height),
126 }
127}
128
129export function addStyle<T>(
130 base: StyleProp<T>,
131 addedStyle: StyleProp<T>,
132): StyleProp<T> {
133 if (Array.isArray(base)) {
134 return base.concat([addedStyle])
135 }
136 return [base, addedStyle]
137}