From 8b89fd5ba4ba2efa1623118e7399a0bd2280afd9 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 9 May 2025 11:47:54 +0200 Subject: [PATCH 01/11] refactor: remove MD2 theme related code --- .gitignore | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 6ece42c049..ff76d64fd2 100644 --- a/.gitignore +++ b/.gitignore @@ -71,4 +71,6 @@ lib/ !.yarn/plugins !.yarn/releases !.yarn/sdks -!.yarn/versions \ No newline at end of file +!.yarn/versions + +example/ios/* \ No newline at end of file From 3a27ad58cc2232c0c8609b887b9d63b2585c5502 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 9 May 2025 12:14:13 +0200 Subject: [PATCH 02/11] refactor: remove MD2 from example --- .../src/Examples/AnimatedFABExample/AnimatedFABExample.tsx | 5 ++--- example/src/Examples/BannerExample.tsx | 4 ++-- example/src/Examples/ChipExample.tsx | 3 ++- example/src/Examples/ProgressBarExample.tsx | 3 ++- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx index 38e95a0781..4712da7349 100644 --- a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx +++ b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx @@ -29,9 +29,8 @@ const AnimatedFABExample = () => { const isIOS = Platform.OS === 'ios'; - const [extended, setExtended] = React.useState(true); - const [visible, setVisible] = React.useState(true); - + const [extended, setExtended] = React.useState(true); + const [visible, setVisible] = React.useState(true); const [controls, setControls] = React.useState(initialControls); const { current: velocity } = React.useRef( diff --git a/example/src/Examples/BannerExample.tsx b/example/src/Examples/BannerExample.tsx index d420f6791c..6e26b984ea 100644 --- a/example/src/Examples/BannerExample.tsx +++ b/example/src/Examples/BannerExample.tsx @@ -17,10 +17,10 @@ const PHOTOS = Array.from({ length: 24 }).map( ); const BannerExample = () => { - const [visible, setVisible] = React.useState(true); - const [useCustomTheme, setUseCustomTheme] = React.useState(false); const theme = useTheme(); + const [visible, setVisible] = React.useState(true); + const [useCustomTheme, setUseCustomTheme] = React.useState(false); const [height, setHeight] = React.useState(0); const handleLayout = ({ nativeEvent }: LayoutChangeEvent) => { diff --git a/example/src/Examples/ChipExample.tsx b/example/src/Examples/ChipExample.tsx index 211ebfde49..5ea6373856 100644 --- a/example/src/Examples/ChipExample.tsx +++ b/example/src/Examples/ChipExample.tsx @@ -6,12 +6,13 @@ import { Chip, List, MD3Colors, Snackbar, Text } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; +const customColor = MD3Colors.error50; + const ChipExample = () => { const [snackbarProperties, setSnackbarProperties] = React.useState({ visible: false, text: '', }); - const customColor = MD3Colors.error50; return ( <> diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx index 6a910bc348..6ee263c36a 100644 --- a/example/src/Examples/ProgressBarExample.tsx +++ b/example/src/Examples/ProgressBarExample.tsx @@ -25,9 +25,10 @@ class ClassProgressBar extends React.Component { const AnimatedProgressBar = Animated.createAnimatedComponent(ClassProgressBar); const ProgressBarExample = () => { + const theme = useTheme(); + const [visible, setVisible] = React.useState(true); const [progress, setProgress] = React.useState(0.3); - const theme = useTheme(); const { current: progressBarValue } = React.useRef(new Animated.Value(0)); const runCustomAnimation = () => { From 9d264e3bdb59cbadb59a35084c5e442fa36bc410 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 9 May 2025 14:52:25 +0200 Subject: [PATCH 03/11] refactor: remove MD2 from all examples --- example/src/Examples/ProgressBarExample.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx index 6ee263c36a..76fc3b4a02 100644 --- a/example/src/Examples/ProgressBarExample.tsx +++ b/example/src/Examples/ProgressBarExample.tsx @@ -27,8 +27,8 @@ const AnimatedProgressBar = Animated.createAnimatedComponent(ClassProgressBar); const ProgressBarExample = () => { const theme = useTheme(); - const [visible, setVisible] = React.useState(true); - const [progress, setProgress] = React.useState(0.3); + const [visible, setVisible] = React.useState(true); + const [progress, setProgress] = React.useState(0.3); const { current: progressBarValue } = React.useRef(new Animated.Value(0)); const runCustomAnimation = () => { From 8632cc98a5e2a48ad28a41c61a6b2e4a8e690dd7 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 12 May 2025 10:10:14 +0200 Subject: [PATCH 04/11] refactor: isV3 from components --- src/components/ActivityIndicator.tsx | 12 +- src/components/Appbar/Appbar.tsx | 45 +---- src/components/Appbar/AppbarAction.tsx | 14 +- src/components/Appbar/AppbarContent.tsx | 44 +---- src/components/Appbar/AppbarHeader.tsx | 13 +- src/components/Appbar/utils.ts | 38 +--- src/components/Avatar/AvatarIcon.tsx | 6 +- src/components/Avatar/AvatarText.tsx | 6 +- src/components/Badge.tsx | 27 +-- src/components/Banner.tsx | 18 +- .../BottomNavigation/BottomNavigation.tsx | 8 +- .../BottomNavigation/BottomNavigationBar.tsx | 139 +++----------- src/components/BottomNavigation/utils.ts | 36 ++-- src/components/Button/Button.tsx | 49 ++--- src/components/Button/utils.tsx | 112 ++++-------- src/components/Card/Card.tsx | 27 +-- src/components/Card/CardActions.tsx | 17 +- src/components/Card/CardTitle.tsx | 16 +- src/components/Card/utils.tsx | 57 +----- src/components/Checkbox/CheckboxItem.tsx | 19 +- src/components/Checkbox/utils.ts | 42 +---- src/components/Chip/Chip.tsx | 84 +++------ src/components/Chip/helpers.tsx | 172 +++++------------- src/components/CrossFadeIcon.tsx | 6 +- src/components/DataTable/DataTableHeader.tsx | 20 +- .../DataTable/DataTablePagination.tsx | 10 +- src/components/DataTable/DataTableRow.tsx | 12 +- src/components/DataTable/DataTableTitle.tsx | 4 +- src/components/Dialog/Dialog.tsx | 32 +--- src/components/Dialog/DialogActions.tsx | 17 +- src/components/Dialog/DialogIcon.tsx | 5 - src/components/Dialog/DialogScrollArea.tsx | 19 +- src/components/Dialog/DialogTitle.tsx | 22 +-- src/components/Divider.tsx | 27 +-- src/components/Drawer/DrawerCollapsedItem.tsx | 25 +-- src/components/Drawer/DrawerItem.tsx | 41 +---- src/components/Drawer/DrawerSection.tsx | 27 +-- src/components/FAB/AnimatedFAB.tsx | 43 +---- src/components/FAB/FAB.tsx | 15 +- src/components/FAB/FABGroup.tsx | 33 ++-- src/components/FAB/utils.ts | 151 ++++----------- src/components/HelperText/utils.ts | 17 +- src/components/Icon.tsx | 5 +- src/components/IconButton/IconButton.tsx | 8 +- src/components/IconButton/utils.ts | 115 +++++------- src/components/List/ListAccordion.tsx | 36 +--- src/components/List/ListIcon.tsx | 12 +- src/components/List/ListImage.tsx | 24 +-- src/components/List/ListItem.tsx | 38 +--- src/components/List/ListSubheader.tsx | 10 +- src/components/List/utils.ts | 29 +-- src/components/Menu/Menu.tsx | 10 +- src/components/Menu/MenuItem.tsx | 41 ++--- src/components/Menu/utils.ts | 48 +---- src/components/Modal.tsx | 8 +- src/components/ProgressBar.tsx | 16 +- .../RadioButton/RadioButtonItem.tsx | 16 +- src/components/Searchbar.tsx | 64 +++---- .../SegmentedButtons/SegmentedButtonItem.tsx | 13 +- src/components/SegmentedButtons/utils.ts | 72 ++------ src/components/Snackbar.tsx | 36 ++-- src/components/Surface.tsx | 2 +- src/components/Switch/utils.ts | 11 +- src/components/TextInput/Addons/Outline.tsx | 6 +- src/components/TextInput/Addons/Underline.tsx | 15 +- .../Adornment/TextInputAdornment.tsx | 4 +- .../TextInput/Adornment/TextInputAffix.tsx | 2 +- .../TextInput/Adornment/TextInputIcon.tsx | 4 +- src/components/TextInput/Adornment/utils.ts | 19 +- src/components/TextInput/Label/InputLabel.tsx | 3 +- src/components/TextInput/TextInputFlat.tsx | 9 +- .../TextInput/TextInputOutlined.tsx | 12 +- src/components/TextInput/constants.tsx | 8 - src/components/TextInput/helpers.tsx | 153 +++------------- src/components/TextInput/types.tsx | 1 - src/components/ToggleButton/ToggleButton.tsx | 15 +- src/components/ToggleButton/utils.ts | 14 +- src/components/Tooltip/Tooltip.tsx | 10 +- src/components/TouchableRipple/utils.ts | 18 +- src/components/Typography/AnimatedText.tsx | 6 +- src/components/Typography/Text.tsx | 11 +- src/components/Typography/v2/Caption.tsx | 50 ----- src/components/Typography/v2/Headline.tsx | 53 ------ src/components/Typography/v2/Paragraph.tsx | 50 ----- src/components/Typography/v2/StyledText.tsx | 56 ------ src/components/Typography/v2/Subheading.tsx | 51 ------ src/components/Typography/v2/Text.tsx | 62 ------- src/components/Typography/v2/Title.tsx | 50 ----- src/components/Typography/v2/index.ts | 5 - src/core/PaperProvider.tsx | 14 +- src/index.tsx | 12 -- src/styles/themes/v2/colors.tsx | 5 + src/styles/themes/v3/DarkTheme.tsx | 2 - src/styles/themes/v3/LightTheme.tsx | 2 - src/types.tsx | 2 - 95 files changed, 677 insertions(+), 2188 deletions(-) delete mode 100644 src/components/Typography/v2/Caption.tsx delete mode 100644 src/components/Typography/v2/Headline.tsx delete mode 100644 src/components/Typography/v2/Paragraph.tsx delete mode 100644 src/components/Typography/v2/StyledText.tsx delete mode 100644 src/components/Typography/v2/Subheading.tsx delete mode 100644 src/components/Typography/v2/Text.tsx delete mode 100644 src/components/Typography/v2/Title.tsx delete mode 100644 src/components/Typography/v2/index.ts diff --git a/src/components/ActivityIndicator.tsx b/src/components/ActivityIndicator.tsx index 5ec96229a1..1857663071 100644 --- a/src/components/ActivityIndicator.tsx +++ b/src/components/ActivityIndicator.tsx @@ -63,7 +63,11 @@ const ActivityIndicator = ({ theme: themeOverrides, ...rest }: Props) => { - const theme = useInternalTheme(themeOverrides); + const { + animation: { scale }, + colors: { primary }, + } = useInternalTheme(themeOverrides); + const { current: timer } = React.useRef( new Animated.Value(0) ); @@ -75,10 +79,6 @@ const ActivityIndicator = ({ undefined ); - const { - animation: { scale }, - } = theme; - const startRotation = React.useCallback(() => { // Show indicator Animated.timing(fade, { @@ -130,7 +130,7 @@ const ActivityIndicator = ({ } }, [animating, fade, hidesWhenStopped, startRotation, scale, timer]); - const color = indicatorColor || theme.colors?.primary; + const color = indicatorColor || primary; const size = typeof indicatorSize === 'string' ? indicatorSize === 'small' diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx index d4a5875986..66faeebf7b 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, @@ -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.v3Spacing; const insets = { paddingBottom: safeAreaInsets?.bottom, @@ -247,26 +232,24 @@ const Appbar = ({ { backgroundColor }, styles.appbar, { - height: isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT, + height: modeAppbarHeight[mode], }, insets, restStyle, - !theme.isV3 && { elevation }, ]} elevation={elevation as MD3Elevation} {...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({ @@ -277,9 +260,8 @@ const Appbar = ({ ], isDark, theme, - isV3, renderExcept: ['Appbar.BackAction'], - shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent, + shouldCenterContent: isCenterAlignedMode || shouldCenterContent, })} )} @@ -296,14 +278,12 @@ const Appbar = ({ {renderAppbarContent({ children, isDark, - isV3, renderOnly: ['Appbar.BackAction'], mode, })} {renderAppbarContent({ children: filterAppbarActions(children, true), isDark, - isV3, renderOnly: ['Appbar.Action'], mode, })} @@ -312,7 +292,6 @@ const Appbar = ({ {renderAppbarContent({ children: filterAppbarActions(children), isDark, - isV3, renderExcept: [ 'Appbar', 'Appbar.BackAction', @@ -326,7 +305,6 @@ const Appbar = ({ {renderAppbarContent({ children, isDark, - isV3, renderOnly: ['Appbar.Content'], mode, })} @@ -343,9 +321,6 @@ const styles = StyleSheet.create({ alignItems: 'center', paddingHorizontal: 4, }, - spacing: { - width: 48, - }, v3Spacing: { width: 52, }, diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx index bc87e335ba..5b0424dd61 100644 --- a/src/components/Appbar/AppbarAction.tsx +++ b/src/components/Appbar/AppbarAction.tsx @@ -7,11 +7,9 @@ import type { 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'; @@ -97,15 +95,15 @@ const AppbarAction = forwardRef( }: Props, ref ) => { - const theme = useInternalTheme(themeOverrides); + const { + colors: { onSurface, onSurfaceVariant }, + } = useInternalTheme(themeOverrides); const actionIconColor = iconColor ? iconColor - : theme.isV3 - ? isLeading - ? theme.colors.onSurface - : theme.colors.onSurfaceVariant - : color(black).alpha(0.54).rgb().string(); + : isLeading + ? onSurface + : onSurfaceVariant; return ( & { */ const AppbarContent = ({ color: titleColor, - subtitle, - subtitleStyle, onPress, disabled, style, @@ -116,16 +111,12 @@ const AppbarContent = ({ testID = 'appbar-content', ...rest }: Props) => { - const theme = useInternalTheme(themeOverrides); - const { isV3, colors } = theme; - - const titleTextColor = titleColor - ? titleColor - : isV3 - ? colors.onSurface - : white; + const { + colors: { onSurface }, + fonts, + } = useInternalTheme(themeOverrides); - const subtitleColor = color(titleTextColor).alpha(0.7).rgb().string(); + const titleTextColor = titleColor ? titleColor : onSurface; const modeContainerStyles = { small: styles.v3DefaultContainer, @@ -138,7 +129,7 @@ const AppbarContent = ({ 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 +138,13 @@ const AppbarContent = ({ <> {typeof title === 'string' ? ( - {subtitle} - - ) : null} ); @@ -233,12 +211,6 @@ const styles = StyleSheet.create({ 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 60066a2ea7..17eedcf005 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/v2/colors'; import type { InternalTheme, ThemeProp } from '../../types'; export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned'; @@ -24,35 +23,26 @@ 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: { surface, elevation }, + } = 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; + return elevation.level2; } - return colors.surface; + return surface; }; export const getAppbarColor = ({ color, isDark, - isV3, }: BaseProps & { color: string }) => { if (typeof color !== 'undefined') { return color; @@ -62,11 +52,7 @@ export const getAppbarColor = ({ return white; } - if (isV3) { - return undefined; - } - - return black; + return undefined; }; export const getAppbarBorders = ( @@ -89,20 +75,17 @@ 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; export const modeAppbarHeight = { @@ -139,7 +122,6 @@ export const renderAppbarContent = ({ children, isDark, shouldCenterContent = false, - isV3, renderOnly, renderExcept, mode = 'small', @@ -178,16 +160,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.v3Spacing, shouldCenterContent && styles.centerAlignedContent, child.props.style, ]; diff --git a/src/components/Avatar/AvatarIcon.tsx b/src/components/Avatar/AvatarIcon.tsx index f1a0206f1f..ad7ce7c3b1 100644 --- a/src/components/Avatar/AvatarIcon.tsx +++ b/src/components/Avatar/AvatarIcon.tsx @@ -49,8 +49,10 @@ const Avatar = ({ theme: themeOverrides, ...rest }: Props) => { - const theme = useInternalTheme(themeOverrides); - const { backgroundColor = theme.colors?.primary, ...restStyle } = + const { + colors: { primary }, + } = useInternalTheme(themeOverrides); + const { backgroundColor = primary, ...restStyle } = StyleSheet.flatten(style) || {}; const textColor = rest.color ?? diff --git a/src/components/Avatar/AvatarText.tsx b/src/components/Avatar/AvatarText.tsx index f93dd894a4..7a6c51d3bf 100644 --- a/src/components/Avatar/AvatarText.tsx +++ b/src/components/Avatar/AvatarText.tsx @@ -70,8 +70,10 @@ const AvatarText = ({ maxFontSizeMultiplier, ...rest }: Props) => { - const theme = useInternalTheme(themeOverrides); - const { backgroundColor = theme.colors?.primary, ...restStyle } = + const { + colors: { primary }, + } = useInternalTheme(themeOverrides); + const { backgroundColor = primary, ...restStyle } = StyleSheet.flatten(style) || {}; const textColor = customColor ?? diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index 452d098555..310dd82fc8 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; @@ -69,6 +67,7 @@ const Badge = ({ const { animation: { scale }, + colors, } = theme; React.useEffect(() => { @@ -85,21 +84,9 @@ const Badge = ({ }).start(); }, [visible, opacity, scale]); - const { - backgroundColor = theme.isV3 - ? theme.colors.error - : // @ts-expect-error TODO: Remove it - theme.colors?.notification, - ...restStyle - } = (StyleSheet.flatten(style) || {}) as TextStyle; - - const textColor = theme.isV3 - ? theme.colors.onError - : getContrastingColor(backgroundColor, white, black); - - const borderRadius = size / 2; - - const paddingHorizontal = theme.isV3 ? 3 : 4; + const { backgroundColor = colors.error, ...restStyle } = (StyleSheet.flatten( + style + ) || {}) as TextStyle; return ( @@ -224,9 +227,7 @@ const Banner = ({ style={[ styles.message, { - color: theme.isV3 - ? theme.colors.onSurface - : theme.colors.text, + color: colors.onSurface, }, ]} accessibilityLiveRegion={visible ? 'polite' : 'none'} @@ -243,7 +244,7 @@ const Banner = ({ compact mode="text" style={styles.button} - textColor={theme.colors?.primary} + textColor={colors.primary} theme={theme} {...others} > @@ -291,9 +292,6 @@ const styles = StyleSheet.create({ button: { margin: 4, }, - elevation: { - elevation: 1, - }, transparent: { opacity: 0, }, diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx index c4e9b71a60..2714edce95 100644 --- a/src/components/BottomNavigation/BottomNavigation.tsx +++ b/src/components/BottomNavigation/BottomNavigation.tsx @@ -353,9 +353,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 +403,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: shifting ? 150 * scale : 0, useNativeDriver: true, easing: sceneAnimationEasing, }) @@ -430,7 +429,6 @@ const BottomNavigation = ({ scale, tabsPositionAnims, sceneAnimationEasing, - theme, ] ); diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx index 1453b07ebf..c3389956c4 100644 --- a/src/components/BottomNavigation/BottomNavigationBar.tsx +++ b/src/components/BottomNavigation/BottomNavigationBar.tsx @@ -321,7 +321,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 +343,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 +416,13 @@ const BottomNavigationBar = ({ Animated.parallel([ Animated.timing(rippleAnim, { toValue: 1, - duration: theme.isV3 || shifting ? 400 * scale : 0, + duration: shifting ? 400 * scale : 0, useNativeDriver: true, }), ...navigationState.routes.map((_, i) => Animated.timing(tabsAnims[i], { toValue: i === index ? 1 : 0, - duration: theme.isV3 || shifting ? 150 * scale : 0, + duration: shifting ? 150 * scale : 0, useNativeDriver: true, easing: animationEasing, }) @@ -440,7 +438,6 @@ const BottomNavigationBar = ({ }, [ rippleAnim, - theme.isV3, shifting, scale, navigationState.routes, @@ -479,7 +476,7 @@ const BottomNavigationBar = ({ }; const { routes } = navigationState; - const { colors, dark: isDarkTheme, mode, isV3 } = theme; + const { colors, dark: isDarkTheme, mode } = theme; const { backgroundColor: customBackground, elevation = 4 } = (StyleSheet.flatten(style) || {}) as { @@ -493,22 +490,7 @@ const BottomNavigationBar = ({ ? 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 backgroundColor = customBackground || theme.colors.elevation.level2; const isDark = typeof approxBackgroundColor === 'string' @@ -528,13 +510,10 @@ const BottomNavigationBar = ({ 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 +522,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 @@ -696,50 +628,48 @@ const BottomNavigationBar = ({ }); 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 isLegacyOrV3Shifting = 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 && ( ({ ({ ({ ) : ( ({ {typeof badge === 'boolean' ? ( - + ) : ( {badge} @@ -820,12 +748,7 @@ const BottomNavigationBar = ({ {labeled ? ( - + ({ )} - ) : ( - !isV3 && - )} + ) : null} ), }); @@ -931,24 +852,11 @@ 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, @@ -958,8 +866,6 @@ const styles = StyleSheet.create({ iconWrapper: { ...StyleSheet.absoluteFillObject, alignItems: 'center', - }, - v3IconWrapper: { top: 4, }, labelContainer: { @@ -1001,7 +907,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..c4dfb0dd2e 100644 --- a/src/components/BottomNavigation/utils.ts +++ b/src/components/BottomNavigation/utils.ts @@ -1,4 +1,3 @@ -import color from 'color'; import type { InternalTheme } from 'src/types'; import type { black, white } from '../../styles/themes/v2/colors'; @@ -10,61 +9,58 @@ type BaseProps = { export const getActiveTintColor = ({ activeColor, - defaultColor, theme, }: BaseProps & { activeColor: string | undefined; }) => { + const { + colors: { onSecondaryContainer }, + } = theme; if (typeof activeColor === 'string') { return activeColor; } - if (theme.isV3) { - return theme.colors.onSecondaryContainer; - } - - return defaultColor; + return onSecondaryContainer; }; export const getInactiveTintColor = ({ inactiveColor, - defaultColor, theme, }: BaseProps & { inactiveColor: string | undefined; }) => { + const { + colors: { onSurfaceVariant }, + } = theme; + if (typeof inactiveColor === 'string') { return inactiveColor; } - if (theme.isV3) { - return theme.colors.onSurfaceVariant; - } - - return color(defaultColor).alpha(0.5).rgb().string(); + return onSurfaceVariant; }; export const getLabelColor = ({ tintColor, hasColor, focused, - defaultColor, theme, }: BaseProps & { tintColor: string; hasColor: boolean; focused: boolean; }) => { + const { + colors: { onSurface, onSurfaceVariant }, + } = theme; + if (hasColor) { return tintColor; } - if (theme.isV3) { - if (focused) { - return theme.colors.onSurface; - } - return theme.colors.onSurfaceVariant; + if (focused) { + return onSurface; } - return defaultColor; + return onSurfaceVariant; }; diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index cb800710bd..5c53e3d91e 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -218,8 +218,8 @@ const Button = ( }, [mode] ); - const { roundness, isV3, animation } = theme; - const uppercase = uppercaseProp ?? !theme.isV3; + const { roundness, animation, fonts } = theme; + const uppercase = uppercaseProp ?? false; const isWeb = Platform.OS === 'web'; const hasPassedTouchHandler = hasTouchHandler({ @@ -229,10 +229,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 +249,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 +262,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,8 +279,8 @@ const Button = ( (style) => style.startsWith('border') && style.endsWith('Radius') ); - const borderRadius = (isV3 ? 5 : 1) * roundness; - const iconSize = isV3 ? 18 : 16; + const borderRadius = 5 * roundness; + const iconSize = 18; const { backgroundColor, borderColor, textColor, borderWidth } = getButtonColors({ @@ -311,7 +310,7 @@ const Button = ( const { color: customLabelColor, fontSize: customLabelSize } = StyleSheet.flatten(labelStyle) || {}; - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; + const font = fonts.labelLarge; const textStyle = { color: textColor, @@ -322,16 +321,14 @@ const Button = ( StyleSheet.flatten(contentStyle)?.flexDirection === 'row-reverse' ? [ styles.iconReverse, - isV3 && styles[`md3IconReverse${compact ? 'Compact' : ''}`], - isV3 && - isMode('text') && + styles[`md3IconReverse${compact ? 'Compact' : ''}`], + isMode('text') && styles[`md3IconReverseTextMode${compact ? 'Compact' : ''}`], ] : [ styles.icon, - isV3 && styles[`md3Icon${compact ? 'Compact' : ''}`], - isV3 && - isMode('text') && + styles[`md3Icon${compact ? 'Compact' : ''}`], + isMode('text') && styles[`md3IconTextMode${compact ? 'Compact' : ''}`], ]; @@ -346,10 +343,9 @@ const Button = ( compact && styles.compact, buttonStyle, style, - !isV3 && !disabled && { elevation }, ] as Animated.WithAnimatedValue> } - {...(isV3 && { elevation: elevation })} + elevation={elevation} > { - if (theme.isV3) { - if (disabled && isMode('outlined')) { - return theme.colors.surfaceDisabled; - } - - if (isMode('outlined')) { - return theme.colors.outline; - } + if (disabled && isMode('outlined')) { + return theme.colors.surfaceDisabled; } if (isMode('outlined')) { - return color(theme.dark ? white : black) - .alpha(0.29) - .rgb() - .string(); + return theme.colors.outline; } 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; diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 0d9cd33b3c..71f1977e4d 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -181,7 +181,7 @@ const Card = ( const { current: elevationDarkAdaptive } = React.useRef( new Animated.Value(cardElevation) ); - const { animation, dark, mode, roundness, isV3 } = theme; + const { animation, dark, mode, roundness } = theme; const prevDarkRef = React.useRef(dark); React.useEffect(() => { @@ -213,20 +213,20 @@ const Card = ( ]); 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, + toValue: isPressTypeIn ? 2 : cardElevation, duration: animationDuration, useNativeDriver: false, }).start(); } else { Animated.timing(elevation, { - toValue: isPressTypeIn ? (isV3 ? 2 : 8) : cardElevation, + toValue: isPressTypeIn ? 2 : cardElevation, duration: animationDuration, useNativeDriver: false, }).start(); @@ -267,7 +267,7 @@ const Card = ( ); const borderRadiusCombinedStyles = { - borderRadius: (isV3 ? 3 : 1) * roundness, + borderRadius: 3 * roundness, ...borderRadiusStyles, }; @@ -290,19 +290,15 @@ const Card = ( @@ -365,9 +361,6 @@ const styles = StyleSheet.create({ height: '100%', zIndex: 2, }, - resetElevation: { - elevation: 0, - }, }); export default CardComponent; diff --git a/src/components/Card/CardActions.tsx b/src/components/Card/CardActions.tsx index 17cdc39665..ea190f8e93 100644 --- a/src/components/Card/CardActions.tsx +++ b/src/components/Card/CardActions.tsx @@ -4,7 +4,6 @@ import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import type { ThemeProp } from 'src/types'; import { CardActionChildProps } from './utils'; -import { useInternalTheme } from '../../core/theming'; export type Props = React.ComponentPropsWithRef & { /** @@ -35,12 +34,8 @@ export type Props = React.ComponentPropsWithRef & { * export default MyComponent; * ``` */ -const CardActions = ({ theme, style, children, ...rest }: Props) => { - const { isV3 } = useInternalTheme(theme); - - const justifyContent = ( - isV3 ? 'flex-end' : 'flex-start' - ) as ViewStyle['justifyContent']; +const CardActions = ({ style, children, ...rest }: Props) => { + const justifyContent = 'flex-end' as ViewStyle['justifyContent']; const containerStyle = [styles.container, { justifyContent }, style]; return ( @@ -50,15 +45,13 @@ 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, + compact: false, mode, style: childStyle, }); diff --git a/src/components/Card/CardTitle.tsx b/src/components/Card/CardTitle.tsx index b3d78fc259..a8642d9723 100644 --- a/src/components/Card/CardTitle.tsx +++ b/src/components/Card/CardTitle.tsx @@ -7,11 +7,8 @@ import { ViewStyle, } from 'react-native'; -import { useInternalTheme } from '../../core/theming'; import type { MD3TypescaleKey, 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 & { /** @@ -149,12 +146,7 @@ const CardTitle = ({ right, rightStyle, style, - theme: themeOverrides, }: Props) => { - const theme = useInternalTheme(themeOverrides); - const TitleComponent = theme.isV3 ? Text : Title; - const SubtitleComponent = theme.isV3 ? Text : Caption; - const minHeight = subtitle || left || right ? 72 : 50; const marginBottom = subtitle ? 0 : 2; @@ -170,24 +162,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..eb6cf5b409 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; }; diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx index 92ea124e62..f0d33b92ea 100644 --- a/src/components/Checkbox/CheckboxItem.tsx +++ b/src/components/Checkbox/CheckboxItem.tsx @@ -154,6 +154,8 @@ const CheckboxItem = ({ ...props }: Props) => { const theme = useInternalTheme(themeOverrides); + const { colors } = theme; + const checkboxProps = { ...props, status, theme, disabled }; const isLeading = position === 'leading'; let checkbox; @@ -166,10 +168,9 @@ const CheckboxItem = ({ checkbox = ; } - const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text; - const disabledTextColor = theme.isV3 - ? theme.colors.onSurfaceDisabled - : theme.colors.disabled; + const textColor = colors.onSurface; + const disabledTextColor = colors.onSurfaceDisabled; + const textAlign = isLeading ? 'right' : 'left'; const computedStyle = { @@ -204,12 +205,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 +234,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..4ba3615836 100644 --- a/src/components/Checkbox/utils.ts +++ b/src/components/Checkbox/utils.ts @@ -13,11 +13,7 @@ const getAndroidCheckedColor = ({ return customColor; } - if (theme.isV3) { - return theme.colors.primary; - } - - return theme.colors.accent; + return theme.colors.primary; }; const getAndroidUncheckedColor = ({ @@ -31,15 +27,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(); + return theme.colors.onSurfaceVariant; }; const getAndroidRippleColor = ({ @@ -52,10 +40,7 @@ const getAndroidRippleColor = ({ 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(theme.colors.onSurface).alpha(0.16).rgb().string(); } return color(checkedColor).fade(0.32).rgb().string(); @@ -75,10 +60,7 @@ const getAndroidControlColor = ({ disabled?: boolean; }) => { if (disabled) { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.disabled; + return theme.colors.onSurfaceDisabled; } if (checked) { @@ -127,21 +109,14 @@ const getIOSCheckedColor = ({ disabled?: boolean; }) => { if (disabled) { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.disabled; + return theme.colors.onSurfaceDisabled; } if (customColor) { return customColor; } - if (theme.isV3) { - return theme.colors.primary; - } - - return theme.colors.accent; + return theme.colors.primary; }; const getIOSRippleColor = ({ @@ -154,10 +129,7 @@ const getIOSRippleColor = ({ 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(theme.colors.onSurface).alpha(0.16).rgb().string(); } return color(checkedColor).fade(0.32).rgb().string(); }; diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 8ed23b7436..8e25ae36c8 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -212,11 +212,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 +232,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 +243,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, @@ -281,8 +281,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 : 0; + const multiplier = compact ? 1.5 : 2; const labelSpacings = { marginRight: onClose ? 0 : 8 * multiplier, marginLeft: @@ -291,20 +291,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], @@ -357,12 +345,11 @@ const Chip = ({ - + {closeIcon ? ( ) : ( { +}: BaseProps & { 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 color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); + } - return color(black).alpha(0.29).rgb().string(); + if (isSelectedColor) { + return color(selectedColor).alpha(0.29).rgb().string(); } - return backgroundColor; + return theme.colors.outline; }; const getTextColor = ({ @@ -65,54 +47,30 @@ 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.onSurfaceDisabled; } if (isSelectedColor) { - return color(selectedColor).alpha(0.87).rgb().string(); + return selectedColor; } - return color(theme.colors.text).alpha(0.87).rgb().string(); + if (isOutlined) { + return theme.colors.onSurfaceVariant; + } + + 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; + return theme.colors.surface; } - if (theme.dark) { - return '#383838'; - } - - return '#ebebeb'; + return theme.colors.secondaryContainer; }; const getBackgroundColor = ({ @@ -127,15 +85,12 @@ 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 color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); } - return getDefaultBackgroundColor({ theme, isOutlined }); }; @@ -156,45 +111,30 @@ const getSelectedBackgroundColor = ({ 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 (isOutlined) { if (showSelectedOverlay) { return color(backgroundColor) - .mix(color(theme.colors.onSecondaryContainer), 0.12) + .mix(color(theme.colors.onSurfaceVariant), 0.12) .rgb() .string(); } - return color(backgroundColor) - .mix(color(theme.colors.onSecondaryContainer), 0) + .mix(color(theme.colors.onSurfaceVariant), 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(); + if (showSelectedOverlay) { + return color(backgroundColor) + .mix(color(theme.colors.onSecondaryContainer), 0.12) + .rgb() + .string(); } - return color(backgroundColor).darken(0.2).rgb().string(); + return color(backgroundColor) + .mix(color(theme.colors.onSecondaryContainer), 0) + .rgb() + .string(); }; const getIconColor = ({ @@ -206,31 +146,19 @@ 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.onSurfaceDisabled; } if (isSelectedColor) { - return color(selectedColor).alpha(0.54).rgb().string(); + return selectedColor; + } + + if (isOutlined) { + return theme.colors.onSurfaceVariant; } - return color(theme.colors.text).alpha(0.54).rgb().string(); + return theme.colors.onSecondaryContainer; }; const getRippleColor = ({ @@ -238,10 +166,8 @@ const getRippleColor = ({ isOutlined, disabled, selectedColor, - selectedBackgroundColor, customRippleColor, }: BaseProps & { - selectedBackgroundColor: string; selectedColor?: string; customRippleColor?: ColorValue; }) => { @@ -257,19 +183,11 @@ const getRippleColor = ({ 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(); + return color(selectedColor).alpha(0.12).rgb().string(); } - return selectedBackgroundColor; + return color(textColor).alpha(0.12).rgb().string(); }; export const getChipColors = ({ @@ -304,7 +222,6 @@ export const getChipColors = ({ borderColor: getBorderColor({ ...baseChipColorProps, selectedColor, - backgroundColor, }), textColor: getTextColor({ ...baseChipColorProps, @@ -317,7 +234,6 @@ export const getChipColors = ({ rippleColor: getRippleColor({ ...baseChipColorProps, selectedColor, - selectedBackgroundColor, customRippleColor, }), backgroundColor, diff --git a/src/components/CrossFadeIcon.tsx b/src/components/CrossFadeIcon.tsx index 4cf3748c72..99c1281135 100644 --- a/src/components/CrossFadeIcon.tsx +++ b/src/components/CrossFadeIcon.tsx @@ -36,6 +36,10 @@ const CrossFadeIcon = ({ testID = 'cross-fade-icon', }: Props) => { const theme = useInternalTheme(themeOverrides); + const { + animation: { scale }, + } = theme; + const [currentIcon, setCurrentIcon] = React.useState( () => source ); @@ -44,8 +48,6 @@ const CrossFadeIcon = ({ ); const { current: fade } = React.useRef(new Animated.Value(1)); - const { scale } = theme.animation; - if (currentIcon !== source) { setPreviousIcon(() => currentIcon); setCurrentIcon(() => source); diff --git a/src/components/DataTable/DataTableHeader.tsx b/src/components/DataTable/DataTableHeader.tsx index 853956e878..2574f0e106 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 & { @@ -51,16 +48,17 @@ const DataTableHeader = ({ theme: themeOverrides, ...rest }: Props) => { - const theme = useInternalTheme(themeOverrides); - const borderBottomColor = theme.isV3 - ? theme.colors.surfaceVariant - : color(theme.dark ? white : black) - .alpha(0.12) - .rgb() - .string(); + const { colors } = useInternalTheme(themeOverrides); return ( - + {children} ); diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx index dd72dbe54f..894fbff822 100644 --- a/src/components/DataTable/DataTablePagination.tsx +++ b/src/components/DataTable/DataTablePagination.tsx @@ -107,8 +107,9 @@ const PaginationControls = ({ paginationControlRippleColor, }: PaginationControlsProps) => { const theme = useInternalTheme(themeOverrides); + const { colors } = theme; - const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text; + const textColor = colors.onSurface; return ( <> @@ -310,12 +311,7 @@ const DataTablePagination = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const labelColor = color( - theme.isV3 ? theme.colors.onSurface : theme?.colors.text - ) - .alpha(0.6) - .rgb() - .string(); + const labelColor = color(theme.colors.onSurface).alpha(0.6).rgb().string(); return ( { - const theme = useInternalTheme(themeOverrides); - const borderBottomColor = theme.isV3 - ? theme.colors.surfaceVariant - : color(theme.dark ? white : black) - .alpha(0.12) - .rgb() - .string(); + const { colors } = useInternalTheme(themeOverrides); + const borderBottomColor = colors.surfaceVariant; return ( { - const theme = useInternalTheme(themeOverrides); + const { colors } = useInternalTheme(themeOverrides); const { current: spinAnim } = React.useRef( new Animated.Value(sortDirection === 'ascending' ? 0 : 1) ); @@ -105,7 +105,7 @@ const DataTableTitle = ({ }).start(); }, [sortDirection, spinAnim]); - const textColor = theme.isV3 ? theme.colors.onSurface : theme?.colors?.text; + const textColor = colors.onSurface; const alphaTextColor = color(textColor).alpha(0.6).rgb().string(); diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index 32cc1e4a99..25bd192449 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -15,7 +15,6 @@ import DialogIcon from './DialogIcon'; import DialogScrollArea from './DialogScrollArea'; import DialogTitle from './DialogTitle'; import { useInternalTheme } from '../../core/theming'; -import overlay from '../../styles/overlay'; import type { ThemeProp } from '../../types'; import Modal from '../Modal'; import { DialogChildProps } from './utils'; @@ -106,16 +105,8 @@ const Dialog = ({ }: Props) => { 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 { colors, roundness } = theme; + const borderRadius = 7 * roundness; 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..99ddc18784 100644 --- a/src/components/Dialog/DialogActions.tsx +++ b/src/components/Dialog/DialogActions.tsx @@ -4,7 +4,6 @@ import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import type { ThemeProp } from 'src/types'; import { DialogActionChildProps } from './utils'; -import { useInternalTheme } from '../../core/theming'; export type Props = React.ComponentPropsWithRef & { /** @@ -47,21 +46,17 @@ export type Props = React.ComponentPropsWithRef & { * ``` */ const DialogActions = (props: Props) => { - const { isV3 } = 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, @@ -76,12 +71,6 @@ const DialogActions = (props: Props) => { DialogActions.displayName = 'Dialog.Actions'; const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'flex-end', - padding: 8, - }, v3Container: { flexDirection: 'row', flexGrow: 1, diff --git a/src/components/Dialog/DialogIcon.tsx b/src/components/Dialog/DialogIcon.tsx index ad5841b93a..7315b4ce99 100644 --- a/src/components/Dialog/DialogIcon.tsx +++ b/src/components/Dialog/DialogIcon.tsx @@ -70,11 +70,6 @@ const DialogIcon = ({ }: Props) => { const theme = useInternalTheme(themeOverrides); - if (!theme.isV3) { - return null; - } - - //@ts-ignore const iconColor = color || theme.colors.secondary; return ( diff --git a/src/components/Dialog/DialogScrollArea.tsx b/src/components/Dialog/DialogScrollArea.tsx index 66fdcef6a0..c5ad1ceaf1 100644 --- a/src/components/Dialog/DialogScrollArea.tsx +++ b/src/components/Dialog/DialogScrollArea.tsx @@ -49,21 +49,14 @@ 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, - }; + const { colors } = useInternalTheme(props.theme); + return ( @@ -77,11 +70,11 @@ DialogScrollArea.displayName = 'Dialog.ScrollArea'; const styles = StyleSheet.create({ container: { paddingHorizontal: 24, + marginBottom: 24, flexGrow: 1, flexShrink: 1, - }, - v3Container: { - marginBottom: 24, + borderTopWidth: 1, + borderBottomWidth: 1, }, }); diff --git a/src/components/Dialog/DialogTitle.tsx b/src/components/Dialog/DialogTitle.tsx index 9953fc506c..0ecda55f21 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`. */ @@ -52,25 +51,22 @@ const DialogTitle = ({ style, ...rest }: Props) => { - const theme = useInternalTheme(themeOverrides); - const { isV3, colors, fonts } = theme; - - const TextComponent = isV3 ? Text : Title; + const { colors, fonts } = useInternalTheme(themeOverrides); const headerTextStyle = { - color: isV3 ? colors.onSurface : colors?.text, - ...(isV3 ? fonts.headlineSmall : {}), + color: colors.onSurface, + ...fonts.headlineSmall, }; return ( - {children} - + ); }; @@ -78,11 +74,7 @@ DialogTitle.displayName = 'Dialog.Title'; const styles = StyleSheet.create({ text: { - marginTop: 22, - marginBottom: 18, marginHorizontal: 24, - }, - v3Text: { marginTop: 16, marginBottom: 16, }, diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx index be30d94c7c..d04c185a0d 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 & { @@ -59,24 +56,19 @@ const Divider = ({ bold = false, ...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(); + const { colors } = useInternalTheme(themeOverrides); return ( @@ -84,9 +76,6 @@ const Divider = ({ }; const styles = StyleSheet.create({ - leftInset: { - marginLeft: 72, - }, v3LeftInset: { marginLeft: 16, }, diff --git a/src/components/Drawer/DrawerCollapsedItem.tsx b/src/components/Drawer/DrawerCollapsedItem.tsx index b224c2b639..5702b8bf74 100644 --- a/src/components/Drawer/DrawerCollapsedItem.tsx +++ b/src/components/Drawer/DrawerCollapsedItem.tsx @@ -111,8 +111,11 @@ const DrawerCollapsedItem = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; - const { scale } = theme.animation; + const { + animation: { scale }, + colors, + fonts, + } = theme; const [numOfLines, setNumOfLines] = React.useState(1); @@ -126,10 +129,6 @@ const DrawerCollapsedItem = ({ } }, [animScale, active]); - if (!isV3) { - return null; - } - const handlePressOut = () => { Animated.timing(animScale, { toValue: 1, @@ -140,15 +139,11 @@ const DrawerCollapsedItem = ({ const iconPadding = ((!label ? itemSize : outlineHeight) - iconSize) / 2; - const backgroundColor = active - ? theme.colors.secondaryContainer - : 'transparent'; - const labelColor = active - ? theme.colors.onSurface - : theme.colors.onSurfaceVariant; + const backgroundColor = active ? colors.secondaryContainer : 'transparent'; + const labelColor = active ? colors.onSurface : colors.onSurfaceVariant; const iconColor = active - ? theme.colors.onSecondaryContainer - : theme.colors.onSurfaceVariant; + ? colors.onSecondaryContainer + : colors.onSurfaceVariant; const onTextLayout = ({ nativeEvent, @@ -163,7 +158,7 @@ const DrawerCollapsedItem = ({ const labelTextStyle = { color: labelColor, - ...(isV3 ? theme.fonts.labelMedium : {}), + ...fonts.labelMedium, }; const icon = diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx index 49f3367bec..47c26ae5cc 100644 --- a/src/components/Drawer/DrawerItem.tsx +++ b/src/components/Drawer/DrawerItem.tsx @@ -108,27 +108,17 @@ const DrawerItem = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { roundness, isV3 } = theme; + const { roundness, colors, fonts } = theme; - const backgroundColor = active - ? isV3 - ? theme.colors.secondaryContainer - : color(theme.colors.primary).alpha(0.12).rgb().string() - : undefined; + const backgroundColor = active ? 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(); + ? colors.onSecondaryContainer + : 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 rippleColor = color(contentColor).alpha(0.12).rgb().string(); + const font = fonts.labelLarge; return ( @@ -137,12 +127,7 @@ 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} @@ -150,7 +135,7 @@ const DrawerItem = ({ theme={theme} hitSlop={hitSlop} > - + {icon ? ( @@ -185,9 +170,6 @@ DrawerItem.displayName = 'Drawer.Item'; const styles = StyleSheet.create({ container: { marginHorizontal: 10, - marginVertical: 4, - }, - v3Container: { justifyContent: 'center', height: 56, marginLeft: 12, @@ -197,9 +179,6 @@ const styles = StyleSheet.create({ wrapper: { flexDirection: 'row', alignItems: 'center', - padding: 8, - }, - v3Wrapper: { marginLeft: 16, marginRight: 24, padding: 0, diff --git a/src/components/Drawer/DrawerSection.tsx b/src/components/Drawer/DrawerSection.tsx index ed79c5e054..1fc39469b6 100644 --- a/src/components/Drawer/DrawerSection.tsx +++ b/src/components/Drawer/DrawerSection.tsx @@ -1,8 +1,6 @@ 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 type { ThemeProp } from '../../types'; @@ -73,17 +71,15 @@ 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 { colors, fonts } = theme; + const titleColor = colors.onSurfaceVariant; + const titleMargin = 28; + const font = fonts.titleSmall; return ( {title && ( - + {title && ( + )} ); @@ -121,16 +113,11 @@ const styles = StyleSheet.create({ marginBottom: 4, }, titleContainer: { - height: 40, - justifyContent: 'center', - }, - v3TitleContainer: { height: 56, + justifyContent: 'center', }, divider: { marginTop: 4, - }, - v3Divider: { backgroundColor: MD3Colors.neutralVariant50, }, }); diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx index 94468e5687..e0e98f2135 100644 --- a/src/components/FAB/AnimatedFAB.tsx +++ b/src/components/FAB/AnimatedFAB.tsx @@ -33,6 +33,8 @@ import TouchableRipple, { } from '../TouchableRipple/TouchableRipple'; import AnimatedText from '../Typography/AnimatedText'; +const SIZE = 56; + export type AnimatedFABIconMode = 'static' | 'dynamic'; export type AnimatedFABAnimateFrom = 'left' | 'right'; @@ -128,9 +130,6 @@ export type Props = $Omit<$RemoveChildren, 'mode'> & { testID?: string; }; -const SIZE = 56; -const SCALE = 0.9; - /** * An animated, extending horizontally floating action button represents the primary action in an application. * @@ -233,7 +232,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 +245,7 @@ const AnimatedFAB = ({ const { current: animFAB } = React.useRef( new Animated.Value(0) ); - const { isV3, animation } = theme; + const { animation, fonts } = theme; const { scale } = animation; const labelSize = isWeb ? getLabelSizeWeb(labelRef) : null; @@ -257,7 +256,7 @@ const AnimatedFAB = ({ labelSize?.height ?? 0 ); - const borderRadius = SIZE / (isV3 ? 3.5 : 2); + const borderRadius = SIZE / 3.5; React.useEffect(() => { if (!isWeb) { @@ -364,17 +363,16 @@ const AnimatedFAB = ({ animFAB, }); - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; + const font = 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 shadowStyle = styles.v3Shadow; const baseStyle = [ StyleSheet.absoluteFill, disabled ? styles.disabled : shadowStyle, @@ -396,31 +394,13 @@ const AnimatedFAB = ({ ], borderRadius, }, - !isV3 && { - elevation: md2Elevation, - }, styles.container, restStyle, ]} - {...(isV3 && { elevation: md3Elevation })} + elevation={md3Elevation} theme={theme} > - + ( ref ) => { const theme = useInternalTheme(themeOverrides); - const uppercase = uppercaseProp ?? !theme.isV3; + const { + animation: { scale }, + fonts, + } = theme; + + const uppercase = uppercaseProp ?? false; const { current: visibility } = React.useRef( new Animated.Value(visible ? 1 : 0) ); - const { isV3, animation } = theme; - const { scale } = animation; React.useEffect(() => { if (visible) { @@ -255,7 +258,7 @@ const FAB = forwardRef( 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 = fonts.labelLarge; const extendedStyle = getExtendedFabStyle({ customSize, theme }); const textStyle = { @@ -282,13 +285,11 @@ const FAB = forwardRef( }, ], }, - !isV3 && styles.elevated, - !isV3 && disabled && styles.disabled, style, ]} pointerEvents={visible ? 'auto' : 'none'} testID={`${testID}-container`} - {...(isV3 && { elevation: md3Elevation })} + elevation={md3Elevation} > { const theme = useInternalTheme(themeOverrides); + const { + animation: { scale }, + fonts, + } = useInternalTheme(themeOverrides); const { top, bottom, right, left } = useSafeAreaInsets(); const { current: backdrop } = React.useRef( @@ -249,9 +253,6 @@ const FABGroup = ({ | null >(null); - const { scale } = theme.animation; - const { isV3 } = theme; - React.useEffect(() => { if (open) { setIsClosingAnimationFinished(false); @@ -262,7 +263,7 @@ const FABGroup = ({ useNativeDriver: true, }), Animated.stagger( - isV3 ? 15 : 50 * scale, + 15 * scale, animations.current .map((animation) => Animated.timing(animation, { @@ -294,7 +295,7 @@ const FABGroup = ({ } }); } - }, [open, actions, backdrop, scale, isV3]); + }, [open, actions, backdrop, scale]); const close = () => onStateChange({ open: false }); const toggle = () => onStateChange({ open: !open }); @@ -395,7 +396,7 @@ const FABGroup = ({ {actions.map((it, i) => { const labelTextStyle = { color: it.labelTextColor ?? labelColor, - ...(isV3 ? theme.fonts.titleMedium : {}), + ...fonts.titleMedium, }; const marginHorizontal = typeof it.size === 'undefined' || it.size === 'small' ? 24 : 16; @@ -430,7 +431,7 @@ const FABGroup = ({ {it.label && ( @@ -471,7 +467,7 @@ const FABGroup = ({ opacity: opacities[i], backgroundColor: stackedFABBackgroundColor, }, - isV3 && { transform: [{ translateY: translations[i] }] }, + { transform: [{ translateY: translations[i] }] }, it.style, ]} accessibilityElementsHidden={true} @@ -531,13 +527,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, + backgroundColor: 'transparent', + elevation: 0, }, item: { marginBottom: 16, @@ -545,9 +543,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..9ab3543c3b 100644 --- a/src/components/FAB/utils.ts +++ b/src/components/FAB/utils.ts @@ -9,9 +9,7 @@ import { 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; @@ -174,88 +172,60 @@ const getBackgroundColor = ({ return customBackgroundColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.surfaceDisabled; - } - - if (isVariant('primary')) { - return theme.colors.primaryContainer; - } + if (disabled) { + return theme.colors.surfaceDisabled; + } - 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.primary; }; const getForegroundColor = ({ theme, isVariant, disabled, - backgroundColor, customColor, -}: BaseProps & { backgroundColor: string; customColor?: string }) => { +}: BaseProps & { customColor?: string }) => { if (typeof customColor !== 'undefined' && !disabled) { 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 (disabled) { + return theme.colors.onSurfaceDisabled; + } - 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.primary; }; export const getFABColors = ({ @@ -287,7 +257,6 @@ export const getFABColors = ({ const foregroundColor = getForegroundColor({ ...baseFABColorProps, customColor, - backgroundColor, }); return { @@ -299,15 +268,7 @@ export const getFABColors = ({ }; 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 +281,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 color(theme.colors.background).alpha(0.95).rgb().string(); }; 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,16 +302,6 @@ 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, @@ -385,30 +330,18 @@ 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 { ...v3SmallSize, borderRadius: 3 * roundness }; + case 'medium': + return { ...v3MediumSize, borderRadius: 4 * roundness }; + case 'large': + return { ...v3LargeSize, borderRadius: 7 * roundness }; } - - if (size === 'small') { - return smallSize; - } - return standardSize; -}; - -const extended = { - height: 48, - paddingHorizontal: 16, }; const v3Extended = { @@ -424,16 +357,12 @@ 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 v3Extended; }; let cachedContext: CanvasRenderingContext2D | null = null; diff --git a/src/components/HelperText/utils.ts b/src/components/HelperText/utils.ts index 4134175416..f83669fa90 100644 --- a/src/components/HelperText/utils.ts +++ b/src/components/HelperText/utils.ts @@ -1,5 +1,3 @@ -import color from 'color'; - import type { InternalTheme } from '../../types'; type BaseProps = { @@ -9,22 +7,15 @@ type BaseProps = { }; export function getTextColor({ theme, disabled, type }: BaseProps) { - const { colors, dark } = theme; + const { colors } = theme; if (type === 'error') { return colors?.error; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } else { - return theme.colors.onSurfaceVariant; - } + if (disabled) { + return theme.colors.onSurfaceDisabled; } - return color(theme?.colors?.text) - .alpha(dark ? 0.7 : 0.54) - .rgb() - .string(); + return theme.colors.onSurfaceVariant; } diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index b3d26c699d..3417e44b29 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -108,7 +108,7 @@ const Icon = ({ testID, ...rest }: Props) => { - const theme = useInternalTheme(themeOverrides); + const { colors } = useInternalTheme(themeOverrides); const direction = typeof source === 'object' && source.direction && source.source ? source.direction === 'auto' @@ -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 || colors.onSurface; if (isImageSource(s)) { return ( diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx index 68615a4008..f960177769 100644 --- a/src/components/IconButton/IconButton.tsx +++ b/src/components/IconButton/IconButton.tsx @@ -138,7 +138,6 @@ const IconButton = forwardRef( ref ) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; const IconComponent = animated ? CrossFadeIcon : Icon; @@ -153,10 +152,10 @@ const IconButton = forwardRef( customRippleColor, }); - 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; @@ -178,10 +177,9 @@ const IconButton = forwardRef( }, styles.container, borderStyles, - !isV3 && disabled && styles.disabled, style, ]} - {...(isV3 && { elevation: 0 })} + elevation={0} > { - if (theme.isV3) { - if (disabled) { - return theme.colors.surfaceDisabled; - } - - return theme.colors.outline; + if (disabled) { + return theme.colors.surfaceDisabled; } - return undefined; + return theme.colors.outline; }; const getBackgroundColor = ({ @@ -38,40 +34,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.surfaceDisabled; } + } - 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 +74,52 @@ const getIconColor = ({ selected, customIconColor, }: BaseProps & { customIconColor?: string }) => { - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (typeof customIconColor !== 'undefined') { - return customIconColor; - } + if (disabled) { + return theme.colors.onSurfaceDisabled; + } - if (isMode('contained')) { - if (selected) { - return theme.colors.onPrimary; - } - return theme.colors.primary; - } + if (typeof customIconColor !== 'undefined') { + return customIconColor; + } - if (isMode('contained-tonal')) { - if (selected) { - return theme.colors.onSecondaryContainer; - } - return theme.colors.onSurfaceVariant; + if (isMode('contained')) { + if (selected) { + return theme.colors.onPrimary; } + return theme.colors.primary; + } - if (isMode('outlined')) { - if (selected) { - return theme.colors.inverseOnSurface; - } - return theme.colors.onSurfaceVariant; + if (isMode('contained-tonal')) { + if (selected) { + return theme.colors.onSecondaryContainer; } + return theme.colors.onSurfaceVariant; + } + if (isMode('outlined')) { if (selected) { - return theme.colors.primary; + return theme.colors.inverseOnSurface; } return theme.colors.onSurfaceVariant; } - if (typeof customIconColor !== 'undefined') { - return customIconColor; + if (selected) { + return theme.colors.primary; } - - return theme.colors.text; + return theme.colors.onSurfaceVariant; }; 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(); - } - return color(iconColor).alpha(0.32).rgb().string(); + return color(iconColor).alpha(0.12).rgb().string(); }; export const getIconButtonColor = ({ @@ -184,7 +161,7 @@ export const getIconButtonColor = ({ ...baseIconColorProps, customContainerColor, }), - rippleColor: getRippleColor({ theme, iconColor, customRippleColor }), + rippleColor: getRippleColor({ iconColor, customRippleColor }), borderColor: getBorderColor({ theme, disabled }), }; }; diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx index 75505c7367..1b9517fe70 100644 --- a/src/components/List/ListAccordion.tsx +++ b/src/components/List/ListAccordion.tsx @@ -212,9 +212,6 @@ const ListAccordion = ({ const onDescriptionTextLayout = ( event: NativeSyntheticEvent ) => { - if (!theme.isV3) { - return; - } const { nativeEvent } = event; setAlignToTop(nativeEvent.lines.length >= 2); }; @@ -256,7 +253,7 @@ const ListAccordion = ({ {left ? left({ color: isExpanded ? theme.colors?.primary : descriptionColor, - style: getLeftStyles(alignToTop, description, theme.isV3), + style: getLeftStyles(alignToTop, description), }) : null} - + @@ -348,10 +339,7 @@ const ListAccordion = ({ !child.props.right ) { return React.cloneElement(child, { - style: [ - theme.isV3 ? styles.childV3 : styles.child, - child.props.style, - ], + style: [styles.childV3, child.props.style], theme, }); } @@ -366,17 +354,11 @@ const ListAccordion = ({ ListAccordion.displayName = 'List.Accordion'; const styles = StyleSheet.create({ - container: { - padding: 8, - }, containerV3: { paddingVertical: 8, paddingRight: 24, }, - row: { - flexDirection: 'row', - alignItems: 'center', - }, + rowV3: { flexDirection: 'row', marginVertical: 6, @@ -399,9 +381,7 @@ const styles = StyleSheet.create({ itemV3: { paddingLeft: 16, }, - child: { - paddingLeft: 64, - }, + childV3: { paddingLeft: 40, }, diff --git a/src/components/List/ListIcon.tsx b/src/components/List/ListIcon.tsx index f1c7194c43..79e9e09235 100644 --- a/src/components/List/ListIcon.tsx +++ b/src/components/List/ListIcon.tsx @@ -51,23 +51,13 @@ const ListIcon = ({ const theme = useInternalTheme(themeOverrides); return ( - + ); }; 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..ae22b161db 100644 --- a/src/components/List/ListImage.tsx +++ b/src/components/List/ListImage.tsx @@ -7,17 +7,10 @@ import { ImageStyle, } from 'react-native'; -import { useInternalTheme } from '../../core/theming'; -import type { ThemeProp } from '../../types'; - export type Props = { source: ImageSourcePropType; variant?: 'image' | 'video'; style?: StyleProp; - /** - * @optional - */ - theme?: ThemeProp; }; /** @@ -38,19 +31,9 @@ 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]; } @@ -72,11 +55,6 @@ const styles = StyleSheet.create({ width: 56, height: 56, }, - video: { - width: 100, - height: 64, - marginLeft: 0, - }, videoV3: { width: 114, height: 64, diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index 467eb9b67a..46e94e9ebe 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} @@ -279,17 +266,10 @@ ListItem.displayName = 'List.Item'; 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', @@ -301,10 +281,6 @@ const styles = StyleSheet.create({ description: { fontSize: 14, }, - item: { - marginVertical: 6, - paddingLeft: 8, - }, itemV3: { paddingLeft: 16, }, diff --git a/src/components/List/ListSubheader.tsx b/src/components/List/ListSubheader.tsx index 038b86a86e..339880674c 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'; @@ -41,13 +40,10 @@ const ListSubheader = ({ maxFontSizeMultiplier, ...rest }: Props) => { - const theme = useInternalTheme(overrideTheme); + const { colors, fonts } = useInternalTheme(overrideTheme); - const textColor = theme.isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.54).rgb().string(); - - const font = theme.isV3 ? theme.fonts.bodyMedium : theme.fonts.medium; + const textColor = colors.onSurfaceVariant; + const font = fonts.bodyMedium; return ( { const stylesV3 = { marginRight: 0, @@ -47,14 +46,10 @@ export const getLeftStyles = ( return { ...styles.iconMarginLeft, ...styles.marginVerticalNone, - ...(isV3 && { ...stylesV3 }), + ...stylesV3, }; } - if (!isV3) { - return styles.iconMarginLeft; - } - return { ...styles.iconMarginLeft, ...stylesV3, @@ -63,8 +58,7 @@ export const getLeftStyles = ( export const getRightStyles = ( alignToTop: boolean, - description: Description, - isV3: boolean + description: Description ) => { const stylesV3 = { marginLeft: 16, @@ -75,14 +69,10 @@ export const getRightStyles = ( return { ...styles.iconMarginRight, ...styles.marginVerticalNone, - ...(isV3 && { ...stylesV3 }), + ...stylesV3, }; } - if (!isV3) { - return styles.iconMarginRight; - } - return { ...styles.iconMarginRight, ...stylesV3, @@ -104,16 +94,9 @@ export const getAccordionColors = ({ isExpanded?: boolean; customRippleColor?: ColorValue; }) => { - const titleColor = theme.isV3 - ? theme.colors.onSurface - : color(theme.colors.text).alpha(0.87).rgb().string(); - - const descriptionColor = theme.isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.54).rgb().string(); - + const titleColor = theme.colors.onSurface; + const descriptionColor = theme.colors.onSurfaceVariant; const titleTextColor = isExpanded ? theme.colors?.primary : titleColor; - const rippleColor = customRippleColor || color(titleTextColor).alpha(0.12).rgb().string(); diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 0e241a2c01..f1c2be9538 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -196,6 +196,7 @@ const Menu = ({ keyboardShouldPersistTaps, }: Props) => { const theme = useInternalTheme(themeOverrides); + const { colors, roundness } = theme; const insets = useSafeAreaInsets(); const [rendered, setRendered] = React.useState(visible); const [left, setLeft] = React.useState(0); @@ -611,8 +612,7 @@ const Menu = ({ }), }, ], - borderRadius: theme.roundness, - ...(!theme.isV3 && { elevation: 8 }), + borderRadius: roundness, ...(scrollableMenuHeight ? { height: scrollableMenuHeight } : {}), }; @@ -666,13 +666,13 @@ const Menu = ({ style={[ styles.shadowMenuContainer, shadowMenuContainerStyle, - theme.isV3 && { + { backgroundColor: - theme.colors.elevation[ELEVATION_LEVELS_MAP[elevation]], + colors.elevation[ELEVATION_LEVELS_MAP[elevation]], }, contentStyle, ]} - {...(theme.isV3 && { elevation })} + elevation={elevation} testID={`${testID}-surface`} theme={theme} > diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 4b8eb3740a..8578a9f2d9 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -151,21 +151,18 @@ const MenuItem = ({ hitSlop, }: Props) => { const theme = useInternalTheme(themeOverrides); + const { fonts } = theme; + const { titleColor, iconColor, rippleColor } = getMenuItemColor({ theme, disabled, customRippleColor, }); - const { isV3 } = theme; - - const containerPadding = isV3 ? 12 : 8; - - const iconWidth = isV3 ? 24 : 40; - - const minWidth = MIN_WIDTH - (isV3 ? 12 : 16); + const containerPadding = 12; + const iconWidth = 24; + const minWidth = MIN_WIDTH - 12; const maxWidth = getContentMaxWidth({ - isV3, iconWidth, leadingIcon, trailingIcon, @@ -173,7 +170,7 @@ const MenuItem = ({ const titleTextStyle = { color: titleColor, - ...(isV3 ? theme.fonts.bodyLarge : {}), + ...fonts.bodyLarge, }; const newAccessibilityState = { ...accessibilityState, disabled }; @@ -198,22 +195,15 @@ const MenuItem = ({ > {leadingIcon ? ( - + ) : null} {title} - {isV3 && trailingIcon ? ( - + {trailingIcon ? ( + ) : null} @@ -257,12 +244,6 @@ const styles = StyleSheet.create({ row: { flexDirection: 'row', }, - title: { - fontSize: 16, - }, - item: { - marginHorizontal: 8, - }, content: { justifyContent: 'center', }, diff --git a/src/components/Menu/utils.ts b/src/components/Menu/utils.ts index c1b6189ba4..fc75d693ed 100644 --- a/src/components/Menu/utils.ts +++ b/src/components/Menu/utils.ts @@ -2,7 +2,6 @@ import type { ColorValue } from 'react-native'; import color from 'color'; -import { black, white } from '../../styles/themes/v2/colors'; import type { InternalTheme } from '../../types'; import type { IconSource } from '../Icon'; @@ -10,7 +9,6 @@ export const MIN_WIDTH = 112; export const MAX_WIDTH = 280; type ContentProps = { - isV3: boolean; iconWidth: number; leadingIcon?: IconSource; trailingIcon?: IconSource; @@ -23,14 +21,7 @@ type ColorProps = { }; const getDisabledColor = (theme: InternalTheme) => { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - - return color(theme.dark ? white : black) - .alpha(0.32) - .rgb() - .string(); + return theme.colors.onSurfaceDisabled; }; const getTitleColor = ({ theme, disabled }: ColorProps) => { @@ -38,11 +29,7 @@ const getTitleColor = ({ theme, disabled }: ColorProps) => { return getDisabledColor(theme); } - if (theme.isV3) { - return theme.colors.onSurface; - } - - return color(theme.colors.text).alpha(0.87).rgb().string(); + return theme.colors.onSurface; }; const getIconColor = ({ theme, disabled }: ColorProps) => { @@ -50,11 +37,7 @@ const getIconColor = ({ theme, disabled }: ColorProps) => { return getDisabledColor(theme); } - if (theme.isV3) { - return theme.colors.onSurfaceVariant; - } - - return color(theme.colors.text).alpha(0.54).rgb().string(); + return theme.colors.onSurfaceVariant; }; const getRippleColor = ({ @@ -65,11 +48,7 @@ const getRippleColor = ({ return customRippleColor; } - if (theme.isV3) { - return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); - } - - return undefined; + return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); }; export const getMenuItemColor = ({ @@ -85,26 +64,17 @@ export const getMenuItemColor = ({ }; 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 acba4d64ea..56700adee8 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -113,8 +113,12 @@ function Modal({ testID = 'modal', }: Props) { const theme = useInternalTheme(themeOverrides); + const { + animation: { scale }, + colors: { backdrop }, + } = theme; + const onDismissCallback = useLatestCallback(onDismiss); - const { scale } = theme.animation; const { top, bottom } = useSafeAreaInsets(); const opacity = useAnimatedValue(visible ? 1 : 0); const [visibleInternal, setVisibleInternal] = React.useState(visible); @@ -201,7 +205,7 @@ function Modal({ style={[ styles.backdrop, { - backgroundColor: theme.colors?.backdrop, + backgroundColor: backdrop, opacity, }, ]} diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx index 790204f4f8..16b67221ce 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'; @@ -85,7 +83,11 @@ const ProgressBar = ({ ...rest }: Props) => { const isWeb = Platform.OS === 'web'; - const theme = useInternalTheme(themeOverrides); + const { + animation: { scale }, + colors, + } = useInternalTheme(themeOverrides); + const { current: timer } = React.useRef( new Animated.Value(0) ); @@ -98,8 +100,6 @@ const ProgressBar = ({ const indeterminateAnimation = React.useRef(null); - const { scale } = theme.animation; - React.useEffect(() => { passedAnimatedValue.current = animatedValue; }); @@ -190,10 +190,8 @@ const ProgressBar = ({ setWidth(event.nativeEvent.layout.width); }; - const tintColor = color || theme.colors?.primary; - const trackTintColor = theme.isV3 - ? theme.colors.surfaceVariant - : setColor(tintColor).alpha(0.38).rgb().string(); + const tintColor = color || colors?.primary; + const trackTintColor = 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 disabledTextColor = theme.colors.onSurfaceDisabled; const textAlign = isLeading ? 'right' : 'left'; const computedStyle = { @@ -232,12 +230,7 @@ const RadioButtonItem = ({ {isLeading && radioButton} {label} @@ -270,7 +263,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 11c79d2e9a..f55c2b9dac 100644 --- a/src/components/Searchbar.tsx +++ b/src/components/Searchbar.tsx @@ -227,34 +227,26 @@ const Searchbar = forwardRef( onClearIconPress?.(e); }; - const { roundness, dark, isV3, fonts } = theme; + const { roundness, dark, fonts, colors } = 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 placeholderTextColor = colors.onSurface; + const textColor = colors.onSurfaceVariant; + const iconColor = customIconColor || colors.onSurfaceVariant; const rippleColor = customRippleColor || color(textColor).alpha(0.32).rgb().string(); const traileringRippleColor = customTraileringRippleColor || color(textColor).alpha(0.32).rgb().string(); - const font = isV3 - ? { - ...fonts.bodyLarge, - lineHeight: Platform.select({ - ios: 0, - default: fonts.bodyLarge.lineHeight, - }), - } - : theme.fonts.regular; + 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,17 +256,15 @@ const Searchbar = forwardRef( return ( ( ...font, ...Platform.select({ web: { outline: 'none' } }), }, - isV3 && (isBarMode ? styles.barModeInput : styles.viewModeInput), + isBarMode ? styles.barModeInput : styles.viewModeInput, inputStyle, ]} placeholder={placeholder || ''} placeholderTextColor={placeholderTextColor} - selectionColor={theme.colors?.primary} + selectionColor={colors.primary} underlineColorAndroid="transparent" returnKeyType="search" keyboardAppearance={dark ? 'dark' : 'light'} @@ -324,7 +314,7 @@ const Searchbar = forwardRef( {loading ? ( ) : ( // Clear icon should be always rendered within Searchbar – it's transparent, @@ -335,8 +325,8 @@ const Searchbar = forwardRef( pointerEvents={value ? 'auto' : 'none'} testID={`${testID}-icon-wrapper`} style={[ - isV3 && !value && styles.v3ClearIcon, - isV3 && right !== undefined && styles.v3ClearIconHidden, + !value && styles.v3ClearIcon, + right !== undefined && styles.v3ClearIconHidden, ]} > ( clearIcon || (({ size, color }) => ( ( accessibilityRole="button" borderless onPress={onTraileringIconPress} - iconColor={traileringIconColor || theme.colors.onSurfaceVariant} + iconColor={traileringIconColor || colors.onSurfaceVariant} rippleColor={traileringRippleColor} icon={traileringIcon} accessibilityLabel={traileringIconAccessibilityLabel} @@ -376,13 +366,13 @@ const Searchbar = forwardRef( ) : null} {isBarMode && right?.({ color: textColor, style: styles.rightStyle, testID })} - {isV3 && !isBarMode && showDivider && ( + {!isBarMode && showDivider && ( { - const width = getSegmentedButtonBorderWidth({ theme }); + const width = getSegmentedButtonBorderWidth(); const isDisabled = buttons[index]?.disabled; const isNextDisabled = buttons[index + 1]?.disabled; @@ -60,16 +56,14 @@ export const getDisabledSegmentedButtonStyle = ({ export const getSegmentedButtonBorderRadius = ({ segment, - theme, }: { - theme: InternalTheme; segment?: 'first' | 'last'; }): ViewStyle => { if (segment === 'first') { return { borderTopRightRadius: 0, borderBottomRightRadius: 0, - ...(theme.isV3 && { borderEndWidth: 0 }), + borderEndWidth: 0, }; } else if (segment === 'last') { return { @@ -79,51 +73,27 @@ export const getSegmentedButtonBorderRadius = ({ } else { return { borderRadius: 0, - ...(theme.isV3 && { borderEndWidth: 0 }), + borderEndWidth: 0, }; } }; const getSegmentedButtonBackgroundColor = ({ checked, theme }: BaseProps) => { 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.surfaceDisabled; } - - return color(theme.dark ? white : black) - .alpha(0.29) - .rgb() - .string(); + return theme.colors.outline; }; -const getSegmentedButtonBorderWidth = ({ - theme, -}: Omit) => { - if (theme.isV3) { - return 1; - } - - return StyleSheet.hairlineWidth; +const getSegmentedButtonBorderWidth = () => { + return 1; }; const getSegmentedButtonTextColor = ({ @@ -133,21 +103,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.onSurfaceDisabled; + } + 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 = ({ @@ -173,7 +135,7 @@ export const getSegmentedButtonColors = ({ checkedColor, uncheckedColor, }); - const borderWidth = getSegmentedButtonBorderWidth({ theme }); + const borderWidth = getSegmentedButtonBorderWidth(); return { backgroundColor, borderColor, textColor, borderWidth }; }; diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx index 137a69ae82..f741ec0bd1 100644 --- a/src/components/Snackbar.tsx +++ b/src/components/Snackbar.tsx @@ -166,6 +166,12 @@ const Snackbar = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); + const { + animation: { scale }, + colors: { inverseOnSurface, inversePrimary, inverseSurface }, + roundness, + } = theme; + const { bottom, right, left } = useSafeAreaInsets(); const { current: opacity } = React.useRef( @@ -175,8 +181,6 @@ const Snackbar = ({ const [hidden, setHidden] = React.useState(!visible); - const { scale } = theme.animation; - const animateShow = useLatestCallback(() => { if (hideTimeout.current) clearTimeout(hideTimeout.current); @@ -243,8 +247,6 @@ const Snackbar = ({ } }, [visible, handleOnVisible, handleOnHidden]); - const { colors, roundness, isV3 } = theme; - if (hidden) { return null; } @@ -257,12 +259,6 @@ const Snackbar = ({ ...actionProps } = action || {}; - const buttonTextColor = isV3 ? colors.inversePrimary : colors.accent; - const textColor = isV3 ? colors.inverseOnSurface : colors?.surface; - const backgroundColor = isV3 ? colors.inverseSurface : colors?.onSurface; - - const isIconButton = isV3 && onIconPress; - const marginLeft = action ? -12 : -16; const wrapperPaddings = { @@ -275,7 +271,7 @@ const Snackbar = ({ return ( {children} @@ -301,10 +297,9 @@ const Snackbar = ({ accessibilityLiveRegion="polite" theme={theme} style={[ - !isV3 && styles.elevation, styles.container, { - backgroundColor, + backgroundColor: inverseSurface, borderRadius: roundness, opacity: opacity, transform: [ @@ -321,11 +316,11 @@ const Snackbar = ({ style, ]} testID={testID} - {...(isV3 && { elevation })} + elevation={elevation} {...rest} > {renderChildrenWithWrapper()} - {(action || isIconButton) && ( + {(action || onIconPress) && ( {action ? ( + ).toJSON(); expect(tree).toMatchSnapshot(); @@ -113,7 +113,7 @@ it('renders button with color', () => { it('renders button with button color', () => { const tree = render( - + ).toJSON(); expect(tree).toMatchSnapshot(); @@ -511,7 +511,7 @@ describe('getButtonColors - text color', () => { dark: true, }) ).toMatchObject({ - textColor: white, + textColor: MD3Colors.primary100, }); }) ); diff --git a/src/components/__tests__/IconButton.test.tsx b/src/components/__tests__/IconButton.test.tsx index 11f47cb49c..48961548fc 100644 --- a/src/components/__tests__/IconButton.test.tsx +++ b/src/components/__tests__/IconButton.test.tsx @@ -5,7 +5,7 @@ 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 { MD3Colors } from '../../styles/themes/v3/tokens'; import IconButton from '../IconButton/IconButton'; import { getIconButtonColor } from '../IconButton/utils'; @@ -26,7 +26,7 @@ it('renders icon button by default', () => { it('renders icon button with color', () => { const tree = render( - + ).toJSON(); expect(tree).toMatchSnapshot(); diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx index 9695b3c186..b99d383636 100644 --- a/src/components/__tests__/ListAccordion.test.tsx +++ b/src/components/__tests__/ListAccordion.test.tsx @@ -5,7 +5,7 @@ import { render } from '@testing-library/react-native'; import color from 'color'; import { getTheme } from '../../core/theming'; -import { red500 } from '../../styles/themes/v2/colors'; +import { MD3Colors } from '../../styles/themes/v3/tokens'; import ListAccordion from '../List/ListAccordion'; import ListAccordionGroup from '../List/ListAccordionGroup'; import ListIcon from '../List/ListIcon'; @@ -14,7 +14,7 @@ import { getAccordionColors } from '../List/utils'; const styles = StyleSheet.create({ coloring: { - color: red500, + color: MD3Colors.error50, }, }); diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx index 036697f9ec..507b3179d6 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 { MD3Colors } from '../../styles/themes/v3/tokens'; import Chip from '../Chip/Chip'; import IconButton from '../IconButton/IconButton'; import ListIcon from '../List/ListIcon'; @@ -15,7 +15,7 @@ const styles = StyleSheet.create({ fontSize: 20, }, description: { - color: red500, + color: MD3Colors.error50, }, content: { paddingLeft: 0, diff --git a/src/components/__tests__/ListSection.test.tsx b/src/components/__tests__/ListSection.test.tsx index 8cc1578b8f..4a21b1b367 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'; +import { MD3Colors } from '../../styles/themes/v3/tokens'; import ListIcon from '../List/ListIcon'; import ListItem from '../List/ListItem'; import ListSection from '../List/ListSection'; @@ -11,7 +11,7 @@ import ListSubheader from '../List/ListSubheader'; const styles = StyleSheet.create({ itemColor: { - color: red500, + color: MD3Colors.error50, }, }); diff --git a/src/components/__tests__/Snackbar.test.tsx b/src/components/__tests__/Snackbar.test.tsx index f520faa466..4ef9e2f337 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 { MD3Colors } from '../../styles/themes/v3/tokens'; import Snackbar from '../Snackbar'; const styles = StyleSheet.create({ @@ -12,10 +12,15 @@ const styles = StyleSheet.create({ alignItems: 'center', }, iconView: { - backgroundColor: red200, + backgroundColor: MD3Colors.error20, padding: 15, }, - text: { color: white, marginLeft: 10, flexWrap: 'wrap', flexShrink: 1 }, + text: { + color: MD3Colors.primary100, + marginLeft: 10, + flexWrap: 'wrap', + flexShrink: 1, + }, }); jest.mock('react-native-safe-area-context', () => ({ diff --git a/src/components/__tests__/Switch.test.tsx b/src/components/__tests__/Switch.test.tsx index dfaa028b43..4b42e82124 100644 --- a/src/components/__tests__/Switch.test.tsx +++ b/src/components/__tests__/Switch.test.tsx @@ -5,16 +5,16 @@ import { render } from '@testing-library/react-native'; import color from 'color'; import { getTheme } from '../../core/theming'; +import { MD3Colors } from '../../styles/themes/v3/tokens'; +import Switch from '../Switch/Switch'; import { white, black, grey400, grey50, grey800, - pink500, grey700, -} from '../../styles/themes/v2/colors'; -import Switch from '../Switch/Switch'; +} from '../Switch/utils'; import { getSwitchColor } from '../Switch/utils'; it('renders on switch', () => { @@ -36,7 +36,7 @@ it('renders disabled switch', () => { }); it('renders switch with color', () => { - const tree = render().toJSON(); + const tree = render().toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx index fabecfb45a..0e91b4da95 100644 --- a/src/components/__tests__/TextInput.test.tsx +++ b/src/components/__tests__/TextInput.test.tsx @@ -6,7 +6,7 @@ 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'; +import { MD3Colors } from '../../styles/themes/v3/tokens'; import { getFlatInputColors, getOutlinedInputColors, @@ -15,7 +15,7 @@ import TextInput, { Props } from '../TextInput/TextInput'; const style = StyleSheet.create({ inputStyle: { - color: red500, + color: MD3Colors.error50, }, centered: { textAlign: 'center', @@ -119,7 +119,7 @@ it('correctly applies cursorColor prop', () => { label="Flat input" placeholder="Type something" value={'Some test value'} - cursorColor={red500 as string} + cursorColor={MD3Colors.error50} /> ); diff --git a/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap index c73f2ae180..3d6c73fba7 100644 --- a/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -26,7 +26,7 @@ exports[`renders avatar with icon 1`] = ` style={ [ { - "color": "#ffffff", + "color": "rgba(255, 255, 255, 1)", "fontSize": 38.4, }, [ @@ -55,7 +55,7 @@ exports[`renders avatar with icon and custom background color 1`] = ` style={ [ { - "backgroundColor": "#f44336", + "backgroundColor": "rgba(220, 54, 46, 1)", "borderRadius": 32, "height": 64, "width": 64, @@ -76,7 +76,7 @@ exports[`renders avatar with icon and custom background color 1`] = ` style={ [ { - "color": "#ffffff", + "color": "rgba(255, 255, 255, 1)", "fontSize": 38.4, }, [ @@ -172,7 +172,7 @@ exports[`renders avatar with text 1`] = ` "textAlignVertical": "center", }, { - "color": "#ffffff", + "color": "rgba(255, 255, 255, 1)", "fontSize": 32, "lineHeight": 64, }, @@ -191,7 +191,7 @@ exports[`renders avatar with text and custom background color 1`] = ` style={ [ { - "backgroundColor": "#f44336", + "backgroundColor": "rgba(220, 54, 46, 1)", "borderRadius": 32, "height": 64, "width": 64, @@ -226,7 +226,7 @@ exports[`renders avatar with text and custom background color 1`] = ` "textAlignVertical": "center", }, { - "color": "#ffffff", + "color": "rgba(255, 255, 255, 1)", "fontSize": 32, "lineHeight": 64, }, @@ -334,7 +334,7 @@ exports[`renders avatar with text and custom size 1`] = ` "textAlignVertical": "center", }, { - "color": "#ffffff", + "color": "rgba(255, 255, 255, 1)", "fontSize": 48, "lineHeight": 96, }, diff --git a/src/components/__tests__/__snapshots__/Badge.test.tsx.snap b/src/components/__tests__/__snapshots__/Badge.test.tsx.snap index 571b6ac583..3900230ad4 100644 --- a/src/components/__tests__/__snapshots__/Badge.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Badge.test.tsx.snap @@ -57,7 +57,7 @@ exports[`renders badge in different color 1`] = ` style={ { "alignSelf": "flex-end", - "backgroundColor": "#f44336", + "backgroundColor": "rgba(220, 54, 46, 1)", "borderRadius": 10, "color": "rgba(255, 255, 255, 1)", "fontSize": 10, diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap index 53201fd3eb..57553b7201 100644 --- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap @@ -305,7 +305,7 @@ exports[`renders button with button color 1`] = ` collapsable={false} style={ { - "backgroundColor": "#e91e63", + "backgroundColor": "rgba(152, 105, 119, 1)", "borderRadius": 20, "shadowColor": "#000", "shadowOffset": { @@ -322,7 +322,7 @@ exports[`renders button with button color 1`] = ` collapsable={false} style={ { - "backgroundColor": "#e91e63", + "backgroundColor": "rgba(152, 105, 119, 1)", "borderColor": "transparent", "borderRadius": 20, "borderStyle": "solid", @@ -576,7 +576,7 @@ exports[`renders button with color 1`] = ` undefined, false, { - "color": "#e91e63", + "color": "rgba(152, 105, 119, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", diff --git a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap index 78510d683f..f364d08de6 100644 --- a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap @@ -387,7 +387,7 @@ exports[`renders icon button with color 1`] = ` style={ [ { - "color": "#e91e63", + "color": "rgba(152, 105, 119, 1)", "fontSize": 24, }, [ diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap index 0857e59773..10a4c50ea3 100644 --- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap @@ -578,7 +578,7 @@ exports[`renders list accordion with custom title and description styles 1`] = ` "color": "rgba(28, 27, 31, 1)", }, { - "color": "#f44336", + "color": "rgba(220, 54, 46, 1)", }, ], ] @@ -612,7 +612,7 @@ exports[`renders list accordion with custom title and description styles 1`] = ` "color": "rgba(73, 69, 79, 1)", }, { - "color": "#f44336", + "color": "rgba(220, 54, 46, 1)", }, ], ] diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap index 713bf13fe8..e6efa5b754 100644 --- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap @@ -450,7 +450,7 @@ exports[`renders list item with custom title and description styles 1`] = ` "color": "rgba(73, 69, 79, 1)", }, { - "color": "#f44336", + "color": "rgba(220, 54, 46, 1)", }, ], ] @@ -1194,7 +1194,7 @@ exports[`renders with a description with typeof number 1`] = ` "color": "rgba(73, 69, 79, 1)", }, { - "color": "#f44336", + "color": "rgba(220, 54, 46, 1)", }, ], ] diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap index a2ed0f8c8e..eaea31d051 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap @@ -207,7 +207,7 @@ exports[`renders list section with custom title style 1`] = ` "lineHeight": 20, }, { - "color": "#f44336", + "color": "rgba(220, 54, 46, 1)", }, ], ], diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap index b859166348..7c144f5760 100644 --- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap @@ -179,7 +179,7 @@ exports[`renders snackbar with View & Text as a child 1`] = ` `; diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index e77d40b7f1..91d21456d1 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -444,7 +444,7 @@ exports[`correctly applies a component as the text label 1`] = ` @@ -490,7 +490,7 @@ exports[`correctly applies a component as the text label 1`] = ` @@ -732,7 +732,7 @@ exports[`correctly applies cursorColor prop 1`] = ` Date: Wed, 14 May 2025 12:34:39 +0200 Subject: [PATCH 10/11] fix: animation in bottom sheet --- .../BottomNavigation/BottomNavigation.tsx | 9 +-------- .../BottomNavigation/BottomNavigationBar.tsx | 14 ++------------ .../views/MaterialBottomTabView.tsx | 1 - 3 files changed, 3 insertions(+), 21 deletions(-) diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx index 44282e6e6f..9355461ae3 100644 --- a/src/components/BottomNavigation/BottomNavigation.tsx +++ b/src/components/BottomNavigation/BottomNavigation.tsx @@ -179,10 +179,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. */ @@ -327,7 +323,6 @@ const BottomNavigation = ({ renderTouchable, getLabelText, getBadge, - getColor, getAccessibilityLabel, getTestID, activeColor, @@ -406,7 +401,7 @@ const BottomNavigation = ({ ...navigationState.routes.map((_, i) => Animated.timing(tabsPositionAnims[i], { toValue: i === index ? 0 : i >= index ? 1 : -1, - duration: shifting ? 150 * scale : 0, + duration: 150 * scale, useNativeDriver: true, easing: sceneAnimationEasing, }) @@ -426,7 +421,6 @@ const BottomNavigation = ({ }); }, [ - shifting, navigationState.routes, offsetsAnims, scale, @@ -579,7 +573,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 674b061083..909b9cca84 100644 --- a/src/components/BottomNavigation/BottomNavigationBar.tsx +++ b/src/components/BottomNavigation/BottomNavigationBar.tsx @@ -37,10 +37,6 @@ type BaseRoute = { focusedIcon?: IconSource; unfocusedIcon?: IconSource; badge?: string | number | boolean; - /** - * @deprecated In v5.x works only with theme version 2. - */ - color?: string; accessibilityLabel?: string; testID?: string; lazy?: boolean; @@ -94,7 +90,6 @@ export type Props = { * - `title`: title of the route to use as the tab label * - `focusedIcon`: icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x * - `unfocusedIcon`: icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3 - * - `color`: color to use as background color for shifting bottom navigation @deprecatedProperty In v5.x works only with theme version 2. * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text. * - `accessibilityLabel`: accessibility label for the tab button * - `testID`: test id for the tab button @@ -146,10 +141,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. */ @@ -416,13 +407,13 @@ const BottomNavigationBar = ({ Animated.parallel([ Animated.timing(rippleAnim, { toValue: 1, - duration: shifting ? 400 * scale : 0, + duration: 400 * scale, useNativeDriver: true, }), ...navigationState.routes.map((_, i) => Animated.timing(tabsAnims[i], { toValue: i === index ? 1 : 0, - duration: shifting ? 150 * scale : 0, + duration: 150 * scale, useNativeDriver: true, easing: animationEasing, }) @@ -438,7 +429,6 @@ const BottomNavigationBar = ({ }, [ rippleAnim, - shifting, scale, navigationState.routes, tabsAnims, 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 From dad5b7cd55adaf6051b4718e21a85e7f8e70930a Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 14 May 2025 12:39:51 +0200 Subject: [PATCH 11/11] fix: revert gitignore --- .gitignore | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index ff76d64fd2..6ece42c049 100644 --- a/.gitignore +++ b/.gitignore @@ -71,6 +71,4 @@ lib/ !.yarn/plugins !.yarn/releases !.yarn/sdks -!.yarn/versions - -example/ios/* \ No newline at end of file +!.yarn/versions \ No newline at end of file