Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Neue] Base #5395

Merged
merged 24 commits into from
Sep 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
d5b62f2
Add fontScale, gate it, fix some computes
estrattonbailey Sep 13, 2024
bf509eb
Add inter, integrate
estrattonbailey Sep 15, 2024
4a0f65c
Clean up
estrattonbailey Sep 15, 2024
58e6ff9
Apply to old Text component
estrattonbailey Sep 15, 2024
19685b1
Use numeric weight
estrattonbailey Sep 15, 2024
482e722
Cleanup
estrattonbailey Sep 15, 2024
1e297a1
Merge remote-tracking branch 'origin/main' into font-scaling
estrattonbailey Sep 15, 2024
82dc47a
Merge remote-tracking branch 'origin/main' into font-scaling
estrattonbailey Sep 17, 2024
3cd1375
Clean up appearance settings
estrattonbailey Sep 17, 2024
2419096
Global tracking
estrattonbailey Sep 17, 2024
7d5b1cd
Fix regular italic variant
estrattonbailey Sep 17, 2024
ebb6f6e
Refactor settings and fontScale values
estrattonbailey Sep 18, 2024
d7063c4
Remove flags
estrattonbailey Sep 18, 2024
9036952
Get rid of lower weight font usage
estrattonbailey Sep 18, 2024
0bdfaf3
Remove gate from settings
estrattonbailey Sep 18, 2024
77167d0
Refactor appearance settings for reuse
estrattonbailey Sep 18, 2024
f86844e
Add neue type nux
estrattonbailey Sep 18, 2024
5387574
Update defaults
estrattonbailey Sep 18, 2024
56f0849
Load fonts, add fallback families
estrattonbailey Sep 18, 2024
3f625e7
Load fonts via plugin in production
estrattonbailey Sep 18, 2024
5160fb4
Fixes
estrattonbailey Sep 18, 2024
67cca6d
Fix for web
estrattonbailey Sep 18, 2024
e18b9ae
Merge remote-tracking branch 'origin/main' into neue/base
haileyok Sep 18, 2024
72ae8a7
Nits
estrattonbailey Sep 19, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions app.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,31 @@ module.exports = function (config) {
'./plugins/shareExtension/withShareExtensions.js',
'./plugins/notificationsExtension/withNotificationsExtension.js',
'./plugins/withAppDelegateReferrer.js',
[
'expo-font',
{
fonts: [
// './assets/fonts/inter/Inter-Thin.otf',
// './assets/fonts/inter/Inter-ThinItalic.otf',
// './assets/fonts/inter/Inter-ExtraLight.otf',
// './assets/fonts/inter/Inter-ExtraLightItalic.otf',
// './assets/fonts/inter/Inter-Light.otf',
// './assets/fonts/inter/Inter-LightItalic.otf',
'./assets/fonts/inter/Inter-Regular.otf',
'./assets/fonts/inter/Inter-Italic.otf',
'./assets/fonts/inter/Inter-Medium.otf',
'./assets/fonts/inter/Inter-MediumItalic.otf',
'./assets/fonts/inter/Inter-SemiBold.otf',
'./assets/fonts/inter/Inter-SemiBoldItalic.otf',
'./assets/fonts/inter/Inter-Bold.otf',
'./assets/fonts/inter/Inter-BoldItalic.otf',
'./assets/fonts/inter/Inter-ExtraBold.otf',
'./assets/fonts/inter/Inter-ExtraBoldItalic.otf',
'./assets/fonts/inter/Inter-Black.otf',
'./assets/fonts/inter/Inter-BlackItalic.otf',
],
},
],
].filter(Boolean),
extra: {
eas: {
Expand Down
Binary file added assets/fonts/inter/Inter-Black.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-BlackItalic.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-Bold.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-BoldItalic.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-ExtraBold.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-ExtraBoldItalic.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-ExtraLight.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-ExtraLightItalic.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-Italic.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-Light.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-LightItalic.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-Medium.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-MediumItalic.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-Regular.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-SemiBold.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-SemiBoldItalic.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-Thin.otf
Binary file not shown.
Binary file added assets/fonts/inter/Inter-ThinItalic.otf
Binary file not shown.
1 change: 1 addition & 0 deletions assets/icons/textSize_stroke2_corner0_rounded.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/icons/titleCase_stroke2_corner0_rounded.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@
"expo-dev-client": "^4.0.14",
"expo-device": "~6.0.2",
"expo-file-system": "^17.0.1",
"expo-font": "~12.0.10",
"expo-haptics": "^13.0.1",
"expo-image": "~1.12.9",
"expo-image-manipulator": "^12.0.5",
Expand Down
88 changes: 43 additions & 45 deletions src/App.native.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ import {TestCtrls} from '#/view/com/testing/TestCtrls'
import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
import * as Toast from '#/view/com/util/Toast'
import {Shell} from '#/view/shell'
import {ThemeProvider as Alf} from '#/alf'
import {ThemeProvider as Alf, useFonts} from '#/alf'
import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
import {NuxDialogs} from '#/components/dialogs/nuxs'
import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
Expand Down Expand Up @@ -106,62 +106,60 @@ function InnerApp() {
}, [_])

return (
<Alf theme={theme}>
<ThemeProvider theme={theme}>
<Splash isReady={isReady && hasCheckedReferrer}>
<RootSiblingParent>
<VideoVolumeProvider>
<React.Fragment
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<StatsigProvider
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<Alf theme={theme}>
<ThemeProvider theme={theme}>
<Splash isReady={isReady && hasCheckedReferrer}>
<RootSiblingParent>
<VideoVolumeProvider>
<QueryProvider currentDid={currentAccount?.did}>
<StatsigProvider>
<MessagesProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<LabelDefsProvider>
<ModerationOptsProvider>
<LoggedOutViewProvider>
<SelectedFeedProvider>
<HiddenRepliesProvider>
<UnreadNotifsProvider>
<BackgroundNotificationPreferencesProvider>
<MutedThreadsProvider>
<ProgressGuideProvider>
<GestureHandlerRootView
style={s.h100pct}>
<TestCtrls />
<Shell />
<NuxDialogs />
</GestureHandlerRootView>
</ProgressGuideProvider>
</MutedThreadsProvider>
</BackgroundNotificationPreferencesProvider>
</UnreadNotifsProvider>
</HiddenRepliesProvider>
</SelectedFeedProvider>
</LoggedOutViewProvider>
</ModerationOptsProvider>
</LabelDefsProvider>
</MessagesProvider>
</StatsigProvider>
<MessagesProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<LabelDefsProvider>
<ModerationOptsProvider>
<LoggedOutViewProvider>
<SelectedFeedProvider>
<HiddenRepliesProvider>
<UnreadNotifsProvider>
<BackgroundNotificationPreferencesProvider>
<MutedThreadsProvider>
<ProgressGuideProvider>
<GestureHandlerRootView style={s.h100pct}>
<TestCtrls />
<Shell />
<NuxDialogs />
</GestureHandlerRootView>
</ProgressGuideProvider>
</MutedThreadsProvider>
</BackgroundNotificationPreferencesProvider>
</UnreadNotifsProvider>
</HiddenRepliesProvider>
</SelectedFeedProvider>
</LoggedOutViewProvider>
</ModerationOptsProvider>
</LabelDefsProvider>
</MessagesProvider>
</QueryProvider>
</React.Fragment>
</VideoVolumeProvider>
</RootSiblingParent>
</Splash>
</ThemeProvider>
</Alf>
</VideoVolumeProvider>
</RootSiblingParent>
</Splash>
</ThemeProvider>
</Alf>
</StatsigProvider>
)
}

