Design tokens (#809)

* Progress

* Fix lint

* Fix lint

* Remove light theme

* Fix some colors

android/.settings/org.eclipse.buildship.core.prefs

@@ -1,11 +1,11 @@
-arguments=--init-script /var/folders/ck/r25tcygs77n6hv8d515p1w_c0000gn/T/d146c9752a26f79b52047fb6dc6ed385d064e120494f96f08ca63a317c41f94c.gradle --init-script /var/folders/ck/r25tcygs77n6hv8d515p1w_c0000gn/T/52cde0cfcf3e28b8b7510e992210d9614505e0911af0c190bd590d7158574963.gradle
+arguments=--init-script /var/folders/tm/qsvqk80d0t30zlr71v0yf1m00000gn/T/db3b08fc4a9ef609cb16b96b200fa13e563f396e9bb1ed0905fdab7bc3bc513b.gradle --init-script /var/folders/tm/qsvqk80d0t30zlr71v0yf1m00000gn/T/52cde0cfcf3e28b8b7510e992210d9614505e0911af0c190bd590d7158574963.gradle
 auto.sync=false
 build.scans.enabled=false
 connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
 connection.project.dir=
 eclipse.preferences.version=1
 gradle.user.home=
-java.home=/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home
+java.home=/Users/peronif5/Library/Java/JavaVirtualMachines/openjdk-21.0.2/Contents/Home
 jvm.arguments=
 offline.mode=false
 override.workspace.settings=true

android/app/.settings/org.eclipse.jdt.core.prefs

@@ -0,0 +1,4 @@
+eclipse.preferences.version=1
+org.eclipse.jdt.core.compiler.codegen.targetPlatform=17
+org.eclipse.jdt.core.compiler.compliance=17
+org.eclipse.jdt.core.compiler.source=17

index.js

@@ -1,4 +1,3 @@
-import { ThemeProvider } from '@shopify/restyle'
 import React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { AppRegistry } from 'react-native'
@@ -16,7 +15,6 @@ import LanguageProvider from './src/storage/LanguageProvider'
 import NotificationStorageProvider from './src/storage/NotificationStorageProvider'
 import { persistor } from './src/store/persistence'
 import store from './src/store/store'
-import { darkThemeColors, theme } from './src/theme/theme'
 import './src/utils/i18n'
 
 // eslint-disable-next-line no-undef
@@ -34,33 +32,26 @@ function fallbackRender(props) {
 
 const render = () => {
   return (
-    <ThemeProvider
-      theme={{
-        ...theme,
-        colors: darkThemeColors,
+    <ErrorBoundary
+      fallbackRender={fallbackRender}
+      onReset={async () => {
+        await persistor.purge()
       }}
     >
-      <ErrorBoundary
-        fallbackRender={fallbackRender}
-        onReset={async () => {
-          await persistor.purge()
-        }}
-      >
-        <ReduxProvider store={store}>
-          <PersistGate loading={null} persistor={persistor}>
-            <LanguageProvider>
-              <AppStorageProvider>
-                <AccountStorageProvider>
-                  <NotificationStorageProvider>
-                    <App />
-                  </NotificationStorageProvider>
-                </AccountStorageProvider>
-              </AppStorageProvider>
-            </LanguageProvider>
-          </PersistGate>
-        </ReduxProvider>
-      </ErrorBoundary>
-    </ThemeProvider>
+      <ReduxProvider store={store}>
+        <PersistGate loading={null} persistor={persistor}>
+          <LanguageProvider>
+            <AppStorageProvider>
+              <AccountStorageProvider>
+                <NotificationStorageProvider>
+                  <App />
+                </NotificationStorageProvider>
+              </AccountStorageProvider>
+            </AppStorageProvider>
+          </LanguageProvider>
+        </PersistGate>
+      </ReduxProvider>
+    </ErrorBoundary>
   )
 }
 

ios/Podfile.lock

@@ -1979,7 +1979,7 @@ SPEC CHECKSUMS:
   SwiftyJSON: 36413e04c44ee145039d332b4f4e2d3e8d6c4db7
   TcpSockets: 14306fb79f9750ea7d2ddd02d8bed182abb01797
   Toast: 91b396c56ee72a5790816f40d3a94dd357abc196
-  Yoga: 2246eea72aaf1b816a68a35e6e4b74563653ae09
+  Yoga: 950bbfd7e6f04790fdb51149ed51df41f329fcc8
   ZXingObjC: 8898711ab495761b2dbbdec76d90164a6d7e14c5
 
 PODFILE CHECKSUM: d44dfed27ca86fe0b1eb67aab0856b7cc9e24ff7

package.json

@@ -68,6 +68,7 @@
     "@maplibre/maplibre-react-native": "^9.1.0",
     "@metaplex-foundation/mpl-bubblegum": "0.6.0",
     "@metaplex-foundation/mpl-token-metadata": "2.10.0",
+    "@novalabsxyz/mobile-theme": "^2.0.0-y.24",
     "@onsol/tldparser": "^0.5.3",
     "@react-native-async-storage/async-storage": "1.18.1",
     "@react-native-community/blur": "4.3.0",

src/App.tsx

@@ -9,18 +9,16 @@ import { ModalProvider } from '@storage/ModalsProvider'
 import TokensProvider from '@storage/TokensProvider'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import globalStyles from '@theme/globalStyles'
-import { darkThemeColors, lightThemeColors, theme } from '@theme/theme'
-import { useColorScheme } from '@theme/themeHooks'
+import { darkTheme } from '@theme/theme'
 import * as SplashLib from 'expo-splash-screen'
 import React, { useMemo } from 'react'
-import { LogBox } from 'react-native'
+import { LogBox, Platform, StatusBar, UIManager } from 'react-native'
 import useAppState from 'react-native-appstate-hook'
 import Config from 'react-native-config'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { OneSignal } from 'react-native-onesignal'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 import 'text-encoding-polyfill'
-import NetworkAwareStatusBar from './components/NetworkAwareStatusBar'
 import SplashScreen from './components/SplashScreen'
 import WalletConnectProvider from './features/dappLogin/WalletConnectProvider'
 import LockScreen from './features/lock/LockScreen'
@@ -67,34 +65,36 @@ const App = () => {
 
   const { appState } = useAppState()
   const { restored: accountsRestored } = useAccountStorage()
-  // const { cache } = useSolana()
   const { setOpenedNotification } = useNotificationStorage()
 
   const linking = useDeepLinking()
 
-  const colorScheme = useColorScheme()
+  const themeObject = useMemo(() => {
+    return darkTheme
+  }, [])
+
+  if (Platform.OS === 'android') {
+    if (UIManager.setLayoutAnimationEnabledExperimental) {
+      UIManager.setLayoutAnimationEnabledExperimental(true)
+    }
+  }
   const colorAdaptedTheme = useMemo(
     () => ({
-      ...theme,
-      colors: colorScheme === 'light' ? lightThemeColors : darkThemeColors,
+      ...themeObject,
     }),
-    [colorScheme],
+    [themeObject],
   )
 
   const navTheme = useMemo(
     () => ({
       ...DarkTheme,
-      dark: colorScheme === 'light',
+      dark: true,
       colors: {
         ...DarkTheme.colors,
-        background:
-          colorScheme === 'light'
-            ? lightThemeColors.primaryBackground
-            : darkThemeColors.primaryBackground,
+        background: themeObject.colors.primaryBackground,
       },
     }),
-
-    [colorScheme],
+    [themeObject],
   )
 
   useMount(() => {
@@ -113,6 +113,10 @@ const App = () => {
   return (
     <QueryClientProvider client={queryClient}>
       <GestureHandlerRootView style={globalStyles.container}>
+        <StatusBar
+          backgroundColor={themeObject.colors.primaryBackground}
+          barStyle="light-content"
+        />
         <SafeAreaProvider>
           <ThemeProvider theme={colorAdaptedTheme}>
             <PortalProvider>
@@ -140,7 +144,6 @@ const App = () => {
                                         <WalletSignProvider>
                                           <GovernanceProvider>
                                             <AutoGasBanner />
-                                            <NetworkAwareStatusBar />
                                             <RootNavigator />
 
                                             {/* place app specific modals here */}

src/components/AccountButton.tsx

@@ -34,7 +34,7 @@ const AccountButton = ({
   backgroundColor: backgroundColorProps,
   ...boxProps
 }: Props) => {
-  const hitSlop = useHitSlop('l')
+  const hitSlop = useHitSlop('6')
   const colors = useColors()
   const { triggerImpact } = useHaptic()
 
@@ -58,21 +58,26 @@ const AccountButton = ({
     >
       <Box
         backgroundColor={backgroundColorProps as Color}
-        borderRadius="xl"
+        borderRadius="4xl"
         alignItems="center"
         flexDirection="row"
-        paddingHorizontal={innerBoxProps?.paddingHorizontal || 'l'}
-        paddingVertical={innerBoxProps?.paddingVertical || 'm'}
+        paddingHorizontal={innerBoxProps?.paddingHorizontal || '6'}
+        paddingVertical={innerBoxProps?.paddingVertical || '4'}
         {...innerBoxProps}
       >
         <AccountIcon size={accountIconSize} address={address} />
         <Box flex={1}>
           {!!subtitle && (
-            <Text marginLeft="ms" variant="body3" color={textColor}>
+            <Text marginLeft="3" variant="textXsRegular" color={textColor}>
               {subtitle}
             </Text>
           )}
-          <Text marginLeft="ms" marginRight="xs" variant="subtitle2">
+          <Text
+            marginLeft="3"
+            marginRight="xs"
+            variant="textLgMedium"
+            color="primaryText"
+          >
             {title}
           </Text>
         </Box>

src/components/AccountListItem.tsx

@@ -15,7 +15,7 @@ type Props = {
   disabled?: boolean
 }
 const AccountListItem = ({ selected, account, onPress, disabled }: Props) => {
-  const { primary } = useColors()
+  const { primaryText } = useColors()
 
   const handlePress = useCallback(() => onPress?.(account), [account, onPress])
 
@@ -26,34 +26,34 @@ const AccountListItem = ({ selected, account, onPress, disabled }: Props) => {
   return (
     <TouchableContainer
       minHeight={52}
-      paddingVertical="m"
-      paddingHorizontal="xl"
+      paddingVertical="4"
+      paddingHorizontal="8"
       flexDirection="row"
       alignItems="center"
       borderBottomWidth={1}
-      borderColor="primary"
+      borderColor="border.primary"
       onPress={handlePress}
       disabled={disabled}
     >
       <AccountIcon size={40} address={address} />
       <Box flexDirection="column" justifyContent="center" flex={1}>
-        <Text variant="body1" marginLeft="ms">
+        <Text variant="textMdRegular" marginLeft="3" color="primaryText">
           {formatAccountAlias(account)}
         </Text>
-        <Text variant="body3" marginLeft="ms" color="secondaryText">
+        <Text variant="textXsRegular" marginLeft="3" color="secondaryText">
           {ellipsizeAddress(address || '')}
         </Text>
       </Box>
       {selected && (
         <Box
-          backgroundColor="surfaceContrast"
+          backgroundColor="primaryBackground"
           height={27}
           width={27}
-          borderRadius="round"
+          borderRadius="full"
           justifyContent="center"
           alignItems="center"
         >
-          <Checkmark color={primary} />
+          <Checkmark color={primaryText} />
         </Box>
       )}
     </TouchableContainer>

src/components/AccountSelector.tsx

@@ -38,14 +38,17 @@ const AccountSelector = forwardRef(
     useImperativeHandle(ref, () => ({ show, showAccountTypes }))
 
     const bottomSheetModalRef = useRef<BottomSheetModal>(null)
-    const { backgroundStyle } = useOpacity('surfaceSecondary', 1)
-    const { m, xl } = useSpacing()
+    const { backgroundStyle } = useOpacity('bg.tertiary', 1)
+    const spacing = useSpacing()
     const [accountsType, setAccountsTypes] = useState<AccountNetTypeOpt>('all')
     const snapPoints = useMemo(() => ['60%', '80%'], [])
     const colors = useColors()
 
-    const sheetHandleStyle = useMemo(() => ({ padding: m }), [m])
-    const flatListContainerStyle = useMemo(() => ({ paddingBottom: xl }), [xl])
+    const sheetHandleStyle = useMemo(() => ({ padding: spacing[4] }), [spacing])
+    const flatListContainerStyle = useMemo(
+      () => ({ paddingBottom: spacing[8] }),
+      [spacing],
+    )
 
     const { handleDismiss, setIsShowing } = useBackHandler(bottomSheetModalRef)
 

src/components/AddressBookSelector.tsx

@@ -45,10 +45,10 @@ const AddressBookSelector = forwardRef(
     useImperativeHandle(ref, () => ({ showAddressBook }))
 
     const bottomSheetModalRef = useRef<BottomSheetModal>(null)
-    const { backgroundStyle } = useOpacity('surfaceSecondary', 1)
-    const { m } = useSpacing()
+    const { backgroundStyle } = useOpacity('bg.tertiary', 1)
+    const spacing = useSpacing()
     const snapPoints = useMemo(() => ['70%', '90%'], [])
-    const sheetHandleStyle = useMemo(() => ({ padding: m }), [m])
+    const sheetHandleStyle = useMemo(() => ({ padding: spacing[4] }), [spacing])
     const homeNav = useNavigation<HomeNavigationProp>()
     const [address, setAddress] = useState<string>()
     const [index, setIndex] = useState<number>()

src/components/AutoGasBanner.tsx

@@ -168,15 +168,15 @@ const Banner = ({ onLayout, ...rest }: BannerProps) => {
   return (
     <ReAnimatedBox
       visible={swapping}
-      backgroundColor="black650"
+      backgroundColor="gray.900"
       style={bannerAnimatedStyles}
       onLayout={onLayout}
       {...rest}
     >
       <Box
         minHeight={MIN_HEIGHT}
-        padding="s"
-        paddingHorizontal="m"
+        padding="2"
+        paddingHorizontal="4"
         flexDirection="row"
         alignItems="center"
       >
@@ -188,8 +188,8 @@ const Banner = ({ onLayout, ...rest }: BannerProps) => {
           )}
         </Box>
         <Text
-          variant="body2"
-          marginStart="s"
+          variant="textSmRegular"
+          marginStart="2"
           flex={1}
           adjustsFontSizeToFit
           textAlign="center"

src/components/BackButton.tsx

@@ -18,7 +18,7 @@ type Props = BoxProps<Theme> & {
 const BackButton = ({
   color = 'primaryText',
   onPress,
-  paddingHorizontal = 'lx',
+  paddingHorizontal = '7',
   hitSlop,
   ...props
 }: Props) => {