Update styles to match MD3

patches/react-native-paper+5.0.1.patch

@@ -0,0 +1,57 @@
+diff --git a/node_modules/react-native-paper/src/components/IconButton/IconButton.tsx b/node_modules/react-native-paper/src/components/IconButton/IconButton.tsx
+index 8809882..c7aae22 100644
+--- a/node_modules/react-native-paper/src/components/IconButton/IconButton.tsx
++++ b/node_modules/react-native-paper/src/components/IconButton/IconButton.tsx
+@@ -146,7 +146,7 @@ const IconButton = React.forwardRef<View, Props>(
+         customContainerColor,
+       });
+
+-    const buttonSize = isV3 ? size + 2 * PADDING : size * 1.5;
++    const buttonSize = size * 1.5;
+
+     const borderStyles = {
+       borderWidth: isV3 && mode === 'outlined' && !selected ? 1 : 0,
+diff --git a/node_modules/react-native-paper/src/components/Typography/v2/Caption.tsx b/node_modules/react-native-paper/src/components/Typography/v2/Caption.tsx
+index 135e36a..48e122f 100644
+--- a/node_modules/react-native-paper/src/components/Typography/v2/Caption.tsx
++++ b/node_modules/react-native-paper/src/components/Typography/v2/Caption.tsx
+@@ -45,6 +45,5 @@ const styles = StyleSheet.create({
+     fontSize: 12,
+     lineHeight: 20,
+     marginVertical: 2,
+-    letterSpacing: 0.4,
+   },
+ });
+diff --git a/node_modules/react-native-paper/src/components/Typography/v2/Paragraph.tsx b/node_modules/react-native-paper/src/components/Typography/v2/Paragraph.tsx
+index 13b7d62..dec8598 100644
+--- a/node_modules/react-native-paper/src/components/Typography/v2/Paragraph.tsx
++++ b/node_modules/react-native-paper/src/components/Typography/v2/Paragraph.tsx
+@@ -44,6 +44,5 @@ const styles = StyleSheet.create({
+     fontSize: 14,
+     lineHeight: 20,
+     marginVertical: 2,
+-    letterSpacing: 0.25,
+   },
+ });
+diff --git a/node_modules/react-native-paper/src/components/Typography/v2/Subheading.tsx b/node_modules/react-native-paper/src/components/Typography/v2/Subheading.tsx
+index 37a1cad..aba08f8 100644
+--- a/node_modules/react-native-paper/src/components/Typography/v2/Subheading.tsx
++++ b/node_modules/react-native-paper/src/components/Typography/v2/Subheading.tsx
+@@ -45,6 +45,5 @@ const styles = StyleSheet.create({
+     fontSize: 16,
+     lineHeight: 24,
+     marginVertical: 2,
+-    letterSpacing: 0.5,
+   },
+ });
+diff --git a/node_modules/react-native-paper/src/components/Typography/v2/Title.tsx b/node_modules/react-native-paper/src/components/Typography/v2/Title.tsx
+index d8592b4..b110414 100644
+--- a/node_modules/react-native-paper/src/components/Typography/v2/Title.tsx
++++ b/node_modules/react-native-paper/src/components/Typography/v2/Title.tsx
+@@ -44,6 +44,5 @@ const styles = StyleSheet.create({
+     fontSize: 20,
+     lineHeight: 30,
+     marginVertical: 2,
+-    letterSpacing: 0.15,
+   },
+ });

src/App.tsx

@@ -27,7 +27,7 @@ import {
   useTheme,
   Provider as PaperProvider,
   DefaultTheme as PaperDefaultTheme,
-  DarkTheme as PaperDarkTheme,
+  MD3DarkTheme as PaperDarkTheme,
 } from 'react-native-paper';
 import codePush from 'react-native-code-push';
 import {Provider as StoreProvider} from 'react-redux';
@@ -607,15 +607,14 @@ const BrandPaperDefaultTheme: typeof PaperDefaultTheme = {
   colors: {
     ...PaperDefaultTheme.colors,
     primary: '#9c27b0',
-    accent: '#9c27b0',
+    surface: '#ffffff',
   },
 };
 const BrandPaperDarkTheme: typeof PaperDarkTheme = {
   ...PaperDarkTheme,
   colors: {
     ...PaperDarkTheme.colors,
     primary: '#bb86fc',
-    accent: '#bb86fc',
   },
 };
 

