Some cleanup

src/App.web.tsx

@@ -7,6 +7,7 @@ import {RootSiblingParent} from 'react-native-root-siblings'
 
 import 'view/icons'
 
+import {ThemeProvider as Nova} from '#/view/nova'
 import {init as initPersistedState} from '#/state/persisted'
 import {useColorMode} from 'state/shell'
 import {Shell} from 'view/shell/index'
@@ -28,11 +29,13 @@ import {
 } from 'state/session'
 import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
 import * as persisted from '#/state/persisted'
+import {useColorModeTheme} from '#/view/nova/util/useColorModeTheme'
 
 function InnerApp() {
   const {isInitialLoad, currentAccount} = useSession()
   const {resumeSession} = useSessionApi()
   const colorMode = useColorMode()
+  const theme = useColorModeTheme(colorMode)
 
   // init
   useEffect(() => {
@@ -44,23 +47,25 @@ function InnerApp() {
   if (isInitialLoad) return null
 
   return (
-    <React.Fragment
+    <Nova theme={theme}>
-      // Resets the entire tree below when it changes:
+      <React.Fragment
-      key={currentAccount?.did}>
+        // Resets the entire tree below when it changes:
-      <LoggedOutViewProvider>
+        key={currentAccount?.did}>
-        <UnreadNotifsProvider>
+        <LoggedOutViewProvider>
-          <ThemeProvider theme={colorMode}>
+          <UnreadNotifsProvider>
-            {/* All components should be within this provider */}
+            <ThemeProvider theme={colorMode}>
-            <RootSiblingParent>
+              {/* All components should be within this provider */}
-              <SafeAreaProvider>
+              <RootSiblingParent>
-                <Shell />
+                <SafeAreaProvider>
-              </SafeAreaProvider>
+                  <Shell />
-            </RootSiblingParent>
+                </SafeAreaProvider>
-            <ToastContainer />
+              </RootSiblingParent>
-          </ThemeProvider>
+              <ToastContainer />
-        </UnreadNotifsProvider>
+            </ThemeProvider>
-      </LoggedOutViewProvider>
+          </UnreadNotifsProvider>
-    </React.Fragment>
+        </LoggedOutViewProvider>
+      </React.Fragment>
+    </Nova>
   )
 }
 

src/lib/ThemeContext.tsx

@@ -1,13 +1,7 @@
-import {isWeb} from 'platform/detection'
 import React, {ReactNode, createContext, useContext} from 'react'
-import {
+import {TextStyle, ViewStyle, ColorSchemeName} from 'react-native'
-  AppState,
-  TextStyle,
-  useColorScheme as useColorScheme_BUGGY,
-  ViewStyle,
-  ColorSchemeName,
-} from 'react-native'
 import {darkTheme, defaultTheme} from './themes'
+import {useColorScheme_FIXED} from '#/lib/hooks/useColorScheme_FIXED'
 
 export type ColorScheme = 'light' | 'dark'
 
@@ -97,32 +91,6 @@ function getTheme(theme: ColorSchemeName) {
   return theme === 'dark' ? darkTheme : defaultTheme
 }
 
-/**
- * With RN iOS, we can only "trust" the color scheme reported while the app is
- * active. This is a workaround until the bug is fixed upstream.
- *
- * @see https://github.com/bluesky-social/social-app/pull/1417#issuecomment-1719868504
- * @see https://github.com/facebook/react-native/pull/39439
- */
-function useColorScheme_FIXED() {
-  const colorScheme = useColorScheme_BUGGY()
-  const [currentColorScheme, setCurrentColorScheme] =
-    React.useState<ColorSchemeName>(colorScheme)
-
-  React.useEffect(() => {
-    // we don't need to be updating state on web
-    if (isWeb) return
-    const subscription = AppState.addEventListener('change', state => {
-      const isActive = state === 'active'
-      if (!isActive) return
-      setCurrentColorScheme(colorScheme)
-    })
-    return () => subscription.remove()
-  }, [colorScheme])
-
-  return isWeb ? colorScheme : currentColorScheme
-}
-
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   theme,
   children,

src/lib/hooks/useColorScheme_FIXED.ts

@@ -0,0 +1,34 @@
+import React from 'react'
+import {
+  AppState,
+  useColorScheme as useColorScheme_BUGGY,
+  ColorSchemeName,
+} from 'react-native'
+
+import {isWeb} from '#/platform/detection'
+
+/**
+ * With RN iOS, we can only "trust" the color scheme reported while the app is
+ * active. This is a workaround until the bug is fixed upstream.
+ *
+ * @see https://github.com/bluesky-social/social-app/pull/1417#issuecomment-1719868504
+ * @see https://github.com/facebook/react-native/pull/39439
+ */
+export function useColorScheme_FIXED() {
+  const colorScheme = useColorScheme_BUGGY()
+  const [currentColorScheme, setCurrentColorScheme] =
+    React.useState<ColorSchemeName>(colorScheme)
+
+  React.useEffect(() => {
+    // we don't need to be updating state on web
+    if (isWeb) return
+    const subscription = AppState.addEventListener('change', state => {
+      const isActive = state === 'active'
+      if (!isActive) return
+      setCurrentColorScheme(colorScheme)
+    })
+    return () => subscription.remove()
+  }, [colorScheme])
+
+  return isWeb ? colorScheme : currentColorScheme
+}

src/view/nova/components/Box.tsx

@@ -0,0 +1,3 @@
+import {View} from 'react-native'
+import {styled} from '#/view/nova/system'
+export const Box = styled(View)

src/view/nova/components/Button.tsx

@@ -0,0 +1,9 @@
+import {Pressable} from 'react-native'
+import {styled} from '#/view/nova/system'
+
+export const Button = styled(Pressable, {
+  px: 'l',
+  py: 's',
+  bg: 'l3',
+  radius: 40,
+})

src/view/nova/components/Typography.tsx

@@ -0,0 +1,74 @@
+import {Text as RNText} from 'react-native'
+import {styled} from '#/view/nova/system'
+import {web} from '#/view/nova/util/platform'
+
+export const Text = styled(RNText, {
+  color: 'l8',
+  fontSize: 's',
+})
+
+/**
+ * @see https://necolas.github.io/react-native-web/docs/accessibility/#semantic-html
+ * @see https://docs.expo.dev/develop/user-interface/fonts/
+ */
+export const H1 = styled(RNText, {
+  color: 'l8',
+  fontSize: 'l',
+  gtMobile: {
+    fontSize: 'xl',
+  },
+  ...web({
+    role: 'heading',
+    'aria-level': 1,
+  }),
+})
+export const H2 = styled(RNText, {
+  color: 'l8',
+  fontSize: 'm',
+  gtMobile: {
+    fontSize: 'l',
+  },
+  ...web({
+    role: 'heading',
+    'aria-level': 2,
+  }),
+})
+export const H3 = styled(RNText, {
+  color: 'l8',
+  fontSize: 'm',
+  ...web({
+    role: 'heading',
+    'aria-level': 3,
+  }),
+})
+export const H4 = styled(RNText, {
+  color: 'l8',
+  fontSize: 's',
+  ...web({
+    role: 'heading',
+    'aria-level': 4,
+  }),
+})
+export const H5 = styled(RNText, {
+  color: 'l8',
+  fontSize: 'xs',
+  ...web({
+    role: 'heading',
+    'aria-level': 5,
+  }),
+})
+export const H6 = styled(RNText, {
+  color: 'l8',
+  fontSize: 'xxs',
+  ...web({
+    role: 'heading',
+    'aria-level': 6,
+  }),
+})
+export const P = styled(RNText, {
+  color: 'l8',
+  fontSize: 's',
+  ...web({
+    role: 'paragraph',
+  }),
+})

src/view/nova/index.tsx

@@ -1,102 +1,4 @@
-import {View, Text as RNText} from 'react-native'
+export * from '#/view/nova/system'
-
+export * from '#/view/nova/components/Box'
-import {createSystem} from './lib/system'
+export * from '#/view/nova/components/Typography'
-import {light, dark} from './themes'
+export * from '#/view/nova/components/Button'
-import {web} from './lib/utils'
-
-export * from './lib/utils'
-
-const {
-  ThemeProvider,
-  useTheme,
-  useTokens,
-  useBreakpoints,
-  useStyle,
-  useStyles,
-  styled,
-} = createSystem({
-  light,
-  dark,
-})
-
-export {
-  ThemeProvider,
-  useTheme,
-  useTokens,
-  useBreakpoints,
-  useStyle,
-  useStyles,
-  styled,
-}
-
-export const Box = styled(View)
-export const Text = styled(RNText, {
-  color: 'l8',
-  fontSize: 's',
-})
-
-/**
- * @see https://necolas.github.io/react-native-web/docs/accessibility/#semantic-html
- * @see https://docs.expo.dev/develop/user-interface/fonts/
- */
-export const H1 = styled(RNText, {
-  color: 'l8',
-  fontSize: 'l',
-  gtMobile: {
-    fontSize: 'xl',
-  },
-  ...web({
-    role: 'heading',
-    'aria-level': 1,
-  }),
-})
-export const H2 = styled(RNText, {
-  color: 'l8',
-  fontSize: 'm',
-  gtMobile: {
-    fontSize: 'l',
-  },
-  ...web({
-    role: 'heading',
-    'aria-level': 2,
-  }),
-})
-export const H3 = styled(RNText, {
-  color: 'l8',
-  fontSize: 'm',
-  ...web({
-    role: 'heading',
-    'aria-level': 3,
-  }),
-})
-export const H4 = styled(RNText, {
-  color: 'l8',
-  fontSize: 's',
-  ...web({
-    role: 'heading',
-    'aria-level': 4,
-  }),
-})
-export const H5 = styled(RNText, {
-  color: 'l8',
-  fontSize: 'xs',
-  ...web({
-    role: 'heading',
-    'aria-level': 5,
-  }),
-})
-export const H6 = styled(RNText, {
-  color: 'l8',
-  fontSize: 'xxs',
-  ...web({
-    role: 'heading',
-    'aria-level': 6,
-  }),
-})
-export const P = styled(RNText, {
-  color: 'l8',
-  fontSize: 's',
-  ...web({
-    role: 'paragraph',
-  }),
-})

src/view/nova/lib/system.tsx

@@ -55,11 +55,14 @@ export function createSystem<
     theme,
   }: React.PropsWithChildren<{theme: ThemeName}>) => (
     <Context.Provider
-      value={{
+      value={React.useMemo(
-        themeName: theme,
+        () => ({
-        theme: themes[theme],
+          themeName: theme,
-        themes,
+          theme: themes[theme],
-      }}>
+          themes,
+        }),
+        [theme],
+      )}>
       {children}
     </Context.Provider>
   )
@@ -74,7 +77,7 @@ export function createSystem<
 
   function useBreakpoints() {
     const {theme} = useTheme()
-    const [breakpoints, setBreakpoints] = React.useState(
+    const [breakpoints, setBreakpoints] = React.useState(() =>
       theme.getActiveBreakpoints({width: Dimensions.get('window').width}),
     )
 

src/view/nova/system.ts

@@ -0,0 +1,28 @@
+/**
+ * Library imports
+ */
+import {createSystem} from './lib/system'
+import {light, dark} from './themes'
+
+const {
+  ThemeProvider,
+  useTheme,
+  useTokens,
+  useBreakpoints,
+  useStyle,
+  useStyles,
+  styled,
+} = createSystem({
+  light,
+  dark,
+})
+
+export {
+  ThemeProvider,
+  useTheme,
+  useTokens,
+  useBreakpoints,
+  useStyle,
+  useStyles,
+  styled,
+}

src/view/nova/themes.ts

@@ -16,6 +16,15 @@ const palette = {
 
 export const light = createTheme({
   tokens: {
+    space: {
+      xxs: 2,
+      xs: 4,
+      s: 8,
+      m: 12,
+      l: 18,
+      xl: 24,
+      xxl: 32,
+    },
     color: {
       primary: palette.blue,
       l1: palette.white,
@@ -118,7 +127,7 @@ export const light = createTheme({
     /**
      * Shorthand for applying `fontSize` and `fontHeight`, according to our type scale.
      */
-    fontSize(value: 'xs' | 's' | 'm' | 'l' | 'xl', tokens) {
+    fontSize(value: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl', tokens) {
       return {
         fontSize: tokens.fontSize[value],
         lineHeight: tokens.lineHeight[value],

src/view/nova/util/useColorModeTheme.ts

@@ -0,0 +1,9 @@
+import * as persisted from '#/state/persisted'
+import {useColorScheme_FIXED} from '#/lib/hooks/useColorScheme_FIXED'
+
+export function useColorModeTheme(
+  theme: persisted.Schema['colorMode'],
+): 'light' | 'dark' {
+  const colorScheme = useColorScheme_FIXED()
+  return (theme === 'system' ? colorScheme : theme) || 'light'
+}