feat: export old colors as MD2Colors and new as MD3Colors (#3074)

callstack · Jun 8, 2022 · 72b53fd · 72b53fd
1 parent 329b775
commit 72b53fd
Show file tree

Hide file tree

Showing 23 changed files with 77 additions and 55 deletions.
diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx
@@ -7,7 +7,7 @@ import {
   Switch,
   TouchableRipple,
   Text,
-  Colors,
+  MD2Colors,
   useTheme,
 } from 'react-native-paper';
 import * as Updates from 'expo-updates';
@@ -73,7 +73,7 @@ const DrawerItems = ({
             key={props.key}
             theme={
               props.key === 3
-                ? { colors: { primary: Colors.tealA200 } }
+                ? { colors: { primary: MD2Colors.tealA200 } }
                 : undefined
             }
             active={drawerItemIndex === index}

diff --git a/example/src/Examples/ActivityIndicatorExample.tsx b/example/src/Examples/ActivityIndicatorExample.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { ActivityIndicator, Colors, FAB } from 'react-native-paper';
+import { ActivityIndicator, MD2Colors, FAB } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ActivityIndicatorExample = () => {
@@ -29,7 +29,7 @@ const ActivityIndicatorExample = () => {
       </View>
 
       <View style={styles.row}>
-        <ActivityIndicator animating={animating} color={Colors.red500} />
+        <ActivityIndicator animating={animating} color={MD2Colors.red500} />
       </View>
     </ScreenWrapper>
   );

diff --git a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, StyleSheet, FlatList, Animated, Platform } from 'react-native';
 import type { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
-import { Colors, useTheme, Avatar, Paragraph } from 'react-native-paper';
+import { MD2Colors, useTheme, Avatar, Paragraph } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { animatedFABExampleData } from '../../../utils';
 import CustomFAB from './CustomFAB';
@@ -42,7 +42,7 @@ const AnimatedFABExample = () => {
         <Avatar.Text
           style={[styles.avatar, { backgroundColor: item.bgColor }]}
           label={item.initials}
-          color={Colors.white}
+          color={MD2Colors.white}
           size={40}
         />
         <View style={styles.itemTextContentContainer}>
@@ -75,7 +75,7 @@ const AnimatedFABExample = () => {
 
             <Icon
               name={item.favorite ? 'star' : 'star-outline'}
-              color={item.favorite ? Colors.orange500 : Colors.grey500}
+              color={item.favorite ? MD2Colors.orange500 : MD2Colors.grey500}
               size={20}
               onPress={() => setVisible(!visible)}
               style={styles.icon}

diff --git a/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx b/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, View, FlatList } from 'react-native';
-import { Colors, Paragraph, RadioButton } from 'react-native-paper';
+import { MD2Colors, Paragraph, RadioButton } from 'react-native-paper';
 import type {
   AnimatedFABAnimateFrom,
   AnimatedFABIconMode,
@@ -106,7 +106,7 @@ const styles = StyleSheet.create({
     top: 0,
     left: 0,
     right: 0,
-    backgroundColor: Colors.white,
+    backgroundColor: MD2Colors.white,
     paddingVertical: 12,
     paddingHorizontal: 16,
   },

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

diff --git a/example/src/Examples/BadgeExample.tsx b/example/src/Examples/BadgeExample.tsx
@@ -6,7 +6,7 @@ import {
   List,
   Paragraph,
   Switch,
-  Colors,
+  MD2Colors,
 } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
@@ -34,7 +34,7 @@ const BadgeExample = () => {
             <IconButton icon="inbox" size={36} style={styles.button} />
             <Badge
               visible={visible}
-              style={[styles.badge, { backgroundColor: Colors.blue500 }]}
+              style={[styles.badge, { backgroundColor: MD2Colors.blue500 }]}
             >
               999+
             </Badge>

diff --git a/example/src/Examples/CheckboxExample.tsx b/example/src/Examples/CheckboxExample.tsx
@@ -3,7 +3,7 @@ import { View, StyleSheet } from 'react-native';
 import {
   Paragraph,
   Checkbox,
-  Colors,
+  MD2Colors,
   TouchableRipple,
 } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
@@ -29,7 +29,7 @@ const CheckboxExample = () => {
           <Paragraph>Custom</Paragraph>
           <View pointerEvents="none">
             <Checkbox
-              color={Colors.blue500}
+              color={MD2Colors.blue500}
               status={checkedCustom ? 'checked' : 'unchecked'}
             />
           </View>

diff --git a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { Paragraph, Button, Portal, Dialog, Colors } from 'react-native-paper';
+import {
+  Paragraph,
+  Button,
+  Portal,
+  Dialog,
+  MD2Colors,
+} from 'react-native-paper';
 
 const DialogWithCustomColors = ({
   visible,
@@ -11,17 +17,17 @@ const DialogWithCustomColors = ({
   <Portal>
     <Dialog
       onDismiss={close}
-      style={{ backgroundColor: Colors.purple900 }}
+      style={{ backgroundColor: MD2Colors.purple900 }}
       visible={visible}
     >
-      <Dialog.Title style={{ color: Colors.white }}>Alert</Dialog.Title>
+      <Dialog.Title style={{ color: MD2Colors.white }}>Alert</Dialog.Title>
       <Dialog.Content>
-        <Paragraph style={{ color: Colors.white }}>
+        <Paragraph style={{ color: MD2Colors.white }}>
           This is a dialog with custom colors
         </Paragraph>
       </Dialog.Content>
       <Dialog.Actions>
-        <Button color={Colors.white} onPress={close}>
+        <Button color={MD2Colors.white} onPress={close}>
           OK
         </Button>
       </Dialog.Actions>

diff --git a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ActivityIndicator, Platform, View, StyleSheet } from 'react-native';
-import { Paragraph, Colors, Portal, Dialog } from 'react-native-paper';
+import { Paragraph, MD2Colors, Portal, Dialog } from 'react-native-paper';
 
 const isIOS = Platform.OS === 'ios';
 
@@ -17,7 +17,7 @@ const DialogWithLoadingIndicator = ({
       <Dialog.Content>
         <View style={styles.flexing}>
           <ActivityIndicator
-            color={Colors.indigo500}
+            color={MD2Colors.indigo500}
             size={isIOS ? 'large' : 48}
             style={styles.marginRight}
           />

diff --git a/example/src/Examples/Dialogs/UndismissableDialog.tsx b/example/src/Examples/Dialogs/UndismissableDialog.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { Paragraph, Button, Portal, Dialog, Colors } from 'react-native-paper';
+import {
+  Paragraph,
+  Button,
+  Portal,
+  Dialog,
+  MD2Colors,
+} from 'react-native-paper';
 
 const DialogWithLongText = ({
   visible,
@@ -15,7 +21,7 @@ const DialogWithLongText = ({
         <Paragraph>This is an undismissable dialog!!</Paragraph>
       </Dialog.Content>
       <Dialog.Actions>
-        <Button color={Colors.teal500} disabled>
+        <Button color={MD2Colors.teal500} disabled>
           Disagree
         </Button>
         <Button onPress={close}>Agree</Button>

diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
-import { IconButton, Colors } from 'react-native-paper';
+import { IconButton, MD2Colors } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ButtonExample = () => {
@@ -10,15 +10,15 @@ const ButtonExample = () => {
       <IconButton
         icon="lock"
         size={24}
-        color={Colors.green500}
+        color={MD2Colors.green500}
         onPress={() => {}}
       />
       <IconButton icon="camera" size={36} onPress={() => {}} />
       <IconButton
         icon="lock"
         size={36}
         onPress={() => {}}
-        style={{ backgroundColor: Colors.lightGreen200 }}
+        style={{ backgroundColor: MD2Colors.lightGreen200 }}
       />
       <IconButton icon="heart" size={60} onPress={() => {}} />
     </ScreenWrapper>

diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { Button, ProgressBar, Paragraph, Colors } from 'react-native-paper';
+import { Button, ProgressBar, Paragraph, MD2Colors } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ProgressBarExample = () => {
@@ -29,7 +29,7 @@ const ProgressBarExample = () => {
         <ProgressBar
           progress={progress}
           visible={visible}
-          color={Colors.red800}
+          color={MD2Colors.red800}
         />
       </View>
 
@@ -38,8 +38,8 @@ const ProgressBarExample = () => {
         <ProgressBar
           progress={progress}
           visible={visible}
-          color={Colors.red800}
-          style={{ backgroundColor: Colors.teal500 }}
+          color={MD2Colors.red800}
+          style={{ backgroundColor: MD2Colors.teal500 }}
         />
       </View>
 

diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx
@@ -3,7 +3,7 @@ import { View, StyleSheet } from 'react-native';
 import {
   Paragraph,
   RadioButton,
-  Colors,
+  MD2Colors,
   TouchableRipple,
 } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
@@ -43,7 +43,7 @@ const RadioButtonExample = () => {
           <View pointerEvents="none">
             <RadioButton
               value="custom"
-              color={Colors.blue500}
+              color={MD2Colors.blue500}
               status={checked === 'custom' ? 'checked' : 'unchecked'}
             />
           </View>

diff --git a/example/src/Examples/SwitchExample.tsx b/example/src/Examples/SwitchExample.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { View, StyleSheet, Platform } from 'react-native';
-import { Paragraph, Switch, Colors, TouchableRipple } from 'react-native-paper';
+import {
+  Paragraph,
+  Switch,
+  MD2Colors,
+  TouchableRipple,
+} from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const SwitchExample = () => {
@@ -28,7 +33,7 @@ const SwitchExample = () => {
         <View style={styles.row}>
           <Paragraph>Custom {switchValueCustomlLabel}</Paragraph>
           <View pointerEvents="none">
-            <Switch value={valueCustom} color={Colors.blue500} />
+            <Switch value={valueCustom} color={MD2Colors.blue500} />
           </View>
         </View>
       </TouchableRipple>
@@ -55,7 +60,7 @@ const SwitchExample = () => {
         <Switch
           value={valueCustom}
           onValueChange={() => setCustomValue(!valueCustom)}
-          color={Colors.blue500}
+          color={MD2Colors.blue500}
         />
       </View>
       <View style={styles.row}>

diff --git a/src/babel/__fixtures__/rewrite-imports/code.js b/src/babel/__fixtures__/rewrite-imports/code.js
@@ -7,7 +7,8 @@ import {
   Button,
   FAB,
   Appbar,
-  Colors,
+  MD2Colors,
+  MD3Colors,
   NonExistent,
   NonExistentSecond as Stuff,
   ThemeProvider,

diff --git a/src/babel/__fixtures__/rewrite-imports/output.js b/src/babel/__fixtures__/rewrite-imports/output.js
@@ -5,7 +5,8 @@ import BottomNavigation from "react-native-paper/lib/module/components/BottomNav
 import Button from "react-native-paper/lib/module/components/Button";
 import FAB from "react-native-paper/lib/module/components/FAB";
 import Appbar from "react-native-paper/lib/module/components/Appbar";
-import * as Colors from "react-native-paper/lib/module/styles/themes/v2/colors";
+import * as MD2Colors from "react-native-paper/lib/module/styles/themes/v2/colors";
+import { MD3Colors } from "react-native-paper/lib/module/styles/themes/v3/tokens";
 import { NonExistent, NonExistentSecond as Stuff } from "react-native-paper/lib/module/index.js";
 import { ThemeProvider } from "react-native-paper/lib/module/core/theming";
 import { withTheme } from "react-native-paper/lib/module/core/theming";

diff --git a/src/components/ActivityIndicator.tsx b/src/components/ActivityIndicator.tsx
@@ -48,10 +48,10 @@ const DURATION = 2400;
  * ## Usage
  * ```js
  * import * as React from 'react';
- * import { ActivityIndicator, Colors } from 'react-native-paper';
+ * import { ActivityIndicator, MD2Colors } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *   <ActivityIndicator animating={true} color={Colors.red800} />
+ *   <ActivityIndicator animating={true} color={MD2Colors.red800} />
  * );
  *
  * export default MyComponent;

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -71,12 +71,12 @@ type Props = $RemoveChildren<typeof TouchableRipple> & {
  * ## Usage
  * ```js
  * import * as React from 'react';
- * import { IconButton, Colors } from 'react-native-paper';
+ * import { IconButton, MD2Colors } from 'react-native-paper';
  *
  * const MyComponent = () => (
  *   <IconButton
  *     icon="camera"
- *     color={Colors.red500}
+ *     color={MD2Colors.red500}
  *     size={20}
  *     onPress={() => console.log('Pressed')}
  *   />

diff --git a/src/components/List/ListIcon.tsx b/src/components/List/ListIcon.tsx
@@ -28,13 +28,13 @@ const ICON_SIZE = 24;
  * ## Usage
  * ```js
  * import * as React from 'react';
- * import { List, Colors } from 'react-native-paper';
+ * import { List, MD2Colors } from 'react-native-paper';
  *
  * const MyComponent = () => (
  *   <>
- *     <List.Icon color={Colors.blue500} icon="folder" />
- *     <List.Icon color={Colors.blue500} icon="equal" />
- *     <List.Icon color={Colors.blue500} icon="calendar" />
+ *     <List.Icon color={MD2Colors.blue500} icon="folder" />
+ *     <List.Icon color={MD2Colors.blue500} icon="equal" />
+ *     <List.Icon color={MD2Colors.blue500} icon="calendar" />
  *   </>
  * );
  *