src/components/AssignmentCard.tsx

@@ -1,12 +1,6 @@
 import {memo} from 'react';
 import {StyleSheet, View} from 'react-native';
-import {
-  Caption,
-  Paragraph,
-  Title,
-  Colors,
-  Subheading,
-} from 'react-native-paper';
+import {Caption, Paragraph, Title, Subheading} from 'react-native-paper';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import dayjs from 'dayjs';
@@ -15,6 +9,7 @@ import {Assignment} from 'data/types/state';
 import {removeTags} from 'helpers/html';
 import {getLocale} from 'helpers/i18n';
 import CardWrapper, {CardWrapperProps} from 'components/CardWrapper';
+import Colors from 'constants/Colors';
 
 export interface AssignmentCardProps extends CardWrapperProps {
   data: Assignment;

src/components/CardWrapper.tsx

@@ -1,9 +1,10 @@
 import {PropsWithChildren, useRef} from 'react';
 import {View, StyleSheet} from 'react-native';
-import {TouchableRipple, Colors, useTheme, Checkbox} from 'react-native-paper';
+import {TouchableRipple, useTheme, Checkbox} from 'react-native-paper';
 import Interactable from 'react-native-interactable';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import Colors from 'constants/Colors';
 
 export interface CardWrapperProps {
   fav?: boolean;

src/components/CourseCard.tsx

@@ -36,17 +36,17 @@ const CourseCard: React.FC<React.PropsWithChildren<CourseCardProps>> = ({
         </View>
         <View style={styles.countSections}>
           <View style={styles.section}>
-            <Icon name="notifications" color={theme.colors.placeholder} />
+            <Icon name="notifications" color={theme.colors.outline} />
             <Caption style={styles.sectionText}>{unreadNoticeCount}</Caption>
           </View>
           <View style={styles.section}>
-            <Icon name="event" color={theme.colors.placeholder} />
+            <Icon name="event" color={theme.colors.outline} />
             <Caption style={styles.sectionText}>
               {unfinishedAssignmentCount}
             </Caption>
           </View>
           <View style={styles.section}>
-            <Icon name="folder" color={theme.colors.placeholder} />
+            <Icon name="folder" color={theme.colors.outline} />
             <Caption style={styles.sectionText}>{unreadFileCount}</Caption>
           </View>
         </View>

src/components/Empty.tsx

@@ -12,10 +12,10 @@ const Empty: React.FC<React.PropsWithChildren<unknown>> = () => {
       <Icon
         style={Styles.spacey1}
         name="check-circle"
-        color={theme.colors.placeholder}
+        color={theme.colors.outline}
         size={56}
       />
-      <Text style={[Styles.spacey1, {color: theme.colors.placeholder}]}>
+      <Text style={[Styles.spacey1, {color: theme.colors.outline}]}>
         {t('empty')}
       </Text>
     </View>

src/components/FileCard.tsx

@@ -1,15 +1,10 @@
 import {memo} from 'react';
 import {StyleSheet, View} from 'react-native';
-import {
-  Caption,
-  Paragraph,
-  Title,
-  Colors,
-  Subheading,
-} from 'react-native-paper';
+import {Caption, Paragraph, Title, Subheading} from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import dayjs from 'dayjs';
 import Styles from 'constants/Styles';
+import Colors from 'constants/Colors';
 import {File} from 'data/types/state';
 import {removeTags} from 'helpers/html';
 import CardWrapper, {CardWrapperProps} from './CardWrapper';

src/components/Filter.tsx

@@ -1,6 +1,6 @@
 import {memo, useCallback, useEffect, useState} from 'react';
 import {LayoutChangeEvent, Platform, StyleSheet, View} from 'react-native';
-import {Badge, Colors, Divider, List, Surface, Text} from 'react-native-paper';
+import {Badge, Divider, List, Surface, Text} from 'react-native-paper';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -9,6 +9,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import {t} from 'helpers/i18n';
+import Colors from 'constants/Colors';
 
 export type FilterSelection =
   | 'all'

src/components/NoticeCard.tsx

@@ -1,15 +1,10 @@
 import {memo} from 'react';
 import {StyleSheet, View} from 'react-native';
-import {
-  Caption,
-  Paragraph,
-  Title,
-  Colors,
-  Subheading,
-} from 'react-native-paper';
+import {Caption, Paragraph, Title, Subheading} from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import dayjs from 'dayjs';
 import Styles from 'constants/Styles';
+import Colors from 'constants/Colors';
 import {Notice} from 'data/types/state';
 import {removeTags} from 'helpers/html';
 import CardWrapper, {CardWrapperProps} from './CardWrapper';

src/components/TableCell.tsx

@@ -79,7 +79,7 @@ const TableCell: React.FC<React.PropsWithChildren<TableCellProps>> = ({
               style={styles.icon}
               name={iconName}
               size={21}
-              color={theme.colors.text}
+              color={theme.colors.onSurface}
             />
             {badge && (
               <Badge
@@ -111,7 +111,7 @@ const TableCell: React.FC<React.PropsWithChildren<TableCellProps>> = ({
         {type === 'input' ? (
           <TextInput
             keyboardType="number-pad"
-            style={[styles.input, {color: theme.colors.text}]}
+            style={[styles.input, {color: theme.colors.onSurface}]}
             value={inputValue}
             onChangeText={onInputValueChange}
           />

src/components/TextButton.tsx

@@ -1,5 +1,5 @@
-import {TextProps, TouchableOpacity, TouchableOpacityProps} from 'react-native';
-import {Text, useTheme} from 'react-native-paper';
+import {TouchableOpacity, TouchableOpacityProps} from 'react-native';
+import {Text, TextProps, useTheme} from 'react-native-paper';
 import Styles from 'constants/Styles';
 
 export interface TextButtonProps extends TextProps {
@@ -26,7 +26,11 @@ const TextButton: React.FC<React.PropsWithChildren<TextButtonProps>> = ({
       disabled={disabled}>
       <Text
         style={[
-          {color: disabled ? theme.colors.disabled : theme.colors.primary},
+          {
+            color: disabled
+              ? theme.colors.surfaceDisabled
+              : theme.colors.primary,
+          },
           style,
         ]}
         numberOfLines={1}

src/constants/Colors.ts

@@ -13,4 +13,10 @@ const theme =
 export default {
   plainTheme,
   theme,
+  red500: '#f44336',
+  blue500: '#2196f3',
+  green500: '#4caf50',
+  orange500: '#ff9800',
+  yellow500: '#ffeb3b',
+  grey500: '#9e9e9e',
 };

src/screens/AssignmentSubmission.tsx

@@ -215,7 +215,7 @@ const AssignmentSubmission: React.FC<
                 attachmentResult || removeAttachment
                   ? {
                       textDecorationLine: 'line-through',
-                      color: theme.colors.disabled,
+                      color: theme.colors.surfaceDisabled,
                     }
                   : undefined
               }

src/screens/FileDetail.tsx

@@ -142,10 +142,10 @@ const FileDetail: React.FC<
           <Icon
             style={Styles.spacey1}
             name="error"
-            color={theme.colors.placeholder}
+            color={theme.colors.outline}
             size={56}
           />
-          <Text style={[Styles.spacey1, {color: theme.colors.placeholder}]}>
+          <Text style={[Styles.spacey1, {color: theme.colors.outline}]}>
             {t('fileDownloadFailed')}
           </Text>
         </View>

src/screens/Search.tsx

@@ -49,7 +49,9 @@ const Search: React.FC<
     <SafeArea>
       <View style={Styles.flex1}>
         <Searchbar
-          style={styles.searchBar}
+          style={[styles.searchBar, {backgroundColor: theme.colors.surface}]}
+          elevation={0}
+          placeholderTextColor={theme.colors.outline}
           placeholder={t('searchPlaceholder')}
           onChangeText={setSearchQuery}
           value={searchQuery}
@@ -102,7 +104,7 @@ const Search: React.FC<
                   style={[
                     styles.header,
                     {
-                      color: theme.colors.placeholder,
+                      color: theme.colors.outline,
                       backgroundColor: theme.dark
                         ? 'black'
                         : theme.colors.background,