feat: update material you theming (#3053)

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: ['lodash'],
 };

example/src/Examples/AppbarExample.tsx

@@ -3,7 +3,7 @@ import { View, Platform, StyleSheet } from 'react-native';
 import type { StackNavigationProp } from '@react-navigation/stack';
 import { Appbar, FAB, Switch, Paragraph } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
-import { yellowA200 } from '../../../src/styles/colors';
+import { yellowA200 } from '../../../src/styles/themes/v2/colors';
 
 type Props = {
   navigation: StackNavigationProp<{}>;

example/src/Examples/TextInputExample.tsx

@@ -15,7 +15,7 @@ import {
   pink400,
   red500,
   transparent,
-} from '../../../src/styles/colors';
+} from '../../../src/styles/themes/v2/colors';
 
 const MAX_LENGTH = 20;
 

package.json

@@ -48,6 +48,7 @@
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.7",
     "color": "^3.1.2",
+    "lodash": "^4.17.21",
     "react-native-iphone-x-helper": "^1.3.1"
   },
   "devDependencies": {
@@ -58,6 +59,7 @@
     "@release-it/conventional-changelog": "^1.1.0",
     "@types/color": "^3.0.0",
     "@types/jest": "^24.0.13",
+    "@types/lodash": "^4.14.178",
     "@types/node": "^13.1.0",
     "@types/react-dom": "^16.8.4",
     "@types/react-native": "^0.66.1",
@@ -68,6 +70,7 @@
     "babel-cli": "^6.26.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^26.1.0",
+    "babel-plugin-lodash": "^3.3.4",
     "babel-test": "^0.1.1",
     "chalk": "^4.0.0",
     "commitlint": "^8.3.4",

src/babel/__fixtures__/rewrite-imports/output.js

@@ -5,7 +5,7 @@ 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/colors";
+import * as Colors from "react-native-paper/lib/module/styles/themes/v2/colors";
 import { NonExistent, NonExistentSecond as Stuff, Theme } 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";

src/components/Appbar/Appbar.tsx

@@ -7,7 +7,7 @@ import AppbarAction from './AppbarAction';
 import AppbarBackAction from './AppbarBackAction';
 import Surface from '../Surface';
 import { withTheme } from '../../core/theming';
-import { black, white } from '../../styles/colors';
+import { black, white } from '../../styles/themes/v2/colors';
 import overlay from '../../styles/overlay';
 
 type Props = Partial<React.ComponentPropsWithRef<typeof View>> & {

src/components/Appbar/AppbarAction.tsx

@@ -5,7 +5,7 @@ import type {
   ViewStyle,
   TouchableWithoutFeedback,
 } from 'react-native';
-import { black } from '../../styles/colors';
+import { black } from '../../styles/themes/v2/colors';
 import IconButton from '../IconButton';
 import type { IconSource } from '../Icon';
 

src/components/Appbar/AppbarContent.tsx

@@ -13,7 +13,7 @@ import color from 'color';
 import Text from '../Typography/Text';
 
 import { withTheme } from '../../core/theming';
-import { white } from '../../styles/colors';
+import { white } from '../../styles/themes/v2/colors';
 
 import type { $RemoveChildren } from '../../types';
 

src/components/Avatar/AvatarIcon.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { View, ViewStyle, StyleSheet, StyleProp } from 'react-native';
 import Icon, { IconSource } from '../Icon';
 import { withTheme } from '../../core/theming';
-import { white } from '../../styles/colors';
+import { white } from '../../styles/themes/v2/colors';
 import getContrastingColor from '../../utils/getContrastingColor';
 
 const defaultSize = 64;

src/components/Avatar/AvatarText.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import Text from '../Typography/Text';
 import { withTheme } from '../../core/theming';
-import { white } from '../../styles/colors';
+import { white } from '../../styles/themes/v2/colors';
 import getContrastingColor from '../../utils/getContrastingColor';
 
 const defaultSize = 64;

src/components/Badge.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Animated, StyleSheet, StyleProp, TextStyle } from 'react-native';
-import { white, black } from '../styles/colors';
+import { white, black } from '../styles/themes/v2/colors';
 import { withTheme } from '../core/theming';
 import getContrastingColor from '../utils/getContrastingColor';
 

src/components/BottomNavigation/BottomNavigation.tsx

@@ -17,7 +17,7 @@ import Surface from '../Surface';
 import Badge from '../Badge';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
-import { black, white } from '../../styles/colors';
+import { black, white } from '../../styles/themes/v2/colors';
 import { withTheme } from '../../core/theming';
 import useAnimatedValue from '../../utils/useAnimatedValue';
 import useAnimatedValueArray from '../../utils/useAnimatedValueArray';

src/components/Button.tsx

@@ -14,7 +14,7 @@ import Icon, { IconSource } from './Icon';
 import Surface from './Surface';
 import Text from './Typography/Text';
 import TouchableRipple from './TouchableRipple/TouchableRipple';
-import { black, white } from '../styles/colors';
+import { black, white } from '../styles/themes/v2/colors';
 import { withTheme } from '../core/theming';
 
 type Props = React.ComponentProps<typeof Surface> & {

src/components/Card/Card.tsx

@@ -8,7 +8,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import color from 'color';
-import { white, black } from '../../styles/colors';
+import { white, black } from '../../styles/themes/v2/colors';
 import CardContent from './CardContent';
 import CardActions from './CardActions';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

src/components/Card/CardCover.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, View, ViewStyle, Image, StyleProp } from 'react-native';
 import { withTheme } from '../../core/theming';
-import { grey200 } from '../../styles/colors';
+import { grey200 } from '../../styles/themes/v2/colors';
 
 type Props = React.ComponentPropsWithRef<typeof Image> & {
   /**

src/components/Chip.tsx

@@ -18,7 +18,7 @@ import Surface from './Surface';
 import Text from './Typography/Text';
 import TouchableRipple from './TouchableRipple/TouchableRipple';
 import { withTheme } from '../core/theming';
-import { black, white } from '../styles/colors';
+import { black, white } from '../styles/themes/v2/colors';
 import type { EllipsizeProp } from '../types';
 
 type Props = React.ComponentProps<typeof Surface> & {

src/components/DataTable/DataTableHeader.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import color from 'color';
 import { StyleSheet, StyleProp, View, ViewStyle } from 'react-native';
-import { black, white } from '../../styles/colors';
+import { black, white } from '../../styles/themes/v2/colors';
 import { withTheme } from '../../core/theming';
 
 type Props = React.ComponentPropsWithRef<typeof View> & {

src/components/DataTable/DataTableRow.tsx

@@ -8,7 +8,7 @@ import {
   ViewProps,
 } from 'react-native';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import { black, white } from '../../styles/colors';
+import { black, white } from '../../styles/themes/v2/colors';
 import { withTheme } from '../../core/theming';
 import type { $RemoveChildren } from '../../types';
 

src/components/Divider.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import color from 'color';
 import { StyleSheet, View, ViewStyle, StyleProp } from 'react-native';
 import { withTheme } from '../core/theming';
-import { black, white } from '../styles/colors';
+import { black, white } from '../styles/themes/v2/colors';
 import type { $RemoveChildren } from '../types';
 
 type Props = $RemoveChildren<typeof View> & {

src/components/FAB/AnimatedFAB/AnimatedFAB.tsx

@@ -23,7 +23,7 @@ import type {
   NativeSyntheticEvent,
   TextLayoutEventData,
 } from 'react-native';
-import { white, black } from '../../../styles/colors';
+import { white, black } from '../../../styles/themes/v2/colors';
 import AnimatedText from '../../Typography/AnimatedText';
 import { getCombinedStyles } from './utils';
 

src/components/FAB/FAB.tsx

@@ -14,7 +14,7 @@ import CrossFadeIcon from '../CrossFadeIcon';
 import Icon, { IconSource } from '../Icon';
 import Text from '../Typography/Text';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import { black, white } from '../../styles/colors';
+import { black, white } from '../../styles/themes/v2/colors';
 import { withTheme } from '../../core/theming';
 import getContrastingColor from '../../utils/getContrastingColor';
 import type { $RemoveChildren } from '../../types';

src/components/Menu/MenuItem.tsx

@@ -10,7 +10,7 @@ import {
 import Icon, { IconSource } from '../Icon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
-import { black, white } from '../../styles/colors';
+import { black, white } from '../../styles/themes/v2/colors';
 import { withTheme } from '../../core/theming';
 
 type Props = {

src/components/Switch.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { grey400, grey800, grey50, white, black } from '../styles/colors';
+import {
+  grey400,
+  grey800,
+  grey50,
+  white,
+  black,
+} from '../styles/themes/v2/colors';
 import {
   NativeModules,
   Platform,

src/components/ToggleButton/ToggleButton.tsx

@@ -9,7 +9,7 @@ import { withTheme } from '../../core/theming';
 import color from 'color';
 import IconButton from '../IconButton';
 import { ToggleButtonGroupContext } from './ToggleButtonGroup';
-import { black, white } from '../../styles/colors';
+import { black, white } from '../../styles/themes/v2/colors';
 import type { IconSource } from '../Icon';
 
 type Props = {

src/components/__tests__/Avatar.test.js

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import renderer from 'react-test-renderer';
 import { fireEvent, render } from 'react-native-testing-library';
 import * as Avatar from '../Avatar/Avatar.tsx';
-import { red500 } from '../../styles/colors';
+import { red500 } from '../../styles/themes/v2/colors';
 
 const styles = StyleSheet.create({
   bgColor: {

src/components/__tests__/Badge.test.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import renderer from 'react-test-renderer';
 import Badge from '../Badge.tsx';
-import { red500 } from '../../styles/colors.tsx';
+import { red500 } from '../../styles/themes/v2/colors';
 
 it('renders badge', () => {
   const tree = renderer.create(<Badge />).toJSON();

src/components/__tests__/BottomNavigation.test.js

@@ -4,7 +4,7 @@ import { render } from 'react-native-testing-library';
 import renderer from 'react-test-renderer';
 import BottomNavigation from '../BottomNavigation/BottomNavigation.tsx';
 import BottomNavigationRouteScreen from '../BottomNavigation/BottomNavigationRouteScreen.tsx';
-import { red300 } from '../../styles/colors';
+import { red300 } from '../../styles/themes/v2/colors';
 
 const styles = StyleSheet.create({
   bgColor: {

src/components/__tests__/Button.test.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import renderer from 'react-test-renderer';
 import Button from '../Button.tsx';
-import { pink500 } from '../../styles/colors.tsx';
+import { pink500 } from '../../styles/themes/v2/colors';
 
 const styles = StyleSheet.create({
   flexing: {

src/components/__tests__/IconButton.test.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import renderer from 'react-test-renderer';
 import IconButton from '../IconButton.tsx';
-import { pink500 } from '../../styles/colors.tsx';
+import { pink500 } from '../../styles/themes/v2/colors';
 
 it('renders icon button by default', () => {
   const tree = renderer.create(<IconButton icon="camera" />).toJSON();

src/components/__tests__/ListAccordion.test.js

@@ -4,7 +4,7 @@ import renderer from 'react-test-renderer';
 import ListAccordion from '../List/ListAccordion.tsx';
 import ListItem from '../List/ListItem.tsx';
 import ListIcon from '../List/ListIcon.tsx';
-import { red500 } from '../../styles/colors';
+import { red500 } from '../../styles/themes/v2/colors';
 
 const styles = StyleSheet.create({
   coloring: {

src/components/__tests__/ListItem.test.js

@@ -5,7 +5,7 @@ import { Text, View } from 'react-native';
 import ListItem from '../List/ListItem.tsx';
 import ListIcon from '../List/ListIcon.tsx';
 import Chip from '../Chip';
-import { red500 } from '../../styles/colors';
+import { red500 } from '../../styles/themes/v2/colors';
 
 const styles = StyleSheet.create({
   title: {

src/components/__tests__/ListSection.test.js

@@ -5,7 +5,7 @@ import ListSection from '../List/ListSection.tsx';
 import ListItem from '../List/ListItem.tsx';
 import ListIcon from '../List/ListIcon.tsx';
 import ListSubheader from '../List/ListSubheader.tsx';
-import { red500 } from '../../styles/colors';
+import { red500 } from '../../styles/themes/v2/colors';
 
 const styles = StyleSheet.create({
   itemColor: {

src/components/__tests__/Switch.test.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import renderer from 'react-test-renderer';
 import Switch from '../Switch.tsx';
-import { pink500 } from '../../styles/colors.tsx';
+import { pink500 } from '../../styles/themes/v2/colors';
 
 it('renders on switch', () => {
   const tree = renderer.create(<Switch value />).toJSON();

src/components/__tests__/TextInput.test.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { StyleSheet, Text, Platform } from 'react-native';
 import { fireEvent, render } from 'react-native-testing-library';
 import TextInput from '../TextInput/TextInput';
-import { red500 } from '../../styles/colors';
+import { red500 } from '../../styles/themes/v2/colors';
 
 const style = StyleSheet.create({
   inputStyle: {

src/components/__tests__/Typography/Caption.test.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import renderer from 'react-test-renderer';
 import Caption from '../../Typography/Caption.tsx';
-import { red500 } from '../../../styles/colors';
+import { red500 } from '../../../styles/themes/v2/colors';
 
 const style = StyleSheet.create({
   caption: {

src/components/__tests__/__snapshots__/ListSection.test.js.snap

@@ -47,7 +47,9 @@ exports[`renders list section with custom title style 1`] = `
           "fontWeight": "100",
         },
       },
+      "isV3": false,
       "roundness": 4,
+      "version": 2,
     }
   }
 >
@@ -356,7 +358,9 @@ exports[`renders list section with subheader 1`] = `
           "fontWeight": "100",
         },
       },
+      "isV3": false,
       "roundness": 4,
+      "version": 2,
     }
   }
 >
@@ -663,7 +667,9 @@ exports[`renders list section without subheader 1`] = `
           "fontWeight": "100",
         },
       },
+      "isV3": false,
       "roundness": 4,
+      "version": 2,
     }
   }
 >