function App() {
const [isReady, setReady] = useState(false)
const [loaded] = useFonts()

React.useEffect(() => {
initPersistedState().then(() => setReady(true))
}, [])

if (!isReady) {
if (!isReady || !loaded) {
haileyok marked this conversation as resolved.
Show resolved Hide resolved
return null
}

Expand Down
87 changes: 43 additions & 44 deletions src/App.web.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/Video
import * as Toast from '#/view/com/util/Toast'
import {ToastContainer} from '#/view/com/util/Toast.web'
import {Shell} from '#/view/shell/index'
import {ThemeProvider as Alf} from '#/alf'
import {ThemeProvider as Alf, useFonts} from '#/alf'
import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
import {NuxDialogs} from '#/components/dialogs/nuxs'
import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
Expand Down Expand Up @@ -96,62 +96,61 @@ function InnerApp() {

return (
<KeyboardProvider enabled={false}>
<Alf theme={theme}>
<ThemeProvider theme={theme}>
<RootSiblingParent>
<VideoVolumeProvider>
<ActiveVideoProvider>
<React.Fragment
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<StatsigProvider
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<Alf theme={theme}>
<ThemeProvider theme={theme}>
<RootSiblingParent>
<VideoVolumeProvider>
<ActiveVideoProvider>
<QueryProvider currentDid={currentAccount?.did}>
<StatsigProvider>
<MessagesProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<LabelDefsProvider>
<ModerationOptsProvider>
<LoggedOutViewProvider>
<SelectedFeedProvider>
<HiddenRepliesProvider>
<UnreadNotifsProvider>
<BackgroundNotificationPreferencesProvider>
<MutedThreadsProvider>
<SafeAreaProvider>
<ProgressGuideProvider>
<Shell />
<NuxDialogs />
</ProgressGuideProvider>
</SafeAreaProvider>
</MutedThreadsProvider>
</BackgroundNotificationPreferencesProvider>
</UnreadNotifsProvider>
</HiddenRepliesProvider>
</SelectedFeedProvider>
</LoggedOutViewProvider>
</ModerationOptsProvider>
</LabelDefsProvider>
</MessagesProvider>
</StatsigProvider>
<MessagesProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<LabelDefsProvider>
<ModerationOptsProvider>
<LoggedOutViewProvider>
<SelectedFeedProvider>
<HiddenRepliesProvider>
<UnreadNotifsProvider>
<BackgroundNotificationPreferencesProvider>
<MutedThreadsProvider>
<SafeAreaProvider>
<ProgressGuideProvider>
<Shell />
<NuxDialogs />
</ProgressGuideProvider>
</SafeAreaProvider>
</MutedThreadsProvider>
</BackgroundNotificationPreferencesProvider>
</UnreadNotifsProvider>
</HiddenRepliesProvider>
</SelectedFeedProvider>
</LoggedOutViewProvider>
</ModerationOptsProvider>
</LabelDefsProvider>
</MessagesProvider>
</QueryProvider>
</React.Fragment>
<ToastContainer />
</ActiveVideoProvider>
</VideoVolumeProvider>
</RootSiblingParent>
</ThemeProvider>
</Alf>
<ToastContainer />
</ActiveVideoProvider>
</VideoVolumeProvider>
</RootSiblingParent>
</ThemeProvider>
</Alf>
</StatsigProvider>
</KeyboardProvider>
)
}

function App() {
const [isReady, setReady] = useState(false)
const [loaded] = useFonts()

React.useEffect(() => {
initPersistedState().then(() => setReady(true))
}, [])

if (!isReady) {
if (!isReady || !loaded) {
return null
}

Expand Down
25 changes: 11 additions & 14 deletions src/alf/atoms.ts
Original file line number Diff line number Diff line change
Expand Up @@ -225,43 +225,43 @@ export const atoms = {
},
text_2xs: {
fontSize: tokens.fontSize._2xs,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
},
text_xs: {
fontSize: tokens.fontSize.xs,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
},
text_sm: {
fontSize: tokens.fontSize.sm,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
},
text_md: {
fontSize: tokens.fontSize.md,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
},
text_lg: {
fontSize: tokens.fontSize.lg,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
},
text_xl: {
fontSize: tokens.fontSize.xl,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
},
text_2xl: {
fontSize: tokens.fontSize._2xl,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
},
text_3xl: {
fontSize: tokens.fontSize._3xl,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
},
text_4xl: {
fontSize: tokens.fontSize._4xl,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
},
text_5xl: {
fontSize: tokens.fontSize._5xl,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
},
leading_tight: {
lineHeight: 1.15,
Expand All @@ -273,10 +273,7 @@ export const atoms = {
lineHeight: 1.5,
},
tracking_normal: {
letterSpacing: 0,
},
tracking_wide: {
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
},
font_normal: {
fontWeight: tokens.fontWeight.normal,
Expand Down
Loading
Loading