diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 886044db0e..77048a1101 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -138,6 +138,7 @@ const config = { ListItem: 'List/ListItem', ListSection: 'List/ListSection', ListSubheader: 'List/ListSubheader', + ListImage: 'List/ListImage', }, Menu: { Menu: 'Menu/Menu', 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/ListSectionExample.tsx b/example/src/Examples/ListSectionExample.tsx index dd15ab29e2..4f1e99f4fe 100644 --- a/example/src/Examples/ListSectionExample.tsx +++ b/example/src/Examples/ListSectionExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, Image, View } from 'react-native'; -import { Caption, List, Text, Chip, Divider } from 'react-native-paper'; +import { List, Text, Chip, Divider } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; const ListSectionExample = () => { @@ -97,7 +97,7 @@ const ListSectionExample = () => { > List Item - Yesterday + Yesterday )} description={({ diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx index 6a910bc348..76fc3b4a02 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 [visible, setVisible] = React.useState(true); - const [progress, setProgress] = React.useState(0.3); const theme = useTheme(); + + const [visible, setVisible] = React.useState(true); + const [progress, setProgress] = React.useState(0.3); const { current: progressBarValue } = React.useRef(new Animated.Value(0)); const runCustomAnimation = () => { 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..1f899975c4 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 { MD3Colors } from '../../styles/themes/v3/tokens'; import type { InternalTheme, ThemeProp } from '../../types'; export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned'; @@ -24,49 +23,36 @@ 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; } if (isDark) { - return white; - } - - if (isV3) { - return undefined; + return MD3Colors.primary100; } - 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..db07b0f9ae 100644 --- a/src/components/Avatar/AvatarIcon.tsx +++ b/src/components/Avatar/AvatarIcon.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import { useInternalTheme } from '../../core/theming'; -import { white } from '../../styles/themes/v2/colors'; +import { MD3Colors } from '../../styles/themes/v3/tokens'; import type { ThemeProp } from '../../types'; import getContrastingColor from '../../utils/getContrastingColor'; import Icon, { IconSource } from '../Icon'; @@ -49,12 +49,18 @@ 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 ?? - getContrastingColor(backgroundColor, white, 'rgba(0, 0, 0, .54)'); + getContrastingColor( + backgroundColor, + MD3Colors.primary100, + 'rgba(0, 0, 0, .54)' + ); return ( { - 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 ?? - getContrastingColor(backgroundColor, white, 'rgba(0, 0, 0, .54)'); + getContrastingColor( + backgroundColor, + MD3Colors.primary100, + 'rgba(0, 0, 0, .54)' + ); const { fontScale } = useWindowDimensions(); return ( diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index 452d098555..6e7fd49772 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: { error, onError }, } = 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 = error, ...restStyle } = (StyleSheet.flatten( + style + ) || {}) as TextStyle; return ( { const theme = useInternalTheme(themeOverrides); + const { + animation: { scale }, + colors: { onSurface, primary }, + } = theme; + const { current: position } = React.useRef( new Animated.Value(visible ? 1 : 0) ); @@ -145,8 +150,6 @@ const Banner = ({ const showCallback = useLatestCallback(onShowAnimationFinished); const hideCallback = useLatestCallback(onHideAnimationFinished); - const { scale } = theme.animation; - const opacity = position.interpolate({ inputRange: [0, 0.1, 1], outputRange: [0, 1, 1], @@ -192,9 +195,9 @@ const Banner = ({ return ( @@ -224,9 +227,7 @@ const Banner = ({ style={[ styles.message, { - color: theme.isV3 - ? theme.colors.onSurface - : theme.colors.text, + color: onSurface, }, ]} accessibilityLiveRegion={visible ? 'polite' : 'none'} @@ -243,7 +244,7 @@ const Banner = ({ compact mode="text" style={styles.button} - textColor={theme.colors?.primary} + textColor={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..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, @@ -343,19 +338,21 @@ const BottomNavigation = ({ onTabPress, onTabLongPress, onIndexChange, - shifting: shiftingProp, + shifting: shiftingProp = false, safeAreaInsets, labelMaxFontSizeMultiplier = 1, - compact: compactProp, + compact = false, testID = 'bottom-navigation', theme: themeOverrides, getLazy = ({ route }: { route: Route }) => route.lazy, }: 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 { + animation: { scale }, + colors, + } = theme; + + let shifting = shiftingProp; if (shifting && navigationState.routes.length < 2) { shifting = false; @@ -404,7 +401,7 @@ const BottomNavigation = ({ ...navigationState.routes.map((_, i) => Animated.timing(tabsPositionAnims[i], { toValue: i === index ? 0 : i >= index ? 1 : -1, - duration: theme.isV3 || shifting ? 150 * scale : 0, + duration: 150 * scale, useNativeDriver: true, easing: sceneAnimationEasing, }) @@ -424,13 +421,11 @@ const BottomNavigation = ({ }); }, [ - shifting, navigationState.routes, offsetsAnims, scale, tabsPositionAnims, sceneAnimationEasing, - theme, ] ); @@ -488,7 +483,6 @@ const BottomNavigation = ({ }); const { routes } = navigationState; - const { colors } = theme; return ( @@ -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 1453b07ebf..909b9cca84 100644 --- a/src/components/BottomNavigation/BottomNavigationBar.tsx +++ b/src/components/BottomNavigation/BottomNavigationBar.tsx @@ -11,7 +11,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { @@ -20,8 +19,6 @@ import { getLabelColor, } from './utils'; import { useInternalTheme } from '../../core/theming'; -import overlay from '../../styles/overlay'; -import { black, white } from '../../styles/themes/v2/colors'; import type { ThemeProp } from '../../types'; import useAnimatedValue from '../../utils/useAnimatedValue'; import useAnimatedValueArray from '../../utils/useAnimatedValueArray'; @@ -40,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; @@ -97,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 @@ -149,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. */ @@ -321,7 +309,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, @@ -334,19 +321,21 @@ const BottomNavigationBar = ({ animationEasing, onTabPress, onTabLongPress, - shifting: shiftingProp, + shifting: shiftingProp = false, safeAreaInsets, labelMaxFontSizeMultiplier = 1, - compact: compactProp, + compact = false, testID = 'bottom-navigation-bar', theme: themeOverrides, }: Props) => { 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 { + animation: { scale }, + colors: { elevation: elevationColors, secondaryContainer }, + fonts: { labelMedium }, + } = theme; + let shifting = shiftingProp; if (shifting && navigationState.routes.length < 2) { shifting = false; @@ -418,13 +407,13 @@ const BottomNavigationBar = ({ Animated.parallel([ Animated.timing(rippleAnim, { toValue: 1, - duration: theme.isV3 || shifting ? 400 * scale : 0, + duration: 400 * scale, useNativeDriver: true, }), ...navigationState.routes.map((_, i) => Animated.timing(tabsAnims[i], { toValue: i === index ? 1 : 0, - duration: theme.isV3 || shifting ? 150 * scale : 0, + duration: 150 * scale, useNativeDriver: true, easing: animationEasing, }) @@ -440,8 +429,6 @@ const BottomNavigationBar = ({ }, [ rippleAnim, - theme.isV3, - shifting, scale, navigationState.routes, tabsAnims, @@ -479,62 +466,28 @@ const BottomNavigationBar = ({ }; const { routes } = navigationState; - const { colors, dark: isDarkTheme, mode, isV3 } = theme; - - const { backgroundColor: customBackground, elevation = 4 } = - (StyleSheet.flatten(style) || {}) as { - elevation?: number; - backgroundColor?: ColorValue; - }; - - const approxBackgroundColor = customBackground - ? customBackground - : isDarkTheme && mode === 'adaptive' - ? overlay(elevation, colors?.surface) - : colors?.primary; - - const v2BackgroundColorInterpolation = shifting - ? indexAnim.interpolate({ - inputRange: routes.map((_, i) => i), - // FIXME: does outputRange support ColorValue or just strings? - // @ts-expect-error - outputRange: routes.map( - (route) => getColor({ route }) || approxBackgroundColor - ), - }) - : approxBackgroundColor; - const backgroundColor = isV3 - ? customBackground || theme.colors.elevation.level2 - : shifting - ? v2BackgroundColorInterpolation - : approxBackgroundColor; - - const isDark = - typeof approxBackgroundColor === 'string' - ? !color(approxBackgroundColor).isLight() - : true; + const { backgroundColor: customBackground } = (StyleSheet.flatten(style) || + {}) as { + elevation?: number; + backgroundColor?: ColorValue; + }; - const textColor = isDark ? white : black; + const backgroundColor = customBackground || elevationColors.level2; const activeTintColor = getActiveTintColor({ activeColor, - defaultColor: textColor, theme, }); const inactiveTintColor = getInactiveTintColor({ inactiveColor, - defaultColor: textColor, theme, }); - const touchColor = color(activeTintColor).alpha(0.12).rgb().string(); const maxTabWidth = routes.length > 3 ? MIN_TAB_WIDTH : MAX_TAB_WIDTH; const maxTabBarWidth = maxTabWidth * routes.length; - const rippleSize = layout.width / 4; - const insets = { left: safeAreaInsets?.left ?? left, right: safeAreaInsets?.right ?? right, @@ -543,10 +496,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 @@ -683,7 +589,6 @@ const BottomNavigationBar = ({ tintColor: activeTintColor, hasColor: Boolean(activeColor), focused, - defaultColor: textColor, theme, }); @@ -691,55 +596,50 @@ const BottomNavigationBar = ({ tintColor: inactiveTintColor, hasColor: Boolean(inactiveColor), focused, - defaultColor: textColor, theme, }); const badgeStyle = { - top: !isV3 ? -2 : typeof badge === 'boolean' ? 4 : 2, + top: typeof badge === 'boolean' ? 4 : 2, right: - (badge != null && typeof badge !== 'boolean' + badge != null && typeof badge !== 'boolean' ? String(badge).length * -2 - : 0) - (!isV3 ? 2 : 0), + : 0, }; - const isLegacyOrV3Shifting = !isV3 || (isV3 && shifting && labeled); - - const font = isV3 ? theme.fonts.labelMedium : {}; + const isLegacyOrV3Shifting = shifting && labeled; 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 && ( ({ scaleX: outlineScale, }, ], - backgroundColor: theme.colors.secondaryContainer, + backgroundColor: secondaryContainer, }, activeIndicatorStyle, ]} @@ -758,7 +658,6 @@ const BottomNavigationBar = ({ ({ ({ ) : ( ({ {typeof badge === 'boolean' ? ( - + ) : ( {badge} @@ -820,12 +718,7 @@ const BottomNavigationBar = ({ {labeled ? ( - + ({ styles.label, { color: activeLabelColor, - ...font, + ...labelMedium, }, ]} > @@ -884,7 +777,7 @@ const BottomNavigationBar = ({ styles.label, { color: inactiveLabelColor, - ...font, + ...labelMedium, }, ]} > @@ -894,9 +787,7 @@ const BottomNavigationBar = ({ )} - ) : ( - !isV3 && - )} + ) : null} ), }); @@ -931,24 +822,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 +836,6 @@ const styles = StyleSheet.create({ iconWrapper: { ...StyleSheet.absoluteFillObject, alignItems: 'center', - }, - v3IconWrapper: { top: 4, }, labelContainer: { @@ -1001,7 +877,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..280f3e89be 100644 --- a/src/components/BottomNavigation/utils.ts +++ b/src/components/BottomNavigation/utils.ts @@ -1,70 +1,63 @@ -import color from 'color'; import type { InternalTheme } from 'src/types'; -import type { black, white } from '../../styles/themes/v2/colors'; - type BaseProps = { - defaultColor: typeof black | typeof white; theme: InternalTheme; }; export const getActiveTintColor = ({ activeColor, - defaultColor, theme, }: BaseProps & { activeColor: string | undefined; }) => { + 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..52eb2e9c99 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -199,7 +199,7 @@ const Button = ( delayLongPress, style, theme: themeOverrides, - uppercase: uppercaseProp, + uppercase = false, contentStyle, labelStyle, testID = 'button', @@ -212,14 +212,18 @@ const Button = ( ref: React.ForwardedRef ) => { const theme = useInternalTheme(themeOverrides); + const { + roundness, + animation, + fonts: { labelLarge }, + } = theme; + const isMode = React.useCallback( (modeToCompare: ButtonMode) => { return mode === modeToCompare; }, [mode] ); - const { roundness, isV3, animation } = theme; - const uppercase = uppercaseProp ?? !theme.isV3; const isWeb = Platform.OS === 'web'; const hasPassedTouchHandler = hasTouchHandler({ @@ -229,10 +233,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 +253,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 +266,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 +283,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,27 +314,23 @@ const Button = ( const { color: customLabelColor, fontSize: customLabelSize } = StyleSheet.flatten(labelStyle) || {}; - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; - const textStyle = { color: textColor, - ...font, + ...labelLarge, }; const iconStyle = 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 +345,9 @@ const Button = ( compact && styles.compact, buttonStyle, style, - !isV3 && !disabled && { elevation }, ] as Animated.WithAnimatedValue> } - {...(isV3 && { elevation: elevation })} + elevation={elevation} > { + const { + colors: { surfaceDisabled, elevation, primary, secondaryContainer }, + } = theme; + if (customButtonColor && !disabled) { return customButtonColor; } - if (theme.isV3) { - if (disabled) { - if (isMode('outlined') || isMode('text')) { - return 'transparent'; - } - - return theme.colors.surfaceDisabled; - } - - if (isMode('elevated')) { - return theme.colors.elevation.level1; + if (disabled) { + if (isMode('outlined') || isMode('text')) { + return 'transparent'; } - if (isMode('contained')) { - return theme.colors.primary; - } + return surfaceDisabled; + } - if (isMode('contained-tonal')) { - return theme.colors.secondaryContainer; - } + if (isMode('elevated')) { + return elevation.level1; } if (isMode('contained')) { - if (disabled) { - return color(theme.dark ? white : black) - .alpha(0.12) - .rgb() - .string(); - } + return primary; + } - return theme.colors.primary; + if (isMode('contained-tonal')) { + return secondaryContainer; } return 'transparent'; @@ -101,85 +92,63 @@ const getButtonTextColor = ({ backgroundColor: string; dark?: boolean; }) => { + const { + colors: { onSurfaceDisabled, primary, onPrimary, onSecondaryContainer }, + } = theme; if (customTextColor && !disabled) { return customTextColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (typeof dark === 'boolean') { - if ( - isMode('contained') || - isMode('contained-tonal') || - isMode('elevated') - ) { - return isDark({ dark, backgroundColor }) ? white : black; - } - } - - if (isMode('outlined') || isMode('text') || isMode('elevated')) { - return theme.colors.primary; - } - - if (isMode('contained')) { - return theme.colors.onPrimary; - } + if (disabled) { + return onSurfaceDisabled; + } - if (isMode('contained-tonal')) { - return theme.colors.onSecondaryContainer; + if (typeof dark === 'boolean') { + if ( + isMode('contained') || + isMode('contained-tonal') || + isMode('elevated') + ) { + return isDark({ dark, backgroundColor }) + ? MD3Colors.primary100 + : MD3Colors.primary0; } } - if (disabled) { - return color(theme.dark ? white : black) - .alpha(0.32) - .rgb() - .string(); + if (isMode('outlined') || isMode('text') || isMode('elevated')) { + return primary; } if (isMode('contained')) { - return isDark({ dark, backgroundColor }) ? white : black; + return onPrimary; + } + + if (isMode('contained-tonal')) { + return onSecondaryContainer; } - return theme.colors.primary; + return primary; }; const getButtonBorderColor = ({ isMode, disabled, theme }: BaseProps) => { - if (theme.isV3) { - if (disabled && isMode('outlined')) { - return theme.colors.surfaceDisabled; - } + const { + colors: { surfaceDisabled, outline }, + } = theme; - if (isMode('outlined')) { - return theme.colors.outline; - } + if (disabled && isMode('outlined')) { + return surfaceDisabled; } if (isMode('outlined')) { - return color(theme.dark ? white : black) - .alpha(0.29) - .rgb() - .string(); + return 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/CardCover.tsx b/src/components/Card/CardCover.tsx index e0147381dc..54ecf46ae8 100644 --- a/src/components/Card/CardCover.tsx +++ b/src/components/Card/CardCover.tsx @@ -3,7 +3,6 @@ import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import { getCardCoverStyle } from './utils'; import { useInternalTheme } from '../../core/theming'; -import { grey200 } from '../../styles/themes/v2/colors'; import type { ThemeProp } from '../../types'; import { splitStyles } from '../../utils/splitStyles'; @@ -79,7 +78,6 @@ CardCover.displayName = 'Card.Cover'; const styles = StyleSheet.create({ container: { height: 195, - backgroundColor: grey200, overflow: 'hidden', }, image: { 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..d8fca38e37 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,17 @@ 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; - } + const { + colors: { outline }, + } = theme; - if (theme.dark) { - return color(white).alpha(0.12).rgb().string(); - } - return color(black).alpha(0.12).rgb().string(); + return outline; }; const getBackgroundColor = ({ @@ -84,13 +53,15 @@ 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; - } + const { + colors: { surfaceVariant, surface }, + } = theme; + + if (isMode('contained')) { + return surfaceVariant; + } + if (isMode('outlined')) { + return surface; } return undefined; }; diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx index 92ea124e62..c87d873e36 100644 --- a/src/components/Checkbox/CheckboxItem.tsx +++ b/src/components/Checkbox/CheckboxItem.tsx @@ -154,6 +154,10 @@ const CheckboxItem = ({ ...props }: Props) => { const theme = useInternalTheme(themeOverrides); + const { + colors: { onSurface, onSurfaceDisabled }, + } = theme; + const checkboxProps = { ...props, status, theme, disabled }; const isLeading = position === 'leading'; let checkbox; @@ -166,15 +170,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 textAlign = isLeading ? 'right' : 'left'; - const computedStyle = { - color: disabled ? disabledTextColor : textColor, - textAlign, + color: disabled ? onSurfaceDisabled : onSurface, + textAlign: isLeading ? 'right' : 'left', } as TextStyle; return ( @@ -204,12 +202,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 +231,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..fe72b8e4f2 100644 --- a/src/components/Checkbox/utils.ts +++ b/src/components/Checkbox/utils.ts @@ -9,15 +9,15 @@ const getAndroidCheckedColor = ({ theme: InternalTheme; customColor?: string; }) => { + const { + colors: { primary }, + } = theme; + if (customColor) { return customColor; } - if (theme.isV3) { - return theme.colors.primary; - } - - return theme.colors.accent; + return primary; }; const getAndroidUncheckedColor = ({ @@ -27,19 +27,15 @@ const getAndroidUncheckedColor = ({ theme: InternalTheme; customUncheckedColor?: string; }) => { + const { + colors: { onSurfaceVariant }, + } = theme; + if (customUncheckedColor) { 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 onSurfaceVariant; }; const getAndroidRippleColor = ({ @@ -51,11 +47,12 @@ const getAndroidRippleColor = ({ checkedColor: string; disabled?: boolean; }) => { + const { + colors: { onSurface }, + } = theme; + 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(onSurface).alpha(0.16).rgb().string(); } return color(checkedColor).fade(0.32).rgb().string(); @@ -74,11 +71,12 @@ const getAndroidControlColor = ({ uncheckedColor: string; disabled?: boolean; }) => { + const { + colors: { onSurfaceDisabled }, + } = theme; + if (disabled) { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.disabled; + return onSurfaceDisabled; } if (checked) { @@ -126,22 +124,19 @@ const getIOSCheckedColor = ({ customColor?: string; disabled?: boolean; }) => { + const { + colors: { onSurfaceDisabled, primary }, + } = theme; + if (disabled) { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.disabled; + return onSurfaceDisabled; } if (customColor) { return customColor; } - if (theme.isV3) { - return theme.colors.primary; - } - - return theme.colors.accent; + return primary; }; const getIOSRippleColor = ({ @@ -153,11 +148,12 @@ const getIOSRippleColor = ({ checkedColor: string; disabled?: boolean; }) => { + const { + colors: { onSurface }, + } = theme; + 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(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..85fceabf66 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -18,7 +18,7 @@ import useLatestCallback from 'use-latest-callback'; import { ChipAvatarProps, getChipColors } from './helpers'; import { useInternalTheme } from '../../core/theming'; -import { white } from '../../styles/themes/v2/colors'; +import { MD3Colors } from '../../styles/themes/v3/tokens'; import type { $Omit, EllipsizeProp, ThemeProp } from '../../types'; import hasTouchHandler from '../../utils/hasTouchHandler'; import type { IconSource } from '../Icon'; @@ -212,11 +212,16 @@ const Chip = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3, roundness } = theme; + const { + animation: { scale }, + fonts: { labelLarge }, + colors: { primary }, + } = 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({ @@ -229,10 +234,9 @@ const Chip = ({ const isOutlined = mode === 'outlined'; const handlePressIn = useLatestCallback((e: GestureResponderEvent) => { - 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, @@ -240,19 +244,18 @@ const Chip = ({ }); const handlePressOut = useLatestCallback((e: GestureResponderEvent) => { - 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 +284,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 +294,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), + ...labelLarge, }; return ( - + {avatar && !icon ? ( - + {React.isValidElement(avatar) ? React.cloneElement(avatar, { style: [styles.avatar, avatar.props.style], @@ -357,12 +348,11 @@ const Chip = ({ @@ -395,7 +385,7 @@ const Chip = ({ selectable={false} numberOfLines={1} style={[ - isV3 ? styles.md3LabelText : styles.labelText, + styles.md3LabelText, labelTextStyle, labelSpacings, textStyle, @@ -415,18 +405,12 @@ const Chip = ({ accessibilityRole="button" accessibilityLabel={closeIconAccessibilityLabel} > - + {closeIcon ? ( ) : ( { - 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(); - } +}: BaseProps & { selectedColor?: string }) => { + const { + colors: { onSurfaceVariant, outline }, + } = theme; - if (isSelectedColor) { - return color(selectedColor).alpha(0.29).rgb().string(); - } + const isSelectedColor = selectedColor !== undefined; - 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(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 outline; }; const getTextColor = ({ @@ -64,55 +50,39 @@ const getTextColor = ({ }: BaseProps & { 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; - } + const { + colors: { onSurfaceDisabled, onSurfaceVariant, onSecondaryContainer }, + } = theme; + const isSelectedColor = selectedColor !== undefined; if (disabled) { - return theme.colors.disabled; + return onSurfaceDisabled; } if (isSelectedColor) { - return color(selectedColor).alpha(0.87).rgb().string(); + return selectedColor; + } + + if (isOutlined) { + return onSurfaceVariant; } - return color(theme.colors.text).alpha(0.87).rgb().string(); + return onSecondaryContainer; }; const getDefaultBackgroundColor = ({ theme, isOutlined, }: Omit) => { - if (theme.isV3) { - if (isOutlined) { - return theme.colors.surface; - } - - return theme.colors.secondaryContainer; - } + const { + colors: { surface, secondaryContainer }, + } = theme; if (isOutlined) { - return theme.colors?.surface; + return surface; } - if (theme.dark) { - return '#383838'; - } - - return '#ebebeb'; + return secondaryContainer; }; const getBackgroundColor = ({ @@ -123,19 +93,20 @@ const getBackgroundColor = ({ }: BaseProps & { customBackgroundColor?: ColorValue; }) => { + const { + colors: { onSurfaceVariant }, + } = theme; + if (typeof customBackgroundColor === 'string') { 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(onSurfaceVariant).alpha(0.12).rgb().string(); } - return getDefaultBackgroundColor({ theme, isOutlined }); }; @@ -149,6 +120,10 @@ const getSelectedBackgroundColor = ({ customBackgroundColor?: ColorValue; showSelectedOverlay?: boolean; }) => { + const { + colors: { onSurfaceVariant, onSecondaryContainer }, + } = theme; + const backgroundColor = getBackgroundColor({ theme, disabled, @@ -156,45 +131,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(onSurfaceVariant), 0.12) .rgb() .string(); } - return color(backgroundColor) - .mix(color(theme.colors.onSecondaryContainer), 0) + .mix(color(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(onSecondaryContainer), 0.12) + .rgb() + .string(); } - return color(backgroundColor).darken(0.2).rgb().string(); + return color(backgroundColor) + .mix(color(onSecondaryContainer), 0) + .rgb() + .string(); }; const getIconColor = ({ @@ -205,32 +165,24 @@ const getIconColor = ({ }: BaseProps & { 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; - } + const { + colors: { onSurfaceDisabled, onSurfaceVariant, onSecondaryContainer }, + } = theme; + const isSelectedColor = selectedColor !== undefined; if (disabled) { - return theme.colors.disabled; + return onSurfaceDisabled; } if (isSelectedColor) { - return color(selectedColor).alpha(0.54).rgb().string(); + return selectedColor; + } + + if (isOutlined) { + return onSurfaceVariant; } - return color(theme.colors.text).alpha(0.54).rgb().string(); + return onSecondaryContainer; }; const getRippleColor = ({ @@ -238,10 +190,8 @@ const getRippleColor = ({ isOutlined, disabled, selectedColor, - selectedBackgroundColor, customRippleColor, }: BaseProps & { - selectedBackgroundColor: string; selectedColor?: string; customRippleColor?: ColorValue; }) => { @@ -257,19 +207,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 +246,6 @@ export const getChipColors = ({ borderColor: getBorderColor({ ...baseChipColorProps, selectedColor, - backgroundColor, }), textColor: getTextColor({ ...baseChipColorProps, @@ -317,7 +258,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..3df05eea7f 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,15 @@ 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: { surfaceVariant }, + } = useInternalTheme(themeOverrides); return ( - + {children} ); diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx index dd72dbe54f..06825827c9 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 textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text; + const { + colors: { onSurface }, + } = theme; return ( <> @@ -122,7 +123,7 @@ const PaginationControls = ({ direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'} /> )} - iconColor={textColor} + iconColor={onSurface} rippleColor={paginationControlRippleColor} disabled={page === 0} onPress={() => onPageChange(0)} @@ -139,7 +140,7 @@ const PaginationControls = ({ direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'} /> )} - iconColor={textColor} + iconColor={onSurface} rippleColor={paginationControlRippleColor} disabled={page === 0} onPress={() => onPageChange(page - 1)} @@ -155,7 +156,7 @@ const PaginationControls = ({ direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'} /> )} - iconColor={textColor} + iconColor={onSurface} rippleColor={paginationControlRippleColor} disabled={numberOfPages === 0 || page === numberOfPages - 1} onPress={() => onPageChange(page + 1)} @@ -172,7 +173,7 @@ const PaginationControls = ({ direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'} /> )} - iconColor={textColor} + iconColor={onSurface} rippleColor={paginationControlRippleColor} disabled={numberOfPages === 0 || page === numberOfPages - 1} onPress={() => onPageChange(numberOfPages - 1)} @@ -310,12 +311,10 @@ 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 { + colors: { onSurface }, + } = theme; + const labelColor = color(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: { surfaceVariant }, + } = useInternalTheme(themeOverrides); return ( {children} diff --git a/src/components/DataTable/DataTableTitle.tsx b/src/components/DataTable/DataTableTitle.tsx index 6402e67506..9b58395702 100644 --- a/src/components/DataTable/DataTableTitle.tsx +++ b/src/components/DataTable/DataTableTitle.tsx @@ -92,7 +92,9 @@ const DataTableTitle = ({ maxFontSizeMultiplier, ...rest }: Props) => { - const theme = useInternalTheme(themeOverrides); + const { + colors: { onSurface }, + } = useInternalTheme(themeOverrides); const { current: spinAnim } = React.useRef( new Animated.Value(sortDirection === 'ascending' ? 0 : 1) ); @@ -105,9 +107,7 @@ const DataTableTitle = ({ }).start(); }, [sortDirection, spinAnim]); - const textColor = theme.isV3 ? theme.colors.onSurface : theme?.colors?.text; - - const alphaTextColor = color(textColor).alpha(0.6).rgb().string(); + const alphaTextColor = color(onSurface).alpha(0.6).rgb().string(); const spin = spinAnim.interpolate({ inputRange: [0, 1], @@ -119,7 +119,7 @@ const DataTableTitle = ({ diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index 32cc1e4a99..09c32b1af7 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,11 @@ 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: { elevation }, + 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..258d4de1c6 100644 --- a/src/components/Dialog/DialogIcon.tsx +++ b/src/components/Dialog/DialogIcon.tsx @@ -68,18 +68,13 @@ const DialogIcon = ({ icon, theme: themeOverrides, }: Props) => { - const theme = useInternalTheme(themeOverrides); - - if (!theme.isV3) { - return null; - } - - //@ts-ignore - const iconColor = color || theme.colors.secondary; + const { + colors: { secondary }, + } = useInternalTheme(themeOverrides); return ( - + ); }; diff --git a/src/components/Dialog/DialogScrollArea.tsx b/src/components/Dialog/DialogScrollArea.tsx index 66fdcef6a0..46e8ea34e8 100644 --- a/src/components/Dialog/DialogScrollArea.tsx +++ b/src/components/Dialog/DialogScrollArea.tsx @@ -49,23 +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: { surfaceVariant }, + } = useInternalTheme(props.theme); + return ( {props.children} @@ -77,11 +68,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..1efd052ea4 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,25 @@ const DialogTitle = ({ style, ...rest }: Props) => { - const theme = useInternalTheme(themeOverrides); - const { isV3, colors, fonts } = theme; - - const TextComponent = isV3 ? Text : Title; + const { + colors: { onSurface }, + fonts: { headlineSmall }, + } = useInternalTheme(themeOverrides); const headerTextStyle = { - color: isV3 ? colors.onSurface : colors?.text, - ...(isV3 ? fonts.headlineSmall : {}), + color: onSurface, + ...headlineSmall, }; return ( - {children} - + ); }; @@ -78,11 +77,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..ef9c480e5e 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,21 @@ 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: { outlineVariant }, + } = useInternalTheme(themeOverrides); return ( @@ -84,9 +78,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..303a1db4fd 100644 --- a/src/components/Drawer/DrawerCollapsedItem.tsx +++ b/src/components/Drawer/DrawerCollapsedItem.tsx @@ -111,8 +111,16 @@ const DrawerCollapsedItem = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; - const { scale } = theme.animation; + const { + animation: { scale }, + colors: { + secondaryContainer, + onSurface, + onSurfaceVariant, + onSecondaryContainer, + }, + fonts: { labelMedium }, + } = theme; const [numOfLines, setNumOfLines] = React.useState(1); @@ -126,10 +134,6 @@ const DrawerCollapsedItem = ({ } }, [animScale, active]); - if (!isV3) { - return null; - } - const handlePressOut = () => { Animated.timing(animScale, { toValue: 1, @@ -140,15 +144,9 @@ 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 iconColor = active - ? theme.colors.onSecondaryContainer - : theme.colors.onSurfaceVariant; + const backgroundColor = active ? secondaryContainer : 'transparent'; + const labelColor = active ? onSurface : onSurfaceVariant; + const iconColor = active ? onSecondaryContainer : onSurfaceVariant; const onTextLayout = ({ nativeEvent, @@ -163,7 +161,7 @@ const DrawerCollapsedItem = ({ const labelTextStyle = { color: labelColor, - ...(isV3 ? theme.fonts.labelMedium : {}), + ...labelMedium, }; const icon = diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx index 49f3367bec..e828262862 100644 --- a/src/components/Drawer/DrawerItem.tsx +++ b/src/components/Drawer/DrawerItem.tsx @@ -108,27 +108,18 @@ const DrawerItem = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { roundness, isV3 } = theme; + const { + roundness, + colors: { secondaryContainer, onSurfaceVariant, onSecondaryContainer }, + fonts: { labelLarge }, + } = theme; - const backgroundColor = active - ? isV3 - ? theme.colors.secondaryContainer - : color(theme.colors.primary).alpha(0.12).rgb().string() - : undefined; - const contentColor = active - ? isV3 - ? theme.colors.onSecondaryContainer - : theme.colors.primary - : isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.68).rgb().string(); + const backgroundColor = active ? secondaryContainer : undefined; + const contentColor = active ? onSecondaryContainer : 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(); return ( @@ -137,12 +128,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 +136,7 @@ const DrawerItem = ({ theme={theme} hitSlop={hitSlop} > - + {icon ? ( @@ -164,7 +150,7 @@ const DrawerItem = ({ { color: contentColor, marginLeft: labelMargin, - ...font, + ...labelLarge, }, ]} maxFontSizeMultiplier={labelMaxFontSizeMultiplier} @@ -185,9 +171,6 @@ DrawerItem.displayName = 'Drawer.Item'; const styles = StyleSheet.create({ container: { marginHorizontal: 10, - marginVertical: 4, - }, - v3Container: { justifyContent: 'center', height: 56, marginLeft: 12, @@ -197,9 +180,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..c5c90d2c39 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,26 +71,25 @@ 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: { onSurfaceVariant }, + fonts: { titleSmall }, + } = theme; + const titleMargin = 28; return ( {title && ( - + {title && ( + )} ); @@ -121,16 +114,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..2247b01973 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. * @@ -222,7 +221,7 @@ const AnimatedFAB = ({ theme: themeOverrides, style, visible = true, - uppercase: uppercaseProp, + uppercase = false, testID = 'animated-fab', animateFrom = 'right', extended = false, @@ -233,7 +232,6 @@ const AnimatedFAB = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const uppercase: boolean = uppercaseProp ?? !theme.isV3; const isIOS = Platform.OS === 'ios'; const isWeb = Platform.OS === 'web'; const isAnimatedFromRight = animateFrom === 'right'; @@ -246,7 +244,10 @@ const AnimatedFAB = ({ const { current: animFAB } = React.useRef( new Animated.Value(0) ); - const { isV3, animation } = theme; + const { + animation, + fonts: { labelLarge }, + } = theme; const { scale } = animation; const labelSize = isWeb ? getLabelSizeWeb(labelRef) : null; @@ -257,7 +258,7 @@ const AnimatedFAB = ({ labelSize?.height ?? 0 ); - const borderRadius = SIZE / (isV3 ? 3.5 : 2); + const borderRadius = SIZE / 3.5; React.useEffect(() => { if (!isWeb) { @@ -364,17 +365,14 @@ const AnimatedFAB = ({ animFAB, }); - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; - const textStyle = { color: foregroundColor, - ...font, + ...labelLarge, }; - 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} > - + ( theme: themeOverrides, style, visible = true, - uppercase: uppercaseProp, + uppercase = false, loading, testID = 'fab', size = 'medium', @@ -210,12 +210,14 @@ const FAB = forwardRef( ref ) => { const theme = useInternalTheme(themeOverrides); - const uppercase = uppercaseProp ?? !theme.isV3; + const { + animation: { scale }, + fonts: { labelLarge }, + } = theme; + const { current: visibility } = React.useRef( new Animated.Value(visible ? 1 : 0) ); - const { isV3, animation } = theme; - const { scale } = animation; React.useEffect(() => { if (visible) { @@ -255,12 +257,11 @@ 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 extendedStyle = getExtendedFabStyle({ customSize, theme }); + const extendedStyle = getExtendedFabStyle({ customSize }); const textStyle = { color: foregroundColor, - ...font, + ...labelLarge, }; const md3Elevation = isFlatMode || disabled ? 0 : 3; @@ -282,13 +283,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: { titleMedium }, + } = 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 : {}), + ...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..7e30132c85 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; @@ -170,92 +168,85 @@ const getBackgroundColor = ({ disabled, customBackgroundColor, }: BaseProps & { customBackgroundColor?: ColorValue }) => { + const { + colors: { + surfaceDisabled, + primaryContainer, + secondaryContainer, + tertiaryContainer, + elevation, + primary, + }, + } = theme; + if (customBackgroundColor && !disabled) { return customBackgroundColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.surfaceDisabled; - } - - if (isVariant('primary')) { - return theme.colors.primaryContainer; - } + if (disabled) { + return surfaceDisabled; + } - if (isVariant('secondary')) { - return theme.colors.secondaryContainer; - } + if (isVariant('primary')) { + return primaryContainer; + } - if (isVariant('tertiary')) { - return theme.colors.tertiaryContainer; - } + if (isVariant('secondary')) { + return secondaryContainer; + } - if (isVariant('surface')) { - return theme.colors.elevation.level3; - } + if (isVariant('tertiary')) { + return 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 elevation.level3; } - //@ts-ignore - return theme.colors?.accent; + return primary; }; const getForegroundColor = ({ theme, isVariant, disabled, - backgroundColor, customColor, -}: BaseProps & { backgroundColor: string; customColor?: string }) => { +}: BaseProps & { customColor?: string }) => { + const { + colors: { + onSurfaceDisabled, + onPrimaryContainer, + onSecondaryContainer, + onTertiaryContainer, + primary, + }, + } = theme; + 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 onSurfaceDisabled; + } - if (isVariant('tertiary')) { - return theme.colors.onTertiaryContainer; - } + if (isVariant('primary')) { + return onPrimaryContainer; + } - if (isVariant('surface')) { - return theme.colors.primary; - } + if (isVariant('secondary')) { + return 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 onTertiaryContainer; } - if (backgroundColor) { - return getContrastingColor( - backgroundColor || white, - white, - 'rgba(0, 0, 0, .54)' - ); + if (isVariant('surface')) { + return primary; } - return getContrastingColor(white, white, 'rgba(0, 0, 0, .54)'); + return primary; }; export const getFABColors = ({ @@ -287,7 +278,6 @@ export const getFABColors = ({ const foregroundColor = getForegroundColor({ ...baseFABColorProps, customColor, - backgroundColor, }); return { @@ -299,15 +289,11 @@ export const getFABColors = ({ }; const getLabelColor = ({ theme }: { theme: InternalTheme }) => { - if (theme.isV3) { - return theme.colors.onSurface; - } - - if (theme.dark) { - return theme.colors.text; - } + const { + colors: { onSurface }, + } = theme; - return color(theme.colors.text).fade(0.54).rgb().string(); + return onSurface; }; const getBackdropColor = ({ @@ -317,20 +303,22 @@ const getBackdropColor = ({ theme: InternalTheme; customBackdropColor?: string; }) => { + const { + colors: { background }, + } = theme; + if (customBackdropColor) { return customBackdropColor; } - if (theme.isV3) { - return color(theme.colors.background).alpha(0.95).rgb().string(); - } - return theme.colors?.backdrop; + return color(background).alpha(0.95).rgb().string(); }; const getStackedFABBackgroundColor = ({ theme }: { theme: InternalTheme }) => { - if (theme.isV3) { - return theme.colors.elevation.level3; - } - return theme.colors.surface; + const { + colors: { elevation }, + } = theme; + + return elevation.level3; }; export const getFABGroupColors = ({ @@ -347,16 +335,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 +363,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 }; - } - } - - if (size === 'small') { - return smallSize; + switch (size) { + case 'small': + return { ...v3SmallSize, borderRadius: 3 * roundness }; + case 'medium': + return { ...v3MediumSize, borderRadius: 4 * roundness }; + case 'large': + return { ...v3LargeSize, borderRadius: 7 * roundness }; } - return standardSize; -}; - -const extended = { - height: 48, - paddingHorizontal: 16, }; const v3Extended = { @@ -424,16 +390,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/HelperText.tsx b/src/components/HelperText/HelperText.tsx index 8043968cff..1c41b3c53d 100644 --- a/src/components/HelperText/HelperText.tsx +++ b/src/components/HelperText/HelperText.tsx @@ -89,14 +89,15 @@ const HelperText = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); + const { + animation: { scale }, + } = theme; const { current: shown } = React.useRef( new Animated.Value(visible ? 1 : 0) ); let { current: textHeight } = React.useRef(0); - const { scale } = theme.animation; - const { maxFontSizeMultiplier = 1.5 } = rest; React.useEffect(() => { diff --git a/src/components/HelperText/utils.ts b/src/components/HelperText/utils.ts index 4134175416..e379133d44 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,17 @@ type BaseProps = { }; export function getTextColor({ theme, disabled, type }: BaseProps) { - const { colors, dark } = theme; + const { + colors: { error, onSurfaceDisabled, onSurfaceVariant }, + } = theme; if (type === 'error') { - return colors?.error; + return error; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } else { - return theme.colors.onSurfaceVariant; - } + if (disabled) { + return onSurfaceDisabled; } - return color(theme?.colors?.text) - .alpha(dark ? 0.7 : 0.54) - .rgb() - .string(); + return onSurfaceVariant; } diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index b3d26c699d..1fc1eb490b 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -108,7 +108,9 @@ const Icon = ({ testID, ...rest }: Props) => { - const theme = useInternalTheme(themeOverrides); + const { + colors: { onSurface }, + } = useInternalTheme(themeOverrides); const direction = typeof source === 'object' && source.direction && source.source ? source.direction === 'auto' @@ -122,8 +124,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 || 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; - } + const { + colors: { surfaceDisabled, outline }, + } = theme; - return theme.colors.outline; + if (disabled) { + return surfaceDisabled; } - return undefined; + return outline; }; const getBackgroundColor = ({ @@ -38,40 +38,44 @@ 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; + const { + colors: { + surfaceDisabled, + surfaceVariant, + primary, + secondaryContainer, + inverseSurface, + }, + } = theme; + + if (disabled) { + if (isMode('contained') || isMode('contained-tonal')) { + return 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 primary; } + return surfaceVariant; + } - if (isMode('outlined')) { - if (selected) { - return theme.colors.inverseSurface; - } + if (isMode('contained-tonal')) { + if (selected) { + return secondaryContainer; } + return surfaceVariant; } - if (typeof customContainerColor !== 'undefined') { - return customContainerColor; + if (isMode('outlined')) { + if (selected) { + return inverseSurface; + } } return undefined; @@ -84,65 +88,63 @@ const getIconColor = ({ selected, customIconColor, }: BaseProps & { customIconColor?: string }) => { - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (typeof customIconColor !== 'undefined') { - return customIconColor; - } + const { + colors: { + onSurfaceDisabled, + onPrimary, + primary, + onSecondaryContainer, + onSurfaceVariant, + inverseOnSurface, + }, + } = theme; + + if (disabled) { + return 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 onPrimary; } + return primary; + } - if (isMode('outlined')) { - if (selected) { - return theme.colors.inverseOnSurface; - } - return theme.colors.onSurfaceVariant; + if (isMode('contained-tonal')) { + if (selected) { + return onSecondaryContainer; } + return onSurfaceVariant; + } + if (isMode('outlined')) { if (selected) { - return theme.colors.primary; + return inverseOnSurface; } - return theme.colors.onSurfaceVariant; + return onSurfaceVariant; } - if (typeof customIconColor !== 'undefined') { - return customIconColor; + if (selected) { + return primary; } - - return theme.colors.text; + return 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 +186,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..3bbbc220af 100644 --- a/src/components/List/ListAccordion.tsx +++ b/src/components/List/ListAccordion.tsx @@ -196,7 +196,7 @@ const ListAccordion = ({ onPress, onLongPress, delayLongPress, - expanded: expandedProp, + expanded: expandedProp = false, accessibilityLabel, pointerEvents = 'none', titleMaxFontSizeMultiplier, @@ -204,17 +204,16 @@ const ListAccordion = ({ hitSlop, }: Props) => { const theme = useInternalTheme(themeOverrides); - const [expanded, setExpanded] = React.useState( - expandedProp || false - ); + const { + colors: { primary }, + } = theme; + + const [expanded, setExpanded] = React.useState(expandedProp); const [alignToTop, setAlignToTop] = React.useState(false); const onDescriptionTextLayout = ( event: NativeSyntheticEvent ) => { - if (!theme.isV3) { - return; - } const { nativeEvent } = event; setAlignToTop(nativeEvent.lines.length >= 2); }; @@ -241,12 +240,11 @@ const ListAccordion = ({ ? groupContext.expandedId === id : expandedInternal; - const { titleColor, descriptionColor, titleTextColor, rippleColor } = - getAccordionColors({ - theme, - isExpanded, - customRippleColor, - }); + const { descriptionColor, titleTextColor, rippleColor } = getAccordionColors({ + theme, + isExpanded, + customRippleColor, + }); const handlePress = groupContext && id !== undefined @@ -256,7 +254,7 @@ const ListAccordion = ({ {left ? left({ - color: isExpanded ? theme.colors?.primary : descriptionColor, - style: getLeftStyles(alignToTop, description, theme.isV3), + color: isExpanded ? primary : descriptionColor, + style: getLeftStyles(alignToTop, description), }) : null} - + @@ -348,10 +340,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 +355,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 +382,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..084c7d8755 100644 --- a/src/components/List/ListImage.tsx +++ b/src/components/List/ListImage.tsx @@ -7,17 +7,16 @@ import { ImageStyle, } from 'react-native'; -import { useInternalTheme } from '../../core/theming'; -import type { ThemeProp } from '../../types'; - export type Props = { + /** + * Image source. + */ source: ImageSourcePropType; - variant?: 'image' | 'video'; - style?: StyleProp; /** - * @optional + * Variant of the image. The default variant is `image`. */ - theme?: ThemeProp; + variant?: 'image' | 'video'; + style?: StyleProp; }; /** @@ -38,19 +37,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 +61,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..fcb17a7b51 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'; @@ -164,14 +162,14 @@ const ListItem = ( ref: React.ForwardedRef ) => { const theme = useInternalTheme(themeOverrides); + const { + colors: { onSurface, onSurfaceVariant }, + } = theme; const [alignToTop, setAlignToTop] = React.useState(false); const onDescriptionTextLayout = ( event: NativeSyntheticEvent ) => { - if (!theme.isV3) { - return; - } const { nativeEvent } = event; setAlignToTop(nativeEvent.lines.length >= 2); }; @@ -206,15 +204,11 @@ const ListItem = ( }; const renderTitle = () => { - const titleColor = theme.isV3 - ? theme.colors.onSurface - : color(theme.colors.text).alpha(0.87).rgb().string(); - return typeof title === 'function' ? ( title({ selectable: false, ellipsizeMode: titleEllipsizeMode, - color: titleColor, + color: onSurface, fontSize: styles.title.fontSize, }) ) : ( @@ -222,7 +216,7 @@ const ListItem = ( selectable={false} ellipsizeMode={titleEllipsizeMode} numberOfLines={titleNumberOfLines} - style={[styles.title, { color: titleColor }, titleStyle]} + style={[styles.title, { color: onSurface }, titleStyle]} maxFontSizeMultiplier={titleMaxFontSizeMultiplier} > {title} @@ -230,44 +224,36 @@ const ListItem = ( ); }; - const descriptionColor = theme.isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.54).rgb().string(); - return ( - + {left ? left({ - color: descriptionColor, - style: getLeftStyles(alignToTop, description, theme.isV3), + color: onSurfaceVariant, + style: getLeftStyles(alignToTop, description), }) : null} {renderTitle()} {description - ? renderDescription(descriptionColor, description) + ? renderDescription(onSurfaceVariant, description) : null} {right ? right({ - color: descriptionColor, - style: getRightStyles(alignToTop, description, theme.isV3), + color: onSurfaceVariant, + style: getRightStyles(alignToTop, description), }) : null} @@ -279,17 +265,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 +280,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..d51810ee9a 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 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 { + colors: { onSurfaceVariant }, + fonts: { bodyMedium }, + } = useInternalTheme(overrideTheme); return ( { + description: Description +): Style => { const stylesV3 = { marginRight: 0, marginLeft: 16, - alignSelf: alignToTop ? 'flex-start' : 'center', + alignSelf: (alignToTop ? 'flex-start' : 'center') as FlexAlignType, }; if (!description) { return { ...styles.iconMarginLeft, ...styles.marginVerticalNone, - ...(isV3 && { ...stylesV3 }), + ...stylesV3, }; } - if (!isV3) { - return styles.iconMarginLeft; - } - return { ...styles.iconMarginLeft, ...stylesV3, @@ -63,26 +58,21 @@ export const getLeftStyles = ( export const getRightStyles = ( alignToTop: boolean, - description: Description, - isV3: boolean -) => { + description: Description +): Style => { const stylesV3 = { marginLeft: 16, - alignSelf: alignToTop ? 'flex-start' : 'center', + alignSelf: (alignToTop ? 'flex-start' : 'center') as FlexAlignType, }; if (!description) { return { ...styles.iconMarginRight, ...styles.marginVerticalNone, - ...(isV3 && { ...stylesV3 }), + ...stylesV3, }; } - if (!isV3) { - return styles.iconMarginRight; - } - return { ...styles.iconMarginRight, ...stylesV3, @@ -104,22 +94,16 @@ 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 titleTextColor = isExpanded ? theme.colors?.primary : titleColor; + const { + colors: { onSurfaceVariant, primary, onSurface }, + } = theme; + const titleTextColor = isExpanded ? primary : onSurface; const rippleColor = customRippleColor || color(titleTextColor).alpha(0.12).rgb().string(); return { - titleColor, - descriptionColor, + descriptionColor: onSurfaceVariant, titleTextColor, rippleColor, }; diff --git a/src/components/MaterialCommunityIcon.tsx b/src/components/MaterialCommunityIcon.tsx index 52719bdbe1..e0a4380d8d 100644 --- a/src/components/MaterialCommunityIcon.tsx +++ b/src/components/MaterialCommunityIcon.tsx @@ -2,8 +2,6 @@ import * as React from 'react'; import { ComponentProps } from 'react'; import { StyleSheet, Text, Platform, Role, ViewProps } from 'react-native'; -import { black } from '../styles/themes/v2/colors'; - export type IconProps = { name: ComponentProps['name']; color?: string; @@ -97,7 +95,7 @@ const MaterialCommunityIcons: IconModuleType = IconModule || FallbackIcon; */ const DefaultIcon = ({ name, - color = black, + color = 'black', size, direction, allowFontScaling, diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 0e241a2c01..c551a78ea1 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -196,6 +196,10 @@ const Menu = ({ keyboardShouldPersistTaps, }: Props) => { const theme = useInternalTheme(themeOverrides); + const { + colors: { elevation: elevationColors }, + roundness, + } = theme; const insets = useSafeAreaInsets(); const [rendered, setRendered] = React.useState(visible); const [left, setLeft] = React.useState(0); @@ -611,8 +615,7 @@ const Menu = ({ }), }, ], - borderRadius: theme.roundness, - ...(!theme.isV3 && { elevation: 8 }), + borderRadius: roundness, ...(scrollableMenuHeight ? { height: scrollableMenuHeight } : {}), }; @@ -666,13 +669,13 @@ const Menu = ({ style={[ styles.shadowMenuContainer, shadowMenuContainerStyle, - theme.isV3 && { + { backgroundColor: - theme.colors.elevation[ELEVATION_LEVELS_MAP[elevation]], + elevationColors[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..e67b0dea96 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -151,21 +151,20 @@ const MenuItem = ({ hitSlop, }: Props) => { const theme = useInternalTheme(themeOverrides); + const { + fonts: { bodyLarge }, + } = 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 +172,7 @@ const MenuItem = ({ const titleTextStyle = { color: titleColor, - ...(isV3 ? theme.fonts.bodyLarge : {}), + ...bodyLarge, }; const newAccessibilityState = { ...accessibilityState, disabled }; @@ -198,22 +197,15 @@ const MenuItem = ({ > {leadingIcon ? ( - + ) : null} {title} - {isV3 && trailingIcon ? ( - + {trailingIcon ? ( + ) : null} @@ -257,12 +246,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..3a7a4de3d2 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,53 +21,48 @@ type ColorProps = { }; const getDisabledColor = (theme: InternalTheme) => { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } + const { + colors: { onSurfaceDisabled }, + } = theme; - return color(theme.dark ? white : black) - .alpha(0.32) - .rgb() - .string(); + return onSurfaceDisabled; }; const getTitleColor = ({ theme, disabled }: ColorProps) => { + const { + colors: { onSurface }, + } = theme; if (disabled) { return getDisabledColor(theme); } - if (theme.isV3) { - return theme.colors.onSurface; - } - - return color(theme.colors.text).alpha(0.87).rgb().string(); + return onSurface; }; const getIconColor = ({ theme, disabled }: ColorProps) => { + const { + colors: { onSurfaceVariant }, + } = theme; if (disabled) { return getDisabledColor(theme); } - if (theme.isV3) { - return theme.colors.onSurfaceVariant; - } - - return color(theme.colors.text).alpha(0.54).rgb().string(); + return onSurfaceVariant; }; const getRippleColor = ({ theme, customRippleColor, }: Omit) => { + const { + colors: { onSurfaceVariant }, + } = theme; + if (customRippleColor) { return customRippleColor; } - if (theme.isV3) { - return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); - } - - return undefined; + return color(onSurfaceVariant).alpha(0.12).rgb().string(); }; export const getMenuItemColor = ({ @@ -85,26 +78,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..5313b54dfe 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: { surfaceVariant, primary }, + } = 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,7 @@ 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 || primary; return ( diff --git a/src/components/RadioButton/RadioButtonAndroid.tsx b/src/components/RadioButton/RadioButtonAndroid.tsx index 515efe5eff..aaa40eff04 100644 --- a/src/components/RadioButton/RadioButtonAndroid.tsx +++ b/src/components/RadioButton/RadioButtonAndroid.tsx @@ -62,6 +62,10 @@ const RadioButtonAndroid = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); + const { + animation: { scale }, + } = theme; + const { current: borderAnim } = React.useRef( new Animated.Value(BORDER_WIDTH) ); @@ -72,8 +76,6 @@ const RadioButtonAndroid = ({ const isFirstRendering = React.useRef(true); - const { scale } = theme.animation; - React.useEffect(() => { // Do not run animation on very first rendering if (isFirstRendering.current) { diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx index a68be63e18..d3eea54842 100644 --- a/src/components/RadioButton/RadioButtonItem.tsx +++ b/src/components/RadioButton/RadioButtonItem.tsx @@ -165,6 +165,9 @@ const RadioButtonItem = ({ hitSlop, }: Props) => { const theme = useInternalTheme(themeOverrides); + const { + colors: { onSurface, onSurfaceDisabled }, + } = theme; const radioButtonProps = { value, disabled, @@ -184,15 +187,9 @@ const RadioButtonItem = ({ radioButton = ; } - const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text; - const disabledTextColor = theme.isV3 - ? theme.colors.onSurfaceDisabled - : theme.colors.disabled; - const textAlign = isLeading ? 'right' : 'left'; - const computedStyle = { - color: disabled ? disabledTextColor : textColor, - textAlign, + color: disabled ? onSurfaceDisabled : onSurface, + textAlign: isLeading ? 'right' : 'left', } as TextStyle; return ( @@ -232,12 +229,7 @@ const RadioButtonItem = ({ {isLeading && radioButton} {label} @@ -270,7 +262,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..275212472a 100644 --- a/src/components/Searchbar.tsx +++ b/src/components/Searchbar.tsx @@ -208,6 +208,19 @@ const Searchbar = forwardRef( ref ) => { const theme = useInternalTheme(themeOverrides); + const { + roundness, + dark, + fonts: { bodyLarge }, + colors: { + elevation: elevationColors, + onSurface, + onSurfaceVariant, + outline, + primary, + }, + } = theme; + const root = React.useRef(null); React.useImperativeHandle(ref, () => ({ @@ -227,34 +240,22 @@ const Searchbar = forwardRef( onClearIconPress?.(e); }; - const { roundness, dark, isV3, fonts } = theme; - - const placeholderTextColor = isV3 - ? theme.colors.onSurface - : theme.colors?.placeholder; - const textColor = isV3 ? theme.colors.onSurfaceVariant : theme.colors.text; - const md2IconColor = dark - ? textColor - : color(textColor).alpha(0.54).rgb().string(); - const iconColor = - customIconColor || (isV3 ? theme.colors.onSurfaceVariant : md2IconColor); + const iconColor = customIconColor || onSurfaceVariant; const rippleColor = - customRippleColor || color(textColor).alpha(0.32).rgb().string(); + customRippleColor || color(onSurfaceVariant).alpha(0.32).rgb().string(); const traileringRippleColor = customTraileringRippleColor || - color(textColor).alpha(0.32).rgb().string(); + color(onSurfaceVariant).alpha(0.32).rgb().string(); - const font = isV3 - ? { - ...fonts.bodyLarge, - lineHeight: Platform.select({ - ios: 0, - default: fonts.bodyLarge.lineHeight, - }), - } - : theme.fonts.regular; + const font = { + ...bodyLarge, + lineHeight: Platform.select({ + ios: 0, + default: bodyLarge.lineHeight, + }), + }; - const isBarMode = isV3 && mode === 'bar'; + const isBarMode = mode === 'bar'; const shouldRenderTraileringIcon = isBarMode && traileringIcon && @@ -264,17 +265,15 @@ const Searchbar = forwardRef( return ( ( style={[ styles.input, { - color: textColor, + color: onSurfaceVariant, ...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} + placeholderTextColor={onSurface} + selectionColor={primary} underlineColorAndroid="transparent" returnKeyType="search" keyboardAppearance={dark ? 'dark' : 'light'} @@ -324,7 +323,7 @@ const Searchbar = forwardRef( {loading ? ( ) : ( // Clear icon should be always rendered within Searchbar – it's transparent, @@ -335,8 +334,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 || onSurfaceVariant} rippleColor={traileringRippleColor} icon={traileringIcon} accessibilityLabel={traileringIconAccessibilityLabel} @@ -375,14 +374,18 @@ const Searchbar = forwardRef( /> ) : null} {isBarMode && - right?.({ color: textColor, style: styles.rightStyle, testID })} - {isV3 && !isBarMode && showDivider && ( + right?.({ + color: onSurfaceVariant, + style: styles.rightStyle, + testID, + })} + {!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,34 @@ export const getSegmentedButtonBorderRadius = ({ } else { return { borderRadius: 0, - ...(theme.isV3 && { borderEndWidth: 0 }), + borderEndWidth: 0, }; } }; const getSegmentedButtonBackgroundColor = ({ checked, theme }: BaseProps) => { + const { + colors: { secondaryContainer }, + } = theme; if (checked) { - if (theme.isV3) { - return theme.colors.secondaryContainer; - } else { - return color(theme.colors.primary).alpha(0.12).rgb().string(); - } + return 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) => { + const { + colors: { surfaceDisabled, outline }, + } = theme; - return color(theme.dark ? white : black) - .alpha(0.29) - .rgb() - .string(); -}; - -const getSegmentedButtonBorderWidth = ({ - theme, -}: Omit) => { - if (theme.isV3) { - return 1; + if (disabled) { + return surfaceDisabled; } + return outline; +}; - return StyleSheet.hairlineWidth; +const getSegmentedButtonBorderWidth = () => { + return 1; }; const getSegmentedButtonTextColor = ({ @@ -133,21 +110,16 @@ 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; - } - + const { + colors: { onSurfaceDisabled, onSecondaryContainer, onSurface }, + } = theme; if (disabled) { - return theme.colors.disabled; + return onSurfaceDisabled; + } + if (checked) { + return checkedColor ?? onSecondaryContainer; } - // Primary color is used for checked state too. - return theme.colors.primary; + return uncheckedColor ?? onSurface; }; export const getSegmentedButtonColors = ({ @@ -173,7 +145,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(); @@ -114,7 +113,7 @@ it('renders button with color', () => { it('renders button with button color', () => { const tree = render( - + ).toJSON(); expect(tree).toMatchSnapshot(); @@ -461,95 +460,6 @@ describe('getButtonColors - background color', () => { }); }) ); - - it('should return correct theme color, for theme version 2, contained mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'contained', - }) - ).toMatchObject({ - backgroundColor: getTheme(false, false).colors.primary, - }); - }); - - it('should return correct theme color, for theme version 2, when disabled, contained mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'contained', - disabled: true, - }) - ).toMatchObject({ - backgroundColor: color(black).alpha(0.12).rgb().string(), - }); - }); - - it('should return correct theme color, for theme version 2, when disabled, dark theme, contained mode', () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - mode: 'contained', - disabled: true, - }) - ).toMatchObject({ - backgroundColor: color(white).alpha(0.12).rgb().string(), - }); - }); - - (['text', 'outlined'] as const).forEach((mode) => - it(`should return correct theme color, for theme version 2, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode, - }) - ).toMatchObject({ - backgroundColor: 'transparent', - }); - }) - ); - - (['text', 'outlined'] as const).forEach((mode) => - it(`should return correct theme color, for theme version 2, dark theme, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - mode, - }) - ).toMatchObject({ - backgroundColor: 'transparent', - }); - }) - ); - - (['text', 'outlined'] as const).forEach((mode) => - it(`should return correct theme color, for theme version 2, when disabled, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode, - disabled: true, - }) - ).toMatchObject({ - backgroundColor: 'transparent', - }); - }) - ); - - (['text', 'outlined'] as const).forEach((mode) => - it(`should return correct theme color, for theme version 2, when disabled, dark theme, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - mode, - disabled: true, - }) - ).toMatchObject({ - backgroundColor: 'transparent', - }); - }) - ); }); describe('getButtonColors - text color', () => { @@ -601,7 +511,7 @@ describe('getButtonColors - text color', () => { dark: true, }) ).toMatchObject({ - textColor: white, + textColor: MD3Colors.primary100, }); }) ); @@ -675,68 +585,6 @@ describe('getButtonColors - text color', () => { textColor: getTheme(true).colors.onSecondaryContainer, }); }); - - it('should return correct theme text color, for theme version 2, when disabled, no matter what the mode is', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - disabled: true, - mode: 'text', - }) - ).toMatchObject({ - textColor: color(black).alpha(0.32).rgb().string(), - }); - }); - - it('should return correct theme text color, for theme version 2, when disabled, dark theme, no matter what the mode is', () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - disabled: true, - mode: 'text', - }) - ).toMatchObject({ - textColor: color(white).alpha(0.32).rgb().string(), - }); - }); - - it('should return correct theme text color, for theme version 2, contained mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'contained', - dark: true, - }) - ).toMatchObject({ - textColor: '#ffffff', - }); - }); - - (['text', 'outlined'] as const).forEach((mode) => - it(`should return correct theme text color, for theme version 2, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode, - }) - ).toMatchObject({ - textColor: getTheme(false, false).colors.primary, - }); - }) - ); - - (['text', 'outlined'] as const).forEach((mode) => - it(`should return correct theme text color, for theme version 2, dark theme, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - mode, - }) - ).toMatchObject({ - textColor: getTheme(true, false).colors.primary, - }); - }) - ); }); describe('getButtonColors - border color', () => { @@ -813,56 +661,6 @@ describe('getButtonColors - border color', () => { }); }) ); - - it('should return correct border color, for theme version 2, outlined mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'outlined', - }) - ).toMatchObject({ - borderColor: color(black).alpha(0.29).rgb().string(), - }); - }); - - it('should return correct border color, for theme version 2, dark theme, outlined mode', () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - mode: 'outlined', - }) - ).toMatchObject({ - borderColor: color(white).alpha(0.29).rgb().string(), - }); - }); - - (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach( - (mode) => - it(`should return transparent border, for theme version 2, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode, - }) - ).toMatchObject({ - borderColor: 'transparent', - }); - }) - ); - - (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach( - (mode) => - it(`should return transparent border, for theme version 2, dark theme, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode, - }) - ).toMatchObject({ - borderColor: 'transparent', - }); - }) - ); }); describe('getButtonColors - border width', () => { @@ -877,17 +675,6 @@ describe('getButtonColors - border width', () => { }); }); - it('should return correct border width, for theme version 2, outlined mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'outlined', - }) - ).toMatchObject({ - borderWidth: StyleSheet.hairlineWidth, - }); - }); - (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach( (mode) => it(`should return correct border width, for ${mode} mode`, () => { diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx index 3da4aa2c51..a7dc736c62 100644 --- a/src/components/__tests__/Card/Card.test.tsx +++ b/src/components/__tests__/Card/Card.test.tsx @@ -2,10 +2,8 @@ import React from 'react'; import { Animated, StyleSheet, Text } from 'react-native'; import { act, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../../core/theming'; -import { black, white } from '../../../styles/themes/v2/colors'; import { MD3Colors } from '../../../styles/themes/v3/tokens'; import Button from '../../Button/Button'; import Card from '../../Card/Card'; @@ -193,15 +191,6 @@ describe('getCardColors - background color', () => { }) ).toMatchObject({ backgroundColor: undefined }); }); - - it('should return undefined, for theme version 2', () => { - expect( - getCardColors({ - theme: getTheme(false, false), - mode: undefined as any, - }) - ).toMatchObject({ backgroundColor: undefined }); - }); }); describe('getCardColors - border color', () => { @@ -213,28 +202,6 @@ describe('getCardColors - border color', () => { }) ).toMatchObject({ borderColor: getTheme().colors.outline }); }); - - it('should return correct color, for theme version 2, dark mode', () => { - expect( - getCardColors({ - theme: getTheme(true, false), - mode: undefined as any, - }) - ).toMatchObject({ - borderColor: color(white).alpha(0.12).rgb().string(), - }); - }); - - it('should return correct color, for theme version 2, light mode', () => { - expect( - getCardColors({ - theme: getTheme(false, false), - mode: undefined as any, - }) - ).toMatchObject({ - borderColor: color(black).alpha(0.12).rgb().string(), - }); - }); }); describe('getCardCoverStyle - border radius', () => { @@ -255,44 +222,6 @@ describe('getCardCoverStyle - border radius', () => { }) ).toMatchObject({ borderRadius: 3 * getTheme().roundness }); }); - - it('should return correct border radius based on roundness, for theme version 2, when index is 0 and total is 1', () => { - expect( - getCardCoverStyle({ - theme: getTheme(false, false), - borderRadiusStyles: {}, - index: 0, - total: 1, - }) - ).toMatchObject({ borderRadius: getTheme(false, false).roundness }); - }); - - it('should return correct border radius based on roundness, for theme version 2, when index is 0 and total is other than 1', () => { - expect( - getCardCoverStyle({ - theme: getTheme(false, false), - borderRadiusStyles: {}, - index: 0, - total: 2, - }) - ).toMatchObject({ - borderTopLeftRadius: getTheme(false, false).roundness, - borderTopRightRadius: getTheme(false, false).roundness, - }); - }); - - it('should return correct border radius based on roundness, for theme version 2, when index is equal to total - 1', () => { - expect( - getCardCoverStyle({ - theme: getTheme(false, false), - borderRadiusStyles: {}, - index: 1, - total: 2, - }) - ).toMatchObject({ - borderBottomLeftRadius: getTheme(false, false).roundness, - }); - }); }); it('animated value changes correctly', () => { diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap index b5f1d87e77..dbd992a134 100644 --- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap +++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap @@ -163,7 +163,6 @@ exports[`can render leading checkbox control 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "right", @@ -261,7 +260,6 @@ exports[`can render the Android checkbox on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "left", @@ -478,7 +476,6 @@ exports[`can render the iOS checkbox on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "left", @@ -659,7 +656,6 @@ exports[`renders unchecked 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "left", diff --git a/src/components/__tests__/Checkbox/utils.test.tsx b/src/components/__tests__/Checkbox/utils.test.tsx index 580e3dbedf..3e551140c5 100644 --- a/src/components/__tests__/Checkbox/utils.test.tsx +++ b/src/components/__tests__/Checkbox/utils.test.tsx @@ -22,21 +22,6 @@ describe('getAndroidSelectionControlColor - ripple color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(false, false), - disabled: true, - checked: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.text) - .alpha(0.16) - .rgb() - .string(), - }); - }); - it('should return custom color', () => { expect( getAndroidSelectionControlColor({ @@ -59,20 +44,6 @@ describe('getAndroidSelectionControlColor - ripple color', () => { rippleColor: color(getTheme().colors.primary).fade(0.32).rgb().string(), }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(false, false), - checked: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.accent) - .fade(0.32) - .rgb() - .string(), - }); - }); }); describe('getAndroidSelectionControlColor - checkbox color', () => { @@ -88,18 +59,6 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(false, false), - disabled: true, - checked: false, - }) - ).toMatchObject({ - selectionControlColor: getTheme(false, false).colors.disabled, - }); - }); - it('should return custom color, checked', () => { expect( getAndroidSelectionControlColor({ @@ -123,17 +82,6 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { }); }); - it('should return theme color, for theme version 2, checked', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(false, false), - checked: true, - }) - ).toMatchObject({ - selectionControlColor: getTheme(false, false).colors.accent, - }); - }); - it('should return custom color, unchecked', () => { expect( getAndroidSelectionControlColor({ @@ -156,34 +104,6 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { selectionControlColor: getTheme().colors.onSurfaceVariant, }); }); - - it('should return theme color, for theme version 2, unchecked, dark mode', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(true, false), - checked: false, - }) - ).toMatchObject({ - selectionControlColor: color(getTheme(true, false).colors.text) - .alpha(0.7) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2, unchecked, light mode', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(false, false), - checked: false, - }) - ).toMatchObject({ - selectionControlColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); }); describe('getSelectionControlIOSColor - ripple color', () => { @@ -201,20 +121,6 @@ describe('getSelectionControlIOSColor - ripple color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(false, false), - disabled: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.text) - .alpha(0.16) - .rgb() - .string(), - }); - }); - it('should return custom color', () => { expect( getSelectionControlIOSColor({ @@ -235,19 +141,6 @@ describe('getSelectionControlIOSColor - ripple color', () => { rippleColor: color(getTheme().colors.primary).fade(0.32).rgb().string(), }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.accent) - .fade(0.32) - .rgb() - .string(), - }); - }); }); describe('getSelectionControlIOSColor - checked color', () => { @@ -262,17 +155,6 @@ describe('getSelectionControlIOSColor - checked color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(false, false), - disabled: true, - }) - ).toMatchObject({ - checkedColor: getTheme(false, false).colors.disabled, - }); - }); - it('should return custom color, checked', () => { expect( getSelectionControlIOSColor({ @@ -293,14 +175,4 @@ describe('getSelectionControlIOSColor - checked color', () => { checkedColor: getTheme().colors.primary, }); }); - - it('should return theme color, for theme version 2, checked', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - checkedColor: getTheme(false, false).colors.accent, - }); - }); }); diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx index ca3055e35b..6c0e851f22 100644 --- a/src/components/__tests__/Chip.test.tsx +++ b/src/components/__tests__/Chip.test.tsx @@ -5,7 +5,6 @@ import { act, render } from '@testing-library/react-native'; import color from 'color'; import { getTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; import Chip from '../Chip/Chip'; import { getChipColors } from '../Chip/helpers'; @@ -104,18 +103,6 @@ describe('getChipColors - text color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getChipColors({ - disabled: true, - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - textColor: getTheme(false, false).colors.disabled, - }); - }); - it('should return correct theme color, for theme version 3, flat mode', () => { expect( getChipColors({ @@ -138,20 +125,6 @@ describe('getChipColors - text color', () => { }); }); - it('should return correct theme color, for theme version 2', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - textColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), - }); - }); - it('should return custom color, for theme version 3', () => { expect( getChipColors({ @@ -163,18 +136,6 @@ describe('getChipColors - text color', () => { textColor: 'purple', }); }); - - it('should return custom color, for theme version 2', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - selectedColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - textColor: color('purple').alpha(0.87).rgb().string(), - }); - }); }); describe('getChipColors - icon color', () => { @@ -190,18 +151,6 @@ describe('getChipColors - icon color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getChipColors({ - disabled: true, - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - iconColor: getTheme(false, false).colors.disabled, - }); - }); - it('should return correct theme color, for theme version 3, flat mode', () => { expect( getChipColors({ @@ -224,20 +173,6 @@ describe('getChipColors - icon color', () => { }); }); - it('should return correct theme color, for theme version 2', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - iconColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); - it('should return custom color, for theme version 3', () => { expect( getChipColors({ @@ -249,18 +184,6 @@ describe('getChipColors - icon color', () => { iconColor: 'purple', }); }); - - it('should return custom color, for theme version 2', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - selectedColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - iconColor: color('purple').alpha(0.54).rgb().string(), - }); - }); }); describe('getChipColors - ripple color', () => { @@ -303,116 +226,6 @@ describe('getChipColors - ripple color', () => { rippleColor: color('purple').alpha(0.12).rgb().string(), }); }); - - it('should return custom color, for theme version 2', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - selectedColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('purple').fade(0.5).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, dark mode, outline mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - customBackgroundColor: 'purple', - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color('purple').lighten(0.2).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, dark mode, flat mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - customBackgroundColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('purple').lighten(0.4).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, light mode, outline mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - customBackgroundColor: 'purple', - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color('purple').darken(0.08).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, light mode, flat mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - customBackgroundColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('purple').darken(0.2).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2, light mode, outline mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.surface) - .darken(0.08) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2, light mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('#ebebeb').darken(0.2).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2, dark mode, outline mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme(true, false).colors.surface) - .lighten(0.2) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2, dark mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('#383838').lighten(0.4).rgb().string(), - }); - }); }); describe('getChipColor - selected background color', () => { @@ -505,90 +318,6 @@ describe('getChipColor - selected background color', () => { .string(), }); }); - - it('should return custom color, for theme version 2, light mode, outlined mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - customBackgroundColor: 'purple', - isOutlined: true, - }) - ).toMatchObject({ - selectedBackgroundColor: color('purple').darken(0.08).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, light mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - customBackgroundColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - selectedBackgroundColor: color('purple').darken(0.2).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, dark mode, outlined mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - customBackgroundColor: 'purple', - isOutlined: true, - }) - ).toMatchObject({ - selectedBackgroundColor: color('purple').lighten(0.2).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, dark mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - customBackgroundColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - selectedBackgroundColor: color('purple').lighten(0.4).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2, outlined mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: true, - }) - ).toMatchObject({ - selectedBackgroundColor: color(getTheme(false, false).colors.surface) - .darken(0.08) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2, light mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - selectedBackgroundColor: color('#ebebeb').darken(0.2).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2, dark mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - isOutlined: false, - }) - ).toMatchObject({ - selectedBackgroundColor: color('#383838').lighten(0.4).rgb().string(), - }); - }); }); describe('getChipColor - background color', () => { @@ -625,39 +354,6 @@ describe('getChipColor - background color', () => { backgroundColor: getTheme().colors.secondaryContainer, }); }); - - it('should return theme color, for theme version 2, outlined mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: true, - }) - ).toMatchObject({ - backgroundColor: getTheme(false, false).colors.surface, - }); - }); - - it('should return theme color, for theme version 2, light mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - backgroundColor: '#ebebeb', - }); - }); - - it('should return theme color, for theme version 2, dark mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - isOutlined: false, - }) - ).toMatchObject({ - backgroundColor: '#383838', - }); - }); }); describe('getChipColor - border color', () => { @@ -695,74 +391,6 @@ describe('getChipColor - border color', () => { borderColor: 'transparent', }); }); - - it('should return custom color, for theme version 2, outlined mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - selectedColor: 'purple', - isOutlined: true, - }) - ).toMatchObject({ - borderColor: color('purple').alpha(0.29).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - customBackgroundColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - borderColor: 'purple', - }); - }); - - it('should return theme color, for theme version 2, light mode, outlined mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: true, - }) - ).toMatchObject({ - borderColor: color(black).alpha(0.29).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2, dark mode, outlined mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - isOutlined: true, - }) - ).toMatchObject({ - borderColor: color(white).alpha(0.29).rgb().string(), - }); - }); - - it('should return theme background color, for theme version 2, light mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - borderColor: '#ebebeb', - }); - }); - - it('should return theme background color, for theme version 2, dark mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - isOutlined: false, - }) - ).toMatchObject({ - borderColor: '#383838', - }); - }); }); it('animated value changes correctly', () => { diff --git a/src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.tsx.snap b/src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.tsx.snap index bcd35191f0..711178d2f9 100644 --- a/src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.tsx.snap +++ b/src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.tsx.snap @@ -27,14 +27,10 @@ exports[`DrawerSection renders properly 1`] = ` { "height": 1, }, - [ - { - "marginTop": 4, - }, - { - "backgroundColor": "rgba(121, 116, 126, 1)", - }, - ], + { + "backgroundColor": "rgba(121, 116, 126, 1)", + "marginTop": 4, + }, ] } /> diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx index d59639efc1..8a0c909361 100644 --- a/src/components/__tests__/FAB.test.tsx +++ b/src/components/__tests__/FAB.test.tsx @@ -1,13 +1,9 @@ import * as React from 'react'; import { Animated, StyleSheet } from 'react-native'; -import { fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; -import { act } from 'react-test-renderer'; +import { fireEvent, render, act } from '@testing-library/react-native'; import { getTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; -import getContrastingColor from '../../utils/getContrastingColor'; import FAB from '../FAB'; import { getFABColors } from '../FAB/utils'; @@ -211,30 +207,6 @@ describe('getFABColors - background color', () => { }); }); - it('should return correct disabled color, for theme version 2, light mode', () => { - expect( - getFABColors({ - theme: getTheme(false, false), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - backgroundColor: color(black).alpha(0.12).rgb().string(), - }); - }); - - it('should return correct disabled color, for theme version 2, dark mode', () => { - expect( - getFABColors({ - theme: getTheme(true, false), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - backgroundColor: color(white).alpha(0.12).rgb().string(), - }); - }); - it('should return correct theme color, for theme version 3, primary variant', () => { expect( getFABColors({ @@ -278,17 +250,6 @@ describe('getFABColors - background color', () => { backgroundColor: getTheme().colors.elevation.level3, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getFABColors({ - theme: getTheme(false, false), - variant: 'primary', - }) - ).toMatchObject({ - backgroundColor: getTheme(false, false).colors.accent, - }); - }); }); describe('getFABColors - foreground color', () => { @@ -316,30 +277,6 @@ describe('getFABColors - foreground color', () => { }); }); - it('should return correct disabled color, for theme version 2, light mode', () => { - expect( - getFABColors({ - theme: getTheme(false, false), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - foregroundColor: color(black).alpha(0.32).rgb().string(), - }); - }); - - it('should return correct disabled color, for theme version 2, dark mode', () => { - expect( - getFABColors({ - theme: getTheme(true, false), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - foregroundColor: color(white).alpha(0.32).rgb().string(), - }); - }); - it('should return correct theme color, for theme version 3, primary variant', () => { expect( getFABColors({ @@ -383,21 +320,6 @@ describe('getFABColors - foreground color', () => { foregroundColor: getTheme().colors.primary, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getFABColors({ - theme: getTheme(false, false), - variant: 'primary', - }) - ).toMatchObject({ - foregroundColor: getContrastingColor( - getTheme(false, false).colors.accent, - white, - 'rgba(0, 0, 0, .54)' - ), - }); - }); }); it('animated value changes correctly', () => { diff --git a/src/components/__tests__/FABGroup.test.tsx b/src/components/__tests__/FABGroup.test.tsx index 50cc0a7173..3eb51c78d6 100644 --- a/src/components/__tests__/FABGroup.test.tsx +++ b/src/components/__tests__/FABGroup.test.tsx @@ -32,16 +32,6 @@ describe('getFABGroupColors - backdrop color', () => { .string(), }); }); - - it('should return correct backdrop color, for theme version 2', () => { - expect( - getFABGroupColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - backdropColor: getTheme(false, false).colors.backdrop, - }); - }); }); describe('getFABGroupColors - label color', () => { @@ -54,29 +44,6 @@ describe('getFABGroupColors - label color', () => { labelColor: getTheme().colors.onSurface, }); }); - - it('should return correct theme color, dark mode, for theme version 2', () => { - expect( - getFABGroupColors({ - theme: getTheme(true, false), - }) - ).toMatchObject({ - labelColor: getTheme(true, false).colors.text, - }); - }); - - it('should return correct theme color, light mode, for theme version 2', () => { - expect( - getFABGroupColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - labelColor: color(getTheme(false, false).colors.text) - .fade(0.54) - .rgb() - .string(), - }); - }); }); describe('getFABGroupColors - stacked FAB background color', () => { @@ -89,16 +56,6 @@ describe('getFABGroupColors - stacked FAB background color', () => { stackedFABBackgroundColor: getTheme().colors.elevation.level3, }); }); - - it('should return correct theme color, dark mode, for theme version 2', () => { - expect( - getFABGroupColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - stackedFABBackgroundColor: getTheme(false, false).colors.surface, - }); - }); }); describe('FABActions - labelStyle - containerStyle', () => { diff --git a/src/components/__tests__/IconButton.test.tsx b/src/components/__tests__/IconButton.test.tsx index 381ea5ae24..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(); @@ -190,16 +190,6 @@ describe('getIconButtonColor - icon color', () => { iconColor: getTheme().colors.primary, }); }); - - it('should return theme icon color, for theme version 2', () => { - expect( - getIconButtonColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - iconColor: getTheme(false, false).colors.text, - }); - }); }); describe('getIconButtonColor - background color', () => { @@ -316,16 +306,6 @@ describe('getIconButtonColor - border color', () => { borderColor: getTheme().colors.outline, }); }); - - it('should return undefined, for theme version 2', () => { - expect( - getIconButtonColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - borderColor: undefined, - }); - }); }); describe('getIconButtonColor - ripple color', () => { @@ -341,19 +321,6 @@ describe('getIconButtonColor - ripple color', () => { .string(), }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getIconButtonColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.text) - .alpha(0.32) - .rgb() - .string(), - }); - }); }); it('action animated value changes correctly', () => { diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx index 0c24538348..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, }, }); @@ -115,31 +115,6 @@ describe('ListAccordion', () => { }); }); -describe('getAccordionColors - title color', () => { - it('should return theme color, for theme version 3', () => { - expect( - getAccordionColors({ - theme: getTheme(), - }) - ).toMatchObject({ - titleColor: getTheme().colors.onSurface, - }); - }); - - it('should return theme color, for theme version 2', () => { - expect( - getAccordionColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - titleColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), - }); - }); -}); - describe('getAccordionColors - description color', () => { it('should return theme color, for theme version 3', () => { expect( @@ -150,19 +125,6 @@ describe('getAccordionColors - description color', () => { descriptionColor: getTheme().colors.onSurfaceVariant, }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getAccordionColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - descriptionColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); }); describe('getAccordionColors - title text color', () => { @@ -176,19 +138,6 @@ describe('getAccordionColors - title text color', () => { }); }); - it('should return theme color, for theme version 2', () => { - expect( - getAccordionColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - titleTextColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), - }); - }); - it('should return primary color if it is expanded', () => { expect( getAccordionColors({ @@ -215,21 +164,6 @@ describe('getAccordionColors - ripple color', () => { }); }); - it('should return theme color, for theme version 2', () => { - const v2TextColor = color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(); - - expect( - getAccordionColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - rippleColor: color(v2TextColor).alpha(0.12).rgb().string(), - }); - }); - it('should return primary color if it is expanded', () => { expect( getAccordionColors({ 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__/ListUtils.test.tsx b/src/components/__tests__/ListUtils.test.tsx index 4aeefb6ca9..2640eaa037 100644 --- a/src/components/__tests__/ListUtils.test.tsx +++ b/src/components/__tests__/ListUtils.test.tsx @@ -30,23 +30,13 @@ const description = Test; * ********************** getLeftStyles ********************** * */ -it('returns styles for left item without description for V2', () => { - const style = getLeftStyles(false, null, false); - expect(style).toStrictEqual({ ...styles.leftItem, marginVertical: 0 }); -}); - -it('returns styles for left item w/ desctiption for V2', () => { - const style = getLeftStyles(false, description, false); - expect(style).toStrictEqual(styles.leftItem); -}); - it('returns styles for left item without description for V3', () => { - const style = getLeftStyles(false, null, true); + const style = getLeftStyles(false, null); expect(style).toStrictEqual({ ...styles.leftItemV3, marginVertical: 0 }); }); it('returns styles for left item w/ desctiption for V3', () => { - const style = getLeftStyles(true, description, true); + const style = getLeftStyles(true, description); expect(style).toStrictEqual({ ...styles.leftItemV3, alignSelf: 'flex-start', @@ -57,23 +47,13 @@ it('returns styles for left item w/ desctiption for V3', () => { * ********************** getRightStyles ********************** * */ -it('returns styles for right item without description for V2', () => { - const style = getRightStyles(false, null, false); - expect(style).toStrictEqual({ ...styles.rightItem, marginVertical: 0 }); -}); - -it('returns styles for right item w/ desctiption for V2', () => { - const style = getRightStyles(false, description, false); - expect(style).toStrictEqual(styles.rightItem); -}); - it('returns styles for right item without description for V3', () => { - const style = getRightStyles(false, null, true); + const style = getRightStyles(false, null); expect(style).toStrictEqual({ ...styles.rightItemV3, marginVertical: 0 }); }); it('returns styles for right item w/ desctiption for V3', () => { - const style = getRightStyles(true, description, true); + const style = getRightStyles(true, description); expect(style).toStrictEqual({ ...styles.rightItemV3, alignSelf: 'flex-start', diff --git a/src/components/__tests__/Menu.test.tsx b/src/components/__tests__/Menu.test.tsx index aab5b6e485..2ba63111ee 100644 --- a/src/components/__tests__/Menu.test.tsx +++ b/src/components/__tests__/Menu.test.tsx @@ -70,7 +70,9 @@ it('renders menu with content styles', () => { ([0, 1, 2, 3, 4, 5] as MD3Elevation[]).forEach((elevation) => it(`renders menu with background color based on elevation value = ${elevation}`, () => { - const theme = getTheme(false, true); + const { + colors: { elevation: elevationColors }, + } = getTheme(); const { getByTestId } = render( @@ -87,7 +89,7 @@ it('renders menu with content styles', () => { ); expect(getByTestId('menu-surface')).toHaveStyle({ - backgroundColor: theme.colors.elevation[ELEVATION_LEVELS_MAP[elevation]], + backgroundColor: elevationColors[ELEVATION_LEVELS_MAP[elevation]], }); }) ); diff --git a/src/components/__tests__/MenuItem.test.tsx b/src/components/__tests__/MenuItem.test.tsx index 7413f43622..d482800582 100644 --- a/src/components/__tests__/MenuItem.test.tsx +++ b/src/components/__tests__/MenuItem.test.tsx @@ -4,7 +4,6 @@ import { render } from '@testing-library/react-native'; import color from 'color'; import { getTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; import Menu from '../Menu/Menu'; import { getMenuItemColor } from '../Menu/utils'; @@ -75,28 +74,6 @@ describe('getMenuItemColor - title color', () => { ).toMatchObject({ titleColor: getTheme().colors.onSurfaceDisabled }); }); - it('should return disabled color if disabled, for theme version 2, light theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - disabled: true, - }) - ).toMatchObject({ - titleColor: color(black).alpha(0.32).rgb().string(), - }); - }); - - it('should return disabled color if disabled, for theme version 2, dark theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(true, false), - disabled: true, - }) - ).toMatchObject({ - titleColor: color(white).alpha(0.32).rgb().string(), - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getMenuItemColor({ @@ -106,19 +83,6 @@ describe('getMenuItemColor - title color', () => { titleColor: getTheme().colors.onSurface, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - titleColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), - }); - }); }); describe('getMenuItemColor - icon color', () => { @@ -131,28 +95,6 @@ describe('getMenuItemColor - icon color', () => { ).toMatchObject({ iconColor: getTheme().colors.onSurfaceDisabled }); }); - it('should return disabled color if disabled, for theme version 2, light theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - disabled: true, - }) - ).toMatchObject({ - iconColor: color(black).alpha(0.32).rgb().string(), - }); - }); - - it('should return disabled color if disabled, for theme version 2, dark theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(true, false), - disabled: true, - }) - ).toMatchObject({ - iconColor: color(white).alpha(0.32).rgb().string(), - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getMenuItemColor({ @@ -162,19 +104,6 @@ describe('getMenuItemColor - icon color', () => { iconColor: getTheme().colors.onSurfaceVariant, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - iconColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); }); describe('getMenuItemColor - ripple color', () => { @@ -190,14 +119,4 @@ describe('getMenuItemColor - ripple color', () => { .string(), }); }); - - it('should return undefined, for theme version 2', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - rippleColor: undefined, - }); - }); }); diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap index dfbe5fa131..e74650efd2 100644 --- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap @@ -161,7 +161,6 @@ exports[`can render leading radio button control 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "right", @@ -256,7 +255,6 @@ exports[`can render the Android radio button on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "left", @@ -408,7 +406,6 @@ exports[`can render the iOS radio button on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "left", @@ -586,7 +583,6 @@ exports[`renders unchecked 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "left", diff --git a/src/components/__tests__/SegmentedButton.test.tsx b/src/components/__tests__/SegmentedButton.test.tsx index d36babb5bb..cf4fc10580 100644 --- a/src/components/__tests__/SegmentedButton.test.tsx +++ b/src/components/__tests__/SegmentedButton.test.tsx @@ -1,10 +1,8 @@ import * as React from 'react'; import { render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; -import { black } from '../../styles/themes/v2/colors'; import SegmentedButtons from '../SegmentedButtons/SegmentedButtons'; import { getDisabledSegmentedButtonStyle, @@ -56,22 +54,16 @@ it('renders checked segmented button with selected check', async () => { describe('getSegmentedButtonColors', () => { it.each` - theme | disabled | checked | checkedColor | uncheckedColor | expected - ${getTheme()} | ${false} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSecondaryContainer} - ${getTheme()} | ${false} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurface} - ${getTheme()} | ${true} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} - ${getTheme()} | ${true} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} - ${getTheme()} | ${false} | ${true} | ${'a125f5'} | ${undefined} | ${'a125f5'} - ${getTheme()} | ${false} | ${false} | ${undefined} | ${'000'} | ${'000'} - ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${'000'} | ${'000'} - ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${undefined} | ${getTheme().colors.onSurface} - ${getTheme()} | ${false} | ${true} | ${undefined} | ${'000'} | ${getTheme().colors.onSecondaryContainer} - ${getTheme(false, false)} | ${false} | ${false} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.primary} - ${getTheme(false, false)} | ${false} | ${true} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.primary} - ${getTheme(false, false)} | ${true} | ${false} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.disabled} - ${getTheme(false, false)} | ${true} | ${true} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.disabled} - ${getTheme(false, false)} | ${false} | ${false} | ${'a125f5'} | ${undefined} | ${getTheme(false, false).colors.primary} - ${getTheme(false, false)} | ${false} | ${true} | ${undefined} | ${'000'} | ${getTheme(false, false).colors.primary} + theme | disabled | checked | checkedColor | uncheckedColor | expected + ${getTheme()} | ${false} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSecondaryContainer} + ${getTheme()} | ${false} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurface} + ${getTheme()} | ${true} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} + ${getTheme()} | ${true} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} + ${getTheme()} | ${false} | ${true} | ${'a125f5'} | ${undefined} | ${'a125f5'} + ${getTheme()} | ${false} | ${false} | ${undefined} | ${'000'} | ${'000'} + ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${'000'} | ${'000'} + ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${undefined} | ${getTheme().colors.onSurface} + ${getTheme()} | ${false} | ${true} | ${undefined} | ${'000'} | ${getTheme().colors.onSecondaryContainer} `( 'returns $expected when disabled: $disabled, checked: $checked, checkedColor is $checkedColor and uncheckedColor is $uncheckedColor and isV3: $theme.isV3', ({ theme, disabled, checked, checkedColor, uncheckedColor, expected }) => { @@ -97,25 +89,10 @@ describe('getSegmentedButtonColors', () => { ).toMatchObject({ backgroundColor: getTheme().colors.secondaryContainer }); }); - it('should return correct background color when checked and theme version 2', () => { + it('should return correct background color when uncheked', () => { expect( getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: false, - checked: true, - }) - ).toMatchObject({ - backgroundColor: color(getTheme(false, false).colors.primary) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return correct background color when uncheked (V3 & V2)', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), + theme: getTheme(), disabled: false, checked: false, }) @@ -136,18 +113,6 @@ describe('getSegmentedButtonColors', () => { }); }); - it('should return correct border color with theme version 2', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: false, - checked: false, - }) - ).toMatchObject({ - borderColor: color(black).alpha(0.29).rgb().string(), - }); - }); - it('should return correct border color when disabled and theme version 3', () => { expect( getSegmentedButtonColors({ @@ -172,18 +137,6 @@ describe('getSegmentedButtonColors', () => { }); }); - it('should return correct textColor with theme version 2', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: false, - checked: false, - }) - ).toMatchObject({ - textColor: getTheme(false, false).colors.primary, - }); - }); - it('should return correct textColor when disabled and theme version 3', () => { expect( getSegmentedButtonColors({ @@ -195,18 +148,6 @@ describe('getSegmentedButtonColors', () => { textColor: getTheme().colors.onSurfaceDisabled, }); }); - - it('should return correct textColor when disabled and theme version 2', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: true, - checked: false, - }) - ).toMatchObject({ - textColor: getTheme(false, false).colors.disabled, - }); - }); }); describe('getDisabledSegmentedButtonBorderWidth', () => { 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 e475b9a166..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(); }); @@ -62,16 +62,6 @@ describe('getSwitchColor - checked color', () => { checkedColor: getTheme().colors.primary, }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getSwitchColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - checkedColor: getTheme(false, false).colors.accent, - }); - }); }); describe('getSwitchColor - thumb tint color', () => { @@ -163,24 +153,12 @@ describe('getSwitchColor - on tint color', () => { }); }); - it('should return checked color for iOS platform, for theme version 2', () => { - Platform.OS = 'ios'; - - expect( - getSwitchColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - onTintColor: getTheme(false, false).colors.accent, - }); - }); - it('should return custom color for iOS platform', () => { Platform.OS = 'ios'; expect( getSwitchColor({ - theme: getTheme(false, false), + theme: getTheme(), color: 'purple', }) ).toMatchObject({ @@ -201,17 +179,6 @@ describe('getSwitchColor - on tint color', () => { }); }); - it('should return correct disabled color, for theme version 2, dark mode', () => { - expect( - getSwitchColor({ - theme: getTheme(true, false), - disabled: true, - }) - ).toMatchObject({ - onTintColor: color(white).alpha(0.1).rgb().string(), - }); - }); - it('should return correct disabled color, light mode', () => { expect( getSwitchColor({ diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx index e190a537d6..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} /> ); @@ -551,17 +551,6 @@ describe('getFlatInputColor - underline color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - underlineColorCustom: 'transparent', - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getFlatInputColors({ @@ -572,16 +561,6 @@ describe('getFlatInputColor - underline color', () => { }); }); - it('should return correct theme color, for theme version 2', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - underlineColorCustom: getTheme(false, false).colors.disabled, - }); - }); - it('should return custom color, no matter what the theme is', () => { expect( getFlatInputColors({ @@ -591,15 +570,6 @@ describe('getFlatInputColor - underline color', () => { ).toMatchObject({ underlineColorCustom: 'beige', }); - - expect( - getFlatInputColors({ - underlineColor: 'beige', - theme: getTheme(false, false), - }) - ).toMatchObject({ - underlineColorCustom: 'beige', - }); }); }); @@ -613,15 +583,6 @@ describe('getFlatInputColor - input text color', () => { ).toMatchObject({ inputTextColor: 'beige', }); - - expect( - getOutlinedInputColors({ - textColor: 'beige', - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: 'beige', - }); }); it('should return correct disabled color, for theme version 3', () => { @@ -635,20 +596,6 @@ describe('getFlatInputColor - input text color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getFlatInputColors({ @@ -658,16 +605,6 @@ describe('getFlatInputColor - input text color', () => { inputTextColor: getTheme().colors.onSurface, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: getTheme(false, false).colors.text, - }); - }); }); describe('getFlatInputColor - placeholder color', () => { @@ -682,17 +619,6 @@ describe('getFlatInputColor - placeholder color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.disabled, - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getFlatInputColors({ @@ -702,16 +628,6 @@ describe('getFlatInputColor - placeholder color', () => { placeholderColor: getTheme().colors.onSurfaceVariant, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.placeholder, - }); - }); }); describe('getFlatInputColor - background color', () => { @@ -740,17 +656,6 @@ describe('getFlatInputColor - background color', () => { }); }); - it('should return undefined when disabled, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - backgroundColor: undefined, - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getFlatInputColors({ @@ -760,32 +665,6 @@ describe('getFlatInputColor - background color', () => { backgroundColor: getTheme().colors.surfaceVariant, }); }); - - it('should return correct theme color, for theme version 2, light mode', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - backgroundColor: color(getTheme(false, false).colors?.background) - .darken(0.06) - .rgb() - .string(), - }); - }); - - it('should return correct theme color, for theme version 2, dark mode', () => { - expect( - getFlatInputColors({ - theme: getTheme(true, false), - }) - ).toMatchObject({ - backgroundColor: color(getTheme(true, false).colors?.background) - .lighten(0.24) - .rgb() - .string(), - }); - }); }); describe('getFlatInputColor - error color', () => { @@ -802,10 +681,10 @@ describe('getFlatInputColor - error color', () => { expect( getFlatInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(), }) ).toMatchObject({ - errorColor: getTheme(false, true).colors.error, + errorColor: getTheme().colors.error, }); }); }); @@ -822,20 +701,6 @@ describe('getFlatInputColor - active color', () => { }); }); - it('should return disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - activeColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); - it('should return correct active color, if error, no matter what the theme is', () => { expect( getFlatInputColors({ @@ -849,10 +714,10 @@ describe('getFlatInputColor - active color', () => { expect( getFlatInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(), }) ).toMatchObject({ - activeColor: getTheme(false, true).colors.error, + activeColor: getTheme().colors.error, }); }); @@ -865,15 +730,6 @@ describe('getFlatInputColor - active color', () => { ).toMatchObject({ activeColor: 'beige', }); - - expect( - getFlatInputColors({ - activeUnderlineColor: 'beige', - theme: getTheme(false, false), - }) - ).toMatchObject({ - activeColor: 'beige', - }); }); it('should return theme active color, for theme version 3', () => { @@ -885,16 +741,6 @@ describe('getFlatInputColor - active color', () => { activeColor: getTheme().colors.primary, }); }); - - it('should return theme active color, for theme version 2', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, true), - }) - ).toMatchObject({ - activeColor: getTheme(false, true).colors.primary, - }); - }); }); describe('getOutlinedInputColors - outline color', () => { @@ -920,29 +766,6 @@ describe('getOutlinedInputColors - outline color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - outlineColor: getTheme(false, false).colors.disabled, - }); - }); - - it('should return custom color as disabled, when it is transparent, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - customOutlineColor: 'transparent', - theme: getTheme(false, false), - }) - ).toMatchObject({ - outlineColor: 'transparent', - }); - }); - it('should return custom color, if not disabled, no matter what the theme is', () => { expect( getOutlinedInputColors({ @@ -952,15 +775,6 @@ describe('getOutlinedInputColors - outline color', () => { ).toMatchObject({ outlineColor: 'beige', }); - - expect( - getOutlinedInputColors({ - customOutlineColor: 'beige', - theme: getTheme(false, false), - }) - ).toMatchObject({ - outlineColor: 'beige', - }); }); it('should return theme color, for theme version 3', () => { @@ -972,16 +786,6 @@ describe('getOutlinedInputColors - outline color', () => { outlineColor: getTheme().colors.outline, }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - outlineColor: getTheme(false, false).colors.placeholder, - }); - }); }); describe('getOutlinedInputColors - input text color', () => { @@ -996,20 +800,6 @@ describe('getOutlinedInputColors - input text color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getOutlinedInputColors({ @@ -1019,16 +809,6 @@ describe('getOutlinedInputColors - input text color', () => { inputTextColor: getTheme().colors.onSurface, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: getTheme(false, false).colors.text, - }); - }); }); describe('getOutlinedInputColors - placeholder color', () => { @@ -1043,17 +823,6 @@ describe('getOutlinedInputColors - placeholder color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.disabled, - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getOutlinedInputColors({ @@ -1063,16 +832,6 @@ describe('getOutlinedInputColors - placeholder color', () => { placeholderColor: getTheme().colors.onSurfaceVariant, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.placeholder, - }); - }); }); describe('getOutlinedInputColors - error color', () => { @@ -1089,10 +848,10 @@ describe('getOutlinedInputColors - error color', () => { expect( getOutlinedInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(), }) ).toMatchObject({ - errorColor: getTheme(false, true).colors.error, + errorColor: getTheme().colors.error, }); }); }); @@ -1109,20 +868,6 @@ describe('getOutlinedInputColors - active color', () => { }); }); - it('should return disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - activeColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); - it('should return correct active color, if error, no matter what the theme is', () => { expect( getOutlinedInputColors({ @@ -1136,10 +881,10 @@ describe('getOutlinedInputColors - active color', () => { expect( getOutlinedInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(), }) ).toMatchObject({ - activeColor: getTheme(false, true).colors.error, + activeColor: getTheme().colors.error, }); }); @@ -1152,15 +897,6 @@ describe('getOutlinedInputColors - active color', () => { ).toMatchObject({ activeColor: 'beige', }); - - expect( - getOutlinedInputColors({ - activeOutlineColor: 'beige', - theme: getTheme(false, false), - }) - ).toMatchObject({ - activeColor: 'beige', - }); }); it('should return theme active color, for theme version 3', () => { @@ -1172,16 +908,6 @@ describe('getOutlinedInputColors - active color', () => { activeColor: getTheme().colors.primary, }); }); - - it('should return theme active color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false, true), - }) - ).toMatchObject({ - activeColor: getTheme(false, true).colors.primary, - }); - }); }); describe('outlineStyle - underlineStyle', () => { diff --git a/src/components/__tests__/ToggleButton.test.tsx b/src/components/__tests__/ToggleButton.test.tsx index 3ab234d0f3..a0e2bbafcb 100644 --- a/src/components/__tests__/ToggleButton.test.tsx +++ b/src/components/__tests__/ToggleButton.test.tsx @@ -68,18 +68,6 @@ describe('getToggleButtonColor', () => { ); }); - it('should return correct color when checked and theme version 2', () => { - expect( - getToggleButtonColor({ theme: getTheme(false, false), checked: true }) - ).toBe('rgba(0, 0, 0, .08)'); - }); - - it('should return correct color when checked and theme version 2, dark theme', () => { - expect( - getToggleButtonColor({ theme: getTheme(true, false), checked: true }) - ).toBe('rgba(255, 255, 255, .12)'); - }); - it('should return transparent color when not checked', () => { expect(getToggleButtonColor({ theme: getTheme(), checked: false })).toBe( 'transparent' diff --git a/src/components/__tests__/Typography/Caption.test.tsx b/src/components/__tests__/Typography/Caption.test.tsx deleted file mode 100644 index b85bee50d4..0000000000 --- a/src/components/__tests__/Typography/Caption.test.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import { StyleSheet } from 'react-native'; - -import { render } from '@testing-library/react-native'; - -import { red500 } from '../../../styles/themes/v2/colors'; -import Caption from '../../Typography/v2/Caption'; - -const style = StyleSheet.create({ - caption: { - fontSize: 20, - color: red500, - }, -}); - -it('renders caption with children as content', () => { - const tree = render(Caption content).toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders caption applying style', () => { - const tree = render( - Big and red caption - ).toJSON(); - - expect(tree).toMatchSnapshot(); -}); diff --git a/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap b/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap deleted file mode 100644 index 1120e943ca..0000000000 --- a/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap +++ /dev/null @@ -1,74 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders caption applying style 1`] = ` - - Big and red caption - -`; - -exports[`renders caption with children as content 1`] = ` - - Caption content - -`; diff --git a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap index 82de8f4700..c29bff7736 100644 --- a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap @@ -47,7 +47,6 @@ exports[`renders animated fab 1`] = ` collapsable={false} style={ [ - false, { "height": 56, }, @@ -343,7 +342,6 @@ exports[`renders animated fab with label on the left 1`] = ` collapsable={false} style={ [ - false, { "height": 56, }, @@ -641,7 +639,6 @@ exports[`renders animated fab with label on the right by default 1`] = ` collapsable={false} style={ [ - false, { "height": 56, }, 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__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap index 233db83d56..dec2427d48 100644 --- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap @@ -239,7 +239,6 @@ exports[`render visible banner, with custom theme 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -667,7 +666,6 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -942,7 +940,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -1092,7 +1089,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap index 3a1b948fc9..aa734f554c 100644 --- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap @@ -182,9 +182,6 @@ exports[`allows customizing Route's type via generics 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -205,15 +202,10 @@ exports[`allows customizing Route's type via generics 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -248,9 +240,6 @@ exports[`allows customizing Route's type via generics 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -269,9 +258,6 @@ exports[`allows customizing Route's type via generics 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -325,7 +311,6 @@ exports[`allows customizing Route's type via generics 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -486,9 +471,6 @@ exports[`allows customizing Route's type via generics 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -509,15 +491,10 @@ exports[`allows customizing Route's type via generics 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -535,9 +512,6 @@ exports[`allows customizing Route's type via generics 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -556,9 +530,6 @@ exports[`allows customizing Route's type via generics 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -612,7 +583,6 @@ exports[`allows customizing Route's type via generics 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -927,9 +897,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -951,15 +918,10 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -994,9 +956,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -1045,9 +1004,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -1160,9 +1116,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -1184,15 +1137,10 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -1210,9 +1158,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -1261,9 +1206,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -1376,9 +1318,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -1400,15 +1339,10 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -1426,9 +1360,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -1477,9 +1408,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -1746,9 +1674,6 @@ exports[`hides labels in shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -1770,15 +1695,10 @@ exports[`hides labels in shifting bottom navigation 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -1813,9 +1733,6 @@ exports[`hides labels in shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -1972,9 +1889,6 @@ exports[`hides labels in shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -1996,15 +1910,10 @@ exports[`hides labels in shifting bottom navigation 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -2022,9 +1931,6 @@ exports[`hides labels in shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -2181,9 +2087,6 @@ exports[`hides labels in shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -2205,15 +2108,10 @@ exports[`hides labels in shifting bottom navigation 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -2231,9 +2129,6 @@ exports[`hides labels in shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -2700,9 +2595,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -2723,15 +2615,10 @@ exports[`renders bottom navigation with getLazy 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -2766,9 +2653,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -2817,9 +2701,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -2903,7 +2784,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -3064,9 +2944,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -3087,15 +2964,10 @@ exports[`renders bottom navigation with getLazy 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -3113,9 +2985,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -3164,9 +3033,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -3250,7 +3116,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -3411,9 +3276,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -3434,15 +3296,10 @@ exports[`renders bottom navigation with getLazy 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -3460,9 +3317,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -3511,9 +3365,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -3597,7 +3448,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -3758,9 +3608,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -3781,15 +3628,10 @@ exports[`renders bottom navigation with getLazy 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -3807,9 +3649,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -3858,9 +3697,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -3944,7 +3780,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -4105,9 +3940,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -4128,15 +3960,10 @@ exports[`renders bottom navigation with getLazy 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -4154,9 +3981,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -4205,9 +4029,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -4291,7 +4112,6 @@ exports[`renders bottom navigation with getLazy 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -4602,9 +4422,6 @@ exports[`renders bottom navigation with scene animation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -4788,7 +4605,6 @@ exports[`renders bottom navigation with scene animation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -4885,9 +4701,6 @@ exports[`renders bottom navigation with scene animation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -5054,7 +4867,6 @@ exports[`renders bottom navigation with scene animation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -5151,9 +4963,6 @@ exports[`renders bottom navigation with scene animation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -5320,7 +5129,6 @@ exports[`renders bottom navigation with scene animation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -5417,9 +5225,6 @@ exports[`renders bottom navigation with scene animation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -5586,7 +5391,6 @@ exports[`renders bottom navigation with scene animation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -5683,9 +5487,6 @@ exports[`renders bottom navigation with scene animation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -5852,7 +5653,6 @@ exports[`renders bottom navigation with scene animation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -6103,9 +5903,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -6126,15 +5923,10 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -6169,9 +5961,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -6190,9 +5979,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -6246,7 +6032,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -6334,9 +6119,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -6357,15 +6139,10 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -6383,9 +6160,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -6404,9 +6178,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -6460,7 +6231,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -6548,9 +6318,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -6571,15 +6338,10 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -6597,9 +6359,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -6618,9 +6377,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -6674,7 +6430,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -6916,9 +6671,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -7042,7 +6794,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -7103,9 +6854,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -7212,7 +6960,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -7273,9 +7020,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -7382,7 +7126,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -7443,9 +7186,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -7552,7 +7292,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -7613,9 +7352,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -7722,7 +7458,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -7937,9 +7672,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -7960,15 +7692,10 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -8003,9 +7730,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -8054,9 +7778,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -8140,7 +7861,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -8301,9 +8021,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -8324,15 +8041,10 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -8350,9 +8062,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -8401,9 +8110,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -8487,7 +8193,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -8648,9 +8353,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -8671,15 +8373,10 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -8697,9 +8394,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -8748,9 +8442,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -8834,7 +8525,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -9149,9 +8839,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -9335,7 +9022,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -9432,9 +9118,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -9601,7 +9284,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -9698,9 +9380,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -9867,7 +9546,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -10118,9 +9796,6 @@ exports[`renders non-shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -10141,15 +9816,10 @@ exports[`renders non-shifting bottom navigation 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -10184,9 +9854,6 @@ exports[`renders non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -10235,9 +9902,6 @@ exports[`renders non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -10321,7 +9985,6 @@ exports[`renders non-shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -10482,9 +10145,6 @@ exports[`renders non-shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -10505,15 +10165,10 @@ exports[`renders non-shifting bottom navigation 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -10531,9 +10186,6 @@ exports[`renders non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -10582,9 +10234,6 @@ exports[`renders non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -10668,7 +10317,6 @@ exports[`renders non-shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -10829,9 +10477,6 @@ exports[`renders non-shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -10852,15 +10497,10 @@ exports[`renders non-shifting bottom navigation 1`] = ` [ { "alignSelf": "center", - "height": 24, - "marginHorizontal": 12, - "marginTop": 2, - "width": 24, - }, - { "height": 32, "justifyContent": "center", "marginBottom": 4, + "marginHorizontal": 12, "marginTop": 0, "width": 32, }, @@ -10878,9 +10518,6 @@ exports[`renders non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -10929,9 +10566,6 @@ exports[`renders non-shifting bottom navigation 1`] = ` "left": 0, "position": "absolute", "right": 0, - "top": 0, - }, - { "top": 4, }, { @@ -11015,7 +10649,6 @@ exports[`renders non-shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -11330,9 +10963,6 @@ exports[`renders shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -11516,7 +11146,6 @@ exports[`renders shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -11613,9 +11242,6 @@ exports[`renders shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -11782,7 +11408,6 @@ exports[`renders shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -11879,9 +11504,6 @@ exports[`renders shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -12048,7 +11670,6 @@ exports[`renders shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -12145,9 +11766,6 @@ exports[`renders shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -12314,7 +11932,6 @@ exports[`renders shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > @@ -12411,9 +12028,6 @@ exports[`renders shifting bottom navigation 1`] = ` [ { "flex": 1, - "paddingVertical": 6, - }, - { "paddingVertical": 0, }, ] @@ -12580,7 +12194,6 @@ exports[`renders shifting bottom navigation 1`] = ` "height": 16, "paddingBottom": 2, }, - false, ] } > diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap index 94e937298b..57553b7201 100644 --- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap @@ -122,7 +122,6 @@ exports[`renders button with an accessibility hint 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -273,7 +272,6 @@ exports[`renders button with an accessibility label 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -307,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": { @@ -324,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", @@ -423,7 +421,6 @@ exports[`renders button with button color 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -573,14 +570,13 @@ exports[`renders button with color 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, undefined, false, { - "color": "#e91e63", + "color": "rgba(152, 105, 119, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -723,7 +719,6 @@ exports[`renders button with custom testID 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -922,7 +917,6 @@ exports[`renders button with icon 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 16, }, @@ -1123,7 +1117,6 @@ exports[`renders button with icon in reverse order 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 16, }, @@ -1273,7 +1266,6 @@ exports[`renders contained contained with mode 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, @@ -1424,7 +1416,6 @@ exports[`renders disabled button 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -1793,7 +1784,6 @@ exports[`renders loading button 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 16, }, @@ -1943,7 +1933,6 @@ exports[`renders outlined button with mode 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, @@ -2094,7 +2083,6 @@ exports[`renders text button by default 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -2244,7 +2232,6 @@ exports[`renders text button with mode 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap index 2994761722..b796d32b32 100644 --- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap @@ -94,11 +94,8 @@ exports[`renders chip with close button 1`] = ` { "alignItems": "center", "flexDirection": "row", - "paddingLeft": 4, - "position": "relative", - }, - { "paddingLeft": 0, + "position": "relative", }, { "paddingRight": 34, @@ -112,8 +109,6 @@ exports[`renders chip with close button 1`] = ` { "alignSelf": "center", "padding": 4, - }, - { "paddingLeft": 8, "paddingRight": 0, }, @@ -248,9 +243,8 @@ exports[`renders chip with close button 1`] = ` { "alignSelf": "center", "padding": 4, - }, - { - "marginRight": 4, + "paddingLeft": 8, + "paddingRight": 0, }, { "marginRight": 8, @@ -389,11 +383,8 @@ exports[`renders chip with custom close button 1`] = ` { "alignItems": "center", "flexDirection": "row", - "paddingLeft": 4, - "position": "relative", - }, - { "paddingLeft": 0, + "position": "relative", }, { "paddingRight": 34, @@ -407,8 +398,6 @@ exports[`renders chip with custom close button 1`] = ` { "alignSelf": "center", "padding": 4, - }, - { "paddingLeft": 8, "paddingRight": 0, }, @@ -543,9 +532,8 @@ exports[`renders chip with custom close button 1`] = ` { "alignSelf": "center", "padding": 4, - }, - { - "marginRight": 4, + "paddingLeft": 8, + "paddingRight": 0, }, { "marginRight": 8, @@ -684,11 +672,8 @@ exports[`renders chip with icon 1`] = ` { "alignItems": "center", "flexDirection": "row", - "paddingLeft": 4, - "position": "relative", - }, - { "paddingLeft": 0, + "position": "relative", }, { "paddingRight": 0, @@ -702,8 +687,6 @@ exports[`renders chip with icon 1`] = ` { "alignSelf": "center", "padding": 4, - }, - { "paddingLeft": 8, "paddingRight": 0, }, @@ -886,11 +869,8 @@ exports[`renders chip with onPress 1`] = ` { "alignItems": "center", "flexDirection": "row", - "paddingLeft": 4, - "position": "relative", - }, - { "paddingLeft": 0, + "position": "relative", }, { "paddingRight": 0, @@ -1043,11 +1023,8 @@ exports[`renders outlined disabled chip 1`] = ` { "alignItems": "center", "flexDirection": "row", - "paddingLeft": 4, - "position": "relative", - }, - { "paddingLeft": 0, + "position": "relative", }, { "paddingRight": 0, @@ -1200,11 +1177,8 @@ exports[`renders selected chip 1`] = ` { "alignItems": "center", "flexDirection": "row", - "paddingLeft": 4, - "position": "relative", - }, - { "paddingLeft": 0, + "position": "relative", }, { "paddingRight": 0, @@ -1218,8 +1192,6 @@ exports[`renders selected chip 1`] = ` { "alignSelf": "center", "padding": 4, - }, - { "paddingLeft": 8, "paddingRight": 0, }, diff --git a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap index a6ffbfcb06..59e80d0aef 100644 --- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap @@ -1801,7 +1801,6 @@ exports[`DataTable.Pagination renders data table pagination with options select "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, diff --git a/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap b/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap index 78e3ed8612..b2556d719e 100644 --- a/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap @@ -39,21 +39,18 @@ exports[`renders DrawerItem with icon 1`] = ` "overflow": "hidden", }, [ - { - "marginHorizontal": 10, - "marginVertical": 4, - }, - { - "backgroundColor": undefined, - "borderRadius": 28, - }, { "height": 56, "justifyContent": "center", + "marginHorizontal": 10, "marginLeft": 12, "marginRight": 12, "marginVertical": 0, }, + { + "backgroundColor": undefined, + "borderRadius": 28, + }, undefined, ], ] @@ -61,18 +58,13 @@ exports[`renders DrawerItem with icon 1`] = ` > @@ -209,7 +207,7 @@ exports[`renders list section with custom title style 1`] = ` "lineHeight": 20, }, { - "color": "#f44336", + "color": "rgba(220, 54, 46, 1)", }, ], ], @@ -697,9 +695,7 @@ exports[`renders list section with subheader 1`] = ` "lineHeight": 20, }, }, - "isV3": true, "roundness": 4, - "version": 3, } } > @@ -1222,9 +1218,7 @@ exports[`renders list section without subheader 1`] = ` "lineHeight": 20, }, }, - "isV3": true, "roundness": 4, - "version": 3, } } > diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap index 801552dab1..560cabe7a6 100644 --- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap @@ -134,7 +134,6 @@ exports[`renders menu with content styles 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, @@ -370,7 +369,6 @@ exports[`renders menu with content styles 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -407,7 +405,6 @@ exports[`renders menu with content styles 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", @@ -493,7 +490,6 @@ exports[`renders menu with content styles 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -530,7 +526,6 @@ exports[`renders menu with content styles 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", @@ -692,7 +687,6 @@ exports[`renders not visible menu 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, @@ -858,7 +852,6 @@ exports[`renders visible menu 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, @@ -1090,7 +1083,6 @@ exports[`renders visible menu 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -1127,7 +1119,6 @@ exports[`renders visible menu 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", @@ -1213,7 +1204,6 @@ exports[`renders visible menu 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -1250,7 +1240,6 @@ exports[`renders visible menu 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", diff --git a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap index e16c6134f4..a34067f576 100644 --- a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap @@ -67,7 +67,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="box-none" style={ [ - false, { "width": 24, }, @@ -108,7 +107,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -145,7 +143,6 @@ exports[`Menu Item renders menu item 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", @@ -231,7 +228,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="box-none" style={ [ - false, { "width": 24, }, @@ -272,7 +268,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -309,7 +304,6 @@ exports[`Menu Item renders menu item 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", @@ -395,7 +389,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="box-none" style={ [ - false, { "width": 24, }, @@ -436,7 +429,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -473,7 +465,6 @@ exports[`Menu Item renders menu item 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 0.38)", "fontFamily": "System", @@ -559,7 +550,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="box-none" style={ [ - false, { "width": 24, }, @@ -600,7 +590,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -637,7 +626,6 @@ exports[`Menu Item renders menu item 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 0.38)", "fontFamily": "System", @@ -723,7 +711,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -760,7 +747,6 @@ exports[`Menu Item renders menu item 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap index 9fdd75d4dc..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 dd6fce81c3..91d21456d1 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -19,15 +19,12 @@ exports[`call onPress when affix adornment pressed 1`] = ` [ { "bottom": 0, - "height": 2, + "height": 1, "left": 0, "position": "absolute", "right": 0, "zIndex": 1, }, - { - "height": 1, - }, { "backgroundColor": "rgba(73, 69, 79, 1)", "transform": [ @@ -325,15 +322,12 @@ exports[`correctly applies a component as the text label 1`] = ` [ { "bottom": 0, - "height": 2, + "height": 1, "left": 0, "position": "absolute", "right": 0, "zIndex": 1, }, - { - "height": 1, - }, { "backgroundColor": "rgba(73, 69, 79, 1)", "transform": [ @@ -450,7 +444,7 @@ exports[`correctly applies a component as the text label 1`] = ` @@ -496,7 +490,7 @@ exports[`correctly applies a component as the text label 1`] = ` @@ -575,15 +569,12 @@ exports[`correctly applies cursorColor prop 1`] = ` [ { "bottom": 0, - "height": 2, + "height": 1, "left": 0, "position": "absolute", "right": 0, "zIndex": 1, }, - { - "height": 1, - }, { "backgroundColor": "rgba(73, 69, 79, 1)", "transform": [ @@ -741,7 +732,7 @@ exports[`correctly applies cursorColor prop 1`] = ` { - const isOnlyVersionInTheme = - props.theme && Object.keys(props.theme).length === 1 && props.theme.version; - const colorSchemeName = - ((!props.theme || isOnlyVersionInTheme) && Appearance?.getColorScheme()) || - 'light'; + (!props.theme && Appearance?.getColorScheme()) || 'light'; const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(false); @@ -59,13 +55,13 @@ const PaperProvider = (props: Props) => { React.useEffect(() => { let appearanceSubscription: NativeEventSubscription | undefined; - if (!props.theme || isOnlyVersionInTheme) { + if (!props.theme) { appearanceSubscription = Appearance?.addChangeListener( handleAppearanceChange ) as NativeEventSubscription | undefined; } return () => { - if (!props.theme || isOnlyVersionInTheme) { + if (!props.theme) { if (appearanceSubscription) { appearanceSubscription.remove(); } else { @@ -74,7 +70,7 @@ const PaperProvider = (props: Props) => { } } }; - }, [props.theme, isOnlyVersionInTheme]); + }, [props.theme]); const theme = React.useMemo(() => { const scheme = colorScheme || 'light'; @@ -91,8 +87,6 @@ const PaperProvider = (props: Props) => { return { ...extendedThemeBase, - // TODO: Remove it completely - isV3: true, }; }, [colorScheme, props.theme, reduceMotionEnabled]); diff --git a/src/core/__tests__/PaperProvider.test.tsx b/src/core/__tests__/PaperProvider.test.tsx index 11c4beff49..84bd950eca 100644 --- a/src/core/__tests__/PaperProvider.test.tsx +++ b/src/core/__tests__/PaperProvider.test.tsx @@ -8,12 +8,7 @@ import { import { render, act } from '@testing-library/react-native'; -import { - MD2LightTheme, - MD2DarkTheme, - MD3LightTheme, - MD3DarkTheme, -} from '../../styles/themes'; +import { MD3LightTheme, MD3DarkTheme } from '../../styles/themes'; import type { ThemeProp } from '../../types'; import PaperProvider from '../PaperProvider'; import { useTheme } from '../theming'; @@ -107,9 +102,6 @@ const createProvider = (theme?: ThemeProp) => { ); }; -const ExtendedLightTheme = { ...MD3LightTheme, isV3: true } as ThemeProp; -const ExtendedDarkTheme = { ...MD3DarkTheme, isV3: true } as ThemeProp; - describe('PaperProvider', () => { beforeEach(() => { jest.resetModules(); @@ -119,11 +111,11 @@ describe('PaperProvider', () => { mockAppearance(); const { getByTestId } = render(createProvider()); expect(getByTestId('provider-child-view').props.theme).toStrictEqual( - ExtendedLightTheme + MD3LightTheme ); act(() => Appearance.__internalListeners[0]({ colorScheme: 'dark' })); expect(getByTestId('provider-child-view').props.theme).toStrictEqual( - ExtendedDarkTheme + MD3DarkTheme ); }); @@ -158,18 +150,18 @@ describe('PaperProvider', () => { getByTestId('provider-child-view').props.theme.animation.scale ).toStrictEqual(0); - rerender(createProvider(ExtendedLightTheme)); + rerender(createProvider(MD3LightTheme)); expect(AccessibilityInfo.removeEventListener).toHaveBeenCalled(); }); it('should not set AccessibilityInfo listeners, if there is a theme', async () => { mockAppearance(); - const { getByTestId } = render(createProvider(ExtendedDarkTheme)); + const { getByTestId } = render(createProvider(MD3DarkTheme)); expect(AccessibilityInfo.addEventListener).not.toHaveBeenCalled(); expect(AccessibilityInfo.removeEventListener).not.toHaveBeenCalled(); expect(getByTestId('provider-child-view').props.theme).toStrictEqual( - ExtendedDarkTheme + MD3DarkTheme ); }); @@ -180,18 +172,18 @@ describe('PaperProvider', () => { expect(Appearance.addChangeListener).toHaveBeenCalled(); act(() => Appearance.__internalListeners[0]({ colorScheme: 'dark' })); expect(getByTestId('provider-child-view').props.theme).toStrictEqual( - ExtendedDarkTheme + MD3DarkTheme ); }); it('should not set Appearance listeners, if the theme is passed', async () => { mockAppearance(); - const { getByTestId } = render(createProvider(ExtendedLightTheme)); + const { getByTestId } = render(createProvider(MD3LightTheme)); expect(Appearance.addChangeListener).not.toHaveBeenCalled(); expect(Appearance.removeChangeListener).not.toHaveBeenCalled(); expect(getByTestId('provider-child-view').props.theme).toStrictEqual( - ExtendedLightTheme + MD3LightTheme ); }); @@ -202,14 +194,14 @@ describe('PaperProvider', () => { const { getByTestId } = render(createProvider()); expect(Appearance).toEqual(null); expect(getByTestId('provider-child-view').props.theme).toStrictEqual( - ExtendedLightTheme + MD3LightTheme ); }); it.each` - label | theme | colorScheme - ${'default theme'} | ${ExtendedLightTheme} | ${'light'} - ${'dark theme'} | ${ExtendedDarkTheme} | ${'dark'} + label | theme | colorScheme + ${'default theme'} | ${MD3LightTheme} | ${'light'} + ${'dark theme'} | ${MD3DarkTheme} | ${'dark'} `( 'provides $label for $colorScheme color scheme', async ({ theme, colorScheme }) => { @@ -225,9 +217,9 @@ describe('PaperProvider', () => { it('uses provided custom theme', async () => { mockAppearance(); const customTheme = { - ...ExtendedLightTheme, + ...MD3LightTheme, colors: { - ...ExtendedLightTheme.colors, + ...MD3LightTheme.colors, primary: 'tomato', accent: 'yellow', }, @@ -239,17 +231,15 @@ describe('PaperProvider', () => { }); it.each` - version | colorScheme | expectedTheme - ${2} | ${'light'} | ${MD2LightTheme} - ${2} | ${'dark'} | ${MD2DarkTheme} - ${3} | ${'light'} | ${MD3LightTheme} - ${3} | ${'dark'} | ${MD3DarkTheme} + colorScheme | expectedTheme + ${'light'} | ${MD3LightTheme} + ${'dark'} | ${MD3DarkTheme} `( 'uses correct theme, $colorScheme mode, version $version', - async ({ version, colorScheme, expectedTheme }) => { + async ({ colorScheme, expectedTheme }) => { mockAppearance(); (Appearance.getColorScheme as jest.Mock).mockReturnValue(colorScheme); - const { getByTestId } = render(createProvider({ version })); + const { getByTestId } = render(createProvider()); expect(getByTestId('provider-child-view').props.theme).toStrictEqual( expectedTheme diff --git a/src/index.tsx b/src/index.tsx index 40757a1158..8bdc5009e0 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -55,13 +55,6 @@ export { default as ToggleButton } from './components/ToggleButton'; export { default as SegmentedButtons } from './components/SegmentedButtons/SegmentedButtons'; export { default as Tooltip } from './components/Tooltip/Tooltip'; -export { - Caption, - Headline, - Paragraph, - Subheading, - Title, -} from './components/Typography/v2'; export { default as Text, customText } from './components/Typography/Text'; // Types @@ -141,11 +134,6 @@ export type { Props as ToggleButtonProps } from './components/ToggleButton/Toggl export type { Props as ToggleButtonGroupProps } from './components/ToggleButton/ToggleButtonGroup'; export type { Props as ToggleButtonRowProps } from './components/ToggleButton/ToggleButtonRow'; export type { Props as TouchableRippleProps } from './components/TouchableRipple/TouchableRipple'; -export type { Props as CaptionProps } from './components/Typography/v2/Caption'; -export type { Props as HeadlineProps } from './components/Typography/v2/Headline'; -export type { Props as ParagraphProps } from './components/Typography/v2/Paragraph'; -export type { Props as SubheadingProps } from './components/Typography/v2/Subheading'; -export type { Props as TitleProps } from './components/Typography/v2/Title'; export type { Props as TextProps } from './components/Typography/Text'; export type { Props as SegmentedButtonsProps } from './components/SegmentedButtons/SegmentedButtons'; export type { Props as ListImageProps } from './components/List/ListImage'; diff --git a/src/react-navigation/views/MaterialBottomTabView.tsx b/src/react-navigation/views/MaterialBottomTabView.tsx index df846ae2fb..98378e0c79 100644 --- a/src/react-navigation/views/MaterialBottomTabView.tsx +++ b/src/react-navigation/views/MaterialBottomTabView.tsx @@ -99,7 +99,6 @@ export default function MaterialBottomTabView({ ? options.title : (route as Route).name; }} - getColor={({ route }) => descriptors[route.key].options.tabBarColor} getBadge={({ route }) => descriptors[route.key].options.tabBarBadge} getAccessibilityLabel={({ route }) => descriptors[route.key].options.tabBarAccessibilityLabel diff --git a/src/styles/__tests__/fonts.test.js b/src/styles/__tests__/fonts.test.js index 07cbba45f8..5d1108767b 100644 --- a/src/styles/__tests__/fonts.test.js +++ b/src/styles/__tests__/fonts.test.js @@ -1,21 +1,6 @@ -import configureFonts, { fontConfig } from '../fonts'; +import configureFonts from '../fonts'; import { typescale } from '../themes/v3/tokens'; -const mockPlatform = (OS) => { - jest.resetModules(); - jest.doMock('react-native/Libraries/Utilities/Platform', () => ({ - OS, - select: (objs) => objs[OS], - })); -}; - -const customFont = { - custom: { - fontFamily: 'sans-serif', - fontWeight: 'bold', - }, -}; - const customFontV3 = { displayLarge: { fontFamily: 'NotoSans', @@ -135,63 +120,6 @@ const customFontV3 = { }; describe('configureFonts', () => { - // eslint-disable-next-line jest/no-disabled-tests - it.skip('adds custom fonts to the iOS config', () => { - mockPlatform('ios'); - expect( - configureFonts({ - config: { - ios: { - ...fontConfig.ios, - customFont, - }, - }, - isV3: false, - }) - ).toEqual({ - ...fontConfig.ios, - customFont, - }); - }); - - // eslint-disable-next-line jest/no-disabled-tests - it.skip('adds custom fonts to the Android config', () => { - mockPlatform('android'); - expect( - configureFonts({ - config: { - android: { - ...fontConfig.android, - customFont, - }, - }, - isV3: false, - }) - ).toEqual({ - ...fontConfig.android, - customFont, - }); - }); - - // eslint-disable-next-line jest/no-disabled-tests - it.skip('adds custom fonts to the Web config', () => { - mockPlatform('web'); - expect( - configureFonts({ - config: { - web: { - ...fontConfig.web, - customFont, - }, - }, - isV3: false, - }) - ).toEqual({ - ...fontConfig.web, - customFont, - }); - }); - it('overrides properties passed in config for all variants', () => { expect( configureFonts({ diff --git a/src/styles/themes/v2/colors.tsx b/src/styles/themes/v2/colors.tsx deleted file mode 100644 index e57f2c0fee..0000000000 --- a/src/styles/themes/v2/colors.tsx +++ /dev/null @@ -1,3 +0,0 @@ -// TODO: Remove it completely -export const black = '#000000'; -export const white = '#ffffff'; diff --git a/src/styles/themes/v3/DarkTheme.tsx b/src/styles/themes/v3/DarkTheme.tsx index 9823e677bd..246925859c 100644 --- a/src/styles/themes/v3/DarkTheme.tsx +++ b/src/styles/themes/v3/DarkTheme.tsx @@ -10,8 +10,6 @@ export const MD3DarkTheme: MD3Theme = { ...MD3LightTheme, dark: true, mode: 'adaptive', - version: 3, - isV3: true, colors: { primary: palette.primary80, primaryContainer: palette.primary30, diff --git a/src/styles/themes/v3/LightTheme.tsx b/src/styles/themes/v3/LightTheme.tsx index 99e0d11ab4..19ec23fcfc 100644 --- a/src/styles/themes/v3/LightTheme.tsx +++ b/src/styles/themes/v3/LightTheme.tsx @@ -9,8 +9,6 @@ const { palette, opacity } = tokens.md.ref; export const MD3LightTheme: MD3Theme = { dark: false, roundness: 4, - version: 3, - isV3: true, colors: { primary: palette.primary40, primaryContainer: palette.primary90, diff --git a/src/types.tsx b/src/types.tsx index cfa37779d0..24ad37883f 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -104,8 +104,6 @@ export type ThemeBase = { }; export type MD3Theme = ThemeBase & { - version: 3; - isV3: true; colors: MD3Colors; fonts: MD3Typescale; };