Bluesky app fork with some witchin' additions 💫
feat: google sans flex
authored by
Thomas May
and committed by
Tangled
d7474d19
caa14e93
+117
-8
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Black.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Black.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Bold.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Bold.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-ExtraBold.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-ExtraBold.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-ExtraLight.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-ExtraLight.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Light.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Light.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Medium.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Medium.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Regular.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Regular.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-SemiBold.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-SemiBold.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Thin.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Thin.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Black.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Black.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Bold.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Bold.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-ExtraBold.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-ExtraBold.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-ExtraLight.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-ExtraLight.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Light.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Light.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Medium.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Medium.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Regular.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Regular.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-SemiBold.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-SemiBold.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Thin.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Thin.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Black.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Black.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Bold.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Bold.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-ExtraBold.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-ExtraBold.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-ExtraLight.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-ExtraLight.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Light.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Light.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Medium.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Medium.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Regular.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Regular.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-SemiBold.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-SemiBold.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Thin.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Thin.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Black.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Black.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Bold.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Bold.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-ExtraBold.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-ExtraBold.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-ExtraLight.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-ExtraLight.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Light.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Light.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Medium.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Medium.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Regular.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Regular.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-SemiBold.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-SemiBold.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Thin.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Thin.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Black.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Black.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Bold.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Bold.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-ExtraBold.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-ExtraBold.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-ExtraLight.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-ExtraLight.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Light.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Light.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Medium.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Medium.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Regular.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Regular.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-SemiBold.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-SemiBold.ttf
This is a binary file and will not be displayed.
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Thin.ttf
assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Thin.ttf
This is a binary file and will not be displayed.
+57
-6
src/alf/fonts.ts
+57
-6
src/alf/fonts.ts
···
5
5
6
6
const WEB_FONT_FAMILIES = `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`
7
7
8
+
/*
9
+
* DEBUG: Uncomment to test if fonts are actually being applied on Android.
10
+
* This will use a distinctive cursive font. Revert when done testing.
11
+
*/
12
+
// const DEBUG_FONT_OVERRIDE = 'cursive'
13
+
const DEBUG_FONT_OVERRIDE = undefined
14
+
15
+
/*
16
+
* Google Sans Flex optical size mapping.
17
+
* Picks the correct optical size based on fontSize.
18
+
*/
19
+
function getGoogleSansFlex(weight: number, fontSize?: number): string {
20
+
const opticalSize = fontSize
21
+
? fontSize < 14
22
+
? '9pt'
23
+
: fontSize < 28
24
+
? '24pt'
25
+
: fontSize < 48
26
+
? '36pt'
27
+
: fontSize < 96
28
+
? '72pt'
29
+
: '120pt'
30
+
: '24pt' // default to 24pt if no fontSize provided
31
+
32
+
const weightName =
33
+
{
34
+
100: 'Thin',
35
+
200: 'ExtraLight',
36
+
300: 'Light',
37
+
400: 'Regular',
38
+
500: 'Medium',
39
+
600: 'SemiBold',
40
+
700: 'Bold',
41
+
800: 'ExtraBold',
42
+
900: 'Black',
43
+
}[weight] || 'Regular'
44
+
45
+
const name = `GoogleSansFlex_${opticalSize}-${weightName}`
46
+
return name
47
+
}
48
+
8
49
const factor = 0.0625 // 1 - (15/16)
9
50
const fontScaleMultipliers: Record<Device['fontScale'], number> = {
10
51
'-2': 1 - factor * 1, // unused
···
37
78
/*
38
79
* Unused fonts are commented out, but the files are there if we need them.
39
80
*/
40
-
export function applyFonts(style: TextStyle, fontFamily: 'system' | 'theme') {
41
-
if (fontFamily === 'theme') {
81
+
export function applyFonts(
82
+
style: TextStyle,
83
+
fontFamily: 'material' | 'system' | 'theme',
84
+
) {
85
+
if (IS_ANDROID && fontFamily === 'material') {
86
+
const weight = Number(style.fontWeight || 400)
87
+
style.fontFamily = getGoogleSansFlex(weight, style.fontSize)
88
+
} else if (fontFamily === 'theme') {
42
89
if (IS_ANDROID) {
43
90
style.fontFamily =
44
91
{
···
90
137
style.fontVariant = (style.fontVariant || []).concat('no-contextual')
91
138
}
92
139
} else {
93
-
// fallback families only supported on web
94
-
if (IS_WEB) {
95
-
style.fontFamily = style.fontFamily || WEB_FONT_FAMILIES
140
+
// DEBUG: Use cursive font for testing by uncommenting DEBUG_FONT_OVERRIDE
141
+
if (DEBUG_FONT_OVERRIDE) {
142
+
style.fontFamily = DEBUG_FONT_OVERRIDE
143
+
} else {
144
+
// fallback families only supported on web
145
+
if (IS_WEB) {
146
+
style.fontFamily = style.fontFamily || WEB_FONT_FAMILIES
147
+
}
96
148
}
97
-
98
149
/**
99
150
* Overridden to previous spacing for the `system` font option.
100
151
* https://github.com/bluesky-social/social-app/commit/2419096e2409008b7d71fd6b8f8d0dd5b016e267
+50
src/alf/util/unusedUseFonts.android.ts
+50
src/alf/util/unusedUseFonts.android.ts
···
17
17
'Inter-SemiBoldItalic': require('../../../assets/fonts/inter/Inter-SemiBoldItalic.otf'),
18
18
'Inter-Bold': require('../../../assets/fonts/inter/Inter-Bold.otf'),
19
19
'Inter-BoldItalic': require('../../../assets/fonts/inter/Inter-BoldItalic.otf'),
20
+
// Google Sans Flex - 9pt
21
+
'GoogleSansFlex_9pt-Thin': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Thin.ttf'),
22
+
'GoogleSansFlex_9pt-ExtraLight': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_9pt-ExtraLight.ttf'),
23
+
'GoogleSansFlex_9pt-Light': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Light.ttf'),
24
+
'GoogleSansFlex_9pt-Regular': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Regular.ttf'),
25
+
'GoogleSansFlex_9pt-Medium': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Medium.ttf'),
26
+
'GoogleSansFlex_9pt-SemiBold': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_9pt-SemiBold.ttf'),
27
+
'GoogleSansFlex_9pt-Bold': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Bold.ttf'),
28
+
'GoogleSansFlex_9pt-ExtraBold': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_9pt-ExtraBold.ttf'),
29
+
'GoogleSansFlex_9pt-Black': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_9pt-Black.ttf'),
30
+
// Google Sans Flex - 24pt
31
+
'GoogleSansFlex_24pt-Thin': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Thin.ttf'),
32
+
'GoogleSansFlex_24pt-ExtraLight': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_24pt-ExtraLight.ttf'),
33
+
'GoogleSansFlex_24pt-Light': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Light.ttf'),
34
+
'GoogleSansFlex_24pt-Regular': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Regular.ttf'),
35
+
'GoogleSansFlex_24pt-Medium': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Medium.ttf'),
36
+
'GoogleSansFlex_24pt-SemiBold': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_24pt-SemiBold.ttf'),
37
+
'GoogleSansFlex_24pt-Bold': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Bold.ttf'),
38
+
'GoogleSansFlex_24pt-ExtraBold': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_24pt-ExtraBold.ttf'),
39
+
'GoogleSansFlex_24pt-Black': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_24pt-Black.ttf'),
40
+
// Google Sans Flex - 36pt
41
+
'GoogleSansFlex_36pt-Thin': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Thin.ttf'),
42
+
'GoogleSansFlex_36pt-ExtraLight': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_36pt-ExtraLight.ttf'),
43
+
'GoogleSansFlex_36pt-Light': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Light.ttf'),
44
+
'GoogleSansFlex_36pt-Regular': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Regular.ttf'),
45
+
'GoogleSansFlex_36pt-Medium': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Medium.ttf'),
46
+
'GoogleSansFlex_36pt-SemiBold': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_36pt-SemiBold.ttf'),
47
+
'GoogleSansFlex_36pt-Bold': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Bold.ttf'),
48
+
'GoogleSansFlex_36pt-ExtraBold': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_36pt-ExtraBold.ttf'),
49
+
'GoogleSansFlex_36pt-Black': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_36pt-Black.ttf'),
50
+
// Google Sans Flex - 72pt
51
+
'GoogleSansFlex_72pt-Thin': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Thin.ttf'),
52
+
'GoogleSansFlex_72pt-ExtraLight': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_72pt-ExtraLight.ttf'),
53
+
'GoogleSansFlex_72pt-Light': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Light.ttf'),
54
+
'GoogleSansFlex_72pt-Regular': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Regular.ttf'),
55
+
'GoogleSansFlex_72pt-Medium': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Medium.ttf'),
56
+
'GoogleSansFlex_72pt-SemiBold': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_72pt-SemiBold.ttf'),
57
+
'GoogleSansFlex_72pt-Bold': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Bold.ttf'),
58
+
'GoogleSansFlex_72pt-ExtraBold': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_72pt-ExtraBold.ttf'),
59
+
'GoogleSansFlex_72pt-Black': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_72pt-Black.ttf'),
60
+
// Google Sans Flex - 120pt
61
+
'GoogleSansFlex_120pt-Thin': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Thin.ttf'),
62
+
'GoogleSansFlex_120pt-ExtraLight': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_120pt-ExtraLight.ttf'),
63
+
'GoogleSansFlex_120pt-Light': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Light.ttf'),
64
+
'GoogleSansFlex_120pt-Regular': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Regular.ttf'),
65
+
'GoogleSansFlex_120pt-Medium': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Medium.ttf'),
66
+
'GoogleSansFlex_120pt-SemiBold': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_120pt-SemiBold.ttf'),
67
+
'GoogleSansFlex_120pt-Bold': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Bold.ttf'),
68
+
'GoogleSansFlex_120pt-ExtraBold': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_120pt-ExtraBold.ttf'),
69
+
'GoogleSansFlex_120pt-Black': require('../../../assets/fonts/google-sans-flex/GoogleSansFlex_120pt-Black.ttf'),
20
70
})
21
71
}
+9
-1
src/screens/Settings/AppearanceSettings.tsx
+9
-1
src/screens/Settings/AppearanceSettings.tsx
···
118
118
)
119
119
120
120
const onChangeFontFamily = useCallback(
121
-
(value: 'system' | 'theme') => {
121
+
(value: 'system' | 'theme' | 'material') => {
122
122
fonts.setFontFamily(value)
123
123
},
124
124
[fonts],
···
292
292
label: _(msg`Theme`),
293
293
name: 'theme',
294
294
},
295
+
...(IS_ANDROID
296
+
? [
297
+
{
298
+
label: _(msg`Google Sans`),
299
+
name: 'material' as 'system' | 'theme' | 'material',
300
+
},
301
+
]
302
+
: []),
295
303
]}
296
304
value={fonts.family}
297
305
onChange={onChangeFontFamily}