Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
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 unreadNotifBg: '#ebf6ff',
59}
60
61/**
62 * @deprecated use atoms from `#/alf`
63 */
64export const s = StyleSheet.create({
65 // helpers
66 footerSpacer: {height: 100},
67 contentContainer: {paddingBottom: 200},
68
69 // margins
70 mr2: {marginRight: 2},
71 mr5: {marginRight: 5},
72 mr10: {marginRight: 10},
73 mr20: {marginRight: 20},
74 ml2: {marginLeft: 2},
75 ml5: {marginLeft: 5},
76 ml10: {marginLeft: 10},
77 ml20: {marginLeft: 20},
78 mt2: {marginTop: 2},
79 mt5: {marginTop: 5},
80 mt10: {marginTop: 10},
81 mt20: {marginTop: 20},
82 mb2: {marginBottom: 2},
83 mb5: {marginBottom: 5},
84 mb10: {marginBottom: 10},
85 mb20: {marginBottom: 20},
86
87 // paddings
88 p2: {padding: 2},
89 p5: {padding: 5},
90 p10: {padding: 10},
91 p20: {padding: 20},
92 pr2: {paddingRight: 2},
93 pr5: {paddingRight: 5},
94 pr10: {paddingRight: 10},
95 pr20: {paddingRight: 20},
96 pl2: {paddingLeft: 2},
97 pl5: {paddingLeft: 5},
98 pl10: {paddingLeft: 10},
99 pl20: {paddingLeft: 20},
100 pt2: {paddingTop: 2},
101 pt5: {paddingTop: 5},
102 pt10: {paddingTop: 10},
103 pt20: {paddingTop: 20},
104 pb2: {paddingBottom: 2},
105 pb5: {paddingBottom: 5},
106 pb10: {paddingBottom: 10},
107 pb20: {paddingBottom: 20},
108 px5: {paddingHorizontal: 5},
109
110 // dimensions
111 hContentRegion: IS_WEB ? {minHeight: '100%'} : {height: '100%'},
112
113 // text align
114 textCenter: {textAlign: 'center'},
115
116 // colors
117 white: {color: colors.white},
118 black: {color: colors.black},
119})
120
121export function lh(
122 theme: Theme,
123 type: TypographyVariant,
124 height: number,
125): TextStyle {
126 return {
127 lineHeight: Math.round((theme.typography[type].fontSize || 16) * height),
128 }
129}
130
131export function addStyle<T>(
132 base: StyleProp<T>,
133 addedStyle: StyleProp<T>,
134): StyleProp<T> {
135 if (Array.isArray(base)) {
136 return base.concat([addedStyle])
137 }
138 return [base, addedStyle]
139}