feat: adjust colors in rest components (#3105)

callstack · Jun 8, 2022 · ad5fc04 · ad5fc04
1 parent c0f5007
commit ad5fc04
Show file tree

Hide file tree

Showing 24 changed files with 235 additions and 96 deletions.
diff --git a/example/src/Examples/ActivityIndicatorExample.tsx b/example/src/Examples/ActivityIndicatorExample.tsx
@@ -1,10 +1,17 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { ActivityIndicator, MD2Colors, FAB } from 'react-native-paper';
+import {
+  ActivityIndicator,
+  MD2Colors,
+  FAB,
+  useTheme,
+  MD3Colors,
+} from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ActivityIndicatorExample = () => {
   const [animating, setAnimating] = React.useState<boolean>(true);
+  const { isV3 } = useTheme();
 
   return (
     <ScreenWrapper style={styles.container}>
@@ -29,7 +36,10 @@ const ActivityIndicatorExample = () => {
       </View>
 
       <View style={styles.row}>
-        <ActivityIndicator animating={animating} color={MD2Colors.red500} />
+        <ActivityIndicator
+          animating={animating}
+          color={isV3 ? MD3Colors.error20 : MD2Colors.red500}
+        />
       </View>
     </ScreenWrapper>
   );

diff --git a/example/src/Examples/AvatarExample.tsx b/example/src/Examples/AvatarExample.tsx
@@ -1,17 +1,29 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { Avatar, List, MD2Colors } from 'react-native-paper';
+import {
+  Avatar,
+  List,
+  MD2Colors,
+  MD3Colors,
+  useTheme,
+} from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const AvatarExample = () => {
+  const { isV3 } = useTheme();
   return (
     <ScreenWrapper>
       <List.Section title="Text">
         <View style={styles.row}>
           <Avatar.Text
-            style={[styles.avatar, { backgroundColor: MD2Colors.yellow500 }]}
+            style={[
+              styles.avatar,
+              {
+                backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500,
+              },
+            ]}
             label="XD"
-            color={MD2Colors.black}
+            color={isV3 ? MD3Colors.primary0 : MD2Colors.black}
           />
           <Avatar.Text style={styles.avatar} label="XD" />
           <Avatar.Text style={styles.avatar} label="XD" size={80} />
@@ -20,9 +32,14 @@ const AvatarExample = () => {
       <List.Section title="Icon">
         <View style={styles.row}>
           <Avatar.Icon
-            style={[styles.avatar, { backgroundColor: MD2Colors.yellow500 }]}
+            style={[
+              styles.avatar,
+              {
+                backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500,
+              },
+            ]}
             icon="folder"
-            color={MD2Colors.black}
+            color={isV3 ? MD3Colors.primary0 : MD2Colors.black}
           />
           <Avatar.Icon style={styles.avatar} icon="folder" />
           <Avatar.Icon style={styles.avatar} icon="folder" size={80} />

diff --git a/example/src/Examples/BannerExample.tsx b/example/src/Examples/BannerExample.tsx
@@ -1,6 +1,12 @@
 import * as React from 'react';
 import { View, StyleSheet, Image, Dimensions, Platform } from 'react-native';
-import { Banner, FAB, useTheme, Theme } from 'react-native-paper';
+import {
+  Banner,
+  FAB,
+  useTheme,
+  MD2Colors,
+  MD3Colors,
+} from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const PHOTOS = Array.from({ length: 24 }).map(
@@ -11,14 +17,23 @@ const BannerExample = () => {
   const [visible, setVisible] = React.useState<boolean>(true);
   const [useCustomTheme, setUseCustomTheme] = React.useState<boolean>(false);
   const defaultTheme = useTheme();
-  const customTheme = {
-    ...defaultTheme,
-    colors: {
-      text: '#fff',
-      surface: '#09c8e5',
-      primary: '#121330',
-    },
-  } as Theme;
+  const customTheme = !defaultTheme.isV3
+    ? {
+        ...defaultTheme,
+        colors: {
+          text: MD2Colors.white,
+          surface: MD2Colors.blue200,
+          primary: MD2Colors.purple900,
+        },
+      }
+    : {
+        ...defaultTheme,
+        colors: {
+          onSurface: MD3Colors.tertiary100,
+          surface: MD3Colors.tertiary50,
+          primary: MD3Colors.tertiary10,
+        },
+      };
 
   return (
     <>

diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx
@@ -1,24 +1,29 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
-import { IconButton, MD2Colors } from 'react-native-paper';
+import { IconButton, MD2Colors, MD3Colors, useTheme } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ButtonExample = () => {
+  const { isV3 } = useTheme();
   return (
     <ScreenWrapper contentContainerStyle={styles.container}>
       <IconButton icon="camera" size={24} onPress={() => {}} />
       <IconButton
         icon="lock"
         size={24}
-        color={MD2Colors.green500}
+        color={isV3 ? MD3Colors.tertiary50 : MD2Colors.green500}
         onPress={() => {}}
       />
       <IconButton icon="camera" size={36} onPress={() => {}} />
       <IconButton
         icon="lock"
         size={36}
         onPress={() => {}}
-        style={{ backgroundColor: MD2Colors.lightGreen200 }}
+        style={{
+          backgroundColor: isV3
+            ? MD3Colors.tertiary50
+            : MD2Colors.lightGreen200,
+        }}
       />
       <IconButton icon="heart" size={60} onPress={() => {}} />
     </ScreenWrapper>

diff --git a/example/src/Examples/MenuExample.tsx b/example/src/Examples/MenuExample.tsx
@@ -13,6 +13,9 @@ import {
   Button,
   List,
   TouchableRipple,
+  useTheme,
+  MD2Colors,
+  MD3Colors,
 } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
@@ -32,6 +35,7 @@ const MenuExample = ({ navigation }: Props) => {
   const [visible, setVisible] = React.useState<MenuVisibility>({});
   const [contextualMenuCoord, setContextualMenuCoor] =
     React.useState<ContextualMenuCoord>({ x: 0, y: 0 });
+  const { isV3 } = useTheme();
 
   const _toggleMenu = (name: string) => () =>
     setVisible({ ...visible, [name]: !visible[name] });
@@ -64,7 +68,7 @@ const MenuExample = ({ navigation }: Props) => {
           anchor={
             <Appbar.Action
               icon={MORE_ICON}
-              color="white"
+              color={isV3 ? MD2Colors.white : MD3Colors.primary100}
               onPress={_toggleMenu('menu1')}
             />
           }

diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx
@@ -1,11 +1,19 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { Button, ProgressBar, Paragraph, MD2Colors } from 'react-native-paper';
+import {
+  Button,
+  ProgressBar,
+  Paragraph,
+  MD2Colors,
+  MD3Colors,
+  useTheme,
+} from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ProgressBarExample = () => {
   const [visible, setVisible] = React.useState<boolean>(true);
   const [progress, setProgress] = React.useState<number>(0.3);
+  const { isV3 } = useTheme();
 
   return (
     <ScreenWrapper contentContainerStyle={styles.container}>
@@ -29,7 +37,7 @@ const ProgressBarExample = () => {
         <ProgressBar
           progress={progress}
           visible={visible}
-          color={MD2Colors.red800}
+          color={isV3 ? MD3Colors.error50 : MD2Colors.red800}
         />
       </View>
 
@@ -39,7 +47,9 @@ const ProgressBarExample = () => {
           progress={progress}
           visible={visible}
           color={MD2Colors.red800}
-          style={{ backgroundColor: MD2Colors.teal500 }}
+          style={{
+            backgroundColor: isV3 ? MD3Colors.secondary50 : MD2Colors.teal500,
+          }}
         />
       </View>
 

diff --git a/example/src/Examples/ThemeExample.tsx b/example/src/Examples/ThemeExample.tsx
@@ -1,19 +1,19 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
-import { Paragraph } from 'react-native-paper';
+import { Text } from 'react-native-paper';
 import { Provider as PaperProvider } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const Content = () => {
   return (
     <ScreenWrapper contentContainerStyle={styles.container}>
-      <Paragraph style={styles.paragraph}>
+      <Text style={styles.paragraph}>
         React Native Paper automatically adapts theme based on system
         preferences
-      </Paragraph>
-      <Paragraph style={styles.paragraph}>
+      </Text>
+      <Text style={styles.paragraph}>
         Please change system theme to dark/light to see the effect
-      </Paragraph>
+      </Text>
     </ScreenWrapper>
   );
 };

diff --git a/src/components/Avatar/AvatarIcon.tsx b/src/components/Avatar/AvatarIcon.tsx
@@ -52,7 +52,7 @@ const Avatar = ({ icon, size = defaultSize, style, theme, ...rest }: Props) => {
     StyleSheet.flatten(style) || {};
   const textColor =
     rest.color ??
-    getContrastingColor(backgroundColor || white, white, 'rgba(0, 0, 0, .54)');
+    getContrastingColor(backgroundColor, white, 'rgba(0, 0, 0, .54)');
 
   return (
     <View

diff --git a/src/components/Avatar/AvatarText.tsx b/src/components/Avatar/AvatarText.tsx
@@ -73,7 +73,7 @@ const AvatarText = ({
     StyleSheet.flatten(style) || {};
   const textColor =
     customColor ??
-    getContrastingColor(backgroundColor || white, white, 'rgba(0, 0, 0, .54)');
+    getContrastingColor(backgroundColor, white, 'rgba(0, 0, 0, .54)');
 
   return (
     <View

diff --git a/src/components/DataTable/DataTableHeader.tsx b/src/components/DataTable/DataTableHeader.tsx
@@ -51,10 +51,12 @@ type Props = React.ComponentPropsWithRef<typeof View> & {
  */
 
 const DataTableHeader = ({ children, style, theme, ...rest }: Props) => {
-  const borderBottomColor = color(theme.dark ? white : black)
-    .alpha(0.12)
-    .rgb()
-    .string();
+  const borderBottomColor = theme.isV3
+    ? theme.colors.surfaceVariant
+    : color(theme.dark ? white : black)
+        .alpha(0.12)
+        .rgb()
+        .string();
 
   return (
     <View {...rest} style={[styles.header, { borderBottomColor }, style]}>

diff --git a/src/components/DataTable/DataTableRow.tsx b/src/components/DataTable/DataTableRow.tsx
@@ -68,10 +68,12 @@ const DataTableRow = ({
   pointerEvents,
   ...rest
 }: Props) => {
-  const borderBottomColor = color(theme.dark ? white : black)
-    .alpha(0.12)
-    .rgb()
-    .string();
+  const borderBottomColor = theme.isV3
+    ? theme.colors.surfaceVariant
+    : color(theme.dark ? white : black)
+        .alpha(0.12)
+        .rgb()
+        .string();
 
   return (
     <TouchableRipple

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -14,7 +14,6 @@ import Icon, { IconSource } from './Icon';
 import CrossFadeIcon from './CrossFadeIcon';
 import { withTheme } from '../core/theming';
 import type { $RemoveChildren, Theme } from '../types';
-import { black } from '../styles/themes/v2/colors';
 
 type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**
@@ -71,12 +70,12 @@ type Props = $RemoveChildren<typeof TouchableRipple> & {
  * ## Usage
  * ```js
  * import * as React from 'react';
- * import { IconButton, MD2Colors } from 'react-native-paper';
+ * import { IconButton, MD3Colors } from 'react-native-paper';
  *
  * const MyComponent = () => (
  *   <IconButton
  *     icon="camera"
- *     color={MD2Colors.red500}
+ *     color={MD3Colors.error50}
  *     size={20}
  *     onPress={() => console.log('Pressed')}
  *   />
@@ -135,7 +134,7 @@ const IconButton = ({
       {...rest}
     >
       <View>
-        <IconComponent color={iconColor || black} source={icon} size={size} />
+        <IconComponent color={iconColor} source={icon} size={size} />
       </View>
     </TouchableRipple>
   );

diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
@@ -14,9 +14,7 @@ import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import Text from '../Typography/Text';
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
-
 import { ListAccordionGroupContext } from './ListAccordionGroup';
-import { black } from '../../styles/themes/v2/colors';
 
 type Props = {
   /**
@@ -169,10 +167,12 @@ const ListAccordion = ({
     }
   };
 
-  const textColor = theme.isV3 ? theme.colors.onSurface : theme?.colors?.text;
-
-  const titleColor = color(textColor).alpha(0.87).rgb().string();
-  const descriptionColor = color(textColor).alpha(0.54).rgb().string();
+  const titleColor = theme.isV3
+    ? theme.colors.onSurface
+    : color(theme.colors.text).alpha(0.87).rgb().string();
+  const descriptionColor = theme.isV3
+    ? theme.colors.onSurfaceVariant
+    : color(theme.colors.text).alpha(0.54).rgb().string();
 
   const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
 
@@ -209,9 +209,7 @@ const ListAccordion = ({
           <View style={styles.row} pointerEvents="none">
             {left
               ? left({
-                  color: isExpanded
-                    ? theme.colors?.primary || black
-                    : descriptionColor || black,
+                  color: isExpanded ? theme.colors?.primary : descriptionColor,
                 })
               : null}
             <View style={[styles.item, styles.content]}>
@@ -254,7 +252,7 @@ const ListAccordion = ({
               ) : (
                 <MaterialCommunityIcon
                   name={isExpanded ? 'chevron-up' : 'chevron-down'}
-                  color={titleColor}
+                  color={theme.isV3 ? descriptionColor : titleColor}
                   size={24}
                   direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
                 />