diff --git a/docs/docs/guides/02-theming.mdx b/docs/docs/guides/02-theming.mdx index 76869182ae..d89bc7fd05 100644 --- a/docs/docs/guides/02-theming.mdx +++ b/docs/docs/guides/02-theming.mdx @@ -227,7 +227,7 @@ export default function Main() { } ``` -### Sync dynamic colors with system colors +### TODO: update section / Sync dynamic colors with system colors Using [`pchmn/expo-material3-theme`](https://github.com/pchmn/expo-material3-theme) library you can easily access the Material 3 system colors from Android 12+ devices and seamlessly integrate them into your dynamic theme. Any changes made by the user to the system colors will be automatically reflected in the theme. diff --git a/docs/docs/guides/06-recommended-libraries.md b/docs/docs/guides/06-recommended-libraries.md index e70157ca1d..7be319cedf 100644 --- a/docs/docs/guides/06-recommended-libraries.md +++ b/docs/docs/guides/06-recommended-libraries.md @@ -33,8 +33,4 @@ Material Design themed [date picker](https://material.io/components/date-pickers ## Time Picker [web-ridge/react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates) -Material Design themed [time picker](https://material.io/components/time-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout) - -## System Colors -[pchmn/expo-material3-theme](https://github.com/pchmn/expo-material3-theme) -Retrieve Material 3 system colors from Android 12+ devices \ No newline at end of file +Material Design themed [time picker](https://material.io/components/time-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout) diff --git a/docs/src/components/BannerExample.tsx b/docs/src/components/BannerExample.tsx index 7f4acdc7bc..b1c27a063c 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 as DarkTheme, + LightTheme as DefaultTheme, ProgressBar, PaperProvider, RadioButton, diff --git a/docs/src/components/GetStartedButtons.tsx b/docs/src/components/GetStartedButtons.tsx index 4debe5b5ac..32ce2b15fd 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 as DarkTheme, + LightTheme as DefaultTheme, PaperProvider, } from 'react-native-paper'; diff --git a/example/package.json b/example/package.json index 667c56cb19..3ae36fb1ec 100644 --- a/example/package.json +++ b/example/package.json @@ -16,7 +16,6 @@ "dependencies": { "@expo/vector-icons": "^15.0.2", "@expo/webpack-config": "~19.0.1", - "@pchmn/expo-material3-theme": "^1.3.2", "@react-native-async-storage/async-storage": "2.2.0", "@react-native-masked-view/masked-view": "0.3.2", "@react-navigation/bottom-tabs": "^7.3.10", diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx index 2d3ca6c202..39cfe6402d 100644 --- a/example/src/DrawerItems.tsx +++ b/example/src/DrawerItems.tsx @@ -9,15 +9,14 @@ import { Button, Dialog, Drawer, - MD2Colors, - MD3Colors, + Colors, Switch, Text, TouchableRipple, Portal, } from 'react-native-paper'; -import { deviceColorsSupported, isWeb } from '../utils'; +import { dynamicThemeSupported, isWeb } from '../utils'; import { useExampleTheme } from './hooks/useExampleTheme'; import { PreferencesContext } from './PreferencesContext'; @@ -96,7 +95,7 @@ function DrawerItems() { const _setDrawerItem = (index: number) => setDrawerItemIndex(index); - const { isV3, colors } = useExampleTheme(); + const { colors } = useExampleTheme(); const isIOS = Platform.OS === 'ios'; const expoGoExecution = Constants.executionEnvironment === ExecutionEnvironment.StoreClient; @@ -104,10 +103,9 @@ function DrawerItems() { if (!preferences) throw new Error('PreferencesContext not provided'); const { - toggleShouldUseDeviceColors, + toggleShouldUseDynamicTheme, toggleTheme, toggleRtl: toggleRTL, - toggleThemeVersion, toggleCollapsed, toggleCustomFont, toggleRippleEffect, @@ -116,7 +114,7 @@ function DrawerItems() { collapsed, rtl: isRTL, theme: { dark: isDarkTheme }, - shouldUseDeviceColors, + shouldUseDynamicTheme, } = preferences; const _handleToggleRTL = () => { @@ -137,14 +135,10 @@ function DrawerItems() { }; const coloredLabelTheme = { - colors: isV3 - ? { - secondaryContainer: MD3Colors.tertiary80, - onSecondaryContainer: MD3Colors.tertiary20, - } - : { - primary: MD2Colors.tealA200, - }, + colors: { + secondaryContainer: Colors.tertiary80, + onSecondaryContainer: Colors.tertiary20, + }, }; return ( @@ -157,7 +151,7 @@ function DrawerItems() { }, ]} > - {isV3 && collapsed && ( + {collapsed && ( {DrawerCollapsedItemsData.map((props, index) => ( - {deviceColorsSupported && isV3 ? ( - - - Use device colors * + {dynamicThemeSupported ? ( + + + Use Dynamic Theme - + ) : null} - + Dark Theme @@ -208,7 +202,7 @@ function DrawerItems() { {!isWeb && ( - + RTL @@ -217,41 +211,28 @@ function DrawerItems() { )} - - - MD 2 + + + Collapsed drawer - + - {isV3 && ( - - - Collapsed drawer * - - - - - - )} - - {isV3 && ( - - - Custom font * - - - + + + Custom font + + - - )} + + - + - {isIOS ? 'Highlight' : 'Ripple'} effect * + {isIOS ? 'Highlight' : 'Ripple'} effect @@ -259,11 +240,6 @@ function DrawerItems() { - {isV3 && !collapsed && ( - - * - available only for MD3 - - )} React Native Paper Version{' '} {require('react-native-paper/package.json').version} @@ -301,11 +277,8 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', alignItems: 'center', paddingVertical: 12, - paddingHorizontal: 16, - }, - v3Preference: { - height: 56, paddingHorizontal: 28, + height: 56, }, badge: { alignSelf: 'center', diff --git a/example/src/ExampleList.tsx b/example/src/ExampleList.tsx index 016f085caa..af6ed7534c 100644 --- a/example/src/ExampleList.tsx +++ b/example/src/ExampleList.tsx @@ -132,16 +132,12 @@ const data = Object.keys(mainExamples).map( export default function ExampleList({ navigation }: Props) { const keyExtractor = (item: { id: string }) => item.id; - const { colors, isV3 } = useExampleTheme(); + const { colors } = useExampleTheme(); const safeArea = useSafeAreaInsets(); const renderItem = ({ item }: { item: Item }) => { const { data, id } = item; - if (!isV3 && data.title === mainExamples.themingWithReactNavigation.title) { - return null; - } - return ( { const [animating, setAnimating] = React.useState(true); - const { isV3 } = useExampleTheme(); return ( @@ -49,7 +41,7 @@ const ActivityIndicatorExample = () => { diff --git a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx index 4bffa05322..706b2f59be 100644 --- a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx +++ b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx @@ -3,13 +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, - MD2Colors, - MD3Colors, - Paragraph, - Text, -} from 'react-native-paper'; +import { Avatar, Colors, Text } from 'react-native-paper'; import CustomFAB from './CustomFAB'; import CustomFABControls, { @@ -32,7 +26,7 @@ type Item = { }; const AnimatedFABExample = () => { - const { colors, isV3 } = useExampleTheme(); + const { colors } = useExampleTheme(); const isIOS = Platform.OS === 'ios'; @@ -47,64 +41,54 @@ const AnimatedFABExample = () => { const renderItem = React.useCallback( ({ item }: { item: Item }) => { - const TextComponent = isV3 ? Text : Paragraph; - return ( - {item.sender} - - + {item.date} - + - {item.header} - - + {item.message} - + setVisible(!visible)} style={styles.icon} @@ -114,7 +98,7 @@ const AnimatedFABExample = () => { ); }, - [visible, isV3] + [visible] ); const onScroll = ({ diff --git a/example/src/Examples/AnimatedFABExample/CustomFAB.tsx b/example/src/Examples/AnimatedFABExample/CustomFAB.tsx index 3495b00a86..9130debf33 100644 --- a/example/src/Examples/AnimatedFABExample/CustomFAB.tsx +++ b/example/src/Examples/AnimatedFABExample/CustomFAB.tsx @@ -3,8 +3,6 @@ import { Animated, Platform, StyleSheet, ViewStyle } from 'react-native'; import { AnimatedFAB } from 'react-native-paper'; -import { useExampleTheme } from '../../hooks/useExampleTheme'; - type CustomFABProps = { animatedValue: Animated.Value; visible: boolean; @@ -25,7 +23,6 @@ const CustomFAB = ({ iconMode, }: CustomFABProps) => { const [isExtended, setIsExtended] = React.useState(true); - const { isV3 } = useExampleTheme(); const isIOS = Platform.OS === 'ios'; @@ -44,7 +41,7 @@ const CustomFAB = ({ icon={'plus'} label={label} extended={isExtended} - uppercase={!isV3} + uppercase={false} onPress={() => console.log('Pressed')} visible={visible} animateFrom={animateFrom} diff --git a/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx b/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx index a612a4234f..b3934c4504 100644 --- a/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx +++ b/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx @@ -6,7 +6,7 @@ import type { AnimatedFABAnimateFrom, AnimatedFABIconMode, } from 'react-native-paper'; -import { Paragraph, RadioButton, Text } from 'react-native-paper'; +import { RadioButton, Text } from 'react-native-paper'; import { useExampleTheme } from '../../hooks/useExampleTheme'; @@ -40,19 +40,15 @@ const CustomControl = ({ value, onChange, }: CustomControlProps) => { - const { isV3 } = useExampleTheme(); - const _renderItem = React.useCallback( ({ item }: ListRenderItemInfo<(typeof options)[number]>) => { - const TextComponent = isV3 ? Text : Paragraph; - return ( onChange(item)} style={styles.controlItem} > - {item} + {item} ); }, - [value, onChange, isV3] + [value, onChange] ); const _keyExtractor = React.useCallback( (item: (typeof options)[number]) => item, [] ); - const TextComponent = isV3 ? Text : Paragraph; return ( - {name} + {name} { const [showLeftIcon, setShowLeftIcon] = React.useState(true); - const [showSubtitle, setShowSubtitle] = React.useState(true); + const [showSubtitle] = React.useState(true); 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); @@ -41,7 +39,7 @@ const AppbarExample = ({ navigation }: Props) => { const theme = useExampleTheme(); const { bottom, left, right } = useSafeAreaInsets(); - const height = theme.isV3 ? 80 : 56; + const height = 80; const isCenterAlignedMode = appbarMode === 'center-aligned'; @@ -50,9 +48,6 @@ const AppbarExample = ({ navigation }: Props) => { header: () => ( @@ -85,28 +80,22 @@ const AppbarExample = ({ navigation }: Props) => { showSearchIcon, showMoreIcon, showCustomColor, - showExactTheme, appbarMode, showCalendarIcon, isCenterAlignedMode, showElevated, ]); - const TextComponent = theme.isV3 ? Text : Paragraph; + const TextComponent = Text; const renderFAB = () => { return ( {}} - style={[ - styles.fab, - theme.isV3 - ? { top: (height - MEDIUM_FAB_HEIGHT) / 2 } - : { bottom: height / 2 + bottom }, - ]} + style={[styles.fab, { top: (height - MEDIUM_FAB_HEIGHT) / 2 }]} /> ); }; @@ -117,12 +106,6 @@ const AppbarExample = ({ navigation }: Props) => { Left icon - {!theme.isV3 && ( - - Subtitle - - - )} Search icon @@ -131,32 +114,22 @@ const AppbarExample = ({ navigation }: Props) => { More icon - {theme.isV3 && ( - - Calendar icon - - - )} + + Calendar icon + + Custom Color - {!theme.isV3 && ( - - Exact Dark Theme - - - )} - {theme.isV3 && ( - - Elevated - - - )} + + Elevated + + ); @@ -166,40 +139,34 @@ const AppbarExample = ({ navigation }: Props) => { style={{ marginBottom: height + bottom }} contentContainerStyle={styles.contentContainer} > - {theme.isV3 ? ( - - {renderDefaultOptions()} - - ) : ( - renderDefaultOptions() - )} - {theme.isV3 && ( - - - setAppbarMode(value as AppbarModes) - } - > - - Small (default) - - - - Medium - - - - Large - - - - Center-aligned - - - - - )} + + {renderDefaultOptions()} + + + + setAppbarMode(value as AppbarModes) + } + > + + Small (default) + + + + Medium + + + + Large + + + + Center-aligned + + + + { { height: height + bottom, }, - theme.isV3 && { + { backgroundColor: theme.colors.elevation.level2, }, ]} safeAreaInsets={{ bottom, left, right }} - theme={{ mode: showExactTheme ? 'exact' : 'adaptive' }} > {}} /> {}} /> {}} /> {}} /> - {theme.isV3 && renderFAB()} + {renderFAB()} - {!theme.isV3 && renderFAB()} setShowSnackbar(false)} diff --git a/example/src/Examples/AvatarExample.tsx b/example/src/Examples/AvatarExample.tsx index b77da80b09..e98ff023dd 100644 --- a/example/src/Examples/AvatarExample.tsx +++ b/example/src/Examples/AvatarExample.tsx @@ -1,13 +1,11 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { Avatar, List, MD2Colors, MD3Colors } from 'react-native-paper'; +import { Avatar, List, Colors } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const AvatarExample = () => { - const { isV3 } = useExampleTheme(); return ( @@ -16,11 +14,11 @@ const AvatarExample = () => { style={[ styles.avatar, { - backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500, + backgroundColor: Colors.error70, }, ]} label="XD" - color={isV3 ? MD3Colors.primary0 : MD2Colors.black} + color={Colors.primary0} /> @@ -32,11 +30,11 @@ const AvatarExample = () => { style={[ styles.avatar, { - backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500, + backgroundColor: Colors.error70, }, ]} icon="folder" - color={isV3 ? MD3Colors.primary0 : MD2Colors.black} + color={Colors.primary0} /> diff --git a/example/src/Examples/BadgeExample.tsx b/example/src/Examples/BadgeExample.tsx index 17f0e1b160..b94c8e72b1 100644 --- a/example/src/Examples/BadgeExample.tsx +++ b/example/src/Examples/BadgeExample.tsx @@ -5,18 +5,15 @@ import { Badge, IconButton, List, - MD2Colors, - MD3Colors, + Colors, Text, Switch, } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const BadgeExample = () => { const [visible, setVisible] = React.useState(true); - const { isV3 } = useExampleTheme(); return ( @@ -44,9 +41,7 @@ const BadgeExample = () => { style={[ styles.badge, { - backgroundColor: isV3 - ? MD3Colors.primary80 - : MD2Colors.blue500, + backgroundColor: Colors.primary80, }, ]} > @@ -59,11 +54,11 @@ const BadgeExample = () => { - + - + diff --git a/example/src/Examples/BannerExample.tsx b/example/src/Examples/BannerExample.tsx index 0e856e9699..086d7349ba 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, MD2Colors, MD3Colors } from 'react-native-paper'; +import { Banner, FAB, Colors } from 'react-native-paper'; import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; @@ -29,25 +29,16 @@ const BannerExample = () => { setHeight(layoutHeight); }; - const customTheme = !defaultTheme.isV3 - ? { - ...defaultTheme, - colors: { - text: MD2Colors.white, - surface: MD2Colors.blue200, - primary: MD2Colors.purple900, - }, - } - : { - ...defaultTheme, - colors: { - onSurface: MD3Colors.tertiary100, - elevation: { - level1: MD3Colors.tertiary50, - }, - primary: MD3Colors.tertiary10, - }, - }; + const customTheme = { + ...defaultTheme, + colors: { + onSurface: Colors.tertiary100, + elevation: { + level1: Colors.tertiary50, + }, + primary: Colors.tertiary10, + }, + }; return ( <> diff --git a/example/src/Examples/BottomNavigationExample.tsx b/example/src/Examples/BottomNavigationExample.tsx index 6ed5d7add5..c30934c9f7 100644 --- a/example/src/Examples/BottomNavigationExample.tsx +++ b/example/src/Examples/BottomNavigationExample.tsx @@ -17,7 +17,6 @@ import { } from 'react-native-paper'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; type Route = { route: { key: string } }; @@ -49,7 +48,6 @@ const PhotoGallery = ({ route }: Route) => { }; const BottomNavigationExample = ({ navigation }: Props) => { - const { isV3 } = useExampleTheme(); const insets = useSafeAreaInsets(); const [index, setIndex] = React.useState(0); const [menuVisible, setMenuVisible] = React.useState(false); @@ -63,34 +61,25 @@ const BottomNavigationExample = ({ navigation }: Props) => { key: 'album', title: 'Album', focusedIcon: 'image-album', - ...(!isV3 && { color: '#6200ee' }), }, { key: 'library', title: 'Library', focusedIcon: 'inbox', badge: true, - ...(isV3 - ? { unfocusedIcon: 'inbox-outline' } - : { - color: '#2962ff', - }), + unfocusedIcon: 'inbox-outline', }, { key: 'favorites', title: 'Favorites', focusedIcon: 'heart', - ...(isV3 - ? { unfocusedIcon: 'heart-outline' } - : { - color: '#00796b', - }), + unfocusedIcon: 'heart-outline', }, { key: 'purchased', title: 'Purchased', focusedIcon: 'shopping', - ...(isV3 ? { unfocusedIcon: 'shopping-outline' } : { color: '#c51162' }), + unfocusedIcon: 'shopping-outline', }, ]); @@ -112,7 +101,6 @@ const BottomNavigationExample = ({ navigation }: Props) => { setMenuVisible(true)} - {...(!isV3 && { color: 'white' })} /> } > diff --git a/example/src/Examples/ButtonExample.tsx b/example/src/Examples/ButtonExample.tsx index 7ec58f90f4..3722dc2ecf 100644 --- a/example/src/Examples/ButtonExample.tsx +++ b/example/src/Examples/ButtonExample.tsx @@ -9,11 +9,11 @@ import ScreenWrapper from '../ScreenWrapper'; const ButtonExample = () => { const theme = useExampleTheme(); - const color = theme.isV3 ? theme.colors.inversePrimary : theme.colors.accent; + const color = theme.colors.inversePrimary; return ( - + - {theme.isV3 && ( - - - - - - - - - - - )} - + + + + + + + + + + + - + - {theme.isV3 && ( - - - - - - - - - - - )} + + + + + + + + + + @@ -371,10 +367,8 @@ const styles = StyleSheet.create({ flexReverse: { flexDirection: 'row-reverse', }, - md3FontStyles: { - lineHeight: 32, - }, fontStyles: { + lineHeight: 32, fontWeight: '800', fontSize: 24, }, diff --git a/example/src/Examples/CardExample.tsx b/example/src/Examples/CardExample.tsx index 5b12fc08bb..04719094f3 100644 --- a/example/src/Examples/CardExample.tsx +++ b/example/src/Examples/CardExample.tsx @@ -7,7 +7,6 @@ import { Card, Chip, IconButton, - Paragraph, Text, } from 'react-native-paper'; @@ -19,16 +18,14 @@ import ScreenWrapper from '../ScreenWrapper'; type Mode = 'elevated' | 'outlined' | 'contained'; const CardExample = () => { - const { colors, isV3 } = useExampleTheme(); + const { colors } = useExampleTheme(); const [selectedMode, setSelectedMode] = React.useState('elevated' as Mode); const [isSelected, setIsSelected] = React.useState(false); const preferences = React.useContext(PreferencesContext); - const modes = isV3 - ? ['elevated', 'outlined', 'contained'] - : ['elevated', 'outlined']; + const modes = ['elevated', 'outlined', 'contained']; - const TextComponent = isV3 ? Text : Paragraph; + const TextComponent = Text; return ( @@ -63,22 +60,20 @@ const CardExample = () => { - {isV3 && ( - - - - - - This is a card using title and subtitle with specified variants. - - - - )} + + + + + + This is a card using title and subtitle with specified variants. + + + diff --git a/example/src/Examples/CheckboxExample.tsx b/example/src/Examples/CheckboxExample.tsx index c8ce8c23a7..a6ce3be3bf 100644 --- a/example/src/Examples/CheckboxExample.tsx +++ b/example/src/Examples/CheckboxExample.tsx @@ -1,16 +1,8 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { - Checkbox, - MD2Colors, - MD3Colors, - Paragraph, - Text, - TouchableRipple, -} from 'react-native-paper'; +import { Checkbox, Colors, Text, TouchableRipple } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const CheckboxExample = () => { @@ -18,8 +10,7 @@ const CheckboxExample = () => { const [checkedCustom, setCheckedCustom] = React.useState(true); const [indeterminate, setIndeterminate] = React.useState(true); - const { isV3 } = useExampleTheme(); - const TextComponent = isV3 ? Text : Paragraph; + const TextComponent = Text; return ( @@ -37,7 +28,7 @@ const CheckboxExample = () => { Custom diff --git a/example/src/Examples/CheckboxItemExample.tsx b/example/src/Examples/CheckboxItemExample.tsx index 514272788c..acafd709b7 100644 --- a/example/src/Examples/CheckboxItemExample.tsx +++ b/example/src/Examples/CheckboxItemExample.tsx @@ -3,7 +3,6 @@ import { StyleSheet } from 'react-native'; import { Checkbox } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const CheckboxExample = () => { @@ -15,8 +14,6 @@ const CheckboxExample = () => { const [checkedDisabled, setCheckedDisabled] = React.useState(true); const [checkedLabelVariant, setCheckedLabelVariant] = React.useState(true); - const { isV3 } = useExampleTheme(); - return ( { onPress={() => setCheckedDisabled(!checkedDisabled)} disabled /> - {isV3 && ( - setCheckedLabelVariant(!checkedLabelVariant)} - /> - )} + setCheckedLabelVariant(!checkedLabelVariant)} + /> ); }; diff --git a/example/src/Examples/ChipExample.tsx b/example/src/Examples/ChipExample.tsx index 20f0393153..edc2ebefa1 100644 --- a/example/src/Examples/ChipExample.tsx +++ b/example/src/Examples/ChipExample.tsx @@ -2,16 +2,8 @@ import * as React from 'react'; import { Image, StyleSheet, View } from 'react-native'; import color from 'color'; -import { - Chip, - List, - MD2Colors, - MD3Colors, - Snackbar, - Text, -} from 'react-native-paper'; +import { Chip, List, Colors, Snackbar, Text } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const ChipExample = () => { @@ -19,8 +11,7 @@ const ChipExample = () => { visible: false, text: '', }); - const { isV3 } = useExampleTheme(); - const customColor = isV3 ? MD3Colors.error50 : MD2Colors.purple900; + const customColor = Colors.error50; return ( <> @@ -30,24 +21,20 @@ const ChipExample = () => { {}} style={styles.chip}> Simple - {isV3 && ( - <> - {}} - style={styles.chip} - > - With selected overlay - - {}} style={styles.chip}> - Elevated - - {}}> - Compact chip - - - )} + {}} + style={styles.chip} + > + With selected overlay + + {}} style={styles.chip}> + Elevated + + {}}> + Compact chip + {}} onClose={() => @@ -137,35 +124,31 @@ const ChipExample = () => { {}} style={styles.chip}> Simple - {isV3 && ( - <> - {}} - style={styles.chip} - > - With selected overlay - - {}} - style={styles.chip} - > - Elevated - - {}} - style={styles.chip} - > - Compact chip - - - )} + {}} + style={styles.chip} + > + With selected overlay + + {}} + style={styles.chip} + > + Elevated + + {}} + style={styles.chip} + > + Compact chip + {}} @@ -251,38 +234,34 @@ const ChipExample = () => { - {isV3 && ( - <> - {}} - compact - avatar={ - - } - style={[styles.chip, styles.customBorderRadius]} - > - Compact with custom border radius - - {}} - compact - avatar={ - - } - style={[styles.chip, styles.customBorderRadius]} - > - Compact with custom border radius - - - )} + {}} + compact + avatar={ + + } + style={[styles.chip, styles.customBorderRadius]} + > + Compact with custom border radius + + {}} + compact + avatar={ + + } + style={[styles.chip, styles.customBorderRadius]} + > + Compact with custom border radius + {}} diff --git a/example/src/Examples/DialogExample.tsx b/example/src/Examples/DialogExample.tsx index 4a9de665d7..d926ae6616 100644 --- a/example/src/Examples/DialogExample.tsx +++ b/example/src/Examples/DialogExample.tsx @@ -12,7 +12,6 @@ import { DialogWithRadioBtns, UndismissableDialog, } from './Dialogs'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; type ButtonVisibility = { @@ -21,7 +20,6 @@ type ButtonVisibility = { const DialogExample = () => { const [visible, setVisible] = React.useState({}); - const { isV3 } = useExampleTheme(); const _toggleDialog = (name: string) => () => setVisible({ ...visible, [name]: !visible[name] }); @@ -65,15 +63,13 @@ const DialogExample = () => { > Custom colors - {isV3 && ( - - )} + {Platform.OS === 'android' && ( diff --git a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx index 32512dc91d..3124126122 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, MD2Colors } from 'react-native-paper'; +import { Button, Portal, Dialog } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -26,9 +26,7 @@ const DialogWithDismissableBackButton = ({ - + diff --git a/example/src/Examples/Dialogs/DialogWithIcon.tsx b/example/src/Examples/Dialogs/DialogWithIcon.tsx index d939d4e401..3a0c5f7cfe 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, Colors } 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 5ef9e7e7f2..158e1b6577 100644 --- a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx +++ b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native'; -import { Dialog, MD2Colors, MD3Colors, Portal } from 'react-native-paper'; +import { Dialog, Colors, Portal } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; -import { useExampleTheme } from '../../hooks/useExampleTheme'; const isIOS = Platform.OS === 'ios'; @@ -15,7 +14,6 @@ const DialogWithLoadingIndicator = ({ visible: boolean; close: () => void; }) => { - const { isV3 } = useExampleTheme(); return ( @@ -23,7 +21,7 @@ const DialogWithLoadingIndicator = ({ diff --git a/example/src/Examples/Dialogs/UndismissableDialog.tsx b/example/src/Examples/Dialogs/UndismissableDialog.tsx index 2af40f4e97..2705211201 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, MD2Colors } from 'react-native-paper'; +import { Button, Portal, Dialog } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -18,9 +18,7 @@ const UndismissableDialog = ({ This is an undismissable dialog!! - + diff --git a/example/src/Examples/FABExample.tsx b/example/src/Examples/FABExample.tsx index 0cff916980..1ac542b371 100644 --- a/example/src/Examples/FABExample.tsx +++ b/example/src/Examples/FABExample.tsx @@ -4,7 +4,6 @@ import { Alert, StyleSheet, View } from 'react-native'; import { FAB, Portal, Text } from 'react-native-paper'; import { isWeb } from '../../utils'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; type FABVariant = 'primary' | 'secondary' | 'tertiary' | 'surface'; @@ -16,7 +15,6 @@ const FABExample = () => { const [toggleStackOnLongPress, setToggleStackOnLongPress] = React.useState(false); const [open, setOpen] = React.useState(false); - const { isV3 } = useExampleTheme(); const variants = ['primary', 'secondary', 'tertiary', 'surface']; const sizes = ['small', 'medium', 'large']; @@ -32,69 +30,49 @@ const FABExample = () => { onPress={() => setVisible(!visible)} /> - {isV3 && ( - <> - - {variants.map((variant) => ( - - {}} - visible={visible} - variant={variant as FABVariant} - /> - {visible && {variant}} - - ))} - - - {sizes.map((size) => ( - - {}} - visible={visible} - size={size as FABSize} - /> - {visible && {size}} - - ))} - - - {modes.map((mode) => ( - - {}} - visible={visible} - mode={mode as FABMode} - /> - {visible && {mode}} - - ))} + + {variants.map((variant) => ( + + {}} + visible={visible} + variant={variant as FABVariant} + /> + {visible && {variant}} - - )} - - {!isV3 && ( - <> + ))} + + + {sizes.map((size) => ( + {}} visible={visible} + size={size as FABSize} /> + {visible && {size}} + + ))} + + + {modes.map((mode) => ( + {}} visible={visible} + mode={mode as FABMode} /> - - )} + {visible && {mode}} + + ))} + + { onPress={() => {}} visible={visible} /> - {}} - visible={visible} - disabled - /> { icon: 'bell', label: 'Remind', onPress: () => {}, - size: isV3 ? 'small' : 'medium', + size: 'small', }, { icon: toggleStackOnLongPress diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx index 6342b1e144..68e4135bbe 100644 --- a/example/src/Examples/IconButtonExample.tsx +++ b/example/src/Examples/IconButtonExample.tsx @@ -1,38 +1,13 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { IconButton, List, MD2Colors, MD3Colors } from 'react-native-paper'; +import { IconButton, List, Colors } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const ButtonExample = () => { - const { isV3 } = useExampleTheme(); - if (!isV3) { - return ( - - {}} /> - {}} - /> - {}} loading /> - {}} /> - {}} - style={{ backgroundColor: MD2Colors.lightGreen200 }} - /> - {}} /> - - ); - } - return ( - + {}} /> @@ -146,7 +121,7 @@ const ButtonExample = () => { {}} /> { mode="contained" style={styles.square} size={24} - iconColor={MD3Colors.tertiary50} + iconColor={Colors.tertiary50} onPress={() => {}} /> { mode="contained" style={styles.slightlyRounded} size={24} - contentStyle={{ padding: 8 }} - iconColor={MD3Colors.tertiary50} + contentStyle={styles.eyePadding} + iconColor={Colors.tertiary50} onPress={() => {}} /> { mode="contained-tonal" style={styles.differentBorderRadius} size={24} - iconColor={MD3Colors.tertiary50} + iconColor={Colors.tertiary50} onPress={() => {}} /> { mode="outlined" style={styles.differentBorderRadius} size={24} - iconColor={MD3Colors.tertiary50} + iconColor={Colors.tertiary50} onPress={() => {}} /> {}} /> @@ -187,7 +162,7 @@ const ButtonExample = () => { icon="lock" size={36} onPress={() => {}} - containerColor={MD3Colors.tertiary60} + containerColor={Colors.tertiary60} /> {}} /> {}} loading /> @@ -200,11 +175,7 @@ const ButtonExample = () => { ButtonExample.title = 'Icon Button'; const styles = StyleSheet.create({ - v2Container: { - flexDirection: 'row', - padding: 8, - }, - v3Container: { + container: { flexDirection: 'column', }, row: { @@ -225,6 +196,9 @@ const styles = StyleSheet.create({ borderBottomLeftRadius: 8, borderBottomRightRadius: 6, }, + eyePadding: { + padding: 8, + }, }); export default ButtonExample; diff --git a/example/src/Examples/ListSectionExample.tsx b/example/src/Examples/ListSectionExample.tsx index dd15ab29e2..79f4d7f624 100644 --- a/example/src/Examples/ListSectionExample.tsx +++ b/example/src/Examples/ListSectionExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, Image, View } from 'react-native'; -import { Caption, List, Text, Chip, Divider } from 'react-native-paper'; +import { List, Text, Chip, Divider } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; const ListSectionExample = () => { @@ -97,7 +97,7 @@ const ListSectionExample = () => { > List Item - Yesterday + Yesterday )} description={({ diff --git a/example/src/Examples/MenuExample.tsx b/example/src/Examples/MenuExample.tsx index c1164d35b6..47734112e4 100644 --- a/example/src/Examples/MenuExample.tsx +++ b/example/src/Examples/MenuExample.tsx @@ -16,7 +16,6 @@ import { TouchableRipple, } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; type ContextualMenuCoord = { x: number; y: number }; @@ -35,7 +34,6 @@ const MenuExample = ({ navigation }: Props) => { const [visible, setVisible] = React.useState({}); const [contextualMenuCoord, setContextualMenuCoor] = React.useState({ x: 0, y: 0 }); - const { isV3 } = useExampleTheme(); const _toggleMenu = (name: string) => () => setVisible({ ...visible, [name]: !visible[name] }); @@ -66,16 +64,12 @@ const MenuExample = ({ navigation }: Props) => { visible={_getVisible('menu1')} onDismiss={_toggleMenu('menu1')} anchor={ - + } > {}} title="Undo" /> {}} title="Redo" /> - + {}} title="Cut" disabled /> {}} title="Copy" disabled /> {}} title="Paste" /> @@ -99,7 +93,7 @@ const MenuExample = ({ navigation }: Props) => { {}} title="Undo" /> {}} title="Redo" /> - + { onPress={() => {}} title="Paste" /> - {isV3 && ( - {}} - title="Share" - /> - )} + {}} + title="Share" + /> { > {}} title="Item 1" /> {}} title="Item 2" /> - + {}} title="Item 3" disabled /> @@ -198,7 +190,7 @@ const styles = StyleSheet.create({ alignCenter: { alignItems: 'center', }, - md3Divider: { + divider: { marginVertical: 8, }, bottomMenu: { width: '40%' }, diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx index 565147f4c6..911f469c93 100644 --- a/example/src/Examples/ProgressBarExample.tsx +++ b/example/src/Examples/ProgressBarExample.tsx @@ -4,8 +4,7 @@ import { View, StyleSheet, Animated } from 'react-native'; import { Button, ProgressBar, - MD2Colors, - MD3Colors, + Colors, ProgressBarProps, Text, } from 'react-native-paper'; @@ -29,7 +28,6 @@ const ProgressBarExample = () => { const [visible, setVisible] = React.useState(true); const [progress, setProgress] = React.useState(0.3); const theme = useExampleTheme(); - const { isV3 } = theme; const { current: progressBarValue } = React.useRef(new Animated.Value(0)); const runCustomAnimation = () => { @@ -64,7 +62,7 @@ const ProgressBarExample = () => { @@ -75,9 +73,9 @@ const ProgressBarExample = () => { diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx index 88bf9ebfb7..dc6b6d1845 100644 --- a/example/src/Examples/RadioButtonExample.tsx +++ b/example/src/Examples/RadioButtonExample.tsx @@ -1,24 +1,15 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { - MD2Colors, - MD3Colors, - Paragraph, - RadioButton, - Text, - TouchableRipple, -} from 'react-native-paper'; +import { Colors, RadioButton, Text, TouchableRipple } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; type State = 'normal' | 'normal-ios' | 'normal-item' | 'custom'; const RadioButtonExample = () => { const [checked, setChecked] = React.useState('normal'); - const { isV3 } = useExampleTheme(); - const TextComponent = isV3 ? Text : Paragraph; + const TextComponent = Text; return ( @@ -50,7 +41,7 @@ const RadioButtonExample = () => { diff --git a/example/src/Examples/RadioButtonGroupExample.tsx b/example/src/Examples/RadioButtonGroupExample.tsx index 6d614911ce..be26c9258b 100644 --- a/example/src/Examples/RadioButtonGroupExample.tsx +++ b/example/src/Examples/RadioButtonGroupExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { List, Paragraph, RadioButton, Text } from 'react-native-paper'; +import { List, RadioButton, Text } from 'react-native-paper'; import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; @@ -10,8 +10,8 @@ const RadioButtonGroupExample = () => { const [value, setValue] = React.useState('first'); const [value2, setValue2] = React.useState('first'); - const { colors, isV3 } = useExampleTheme(); - const TextComponent = isV3 ? Text : Paragraph; + const { colors } = useExampleTheme(); + const TextComponent = Text; return ( diff --git a/example/src/Examples/RadioButtonItemExample.tsx b/example/src/Examples/RadioButtonItemExample.tsx index 38eff755a5..e640a1dd0a 100644 --- a/example/src/Examples/RadioButtonItemExample.tsx +++ b/example/src/Examples/RadioButtonItemExample.tsx @@ -3,7 +3,6 @@ import { StyleSheet } from 'react-native'; import { RadioButton } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const RadioButtonItemExample = () => { @@ -15,8 +14,6 @@ const RadioButtonItemExample = () => { const [checkedDisabled, setCheckedDisabled] = React.useState(true); const [checkedLabelVariant, setCheckedLabelVariant] = React.useState(true); - const { isV3 } = useExampleTheme(); - return ( { value="iOS" disabled /> - {isV3 && ( - setCheckedLabelVariant(!checkedLabelVariant)} - value="default" - /> - )} + setCheckedLabelVariant(!checkedLabelVariant)} + value="default" + /> ); }; diff --git a/example/src/Examples/SearchbarExample.tsx b/example/src/Examples/SearchbarExample.tsx index 51a8af3ed8..27e8adacc4 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, Colors, Searchbar, Snackbar, Avatar } from 'react-native-paper'; import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; @@ -34,12 +28,12 @@ const SearchExample = ({ navigation }: Props) => { clickableLoading: '', }); - const { isV3, colors } = useExampleTheme(); + const { colors } = useExampleTheme(); return ( <> - {!isV3 && ( + @@ -47,136 +41,122 @@ const SearchExample = ({ navigation }: Props) => { } value={searchQueries.searchBarMode} style={styles.searchbar} + mode="bar" /> - )} - {isV3 && ( - - - setSearchQuery({ ...searchQueries, searchBarMode: query }) - } - value={searchQueries.searchBarMode} - style={styles.searchbar} - mode="bar" - /> - - setSearchQuery({ ...searchQueries, traileringIcon: query }) - } - value={searchQueries.traileringIcon} - traileringIcon={'microphone'} - traileringIconColor={ - isVisible ? MD3Colors.error40 : colors.onSurfaceVariant - } - traileringIconAccessibilityLabel={'microphone button'} - onTraileringIconPress={() => setIsVisible(true)} - style={styles.searchbar} - mode="bar" - /> - - setSearchQuery({ - ...searchQueries, - traileringIconWithRightItem: query, - }) - } - value={searchQueries.traileringIconWithRightItem} - traileringIcon={'microphone'} - traileringIconColor={ - isVisible ? MD3Colors.error40 : colors.onSurfaceVariant - } - traileringIconAccessibilityLabel={'microphone button'} - onTraileringIconPress={() => setIsVisible(true)} - right={(props) => ( - - )} - style={styles.searchbar} - /> - - setSearchQuery({ - ...searchQueries, - rightItem: query, - }) - } - value={searchQueries.rightItem} - right={(props) => ( - - )} - style={styles.searchbar} - /> - - setSearchQuery({ - ...searchQueries, - loadingBarMode: query, - }) - } - value={searchQueries.loadingBarMode} - style={styles.searchbar} - mode="bar" - loading - traileringIcon={'microphone'} - /> - - )} - {isV3 && ( - - - setSearchQuery({ - ...searchQueries, - searchViewMode: query, - }) - } - value={searchQueries.searchViewMode} - style={styles.searchbar} - mode="view" - /> - - setSearchQuery({ - ...searchQueries, - searchWithoutBottomLine: query, - }) - } - value={searchQueries.searchWithoutBottomLine} - style={styles.searchbar} - mode="view" - showDivider={false} - /> - - setSearchQuery({ - ...searchQueries, - loadingViewMode: query, - }) - } - value={searchQueries.loadingViewMode} - style={styles.searchbar} - mode="view" - loading - /> - - )} + + setSearchQuery({ ...searchQueries, traileringIcon: query }) + } + value={searchQueries.traileringIcon} + traileringIcon={'microphone'} + traileringIconColor={ + isVisible ? Colors.error40 : colors.onSurfaceVariant + } + traileringIconAccessibilityLabel={'microphone button'} + onTraileringIconPress={() => setIsVisible(true)} + style={styles.searchbar} + mode="bar" + /> + + setSearchQuery({ + ...searchQueries, + traileringIconWithRightItem: query, + }) + } + value={searchQueries.traileringIconWithRightItem} + traileringIcon={'microphone'} + traileringIconColor={ + isVisible ? Colors.error40 : colors.onSurfaceVariant + } + traileringIconAccessibilityLabel={'microphone button'} + onTraileringIconPress={() => setIsVisible(true)} + right={(props) => ( + + )} + style={styles.searchbar} + /> + + setSearchQuery({ + ...searchQueries, + rightItem: query, + }) + } + value={searchQueries.rightItem} + right={(props) => ( + + )} + style={styles.searchbar} + /> + + setSearchQuery({ + ...searchQueries, + loadingBarMode: query, + }) + } + value={searchQueries.loadingBarMode} + style={styles.searchbar} + mode="bar" + loading + traileringIcon={'microphone'} + /> + + + + setSearchQuery({ + ...searchQueries, + searchViewMode: query, + }) + } + value={searchQueries.searchViewMode} + style={styles.searchbar} + mode="view" + /> + + setSearchQuery({ + ...searchQueries, + searchWithoutBottomLine: query, + }) + } + value={searchQueries.searchWithoutBottomLine} + style={styles.searchbar} + mode="view" + showDivider={false} + /> + + setSearchQuery({ + ...searchQueries, + loadingViewMode: query, + }) + } + value={searchQueries.loadingViewMode} + style={styles.searchbar} + mode="view" + loading + /> + { const preferences = React.useContext(PreferencesContext); - const theme = useExampleTheme(); const [options, setOptions] = React.useState({ showSnackbar: false, @@ -51,17 +49,15 @@ const SnackbarExample = () => { } /> - {theme.isV3 && ( - - Close icon button - - setOptions({ ...options, showCloseIcon: !showCloseIcon }) - } - /> - - )} + + Close icon button + + setOptions({ ...options, showCloseIcon: !showCloseIcon }) + } + /> + Longer message { - const { isV3 } = useExampleTheme(); - const v2Elevation = [1, 2, 4, 8, 12]; - const elevationValues = isV3 ? Array.from({ length: 6 }) : v2Elevation; + const elevationValues = Array.from({ length: 6 }); const renderSurface = (index: number, mode: 'flat' | 'elevated') => ( - {isV3 - ? `Elevation ${index === 1 ? '(default)' : ''} ${index}` - : `${elevationValues[index]}`} + {`Elevation ${index === 1 ? '(default)' : ''} ${index}`} ); @@ -82,15 +68,9 @@ const styles = StyleSheet.create({ }, surface: { margin: 24, - height: 80, - width: 80, - alignItems: 'center', - justifyContent: 'center', - }, - v3Surface: { - borderRadius: 16, height: 200, width: 200, + borderRadius: 16, alignItems: 'center', justifyContent: 'center', }, @@ -100,7 +80,7 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', width: '100%', marginBottom: 20, - borderColor: MD3Colors.tertiary50, + borderColor: Colors.tertiary50, padding: 10, borderWidth: 1, }, @@ -113,7 +93,7 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', width: '100%', marginBottom: 100, - borderColor: MD3Colors.tertiary50, + borderColor: Colors.tertiary50, padding: 10, borderWidth: 1, }, diff --git a/example/src/Examples/SwitchExample.tsx b/example/src/Examples/SwitchExample.tsx index a1bff15dc4..83f189a2b0 100644 --- a/example/src/Examples/SwitchExample.tsx +++ b/example/src/Examples/SwitchExample.tsx @@ -1,32 +1,18 @@ import * as React from 'react'; import { Platform, StyleSheet, View } from 'react-native'; -import { - MD2Colors, - MD3Colors, - Paragraph, - Switch, - Text, - TouchableRipple, -} from 'react-native-paper'; +import { Colors, Switch, Text, TouchableRipple } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const SwitchExample = () => { const [valueNormal, setNormalValue] = React.useState(true); const [valueCustom, setCustomValue] = React.useState(true); - const { isV3 } = useExampleTheme(); + const switchValueNormalLabel = `switch ${valueNormal ? 'on' : 'off'}`; + const switchValueCustomlLabel = `switch ${valueCustom ? 'on' : 'off'}`; - const switchValueNormalLabel = `switch ${ - valueNormal === true ? 'on' : 'off' - }`; - const switchValueCustomlLabel = `switch ${ - valueCustom === true ? 'on' : 'off' - }`; - - const TextComponent = isV3 ? Text : Paragraph; + const TextComponent = Text; return Platform.OS === 'android' ? ( @@ -42,10 +28,7 @@ const SwitchExample = () => { Custom {switchValueCustomlLabel} - + @@ -72,7 +55,7 @@ const SwitchExample = () => { setCustomValue(!valueCustom)} - color={isV3 ? MD3Colors.tertiary50 : MD2Colors.blue500} + color={Colors.tertiary50} /> diff --git a/example/src/Examples/TextExample.tsx b/example/src/Examples/TextExample.tsx index 4bd1572359..ea814c1c18 100644 --- a/example/src/Examples/TextExample.tsx +++ b/example/src/Examples/TextExample.tsx @@ -2,25 +2,17 @@ import * as React from 'react'; import { Platform, StyleSheet, View } from 'react-native'; import { - Caption, configureFonts, - Headline, - MD3LightTheme, - Paragraph, + LightTheme, PaperProvider, - Subheading, customText, - Title, } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const Text = customText<'customVariant'>(); const TextExample = () => { - const { isV3 } = useExampleTheme(); - const fontConfig = { customVariant: { fontFamily: Platform.select({ @@ -38,81 +30,67 @@ const TextExample = () => { } as const; const theme = { - ...MD3LightTheme, + ...LightTheme, fonts: configureFonts({ config: fontConfig }), }; return ( - {!isV3 && ( - <> - Caption - Paragraph - Subheading - Title - Headline - - )} - - {isV3 && ( - <> - - Display Large - - - Display Medium - - - Display small - + + Display Large + + + Display Medium + + + Display small + - - Headline Large - - - Headline Medium - - - Headline Small - + + Headline Large + + + Headline Medium + + + Headline Small + - - Title Large - - - Title Medium - - - Title Small - + + Title Large + + + Title Medium + + + Title Small + - - Label Large - - - Label Medium - - - Label Small - + + Label Large + + + Label Medium + + + Label Small + - - Body Large - - - Body Medium - - - Body Small - + + Body Large + + + Body Medium + + + Body Small + - - - Custom Variant - - - - )} + + + Custom Variant + + ); diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx index 7102abd0b6..b35c653089 100644 --- a/example/src/Examples/TextInputExample.tsx +++ b/example/src/Examples/TextInputExample.tsx @@ -13,8 +13,7 @@ import { configureFonts, HelperText, List, - MD2Colors, - MD3Colors, + Colors, TextInput, } from 'react-native-paper'; @@ -138,11 +137,7 @@ const TextInputExample = () => { const newColors = { ...state.iconsColor, - [name]: !color - ? theme.isV3 - ? theme.colors.primary - : theme.colors?.accent - : undefined, + [name]: !color ? theme.colors.primary : undefined, }; dispatch({ @@ -572,9 +567,7 @@ const TextInputExample = () => { * @@ -604,12 +597,8 @@ const TextInputExample = () => { onChangeText={(flatUnderlineColors) => inputActionHandler('flatUnderlineColors', flatUnderlineColors) } - underlineColor={ - theme.isV3 ? MD3Colors.primary70 : MD2Colors.pink400 - } - activeUnderlineColor={ - theme.isV3 ? MD3Colors.tertiary50 : MD2Colors.amber900 - } + underlineColor={Colors.primary70} + activeUnderlineColor={Colors.tertiary50} /> { onChangeText={(outlinedColors) => inputActionHandler('outlinedColors', outlinedColors) } - outlineColor={ - theme.isV3 ? MD3Colors.primary70 : MD2Colors.pink400 - } - activeOutlineColor={ - theme.isV3 ? MD3Colors.tertiary50 : MD2Colors.amber900 - } + outlineColor={Colors.primary70} + activeOutlineColor={Colors.tertiary50} /> { placeholder="Custom colors" /> - {fontsLoaded && theme.isV3 ? ( + {fontsLoaded ? ( void; toggleRtl: () => void; - toggleThemeVersion: () => void; toggleCollapsed: () => void; toggleCustomFont: () => void; toggleRippleEffect: () => void; - toggleShouldUseDeviceColors?: () => void; - theme: MD2Theme | MD3Theme; + toggleShouldUseDynamicTheme?: () => void; + theme: Theme; rtl: boolean; collapsed: boolean; customFontLoaded: boolean; rippleEffectEnabled: boolean; - shouldUseDeviceColors?: boolean; + shouldUseDynamicTheme?: boolean; } | null>(null); diff --git a/example/src/hooks/useExampleTheme.ts b/example/src/hooks/useExampleTheme.ts index 9196f044b0..5e39a00174 100644 --- a/example/src/hooks/useExampleTheme.ts +++ b/example/src/hooks/useExampleTheme.ts @@ -1,3 +1,3 @@ -import { MD2Theme, MD3Theme, useTheme } from 'react-native-paper'; +import { Theme, useTheme } 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 0878a1f13b..1620b7d8e1 100644 --- a/example/src/index.native.tsx +++ b/example/src/index.native.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { I18nManager } from 'react-native'; -import { useMaterial3Theme } from '@pchmn/expo-material3-theme'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { InitialState, NavigationContainer } from '@react-navigation/native'; @@ -11,17 +10,17 @@ import { StatusBar } from 'expo-status-bar'; import * as Updates from 'expo-updates'; import { PaperProvider, - MD2DarkTheme, - MD2LightTheme, - MD3DarkTheme, - MD3LightTheme, + DarkTheme, + LightTheme, + DynamicDarkTheme, + DynamicLightTheme, } from 'react-native-paper'; import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; import DrawerItems from './DrawerItems'; -import App from './RootNavigator'; -import { deviceColorsSupported } from '../utils'; import { PreferencesContext } from './PreferencesContext'; +import App from './RootNavigator'; +import { dynamicThemeSupported } from '../utils'; import { CombinedDefaultTheme, CombinedDarkTheme, @@ -46,10 +45,9 @@ export default function PaperExample() { InitialState | undefined >(); - const [shouldUseDeviceColors, setShouldUseDeviceColors] = + const [shouldUseDynamicTheme, setShouldUseDynamicTheme] = React.useState(true); const [isDarkMode, setIsDarkMode] = React.useState(false); - const [themeVersion, setThemeVersion] = React.useState<2 | 3>(3); const [rtl, setRtl] = React.useState( I18nManager.getConstants().isRTL ); @@ -57,20 +55,13 @@ export default function PaperExample() { const [customFontLoaded, setCustomFont] = React.useState(false); const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true); - const { theme: mdTheme } = useMaterial3Theme(); const theme = React.useMemo(() => { - if (themeVersion === 2) { - return isDarkMode ? MD2DarkTheme : MD2LightTheme; - } - - if (!deviceColorsSupported || !shouldUseDeviceColors) { - return isDarkMode ? MD3DarkTheme : MD3LightTheme; + if (dynamicThemeSupported && shouldUseDynamicTheme) { + return isDarkMode ? DynamicDarkTheme : DynamicLightTheme; } - return isDarkMode - ? { ...MD3DarkTheme, colors: mdTheme.dark } - : { ...MD3LightTheme, colors: mdTheme.light }; - }, [isDarkMode, mdTheme, shouldUseDeviceColors, themeVersion]); + return isDarkMode ? DarkTheme : LightTheme; + }, [isDarkMode, shouldUseDynamicTheme]); React.useEffect(() => { const restoreState = async () => { @@ -137,32 +128,26 @@ export default function PaperExample() { const preferences = React.useMemo( () => ({ - toggleShouldUseDeviceColors: () => - setShouldUseDeviceColors((oldValue) => !oldValue), + toggleShouldUseDynamicTheme: () => + setShouldUseDynamicTheme((oldValue) => !oldValue), toggleTheme: () => setIsDarkMode((oldValue) => !oldValue), toggleRtl: () => setRtl((rtl) => !rtl), toggleCollapsed: () => setCollapsed(!collapsed), toggleCustomFont: () => setCustomFont(!customFontLoaded), toggleRippleEffect: () => setRippleEffectEnabled(!rippleEffectEnabled), - toggleThemeVersion: () => { - setCustomFont(false); - setCollapsed(false); - setThemeVersion((oldThemeVersion) => (oldThemeVersion === 2 ? 3 : 2)); - setRippleEffectEnabled(true); - }, customFontLoaded, rippleEffectEnabled, collapsed, rtl, theme, - shouldUseDeviceColors, + shouldUseDynamicTheme: shouldUseDynamicTheme, }), [ rtl, theme, collapsed, customFontLoaded, - shouldUseDeviceColors, + shouldUseDynamicTheme, rippleEffectEnabled, ] ); @@ -213,7 +198,7 @@ export default function PaperExample() { ); }} - + diff --git a/example/src/index.tsx b/example/src/index.tsx index 76607763f1..e13328200b 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -5,13 +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, - MD2DarkTheme, - MD2LightTheme, -} from 'react-native-paper'; +import { PaperProvider, DarkTheme, LightTheme } from 'react-native-paper'; import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; import DrawerItems from './DrawerItems'; @@ -43,18 +37,13 @@ export default function PaperExample() { >(); const [isDarkMode, setIsDarkMode] = React.useState(false); - const [themeVersion, setThemeVersion] = React.useState<2 | 3>(3); const [collapsed, setCollapsed] = React.useState(false); const [customFontLoaded, setCustomFont] = React.useState(false); const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true); const theme = React.useMemo(() => { - if (themeVersion === 2) { - return isDarkMode ? MD2DarkTheme : MD2LightTheme; - } - - return isDarkMode ? MD3DarkTheme : MD3LightTheme; - }, [isDarkMode, themeVersion]); + return isDarkMode ? DarkTheme : LightTheme; + }, [isDarkMode]); React.useEffect(() => { const restoreState = async () => { @@ -112,12 +101,6 @@ export default function PaperExample() { const preferences = React.useMemo( () => ({ toggleTheme: () => setIsDarkMode((oldValue) => !oldValue), - toggleThemeVersion: () => { - setCustomFont(false); - setCollapsed(false); - setThemeVersion((oldThemeVersion) => (oldThemeVersion === 2 ? 3 : 2)); - setRippleEffectEnabled(true); - }, toggleCollapsed: () => setCollapsed(!collapsed), toggleCustomFont: () => setCustomFont(!customFontLoaded), toggleRippleEffect: () => setRippleEffectEnabled(!rippleEffectEnabled), @@ -127,9 +110,9 @@ export default function PaperExample() { rippleEffectEnabled, // noop for web, specified to avoid type errors toggleRtl: noop, - toggleShouldUseDeviceColors: noop, + toggleShouldUseDynamicTheme: noop, rtl: false, - shouldUseDeviceColors: false, + shouldUseDynamicTheme: false, }), [theme, collapsed, customFontLoaded, rippleEffectEnabled] ); diff --git a/example/utils/index.ts b/example/utils/index.ts index 5c15917644..74e1e3d564 100644 --- a/example/utils/index.ts +++ b/example/utils/index.ts @@ -1,7 +1,6 @@ import { Platform } from 'react-native'; -import ExpoMaterial3ThemeModule from '@pchmn/expo-material3-theme/build/ExpoMaterial3ThemeModule'; -import { MD3DarkTheme, MD3LightTheme, MD3Theme } from 'react-native-paper'; +import { DarkTheme, LightTheme, Theme } from 'react-native-paper'; type ReducerAction = { payload: State[T]; @@ -526,6 +525,7 @@ export const teamsList = [ const lightPinkColors = { colors: { + ...LightTheme.colors, primary: 'rgb(154, 64, 87)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(255, 217, 223)', @@ -571,6 +571,7 @@ const lightPinkColors = { const darkPinkColors = { colors: { + ...DarkTheme.colors, primary: 'rgb(255, 177, 192)', onPrimary: 'rgb(95, 17, 42)', primaryContainer: 'rgb(124, 41, 64)', @@ -616,6 +617,7 @@ const darkPinkColors = { const lightGreenColors = { colors: { + ...LightTheme.colors, primary: 'rgb(0, 110, 0)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(141, 251, 119)', @@ -661,6 +663,7 @@ const lightGreenColors = { const darkGreenColors = { colors: { + ...DarkTheme.colors, primary: 'rgb(114, 222, 94)', onPrimary: 'rgb(0, 58, 0)', primaryContainer: 'rgb(0, 83, 0)', @@ -706,6 +709,7 @@ const darkGreenColors = { const lightBlueColors = { colors: { + ...LightTheme.colors, primary: 'rgb(52, 61, 255)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(224, 224, 255)', @@ -751,6 +755,7 @@ const lightBlueColors = { const darkBlueColors = { colors: { + ...DarkTheme.colors, primary: 'rgb(190, 194, 255)', onPrimary: 'rgb(0, 1, 172)', primaryContainer: 'rgb(0, 0, 239)', @@ -796,6 +801,7 @@ const darkBlueColors = { const lightOrangeColors = { colors: { + ...LightTheme.colors, primary: 'rgb(133, 84, 0)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(255, 221, 183)', @@ -841,6 +847,7 @@ const lightOrangeColors = { const darkOrangeColors = { colors: { + ...DarkTheme.colors, primary: 'rgb(255, 185, 92)', onPrimary: 'rgb(70, 42, 0)', primaryContainer: 'rgb(101, 62, 0)', @@ -886,6 +893,7 @@ const darkOrangeColors = { const lightRedColors = { colors: { + ...LightTheme.colors, primary: 'rgb(192, 1, 0)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(255, 218, 212)', @@ -931,6 +939,7 @@ const lightRedColors = { const darkRedColors = { colors: { + ...DarkTheme.colors, primary: 'rgb(255, 180, 168)', onPrimary: 'rgb(105, 1, 0)', primaryContainer: 'rgb(147, 1, 0)', @@ -976,6 +985,7 @@ const darkRedColors = { const lightYellowColors = { colors: { + ...LightTheme.colors, primary: 'rgb(98, 98, 0)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(234, 234, 0)', @@ -1021,6 +1031,7 @@ const lightYellowColors = { const darkYellowColors = { colors: { + ...DarkTheme.colors, primary: 'rgb(205, 205, 0)', onPrimary: 'rgb(50, 50, 0)', primaryContainer: 'rgb(73, 73, 0)', @@ -1066,6 +1077,7 @@ const darkYellowColors = { const lightCyanColors = { colors: { + ...LightTheme.colors, primary: 'rgb(0, 106, 106)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(0, 251, 251)', @@ -1111,6 +1123,7 @@ const lightCyanColors = { const darkCyanColors = { colors: { + ...DarkTheme.colors, primary: 'rgb(0, 221, 221)', onPrimary: 'rgb(0, 55, 55)', primaryContainer: 'rgb(0, 79, 79)', @@ -1156,80 +1169,80 @@ const darkCyanColors = { export const colorThemes = { paper: { - light: MD3LightTheme, - dark: MD3DarkTheme, + light: LightTheme, + dark: DarkTheme, }, pink: { light: { - ...MD3LightTheme, + ...LightTheme, ...lightPinkColors, }, dark: { - ...MD3DarkTheme, + ...DarkTheme, ...darkPinkColors, }, }, green: { light: { - ...MD3LightTheme, + ...LightTheme, ...lightGreenColors, }, dark: { - ...MD3DarkTheme, + ...DarkTheme, ...darkGreenColors, }, }, blue: { light: { - ...MD3LightTheme, + ...LightTheme, ...lightBlueColors, }, dark: { - ...MD3DarkTheme, + ...DarkTheme, ...darkBlueColors, }, }, orange: { light: { - ...MD3LightTheme, + ...LightTheme, ...lightOrangeColors, }, dark: { - ...MD3DarkTheme, + ...DarkTheme, ...darkOrangeColors, }, }, red: { light: { - ...MD3LightTheme, + ...LightTheme, ...lightRedColors, }, dark: { - ...MD3DarkTheme, + ...DarkTheme, ...darkRedColors, }, }, yellow: { light: { - ...MD3LightTheme, + ...LightTheme, ...lightYellowColors, }, dark: { - ...MD3DarkTheme, + ...DarkTheme, ...darkYellowColors, }, }, cyan: { light: { - ...MD3LightTheme, + ...LightTheme, ...lightCyanColors, }, dark: { - ...MD3DarkTheme, + ...DarkTheme, ...darkCyanColors, }, }, -} as { [key: string]: { light: MD3Theme; dark: MD3Theme } }; +} as { [key: string]: { light: Theme; dark: Theme } }; export const songsData = [ { @@ -1420,7 +1433,5 @@ export const restaurantsData = [ }, ]; -export const deviceColorsSupported = - Boolean(ExpoMaterial3ThemeModule) && - Platform.OS === 'android' && - Platform.Version >= 31; +export const dynamicThemeSupported = + Platform.OS === 'android' && (Platform.Version as number) >= 31; diff --git a/example/utils/themes.ts b/example/utils/themes.ts index 85e4bb4f81..7ea07586e0 100644 --- a/example/utils/themes.ts +++ b/example/utils/themes.ts @@ -4,38 +4,39 @@ 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, + ...NavLightTheme.fonts, ...LightTheme.fonts, }, }; export const CombinedDarkTheme = { - ...MD3DarkTheme, ...DarkTheme, + ...NavDarkTheme, colors: { - ...MD3DarkTheme.colors, ...DarkTheme.colors, + ...NavDarkTheme.colors, }, fonts: { - ...MD3DarkTheme.fonts, + ...NavDarkTheme.fonts, ...DarkTheme.fonts, }, }; diff --git a/src/babel/__fixtures__/rewrite-imports/code.js b/src/babel/__fixtures__/rewrite-imports/code.js index cc5e6d0b5c..6509ef2f67 100644 --- a/src/babel/__fixtures__/rewrite-imports/code.js +++ b/src/babel/__fixtures__/rewrite-imports/code.js @@ -5,7 +5,6 @@ import { Button, FAB, Appbar, - MD2Colors, MD3Colors, NonExistent, NonExistentSecond as Stuff, diff --git a/src/babel/__fixtures__/rewrite-imports/output.js b/src/babel/__fixtures__/rewrite-imports/output.js index ecaff8d814..8e543cd243 100644 --- a/src/babel/__fixtures__/rewrite-imports/output.js +++ b/src/babel/__fixtures__/rewrite-imports/output.js @@ -4,9 +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 * 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 { MD3Colors, 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"; import { DefaultTheme } from "react-native-paper/lib/module/core/theming"; diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx index d59c626769..2279cbdcb3 100644 --- a/src/components/Appbar/Appbar.tsx +++ b/src/components/Appbar/Appbar.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { Animated, - Platform, StyleProp, StyleSheet, View, @@ -9,12 +8,9 @@ import { ColorValue, } from 'react-native'; -import color from 'color'; - import AppbarContent from './AppbarContent'; import { AppbarModes, - DEFAULT_APPBAR_HEIGHT, getAppbarBackgroundColor, modeAppbarHeight, renderAppbarContent, @@ -22,7 +18,7 @@ import { AppbarChildProps, } from './utils'; import { useInternalTheme } from '../../core/theming'; -import type { MD3Elevation, ThemeProp } from '../../types'; +import type { Elevation, ThemeProp } from '../../types'; import Surface from '../Surface'; export type Props = Omit< @@ -165,11 +161,10 @@ const Appbar = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; const flattenedStyle = StyleSheet.flatten(style); const { backgroundColor: customBackground, - elevation = isV3 ? (elevated ? 2 : 0) : 4, + elevation = elevated ? 2 : 0, ...restStyle } = (flattenedStyle || {}) as Exclude & { elevation?: number; @@ -178,34 +173,26 @@ const Appbar = ({ const backgroundColor = getAppbarBackgroundColor( theme, - elevation, customBackground, elevated ); const isMode = (modeToCompare: AppbarModes) => { - return isV3 && mode === modeToCompare; + return mode === modeToCompare; }; let isDark = false; if (typeof dark === 'boolean') { isDark = dark; - } else if (!isV3) { - isDark = - backgroundColor === 'transparent' - ? false - : typeof backgroundColor === 'string' - ? !color(backgroundColor).isLight() - : true; } - const isV3CenterAlignedMode = isV3 && isMode('center-aligned'); + const isCenterAlignedMode = isMode('center-aligned'); let shouldCenterContent = false; let shouldAddLeftSpacing = false; let shouldAddRightSpacing = false; - if ((!isV3 && Platform.OS === 'ios') || isV3CenterAlignedMode) { + if (isCenterAlignedMode) { let hasAppbarContent = false; let leftItemsCount = 0; let rightItemsCount = 0; @@ -225,14 +212,12 @@ const Appbar = ({ }); shouldCenterContent = - hasAppbarContent && - leftItemsCount < 2 && - rightItemsCount < (isV3 ? 3 : 2); + hasAppbarContent && leftItemsCount < 2 && rightItemsCount < 3; shouldAddLeftSpacing = shouldCenterContent && leftItemsCount === 0; shouldAddRightSpacing = shouldCenterContent && rightItemsCount === 0; } - const spacingStyle = isV3 ? styles.v3Spacing : styles.spacing; + const spacingStyle = styles.spacing; const insets = { paddingBottom: safeAreaInsets?.bottom, @@ -247,27 +232,25 @@ const Appbar = ({ { backgroundColor }, styles.appbar, { - height: isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT, + height: modeAppbarHeight[mode], }, insets, restStyle, - !theme.isV3 && { elevation }, ]} - elevation={elevation as MD3Elevation} + elevation={elevation as Elevation} container {...rest} > {shouldAddLeftSpacing ? : null} - {(!isV3 || isMode('small') || isMode('center-aligned')) && ( + {(isMode('small') || isMode('center-aligned')) && ( <> {/* Render only the back action at first place */} {renderAppbarContent({ children, isDark, theme, - isV3, renderOnly: ['Appbar.BackAction'], - shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent, + shouldCenterContent: isCenterAlignedMode || shouldCenterContent, })} {/* Render the rest of the content except the back action */} {renderAppbarContent({ @@ -278,9 +261,8 @@ const Appbar = ({ ], isDark, theme, - isV3, renderExcept: ['Appbar.BackAction'], - shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent, + shouldCenterContent: isCenterAlignedMode || shouldCenterContent, })} )} @@ -297,14 +279,12 @@ const Appbar = ({ {renderAppbarContent({ children, isDark, - isV3, renderOnly: ['Appbar.BackAction'], mode, })} {renderAppbarContent({ children: filterAppbarActions(children, true), isDark, - isV3, renderOnly: ['Appbar.Action'], mode, })} @@ -313,7 +293,6 @@ const Appbar = ({ {renderAppbarContent({ children: filterAppbarActions(children), isDark, - isV3, renderExcept: [ 'Appbar', 'Appbar.BackAction', @@ -327,7 +306,6 @@ const Appbar = ({ {renderAppbarContent({ children, isDark, - isV3, renderOnly: ['Appbar.Content'], mode, })} @@ -345,9 +323,6 @@ const styles = StyleSheet.create({ paddingHorizontal: 4, }, spacing: { - width: 48, - }, - v3Spacing: { width: 52, }, controlsRow: { diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx index ab5a72a110..29ed0325fe 100644 --- a/src/components/Appbar/AppbarAction.tsx +++ b/src/components/Appbar/AppbarAction.tsx @@ -1,17 +1,9 @@ import * as React from 'react'; -import type { - Animated, - ColorValue, - StyleProp, - View, - ViewStyle, -} from 'react-native'; +import type { Animated, StyleProp, View, ViewStyle } from 'react-native'; -import color from 'color'; import type { ThemeProp } from 'src/types'; import { useInternalTheme } from '../../core/theming'; -import { black } from '../../styles/themes/v2/colors'; import { forwardRef } from '../../utils/forwardRef'; import type { IconSource } from '../Icon'; import IconButton from '../IconButton/IconButton'; @@ -21,10 +13,6 @@ export type Props = React.ComponentPropsWithoutRef & { * Custom color for action icon. */ color?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Name of the icon to show. */ @@ -92,7 +80,6 @@ const AppbarAction = forwardRef( accessibilityLabel, isLeading, theme: themeOverrides, - rippleColor, ...rest }: Props, ref @@ -101,11 +88,9 @@ const AppbarAction = forwardRef( const actionIconColor = iconColor ? iconColor - : theme.isV3 - ? isLeading - ? theme.colors.onSurface - : theme.colors.onSurfaceVariant - : color(black).alpha(0.54).rgb().string(); + : isLeading + ? theme.colors.onSurface + : theme.colors.onSurfaceVariant; return ( ( accessibilityLabel={accessibilityLabel} animated ref={ref} - rippleColor={rippleColor} {...rest} /> ); diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx index dad67e21c8..c1ef8da904 100644 --- a/src/components/Appbar/AppbarContent.tsx +++ b/src/components/Appbar/AppbarContent.tsx @@ -12,12 +12,9 @@ import { ViewProps, } from 'react-native'; -import color from 'color'; - import { modeTextVariant } from './utils'; import { useInternalTheme } from '../../core/theming'; -import { white } from '../../styles/themes/v2/colors'; -import type { $RemoveChildren, MD3TypescaleKey, ThemeProp } from '../../types'; +import type { $RemoveChildren, TypescaleKey, ThemeProp } from '../../types'; import Text, { TextRef } from '../Typography/Text'; type TitleString = { @@ -102,8 +99,6 @@ export type Props = $RemoveChildren & { */ const AppbarContent = ({ color: titleColor, - subtitle, - subtitleStyle, onPress, disabled, style, @@ -117,28 +112,22 @@ const AppbarContent = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3, colors } = theme; - - const titleTextColor = titleColor - ? titleColor - : isV3 - ? colors.onSurface - : white; + const { colors } = theme; - const subtitleColor = color(titleTextColor).alpha(0.7).rgb().string(); + const titleTextColor = titleColor ? titleColor : colors.onSurface; const modeContainerStyles = { - small: styles.v3DefaultContainer, - medium: styles.v3MediumContainer, - large: styles.v3LargeContainer, - 'center-aligned': styles.v3DefaultContainer, + small: styles.defaultContainer, + medium: styles.mediumContainer, + large: styles.largeContainer, + 'center-aligned': styles.defaultContainer, }; - const variant = modeTextVariant[mode] as MD3TypescaleKey; + const variant = modeTextVariant[mode] as TypescaleKey; const contentWrapperProps = { pointerEvents: 'box-none' as ViewProps['pointerEvents'], - style: [styles.container, isV3 && modeContainerStyles[mode], style], + style: [styles.container, modeContainerStyles[mode], style], testID, ...rest, }; @@ -147,18 +136,13 @@ const AppbarContent = ({ <> {typeof title === 'string' ? ( - {subtitle} - - ) : null} ); @@ -219,26 +195,20 @@ const styles = StyleSheet.create({ flex: 1, paddingHorizontal: 12, }, - v3DefaultContainer: { + defaultContainer: { paddingHorizontal: 0, }, - v3MediumContainer: { + mediumContainer: { paddingHorizontal: 0, justifyContent: 'flex-end', paddingBottom: 24, }, - v3LargeContainer: { + largeContainer: { paddingHorizontal: 0, paddingTop: 36, justifyContent: 'flex-end', paddingBottom: 28, }, - title: { - fontSize: Platform.OS === 'ios' ? 17 : 20, - }, - subtitle: { - fontSize: Platform.OS === 'ios' ? 11 : 14, - }, }); const touchableRole: AccessibilityRole = 'button'; diff --git a/src/components/Appbar/AppbarHeader.tsx b/src/components/Appbar/AppbarHeader.tsx index e0eb6386d7..49431e41b8 100644 --- a/src/components/Appbar/AppbarHeader.tsx +++ b/src/components/Appbar/AppbarHeader.tsx @@ -13,7 +13,6 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { Appbar } from './Appbar'; import { - DEFAULT_APPBAR_HEIGHT, getAppbarBackgroundColor, modeAppbarHeight, getAppbarBorders, @@ -104,14 +103,13 @@ const AppbarHeader = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; const flattenedStyle = StyleSheet.flatten(style); const { - height = isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT, - elevation = isV3 ? (elevated ? 2 : 0) : 4, + height = modeAppbarHeight[mode], + elevation = elevated ? 2 : 0, backgroundColor: customBackground, - zIndex = isV3 && elevated ? 1 : 0, + zIndex = elevated ? 1 : 0, ...restStyle } = (flattenedStyle || {}) as Exclude & { height?: number; @@ -124,7 +122,6 @@ const AppbarHeader = ({ const backgroundColor = getAppbarBackgroundColor( theme, - elevation, customBackground, elevated ); @@ -150,9 +147,7 @@ const AppbarHeader = ({ testID={testID} style={[{ height, backgroundColor }, styles.appbar, restStyle]} dark={dark} - {...(isV3 && { - mode, - })} + mode={mode} {...rest} theme={theme} /> diff --git a/src/components/Appbar/utils.ts b/src/components/Appbar/utils.ts index a6c68af2a5..13999dd4af 100644 --- a/src/components/Appbar/utils.ts +++ b/src/components/Appbar/utils.ts @@ -2,8 +2,7 @@ import React from 'react'; import type { ColorValue, StyleProp, ViewStyle } from 'react-native'; import { StyleSheet, Animated } from 'react-native'; -import overlay from '../../styles/overlay'; -import { black, white } from '../../styles/themes/v2/colors'; +import { white } from '../../styles/themes/baseColors'; import type { InternalTheme, ThemeProp } from '../../types'; export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned'; @@ -24,24 +23,14 @@ const borderStyleProperties = [ export const getAppbarBackgroundColor = ( theme: InternalTheme, - elevation: number, customBackground?: ColorValue, elevated?: boolean ) => { - const { isV3, dark: isDarkTheme, mode, colors } = theme; - const isAdaptiveMode = mode === 'adaptive'; + const { colors } = theme; if (customBackground) { return customBackground; } - if (!isV3) { - if (isDarkTheme && isAdaptiveMode) { - return overlay(elevation, colors?.surface); - } - - return colors.primary; - } - if (elevated) { return theme.colors.elevation.level2; } @@ -52,7 +41,6 @@ export const getAppbarBackgroundColor = ( export const getAppbarColor = ({ color, isDark, - isV3, }: BaseProps & { color: string }) => { if (typeof color !== 'undefined') { return color; @@ -62,11 +50,7 @@ export const getAppbarColor = ({ return white; } - if (isV3) { - return undefined; - } - - return black; + return undefined; }; export const getAppbarBorders = ( @@ -89,27 +73,24 @@ export const getAppbarBorders = ( type BaseProps = { isDark: boolean; - isV3: boolean; }; type RenderAppbarContentProps = BaseProps & { children: React.ReactNode; shouldCenterContent?: boolean; - isV3: boolean; renderOnly?: (string | boolean)[]; renderExcept?: string[]; mode?: AppbarModes; theme?: ThemeProp; }; -export const DEFAULT_APPBAR_HEIGHT = 56; -const MD3_DEFAULT_APPBAR_HEIGHT = 64; +const DEFAULT_APPBAR_HEIGHT = 64; export const modeAppbarHeight = { - small: MD3_DEFAULT_APPBAR_HEIGHT, + small: DEFAULT_APPBAR_HEIGHT, medium: 112, large: 152, - 'center-aligned': MD3_DEFAULT_APPBAR_HEIGHT, + 'center-aligned': DEFAULT_APPBAR_HEIGHT, }; export const modeTextVariant = { @@ -133,7 +114,6 @@ export const renderAppbarContent = ({ children, isDark, shouldCenterContent = false, - isV3, renderOnly, renderExcept, mode = 'small', @@ -172,16 +152,14 @@ export const renderAppbarContent = ({ theme?: ThemeProp; } = { theme, - color: getAppbarColor({ color: child.props.color, isDark, isV3 }), + color: getAppbarColor({ color: child.props.color, isDark }), }; // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter if (child.type.displayName === 'Appbar.Content') { props.mode = mode; props.style = [ - isV3 - ? i === 0 && !shouldCenterContent && styles.v3Spacing - : i !== 0 && styles.v2Spacing, + i === 0 && !shouldCenterContent && styles.spacing, shouldCenterContent && styles.centerAlignedContent, child.props.style, ]; @@ -195,10 +173,7 @@ const styles = StyleSheet.create({ centerAlignedContent: { alignItems: 'center', }, - v2Spacing: { - marginLeft: 8, - }, - v3Spacing: { + spacing: { marginLeft: 12, }, }); diff --git a/src/components/Avatar/AvatarIcon.tsx b/src/components/Avatar/AvatarIcon.tsx index f1a0206f1f..2b055e2253 100644 --- a/src/components/Avatar/AvatarIcon.tsx +++ b/src/components/Avatar/AvatarIcon.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import { useInternalTheme } from '../../core/theming'; -import { white } from '../../styles/themes/v2/colors'; +import { white } from '../../styles/themes/baseColors'; import type { ThemeProp } from '../../types'; import getContrastingColor from '../../utils/getContrastingColor'; import Icon, { IconSource } from '../Icon'; diff --git a/src/components/Avatar/AvatarText.tsx b/src/components/Avatar/AvatarText.tsx index f93dd894a4..844e0bd5fd 100644 --- a/src/components/Avatar/AvatarText.tsx +++ b/src/components/Avatar/AvatarText.tsx @@ -9,7 +9,7 @@ import { } from 'react-native'; import { useInternalTheme } from '../../core/theming'; -import { white } from '../../styles/themes/v2/colors'; +import { white } from '../../styles/themes/baseColors'; import type { ThemeProp } from '../../types'; import getContrastingColor from '../../utils/getContrastingColor'; import Text from '../Typography/Text'; diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index 54c70770f2..d8bf38015b 100644 --- a/src/components/Badge.tsx +++ b/src/components/Badge.tsx @@ -8,9 +8,7 @@ import { } from 'react-native'; import { useInternalTheme } from '../core/theming'; -import { black, white } from '../styles/themes/v2/colors'; import type { ThemeProp } from '../types'; -import getContrastingColor from '../utils/getContrastingColor'; const defaultSize = 20; @@ -85,20 +83,14 @@ const Badge = ({ }).start(); }, [visible, opacity, scale]); - const { - backgroundColor = theme.isV3 - ? theme.colors.error - : theme.colors?.notification, - ...restStyle - } = (StyleSheet.flatten(style) || {}) as TextStyle; + const { backgroundColor = theme.colors.error, ...restStyle } = + (StyleSheet.flatten(style) || {}) as TextStyle; - const textColor = theme.isV3 - ? theme.colors.onError - : getContrastingColor(backgroundColor, white, black); + const textColor = theme.colors.onError; const borderRadius = size / 2; - const paddingHorizontal = theme.isV3 ? 3 : 4; + const paddingHorizontal = 3; return ( @@ -222,14 +222,7 @@ const Banner = ({ ) : null} = { * Get badge for the tab, uses `route.badge` by default. */ getBadge?: (props: { route: Route }) => boolean | number | string | undefined; - /** - * Get color for the tab, uses `route.color` by default. - */ - getColor?: (props: { route: Route }) => string | undefined; /** * Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component. */ @@ -327,7 +323,6 @@ const BottomNavigation = ({ renderTouchable, getLabelText, getBadge, - getColor, getAccessibilityLabel, getTestID, activeColor, @@ -353,9 +348,8 @@ const BottomNavigation = ({ }: Props) => { const theme = useInternalTheme(themeOverrides); const { scale } = theme.animation; - const compact = compactProp ?? !theme.isV3; - let shifting = - shiftingProp ?? (theme.isV3 ? false : navigationState.routes.length > 3); + const compact = compactProp ?? false; + let shifting = shiftingProp ?? false; if (shifting && navigationState.routes.length < 2) { shifting = false; @@ -404,7 +398,7 @@ const BottomNavigation = ({ ...navigationState.routes.map((_, i) => Animated.timing(tabsPositionAnims[i], { toValue: i === index ? 0 : i >= index ? 1 : -1, - duration: theme.isV3 || shifting ? 150 * scale : 0, + duration: 150 * scale, useNativeDriver: true, easing: sceneAnimationEasing, }) @@ -424,13 +418,11 @@ const BottomNavigation = ({ }); }, [ - shifting, navigationState.routes, offsetsAnims, scale, tabsPositionAnims, sceneAnimationEasing, - theme, ] ); @@ -579,7 +571,6 @@ const BottomNavigation = ({ renderTouchable={renderTouchable} getLabelText={getLabelText} getBadge={getBadge} - getColor={getColor} getAccessibilityLabel={getAccessibilityLabel} getTestID={getTestID} activeColor={activeColor} diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx index 05264c610a..2c66427a46 100644 --- a/src/components/BottomNavigation/BottomNavigationBar.tsx +++ b/src/components/BottomNavigation/BottomNavigationBar.tsx @@ -11,7 +11,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { @@ -20,8 +19,6 @@ import { getLabelColor, } from './utils'; import { useInternalTheme } from '../../core/theming'; -import overlay from '../../styles/overlay'; -import { black, white } from '../../styles/themes/v2/colors'; import type { ThemeProp } from '../../types'; import useAnimatedValue from '../../utils/useAnimatedValue'; import useAnimatedValueArray from '../../utils/useAnimatedValueArray'; @@ -149,10 +146,6 @@ export type Props = { * Get badge for the tab, uses `route.badge` by default. */ getBadge?: (props: { route: Route }) => boolean | number | string | undefined; - /** - * Get color for the tab, uses `route.color` by default. - */ - getColor?: (props: { route: Route }) => string | undefined; /** * Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component. */ @@ -321,7 +314,6 @@ const BottomNavigationBar = ({ ), getLabelText = ({ route }: { route: Route }) => route.title, getBadge = ({ route }: { route: Route }) => route.badge, - getColor = ({ route }: { route: Route }) => route.color, getAccessibilityLabel = ({ route }: { route: Route }) => route.accessibilityLabel, getTestID = ({ route }: { route: Route }) => route.testID, @@ -344,9 +336,8 @@ const BottomNavigationBar = ({ const theme = useInternalTheme(themeOverrides); const { bottom, left, right } = useSafeAreaInsets(); const { scale } = theme.animation; - const compact = compactProp ?? !theme.isV3; - let shifting = - shiftingProp ?? (theme.isV3 ? false : navigationState.routes.length > 3); + const compact = compactProp ?? false; + let shifting = shiftingProp ?? false; if (shifting && navigationState.routes.length < 2) { shifting = false; @@ -418,13 +409,13 @@ const BottomNavigationBar = ({ Animated.parallel([ Animated.timing(rippleAnim, { toValue: 1, - duration: theme.isV3 || shifting ? 400 * scale : 0, + duration: 400 * scale, useNativeDriver: true, }), ...navigationState.routes.map((_, i) => Animated.timing(tabsAnims[i], { toValue: i === index ? 1 : 0, - duration: theme.isV3 || shifting ? 150 * scale : 0, + duration: 150 * scale, useNativeDriver: true, easing: animationEasing, }) @@ -440,8 +431,6 @@ const BottomNavigationBar = ({ }, [ rippleAnim, - theme.isV3, - shifting, scale, navigationState.routes, tabsAnims, @@ -479,62 +468,28 @@ const BottomNavigationBar = ({ }; const { routes } = navigationState; - const { colors, dark: isDarkTheme, mode, isV3 } = theme; + const { colors } = theme; - const { backgroundColor: customBackground, elevation = 4 } = - (StyleSheet.flatten(style) || {}) as { - elevation?: number; - backgroundColor?: ColorValue; - }; - - const approxBackgroundColor = customBackground - ? customBackground - : isDarkTheme && mode === 'adaptive' - ? overlay(elevation, colors?.surface) - : colors?.primary; - - const v2BackgroundColorInterpolation = shifting - ? indexAnim.interpolate({ - inputRange: routes.map((_, i) => i), - // FIXME: does outputRange support ColorValue or just strings? - // @ts-expect-error - outputRange: routes.map( - (route) => getColor({ route }) || approxBackgroundColor - ), - }) - : approxBackgroundColor; - - const backgroundColor = isV3 - ? customBackground || theme.colors.elevation.level2 - : shifting - ? v2BackgroundColorInterpolation - : approxBackgroundColor; - - const isDark = - typeof approxBackgroundColor === 'string' - ? !color(approxBackgroundColor).isLight() - : true; + const { backgroundColor: customBackground } = (StyleSheet.flatten(style) || + {}) as { + backgroundColor?: ColorValue; + }; - const textColor = isDark ? white : black; + const backgroundColor = customBackground || colors.elevation.level2; const activeTintColor = getActiveTintColor({ activeColor, - defaultColor: textColor, theme, }); const inactiveTintColor = getInactiveTintColor({ inactiveColor, - defaultColor: textColor, theme, }); - const touchColor = color(activeTintColor).alpha(0.12).rgb().string(); const maxTabWidth = routes.length > 3 ? MIN_TAB_WIDTH : MAX_TAB_WIDTH; const maxTabBarWidth = maxTabWidth * routes.length; - const rippleSize = layout.width / 4; - const insets = { left: safeAreaInsets?.left ?? left, right: safeAreaInsets?.right ?? right, @@ -543,10 +498,9 @@ const BottomNavigationBar = ({ return ( ({ accessibilityRole={'tablist'} testID={`${testID}-content-wrapper`} > - {shifting && !isV3 ? ( - - ) : null} {routes.map((route, index) => { const focused = navigationState.index === index; const active = tabsAnims[index]; - // Scale the label up - const scale = - labeled && shifting - ? active.interpolate({ - inputRange: [0, 1], - outputRange: [0.5, 1], - }) - : 1; - // Move down the icon to account for no-label in shifting and smaller label in non-shifting. const translateY = labeled ? shifting @@ -657,15 +565,15 @@ const BottomNavigationBar = ({ // We render the active icon and label on top of inactive ones and cross-fade them on change. // This trick gives the illusion that we are animating between active and inactive colors. // This is to ensure that we can use native driver, as colors cannot be animated with native driver. - const activeOpacity = active; - const inactiveOpacity = active.interpolate({ + const animatedActiveOpacity = active; + const animatedInactiveOpacity = active.interpolate({ inputRange: [0, 1], outputRange: [1, 0], }); - const v3ActiveOpacity = focused ? 1 : 0; - const v3InactiveOpacity = shifting - ? inactiveOpacity + const staticActiveOpacity = focused ? 1 : 0; + const staticInactiveOpacity = shifting + ? animatedInactiveOpacity : focused ? 0 : 1; @@ -684,7 +592,6 @@ const BottomNavigationBar = ({ tintColor: activeTintColor, hasColor: Boolean(activeColor), focused, - defaultColor: textColor, theme, }); @@ -692,55 +599,52 @@ const BottomNavigationBar = ({ tintColor: inactiveTintColor, hasColor: Boolean(inactiveColor), focused, - defaultColor: textColor, theme, }); const badgeStyle = { - top: !isV3 ? -2 : typeof badge === 'boolean' ? 4 : 2, + top: typeof badge === 'boolean' ? 4 : 2, right: - (badge != null && typeof badge !== 'boolean' + badge != null && typeof badge !== 'boolean' ? String(badge).length * -2 - : 0) - (!isV3 ? 2 : 0), + : 0, }; - const isLegacyOrV3Shifting = !isV3 || (isV3 && shifting && labeled); + const isShiftingOrLabeled = shifting && labeled; - const font = isV3 ? theme.fonts.labelMedium : {}; + const font = theme.fonts.labelMedium; return renderTouchable({ key: route.key, route, borderless: true, centered: true, - rippleColor: isV3 ? 'transparent' : touchColor, + rippleColor: 'transparent', onPress: () => onTabPress(eventForIndex(index)), onLongPress: () => onTabLongPress?.(eventForIndex(index)), testID: getTestID({ route }), accessibilityLabel: getAccessibilityLabel({ route }), accessibilityRole: Platform.OS === 'ios' ? 'button' : 'tab', accessibilityState: { selected: focused }, - style: [styles.item, isV3 && styles.v3Item], + style: styles.item, children: ( - {isV3 && focused && ( + {focused && ( ({ @@ -784,11 +687,10 @@ const BottomNavigationBar = ({ @@ -801,7 +703,7 @@ const BottomNavigationBar = ({ ) : ( ({ {typeof badge === 'boolean' ? ( - + ) : ( {badge} @@ -821,19 +723,14 @@ const BottomNavigationBar = ({ {labeled ? ( - + @@ -864,9 +761,9 @@ const BottomNavigationBar = ({ style={[ styles.labelWrapper, { - opacity: isLegacyOrV3Shifting - ? inactiveOpacity - : v3InactiveOpacity, + opacity: isShiftingOrLabeled + ? animatedInactiveOpacity + : staticInactiveOpacity, }, ]} > @@ -895,9 +792,7 @@ const BottomNavigationBar = ({ )} - ) : ( - !isV3 && - )} + ) : null} ), }); @@ -932,35 +827,20 @@ const styles = StyleSheet.create({ }, item: { flex: 1, - // Top padding is 6 and bottom padding is 10 - // The extra 4dp bottom padding is offset by label's height - paddingVertical: 6, - }, - v3Item: { paddingVertical: 0, }, - ripple: { - position: 'absolute', - }, iconContainer: { - height: 24, - width: 24, - marginTop: 2, - marginHorizontal: 12, - alignSelf: 'center', - }, - v3IconContainer: { height: 32, width: 32, - marginBottom: 4, marginTop: 0, + marginBottom: 4, + marginHorizontal: 12, + alignSelf: 'center', justifyContent: 'center', }, iconWrapper: { ...StyleSheet.absoluteFillObject, alignItems: 'center', - }, - v3IconWrapper: { top: 4, }, labelContainer: { @@ -987,11 +867,11 @@ const styles = StyleSheet.create({ position: 'absolute', left: 0, }, - v3TouchableContainer: { + touchableContainer: { paddingTop: 12, paddingBottom: 16, }, - v3NoLabelContainer: { + noLabelContainer: { height: 80, justifyContent: 'center', alignItems: 'center', @@ -1002,7 +882,4 @@ const styles = StyleSheet.create({ borderRadius: OUTLINE_WIDTH / 4, alignSelf: 'center', }, - elevation: { - elevation: 4, - }, }); diff --git a/src/components/BottomNavigation/utils.ts b/src/components/BottomNavigation/utils.ts index 93a4d95091..a3fbbdceeb 100644 --- a/src/components/BottomNavigation/utils.ts +++ b/src/components/BottomNavigation/utils.ts @@ -1,16 +1,11 @@ -import color from 'color'; import type { InternalTheme } from 'src/types'; -import type { black, white } from '../../styles/themes/v2/colors'; - type BaseProps = { - defaultColor: typeof black | typeof white; theme: InternalTheme; }; export const getActiveTintColor = ({ activeColor, - defaultColor, theme, }: BaseProps & { activeColor: string | undefined; @@ -19,16 +14,11 @@ export const getActiveTintColor = ({ return activeColor; } - if (theme.isV3) { - return theme.colors.onSecondaryContainer; - } - - return defaultColor; + return theme.colors.onSecondaryContainer; }; export const getInactiveTintColor = ({ inactiveColor, - defaultColor, theme, }: BaseProps & { inactiveColor: string | undefined; @@ -37,18 +27,13 @@ export const getInactiveTintColor = ({ return inactiveColor; } - if (theme.isV3) { - return theme.colors.onSurfaceVariant; - } - - return color(defaultColor).alpha(0.5).rgb().string(); + return theme.colors.onSurfaceVariant; }; export const getLabelColor = ({ tintColor, hasColor, focused, - defaultColor, theme, }: BaseProps & { tintColor: string; @@ -59,12 +44,8 @@ export const getLabelColor = ({ return tintColor; } - if (theme.isV3) { - if (focused) { - return theme.colors.onSurface; - } - return theme.colors.onSurfaceVariant; + if (focused) { + return theme.colors.onSurface; } - - return defaultColor; + return theme.colors.onSurfaceVariant; }; diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 2e4d2cf519..1c02fef617 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { AccessibilityRole, Animated, - ColorValue, GestureResponderEvent, Platform, PressableAndroidRippleConfig, @@ -13,8 +12,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; - import { ButtonMode, getButtonColors, @@ -66,10 +63,6 @@ export type Props = $Omit, 'mode'> & { * Custom button's text color. */ textColor?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Whether to show a loading indicator. */ @@ -186,7 +179,6 @@ const Button = ( icon, buttonColor: customButtonColor, textColor: customTextColor, - rippleColor: customRippleColor, children, accessibilityLabel, accessibilityHint, @@ -218,8 +210,8 @@ const Button = ( }, [mode] ); - const { roundness, isV3, animation } = theme; - const uppercase = uppercaseProp ?? !theme.isV3; + const { roundness, animation } = theme; + const uppercase = uppercaseProp ?? false; const isWeb = Platform.OS === 'web'; const hasPassedTouchHandler = hasTouchHandler({ @@ -229,10 +221,9 @@ const Button = ( onLongPress, }); - const isElevationEntitled = - !disabled && (isV3 ? isMode('elevated') : isMode('contained')); - const initialElevation = isV3 ? 1 : 2; - const activeElevation = isV3 ? 2 : 8; + const isElevationEntitled = !disabled && isMode('elevated'); + const initialElevation = 1; + const activeElevation = 2; const { current: elevation } = React.useRef( new Animated.Value(isElevationEntitled ? initialElevation : 0) @@ -250,7 +241,7 @@ const Button = ( const handlePressIn = (e: GestureResponderEvent) => { onPressIn?.(e); - if (isV3 ? isMode('elevated') : isMode('contained')) { + if (isMode('elevated')) { const { scale } = animation; Animated.timing(elevation, { toValue: activeElevation, @@ -263,7 +254,7 @@ const Button = ( const handlePressOut = (e: GestureResponderEvent) => { onPressOut?.(e); - if (isV3 ? isMode('elevated') : isMode('contained')) { + if (isMode('elevated')) { const { scale } = animation; Animated.timing(elevation, { toValue: initialElevation, @@ -280,21 +271,24 @@ const Button = ( (style) => style.startsWith('border') && style.endsWith('Radius') ); - const borderRadius = (isV3 ? 5 : 1) * roundness; - const iconSize = isV3 ? 18 : 16; - - const { backgroundColor, borderColor, textColor, borderWidth } = - getButtonColors({ - customButtonColor, - customTextColor, - theme, - mode, - disabled, - dark, - }); + const borderRadius = 5 * roundness; + const iconSize = 18; - const rippleColor = - customRippleColor || color(textColor).alpha(0.12).rgb().string(); + const { + backgroundColor, + borderColor, + textColor, + textOpacity, + borderWidth, + backgroundOpacity, + } = getButtonColors({ + customButtonColor, + customTextColor, + theme, + mode, + disabled, + dark, + }); const touchableStyle = { ...borderRadiusStyles, @@ -302,7 +296,7 @@ const Button = ( }; const buttonStyle = { - backgroundColor, + backgroundColor: backgroundOpacity < 1 ? 'transparent' : backgroundColor, borderColor, borderWidth, ...touchableStyle, @@ -311,7 +305,7 @@ const Button = ( const { color: customLabelColor, fontSize: customLabelSize } = StyleSheet.flatten(labelStyle) || {}; - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; + const font = theme.fonts.labelLarge; const textStyle = { color: textColor, @@ -321,18 +315,13 @@ const Button = ( const iconStyle = StyleSheet.flatten(contentStyle)?.flexDirection === 'row-reverse' ? [ - styles.iconReverse, - isV3 && styles[`md3IconReverse${compact ? 'Compact' : ''}`], - isV3 && - isMode('text') && - styles[`md3IconReverseTextMode${compact ? 'Compact' : ''}`], + styles[`iconReverse${compact ? 'Compact' : ''}`], + isMode('text') && + styles[`iconReverseTextMode${compact ? 'Compact' : ''}`], ] : [ - styles.icon, - isV3 && styles[`md3Icon${compact ? 'Compact' : ''}`], - isV3 && - isMode('text') && - styles[`md3IconTextMode${compact ? 'Compact' : ''}`], + styles[`icon${compact ? 'Compact' : ''}`], + isMode('text') && styles[`iconTextMode${compact ? 'Compact' : ''}`], ]; return ( @@ -346,12 +335,24 @@ const Button = ( compact && styles.compact, buttonStyle, style, - !isV3 && !disabled && { elevation }, ] as Animated.WithAnimatedValue> } - {...(isV3 && { elevation: elevation })} + elevation={elevation} container > + {backgroundOpacity < 1 && ( + + )} - + {icon && loading !== true ? ( { - if (theme.isV3) { - if (disabled && isMode('outlined')) { - return theme.colors.surfaceDisabled; - } - - if (isMode('outlined')) { - return theme.colors.outline; - } - } - +const getButtonBorderColor = ({ isMode, theme }: BaseProps) => { if (isMode('outlined')) { - return color(theme.dark ? white : black) - .alpha(0.29) - .rgb() - .string(); + return theme.colors.outlineVariant; } return 'transparent'; }; -const getButtonBorderWidth = ({ - isMode, - theme, -}: Omit) => { - if (theme.isV3) { - if (isMode('outlined')) { - return 1; - } - } - +const getButtonBorderWidth = ({ isMode }: Omit) => { if (isMode('outlined')) { - return StyleSheet.hairlineWidth; + return 1; } - return 0; }; @@ -220,15 +167,24 @@ export const getButtonColors = ({ dark, }); - const borderColor = getButtonBorderColor({ isMode, theme, disabled }); + const borderColor = getButtonBorderColor({ isMode, theme }); const borderWidth = getButtonBorderWidth({ isMode, theme }); + const textOpacity = disabled ? stateOpacity.disabled : stateOpacity.enabled; + + const backgroundOpacity = + disabled && !isMode('outlined') && !isMode('text') + ? stateOpacity.pressed + : stateOpacity.enabled; + return { backgroundColor, borderColor, textColor, + textOpacity, borderWidth, + backgroundOpacity, }; }; diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 848be9fa13..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, isV3 } = 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 (isV3 && isMode('contained')) { + if (isMode('contained')) { return; } const isPressTypeIn = pressType === 'in'; - if (dark && isAdaptiveMode) { - Animated.timing(elevationDarkAdaptive, { - toValue: isPressTypeIn ? (isV3 ? 2 : 8) : cardElevation, - duration: animationDuration, - useNativeDriver: false, - }).start(); - } else { - Animated.timing(elevation, { - toValue: isPressTypeIn ? (isV3 ? 2 : 8) : 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, @@ -267,7 +225,7 @@ const Card = ( ); const borderRadiusCombinedStyles = { - borderRadius: (isV3 ? 3 : 1) * roundness, + borderRadius: 3 * roundness, ...borderRadiusStyles, }; @@ -290,20 +248,12 @@ const Card = ( & { * ``` */ const CardActions = ({ theme, style, children, ...rest }: Props) => { - const { isV3 } = useInternalTheme(theme); + useInternalTheme(theme); - const justifyContent = ( - isV3 ? 'flex-end' : 'flex-start' - ) as ViewStyle['justifyContent']; - const containerStyle = [styles.container, { justifyContent }, style]; + const containerStyle = [ + styles.container, + { justifyContent: 'flex-end' as ViewStyle['justifyContent'] }, + style, + ]; return ( @@ -50,15 +51,12 @@ const CardActions = ({ theme, style, children, ...rest }: Props) => { return child; } - const compact = !isV3 && child.props.compact !== false; const mode = - child.props.mode ?? - (isV3 ? (index === 0 ? 'outlined' : 'contained') : undefined); - const childStyle = [isV3 && styles.button, child.props.style]; + child.props.mode ?? (index === 0 ? 'outlined' : 'contained'); + const childStyle = [styles.button, child.props.style]; return React.cloneElement(child, { ...child.props, - compact, mode, style: childStyle, }); diff --git a/src/components/Card/CardCover.tsx b/src/components/Card/CardCover.tsx index e0147381dc..72079cf3a6 100644 --- a/src/components/Card/CardCover.tsx +++ b/src/components/Card/CardCover.tsx @@ -3,7 +3,7 @@ import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import { getCardCoverStyle } from './utils'; import { useInternalTheme } from '../../core/theming'; -import { grey200 } from '../../styles/themes/v2/colors'; +import { grey200 } from '../../styles/themes/baseColors'; import type { ThemeProp } from '../../types'; import { splitStyles } from '../../utils/splitStyles'; @@ -76,6 +76,7 @@ const CardCover = ({ }; CardCover.displayName = 'Card.Cover'; + const styles = StyleSheet.create({ container: { height: 195, diff --git a/src/components/Card/CardTitle.tsx b/src/components/Card/CardTitle.tsx index b3d78fc259..b37f903499 100644 --- a/src/components/Card/CardTitle.tsx +++ b/src/components/Card/CardTitle.tsx @@ -8,10 +8,8 @@ import { } from 'react-native'; import { useInternalTheme } from '../../core/theming'; -import type { MD3TypescaleKey, ThemeProp } from '../../types'; +import type { TypescaleKey, ThemeProp } from '../../types'; import Text from '../Typography/Text'; -import Caption from '../Typography/v2/Caption'; -import Title from '../Typography/v2/Title'; export type Props = React.ComponentPropsWithRef & { /** @@ -42,7 +40,7 @@ export type Props = React.ComponentPropsWithRef & { * * Body: `bodyLarge`, `bodyMedium`, `bodySmall` */ - titleVariant?: keyof typeof MD3TypescaleKey; + titleVariant?: keyof typeof TypescaleKey; /** * Text for the subtitle. Note that this will only accept a string or ``-based node. */ @@ -71,7 +69,7 @@ export type Props = React.ComponentPropsWithRef & { * * Body: `bodyLarge`, `bodyMedium`, `bodySmall` */ - subtitleVariant?: keyof typeof MD3TypescaleKey; + subtitleVariant?: keyof typeof TypescaleKey; /** * Callback which returns a React element to display on the left side. */ @@ -151,9 +149,7 @@ const CardTitle = ({ style, theme: themeOverrides, }: Props) => { - const theme = useInternalTheme(themeOverrides); - const TitleComponent = theme.isV3 ? Text : Title; - const SubtitleComponent = theme.isV3 ? Text : Caption; + useInternalTheme(themeOverrides); const minHeight = subtitle || left || right ? 72 : 50; const marginBottom = subtitle ? 0 : 2; @@ -170,24 +166,24 @@ const CardTitle = ({ {title && ( - {title} - + )} {subtitle && ( - {subtitle} - + )} {right ? right({ size: 24 }) : null} diff --git a/src/components/Card/utils.tsx b/src/components/Card/utils.tsx index c0f10951c5..d4a56a60d8 100644 --- a/src/components/Card/utils.tsx +++ b/src/components/Card/utils.tsx @@ -1,8 +1,5 @@ import type { StyleProp, ViewStyle } from 'react-native'; -import color from 'color'; - -import { black, white } from '../../styles/themes/v2/colors'; import type { InternalTheme } from '../../types'; type CardMode = 'elevated' | 'outlined' | 'contained'; @@ -20,8 +17,6 @@ export type CardActionChildProps = { export const getCardCoverStyle = ({ theme, - index, - total, borderRadiusStyles, }: { theme: InternalTheme; @@ -29,7 +24,7 @@ export const getCardCoverStyle = ({ index?: number; total?: number; }) => { - const { isV3, roundness } = theme; + const { roundness } = theme; if (Object.keys(borderRadiusStyles).length > 0) { return { @@ -38,43 +33,13 @@ export const getCardCoverStyle = ({ }; } - if (isV3) { - return { - borderRadius: 3 * roundness, - }; - } - - if (index === 0) { - if (total === 1) { - return { - borderRadius: roundness, - }; - } - - return { - borderTopLeftRadius: roundness, - borderTopRightRadius: roundness, - }; - } - - if (typeof total === 'number' && index === total - 1) { - return { - borderBottomLeftRadius: roundness, - }; - } - - return undefined; + return { + borderRadius: 3 * roundness, + }; }; const getBorderColor = ({ theme }: { theme: InternalTheme }) => { - if (theme.isV3) { - return theme.colors.outline; - } - - if (theme.dark) { - return color(white).alpha(0.12).rgb().string(); - } - return color(black).alpha(0.12).rgb().string(); + return theme.colors.outline; }; const getBackgroundColor = ({ @@ -84,13 +49,11 @@ const getBackgroundColor = ({ theme: InternalTheme; isMode: (mode: CardMode) => boolean; }) => { - if (theme.isV3) { - if (isMode('contained')) { - return theme.colors.surfaceVariant; - } - if (isMode('outlined')) { - return theme.colors.surface; - } + if (isMode('contained')) { + return theme.colors.surfaceVariant; + } + if (isMode('outlined')) { + return theme.colors.surface; } return undefined; }; @@ -107,10 +70,7 @@ export const getCardColors = ({ }; return { - backgroundColor: getBackgroundColor({ - theme, - isMode, - }), + backgroundColor: getBackgroundColor({ theme, isMode }), borderColor: getBorderColor({ theme }), }; }; diff --git a/src/components/Checkbox/CheckboxAndroid.tsx b/src/components/Checkbox/CheckboxAndroid.tsx index 642602b0fa..a4e6fb0c23 100644 --- a/src/components/Checkbox/CheckboxAndroid.tsx +++ b/src/components/Checkbox/CheckboxAndroid.tsx @@ -99,7 +99,7 @@ const CheckboxAndroid = ({ const checked = status === 'checked'; const indeterminate = status === 'indeterminate'; - const { rippleColor, selectionControlColor } = + const { selectionControlColor, selectionControlOpacity } = getAndroidSelectionControlColor({ theme, disabled, @@ -123,7 +123,6 @@ const CheckboxAndroid = ({ - + - + ; } - const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text; - const disabledTextColor = theme.isV3 - ? theme.colors.onSurfaceDisabled - : theme.colors.disabled; + const textColor = theme.colors.onSurface; const textAlign = isLeading ? 'right' : 'left'; const computedStyle = { - color: disabled ? disabledTextColor : textColor, + color: textColor, + opacity: disabled + ? tokens.md.ref.stateOpacity.disabled + : tokens.md.ref.stateOpacity.enabled, textAlign, } as TextStyle; @@ -189,7 +184,6 @@ const CheckboxItem = ({ onLongPress={onLongPress} testID={testID} disabled={disabled} - rippleColor={rippleColor} theme={theme} background={background} hitSlop={hitSlop} @@ -204,12 +198,7 @@ const CheckboxItem = ({ variant={labelVariant} testID={`${testID}-text`} maxFontSizeMultiplier={labelMaxFontSizeMultiplier} - style={[ - styles.label, - !theme.isV3 && styles.font, - computedStyle, - labelStyle, - ]} + style={[styles.label, computedStyle, labelStyle]} > {label} @@ -238,7 +227,4 @@ const styles = StyleSheet.create({ flexShrink: 1, flexGrow: 1, }, - font: { - fontSize: 16, - }, }); diff --git a/src/components/Checkbox/utils.ts b/src/components/Checkbox/utils.ts index 81677d46b2..025717f308 100644 --- a/src/components/Checkbox/utils.ts +++ b/src/components/Checkbox/utils.ts @@ -1,7 +1,8 @@ -import color from 'color'; - +import { tokens } from '../../styles/themes/tokens'; import type { InternalTheme } from '../../types'; +const { stateOpacity } = tokens.md.ref; + const getAndroidCheckedColor = ({ theme, customColor, @@ -13,11 +14,7 @@ const getAndroidCheckedColor = ({ return customColor; } - if (theme.isV3) { - return theme.colors.primary; - } - - return theme.colors.accent; + return theme.colors.primary; }; const getAndroidUncheckedColor = ({ @@ -31,34 +28,7 @@ const getAndroidUncheckedColor = ({ return customUncheckedColor; } - if (theme.isV3) { - return theme.colors.onSurfaceVariant; - } - - if (theme.dark) { - return color(theme.colors.text).alpha(0.7).rgb().string(); - } - - return color(theme.colors.text).alpha(0.54).rgb().string(); -}; - -const getAndroidRippleColor = ({ - theme, - checkedColor, - disabled, -}: { - theme: InternalTheme; - checkedColor: string; - disabled?: boolean; -}) => { - if (disabled) { - if (theme.isV3) { - return color(theme.colors.onSurface).alpha(0.16).rgb().string(); - } - return color(theme.colors.text).alpha(0.16).rgb().string(); - } - - return color(checkedColor).fade(0.32).rgb().string(); + return theme.colors.onSurfaceVariant; }; const getAndroidControlColor = ({ @@ -75,10 +45,7 @@ const getAndroidControlColor = ({ disabled?: boolean; }) => { if (disabled) { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.disabled; + return theme.colors.onSurface; } if (checked) { @@ -105,8 +72,11 @@ export const getAndroidSelectionControlColor = ({ theme, customUncheckedColor, }); + const selectionControlOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { - rippleColor: getAndroidRippleColor({ theme, checkedColor, disabled }), selectionControlColor: getAndroidControlColor({ theme, disabled, @@ -114,6 +84,7 @@ export const getAndroidSelectionControlColor = ({ checkedColor, uncheckedColor, }), + selectionControlOpacity, }; }; @@ -127,39 +98,14 @@ const getIOSCheckedColor = ({ disabled?: boolean; }) => { if (disabled) { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.disabled; + return theme.colors.primary; } if (customColor) { return customColor; } - if (theme.isV3) { - return theme.colors.primary; - } - - return theme.colors.accent; -}; - -const getIOSRippleColor = ({ - theme, - checkedColor, - disabled, -}: { - theme: InternalTheme; - checkedColor: string; - disabled?: boolean; -}) => { - if (disabled) { - if (theme.isV3) { - return color(theme.colors.onSurface).alpha(0.16).rgb().string(); - } - return color(theme.colors.text).alpha(0.16).rgb().string(); - } - return color(checkedColor).fade(0.32).rgb().string(); + return theme.colors.primary; }; export const getSelectionControlIOSColor = ({ @@ -172,12 +118,12 @@ export const getSelectionControlIOSColor = ({ customColor?: string; }) => { const checkedColor = getIOSCheckedColor({ theme, disabled, customColor }); + const checkedColorOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { checkedColor, - rippleColor: getIOSRippleColor({ - theme, - checkedColor, - disabled, - }), + checkedColorOpacity, }; }; diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 0e48e5c145..8b9accadb6 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { AccessibilityState, Animated, - ColorValue, GestureResponderEvent, Platform, PressableAndroidRippleConfig, @@ -18,7 +17,7 @@ import useLatestCallback from 'use-latest-callback'; import { ChipAvatarProps, getChipColors } from './helpers'; import { useInternalTheme } from '../../core/theming'; -import { white } from '../../styles/themes/v2/colors'; +import { white } from '../../styles/themes/baseColors'; import type { $Omit, EllipsizeProp, ThemeProp } from '../../types'; import hasTouchHandler from '../../utils/hasTouchHandler'; import type { IconSource } from '../Icon'; @@ -73,10 +72,6 @@ export type Props = $Omit, 'mode'> & { * Note: Check will not be shown if `icon` is specified. If specified, `icon` will be shown regardless of `selected`. */ showSelectedCheck?: boolean; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch. */ @@ -201,8 +196,6 @@ const Chip = ({ theme: themeOverrides, testID = 'chip', selectedColor, - rippleColor: customRippleColor, - showSelectedOverlay = false, showSelectedCheck = true, ellipsizeMode, compact, @@ -212,11 +205,11 @@ const Chip = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3, roundness } = theme; + const { roundness } = theme; const isWeb = Platform.OS === 'web'; const { current: elevation } = React.useRef( - new Animated.Value(isV3 && elevated ? 1 : 0) + new Animated.Value(elevated ? 1 : 0) ); const hasPassedTouchHandler = hasTouchHandler({ @@ -232,7 +225,7 @@ const Chip = ({ const { scale } = theme.animation; onPressIn?.(e); Animated.timing(elevation, { - toValue: isV3 ? (elevated ? 2 : 0) : 4, + toValue: elevated ? 2 : 0, duration: 200 * scale, useNativeDriver: isWeb || Platform.constants.reactNativeVersion.minor <= 72, @@ -243,16 +236,16 @@ const Chip = ({ const { scale } = theme.animation; onPressOut?.(e); Animated.timing(elevation, { - toValue: isV3 && elevated ? 1 : 0, + toValue: elevated ? 1 : 0, duration: 150 * scale, useNativeDriver: isWeb || Platform.constants.reactNativeVersion.minor <= 72, }).start(); }); - const opacity = isV3 ? 0.38 : 0.26; - const defaultBorderRadius = roundness * (isV3 ? 2 : 4); - const iconSize = isV3 ? 18 : 16; + const opacity = 0.38; + const defaultBorderRadius = roundness * 2; + const iconSize = 18; const { backgroundColor: customBackgroundColor, @@ -263,17 +256,15 @@ const Chip = ({ borderColor, textColor, iconColor, - rippleColor, + contentOpacity, selectedBackgroundColor, backgroundColor, } = getChipColors({ isOutlined, theme, selectedColor, - showSelectedOverlay, customBackgroundColor, disabled, - customRippleColor, }); const accessibilityState: AccessibilityState = { @@ -281,8 +272,8 @@ const Chip = ({ disabled, }; - const elevationStyle = isV3 || Platform.OS === 'android' ? elevation : 0; - const multiplier = isV3 ? (compact ? 1.5 : 2) : 1; + const elevationStyle = Platform.OS === 'android' ? elevation : elevation; + const multiplier = compact ? 1.5 : 2; const labelSpacings = { marginRight: onClose ? 0 : 8 * multiplier, marginLeft: @@ -291,20 +282,16 @@ const Chip = ({ : 8 * multiplier, }; const contentSpacings = { - paddingRight: isV3 ? (onClose ? 34 : 0) : onClose ? 32 : 4, + paddingRight: onClose ? 34 : 0, }; const labelTextStyle = { color: textColor, - ...(isV3 ? theme.fonts.labelLarge : theme.fonts.regular), + ...theme.fonts.labelLarge, }; return ( {avatar && !icon ? ( - + {React.isValidElement(avatar) ? React.cloneElement(avatar, { style: [styles.avatar, avatar.props.style], @@ -358,12 +338,11 @@ const Chip = ({ @@ -416,18 +390,12 @@ const Chip = ({ accessibilityRole="button" accessibilityLabel={closeIconAccessibilityLabel} > - + {closeIcon ? ( ) : ( ; }; @@ -20,40 +22,23 @@ const getBorderColor = ({ isOutlined, disabled, selectedColor, - backgroundColor, }: BaseProps & { backgroundColor: string; selectedColor?: string }) => { const isSelectedColor = selectedColor !== undefined; - if (theme.isV3) { - if (!isOutlined) { - // If the Chip mode is "flat", set border color to transparent - return 'transparent'; - } - - if (disabled) { - return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); - } - - if (isSelectedColor) { - return color(selectedColor).alpha(0.29).rgb().string(); - } - - return theme.colors.outline; + if (!isOutlined) { + // If the Chip mode is "flat", set border color to transparent + return 'transparent'; } - if (isOutlined) { - if (isSelectedColor) { - return color(selectedColor).alpha(0.29).rgb().string(); - } - - if (theme.dark) { - return color(white).alpha(0.29).rgb().string(); - } + if (disabled) { + return theme.colors.surfaceContainer; + } - return color(black).alpha(0.29).rgb().string(); + if (isSelectedColor) { + return color(selectedColor).alpha(0.29).rgb().string(); } - return backgroundColor; + return theme.colors.outlineVariant; }; const getTextColor = ({ @@ -65,54 +50,31 @@ const getTextColor = ({ selectedColor?: string; }) => { const isSelectedColor = selectedColor !== undefined; - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (isSelectedColor) { - return selectedColor; - } - - if (isOutlined) { - return theme.colors.onSurfaceVariant; - } - - return theme.colors.onSecondaryContainer; - } if (disabled) { - return theme.colors.disabled; + return theme.colors.onSurface; } if (isSelectedColor) { - return color(selectedColor).alpha(0.87).rgb().string(); + return selectedColor; + } + + if (isOutlined) { + return theme.colors.onSurfaceVariant; } - return color(theme.colors.text).alpha(0.87).rgb().string(); + return theme.colors.onSecondaryContainer; }; const getDefaultBackgroundColor = ({ theme, isOutlined, }: Omit) => { - if (theme.isV3) { - if (isOutlined) { - return theme.colors.surface; - } - - return theme.colors.secondaryContainer; - } - if (isOutlined) { - return theme.colors?.surface; - } - - if (theme.dark) { - return '#383838'; + return theme.colors.surface; } - return '#ebebeb'; + return theme.colors.secondaryContainer; }; const getBackgroundColor = ({ @@ -127,13 +89,11 @@ const getBackgroundColor = ({ return customBackgroundColor; } - if (theme.isV3) { - if (disabled) { - if (isOutlined) { - return 'transparent'; - } - return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); + if (disabled) { + if (isOutlined) { + return 'transparent'; } + return theme.colors.surfaceContainerLow; } return getDefaultBackgroundColor({ theme, isOutlined }); @@ -144,57 +104,15 @@ const getSelectedBackgroundColor = ({ isOutlined, disabled, customBackgroundColor, - showSelectedOverlay, }: BaseProps & { customBackgroundColor?: ColorValue; - showSelectedOverlay?: boolean; }) => { - const backgroundColor = getBackgroundColor({ + return getBackgroundColor({ theme, disabled, isOutlined, customBackgroundColor, }); - - if (theme.isV3) { - if (isOutlined) { - if (showSelectedOverlay) { - return color(backgroundColor) - .mix(color(theme.colors.onSurfaceVariant), 0.12) - .rgb() - .string(); - } - return color(backgroundColor) - .mix(color(theme.colors.onSurfaceVariant), 0) - .rgb() - .string(); - } - - if (showSelectedOverlay) { - return color(backgroundColor) - .mix(color(theme.colors.onSecondaryContainer), 0.12) - .rgb() - .string(); - } - - return color(backgroundColor) - .mix(color(theme.colors.onSecondaryContainer), 0) - .rgb() - .string(); - } - - if (theme.dark) { - if (isOutlined) { - return color(backgroundColor).lighten(0.2).rgb().string(); - } - return color(backgroundColor).lighten(0.4).rgb().string(); - } - - if (isOutlined) { - return color(backgroundColor).darken(0.08).rgb().string(); - } - - return color(backgroundColor).darken(0.2).rgb().string(); }; const getIconColor = ({ @@ -206,86 +124,32 @@ const getIconColor = ({ selectedColor?: string; }) => { const isSelectedColor = selectedColor !== undefined; - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (isSelectedColor) { - return selectedColor; - } - - if (isOutlined) { - return theme.colors.onSurfaceVariant; - } - - return theme.colors.onSecondaryContainer; - } if (disabled) { - return theme.colors.disabled; + return theme.colors.onSurface; } if (isSelectedColor) { - return color(selectedColor).alpha(0.54).rgb().string(); + return selectedColor; } - return color(theme.colors.text).alpha(0.54).rgb().string(); -}; - -const getRippleColor = ({ - theme, - isOutlined, - disabled, - selectedColor, - selectedBackgroundColor, - customRippleColor, -}: BaseProps & { - selectedBackgroundColor: string; - selectedColor?: string; - customRippleColor?: ColorValue; -}) => { - if (customRippleColor) { - return customRippleColor; - } - - const isSelectedColor = selectedColor !== undefined; - const textColor = getTextColor({ - theme, - disabled, - selectedColor, - isOutlined, - }); - - if (theme.isV3) { - if (isSelectedColor) { - return color(selectedColor).alpha(0.12).rgb().string(); - } - - return color(textColor).alpha(0.12).rgb().string(); - } - - if (isSelectedColor) { - return color(selectedColor).fade(0.5).rgb().string(); + if (isOutlined) { + return theme.colors.onSurfaceVariant; } - return selectedBackgroundColor; + return theme.colors.onSecondaryContainer; }; export const getChipColors = ({ isOutlined, theme, selectedColor, - showSelectedOverlay, customBackgroundColor, disabled, - customRippleColor, }: BaseProps & { customBackgroundColor?: ColorValue; disabled?: boolean; - showSelectedOverlay?: boolean; selectedColor?: string; - customRippleColor?: ColorValue; }) => { const baseChipColorProps = { theme, isOutlined, disabled }; @@ -297,9 +161,12 @@ export const getChipColors = ({ const selectedBackgroundColor = getSelectedBackgroundColor({ ...baseChipColorProps, customBackgroundColor, - showSelectedOverlay, }); + const contentOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { borderColor: getBorderColor({ ...baseChipColorProps, @@ -314,12 +181,7 @@ export const getChipColors = ({ ...baseChipColorProps, selectedColor, }), - rippleColor: getRippleColor({ - ...baseChipColorProps, - selectedColor, - selectedBackgroundColor, - customRippleColor, - }), + contentOpacity, backgroundColor, selectedBackgroundColor, }; diff --git a/src/components/DataTable/DataTableHeader.tsx b/src/components/DataTable/DataTableHeader.tsx index a4619ebb99..1fee2a02ab 100644 --- a/src/components/DataTable/DataTableHeader.tsx +++ b/src/components/DataTable/DataTableHeader.tsx @@ -1,10 +1,7 @@ import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; -import color from 'color'; - import { useInternalTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; import type { ThemeProp } from '../../types'; export type Props = React.ComponentPropsWithRef & { @@ -52,12 +49,7 @@ const DataTableHeader = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const borderBottomColor = theme.isV3 - ? theme.colors.surfaceVariant - : color(theme.dark ? white : black) - .alpha(0.12) - .rgb() - .string(); + const borderBottomColor = theme.colors.surfaceVariant; return ( diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx index dd72dbe54f..6a3fc52b3d 100644 --- a/src/components/DataTable/DataTablePagination.tsx +++ b/src/components/DataTable/DataTablePagination.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { - ColorValue, I18nManager, StyleProp, StyleSheet, @@ -8,7 +7,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; import type { ThemeProp } from 'src/types'; import { useInternalTheme } from '../../core/theming'; @@ -57,14 +55,6 @@ type PaginationDropdownProps = { * The function to set the number of rows per page. */ onItemsPerPageChange?: (numberOfItemsPerPage: number) => void; - /** - * Color of the dropdown item ripple effect. - */ - dropdownItemRippleColor?: ColorValue; - /** - * Color of the select page dropdown ripple effect. - */ - selectPageDropdownRippleColor?: ColorValue; /** * @optional */ @@ -88,10 +78,6 @@ type PaginationControlsProps = { * Whether to show fast forward and fast rewind buttons in pagination. False by default. */ showFastPaginationControls?: boolean; - /** - * Color of the pagination control ripple effect. - */ - paginationControlRippleColor?: ColorValue; /** * @optional */ @@ -104,11 +90,10 @@ const PaginationControls = ({ onPageChange, showFastPaginationControls, theme: themeOverrides, - paginationControlRippleColor, }: PaginationControlsProps) => { const theme = useInternalTheme(themeOverrides); - const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text; + const textColor = theme.colors.onSurface; return ( <> @@ -123,7 +108,6 @@ const PaginationControls = ({ /> )} iconColor={textColor} - rippleColor={paginationControlRippleColor} disabled={page === 0} onPress={() => onPageChange(0)} accessibilityLabel="page-first" @@ -140,7 +124,6 @@ const PaginationControls = ({ /> )} iconColor={textColor} - rippleColor={paginationControlRippleColor} disabled={page === 0} onPress={() => onPageChange(page - 1)} accessibilityLabel="chevron-left" @@ -156,7 +139,6 @@ const PaginationControls = ({ /> )} iconColor={textColor} - rippleColor={paginationControlRippleColor} disabled={numberOfPages === 0 || page === numberOfPages - 1} onPress={() => onPageChange(page + 1)} accessibilityLabel="chevron-right" @@ -173,7 +155,6 @@ const PaginationControls = ({ /> )} iconColor={textColor} - rippleColor={paginationControlRippleColor} disabled={numberOfPages === 0 || page === numberOfPages - 1} onPress={() => onPageChange(numberOfPages - 1)} accessibilityLabel="page-last" @@ -189,8 +170,6 @@ const PaginationDropdown = ({ numberOfItemsPerPage, onItemsPerPageChange, theme: themeOverrides, - selectPageDropdownRippleColor, - dropdownItemRippleColor, }: PaginationDropdownProps) => { const theme = useInternalTheme(themeOverrides); const { colors } = theme; @@ -209,7 +188,6 @@ const PaginationDropdown = ({ icon="menu-down" contentStyle={styles.contentStyle} theme={theme} - rippleColor={selectPageDropdownRippleColor} > {`${numberOfItemsPerPage}`} @@ -227,7 +205,6 @@ const PaginationDropdown = ({ onItemsPerPageChange?.(option); toggleSelect(false); }} - rippleColor={dropdownItemRippleColor} title={option} theme={theme} /> @@ -304,18 +281,11 @@ const DataTablePagination = ({ onItemsPerPageChange, selectPageDropdownLabel, selectPageDropdownAccessibilityLabel, - selectPageDropdownRippleColor, - dropdownItemRippleColor, theme: themeOverrides, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const labelColor = color( - theme.isV3 ? theme.colors.onSurface : theme?.colors.text - ) - .alpha(0.6) - .rgb() - .string(); + const labelColor = theme.colors.onSurfaceVariant; return ( diff --git a/src/components/DataTable/DataTableRow.tsx b/src/components/DataTable/DataTableRow.tsx index 25491955d4..d492f4ce53 100644 --- a/src/components/DataTable/DataTableRow.tsx +++ b/src/components/DataTable/DataTableRow.tsx @@ -8,10 +8,7 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; - import { useInternalTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; import type { $RemoveChildren, ThemeProp } from '../../types'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; @@ -66,12 +63,7 @@ const DataTableRow = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const borderBottomColor = theme.isV3 - ? theme.colors.surfaceVariant - : color(theme.dark ? white : black) - .alpha(0.12) - .rgb() - .string(); + const borderBottomColor = theme.colors.surfaceVariant; return ( { const { right, left } = useSafeAreaInsets(); const theme = useInternalTheme(themeOverrides); - const { isV3, dark, mode, colors, roundness } = theme; - const borderRadius = (isV3 ? 7 : 1) * roundness; - - const backgroundColorV2 = - dark && mode === 'adaptive' - ? overlay(DIALOG_ELEVATION, colors?.surface) - : colors?.surface; - const backgroundColor = isV3 - ? theme.colors.elevation.level3 - : backgroundColorV2; + const { roundness } = theme; + const borderRadius = 7 * roundness; + const backgroundColor = theme.colors.elevation.level3; return ( child != null && typeof child !== 'boolean') .map((child, i) => { - if (isV3) { - if (i === 0 && React.isValidElement(child)) { - return React.cloneElement(child, { - style: [{ marginTop: 24 }, child.props.style], - }); - } - } - - if ( - i === 0 && - React.isValidElement(child) && - child.type === DialogContent - ) { - // Dialog content is the first item, so we add a top padding + if (i === 0 && React.isValidElement(child)) { return React.cloneElement(child, { - style: [{ paddingTop: 24 }, child.props.style], + style: [{ marginTop: 24 }, child.props.style], }); } diff --git a/src/components/Dialog/DialogActions.tsx b/src/components/Dialog/DialogActions.tsx index cabebd2fe2..3a3d646832 100644 --- a/src/components/Dialog/DialogActions.tsx +++ b/src/components/Dialog/DialogActions.tsx @@ -47,21 +47,18 @@ export type Props = React.ComponentPropsWithRef & { * ``` */ const DialogActions = (props: Props) => { - const { isV3 } = useInternalTheme(props.theme); + useInternalTheme(props.theme); const actionsLength = React.Children.toArray(props.children).length; return ( - + {React.Children.map(props.children, (child, i) => React.isValidElement(child) ? React.cloneElement(child, { compact: true, - uppercase: !isV3, + uppercase: false, style: [ - isV3 && { + { marginRight: i + 1 === actionsLength ? 0 : 8, }, child.props.style, @@ -77,12 +74,6 @@ DialogActions.displayName = 'Dialog.Actions'; const styles = StyleSheet.create({ container: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'flex-end', - padding: 8, - }, - v3Container: { flexDirection: 'row', flexGrow: 1, alignItems: 'center', diff --git a/src/components/Dialog/DialogIcon.tsx b/src/components/Dialog/DialogIcon.tsx index ad5841b93a..172e9b4109 100644 --- a/src/components/Dialog/DialogIcon.tsx +++ b/src/components/Dialog/DialogIcon.tsx @@ -70,10 +70,6 @@ const DialogIcon = ({ }: Props) => { const theme = useInternalTheme(themeOverrides); - if (!theme.isV3) { - return null; - } - //@ts-ignore const iconColor = color || theme.colors.secondary; diff --git a/src/components/Dialog/DialogScrollArea.tsx b/src/components/Dialog/DialogScrollArea.tsx index 66fdcef6a0..6228bf2400 100644 --- a/src/components/Dialog/DialogScrollArea.tsx +++ b/src/components/Dialog/DialogScrollArea.tsx @@ -51,22 +51,12 @@ export type Props = React.ComponentPropsWithRef & { const DialogScrollArea = (props: Props) => { const theme = useInternalTheme(props.theme); const borderStyles = { - borderColor: theme.isV3 - ? theme.colors.surfaceVariant - : 'rgba(0, 0, 0, .12)', - borderTopWidth: theme.isV3 ? 1 : StyleSheet.hairlineWidth, - borderBottomWidth: theme.isV3 ? 1 : StyleSheet.hairlineWidth, + borderColor: theme.colors.surfaceVariant, + borderTopWidth: 1, + borderBottomWidth: 1, }; return ( - + {props.children} ); @@ -79,8 +69,6 @@ const styles = StyleSheet.create({ paddingHorizontal: 24, flexGrow: 1, flexShrink: 1, - }, - v3Container: { marginBottom: 24, }, }); diff --git a/src/components/Dialog/DialogTitle.tsx b/src/components/Dialog/DialogTitle.tsx index 9953fc506c..6158cfbefc 100644 --- a/src/components/Dialog/DialogTitle.tsx +++ b/src/components/Dialog/DialogTitle.tsx @@ -4,9 +4,8 @@ import { StyleProp, StyleSheet, TextStyle } from 'react-native'; import { useInternalTheme } from '../../core/theming'; import type { ThemeProp } from '../../types'; import Text from '../Typography/Text'; -import Title from '../Typography/v2/Title'; -export type Props = React.ComponentPropsWithRef & { +export type Props = React.ComponentPropsWithRef & { /** * Title text for the `DialogTitle`. */ @@ -53,24 +52,22 @@ const DialogTitle = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3, colors, fonts } = theme; - - const TextComponent = isV3 ? Text : Title; + const { colors, fonts } = theme; const headerTextStyle = { - color: isV3 ? colors.onSurface : colors?.text, - ...(isV3 ? fonts.headlineSmall : {}), + color: colors.onSurface, + ...fonts.headlineSmall, }; return ( - {children} - + ); }; @@ -78,13 +75,9 @@ DialogTitle.displayName = 'Dialog.Title'; const styles = StyleSheet.create({ text: { - marginTop: 22, - marginBottom: 18, - marginHorizontal: 24, - }, - v3Text: { marginTop: 16, marginBottom: 16, + marginHorizontal: 24, }, }); diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx index be30d94c7c..31c4c2991a 100644 --- a/src/components/Divider.tsx +++ b/src/components/Divider.tsx @@ -1,10 +1,7 @@ import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; -import color from 'color'; - import { useInternalTheme } from '../core/theming'; -import { black, white } from '../styles/themes/v2/colors'; import type { $RemoveChildren, ThemeProp } from '../types'; export type Props = $RemoveChildren & { @@ -60,23 +57,18 @@ const Divider = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { dark: isDarkTheme, isV3 } = theme; - - const dividerColor = isV3 - ? theme.colors.outlineVariant - : color(isDarkTheme ? white : black) - .alpha(0.12) - .rgb() - .string(); return ( @@ -85,9 +77,6 @@ const Divider = ({ const styles = StyleSheet.create({ leftInset: { - marginLeft: 72, - }, - v3LeftInset: { marginLeft: 16, }, horizontalInset: { diff --git a/src/components/Drawer/DrawerCollapsedItem.tsx b/src/components/Drawer/DrawerCollapsedItem.tsx index 9fb461e9c5..c10c7ac0b6 100644 --- a/src/components/Drawer/DrawerCollapsedItem.tsx +++ b/src/components/Drawer/DrawerCollapsedItem.tsx @@ -111,7 +111,6 @@ const DrawerCollapsedItem = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; const { scale } = theme.animation; const [numOfLines, setNumOfLines] = React.useState(1); @@ -126,10 +125,6 @@ const DrawerCollapsedItem = ({ } }, [animScale, active]); - if (!isV3) { - return null; - } - const handlePressOut = () => { Animated.timing(animScale, { toValue: 1, @@ -163,7 +158,7 @@ const DrawerCollapsedItem = ({ const labelTextStyle = { color: labelColor, - ...(isV3 ? theme.fonts.labelMedium : {}), + ...theme.fonts.labelMedium, }; const icon = diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx index 604df1b83b..e556e61a07 100644 --- a/src/components/Drawer/DrawerItem.tsx +++ b/src/components/Drawer/DrawerItem.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { - ColorValue, GestureResponderEvent, PressableAndroidRippleConfig, StyleProp, @@ -9,8 +8,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; - import { useInternalTheme } from '../../core/theming'; import type { ThemeProp } from '../../types'; import Icon, { IconSource } from '../Icon'; @@ -57,10 +54,6 @@ export type Props = React.ComponentPropsWithRef & { * Specifies the largest possible scale a label font can reach. */ labelMaxFontSizeMultiplier?: number; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Sets additional distance outside of element in which a press can be detected. */ @@ -97,7 +90,6 @@ const DrawerItem = ({ active, disabled, theme: themeOverrides, - rippleColor: customRippleColor, style, onPress, background, @@ -108,27 +100,16 @@ const DrawerItem = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { roundness, isV3 } = theme; + const { roundness } = theme; - const backgroundColor = active - ? isV3 - ? theme.colors.secondaryContainer - : color(theme.colors.primary).alpha(0.12).rgb().string() - : undefined; + const backgroundColor = active ? theme.colors.secondaryContainer : undefined; const contentColor = active - ? isV3 - ? theme.colors.onSecondaryContainer - : theme.colors.primary - : isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.68).rgb().string(); + ? theme.colors.onSecondaryContainer + : theme.colors.onSurfaceVariant; - const labelMargin = icon ? (isV3 ? 12 : 32) : 0; - const borderRadius = (isV3 ? 7 : 1) * roundness; - const rippleColor = isV3 - ? color(contentColor).alpha(0.12).rgb().string() - : undefined; - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; + const labelMargin = icon ? 12 : 0; + const borderRadius = 7 * roundness; + const font = theme.fonts.labelLarge; return ( @@ -137,20 +118,14 @@ const DrawerItem = ({ disabled={disabled} background={background} onPress={onPress} - style={[ - styles.container, - { backgroundColor, borderRadius }, - isV3 && styles.v3Container, - style, - ]} + style={[styles.container, { backgroundColor, borderRadius }, style]} accessibilityRole="button" accessibilityState={{ selected: active }} accessibilityLabel={accessibilityLabel} - rippleColor={customRippleColor || rippleColor} theme={theme} hitSlop={hitSlop} > - + {icon ? ( @@ -184,10 +159,6 @@ DrawerItem.displayName = 'Drawer.Item'; const styles = StyleSheet.create({ container: { - marginHorizontal: 10, - marginVertical: 4, - }, - v3Container: { justifyContent: 'center', height: 56, marginLeft: 12, @@ -197,12 +168,9 @@ const styles = StyleSheet.create({ wrapper: { flexDirection: 'row', alignItems: 'center', - padding: 8, - }, - v3Wrapper: { + padding: 0, marginLeft: 16, marginRight: 24, - padding: 0, }, content: { flex: 1, diff --git a/src/components/Drawer/DrawerSection.tsx b/src/components/Drawer/DrawerSection.tsx index ed79c5e054..3988f4e900 100644 --- a/src/components/Drawer/DrawerSection.tsx +++ b/src/components/Drawer/DrawerSection.tsx @@ -1,10 +1,8 @@ import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; -import color from 'color'; - import { useInternalTheme } from '../../core/theming'; -import { MD3Colors } from '../../styles/themes/v3/tokens'; +import { Colors } from '../../styles/themes/tokens'; import type { ThemeProp } from '../../types'; import Divider from '../Divider'; import Text from '../Typography/Text'; @@ -73,17 +71,14 @@ const DrawerSection = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; - const titleColor = isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.54).rgb().string(); - const titleMargin = isV3 ? 28 : 16; - const font = isV3 ? theme.fonts.titleSmall : theme.fonts.medium; + const titleColor = theme.colors.onSurfaceVariant; + const titleMargin = 28; + const font = theme.fonts.titleSmall; return ( {title && ( - + {title && ( + )} ); @@ -121,17 +112,12 @@ const styles = StyleSheet.create({ marginBottom: 4, }, titleContainer: { - height: 40, - justifyContent: 'center', - }, - v3TitleContainer: { height: 56, + justifyContent: 'center', }, divider: { marginTop: 4, - }, - v3Divider: { - backgroundColor: MD3Colors.neutralVariant50, + backgroundColor: Colors.neutralVariant50, }, }); diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx index ecfe7e1c60..f1f2baabe4 100644 --- a/src/components/FAB/AnimatedFAB.tsx +++ b/src/components/FAB/AnimatedFAB.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import type { AccessibilityState, - ColorValue, NativeSyntheticEvent, PressableAndroidRippleConfig, TextLayoutEventData, @@ -20,8 +19,6 @@ import { Text, } from 'react-native'; -import color from 'color'; - import { getCombinedStyles, getFABColors, getLabelSizeWeb } from './utils'; import { useInternalTheme } from '../../core/theming'; import type { $Omit, $RemoveChildren, ThemeProp } from '../../types'; @@ -67,14 +64,6 @@ export type Props = $Omit<$RemoveChildren, 'mode'> & { * Custom color for the icon and label of the `FAB`. */ color?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; - /** - * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch. - */ - disabled?: boolean; /** * Whether `FAB` is currently visible. */ @@ -129,7 +118,6 @@ export type Props = $Omit<$RemoveChildren, 'mode'> & { }; const SIZE = 56; -const SCALE = 0.9; /** * An animated, extending horizontally floating action button represents the primary action in an application. @@ -214,8 +202,6 @@ const AnimatedFAB = ({ accessibilityLabel = label, accessibilityState, color: customColor, - rippleColor: customRippleColor, - disabled, onPress, onLongPress, delayLongPress, @@ -233,7 +219,7 @@ const AnimatedFAB = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const uppercase: boolean = uppercaseProp ?? !theme.isV3; + const uppercase: boolean = uppercaseProp ?? false; const isIOS = Platform.OS === 'ios'; const isWeb = Platform.OS === 'web'; const isAnimatedFromRight = animateFrom === 'right'; @@ -246,7 +232,7 @@ const AnimatedFAB = ({ const { current: animFAB } = React.useRef( new Animated.Value(0) ); - const { isV3, animation } = theme; + const { animation } = theme; const { scale } = animation; const labelSize = isWeb ? getLabelSizeWeb(labelRef) : null; @@ -257,7 +243,7 @@ const AnimatedFAB = ({ labelSize?.height ?? 0 ); - const borderRadius = SIZE / (isV3 ? 3.5 : 2); + const borderRadius = SIZE / 3.5; React.useEffect(() => { if (!isWeb) { @@ -309,14 +295,10 @@ const AnimatedFAB = ({ const { backgroundColor, foregroundColor } = getFABColors({ theme, variant, - disabled, customColor, customBackgroundColor, }); - const rippleColor = - customRippleColor || color(foregroundColor).alpha(0.12).rgb().string(); - const extendedWidth = textWidth + SIZE + borderRadius; const distance = isAnimatedFromRight @@ -364,23 +346,16 @@ const AnimatedFAB = ({ animFAB, }); - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; + const font = theme.fonts.labelLarge; const textStyle = { color: foregroundColor, ...font, }; - const md2Elevation = disabled || !isIOS ? 0 : 6; - const md3Elevation = disabled || !isIOS ? 0 : 3; - - const shadowStyle = isV3 ? styles.v3Shadow : styles.shadow; - const baseStyle = [ - StyleSheet.absoluteFill, - disabled ? styles.disabled : shadowStyle, - ]; + const elevation = !isIOS ? 0 : 3; - const newAccessibilityState = { ...accessibilityState, disabled }; + const baseStyle = [StyleSheet.absoluteFill, styles.shadow]; return ( - + , 'mode'> & { * Custom color for the icon and label of the `FAB`. */ color?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; - /** - * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch. - */ - disabled?: boolean; /** * Whether `FAB` is currently visible. */ @@ -189,8 +180,6 @@ const FAB = forwardRef( accessibilityState, animated = true, color: customColor, - rippleColor: customRippleColor, - disabled, onPress, onLongPress, delayLongPress, @@ -210,11 +199,11 @@ const FAB = forwardRef( ref ) => { const theme = useInternalTheme(themeOverrides); - const uppercase = uppercaseProp ?? !theme.isV3; + const uppercase = uppercaseProp ?? false; const { current: visibility } = React.useRef( new Animated.Value(visible ? 1 : 0) ); - const { isV3, animation } = theme; + const { animation } = theme; const { scale } = animation; React.useEffect(() => { @@ -242,20 +231,18 @@ const FAB = forwardRef( backgroundColor: customBackgroundColor, } = (StyleSheet.flatten(style) || {}) as ViewStyle; - const { backgroundColor, foregroundColor, rippleColor } = getFABColors({ + const { backgroundColor, foregroundColor } = getFABColors({ theme, variant, - disabled, customColor, customBackgroundColor, - customRippleColor, }); const isLargeSize = size === 'large'; const isFlatMode = mode === 'flat'; const iconSize = isLargeSize ? 36 : 24; const loadingIndicatorSize = isLargeSize ? 24 : 18; - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; + const font = theme.fonts.labelLarge; const extendedStyle = getExtendedFabStyle({ customSize, theme }); const textStyle = { @@ -263,9 +250,7 @@ const FAB = forwardRef( ...font, }; - const md3Elevation = isFlatMode || disabled ? 0 : 3; - - const newAccessibilityState = { ...accessibilityState, disabled }; + const elevation = isFlatMode ? 0 : 3; return ( ( }, ], }, - !isV3 && styles.elevated, - !isV3 && disabled && styles.disabled, style, ]} pointerEvents={visible ? 'auto' : 'none'} testID={`${testID}-container`} - {...(isV3 && { elevation: md3Elevation })} + elevation={elevation} container > ( onPress={onPress} onLongPress={onLongPress} delayLongPress={delayLongPress} - rippleColor={rippleColor} - disabled={disabled} accessibilityLabel={accessibilityLabel} accessibilityRole="button" - accessibilityState={newAccessibilityState} + accessibilityState={accessibilityState} testID={testID} style={{ borderRadius }} {...rest} @@ -361,9 +342,6 @@ const styles = StyleSheet.create({ uppercaseLabel: { textTransform: 'uppercase', }, - disabled: { - elevation: 0, - }, }); export default FAB; diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx index ca263e3499..6c09fadf7e 100644 --- a/src/components/FAB/FABGroup.tsx +++ b/src/components/FAB/FABGroup.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { Animated, - ColorValue, GestureResponderEvent, Pressable, StyleProp, @@ -43,7 +42,6 @@ export type Props = { * - `toggleStackOnLongPress`: callback that is called when `FAB` is long pressed * - `size`: size of action item. Defaults to `small`. @supported Available in v5.x * - `testID`: testID to be used on tests - * - `rippleColor`: color of the ripple effect. */ actions: Array<{ icon: IconSource; @@ -60,7 +58,6 @@ export type Props = { onPress: (e: GestureResponderEvent) => void; size?: 'small' | 'medium'; testID?: string; - rippleColor?: ColorValue; }>; /** * Icon to display for the `FAB`. @@ -79,10 +76,6 @@ export type Props = { * Custom backdrop color for opened speed dial background. */ backdropColor?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Function to execute on pressing the `FAB`. */ @@ -221,7 +214,6 @@ const FABGroup = ({ variant = 'primary', enableLongPressWhenStackOpened = false, backdropColor: customBackdropColor, - rippleColor, }: Props) => { const theme = useInternalTheme(themeOverrides); const { top, bottom, right, left } = useSafeAreaInsets(); @@ -250,7 +242,6 @@ const FABGroup = ({ >(null); const { scale } = theme.animation; - const { isV3 } = theme; React.useEffect(() => { if (open) { @@ -262,7 +253,7 @@ const FABGroup = ({ useNativeDriver: true, }), Animated.stagger( - isV3 ? 15 : 50 * scale, + 15, animations.current .map((animation) => Animated.timing(animation, { @@ -294,7 +285,7 @@ const FABGroup = ({ } }); } - }, [open, actions, backdrop, scale, isV3]); + }, [open, actions, backdrop, scale]); const close = () => onStateChange({ open: false }); const toggle = () => onStateChange({ open: !open }); @@ -326,14 +317,6 @@ const FABGroup = ({ : backdrop; const opacities = animations.current; - const scales = opacities.map((opacity) => - open - ? opacity.interpolate({ - inputRange: [0, 1], - outputRange: [0.5, 1], - }) - : 1 - ); const translations = opacities.map((opacity) => open @@ -395,7 +378,7 @@ const FABGroup = ({ {actions.map((it, i) => { const labelTextStyle = { color: it.labelTextColor ?? labelColor, - ...(isV3 ? theme.fonts.titleMedium : {}), + ...theme.fonts.titleMedium, }; const marginHorizontal = typeof it.size === 'undefined' || it.size === 'small' ? 24 : 16; @@ -430,7 +413,7 @@ const FABGroup = ({ {it.label && ( @@ -467,11 +445,10 @@ const FABGroup = ({ color={it.color} style={[ { - transform: [{ scale: scales[i] }], + transform: [{ translateY: translations[i] }], opacity: opacities[i], backgroundColor: stackedFABBackgroundColor, }, - isV3 && { transform: [{ translateY: translations[i] }] }, it.style, ]} accessibilityElementsHidden={true} @@ -480,7 +457,6 @@ const FABGroup = ({ importantForAccessibility="no-hide-descendants" testID={it.testID} visible={open} - rippleColor={it.rippleColor} /> ); @@ -501,7 +477,6 @@ const FABGroup = ({ label={label} testID={testID} variant={variant} - rippleColor={rippleColor} /> @@ -531,13 +506,15 @@ const styles = StyleSheet.create({ backdrop: { ...StyleSheet.absoluteFillObject, }, + // eslint-disable-next-line react-native/no-color-literals containerStyle: { borderRadius: 5, paddingHorizontal: 12, paddingVertical: 6, marginVertical: 8, marginHorizontal: 16, - elevation: 2, + elevation: 0, + backgroundColor: 'transparent', }, item: { marginBottom: 16, @@ -545,9 +522,4 @@ const styles = StyleSheet.create({ justifyContent: 'flex-end', alignItems: 'center', }, - // eslint-disable-next-line react-native/no-color-literals - v3ContainerStyle: { - backgroundColor: 'transparent', - elevation: 0, - }, }); diff --git a/src/components/FAB/utils.ts b/src/components/FAB/utils.ts index e87d24019f..2eeea39010 100644 --- a/src/components/FAB/utils.ts +++ b/src/components/FAB/utils.ts @@ -7,11 +7,7 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; - -import { black, white } from '../../styles/themes/v2/colors'; import type { InternalTheme } from '../../types'; -import getContrastingColor from '../../utils/getContrastingColor'; type GetCombinedStylesProps = { isAnimatedFromRight: boolean; @@ -31,7 +27,6 @@ type Variant = 'primary' | 'secondary' | 'tertiary' | 'surface'; type BaseProps = { isVariant: (variant: Variant) => boolean; theme: InternalTheme; - disabled?: boolean; }; export const getCombinedStyles = ({ @@ -167,117 +162,75 @@ export const getCombinedStyles = ({ const getBackgroundColor = ({ theme, isVariant, - disabled, customBackgroundColor, }: BaseProps & { customBackgroundColor?: ColorValue }) => { - if (customBackgroundColor && !disabled) { + if (customBackgroundColor) { return customBackgroundColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.surfaceDisabled; - } - - if (isVariant('primary')) { - return theme.colors.primaryContainer; - } - - if (isVariant('secondary')) { - return theme.colors.secondaryContainer; - } + if (isVariant('primary')) { + return theme.colors.primaryContainer; + } - if (isVariant('tertiary')) { - return theme.colors.tertiaryContainer; - } + if (isVariant('secondary')) { + return theme.colors.secondaryContainer; + } - if (isVariant('surface')) { - return theme.colors.elevation.level3; - } + if (isVariant('tertiary')) { + return theme.colors.tertiaryContainer; } - if (disabled) { - if (theme.dark) { - return color(white).alpha(0.12).rgb().string(); - } - return color(black).alpha(0.12).rgb().string(); + if (isVariant('surface')) { + return theme.colors.elevation.level3; } - //@ts-ignore - return theme.colors?.accent; + return theme.colors.primaryContainer; }; const getForegroundColor = ({ theme, isVariant, - disabled, - backgroundColor, customColor, -}: BaseProps & { backgroundColor: string; customColor?: string }) => { - if (typeof customColor !== 'undefined' && !disabled) { +}: BaseProps & { customColor?: string }) => { + if (typeof customColor !== 'undefined') { return customColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (isVariant('primary')) { - return theme.colors.onPrimaryContainer; - } - - if (isVariant('secondary')) { - return theme.colors.onSecondaryContainer; - } - - if (isVariant('tertiary')) { - return theme.colors.onTertiaryContainer; - } + if (isVariant('primary')) { + return theme.colors.onPrimaryContainer; + } - if (isVariant('surface')) { - return theme.colors.primary; - } + if (isVariant('secondary')) { + return theme.colors.onSecondaryContainer; } - if (disabled) { - if (theme.dark) { - return color(white).alpha(0.32).rgb().string(); - } - return color(black).alpha(0.32).rgb().string(); + if (isVariant('tertiary')) { + return theme.colors.onTertiaryContainer; } - if (backgroundColor) { - return getContrastingColor( - backgroundColor || white, - white, - 'rgba(0, 0, 0, .54)' - ); + if (isVariant('surface')) { + return theme.colors.primary; } - return getContrastingColor(white, white, 'rgba(0, 0, 0, .54)'); + return theme.colors.onPrimaryContainer; }; export const getFABColors = ({ theme, variant, - disabled, customColor, customBackgroundColor, - customRippleColor, }: { theme: InternalTheme; variant: string; - disabled?: boolean; customColor?: string; customBackgroundColor?: ColorValue; - customRippleColor?: ColorValue; }) => { const isVariant = (variantToCompare: Variant) => { return variant === variantToCompare; }; - const baseFABColorProps = { theme, isVariant, disabled }; + const baseFABColorProps = { theme, isVariant }; const backgroundColor = getBackgroundColor({ ...baseFABColorProps, @@ -287,27 +240,16 @@ export const getFABColors = ({ const foregroundColor = getForegroundColor({ ...baseFABColorProps, customColor, - backgroundColor, }); return { backgroundColor, foregroundColor, - rippleColor: - customRippleColor || color(foregroundColor).alpha(0.12).rgb().string(), }; }; const getLabelColor = ({ theme }: { theme: InternalTheme }) => { - if (theme.isV3) { - return theme.colors.onSurface; - } - - if (theme.dark) { - return theme.colors.text; - } - - return color(theme.colors.text).fade(0.54).rgb().string(); + return theme.colors.onSurface; }; const getBackdropColor = ({ @@ -320,17 +262,11 @@ const getBackdropColor = ({ if (customBackdropColor) { return customBackdropColor; } - if (theme.isV3) { - return color(theme.colors.background).alpha(0.95).rgb().string(); - } - return theme.colors?.backdrop; + return theme.colors.scrim; }; const getStackedFABBackgroundColor = ({ theme }: { theme: InternalTheme }) => { - if (theme.isV3) { - return theme.colors.elevation.level3; - } - return theme.colors.surface; + return theme.colors.elevation.level3; }; export const getFABGroupColors = ({ @@ -347,25 +283,15 @@ export const getFABGroupColors = ({ }; }; -const standardSize = { - height: 56, - width: 56, - borderRadius: 28, -}; const smallSize = { height: 40, width: 40, - borderRadius: 28, -}; -const v3SmallSize = { - height: 40, - width: 40, }; -const v3MediumSize = { +const mediumSize = { height: 56, width: 56, }; -const v3LargeSize = { +const largeSize = { height: 96, width: 96, }; @@ -385,33 +311,21 @@ export const getFabStyle = ({ size: 'small' | 'medium' | 'large'; theme: InternalTheme; }) => { - const { isV3, roundness } = theme; + const { roundness } = theme; if (customSize) return getCustomFabSize(customSize, roundness); - if (isV3) { - switch (size) { - case 'small': - return { ...v3SmallSize, borderRadius: 3 * roundness }; - case 'medium': - return { ...v3MediumSize, borderRadius: 4 * roundness }; - case 'large': - return { ...v3LargeSize, borderRadius: 7 * roundness }; - } + switch (size) { + case 'small': + return { ...smallSize, borderRadius: 3 * roundness }; + case 'medium': + return { ...mediumSize, borderRadius: 4 * roundness }; + case 'large': + return { ...largeSize, borderRadius: 7 * roundness }; } - - if (size === 'small') { - return smallSize; - } - return standardSize; }; const extended = { - height: 48, - paddingHorizontal: 16, -}; - -const v3Extended = { height: 56, borderRadius: 16, paddingHorizontal: 16, @@ -424,16 +338,13 @@ const getExtendedFabDimensions = (customSize: number) => ({ export const getExtendedFabStyle = ({ customSize, - theme, }: { customSize?: number; theme: InternalTheme; }) => { if (customSize) return getExtendedFabDimensions(customSize); - const { isV3 } = theme; - - return isV3 ? v3Extended : extended; + return extended; }; let cachedContext: CanvasRenderingContext2D | null = null; diff --git a/src/components/HelperText/HelperText.tsx b/src/components/HelperText/HelperText.tsx index 8043968cff..6fc44d58a5 100644 --- a/src/components/HelperText/HelperText.tsx +++ b/src/components/HelperText/HelperText.tsx @@ -5,6 +5,7 @@ import { StyleProp, StyleSheet, TextStyle, + View, } from 'react-native'; import { getTextColor } from './utils'; @@ -122,36 +123,42 @@ const HelperText = ({ textHeight = e.nativeEvent.layout.height; }; - const textColor = getTextColor({ theme, disabled, type }); + const { color: textColor, opacity: textOpacity } = getTextColor({ + theme, + disabled, + type, + }); return ( - - {rest.children} - + + + {rest.children} + + ); }; diff --git a/src/components/HelperText/utils.ts b/src/components/HelperText/utils.ts index 4134175416..214948c767 100644 --- a/src/components/HelperText/utils.ts +++ b/src/components/HelperText/utils.ts @@ -1,7 +1,8 @@ -import color from 'color'; - +import { tokens } from '../../styles/themes/tokens'; import type { InternalTheme } from '../../types'; +const { stateOpacity } = tokens.md.ref; + type BaseProps = { theme: InternalTheme; disabled?: boolean; @@ -9,22 +10,19 @@ type BaseProps = { }; export function getTextColor({ theme, disabled, type }: BaseProps) { - const { colors, dark } = theme; - if (type === 'error') { - return colors?.error; + return { color: theme.colors.error, opacity: stateOpacity.enabled }; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } else { - return theme.colors.onSurfaceVariant; - } + if (disabled) { + return { + color: theme.colors.onSurfaceVariant, + opacity: stateOpacity.disabled, + }; } - return color(theme?.colors?.text) - .alpha(dark ? 0.7 : 0.54) - .rgb() - .string(); + return { + color: theme.colors.onSurfaceVariant, + opacity: stateOpacity.enabled, + }; } diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index b3d26c699d..3e1f943ea1 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -86,12 +86,12 @@ export type Props = IconProps & { * ## Usage * ```js * import * as React from 'react'; - * import { Icon, MD3Colors } from 'react-native-paper'; + * import { Icon, Colors } from 'react-native-paper'; * * const MyComponent = () => ( * * ); @@ -122,8 +122,7 @@ const Icon = ({ typeof source === 'object' && source.direction && source.source ? source.source : source; - const iconColor = - color || (theme.isV3 ? theme.colors.onSurface : theme.colors.text); + const iconColor = color || theme.colors.onSurface; if (isImageSource(s)) { return ( diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx index 47a87901ca..1e03f2c923 100644 --- a/src/components/IconButton/IconButton.tsx +++ b/src/components/IconButton/IconButton.tsx @@ -6,7 +6,6 @@ import { ViewStyle, View, Animated, - ColorValue, } from 'react-native'; import { getIconButtonColor } from './utils'; @@ -42,10 +41,6 @@ export type Props = Omit<$RemoveChildren, 'style'> & { * Background color of the icon container. */ containerColor?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * @supported Available in v5.x with theme version 3 * Whether icon button is selected. A selected button receives alternative combination of icon and container colors. @@ -120,7 +115,6 @@ const IconButton = forwardRef( icon, iconColor: customIconColor, containerColor: customContainerColor, - rippleColor: customRippleColor, size = 24, accessibilityLabel, disabled, @@ -138,25 +132,28 @@ const IconButton = forwardRef( ref ) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; const IconComponent = animated ? CrossFadeIcon : Icon; - const { iconColor, rippleColor, backgroundColor, borderColor } = - getIconButtonColor({ - theme, - disabled, - selected, - mode, - customIconColor, - customContainerColor, - customRippleColor, - }); + const { + iconColor, + iconOpacity, + backgroundColor, + borderColor, + backgroundOpacity, + } = getIconButtonColor({ + theme, + disabled, + selected, + mode, + customIconColor, + customContainerColor, + }); - const buttonSize = isV3 ? size + 2 * PADDING : size * 1.5; + const buttonSize = size + 2 * PADDING; const { - borderWidth = isV3 && mode === 'outlined' && !selected ? 1 : 0, + borderWidth = mode === 'outlined' && !selected ? 1 : 0, borderRadius = buttonSize / 2, } = (StyleSheet.flatten(style) || {}) as ViewStyle; @@ -172,23 +169,31 @@ const IconButton = forwardRef( testID={`${testID}-container`} style={[ { - backgroundColor, + backgroundColor: + backgroundOpacity < 1 ? undefined : backgroundColor, width: buttonSize, height: buttonSize, }, styles.container, borderStyles, - !isV3 && disabled && styles.disabled, style, ]} container - {...(isV3 && { elevation: 0 })} + elevation={0} > + {backgroundOpacity < 1 && ( + + )} ( testID={testID} {...rest} > - {loading ? ( - - ) : ( - - )} + + {loading ? ( + + ) : ( + + )} + ); @@ -227,9 +234,6 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', }, - disabled: { - opacity: 0.32, - }, }); export default IconButton; diff --git a/src/components/IconButton/utils.ts b/src/components/IconButton/utils.ts index e5e9d86145..aa1c5d65b7 100644 --- a/src/components/IconButton/utils.ts +++ b/src/components/IconButton/utils.ts @@ -1,9 +1,8 @@ -import type { ColorValue } from 'react-native'; - -import color from 'color'; - +import { tokens } from '../../styles/themes/tokens'; import type { InternalTheme } from '../../types'; +const { stateOpacity } = tokens.md.ref; + type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal'; type BaseProps = { @@ -13,24 +12,6 @@ type BaseProps = { selected?: boolean; }; -const getBorderColor = ({ - theme, - disabled, -}: { - theme: InternalTheme; - disabled?: boolean; -}) => { - if (theme.isV3) { - if (disabled) { - return theme.colors.surfaceDisabled; - } - - return theme.colors.outline; - } - - return undefined; -}; - const getBackgroundColor = ({ theme, isMode, @@ -38,40 +19,34 @@ const getBackgroundColor = ({ selected, customContainerColor, }: BaseProps & { customContainerColor?: string }) => { - if (theme.isV3) { - if (disabled) { - if (isMode('contained') || isMode('contained-tonal')) { - return theme.colors.surfaceDisabled; - } - } - - if (typeof customContainerColor !== 'undefined') { - return customContainerColor; + if (disabled) { + if (isMode('contained') || isMode('contained-tonal')) { + return theme.colors.onSurface; } + } - if (isMode('contained')) { - if (selected) { - return theme.colors.primary; - } - return theme.colors.surfaceVariant; - } + if (typeof customContainerColor !== 'undefined') { + return customContainerColor; + } - if (isMode('contained-tonal')) { - if (selected) { - return theme.colors.secondaryContainer; - } - return theme.colors.surfaceVariant; + if (isMode('contained')) { + if (selected) { + return theme.colors.primary; } + return theme.colors.surfaceVariant; + } - if (isMode('outlined')) { - if (selected) { - return theme.colors.inverseSurface; - } + if (isMode('contained-tonal')) { + if (selected) { + return theme.colors.secondaryContainer; } + return theme.colors.surfaceVariant; } - if (typeof customContainerColor !== 'undefined') { - return customContainerColor; + if (isMode('outlined')) { + if (selected) { + return theme.colors.inverseSurface; + } } return undefined; @@ -84,65 +59,39 @@ const getIconColor = ({ selected, customIconColor, }: BaseProps & { customIconColor?: string }) => { - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (typeof customIconColor !== 'undefined') { - return customIconColor; - } - - if (isMode('contained')) { - if (selected) { - return theme.colors.onPrimary; - } - return theme.colors.primary; - } + if (disabled) { + return theme.colors.onSurface; + } - if (isMode('contained-tonal')) { - if (selected) { - return theme.colors.onSecondaryContainer; - } - return theme.colors.onSurfaceVariant; - } + if (typeof customIconColor !== 'undefined') { + return customIconColor; + } - if (isMode('outlined')) { - if (selected) { - return theme.colors.inverseOnSurface; - } - return theme.colors.onSurfaceVariant; + if (isMode('contained')) { + if (selected) { + return theme.colors.onPrimary; } + return theme.colors.primary; + } + if (isMode('contained-tonal')) { if (selected) { - return theme.colors.primary; + return theme.colors.onSecondaryContainer; } return theme.colors.onSurfaceVariant; } - if (typeof customIconColor !== 'undefined') { - return customIconColor; + if (isMode('outlined')) { + if (selected) { + return theme.colors.inverseOnSurface; + } + return theme.colors.onSurfaceVariant; } - return theme.colors.text; -}; - -const getRippleColor = ({ - theme, - iconColor, - customRippleColor, -}: { - theme: InternalTheme; - iconColor: string; - customRippleColor?: ColorValue; -}) => { - if (customRippleColor) { - return customRippleColor; - } - if (theme.isV3) { - return color(iconColor).alpha(0.12).rgb().string(); + if (selected) { + return theme.colors.primary; } - return color(iconColor).alpha(0.32).rgb().string(); + return theme.colors.onSurfaceVariant; }; export const getIconButtonColor = ({ @@ -152,7 +101,6 @@ export const getIconButtonColor = ({ selected, customIconColor, customContainerColor, - customRippleColor, }: { theme: InternalTheme; disabled?: boolean; @@ -160,7 +108,6 @@ export const getIconButtonColor = ({ mode?: IconButtonMode; customIconColor?: string; customContainerColor?: string; - customRippleColor?: ColorValue; }) => { const isMode = (modeToCompare: IconButtonMode) => { return mode === modeToCompare; @@ -178,13 +125,23 @@ export const getIconButtonColor = ({ customIconColor, }); + const iconOpacity = disabled ? stateOpacity.disabled : stateOpacity.enabled; + + const backgroundColor = getBackgroundColor({ + ...baseIconColorProps, + customContainerColor, + }); + + const backgroundOpacity = + disabled && (isMode('contained') || isMode('contained-tonal')) + ? stateOpacity.pressed + : stateOpacity.enabled; + return { iconColor, - backgroundColor: getBackgroundColor({ - ...baseIconColorProps, - customContainerColor, - }), - rippleColor: getRippleColor({ theme, iconColor, customRippleColor }), - borderColor: getBorderColor({ theme, disabled }), + iconOpacity, + backgroundColor, + borderColor: theme.colors.outlineVariant, + backgroundOpacity, }; }; diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx index 75505c7367..112001d5bd 100644 --- a/src/components/List/ListAccordion.tsx +++ b/src/components/List/ListAccordion.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { - ColorValue, GestureResponderEvent, I18nManager, NativeSyntheticEvent, @@ -93,10 +92,6 @@ export type Props = { * Style that is passed to Description element. */ descriptionStyle?: StyleProp; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Truncate Title text such that the total number of lines does not * exceed this number. @@ -186,7 +181,6 @@ const ListAccordion = ({ descriptionStyle, titleNumberOfLines = 1, descriptionNumberOfLines = 2, - rippleColor: customRippleColor, style, containerStyle, contentStyle, @@ -212,9 +206,6 @@ const ListAccordion = ({ const onDescriptionTextLayout = ( event: NativeSyntheticEvent ) => { - if (!theme.isV3) { - return; - } const { nativeEvent } = event; setAlignToTop(nativeEvent.lines.length >= 2); }; @@ -241,12 +232,10 @@ const ListAccordion = ({ ? groupContext.expandedId === id : expandedInternal; - const { titleColor, descriptionColor, titleTextColor, rippleColor } = - getAccordionColors({ - theme, - isExpanded, - customRippleColor, - }); + const { descriptionColor, titleTextColor } = getAccordionColors({ + theme, + isExpanded, + }); const handlePress = groupContext && id !== undefined @@ -256,11 +245,10 @@ const ListAccordion = ({ {left ? left({ color: isExpanded ? theme.colors?.primary : descriptionColor, - style: getLeftStyles(alignToTop, description, theme.isV3), + style: getLeftStyles(alignToTop, description), }) : null} - + @@ -348,10 +330,7 @@ const ListAccordion = ({ !child.props.right ) { return React.cloneElement(child, { - style: [ - theme.isV3 ? styles.childV3 : styles.child, - child.props.style, - ], + style: [styles.child, child.props.style], theme, }); } @@ -366,18 +345,15 @@ const ListAccordion = ({ ListAccordion.displayName = 'List.Accordion'; const styles = StyleSheet.create({ - container: { - padding: 8, + item: { + marginVertical: 6, + paddingLeft: 8, }, - containerV3: { + container: { paddingVertical: 8, paddingRight: 24, }, row: { - flexDirection: 'row', - alignItems: 'center', - }, - rowV3: { flexDirection: 'row', marginVertical: 6, }, @@ -392,22 +368,13 @@ const styles = StyleSheet.create({ description: { fontSize: 14, }, - item: { - marginVertical: 6, - paddingLeft: 8, - }, - itemV3: { - paddingLeft: 16, - }, child: { - paddingLeft: 64, - }, - childV3: { paddingLeft: 40, }, content: { flex: 1, justifyContent: 'center', + paddingLeft: 16, }, }); diff --git a/src/components/List/ListIcon.tsx b/src/components/List/ListIcon.tsx index f1c7194c43..342a1b74cc 100644 --- a/src/components/List/ListIcon.tsx +++ b/src/components/List/ListIcon.tsx @@ -29,13 +29,13 @@ const ICON_SIZE = 24; * ## Usage * ```js * import * as React from 'react'; - * import { List, MD3Colors } from 'react-native-paper'; + * import { List, Colors } from 'react-native-paper'; * * const MyComponent = () => ( * <> - * - * - * + * + * + * * * ); * @@ -51,10 +51,7 @@ const ListIcon = ({ const theme = useInternalTheme(themeOverrides); return ( - + ); @@ -62,13 +59,6 @@ const ListIcon = ({ const styles = StyleSheet.create({ item: { - margin: 8, - height: 40, - width: 40, - alignItems: 'center', - justifyContent: 'center', - }, - itemV3: { alignItems: 'center', justifyContent: 'center', }, diff --git a/src/components/List/ListImage.tsx b/src/components/List/ListImage.tsx index 9839be7b02..141d45b689 100644 --- a/src/components/List/ListImage.tsx +++ b/src/components/List/ListImage.tsx @@ -7,7 +7,6 @@ import { ImageStyle, } from 'react-native'; -import { useInternalTheme } from '../../core/theming'; import type { ThemeProp } from '../../types'; export type Props = { @@ -26,7 +25,7 @@ export type Props = { * ## Usage * ```js * import * as React from 'react'; - * import { List, MD3Colors } from 'react-native-paper'; + * import { List, Colors } from 'react-native-paper'; * * const MyComponent = () => ( * <> @@ -38,20 +37,10 @@ export type Props = { * export default MyComponent; * ``` */ -const ListImage = ({ - style, - source, - variant = 'image', - theme: themeOverrides, -}: Props) => { - const theme = useInternalTheme(themeOverrides); +const ListImage = ({ style, source, variant = 'image' }: Props) => { const getStyles = () => { if (variant === 'video') { - if (!theme.isV3) { - return [style, styles.video]; - } - - return [style, styles.videoV3]; + return [style, styles.video]; } return [style, styles.image]; @@ -73,11 +62,6 @@ const styles = StyleSheet.create({ height: 56, }, video: { - width: 100, - height: 64, - marginLeft: 0, - }, - videoV3: { width: 114, height: 64, marginLeft: 0, diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index 467eb9b67a..61531ed464 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -10,8 +10,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; - import { Style, getLeftStyles, getRightStyles } from './utils'; import { useInternalTheme } from '../../core/theming'; import type { $RemoveChildren, EllipsizeProp, ThemeProp } from '../../types'; @@ -169,9 +167,6 @@ const ListItem = ( const onDescriptionTextLayout = ( event: NativeSyntheticEvent ) => { - if (!theme.isV3) { - return; - } const { nativeEvent } = event; setAlignToTop(nativeEvent.lines.length >= 2); }; @@ -206,9 +201,7 @@ const ListItem = ( }; const renderTitle = () => { - const titleColor = theme.isV3 - ? theme.colors.onSurface - : color(theme.colors.text).alpha(0.87).rgb().string(); + const titleColor = theme.colors.onSurface; return typeof title === 'function' ? ( title({ @@ -230,32 +223,26 @@ const ListItem = ( ); }; - const descriptionColor = theme.isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.54).rgb().string(); + const descriptionColor = theme.colors.onSurfaceVariant; return ( - + {left ? left({ color: descriptionColor, - style: getLeftStyles(alignToTop, description, theme.isV3), + style: getLeftStyles(alignToTop, description), }) : null} {renderTitle()} @@ -267,7 +254,7 @@ const ListItem = ( {right ? right({ color: descriptionColor, - style: getRightStyles(alignToTop, description, theme.isV3), + style: getRightStyles(alignToTop, description), }) : null} @@ -280,19 +267,12 @@ const Component = forwardRef(ListItem); const styles = StyleSheet.create({ container: { - padding: 8, - }, - containerV3: { paddingVertical: 8, paddingRight: 24, }, row: { width: '100%', flexDirection: 'row', - }, - rowV3: { - width: '100%', - flexDirection: 'row', marginVertical: 6, }, title: { @@ -301,17 +281,11 @@ const styles = StyleSheet.create({ description: { fontSize: 14, }, - item: { - marginVertical: 6, - paddingLeft: 8, - }, - itemV3: { - paddingLeft: 16, - }, content: { flexShrink: 1, flexGrow: 1, justifyContent: 'center', + paddingLeft: 16, }, }); diff --git a/src/components/List/ListSubheader.tsx b/src/components/List/ListSubheader.tsx index 038b86a86e..38e0a9d41f 100644 --- a/src/components/List/ListSubheader.tsx +++ b/src/components/List/ListSubheader.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { StyleProp, StyleSheet, TextStyle } from 'react-native'; -import color from 'color'; import type { ThemeProp } from 'src/types'; import { useInternalTheme } from '../../core/theming'; @@ -43,11 +42,9 @@ const ListSubheader = ({ }: Props) => { const theme = useInternalTheme(overrideTheme); - const textColor = theme.isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.54).rgb().string(); + const textColor = theme.colors.onSurfaceVariant; - const font = theme.isV3 ? theme.fonts.bodyMedium : theme.fonts.medium; + const font = theme.fonts.bodyMedium; return ( { const stylesV3 = { marginRight: 0, marginLeft: 16, - alignSelf: alignToTop ? 'flex-start' : 'center', + alignSelf: (alignToTop ? 'flex-start' : 'center') as FlexAlignType, }; if (!description) { return { ...styles.iconMarginLeft, ...styles.marginVerticalNone, - ...(isV3 && { ...stylesV3 }), + ...stylesV3, }; } - if (!isV3) { - return styles.iconMarginLeft; - } - return { ...styles.iconMarginLeft, ...stylesV3, @@ -63,26 +51,21 @@ export const getLeftStyles = ( export const getRightStyles = ( alignToTop: boolean, - description: Description, - isV3: boolean + description: Description ) => { const stylesV3 = { marginLeft: 16, - alignSelf: alignToTop ? 'flex-start' : 'center', + alignSelf: (alignToTop ? 'flex-start' : 'center') as FlexAlignType, }; if (!description) { return { ...styles.iconMarginRight, ...styles.marginVerticalNone, - ...(isV3 && { ...stylesV3 }), + ...stylesV3, }; } - if (!isV3) { - return styles.iconMarginRight; - } - return { ...styles.iconMarginRight, ...stylesV3, @@ -98,29 +81,19 @@ const styles = StyleSheet.create({ export const getAccordionColors = ({ theme, isExpanded, - customRippleColor, }: { theme: InternalTheme; isExpanded?: boolean; - customRippleColor?: ColorValue; }) => { - const titleColor = theme.isV3 - ? theme.colors.onSurface - : color(theme.colors.text).alpha(0.87).rgb().string(); + const titleColor = theme.colors.onSurface; - const descriptionColor = theme.isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.54).rgb().string(); + const descriptionColor = theme.colors.onSurfaceVariant; const titleTextColor = isExpanded ? theme.colors?.primary : titleColor; - const rippleColor = - customRippleColor || color(titleTextColor).alpha(0.12).rgb().string(); - return { titleColor, descriptionColor, titleTextColor, - rippleColor, }; }; diff --git a/src/components/MaterialCommunityIcon.tsx b/src/components/MaterialCommunityIcon.tsx index 52719bdbe1..97b9cf81b3 100644 --- a/src/components/MaterialCommunityIcon.tsx +++ b/src/components/MaterialCommunityIcon.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { ComponentProps } from 'react'; import { StyleSheet, Text, Platform, Role, ViewProps } from 'react-native'; -import { black } from '../styles/themes/v2/colors'; +import { black } from '../styles/themes/baseColors'; export type IconProps = { name: ComponentProps['name']; diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 956b362562..085bdf1ad9 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -23,7 +23,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'; import MenuItem from './MenuItem'; import { useInternalTheme } from '../../core/theming'; -import type { MD3Elevation, ThemeProp } from '../../types'; +import type { Elevation, ThemeProp } from '../../types'; import { ElevationLevels } from '../../types'; import { addEventListener } from '../../utils/addEventListener'; import { BackHandler } from '../../utils/BackHandler/BackHandler'; @@ -72,7 +72,7 @@ export type Props = { * Elevation level of the menu's content. Shadow styles are calculated based on this value. Default `backgroundColor` is taken from the corresponding `theme.colors.elevation` property. By default equals `2`. * @supported Available in v5.x with theme version 3 */ - elevation?: MD3Elevation; + elevation?: Elevation; /** * Mode of the menu's content. * - `elevated` - Surface with a shadow and background color corresponding to set `elevation` value. @@ -104,7 +104,7 @@ const EASING = Easing.bezier(0.4, 0, 0.2, 1); const WINDOW_LAYOUT = Dimensions.get('window'); -const DEFAULT_ELEVATION: MD3Elevation = 2; +const DEFAULT_ELEVATION: Elevation = 2; export const ELEVATION_LEVELS_MAP = Object.values( ElevationLevels ) as ElevationLevels[]; @@ -618,7 +618,6 @@ const Menu = ({ }, ], borderRadius: theme.roundness, - ...(!theme.isV3 && { elevation: 8 }), ...(scrollableMenuHeight ? { height: scrollableMenuHeight } : {}), }; @@ -673,13 +672,13 @@ const Menu = ({ style={[ styles.shadowMenuContainer, shadowMenuContainerStyle, - theme.isV3 && { + { backgroundColor: theme.colors.elevation[ELEVATION_LEVELS_MAP[elevation]], }, contentStyle, ]} - {...(theme.isV3 && { elevation })} + elevation={elevation} testID={`${testID}-surface`} theme={theme} container diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 4b8eb3740a..005984c641 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { AccessibilityState, - ColorValue, GestureResponderEvent, PressableAndroidRippleConfig, StyleProp, @@ -82,10 +81,6 @@ export type Props = { * Style that is passed to the Title element. */ titleStyle?: StyleProp; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * @optional */ @@ -142,7 +137,6 @@ const MenuItem = ({ containerStyle, contentStyle, titleStyle, - rippleColor: customRippleColor, testID = 'menu-item', accessibilityLabel, accessibilityState, @@ -151,21 +145,18 @@ const MenuItem = ({ hitSlop, }: Props) => { const theme = useInternalTheme(themeOverrides); - const { titleColor, iconColor, rippleColor } = getMenuItemColor({ + const { titleColor, iconColor, contentOpacity } = getMenuItemColor({ theme, disabled, - customRippleColor, }); - const { isV3 } = theme; - const containerPadding = isV3 ? 12 : 8; + const containerPadding = 12; - const iconWidth = isV3 ? 24 : 40; + const iconWidth = 24; - const minWidth = MIN_WIDTH - (isV3 ? 12 : 16); + const minWidth = MIN_WIDTH - 12; const maxWidth = getContentMaxWidth({ - isV3, iconWidth, leadingIcon, trailingIcon, @@ -173,7 +164,7 @@ const MenuItem = ({ const titleTextStyle = { color: titleColor, - ...(isV3 ? theme.fonts.bodyLarge : {}), + ...theme.fonts.bodyLarge, }; const newAccessibilityState = { ...accessibilityState, disabled }; @@ -183,7 +174,7 @@ const MenuItem = ({ style={[ styles.container, { paddingHorizontal: containerPadding }, - dense && styles.md3DenseContainer, + dense && styles.denseContainer, style, ]} onPress={onPress} @@ -193,27 +184,19 @@ const MenuItem = ({ accessibilityLabel={accessibilityLabel} accessibilityRole="menuitem" accessibilityState={newAccessibilityState} - rippleColor={rippleColor} hitSlop={hitSlop} > - + {leadingIcon ? ( - + ) : null} {title} - {isV3 && trailingIcon ? ( - + {trailingIcon ? ( + ) : null} @@ -251,25 +231,19 @@ const styles = StyleSheet.create({ height: 48, justifyContent: 'center', }, - md3DenseContainer: { + denseContainer: { height: 32, }, row: { flexDirection: 'row', }, - title: { - fontSize: 16, - }, - item: { - marginHorizontal: 8, - }, content: { justifyContent: 'center', }, - md3LeadingIcon: { + leadingIcon: { marginLeft: 12, }, - md3WithoutLeadingIcon: { + withoutLeadingIcon: { marginLeft: 4, }, }); diff --git a/src/components/Menu/utils.ts b/src/components/Menu/utils.ts index c1b6189ba4..4288676bbd 100644 --- a/src/components/Menu/utils.ts +++ b/src/components/Menu/utils.ts @@ -1,16 +1,13 @@ -import type { ColorValue } from 'react-native'; - -import color from 'color'; - -import { black, white } from '../../styles/themes/v2/colors'; +import { tokens } from '../../styles/themes/tokens'; import type { InternalTheme } from '../../types'; import type { IconSource } from '../Icon'; +const { stateOpacity } = tokens.md.ref; + export const MIN_WIDTH = 112; export const MAX_WIDTH = 280; type ContentProps = { - isV3: boolean; iconWidth: number; leadingIcon?: IconSource; trailingIcon?: IconSource; @@ -19,92 +16,40 @@ type ContentProps = { type ColorProps = { theme: InternalTheme; disabled?: boolean; - customRippleColor?: ColorValue; }; -const getDisabledColor = (theme: InternalTheme) => { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - - return color(theme.dark ? white : black) - .alpha(0.32) - .rgb() - .string(); -}; - -const getTitleColor = ({ theme, disabled }: ColorProps) => { - if (disabled) { - return getDisabledColor(theme); - } - - if (theme.isV3) { - return theme.colors.onSurface; - } - - return color(theme.colors.text).alpha(0.87).rgb().string(); +const getTitleColor = ({ theme }: ColorProps) => { + return theme.colors.onSurface; }; -const getIconColor = ({ theme, disabled }: ColorProps) => { - if (disabled) { - return getDisabledColor(theme); - } - - if (theme.isV3) { - return theme.colors.onSurfaceVariant; - } - - return color(theme.colors.text).alpha(0.54).rgb().string(); +const getIconColor = ({ theme }: ColorProps) => { + return theme.colors.onSurfaceVariant; }; -const getRippleColor = ({ - theme, - customRippleColor, -}: Omit) => { - if (customRippleColor) { - return customRippleColor; - } +export const getMenuItemColor = ({ theme, disabled }: ColorProps) => { + const contentOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; - if (theme.isV3) { - return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); - } - - return undefined; -}; - -export const getMenuItemColor = ({ - theme, - disabled, - customRippleColor, -}: ColorProps) => { return { titleColor: getTitleColor({ theme, disabled }), iconColor: getIconColor({ theme, disabled }), - rippleColor: getRippleColor({ theme, customRippleColor }), + contentOpacity, }; }; export const getContentMaxWidth = ({ - isV3, iconWidth, leadingIcon, trailingIcon, }: ContentProps) => { - if (isV3) { - if (leadingIcon && trailingIcon) { - return MAX_WIDTH - (2 * iconWidth + 24); - } - - if (leadingIcon || trailingIcon) { - return MAX_WIDTH - (iconWidth + 24); - } - - return MAX_WIDTH - 12; + if (leadingIcon && trailingIcon) { + return MAX_WIDTH - (2 * iconWidth + 24); } - if (leadingIcon) { - return MAX_WIDTH - (iconWidth + 48); + if (leadingIcon || trailingIcon) { + return MAX_WIDTH - (iconWidth + 24); } - return MAX_WIDTH - 16; + return MAX_WIDTH - 12; }; diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index dc55c3cf7a..e43006eb5d 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -201,8 +201,11 @@ function Modal({ style={[ styles.backdrop, { - backgroundColor: theme.colors?.backdrop, - opacity, + backgroundColor: theme.colors.scrim, + opacity: opacity.interpolate({ + inputRange: [0, 1], + outputRange: [0, 0.32], + }), }, ]} testID={`${testID}-backdrop`} diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx index 790204f4f8..1d7eaee724 100644 --- a/src/components/ProgressBar.tsx +++ b/src/components/ProgressBar.tsx @@ -10,8 +10,6 @@ import { ViewStyle, } from 'react-native'; -import setColor from 'color'; - import { useInternalTheme } from '../core/theming'; import type { ThemeProp } from '../types'; @@ -63,10 +61,10 @@ const { isRTL } = I18nManager; * ## Usage * ```js * import * as React from 'react'; - * import { ProgressBar, MD3Colors } from 'react-native-paper'; + * import { ProgressBar, Colors } from 'react-native-paper'; * * const MyComponent = () => ( - * + * * ); * * export default MyComponent; @@ -191,9 +189,7 @@ const ProgressBar = ({ }; const tintColor = color || theme.colors?.primary; - const trackTintColor = theme.isV3 - ? theme.colors.surfaceVariant - : setColor(tintColor).alpha(0.38).rgb().string(); + const trackTintColor = theme.colors.surfaceVariant; return ( ; } - const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text; - const disabledTextColor = theme.isV3 - ? theme.colors.onSurfaceDisabled - : theme.colors.disabled; + const textColor = theme.colors.onSurface; const textAlign = isLeading ? 'right' : 'left'; const computedStyle = { - color: disabled ? disabledTextColor : textColor, + color: textColor, + opacity: disabled + ? tokens.md.ref.stateOpacity.disabled + : tokens.md.ref.stateOpacity.enabled, textAlign, } as TextStyle; @@ -225,19 +220,13 @@ const RadioButtonItem = ({ disabled={disabled} background={background} theme={theme} - rippleColor={rippleColor} hitSlop={hitSlop} > {isLeading && radioButton} {label} @@ -270,7 +259,4 @@ const styles = StyleSheet.create({ flexShrink: 1, flexGrow: 1, }, - font: { - fontSize: 16, - }, }); diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx index 891df22945..0e118d8c69 100644 --- a/src/components/Searchbar.tsx +++ b/src/components/Searchbar.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { Animated, - ColorValue, GestureResponderEvent, I18nManager, Platform, @@ -14,8 +13,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; - import ActivityIndicator from './ActivityIndicator'; import Divider from './Divider'; import type { IconSource } from './Icon'; @@ -56,10 +53,6 @@ export type Props = React.ComponentPropsWithRef & { * Custom color for icon, default will be derived from theme */ iconColor?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Callback to execute if we want the left icon to act as button. */ @@ -93,11 +86,6 @@ export type Props = React.ComponentPropsWithRef & { * Custom color for the right trailering icon, default will be derived from theme */ traileringIconColor?: string; - /** - * @supported Available in v5.x with theme version 3 - * Color of the trailering icon ripple effect. - */ - traileringRippleColor?: ColorValue; /** * @supported Available in v5.x with theme version 3 * Callback to execute on the right trailering icon button press. @@ -181,7 +169,6 @@ const Searchbar = forwardRef( { icon, iconColor: customIconColor, - rippleColor: customRippleColor, onIconPress, searchAccessibilityLabel = 'search', clearIcon, @@ -190,7 +177,6 @@ const Searchbar = forwardRef( traileringIcon, traileringIconColor, traileringIconAccessibilityLabel, - traileringRippleColor: customTraileringRippleColor, onTraileringIconPress, right, mode = 'bar', @@ -227,34 +213,20 @@ const Searchbar = forwardRef( onClearIconPress?.(e); }; - const { roundness, dark, isV3, fonts } = theme; - - const placeholderTextColor = isV3 - ? theme.colors.onSurface - : theme.colors?.placeholder; - const textColor = isV3 ? theme.colors.onSurfaceVariant : theme.colors.text; - const md2IconColor = dark - ? textColor - : color(textColor).alpha(0.54).rgb().string(); - const iconColor = - customIconColor || (isV3 ? theme.colors.onSurfaceVariant : md2IconColor); - const rippleColor = - customRippleColor || color(textColor).alpha(0.32).rgb().string(); - const traileringRippleColor = - customTraileringRippleColor || - color(textColor).alpha(0.32).rgb().string(); + const { roundness, dark, fonts } = theme; - const font = isV3 - ? { - ...fonts.bodyLarge, - lineHeight: Platform.select({ - ios: 0, - default: fonts.bodyLarge.lineHeight, - }), - } - : theme.fonts.regular; + const placeholderTextColor = theme.colors.onSurface; + const textColor = theme.colors.onSurfaceVariant; + const iconColor = customIconColor || theme.colors.onSurfaceVariant; + const font = { + ...fonts.bodyLarge, + lineHeight: Platform.select({ + ios: 0, + default: fonts.bodyLarge.lineHeight, + }), + }; - const isBarMode = isV3 && mode === 'bar'; + const isBarMode = mode === 'bar'; const shouldRenderTraileringIcon = isBarMode && traileringIcon && @@ -264,9 +236,7 @@ const Searchbar = forwardRef( return ( ( style, ]} testID={`${testID}-container`} - {...(theme.isV3 && { elevation })} + elevation={elevation} container theme={theme} > ( ...font, ...Platform.select({ web: { outline: 'none' } }), }, - isV3 && (isBarMode ? styles.barModeInput : styles.viewModeInput), + isBarMode ? styles.barModeInput : styles.viewModeInput, inputStyle, ]} placeholder={placeholder || ''} @@ -325,7 +294,7 @@ const Searchbar = forwardRef( {loading ? ( ) : ( // Clear icon should be always rendered within Searchbar – it's transparent, @@ -336,21 +305,20 @@ const Searchbar = forwardRef( pointerEvents={value ? 'auto' : 'none'} testID={`${testID}-icon-wrapper`} style={[ - isV3 && !value && styles.v3ClearIcon, - isV3 && right !== undefined && styles.v3ClearIconHidden, + !value && styles.clearIcon, + right !== undefined && styles.clearIconHidden, ]} > ( ( borderless onPress={onTraileringIconPress} iconColor={traileringIconColor || theme.colors.onSurfaceVariant} - rippleColor={traileringRippleColor} icon={traileringIcon} accessibilityLabel={traileringIconAccessibilityLabel} testID={`${testID}-trailering-icon`} @@ -377,7 +344,7 @@ const Searchbar = forwardRef( ) : null} {isBarMode && right?.({ color: textColor, style: styles.rightStyle, testID })} - {isV3 && !isBarMode && showDivider && ( + {!isBarMode && showDivider && ( - + {showCheckedIcon ? ( { if (checked) { - if (theme.isV3) { - return theme.colors.secondaryContainer; - } else { - return color(theme.colors.primary).alpha(0.12).rgb().string(); - } + return theme.colors.secondaryContainer; } return 'transparent'; }; -const getSegmentedButtonBorderColor = ({ - theme, - disabled, - checked, -}: BaseProps) => { - if (theme.isV3) { - if (disabled) { - return theme.colors.surfaceDisabled; - } - return theme.colors.outline; - } - if (checked) { - return theme.colors.primary; +const getSegmentedButtonBorderColor = ({ theme, disabled }: BaseProps) => { + if (disabled) { + return theme.colors.outlineVariant; } - - return color(theme.dark ? white : black) - .alpha(0.29) - .rgb() - .string(); + return theme.colors.outline; }; const getSegmentedButtonBorderWidth = ({ - theme, + theme: _theme, }: Omit) => { - if (theme.isV3) { - return 1; - } - - return StyleSheet.hairlineWidth; + return 1; }; const getSegmentedButtonTextColor = ({ @@ -133,21 +110,13 @@ const getSegmentedButtonTextColor = ({ checkedColor, uncheckedColor, }: SegmentedButtonProps) => { - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - if (checked) { - return checkedColor ?? theme.colors.onSecondaryContainer; - } - return uncheckedColor ?? theme.colors.onSurface; - } - if (disabled) { - return theme.colors.disabled; + return theme.colors.onSurface; + } + if (checked) { + return checkedColor ?? theme.colors.onSecondaryContainer; } - // Primary color is used for checked state too. - return theme.colors.primary; + return uncheckedColor ?? theme.colors.onSurface; }; export const getSegmentedButtonColors = ({ @@ -175,5 +144,7 @@ export const getSegmentedButtonColors = ({ }); const borderWidth = getSegmentedButtonBorderWidth({ theme }); - return { backgroundColor, borderColor, textColor, borderWidth }; + const textOpacity = disabled ? stateOpacity.disabled : stateOpacity.enabled; + + return { backgroundColor, borderColor, textColor, textOpacity, borderWidth }; }; diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx index d11bc91a62..f01a592c77 100644 --- a/src/components/Snackbar.tsx +++ b/src/components/Snackbar.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { Animated, - ColorValue, Easing, I18nManager, StyleProp, @@ -40,11 +39,6 @@ export type Props = $Omit, 'mode'> & { * Icon to display when `onIconPress` is defined. Default will be `close` icon. */ icon?: IconSource; - /** - * @supported Available in v5.x with theme version 3 - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * @supported Available in v5.x with theme version 3 * Function to execute on icon button press. The icon button appears only when this prop is specified. @@ -161,7 +155,6 @@ const Snackbar = ({ contentStyle, theme: themeOverrides, maxFontSizeMultiplier, - rippleColor, testID, ...rest }: Props) => { @@ -243,7 +236,7 @@ const Snackbar = ({ } }, [visible, handleOnVisible, handleOnHidden]); - const { colors, roundness, isV3 } = theme; + const { colors, roundness } = theme; if (hidden) { return null; @@ -253,15 +246,14 @@ const Snackbar = ({ style: actionStyle, label: actionLabel, onPress: onPressAction, - rippleColor: actionRippleColor, ...actionProps } = action || {}; - const buttonTextColor = isV3 ? colors.inversePrimary : colors.accent; - const textColor = isV3 ? colors.inverseOnSurface : colors?.surface; - const backgroundColor = isV3 ? colors.inverseSurface : colors?.onSurface; + const buttonTextColor = colors.inversePrimary; + const textColor = colors.inverseOnSurface; + const backgroundColor = colors.inverseSurface; - const isIconButton = isV3 && onIconPress; + const isIconButton = onIconPress; const marginLeft = action ? -12 : -16; @@ -301,7 +293,6 @@ const Snackbar = ({ accessibilityLiveRegion="polite" theme={theme} style={[ - !isV3 && styles.elevation, styles.container, { backgroundColor, @@ -322,7 +313,7 @@ const Snackbar = ({ ]} testID={testID} container - {...(isV3 && { elevation })} + elevation={elevation} {...rest} > {renderChildrenWithWrapper()} @@ -336,10 +327,9 @@ const Snackbar = ({ }} style={[styles.button, actionStyle]} textColor={buttonTextColor} - compact={!isV3} + compact={false} mode="text" theme={theme} - rippleColor={actionRippleColor} {...actionProps} > {actionLabel} @@ -351,7 +341,6 @@ const Snackbar = ({ borderless onPress={onIconPress} iconColor={theme.colors.inverseOnSurface} - rippleColor={rippleColor} theme={theme} icon={ icon || @@ -423,9 +412,6 @@ const styles = StyleSheet.create({ marginRight: 8, marginLeft: 4, }, - elevation: { - elevation: 6, - }, icon: { width: 40, height: 40, diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx index 3b46d099e1..26947f17bf 100644 --- a/src/components/Surface.tsx +++ b/src/components/Surface.tsx @@ -10,13 +10,13 @@ import { } from 'react-native'; import { useInternalTheme } from '../core/theming'; -import overlay, { isAnimatedValue } from '../styles/overlay'; +import { isAnimatedValue } from '../styles/overlay'; import shadow from '../styles/shadow'; -import type { ThemeProp, MD3Elevation } from '../types'; +import type { ThemeProp, Elevation as ElevationProp } from '../types'; import { forwardRef } from '../utils/forwardRef'; import { splitStyles } from '../utils/splitStyles'; -type Elevation = 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value; +type Elevation = ElevationProp | Animated.Value; export type Props = Omit, 'style'> & { /** @@ -57,30 +57,6 @@ export type Props = Omit, 'style'> & { container?: boolean; }; -const MD2Surface = forwardRef( - ({ style, theme: overrideTheme, ...rest }: Omit, ref) => { - const { elevation = 4 } = (StyleSheet.flatten(style) || {}) as ViewStyle; - const { dark: isDarkTheme, mode, colors } = useInternalTheme(overrideTheme); - - return ( - - ); - } -); - const outerLayerStyleProperties: (keyof ViewStyle)[] = [ 'position', 'alignSelf', @@ -277,13 +253,6 @@ const Surface = forwardRef( ) => { const theme = useInternalTheme(overridenTheme); - if (!theme.isV3) - return ( - - {children} - - ); - const { colors } = theme; const inputRange = [0, 1, 2, 3, 4, 5]; @@ -293,7 +262,7 @@ const Surface = forwardRef( return elevation.interpolate({ inputRange, outputRange: inputRange.map((elevation) => { - return colors.elevation?.[`level${elevation as MD3Elevation}`]; + return colors.elevation?.[`level${elevation as ElevationProp}`]; }), }); } @@ -313,7 +282,7 @@ const Surface = forwardRef( testID={testID} style={[ { backgroundColor }, - elevation && isElevated ? shadow(elevation, theme.isV3) : null, + elevation && isElevated ? shadow(elevation) : null, style, ]} > diff --git a/src/components/Switch/utils.ts b/src/components/Switch/utils.ts index 2994495af9..713dad3a21 100644 --- a/src/components/Switch/utils.ts +++ b/src/components/Switch/utils.ts @@ -3,13 +3,13 @@ import { Platform } from 'react-native'; import setColor from 'color'; import { - grey400, - grey800, + black, + white, grey50, + grey400, grey700, - white, - black, -} from '../../styles/themes/v2/colors'; + grey800, +} from '../../styles/themes/baseColors'; import type { InternalTheme } from '../../types'; type BaseProps = { @@ -29,11 +29,7 @@ const getCheckedColor = ({ return color; } - if (theme.isV3) { - return theme.colors.primary; - } - - return theme.colors.accent; + return theme.colors.primary; }; const getThumbTintColor = ({ @@ -79,16 +75,13 @@ const getOnTintColor = ({ if (disabled) { if (theme.dark) { - if (theme.isV3) { - return setColor(white).alpha(0.06).rgb().string(); - } - return setColor(white).alpha(0.1).rgb().string(); + return setColor(white).alpha(0.06).rgb().string(); } return setColor(black).alpha(0.12).rgb().string(); } if (value) { - return setColor(checkedColor).alpha(0.5).rgb().string(); + return theme.colors.surfaceVariant; } if (theme.dark) { diff --git a/src/components/TextInput/Addons/Outline.tsx b/src/components/TextInput/Addons/Outline.tsx index 45b675fd8b..39ffa48b56 100644 --- a/src/components/TextInput/Addons/Outline.tsx +++ b/src/components/TextInput/Addons/Outline.tsx @@ -10,11 +10,9 @@ import { import { TextInputLabelProp } from '../types'; type OutlineProps = { - isV3: boolean; activeColor: string; backgroundColor: ColorValue; hasActiveOutline?: boolean; - focused?: boolean; outlineColor?: string; roundness?: number; label?: TextInputLabelProp; @@ -22,12 +20,10 @@ type OutlineProps = { }; export const Outline = ({ - isV3, label, activeColor, backgroundColor, hasActiveOutline, - focused, outlineColor, roundness, style, @@ -42,7 +38,7 @@ export const Outline = ({ { backgroundColor, borderRadius: roundness, - borderWidth: (isV3 ? hasActiveOutline : focused) ? 2 : 1, + borderWidth: hasActiveOutline ? 2 : 1, borderColor: hasActiveOutline ? activeColor : outlineColor, }, style, diff --git a/src/components/TextInput/Addons/Underline.tsx b/src/components/TextInput/Addons/Underline.tsx index 184cbe63b5..f484b231ac 100644 --- a/src/components/TextInput/Addons/Underline.tsx +++ b/src/components/TextInput/Addons/Underline.tsx @@ -1,10 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native'; -import type { ThemeProp } from 'src/types'; - -import { useInternalTheme } from '../../../core/theming'; - type UnderlineProps = { parentState: { focused: boolean; @@ -16,8 +12,8 @@ type UnderlineProps = { activeColor: string; underlineColorCustom?: string; hasActiveOutline?: boolean; + disabledOpacity?: number; style?: StyleProp; - theme?: ThemeProp; }; export const Underline = ({ @@ -27,33 +23,27 @@ export const Underline = ({ activeColor, underlineColorCustom, hasActiveOutline, + disabledOpacity, style, - theme: themeOverrides, }: UnderlineProps) => { - const { isV3 } = useInternalTheme(themeOverrides); - let backgroundColor = parentState.focused ? activeColor : underlineColorCustom; if (error) backgroundColor = colors?.error; - const activeScale = isV3 ? 2 : 1; - return ( = ({ forceFocus, paddingHorizontal, maxFontSizeMultiplier, - theme, disabled, }) => { if (adornmentConfig.length) { @@ -174,7 +168,6 @@ const TextInputAdornment: React.FunctionComponent = ({ return ( { const theme = useInternalTheme(themeOverrides); - const { AFFIX_OFFSET } = getConstants(theme.isV3); + const { AFFIX_OFFSET } = getConstants(); const { textStyle, @@ -152,12 +152,19 @@ const TextInputAffix = ({ [side]: offset, } as ViewStyle; - const textColor = getTextColor({ theme, disabled }); + const { color: textColor, opacity: textOpacity } = getTextColor({ + theme, + disabled, + }); const content = ( diff --git a/src/components/TextInput/Adornment/TextInputIcon.tsx b/src/components/TextInput/Adornment/TextInputIcon.tsx index bd38ca64ab..0fc2c7c906 100644 --- a/src/components/TextInput/Adornment/TextInputIcon.tsx +++ b/src/components/TextInput/Adornment/TextInputIcon.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { - ColorValue, GestureResponderEvent, StyleProp, StyleSheet, @@ -37,10 +36,6 @@ export type Props = $Omit< * Color of the icon or a function receiving a boolean indicating whether the TextInput is focused and returning the color. */ color?: ((isTextInputFocused: boolean) => string | undefined) | string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; style?: StyleProp; /** * @optional @@ -69,7 +64,6 @@ const IconAdornment: React.FunctionComponent< icon: React.ReactNode; topPosition: number; side: 'left' | 'right'; - theme?: ThemeProp; disabled?: boolean; } & Omit > = ({ @@ -79,11 +73,9 @@ const IconAdornment: React.FunctionComponent< isTextInputFocused, forceFocus, testID, - theme: themeOverrides, disabled, }) => { - const { isV3 } = useInternalTheme(themeOverrides); - const { ICON_OFFSET } = getConstants(isV3); + const { ICON_OFFSET } = getConstants(); const style = { top: topPosition, @@ -132,7 +124,6 @@ const TextInputIcon = ({ forceTextInputFocus = true, color: customColor, theme: themeOverrides, - rippleColor, ...rest }: Props) => { const { style, isTextInputFocused, forceFocus, testID, disabled } = @@ -151,7 +142,7 @@ const TextInputIcon = ({ const theme = useInternalTheme(themeOverrides); - const iconColor = getIconColor({ + const { color: iconColor, opacity: iconOpacity } = getIconColor({ theme, disabled, isTextInputFocused, @@ -159,7 +150,7 @@ const TextInputIcon = ({ }); return ( - + diff --git a/src/components/TextInput/Adornment/utils.ts b/src/components/TextInput/Adornment/utils.ts index e7dae2b487..eddd44c83c 100644 --- a/src/components/TextInput/Adornment/utils.ts +++ b/src/components/TextInput/Adornment/utils.ts @@ -1,23 +1,24 @@ -import color from 'color'; - +import { tokens } from '../../../styles/themes/tokens'; import type { InternalTheme } from '../../../types'; +const { stateOpacity } = tokens.md.ref; + type BaseProps = { theme: InternalTheme; disabled?: boolean; }; export function getTextColor({ theme, disabled }: BaseProps) { - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.onSurfaceVariant; + if (disabled) { + return { + color: theme.colors.onSurfaceVariant, + opacity: stateOpacity.disabled, + }; } - return color(theme.colors?.text) - .alpha(theme.dark ? 0.7 : 0.54) - .rgb() - .string(); + return { + color: theme.colors.onSurfaceVariant, + opacity: stateOpacity.enabled, + }; } export function getIconColor({ @@ -30,19 +31,24 @@ export function getIconColor({ customColor?: ((isTextInputFocused: boolean) => string | undefined) | string; }) { if (typeof customColor === 'function') { - return customColor(isTextInputFocused); + return { + color: customColor(isTextInputFocused), + opacity: stateOpacity.enabled, + }; } if (customColor) { - return customColor; - } - - if (!theme.isV3) { - return theme.colors.text; + return { color: customColor, opacity: stateOpacity.enabled }; } if (disabled) { - return theme.colors.onSurfaceDisabled; + return { + color: theme.colors.onSurfaceVariant, + opacity: stateOpacity.disabled, + }; } - return theme.colors.onSurfaceVariant; + return { + color: theme.colors.onSurfaceVariant, + opacity: stateOpacity.enabled, + }; } diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx index f0818f98f0..6fd869a1c3 100644 --- a/src/components/TextInput/Label/InputLabel.tsx +++ b/src/components/TextInput/Label/InputLabel.tsx @@ -18,7 +18,6 @@ const InputLabel = (props: InputLabelProps) => { wiggle, error, focused, - opacity, labelLayoutWidth, labelLayoutHeight, labelBackground, @@ -44,16 +43,17 @@ const InputLabel = (props: InputLabelProps) => { backgroundColor, roundness, placeholderColor, + disabledOpacity, + opacity, errorColor, labelTranslationXOffset, maxFontSizeMultiplier, testID, - isV3, inputContainerLayout, scaledLabel, } = props; - const { INPUT_PADDING_HORIZONTAL } = getConstants(isV3); + const { INPUT_PADDING_HORIZONTAL } = getConstants(); const { width } = useWindowDimensions(); const isWeb = Platform.OS === 'web'; @@ -140,7 +140,12 @@ const InputLabel = (props: InputLabelProps) => { // This gives the effect of animating the color, but allows us to use native driver { const isAndroid = Platform.OS === 'android'; - const { colors, isV3, roundness } = theme; - const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.regular; + const { colors, roundness } = theme; + const font = theme.fonts.bodyLarge; const hasActiveOutline = parentState.focused || error; const { LABEL_PADDING_TOP, FLAT_INPUT_OFFSET, MIN_HEIGHT, MIN_WIDTH } = - getConstants(isV3); + getConstants(); const { fontSize: fontSizeStyle, @@ -108,7 +108,6 @@ const TextInputFlat = ({ let { paddingLeft, paddingRight } = calculateFlatInputHorizontalPadding({ adornmentConfig, - isV3, }); if (isPaddingHorizontalPassed) { @@ -134,12 +133,12 @@ const TextInputFlat = ({ paddingHorizontal, inputOffset: FLAT_INPUT_OFFSET, mode: InputMode.Flat, - isV3, }); const { inputTextColor, activeColor, + disabledOpacity, underlineColorCustom, placeholderColor, errorColor, @@ -291,6 +290,7 @@ const TextInputFlat = ({ hasActiveOutline, activeColor, placeholderColor, + disabledOpacity, errorColor, roundness, maxFontSizeMultiplier: rest.maxFontSizeMultiplier, @@ -304,7 +304,6 @@ const TextInputFlat = ({ ? 1 : 0 : 1, - isV3, }; const affixTopPosition = { @@ -349,7 +348,7 @@ const TextInputFlat = ({ error={error} colors={colors} activeColor={activeColor} - theme={theme} + disabledOpacity={disabledOpacity} /> { const adornmentConfig = getAdornmentConfig({ left, right }); - const { colors, isV3, roundness } = theme; - const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.regular; + const { colors, roundness } = theme; + const font = theme.fonts.bodyLarge; const hasActiveOutline = parentState.focused || error; const { INPUT_PADDING_HORIZONTAL, MIN_HEIGHT, ADORNMENT_OFFSET, MIN_WIDTH } = - getConstants(isV3); + getConstants(); const { fontSize: fontSizeStyle, @@ -104,6 +104,7 @@ const TextInputOutlined = ({ const { inputTextColor, activeColor, + disabledOpacity, outlineColor, placeholderColor, errorColor, @@ -149,7 +150,7 @@ const TextInputOutlined = ({ if (isAdornmentLeftIcon) { labelTranslationXOffset = (I18nManager.getConstants().isRTL ? -1 : 1) * - (ADORNMENT_SIZE + ADORNMENT_OFFSET - (isV3 ? 0 : 8)); + (ADORNMENT_SIZE + ADORNMENT_OFFSET); } const minInputHeight = @@ -234,6 +235,7 @@ const TextInputOutlined = ({ hasActiveOutline, activeColor, placeholderColor, + disabledOpacity, backgroundColor: labelBackgroundColor, errorColor, labelTranslationXOffset, @@ -254,7 +256,6 @@ const TextInputOutlined = ({ ? 1 : 0 : 1, - isV3, }; const onLayoutChange = React.useCallback( @@ -303,7 +304,6 @@ const TextInputOutlined = ({ rightAffixWidth, leftAffixWidth, mode: 'outlined', - isV3, }); const affixTopPosition = { [AdornmentSide.Left]: leftAffixTopPosition, @@ -344,12 +344,10 @@ const TextInputOutlined = ({ Otherwise the border will cut off the label on Android */} { - const { LABEL_PADDING_HORIZONTAL, ADORNMENT_OFFSET, FLAT_INPUT_OFFSET } = - getConstants(isV3); - let paddingLeft = LABEL_PADDING_HORIZONTAL; let paddingRight = LABEL_PADDING_HORIZONTAL; @@ -314,30 +299,16 @@ type Mode = 'flat' | 'outlined'; const getInputTextColor = ({ theme, textColor, - disabled, }: BaseProps & { textColor?: string }) => { if (textColor) { return textColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - return theme.colors.onSurface; - } - - if (disabled) { - return color(theme.colors.text).alpha(0.54).rgb().string(); - } - - return theme.colors.text; + return theme.colors.onSurface; }; const getActiveColor = ({ theme, - disabled, error, activeUnderlineColor, activeOutlineColor, @@ -359,31 +330,11 @@ const getActiveColor = ({ return modeColor; } - if (disabled) { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - - return color(theme.colors.text).alpha(0.54).rgb().string(); - } - return theme.colors.primary; }; -const getPlaceholderColor = ({ theme, disabled }: BaseProps) => { - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - return theme.colors.onSurfaceVariant; - } - - if (disabled) { - return theme.colors.disabled; - } - - return theme.colors.placeholder; +const getPlaceholderColor = ({ theme }: BaseProps) => { + return theme.colors.onSurfaceVariant; }; const getSelectionColor = ({ @@ -396,30 +347,15 @@ const getSelectionColor = ({ if (typeof customSelectionColor !== 'undefined') { return customSelectionColor; } - - if (Platform.OS === 'android') { - return color(activeColor).alpha(0.54).rgb().string(); - } - return activeColor; }; const getFlatBackgroundColor = ({ theme, disabled }: BaseProps) => { - if (theme.isV3) { - if (disabled) { - return color(theme.colors.onSurface).alpha(0.04).rgb().string(); - } else { - return theme.colors.surfaceVariant; - } - } - if (disabled) { - return undefined; + return theme.colors.surfaceContainerHighest; } - return theme.dark - ? color(theme.colors?.background).lighten(0.24).rgb().string() - : color(theme.colors?.background).darken(0.06).rgb().string(); + return theme.colors.surfaceVariant; }; const getFlatUnderlineColor = ({ @@ -431,19 +367,7 @@ const getFlatUnderlineColor = ({ return underlineColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - return theme.colors.onSurfaceVariant; - } - - if (disabled) { - return 'transparent'; - } - - return theme.colors.disabled; + return theme.colors.onSurfaceVariant; }; const getOutlinedOutlineInputColor = ({ @@ -451,30 +375,18 @@ const getOutlinedOutlineInputColor = ({ disabled, customOutlineColor, }: BaseProps & { customOutlineColor?: string }) => { - const isTransparent = color(customOutlineColor).alpha() === 0; - if (!disabled && customOutlineColor) { return customOutlineColor; } - if (theme.isV3) { - if (disabled) { - if (theme.dark) { - return 'transparent'; - } - return theme.colors.surfaceDisabled; - } - - return theme.colors.outline; - } - if (disabled) { - if (isTransparent) { - return customOutlineColor; + if (theme.dark) { + return 'transparent'; } - return theme.colors.disabled; + return theme.colors.outlineVariant; } - return theme.colors.placeholder; + + return theme.colors.outline; }; export const getFlatInputColors = ({ @@ -502,12 +414,17 @@ export const getFlatInputColors = ({ mode: 'flat', }); + const disabledOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { inputTextColor: getInputTextColor({ ...baseFlatColorProps, textColor, }), activeColor, + disabledOpacity, underlineColorCustom: getFlatUnderlineColor({ ...baseFlatColorProps, underlineColor, @@ -544,12 +461,17 @@ export const getOutlinedInputColors = ({ mode: 'outlined', }); + const disabledOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { inputTextColor: getInputTextColor({ ...baseOutlinedColorProps, textColor, }), activeColor, + disabledOpacity, outlineColor: getOutlinedOutlineInputColor({ ...baseOutlinedColorProps, customOutlineColor, @@ -560,47 +482,11 @@ export const getOutlinedInputColors = ({ }; }; -export const getConstants = (isV3?: boolean) => { - // Text input affix - let AFFIX_OFFSET; - // Text input icon - let ICON_OFFSET; - //Text input flat - let LABEL_PADDING_TOP; - let LABEL_PADDING_HORIZONTAL; - let FLAT_INPUT_OFFSET; - let MIN_HEIGHT; - // Text input outlined; - let INPUT_PADDING_HORIZONTAL; - let ADORNMENT_OFFSET; - let OUTLINED_INPUT_OFFSET; - - if (isV3) { - AFFIX_OFFSET = MD3_AFFIX_OFFSET; - ICON_OFFSET = MD3_ICON_OFFSET; - LABEL_PADDING_TOP = MD3_LABEL_PADDING_TOP; - LABEL_PADDING_HORIZONTAL = MD3_LABEL_PADDING_HORIZONTAL; - FLAT_INPUT_OFFSET = MD3_FLAT_INPUT_OFFSET; - MIN_HEIGHT = MD3_MIN_HEIGHT; - INPUT_PADDING_HORIZONTAL = MD3_INPUT_PADDING_HORIZONTAL; - ADORNMENT_OFFSET = MD3_ADORNMENT_OFFSET; - OUTLINED_INPUT_OFFSET = MD3_OUTLINED_INPUT_OFFSET; - } else { - AFFIX_OFFSET = MD2_AFFIX_OFFSET; - ICON_OFFSET = MD2_ICON_OFFSET; - LABEL_PADDING_TOP = MD2_LABEL_PADDING_TOP; - LABEL_PADDING_HORIZONTAL = MD2_LABEL_PADDING_HORIZONTAL; - FLAT_INPUT_OFFSET = MD2_FLAT_INPUT_OFFSET; - MIN_HEIGHT = MD2_MIN_HEIGHT; - INPUT_PADDING_HORIZONTAL = MD2_INPUT_PADDING_HORIZONTAL; - ADORNMENT_OFFSET = MD2_ADORNMENT_OFFSET; - OUTLINED_INPUT_OFFSET = MD2_OUTLINED_INPUT_OFFSET; - } - +export const getConstants = () => { return { AFFIX_OFFSET, ICON_OFFSET, - LABEL_PADDING_TOP, + LABEL_PADDING_TOP: LABEL_PADDING_TOP_FLAT, LABEL_PADDING_HORIZONTAL, FLAT_INPUT_OFFSET, MIN_HEIGHT, diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx index 4ec2952366..49bc46e121 100644 --- a/src/components/TextInput/types.tsx +++ b/src/components/TextInput/types.tsx @@ -115,6 +115,7 @@ export type LabelProps = { paddingRight?: number; labelTranslationXOffset?: number; placeholderColor: string | null; + disabledOpacity?: number; backgroundColor?: ColorValue; label?: TextInputLabelProp | null; hasActiveOutline?: boolean | null; @@ -141,7 +142,6 @@ export type InputLabelProps = { inputContainerLayout: { width: number }; labelBackground?: any; maxFontSizeMultiplier?: number | undefined | null; - isV3?: boolean; scaledLabel?: boolean; } & LabelProps; diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index bfdd3fca5c..ba4bd138a3 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -6,15 +6,11 @@ import { ViewStyle, View, Animated, - ColorValue, } from 'react-native'; -import color from 'color'; - import { ToggleButtonGroupContext } from './ToggleButtonGroup'; import { getToggleButtonColor } from './utils'; import { useInternalTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; import type { ThemeProp } from '../../types'; import { forwardRef } from '../../utils/forwardRef'; import type { IconSource } from '../Icon'; @@ -33,10 +29,6 @@ export type Props = { * Custom text color for button. */ iconColor?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Whether the button is disabled. */ @@ -111,7 +103,6 @@ const ToggleButton = forwardRef( value, status, onPress, - rippleColor, ...rest }: Props, ref @@ -128,12 +119,7 @@ const ToggleButton = forwardRef( (context && context.value === value) || status === 'checked'; const backgroundColor = getToggleButtonColor({ theme, checked }); - const borderColor = theme.isV3 - ? theme.colors.outline - : color(theme.dark ? white : black) - .alpha(0.29) - .rgb() - .string(); + const borderColor = theme.colors.outline; return ( ( ]} ref={ref} theme={theme} - rippleColor={rippleColor} {...rest} /> ); diff --git a/src/components/ToggleButton/utils.ts b/src/components/ToggleButton/utils.ts index 79c22665ad..e471a5b4b6 100644 --- a/src/components/ToggleButton/utils.ts +++ b/src/components/ToggleButton/utils.ts @@ -1,6 +1,3 @@ -import color from 'color'; - -import { tokens } from '../../styles/themes/v3/tokens'; import type { InternalTheme } from '../../types'; export const getToggleButtonColor = ({ @@ -11,16 +8,7 @@ export const getToggleButtonColor = ({ checked: boolean | null; }) => { if (checked) { - if (theme.isV3) { - return color(theme.colors.onSecondaryContainer) - .alpha(tokens.md.ref.opacity.level2) - .rgb() - .string(); - } - if (theme.dark) { - return 'rgba(255, 255, 255, .12)'; - } - return 'rgba(0, 0, 0, .08)'; + return theme.colors.surfaceContainerHighest; } - return 'transparent'; + return theme.colors.surfaceContainer; }; diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index f5a483db5a..fdfef8571f 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -204,9 +204,7 @@ const Tooltip = ({ style={[ styles.tooltip, { - backgroundColor: theme.isV3 - ? theme.colors.onSurface - : theme.colors.tooltip, + backgroundColor: theme.colors.onSurface, ...getTooltipPosition( measurement as Measurement, children as React.ReactElement diff --git a/src/components/TouchableRipple/TouchableRipple.native.tsx b/src/components/TouchableRipple/TouchableRipple.native.tsx index 1cb17b4068..3f8c791c33 100644 --- a/src/components/TouchableRipple/TouchableRipple.native.tsx +++ b/src/components/TouchableRipple/TouchableRipple.native.tsx @@ -73,12 +73,13 @@ const TouchableRipple = ( underlayColor, }); - // A workaround for ripple on Android P is to use useForeground + overflow: 'hidden' + // Use foreground ripple on Android P+ to ensure visibility. + // Background ripple requires the view to have a background drawable, + // which isn't always present. Foreground ripple needs overflow: 'hidden' + // to stay within bounds. // https://github.com/facebook/react-native/issues/6480 const useForeground = - Platform.OS === 'android' && - Platform.Version >= ANDROID_VERSION_PIE && - borderless; + Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_PIE; if (TouchableRipple.supported) { const androidRipple = rippleEffectEnabled @@ -94,7 +95,7 @@ const TouchableRipple = ( {...rest} ref={ref} disabled={disabled} - style={[borderless && styles.overflowHidden, style]} + style={[useForeground && styles.overflowHidden, style]} android_ripple={androidRipple} > {React.Children.only(children)} diff --git a/src/components/TouchableRipple/utils.ts b/src/components/TouchableRipple/utils.ts index 29c2b18e25..6f6264727a 100644 --- a/src/components/TouchableRipple/utils.ts +++ b/src/components/TouchableRipple/utils.ts @@ -17,11 +17,11 @@ const getUnderlayColor = ({ return underlayColor; } - if (theme.isV3) { + if (typeof calculatedRippleColor === 'string') { return color(calculatedRippleColor).rgb().string(); } - - return color(calculatedRippleColor).fade(0.5).rgb().string(); + // PlatformColor — can't convert, return stateLayer default + return theme.colors.primary; }; const getRippleColor = ({ @@ -35,14 +35,7 @@ const getRippleColor = ({ return rippleColor; } - if (theme.isV3) { - return color(theme.colors.onSurface).alpha(0.12).rgb().string(); - } - - if (theme.dark) { - return color(theme.colors.text).alpha(0.32).rgb().string(); - } - return color(theme.colors.text).alpha(0.2).rgb().string(); + return theme.colors.stateLayerPressed; }; export const getTouchableRippleColors = ({ diff --git a/src/components/Typography/AnimatedText.tsx b/src/components/Typography/AnimatedText.tsx index 6504ad4b92..19872e2d93 100644 --- a/src/components/Typography/AnimatedText.tsx +++ b/src/components/Typography/AnimatedText.tsx @@ -50,7 +50,7 @@ const AnimatedText = forwardRef>( const theme = useInternalTheme(themeOverrides); const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'; - if (theme.isV3 && variant) { + if (variant) { const font = theme.fonts[variant]; if (typeof font !== 'object') { throw new Error( @@ -73,10 +73,10 @@ const AnimatedText = forwardRef>( /> ); } else { - const font = !theme.isV3 ? theme.fonts.regular : theme.fonts.bodyMedium; + const font = theme.fonts.bodyMedium; const textStyle = { ...font, - color: theme.isV3 ? theme.colors.onSurface : theme.colors.text, + color: theme.colors.onSurface, }; return ( root.current?.setNativeProps(args), })); - if (theme.isV3 && variant) { + if (variant) { let font = theme.fonts[variant]; let textStyle = [font, style]; if ( React.isValidElement(rest.children) && - (rest.children.type === Component || - rest.children.type === AnimatedText || - rest.children.type === StyledText) + (rest.children.type === Component || rest.children.type === AnimatedText) ) { const { props } = rest.children as { props: { variant?: string; style?: StyleProp }; @@ -155,10 +152,10 @@ const Text = ( /> ); } else { - const font = theme.isV3 ? theme.fonts.default : theme.fonts?.regular; + const font = theme.fonts.default; const textStyle = { ...font, - color: theme.isV3 ? theme.colors?.onSurface : theme.colors.text, + color: theme.colors.onSurface, }; return ( = | (T extends string ? (string extends T ? never : T) : never) - | keyof typeof MD3TypescaleKey; + | keyof typeof TypescaleKey; diff --git a/src/components/Typography/v2/Caption.tsx b/src/components/Typography/v2/Caption.tsx deleted file mode 100644 index 7255c4f4a3..0000000000 --- a/src/components/Typography/v2/Caption.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -import { Text, TextStyle, StyleSheet, StyleProp } from 'react-native'; - -import StyledText from './StyledText'; - -export type Props = React.ComponentProps & { - style?: StyleProp; - children: React.ReactNode; -}; - -// @component-group Typography -/** - * @deprecated Deprecated in v5.x - use `` instead. - * Typography component for showing a caption. - * - *
- * - *
- * - * ## Usage - * ```js - * import * as React from 'react'; - * import { Caption } from 'react-native-paper'; - * - * const MyComponent = () => ( - * Caption - * ); - * - * export default MyComponent; - * ``` - */ -const Caption = (props: Props) => ( - -); - -export default Caption; - -const styles = StyleSheet.create({ - text: { - fontSize: 12, - lineHeight: 20, - marginVertical: 2, - letterSpacing: 0.4, - }, -}); diff --git a/src/components/Typography/v2/Headline.tsx b/src/components/Typography/v2/Headline.tsx deleted file mode 100644 index c635f81d07..0000000000 --- a/src/components/Typography/v2/Headline.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from 'react'; -import { Text, TextStyle, StyleSheet, StyleProp } from 'react-native'; - -import StyledText from './StyledText'; - -export type Props = React.ComponentProps & { - style?: StyleProp; - children: React.ReactNode; -}; - -// @component-group Typography - -/** - * @deprecated Deprecated in v5.x - use `` instead. - * Typography component for showing a headline. - * - *
- * - *
- * - * ## Usage - * ```js - * import * as React from 'react'; - * import { Headline } from 'react-native-paper'; - * - * const MyComponent = () => ( - * Headline - * ); - * - * export default MyComponent; - * ``` - */ -const Headline = (props: Props) => { - return ( - - ); -}; - -export default Headline; - -const styles = StyleSheet.create({ - text: { - fontSize: 24, - lineHeight: 32, - marginVertical: 2, - letterSpacing: 0, - }, -}); diff --git a/src/components/Typography/v2/Paragraph.tsx b/src/components/Typography/v2/Paragraph.tsx deleted file mode 100644 index 26149d37e3..0000000000 --- a/src/components/Typography/v2/Paragraph.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -import { TextProps, StyleSheet } from 'react-native'; - -import StyledText from './StyledText'; - -export type Props = TextProps & { - children: React.ReactNode; -}; - -// @component-group Typography - -/** - * @deprecated Deprecated in v5.x - use `` instead. - * Typography component for showing a paragraph. - * - *
- * - *
- * - * ## Usage - * ```js - * import * as React from 'react'; - * import { Paragraph } from 'react-native-paper'; - * - * const MyComponent = () => ( - * Paragraph - * ); - * - * export default MyComponent; - * ``` - */ -const Paragraph = (props: Props) => ( - -); - -export default Paragraph; - -const styles = StyleSheet.create({ - text: { - fontSize: 14, - lineHeight: 20, - marginVertical: 2, - letterSpacing: 0.25, - }, -}); diff --git a/src/components/Typography/v2/StyledText.tsx b/src/components/Typography/v2/StyledText.tsx deleted file mode 100644 index 5d976ff267..0000000000 --- a/src/components/Typography/v2/StyledText.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import * as React from 'react'; -import { I18nManager, StyleProp, StyleSheet, TextStyle } from 'react-native'; - -import color from 'color'; -import type { ThemeProp } from 'src/types'; - -import Text from './Text'; -import { useInternalTheme } from '../../../core/theming'; - -type Props = React.ComponentProps & { - alpha?: number; - family: 'regular' | 'medium' | 'light' | 'thin'; - style?: StyleProp; - theme?: ThemeProp; -}; - -const StyledText = ({ - alpha = 1, - family, - style, - theme: themeOverrides, - ...rest -}: Props) => { - const theme = useInternalTheme(themeOverrides); - - const textColor = color( - theme.isV3 ? theme.colors.onSurface : theme.colors?.text - ) - .alpha(alpha) - .rgb() - .string(); - const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'; - - return ( - - ); -}; - -const styles = StyleSheet.create({ - text: { - textAlign: 'left', - }, -}); - -export default StyledText; diff --git a/src/components/Typography/v2/Subheading.tsx b/src/components/Typography/v2/Subheading.tsx deleted file mode 100644 index d7c849d10b..0000000000 --- a/src/components/Typography/v2/Subheading.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import { Text, TextStyle, StyleSheet, StyleProp } from 'react-native'; - -import StyledText from './StyledText'; - -export type Props = React.ComponentProps & { - style?: StyleProp; - children: React.ReactNode; -}; - -// @component-group Typography - -/** - * @deprecated Deprecated in v5.x - use `` instead. - * Typography component for showing a subheading. - * - *
- * - *
- * - * ## Usage - * ```js - * import * as React from 'react'; - * import { Subheading } from 'react-native-paper'; - * - * const MyComponent = () => ( - * Subheading - * ); - * - * export default MyComponent; - * ``` - */ -const Subheading = (props: Props) => ( - -); - -export default Subheading; - -const styles = StyleSheet.create({ - text: { - fontSize: 16, - lineHeight: 24, - marginVertical: 2, - letterSpacing: 0.5, - }, -}); diff --git a/src/components/Typography/v2/Text.tsx b/src/components/Typography/v2/Text.tsx deleted file mode 100644 index 8114915189..0000000000 --- a/src/components/Typography/v2/Text.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import * as React from 'react'; -import { - StyleProp, - StyleSheet, - Text as NativeText, - TextStyle, -} from 'react-native'; - -import type { MD2Theme } from 'src/types'; - -import { useInternalTheme } from '../../../core/theming'; -import { forwardRef } from '../../../utils/forwardRef'; - -type Props = React.ComponentProps & { - style?: StyleProp; - /** - * @optional - */ - theme?: MD2Theme; -}; - -// @component-group Typography - -/** - * Text component which follows styles from the theme. - * - * @extends Text props https://reactnative.dev/docs/text#props - */ -const Text: React.ForwardRefRenderFunction<{}, Props> = ( - { style, theme: overrideTheme, ...rest }: Props, - ref -) => { - const root = React.useRef(null); - const theme = useInternalTheme(overrideTheme); - - React.useImperativeHandle(ref, () => ({ - setNativeProps: (args: Object) => root.current?.setNativeProps(args), - })); - - return ( - - ); -}; - -const styles = StyleSheet.create({ - text: { - textAlign: 'left', - }, -}); - -export default forwardRef(Text); diff --git a/src/components/Typography/v2/Title.tsx b/src/components/Typography/v2/Title.tsx deleted file mode 100644 index cbddd1e22e..0000000000 --- a/src/components/Typography/v2/Title.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -import { Text, StyleSheet } from 'react-native'; - -import StyledText from './StyledText'; - -export type Props = React.ComponentProps & { - children: React.ReactNode; -}; - -// @component-group Typography - -/** - * @deprecated Deprecated in v5.x - use `` instead. - * Typography component for showing a title. - * - *
- * - *
- * - * ## Usage - * ```js - * import * as React from 'react'; - * import { Title } from 'react-native-paper'; - * - * const MyComponent = () => ( - * Title - * ); - * - * export default MyComponent; - * ``` - */ -const Title = (props: Props) => ( - -); - -export default Title; - -const styles = StyleSheet.create({ - text: { - fontSize: 20, - lineHeight: 30, - marginVertical: 2, - letterSpacing: 0.15, - }, -}); diff --git a/src/components/Typography/v2/index.ts b/src/components/Typography/v2/index.ts deleted file mode 100644 index 42fdec5730..0000000000 --- a/src/components/Typography/v2/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { default as Caption } from './Caption'; -export { default as Headline } from './Headline'; -export { default as Paragraph } from './Paragraph'; -export { default as Subheading } from './Subheading'; -export { default as Title } from './Title'; diff --git a/src/components/__tests__/AnimatedFAB.test.tsx b/src/components/__tests__/AnimatedFAB.test.tsx index a31f6d5fb4..a848c2a1c8 100644 --- a/src/components/__tests__/AnimatedFAB.test.tsx +++ b/src/components/__tests__/AnimatedFAB.test.tsx @@ -6,12 +6,12 @@ import { Animated, StyleSheet } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; import { act } from 'react-test-renderer'; -import { MD3Colors } from '../../styles/themes/v3/tokens'; +import { Colors } from '../../styles/themes/tokens'; import AnimatedFAB from '../FAB/AnimatedFAB'; const styles = StyleSheet.create({ background: { - backgroundColor: MD3Colors.tertiary50, + backgroundColor: Colors.tertiary50, }, }); diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx index 6f76dab75b..196cdf40cc 100644 --- a/src/components/__tests__/Appbar/Appbar.test.tsx +++ b/src/components/__tests__/Appbar/Appbar.test.tsx @@ -1,13 +1,11 @@ import React from 'react'; -import { Animated, Platform } from 'react-native'; +import { Animated } from 'react-native'; import { act, render } from '@testing-library/react-native'; import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock'; -import PaperProvider from '../../../core/PaperProvider'; import { getTheme } from '../../../core/theming'; -import overlay from '../../../styles/overlay'; -import { tokens } from '../../../styles/themes/v3/tokens'; +import { tokens } from '../../../styles/themes/tokens'; import Appbar from '../../Appbar'; import { getAppbarBackgroundColor, @@ -17,7 +15,6 @@ import { } from '../../Appbar/utils'; import Menu from '../../Menu/Menu'; import Searchbar from '../../Searchbar'; -import Tooltip from '../../Tooltip/Tooltip'; import Text from '../../Typography/Text'; const renderAppbarContent = utilRenderAppbarContent as ( @@ -58,7 +55,6 @@ describe('renderAppbarContent', () => { it('should render all children types if renderOnly is not specified', () => { const result = renderAppbarContent({ - isV3: false, children, isDark: false, }); @@ -68,7 +64,6 @@ describe('renderAppbarContent', () => { it('should render all children types except specified in renderExcept', () => { const result = renderAppbarContent({ - isV3: false, children: [ ...children, { it('should render only children types specifed in renderOnly', () => { const result = renderAppbarContent({ - isV3: false, children, isDark: false, renderOnly: ['Appbar.Action'], @@ -104,7 +98,6 @@ describe('renderAppbarContent', () => { it('should render AppbarContent with correct mode', () => { const result = renderAppbarContent({ - isV3: false, children, isDark: false, renderOnly: ['Appbar.Content'], @@ -115,97 +108,36 @@ describe('renderAppbarContent', () => { }); it('should render centered AppbarContent', () => { - const renderResult = (isV3 = true) => - renderAppbarContent({ - children, - isDark: false, - isV3, - renderOnly: ['Appbar.Content'], - mode: 'center-aligned', - shouldCenterContent: true, - }); - - const centerAlignedContent = { - alignItems: 'center', - }; - - expect(renderResult()[0].props.style).toEqual( - expect.arrayContaining([expect.objectContaining(centerAlignedContent)]) - ); - - expect(renderResult(false)[0].props.style).toEqual( - expect.arrayContaining([expect.objectContaining(centerAlignedContent)]) - ); - }); - - it('should not render centered AppbarContent for Android, if not V3', () => { - Platform.OS = 'android'; - const renderResult = (isV3 = true) => - renderAppbarContent({ - children, - isDark: false, - isV3, - renderOnly: ['Appbar.Content'], - mode: 'center-aligned', - shouldCenterContent: !isV3 && Platform.OS === 'ios', - }); - - const centerAlignedContent = { - alignItems: 'center', - }; - - expect(renderResult(false)[0].props.style).not.toEqual( - expect.arrayContaining([expect.objectContaining(centerAlignedContent)]) - ); - }); - - it('should render centered AppbarContent always for iOS, if not V3', () => { - Platform.OS = 'ios'; - const renderResult = (isV3 = true) => - renderAppbarContent({ - children, - isDark: false, - isV3, - renderOnly: ['Appbar.Content'], - mode: 'center-aligned', - shouldCenterContent: !isV3 && Platform.OS === 'ios', - }); + const result = renderAppbarContent({ + children, + isDark: false, + renderOnly: ['Appbar.Content'], + mode: 'center-aligned', + shouldCenterContent: true, + }); const centerAlignedContent = { alignItems: 'center', }; - expect(renderResult(false)[0].props.style).toEqual( + expect(result[0].props.style).toEqual( expect.arrayContaining([expect.objectContaining(centerAlignedContent)]) ); }); it('should render AppbarContent with correct spacings', () => { - const renderResult = (isV3 = true, withAppbarBackAction = false) => - renderAppbarContent({ - children, - isDark: false, - isV3, - renderOnly: [ - 'Appbar.Content', - withAppbarBackAction && 'Appbar.BackAction', - ], - }); - - const v2Spacing = { - marginLeft: 8, - }; + const result = renderAppbarContent({ + children, + isDark: false, + renderOnly: ['Appbar.Content'], + }); - const v3Spacing = { + const spacing = { marginLeft: 12, }; - expect(renderResult()[0].props.style).toEqual( - expect.arrayContaining([expect.objectContaining(v3Spacing)]) - ); - - expect(renderResult(false, true)[1].props.style).toEqual( - expect.arrayContaining([expect.objectContaining(v2Spacing)]) + expect(result[0].props.style).toEqual( + expect.arrayContaining([expect.objectContaining(spacing)]) ); }); @@ -296,21 +228,6 @@ describe('AppbarAction', () => { expect(appbarActionIcon.props.color).toBe('purple'); }); - it('should be rendered with custom ripple color', () => { - const { getByTestId } = render( - - - - ); - const appbarActionContainer = getByTestId('appbar-action-container').props - .children; - expect(appbarActionContainer.props.rippleColor).toBe('purple'); - }); - it('should render AppbarBackAction with custom color', () => { const { getByTestId } = render( @@ -321,40 +238,6 @@ describe('AppbarAction', () => { .children; expect(appbarBackActionIcon.props.color).toBe('purple'); }); - - describe('When V2', () => { - const theme = { isV3: false }; - - it('should be rendered with the right color when no color is passed', () => { - const { getByTestId } = render( - - - - ); - - const appbarActionIcon = getByTestId('cross-fade-icon-current').props - .children; - - expect(appbarActionIcon.props.color).toBe('#ffffff'); - }); - - it('should be rendered with the right color when no color is passed but is wrapped by a Tooltip', () => { - const { getByTestId } = render( - - - - - - - - ); - - const appbarActionIcon = getByTestId('cross-fade-icon-current').props - .children; - - expect(appbarActionIcon.props.color).toBe('#ffffff'); - }); - }); }); describe('AppbarContent', () => { @@ -390,36 +273,23 @@ describe('AppbarContent', () => { }); describe('getAppbarColors', () => { - const elevation = 4; const customBackground = 'aquamarine'; it('should return custom color no matter what is the theme version', () => { - expect( - getAppbarBackgroundColor(getTheme(), elevation, customBackground) - ).toBe(customBackground); - }); - - it('should return v3 light color if theme version is 3', () => { - expect(getAppbarBackgroundColor(getTheme(), elevation)).toBe( - tokens.md.ref.palette.neutral99 - ); - }); - - it('should return v3 dark color if theme version is 3', () => { - expect(getAppbarBackgroundColor(getTheme(true), elevation)).toBe( - tokens.md.ref.palette.neutral10 + expect(getAppbarBackgroundColor(getTheme(), customBackground)).toBe( + customBackground ); }); - it('should return v2 light color if theme version is 2', () => { - expect(getAppbarBackgroundColor(getTheme(false, false), elevation)).toBe( - '#6200ee' + it('should return light theme color', () => { + expect(getAppbarBackgroundColor(getTheme())).toBe( + tokens.md.ref.palette.neutral98 ); }); - it('should return v2 dark color if theme version is 2', () => { - expect(getAppbarBackgroundColor(getTheme(true, false), elevation)).toBe( - overlay(elevation, '#121212') + it('should return dark theme color', () => { + expect(getAppbarBackgroundColor(getTheme(true))).toBe( + tokens.md.ref.palette.neutral6 ); }); }); diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap index 4a62c376d8..9ad88efe63 100644 --- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap +++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap @@ -5,7 +5,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "height": 64, "shadowColor": "#000", "shadowOffset": { @@ -23,7 +23,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "flex": 1, "flexDirection": "row", "paddingBottom": undefined, @@ -46,7 +46,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(238, 232, 244)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 28, "shadowColor": "#000", "shadowOffset": { @@ -64,7 +64,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(238, 232, 244)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 28, "flex": undefined, "flexDirection": "row", @@ -104,7 +104,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -181,35 +181,43 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` } testID="search-bar-icon" > - + - magnify - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + magnify + + @@ -217,7 +225,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` accessibilityRole="search" keyboardAppearance="light" placeholder="Search" - placeholderTextColor="rgba(28, 27, 31, 1)" + placeholderTextColor="rgba(29, 27, 32, 1)" returnKeyType="search" selectionColor="rgba(103, 80, 164, 1)" style={ @@ -288,7 +296,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -365,35 +373,43 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` } testID="search-bar-clear-icon" > - + - close - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + close + + @@ -409,7 +425,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A collapsable={false} style={ { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "height": 64, "shadowColor": "#000", "shadowOffset": { @@ -427,7 +443,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A style={ { "alignItems": "center", - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "flex": 1, "flexDirection": "row", "paddingBottom": undefined, @@ -471,7 +487,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -550,76 +566,84 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A > - + > + + @@ -659,7 +683,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -672,14 +696,13 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A }, [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 22, "fontWeight": "400", "letterSpacing": 0, "lineHeight": 28, }, - false, undefined, ], ], @@ -715,7 +738,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -793,66 +816,74 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A > - - menu - + + menu + + diff --git a/src/components/__tests__/Avatar.test.tsx b/src/components/__tests__/Avatar.test.tsx index 96d69582b6..d54e191e1c 100644 --- a/src/components/__tests__/Avatar.test.tsx +++ b/src/components/__tests__/Avatar.test.tsx @@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; -import { red500 } from '../../styles/themes/v2/colors'; +import { red500 } from '../../styles/themes/baseColors'; import * as Avatar from '../Avatar/Avatar'; const styles = StyleSheet.create({ diff --git a/src/components/__tests__/Badge.test.tsx b/src/components/__tests__/Badge.test.tsx index 32730659a1..3210a9a208 100644 --- a/src/components/__tests__/Badge.test.tsx +++ b/src/components/__tests__/Badge.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { render } from '@testing-library/react-native'; -import { red500 } from '../../styles/themes/v2/colors'; +import { red500 } from '../../styles/themes/baseColors'; import Badge from '../Badge'; it('renders badge', () => { diff --git a/src/components/__tests__/Banner.test.tsx b/src/components/__tests__/Banner.test.tsx index 8e0d8c90d1..048bfa7275 100644 --- a/src/components/__tests__/Banner.test.tsx +++ b/src/components/__tests__/Banner.test.tsx @@ -91,7 +91,7 @@ it('render visible banner, with custom theme', () => { visible theme={{ colors: { - text: '#00f', + onSurface: '#00f', surface: '#ccc', primary: '#043', }, diff --git a/src/components/__tests__/BottomNavigation.test.tsx b/src/components/__tests__/BottomNavigation.test.tsx index 43c1e9383b..db5e46922e 100644 --- a/src/components/__tests__/BottomNavigation.test.tsx +++ b/src/components/__tests__/BottomNavigation.test.tsx @@ -2,11 +2,9 @@ import * as React from 'react'; import { Animated, Easing, Platform, StyleSheet } from 'react-native'; import { act, fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; -import { red300 } from '../../styles/themes/v2/colors'; -import { MD3Colors } from '../../styles/themes/v3/tokens'; +import { red300 } from '../../styles/themes/baseColors'; import BottomNavigation from '../BottomNavigation/BottomNavigation'; import BottomNavigationRouteScreen from '../BottomNavigation/BottomNavigationRouteScreen'; import { @@ -378,7 +376,7 @@ it('renders custom background color passed to barStyle property', () => { ); const wrapper = getByTestId('bottom-navigation-bar-content'); - expect(wrapper).toHaveStyle({ backgroundColor: red300 }); + expect(wrapper).toHaveStyle({ backgroundColor: '#e57373' }); }); it('renders a single tab', () => { @@ -446,22 +444,6 @@ it('does not apply maxTabBarWidth styling if compact prop is falsy', () => { }); }); -it('displays ripple animation view if shifting is truthy', () => { - const { getByTestId } = render( - route.title} - getLazy={({ route }) => route.key === 'key-2'} - testID="bottom-navigation" - theme={{ isV3: false }} - shifting - /> - ); - - expect(getByTestId('bottom-navigation-bar-content-ripple')).toBeDefined(); -}); - it('does not display ripple animation view if shifting is falsy', () => { const { queryByTestId } = render( { describe('getActiveTintColor', () => { it.each` - activeColor | defaultColor | useV3 | expected - ${'#FBF7DB'} | ${'#fff'} | ${true} | ${'#FBF7DB'} - ${undefined} | ${'#fff'} | ${true} | ${MD3Colors.secondary10} - ${undefined} | ${'#fff'} | ${false} | ${'#fff'} + activeColor | expected + ${'#FBF7DB'} | ${'#FBF7DB'} + ${undefined} | ${getTheme(false).colors.onSecondaryContainer} `( - 'returns $expected when activeColor: $activeColor and useV3: $useV3', - ({ activeColor, defaultColor, useV3, expected }) => { - const theme = getTheme(false, useV3); - const color = getActiveTintColor({ activeColor, defaultColor, theme }); + 'returns $expected when activeColor: $activeColor', + ({ activeColor, expected }) => { + const theme = getTheme(false); + const color = getActiveTintColor({ activeColor, theme }); expect(color).toBe(expected); } ); @@ -495,17 +476,15 @@ describe('getActiveTintColor', () => { describe('getInactiveTintColor', () => { it.each` - inactiveColor | defaultColor | useV3 | expected - ${'#853D4B'} | ${'#fff'} | ${true} | ${'#853D4B'} - ${undefined} | ${'#fff'} | ${true} | ${MD3Colors.neutralVariant30} - ${undefined} | ${'#fff'} | ${false} | ${color('#fff').alpha(0.5).rgb().string()} + inactiveColor | expected + ${'#853D4B'} | ${'#853D4B'} + ${undefined} | ${getTheme(false).colors.onSurfaceVariant} `( - 'returns $expected when inactiveColor: $inactiveColor and useV3: $useV3', - ({ inactiveColor, defaultColor, useV3, expected }) => { - const theme = getTheme(false, useV3); + 'returns $expected when inactiveColor: $inactiveColor', + ({ inactiveColor, expected }) => { + const theme = getTheme(false); const color = getInactiveTintColor({ inactiveColor, - defaultColor, theme, }); expect(color).toBe(expected); @@ -515,22 +494,19 @@ describe('getInactiveTintColor', () => { describe('getLabelColor', () => { it.each` - tintColor | focused | defaultColor | useV3 | expected - ${'#FBF7DB'} | ${true} | ${'#fff'} | ${true} | ${'#FBF7DB'} - ${'#853D4B'} | ${true} | ${'#fff'} | ${true} | ${'#853D4B'} - ${undefined} | ${true} | ${'#fff'} | ${true} | ${MD3Colors.neutral10} - ${undefined} | ${false} | ${'#fff'} | ${true} | ${MD3Colors.neutralVariant30} - ${undefined} | ${false} | ${'#fff'} | ${false} | ${'#fff'} - ${undefined} | ${true} | ${'#fff'} | ${false} | ${'#fff'} + tintColor | focused | expected + ${'#FBF7DB'} | ${true} | ${'#FBF7DB'} + ${'#853D4B'} | ${true} | ${'#853D4B'} + ${undefined} | ${true} | ${getTheme(false).colors.onSurface} + ${undefined} | ${false} | ${getTheme(false).colors.onSurfaceVariant} `( - 'returns $expected when tintColor: $tintColor, focused: $focused useV3: $useV3', - ({ tintColor, focused, defaultColor, useV3, expected }) => { - const theme = getTheme(false, useV3); + 'returns $expected when tintColor: $tintColor, focused: $focused', + ({ tintColor, focused, expected }) => { + const theme = getTheme(false); const color = getLabelColor({ tintColor, hasColor: Boolean(tintColor), focused, - defaultColor, theme, }); expect(color).toBe(expected); diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx index 8917eaca92..da1e93b57c 100644 --- a/src/components/__tests__/Button.test.tsx +++ b/src/components/__tests__/Button.test.tsx @@ -2,12 +2,12 @@ import * as React from 'react'; import { Animated, StyleSheet } from 'react-native'; import { act, fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; -import { black, pink500, white } from '../../styles/themes/v2/colors'; +import { white } from '../../styles/themes/baseColors'; import Button from '../Button/Button'; import { getButtonColors } from '../Button/utils'; +const pink500 = '#e91e63'; const styles = StyleSheet.create({ flexing: { @@ -350,7 +350,8 @@ describe('getButtonColors - background color', () => { disabled: true, }) ).toMatchObject({ - backgroundColor: getTheme().colors.surfaceDisabled, + backgroundColor: getTheme().colors.onSurface, + backgroundOpacity: 0.1, }); }) ); @@ -365,7 +366,8 @@ describe('getButtonColors - background color', () => { disabled: true, }) ).toMatchObject({ - backgroundColor: getTheme(true).colors.surfaceDisabled, + backgroundColor: getTheme(true).colors.onSurface, + backgroundOpacity: 0.1, }); }) ); @@ -465,35 +467,11 @@ describe('getButtonColors - background color', () => { it('should return correct theme color, for theme version 2, contained mode', () => { expect( getButtonColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode: 'contained', }) ).toMatchObject({ - backgroundColor: getTheme(false, false).colors.primary, - }); - }); - - it('should return correct theme color, for theme version 2, when disabled, contained mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'contained', - disabled: true, - }) - ).toMatchObject({ - backgroundColor: color(black).alpha(0.12).rgb().string(), - }); - }); - - it('should return correct theme color, for theme version 2, when disabled, dark theme, contained mode', () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - mode: 'contained', - disabled: true, - }) - ).toMatchObject({ - backgroundColor: color(white).alpha(0.12).rgb().string(), + backgroundColor: getTheme(false).colors.primary, }); }); @@ -501,7 +479,7 @@ describe('getButtonColors - background color', () => { it(`should return correct theme color, for theme version 2, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode, }) ).toMatchObject({ @@ -514,7 +492,7 @@ describe('getButtonColors - background color', () => { it(`should return correct theme color, for theme version 2, dark theme, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(true, false), + theme: getTheme(true), mode, }) ).toMatchObject({ @@ -527,7 +505,7 @@ describe('getButtonColors - background color', () => { it(`should return correct theme color, for theme version 2, when disabled, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode, disabled: true, }) @@ -541,7 +519,7 @@ describe('getButtonColors - background color', () => { it(`should return correct theme color, for theme version 2, when disabled, dark theme, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(true, false), + theme: getTheme(true), mode, disabled: true, }) @@ -575,7 +553,8 @@ describe('getButtonColors - text color', () => { mode: 'text', }) ).toMatchObject({ - textColor: getTheme().colors.onSurfaceDisabled, + textColor: getTheme().colors.onSurface, + textOpacity: 0.38, }); }); @@ -588,7 +567,8 @@ describe('getButtonColors - text color', () => { mode: 'text', }) ).toMatchObject({ - textColor: getTheme(true).colors.onSurfaceDisabled, + textColor: getTheme(true).colors.onSurface, + textOpacity: 0.38, }); }); @@ -676,34 +656,10 @@ describe('getButtonColors - text color', () => { }); }); - it('should return correct theme text color, for theme version 2, when disabled, no matter what the mode is', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - disabled: true, - mode: 'text', - }) - ).toMatchObject({ - textColor: color(black).alpha(0.32).rgb().string(), - }); - }); - - it('should return correct theme text color, for theme version 2, when disabled, dark theme, no matter what the mode is', () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - disabled: true, - mode: 'text', - }) - ).toMatchObject({ - textColor: color(white).alpha(0.32).rgb().string(), - }); - }); - it('should return correct theme text color, for theme version 2, contained mode', () => { expect( getButtonColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode: 'contained', dark: true, }) @@ -716,11 +672,11 @@ describe('getButtonColors - text color', () => { it(`should return correct theme text color, for theme version 2, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode, }) ).toMatchObject({ - textColor: getTheme(false, false).colors.primary, + textColor: getTheme(false).colors.primary, }); }) ); @@ -729,11 +685,11 @@ describe('getButtonColors - text color', () => { it(`should return correct theme text color, for theme version 2, dark theme, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(true, false), + theme: getTheme(true), mode, }) ).toMatchObject({ - textColor: getTheme(true, false).colors.primary, + textColor: getTheme(true).colors.primary, }); }) ); @@ -748,7 +704,7 @@ describe('getButtonColors - border color', () => { mode: 'outlined', }) ).toMatchObject({ - borderColor: getTheme().colors.surfaceDisabled, + borderColor: getTheme().colors.outlineVariant, }); }); @@ -760,7 +716,7 @@ describe('getButtonColors - border color', () => { mode: 'outlined', }) ).toMatchObject({ - borderColor: getTheme(true).colors.surfaceDisabled, + borderColor: getTheme(true).colors.outlineVariant, }); }); @@ -771,7 +727,7 @@ describe('getButtonColors - border color', () => { mode: 'outlined', }) ).toMatchObject({ - borderColor: getTheme().colors.outline, + borderColor: getTheme().colors.outlineVariant, }); }); @@ -782,7 +738,7 @@ describe('getButtonColors - border color', () => { mode: 'outlined', }) ).toMatchObject({ - borderColor: getTheme(true).colors.outline, + borderColor: getTheme(true).colors.outlineVariant, }); }); @@ -814,34 +770,12 @@ describe('getButtonColors - border color', () => { }) ); - it('should return correct border color, for theme version 2, outlined mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'outlined', - }) - ).toMatchObject({ - borderColor: color(black).alpha(0.29).rgb().string(), - }); - }); - - it('should return correct border color, for theme version 2, dark theme, outlined mode', () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - mode: 'outlined', - }) - ).toMatchObject({ - borderColor: color(white).alpha(0.29).rgb().string(), - }); - }); - (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach( (mode) => it(`should return transparent border, for theme version 2, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode, }) ).toMatchObject({ @@ -855,7 +789,7 @@ describe('getButtonColors - border color', () => { it(`should return transparent border, for theme version 2, dark theme, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode, }) ).toMatchObject({ @@ -877,17 +811,6 @@ describe('getButtonColors - border width', () => { }); }); - it('should return correct border width, for theme version 2, outlined mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'outlined', - }) - ).toMatchObject({ - borderWidth: StyleSheet.hairlineWidth, - }); - }); - (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach( (mode) => it(`should return correct border width, for ${mode} mode`, () => { diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx index 3da4aa2c51..dd6a0fa606 100644 --- a/src/components/__tests__/Card/Card.test.tsx +++ b/src/components/__tests__/Card/Card.test.tsx @@ -2,11 +2,9 @@ import React from 'react'; import { Animated, StyleSheet, Text } from 'react-native'; import { act, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../../core/theming'; -import { black, white } from '../../../styles/themes/v2/colors'; -import { MD3Colors } from '../../../styles/themes/v3/tokens'; +import { Colors } from '../../../styles/themes/tokens'; import Button from '../../Button/Button'; import Card from '../../Card/Card'; import { getCardColors, getCardCoverStyle } from '../../Card/utils'; @@ -55,14 +53,14 @@ describe('Card', () => { {null} ); expect(getByLabelText('card')).toHaveStyle({ - borderColor: MD3Colors.error50, + borderColor: Colors.error50, }); }); @@ -197,7 +195,7 @@ describe('getCardColors - background color', () => { it('should return undefined, for theme version 2', () => { expect( getCardColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode: undefined as any, }) ).toMatchObject({ backgroundColor: undefined }); @@ -213,28 +211,6 @@ describe('getCardColors - border color', () => { }) ).toMatchObject({ borderColor: getTheme().colors.outline }); }); - - it('should return correct color, for theme version 2, dark mode', () => { - expect( - getCardColors({ - theme: getTheme(true, false), - mode: undefined as any, - }) - ).toMatchObject({ - borderColor: color(white).alpha(0.12).rgb().string(), - }); - }); - - it('should return correct color, for theme version 2, light mode', () => { - expect( - getCardColors({ - theme: getTheme(false, false), - mode: undefined as any, - }) - ).toMatchObject({ - borderColor: color(black).alpha(0.12).rgb().string(), - }); - }); }); describe('getCardCoverStyle - border radius', () => { @@ -255,44 +231,6 @@ describe('getCardCoverStyle - border radius', () => { }) ).toMatchObject({ borderRadius: 3 * getTheme().roundness }); }); - - it('should return correct border radius based on roundness, for theme version 2, when index is 0 and total is 1', () => { - expect( - getCardCoverStyle({ - theme: getTheme(false, false), - borderRadiusStyles: {}, - index: 0, - total: 1, - }) - ).toMatchObject({ borderRadius: getTheme(false, false).roundness }); - }); - - it('should return correct border radius based on roundness, for theme version 2, when index is 0 and total is other than 1', () => { - expect( - getCardCoverStyle({ - theme: getTheme(false, false), - borderRadiusStyles: {}, - index: 0, - total: 2, - }) - ).toMatchObject({ - borderTopLeftRadius: getTheme(false, false).roundness, - borderTopRightRadius: getTheme(false, false).roundness, - }); - }); - - it('should return correct border radius based on roundness, for theme version 2, when index is equal to total - 1', () => { - expect( - getCardCoverStyle({ - theme: getTheme(false, false), - borderRadiusStyles: {}, - index: 1, - total: 2, - }) - ).toMatchObject({ - borderBottomLeftRadius: getTheme(false, false).roundness, - }); - }); }); it('animated value changes correctly', () => { diff --git a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap index 301eea942c..a5a8abd1ac 100644 --- a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap +++ b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap @@ -5,7 +5,7 @@ exports[`Card renders an outlined card 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "borderRadius": 12, "shadowColor": "#000", "shadowOffset": { @@ -22,7 +22,7 @@ exports[`Card renders an outlined card 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "borderRadius": 12, "flex": undefined, "shadowColor": "#000", diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap index b5f1d87e77..5c416c9720 100644 --- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap +++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap @@ -147,7 +147,7 @@ exports[`can render leading checkbox control 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -163,9 +163,9 @@ exports[`can render leading checkbox control 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "right", }, undefined, @@ -245,7 +245,7 @@ exports[`can render the Android checkbox on different platforms 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -261,9 +261,9 @@ exports[`can render the Android checkbox on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, @@ -325,6 +325,7 @@ exports[`can render the Android checkbox on different platforms 1`] = ` collapsable={false} style={ { + "opacity": 1, "transform": [ { "scale": 1, @@ -462,7 +463,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -478,9 +479,9 @@ exports[`can render the iOS checkbox on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, @@ -643,7 +644,7 @@ exports[`renders unchecked 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -659,9 +660,9 @@ exports[`renders unchecked 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, diff --git a/src/components/__tests__/Checkbox/utils.test.tsx b/src/components/__tests__/Checkbox/utils.test.tsx index 580e3dbedf..ab681faaee 100644 --- a/src/components/__tests__/Checkbox/utils.test.tsx +++ b/src/components/__tests__/Checkbox/utils.test.tsx @@ -1,80 +1,9 @@ -import color from 'color'; - import { getTheme } from '../../../core/theming'; import { getAndroidSelectionControlColor, getSelectionControlIOSColor, } from '../../Checkbox/utils'; -describe('getAndroidSelectionControlColor - ripple color', () => { - it('should return correct disabled color, for theme version 3', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(), - disabled: true, - checked: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.onSurface) - .alpha(0.16) - .rgb() - .string(), - }); - }); - - it('should return correct disabled color, for theme version 2', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(false, false), - disabled: true, - checked: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.text) - .alpha(0.16) - .rgb() - .string(), - }); - }); - - it('should return custom color', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(), - customColor: 'purple', - checked: false, - }) - ).toMatchObject({ - rippleColor: color('purple').fade(0.32).rgb().string(), - }); - }); - - it('should return theme color, for theme version 3', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(), - checked: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.primary).fade(0.32).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(false, false), - checked: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.accent) - .fade(0.32) - .rgb() - .string(), - }); - }); -}); - describe('getAndroidSelectionControlColor - checkbox color', () => { it('should return correct disabled color, for theme version 3', () => { expect( @@ -84,19 +13,21 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { checked: false, }) ).toMatchObject({ - selectionControlColor: getTheme().colors.onSurfaceDisabled, + selectionControlColor: getTheme().colors.onSurface, + selectionControlOpacity: 0.38, }); }); it('should return correct disabled color, for theme version 2', () => { expect( getAndroidSelectionControlColor({ - theme: getTheme(false, false), + theme: getTheme(false), disabled: true, checked: false, }) ).toMatchObject({ - selectionControlColor: getTheme(false, false).colors.disabled, + selectionControlColor: getTheme(false).colors.onSurface, + selectionControlOpacity: 0.38, }); }); @@ -126,11 +57,11 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { it('should return theme color, for theme version 2, checked', () => { expect( getAndroidSelectionControlColor({ - theme: getTheme(false, false), + theme: getTheme(false), checked: true, }) ).toMatchObject({ - selectionControlColor: getTheme(false, false).colors.accent, + selectionControlColor: getTheme(false).colors.primary, }); }); @@ -160,92 +91,22 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { it('should return theme color, for theme version 2, unchecked, dark mode', () => { expect( getAndroidSelectionControlColor({ - theme: getTheme(true, false), + theme: getTheme(true), checked: false, }) ).toMatchObject({ - selectionControlColor: color(getTheme(true, false).colors.text) - .alpha(0.7) - .rgb() - .string(), + selectionControlColor: getTheme(true).colors.onSurfaceVariant, }); }); it('should return theme color, for theme version 2, unchecked, light mode', () => { expect( getAndroidSelectionControlColor({ - theme: getTheme(false, false), + theme: getTheme(false), checked: false, }) ).toMatchObject({ - selectionControlColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); -}); - -describe('getSelectionControlIOSColor - ripple color', () => { - it('should return correct disabled color, for theme version 3', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(), - disabled: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.onSurface) - .alpha(0.16) - .rgb() - .string(), - }); - }); - - it('should return correct disabled color, for theme version 2', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(false, false), - disabled: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.text) - .alpha(0.16) - .rgb() - .string(), - }); - }); - - it('should return custom color', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(), - customColor: 'purple', - }) - ).toMatchObject({ - rippleColor: color('purple').fade(0.32).rgb().string(), - }); - }); - - it('should return theme color, for theme version 3', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(), - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.primary).fade(0.32).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.accent) - .fade(0.32) - .rgb() - .string(), + selectionControlColor: getTheme(false).colors.onSurfaceVariant, }); }); }); @@ -258,18 +119,20 @@ describe('getSelectionControlIOSColor - checked color', () => { disabled: true, }) ).toMatchObject({ - checkedColor: getTheme().colors.onSurfaceDisabled, + checkedColor: getTheme().colors.primary, + checkedColorOpacity: 0.38, }); }); it('should return correct disabled color, for theme version 2', () => { expect( getSelectionControlIOSColor({ - theme: getTheme(false, false), + theme: getTheme(false), disabled: true, }) ).toMatchObject({ - checkedColor: getTheme(false, false).colors.disabled, + checkedColor: getTheme(false).colors.primary, + checkedColorOpacity: 0.38, }); }); @@ -297,10 +160,10 @@ describe('getSelectionControlIOSColor - checked color', () => { it('should return theme color, for theme version 2, checked', () => { expect( getSelectionControlIOSColor({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - checkedColor: getTheme(false, false).colors.accent, + checkedColor: getTheme(false).colors.primary, }); }); }); diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx index ca3055e35b..28ac06e158 100644 --- a/src/components/__tests__/Chip.test.tsx +++ b/src/components/__tests__/Chip.test.tsx @@ -5,7 +5,6 @@ import { act, render } from '@testing-library/react-native'; import color from 'color'; import { getTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; import Chip from '../Chip/Chip'; import { getChipColors } from '../Chip/helpers'; @@ -100,7 +99,8 @@ describe('getChipColors - text color', () => { isOutlined: false, }) ).toMatchObject({ - textColor: getTheme().colors.onSurfaceDisabled, + textColor: getTheme().colors.onSurface, + contentOpacity: 0.38, }); }); @@ -108,11 +108,12 @@ describe('getChipColors - text color', () => { expect( getChipColors({ disabled: true, - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ - textColor: getTheme(false, false).colors.disabled, + textColor: getTheme(false).colors.onSurface, + contentOpacity: 0.38, }); }); @@ -141,14 +142,11 @@ describe('getChipColors - text color', () => { it('should return correct theme color, for theme version 2', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ - textColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), + textColor: getTheme(false).colors.onSecondaryContainer, }); }); @@ -167,12 +165,12 @@ describe('getChipColors - text color', () => { it('should return custom color, for theme version 2', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), selectedColor: 'purple', isOutlined: false, }) ).toMatchObject({ - textColor: color('purple').alpha(0.87).rgb().string(), + textColor: 'purple', }); }); }); @@ -186,7 +184,8 @@ describe('getChipColors - icon color', () => { isOutlined: false, }) ).toMatchObject({ - iconColor: getTheme().colors.onSurfaceDisabled, + iconColor: getTheme().colors.onSurface, + contentOpacity: 0.38, }); }); @@ -194,11 +193,12 @@ describe('getChipColors - icon color', () => { expect( getChipColors({ disabled: true, - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ - iconColor: getTheme(false, false).colors.disabled, + iconColor: getTheme(false).colors.onSurface, + contentOpacity: 0.38, }); }); @@ -227,14 +227,11 @@ describe('getChipColors - icon color', () => { it('should return correct theme color, for theme version 2', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ - iconColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), + iconColor: getTheme(false).colors.onSecondaryContainer, }); }); @@ -253,164 +250,12 @@ describe('getChipColors - icon color', () => { it('should return custom color, for theme version 2', () => { expect( getChipColors({ - theme: getTheme(false, false), - selectedColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - iconColor: color('purple').alpha(0.54).rgb().string(), - }); - }); -}); - -describe('getChipColors - ripple color', () => { - it('should return theme color, for theme version 3, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(), - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.onSecondaryContainer) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 3, outline mode', () => { - expect( - getChipColors({ - theme: getTheme(), - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.onSurfaceVariant) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return custom color, for theme version 3', () => { - expect( - getChipColors({ - theme: getTheme(), - selectedColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('purple').alpha(0.12).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2', () => { - expect( - getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), selectedColor: 'purple', isOutlined: false, }) ).toMatchObject({ - rippleColor: color('purple').fade(0.5).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, dark mode, outline mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - customBackgroundColor: 'purple', - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color('purple').lighten(0.2).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, dark mode, flat mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - customBackgroundColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('purple').lighten(0.4).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, light mode, outline mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - customBackgroundColor: 'purple', - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color('purple').darken(0.08).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, light mode, flat mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - customBackgroundColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('purple').darken(0.2).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2, light mode, outline mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.surface) - .darken(0.08) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2, light mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('#ebebeb').darken(0.2).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2, dark mode, outline mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme(true, false).colors.surface) - .lighten(0.2) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2, dark mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('#383838').lighten(0.4).rgb().string(), + iconColor: 'purple', }); }); }); @@ -424,10 +269,7 @@ describe('getChipColor - selected background color', () => { isOutlined: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme().colors.onSurfaceVariant), 0) - .rgb() - .string(), + selectedBackgroundColor: 'purple', }); }); @@ -439,42 +281,7 @@ describe('getChipColor - selected background color', () => { isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme().colors.onSecondaryContainer), 0) - .rgb() - .string(), - }); - }); - - it('should return custom color, for theme version 3, outlined mode, show selected overlay', () => { - expect( - getChipColors({ - theme: getTheme(), - customBackgroundColor: 'purple', - showSelectedOverlay: true, - isOutlined: true, - }) - ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme().colors.onSurfaceVariant), 0.12) - .rgb() - .string(), - }); - }); - - it('should return custom color, for theme version 3, flat mode, show selected overlay', () => { - expect( - getChipColors({ - theme: getTheme(), - customBackgroundColor: 'purple', - showSelectedOverlay: true, - isOutlined: false, - }) - ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme().colors.onSecondaryContainer), 0.12) - .rgb() - .string(), + selectedBackgroundColor: 'purple', }); }); @@ -485,10 +292,7 @@ describe('getChipColor - selected background color', () => { isOutlined: true, }) ).toMatchObject({ - selectedBackgroundColor: color(getTheme().colors.surface) - .mix(color(getTheme().colors.onSurfaceVariant), 0) - .rgb() - .string(), + selectedBackgroundColor: getTheme().colors.surface, }); }); @@ -499,94 +303,88 @@ describe('getChipColor - selected background color', () => { isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color(getTheme().colors.secondaryContainer) - .mix(color(getTheme().colors.onSecondaryContainer), 0) - .rgb() - .string(), + selectedBackgroundColor: getTheme().colors.secondaryContainer, }); }); it('should return custom color, for theme version 2, light mode, outlined mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), customBackgroundColor: 'purple', isOutlined: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple').darken(0.08).rgb().string(), + selectedBackgroundColor: 'purple', }); }); it('should return custom color, for theme version 2, light mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), customBackgroundColor: 'purple', isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color('purple').darken(0.2).rgb().string(), + selectedBackgroundColor: 'purple', }); }); it('should return custom color, for theme version 2, dark mode, outlined mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), customBackgroundColor: 'purple', isOutlined: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple').lighten(0.2).rgb().string(), + selectedBackgroundColor: 'purple', }); }); it('should return custom color, for theme version 2, dark mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), customBackgroundColor: 'purple', isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color('purple').lighten(0.4).rgb().string(), + selectedBackgroundColor: 'purple', }); }); it('should return theme color, for theme version 2, outlined mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: true, }) ).toMatchObject({ - selectedBackgroundColor: color(getTheme(false, false).colors.surface) - .darken(0.08) - .rgb() - .string(), + selectedBackgroundColor: getTheme(false).colors.surface, }); }); it('should return theme color, for theme version 2, light mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color('#ebebeb').darken(0.2).rgb().string(), + selectedBackgroundColor: getTheme(false).colors.secondaryContainer, }); }); it('should return theme color, for theme version 2, dark mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color('#383838').lighten(0.4).rgb().string(), + selectedBackgroundColor: getTheme(true).colors.secondaryContainer, }); }); }); @@ -629,33 +427,33 @@ describe('getChipColor - background color', () => { it('should return theme color, for theme version 2, outlined mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: true, }) ).toMatchObject({ - backgroundColor: getTheme(false, false).colors.surface, + backgroundColor: getTheme(false).colors.surface, }); }); it('should return theme color, for theme version 2, light mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ - backgroundColor: '#ebebeb', + backgroundColor: getTheme(false).colors.secondaryContainer, }); }); it('should return theme color, for theme version 2, dark mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), isOutlined: false, }) ).toMatchObject({ - backgroundColor: '#383838', + backgroundColor: getTheme(true).colors.secondaryContainer, }); }); }); @@ -699,7 +497,7 @@ describe('getChipColor - border color', () => { it('should return custom color, for theme version 2, outlined mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), selectedColor: 'purple', isOutlined: true, }) @@ -711,56 +509,56 @@ describe('getChipColor - border color', () => { it('should return custom color, for theme version 2, flat mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), customBackgroundColor: 'purple', isOutlined: false, }) ).toMatchObject({ - borderColor: 'purple', + borderColor: 'transparent', }); }); it('should return theme color, for theme version 2, light mode, outlined mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: true, }) ).toMatchObject({ - borderColor: color(black).alpha(0.29).rgb().string(), + borderColor: getTheme(false).colors.outlineVariant, }); }); it('should return theme color, for theme version 2, dark mode, outlined mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), isOutlined: true, }) ).toMatchObject({ - borderColor: color(white).alpha(0.29).rgb().string(), + borderColor: getTheme(true).colors.outlineVariant, }); }); it('should return theme background color, for theme version 2, light mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ - borderColor: '#ebebeb', + borderColor: 'transparent', }); }); it('should return theme background color, for theme version 2, dark mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), isOutlined: false, }) ).toMatchObject({ - borderColor: '#383838', + borderColor: 'transparent', }); }); }); diff --git a/src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.tsx.snap b/src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.tsx.snap index bcd35191f0..711178d2f9 100644 --- a/src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.tsx.snap +++ b/src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.tsx.snap @@ -27,14 +27,10 @@ exports[`DrawerSection renders properly 1`] = ` { "height": 1, }, - [ - { - "marginTop": 4, - }, - { - "backgroundColor": "rgba(121, 116, 126, 1)", - }, - ], + { + "backgroundColor": "rgba(121, 116, 126, 1)", + "marginTop": 4, + }, ] } /> diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx index d59639efc1..ca39c7a175 100644 --- a/src/components/__tests__/FAB.test.tsx +++ b/src/components/__tests__/FAB.test.tsx @@ -2,12 +2,9 @@ import * as React from 'react'; import { Animated, StyleSheet } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; import { act } from 'react-test-renderer'; import { getTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; -import getContrastingColor from '../../utils/getContrastingColor'; import FAB from '../FAB'; import { getFABColors } from '../FAB/utils'; @@ -94,12 +91,6 @@ it('renders loading FAB with custom size prop', () => { expect(tree).toMatchSnapshot(); }); -it('renders disabled FAB', () => { - const tree = render( {}} icon="plus" disabled />).toJSON(); - - expect(tree).toMatchSnapshot(); -}); - it('renders custom color for the icon and label of the FAB', () => { const tree = render( {}} icon="plus" color="#AA0114" /> @@ -199,42 +190,6 @@ describe('getFABColors - background color', () => { }); }); - it('should return correct disabled color, for theme version 3', () => { - expect( - getFABColors({ - theme: getTheme(), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - backgroundColor: getTheme().colors.surfaceDisabled, - }); - }); - - it('should return correct disabled color, for theme version 2, light mode', () => { - expect( - getFABColors({ - theme: getTheme(false, false), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - backgroundColor: color(black).alpha(0.12).rgb().string(), - }); - }); - - it('should return correct disabled color, for theme version 2, dark mode', () => { - expect( - getFABColors({ - theme: getTheme(true, false), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - backgroundColor: color(white).alpha(0.12).rgb().string(), - }); - }); - it('should return correct theme color, for theme version 3, primary variant', () => { expect( getFABColors({ @@ -282,11 +237,11 @@ describe('getFABColors - background color', () => { it('should return correct theme color, for theme version 2', () => { expect( getFABColors({ - theme: getTheme(false, false), + theme: getTheme(false), variant: 'primary', }) ).toMatchObject({ - backgroundColor: getTheme(false, false).colors.accent, + backgroundColor: getTheme(false).colors.primaryContainer, }); }); }); @@ -304,42 +259,6 @@ describe('getFABColors - foreground color', () => { }); }); - it('should return correct disabled color, for theme version 3', () => { - expect( - getFABColors({ - theme: getTheme(), - variant: 'primary', - disabled: true, - }) - ).toMatchObject({ - foregroundColor: getTheme().colors.onSurfaceDisabled, - }); - }); - - it('should return correct disabled color, for theme version 2, light mode', () => { - expect( - getFABColors({ - theme: getTheme(false, false), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - foregroundColor: color(black).alpha(0.32).rgb().string(), - }); - }); - - it('should return correct disabled color, for theme version 2, dark mode', () => { - expect( - getFABColors({ - theme: getTheme(true, false), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - foregroundColor: color(white).alpha(0.32).rgb().string(), - }); - }); - it('should return correct theme color, for theme version 3, primary variant', () => { expect( getFABColors({ @@ -387,15 +306,11 @@ describe('getFABColors - foreground color', () => { it('should return correct theme color, for theme version 2', () => { expect( getFABColors({ - theme: getTheme(false, false), + theme: getTheme(false), variant: 'primary', }) ).toMatchObject({ - foregroundColor: getContrastingColor( - getTheme(false, false).colors.accent, - white, - 'rgba(0, 0, 0, .54)' - ), + foregroundColor: getTheme(false).colors.onPrimaryContainer, }); }); }); diff --git a/src/components/__tests__/FABGroup.test.tsx b/src/components/__tests__/FABGroup.test.tsx index 50cc0a7173..fb1ad1be26 100644 --- a/src/components/__tests__/FABGroup.test.tsx +++ b/src/components/__tests__/FABGroup.test.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { Animated } from 'react-native'; import { act, fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; import FAB from '../FAB'; @@ -26,20 +25,17 @@ describe('getFABGroupColors - backdrop color', () => { theme: getTheme(), }) ).toMatchObject({ - backdropColor: color(getTheme().colors.background) - .alpha(0.95) - .rgb() - .string(), + backdropColor: getTheme().colors.scrim, }); }); it('should return correct backdrop color, for theme version 2', () => { expect( getFABGroupColors({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - backdropColor: getTheme(false, false).colors.backdrop, + backdropColor: getTheme(false).colors.scrim, }); }); }); @@ -58,23 +54,20 @@ describe('getFABGroupColors - label color', () => { it('should return correct theme color, dark mode, for theme version 2', () => { expect( getFABGroupColors({ - theme: getTheme(true, false), + theme: getTheme(true), }) ).toMatchObject({ - labelColor: getTheme(true, false).colors.text, + labelColor: getTheme(true).colors.onSurface, }); }); it('should return correct theme color, light mode, for theme version 2', () => { expect( getFABGroupColors({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - labelColor: color(getTheme(false, false).colors.text) - .fade(0.54) - .rgb() - .string(), + labelColor: getTheme(false).colors.onSurface, }); }); }); @@ -93,10 +86,10 @@ describe('getFABGroupColors - stacked FAB background color', () => { it('should return correct theme color, dark mode, for theme version 2', () => { expect( getFABGroupColors({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - stackedFABBackgroundColor: getTheme(false, false).colors.surface, + stackedFABBackgroundColor: getTheme(false).colors.elevation.level3, }); }); }); @@ -180,37 +173,6 @@ it('correctly adds label prop', () => { expect(getByText('Label test')).toBeTruthy(); }); -it('correct renders custom ripple color passed to FAB.Group and its item', () => { - const { getByTestId } = render( - {}} - actions={[ - { - label: 'testing', - onPress() {}, - icon: '', - rippleColor: 'yellow', - testID: 'fab-group-item', - }, - ]} - /> - ); - - expect( - getByTestId('fab-group-container').props.children.props.rippleColor - ).toBe('orange'); - - expect( - getByTestId('fab-group-item-container').props.children.props.rippleColor - ).toBe('yellow'); -}); - it('animated value changes correctly', () => { const value = new Animated.Value(1); const { getByTestId } = render( diff --git a/src/components/__tests__/IconButton.test.tsx b/src/components/__tests__/IconButton.test.tsx index 381ea5ae24..737307181a 100644 --- a/src/components/__tests__/IconButton.test.tsx +++ b/src/components/__tests__/IconButton.test.tsx @@ -2,10 +2,9 @@ import * as React from 'react'; import { Animated, StyleSheet } from 'react-native'; import { act, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; -import { pink500 } from '../../styles/themes/v2/colors'; +import { pink500 } from '../../styles/themes/baseColors'; import IconButton from '../IconButton/IconButton'; import { getIconButtonColor } from '../IconButton/utils'; @@ -97,7 +96,8 @@ describe('getIconButtonColor - icon color', () => { disabled: true, }) ).toMatchObject({ - iconColor: getTheme().colors.onSurfaceDisabled, + iconColor: getTheme().colors.onSurface, + iconOpacity: 0.38, }); }); @@ -194,10 +194,10 @@ describe('getIconButtonColor - icon color', () => { it('should return theme icon color, for theme version 2', () => { expect( getIconButtonColor({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - iconColor: getTheme(false, false).colors.text, + iconColor: getTheme(false).colors.onSurfaceVariant, }); }); }); @@ -222,7 +222,10 @@ describe('getIconButtonColor - background color', () => { mode, disabled: true, }) - ).toMatchObject({ backgroundColor: getTheme().colors.surfaceDisabled }); + ).toMatchObject({ + backgroundColor: getTheme().colors.onSurface, + backgroundOpacity: 0.1, + }); }) ); @@ -303,7 +306,7 @@ describe('getIconButtonColor - border color', () => { disabled: true, }) ).toMatchObject({ - borderColor: getTheme().colors.surfaceDisabled, + borderColor: getTheme().colors.outlineVariant, }); }); @@ -313,45 +316,17 @@ describe('getIconButtonColor - border color', () => { theme: getTheme(), }) ).toMatchObject({ - borderColor: getTheme().colors.outline, + borderColor: getTheme().colors.outlineVariant, }); }); - it('should return undefined, for theme version 2', () => { + it('should return theme outline color, for theme version 2', () => { expect( getIconButtonColor({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - borderColor: undefined, - }); - }); -}); - -describe('getIconButtonColor - ripple color', () => { - it('should return theme color, for theme version 3', () => { - expect( - getIconButtonColor({ - theme: getTheme(), - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.onSurfaceVariant) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2', () => { - expect( - getIconButtonColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.text) - .alpha(0.32) - .rgb() - .string(), + borderColor: getTheme(false).colors.outlineVariant, }); }); }); diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx index 0c24538348..5584a8d8a1 100644 --- a/src/components/__tests__/ListAccordion.test.tsx +++ b/src/components/__tests__/ListAccordion.test.tsx @@ -2,10 +2,9 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; import { render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; -import { red500 } from '../../styles/themes/v2/colors'; +import { red500 } from '../../styles/themes/baseColors'; import ListAccordion from '../List/ListAccordion'; import ListAccordionGroup from '../List/ListAccordionGroup'; import ListIcon from '../List/ListIcon'; @@ -129,13 +128,10 @@ describe('getAccordionColors - title color', () => { it('should return theme color, for theme version 2', () => { expect( getAccordionColors({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - titleColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), + titleColor: getTheme(false).colors.onSurface, }); }); }); @@ -154,13 +150,10 @@ describe('getAccordionColors - description color', () => { it('should return theme color, for theme version 2', () => { expect( getAccordionColors({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - descriptionColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), + descriptionColor: getTheme(false).colors.onSurfaceVariant, }); }); }); @@ -179,13 +172,10 @@ describe('getAccordionColors - title text color', () => { it('should return theme color, for theme version 2', () => { expect( getAccordionColors({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - titleTextColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), + titleTextColor: getTheme(false).colors.onSurface, }); }); @@ -200,44 +190,3 @@ describe('getAccordionColors - title text color', () => { }); }); }); - -describe('getAccordionColors - ripple color', () => { - it('should return theme color, for theme version 3', () => { - expect( - getAccordionColors({ - theme: getTheme(), - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.onSurface) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2', () => { - const v2TextColor = color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(); - - expect( - getAccordionColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - rippleColor: color(v2TextColor).alpha(0.12).rgb().string(), - }); - }); - - it('should return primary color if it is expanded', () => { - expect( - getAccordionColors({ - theme: getTheme(), - isExpanded: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.primary).alpha(0.12).rgb().string(), - }); - }); -}); diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx index 036697f9ec..fac7a2c530 100644 --- a/src/components/__tests__/ListItem.test.tsx +++ b/src/components/__tests__/ListItem.test.tsx @@ -4,7 +4,7 @@ import { Text, View } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; -import { red500 } from '../../styles/themes/v2/colors'; +import { red500 } from '../../styles/themes/baseColors'; import Chip from '../Chip/Chip'; import IconButton from '../IconButton/IconButton'; import ListIcon from '../List/ListIcon'; diff --git a/src/components/__tests__/ListSection.test.tsx b/src/components/__tests__/ListSection.test.tsx index 8cc1578b8f..96f1a2dbdc 100644 --- a/src/components/__tests__/ListSection.test.tsx +++ b/src/components/__tests__/ListSection.test.tsx @@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native'; import { render } from '@testing-library/react-native'; -import { red500 } from '../../styles/themes/v2/colors'; +const red500 = '#f44336'; import ListIcon from '../List/ListIcon'; import ListItem from '../List/ListItem'; import ListSection from '../List/ListSection'; diff --git a/src/components/__tests__/ListUtils.test.tsx b/src/components/__tests__/ListUtils.test.tsx index 4aeefb6ca9..cf7486707c 100644 --- a/src/components/__tests__/ListUtils.test.tsx +++ b/src/components/__tests__/ListUtils.test.tsx @@ -5,18 +5,11 @@ import { getLeftStyles, getRightStyles } from '../List/utils'; import Text from '../Typography/Text'; const styles = StyleSheet.create({ - leftItem: { - marginLeft: 0, - marginRight: 16, - }, leftItemV3: { marginLeft: 16, marginRight: 0, alignSelf: 'center', }, - rightItem: { - marginRight: 0, - }, rightItemV3: { marginLeft: 16, marginRight: 0, @@ -30,23 +23,13 @@ const description = Test; * ********************** getLeftStyles ********************** * */ -it('returns styles for left item without description for V2', () => { - const style = getLeftStyles(false, null, false); - expect(style).toStrictEqual({ ...styles.leftItem, marginVertical: 0 }); -}); - -it('returns styles for left item w/ desctiption for V2', () => { - const style = getLeftStyles(false, description, false); - expect(style).toStrictEqual(styles.leftItem); -}); - -it('returns styles for left item without description for V3', () => { - const style = getLeftStyles(false, null, true); +it('returns styles for left item without description', () => { + const style = getLeftStyles(false, null); expect(style).toStrictEqual({ ...styles.leftItemV3, marginVertical: 0 }); }); -it('returns styles for left item w/ desctiption for V3', () => { - const style = getLeftStyles(true, description, true); +it('returns styles for left item w/ description', () => { + const style = getLeftStyles(true, description); expect(style).toStrictEqual({ ...styles.leftItemV3, alignSelf: 'flex-start', @@ -57,23 +40,13 @@ it('returns styles for left item w/ desctiption for V3', () => { * ********************** getRightStyles ********************** * */ -it('returns styles for right item without description for V2', () => { - const style = getRightStyles(false, null, false); - expect(style).toStrictEqual({ ...styles.rightItem, marginVertical: 0 }); -}); - -it('returns styles for right item w/ desctiption for V2', () => { - const style = getRightStyles(false, description, false); - expect(style).toStrictEqual(styles.rightItem); -}); - -it('returns styles for right item without description for V3', () => { - const style = getRightStyles(false, null, true); +it('returns styles for right item without description', () => { + const style = getRightStyles(false, null); expect(style).toStrictEqual({ ...styles.rightItemV3, marginVertical: 0 }); }); -it('returns styles for right item w/ desctiption for V3', () => { - const style = getRightStyles(true, description, true); +it('returns styles for right item w/ description', () => { + const style = getRightStyles(true, description); expect(style).toStrictEqual({ ...styles.rightItemV3, alignSelf: 'flex-start', diff --git a/src/components/__tests__/Menu.test.tsx b/src/components/__tests__/Menu.test.tsx index 29397d1262..64070a04d4 100644 --- a/src/components/__tests__/Menu.test.tsx +++ b/src/components/__tests__/Menu.test.tsx @@ -4,7 +4,7 @@ import { Animated, Dimensions, StyleSheet, View } from 'react-native'; import { act, render, screen, waitFor } from '@testing-library/react-native'; import { getTheme } from '../../core/theming'; -import { MD3Elevation } from '../../types'; +import { Elevation } from '../../types'; import Button from '../Button/Button'; import Menu, { ELEVATION_LEVELS_MAP } from '../Menu/Menu'; import Portal from '../Portal/Portal'; @@ -68,9 +68,9 @@ it('renders menu with content styles', () => { expect(tree).toMatchSnapshot(); }); -([0, 1, 2, 3, 4, 5] as MD3Elevation[]).forEach((elevation) => +([0, 1, 2, 3, 4, 5] as Elevation[]).forEach((elevation) => it(`renders menu with background color based on elevation value = ${elevation}`, () => { - const theme = getTheme(false, true); + const theme = getTheme(false); const { getByTestId } = render( diff --git a/src/components/__tests__/MenuItem.test.tsx b/src/components/__tests__/MenuItem.test.tsx index 7413f43622..a54601ca3e 100644 --- a/src/components/__tests__/MenuItem.test.tsx +++ b/src/components/__tests__/MenuItem.test.tsx @@ -1,10 +1,8 @@ import * as React from 'react'; import { render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; import Menu from '../Menu/Menu'; import { getMenuItemColor } from '../Menu/utils'; @@ -72,28 +70,9 @@ describe('getMenuItemColor - title color', () => { theme: getTheme(), disabled: true, }) - ).toMatchObject({ titleColor: getTheme().colors.onSurfaceDisabled }); - }); - - it('should return disabled color if disabled, for theme version 2, light theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - disabled: true, - }) - ).toMatchObject({ - titleColor: color(black).alpha(0.32).rgb().string(), - }); - }); - - it('should return disabled color if disabled, for theme version 2, dark theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(true, false), - disabled: true, - }) ).toMatchObject({ - titleColor: color(white).alpha(0.32).rgb().string(), + titleColor: getTheme().colors.onSurface, + contentOpacity: 0.38, }); }); @@ -106,19 +85,6 @@ describe('getMenuItemColor - title color', () => { titleColor: getTheme().colors.onSurface, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - titleColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), - }); - }); }); describe('getMenuItemColor - icon color', () => { @@ -128,76 +94,19 @@ describe('getMenuItemColor - icon color', () => { theme: getTheme(), disabled: true, }) - ).toMatchObject({ iconColor: getTheme().colors.onSurfaceDisabled }); - }); - - it('should return disabled color if disabled, for theme version 2, light theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - disabled: true, - }) - ).toMatchObject({ - iconColor: color(black).alpha(0.32).rgb().string(), - }); - }); - - it('should return disabled color if disabled, for theme version 2, dark theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(true, false), - disabled: true, - }) - ).toMatchObject({ - iconColor: color(white).alpha(0.32).rgb().string(), - }); - }); - - it('should return correct theme color, for theme version 3', () => { - expect( - getMenuItemColor({ - theme: getTheme(), - }) ).toMatchObject({ iconColor: getTheme().colors.onSurfaceVariant, + contentOpacity: 0.38, }); }); - it('should return correct theme color, for theme version 2', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - iconColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); -}); - -describe('getMenuItemColor - ripple color', () => { it('should return correct theme color, for theme version 3', () => { expect( getMenuItemColor({ theme: getTheme(), }) ).toMatchObject({ - rippleColor: color(getTheme().colors.onSurfaceVariant) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return undefined, for theme version 2', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - rippleColor: undefined, + iconColor: getTheme().colors.onSurfaceVariant, }); }); }); diff --git a/src/components/__tests__/Modal.test.tsx b/src/components/__tests__/Modal.test.tsx index 32161d5b84..d7c9755099 100644 --- a/src/components/__tests__/Modal.test.tsx +++ b/src/components/__tests__/Modal.test.tsx @@ -8,7 +8,7 @@ import { import { act, fireEvent, render } from '@testing-library/react-native'; -import { MD3LightTheme } from '../../styles/themes'; +import { LightTheme } from '../../styles/themes'; import Modal from '../Modal'; jest.mock('react-native-safe-area-context', () => ({ @@ -55,7 +55,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - backgroundColor: MD3LightTheme.colors.backdrop, + backgroundColor: LightTheme.colors.scrim, }); }); @@ -66,7 +66,7 @@ describe('Modal', () => { testID="modal" theme={{ colors: { - backdrop: 'transparent', + scrim: 'transparent', }, }} > @@ -119,7 +119,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ @@ -156,7 +156,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ @@ -198,7 +198,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ @@ -241,7 +241,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ @@ -308,7 +308,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ @@ -376,7 +376,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -393,7 +393,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -406,7 +406,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -453,7 +453,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -466,7 +466,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -491,7 +491,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -504,7 +504,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -527,7 +527,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap index dfbe5fa131..f44e395c55 100644 --- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap @@ -145,7 +145,7 @@ exports[`can render leading radio button control 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -161,9 +161,9 @@ exports[`can render leading radio button control 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "right", }, undefined, @@ -240,7 +240,7 @@ exports[`can render the Android radio button on different platforms 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -256,9 +256,9 @@ exports[`can render the Android radio button on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, @@ -392,7 +392,7 @@ exports[`can render the iOS radio button on different platforms 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -408,9 +408,9 @@ exports[`can render the iOS radio button on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, @@ -570,7 +570,7 @@ exports[`renders unchecked 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -586,9 +586,9 @@ exports[`renders unchecked 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, diff --git a/src/components/__tests__/Searchbar.test.tsx b/src/components/__tests__/Searchbar.test.tsx index 59ade128e4..ed57648334 100644 --- a/src/components/__tests__/Searchbar.test.tsx +++ b/src/components/__tests__/Searchbar.test.tsx @@ -38,15 +38,6 @@ it('renders without ActivityIndicator', () => { expect(() => getByTestId('activity-indicator')).toThrow(); }); -it('render icon with custom ripple color', () => { - const { getByTestId } = render( - - ); - - const iconContainer = getByTestId('search-bar-icon-container').props.children; - expect(iconContainer.props.rippleColor).toBe('purple'); -}); - it('renders clear icon with custom color', () => { const { getByTestId } = render( @@ -117,7 +108,7 @@ it('defines onClearIconPress action and checks if it is called when close button expect(onClearIconPressMock).toHaveBeenCalledTimes(1); }); -it('renders clear icon wrapper, with appropriate style for v3', () => { +it('renders clear icon wrapper, with appropriate style', () => { const { getByTestId, update } = render( ); @@ -141,16 +132,6 @@ it('renders clear icon wrapper, with appropriate style for v3', () => { }); }); -it('render clear icon with custom ripple color', () => { - const { getByTestId } = render( - - ); - - const clearIconContainer = getByTestId('search-bar-clear-icon-container') - .props.children; - expect(clearIconContainer.props.rippleColor).toBe('purple'); -}); - it('renders trailering icon when mode is set to "bar"', () => { const { getByTestId } = render( { expect(onTraileringIconPressMock).toHaveBeenCalledTimes(1); }); -it('renders trailering icon with custom ripple colors', () => { - const { getByTestId } = render( - - ); - - const traileringIconContainer = getByTestId( - 'search-bar-trailering-icon-container' - ).props.children; - expect(traileringIconContainer.props.rippleColor).toBe('purple'); -}); - it('renders clear icon instead of trailering icon', () => { const { getByTestId, update, queryByTestId } = render( { describe('getSegmentedButtonColors', () => { it.each` - theme | disabled | checked | checkedColor | uncheckedColor | expected - ${getTheme()} | ${false} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSecondaryContainer} - ${getTheme()} | ${false} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurface} - ${getTheme()} | ${true} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} - ${getTheme()} | ${true} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} - ${getTheme()} | ${false} | ${true} | ${'a125f5'} | ${undefined} | ${'a125f5'} - ${getTheme()} | ${false} | ${false} | ${undefined} | ${'000'} | ${'000'} - ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${'000'} | ${'000'} - ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${undefined} | ${getTheme().colors.onSurface} - ${getTheme()} | ${false} | ${true} | ${undefined} | ${'000'} | ${getTheme().colors.onSecondaryContainer} - ${getTheme(false, false)} | ${false} | ${false} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.primary} - ${getTheme(false, false)} | ${false} | ${true} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.primary} - ${getTheme(false, false)} | ${true} | ${false} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.disabled} - ${getTheme(false, false)} | ${true} | ${true} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.disabled} - ${getTheme(false, false)} | ${false} | ${false} | ${'a125f5'} | ${undefined} | ${getTheme(false, false).colors.primary} - ${getTheme(false, false)} | ${false} | ${true} | ${undefined} | ${'000'} | ${getTheme(false, false).colors.primary} + theme | disabled | checked | checkedColor | uncheckedColor | expected + ${getTheme()} | ${false} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSecondaryContainer} + ${getTheme()} | ${false} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurface} + ${getTheme()} | ${true} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSurface} + ${getTheme()} | ${true} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurface} + ${getTheme()} | ${false} | ${true} | ${'a125f5'} | ${undefined} | ${'a125f5'} + ${getTheme()} | ${false} | ${false} | ${undefined} | ${'000'} | ${'000'} + ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${'000'} | ${'000'} + ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${undefined} | ${getTheme().colors.onSurface} + ${getTheme()} | ${false} | ${true} | ${undefined} | ${'000'} | ${getTheme().colors.onSecondaryContainer} `( - 'returns $expected when disabled: $disabled, checked: $checked, checkedColor is $checkedColor and uncheckedColor is $uncheckedColor and isV3: $theme.isV3', + 'returns $expected when disabled: $disabled, checked: $checked, checkedColor is $checkedColor and uncheckedColor is $uncheckedColor', ({ theme, disabled, checked, checkedColor, uncheckedColor, expected }) => { expect( getSegmentedButtonColors({ @@ -97,25 +89,10 @@ describe('getSegmentedButtonColors', () => { ).toMatchObject({ backgroundColor: getTheme().colors.secondaryContainer }); }); - it('should return correct background color when checked and theme version 2', () => { + it('should return correct background color when unchecked', () => { expect( getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: false, - checked: true, - }) - ).toMatchObject({ - backgroundColor: color(getTheme(false, false).colors.primary) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return correct background color when uncheked (V3 & V2)', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), + theme: getTheme(), disabled: false, checked: false, }) @@ -136,18 +113,6 @@ describe('getSegmentedButtonColors', () => { }); }); - it('should return correct border color with theme version 2', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: false, - checked: false, - }) - ).toMatchObject({ - borderColor: color(black).alpha(0.29).rgb().string(), - }); - }); - it('should return correct border color when disabled and theme version 3', () => { expect( getSegmentedButtonColors({ @@ -156,7 +121,7 @@ describe('getSegmentedButtonColors', () => { checked: false, }) ).toMatchObject({ - borderColor: getTheme().colors.surfaceDisabled, + borderColor: getTheme().colors.outlineVariant, }); }); @@ -172,18 +137,6 @@ describe('getSegmentedButtonColors', () => { }); }); - it('should return correct textColor with theme version 2', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: false, - checked: false, - }) - ).toMatchObject({ - textColor: getTheme(false, false).colors.primary, - }); - }); - it('should return correct textColor when disabled and theme version 3', () => { expect( getSegmentedButtonColors({ @@ -192,19 +145,8 @@ describe('getSegmentedButtonColors', () => { checked: false, }) ).toMatchObject({ - textColor: getTheme().colors.onSurfaceDisabled, - }); - }); - - it('should return correct textColor when disabled and theme version 2', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: true, - checked: false, - }) - ).toMatchObject({ - textColor: getTheme(false, false).colors.disabled, + textColor: getTheme().colors.onSurface, + textOpacity: 0.38, }); }); }); diff --git a/src/components/__tests__/Snackbar.test.tsx b/src/components/__tests__/Snackbar.test.tsx index f520faa466..de109604f2 100644 --- a/src/components/__tests__/Snackbar.test.tsx +++ b/src/components/__tests__/Snackbar.test.tsx @@ -3,7 +3,7 @@ import { Animated, StyleSheet, Text, View } from 'react-native'; import { act, render } from '@testing-library/react-native'; -import { red200, white } from '../../styles/themes/v2/colors'; +import { white, red200 } from '../../styles/themes/baseColors'; import Snackbar from '../Snackbar'; const styles = StyleSheet.create({ @@ -82,23 +82,6 @@ it('renders snackbar with View & Text as a child', () => { expect(tree).toMatchSnapshot(); }); -it('renders with custom ripple color', () => { - const { getByTestId } = render( - {}} - onIconPress={() => {}} - rippleColor="purple" - testID="snackbar" - > - Snackbar content - - ); - - const iconContainer = getByTestId('snackbar-icon-container').props.children; - expect(iconContainer.props.rippleColor).toBe('purple'); -}); - it('animated value changes correctly', () => { const value = new Animated.Value(1); const { getByTestId } = render( diff --git a/src/components/__tests__/Switch.test.tsx b/src/components/__tests__/Switch.test.tsx index e475b9a166..2114cd3bf2 100644 --- a/src/components/__tests__/Switch.test.tsx +++ b/src/components/__tests__/Switch.test.tsx @@ -10,10 +10,10 @@ import { black, grey400, grey50, + grey700, grey800, pink500, - grey700, -} from '../../styles/themes/v2/colors'; +} from '../../styles/themes/baseColors'; import Switch from '../Switch/Switch'; import { getSwitchColor } from '../Switch/utils'; @@ -62,16 +62,6 @@ describe('getSwitchColor - checked color', () => { checkedColor: getTheme().colors.primary, }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getSwitchColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - checkedColor: getTheme(false, false).colors.accent, - }); - }); }); describe('getSwitchColor - thumb tint color', () => { @@ -163,24 +153,12 @@ describe('getSwitchColor - on tint color', () => { }); }); - it('should return checked color for iOS platform, for theme version 2', () => { - Platform.OS = 'ios'; - - expect( - getSwitchColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - onTintColor: getTheme(false, false).colors.accent, - }); - }); - it('should return custom color for iOS platform', () => { Platform.OS = 'ios'; expect( getSwitchColor({ - theme: getTheme(false, false), + theme: getTheme(false), color: 'purple', }) ).toMatchObject({ @@ -201,17 +179,6 @@ describe('getSwitchColor - on tint color', () => { }); }); - it('should return correct disabled color, for theme version 2, dark mode', () => { - expect( - getSwitchColor({ - theme: getTheme(true, false), - disabled: true, - }) - ).toMatchObject({ - onTintColor: color(white).alpha(0.1).rgb().string(), - }); - }); - it('should return correct disabled color, light mode', () => { expect( getSwitchColor({ @@ -231,7 +198,7 @@ describe('getSwitchColor - on tint color', () => { color: 'purple', }) ).toMatchObject({ - onTintColor: color('purple').alpha(0.5).rgb().string(), + checkedColor: 'purple', }); }); diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx index e190a537d6..e4fad562d3 100644 --- a/src/components/__tests__/TextInput.test.tsx +++ b/src/components/__tests__/TextInput.test.tsx @@ -3,10 +3,9 @@ import * as React from 'react'; import { I18nManager, Platform, StyleSheet, Text, View } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; import { DefaultTheme, getTheme, ThemeProvider } from '../../core/theming'; -import { red500 } from '../../styles/themes/v2/colors'; +const red500 = '#f44336'; import { getFlatInputColors, getOutlinedInputColors, @@ -547,18 +546,7 @@ describe('getFlatInputColor - underline color', () => { theme: getTheme(), }) ).toMatchObject({ - underlineColorCustom: getTheme().colors.onSurfaceDisabled, - }); - }); - - it('should return correct disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - underlineColorCustom: 'transparent', + underlineColorCustom: getTheme().colors.onSurfaceVariant, }); }); @@ -572,16 +560,6 @@ describe('getFlatInputColor - underline color', () => { }); }); - it('should return correct theme color, for theme version 2', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - underlineColorCustom: getTheme(false, false).colors.disabled, - }); - }); - it('should return custom color, no matter what the theme is', () => { expect( getFlatInputColors({ @@ -595,7 +573,7 @@ describe('getFlatInputColor - underline color', () => { expect( getFlatInputColors({ underlineColor: 'beige', - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ underlineColorCustom: 'beige', @@ -617,7 +595,7 @@ describe('getFlatInputColor - input text color', () => { expect( getOutlinedInputColors({ textColor: 'beige', - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ inputTextColor: 'beige', @@ -631,21 +609,8 @@ describe('getFlatInputColor - input text color', () => { theme: getTheme(), }) ).toMatchObject({ - inputTextColor: getTheme().colors.onSurfaceDisabled, - }); - }); - - it('should return correct disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), + inputTextColor: getTheme().colors.onSurface, + disabledOpacity: 0.38, }); }); @@ -658,16 +623,6 @@ describe('getFlatInputColor - input text color', () => { inputTextColor: getTheme().colors.onSurface, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: getTheme(false, false).colors.text, - }); - }); }); describe('getFlatInputColor - placeholder color', () => { @@ -678,18 +633,8 @@ describe('getFlatInputColor - placeholder color', () => { theme: getTheme(), }) ).toMatchObject({ - placeholderColor: getTheme().colors.onSurfaceDisabled, - }); - }); - - it('should return correct disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.disabled, + placeholderColor: getTheme().colors.onSurfaceVariant, + disabledOpacity: 0.38, }); }); @@ -702,16 +647,6 @@ describe('getFlatInputColor - placeholder color', () => { placeholderColor: getTheme().colors.onSurfaceVariant, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.placeholder, - }); - }); }); describe('getFlatInputColor - background color', () => { @@ -722,10 +657,7 @@ describe('getFlatInputColor - background color', () => { theme: getTheme(), }) ).toMatchObject({ - backgroundColor: color(getTheme().colors.onSurface) - .alpha(0.04) - .rgb() - .string(), + backgroundColor: getTheme().colors.surfaceContainerHighest, }); expect( getFlatInputColors({ @@ -733,21 +665,7 @@ describe('getFlatInputColor - background color', () => { theme: getTheme(true), }) ).toMatchObject({ - backgroundColor: color(getTheme(true).colors.onSurface) - .alpha(0.04) - .rgb() - .string(), - }); - }); - - it('should return undefined when disabled, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - backgroundColor: undefined, + backgroundColor: getTheme(true).colors.surfaceContainerHighest, }); }); @@ -760,32 +678,6 @@ describe('getFlatInputColor - background color', () => { backgroundColor: getTheme().colors.surfaceVariant, }); }); - - it('should return correct theme color, for theme version 2, light mode', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - backgroundColor: color(getTheme(false, false).colors?.background) - .darken(0.06) - .rgb() - .string(), - }); - }); - - it('should return correct theme color, for theme version 2, dark mode', () => { - expect( - getFlatInputColors({ - theme: getTheme(true, false), - }) - ).toMatchObject({ - backgroundColor: color(getTheme(true, false).colors?.background) - .lighten(0.24) - .rgb() - .string(), - }); - }); }); describe('getFlatInputColor - error color', () => { @@ -802,10 +694,10 @@ describe('getFlatInputColor - error color', () => { expect( getFlatInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(false), }) ).toMatchObject({ - errorColor: getTheme(false, true).colors.error, + errorColor: getTheme(false).colors.error, }); }); }); @@ -818,21 +710,8 @@ describe('getFlatInputColor - active color', () => { theme: getTheme(), }) ).toMatchObject({ - activeColor: getTheme().colors.onSurfaceDisabled, - }); - }); - - it('should return disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - activeColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), + activeColor: getTheme().colors.primary, + disabledOpacity: 0.38, }); }); @@ -849,10 +728,10 @@ describe('getFlatInputColor - active color', () => { expect( getFlatInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(false), }) ).toMatchObject({ - activeColor: getTheme(false, true).colors.error, + activeColor: getTheme(false).colors.error, }); }); @@ -869,7 +748,7 @@ describe('getFlatInputColor - active color', () => { expect( getFlatInputColors({ activeUnderlineColor: 'beige', - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ activeColor: 'beige', @@ -889,10 +768,10 @@ describe('getFlatInputColor - active color', () => { it('should return theme active color, for theme version 2', () => { expect( getFlatInputColors({ - theme: getTheme(false, true), + theme: getTheme(false), }) ).toMatchObject({ - activeColor: getTheme(false, true).colors.primary, + activeColor: getTheme(false).colors.primary, }); }); }); @@ -905,7 +784,7 @@ describe('getOutlinedInputColors - outline color', () => { theme: getTheme(), }) ).toMatchObject({ - outlineColor: getTheme().colors.surfaceDisabled, + outlineColor: getTheme().colors.outlineVariant, }); }); @@ -920,29 +799,6 @@ describe('getOutlinedInputColors - outline color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - outlineColor: getTheme(false, false).colors.disabled, - }); - }); - - it('should return custom color as disabled, when it is transparent, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - customOutlineColor: 'transparent', - theme: getTheme(false, false), - }) - ).toMatchObject({ - outlineColor: 'transparent', - }); - }); - it('should return custom color, if not disabled, no matter what the theme is', () => { expect( getOutlinedInputColors({ @@ -956,7 +812,7 @@ describe('getOutlinedInputColors - outline color', () => { expect( getOutlinedInputColors({ customOutlineColor: 'beige', - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ outlineColor: 'beige', @@ -972,16 +828,6 @@ describe('getOutlinedInputColors - outline color', () => { outlineColor: getTheme().colors.outline, }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - outlineColor: getTheme(false, false).colors.placeholder, - }); - }); }); describe('getOutlinedInputColors - input text color', () => { @@ -992,21 +838,8 @@ describe('getOutlinedInputColors - input text color', () => { theme: getTheme(), }) ).toMatchObject({ - inputTextColor: getTheme().colors.onSurfaceDisabled, - }); - }); - - it('should return correct disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), + inputTextColor: getTheme().colors.onSurface, + disabledOpacity: 0.38, }); }); @@ -1019,16 +852,6 @@ describe('getOutlinedInputColors - input text color', () => { inputTextColor: getTheme().colors.onSurface, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: getTheme(false, false).colors.text, - }); - }); }); describe('getOutlinedInputColors - placeholder color', () => { @@ -1039,18 +862,8 @@ describe('getOutlinedInputColors - placeholder color', () => { theme: getTheme(), }) ).toMatchObject({ - placeholderColor: getTheme().colors.onSurfaceDisabled, - }); - }); - - it('should return correct disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.disabled, + placeholderColor: getTheme().colors.onSurfaceVariant, + disabledOpacity: 0.38, }); }); @@ -1063,16 +876,6 @@ describe('getOutlinedInputColors - placeholder color', () => { placeholderColor: getTheme().colors.onSurfaceVariant, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.placeholder, - }); - }); }); describe('getOutlinedInputColors - error color', () => { @@ -1089,10 +892,10 @@ describe('getOutlinedInputColors - error color', () => { expect( getOutlinedInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(false), }) ).toMatchObject({ - errorColor: getTheme(false, true).colors.error, + errorColor: getTheme(false).colors.error, }); }); }); @@ -1105,21 +908,8 @@ describe('getOutlinedInputColors - active color', () => { theme: getTheme(), }) ).toMatchObject({ - activeColor: getTheme().colors.onSurfaceDisabled, - }); - }); - - it('should return disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - activeColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), + activeColor: getTheme().colors.primary, + disabledOpacity: 0.38, }); }); @@ -1136,10 +926,10 @@ describe('getOutlinedInputColors - active color', () => { expect( getOutlinedInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(false), }) ).toMatchObject({ - activeColor: getTheme(false, true).colors.error, + activeColor: getTheme(false).colors.error, }); }); @@ -1156,7 +946,7 @@ describe('getOutlinedInputColors - active color', () => { expect( getOutlinedInputColors({ activeOutlineColor: 'beige', - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ activeColor: 'beige', @@ -1172,16 +962,6 @@ describe('getOutlinedInputColors - active color', () => { activeColor: getTheme().colors.primary, }); }); - - it('should return theme active color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false, true), - }) - ).toMatchObject({ - activeColor: getTheme(false, true).colors.primary, - }); - }); }); describe('outlineStyle - underlineStyle', () => { diff --git a/src/components/__tests__/ToggleButton.test.tsx b/src/components/__tests__/ToggleButton.test.tsx index 3ab234d0f3..a830558681 100644 --- a/src/components/__tests__/ToggleButton.test.tsx +++ b/src/components/__tests__/ToggleButton.test.tsx @@ -2,10 +2,8 @@ import * as React from 'react'; import { Animated } from 'react-native'; import { act, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; -import { tokens } from '../../styles/themes/v3/tokens'; import ToggleButton from '../ToggleButton'; import { getToggleButtonColor } from '../ToggleButton/utils'; @@ -33,56 +31,22 @@ it('renders unchecked toggle button', () => { expect(tree).toMatchSnapshot(); }); -it('render toggle button with custom ripple color', () => { - const { getByTestId } = render( - - ); - - const iconContainer = getByTestId('toggle-button-container').props.children; - expect(iconContainer.props.rippleColor).toBe('purple'); -}); - describe('getToggleButtonColor', () => { it('should return correct color when checked and theme version 3', () => { expect(getToggleButtonColor({ theme: getTheme(), checked: true })).toBe( - color(getTheme().colors.onSecondaryContainer) - .alpha(tokens.md.ref.opacity.level2) - .rgb() - .string() + getTheme().colors.surfaceContainerHighest ); }); it('should return correct color when checked and theme version 3, dark theme', () => { expect(getToggleButtonColor({ theme: getTheme(true), checked: true })).toBe( - color(getTheme(true).colors.onSecondaryContainer) - .alpha(tokens.md.ref.opacity.level2) - .rgb() - .string() + getTheme(true).colors.surfaceContainerHighest ); }); - it('should return correct color when checked and theme version 2', () => { - expect( - getToggleButtonColor({ theme: getTheme(false, false), checked: true }) - ).toBe('rgba(0, 0, 0, .08)'); - }); - - it('should return correct color when checked and theme version 2, dark theme', () => { - expect( - getToggleButtonColor({ theme: getTheme(true, false), checked: true }) - ).toBe('rgba(255, 255, 255, .12)'); - }); - - it('should return transparent color when not checked', () => { + it('should return correct color when not checked', () => { expect(getToggleButtonColor({ theme: getTheme(), checked: false })).toBe( - 'transparent' + getTheme().colors.surfaceContainer ); }); }); diff --git a/src/components/__tests__/Typography/Caption.test.tsx b/src/components/__tests__/Typography/Caption.test.tsx deleted file mode 100644 index b85bee50d4..0000000000 --- a/src/components/__tests__/Typography/Caption.test.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import { StyleSheet } from 'react-native'; - -import { render } from '@testing-library/react-native'; - -import { red500 } from '../../../styles/themes/v2/colors'; -import Caption from '../../Typography/v2/Caption'; - -const style = StyleSheet.create({ - caption: { - fontSize: 20, - color: red500, - }, -}); - -it('renders caption with children as content', () => { - const tree = render(Caption content).toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders caption applying style', () => { - const tree = render( - Big and red caption - ).toJSON(); - - expect(tree).toMatchSnapshot(); -}); diff --git a/src/components/__tests__/Typography/Text.test.tsx b/src/components/__tests__/Typography/Text.test.tsx index 2560920322..3549b6bf0e 100644 --- a/src/components/__tests__/Typography/Text.test.tsx +++ b/src/components/__tests__/Typography/Text.test.tsx @@ -4,8 +4,8 @@ import { render } from '@testing-library/react-native'; import PaperProvider from '../../../core/PaperProvider'; import configureFonts from '../../../styles/fonts'; -import { MD3LightTheme } from '../../../styles/themes'; -import { tokens } from '../../../styles/themes/v3/tokens'; +import { LightTheme } from '../../../styles/themes'; +import { tokens } from '../../../styles/themes/tokens'; import Text, { customText } from '../../Typography/Text'; const content = 'Something rendered as a child content'; @@ -40,7 +40,7 @@ it('renders every variant of Text with children as content', () => { expect(tree).toMatchSnapshot(); }); -it('renders v3 Text component without variant with default fontWeight and fontFamily', () => { +it('renders Text component without variant with default fontWeight and fontFamily', () => { const { getByTestId } = render( {content} ); @@ -52,7 +52,7 @@ it('renders v3 Text component without variant with default fontWeight and fontFa }); }); -it('renders v3 Text component with custom variant correctly', () => { +it('renders Text component with custom variant correctly', () => { const fontConfig = { customVariant: { fontFamily: 'Montserrat-Regular', @@ -64,7 +64,7 @@ it('renders v3 Text component with custom variant correctly', () => { } as const; const theme = { - ...MD3LightTheme, + ...LightTheme, fonts: configureFonts({ config: fontConfig }), }; const Text = customText<'customVariant'>(); @@ -86,9 +86,7 @@ it("nested text with variant should override parent's variant", () => { ); - expect(getByTestId('parent-text')).toHaveStyle( - MD3LightTheme.fonts.displayLarge - ); + expect(getByTestId('parent-text')).toHaveStyle(LightTheme.fonts.displayLarge); }); it("nested non-text component should not override parent's variant", () => { @@ -100,9 +98,7 @@ it("nested non-text component should not override parent's variant", () => { ); - expect(getByTestId('parent-text')).toHaveStyle( - MD3LightTheme.fonts.displayLarge - ); + expect(getByTestId('parent-text')).toHaveStyle(LightTheme.fonts.displayLarge); }); it("nested text without variant, but with styles, should override parent's styles", () => { diff --git a/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap b/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap deleted file mode 100644 index 1120e943ca..0000000000 --- a/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap +++ /dev/null @@ -1,74 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders caption applying style 1`] = ` - - Big and red caption - -`; - -exports[`renders caption with children as content 1`] = ` - - Caption content - -`; diff --git a/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap b/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap index a47cd14611..e40248d4ae 100644 --- a/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap +++ b/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap @@ -1,5 +1,27 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`renders Text component with custom variant correctly 1`] = ` +[ + { + "textAlign": "left", + }, + { + "color": "rgba(29, 27, 32, 1)", + "writingDirection": "ltr", + }, + [ + { + "fontFamily": "Montserrat-Regular", + "fontSize": 41, + "fontWeight": "400", + "letterSpacing": 0.51, + "lineHeight": 54.1, + }, + undefined, + ], +] +`; + exports[`renders every variant of Text with children as content 1`] = ` [ , ] `; - -exports[`renders v3 Text component with custom variant correctly 1`] = ` -[ - { - "textAlign": "left", - }, - { - "color": "rgba(28, 27, 31, 1)", - "writingDirection": "ltr", - }, - [ - { - "fontFamily": "Montserrat-Regular", - "fontSize": 41, - "fontWeight": "400", - "letterSpacing": 0.51, - "lineHeight": 54.1, - }, - undefined, - ], -] -`; diff --git a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap index eea7087336..fa124295a5 100644 --- a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap @@ -228,7 +228,7 @@ exports[`renders animated fab 1`] = ` style={ [ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontSize": 24, }, [ @@ -260,7 +260,7 @@ exports[`renders animated fab 1`] = ` onTextLayout={[Function]} style={ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -515,7 +515,7 @@ exports[`renders animated fab with label on the left 1`] = ` style={ [ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontSize": 24, }, [ @@ -547,7 +547,7 @@ exports[`renders animated fab with label on the left 1`] = ` onTextLayout={[Function]} style={ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -804,7 +804,7 @@ exports[`renders animated fab with label on the right by default 1`] = ` style={ [ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontSize": 24, }, [ @@ -836,7 +836,7 @@ exports[`renders animated fab with label on the right by default 1`] = ` onTextLayout={[Function]} style={ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", diff --git a/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap index c73f2ae180..9e55666cef 100644 --- a/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -158,7 +158,7 @@ exports[`renders avatar with text 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -212,7 +212,7 @@ exports[`renders avatar with text and custom background color 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -266,7 +266,7 @@ exports[`renders avatar with text and custom colors 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -320,7 +320,7 @@ exports[`renders avatar with text and custom size 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap index b1aaff7ab0..ce7f76aff1 100644 --- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap @@ -5,7 +5,7 @@ exports[`render visible banner, with custom theme 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "opacity": 1, "shadowColor": "#000", "shadowOffset": { @@ -22,7 +22,7 @@ exports[`render visible banner, with custom theme 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -81,7 +81,7 @@ exports[`render visible banner, with custom theme 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -95,7 +95,7 @@ exports[`render visible banner, with custom theme 1`] = ` "margin": 8, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "#00f", }, ], ] @@ -204,6 +204,9 @@ exports[`render visible banner, with custom theme 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -217,7 +220,7 @@ exports[`render visible banner, with custom theme 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -229,14 +232,10 @@ exports[`render visible banner, with custom theme 1`] = ` "lineHeight": 20, }, [ - { - "marginHorizontal": 16, - "marginVertical": 9, - "textAlign": "center", - }, - false, { "marginHorizontal": 12, + "marginVertical": 10, + "textAlign": "center", }, { "marginHorizontal": 8, @@ -275,7 +274,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "opacity": 0, "shadowColor": "#000", "shadowOffset": { @@ -292,7 +291,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -363,7 +362,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -377,7 +376,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = ` "margin": 8, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, ], ] @@ -406,7 +405,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "opacity": 1, "shadowColor": "#000", "shadowOffset": { @@ -423,7 +422,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -504,7 +503,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -518,7 +517,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` "margin": 8, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, ], ] @@ -627,6 +626,9 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -640,7 +642,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -652,14 +654,10 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` "lineHeight": 20, }, [ - { - "marginHorizontal": 16, - "marginVertical": 9, - "textAlign": "center", - }, - false, { "marginHorizontal": 12, + "marginVertical": 10, + "textAlign": "center", }, { "marginHorizontal": 8, @@ -698,7 +696,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "opacity": 1, "shadowColor": "#000", "shadowOffset": { @@ -715,7 +713,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -774,7 +772,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -788,7 +786,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "margin": 8, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, ], ] @@ -897,6 +895,9 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -910,7 +911,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -922,14 +923,10 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "lineHeight": 20, }, [ - { - "marginHorizontal": 16, - "marginVertical": 9, - "textAlign": "center", - }, - false, { "marginHorizontal": 12, + "marginVertical": 10, + "textAlign": "center", }, { "marginHorizontal": 8, @@ -1047,6 +1044,9 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -1060,7 +1060,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -1072,14 +1072,10 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "lineHeight": 20, }, [ - { - "marginHorizontal": 16, - "marginVertical": 9, - "textAlign": "center", - }, - false, { "marginHorizontal": 12, + "marginVertical": 10, + "textAlign": "center", }, { "marginHorizontal": 8, @@ -1118,7 +1114,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "opacity": 1, "shadowColor": "#000", "shadowOffset": { @@ -1135,7 +1131,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -1216,7 +1212,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -1230,7 +1226,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = ` "margin": 8, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, ], ] @@ -1259,7 +1255,7 @@ exports[`renders visible banner, without action buttons and without image 1`] = collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "opacity": 1, "shadowColor": "#000", "shadowOffset": { @@ -1276,7 +1272,7 @@ exports[`renders visible banner, without action buttons and without image 1`] = collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -1335,7 +1331,7 @@ exports[`renders visible banner, without action buttons and without image 1`] = "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -1349,7 +1345,7 @@ exports[`renders visible banner, without action buttons and without image 1`] = "margin": 8, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, ], ] diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap index cc788ce0b9..61f94e1097 100644 --- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap @@ -20,7 +20,7 @@ exports[`allows customizing Route's type via generics 1`] = ` "flex": 1, }, { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", }, ] } @@ -113,7 +113,7 @@ exports[`allows customizing Route's type via generics 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "overflow": "hidden", } } @@ -167,15 +167,10 @@ exports[`allows customizing Route's type via generics 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - [ - { - "flex": 1, - "paddingVertical": 6, - }, - { - "paddingVertical": 0, - }, - ] + { + "flex": 1, + "paddingVertical": 0, + } } > Route: 0 @@ -5809,7 +5714,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` } > Route: 0 @@ -5849,15 +5754,10 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - [ - { - "flex": 1, - "paddingVertical": 6, - }, - { - "paddingVertical": 0, - }, - ] + { + "flex": 1, + "paddingVertical": 0, + } } > Route: 0 @@ -6537,15 +6427,10 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - [ - { - "flex": 1, - "paddingVertical": 6, - }, - { - "paddingVertical": 0, - }, - ] + { + "flex": 1, + "paddingVertical": 0, + } } > - + - chevron-left - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-left + + @@ -538,7 +546,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -615,35 +623,43 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` } testID="icon-button" > - + - chevron-right - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-right + + @@ -676,7 +692,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -690,7 +706,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu "marginRight": 16, }, { - "color": "rgba(28, 27, 31, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, ], ] @@ -730,7 +746,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -807,35 +823,43 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu } testID="icon-button" > - + - page-first - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + page-first + + @@ -864,7 +888,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -941,35 +965,43 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu } testID="icon-button" > - + - chevron-left - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-left + + @@ -998,7 +1030,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1075,35 +1107,43 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu } testID="icon-button" > - + - chevron-right - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-right + + @@ -1132,7 +1172,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1209,35 +1249,43 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu } testID="icon-button" > - + - page-last - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + page-last + + @@ -1270,7 +1318,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -1284,7 +1332,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` "marginRight": 16, }, { - "color": "rgba(28, 27, 31, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, ], ] @@ -1324,7 +1372,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1401,35 +1449,43 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` } testID="icon-button" > - + - chevron-left - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-left + + @@ -1458,7 +1514,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1535,35 +1591,43 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` } testID="icon-button" > - + - chevron-right - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-right + + @@ -1606,7 +1670,7 @@ exports[`DataTable.Pagination renders data table pagination with options select "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -1620,7 +1684,7 @@ exports[`DataTable.Pagination renders data table pagination with options select "marginRight": 16, }, { - "color": "rgba(28, 27, 31, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, ], ] @@ -1654,7 +1718,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderStyle": "solid", "borderWidth": 1, @@ -1723,6 +1787,9 @@ exports[`DataTable.Pagination renders data table pagination with options select "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, { "flexDirection": "row-reverse", }, @@ -1732,10 +1799,6 @@ exports[`DataTable.Pagination renders data table pagination with options select - + - page-first - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + page-first + + @@ -2028,7 +2094,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -2105,35 +2171,43 @@ exports[`DataTable.Pagination renders data table pagination with options select } testID="icon-button" > - + - chevron-left - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-left + + @@ -2162,7 +2236,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -2239,35 +2313,43 @@ exports[`DataTable.Pagination renders data table pagination with options select } testID="icon-button" > - + - chevron-right - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-right + + @@ -2296,7 +2378,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -2373,35 +2455,43 @@ exports[`DataTable.Pagination renders data table pagination with options select } testID="icon-button" > - + - page-last - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + page-last + + @@ -2475,7 +2565,7 @@ exports[`DataTable.Title renders data table title with press handler 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 16, }, [ @@ -2505,7 +2595,7 @@ exports[`DataTable.Title renders data table title with press handler 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -2603,7 +2693,7 @@ exports[`DataTable.Title renders data table title with sort icon 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 16, }, [ @@ -2633,7 +2723,7 @@ exports[`DataTable.Title renders data table title with sort icon 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -2719,7 +2809,7 @@ exports[`DataTable.Title renders right aligned data table title 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -2739,7 +2829,7 @@ exports[`DataTable.Title renders right aligned data table title 1`] = ` }, {}, { - "color": "rgba(28, 27, 31, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, undefined, ], diff --git a/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap b/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap index 78e3ed8612..042ba3f927 100644 --- a/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap @@ -39,14 +39,6 @@ exports[`renders DrawerItem with icon 1`] = ` "overflow": "hidden", }, [ - { - "marginHorizontal": 10, - "marginVertical": 4, - }, - { - "backgroundColor": undefined, - "borderRadius": 28, - }, { "height": 56, "justifyContent": "center", @@ -54,6 +46,10 @@ exports[`renders DrawerItem with icon 1`] = ` "marginRight": 12, "marginVertical": 0, }, + { + "backgroundColor": undefined, + "borderRadius": 28, + }, undefined, ], ] @@ -61,18 +57,13 @@ exports[`renders DrawerItem with icon 1`] = ` > - plus - - - - - - - -`; - -exports[`renders disabled FAB 1`] = ` - - - - - - - - + - camera - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + camera + + @@ -167,7 +175,7 @@ exports[`renders icon button by default 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -243,35 +251,43 @@ exports[`renders icon button by default 1`] = ` } testID="icon-button" > - + - camera - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + camera + + @@ -303,7 +319,7 @@ exports[`renders icon button with color 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -379,35 +395,43 @@ exports[`renders icon button with color 1`] = ` } testID="icon-button" > - + - camera - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + camera + + @@ -439,7 +463,7 @@ exports[`renders icon button with size 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 23, "borderWidth": 0, "elevation": 0, @@ -515,35 +539,43 @@ exports[`renders icon button with size 1`] = ` } testID="icon-button" > - + - camera - + [ + { + "lineHeight": 30, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + camera + + @@ -575,7 +607,7 @@ exports[`renders icon change animated 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -653,66 +685,74 @@ exports[`renders icon change animated 1`] = ` > - - camera - + + camera + + diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap index 0857e59773..55cdd864ec 100644 --- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap @@ -5,7 +5,7 @@ exports[`renders expanded accordion 1`] = ` @@ -70,12 +70,10 @@ exports[`renders expanded accordion 1`] = ` @@ -382,12 +378,10 @@ exports[`renders list accordion with children 1`] = ` @@ -542,12 +536,10 @@ exports[`renders list accordion with custom title and description styles 1`] = ` @@ -789,12 +781,10 @@ exports[`renders list accordion with left items 1`] = ` @@ -949,12 +939,10 @@ exports[`renders multiline list accordion 1`] = ` @@ -184,7 +199,7 @@ exports[`renders list section with custom title style 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -324,13 +339,11 @@ exports[`renders list section with custom title style 1`] = ` @@ -711,7 +737,7 @@ exports[`renders list section with subheader 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -849,13 +875,11 @@ exports[`renders list section with subheader 1`] = ` @@ -1334,13 +1371,11 @@ exports[`renders list section without subheader 1`] = ` - + - magnify - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + magnify + + @@ -176,7 +184,7 @@ exports[`activity indicator snapshot test 1`] = ` accessibilityRole="search" keyboardAppearance="light" placeholder="" - placeholderTextColor="rgba(28, 27, 31, 1)" + placeholderTextColor="rgba(29, 27, 32, 1)" returnKeyType="search" selectionColor="rgba(103, 80, 164, 1)" style={ @@ -415,7 +423,7 @@ exports[`renders with placeholder 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(238, 232, 244)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 28, "shadowColor": "#000", "shadowOffset": { @@ -433,7 +441,7 @@ exports[`renders with placeholder 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(238, 232, 244)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 28, "flex": undefined, "flexDirection": "row", @@ -473,7 +481,7 @@ exports[`renders with placeholder 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -550,35 +558,43 @@ exports[`renders with placeholder 1`] = ` } testID="search-bar-icon" > - + - magnify - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + magnify + + @@ -586,7 +602,7 @@ exports[`renders with placeholder 1`] = ` accessibilityRole="search" keyboardAppearance="light" placeholder="Search" - placeholderTextColor="rgba(28, 27, 31, 1)" + placeholderTextColor="rgba(29, 27, 32, 1)" returnKeyType="search" selectionColor="rgba(103, 80, 164, 1)" style={ @@ -657,7 +673,7 @@ exports[`renders with placeholder 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -734,35 +750,43 @@ exports[`renders with placeholder 1`] = ` } testID="search-bar-clear-icon" > - + - close - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + close + + @@ -776,7 +800,7 @@ exports[`renders with text 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(238, 232, 244)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 28, "shadowColor": "#000", "shadowOffset": { @@ -794,7 +818,7 @@ exports[`renders with text 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(238, 232, 244)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 28, "flex": undefined, "flexDirection": "row", @@ -834,7 +858,7 @@ exports[`renders with text 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -911,35 +935,43 @@ exports[`renders with text 1`] = ` } testID="search-bar-icon" > - + - magnify - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + magnify + + @@ -947,7 +979,7 @@ exports[`renders with text 1`] = ` accessibilityRole="search" keyboardAppearance="light" placeholder="Search" - placeholderTextColor="rgba(28, 27, 31, 1)" + placeholderTextColor="rgba(29, 27, 32, 1)" returnKeyType="search" selectionColor="rgba(103, 80, 164, 1)" style={ @@ -1014,7 +1046,7 @@ exports[`renders with text 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1091,35 +1123,43 @@ exports[`renders with text 1`] = ` } testID="search-bar-clear-icon" > - + - close - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + close + + diff --git a/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap b/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap index 83f1541397..e36860cf04 100644 --- a/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap @@ -91,6 +91,7 @@ exports[`renders segmented button 1`] = ` "paddingVertical": 9, }, { + "opacity": 1, "paddingVertical": 9, }, ] @@ -105,7 +106,7 @@ exports[`renders segmented button 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -121,7 +122,7 @@ exports[`renders segmented button 1`] = ` "textAlign": "center", }, { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -216,6 +217,7 @@ exports[`renders segmented button 1`] = ` "paddingVertical": 9, }, { + "opacity": 1, "paddingVertical": 9, }, ] @@ -230,7 +232,7 @@ exports[`renders segmented button 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -246,7 +248,7 @@ exports[`renders segmented button 1`] = ` "textAlign": "center", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap index 9fdd75d4dc..cbd1da4450 100644 --- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap @@ -24,7 +24,7 @@ exports[`renders snackbar with Text as a child 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "margin": 8, "opacity": 0, @@ -50,7 +50,7 @@ exports[`renders snackbar with Text as a child 1`] = ` pointerEvents="box-none" style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "flex": undefined, "flexDirection": "row", @@ -112,7 +112,7 @@ exports[`renders snackbar with View & Text as a child 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "margin": 8, "opacity": 0, @@ -138,7 +138,7 @@ exports[`renders snackbar with View & Text as a child 1`] = ` pointerEvents="box-none" style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "flex": undefined, "flexDirection": "row", @@ -226,7 +226,7 @@ exports[`renders snackbar with action button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "margin": 8, "opacity": 0, @@ -252,7 +252,7 @@ exports[`renders snackbar with action button 1`] = ` pointerEvents="box-none" style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "flex": undefined, "flexDirection": "row", @@ -276,7 +276,7 @@ exports[`renders snackbar with action button 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -294,7 +294,7 @@ exports[`renders snackbar with action button 1`] = ` "marginVertical": 14, }, { - "color": "rgba(244, 239, 244, 1)", + "color": "rgba(245, 239, 247, 1)", }, ], ], @@ -410,6 +410,9 @@ exports[`renders snackbar with action button 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -423,7 +426,7 @@ exports[`renders snackbar with action button 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -435,14 +438,10 @@ exports[`renders snackbar with action button 1`] = ` "lineHeight": 20, }, [ - { - "marginHorizontal": 16, - "marginVertical": 9, - "textAlign": "center", - }, - false, { "marginHorizontal": 12, + "marginVertical": 10, + "textAlign": "center", }, false, false, @@ -495,7 +494,7 @@ exports[`renders snackbar with content 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "margin": 8, "opacity": 0, @@ -521,7 +520,7 @@ exports[`renders snackbar with content 1`] = ` pointerEvents="box-none" style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "flex": undefined, "flexDirection": "row", @@ -545,7 +544,7 @@ exports[`renders snackbar with content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -563,7 +562,7 @@ exports[`renders snackbar with content 1`] = ` "marginVertical": 14, }, { - "color": "rgba(244, 239, 244, 1)", + "color": "rgba(245, 239, 247, 1)", }, ], ], diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index 76ad8d4e54..0a7334fa12 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -21,6 +21,7 @@ exports[`call onPress when affix adornment pressed 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -65,6 +66,9 @@ exports[`call onPress when affix adornment pressed 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -199,13 +203,14 @@ exports[`call onPress when affix adornment pressed 1`] = ` "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -278,6 +283,7 @@ exports[`call onPress when affix adornment pressed 1`] = ` [ { "color": "rgba(73, 69, 79, 1)", + "opacity": 1, }, { "fontFamily": "System", @@ -319,6 +325,7 @@ exports[`correctly applies a component as the text label 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -363,6 +370,9 @@ exports[`correctly applies a component as the text label 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -513,13 +523,14 @@ exports[`correctly applies a component as the text label 1`] = ` "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -561,6 +572,7 @@ exports[`correctly applies cursorColor prop 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -605,6 +617,9 @@ exports[`correctly applies cursorColor prop 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -739,13 +754,14 @@ exports[`correctly applies cursorColor prop 1`] = ` "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -787,6 +803,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -831,6 +848,9 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -965,13 +985,14 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -1009,7 +1030,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` }, false, { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 4, "borderWidth": 1, @@ -1050,6 +1071,9 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -1086,7 +1110,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` numberOfLines={1} style={ { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "color": "transparent", "fontFamily": "System", "fontSize": 16, @@ -1225,13 +1249,14 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingHorizontal": 16, "textAlign": "left", "textAlignVertical": "top", @@ -1272,6 +1297,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -1316,6 +1342,9 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -1450,13 +1479,14 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -1500,6 +1530,7 @@ exports[`correctly applies textAlign center 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -1544,6 +1575,9 @@ exports[`correctly applies textAlign center 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -1678,13 +1712,14 @@ exports[`correctly applies textAlign center 1`] = ` "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "center", @@ -1726,6 +1761,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -1770,6 +1806,9 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -1904,13 +1943,14 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 56, "textAlign": "left", @@ -1952,6 +1992,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm [ { "color": "rgba(73, 69, 79, 1)", + "opacity": 1, }, { "fontFamily": "System", @@ -1980,6 +2021,9 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "position": "absolute", "width": 24, }, + { + "opacity": 1, + }, { "right": 16, "top": 16, @@ -2012,7 +2056,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -2088,35 +2132,43 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm } testID="right-icon-adornment" > - + - heart - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + heart + + @@ -2145,6 +2197,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -2189,6 +2242,9 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -2323,13 +2379,14 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 56, "paddingRight": 56, "textAlign": "left", @@ -2360,6 +2417,9 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "position": "absolute", "width": 24, }, + { + "opacity": 1, + }, { "left": 16, "top": 16, @@ -2392,7 +2452,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -2468,35 +2528,43 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm } testID="left-icon-adornment" > - + - heart - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + heart + + @@ -2522,6 +2590,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm [ { "color": "rgba(73, 69, 79, 1)", + "opacity": 1, }, { "fontFamily": "System", diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 456c0402fa..a8feb453e3 100644 --- a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -5,7 +5,7 @@ exports[`renders disabled toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(29, 25, 43, 0.12)", + "backgroundColor": "rgba(230, 224, 233, 1)", "borderRadius": 4, "height": 42, "margin": 0, @@ -25,7 +25,7 @@ exports[`renders disabled toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(29, 25, 43, 0.12)", + "backgroundColor": "rgba(230, 224, 233, 1)", "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 4, "borderWidth": 0, @@ -105,35 +105,43 @@ exports[`renders disabled toggle button 1`] = ` } testID="icon-button" > - + - heart - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + heart + + @@ -144,7 +152,7 @@ exports[`renders toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(29, 25, 43, 0.12)", + "backgroundColor": "rgba(230, 224, 233, 1)", "borderRadius": 4, "height": 42, "margin": 0, @@ -164,7 +172,7 @@ exports[`renders toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(29, 25, 43, 0.12)", + "backgroundColor": "rgba(230, 224, 233, 1)", "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 4, "borderWidth": 0, @@ -239,35 +247,43 @@ exports[`renders toggle button 1`] = ` } testID="icon-button" > - + - heart - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + heart + + @@ -278,7 +294,7 @@ exports[`renders unchecked toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "transparent", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 4, "height": 42, "margin": 0, @@ -298,7 +314,7 @@ exports[`renders unchecked toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "transparent", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 4, "borderWidth": 0, @@ -378,35 +394,43 @@ exports[`renders unchecked toggle button 1`] = ` } testID="icon-button" > - + - heart - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + heart + + diff --git a/src/core/PaperProvider.tsx b/src/core/PaperProvider.tsx index 44fd426ab5..2a61d62b1b 100644 --- a/src/core/PaperProvider.tsx +++ b/src/core/PaperProvider.tsx @@ -8,7 +8,7 @@ import { import SafeAreaProviderCompat from './SafeAreaProviderCompat'; import { Provider as SettingsProvider, Settings } from './settings'; -import { defaultThemesByVersion, ThemeProvider } from './theming'; +import { getTheme, ThemeProvider } from './theming'; import MaterialCommunityIcon from '../components/MaterialCommunityIcon'; import PortalHost from '../components/Portal/PortalHost'; import type { ThemeProp } from '../types'; @@ -21,12 +21,8 @@ export type Props = { }; const PaperProvider = (props: Props) => { - const isOnlyVersionInTheme = - props.theme && Object.keys(props.theme).length === 1 && props.theme.version; - const colorSchemeName = - ((!props.theme || isOnlyVersionInTheme) && Appearance?.getColorScheme()) || - 'light'; + (!props.theme && Appearance?.getColorScheme()) || 'light'; const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(false); @@ -59,13 +55,13 @@ const PaperProvider = (props: Props) => { React.useEffect(() => { let appearanceSubscription: NativeEventSubscription | undefined; - if (!props.theme || isOnlyVersionInTheme) { + if (!props.theme) { appearanceSubscription = Appearance?.addChangeListener( handleAppearanceChange ) as NativeEventSubscription | undefined; } return () => { - if (!props.theme || isOnlyVersionInTheme) { + if (!props.theme) { if (appearanceSubscription) { appearanceSubscription.remove(); } else { @@ -74,27 +70,20 @@ const PaperProvider = (props: Props) => { } } }; - }, [props.theme, isOnlyVersionInTheme]); + }, [props.theme]); const theme = React.useMemo(() => { - const themeVersion = props.theme?.version || 3; - const scheme = colorScheme === 'dark' ? 'dark' : 'light'; - const defaultThemeBase = defaultThemesByVersion[themeVersion][scheme]; + const isDark = colorScheme === 'dark'; + const defaultThemeBase = getTheme(isDark); - const extendedThemeBase = { + return { ...defaultThemeBase, ...props.theme, - version: themeVersion, animation: { ...props.theme?.animation, scale: reduceMotionEnabled ? 0 : 1, }, }; - - return { - ...extendedThemeBase, - isV3: extendedThemeBase.version === 3, - }; }, [colorScheme, props.theme, reduceMotionEnabled]); const { children, settings } = props; diff --git a/src/core/__tests__/PaperProvider.test.tsx b/src/core/__tests__/PaperProvider.test.tsx index 11c4beff49..6ae08641c1 100644 --- a/src/core/__tests__/PaperProvider.test.tsx +++ b/src/core/__tests__/PaperProvider.test.tsx @@ -8,12 +8,7 @@ import { import { render, act } from '@testing-library/react-native'; -import { - MD2LightTheme, - MD2DarkTheme, - MD3LightTheme, - MD3DarkTheme, -} from '../../styles/themes'; +import { LightTheme, DarkTheme } from '../../styles/themes'; import type { ThemeProp } from '../../types'; import PaperProvider from '../PaperProvider'; import { useTheme } from '../theming'; @@ -107,8 +102,8 @@ const createProvider = (theme?: ThemeProp) => { ); }; -const ExtendedLightTheme = { ...MD3LightTheme, isV3: true } as ThemeProp; -const ExtendedDarkTheme = { ...MD3DarkTheme, isV3: true } as ThemeProp; +const ExtendedLightTheme = { ...LightTheme } as ThemeProp; +const ExtendedDarkTheme = { ...DarkTheme } as ThemeProp; describe('PaperProvider', () => { beforeEach(() => { @@ -130,13 +125,13 @@ describe('PaperProvider', () => { it('handles overriding animation with the custom one', () => { const { getByTestId } = render( createProvider({ - ...MD3LightTheme, + ...LightTheme, animation: { defaultAnimationDuration: 250 }, }) ); expect(getByTestId('provider-child-view').props.theme).toStrictEqual({ - ...MD3LightTheme, + ...LightTheme, animation: { scale: 1, defaultAnimationDuration: 250 }, }); }); @@ -229,7 +224,6 @@ describe('PaperProvider', () => { colors: { ...ExtendedLightTheme.colors, primary: 'tomato', - accent: 'yellow', }, } as ThemeProp; const { getByTestId } = render(createProvider(customTheme)); @@ -237,23 +231,4 @@ describe('PaperProvider', () => { customTheme ); }); - - it.each` - version | colorScheme | expectedTheme - ${2} | ${'light'} | ${MD2LightTheme} - ${2} | ${'dark'} | ${MD2DarkTheme} - ${3} | ${'light'} | ${MD3LightTheme} - ${3} | ${'dark'} | ${MD3DarkTheme} - `( - 'uses correct theme, $colorScheme mode, version $version', - async ({ version, colorScheme, expectedTheme }) => { - mockAppearance(); - (Appearance.getColorScheme as jest.Mock).mockReturnValue(colorScheme); - const { getByTestId } = render(createProvider({ version })); - - expect(getByTestId('provider-child-view').props.theme).toStrictEqual( - expectedTheme - ); - } - ); }); diff --git a/src/core/__tests__/theming.test.tsx b/src/core/__tests__/theming.test.tsx index 7b069cd482..7b2ab98c3d 100644 --- a/src/core/__tests__/theming.test.tsx +++ b/src/core/__tests__/theming.test.tsx @@ -1,4 +1,4 @@ -import { MD3DarkTheme, MD3LightTheme } from '../../styles/themes'; +import { DarkTheme, LightTheme } from '../../styles/themes'; import { adaptNavigationTheme } from '../theming'; const NavigationLightTheme = { @@ -40,17 +40,17 @@ const NavigationCustomLightTheme = { }; const AppCustomLightTheme = { - ...MD3LightTheme, + ...LightTheme, colors: { - ...MD3LightTheme.colors, + ...LightTheme.colors, primary: 'purple', }, }; const AppCustomDarkTheme = { - ...MD3DarkTheme, + ...DarkTheme, colors: { - ...MD3DarkTheme.colors, + ...DarkTheme.colors, primary: 'orchid', }, }; @@ -89,88 +89,82 @@ describe('adaptNavigationTheme', () => { ...NavigationLightTheme, colors: { ...NavigationLightTheme.colors, - primary: MD3LightTheme.colors.primary, - background: MD3LightTheme.colors.background, - card: MD3LightTheme.colors.elevation.level2, - text: MD3LightTheme.colors.onSurface, - border: MD3LightTheme.colors.outline, - notification: MD3LightTheme.colors.error, + primary: LightTheme.colors.primary, + background: LightTheme.colors.background, + card: LightTheme.colors.elevation.level2, + text: LightTheme.colors.onSurface, + border: LightTheme.colors.outline, + notification: LightTheme.colors.error, }, }, DarkTheme: { ...NavigationDarkTheme, colors: { ...NavigationDarkTheme.colors, - primary: MD3DarkTheme.colors.primary, - background: MD3DarkTheme.colors.background, - card: MD3DarkTheme.colors.elevation.level2, - text: MD3DarkTheme.colors.onSurface, - border: MD3DarkTheme.colors.outline, - notification: MD3DarkTheme.colors.error, + primary: DarkTheme.colors.primary, + background: DarkTheme.colors.background, + card: DarkTheme.colors.elevation.level2, + text: DarkTheme.colors.onSurface, + border: DarkTheme.colors.outline, + notification: DarkTheme.colors.error, }, }, }); }); it('should return adapted navigation light theme', () => { - const { LightTheme } = adaptNavigationTheme({ + const { LightTheme: adaptedLight } = adaptNavigationTheme({ reactNavigationLight: NavigationLightTheme, }); - const { colors } = MD3LightTheme; - - expect(LightTheme).toMatchObject({ + expect(adaptedLight).toMatchObject({ ...NavigationLightTheme, colors: { ...NavigationLightTheme.colors, - primary: colors.primary, - background: colors.background, - card: colors.elevation.level2, - text: colors.onSurface, - border: colors.outline, - notification: colors.error, + primary: LightTheme.colors.primary, + background: LightTheme.colors.background, + card: LightTheme.colors.elevation.level2, + text: LightTheme.colors.onSurface, + border: LightTheme.colors.outline, + notification: LightTheme.colors.error, }, }); }); it('should return adapted navigation dark theme', () => { - const { DarkTheme } = adaptNavigationTheme({ + const { DarkTheme: adaptedDark } = adaptNavigationTheme({ reactNavigationDark: NavigationDarkTheme, }); - const { colors } = MD3DarkTheme; - - expect(DarkTheme).toMatchObject({ + expect(adaptedDark).toMatchObject({ ...NavigationDarkTheme, colors: { ...NavigationDarkTheme.colors, - primary: colors.primary, - background: colors.background, - card: colors.elevation.level2, - text: colors.onSurface, - border: colors.outline, - notification: colors.error, + primary: DarkTheme.colors.primary, + background: DarkTheme.colors.background, + card: DarkTheme.colors.elevation.level2, + text: DarkTheme.colors.onSurface, + border: DarkTheme.colors.outline, + notification: DarkTheme.colors.error, }, }); }); it('should return adapted custom navigation theme', () => { - const { LightTheme } = adaptNavigationTheme({ + const { LightTheme: adaptedLight } = adaptNavigationTheme({ reactNavigationLight: NavigationCustomLightTheme, }); - const { colors } = MD3LightTheme; - - expect(LightTheme).toMatchObject({ + expect(adaptedLight).toMatchObject({ ...NavigationCustomLightTheme, colors: { ...NavigationCustomLightTheme.colors, - primary: colors.primary, - background: colors.background, - card: colors.elevation.level2, - text: colors.onSurface, - border: colors.outline, - notification: colors.error, + primary: LightTheme.colors.primary, + background: LightTheme.colors.background, + card: LightTheme.colors.elevation.level2, + text: LightTheme.colors.onSurface, + border: LightTheme.colors.outline, + notification: LightTheme.colors.error, secondary: 'rgb(150,45,85)', tertiary: 'rgb(105,45,85)', }, @@ -222,41 +216,41 @@ describe('adaptNavigationTheme', () => { }); it('should adapt navigation theme with fonts', () => { - const { LightTheme } = adaptNavigationTheme({ + const { LightTheme: adaptedLight } = adaptNavigationTheme({ reactNavigationLight: NavigationThemeWithFonts, }); - expect(LightTheme).toMatchObject({ + expect(adaptedLight).toMatchObject({ ...NavigationThemeWithFonts, colors: { ...NavigationThemeWithFonts.colors, - primary: MD3LightTheme.colors.primary, - background: MD3LightTheme.colors.background, - card: MD3LightTheme.colors.elevation.level2, - text: MD3LightTheme.colors.onSurface, - border: MD3LightTheme.colors.outline, - notification: MD3LightTheme.colors.error, + primary: LightTheme.colors.primary, + background: LightTheme.colors.background, + card: LightTheme.colors.elevation.level2, + text: LightTheme.colors.onSurface, + border: LightTheme.colors.outline, + notification: LightTheme.colors.error, }, fonts: { regular: { - fontFamily: MD3LightTheme.fonts.bodyMedium.fontFamily, - fontWeight: MD3LightTheme.fonts.bodyMedium.fontWeight, - letterSpacing: MD3LightTheme.fonts.bodyMedium.letterSpacing, + fontFamily: LightTheme.fonts.bodyMedium.fontFamily, + fontWeight: LightTheme.fonts.bodyMedium.fontWeight, + letterSpacing: LightTheme.fonts.bodyMedium.letterSpacing, }, medium: { - fontFamily: MD3LightTheme.fonts.titleMedium.fontFamily, - fontWeight: MD3LightTheme.fonts.titleMedium.fontWeight, - letterSpacing: MD3LightTheme.fonts.titleMedium.letterSpacing, + fontFamily: LightTheme.fonts.titleMedium.fontFamily, + fontWeight: LightTheme.fonts.titleMedium.fontWeight, + letterSpacing: LightTheme.fonts.titleMedium.letterSpacing, }, bold: { - fontFamily: MD3LightTheme.fonts.headlineSmall.fontFamily, - fontWeight: MD3LightTheme.fonts.headlineSmall.fontWeight, - letterSpacing: MD3LightTheme.fonts.headlineSmall.letterSpacing, + fontFamily: LightTheme.fonts.headlineSmall.fontFamily, + fontWeight: LightTheme.fonts.headlineSmall.fontWeight, + letterSpacing: LightTheme.fonts.headlineSmall.letterSpacing, }, heavy: { - fontFamily: MD3LightTheme.fonts.headlineLarge.fontFamily, - fontWeight: MD3LightTheme.fonts.headlineLarge.fontWeight, - letterSpacing: MD3LightTheme.fonts.headlineLarge.letterSpacing, + fontFamily: LightTheme.fonts.headlineLarge.fontFamily, + fontWeight: LightTheme.fonts.headlineLarge.fontWeight, + letterSpacing: LightTheme.fonts.headlineLarge.letterSpacing, }, }, }); diff --git a/src/core/theming.tsx b/src/core/theming.tsx index 44223f032a..1312feab92 100644 --- a/src/core/theming.tsx +++ b/src/core/theming.tsx @@ -1,30 +1,19 @@ import type { ComponentType } from 'react'; import { $DeepPartial, createTheming } from '@callstack/react-theme-provider'; -import color from 'color'; - -import { - MD2DarkTheme, - MD2LightTheme, - MD3DarkTheme, - MD3LightTheme, -} from '../styles/themes'; -import type { - InternalTheme, - MD3Theme, - MD3AndroidColors, - NavigationTheme, -} from '../types'; - -export const DefaultTheme = MD3LightTheme; + +import { DarkTheme, LightTheme } from '../styles/themes'; +import type { InternalTheme, Theme, NavigationTheme } from '../types'; + +export const DefaultTheme = LightTheme; export const { ThemeProvider, withTheme, useTheme: useAppTheme, -} = createTheming(MD3LightTheme); +} = createTheming(LightTheme); -export function useTheme(overrides?: $DeepPartial) { +export function useTheme(overrides?: $DeepPartial) { return useAppTheme(overrides); } @@ -36,43 +25,21 @@ export const withInternalTheme = ( WrappedComponent: ComponentType & C ) => withTheme(WrappedComponent); -export const defaultThemesByVersion = { - 2: { - light: MD2LightTheme, - dark: MD2DarkTheme, - }, - 3: { - light: MD3LightTheme, - dark: MD3DarkTheme, - }, -}; - -export const getTheme = < - Scheme extends boolean = false, - IsVersion3 extends boolean = true ->( - isDark: Scheme = false as Scheme, - isV3: IsVersion3 = true as IsVersion3 -): (typeof defaultThemesByVersion)[IsVersion3 extends true - ? 3 - : 2][Scheme extends true ? 'dark' : 'light'] => { - const themeVersion = isV3 ? 3 : 2; - const scheme = isDark ? 'dark' : 'light'; - - return defaultThemesByVersion[themeVersion][scheme]; +export const getTheme = (isDark: boolean = false): Theme => { + return isDark ? DarkTheme : LightTheme; }; // eslint-disable-next-line no-redeclare export function adaptNavigationTheme(themes: { reactNavigationLight: T; - materialLight?: MD3Theme; + materialLight?: Theme; }): { LightTheme: NavigationTheme; }; // eslint-disable-next-line no-redeclare export function adaptNavigationTheme(themes: { reactNavigationDark: T; - materialDark?: MD3Theme; + materialDark?: Theme; }): { DarkTheme: NavigationTheme; }; @@ -83,8 +50,8 @@ export function adaptNavigationTheme< >(themes: { reactNavigationLight: TLight; reactNavigationDark: TDark; - materialLight?: MD3Theme; - materialDark?: MD3Theme; + materialLight?: Theme; + materialDark?: Theme; }): { LightTheme: TLight; DarkTheme: TDark }; // eslint-disable-next-line no-redeclare export function adaptNavigationTheme(themes: any) { @@ -95,19 +62,19 @@ export function adaptNavigationTheme(themes: any) { materialDark, } = themes; - const MD3Themes = { - light: materialLight || MD3LightTheme, - dark: materialDark || MD3DarkTheme, + const Themes = { + light: materialLight || LightTheme, + dark: materialDark || DarkTheme, }; const result: { LightTheme?: any; DarkTheme?: any } = {}; if (reactNavigationLight) { - result.LightTheme = getAdaptedTheme(reactNavigationLight, MD3Themes.light); + result.LightTheme = getAdaptedTheme(reactNavigationLight, Themes.light); } if (reactNavigationDark) { - result.DarkTheme = getAdaptedTheme(reactNavigationDark, MD3Themes.dark); + result.DarkTheme = getAdaptedTheme(reactNavigationDark, Themes.dark); } return result; @@ -115,7 +82,7 @@ export function adaptNavigationTheme(themes: any) { const getAdaptedTheme = ( theme: T, - materialTheme: MD3Theme + materialTheme: Theme ): T => { const base = { ...theme, @@ -160,19 +127,3 @@ const getAdaptedTheme = ( return base; }; - -export const getDynamicThemeElevations = (scheme: MD3AndroidColors) => { - const elevationValues = ['transparent', 0.05, 0.08, 0.11, 0.12, 0.14]; - return elevationValues.reduce((elevations, elevationValue, index) => { - return { - ...elevations, - [`level${index}`]: - index === 0 - ? elevationValue - : color(scheme.surface) - .mix(color(scheme.primary), elevationValue as number) - .rgb() - .string(), - }; - }, {}); -}; diff --git a/src/index.tsx b/src/index.tsx index 1b20528787..4b74cff512 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,4 @@ -export { MD3Colors } from './styles/themes/v3/tokens'; +export { Colors } from './styles/themes/tokens'; export { useTheme, @@ -19,9 +19,7 @@ export { default as configureFonts } from './styles/fonts'; import * as Avatar from './components/Avatar/Avatar'; import * as Drawer from './components/Drawer/Drawer'; import * as List from './components/List/List'; -import * as MD2Colors from './styles/themes/v2/colors'; -export { MD2Colors }; export { Avatar, List, Drawer }; export * from './components/FAB/AnimatedFAB'; @@ -58,13 +56,6 @@ export { default as ToggleButton } from './components/ToggleButton'; export { default as SegmentedButtons } from './components/SegmentedButtons/SegmentedButtons'; export { default as Tooltip } from './components/Tooltip/Tooltip'; -export { - Caption, - Headline, - Paragraph, - Subheading, - Title, -} from './components/Typography/v2'; export { default as Text, customText } from './components/Typography/Text'; // Types @@ -144,11 +135,6 @@ export type { Props as ToggleButtonProps } from './components/ToggleButton/Toggl export type { Props as ToggleButtonGroupProps } from './components/ToggleButton/ToggleButtonGroup'; export type { Props as ToggleButtonRowProps } from './components/ToggleButton/ToggleButtonRow'; export type { Props as TouchableRippleProps } from './components/TouchableRipple/TouchableRipple'; -export type { Props as CaptionProps } from './components/Typography/v2/Caption'; -export type { Props as HeadlineProps } from './components/Typography/v2/Headline'; -export type { Props as ParagraphProps } from './components/Typography/v2/Paragraph'; -export type { Props as SubheadingProps } from './components/Typography/v2/Subheading'; -export type { Props as TitleProps } from './components/Typography/v2/Title'; 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'; @@ -160,10 +146,4 @@ export type { MaterialBottomTabScreenProps, } from './react-navigation'; -export type { - MD2Theme, - MD3Theme, - ThemeBase, - MD3Elevation, - MD3TypescaleKey, -} from './types'; +export type { Theme, ThemeBase, Elevation, TypescaleKey } from './types'; diff --git a/src/react-navigation/views/MaterialBottomTabView.tsx b/src/react-navigation/views/MaterialBottomTabView.tsx index df846ae2fb..98378e0c79 100644 --- a/src/react-navigation/views/MaterialBottomTabView.tsx +++ b/src/react-navigation/views/MaterialBottomTabView.tsx @@ -99,7 +99,6 @@ export default function MaterialBottomTabView({ ? options.title : (route as Route).name; }} - getColor={({ route }) => descriptors[route.key].options.tabBarColor} getBadge={({ route }) => descriptors[route.key].options.tabBarBadge} getAccessibilityLabel={({ route }) => descriptors[route.key].options.tabBarAccessibilityLabel diff --git a/src/styles/__tests__/fonts.test.js b/src/styles/__tests__/fonts.test.js index fb8dce5ba5..39ed241929 100644 --- a/src/styles/__tests__/fonts.test.js +++ b/src/styles/__tests__/fonts.test.js @@ -1,10 +1,3 @@ -const customFont = { - custom: { - fontFamily: 'sans-serif', - fontWeight: 'bold', - }, -}; - const customFontV3 = { displayLarge: { fontFamily: 'NotoSans', @@ -139,7 +132,7 @@ const loadFonts = () => { configureFonts = fonts.default; fontConfig = fonts.fontConfig; - typescale = require('../themes/v3/tokens').typescale; + typescale = require('../themes/tokens').typescale; }); return { configureFonts, fontConfig, typescale }; @@ -150,66 +143,6 @@ describe('configureFonts', () => { jest.dontMock('react-native'); }); - it('adds custom fonts to the iOS config', () => { - mockPlatform('ios'); - const { configureFonts, fontConfig } = loadFonts(); - - expect( - configureFonts({ - config: { - ios: { - ...fontConfig.ios, - customFont, - }, - }, - isV3: false, - }) - ).toEqual({ - ...fontConfig.ios, - customFont, - }); - }); - - it('adds custom fonts to the Android config', () => { - mockPlatform('android'); - const { configureFonts, fontConfig } = loadFonts(); - - expect( - configureFonts({ - config: { - android: { - ...fontConfig.android, - customFont, - }, - }, - isV3: false, - }) - ).toEqual({ - ...fontConfig.android, - customFont, - }); - }); - - it('adds custom fonts to the Web config', () => { - mockPlatform('web'); - const { configureFonts, fontConfig } = loadFonts(); - - expect( - configureFonts({ - config: { - web: { - ...fontConfig.web, - customFont, - }, - }, - isV3: false, - }) - ).toEqual({ - ...fontConfig.web, - customFont, - }); - }); - it('overrides properties passed in config for all variants', () => { mockPlatform('ios'); const { configureFonts } = loadFonts(); diff --git a/src/styles/fonts.tsx b/src/styles/fonts.tsx index e3b5017fc4..fb69dd32ba 100644 --- a/src/styles/fonts.tsx +++ b/src/styles/fonts.tsx @@ -1,7 +1,5 @@ -import { Platform, PlatformOSType } from 'react-native'; - -import type { Fonts, MD3Type, MD3Typescale, MD3TypescaleKey } from '../types'; -import { typescale } from './themes/v3/tokens'; +import type { TypeConfig, Typescale, TypescaleKey } from '../types'; +import { typescale } from './themes/tokens'; export const fontConfig = { web: { @@ -60,27 +58,22 @@ export const fontConfig = { }, }; -type MD2FontsConfig = { - [platform in PlatformOSType | 'default']?: Fonts; -}; - -type MD3FontsConfig = - | { - [key in MD3TypescaleKey]: Partial; - } - | { - [key: string]: MD3Type; - } - | Partial; - -function configureV2Fonts(config: MD2FontsConfig): Fonts { - const fonts = Platform.select({ ...fontConfig, ...config }) as Fonts; - return fonts; -} +// eslint-disable-next-line no-redeclare +export default function configureFonts(params?: { + config?: Partial; +}): Typescale; +// eslint-disable-next-line no-redeclare +export default function configureFonts(params?: { + config?: Partial>>; +}): Typescale; +// eslint-disable-next-line no-redeclare +export default function configureFonts(params: { + config: Record; +}): Typescale & { [key: string]: TypeConfig }; +// eslint-disable-next-line no-redeclare +export default function configureFonts(params?: any) { + const { config } = params || {}; -function configureV3Fonts( - config: MD3FontsConfig -): MD3Typescale | (MD3Typescale & { [key: string]: MD3Type }) { if (!config) { return typescale; } @@ -95,7 +88,7 @@ function configureV3Fonts( variantName, { ...variantProperties, ...config }, ]) - ) as MD3Typescale; + ) as Typescale; } return Object.assign( @@ -103,41 +96,9 @@ function configureV3Fonts( typescale, ...Object.entries(config).map(([variantName, variantProperties]) => ({ [variantName]: { - ...typescale[variantName as MD3TypescaleKey], - ...variantProperties, + ...(typescale[variantName as TypescaleKey] as object), + ...(variantProperties as object), }, })) ); } - -// eslint-disable-next-line no-redeclare -export default function configureFonts(params: { isV3: false }): Fonts; -// eslint-disable-next-line no-redeclare -export default function configureFonts(params: { - config?: MD2FontsConfig; - isV3: false; -}): Fonts; -// eslint-disable-next-line no-redeclare -export default function configureFonts(params?: { - config?: Partial; - isV3?: true; -}): MD3Typescale; -// eslint-disable-next-line no-redeclare -export default function configureFonts(params?: { - config?: Partial>>; - isV3?: true; -}): MD3Typescale; -// eslint-disable-next-line no-redeclare -export default function configureFonts(params: { - config: Record; - isV3?: true; -}): MD3Typescale & { [key: string]: MD3Type }; -// eslint-disable-next-line no-redeclare -export default function configureFonts(params?: any) { - const { isV3 = true, config } = params || {}; - - if (isV3) { - return configureV3Fonts(config); - } - return configureV2Fonts(config); -} diff --git a/src/styles/overlay.tsx b/src/styles/overlay.tsx index f9e6f8f9a5..ab58de0714 100644 --- a/src/styles/overlay.tsx +++ b/src/styles/overlay.tsx @@ -2,15 +2,13 @@ import { Animated } from 'react-native'; import color from 'color'; -import { MD2DarkTheme } from './themes/v2/DarkTheme'; - export const isAnimatedValue = ( it: number | string | Animated.AnimatedInterpolation ): it is Animated.Value => it instanceof Animated.Value; export default function overlay( elevation: T, - surfaceColor: string = MD2DarkTheme.colors?.surface + surfaceColor: string ): T extends number ? string : Animated.AnimatedInterpolation { if (isAnimatedValue(elevation)) { const inputRange = [0, 1, 2, 3, 8, 24]; diff --git a/src/styles/shadow.tsx b/src/styles/shadow.tsx index dcc11e8b65..5476ccdb76 100644 --- a/src/styles/shadow.tsx +++ b/src/styles/shadow.tsx @@ -1,83 +1,18 @@ import { Animated } from 'react-native'; -import * as MD2Colors from './themes/v2/colors'; -import { MD3Colors } from './themes/v3/tokens'; +import { Colors } from './themes/tokens'; -const SHADOW_COLOR = MD2Colors.black; -const SHADOW_OPACITY = 0.24; -const MD3_SHADOW_OPACITY = 0.3; -const MD3_SHADOW_COLOR = MD3Colors.primary0; +const SHADOW_OPACITY = 0.3; +const SHADOW_COLOR = Colors.primary0; -export default function shadow( - elevation: number | Animated.Value = 0, - isV3 = false -) { - return isV3 ? v3Shadow(elevation) : v2Shadow(elevation); -} - -function v2Shadow(elevation: number | Animated.Value = 0) { - if (elevation instanceof Animated.Value) { - const inputRange = [0, 1, 2, 3, 8, 24]; - - return { - shadowColor: SHADOW_COLOR, - shadowOffset: { - width: new Animated.Value(0), - height: elevation.interpolate({ - inputRange, - outputRange: [0, 0.5, 0.75, 2, 7, 23], - }), - }, - shadowOpacity: elevation.interpolate({ - inputRange: [0, 1], - outputRange: [0, SHADOW_OPACITY], - extrapolate: 'clamp', - }), - shadowRadius: elevation.interpolate({ - inputRange, - outputRange: [0, 0.75, 1.5, 3, 8, 24], - }), - }; - } else { - if (elevation === 0) { - return {}; - } - - let height, radius; - switch (elevation) { - case 1: - height = 0.5; - radius = 0.75; - break; - case 2: - height = 0.75; - radius = 1.5; - break; - default: - height = elevation - 1; - radius = elevation; - } - - return { - shadowColor: SHADOW_COLOR, - shadowOffset: { - width: 0, - height, - }, - shadowOpacity: SHADOW_OPACITY, - shadowRadius: radius, - }; - } -} - -function v3Shadow(elevation: number | Animated.Value = 0) { +export default function shadow(elevation: number | Animated.Value = 0) { const inputRange = [0, 1, 2, 3, 4, 5]; const shadowHeight = [0, 1, 2, 4, 6, 8]; const shadowRadius = [0, 3, 6, 8, 10, 12]; if (elevation instanceof Animated.Value) { return { - shadowColor: MD3_SHADOW_COLOR, + shadowColor: SHADOW_COLOR, shadowOffset: { width: new Animated.Value(0), height: elevation.interpolate({ @@ -87,7 +22,7 @@ function v3Shadow(elevation: number | Animated.Value = 0) { }, shadowOpacity: elevation.interpolate({ inputRange: [0, 1], - outputRange: [0, MD3_SHADOW_OPACITY], + outputRange: [0, SHADOW_OPACITY], extrapolate: 'clamp', }), shadowRadius: elevation.interpolate({ @@ -97,8 +32,8 @@ function v3Shadow(elevation: number | Animated.Value = 0) { }; } else { return { - shadowColor: MD3_SHADOW_COLOR, - shadowOpacity: elevation ? MD3_SHADOW_OPACITY : 0, + shadowColor: SHADOW_COLOR, + shadowOpacity: elevation ? SHADOW_OPACITY : 0, shadowOffset: { width: 0, height: shadowHeight[elevation], diff --git a/src/styles/themes/DarkTheme.tsx b/src/styles/themes/DarkTheme.tsx new file mode 100644 index 0000000000..41955aa9eb --- /dev/null +++ b/src/styles/themes/DarkTheme.tsx @@ -0,0 +1,74 @@ +import color from 'color'; + +import { LightTheme } from './LightTheme'; +import { tokens } from './tokens'; +import type { Theme } from '../../types'; + +const { palette, stateOpacity } = tokens.md.ref; + +export const DarkTheme: Theme = { + ...LightTheme, + dark: true, + colors: { + primary: palette.primary80, + primaryContainer: palette.primary30, + secondary: palette.secondary80, + secondaryContainer: palette.secondary30, + tertiary: palette.tertiary80, + tertiaryContainer: palette.tertiary30, + surface: palette.neutral6, + surfaceDim: palette.neutral6, + surfaceBright: palette.neutral24, + surfaceContainerLowest: palette.neutral4, + surfaceContainerLow: palette.neutral10, + surfaceContainer: palette.neutral12, + surfaceContainerHigh: palette.neutral17, + surfaceContainerHighest: palette.neutral22, + surfaceVariant: palette.neutralVariant30, + background: palette.neutral6, + error: palette.error80, + errorContainer: palette.error30, + onPrimary: palette.primary20, + onPrimaryContainer: palette.primary90, + onSecondary: palette.secondary20, + onSecondaryContainer: palette.secondary90, + onTertiary: palette.tertiary20, + onTertiaryContainer: palette.tertiary90, + onSurface: palette.neutral90, + onSurfaceVariant: palette.neutralVariant80, + onError: palette.error20, + onErrorContainer: palette.error90, + onBackground: palette.neutral90, + outline: palette.neutralVariant60, + outlineVariant: palette.neutralVariant30, + inverseSurface: palette.neutral90, + inverseOnSurface: palette.neutral20, + inversePrimary: palette.primary40, + primaryFixed: palette.primary90, + primaryFixedDim: palette.primary80, + onPrimaryFixed: palette.primary10, + onPrimaryFixedVariant: palette.primary30, + secondaryFixed: palette.secondary90, + secondaryFixedDim: palette.secondary80, + onSecondaryFixed: palette.secondary10, + onSecondaryFixedVariant: palette.secondary30, + tertiaryFixed: palette.tertiary90, + tertiaryFixedDim: palette.tertiary80, + onTertiaryFixed: palette.tertiary10, + onTertiaryFixedVariant: palette.tertiary30, + shadow: palette.neutral0, + scrim: palette.neutral0, + stateLayerPressed: color(palette.neutral90) + .alpha(stateOpacity.pressed) + .rgb() + .string(), + elevation: { + level0: 'transparent', + level1: palette.neutral4, + level2: palette.neutral10, + level3: palette.neutral12, + level4: palette.neutral17, + level5: palette.neutral22, + }, + }, +}; diff --git a/src/styles/themes/DynamicTheme.android.tsx b/src/styles/themes/DynamicTheme.android.tsx new file mode 100644 index 0000000000..f2791670e8 --- /dev/null +++ b/src/styles/themes/DynamicTheme.android.tsx @@ -0,0 +1,502 @@ +import { Platform, PlatformColor } from 'react-native'; + +import { DarkTheme } from './DarkTheme'; +import { LightTheme } from './LightTheme'; +import type { Theme } from '../../types'; + +const isApi34 = (Platform.Version as number) >= 34; +const isApi31 = (Platform.Version as number) >= 31; + +const ac = (name: string) => + PlatformColor(`@android:color/${name}`) as unknown as string; + +/** + * Picks the correct color value for the current Android API level. + * - API 34+: uses the named role resource (system_*_light/dark) + * - API 31-33: uses the tonal accent resource (system_accent*_NNN), or ref + * - API < 31: uses the reference palette string from the base theme + * @see https://github.com/material-components/material-components-android/blob/master/docs/theming/Color.md + */ +const pick = (api34: string, api31: string, ref: string): string => + isApi34 ? ac(api34) : isApi31 && api31 != null ? ac(api31) : ref; + +// Known limitation: surface/container roles on API 31-33 use +// @color/m3_ref_palette_dynamic_neutral_variant* (MCL resources that require a +// native DynamicColors setup). No @android:color/ equivalent exists for those +// slots. Reference palette values are used as fallback on API 31-33. + +const lightColors = { + primary: pick( + 'system_primary_light', + 'system_accent1_600', + LightTheme.colors.primary + ), + onPrimary: pick( + 'system_on_primary_light', + 'system_accent1_0', + LightTheme.colors.onPrimary + ), + primaryContainer: pick( + 'system_primary_container_light', + 'system_accent1_100', + LightTheme.colors.primaryContainer + ), + onPrimaryContainer: pick( + 'system_on_primary_container_light', + 'system_accent1_900', + LightTheme.colors.onPrimaryContainer + ), + inversePrimary: pick( + 'system_primary_dark', + 'system_accent1_200', + LightTheme.colors.inversePrimary + ), + secondary: pick( + 'system_secondary_light', + 'system_accent2_600', + LightTheme.colors.secondary + ), + onSecondary: pick( + 'system_on_secondary_light', + 'system_accent2_0', + LightTheme.colors.onSecondary + ), + secondaryContainer: pick( + 'system_secondary_container_light', + 'system_accent2_100', + LightTheme.colors.secondaryContainer + ), + onSecondaryContainer: pick( + 'system_on_secondary_container_light', + 'system_accent2_900', + LightTheme.colors.onSecondaryContainer + ), + tertiary: pick( + 'system_tertiary_light', + 'system_accent3_600', + LightTheme.colors.tertiary + ), + onTertiary: pick( + 'system_on_tertiary_light', + 'system_accent3_0', + LightTheme.colors.onTertiary + ), + tertiaryContainer: pick( + 'system_tertiary_container_light', + 'system_accent3_100', + LightTheme.colors.tertiaryContainer + ), + onTertiaryContainer: pick( + 'system_on_tertiary_container_light', + 'system_accent3_900', + LightTheme.colors.onTertiaryContainer + ), + error: pick( + 'system_error_light', + LightTheme.colors.error, + LightTheme.colors.error + ), + onError: pick( + 'system_on_error_light', + LightTheme.colors.onError, + LightTheme.colors.onError + ), + errorContainer: pick( + 'system_error_container_light', + LightTheme.colors.errorContainer, + LightTheme.colors.errorContainer + ), + onErrorContainer: pick( + 'system_on_error_container_light', + LightTheme.colors.onErrorContainer, + LightTheme.colors.onErrorContainer + ), + onSurface: pick( + 'system_on_surface_light', + 'system_neutral1_900', + LightTheme.colors.onSurface + ), + onBackground: pick( + 'system_on_background_light', + 'system_neutral1_900', + LightTheme.colors.onBackground + ), + onSurfaceVariant: pick( + 'system_on_surface_variant_light', + 'system_neutral2_700', + LightTheme.colors.onSurfaceVariant + ), + outline: pick( + 'system_outline_light', + 'system_neutral2_500', + LightTheme.colors.outline + ), + outlineVariant: pick( + 'system_outline_variant_light', + 'system_neutral2_200', + LightTheme.colors.outlineVariant + ), + inverseSurface: pick( + 'system_surface_dark', + 'system_neutral1_800', + LightTheme.colors.inverseSurface + ), + inverseOnSurface: pick( + 'system_on_surface_dark', + 'system_neutral1_50', + LightTheme.colors.inverseOnSurface + ), + surfaceContainerLowest: pick( + 'system_surface_container_lowest_light', + 'system_neutral2_0', + LightTheme.colors.surfaceContainerLowest + ), + surfaceContainerLow: pick( + 'system_surface_container_low_light', + LightTheme.colors.surfaceContainerLow, + LightTheme.colors.surfaceContainerLow + ), + surfaceContainerHighest: pick( + 'system_surface_container_highest_light', + 'system_neutral2_100', + LightTheme.colors.surfaceContainerHighest + ), + surface: pick( + 'system_surface_light', + LightTheme.colors.surface, + LightTheme.colors.surface + ), + surfaceDim: pick( + 'system_surface_dim_light', + LightTheme.colors.surfaceDim, + LightTheme.colors.surfaceDim + ), + surfaceBright: pick( + 'system_surface_bright_light', + LightTheme.colors.surfaceBright, + LightTheme.colors.surfaceBright + ), + surfaceContainer: pick( + 'system_surface_container_light', + LightTheme.colors.surfaceContainer, + LightTheme.colors.surfaceContainer + ), + surfaceContainerHigh: pick( + 'system_surface_container_high_light', + LightTheme.colors.surfaceContainerHigh, + LightTheme.colors.surfaceContainerHigh + ), + background: pick( + 'system_background_light', + LightTheme.colors.background, + LightTheme.colors.background + ), + surfaceVariant: pick( + 'system_surface_variant_light', + LightTheme.colors.surfaceVariant, + LightTheme.colors.surfaceVariant + ), + primaryFixed: pick( + 'system_primary_fixed', + 'system_accent1_100', + LightTheme.colors.primaryFixed + ), + primaryFixedDim: pick( + 'system_primary_fixed_dim', + 'system_accent1_200', + LightTheme.colors.primaryFixedDim + ), + onPrimaryFixed: pick( + 'system_on_primary_fixed', + 'system_accent1_900', + LightTheme.colors.onPrimaryFixed + ), + onPrimaryFixedVariant: pick( + 'system_on_primary_fixed_variant', + 'system_accent1_700', + LightTheme.colors.onPrimaryFixedVariant + ), + secondaryFixed: pick( + 'system_secondary_fixed', + 'system_accent2_100', + LightTheme.colors.secondaryFixed + ), + secondaryFixedDim: pick( + 'system_secondary_fixed_dim', + 'system_accent2_200', + LightTheme.colors.secondaryFixedDim + ), + onSecondaryFixed: pick( + 'system_on_secondary_fixed', + 'system_accent2_900', + LightTheme.colors.onSecondaryFixed + ), + onSecondaryFixedVariant: pick( + 'system_on_secondary_fixed_variant', + 'system_accent2_700', + LightTheme.colors.onSecondaryFixedVariant + ), + tertiaryFixed: pick( + 'system_tertiary_fixed', + 'system_accent3_100', + LightTheme.colors.tertiaryFixed + ), + tertiaryFixedDim: pick( + 'system_tertiary_fixed_dim', + 'system_accent3_200', + LightTheme.colors.tertiaryFixedDim + ), + onTertiaryFixed: pick( + 'system_on_tertiary_fixed', + 'system_accent3_900', + LightTheme.colors.onTertiaryFixed + ), + onTertiaryFixedVariant: pick( + 'system_on_tertiary_fixed_variant', + 'system_accent3_700', + LightTheme.colors.onTertiaryFixedVariant + ), +}; + +const darkColors = { + primary: pick( + 'system_primary_dark', + 'system_accent1_200', + DarkTheme.colors.primary + ), + onPrimary: pick( + 'system_on_primary_dark', + 'system_accent1_800', + DarkTheme.colors.onPrimary + ), + primaryContainer: pick( + 'system_primary_container_dark', + 'system_accent1_700', + DarkTheme.colors.primaryContainer + ), + onPrimaryContainer: pick( + 'system_on_primary_container_dark', + 'system_accent1_100', + DarkTheme.colors.onPrimaryContainer + ), + inversePrimary: pick( + 'system_primary_light', + 'system_accent1_600', + DarkTheme.colors.inversePrimary + ), + secondary: pick( + 'system_secondary_dark', + 'system_accent2_200', + DarkTheme.colors.secondary + ), + onSecondary: pick( + 'system_on_secondary_dark', + 'system_accent2_800', + DarkTheme.colors.onSecondary + ), + secondaryContainer: pick( + 'system_secondary_container_dark', + 'system_accent2_700', + DarkTheme.colors.secondaryContainer + ), + onSecondaryContainer: pick( + 'system_on_secondary_container_dark', + 'system_accent2_100', + DarkTheme.colors.onSecondaryContainer + ), + tertiary: pick( + 'system_tertiary_dark', + 'system_accent3_200', + DarkTheme.colors.tertiary + ), + onTertiary: pick( + 'system_on_tertiary_dark', + 'system_accent3_800', + DarkTheme.colors.onTertiary + ), + tertiaryContainer: pick( + 'system_tertiary_container_dark', + 'system_accent3_700', + DarkTheme.colors.tertiaryContainer + ), + onTertiaryContainer: pick( + 'system_on_tertiary_container_dark', + 'system_accent3_100', + DarkTheme.colors.onTertiaryContainer + ), + error: pick( + 'system_error_dark', + DarkTheme.colors.error, + DarkTheme.colors.error + ), + onError: pick( + 'system_on_error_dark', + DarkTheme.colors.onError, + DarkTheme.colors.onError + ), + errorContainer: pick( + 'system_error_container_dark', + DarkTheme.colors.errorContainer, + DarkTheme.colors.errorContainer + ), + onErrorContainer: pick( + 'system_on_error_container_dark', + DarkTheme.colors.onErrorContainer, + DarkTheme.colors.onErrorContainer + ), + onSurface: pick( + 'system_on_surface_dark', + 'system_neutral1_100', + DarkTheme.colors.onSurface + ), + onBackground: pick( + 'system_on_background_dark', + 'system_neutral1_100', + DarkTheme.colors.onBackground + ), + onSurfaceVariant: pick( + 'system_on_surface_variant_dark', + 'system_neutral2_200', + DarkTheme.colors.onSurfaceVariant + ), + outline: pick( + 'system_outline_dark', + 'system_neutral2_400', + DarkTheme.colors.outline + ), + outlineVariant: pick( + 'system_outline_variant_dark', + 'system_neutral2_700', + DarkTheme.colors.outlineVariant + ), + inverseSurface: pick( + 'system_surface_light', + 'system_neutral1_100', + DarkTheme.colors.inverseSurface + ), + inverseOnSurface: pick( + 'system_on_surface_light', + 'system_neutral1_800', + DarkTheme.colors.inverseOnSurface + ), + surfaceContainerLowest: pick( + 'system_surface_container_lowest_dark', + DarkTheme.colors.surfaceContainerLowest, + DarkTheme.colors.surfaceContainerLowest + ), + surfaceContainerLow: pick( + 'system_surface_container_low_dark', + 'system_neutral2_900', + DarkTheme.colors.surfaceContainerLow + ), + surfaceContainerHighest: pick( + 'system_surface_container_highest_dark', + DarkTheme.colors.surfaceContainerHighest, + DarkTheme.colors.surfaceContainerHighest + ), + surface: pick( + 'system_surface_dark', + DarkTheme.colors.surface, + DarkTheme.colors.surface + ), + surfaceDim: pick( + 'system_surface_dim_dark', + DarkTheme.colors.surfaceDim, + DarkTheme.colors.surfaceDim + ), + surfaceBright: pick( + 'system_surface_bright_dark', + DarkTheme.colors.surfaceBright, + DarkTheme.colors.surfaceBright + ), + surfaceContainer: pick( + 'system_surface_container_dark', + DarkTheme.colors.surfaceContainer, + DarkTheme.colors.surfaceContainer + ), + surfaceContainerHigh: pick( + 'system_surface_container_high_dark', + DarkTheme.colors.surfaceContainerHigh, + DarkTheme.colors.surfaceContainerHigh + ), + background: pick( + 'system_background_dark', + DarkTheme.colors.background, + DarkTheme.colors.background + ), + surfaceVariant: pick( + 'system_surface_variant_dark', + DarkTheme.colors.surfaceVariant, + DarkTheme.colors.surfaceVariant + ), + primaryFixed: pick( + 'system_primary_fixed', + 'system_accent1_100', + DarkTheme.colors.primaryFixed + ), + primaryFixedDim: pick( + 'system_primary_fixed_dim', + 'system_accent1_200', + DarkTheme.colors.primaryFixedDim + ), + onPrimaryFixed: pick( + 'system_on_primary_fixed', + 'system_accent1_900', + DarkTheme.colors.onPrimaryFixed + ), + onPrimaryFixedVariant: pick( + 'system_on_primary_fixed_variant', + 'system_accent1_700', + DarkTheme.colors.onPrimaryFixedVariant + ), + secondaryFixed: pick( + 'system_secondary_fixed', + 'system_accent2_100', + DarkTheme.colors.secondaryFixed + ), + secondaryFixedDim: pick( + 'system_secondary_fixed_dim', + 'system_accent2_200', + DarkTheme.colors.secondaryFixedDim + ), + onSecondaryFixed: pick( + 'system_on_secondary_fixed', + 'system_accent2_900', + DarkTheme.colors.onSecondaryFixed + ), + onSecondaryFixedVariant: pick( + 'system_on_secondary_fixed_variant', + 'system_accent2_700', + DarkTheme.colors.onSecondaryFixedVariant + ), + tertiaryFixed: pick( + 'system_tertiary_fixed', + 'system_accent3_100', + DarkTheme.colors.tertiaryFixed + ), + tertiaryFixedDim: pick( + 'system_tertiary_fixed_dim', + 'system_accent3_200', + DarkTheme.colors.tertiaryFixedDim + ), + onTertiaryFixed: pick( + 'system_on_tertiary_fixed', + 'system_accent3_900', + DarkTheme.colors.onTertiaryFixed + ), + onTertiaryFixedVariant: pick( + 'system_on_tertiary_fixed_variant', + 'system_accent3_700', + DarkTheme.colors.onTertiaryFixedVariant + ), +}; + +export const DynamicLightTheme: Theme = { + ...LightTheme, + colors: { ...LightTheme.colors, ...lightColors }, +}; + +export const DynamicDarkTheme: Theme = { + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkColors }, +}; diff --git a/src/styles/themes/DynamicTheme.tsx b/src/styles/themes/DynamicTheme.tsx new file mode 100644 index 0000000000..78e3cc5c8d --- /dev/null +++ b/src/styles/themes/DynamicTheme.tsx @@ -0,0 +1,2 @@ +export { DarkTheme as MD3DynamicDarkTheme } from './DarkTheme'; +export { LightTheme as MD3DynamicLightTheme } from './LightTheme'; diff --git a/src/styles/themes/LightTheme.tsx b/src/styles/themes/LightTheme.tsx new file mode 100644 index 0000000000..96f3f84120 --- /dev/null +++ b/src/styles/themes/LightTheme.tsx @@ -0,0 +1,78 @@ +import color from 'color'; + +import { tokens } from './tokens'; +import type { Theme } from '../../types'; +import configureFonts from '../fonts'; + +const { palette, stateOpacity } = tokens.md.ref; + +export const LightTheme: Theme = { + dark: false, + roundness: 4, + colors: { + primary: palette.primary40, + primaryContainer: palette.primary90, + secondary: palette.secondary40, + secondaryContainer: palette.secondary90, + tertiary: palette.tertiary40, + tertiaryContainer: palette.tertiary90, + surface: palette.neutral98, + surfaceDim: palette.neutral87, + surfaceBright: palette.neutral98, + surfaceContainerLowest: palette.neutral100, + surfaceContainerLow: palette.neutral96, + surfaceContainer: palette.neutral94, + surfaceContainerHigh: palette.neutral92, + surfaceContainerHighest: palette.neutral90, + surfaceVariant: palette.neutralVariant90, + background: palette.neutral98, + error: palette.error40, + errorContainer: palette.error90, + onPrimary: palette.primary100, + onPrimaryContainer: palette.primary30, + onSecondary: palette.secondary100, + onSecondaryContainer: palette.secondary30, + onTertiary: palette.tertiary100, + onTertiaryContainer: palette.tertiary30, + onSurface: palette.neutral10, + onSurfaceVariant: palette.neutralVariant30, + onError: palette.error100, + onErrorContainer: palette.error30, + onBackground: palette.neutral10, + outline: palette.neutralVariant50, + outlineVariant: palette.neutralVariant80, + inverseSurface: palette.neutral20, + inverseOnSurface: palette.neutral95, + inversePrimary: palette.primary80, + primaryFixed: palette.primary90, + primaryFixedDim: palette.primary80, + onPrimaryFixed: palette.primary10, + onPrimaryFixedVariant: palette.primary30, + secondaryFixed: palette.secondary90, + secondaryFixedDim: palette.secondary80, + onSecondaryFixed: palette.secondary10, + onSecondaryFixedVariant: palette.secondary30, + tertiaryFixed: palette.tertiary90, + tertiaryFixedDim: palette.tertiary80, + onTertiaryFixed: palette.tertiary10, + onTertiaryFixedVariant: palette.tertiary30, + shadow: palette.neutral0, + scrim: palette.neutral0, + stateLayerPressed: color(palette.neutral10) + .alpha(stateOpacity.pressed) + .rgb() + .string(), + elevation: { + level0: 'transparent', + level1: palette.neutral100, + level2: palette.neutral96, + level3: palette.neutral94, + level4: palette.neutral92, + level5: palette.neutral90, + }, + }, + fonts: configureFonts(), + animation: { + scale: 1.0, + }, +}; diff --git a/src/styles/themes/v2/colors.tsx b/src/styles/themes/baseColors.ts similarity index 100% rename from src/styles/themes/v2/colors.tsx rename to src/styles/themes/baseColors.ts diff --git a/src/styles/themes/index.ts b/src/styles/themes/index.ts index 3db1a460ad..4063fcba08 100644 --- a/src/styles/themes/index.ts +++ b/src/styles/themes/index.ts @@ -1,4 +1,3 @@ -export { MD3LightTheme } from './v3/LightTheme'; -export { MD3DarkTheme } from './v3/DarkTheme'; -export { MD2LightTheme } from './v2/LightTheme'; -export { MD2DarkTheme } from './v2/DarkTheme'; +export { LightTheme } from './LightTheme'; +export { DarkTheme } from './DarkTheme'; +export { DynamicLightTheme, DynamicDarkTheme } from './DynamicTheme'; diff --git a/src/styles/themes/v3/tokens.tsx b/src/styles/themes/tokens.tsx similarity index 79% rename from src/styles/themes/v3/tokens.tsx rename to src/styles/themes/tokens.tsx index d008944d86..67883bfa6a 100644 --- a/src/styles/themes/v3/tokens.tsx +++ b/src/styles/themes/tokens.tsx @@ -1,11 +1,12 @@ import { Platform } from 'react-native'; -import type { Font } from '../../../types'; +import type { Font } from '../../types'; const ref = { palette: { primary100: 'rgba(255, 255, 255, 1)', primary99: 'rgba(255, 251, 254, 1)', + primary98: 'rgba(254, 247, 255, 1)', primary95: 'rgba(246, 237, 255, 1)', primary90: 'rgba(234, 221, 255, 1)', primary80: 'rgba(208, 188, 255, 1)', @@ -19,6 +20,7 @@ const ref = { primary0: 'rgba(0, 0, 0, 1)', secondary100: 'rgba(255, 255, 255, 1)', secondary99: 'rgba(255, 251, 254, 1)', + secondary98: 'rgba(254, 247, 255, 1)', secondary95: 'rgba(246, 237, 255, 1)', secondary90: 'rgba(232, 222, 248, 1)', secondary80: 'rgba(204, 194, 220, 1)', @@ -32,6 +34,7 @@ const ref = { secondary0: 'rgba(0, 0, 0, 1)', tertiary100: 'rgba(255, 255, 255, 1)', tertiary99: 'rgba(255, 251, 250, 1)', + tertiary98: 'rgba(255, 248, 248, 1)', tertiary95: 'rgba(255, 236, 241, 1)', tertiary90: 'rgba(255, 216, 228, 1)', tertiary80: 'rgba(239, 184, 200, 1)', @@ -44,20 +47,32 @@ const ref = { tertiary10: 'rgba(49, 17, 29, 1)', tertiary0: 'rgba(0, 0, 0, 1)', neutral100: 'rgba(255, 255, 255, 1)', - neutral99: 'rgba(255, 251, 254, 1)', - neutral95: 'rgba(244, 239, 244, 1)', - neutral90: 'rgba(230, 225, 229, 1)', - neutral80: 'rgba(201, 197, 202, 1)', - neutral70: 'rgba(174, 170, 174, 1)', - neutral60: 'rgba(147, 144, 148, 1)', - neutral50: 'rgba(120, 117, 121, 1)', - neutral40: 'rgba(96, 93, 98, 1)', - neutral30: 'rgba(72, 70, 73, 1)', - neutral20: 'rgba(49, 48, 51, 1)', - neutral10: 'rgba(28, 27, 31, 1)', + neutral99: 'rgba(255, 251, 255, 1)', + neutral98: 'rgba(254, 247, 255, 1)', + neutral96: 'rgba(247, 242, 250, 1)', + neutral95: 'rgba(245, 239, 247, 1)', + neutral94: 'rgba(243, 237, 247, 1)', + neutral92: 'rgba(236, 230, 240, 1)', + neutral90: 'rgba(230, 224, 233, 1)', + neutral87: 'rgba(222, 216, 225, 1)', + neutral80: 'rgba(202, 197, 205, 1)', + neutral70: 'rgba(174, 169, 177, 1)', + neutral60: 'rgba(147, 143, 150, 1)', + neutral50: 'rgba(121, 118, 125, 1)', + neutral40: 'rgba(96, 93, 100, 1)', + neutral30: 'rgba(72, 70, 76, 1)', + neutral24: 'rgba(59, 56, 62, 1)', + neutral22: 'rgba(54, 52, 59, 1)', + neutral20: 'rgba(50, 47, 53, 1)', + neutral17: 'rgba(43, 41, 48, 1)', + neutral12: 'rgba(33, 31, 38, 1)', + neutral10: 'rgba(29, 27, 32, 1)', + neutral6: 'rgba(20, 18, 24, 1)', + neutral4: 'rgba(15, 13, 19, 1)', neutral0: 'rgba(0, 0, 0, 1)', neutralVariant100: 'rgba(255, 255, 255, 1)', neutralVariant99: 'rgba(255, 251, 254, 1)', + neutralVariant98: 'rgba(253, 247, 255, 1)', neutralVariant95: 'rgba(245, 238, 250, 1)', neutralVariant90: 'rgba(231, 224, 236, 1)', neutralVariant80: 'rgba(202, 196, 208, 1)', @@ -71,6 +86,7 @@ const ref = { neutralVariant0: 'rgba(0, 0, 0, 1)', error100: 'rgba(255, 255, 255, 1)', error99: 'rgba(255, 251, 249, 1)', + error98: 'rgba(255, 248, 247, 1)', error95: 'rgba(252, 238, 238, 1)', error90: 'rgba(249, 222, 220, 1)', error80: 'rgba(242, 184, 181, 1)', @@ -100,11 +116,16 @@ const ref = { weightMedium: '500' as Font['fontWeight'], }, - opacity: { - level1: 0.08, - level2: 0.12, - level3: 0.16, - level4: 0.38, + /** State layers opacity + * @see https://m3.material.io/foundations/interaction/states/state-layers + */ + stateOpacity: { + dragged: 0.16, + pressed: 0.1, + focus: 0.1, + hover: 0.08, + disabled: 0.38, + enabled: 1.0, }, }; @@ -227,4 +248,4 @@ export const tokens = { }, }; -export const MD3Colors = ref.palette; +export const Colors = ref.palette; diff --git a/src/styles/themes/v2/DarkTheme.tsx b/src/styles/themes/v2/DarkTheme.tsx deleted file mode 100644 index 9eaa576dcb..0000000000 --- a/src/styles/themes/v2/DarkTheme.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import color from 'color'; - -import { black, pinkA100, white } from './colors'; -import { MD2LightTheme } from './LightTheme'; -import type { Fonts, MD2Theme } from '../../../types'; -import configureFonts from '../../fonts'; - -export const MD2DarkTheme: MD2Theme = { - ...MD2LightTheme, - dark: true, - mode: 'adaptive', - version: 2, - isV3: false, - colors: { - ...MD2LightTheme.colors, - primary: '#BB86FC', - accent: '#03dac6', - background: '#121212', - surface: '#121212', - error: '#CF6679', - onSurface: '#FFFFFF', - text: white, - disabled: color(white).alpha(0.38).rgb().string(), - placeholder: color(white).alpha(0.54).rgb().string(), - backdrop: color(black).alpha(0.5).rgb().string(), - notification: pinkA100, - tooltip: 'rgba(230, 225, 229, 1)', - }, - fonts: configureFonts({ isV3: false }) as Fonts, -}; diff --git a/src/styles/themes/v2/LightTheme.tsx b/src/styles/themes/v2/LightTheme.tsx deleted file mode 100644 index 8566bdcc40..0000000000 --- a/src/styles/themes/v2/LightTheme.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import color from 'color'; - -import { black, pinkA400, white } from './colors'; -import type { Fonts, MD2Theme } from '../../../types'; -import configureFonts from '../../fonts'; - -export const MD2LightTheme: MD2Theme = { - dark: false, - roundness: 4, - version: 2, - isV3: false, - colors: { - primary: '#6200ee', - accent: '#03dac4', - background: '#f6f6f6', - surface: white, - error: '#B00020', - text: black, - onSurface: '#000000', - disabled: color(black).alpha(0.26).rgb().string(), - placeholder: color(black).alpha(0.54).rgb().string(), - backdrop: color(black).alpha(0.5).rgb().string(), - notification: pinkA400, - tooltip: 'rgba(28, 27, 31, 1)', - }, - fonts: configureFonts({ isV3: false }) as Fonts, - animation: { - scale: 1.0, - }, -}; diff --git a/src/styles/themes/v3/DarkTheme.tsx b/src/styles/themes/v3/DarkTheme.tsx deleted file mode 100644 index 9823e677bd..0000000000 --- a/src/styles/themes/v3/DarkTheme.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import color from 'color'; - -import { MD3LightTheme } from './LightTheme'; -import { MD3Colors, tokens } from './tokens'; -import type { MD3Theme } from '../../../types'; - -const { palette, opacity } = tokens.md.ref; - -export const MD3DarkTheme: MD3Theme = { - ...MD3LightTheme, - dark: true, - mode: 'adaptive', - version: 3, - isV3: true, - colors: { - primary: palette.primary80, - primaryContainer: palette.primary30, - secondary: palette.secondary80, - secondaryContainer: palette.secondary30, - tertiary: palette.tertiary80, - tertiaryContainer: palette.tertiary30, - surface: palette.neutral10, - surfaceVariant: palette.neutralVariant30, - surfaceDisabled: color(palette.neutral90) - .alpha(opacity.level2) - .rgb() - .string(), - background: palette.neutral10, - error: palette.error80, - errorContainer: palette.error30, - onPrimary: palette.primary20, - onPrimaryContainer: palette.primary90, - onSecondary: palette.secondary20, - onSecondaryContainer: palette.secondary90, - onTertiary: palette.tertiary20, - onTertiaryContainer: palette.tertiary90, - onSurface: palette.neutral90, - onSurfaceVariant: palette.neutralVariant80, - onSurfaceDisabled: color(palette.neutral90) - .alpha(opacity.level4) - .rgb() - .string(), - onError: palette.error20, - onErrorContainer: palette.error80, - onBackground: palette.neutral90, - outline: palette.neutralVariant60, - outlineVariant: palette.neutralVariant30, - inverseSurface: palette.neutral90, - inverseOnSurface: palette.neutral20, - inversePrimary: palette.primary40, - shadow: palette.neutral0, - scrim: palette.neutral0, - backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(), - elevation: { - level0: 'transparent', - // Note: Color values with transparency cause RN to transfer shadows to children nodes - // instead of View component in Surface. Providing solid background fixes the issue. - // Opaque color values generated with `palette.primary80` used as background - level1: 'rgb(37, 35, 42)', // palette.primary80, alpha 0.05 - level2: 'rgb(44, 40, 49)', // palette.primary80, alpha 0.08 - level3: 'rgb(49, 44, 56)', // palette.primary80, alpha 0.11 - level4: 'rgb(51, 46, 58)', // palette.primary80, alpha 0.12 - level5: 'rgb(52, 49, 63)', // palette.primary80, alpha 0.14 - }, - }, -}; diff --git a/src/styles/themes/v3/LightTheme.tsx b/src/styles/themes/v3/LightTheme.tsx deleted file mode 100644 index 99e0d11ab4..0000000000 --- a/src/styles/themes/v3/LightTheme.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import color from 'color'; - -import { MD3Colors, tokens } from './tokens'; -import type { MD3Theme } from '../../../types'; -import configureFonts from '../../fonts'; - -const { palette, opacity } = tokens.md.ref; - -export const MD3LightTheme: MD3Theme = { - dark: false, - roundness: 4, - version: 3, - isV3: true, - colors: { - primary: palette.primary40, - primaryContainer: palette.primary90, - secondary: palette.secondary40, - secondaryContainer: palette.secondary90, - tertiary: palette.tertiary40, - tertiaryContainer: palette.tertiary90, - surface: palette.neutral99, - surfaceVariant: palette.neutralVariant90, - surfaceDisabled: color(palette.neutral10) - .alpha(opacity.level2) - .rgb() - .string(), - background: palette.neutral99, - error: palette.error40, - errorContainer: palette.error90, - onPrimary: palette.primary100, - onPrimaryContainer: palette.primary10, - onSecondary: palette.secondary100, - onSecondaryContainer: palette.secondary10, - onTertiary: palette.tertiary100, - onTertiaryContainer: palette.tertiary10, - onSurface: palette.neutral10, - onSurfaceVariant: palette.neutralVariant30, - onSurfaceDisabled: color(palette.neutral10) - .alpha(opacity.level4) - .rgb() - .string(), - onError: palette.error100, - onErrorContainer: palette.error10, - onBackground: palette.neutral10, - outline: palette.neutralVariant50, - outlineVariant: palette.neutralVariant80, - inverseSurface: palette.neutral20, - inverseOnSurface: palette.neutral95, - inversePrimary: palette.primary80, - shadow: palette.neutral0, - scrim: palette.neutral0, - backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(), - elevation: { - level0: 'transparent', - // Note: Color values with transparency cause RN to transfer shadows to children nodes - // instead of View component in Surface. Providing solid background fixes the issue. - // Opaque color values generated with `palette.primary99` used as background - level1: 'rgb(247, 243, 249)', // palette.primary40, alpha 0.05 - level2: 'rgb(243, 237, 246)', // palette.primary40, alpha 0.08 - level3: 'rgb(238, 232, 244)', // palette.primary40, alpha 0.11 - level4: 'rgb(236, 230, 243)', // palette.primary40, alpha 0.12 - level5: 'rgb(233, 227, 241)', // palette.primary40, alpha 0.14 - }, - }, - fonts: configureFonts(), - animation: { - scale: 1.0, - }, -}; diff --git a/src/types.tsx b/src/types.tsx index 175131cab3..b2191d12ca 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -26,24 +26,7 @@ export type Fonts = { thin: Font; }; -type Mode = 'adaptive' | 'exact'; - -export type MD2Colors = { - primary: string; - background: string; - surface: string; - accent: string; - error: string; - text: string; - onSurface: string; - disabled: string; - placeholder: string; - backdrop: string; - notification: string; - tooltip: string; -}; - -export type MD3Colors = { +export type Colors = { primary: string; primaryContainer: string; secondary: string; @@ -51,8 +34,14 @@ export type MD3Colors = { tertiary: string; tertiaryContainer: string; surface: string; + surfaceDim: string; + surfaceBright: string; + surfaceContainerLowest: string; + surfaceContainerLow: string; + surfaceContainer: string; + surfaceContainerHigh: string; + surfaceContainerHighest: string; surfaceVariant: string; - surfaceDisabled: string; background: string; error: string; errorContainer: string; @@ -64,7 +53,6 @@ export type MD3Colors = { onTertiaryContainer: string; onSurface: string; onSurfaceVariant: string; - onSurfaceDisabled: string; onError: string; onErrorContainer: string; onBackground: string; @@ -73,51 +61,32 @@ export type MD3Colors = { inverseSurface: string; inverseOnSurface: string; inversePrimary: string; + primaryFixed: string; + primaryFixedDim: string; + onPrimaryFixed: string; + onPrimaryFixedVariant: string; + secondaryFixed: string; + secondaryFixedDim: string; + onSecondaryFixed: string; + onSecondaryFixedVariant: string; + tertiaryFixed: string; + tertiaryFixedDim: string; + onTertiaryFixed: string; + onTertiaryFixedVariant: string; shadow: string; scrim: string; - backdrop: string; - elevation: MD3ElevationColors; -}; - -export type MD3AndroidColors = { - primary: number; - primaryContainer: number; - secondary: number; - secondaryContainer: number; - tertiary: number; - tertiaryContainer: number; - surface: number; - surfaceVariant: number; - background: number; - error: number; - errorContainer: number; - onPrimary: number; - onPrimaryContainer: number; - onSecondary: number; - onSecondaryContainer: number; - onTertiary: number; - onTertiaryContainer: number; - onSurface: number; - onSurfaceVariant: number; - onError: number; - onErrorContainer: number; - onBackground: number; - outline: number; - outlineVariant: number; - inverseSurface: number; - inverseOnSurface: number; - inversePrimary: number; - shadow: number; - scrim: number; + /** Pre-computed state layer color at press opacity (0.10). + * Used for ripple effects. Avoids runtime alpha manipulation + * which is incompatible with PlatformColor on Android. + * @see https://m3.material.io/foundations/interaction/states/state-layers */ + stateLayerPressed: string; + elevation: ElevationColors; }; -export type MD3Palette = {}; - export type ThemeProp = $DeepPartial; export type ThemeBase = { dark: boolean; - mode?: Mode; roundness: number; animation: { scale: number; @@ -125,24 +94,14 @@ export type ThemeBase = { }; }; -export type MD3Theme = ThemeBase & { - version: 3; - isV3: true; - colors: MD3Colors; - fonts: MD3Typescale; -}; - -export type MD2Theme = ThemeBase & { - version: 2; - isV3: false; - colors: MD2Colors; - fonts: Fonts; +export type Theme = ThemeBase & { + colors: Colors; + fonts: Typescale; }; -export type InternalTheme = MD2Theme | MD3Theme; +export type InternalTheme = Theme; -// MD3 types -export enum MD3TypescaleKey { +export enum TypescaleKey { displayLarge = 'displayLarge', displayMedium = 'displayMedium', displaySmall = 'displaySmall', @@ -164,7 +123,7 @@ export enum MD3TypescaleKey { bodySmall = 'bodySmall', } -export type MD3Type = { +export type TypeConfig = { fontFamily: string; letterSpacing: number; fontWeight: Font['fontWeight']; @@ -173,14 +132,14 @@ export type MD3Type = { fontStyle?: Font['fontStyle']; }; -export type MD3Typescale = +export type Typescale = | { - [key in MD3TypescaleKey]: MD3Type; + [key in TypescaleKey]: TypeConfig; } & { - ['default']: Omit; + ['default']: Omit; }; -export type MD3Elevation = 0 | 1 | 2 | 3 | 4 | 5; +export type Elevation = 0 | 1 | 2 | 3 | 4 | 5; export enum ElevationLevels { 'level0', @@ -191,7 +150,7 @@ export enum ElevationLevels { 'level5', } -export type MD3ElevationColors = { +export type ElevationColors = { [key in keyof typeof ElevationLevels]: string; }; diff --git a/yarn.lock b/yarn.lock index 3920e64583..9696c756fb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3887,13 +3887,6 @@ __metadata: languageName: node linkType: hard -"@material/material-color-utilities@npm:^0.2.7": - version: 0.2.7 - resolution: "@material/material-color-utilities@npm:0.2.7" - checksum: 10c0/7734f8d7cffe6a92d47fcca82b4846e39ffd79be9c057f3299466696dcdee5379b8a8a3aa6a9692d40bd6900905f689105d9a8ce47882ab22348df10621f70cd - languageName: node - linkType: hard - "@mdx-js/mdx@npm:^0.20.3": version: 0.20.3 resolution: "@mdx-js/mdx@npm:0.20.3" @@ -4317,20 +4310,6 @@ __metadata: languageName: node linkType: hard -"@pchmn/expo-material3-theme@npm:^1.3.2": - version: 1.3.2 - resolution: "@pchmn/expo-material3-theme@npm:1.3.2" - dependencies: - "@material/material-color-utilities": "npm:^0.2.7" - color: "npm:^4.2.3" - peerDependencies: - expo: "*" - react: "*" - react-native: "*" - checksum: 10c0/89aa0a65b04f4a7f709c35bbdc2f7830dff73e0335877d36a091c55fb174ce82e4b2c67690657978b03fc563ab4c20565ded0ed7faec94d0a384a9c5085dfe19 - languageName: node - linkType: hard - "@polka/url@npm:^1.0.0-next.24": version: 1.0.0-next.29 resolution: "@polka/url@npm:1.0.0-next.29" @@ -20063,7 +20042,6 @@ __metadata: "@babel/core": "npm:^7.25.2" "@expo/vector-icons": "npm:^15.0.2" "@expo/webpack-config": "npm:~19.0.1" - "@pchmn/expo-material3-theme": "npm:^1.3.2" "@react-native-async-storage/async-storage": "npm:2.2.0" "@react-native-masked-view/masked-view": "npm:0.3.2" "@react-navigation/bottom-tabs": "npm:^7.3.10"