diff --git a/docs/src/components/BannerExample.tsx b/docs/src/components/BannerExample.tsx index 7f4acdc7bc..59ec60634a 100644 --- a/docs/src/components/BannerExample.tsx +++ b/docs/src/components/BannerExample.tsx @@ -9,8 +9,8 @@ import { Avatar, Button, FAB, - MD3DarkTheme as DarkTheme, - MD3LightTheme as DefaultTheme, + DarkTheme, + LightTheme, ProgressBar, PaperProvider, RadioButton, @@ -167,7 +167,7 @@ const Shimmer = () => { const ThemedBannerExample = () => { const isDarkTheme = useColorMode().colorMode === 'dark'; return ( - + ); diff --git a/docs/src/components/GetStartedButtons.tsx b/docs/src/components/GetStartedButtons.tsx index 4debe5b5ac..fd00420b46 100644 --- a/docs/src/components/GetStartedButtons.tsx +++ b/docs/src/components/GetStartedButtons.tsx @@ -9,8 +9,8 @@ import Link from '@docusaurus/Link'; import { useColorMode } from '@docusaurus/theme-common'; import { Button, - MD3DarkTheme as DarkTheme, - MD3LightTheme as DefaultTheme, + DarkTheme, + LightTheme, PaperProvider, } from 'react-native-paper'; @@ -95,7 +95,7 @@ const Shimmer = () => { const ThemedGetStarted = () => { const isDarkTheme = useColorMode().colorMode === 'dark'; return ( - + ); diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx index 7974fd6678..deac6e0fb5 100644 --- a/example/src/DrawerItems.tsx +++ b/example/src/DrawerItems.tsx @@ -9,7 +9,7 @@ import { Button, Dialog, Drawer, - MD3Colors, + Palette, Switch, Text, TouchableRipple, @@ -136,8 +136,8 @@ function DrawerItems() { const coloredLabelTheme = { colors: { - secondaryContainer: MD3Colors.tertiary80, - onSecondaryContainer: MD3Colors.tertiary20, + secondaryContainer: Palette.tertiary80, + onSecondaryContainer: Palette.tertiary20, }, }; diff --git a/example/src/Examples/ActivityIndicatorExample.tsx b/example/src/Examples/ActivityIndicatorExample.tsx index 15686054fa..e3e5e72e3c 100644 --- a/example/src/Examples/ActivityIndicatorExample.tsx +++ b/example/src/Examples/ActivityIndicatorExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { ActivityIndicator, FAB, List, MD3Colors } from 'react-native-paper'; +import { ActivityIndicator, FAB, List, Palette } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -41,7 +41,7 @@ const ActivityIndicatorExample = () => { diff --git a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx index f9b2303fad..3699bd0f3e 100644 --- a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx +++ b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx @@ -3,7 +3,7 @@ import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native'; import { Animated, FlatList, Platform, StyleSheet, View } from 'react-native'; import Icon from '@expo/vector-icons/MaterialCommunityIcons'; -import { Avatar, MD3Colors, Text } from 'react-native-paper'; +import { Avatar, Palette, Text } from 'react-native-paper'; import CustomFAB from './CustomFAB'; import CustomFABControls, { @@ -46,7 +46,7 @@ const AnimatedFABExample = () => { @@ -89,7 +89,7 @@ const AnimatedFABExample = () => { setVisible(!visible)} diff --git a/example/src/Examples/AppbarExample.tsx b/example/src/Examples/AppbarExample.tsx index 3425254732..d1eec2cef6 100644 --- a/example/src/Examples/AppbarExample.tsx +++ b/example/src/Examples/AppbarExample.tsx @@ -6,7 +6,7 @@ import { Appbar, FAB, List, - MD3Colors, + Palette, RadioButton, Snackbar, Switch, @@ -32,7 +32,6 @@ const AppbarExample = ({ navigation }: Props) => { const [showSearchIcon, setShowSearchIcon] = React.useState(true); const [showMoreIcon, setShowMoreIcon] = React.useState(true); const [showCustomColor, setShowCustomColor] = React.useState(false); - const [showExactTheme, setShowExactTheme] = React.useState(false); const [appbarMode, setAppbarMode] = React.useState('small'); const [showCalendarIcon, setShowCalendarIcon] = React.useState(false); const [showElevated, setShowElevated] = React.useState(false); @@ -49,9 +48,6 @@ const AppbarExample = ({ navigation }: Props) => { header: () => ( @@ -80,7 +76,6 @@ const AppbarExample = ({ navigation }: Props) => { showSearchIcon, showMoreIcon, showCustomColor, - showExactTheme, appbarMode, showCalendarIcon, isCenterAlignedMode, @@ -129,10 +124,6 @@ const AppbarExample = ({ navigation }: Props) => { Custom Color - - Exact Dark Theme - - Elevated @@ -186,7 +177,6 @@ const AppbarExample = ({ navigation }: Props) => { }, ]} safeAreaInsets={{ bottom, left, right }} - theme={{ mode: showExactTheme ? 'exact' : 'adaptive' }} > {}} /> {}} /> @@ -231,6 +221,6 @@ const styles = StyleSheet.create({ right: 16, }, customColor: { - backgroundColor: MD3Colors.secondary80, + backgroundColor: Palette.secondary80, }, }); diff --git a/example/src/Examples/AvatarExample.tsx b/example/src/Examples/AvatarExample.tsx index 229c2f4a0b..94a7da8570 100644 --- a/example/src/Examples/AvatarExample.tsx +++ b/example/src/Examples/AvatarExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { Avatar, List, MD3Colors } from 'react-native-paper'; +import { Avatar, List, Palette } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -14,11 +14,11 @@ const AvatarExample = () => { style={[ styles.avatar, { - backgroundColor: MD3Colors.error70, + backgroundColor: Palette.error70, }, ]} label="XD" - color={MD3Colors.primary0} + color={Palette.primary0} /> @@ -30,11 +30,11 @@ const AvatarExample = () => { style={[ styles.avatar, { - backgroundColor: MD3Colors.error70, + backgroundColor: Palette.error70, }, ]} icon="folder" - color={MD3Colors.primary0} + color={Palette.primary0} /> diff --git a/example/src/Examples/BadgeExample.tsx b/example/src/Examples/BadgeExample.tsx index 3269dc70a8..c3df954659 100644 --- a/example/src/Examples/BadgeExample.tsx +++ b/example/src/Examples/BadgeExample.tsx @@ -5,7 +5,7 @@ import { Badge, IconButton, List, - MD3Colors, + Palette, Text, Switch, } from 'react-native-paper'; @@ -41,7 +41,7 @@ const BadgeExample = () => { style={[ styles.badge, { - backgroundColor: MD3Colors.primary80, + backgroundColor: Palette.primary80, }, ]} > diff --git a/example/src/Examples/BannerExample.tsx b/example/src/Examples/BannerExample.tsx index 7ec874a283..b469946981 100644 --- a/example/src/Examples/BannerExample.tsx +++ b/example/src/Examples/BannerExample.tsx @@ -8,7 +8,7 @@ import { View, } from 'react-native'; -import { Banner, FAB, MD3Colors } from 'react-native-paper'; +import { Banner, FAB, Palette } from 'react-native-paper'; import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; @@ -33,12 +33,12 @@ const BannerExample = () => { ...defaultTheme, colors: { ...defaultTheme.colors, - onSurface: MD3Colors.tertiary100, + onSurface: Palette.tertiary100, elevation: { ...defaultTheme.colors.elevation, - level1: MD3Colors.tertiary50, + level1: Palette.tertiary50, }, - primary: MD3Colors.tertiary10, + primary: Palette.tertiary10, }, }; diff --git a/example/src/Examples/CheckboxExample.tsx b/example/src/Examples/CheckboxExample.tsx index 06088a646a..10ac45e11d 100644 --- a/example/src/Examples/CheckboxExample.tsx +++ b/example/src/Examples/CheckboxExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { Checkbox, MD3Colors, Text, TouchableRipple } from 'react-native-paper'; +import { Checkbox, Palette, Text, TouchableRipple } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -26,7 +26,7 @@ const CheckboxExample = () => { Custom diff --git a/example/src/Examples/ChipExample.tsx b/example/src/Examples/ChipExample.tsx index 211ebfde49..8ee757fa0e 100644 --- a/example/src/Examples/ChipExample.tsx +++ b/example/src/Examples/ChipExample.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Image, StyleSheet, View } from 'react-native'; import color from 'color'; -import { Chip, List, MD3Colors, Snackbar, Text } from 'react-native-paper'; +import { Chip, List, Palette, Snackbar, Text } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -11,7 +11,7 @@ const ChipExample = () => { visible: false, text: '', }); - const customColor = MD3Colors.error50; + const customColor = Palette.error50; return ( <> diff --git a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx index e3bffafd60..c811523b9e 100644 --- a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx +++ b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper'; +import { Button, Portal, Dialog, Palette } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -16,20 +16,18 @@ const DialogWithCustomColors = ({ - - Alert - + Alert - + This is a dialog with custom colors - diff --git a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx index 261b7ff9e6..21f647e75c 100644 --- a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx +++ b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper'; +import { Button, Portal, Dialog, Palette } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -26,7 +26,7 @@ const DialogWithDismissableBackButton = ({ - diff --git a/example/src/Examples/Dialogs/DialogWithIcon.tsx b/example/src/Examples/Dialogs/DialogWithIcon.tsx index d939d4e401..f12089193d 100644 --- a/example/src/Examples/Dialogs/DialogWithIcon.tsx +++ b/example/src/Examples/Dialogs/DialogWithIcon.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet } from 'react-native'; -import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper'; +import { Button, Portal, Dialog, Palette } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -24,7 +24,7 @@ const DialogWithIcon = ({ - diff --git a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx index 5860737e3e..86cbe67c0d 100644 --- a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx +++ b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native'; -import { Dialog, MD3Colors, Portal } from 'react-native-paper'; +import { Dialog, Palette, Portal } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -21,7 +21,7 @@ const DialogWithLoadingIndicator = ({ diff --git a/example/src/Examples/Dialogs/UndismissableDialog.tsx b/example/src/Examples/Dialogs/UndismissableDialog.tsx index ded4896fe2..3a9fe10cb8 100644 --- a/example/src/Examples/Dialogs/UndismissableDialog.tsx +++ b/example/src/Examples/Dialogs/UndismissableDialog.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper'; +import { Button, Portal, Dialog, Palette } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -18,7 +18,7 @@ const UndismissableDialog = ({ This is an undismissable dialog!! - diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx index 2b90a4ebd4..5d2a22e235 100644 --- a/example/src/Examples/IconButtonExample.tsx +++ b/example/src/Examples/IconButtonExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { IconButton, List, MD3Colors } from 'react-native-paper'; +import { IconButton, List, Palette } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -121,7 +121,7 @@ const ButtonExample = () => { {}} /> { mode="contained" style={styles.square} size={24} - iconColor={MD3Colors.tertiary50} + iconColor={Palette.tertiary50} onPress={() => {}} /> { style={styles.slightlyRounded} size={24} contentStyle={styles.contentPadding} - iconColor={MD3Colors.tertiary50} + iconColor={Palette.tertiary50} onPress={() => {}} /> { mode="contained-tonal" style={styles.differentBorderRadius} size={24} - iconColor={MD3Colors.tertiary50} + iconColor={Palette.tertiary50} onPress={() => {}} /> { mode="outlined" style={styles.differentBorderRadius} size={24} - iconColor={MD3Colors.tertiary50} + iconColor={Palette.tertiary50} onPress={() => {}} /> {}} /> @@ -162,7 +162,7 @@ const ButtonExample = () => { icon="lock" size={36} onPress={() => {}} - containerColor={MD3Colors.tertiary60} + containerColor={Palette.tertiary60} /> {}} /> {}} loading /> diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx index 5ab797bb1d..da1e93ad0d 100644 --- a/example/src/Examples/ProgressBarExample.tsx +++ b/example/src/Examples/ProgressBarExample.tsx @@ -4,7 +4,7 @@ import { View, StyleSheet, Animated } from 'react-native'; import { Button, ProgressBar, - MD3Colors, + Palette, ProgressBarProps, Text, } from 'react-native-paper'; @@ -62,7 +62,7 @@ const ProgressBarExample = () => { @@ -73,9 +73,9 @@ const ProgressBarExample = () => { diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx index 7e3b3cf754..6ab1869dd9 100644 --- a/example/src/Examples/RadioButtonExample.tsx +++ b/example/src/Examples/RadioButtonExample.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; import { - MD3Colors, + Palette, RadioButton, Text, TouchableRipple, @@ -45,7 +45,7 @@ const RadioButtonExample = () => { diff --git a/example/src/Examples/SearchbarExample.tsx b/example/src/Examples/SearchbarExample.tsx index c5b5eaca15..452af2ec34 100644 --- a/example/src/Examples/SearchbarExample.tsx +++ b/example/src/Examples/SearchbarExample.tsx @@ -3,13 +3,7 @@ import { Keyboard, StyleSheet } from 'react-native'; import type { DrawerNavigationProp } from '@react-navigation/drawer'; import type { StackNavigationProp } from '@react-navigation/stack'; -import { - List, - MD3Colors, - Searchbar, - Snackbar, - Avatar, -} from 'react-native-paper'; +import { List, Palette, Searchbar, Snackbar, Avatar } from 'react-native-paper'; import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; @@ -57,7 +51,7 @@ const SearchExample = ({ navigation }: Props) => { value={searchQueries.traileringIcon} traileringIcon={'microphone'} traileringIconColor={ - isVisible ? MD3Colors.error40 : colors.onSurfaceVariant + isVisible ? Palette.error40 : colors.onSurfaceVariant } traileringIconAccessibilityLabel={'microphone button'} onTraileringIconPress={() => setIsVisible(true)} @@ -76,7 +70,7 @@ const SearchExample = ({ navigation }: Props) => { value={searchQueries.traileringIconWithRightItem} traileringIcon={'microphone'} traileringIconColor={ - isVisible ? MD3Colors.error40 : colors.onSurfaceVariant + isVisible ? Palette.error40 : colors.onSurfaceVariant } traileringIconAccessibilityLabel={'microphone button'} onTraileringIconPress={() => setIsVisible(true)} diff --git a/example/src/Examples/SurfaceExample.tsx b/example/src/Examples/SurfaceExample.tsx index 88ca904b10..b7e46b9053 100644 --- a/example/src/Examples/SurfaceExample.tsx +++ b/example/src/Examples/SurfaceExample.tsx @@ -1,13 +1,7 @@ import * as React from 'react'; import { ScrollView, StyleSheet, View } from 'react-native'; -import { - MD3Elevation, - Surface, - Text, - MD3Colors, - List, -} from 'react-native-paper'; +import { Elevation, Surface, Text, Palette, List } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -19,7 +13,7 @@ const SurfaceExample = () => { key={index} style={[styles.surface, styles.v3Surface]} mode={mode} - elevation={index as MD3Elevation} + elevation={index as Elevation} > {`Elevation ${index === 1 ? '(default)' : ''} ${index}`} @@ -92,7 +86,7 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', width: '100%', marginBottom: 20, - borderColor: MD3Colors.tertiary50, + borderColor: Palette.tertiary50, padding: 10, borderWidth: 1, }, @@ -105,7 +99,7 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', width: '100%', marginBottom: 100, - borderColor: MD3Colors.tertiary50, + borderColor: Palette.tertiary50, padding: 10, borderWidth: 1, }, diff --git a/example/src/Examples/SwitchExample.tsx b/example/src/Examples/SwitchExample.tsx index 51baa12b01..da959eda47 100644 --- a/example/src/Examples/SwitchExample.tsx +++ b/example/src/Examples/SwitchExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Platform, StyleSheet, View } from 'react-native'; -import { MD3Colors, Switch, Text, TouchableRipple } from 'react-native-paper'; +import { Palette, Switch, Text, TouchableRipple } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -30,7 +30,7 @@ const SwitchExample = () => { Custom {switchValueCustomlLabel} - + @@ -57,7 +57,7 @@ const SwitchExample = () => { setCustomValue(!valueCustom)} - color={MD3Colors.tertiary50} + color={Palette.tertiary50} /> diff --git a/example/src/Examples/TextExample.tsx b/example/src/Examples/TextExample.tsx index 1cb96edfaf..ea814c1c18 100644 --- a/example/src/Examples/TextExample.tsx +++ b/example/src/Examples/TextExample.tsx @@ -3,7 +3,7 @@ import { Platform, StyleSheet, View } from 'react-native'; import { configureFonts, - MD3LightTheme, + LightTheme, PaperProvider, customText, } from 'react-native-paper'; @@ -30,7 +30,7 @@ const TextExample = () => { } as const; const theme = { - ...MD3LightTheme, + ...LightTheme, fonts: configureFonts({ config: fontConfig }), }; return ( diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx index caecdc49b8..14a250f208 100644 --- a/example/src/Examples/TextInputExample.tsx +++ b/example/src/Examples/TextInputExample.tsx @@ -13,7 +13,7 @@ import { configureFonts, HelperText, List, - MD3Colors, + Palette, TextInput, } from 'react-native-paper'; @@ -567,7 +567,7 @@ const TextInputExample = () => { * @@ -597,8 +597,8 @@ const TextInputExample = () => { onChangeText={(flatUnderlineColors) => inputActionHandler('flatUnderlineColors', flatUnderlineColors) } - underlineColor={MD3Colors.primary70} - activeUnderlineColor={MD3Colors.tertiary50} + underlineColor={Palette.primary70} + activeUnderlineColor={Palette.tertiary50} /> { onChangeText={(outlinedColors) => inputActionHandler('outlinedColors', outlinedColors) } - outlineColor={MD3Colors.primary70} - activeOutlineColor={MD3Colors.tertiary50} + outlineColor={Palette.primary70} + activeOutlineColor={Palette.tertiary50} /> void; @@ -9,7 +9,7 @@ export const PreferencesContext = React.createContext<{ toggleCustomFont: () => void; toggleRippleEffect: () => void; toggleShouldUseDynamicTheme?: () => void; - theme: MD3Theme; + theme: Theme; rtl: boolean; collapsed: boolean; customFontLoaded: boolean; diff --git a/example/src/hooks/useExampleTheme.ts b/example/src/hooks/useExampleTheme.ts index 059ab4d05c..7ac982fb22 100644 --- a/example/src/hooks/useExampleTheme.ts +++ b/example/src/hooks/useExampleTheme.ts @@ -1,3 +1,3 @@ -import { useTheme, type MD3Theme } from 'react-native-paper'; +import { useTheme, type Theme } from 'react-native-paper'; -export const useExampleTheme = () => useTheme(); +export const useExampleTheme = () => useTheme(); diff --git a/example/src/index.native.tsx b/example/src/index.native.tsx index 821386cc83..23b734fe4d 100644 --- a/example/src/index.native.tsx +++ b/example/src/index.native.tsx @@ -10,8 +10,8 @@ import { StatusBar } from 'expo-status-bar'; import * as Updates from 'expo-updates'; import { PaperProvider, - MD3DarkTheme, - MD3LightTheme, + DarkTheme, + LightTheme, DynamicLightTheme, DynamicDarkTheme, } from 'react-native-paper'; @@ -60,7 +60,7 @@ export default function PaperExample() { return isDarkMode ? DynamicDarkTheme : DynamicLightTheme; } - return isDarkMode ? MD3DarkTheme : MD3LightTheme; + return isDarkMode ? DarkTheme : LightTheme; }, [isDarkMode, shouldUseDynamicTheme]); React.useEffect(() => { diff --git a/example/src/index.tsx b/example/src/index.tsx index a6ee5ccc08..df291baf3f 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -5,7 +5,7 @@ import { createDrawerNavigator } from '@react-navigation/drawer'; import { InitialState, NavigationContainer } from '@react-navigation/native'; import { useFonts } from 'expo-font'; import { useKeepAwake } from 'expo-keep-awake'; -import { PaperProvider, MD3DarkTheme, MD3LightTheme } from 'react-native-paper'; +import { PaperProvider, DarkTheme, LightTheme } from 'react-native-paper'; import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; import DrawerItems from './DrawerItems'; @@ -42,7 +42,7 @@ export default function PaperExample() { const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true); const theme = React.useMemo( - () => (isDarkMode ? MD3DarkTheme : MD3LightTheme), + () => (isDarkMode ? DarkTheme : LightTheme), [isDarkMode] ); diff --git a/example/utils/index.ts b/example/utils/index.ts index d0856f19a5..bd26ae81e6 100644 --- a/example/utils/index.ts +++ b/example/utils/index.ts @@ -1,6 +1,6 @@ import { Platform } from 'react-native'; -import { MD3DarkTheme, MD3LightTheme, MD3Theme } from 'react-native-paper'; +import { DarkTheme, LightTheme, Theme } from 'react-native-paper'; type ReducerAction = { payload: State[T]; @@ -1155,80 +1155,80 @@ const darkCyanColors = { export const colorThemes = { paper: { - light: MD3LightTheme, - dark: MD3DarkTheme, + light: LightTheme, + dark: DarkTheme, }, pink: { light: { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...lightPinkColors.colors }, + ...LightTheme, + colors: { ...LightTheme.colors, ...lightPinkColors.colors }, }, dark: { - ...MD3DarkTheme, - colors: { ...MD3DarkTheme.colors, ...darkPinkColors.colors }, + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkPinkColors.colors }, }, }, green: { light: { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...lightGreenColors.colors }, + ...LightTheme, + colors: { ...LightTheme.colors, ...lightGreenColors.colors }, }, dark: { - ...MD3DarkTheme, - colors: { ...MD3DarkTheme.colors, ...darkGreenColors.colors }, + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkGreenColors.colors }, }, }, blue: { light: { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...lightBlueColors.colors }, + ...LightTheme, + colors: { ...LightTheme.colors, ...lightBlueColors.colors }, }, dark: { - ...MD3DarkTheme, - colors: { ...MD3DarkTheme.colors, ...darkBlueColors.colors }, + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkBlueColors.colors }, }, }, orange: { light: { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...lightOrangeColors.colors }, + ...LightTheme, + colors: { ...LightTheme.colors, ...lightOrangeColors.colors }, }, dark: { - ...MD3DarkTheme, - colors: { ...MD3DarkTheme.colors, ...darkOrangeColors.colors }, + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkOrangeColors.colors }, }, }, red: { light: { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...lightRedColors.colors }, + ...LightTheme, + colors: { ...LightTheme.colors, ...lightRedColors.colors }, }, dark: { - ...MD3DarkTheme, - colors: { ...MD3DarkTheme.colors, ...darkRedColors.colors }, + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkRedColors.colors }, }, }, yellow: { light: { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...lightYellowColors.colors }, + ...LightTheme, + colors: { ...LightTheme.colors, ...lightYellowColors.colors }, }, dark: { - ...MD3DarkTheme, - colors: { ...MD3DarkTheme.colors, ...darkYellowColors.colors }, + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkYellowColors.colors }, }, }, cyan: { light: { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...lightCyanColors.colors }, + ...LightTheme, + colors: { ...LightTheme.colors, ...lightCyanColors.colors }, }, dark: { - ...MD3DarkTheme, - colors: { ...MD3DarkTheme.colors, ...darkCyanColors.colors }, + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkCyanColors.colors }, }, }, -} as { [key: string]: { light: MD3Theme; dark: MD3Theme } }; +} as { [key: string]: { light: Theme; dark: Theme } }; export const songsData = [ { diff --git a/example/utils/themes.ts b/example/utils/themes.ts index 85e4bb4f81..956b383ab1 100644 --- a/example/utils/themes.ts +++ b/example/utils/themes.ts @@ -4,39 +4,40 @@ import { } from '@react-navigation/native'; import { adaptNavigationTheme, - MD3DarkTheme, - MD3LightTheme, + DarkTheme, + LightTheme, configureFonts, } from 'react-native-paper'; -const { LightTheme, DarkTheme } = adaptNavigationTheme({ - reactNavigationLight: NavigationDefaultTheme, - reactNavigationDark: NavigationDarkTheme, -}); +const { LightTheme: NavLightTheme, DarkTheme: NavDarkTheme } = + adaptNavigationTheme({ + reactNavigationLight: NavigationDefaultTheme, + reactNavigationDark: NavigationDarkTheme, + }); export const CombinedDefaultTheme = { - ...MD3LightTheme, ...LightTheme, + ...NavLightTheme, colors: { - ...MD3LightTheme.colors, ...LightTheme.colors, + ...NavLightTheme.colors, }, fonts: { - ...MD3LightTheme.fonts, ...LightTheme.fonts, + ...NavLightTheme.fonts, }, }; export const CombinedDarkTheme = { - ...MD3DarkTheme, ...DarkTheme, + ...NavDarkTheme, colors: { - ...MD3DarkTheme.colors, ...DarkTheme.colors, + ...NavDarkTheme.colors, }, fonts: { - ...MD3DarkTheme.fonts, ...DarkTheme.fonts, + ...NavDarkTheme.fonts, }, }; diff --git a/src/babel/__fixtures__/rewrite-imports/code.js b/src/babel/__fixtures__/rewrite-imports/code.js index 6509ef2f67..f1253a5e08 100644 --- a/src/babel/__fixtures__/rewrite-imports/code.js +++ b/src/babel/__fixtures__/rewrite-imports/code.js @@ -5,10 +5,10 @@ import { Button, FAB, Appbar, - MD3Colors, + Palette, NonExistent, NonExistentSecond as Stuff, ThemeProvider, withTheme, - DefaultTheme, + LightTheme, } from 'react-native-paper'; diff --git a/src/babel/__fixtures__/rewrite-imports/output.js b/src/babel/__fixtures__/rewrite-imports/output.js index f9b98ad938..bbe342ad0d 100644 --- a/src/babel/__fixtures__/rewrite-imports/output.js +++ b/src/babel/__fixtures__/rewrite-imports/output.js @@ -4,8 +4,7 @@ import BottomNavigation from "react-native-paper/lib/module/components/BottomNav import Button from "react-native-paper/lib/module/components/Button/Button"; import FAB from "react-native-paper/lib/module/components/FAB"; import Appbar from "react-native-paper/lib/module/components/Appbar"; -import { MD3Colors } from "react-native-paper/lib/module/deprecated"; -import { NonExistent, NonExistentSecond as Stuff } from "react-native-paper/lib/module/index.js"; +import { Palette } from "react-native-paper/lib/module/theme/tokens"; +import { NonExistent, NonExistentSecond as Stuff, LightTheme } 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"; -import { DefaultTheme } from "react-native-paper/lib/module/deprecated"; diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx index d0cd447295..2fefd896a6 100644 --- a/src/components/BottomNavigation/BottomNavigation.tsx +++ b/src/components/BottomNavigation/BottomNavigation.tsx @@ -26,10 +26,6 @@ export type BaseRoute = { focusedIcon?: IconSource; unfocusedIcon?: IconSource; badge?: string | number | boolean; - /** - * @deprecated In v5.x works only with theme version 2. - */ - color?: string; accessibilityLabel?: string; testID?: string; lazy?: boolean; @@ -83,7 +79,6 @@ export type Props = { * - `title`: title of the route to use as the tab label * - `focusedIcon`: icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x * - `unfocusedIcon`: icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3 - * - `color`: color to use as background color for shifting bottom navigation @deprecatedProperty In v5.x works only with theme version 2. * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text. * - `accessibilityLabel`: accessibility label for the tab button * - `testID`: test id for the tab button diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx index 3992463322..a79807d950 100644 --- a/src/components/BottomNavigation/BottomNavigationBar.tsx +++ b/src/components/BottomNavigation/BottomNavigationBar.tsx @@ -37,10 +37,6 @@ type BaseRoute = { focusedIcon?: IconSource; unfocusedIcon?: IconSource; badge?: string | number | boolean; - /** - * @deprecated In v5.x works only with theme version 2. - */ - color?: string; accessibilityLabel?: string; testID?: string; lazy?: boolean; @@ -94,7 +90,6 @@ export type Props = { * - `title`: title of the route to use as the tab label * - `focusedIcon`: icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x * - `unfocusedIcon`: icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3 - * - `color`: color to use as background color for shifting bottom navigation @deprecatedProperty In v5.x works only with theme version 2. * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text. * - `accessibilityLabel`: accessibility label for the tab button * - `testID`: test id for the tab button diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 1cb2ca6bed..943377faae 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -50,11 +50,6 @@ export type Props = $Omit, 'mode'> & { * Use a compact look, useful for `text` buttons in a row. */ compact?: boolean; - /** - * @deprecated Deprecated in v5.x - use `buttonColor` or `textColor` instead. - * Custom text color for flat button, or background color for contained button. - */ - color?: string; /** * Custom button's background color. */ diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 422101b4e8..abf4a64dcb 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -172,65 +172,24 @@ const Card = ( onPressOut, }); - // Default animated value const { current: elevation } = React.useRef( new Animated.Value(cardElevation) ); - // Dark adaptive animated value, used in case of toggling the theme, - // it prevents animating the background with native drivers inside Surface - const { current: elevationDarkAdaptive } = React.useRef( - new Animated.Value(cardElevation) - ); - const { animation, dark, mode, roundness } = theme; - - const prevDarkRef = React.useRef(dark); - React.useEffect(() => { - prevDarkRef.current = dark; - }); + const { animation, roundness } = theme; - const prevDark = prevDarkRef.current; - const isAdaptiveMode = mode === 'adaptive'; const animationDuration = 150 * animation.scale; - React.useEffect(() => { - /** - * Resets animations values if updating to dark adaptive mode, - * otherwise, any card that is in the middle of animation while - * toggling the theme will stay at that animated value until - * the next press-in - */ - if (dark && isAdaptiveMode && !prevDark) { - elevation.setValue(cardElevation); - elevationDarkAdaptive.setValue(cardElevation); - } - }, [ - prevDark, - dark, - isAdaptiveMode, - cardElevation, - elevation, - elevationDarkAdaptive, - ]); - const runElevationAnimation = (pressType: HandlePressType) => { if (isMode('contained')) { return; } const isPressTypeIn = pressType === 'in'; - if (dark && isAdaptiveMode) { - Animated.timing(elevationDarkAdaptive, { - toValue: isPressTypeIn ? 2 : cardElevation, - duration: animationDuration, - useNativeDriver: false, - }).start(); - } else { - Animated.timing(elevation, { - toValue: isPressTypeIn ? 2 : cardElevation, - duration: animationDuration, - useNativeDriver: false, - }).start(); - } + Animated.timing(elevation, { + toValue: isPressTypeIn ? 2 : cardElevation, + duration: animationDuration, + useNativeDriver: false, + }).start(); }; const handlePressIn = useLatestCallback((e: GestureResponderEvent) => { @@ -249,8 +208,7 @@ const Card = ( ? (child.type as any).displayName : null ); - const computedElevation = - dark && isAdaptiveMode ? elevationDarkAdaptive : elevation; + const computedElevation = elevation; const { backgroundColor, borderColor: themedBorderColor } = getCardColors({ theme, diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx index c78a550a9f..3f9838eb0c 100644 --- a/src/components/FAB/FAB.tsx +++ b/src/components/FAB/FAB.tsx @@ -68,12 +68,6 @@ export type Props = $Omit<$RemoveChildren, 'mode'> & { * Whether an icon change is animated. */ animated?: boolean; - /** - * @deprecated Deprecated in v.5x - use prop size="small". - * - * Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified. - */ - small?: boolean; /** * Custom color for the icon and label of the `FAB`. */ diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx index a9f06c7a8e..8329c4e61a 100644 --- a/src/components/__tests__/TextInput.test.tsx +++ b/src/components/__tests__/TextInput.test.tsx @@ -4,8 +4,9 @@ import { I18nManager, Platform, StyleSheet, Text, View } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; -import { DefaultTheme, getTheme, ThemeProvider } from '../../core/theming'; +import { getTheme, ThemeProvider } from '../../core/theming'; import { red500 } from '../../theme/colors'; +import { LightTheme as DefaultTheme } from '../../theme/schemes/LightTheme'; import { tokens } from '../../theme/tokens'; import { getFlatInputColors, diff --git a/src/deprecated.ts b/src/deprecated.ts deleted file mode 100644 index c6f361fd90..0000000000 --- a/src/deprecated.ts +++ /dev/null @@ -1,58 +0,0 @@ -/** - * Compatibility aliases for v5 API names that were renamed in v6. - * - * This file is the single home for every `@deprecated` re-export so that, when - * the time comes to remove them, deletion is a single `rm src/deprecated.ts` - * (plus removing the corresponding re-export block from `src/index.tsx`). - * - * Do not add anything here that isn't a deprecated alias. - */ - -import { useTheme } from './core/theming'; -import { DarkTheme } from './theme/schemes/DarkTheme'; -import { LightTheme } from './theme/schemes/LightTheme'; -import { Palette } from './theme/tokens'; -import { TypescaleKey } from './types'; -import type { Theme, Elevation } from './types'; - -/** - * @deprecated Use `LightTheme` instead. Will be removed in a future version. - */ -export const MD3LightTheme = LightTheme; - -/** - * @deprecated Use `DarkTheme` instead. Will be removed in a future version. - */ -export const MD3DarkTheme = DarkTheme; - -/** - * @deprecated Use `Palette` instead. Will be removed in a future version. - */ -export const MD3Colors = Palette; - -/** - * @deprecated Use `TypescaleKey` instead. Will be removed in a future version. - */ -export const MD3TypescaleKey = TypescaleKey; -// eslint-disable-next-line no-redeclare -export type MD3TypescaleKey = TypescaleKey; - -/** - * @deprecated Use `Theme` instead. Will be removed in a future version. - */ -export type MD3Theme = Theme; - -/** - * @deprecated Use `Elevation` instead. Will be removed in a future version. - */ -export type MD3Elevation = Elevation; - -/** - * @deprecated Use `LightTheme` instead. Will be removed in a future version. - */ -export const DefaultTheme = LightTheme; - -/** - * @deprecated Use `useTheme` instead. Will be removed in a future version. - */ -export { useTheme as useAppTheme }; diff --git a/src/index.tsx b/src/index.tsx index e652950d21..34378bac69 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -146,27 +146,4 @@ export type { Props as TextProps } from './components/Typography/Text'; export type { Props as SegmentedButtonsProps } from './components/SegmentedButtons/SegmentedButtons'; export type { Props as ListImageProps } from './components/List/ListImage'; export type { Props as TooltipProps } from './components/Tooltip/Tooltip'; -export type { - MaterialBottomTabNavigationEventMap, - MaterialBottomTabNavigationOptions, - MaterialBottomTabNavigationProp, - MaterialBottomTabScreenProps, -} from './react-navigation'; - -export { - TypescaleKey, - type Theme, - type ThemeBase, - type Elevation, -} from './types'; - -export { - MD3LightTheme, - MD3DarkTheme, - MD3Colors, - MD3TypescaleKey, - type MD3Theme, - type MD3Elevation, - DefaultTheme, - useAppTheme, -} from './deprecated'; +export { TypescaleKey, type Theme, type Elevation } from './types'; diff --git a/src/react-navigation/__tests__/index.test.tsx b/src/react-navigation/__tests__/index.test.tsx deleted file mode 100644 index a04495639d..0000000000 --- a/src/react-navigation/__tests__/index.test.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import { Button, Text, View } from 'react-native'; - -import { NavigationContainer, ParamListBase } from '@react-navigation/native'; -import { fireEvent, render } from '@testing-library/react-native'; - -import PaperProvider from '../../core/PaperProvider'; -import { - createMaterialBottomTabNavigator, - MaterialBottomTabScreenProps, -} from '../index'; - -it('renders a material bottom tab navigator with screens', async () => { - const Test = ({ - route, - navigation, - }: MaterialBottomTabScreenProps) => ( - - Screen {route.name} -